/* =========================================================================
   THE LIVE RESUME — Grady Davis
   A deliberately single-world design: a broadcast control room.
   Every colour is painted explicitly so the page holds on any host ground.
   ========================================================================= */

:root{
  color-scheme: dark;

  /* ground — near-black with a violet bias, not a neutral grey */
  --ink:      #07060B;
  --ink-2:    #100D19;
  --ink-3:    #191428;
  --line:     rgba(154,147,180,.16);
  --line-2:   rgba(154,147,180,.30);

  /* accents: broadcast red, mint signal, award gold */
  --live:     #FF1E4E;
  --live-dim: rgba(255,30,78,.14);
  --signal:   #24F0C8;
  --signal-dim: rgba(36,240,200,.12);
  --gold:     #FFC24B;

  --text:     #F2EFF8;
  --haze:     #9A93B4;
  --haze-2:   #6F6888;

  /* recruiter mode */
  --paper:      #FCFBF8;
  --paper-2:    #F0EEE8;
  --paper-ink:  #16121C;
  --paper-haze: #57506A;
  --paper-line: #DDD9D0;

  --f-disp: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-body: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --chat-w: 336px;
  --tick-h: 34px;
  --top-h:  60px;

  --gut: clamp(20px, 5vw, 64px);
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw + 12px, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient grain + vignette, fixed behind everything */
body::before{
  content:"";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(154,147,180,.07), transparent 60%),
    radial-gradient(100% 70% at 50% 100%, rgba(7,6,11,.9), transparent 55%);
}

a{ color: inherit; }
h1,h2,h3{ margin: 0; text-wrap: balance; }
ul,ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; }
img,svg{ max-width: 100%; }

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

.vh{
  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; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--signal); color: #04120F;
  padding: 10px 16px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  transition: transform .18s ease;
}
.skip:focus{ transform: none; }

/* =========================================================================
   BROADCAST CHROME — top bar
   ========================================================================= */

.chrome-top{
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-inline: clamp(12px, 3vw, 22px);
  background: linear-gradient(180deg, rgba(7,6,11,.92) 30%, rgba(7,6,11,0));
  backdrop-filter: blur(10px);
}

.onair{ display: flex; align-items: center; gap: 10px; min-width: 0; }

.live{
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--live); color: #fff;
  font-family: var(--f-mono); font-weight: 700; font-size: .68rem;
  letter-spacing: .14em;
  padding: 5px 10px 5px 9px; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 22px rgba(255,30,78,.34);
}
.live__dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.72)} }

.meta{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: .74rem;
  color: var(--haze);
  padding: 5px 10px; border-radius: 4px;
  background: rgba(25,20,40,.7);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.meta b{ color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.meta__lbl{ color: var(--haze-2); }
.meta--time b{ color: var(--signal); }
.ic{ width: 1em; height: 1em; display: block; }
.meta .ic{ width: 13px; height: 13px; opacity: .7; }

.actions{ display: flex; align-items: center; gap: 8px; }

.act{
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(25,20,40,.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.act:hover{ border-color: var(--line-2); background: rgba(35,28,56,.85); }
.act:active{ transform: scale(.95); }
.act .ic{ width: 15px; height: 15px; }
.act__n{ font-family: var(--f-mono); font-size: .74rem; font-variant-numeric: tabular-nums; }
.act__lbl{ font-size: .78rem; font-weight: 400; }
.act--heart{ color: var(--live); }
.act--heart .act__n{ color: var(--text); }
.act--heart.is-hot{ animation: kick .3s ease; }
@keyframes kick{ 40%{ transform: scale(1.18) } }
.act--cart.is-hot{ border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-dim); }
.act--mode{ color: var(--haze); }
.act--mode:hover{ color: var(--text); }

/* =========================================================================
   SCENES
   ========================================================================= */

.scenes{
  position: relative; z-index: 1;
  scroll-snap-type: y proximity;
}

.scene{
  scroll-snap-align: start;
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: calc(var(--top-h) + 40px) calc(var(--tick-h) + 130px);
  padding-inline: var(--gut);
  border-top: 1px solid var(--line);
}
.scene:first-child{ border-top: 0; }
.scene--tall{ align-items: flex-start; }

@media (max-height: 780px){
  .scene{ align-items: flex-start; }
}

.wrap{ width: 100%; max-width: 980px; margin-inline: auto; position: relative; z-index: 2; }
.wrap--read{ max-width: 720px; }

.glow{ position: absolute; pointer-events: none; z-index: 0; filter: blur(90px); opacity: .5; }
.glow--live{
  inset: -10% auto auto -12%; width: 58vw; height: 58vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(255,30,78,.34), transparent 66%);
}
.glow--signal{
  inset: auto -14% 4% auto; width: 54vw; height: 54vw; max-width: 660px; max-height: 660px;
  background: radial-gradient(circle, rgba(36,240,200,.24), transparent 66%);
}
.glow--gold{
  inset: 8% -10% auto auto; width: 48vw; height: 48vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(255,194,75,.20), transparent 66%);
}

.eyebrow{
  margin: 0 0 clamp(14px, 2.4vw, 26px);
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--haze-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.eyebrow__n{
  color: var(--live); font-weight: 700;
  border: 1px solid var(--live-dim); background: var(--live-dim);
  padding: 2px 7px; border-radius: 3px;
}

/* ---------- 01 hero ---------- */

.brk{ display: block; height: 0; }

.name{
  font-family: var(--f-disp);
  font-size: clamp(3.4rem, min(15vw, 19vh), 10rem);
  line-height: .84;
  letter-spacing: -.012em;
  text-transform: uppercase;
  margin-bottom: clamp(16px, 2.6vw, 26px);
  background: linear-gradient(176deg, #FFFFFF 12%, #CFC7E4 58%, #7E7699 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not (background-clip: text){ .name{ color: var(--text); } }

.role{
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-size: clamp(1rem, 1.5vw + .5rem, 1.42rem);
  font-weight: 600; letter-spacing: -.01em;
}
.role .sep{ color: var(--live); padding-inline: 6px; }

.chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(30px, 5vw, 54px); }
.chip{
  font-size: .8rem; color: var(--haze);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; background: rgba(16,13,25,.6);
}
.chip a{ color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.chip a:hover{ border-bottom-color: var(--signal); color: var(--signal); }

.stats{
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.stat{
  background: rgba(16,13,25,.86);
  padding: clamp(16px, 2.2vw, 24px);
  display: flex; flex-direction: column; gap: 5px;
}
.stat__v{
  font-family: var(--f-disp);
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1; letter-spacing: .005em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.stat__k{ font-size: .88rem; color: var(--text); line-height: 1.4; }
.stat__src{ font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--haze-2); margin-top: 2px; }

.cue{
  margin: clamp(30px,5vw,52px) 0 0;
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--haze-2);
  display: flex; align-items: center; gap: 12px;
}
.cue::after{
  content:""; width: 44px; height: 1px; background: var(--line-2);
  animation: slide 2.2s ease-in-out infinite;
}
@keyframes slide{ 0%,100%{ transform: translateX(0); opacity:.4 } 50%{ transform: translateX(10px); opacity:1 } }

/* ---------- 02 pitch ---------- */

.display{
  font-family: var(--f-disp);
  font-size: clamp(2.9rem, 8.4vw, 6.4rem);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.008em;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.display em{ font-style: normal; color: var(--live); }
.display--sm{
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.lede{
  margin: 0 0 20px;
  font-size: clamp(1.02rem, .7vw + .85rem, 1.24rem);
  line-height: 1.66;
  max-width: 62ch;
}
.lede b{ color: var(--signal); font-weight: 600; }
.lede--dim{ color: var(--haze); font-size: 1rem; }

/* ---------- 03 drops ---------- */

.drops{ display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }

.drop{ position: relative; padding-left: clamp(18px, 2.4vw, 28px); }
.drop__rail{
  position: absolute; left: 0; top: 6px; bottom: 4px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--line-2), transparent);
}
.drop--now .drop__rail{ background: linear-gradient(180deg, var(--live), rgba(255,30,78,0)); }

.drop__head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.drop__flag{
  font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
  background: var(--live); color: #fff;
}
.drop__flag--sold{ background: transparent; color: var(--haze-2); border: 1px solid var(--line); }
.drop__when{ font-family: var(--f-mono); font-size: .74rem; color: var(--haze); }

.drop__title{
  font-size: clamp(1.28rem, 1.7vw + .7rem, 1.85rem);
  font-weight: 800; letter-spacing: -.018em; line-height: 1.16;
  margin-bottom: 4px;
}
.drop__org{ margin: 0 0 16px; font-size: .95rem; color: var(--signal); font-weight: 600; }
.drop__org-x{ color: var(--haze-2); font-weight: 300; }
.drop__org-x::before{ content:"·"; padding-inline: 8px; }

.drop__list{ display: flex; flex-direction: column; gap: 11px; max-width: 70ch; }
.drop__list li{
  position: relative; padding-left: 20px;
  font-size: .96rem; color: #D8D3E6; line-height: 1.58;
}
.drop__list li::before{
  content:""; position: absolute; left: 3px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--haze-2);
}
.drop--now .drop__list li::before{ background: var(--live); }
.brand--wrapped .drop__list li::before{ background: var(--haze-2); }
.drop__list b{ color: var(--signal); font-weight: 600; }

/* ---------- 04 numbers ---------- */

.panel{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(25,20,40,.7), rgba(16,13,25,.7));
  padding: clamp(18px, 2.6vw, 28px);
  margin-bottom: 20px;
  overflow-x: auto;
}
.panel__head{ margin-bottom: 18px; }
.panel__title{ font-size: 1.04rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 5px; }
.panel__note{ margin: 0; font-size: .8rem; color: var(--haze-2); max-width: 60ch; }

.chart{ display: block; width: 100%; min-width: 460px; height: auto; overflow: visible; }
.chart__grid line{ stroke: var(--line); stroke-width: 1; }
.bar{ fill: var(--signal); transition: width 1.1s cubic-bezier(.22,.9,.3,1); }
.bar--2{ fill: #59D7F2; }
.bar--3{ fill: var(--gold); }
.chart__lab text{
  fill: var(--haze); font-family: var(--f-body); font-size: 11.5px; font-weight: 400;
}
.chart__val text{
  fill: var(--text); font-family: var(--f-mono); font-size: 15px; font-weight: 700;
  dominant-baseline: middle;
}
.chart__axis text{
  fill: var(--haze-2); font-family: var(--f-mono); font-size: 10.5px;
}

.kpis{
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; margin-bottom: 20px;
}
.kpi{ background: rgba(16,13,25,.9); padding: clamp(15px,2vw,22px); display:flex; flex-direction:column; gap:4px; }
.kpi__v{
  font-family: var(--f-disp); font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.kpi__k{ font-size: .84rem; color: var(--haze); line-height: 1.38; }

.readout{
  border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(16px,2.2vw,22px);
  background: rgba(16,13,25,.55);
}
.readout__h{
  margin: 0 0 12px; font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--haze-2);
}
.readout__l{ display: flex; flex-wrap: wrap; gap: 10px 26px; }
.readout__l li{ font-size: .85rem; color: var(--haze); }
.readout__l span{
  font-family: var(--f-mono); font-weight: 700; color: var(--signal);
  margin-right: 8px; letter-spacing: .04em;
}

/* ---------- 05 shop ---------- */

.shop__hint{
  margin: -14px 0 clamp(26px,3.4vw,38px);
  color: var(--haze); font-size: .95rem; max-width: 56ch;
}

.shelves{ display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.shelf__h{
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--haze-2);
  margin-bottom: 13px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.shelf__l{ display: flex; flex-wrap: wrap; gap: 9px; }

.sku{
  background: rgba(25,20,40,.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 15px 9px 32px;
  font-size: .88rem; font-weight: 400;
  cursor: pointer; position: relative;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .1s ease;
}
.sku::before{
  content:"+";
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: .9rem; color: var(--haze-2);
  transition: color .16s ease, transform .16s ease;
}
.sku:hover{ border-color: var(--line-2); background: rgba(35,28,56,.8); }
.sku:active{ transform: scale(.97); }
.sku[aria-pressed="true"]{
  border-color: var(--signal);
  background: var(--signal-dim);
  color: var(--signal);
}
.sku[aria-pressed="true"]::before{ content:"✓"; color: var(--signal); }

/* ---------- 06 reel ---------- */

.reel{
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.clip{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(18px,2.4vw,24px);
  background: linear-gradient(170deg, rgba(25,20,40,.78), rgba(16,13,25,.6));
  display: flex; flex-direction: column; gap: 9px;
}
.clip--wide{ grid-column: 1 / -1; }
.clip__v{
  margin: 0;
  font-family: var(--f-disp);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.clip__t{ margin: 0; font-size: .93rem; color: #D8D3E6; line-height: 1.52; }
.clip__s{
  margin: auto 0 0; padding-top: 6px;
  font-family: var(--f-mono); font-size: .67rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--haze-2);
}

/* ---------- 07 checkout ---------- */

.basket{
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(16,13,25,.7);
  padding: clamp(18px,2.4vw,24px);
  margin-bottom: 22px;
}
.basket__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 14px; }
.basket__h{
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--haze-2);
}
.basket__clear{
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: .74rem; color: var(--haze); cursor: pointer;
}
.basket__clear:hover{ color: var(--live); border-color: var(--live); }
.basket__empty{ margin: 0; font-size: .92rem; color: var(--haze); line-height: 1.55; }
.basket__empty a{ color: var(--signal); }
.basket__l{ display: flex; flex-wrap: wrap; gap: 8px; }
.basket__l li{
  font-size: .84rem; color: var(--signal);
  border: 1px solid var(--signal-dim); background: var(--signal-dim);
  border-radius: 7px; padding: 6px 12px;
}

.cta{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.btn{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  text-align: left; width: 100%;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(25,20,40,.5);
  padding: 16px 20px;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.btn:hover{ border-color: var(--text); background: rgba(35,28,56,.75); transform: translateX(3px); }
.btn__x{
  font-family: var(--f-mono); font-size: .72rem; font-weight: 400;
  color: var(--haze-2); text-align: right; flex-shrink: 0;
}
.btn--primary{
  background: var(--live); border-color: var(--live); color: #fff;
  box-shadow: 0 10px 34px rgba(255,30,78,.28);
}
.btn--primary:hover{ background: #ff3a62; border-color: #ff3a62; }
.btn--primary .btn__x{ color: rgba(255,255,255,.78); }

.signoff{
  margin: 0; font-family: var(--f-mono); font-size: .74rem;
  letter-spacing: .1em; color: var(--haze-2);
}

/* =========================================================================
   CHAT
   ========================================================================= */

.chat{
  position: fixed; z-index: 55;
  right: 0; bottom: var(--tick-h);
  width: var(--chat-w);
  top: var(--top-h);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7,6,11,.42), rgba(7,6,11,.86));
  backdrop-filter: blur(14px);
}
.chat__head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px;
}
.chat__h{
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--haze-2);
}
.chat__toggle{
  background: none; border: 0; cursor: pointer;
  font-size: .74rem; color: var(--haze-2);
  padding: 2px 4px;
}
.chat__toggle:hover{ color: var(--text); }

.chat__feed{
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 9px;
  padding: 10px 16px 14px;
  mask-image: linear-gradient(180deg, transparent, #000 44px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 44px);
}
.chat__feed::-webkit-scrollbar{ width: 0; }

.msg{
  font-size: .82rem; line-height: 1.42; color: #DCD7EA;
  animation: msgIn .34s cubic-bezier(.2,.9,.3,1) both;
  word-break: break-word;
}
@keyframes msgIn{ from{ opacity:0; transform: translateY(9px) } }
.msg__u{ color: var(--haze); font-weight: 600; margin-right: 6px; }
.msg--you .msg__u{ color: var(--live); }
.msg--you{ color: #fff; }
.msg--host{
  color: var(--signal);
  border-left: 2px solid var(--signal);
  padding-left: 9px;
}
.msg--host .msg__u{ color: var(--signal); }

.chat__form{
  display: flex; gap: 8px; align-items: center;
  padding: 11px 14px 14px;
  border-top: 1px solid var(--line);
}
.chat__in{
  flex: 1 1 auto; min-width: 0;
  background: rgba(25,20,40,.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  font: inherit; font-size: .84rem; color: var(--text);
}
.chat__in::placeholder{ color: var(--haze-2); }
.chat__in:focus{ border-color: var(--line-2); outline-offset: 1px; }
.chat__send{
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--live); border: 0; color: #fff; cursor: pointer;
  transition: transform .12s ease, background .16s ease;
}
.chat__send .ic{ width: 16px; height: 16px; }
.chat__send:hover{ background: #ff3a62; }
.chat__send:active{ transform: scale(.9); }

.chat.is-collapsed .chat__feed,
.chat.is-collapsed .chat__form{ display: none; }
.chat.is-collapsed{ top: auto; height: auto; }

/* =========================================================================
   TICKER + HEARTS + TOAST
   ========================================================================= */

.ticker{
  position: fixed; inset: auto 0 0 0; z-index: 58;
  height: var(--tick-h);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
}
.ticker__track{ display: flex; width: max-content; animation: roll 48s linear infinite; }
.ticker__run{
  display: inline-flex; align-items: center; gap: 8px;
  padding-right: 30px; white-space: nowrap;
  font-family: var(--f-mono); font-size: .7rem; color: var(--haze);
}
.ticker__run b{ color: var(--signal); font-weight: 700; }
.ticker__run i{ font-style: normal; color: var(--haze-2); padding-inline: 14px; }
@keyframes roll{ to{ transform: translateX(-50%) } }

.hearts{ position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.heart{
  position: absolute;
  width: 26px; height: 26px;
  color: var(--live);
  animation: float 2.4s cubic-bezier(.3,.7,.4,1) forwards;
  will-change: transform, opacity;
}
.heart svg{ width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 10px rgba(255,30,78,.5)); }
@keyframes float{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3) }
  14%  { opacity: 1; transform: translate(-50%,-50%) scale(1.1) }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--dy))) scale(.7) rotate(var(--rot)) }
}

.toast{
  position: fixed; left: 50%; bottom: calc(var(--tick-h) + 18px);
  transform: translate(-50%, 18px); z-index: 95;
  background: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 9px 20px;
  font-size: .82rem; color: var(--text);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  max-width: calc(100vw - 32px);
}
.toast.is-on{ opacity: 1; transform: translate(-50%, 0); }

/* =========================================================================
   RESPONSIVE — chat becomes a bottom strip below 1100px
   ========================================================================= */

@media (min-width: 1100px){
  body{ padding-right: var(--chat-w); }
  .chrome-top{ right: var(--chat-w); }
  .ticker{ right: 0; }
}

@media (max-width: 1099px){
  :root{ --top-h: 54px; }
  .chat{
    top: auto; left: 0; right: 0; width: auto;
    bottom: var(--tick-h);
    height: min(64vh, 460px);
    border-left: 0; border-top: 1px solid var(--line);
    background: rgba(9,7,14,.97);
  }
  .chat__head{
    padding: 0 10px 0 16px;
    min-height: 52px; align-items: center; flex: 0 0 auto;
  }
  .chat__feed{ padding: 8px 16px 10px; gap: 9px; font-size: .84rem; }
  .chat__form{ padding: 9px 14px 12px; }
  .chat__send{ width: 36px; height: 36px; }
  .chat__toggle{
    min-height: 40px; min-width: 76px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(36,240,200,.32);
    background: rgba(36,240,200,.1);
    border-radius: 999px; color: var(--signal);
    font-size: .78rem; font-weight: 600;
  }
  .chat.is-collapsed{ height: 52px; }
  .scene{ padding-bottom: calc(var(--tick-h) + 88px); }
  .act--mode .act__lbl{ display: none; }
  .act--mode{ padding: 7px 9px; }
  .meta--time{ display: none; }
  .chrome-top{ gap: 8px; padding-inline: 10px; }
  .actions{ gap: 6px; flex: 0 0 auto; }
  .act{ padding: 7px 10px; gap: 5px; }
  .onair{ gap: 7px; overflow: hidden; }
}

@media (max-width: 600px){
  .onair .meta{ display: none; }
}

@media (max-width: 560px){
  .meta__lbl{ display: none; }
  .btn{ flex-direction: column; align-items: flex-start; gap: 4px; }
  .btn__x{ text-align: left; }
  .chart{ min-width: 400px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ticker__track{ animation: none; }
  .hearts{ display: none; }
}

/* =========================================================================
   RECRUITER MODE — same DOM, a paper skin. Also the print stylesheet.
   ========================================================================= */

body.mode-doc{
  background: var(--paper);
  color: var(--paper-ink);
  padding-right: 0;
  font-size: 15px;
}
body.mode-doc::before{ display: none; }
.mode-doc .chat,
.mode-doc .ticker,
.mode-doc .hearts,
.mode-doc .glow,
.mode-doc .cue,
.mode-doc .shop__hint,
.mode-doc .basket,
.mode-doc .act--heart,
.mode-doc .act--cart,
.mode-doc .onair .meta,
.mode-doc .live,
.mode-doc .eyebrow__n{ display: none !important; }

.mode-doc .chrome-top{
  position: sticky; background: var(--paper); backdrop-filter: none;
  border-bottom: 1px solid var(--paper-line);
  justify-content: flex-end;
  right: 0;
}
.mode-doc .act{
  background: var(--paper-2); border-color: var(--paper-line); color: var(--paper-ink);
}
.mode-doc .act:hover{ background: #E4E1D9; }
.mode-doc .act--mode .act__lbl{ display: inline; }

.mode-doc .scenes{ scroll-snap-type: none; max-width: 780px; margin-inline: auto; }
.mode-doc .scene{
  min-height: 0; display: block;
  padding-block: 20px 26px;
  padding-inline: 28px;
  border-top: 1px solid var(--paper-line);
}
.mode-doc .scene--hero{ border-top: 0; padding-top: 30px; }
.mode-doc .wrap{ max-width: none; }

.mode-doc .eyebrow{
  color: var(--paper-haze); font-size: .64rem; letter-spacing: .2em;
  margin-bottom: 10px;
}
.mode-doc .name{
  font-family: var(--f-body); font-weight: 800;
  font-size: 2.3rem; line-height: 1.05; letter-spacing: -.03em;
  color: var(--paper-ink); background: none; -webkit-text-fill-color: currentColor;
  margin-bottom: 6px;
}
.mode-doc .brk{ display: inline; height: auto; }
.mode-doc .brk::before{ content: " "; }
.mode-doc .role{ font-size: 1rem; margin-bottom: 10px; color: var(--paper-haze); }
.mode-doc .role .sep{ color: var(--paper-haze); }
.mode-doc .chip{ background: none; border-color: var(--paper-line); color: var(--paper-haze); font-size: .78rem; }
.mode-doc .chip a{ color: var(--paper-ink); border-bottom-color: var(--paper-line); }
.mode-doc .chips{ margin-bottom: 18px; }

.mode-doc .stats,
.mode-doc .kpis{ background: var(--paper-line); border-color: var(--paper-line); border-radius: 6px; }
.mode-doc .stat,
.mode-doc .kpi{ background: var(--paper); padding: 12px 14px; }
.mode-doc .stat__v,
.mode-doc .kpi__v{ font-family: var(--f-body); font-weight: 800; font-size: 1.5rem; color: var(--paper-ink); letter-spacing: -.02em; }
.mode-doc .stat__k,
.mode-doc .kpi__k{ font-size: .8rem; color: var(--paper-haze); }
.mode-doc .stat__src{ color: var(--paper-haze); }

.mode-doc .display{
  font-family: var(--f-body); font-weight: 800;
  font-size: 1.32rem; letter-spacing: -.028em; line-height: 1.2;
  text-transform: none; color: var(--paper-ink);
  margin-bottom: 12px;
}
.mode-doc .display em{ color: var(--paper-ink); }
.mode-doc .lede{ font-size: .92rem; color: var(--paper-ink); margin-bottom: 10px; }
.mode-doc .lede b{ color: var(--paper-ink); font-weight: 700; }
.mode-doc .lede--dim{ color: var(--paper-haze); font-size: .88rem; }

.mode-doc .drops{ gap: 20px; }
.mode-doc .drop{ padding-left: 0; break-inside: avoid; }
.mode-doc .drop__rail{ display: none; }
.mode-doc .drop__flag{ background: none; color: var(--paper-haze); border: 1px solid var(--paper-line); }
.mode-doc .drop__when{ color: var(--paper-haze); font-size: .72rem; }
.mode-doc .drop__title{ font-size: 1.04rem; }
.mode-doc .drop__org{ color: var(--paper-ink); font-size: .88rem; margin-bottom: 8px; }
.mode-doc .drop__org-x{ color: var(--paper-haze); }
.mode-doc .drop__list{ gap: 5px; }
.mode-doc .drop__list li{ font-size: .86rem; color: var(--paper-ink); line-height: 1.45; }
.mode-doc .drop__list li::before{ background: var(--paper-haze); width: 4px; height: 4px; }
.mode-doc .drop__list b{ color: var(--paper-ink); font-weight: 700; }

.mode-doc .panel,
.mode-doc .readout,
.mode-doc .clip{ background: none; border-color: var(--paper-line); border-radius: 6px; }
.mode-doc .panel__note,
.mode-doc .readout__h,
.mode-doc .clip__s{ color: var(--paper-haze); }
.mode-doc .chart__lab text{ fill: var(--paper-haze); }
.mode-doc .chart__val text{ fill: var(--paper-ink); }
.mode-doc .chart__axis text{ fill: var(--paper-haze); }
.mode-doc .chart__grid line{ stroke: var(--paper-line); }
.mode-doc .bar{ fill: #1F8F78; }
.mode-doc .bar--2{ fill: #2C6E8F; }
.mode-doc .bar--3{ fill: #A87516; }
.mode-doc .readout__l li{ color: var(--paper-haze); }
.mode-doc .readout__l span{ color: var(--paper-ink); }

.mode-doc .shelf__h{ color: var(--paper-haze); border-bottom-color: var(--paper-line); }
.mode-doc .shelf__l{ gap: 6px; }
.mode-doc .sku{
  background: none; border-color: var(--paper-line); color: var(--paper-ink);
  padding: 4px 10px; font-size: .8rem; cursor: default;
}
.mode-doc .sku::before{ display: none; }
.mode-doc .sku[aria-pressed="true"]{ background: var(--paper-2); color: var(--paper-ink); border-color: var(--paper-haze); }

.mode-doc .clip{ break-inside: avoid; }
.mode-doc .clip__v{ font-family: var(--f-body); font-weight: 800; font-size: 1.3rem; color: var(--paper-ink); letter-spacing: -.02em; }
.mode-doc .clip__t{ color: var(--paper-ink); font-size: .86rem; }

.mode-doc .cta{ gap: 8px; }
.mode-doc .btn{ background: none; border-color: var(--paper-line); color: var(--paper-ink); font-size: .92rem; padding: 11px 14px; }
.mode-doc .btn:hover{ transform: none; border-color: var(--paper-haze); background: var(--paper-2); }
.mode-doc .btn--primary{ background: var(--paper-2); box-shadow: none; color: var(--paper-ink); }
.mode-doc .btn--primary:hover{ background: #E4E1D9; }
.mode-doc .btn__x{ color: var(--paper-haze); }
.mode-doc .signoff{ color: var(--paper-haze); }

@media print{
  :root{ --top-h: 0px; --tick-h: 0px; }
  body{ background:#fff; color:#000; padding: 0; font-size: 10.2pt; }
  .chrome-top, .chat, .ticker, .hearts, .toast, .glow, .cue, .skip,
  .shop__hint, .basket, .drop__flag, #printBtn{ display: none !important; }
  .brk{ display: inline; height: auto; }
  .brk::before{ content: " "; }
  .cta{ gap: 4px; }
  .btn{ border: 0; padding: 2px 0; font-size: 10pt; }
  .scenes{ max-width: none; }
  .scene{
    min-height: 0; display: block; break-inside: avoid;
    padding: 12px 0; border-top: 1px solid #ccc;
  }
  .scene--hero{ border-top: 0; padding-top: 0; }
  .wrap, .wrap--read{ max-width: none; }
  .name{ font-family: var(--f-body); font-weight: 800; font-size: 26pt; color:#000; background:none; -webkit-text-fill-color:#000; }
  .display{ font-family: var(--f-body); font-weight: 800; font-size: 13pt; text-transform: none; color:#000; }
  .display em{ color:#000; }
  .stat__v, .kpi__v, .clip__v{ font-family: var(--f-body); font-weight: 800; font-size: 14pt; color:#000; }
  .lede, .drop__list li, .clip__t, .chip{ color:#000; }
  .lede b, .drop__list b{ color:#000; font-weight:700; }
  .drop{ break-inside: avoid; padding-left: 0; }
  .drop__rail{ display:none; }
  .sku{ background:none; border:1px solid #bbb; color:#000; padding: 3px 8px; }
  .sku::before{ display:none; }
  a{ text-decoration: none; }
}


/* =========================================================================
   AMBIENT FEED GRAPH
   The concurrent-viewer chart every live seller stares at, as the page's
   heartbeat. Decorative: it responds to YOUR taps, it reports nothing.
   ========================================================================= */

.feedgraph{
  position: fixed; inset: auto 0 0 0; z-index: 0;
  width: 100%; height: 38vh; max-height: 340px;
  pointer-events: none; opacity: .38;
  mask-image: linear-gradient(180deg, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
}

/* =========================================================================
   COLD OPEN
   ========================================================================= */

.coldopen{ display: none; }
.coldopen.is-playing{
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ink);
  pointer-events: none;
}
.coldopen.is-done{ animation: coldOut .5s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes coldOut{ to{ opacity: 0; visibility: hidden; } }

.coldopen__card{ text-align: center; padding-inline: 24px; }
.coldopen__live{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--live); color: #fff;
  font-family: var(--f-mono); font-weight: 700; font-size: .7rem;
  letter-spacing: .18em; padding: 6px 12px; border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 0 40px rgba(255,30,78,.5);
}
.coldopen__dot{ width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.coldopen__name{
  margin: 0; font-family: var(--f-disp);
  font-size: clamp(2.6rem, 11vw, 6rem); line-height: .9;
  text-transform: uppercase; color: var(--text);
  letter-spacing: -.01em;
}
.coldopen__sub{
  margin: 12px 0 0; font-family: var(--f-mono);
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--haze-2);
}
.coldopen__card > *{ animation: coldIn .5s cubic-bezier(.2,.9,.3,1) both; }
.coldopen__name{ animation-delay: .08s; }
.coldopen__sub{ animation-delay: .18s; }
@keyframes coldIn{ from{ opacity: 0; transform: translateY(14px); } }

/* =========================================================================
   NESTED BRANDS — a holding company with two operating brands
   ========================================================================= */

.drop--parent > .drop__list{ display: none; }
.brands{
  display: flex; flex-direction: column; gap: 22px;
  margin-top: 18px; padding-left: clamp(14px, 2vw, 22px);
  border-left: 1px solid var(--line);
}
.brand{ position: relative; }
.brand::before{
  content:""; position: absolute;
  left: calc(-1 * clamp(14px, 2vw, 22px) - 1px); top: 9px;
  width: 11px; height: 1px; background: var(--line-2);
}
.brand--live::before{ background: var(--live); width: 15px; }
.brand__head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.brand__flag{
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: var(--live); color: #fff;
}
.brand__flag--off{ background: transparent; color: var(--haze-2); border: 1px solid var(--line); }
.brand__when{ font-family: var(--f-mono); font-size: .7rem; color: var(--haze-2); }
.brand__title{
  font-size: clamp(1.08rem, 1.2vw + .72rem, 1.34rem);
  font-weight: 800; letter-spacing: -.016em; margin-bottom: 2px;
}
.brand--live .brand__title{ color: var(--signal); }
.brand__sub{ margin: 0 0 12px; font-size: .86rem; color: var(--haze); }

/* =========================================================================
   ASK GRADY — suggested questions
   ========================================================================= */

.chat__sugg{
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 14px 10px;
}
.sugg{
  background: rgba(36,240,200,.08);
  border: 1px solid rgba(36,240,200,.26);
  color: var(--signal);
  border-radius: 999px; padding: 5px 11px;
  font-size: .73rem; cursor: pointer; text-align: left;
  transition: background .15s ease, transform .1s ease;
}
.sugg:hover{ background: rgba(36,240,200,.17); }
.sugg:active{ transform: scale(.96); }

.msg--q{
  color: var(--text); font-weight: 600;
  border-left: 2px solid var(--line-2); padding-left: 9px;
}
.msg--q .msg__u{ color: var(--haze-2); font-weight: 400; }
.msg--a{
  color: #DCD7EA;
  border-left: 2px solid var(--signal);
  padding-left: 9px;
}
.msg--a .msg__u{ color: var(--signal); }
.msg--a a{ color: var(--signal); }
.msg__typing{ display: inline-flex; gap: 3px; vertical-align: middle; }
.msg__typing i{
  width: 4px; height: 4px; border-radius: 50%; background: var(--signal);
  animation: blip 1s ease-in-out infinite;
}
.msg__typing i:nth-child(2){ animation-delay: .15s; }
.msg__typing i:nth-child(3){ animation-delay: .3s; }
@keyframes blip{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }

/* =========================================================================
   THE GIFT
   ========================================================================= */

.gift{
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; cursor: pointer;
  margin-bottom: 14px; padding: 15px 18px;
  border: 1px solid rgba(255,194,75,.4);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(255,194,75,.16), rgba(255,194,75,.04));
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.gift:hover{ border-color: var(--gold); background: linear-gradient(100deg, rgba(255,194,75,.26), rgba(255,194,75,.08)); }
.gift:active{ transform: scale(.99); }
.gift__box{ flex: 0 0 auto; width: 34px; height: 34px; color: var(--gold); }
.gift__box svg{ width: 100%; height: 100%; display: block; }
.gift__txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gift__txt b{ font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--gold); }
.gift__txt i{ font-style: normal; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; color: var(--haze-2); }

.giftfx{
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(255,194,75,.2), rgba(7,6,11,.94) 62%);
  opacity: 0; visibility: hidden; pointer-events: none;
  text-align: center; padding-inline: 24px;
}
.giftfx.is-on{ animation: giftFx 2.6s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes giftFx{
  0%   { opacity: 0; visibility: visible; }
  10%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
.giftfx__k{
  margin: 0; font-family: var(--f-mono); font-size: .76rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
}
.giftfx__v{
  margin: 6px 0 0; font-family: var(--f-disp);
  font-size: clamp(3.6rem, 17vw, 9rem); line-height: .9;
  color: var(--gold); text-transform: uppercase;
  text-shadow: 0 0 70px rgba(255,194,75,.6);
}
.giftfx__s{ margin: 14px 0 0; font-size: .9rem; color: var(--haze); }
.giftfx.is-on .giftfx__in > *{ animation: coldIn .5s cubic-bezier(.2,.9,.3,1) both; }
.giftfx.is-on .giftfx__v{ animation-delay: .08s; }
.giftfx.is-on .giftfx__s{ animation-delay: .2s; }

/* sound toggle state */
.act--sound .mute{ display: none; }
.act--sound[aria-pressed="false"] .wave{ display: none; }
.act--sound[aria-pressed="false"] .mute{ display: block; }
.act--sound[aria-pressed="true"]{ color: var(--signal); }

/* hero cursor spotlight */
.scene--hero::after{
  content:""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(36,240,200,.10), transparent 70%);
  transition: opacity .5s ease;
}
.scene--hero.is-lit::after{ opacity: 1; }

@media (max-width: 1099px){
  .brands{ padding-left: 14px; }
  /* suggestions are the main way in, so keep them in the expanded sheet */
  .chat__sugg{ padding: 0 14px 10px; }
  .chat.is-collapsed .chat__sugg{ display: none; }
  .chat.is-collapsed .chat__h{ color: var(--text); font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce){
  .coldopen{ display: none; }
  .feedgraph{ display: none; }
  .giftfx.is-on{ animation: none; opacity: 1; visibility: visible; }
}

/* the new layers are pure broadcast furniture — strip them for the document */
.mode-doc .feedgraph,
.mode-doc .coldopen,
.mode-doc .gift,
.mode-doc .giftfx,
.mode-doc .chat__sugg,
.mode-doc .act--sound{ display: none !important; }
.mode-doc .scene--hero::after{ display: none; }
.mode-doc .brands{ border-left-color: var(--paper-line); }
.mode-doc .brand::before{ background: var(--paper-line); }
.mode-doc .brand--live .brand__title{ color: var(--paper-ink); }
.mode-doc .brand__flag{ background: none; color: var(--paper-haze); border: 1px solid var(--paper-line); }
.mode-doc .brand__when,
.mode-doc .brand__sub{ color: var(--paper-haze); }

@media print{
  .feedgraph, .coldopen, .gift, .giftfx, .chat__sugg{ display: none !important; }
  .scene--hero::after{ display: none; }
  .brands{ border-left: 0; padding-left: 0; gap: 14px; }
  .brand::before{ display: none; }
  .brand{ break-inside: avoid; }
  .brand__title{ font-size: 11pt; }
  .brand--live .brand__title{ color: #000; }
  .brand__flag{ display: none; }
}