/* ===================================================================
   Classic view — "what's in my head"
   =================================================================== */
:root {
  --ground:#EAE9E7; --ink:#111010; --line:#111010; --red:#DB0508;
  --mute:#6F6A68; --card:#FFFFFF;
  --sans:Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:Anton, Impact, "Arial Narrow Bold", sans-serif;
  color-scheme:light;
}
* { box-sizing:border-box }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden }
a { color:inherit }
button { font:inherit; color:inherit }
img { display:block; max-width:100% }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
:focus-visible { outline:2px solid var(--red); outline-offset:3px }
.head:focus-visible { outline-offset:10px; outline-width:2px }
.head:focus:not(:focus-visible) { outline:none }

/* ---------- top bar ---------- */
.bar { position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:flex-start;
  justify-content:space-between; gap:20px; padding:16px clamp(14px,2vw,26px); pointer-events:none }
.bar > * { pointer-events:auto }
.bar__brand { display:flex; align-items:center; gap:9px; text-decoration:none }
.bar__brand svg { width:26px; height:auto; color:var(--ink) }
.bar__brand span { font-size:.58rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase }
.bar__nav { display:flex; gap:clamp(10px,1.6vw,26px); font-size:.6rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase }
.bar__nav a { text-decoration:none; padding-bottom:2px; border-bottom:1.5px solid transparent }
.bar__nav a:hover { border-bottom-color:var(--red); color:var(--red) }
.bar__nav a.is-red { color:var(--red) }

/* ---------- stage ---------- */
.stage { position:relative; min-height:100svh; display:grid; align-items:end; justify-items:center;
  padding:82px clamp(14px,2vw,26px) clamp(74px,12vh,146px) }
.yearword { position:absolute; top:58%; transform:translateY(-50%); margin:0; z-index:0;
  font-family:var(--display); font-weight:400; font-size:clamp(5rem,16vw,14rem); line-height:.8;
  color:#fff; letter-spacing:.01em; user-select:none; pointer-events:none }
.yearword--l { left:clamp(14px,2vw,26px) }
.yearword--r { right:clamp(14px,2vw,26px) }
.yearword small { display:block; font-family:var(--sans); font-size:.09em; font-weight:800; letter-spacing:.18em;
  color:var(--red); text-transform:uppercase; margin-bottom:.35em }

/* ---------- head ---------- */
.headwrap { position:relative; width:clamp(195px,22vw,330px); display:grid; justify-items:center; z-index:2;
  grid-area:1/1 }
.head { position:relative; width:100%; background:none; border:0; padding:0; cursor:pointer; display:block }
.head__face { width:100%; height:auto; position:relative; z-index:2 }
.head__cap { position:absolute; left:50%; top:0; width:var(--cap-w, 96%); z-index:5;
  transform:translate(-50%, -54%);
  transition:transform .72s cubic-bezier(.34,1.3,.5,1) }
.is-open .head__cap { transform:translate(-50%, var(--cap-open-y, -190%)) rotate(-4deg) }
.head__hint { position:absolute; left:50%; bottom:calc(100% + var(--hint-lift, 10px)); transform:translateX(-50%);
  white-space:nowrap; background:var(--ink); color:#fff; padding:7px 11px; border-radius:3px;
  font-size:.58rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; pointer-events:none;
  opacity:0; transition:opacity .28s ease; z-index:6 }
.head:hover .head__hint, .head:focus-visible .head__hint { opacity:1 }
.is-open .head__hint { opacity:0 !important }

/* items spilling out */
.spill { position:fixed; inset:0; transform:none; pointer-events:none; z-index:1 }
.spill__it { position:absolute; z-index:1; width:var(--w); left:var(--x); top:var(--y); border:0; padding:0; background:none;
  cursor:pointer; transform-origin:50% 50%; pointer-events:none;
  /* at rest every item is tucked inside the skull opening */
  opacity:0;
  transform:translate(-50%,-50%) translate(var(--dx,0px), var(--dy,0px)) scale(.14) rotate(-10deg);
  transition:opacity .3s ease, transform .58s cubic-bezier(.4,0,.6,1);
  transition-delay:calc(var(--back,0) * 22ms) }
.is-open .spill { pointer-events:auto }
.is-open .spill__it { opacity:1; pointer-events:auto;
  transform:translate(-50%,-50%) translate(0px,0px) scale(1) rotate(var(--r));
  transition:opacity .34s ease, transform .74s cubic-bezier(.26,1.1,.46,1);
  transition-delay:calc(var(--i) * 40ms) }
.spill__it img { width:100%; height:auto; transition:transform .24s ease }
.spill__it:hover img, .spill__it:focus-visible img { transform:scale(1.13) rotate(calc(var(--r) * -1)) }
.spill__it:after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max(112%,44px); height:max(112%,44px); border-radius:50% }
.spill__doodles { position:absolute; opacity:0; z-index:0; mix-blend-mode:multiply; pointer-events:none;
  left:var(--dl,50%); top:var(--dt,14%); width:var(--dw,240px);
  transform:translate(-50%,-50%) rotate(var(--dr,0deg)) scale(.5);
  transition:opacity .45s ease, transform .6s cubic-bezier(.26,1.1,.46,1) }
.is-open .spill__doodles { opacity:.22; transform:translate(-50%,-50%) rotate(var(--dr,0deg)) scale(1);
  transition-delay:.26s }

/* ---------- side copy ---------- */
.side { position:absolute; bottom:26px; font-size:.6rem; line-height:1.85; letter-spacing:.02em }
.side--l { left:clamp(14px,2vw,26px); max-width:230px }
.side--r { right:clamp(14px,2vw,26px); max-width:330px; text-align:left; color:var(--red);
  font-family:var(--display); font-size:clamp(.78rem,1.05vw,1rem); line-height:1.24; letter-spacing:.008em; text-transform:uppercase }
.side h2 { margin:0 0 7px; font-size:.56rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--mute) }
.side--l a { display:block; text-decoration:none; color:var(--ink) }
.side--l a:hover { color:var(--red) }
.thesis { position:absolute; right:clamp(14px,2vw,26px); top:auto; bottom:clamp(120px,22vh,230px); max-width:min(330px,34vw); color:var(--red);
  font-family:var(--display); font-size:clamp(.82rem,1.15vw,1.08rem); line-height:1.24; text-transform:uppercase }

/* ---------- item card ---------- */
.cardveil { position:fixed; inset:0; z-index:60; display:none; place-items:center;
  background:rgba(17,16,16,.28); padding:20px }
.cardveil.is-on { display:grid }
.itemcard { position:relative; width:min(430px,92vw); max-height:88svh; overflow:auto; background:var(--card);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5); transform:rotate(-2.4deg);
  animation:card-in .46s cubic-bezier(.22,1,.36,1) both; padding:13px 13px 18px }
@keyframes card-in { from{opacity:0;transform:rotate(-2.4deg) translateY(26px) scale(.96)} to{opacity:1;transform:rotate(-2.4deg) translateY(0) scale(1)} }
.itemcard__pic { background:#F1EFED; display:grid; place-items:center; padding:18px; margin-bottom:15px }
.itemcard__pic img { width:74%; height:auto }
.itemcard__eyebrow { font-size:.55rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red) }
.itemcard h3 { margin:5px 0 11px; font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,3.4vw,1.75rem);
  line-height:1; letter-spacing:.008em; text-transform:uppercase }
.itemcard p { margin:0 0 .85em; font-size:.83rem; line-height:1.6 }
.itemcard__meta { display:flex; flex-wrap:wrap; gap:5px 14px; margin:0 0 14px; font-size:.6rem;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mute) }
.itemcard__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px }
.itemcard__go { display:inline-flex; align-items:center; gap:.45em; padding:10px 16px; background:var(--ink); color:#fff;
  text-decoration:none; font-size:.63rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase }
.itemcard__go:hover { background:var(--red) }
.itemcard__go svg { width:12px; height:12px }
.itemcard__x { border:0; background:none; cursor:pointer; font-size:.63rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute); display:inline-flex; align-items:center; gap:.4em }
.itemcard__x:hover { color:var(--red) }

/* ---------- reset hint ---------- */
.closeall { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:35; border:1.5px solid var(--ink);
  background:var(--ground); border-radius:999px; padding:9px 17px; cursor:pointer; font-size:.6rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; opacity:0; pointer-events:none; transition:opacity .3s ease }
.is-open ~ .closeall, body.head-open .closeall { opacity:1; pointer-events:auto }
.closeall:hover { background:var(--ink); color:#fff }

/* ---------- mobile ---------- */
@media (max-width:860px) {
  .stage { grid-template-columns:1fr; grid-template-rows:auto; gap:6px;
    align-items:center; padding-top:clamp(250px,40vh,360px); min-height:auto; padding-bottom:30px }
  .yearword { font-size:clamp(4.5rem,26vw,9rem); justify-self:center !important; order:0 }
  .yearword--r { order:2 }
  .headwrap { order:1; width:min(54vw,216px) }
  .side, .thesis { position:static; max-width:none; text-align:left; margin:0 auto }
  .thesis { order:3; padding:22px clamp(14px,4vw,26px) 0; font-size:1rem }
  .side--l { order:4; padding:20px clamp(14px,4vw,26px) 0; font-size:.72rem }
  .side--r { order:5; padding:16px clamp(14px,4vw,26px) 26px; font-size:.95rem }

  .is-open .head__cap { transform:translate(-50%, var(--cap-open-y, -120%)) rotate(-4deg) }
}
@media (prefers-reduced-motion:reduce) {
  .head__cap, .spill__it, .spill__doodles, .itemcard { transition:none !important; animation:none !important }
}