/* Buy buttons (Stripe Payment Links) + Warhol launch counter + inert audiobook-download notice + thank-you page.
   Builds on css/v7.css (.btn, fonts). Colours come from css/palette.css (loaded after this file). */
.line .shop{flex:0 0 auto;width:240px;display:flex;flex-direction:column;gap:7px;margin:14px 0 4px}
.line .shop+.chal{flex-basis:360px}                                       /* desktop: audio + buy + sign-up share one row where it fits */
.shop .btn{justify-content:center;padding:10px 16px;min-height:38px}
.shop .btn:hover{background:var(--ink);color:#FFF4EA}
.shop .btn.alt{background:var(--pal-yellow,#D6CF2A);color:var(--ink)}
.shop .btn.alt:hover{background:var(--ink);color:var(--pal-yellow,#D6CF2A)}
/* locked until launch: hatched grey, faded, not clickable */
.shop .shop-b{flex-direction:column;gap:3px}
.shop .shop-b .sb-s{font:500 9px/1 Oswald,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.shop .shop-b[aria-disabled=true]{background:repeating-linear-gradient(-45deg,#E6E0D5 0 5px,#D8D1C5 5px 10px) !important;color:rgba(42,36,32,.55) !important;
  border-color:rgba(42,36,32,.45);box-shadow:3px 3px 0 rgba(42,36,32,.28);cursor:not-allowed;pointer-events:none;padding-top:6px;padding-bottom:6px}
/* WARHOL COUNTER: repeated silkscreen digit tiles, palette colours in rotation, ink slightly off-register */
.wc{display:flex;flex-direction:column;gap:4px;min-width:0}
.wc-t{display:flex;align-items:flex-end;gap:2px;line-height:1}
.wt{position:relative;display:inline-grid;place-items:center;width:21px;height:27px;font:700 20px/1 Oswald,sans-serif;color:var(--ink);
  background:radial-gradient(rgba(42,36,32,.2) .8px,transparent 1.25px) 0 0/4px 4px,var(--tc,var(--pal-yellow,#D6CF2A));border:1px solid var(--ink);transform:rotate(var(--tr,0deg))}
.wt::before{content:attr(data-d);position:absolute;inset:0;display:grid;place-items:center;color:var(--tg,#7E978A);transform:translate(1.6px,1.1px);mix-blend-mode:multiply;opacity:.85}
.wt:nth-of-type(4n+1){--tc:var(--pal-pink,#FE3EA6);--tg:var(--pal-teal,#7E978A);--tr:-1.2deg}
.wt:nth-of-type(4n+2){--tc:var(--pal-yellow,#D6CF2A);--tg:var(--pal-pink,#FE3EA6);--tr:.8deg}
.wt:nth-of-type(4n+3){--tc:var(--pal-teal,#7E978A);--tg:var(--pal-orange,#E0782C);--tr:-.6deg}
.wt:nth-of-type(4n+4){--tc:var(--pal-orange,#E0782C);--tg:var(--pal-yellow,#D6CF2A);--tr:1.1deg}
.wu{font:600 10px/1 Oswald,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);padding:0 3px 2px 1px}
.wu.sp{width:8px;padding:0}
.wu:last-child{padding-right:0}
.wc-rep{margin:0;max-width:100%;overflow:hidden;white-space:nowrap;font:500 9.5px/1.2 Oswald,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ochreD);
  -webkit-mask:linear-gradient(90deg,#000 80%,transparent);mask:linear-gradient(90deg,#000 80%,transparent)}
.wc-rep b{font-weight:600;color:var(--pal-pink-deep,#CB016E)}
.wc-rep span::before{content:"\2605";margin:0 5px 0 2px;font-size:8px;vertical-align:1px}
.wc-rep span:nth-of-type(3n+1)::before{color:var(--pal-pink,#FE3EA6)}.wc-rep span:nth-of-type(3n+2)::before{color:var(--pal-teal,#7E978A)}.wc-rep span:nth-of-type(3n+3)::before{color:var(--pal-orange,#E0782C)}
.audiobook .dl-off{display:flex;justify-content:center;margin-top:7px;padding:7px 10px;font-size:10.5px;letter-spacing:.14em;box-shadow:2px 2px 0 var(--ink);opacity:.75;pointer-events:none;user-select:none}
@media (max-width:760px){
  .line .shop{width:auto;flex-direction:row;flex-wrap:wrap;margin:0;gap:8px 10px}
  .line .shop+.chal{flex-basis:auto}
  .shop .wc{flex:1 1 100%;flex-direction:row;align-items:center;gap:10px}
  .shop .wc-rep{flex:1 1 0;width:0;min-width:0}                        /* never widens the card */
  .shop .shop-b .sb-s{display:none}                                    /* phones: the date sits beside the counter ("Out Oct 6") to make room for the address */
  .shop .btn{flex:1 1 0;min-width:0;white-space:normal;text-align:center;line-height:1.25;padding:10px 8px;font-size:12px;letter-spacing:.14em}
  .wt{width:16px;height:21px;font-size:15px}
  .wu{font-size:9px}
  .audiobook .dl-off{font-size:10px;letter-spacing:.1em}
}
/* short phones (375x667 etc.): keep the end card as compact as before. The locked state still shows (hatched, faded);
   the date sits beside the counter ("Out Oct 6") instead of inside each button. */
@media (max-width:760px) and (max-height:740px){
  .line .shop{gap:6px 8px}
  .shop .wc{flex-direction:row;align-items:center;gap:10px}
  .shop .wc-rep{flex:1 1 0;min-width:0}
  .shop .btn{padding:6px 6px;min-height:0;font-size:11px;letter-spacing:.1em;line-height:1.15}
  .shop .shop-b[aria-disabled=true]{padding-top:6px;padding-bottom:6px}
  .shop .shop-b .sb-s{display:none}
  .shop .shop-b[aria-disabled=true]{white-space:nowrap;font-size:10.5px;letter-spacing:.06em}
  .shop .shop-b[aria-disabled=true] .sb-buy{display:none}            /* locked: just "EBOOK" / "AUDIOBOOK" on one line */
  .wt{width:15px;height:18px;font-size:14px}
  .wu{font-size:9px}
  .audiobook .dl-off{margin-top:4px;padding:3px 8px;font-size:9px}
}
/* ---- thank-you page (thank-you.html), on the privacy-page shell from css/signup.css ---- */
.ty .dl{list-style:none;padding:0;margin:16px 0 18px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ty .dl .btn{color:#FFF4EA;text-decoration:none;font-weight:500}
.ty .dl .btn:hover{background:var(--ink);color:#FFF4EA}
.ty .dl .btn.alt{background:var(--pal-yellow,#D6CF2A);color:var(--ink)}
.ty .dl .btn.alt:hover{background:var(--ink);color:var(--pal-yellow,#D6CF2A)}
@media (max-width:760px){.ty .dl{align-items:stretch}.ty .dl .btn{justify-content:center;white-space:normal;text-align:center}}
/* thank-you page: the cream card floats in the same black starfield as the end chapter (stars + halftone dots + grain, all existing images) */
.ty-body .pv-main{margin:0 14px;border:1.5px solid var(--ink);background:radial-gradient(rgba(243,237,226,.07) .9px,transparent 1.4px) 0 0/5px 5px,url(../img/stars-mid.webp) 300px 170px,url(../img/stars-far.webp) center/cover,#141210;align-items:center}
.ty-body .doc{box-shadow:8px 8px 0 var(--pink)}
.ty-body .pv-foot{margin-top:12px}
@media (max-width:760px){.ty-body .pv-main{margin:0 8px}.ty-body .doc{box-shadow:5px 5px 0 var(--pink)}}
/* ---- contact address (end-card footer, thank-you + download footers). Footer typography, palette colours. ---- */
.addr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin:6px 0 0;font:500 10.5px/1.5 Oswald,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--pal-ink,#2A2420);opacity:.8}
.addr>span:not([hidden]),.addr>a{white-space:nowrap}
.addr>*+*:not([hidden])::before{content:"·";margin:0 .6em;color:var(--pal-pink,#FE3EA6)}
.addr-n{color:var(--pal-pink-deep,#CB016E)}
.addr a.addr-m{color:var(--pal-ink,#2A2420);text-transform:none;letter-spacing:.06em;font-weight:500;text-decoration:underline;text-decoration-color:var(--pal-pink,#FE3EA6);text-underline-offset:2px}
.addr a.addr-m:hover{color:var(--pal-pink-deep,#CB016E)}
.addr a.addr-x{text-decoration:none}.addr a.addr-x::before{display:inline-block}  /* X icon: no underline under icon or separator dot */
.pv-foot .addr{flex:1 1 100%;margin:0}
@media (max-width:760px){
  .addr{display:block;font-size:9.5px;line-height:1.3;letter-spacing:.1em;margin-top:2px}  /* phones: one item per line, no separators */
  .addr>span:not([hidden]),.addr>a{display:block;width:max-content;max-width:100%;white-space:normal}
  .addr>*+*:not([hidden])::before{content:none}
}
/* AFTER LAUNCH: the counter is gone completely (no tiles, no reserved space); a plain OUT NOW line + the two live buttons remain.
   html.shop-live is set in <head> before first paint (no counter flash on load after launch); data-state=live by js/shop.js at the live switch. */
.out-now{display:none}
html.shop-live .shop .wc,.shop[data-state=live] .wc{display:none !important}
html.shop-live .shop .out-now,.shop[data-state=live] .out-now{display:block;margin:0 0 3px;text-align:center}
.out-now span{display:inline;font:500 13px/1.3 Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#2A2420)}  /* understated: plain ink text on the light card; no block, tilt or shadow */
@media (max-width:760px){
  html.shop-live .shop .out-now,.shop[data-state=live] .out-now{flex:1 1 100%;margin:0}
  .out-now span{font-size:12px}
}
@media (max-width:760px) and (max-height:740px){
  .out-now span{font-size:11px}
}