:root{
  --ink:#0C0B0A;        /* the black ground half the works are painted on */
  --bone:#ECE6DA;       /* the ivory ground of the pen-and-ink works */
  --seal:#B8322A;       /* naqqash's red handprint, the only accent */
  --graphite:#77716A;
  --display:"Gloock","Noto Serif",Georgia,serif;
  --scripts:"Gloock","Noto Serif","Noto Serif Devanagari","Noto Serif Gujarati","Noto Serif Gurmukhi","Noto Serif Sinhala","Noto Serif Armenian","Noto Sans Cherokee","Noto Serif SC","Noto Serif JP","Noto Serif KR","Noto Serif Hebrew","Noto Naskh Arabic","Noto Serif Thai","Noto Serif Ethiopic","Noto Serif Georgian","Noto Sans Thaana","Noto Sans Mongolian",serif;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,64px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--ink);color:var(--bone);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.paper{--fg:var(--ink);--soft:#5E5850;--hair:#CFC7B8;background:var(--bone);color:var(--ink)}
.dark{--fg:var(--bone);--soft:#A39C92;--hair:#2A2724;background:var(--ink);color:var(--bone)}
section,header,footer{padding-inline:var(--gutter)}
.in{max-width:1320px;margin:0 auto}
a{color:inherit}
img{max-width:100%}

/* top bar */
.bar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:14px;background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #1d1b19}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 13px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase}
.mark svg{width:18px;height:22px;fill:var(--seal)}
.bar nav{display:flex;gap:clamp(12px,2.2vw,28px);font-size:13px;flex-wrap:wrap;justify-content:flex-end}
.bar nav a{text-decoration:none;color:#A39C92;display:flex;gap:6px;align-items:baseline}
.bar nav a i{font:italic 400 11px/1 var(--sans);color:var(--seal)}
.bar nav a:hover,.bar nav a:focus-visible{color:var(--bone);outline:none}

/* opening */
.open{padding-block:clamp(56px,10vw,128px) clamp(48px,7vw,96px)}
.open .in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:end}
.kicker{font:500 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--soft)}
.word{position:relative;overflow:hidden;height:clamp(150px,19vw,260px);margin:22px 0 18px}
.word span{position:absolute;left:0;bottom:0;font:400 clamp(72px,12.5vw,176px)/1 var(--scripts);white-space:nowrap;opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease;max-width:100%}
.word span.on{opacity:1;transform:none}
.word span.long{font-size:clamp(40px,7vw,104px)}
.cap{display:flex;gap:18px;align-items:center;font-size:14px;color:var(--soft);min-height:24px;flex-wrap:wrap}
.cap b{font-weight:500;color:var(--bone)}
.cap .ticks{display:flex;gap:4px}
.cap .ticks i{width:14px;height:2px;background:#34302c}
.cap .ticks i.on{background:var(--seal)}
.open h1{font:400 clamp(26px,2.6vw,36px)/1.2 var(--display);margin:0 0 18px;text-wrap:balance}
.open p{margin:0 0 14px;color:#C9C2B6;max-width:44ch}
.open .meta{font-size:13px;color:var(--soft);border-top:1px solid #2A2724;padding-top:14px;margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px}
.open .meta dt{color:var(--graphite)}
.open .meta dd{margin:0}

/* rooms */
.room{padding-block:clamp(64px,9vw,128px)}
.room-h{display:grid;grid-template-columns:auto 1fr;gap:8px clamp(20px,4vw,56px);align-items:end;border-bottom:1px solid var(--hair);padding-bottom:28px;margin-bottom:clamp(48px,7vw,96px)}
.room-h .no{font:400 15px/1 var(--display);color:var(--seal);grid-row:span 2;align-self:start;padding-top:18px;min-width:2.2em}
.room-h h2{font:400 clamp(64px,10vw,150px)/.9 var(--display);margin:0;letter-spacing:-.02em}
.room-h .conc{font:400 clamp(20px,2.2vw,30px)/1.5 var(--scripts);color:var(--soft);display:flex;flex-wrap:wrap;gap:4px 22px}
.room-h .conc span{white-space:nowrap}
.room-h p{grid-column:2;margin:10px 0 0;max-width:60ch;color:var(--soft)}

.hang{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,36px);row-gap:clamp(72px,10vw,140px)}
.plate{margin:0;display:grid;gap:22px;align-content:start}
.plate button{all:unset;cursor:zoom-in;display:block;position:relative}
.plate button:focus-visible{outline:2px solid var(--seal);outline-offset:6px}
.plate img{display:block;width:100%;height:auto;box-shadow:0 1px 0 rgba(255,255,255,.03),0 28px 60px -28px rgba(0,0,0,.75)}
.paper .plate img{box-shadow:0 22px 50px -26px rgba(40,30,20,.55)}
.label{display:grid;gap:4px;max-width:34ch}
.label .n{font:400 clamp(30px,3vw,44px)/1.15 var(--scripts);margin-bottom:6px;overflow-wrap:anywhere}
.label .t{font-weight:600}
.label .t i{font-weight:400;color:var(--soft)}
.label .s{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.label .look{margin-top:10px;padding-top:10px;border-top:1px solid var(--hair);font-size:15px;line-height:1.55}
.label .look::before{content:"Look for";display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--seal);margin-bottom:4px}

.beside{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:clamp(24px,4vw,64px)}
.beside.flip{grid-template-columns:minmax(0,1fr) auto}
.beside.flip .label{order:-1;justify-self:end;text-align:right}
.beside img{height:min(84vh,1040px);width:auto;max-width:100%}
.drop{margin-top:clamp(40px,10vw,160px)}

.pair{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(220px,.8fr);gap:clamp(16px,2.4vw,36px);align-items:end}
.pair .note{align-self:center;padding-left:clamp(0px,2vw,24px);border-left:1px solid var(--hair)}
.pair .note h3{font:400 clamp(26px,2.6vw,36px)/1.15 var(--display);margin:0 0 12px}
.pair .note h3 span{font-family:var(--scripts)}
.pair .note p{margin:0;color:var(--soft);max-width:36ch}
.pair .label{gap:2px}
.pair .label .n{font-size:26px}
.pair img{max-height:80vh;width:auto;max-width:100%;height:auto}

/* coda */
.coda .in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.coda h2{font:400 clamp(44px,6vw,84px)/1 var(--display);margin:0 0 20px}
.coda p{color:var(--soft);max-width:46ch;margin:0 0 14px}
.coda .plate img{height:min(84vh,1040px);width:auto;max-width:100%}

/* about */
.about{padding-block:clamp(64px,8vw,112px)}
.about .in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.about h2{grid-column:1 / -1;font:400 clamp(36px,4vw,56px)/1 var(--display);margin:0}
.about h3{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--seal);margin:0 0 12px}
.about p{margin:0;color:var(--soft)}
footer{padding-block:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--graphite);border-top:1px solid #1d1b19}

/* viewing room */
dialog{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:#070605;color:var(--bone)}
dialog::backdrop{background:#070605}
.vr{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 320px;--soft:#A39C92;--hair:#2A2724}
.vr .stage{display:grid;place-items:center;padding:clamp(16px,4vh,48px);min-height:0}
.vr .stage img{max-width:100%;max-height:calc(100dvh - 2*clamp(16px,4vh,48px));width:auto;height:auto;display:block;box-shadow:0 40px 90px -30px #000}
.vr aside{border-left:1px solid #1f1c19;padding:40px 28px;display:flex;flex-direction:column;gap:18px}
.vr .ctl{display:flex;gap:8px;margin-top:auto;align-items:center}
.vr .ctl button{font:500 13px/1 var(--sans);background:transparent;color:var(--bone);border:1px solid #3a3530;padding:12px 14px;cursor:pointer}
.vr .ctl button:hover,.vr .ctl button:focus-visible{border-color:var(--seal);outline:none}
.vr .ctl span{margin-left:auto;font-size:12px;color:#77716A;font-variant-numeric:tabular-nums}
.vr .x{align-self:flex-end;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;background:none;border:0;color:#A39C92;cursor:pointer;padding:6px 0}

@media (max-width:900px){
  .open .in,.coda .in{grid-template-columns:minmax(0,1fr)}
  .hang .plate{grid-column:1 / -1 !important}
  .beside,.beside.flip{grid-template-columns:1fr}
  .beside img,.coda .plate img{height:auto;width:100%}
  .beside.flip .label{order:0;justify-self:start;text-align:left}
  .pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pair .note{grid-column:1 / -1;border-left:0;padding-left:0;order:-1}
  .drop{margin-top:0}
  .about .in{grid-template-columns:1fr}
  .vr{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .vr aside{border-left:0;border-top:1px solid #1f1c19;padding:16px}
  .vr .stage img{max-height:60vh}
  .vr .look{display:none}
}
@media (max-width:520px){
  .room-h{grid-template-columns:minmax(0,1fr)}.room-h .no{grid-row:auto;padding:0}.room-h p{grid-column:1}
  .bar nav a i{display:none}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .word span{transition:none} }