:root{
  --bg:#E9E3D6; --ink:#141210; --soft:#5E5850; --rule:#B0A692;
  --accent:#6E1B2E; --field:#F2EDE2;
  --silver:#8F969E; --silver-lo:#737A82; --silver-hi:#BFC6CE;
}
[data-scheme="midnight"]{
  --bg:#0A1224; --ink:#E7E2D6; --soft:#8792A8; --rule:#222E46;
  --accent:#D2A24C; --field:#111C33;
  --silver:#C4CBD4; --silver-lo:#8D98A6; --silver-hi:#F2F5F8;
}
[data-scheme="grass"]{
  --bg:#CBD6C4; --ink:#12211A; --soft:#42574A; --rule:#A3B29B;
  --accent:#B4671B; --field:#D9E1D2;
  --silver:#818A84; --silver-lo:#67716B; --silver-hi:#AFB8B1;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Familjen Grotesk',sans-serif;
  transition:background .45s,color .45s;overflow-x:hidden}
.waves{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
.waves line{stroke:url(#sheen);stroke-width:1.1}
.waves circle{fill:url(#sheen)}
.waves circle.halo{fill:var(--silver-hi)}
.waves stop.a{stop-color:var(--silver-lo)}
.waves stop.b{stop-color:var(--silver-hi)}
.waves stop.c{stop-color:var(--silver)}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 clamp(24px,6vw,88px)}

.schemes{position:fixed;top:18px;right:20px;z-index:20;display:flex;gap:6px}
.schemes button{width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--rule);background:transparent;color:var(--soft);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.schemes button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.schemes button:hover{color:var(--accent);border-color:var(--accent)}
.schemes button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

header{padding:34px 0 0;display:flex;justify-content:flex-start;align-items:baseline;flex-wrap:wrap;gap:22px}
.id{font-family:'Sometype Mono',monospace;font-size:11.5px;letter-spacing:.1em;color:var(--soft)}
.links{font-family:'Sometype Mono',monospace;font-size:11.5px}
.links a{color:var(--soft);text-decoration:none;margin-right:16px}
.links a:last-child{margin-right:0}
.links a:hover{color:var(--accent)}

/* epigraph above everything, set to the right */
.epigraph{margin:clamp(40px,7vh,72px) 0 0 auto;max-width:52ch;font-size:clamp(14.5px,1.15vw,16.5px);
  line-height:1.65;color:var(--soft);padding-right:18px;border-right:1px solid var(--rule);
  text-align:right}
.epigraph b{color:var(--ink);font-weight:500}

/* hero */
.hero{padding:clamp(34px,6vh,58px) 0 0}
h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(44px,9.6vw,132px);line-height:.9;
  letter-spacing:-.035em;font-variation-settings:'SOFT' 0,'WONK' 1;display:flex;flex-direction:column}
h1 .l1{max-width:15ch}
h1 .l2{align-self:flex-start;margin-left:clamp(200px,43vw,720px);margin-top:-.46em}
h1 em{font-style:italic;font-weight:600;color:var(--accent)}

/* the single flourish: shooting star under "chase" */
.trace{width:100%;height:90px;margin-top:-42px;overflow:visible}
.trace path{fill:none;stroke:var(--rule);stroke-width:1.2;stroke-dasharray:4 6}
.trace .streak{stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:13 100;stroke-dashoffset:113;opacity:0;
  animation:shoot 7s linear infinite}
@keyframes shoot{
  0%   {stroke-dashoffset:113; opacity:0}
  3%   {opacity:1}
  22%  {opacity:1}
  29%  {stroke-dashoffset:-13; opacity:0}
  100% {stroke-dashoffset:-13; opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .trace .streak{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.5}
}

/* recent — below the doors, one panel per line */
.recent{margin-top:clamp(52px,8vw,88px)}
.recent-head{font-family:'Sometype Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.recent .row{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:baseline;
  padding:13px 18px;margin-bottom:8px;background:var(--field);border:1px solid var(--rule);
  transition:border-color .25s,transform .25s cubic-bezier(.2,.8,.3,1)}
.recent .row:hover{border-color:var(--accent);transform:translateX(3px)}
.recent .when{font-family:'Sometype Mono',monospace;font-size:11.5px;color:var(--soft)}
.recent .txt{font-size:15px}
.recent .tag{font-family:'Sometype Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent)}

/* doors */
.doors{margin-top:clamp(30px,5vw,54px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.door{text-decoration:none;color:inherit;display:block;padding:38px 34px 30px;background:var(--field);
  border:1px solid var(--rule);transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s;
  position:relative;z-index:1}
.door:hover{transform:translateY(-4px);border-color:var(--accent)}
.door .kicker{font-family:'Sometype Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft)}
.door h2{font-family:'Fraunces',serif;font-size:clamp(30px,4vw,52px);line-height:.96;letter-spacing:-.025em;
  margin:56px 0 18px;font-weight:600}
.door.two h2{font-style:italic;font-weight:300}
.door p{color:var(--soft);font-size:15px;line-height:1.55;max-width:32ch}
.door .enter{margin-top:34px;font-family:'Sometype Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}

footer{margin:clamp(70px,11vw,120px) 0 54px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:'Sometype Mono',monospace;font-size:11.5px;color:var(--soft)}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}

@media(max-width:800px){
  .doors{grid-template-columns:1fr}
  .recent .row{grid-template-columns:96px 1fr;gap:10px}
  .recent .tag{grid-column:2}
  h1 .l1{max-width:none}
  h1 .l2{margin-left:0}
  .epigraph{padding-right:14px;max-width:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* "coming soon" bubble that follows the cursor */
.soon{position:fixed;z-index:40;pointer-events:none;transform:translate(-50%,-150%);
  font-family:'Sometype Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--bg);padding:7px 11px;white-space:nowrap;
  opacity:0;transition:opacity .18s ease}
.soon.on{opacity:1}

/* ---- inner pages: breadcrumb head + shelf ---- */
.crumb{font-family:'Sometype Mono',monospace;font-size:11.5px;letter-spacing:.1em;color:var(--soft)}
.crumb a{color:var(--soft);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb .sep{margin:0 10px;opacity:.6}
.crumb .here{color:var(--ink)}

.page-head{padding:clamp(48px,9vh,96px) 0 0;max-width:none}
.page-head h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(38px,9.6vw,132px);
  line-height:.9;letter-spacing:-.035em;font-variation-settings:'SOFT' 0,'WONK' 1;
  display:block;white-space:nowrap}
.page-head .lede{margin-top:24px;max-width:none;color:var(--soft);font-size:clamp(16px,1.3vw,18px);line-height:1.5}

.rubric{margin-top:clamp(46px,7vw,76px)}
.rubric h2{font-family:'Sometype Mono',monospace;font-size:clamp(12px,1.1vw,14px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:500;
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:18px;margin-top:18px}
.item{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--field);
  border:1px solid var(--rule);padding:26px 24px 20px;min-height:214px;position:relative;z-index:1;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s}
.item:hover{transform:translateY(-4px);border-color:var(--accent)}
.item h3{font-family:'Fraunces',serif;font-weight:600;font-size:23px;line-height:1.05;letter-spacing:-.02em}
.item p{margin-top:12px;color:var(--soft);font-size:14.5px;line-height:1.5;flex:1}
.item .meta{margin-top:18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:'Sometype Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.item .cost{color:var(--soft)}
.item .open{color:var(--accent)}

.credit{margin-top:clamp(44px,7vw,72px);padding-top:20px;border-top:1px solid var(--rule);
  display:grid;gap:8px;font-family:'Sometype Mono',monospace;font-size:11.5px;color:var(--soft)}
.credit a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}