/* Room 527 — site styles. Identity per brand/room527-guidelines.md (28 Oct 2026). */
:root{
  --ground:#141414; --text:rgba(255,255,255,.87); --mute:rgba(255,255,255,.6); --faint:rgba(255,255,255,.12);
  --paper:#F6F4EE; --ink:#1B1B1B; --lamp:#FFA957;
  --bric:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gutter:max(20px,4vw);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--bric);font-variation-settings:"opsz" 14;font-weight:400;font-size:17px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
p a,li a,.prose a{text-decoration:underline;text-decoration-color:var(--lamp);text-decoration-thickness:1px;text-underline-offset:4px}
p a:hover,li a:hover,.prose a:hover{color:var(--lamp)}
a:focus-visible,button:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:2px}
::selection{background:rgba(255,169,87,.35)}
.mono{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.mute{color:var(--mute)}

/* header and footer */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter)}
.lk{display:flex;align-items:center;gap:10px;color:var(--text)}
.lk svg{width:22px;height:22px;display:block}
.lk b{font-variation-settings:"opsz" 96;font-weight:800;font-size:18px;letter-spacing:-.05em;line-height:1}
nav.main{display:flex;gap:22px;color:var(--mute)}
nav.main a{padding:4px 0}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--text)}
footer{margin-top:auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:40px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));color:var(--mute);border-top:1px solid var(--faint)}
main{padding:0 var(--gutter)}

/* home */
.home{flex:1;display:flex;flex-direction:column}
.home main{flex:1;display:flex;align-items:center;justify-content:center;--mk:clamp(180px,32vw,380px);--num:calc(var(--mk)/1.31);padding-bottom:6vh}
.lockup{display:flex;align-items:center;gap:calc(var(--num)*.28)}
.lockup .mark{width:var(--mk);height:var(--mk);display:block}
.lockup .wm{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--num)*.094)}
.lockup .n{font-variation-settings:"opsz" 96;font-weight:800;font-size:var(--num);line-height:.85;letter-spacing:-.06em}
.lockup .room{font-family:var(--mono);font-weight:500;font-size:calc(var(--num)*.16);letter-spacing:.3em;text-transform:uppercase;opacity:.72;line-height:1;transition:opacity 1.2s ease}
.lockup:hover .room{opacity:.9}
@media (prefers-reduced-motion:reduce){.lockup .room{transition:none}}
.home .line{text-align:center;padding:0 var(--gutter) 34px;color:var(--mute)}
@media (max-width:560px){.lockup{flex-direction:column;align-items:center}.lockup .wm{align-items:center}}

/* inner pages */
.page{max-width:1040px;margin:0 auto;width:100%;padding:6vh 0 10vh}
.eyebrow{color:var(--mute);margin:0 0 18px}
h1{font-variation-settings:"opsz" 96;font-weight:800;letter-spacing:-.04em;line-height:.95;font-size:clamp(40px,7vw,88px);margin:0 0 28px;max-width:14ch}
h2{font-variation-settings:"opsz" 96;font-weight:800;letter-spacing:-.025em;line-height:1.05;font-size:clamp(24px,3.2vw,34px);margin:0 0 14px}
.prose{max-width:62ch}
.prose p{margin:0 0 16px}
.prose p.lede{font-size:clamp(19px,2.2vw,24px);line-height:1.4;letter-spacing:-.01em;max-width:30ch}

/* work list */
.worklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--faint)}
.worklist li{border-bottom:1px solid var(--faint)}
.worklist a{text-decoration:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:14px 28px;align-items:baseline;padding:22px 0;color:var(--text)}
.worklist .t{font-variation-settings:"opsz" 96;font-weight:800;letter-spacing:-.03em;font-size:clamp(26px,4vw,44px);line-height:1}
.worklist .d{color:var(--mute);max-width:40ch}
.worklist .y{color:var(--mute);text-align:right}
.worklist a:hover .t{color:var(--lamp)}
@media (max-width:720px){.worklist a{grid-template-columns:1fr;gap:6px}.worklist .y{text-align:left}}

/* project */
.facts{list-style:none;margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--faint);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 28px}
.facts li{display:grid;gap:4px}
.facts .k{color:var(--mute)}
.nextprev{display:flex;justify-content:space-between;gap:20px;margin-top:64px;padding-top:22px;border-top:1px solid var(--faint)}
.nextprev a{color:var(--mute)}.nextprev a:hover{color:var(--text)}
figure.plate{margin:40px 0 0;border:1px solid var(--faint);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--mute);border-radius:3px}
figure.plate img{width:100%;height:100%;object-fit:cover;display:block;border-radius:3px}
figure.plate figcaption{padding:0 20px;text-align:center}

/* studio */
.fam{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fam li{display:flex;align-items:baseline;gap:8px;color:var(--text)}
.fam a{text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px}.fam a:hover{color:var(--lamp)}
.fam .pa{color:var(--mute)}.fam .sl{color:rgba(255,255,255,.4)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px 56px;margin-top:40px}

/* motion: a fade as the lights come up, once, and nothing else */
@media (prefers-reduced-motion:no-preference){
  .fade{animation:up .7s ease-out both}
  @keyframes up{from{opacity:0}to{opacity:1}}
}