@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   sales.css — the sales page (13 Oct 2026)
   Loaded after site.css and owns every section the reader now sees: the hero,
   reader proof, the launch, the edition, the two baskets and the phone buy
   bar. It reuses site.css tokens and its small components (.btn, .rubric,
   .mega, .serif, .slip, .specs, .receipt, .faq) and overrides nothing by
   editing that file: /assets/* is cached as immutable, so a changed site.css
   would not reach a returning reader.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The header used to retire while reading downward. On a sales page the buy
   control must stay in reach, so it only retires once the phone buy bar has
   taken that job over. Placed after site.css and one attribute more specific. */
html[data-chrome="lean"]:not([data-buybar="on"]) .head{transform:none;opacity:1;pointer-events:auto}

/* While the live state is still loading the document carries its boot-time
   phase, which is the closed early offer. Hold the buy controls back for that
   moment instead of showing a price nobody can pay. Space is reserved, so
   nothing moves when they arrive. */
html[data-resv="loading"] [data-buy]{visibility:hidden}

/* ───────────────────────────────────────────────────────────── the hero ─── */
.s-hero{position:relative;z-index:1;
  padding-top:var(--bars);padding-bottom:clamp(30px,6vh,84px)}
.s-hero__grid{display:grid;gap:clamp(10px,1.6vh,26px)}
.s-hero__copy{container-type:inline-size;display:grid;gap:clamp(9px,1.5vh,20px);
  align-content:start;min-width:0}
.s-hero__h{margin:0;font-size:min(7.4rem,21.4cqw);line-height:.86}
.s-hero__h span{display:block}
.s-hero__h em{font-style:normal}
.s-hero__h .up{color:var(--gold)}
.s-hero__h .un{color:var(--green-type)}
.s-hero__lede{max-width:46ch;font-size:clamp(1rem,.5vw + .9rem,1.2rem);line-height:1.46;
  color:var(--tx);text-wrap:pretty}
.s-hero__lede em{color:#fff}

/* The photograph is the one the advertisement uses, so a reader who tapped
   the ad sees the same picture first. A band on a phone, a print beside the
   copy on a wide screen. */
.s-hero__photo{margin:0 calc(var(--gut) * -1);position:relative;order:-1}
.s-hero__photo picture{display:block}
.s-hero__photo img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.s-hero__photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,rgba(7,7,10,0),var(--ink));pointer-events:none}
.s-hero__photo figcaption{display:none}

.s-buy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;min-height:60px}
.s-buy .btn{min-height:60px;padding:.72em 1em;font-size:1rem;justify-content:center}
.s-buy .btn small{font-size:.62rem;letter-spacing:.09em}
.s-buy__early,.s-buy:has(.s-buy__pair[hidden]) .s-buy__one{grid-column:1/-1}
.s-hero__facts{display:grid;gap:.35em;font-size:.85rem;line-height:1.5;color:#d6cdbc}
.s-stock{display:flex;align-items:baseline;gap:.5em;font-family:var(--f-mono);
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-2);min-height:1.5em}
.s-stock b{font-weight:400;color:var(--gold);font-size:1.18em}
.s-hero__proof{display:inline-flex;align-items:baseline;gap:.6em;justify-self:start;
  min-height:44px;padding-block:.5em;color:var(--tx-2);font-size:.84rem;text-decoration:none;
  border-top:1px solid var(--hair)}
.s-hero__proof b{font-variation-settings:"wdth" 112,"wght" 760;font-size:1.5rem;line-height:1;color:var(--gold)}
.s-hero__proof span{text-decoration:underline;text-decoration-color:rgba(236,231,221,.3);text-underline-offset:.24em}
.s-hero__proof:hover span{text-decoration-color:currentColor}

.s-trust{list-style:none;display:grid;margin-top:clamp(22px,4vh,46px);
  border-top:1px solid var(--hair)}
.s-trust li{padding:.8em 0;border-bottom:1px solid var(--hair);font-size:.82rem;line-height:1.45;color:var(--tx-2)}
.s-trust b{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:"wdth" 94,"wght" 640;color:var(--gold);margin-bottom:.3em}
.s-trust a{color:inherit;text-underline-offset:.22em}

@media (min-width:720px){
  .s-trust{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,3vw,44px)}
  .s-trust li{border-bottom:0}
}
@media (min-width:900px){
  .s-hero{padding-top:calc(var(--bars) + clamp(26px,5vh,64px))}
  .s-hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(28px,4.4vw,76px);align-items:center}
  .s-hero__photo{order:0;margin:0;justify-self:end;width:min(100%,520px);rotate:.9deg;
    padding:10px;background:var(--paper);box-shadow:0 34px 70px -34px #000,0 2px 0 rgba(255,255,255,.05) inset}
  .s-hero__photo img{aspect-ratio:4/5;object-position:50% 50%}
  .s-hero__photo::after{content:none}
  .s-hero__photo figcaption{display:block;padding:.8em .2em .15em;font-size:.72rem;line-height:1.4;
    letter-spacing:.02em;color:#4c4638}
  .s-buy{max-width:520px}
}

/* ─────────────────────────────────────────────────────────── the readers ─── */
.s-readers{position:relative;z-index:1;padding-block:clamp(44px,8vh,112px)}
.s-readers::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,10,0),rgba(7,7,10,.86) 16%,rgba(7,7,10,.86) 84%,rgba(7,7,10,0))}
.s-readers__head{display:grid;gap:clamp(12px,2vh,20px);max-width:62ch;margin-bottom:clamp(22px,4vh,40px)}
.s-readers__head .serif{margin:0}
.s-readers .verdicts__agg{margin:0}
.s-quotes{list-style:none;display:grid;gap:14px}
.s-quotes .slip blockquote{height:100%;align-content:space-between}
@media (min-width:900px){
  .s-quotes--top{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .s-quotes--top .slip:nth-child(1){rotate:-.5deg}
  .s-quotes--top .slip:nth-child(3){rotate:.45deg}
}
.s-readers__more{margin:clamp(26px,4.4vh,44px) 0 12px;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;font-variation-settings:"wdth" 94,"wght" 640;color:var(--tx-3)}
/* The other fifteen stay on the page as one row a thumb can pull through. No
   script: it is a plain scroll container that snaps slip by slip. */
.s-quotes--more{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 16px;
  scroll-padding-inline:var(--gut);scrollbar-width:thin;scrollbar-color:rgba(217,172,53,.4) transparent}
.s-quotes--more .slip{flex:0 0 min(78vw,330px);scroll-snap-align:start}
.s-quotes--more .slip__q{font-size:1.02rem;line-height:1.36}

/* ──────────────────────────────────────────────────────────── the launch ─── */
.s-event{position:relative;z-index:1;padding-block:clamp(44px,8vh,112px);
  background:linear-gradient(180deg,rgba(15,42,23,0),rgba(15,42,23,.9) 12%,rgba(15,42,23,.9) 88%,rgba(15,42,23,0))}
.s-event__grid{display:grid;gap:clamp(20px,3.4vh,34px)}
.s-event__copy{display:grid;gap:clamp(12px,2vh,20px);align-content:center;max-width:58ch}
.s-event__copy .serif{margin:0}
.s-event__copy .lede{color:#dfe8dc}
.s-event__full{justify-self:start;display:inline-flex;align-items:center;min-height:44px;
  color:var(--gold-lit);font-variation-settings:"wdth" 100,"wght" 640;font-size:.92rem;
  text-underline-offset:.26em}
.s-film{position:relative;margin:0;background:#000;border:1px solid var(--hair-gold);
  box-shadow:0 30px 60px -36px #000}
.s-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}
.s-film__play{position:absolute;inset:0;display:grid;place-items:end start;padding:clamp(12px,2.4vw,22px);
  border:0;cursor:pointer;color:#fff;text-align:left;
  background:linear-gradient(180deg,rgba(7,7,10,0) 40%,rgba(7,7,10,.78))}
.s-film__play>span{display:inline-flex;align-items:center;gap:.85em;
  font-variation-settings:"wdth" 100,"wght" 680;font-size:.95rem}
.s-film__play i{flex:none;width:54px;height:54px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;transition:transform .3s var(--e-out)}
.s-film__play i::before{content:"";margin-left:4px;border-style:solid;
  border-width:9px 0 9px 15px;border-color:transparent transparent transparent #100c00}
.s-film__play:hover i{transform:scale(1.07)}
.s-film__play small{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;opacity:.82;margin-top:.25em}
.s-stills{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.s-stills img{width:100%;aspect-ratio:4/3;object-fit:cover}
.s-event__cap{font-size:.74rem;line-height:1.5;color:#b9c6b6}
@media (min-width:900px){
  .s-event__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:clamp(30px,4.6vw,80px);align-items:center}
  .s-event__after{grid-column:1/-1}
  .s-stills{gap:12px}
  .s-stills img{aspect-ratio:16/9}
}

/* ─────────────────────────────────────────────── the novel and the edition ─── */
.novel{padding-block:clamp(44px,8vh,112px)}
.novel .split{margin-top:clamp(26px,4.4vh,54px)}
/* The two faces stand side by side at every width: they are one jacket, and
   stacked on a phone they read as two pictures and cost a whole screen. */
@media (max-width:719px){
  .novel .split{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:0}
  .novel .split__side{aspect-ratio:3/4;min-height:0}
  .novel .split__seam{width:1px;height:auto}
  .novel .split__h{font-size:clamp(1.3rem,7vw,2rem)}
}

.s-edition{position:relative;z-index:1;padding-block:clamp(44px,8vh,112px)}
.s-edition::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,10,0),rgba(7,7,10,.9) 14%,rgba(7,7,10,.9) 86%,rgba(7,7,10,0))}
.s-edition__grid{display:grid;gap:clamp(24px,4vh,44px)}
.s-edition__head .serif{margin:0 0 .5em}
.s-edition .specs{margin-top:0}
.s-edition .print figcaption{margin-top:14px}
.s-pairup{display:grid;gap:clamp(18px,3vh,30px);margin-top:clamp(34px,6vh,72px);
  padding-top:clamp(26px,4.4vh,50px);border-top:1px solid var(--hair-gold)}
.s-pairup__copy{display:grid;gap:clamp(12px,1.8vh,18px);align-content:center;justify-items:start}
.s-pairup__copy .serif{margin:0;font-size:clamp(1.6rem,3.3vw,2.6rem)}
.s-pairup__copy p{color:var(--tx-2);max-width:50ch}
.s-pairup__copy p b{color:var(--tx);font-variation-settings:"wdth" 100,"wght" 660}
@media (min-width:900px){
  .s-edition__grid,.s-pairup{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(30px,4.6vw,80px);align-items:center}
  .s-pairup .print{order:2}
}

/* ─────────────────────────────────────────────────────────── the baskets ─── */
.offer{padding-block:clamp(44px,8vh,104px)}
.s-cards{display:grid;gap:16px;align-items:stretch}
.s-card{display:grid;align-content:start;grid-template-rows:auto auto auto 1fr auto}
.s-card .receipt__p small{font-size:.8rem;font-variation-settings:"wdth" 100,"wght" 560;
  letter-spacing:.06em;text-transform:uppercase;color:#6b5405;margin-left:.5em;vertical-align:middle}
.s-card ul{align-self:start}
.s-card .btn{margin-top:1.1em;min-height:58px;font-size:1rem}
.s-card--pair{background:#fbf6e8;border-color:#8a7000}
.s-card__note{font-size:.76rem;color:#5b5445}
.s-offer__foot{display:grid;gap:.7em;margin-top:clamp(18px,3vh,30px);max-width:62ch;
  font-size:.9rem;line-height:1.5;color:#3f3a2e}
.s-offer__foot .s-stock{color:#5b5445}
.s-offer__foot .s-stock b{color:#6b5405}
.s-offer__early{margin-top:clamp(18px,3vh,30px)}
@media (min-width:800px){.s-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .s-cards:has(.s-card--pair[hidden]){grid-template-columns:minmax(0,560px)}}

/* ───────────────────────────────────────────────────────────── the close ─── */
.s-close{position:relative;z-index:1;padding-block:clamp(54px,10vh,130px)}
.s-close__in{display:grid;gap:clamp(14px,2.4vh,24px);justify-items:start}
.s-close .mega{margin:0}
.s-close p{max-width:52ch;color:var(--tx-2)}
.s-close p b{color:var(--gold);font-variation-settings:"wdth" 100,"wght" 700}
.s-close .s-buy{width:min(100%,520px)}

/* ───────────────────────────────────────────────────── the phone buy bar ─── */
/* A fixed pair of checkout buttons in the thumb zone. sales.js switches it on
   once the hero buttons have scrolled away, and off again at the baskets and
   while the advertising choice is still on screen, so the two never stack. */
.s-bar{display:none}
@media (max-width:719px){
  .s-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    padding:9px var(--gut) calc(9px + env(safe-area-inset-bottom));
    background:rgba(7,7,10,.95);border-top:1px solid var(--hair-gold);
    transform:translateY(110%);visibility:hidden;
    transition:transform .34s var(--e-out),visibility 0s .34s}
  html[data-buybar="on"] .s-bar{transform:none;visibility:visible;transition:transform .34s var(--e-out)}
  .s-bar .btn{min-height:50px;padding:.5em .8em;font-size:.95rem;align-items:center;text-align:center}
  .s-bar:has(.s-bar__pair[hidden]) .s-bar__one{grid-column:1/-1}
  /* keep the small advertising-preferences control clear of the bar */
  html[data-buybar="on"] .iw-ad-preferences{bottom:calc(74px + env(safe-area-inset-bottom))}
  html[data-buybar="on"] .foot-site{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.s-bar,html[data-buybar="on"] .s-bar{transition:none}}