/* ============================================================
   ADAM SHIPS — desktop adaptation (the snap deck, up from mobile)
   Mobile (site.css) is the source of truth and is untouched here.
   Desktop keeps the snap mechanic exactly; every section is still a
   100svh panel that snaps. We only use the wider canvas.
   ============================================================ */
@media (min-width:900px) and (min-height:600px){

  /* the end-of-line easter egg is a phone-only reward; on desktop the footer is the last screen */
  .s-end{display:none}

  .screen,.stage{padding:88px clamp(48px,7vw,128px) 56px}

  /* generous shared content rhythm */
  .kick{font-size:12px}

  /* ---------- top bar / chrome ---------- */
  .bar{height:64px;padding:0 28px 0 34px}
  .wm{font-size:23px}
  .burger{margin-right:0}
  .sheet{padding:0 clamp(48px,7vw,128px)}
  .sheet a{font-size:clamp(2.6rem,5vw,3.6rem)}
  .sheet .foot{left:clamp(48px,7vw,128px);bottom:54px;flex-direction:row;gap:28px;align-items:baseline}
  .dots{right:26px;gap:10px}
  .dots i{width:7px;height:7px}

  /* ---------- 1 hero: headline large left, the lede sits with it ---------- */
  .s-hero h1{font-size:clamp(2.8rem,4.7vw,4.6rem);line-height:1.0;max-width:18ch}
  .s-hero>div{align-self:center;max-width:60ch}
  .s-hero .offer{font-size:1.18rem;max-width:48ch;margin-top:24px}

  /* ---------- 2 rails: two columns, voice left, instrument right ---------- */
  .stage{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"top focus" "head focus" "bottom focus";
    column-gap:clamp(48px,6vw,104px);align-items:start}
  .r-top{grid-area:top}
  .r-head{grid-area:head;align-self:center;margin-top:0}
  .r-head .lead2{font-size:clamp(2rem,3vw,2.9rem);line-height:1.1;max-width:16ch}
  .brief{margin-top:26px}
  .brief .t,.brief .bid{font-size:12px}
  .focus{grid-area:focus;align-self:stretch}
  .r-bottom{grid-area:bottom;align-self:end;max-width:none}
  .rail{left:0;right:0}
  .ticks{left:0;right:0}
  .gate{max-width:460px;height:152px}
  /* keep the draft line inside the gate brackets, not spilling across the column */
  .draft{left:50%;right:auto;width:min(80%,460px);transform:translateX(-50%)}
  .line{left:18px;right:18px;font-size:clamp(1.7rem,2.4vw,2.3rem)}
  .line.good{transform:translateY(calc(-50% + 54px))}
  .stage[data-beat="4"] .good{transform:translateY(calc(-50% - 10px))}
  .segs{max-width:none}
  .pill{font-size:12px}

  /* ---------- 3 receipt: wide ledger, two columns of rows ---------- */
  .s-brands{justify-content:center}
  .s-brands .lab{max-width:1200px;width:100%;margin-left:auto;margin-right:auto;margin-bottom:30px}
  .ledger{max-width:1200px;width:100%;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;border-top:none}
  .ledger .row{border-top:1px solid var(--hair);border-bottom:none}
  .ledger .row.more{grid-column:1/-1;border-top:1px solid var(--hair)}
  .ledger .bn{font-size:clamp(1.7rem,2.4vw,2.2rem)}
  .ledger .ind{font-size:.74rem}
  .s-brands .note{margin:30px auto 0;max-width:1200px;width:100%;font-size:1rem}

  /* ---------- 4 thesis ---------- */
  .s-thesis{align-items:center;text-align:center}
  .s-thesis .q{font-size:clamp(2.6rem,5vw,4.4rem);max-width:22ch}

  /* ---------- 5/6 doors: full bleed, enormous ghost ---------- */
  .door{padding-bottom:clamp(64px,10vh,140px)}
  .door h2{font-size:clamp(4.5rem,10vw,9rem)}
  .door .tag{font-size:13px}
  .door p{font-size:1.25rem;max-width:40ch;margin-top:22px}
  .door .go{font-size:1.18rem;margin-top:32px}
  .door .ghost{font-size:clamp(20rem,40vw,42rem);right:-2vw;bottom:-12vh}

  /* ---------- 7 close ---------- */
  .s-close{align-items:center;text-align:center}
  .s-close .cq{font-size:clamp(2.6rem,4.6vw,4rem);max-width:20ch}
  .s-close .actions{align-items:center;flex-direction:row;gap:20px;margin-top:36px}
  .s-close .mail{text-align:center}

  /* ---------- 8 footer ---------- */
  .s-foot{padding-top:120px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;
    grid-template-areas:"lead nav" "contact nav" "legal legal";column-gap:clamp(48px,8vw,140px)}
  .s-foot .line2{grid-area:lead;font-size:2.4rem;max-width:18ch}
  .s-foot .fnav{grid-area:nav;align-self:start;margin-top:0}
  .s-foot .fnav a{font-size:1.6rem;padding:18px 0}
  .s-foot .fcontact{grid-area:contact;align-self:end;margin-top:0}
  .s-foot .fsocial{margin-bottom:26px}
  .s-foot .legal{grid-area:legal}

  /* ============================================================
     NEW-PAGE COMPONENTS on desktop
     ============================================================ */
  .lead-q{font-size:clamp(2.2rem,3.6vw,3.2rem);max-width:24ch}
  .body-p{font-size:1.2rem;max-width:46ch}

  /* content sections: center the block in the tall panel, do not top-jam it with dead space below */
  .s-pad,.s-pad.top{justify-content:center}

  /* content panels that pair a heading column with a content column */
  .twocol{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(48px,7vw,120px);align-items:center;width:100%}
  .twocol .col-head{align-self:center}
  .twocol .col-body{align-self:center}

  .olist{max-width:1080px}
  .olist .o{padding:26px 0;display:grid;grid-template-columns:160px minmax(0,1fr) minmax(0,1.3fr);column-gap:clamp(28px,3.5vw,64px);align-items:baseline}
  .olist .o .num{align-self:baseline}
  .olist .o .ot{font-size:clamp(1.35rem,1.9vw,1.85rem);line-height:1.12}
  .olist .o .od{font-size:1.05rem}
  .olist .o .oe{font-size:12.5px}

  .cards{flex-direction:row;flex-wrap:wrap;gap:20px}
  .cards .card{flex:1 1 0;min-width:240px}
  .card .ct{font-size:1.5rem}

  .price{max-width:520px}
  .price .amt .big{font-size:3.6rem}

  .keys{max-width:560px}

  .fork{flex-direction:row;gap:24px}
  .fork .path{flex:1 1 0;padding:34px}
  .fork .path .fh{font-size:2.1rem}
  .fork .path .gi{font-size:11rem}

  .steps-list .stp .sh{font-size:1.35rem}
  .empty .eh{font-size:1.8rem}

  /* center single-column content blocks that have a max-width */
  .s-pad.center-x{align-items:center;text-align:center}
  .s-pad.center-x .body-p,.s-pad.center-x .lead-q{margin-left:auto;margin-right:auto}
}

/* very large screens: keep content from sprawling */
@media (min-width:1500px) and (min-height:600px){
  .screen,.stage{padding-left:max(128px,(100vw - 1400px)/2);padding-right:max(128px,(100vw - 1400px)/2)}
  .s-hero,.stage{max-width:1700px;margin:0 auto}
}

/* ============================================================
   LANDSCAPE PHONES / short viewports: the full screen snap deck cannot
   fit a short wide screen, so fall back to a clean scrolling page with
   smaller type, and show the rails as a static frame, not a scrub.
   ============================================================ */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  html{scroll-snap-type:none}
  .deck{scroll-snap-type:none}
  .screen{height:auto;min-height:auto;overflow:visible;justify-content:flex-start;scroll-snap-align:none;scroll-snap-stop:normal;padding:70px clamp(22px,5vw,56px) 46px}
  .dots,.tail{display:none}
  .s-hero h1{font-size:clamp(1.9rem,6vw,2.6rem)}
  .s-hero .offer{font-size:1rem;max-width:62ch}
  .s-brands .ledger .bn{font-size:1.3rem}
  .lead-q{font-size:clamp(1.5rem,4vw,2rem);max-width:48ch}
  .s-thesis .q{font-size:clamp(1.6rem,4.5vw,2.2rem);max-width:32ch}
  .door h2{font-size:clamp(2.4rem,8vw,3.4rem)}
  .door .ghost{font-size:14rem}
  .s-close .cq{font-size:clamp(1.6rem,4.5vw,2.2rem)}
  .s-foot{padding-top:74px}
  .s-foot .line2{font-size:1.5rem}
  /* rails: static vertical stack, no overlay, no scrub */
  #rails{height:auto}
  .rails .banchor{display:none}
  .stage{position:static;height:auto;min-height:auto;overflow:visible;padding:70px clamp(22px,5vw,56px) 46px}
  .stage .rail,.stage .ticks,.stage .gate,.stage .line.bad,.stage .flag,.stage .r-bottom,.stage .step{display:none}
  .stage .brief{opacity:1!important;transform:none!important}
  .focus{display:block;min-height:auto;position:static;margin-top:18px}
  .stage .draft{position:relative;left:auto;right:auto;top:auto}
  .stage .line{position:relative;left:auto;right:auto;top:auto;transform:none!important;text-align:left}
  .stage .line.good{opacity:1!important;display:block;color:var(--ink);border:1.5px solid var(--green);background:color-mix(in oklab,var(--lamp) 7%,transparent);border-radius:13px;padding:18px 20px}
  .stage .stamp{opacity:1!important;transform:none!important;position:relative;left:auto;right:auto;bottom:auto;justify-content:flex-start;margin-top:16px}
}