/* ==========================================================================
   KOMENI. — THE ARCHIVE
   Cream #F5F0E8 · Black #0D0D0D · Maroon #5C1A22 (ground only, never type)
   Archivo (600/700/800) + Space Mono (400). No third font.
   Radius 0 everywhere. No shadows. Hairlines only.
   ========================================================================== */

:root{
  --cream:#F5F0E8;
  --black:#0D0D0D;
  --maroon:#5C1A22;
  --tint:#E4DED2;            /* rendering device for cream garments. never type. */

  --sans:Archivo,'Helvetica Now','Inter Tight',Helvetica,Arial,sans-serif;
  --mono:'Space Mono',Courier,monospace;

  --side:clamp(18px,6.2vw,110px);
  --top:max(206px,10vw);   /* clears the fixed index. the handoff floor is 182px — never go under it. */
  --bot:clamp(60px,8vw,92px);
  --hold:0vh;                /* dead scroll between cards. 0 = every pixel of
                                scroll moves something, which is what stops it
                                reading as a stuck phone. 10-18vh adds a beat.
                                Past ~25vh it starts to feel frozen again. */
  --idx-t:clamp(20px,3.4vw,44px);
  --idx-l:clamp(18px,3.4vw,44px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--black);
  font-family:var(--sans);color:var(--cream);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
input,button{font:inherit;color:inherit}
input::placeholder{color:currentColor;opacity:.32}
input:focus{outline:none;border-bottom-color:currentColor}
::selection{background:var(--cream);color:var(--black)}
.sec--cream ::selection{background:var(--black);color:var(--cream)}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- mono --------------------------------------------------------------- */
.mono{
  font-family:var(--mono);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;margin:0;
}

/* --- the fixed index ---------------------------------------------------- */
.index{
  position:fixed;top:var(--idx-t);left:var(--idx-l);z-index:90;
  display:flex;flex-direction:column;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);
}
.index a{display:flex;gap:9px;opacity:.42;transition:opacity 300ms,color 420ms linear}
.index a:hover{opacity:.55}
.index a[aria-current]{opacity:1}
.index.is-black{color:var(--black)}
.index.is-cream{color:var(--cream)}

/* --- sound · mirrored top right ---------------------------------------- */
.snd{
  position:fixed;top:var(--idx-t);right:var(--idx-l);z-index:90;
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:none;border:0;padding:0;
  color:var(--cream);transition:color 420ms linear;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.snd:hover{opacity:.55}
.snd.is-black{color:var(--black)}
.snd.is-cream{color:var(--cream)}
.snd__b{display:flex;align-items:flex-end;gap:2px;height:10px}
.snd__b i{width:2px;height:3px;background:currentColor}
.snd[data-on] .snd__b i{animation:eq .9s ease-in-out infinite}
.snd[data-on] .snd__b i:nth-child(2){animation-delay:.15s}
.snd[data-on] .snd__b i:nth-child(3){animation-delay:.3s}
.snd[data-on] .snd__b i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:10px}}

/* --- the filing cabinet · sticky stack ---------------------------------- */
.sec{
  position:sticky;top:0;min-height:100vh;
  padding:var(--top) var(--side) var(--bot);
}
.sec--centre{display:flex;flex-direction:column;justify-content:center}
/* when a section's content is taller than the space, centring would push it
   up past the padding and under the index. safe centring falls back to the
   top edge instead, so the 182px clearance always holds. */
@supports (justify-content:safe center){
  .sec--centre{justify-content:safe center}
}
.sec--black {background:var(--black); color:var(--cream); border-top:1px solid var(--cream)}
.sec--cream {background:var(--cream); color:var(--black); border-top:1px solid var(--black)}
.sec--maroon{background:var(--maroon);color:var(--cream); border-top:1px solid var(--cream)}
#s0{border-top:0;overflow:hidden}
#s5{overflow:hidden}
.hold{position:relative;z-index:1}

/* the pinned section covers this; it only buys scroll distance.
   at 0 it collapses and the stack runs continuously. */
.hold-gap{height:var(--hold)}

/* --- watermarks --------------------------------------------------------- */
.mark{position:absolute;width:auto;pointer-events:none;z-index:0;will-change:transform}
.mark--home{top:50%;right:-6vw;transform:translateY(-50%) translateZ(0);height:118vh;opacity:.05}
.mark--wait{left:-4vw;bottom:-16vh;transform:translateZ(0);height:96vh;opacity:.3}

/* --- type --------------------------------------------------------------- */
.d1{font-weight:800;font-size:clamp(46px,10.4vw,150px);line-height:.88;letter-spacing:-.045em;margin:0 0 clamp(30px,4.5vw,54px)}
.d2{font-weight:800;font-size:clamp(40px,9vw,132px);line-height:.86;letter-spacing:-.05em;margin:0 0 clamp(24px,3.2vw,40px)}
.d2--x{font-size:clamp(44px,11.4vw,168px);line-height:.86;margin:0}
.d3{font-weight:700;font-size:clamp(18px,2.6vw,34px);letter-spacing:-.03em;margin:clamp(24px,3vw,38px) 0 0}

.eyebrow{font-size:clamp(9px,1vw,11px);letter-spacing:.3em;opacity:.5;margin-bottom:clamp(22px,3.5vw,40px)}
.note{font-size:clamp(9px,1vw,11px);letter-spacing:.24em;opacity:.62;line-height:2;margin-top:clamp(20px,2.6vw,30px)}
.note--55{opacity:.55;margin-top:clamp(24px,3vw,36px)}
.note--link{display:inline-block;margin-top:clamp(12px,1.6vw,18px);opacity:.85;border-bottom:1px solid currentColor;padding-bottom:3px}
.note--link:hover{opacity:.55}
.body{font-size:clamp(10px,1.1vw,13px);letter-spacing:.2em;line-height:2.1;opacity:.62}
.lbl{font-size:10px;letter-spacing:.22em;opacity:.6}
.lbl--dim{opacity:.5;font-size:9.5px;margin-top:14px}
.lbl--gap{opacity:.55;margin-bottom:clamp(28px,3.6vw,46px)}

.foot{
  position:absolute;left:var(--side);bottom:clamp(22px,3.4vw,42px);
  font-size:9px;letter-spacing:.22em;opacity:.4;line-height:1.9;
}
.foot--static{position:static;opacity:.38;margin-top:clamp(46px,6vw,84px)}

/* --- the countdown ------------------------------------------------------ */
.count{border-top:1px solid currentColor;padding-top:clamp(20px,3vw,34px)}
.sec--black .count,.sec--maroon .count{border-top-color:rgba(245,240,232,.18)}
.count__row{display:flex;gap:clamp(14px,2.6vw,40px);font-variant-numeric:tabular-nums}
.count__d{font-weight:800;font-size:clamp(44px,9.6vw,128px);line-height:.82;letter-spacing:-.05em}
.count__d--s{opacity:.42}
.count__l{font-size:9px;letter-spacing:.28em;opacity:.5;margin-top:12px}
.count__big{font-weight:800;font-size:clamp(56px,13vw,190px);line-height:.82;letter-spacing:-.05em;font-variant-numeric:tabular-nums}

/* --- archive · sealed --------------------------------------------------- */
.sealed{min-height:46vh;display:flex;flex-direction:column;justify-content:center}
.memo-hold{margin-top:clamp(40px,5.4vw,72px);max-width:820px}
.memo{position:relative;padding-left:clamp(34px,3.6vw,52px);margin-top:clamp(16px,2vw,24px)}
.memo__ln{
  position:absolute;left:0;top:0;width:clamp(22px,2.6vw,34px);
  font-family:var(--mono);font-size:10px;text-align:right;padding-right:.9em;
  opacity:.42;user-select:none;pointer-events:none;
}
.memo__ln span{display:block}
.memo__body{
  font-family:var(--mono);font-size:clamp(10px,1.05vw,12px);
  line-height:2.2;letter-spacing:.06em;text-transform:uppercase;
}
.memo p{font:inherit;line-height:inherit;letter-spacing:inherit;margin:0;text-transform:inherit}
.memo b{font-weight:400;opacity:.5;margin-right:1.2em}
.rd{display:inline-block;vertical-align:-.16em;height:1em;background:currentColor;width:6em;max-width:100%}
.rd--s{width:3.4em}.rd--m{width:9em}.rd--l{width:14em}
#memo-next{margin-top:clamp(20px,2.6vw,30px)}

/* --- archive · open ----------------------------------------------------- */
.row-head{
  display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--black);padding-bottom:clamp(16px,2vw,22px);
}
.row-head .d2{margin:0;font-size:clamp(34px,7vw,96px);line-height:.88;letter-spacing:-.045em}
.row-head .mono{font-size:10px;letter-spacing:.22em;opacity:.6}

.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(26px,3.4vw,42px)}
.shirt{margin:0}
.tee{
  aspect-ratio:4/5;position:relative;
  clip-path:polygon(0% 13%,22% 0%,78% 0%,100% 13%,100% 33%,84% 39%,84% 100%,16% 100%,16% 39%,0% 33%);
}
.tee--black{background:var(--black);color:var(--cream)}
.tee--cream{background:var(--tint);color:var(--black)}
.tee__in{position:absolute;left:22%;right:22%;top:46%;transform:translateY(-50%)}
.tee__l{font-weight:800;font-size:clamp(15px,1.55vw,22px);line-height:1.02;letter-spacing:-.035em}
.tee__m{font-family:var(--mono);font-size:6.5px;letter-spacing:.16em;line-height:1.85;margin-top:11px;opacity:.7;text-transform:uppercase}
.cap{font-size:9.5px;letter-spacing:.2em;margin-top:14px;line-height:1.9;opacity:.7}
.stand-in{font-size:9px;letter-spacing:.2em;opacity:.45;margin-top:clamp(20px,2.4vw,28px)}

.ledger{margin-top:clamp(46px,6vw,80px);border-top:1px solid var(--black);padding-top:clamp(16px,2vw,22px)}
.ledger .lbl{letter-spacing:.24em;margin-bottom:clamp(14px,1.8vw,20px)}
.ledger__body{font-family:var(--mono);font-size:clamp(10px,1.05vw,12px);line-height:1.5}
.ledger__r{display:grid;grid-template-columns:88px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid rgba(13,13,13,.14)}
.ledger__r span:first-child{letter-spacing:.14em;opacity:.5}

/* --- sizing ------------------------------------------------------------- */
.tbl{font-family:var(--mono);font-size:clamp(10px,1.05vw,12.5px)}
.tbl__r{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:13px 0;border-bottom:1px solid rgba(13,13,13,.16)}
.tbl__r--h{padding:11px 0;border-bottom:1px solid var(--black);letter-spacing:.2em;opacity:.55}

/* --- case file ---------------------------------------------------------- */
.cases{margin-top:clamp(26px,3.4vw,44px)}
.case{
  display:grid;grid-template-columns:44px 1fr;gap:12px;padding:clamp(14px,1.8vw,20px) 0;
  border-top:1px solid rgba(245,240,232,.22);
}
.case span:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.16em;opacity:.55;padding-top:6px}
.case span:last-child{font-weight:600;font-size:clamp(17px,2.4vw,30px);line-height:1.24;letter-spacing:-.02em}

/* --- blocks · the only interactive treatment ---------------------------- */
.block{
  display:inline-block;background:none;cursor:pointer;
  border:1px solid currentColor;
  padding:clamp(16px,1.9vw,22px) clamp(26px,3.4vw,44px);
  font-family:var(--mono);font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.28em;text-transform:uppercase;
  margin-top:clamp(28px,3.6vw,44px);
}
.sec--black .block:hover,.sec--black .block:focus-visible{background:var(--cream);color:var(--black)}
.sec--cream .block:hover,.sec--cream .block:focus-visible{background:var(--black);color:var(--cream)}
.sec--maroon .block:hover,.sec--maroon .block:focus-visible{background:var(--cream);color:var(--maroon)}
.block:disabled{opacity:.4;cursor:not-allowed}

/* --- waitlist ----------------------------------------------------------- */
.wait{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.wait input{
  background:none;border:0;border-bottom:1px solid rgba(245,240,232,.3);
  padding:0 0 12px;font-family:var(--mono);
  font-size:clamp(11px,1.1vw,13px);letter-spacing:.2em;text-transform:uppercase;
}
.wait .block{align-self:flex-start;margin-top:clamp(10px,1.4vw,18px);padding:clamp(15px,1.8vw,20px) clamp(26px,3.4vw,42px)}

/* --- responsive · the index folds to a strip --------------------------- */
@media (max-width:720px){
  :root{--hold:0vh;--top:126px;--idx-t:14px;--idx-l:0px}
  .index{
    left:0;right:0;top:0;flex-direction:row;gap:0;
    background:inherit;
  }
  .index a{
    flex:1;justify-content:center;gap:5px;padding:14px 2px;font-size:9px;letter-spacing:.08em;
  }
  .index a span:last-child{display:none}
  .snd{top:auto;bottom:14px;right:var(--side)}
  /* keep section content clear of the floating toggle */
  .sec{padding-bottom:calc(var(--bot) + 56px)}
  .foot{bottom:calc(clamp(22px,3.4vw,42px) + 56px)}
  .count__row{flex-wrap:wrap;gap:18px clamp(14px,6vw,40px)}
  .count__u{flex:0 0 calc(50% - 20px)}
  .row-head{gap:10px}
}
@media (max-width:720px){
  .index{background:var(--black)}
  .index.is-black{background:var(--cream)}
  .index.on-maroon{background:var(--maroon);color:var(--cream)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .snd__b i{animation:none!important}
}
@media print{.index,.snd{display:none!important}.sec{position:static;min-height:0}}