/* alwayslookaround — a museum hang on a neutral wall: equal mats, one centre line, the label beside the work,
   a fanned deck on a frosted shelf at the foot of the wall. Container units: the .site element is the room. */
:root{color-scheme:light}
html,body{height:100%;margin:0}
body{background:#efece6;color:#1f1d1b;font-family:'Instrument Sans',system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
.site{position:fixed;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);touch-action:manipulation;container-type:size;overflow:hidden;background:var(--s-bg);color:var(--s-fg);font-family:var(--s-ui);
  --s-ui:'Instrument Sans',system-ui,sans-serif;--s-serif:'Cormorant Garamond','Times New Roman',serif;--s-mono:'IBM Plex Mono',ui-monospace,monospace;
  --s-bg:#efece6;--s-surface:#fbfaf7;--s-fg:#1f1d1b;--s-muted:#6f6a63;--s-orange:#c4541a;--s-purple:#5b3f8f;--s-glass:rgba(239,236,230,.74);--s-frame:rgba(31,29,27,.82);--s-shadow:rgba(31,29,27,.22);--s-glow:.22;
  --gutter:3.5cqw;--top:9cqh;--arrow-room:6cqw;--side-w:15cqw;
  --card-h:min(12.5cqh,calc((100cqw - 2*var(--gutter) - 4cqw)/5.8/1.5));--card-w:calc(var(--card-h)*1.5);
  --strip-h:calc(var(--card-h)*1.16 + 4.6cqh);--stage-b:calc(var(--strip-h) + 1cqh);
  --fb-h:12.6cqh;
  --L:min(calc(100cqw - 2*(var(--arrow-room) + var(--gutter)) - 2*var(--side-w)),calc(100cqh - var(--top) - var(--stage-b) - 2.5cqh - var(--fb-h)))}
/* the feedback row under the print: three reactions, a count beside each; the visitor's own choice is filled in */
.feedback{position:absolute;left:50%;top:calc(50% + var(--L)/2 + 2.6cqh);translate:-50% -50%;display:flex;gap:1.6cqw;align-items:center;z-index:5}
.fb{display:inline-flex;align-items:center;gap:.5cqw;border:0;background:rgba(91,63,143,.14);color:var(--s-purple);padding:.5cqh 1.1cqw .5cqh .8cqw;border-radius:999px;cursor:pointer;font:500 max(11px,1.5cqh) var(--s-ui);transition:background .25s,color .25s,transform .2s}
.fb svg{width:max(16px,2.4cqh);height:max(16px,2.4cqh);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fb.on{background:var(--s-orange);color:#fff}
.fb.on svg{fill:currentColor;stroke:currentColor}
.fb .n{font-variant-numeric:tabular-nums;min-width:1.2em;text-align:left}
.fb.bump{transform:scale(1.12)}
.site.idle .feedback{opacity:1}
.commentrow{position:absolute;left:50%;top:calc(50% + var(--L)/2 + 6.7cqh);translate:-50% -50%;z-index:5}
.commentrow,.sharerow{white-space:nowrap}
.sharerow{position:absolute;left:50%;top:calc(50% + var(--L)/2 + 10.2cqh);translate:-50% -50%;z-index:5}
.sharerow .cbtn{font-size:max(10px,1.4cqh);color:var(--s-muted)}
.share{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(88cqw,56ch);max-height:84cqh;overflow:auto;z-index:8;background:var(--s-surface);border-radius:1.2cqh;box-shadow:0 0 0 1px var(--s-frame),0 2cqh 6cqh var(--s-shadow);padding:1.8cqh 2.2cqw;display:flex;flex-direction:column;gap:1.2cqh;scrollbar-width:thin}
.share-link{display:flex;gap:.8cqw;align-items:center}
.share-link input{flex:1;min-width:0;font:max(12px,1.5cqh) var(--s-mono);padding:.8cqh 1cqw;border:1px solid rgba(31,29,27,.2);border-radius:.8cqh;background:#fff;color:var(--s-fg)}
.share-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11ch,1fr));gap:.6cqh .8cqw}
.share-grid a,.share-grid button{display:flex;align-items:center;gap:.6cqw;font:500 max(11px,1.45cqh) var(--s-ui);letter-spacing:.03em;color:var(--s-fg);text-decoration:none;border:1px solid rgba(31,29,27,.18);border:1px solid color-mix(in oklab,var(--s-fg) 14%,transparent);background:none;border-radius:.8cqh;padding:.8cqh 1cqw;cursor:pointer;text-align:left;transition:border-color .25s,color .25s}
.share-grid svg{width:max(14px,2cqh);height:max(14px,2cqh);fill:currentColor;flex:none}
.site.idle .sharerow{opacity:1}
.cbtn{display:inline-flex;align-items:center;gap:.7cqw;border:0;background:none;color:var(--s-purple);cursor:pointer;font:500 max(11px,1.5cqh) var(--s-ui);letter-spacing:.04em;padding:.2cqh .6cqw;border-radius:999px;transition:color .25s}
.cbtn svg{width:max(16px,2.3cqh);height:max(16px,2.3cqh);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cbtn .n{font-variant-numeric:tabular-nums;background:rgba(91,63,143,.14);padding:.1cqh .7cqw;border-radius:999px;font-size:max(10px,1.3cqh)}
.site.idle .commentrow{opacity:1}
/* the comments panel */
.comments{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(88cqw,52ch);max-height:84cqh;overflow:auto;z-index:8;background:var(--s-surface);border-radius:1.2cqh;box-shadow:0 0 0 1px var(--s-frame),0 2cqh 6cqh var(--s-shadow);padding:1.8cqh 2.2cqw;display:flex;flex-direction:column;gap:1.2cqh;scrollbar-width:thin}
.comments[hidden],.share[hidden]{display:none}
.comments-head{display:flex;justify-content:space-between;align-items:center;font:500 max(12px,1.7cqh) var(--s-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--s-muted)}
.comments-list{display:flex;flex-direction:column;gap:1cqh}
.comment{padding:1cqh 0;border-bottom:1px solid rgba(31,29,27,.1)}
.comment b{display:block;font:500 max(11px,1.45cqh) var(--s-ui);color:var(--s-purple);letter-spacing:.04em}
.comment p{margin:.3cqh 0 0;font:max(12px,1.6cqh)/1.5 var(--s-ui);color:var(--s-fg);white-space:pre-wrap}
.comment small{font:max(9px,1.2cqh) var(--s-ui);color:var(--s-muted)}
.comments-empty{font:italic max(12px,1.7cqh) var(--s-serif);color:var(--s-muted)}
.comment-form{display:flex;flex-direction:column;gap:.8cqh}
.comment-form textarea,.comment-form input{font:max(12px,1.55cqh) var(--s-ui);padding:.9cqh 1.2cqw;border:1px solid rgba(31,29,27,.2);border-radius:.8cqh;background:#fff;color:var(--s-fg);width:100%;box-sizing:border-box}
.comment-row{display:flex;gap:.8cqw;align-items:center;flex-wrap:wrap}
.comment-row input{flex:1;min-width:12ch}
.comment-note{margin:0;font:max(9px,1.25cqh)/1.4 var(--s-ui);color:var(--s-muted)}
.comment-msg{font:max(10px,1.35cqh) var(--s-ui);color:var(--s-orange)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.stage{position:absolute;inset:var(--top) 0 calc(var(--stage-b) + var(--fb-h)) 0;display:grid;place-items:center;z-index:1}
.frame{position:relative;margin:0;width:var(--L);height:var(--L);display:grid;grid-template-columns:100%;grid-template-rows:100%;place-items:center;cursor:pointer}
.photo{grid-area:1/1;min-width:0;min-height:0;max-width:100%;max-height:100%;width:auto;height:auto;display:block;opacity:0;transform:scale(1.03);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease;padding:2.2cqh;background:var(--s-surface);box-shadow:0 0 0 1px var(--s-frame),0 1.6cqh 4cqh var(--s-shadow);box-sizing:border-box;object-fit:cover}
.photo.on{opacity:1;transform:none}
.photo.lq{filter:blur(1.2cqh)}
.glow{position:absolute;inset:-12%;pointer-events:none;z-index:0}
.glow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(5cqw) saturate(1.2);opacity:0;transition:opacity 1.2s ease}
.glow img.on{opacity:var(--s-glow)}
/* video: the poster hangs like a print; a play mark on it, and the film plays inside the same mat */
.play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(52px,9cqh);height:max(52px,9cqh);border:0;border-radius:50%;background:rgba(91,63,143,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:none;place-items:center;cursor:pointer;z-index:3;box-shadow:0 1cqh 3cqh rgba(31,29,27,.35);transition:background .3s,transform .3s}
.play svg{width:46%;height:46%;fill:currentColor;translate:6% 0}
.frame.is-video .play{display:grid}
.frame.playing .play{display:none}
.vid{position:absolute;left:50%;top:50%;translate:-50% -50%;background:#000;z-index:2;display:block;outline:0}
.vid-err{position:absolute;left:50%;top:50%;translate:-50% -50%;background:var(--s-surface);color:var(--s-fg);font:max(11px,1.6cqh) var(--s-ui);padding:1cqh 2cqw;border-radius:.8cqh;box-shadow:0 0 0 1px var(--s-frame);z-index:4}
.card .play-mark{position:absolute;right:.5cqh;bottom:.5cqh;width:max(12px,2cqh);height:max(12px,2cqh);border-radius:50%;background:rgba(31,29,27,.6);z-index:2}
.card .play-mark::after{content:"";position:absolute;left:38%;top:28%;border-style:solid;border-width:22% 0 22% 36%;border-color:transparent transparent transparent #fff}
/* the deck */
.deck{position:absolute;left:50%;bottom:1.6cqh;translate:-50% 0;max-width:calc(100cqw - 2*var(--gutter));padding:.4cqh 1cqw;background:var(--s-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:1.4cqh;box-shadow:0 0 0 1px rgba(31,29,27,.1),0 1.2cqh 3cqh var(--s-shadow);z-index:3;transition:opacity .5s ease,translate .5s ease}
.site.idle .deck{opacity:0;translate:-50% 1.4cqh;pointer-events:none}
.cards{list-style:none;margin:0;padding:1.7cqh .8cqw .7cqh calc(.8cqw + .2*var(--card-w));position:relative;display:flex;align-items:flex-end;width:calc(6*var(--card-w) + 1.6cqw);max-width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cards::-webkit-scrollbar{display:none}
.cards li{flex:none;scroll-snap-align:center;margin-left:calc(-.2*var(--card-w))}
.cards.gliding{scroll-snap-type:none}
.card{display:block;width:var(--card-w);height:var(--card-h);border:0;padding:0;background:var(--s-surface);border-radius:.5cqh;overflow:hidden;cursor:pointer;position:relative;opacity:.5;transform:rotate(-1.2deg);box-shadow:0 .5cqh 1.6cqh var(--s-shadow),0 0 0 1px rgba(31,29,27,.12);transition:opacity .25s,transform .3s,box-shadow .3s}
.cards li.alt .card{transform:rotate(1deg)}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card.on{opacity:1;z-index:2;transform:translateY(-9%) rotate(0) scale(1.08);box-shadow:0 0 0 1px var(--s-purple),0 0 2.2cqh rgba(91,63,143,.6)}
.card.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:max(2px,.4cqh);background:var(--s-orange);z-index:1}
/* arrows: chevrons in frosted lilac discs; each half of the print is also a button */
.nav{position:absolute;top:50%;translate:0 -50%;width:max(34px,5.2cqw);height:max(34px,5.2cqw);display:grid;place-items:center;border:0;background:rgba(91,63,143,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--s-orange);cursor:pointer;opacity:.92;transition:opacity .35s,background .3s;z-index:4;padding:0;border-radius:50%}
.nav svg{width:55%;height:55%;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* the discs hang a hand's width from the print, not at the walls; with the label open the right one steps aside */
.nav.prev{left:max(1.6cqw,calc(50% - var(--L)/2 - max(34px,5.2cqw) - 3cqw))}
.nav.next{right:max(1.6cqw,calc(50% - var(--L)/2 - max(34px,5.2cqw) - 3cqw))}
.site.info-open .nav.next,.site[data-side="full"] .nav.next{right:1.6cqw}
.nav:focus-visible,.tool:focus-visible,.card:focus-visible{outline:2px solid var(--s-orange);outline-offset:2px}
/* lettering */
.chrome{position:absolute;left:0;right:0;top:0;height:var(--top);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);z-index:5;transition:opacity .45s;pointer-events:none}
.chrome>*{pointer-events:auto}
/* the wordmark: one face, one colour. A high-contrast modern serif in italic, set tight and a touch large. */
.wordmark{font:700 max(22px,4.6cqh)/1 'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;font-variation-settings:"opsz" 96;letter-spacing:-.045em;text-transform:lowercase;color:#4a2f7a;white-space:nowrap;text-decoration:none;transition:opacity .3s;text-shadow:0 1px 0 rgba(255,255,255,.5),0 3px 10px rgba(31,29,27,.2);-webkit-font-smoothing:antialiased}
.tools{display:flex;gap:1.2cqw;align-items:center}
/* controls: random and full screen as prominent discs; the info button is hidden for now (the i key still works) */
.tool{width:max(36px,5cqh);height:max(36px,5cqh);border:0;background:rgba(91,63,143,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--s-orange);opacity:.95;cursor:pointer;padding:0;display:grid;place-items:center;border-radius:50%;transition:background .3s,transform .3s}
.tool svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool[data-act="info"]{display:none}
a.tool{text-decoration:none}
/* the contact card: the address in the open, a copy button, and a draft link */
.contact{position:absolute;right:var(--gutter);top:calc(var(--top) - .6cqh);z-index:8;display:flex;flex-direction:column;gap:.8cqh;padding:1.6cqh 2cqw;background:var(--s-surface);border-radius:1.2cqh;box-shadow:0 0 0 1px var(--s-frame),0 1.6cqh 4cqh var(--s-shadow);max-width:min(92cqw,40ch)}
.contact[hidden]{display:none}
.contact-label{font:max(9px,1.3cqh) var(--s-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--s-muted)}
.contact-addr{font:max(14px,2.3cqh)/1.2 var(--s-mono);color:var(--s-fg);user-select:all;-webkit-user-select:all;word-break:break-all}
.contact-row{display:flex;gap:.8cqw;align-items:center;flex-wrap:wrap}
.contact-btn{font:500 max(11px,1.5cqh) var(--s-ui);letter-spacing:.04em;padding:.7cqh 1.4cqw;border-radius:999px;border:1px solid rgba(31,29,27,.18);border:1px solid color-mix(in oklab,var(--s-fg) 18%,transparent);background:none;color:var(--s-fg);cursor:pointer;text-decoration:none}
.contact-x{margin-left:auto;border:0;background:none;color:var(--s-muted);font-size:max(16px,2.4cqh);cursor:pointer;line-height:1;padding:0 .4cqw}
.contact-hint{font:max(9px,1.25cqh) var(--s-ui);color:var(--s-muted)}
.site[data-mobile] .contact{right:5cqw;left:5cqw;max-width:none}
.tools{gap:1.6cqw}
/* the label beside the print: shown only on request unless the site is configured otherwise */
.site[data-side="hidden"] .side{display:none}
.site[data-side="hidden"].info-open .side{display:flex}
.site[data-side="hidden"].info-open .fields,.site[data-side="full"] .fields{display:flex}
.side{position:absolute;left:calc(50% + var(--L)/2 + 2.6cqw);right:calc(var(--arrow-room) + .6cqw);top:50%;translate:0 -50%;max-width:36ch;display:flex;flex-direction:column;gap:1.1cqh;z-index:5;min-width:0;max-height:calc(100% - 2cqh);overflow:auto;scrollbar-width:none}
.lab{display:flex;flex-direction:column;gap:.25cqh;font:max(11px,1.5cqh)/1.5 var(--s-ui);color:var(--s-muted);letter-spacing:.03em}
.lab b{font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--s-fg);font-size:max(11px,1.45cqh)}
.lab .cam:empty,.lab span:empty{display:none}
.fields{display:none;flex-direction:column;gap:.2cqh;font:max(10px,1.35cqh)/1.5 var(--s-ui);color:var(--s-muted);letter-spacing:.03em;padding-top:.6cqh;border-top:1px solid rgba(31,29,27,.12)}
.fields span b{font-weight:500;color:var(--s-fg)}
.site.info-open .fields{display:flex}
.side .cap{margin:0;font:italic 400 max(13px,2.1cqh)/1.35 var(--s-serif);color:var(--s-fg)}
.side .cap:empty{display:none}
.side .story{font:max(11px,1.55cqh)/1.6 var(--s-ui);color:var(--s-muted)}
.side .story p{margin:0 0 .8em}
.side .story p:last-child{margin-bottom:0}
.side .story a{color:var(--s-orange)}
.side .story em{font-style:italic}
/* entry: wordmark, then the print, then the shelf rises */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;translate:0 1cqh}to{opacity:1;translate:0 0}}
@keyframes deckIn{from{opacity:0;translate:-50% 2cqh}to{opacity:1;translate:-50% 0}}
.site.entering .chrome{animation:fadeUp .7s ease both}
.site.entering .frame{animation:fadeIn .9s ease .45s both}
.site.entering .deck{animation:deckIn .8s cubic-bezier(.2,.7,.2,1) .9s both}
.site.entering .nav,.site.entering .side{animation:fadeIn .6s ease 1.4s both}
/* at rest: discs, lettering and the deck withdraw; the label stays */
.site.idle .nav,.site.idle .chrome{opacity:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.empty{position:absolute;left:50%;top:50%;translate:-50% -50%;font:italic max(16px,3cqh) var(--s-serif);color:var(--s-muted);margin:0}
/* phones: the same hang, stacked */
.site[data-mobile]{--disc:max(38px,9.5cqw);--gutter:4cqw;--arrow-room:0px;--top:7cqh;--side-w:0px;--card-h:min(9.5cqh,calc((100cqw - 2*var(--gutter) - 4cqw)/4.15/1.5))}
.site[data-mobile] .stage{align-items:start}
.site[data-mobile] .nav{width:var(--disc);height:var(--disc);translate:0 0;top:calc(var(--L) + 1.4cqh);bottom:auto}
.site[data-mobile] .nav.prev{left:calc(50% - var(--L)/2)}
.site[data-mobile] .nav.next{right:calc(50% - var(--L)/2)}
.site.idle[data-mobile] .nav,.site.idle[data-mobile] .chrome,.site.idle[data-mobile] .deck{opacity:1;translate:revert-layer;pointer-events:auto}
.site.idle[data-mobile] .deck{translate:-50% 0}
  .site[data-mobile]{--fb-h:calc(11cqh + var(--disc))}
.site[data-mobile] .feedback{top:calc(var(--L) + 1.4cqh + var(--disc)/2);gap:2cqw}
.site[data-mobile] .fb{padding:.6cqh 2cqw .6cqh 1.6cqw;font-size:max(11px,1.5cqh)}
.site[data-mobile] .commentrow{top:calc(var(--L) + 1.4cqh + var(--disc) + 2.6cqh)}
.site[data-mobile] .sharerow{top:calc(var(--L) + 1.4cqh + var(--disc) + 7.4cqh)}
.site[data-mobile] .share{width:min(92cqw,56ch)}
.site[data-mobile] .side{left:calc(50% - var(--L)/2);right:calc(50% - var(--L)/2);top:calc(var(--L) + 1.4cqh + var(--disc) + 10.6cqh);translate:0 0;max-width:none;gap:.5cqh;max-height:calc(100% - var(--L) - var(--disc) - 9cqh)}
.site[data-mobile] .tool.t-full{display:none}
.site[data-mobile] .chrome{padding:0 5cqw}
.site[data-mobile] .wordmark{font-size:max(15px,2.6cqh)}
@media (orientation:landscape) and (max-height:520px){
  .site[data-mobile]{--fb-h:0px;--arrow-room:12cqw;--top:8cqh;--disc:max(38px,11cqh)}
  .site[data-mobile] .nav{top:calc(var(--L)/2);translate:0 -50%}
  .site[data-mobile] .nav.prev{left:calc(50% - var(--L)/2 - var(--disc) - 2cqw)}
  .site[data-mobile] .nav.next{right:calc(50% - var(--L)/2 - var(--disc) - 2cqw)}
  .site[data-mobile] .feedback,.site[data-mobile] .commentrow,.site[data-mobile] .sharerow{left:calc(50% + var(--L)/2 + var(--disc) + 4cqw);translate:0 0;max-width:calc(50% - var(--L)/2 - var(--disc) - 6cqw);white-space:normal}
  .site[data-mobile] .feedback{top:1.5cqh;gap:1.2cqw}
  .site[data-mobile] .commentrow{top:calc(1.5cqh + 42px)}
  .site[data-mobile] .sharerow{top:calc(1.5cqh + 74px)}
  .site[data-mobile] .cbtn{font-size:10px}
  .site[data-mobile] .fb{padding:4px 8px 4px 6px;font-size:11px;gap:4px}
  .site[data-mobile] .cbtn{line-height:1.25;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* hover effects only where a pointer can hover; on touch screens they would stick after a tap */
@media (hover:hover){
  .fb:hover{background:rgba(91,63,143,.28);transform:translateY(-1px)}
  .sharerow .cbtn:hover{color:var(--s-orange)}
  .share-grid a:hover,.share-grid button:hover{border-color:var(--s-orange);color:var(--s-orange)}
  .cbtn:hover{color:var(--s-orange)}
  .play:hover{background:rgba(91,63,143,.8);transform:scale(1.06)}
  .card:hover{opacity:.85;z-index:3;transform:translateY(-4%) rotate(0)}
  .nav:hover{background:rgba(91,63,143,.48)}
  .wordmark:hover{opacity:.72}
  .tool:hover{background:rgba(91,63,143,.5);transform:scale(1.06)}
  .contact-btn:hover{border-color:var(--s-orange);color:var(--s-orange)}
}
/* phones zoom into fields smaller than 16px */
@media (pointer:coarse){.comment-form textarea,.comment-form input,.share-link input{font-size:16px}}