/* ──────────────────────────────────────────────────────────────────────────
   SPLITTAH — THE CRATE
   A swipe deck. Dating-app chrome on the outside (dark booth, rounded stack,
   pill action bar, cue-point pips), service-manual card stock on the inside
   (white sheet, red spine, mono stamps, CDJ readouts).

   Signal pair carried over from the old site and reused as the swipe verbs:
   BLUE = go  → LOAD   (swipe right, fires the card's link)
   AMBER = fuck-up → EJECT  (swipe left, just moves on)
   RED stays structural: brand, numerals, links. It is never a swipe verb.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --sheet:      #FFFFFF;
  --sheet-2:    #F0F1F3;
  --booth:      #14161B;
  --booth-2:    #1E222B;
  --booth-3:    #272C37;

  --red:        #E5202A;
  --red-deep:   #A8121A;

  --go:         #5AA6FF;
  --go-deep:    #2E6FD0;
  --warn:       #FFB23E;
  --warn-deep:  #C77C10;

  --chalk:      #15171C;
  --chalk-dim:  #565C66;
  --chalk-faint:#969CA6;

  --line:       rgba(17,19,23,.13);
  --line-strong:rgba(17,19,23,.24);
  --booth-line: rgba(233,241,236,.14);

  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --tr-stamp: 0.22em;
  --radius: 20px;

  --topbar-h: 92px;
  --controls-h: 132px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

html{
  background:var(--booth);
  color:#E9F1EC;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(229,32,42,.14), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(90,166,255,.10), transparent 60%),
    var(--booth);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  overscroll-behavior:none;
  display:flex;
  flex-direction:column;
}

/* the booth has a scanline hum */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

.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;
}

.skip{
  position:fixed; left:-999px; top:8px; z-index:200;
  background:var(--red); color:#fff; padding:8px 14px; border-radius:2px;
  font-family:var(--mono); font-size:12px;
}
.skip:focus{ left:8px; }

:focus-visible{ outline:2px solid var(--go); outline-offset:3px; border-radius:2px; }

.stamp{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:var(--tr-stamp);
  text-transform:uppercase;
  color:var(--chalk-faint);
  white-space:nowrap;
}

.pulse{ color:var(--red); animation:pulse 1.7s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── ticker ─────────────────────────────────────────────────────────────── */

.ticker{
  position:relative; z-index:3;
  flex:0 0 auto;
  overflow:hidden;
  background:var(--red);
  color:#fff;
  border-bottom:1px solid rgba(0,0,0,.35);
}
.ticker__track{
  display:flex; width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; padding:5px 0;
}
.ticker__track span{ padding-right:2rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── top bar ────────────────────────────────────────────────────────────── */

.topbar{
  position:relative; z-index:3;
  flex:0 0 auto;
  padding:12px clamp(14px,4vw,28px) 0;
}
.topbar__row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:520px; margin:0 auto;
}
.mark{
  font-family:var(--display); font-weight:900; font-size:15px;
  letter-spacing:-.02em; color:#fff; text-decoration:none;
}
.topbar__meta{ display:flex; align-items:center; gap:12px; }
.topbar__meta .stamp{ color:rgba(233,241,236,.42); }
@media (max-width:400px){ .topbar__meta .stamp:not(.counter){ display:none; } }

.counter{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--red);
}

/* cue-point pips — one segment per card, filled as you work through the crate */
.pips{
  display:flex; gap:3px; max-width:520px; margin:10px auto 0;
}
.pips i{
  display:block; flex:1 1 0; height:3px; border-radius:2px;
  background:rgba(233,241,236,.16);
  transition:background .25s ease, transform .25s ease;
}
.pips i.is-done{ background:var(--red-deep); }
.pips i.is-now{ background:var(--red); transform:scaleY(2); }

/* ── stage + deck ───────────────────────────────────────────────────────── */

.stage{
  position:relative; z-index:2;
  flex:1 1 auto;
  min-height:0;
  display:grid; place-items:center;
  padding:14px clamp(12px,4vw,24px);
}

.deck{
  position:relative;
  width:100%;
  max-width:440px;
  height:100%;
  max-height:720px;
  perspective:1400px;
}

/* ── card ───────────────────────────────────────────────────────────────── */

.card{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--sheet);
  color:var(--chalk);
  border-radius:var(--radius);
  border:1px solid var(--line-strong);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.06) inset;
  overflow:hidden;
  transform-origin:50% 120%;
  transition:transform .42s cubic-bezier(.2,.7,.25,1), opacity .32s ease;
  will-change:transform;
  touch-action:pan-y;
  cursor:grab;
  contain:paint;
}
.card.is-dragging{ transition:none; cursor:grabbing; }
.card[data-state="behind"]{ pointer-events:none; }
.card[data-state="hidden"]{ pointer-events:none; opacity:0; }
.card[data-state="gone"]{ pointer-events:none; opacity:0; }

/* corner brackets — the service-manual tell, kept on the sheet not the chrome */
.card::before,
.card::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none; z-index:4;
  border:1px solid var(--line-strong);
}
.card::before{ top:44px; left:10px; border-right:0; border-bottom:0; }
.card::after{ bottom:38px; right:10px; border-left:0; border-top:0; }

/* grip: the drag handle, always safe to grab even over an iframe card */
.card__grip{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  background:var(--sheet-2);
  cursor:grab;
}
.card__grip .stamp{ color:var(--chalk-dim); }
.stamp--live{ color:var(--chalk) !important; }

.card__body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:22px clamp(18px,5vw,26px);
  scrollbar-width:thin;
  scrollbar-color:var(--chalk-faint) var(--sheet-2);
}
.card__body::-webkit-scrollbar{ width:6px; }
.card__body::-webkit-scrollbar-track{ background:var(--sheet-2); }
.card__body::-webkit-scrollbar-thumb{ background:var(--chalk-faint); border-radius:99px; }

.card__foot{
  flex:0 0 auto;
  padding:9px 14px;
  border-top:1px solid var(--line);
  background:var(--sheet-2);
  text-align:center;
}

.card__title{
  font-family:var(--display); font-weight:900;
  font-size:clamp(28px,7.5vw,38px); line-height:.98; letter-spacing:-.035em;
  text-transform:uppercase; margin:0 0 14px;
}
.card__title em{ font-style:normal; color:var(--red); }
.card__by{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--chalk-dim); margin:-8px 0 16px;
}
.card__body p{ margin:0 0 14px; color:var(--chalk-dim); font-size:15px; }
.card__body p strong{ color:var(--chalk); }

/* embed cards get gutters so there is always something to drag */
.card--embed .card__body{ padding-left:32px; padding-right:32px; }
.card__gutter{
  position:absolute; top:44px; bottom:36px; width:28px; z-index:3;
  display:grid; place-items:center;
  cursor:grab;
  background:linear-gradient(var(--sheet-2), var(--sheet-2));
}
.card__gutter--l{ left:0; border-right:1px solid var(--line); }
.card__gutter--r{ right:0; border-left:1px solid var(--line); }
.card__gutter span{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--chalk-faint);
  writing-mode:vertical-rl; text-orientation:mixed;
}
.card__gutter--l span{ transform:rotate(180deg); }

.embed{ border:1px solid var(--line); border-radius:6px; padding:8px; background:var(--sheet); }
.embed iframe{ display:block; border:0; width:100%; }
.embed--tour{ padding:4px 8px; }
.card--embed .card__body{ display:flex; flex-direction:column; }
.card--embed .embed{ flex:1 1 auto; min-height:230px; display:flex; }
.card--embed .embed iframe{ flex:1 1 auto; height:auto; min-height:0; }
.card--embed .embed--tour{ display:block; overflow-y:auto; }

/* ── swipe verdict stamps ───────────────────────────────────────────────── */

.verdict{
  position:absolute; top:64px; z-index:6; pointer-events:none;
  font-family:var(--display); font-weight:900;
  font-size:34px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border:4px solid currentColor; border-radius:6px;
  opacity:0; transition:opacity .12s linear;
}
.verdict--load{ right:20px; color:var(--go-deep); transform:rotate(14deg); }
.verdict--eject{ left:20px; color:var(--warn-deep); transform:rotate(-14deg); }

/* ── profile card ───────────────────────────────────────────────────────── */

.profile{ display:flex; flex-direction:column; min-height:100%; }
.profile .wave{ margin-top:auto; }
.profile__name{
  font-family:var(--display); font-weight:900;
  font-size:clamp(30px,8vw,44px); line-height:.92; letter-spacing:-.045em;
  text-transform:uppercase; margin:0;
}
.profile__age{ color:var(--chalk-faint); font-weight:600; letter-spacing:-.02em; }
.profile__role{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--chalk-dim); margin:8px 0 16px;
}
.profile__role .sep{ color:var(--red); }
.wave{ display:block; width:100%; height:64px; margin:0 0 14px; }
.profile__bio{ margin:0 0 8px; }
.profile__line{ margin:0 0 22px; font-size:17px; }
.profile__line strong{ color:var(--red); }

.readout{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-strong); border-radius:4px; overflow:hidden;
  background:var(--sheet-2);
}
.readout__cell{ padding:9px 8px; border-right:1px solid var(--line); }
.readout__cell:last-child{ border-right:0; }
.readout__k{
  font-family:var(--mono); font-size:8px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--chalk-faint);
}
.readout__v{
  font-family:var(--display); font-weight:800; font-size:19px;
  letter-spacing:-.02em; line-height:1.2;
}
.readout__v.is-go{ color:var(--go-deep); }
.readout__v.is-warn{ color:var(--warn-deep); }

/* ── chips ──────────────────────────────────────────────────────────────── */

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 18px; }
.chips li{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--chalk-dim);
  border:1px solid var(--line-strong); border-radius:99px; padding:4px 10px;
}

/* ── links + buttons on the sheet ───────────────────────────────────────── */

.bigmail{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(18px,4.6vw,23px); letter-spacing:-.02em;
  color:var(--red); text-decoration:none;
  border-bottom:1px solid rgba(229,32,42,.35);
  margin:0 0 20px; padding-bottom:6px; word-break:break-word;
}
.bigmail:hover{ color:var(--red-deep); border-color:var(--red); }

.btnrow{ display:flex; flex-wrap:wrap; gap:8px; }
.btn{
  display:inline-block;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
  padding:11px 16px; border-radius:3px; border:1px solid var(--chalk);
  transition:background .14s ease, color .14s ease;
  cursor:pointer;
}
.btn--primary{ background:var(--chalk); color:#fff; }
.btn--primary:hover{ background:var(--red); border-color:var(--red); }
.btn--ghost{ background:transparent; color:var(--chalk); }
.btn--ghost:hover{ background:var(--chalk); color:#fff; }

.contact-link{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red); text-decoration:none;
  border-bottom:1px solid rgba(229,32,42,.35);
}
.contact-link:hover{ color:var(--red-deep); border-color:var(--red); }

/* ── match card ─────────────────────────────────────────────────────────── */

.card--match{ background:var(--booth); border-color:var(--booth-3); color:#E9F1EC; }
.card--match .card__grip,
.card--match .card__foot{ background:var(--booth-2); border-color:var(--booth-line); }
.card--match .card__grip .stamp{ color:rgba(233,241,236,.5); }
.card--match .card__foot .stamp{ color:rgba(233,241,236,.4); }
.card--match .stamp--live{ color:#E9F1EC !important; }
.card--match::before,.card--match::after{ border-color:var(--booth-line); }
.card--match .card__body{ scrollbar-color:var(--booth-3) var(--booth); }

.match{ display:flex; flex-direction:column; height:100%; }
.match__stamp{
  font-family:var(--display); font-weight:900;
  font-size:clamp(36px,10vw,50px); line-height:.9; letter-spacing:-.045em;
  text-transform:uppercase; color:var(--red);
  margin:0 0 10px;
}
.match__line{ color:rgba(233,241,236,.62) !important; margin:0 0 22px; }

.socials{ list-style:none; padding:0; margin:0 0 auto; }
.socials a{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:12px 0; border-top:1px solid var(--booth-line);
  text-decoration:none; color:#E9F1EC;
  transition:color .14s ease;
}
.socials li:last-child a{ border-bottom:1px solid var(--booth-line); }
.socials a:hover{ color:var(--red); }
.socials .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:var(--tr-stamp);
  text-transform:uppercase; color:rgba(233,241,236,.45);
}
.socials .v{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.colophon{ padding-top:22px; }
.colophon .stamp{ color:rgba(233,241,236,.3); white-space:normal; line-height:1.9; }

/* ── end state, under the stack ─────────────────────────────────────────── */

.end{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:24px;
  border:1px dashed var(--booth-line); border-radius:var(--radius);
  opacity:0; pointer-events:none; transition:opacity .3s ease .1s;
}
.end.is-on{ opacity:1; pointer-events:auto; }
.end__stamp{
  font-family:var(--display); font-weight:900;
  font-size:clamp(28px,8vw,40px); letter-spacing:-.04em; text-transform:uppercase;
  color:rgba(233,241,236,.9);
}
.end p{ color:rgba(233,241,236,.5); margin:0; max-width:26ch; }
.end .btn--primary{ background:var(--red); border-color:var(--red); color:#fff; }
.end .btn--primary:hover{ background:#fff; border-color:#fff; color:var(--chalk); }

/* ── controls ───────────────────────────────────────────────────────────── */

.controls{
  position:relative; z-index:3;
  flex:0 0 auto;
  padding:4px clamp(14px,4vw,28px) max(16px, env(safe-area-inset-bottom));
  text-align:center;
}
.controls__row{
  display:flex; align-items:center; justify-content:center; gap:clamp(16px,6vw,30px);
}

.ctl{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono);
}
.ctl__glyph{
  display:grid; place-items:center;
  width:62px; height:62px; border-radius:50%;
  border:1.5px solid var(--booth-3);
  background:linear-gradient(180deg, var(--booth-2), #171A21);
  font-size:22px; line-height:1; color:#E9F1EC;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
  transition:transform .16s cubic-bezier(.2,.7,.25,1), border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.ctl__label{
  font-size:9px; letter-spacing:var(--tr-stamp); text-transform:uppercase;
  color:rgba(233,241,236,.42);
  transition:color .16s ease;
}
.ctl:hover .ctl__glyph{ transform:translateY(-2px) scale(1.05); }
.ctl:active .ctl__glyph{ transform:scale(.94); }
.ctl:hover .ctl__label{ color:rgba(233,241,236,.8); }

.ctl--eject .ctl__glyph{ color:var(--warn); border-color:rgba(255,178,62,.4); }
.ctl--eject:hover .ctl__glyph{ border-color:var(--warn); box-shadow:0 8px 26px rgba(255,178,62,.28); }
.ctl--load .ctl__glyph{ color:var(--go); border-color:rgba(90,166,255,.4); }
.ctl--load:hover .ctl__glyph{ border-color:var(--go); box-shadow:0 8px 26px rgba(90,166,255,.28); }
.ctl--rewind .ctl__glyph{ width:48px; height:48px; font-size:17px; color:rgba(233,241,236,.72); }

.ctl[disabled]{ cursor:default; opacity:.32; }
.ctl[disabled]:hover .ctl__glyph{ transform:none; box-shadow:0 8px 22px rgba(0,0,0,.5); }
.ctl[disabled]:hover .ctl__label{ color:rgba(233,241,236,.42); }

.hint{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(233,241,236,.3);
  margin:12px 0 0;
  transition:opacity .4s ease;
}
.hint.is-off{ opacity:0; }
.hint kbd{
  font-family:var(--mono); font-size:9.5px;
  border:1px solid var(--booth-3); border-radius:3px; padding:1px 5px;
}

/* ── short viewports: shrink the chrome before the card ─────────────────── */

@media (max-height:700px){
  .ctl__glyph{ width:52px; height:52px; font-size:19px; }
  .ctl--rewind .ctl__glyph{ width:42px; height:42px; font-size:15px; }
  .hint{ margin-top:8px; }
  .stage{ padding-top:8px; padding-bottom:8px; }
}
@media (max-height:600px){
  .ticker{ display:none; }
  .hint{ display:none; }
}

/* ── wide viewports: liner notes run up the empty margins ───────────────── */

.rails{ display:none; }

@media (min-width:1080px) and (min-height:640px){
  .deck{ max-width:460px; }

  .rails{
    display:block;
    position:fixed; inset:0; z-index:1; pointer-events:none;
  }
  .rails span{
    position:absolute; top:50%;
    font-family:var(--mono); font-size:11px; letter-spacing:.42em;
    text-transform:uppercase; color:rgba(233,241,236,.13);
    white-space:nowrap;
  }
  .rails__l{ left:38px; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; }
  .rails__r{ right:38px; transform:translateY(-50%); writing-mode:vertical-rl; }
}

/* ── reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .ticker__track{ animation:none; }
  .pulse{ animation:none; }
  .card{ transition:opacity .2s linear; }
  .ctl__glyph{ transition:border-color .16s ease, color .16s ease; }
  .ctl:hover .ctl__glyph,.ctl:active .ctl__glyph{ transform:none; }
}