:root{
  --bg:#0e1014; --bg2:#14171d; --card:#1a1e26; --card2:#20252f;
  --ink:#eef1f6; --muted:#9aa4b2; --faint:#5b6472; --line:#2a303b;
  --accent:#ff8a5c; --accent2:#ffd166; --shipped:#5ad1a0; --today:#ff8a5c;
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --sans:"Inter",system-ui,sans-serif; --serif:"Fraunces",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(1200px 700px at 70% -10%,#1b2130 0,var(--bg) 55%) fixed;
  color:var(--ink); font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}

.back-link{
  position:fixed; top:18px; left:20px; z-index:20; font-size:.85rem; font-weight:500;
  color:var(--muted); text-decoration:none; padding:7px 13px; border-radius:999px;
  background:rgba(20,23,29,.7); backdrop-filter:blur(8px); border:1px solid var(--line);
  transition:color .2s, border-color .2s;
}
.back-link:hover{color:var(--ink); border-color:var(--accent)}

/* ── Hero ── */
.hero{max-width:760px; margin:0 auto; padding:120px 24px 40px; text-align:center}
.eyebrow{font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600}
.hero h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(2.1rem,6vw,3.6rem);
  line-height:1.08; margin:18px 0 22px; letter-spacing:-.01em;
}
.accent{
  background:linear-gradient(100deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lede{color:var(--muted); font-size:1.06rem; max-width:600px; margin:0 auto}

.live{display:inline-flex; align-items:center; gap:9px; margin-top:26px;
  font-size:.9rem; font-weight:600; color:var(--today);
  padding:8px 16px; border:1px solid rgba(255,138,92,.35); border-radius:999px;
  background:rgba(255,138,92,.08)}
.pulse{width:9px; height:9px; border-radius:50%; background:var(--today);
  box-shadow:0 0 0 0 rgba(255,138,92,.6); animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,138,92,.55)}
  70%{box-shadow:0 0 0 12px rgba(255,138,92,0)}
  100%{box-shadow:0 0 0 0 rgba(255,138,92,0)}
}
.progress{max-width:420px; margin:28px auto 0; display:flex; align-items:center; gap:14px}
.progress-bar{flex:1; height:8px; border-radius:999px; background:var(--card); overflow:hidden; border:1px solid var(--line)}
.progress-fill{height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.progress-label{font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.rule{margin-top:34px; font-size:.86rem; color:var(--faint); font-style:italic; font-family:var(--serif)}

/* ── Timeline ── */
.timeline{max-width:1000px; margin:40px auto 0; padding:0 24px 40px; position:relative}
.timeline::before{
  content:""; position:absolute; left:50%; top:0; bottom:60px; width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
}
.node{position:relative; width:50%; padding:22px 44px; opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease}
.node.in{opacity:1; transform:none}
.node.left{left:0; text-align:right}
.node.right{left:50%; text-align:left}
/* the dot on the spine */
.node::after{
  content:""; position:absolute; top:30px; width:16px; height:16px; border-radius:50%;
  background:var(--card2); border:2px solid var(--faint); z-index:2; transition:all .3s;
}
.node.left::after{right:-8px}
.node.right::after{left:-8px}
.node.shipped::after{background:var(--shipped); border-color:var(--shipped); box-shadow:0 0 0 5px rgba(90,209,160,.15)}
.node.today::after{background:var(--today); border-color:var(--today);
  box-shadow:0 0 0 5px rgba(255,138,92,.2); animation:pulse 2s infinite}

/* ── Card ── */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); overflow:hidden; text-align:left; position:relative;
  transition:border-color .3s, transform .3s;
}
.node.shipped .card{cursor:pointer}
.node.shipped .card:hover{border-color:var(--accent); transform:translateY(-3px)}
.card-top{padding:18px 20px 14px}
.daytag{display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.daynum{font-family:var(--serif); font-weight:700; font-size:1.5rem; line-height:1}
.date{font-size:.82rem; color:var(--muted); font-weight:500}
.badge{margin-left:auto; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px}
.badge.shipped{color:var(--shipped); background:rgba(90,209,160,.12)}
.badge.today{color:var(--today); background:rgba(255,138,92,.14)}
.badge.upcoming{color:var(--faint); background:rgba(91,100,114,.14)}
.room{font-size:.9rem; color:var(--accent); font-weight:600; margin-bottom:6px}

.label{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-bottom:5px}
.problem{color:var(--ink); font-size:.97rem}
.upcoming-note{color:var(--faint); font-size:.9rem; font-style:italic; font-family:var(--serif)}

/* expandable build panel */
.build{max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.3,.8,.2,1);
  border-top:1px solid transparent}
.node.open .build{max-height:900px; border-top-color:var(--line)}
.build-inner{padding:16px 20px 20px; background:var(--card2)}
.build .problem{margin-bottom:14px}
.built-text{color:var(--muted); font-size:.95rem; margin-bottom:16px}
.embed{position:relative; width:100%; aspect-ratio:16/9; margin:4px 0 4px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#000}
/* A deck is a page, not a video: no black letterbox, and a little more
   height so the slide plus its rail both fit. */
.embed.deck{aspect-ratio:16/10.6; background:#e9e1d4}
/* The card preview is unreadable at this size, so it is a picture of the deck
   rather than the deck: the iframe is inert and a button over it opens the
   modal. Clicking through slides at 340px wide was the wrong affordance. */
.embed.deck iframe{pointer-events:none}
.deck-open{position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end;
  justify-content:center; padding:0 0 13px; border:0; background:transparent; cursor:zoom-in}
.deck-chip{font-size:.76rem; font-weight:600; letter-spacing:.02em; color:#1f1b16;
  background:rgba(255,253,250,.95); border:1px solid rgba(31,27,22,.18); border-radius:999px;
  padding:6px 14px; opacity:0; transform:translateY(4px); transition:opacity .18s, transform .18s}
.embed.deck:hover .deck-chip, .deck-open:focus-visible .deck-chip{opacity:1; transform:none}
.deck-open:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:12px}

/* ── Deck modal ── */
.deck-modal[hidden]{display:none}
/* Visibility is the [hidden] attribute alone. The entrance is an animation on
   the panel rather than a transition from opacity:0 on the backdrop, because a
   transition that never runs (a throttled or backgrounded tab) leaves the modal
   invisible while still blocking the page. If this animation never runs, the
   modal is simply there. */
.deck-modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center;
  justify-content:center; padding:clamp(10px,3vw,44px); background:rgba(8,6,4,.74)}
.deck-modal-inner{position:relative; width:min(1180px,100%); height:min(800px,100%);
  border-radius:14px; overflow:hidden; background:#e9e1d4; box-shadow:0 20px 64px rgba(0,0,0,.55)}
.deck-modal-inner iframe{display:block; width:100%; height:100%; border:0}
.deck-close{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; border-radius:999px;
  border:1px solid rgba(31,27,22,.22); background:rgba(255,253,250,.94); color:#1f1b16;
  font-size:14px; line-height:1; cursor:pointer}
.deck-close:hover{background:#fffdfa}
html.deck-lock, html.deck-lock body{overflow:hidden}
/* Transform only. An animation that stalls holds its from-state, so anything
   that touched opacity here could leave the panel invisible. */
@keyframes deckIn{from{transform:translateY(8px)} to{transform:none}}
@media (prefers-reduced-motion: no-preference){
  .deck-modal.is-open .deck-modal-inner{animation:deckIn .18s cubic-bezier(.2,.7,.3,1)}
}
@media (prefers-reduced-motion: reduce){ .deck-chip{transition:none} }
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.links{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn{display:inline-flex; align-items:center; gap:7px; font-size:.85rem; font-weight:600;
  padding:9px 15px; border-radius:10px; text-decoration:none; transition:transform .15s, filter .15s}
.btn:hover{transform:translateY(-1px); filter:brightness(1.08)}
.btn.video{background:linear-gradient(100deg,var(--accent),var(--accent2)); color:#1a1200}
.btn.product{background:var(--card); color:var(--ink); border:1px solid var(--line)}
.flip-hint{font-size:.78rem; color:var(--faint); margin-top:12px; display:flex; align-items:center; gap:6px}
.chev{transition:transform .4s}
.node.open .chev{transform:rotate(180deg)}

/* ── Footer ── */
.foot{text-align:center; padding:20px 24px 70px; color:var(--faint); font-size:.88rem}
.foot a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--accent)}

/* ── Mobile: single column, all cards on the right of a left-hand spine ── */
@media (max-width:720px){
  .timeline::before{left:14px}
  .node,.node.left,.node.right{width:100%; left:0; text-align:left; padding:14px 0 14px 40px}
  .node.left::after,.node.right::after{left:6px; right:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .node{opacity:1; transform:none}
}