/* James Sinclair site - "an operator's record". White canvas, navy ink, yellow as a physical thing (marker, tape, sticker) once per section,
   pink for prices and small labels. Bebas Neue display, Helvetica Neue body, Caveat for one handwritten note per section at most.
   Hairlines between bands, one navy band per page, navy duotone on supporting photos, James in colour. (2 Oct 2026 redesign) */
:root{
  --white:#FFFFFF;--light:#F7F6F2;--black:#000000;--ink:#15264C;--mute:#5E6983;--line:#E4E6EC;--line-dark:#2A2A2A;
  --pink:#A92D6C;--yellow:#F9E328;--yellow-deep:#FEBA07;--navy:#15264C;--navy-deep:#0E1B3A;
  --head:'Bebas Neue','Helvetica Neue',Arial,sans-serif;
  --body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --hand:'Caveat',cursive;
  --maxw:1180px;--pad:20px;--r:6px;--mat:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--white);color:var(--ink);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.narrow{max-width:760px}
h1,h2,h3,.disp{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.92}
h1{font-size:clamp(44px,6.2vw,84px);max-width:16ch}
h2{font-size:clamp(34px,3.8vw,50px);margin-bottom:18px}
h3{font-size:clamp(24px,3.2vw,32px);margin:0 0 10px;letter-spacing:.02em}
p{margin-bottom:16px;max-width:66ch}
.lede{font-size:clamp(19px,2.4vw,22px);line-height:1.4;max-width:46ch}
.small{font-size:14px;color:var(--mute)}
.hand{font-family:var(--hand);font-size:clamp(26px,4vw,38px);line-height:1;color:var(--pink)}
.pink{color:var(--pink)}
/* marker stroke behind navy type, never yellow text on white */
.yel{color:inherit;background-image:linear-gradient(transparent 44%,var(--yellow) 44%,var(--yellow) 88%,transparent 88%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.navy .yel{background-image:none;color:var(--yellow)}
.kicker{font-family:var(--head);font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;line-height:1}
.navy .kicker{color:var(--yellow)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--body);font-weight:700;font-size:15px;padding:15px 26px;background:var(--yellow);color:var(--ink);border-radius:999px;text-transform:uppercase;letter-spacing:.02em;display:inline-block;text-align:center;line-height:1.1}
.btn:hover{filter:brightness(.96)}
.btn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px currentColor;color:inherit}
.btn.pinkb{background:var(--pink);color:var(--white)}
.btn.sm{padding:11px 18px;font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* bands: white and warm paper alternate, hairline between, one navy band per page */
section{padding:clamp(64px,9vw,128px) 0}
section.dark{background:var(--light);color:var(--ink)} /* legacy alias used by inner pages */
section.light{background:var(--light)}
section.navy{background:var(--navy);color:var(--white)}
section.yellow{background:var(--yellow);color:var(--ink)}
section+section{border-top:1px solid var(--line)}
section.navy+section,section+section.navy{border-top:0}
.navy p{color:#E6E6E6}
.navy .small{color:#B9C0D1}
@media(min-width:900px){section{padding:clamp(96px,9vw,128px) 0}}

/* nav: signature, links, the one button */
.nav{background:var(--white);color:var(--ink);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.nav .logo{display:flex;align-items:center;margin-right:auto}
.nav .logo img{height:34px;width:auto}
@media(min-width:1000px){.nav .logo img{height:40px}}
.nav .links{display:none;gap:18px;align-items:center}
.nav .links a{font-family:var(--head);font-size:18px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav .links a:hover,.nav .links a[aria-current]{border-bottom-color:var(--yellow)}
.nav .cta{display:inline-block;padding:9px 14px;font-size:12px;white-space:nowrap}
.nav details{position:relative}
.nav summary{list-style:none;cursor:pointer;font-family:var(--head);font-size:20px;letter-spacing:.06em;padding:8px 2px;color:var(--ink)}
.nav summary::-webkit-details-marker{display:none}
.nav details[open] summary{color:var(--pink)}
.nav .menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--white);border:1px solid var(--line);min-width:240px;padding:10px 0;display:flex;flex-direction:column}
.nav .menu a{font-family:var(--head);font-size:24px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:10px 20px}
.nav .menu a[aria-current],.nav .menu a:hover{color:var(--pink)}
.nav .menu .btn{margin:12px 20px 6px;align-self:flex-start;white-space:nowrap}
@media(min-width:1000px){.nav .links{display:flex}.nav .cta{margin-left:6px;padding:11px 18px;font-size:13px}.nav details{display:none}}
@media(max-width:1179px){.nav .links a[href="/#group"]{display:none}}

/* ---------- objects: every image is a thing placed on the page ---------- */
/* mounted print: white matte, hairline navy mount */
.print{position:relative;background:var(--white);padding:var(--mat);border:1px solid var(--navy);display:block}
.print img{width:100%;height:100%;object-fit:cover;display:block}
.print.tilt-l{transform:rotate(-3deg)}
.print.tilt-r{transform:rotate(2.5deg)}
/* tape: one strip of yellow, slightly translucent, rotated */
.tape{position:absolute;width:92px;height:26px;background:var(--yellow);opacity:.82;mix-blend-mode:multiply;clip-path:polygon(0 12%,100% 0,98% 90%,2% 100%);box-shadow:0 1px 1px rgba(21,38,76,.12);transform:rotate(-6deg);left:50%;top:-13px;margin-left:-46px;z-index:3}
.tape.r{left:auto;right:-26px;top:22px;margin:0;transform:rotate(38deg)}
.tape.l{left:-22px;top:26px;margin:0;transform:rotate(-40deg)}
/* navy duotone on supporting photography; James stays in colour */
.duo{position:relative;overflow:hidden;isolation:isolate}
.duo img{filter:grayscale(1) contrast(1.05)}
.duo:after{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:lighten;pointer-events:none}
.print.duo{padding:var(--mat)}
.print.duo:after{inset:var(--mat)}
/* round sticker */
.sticker{position:absolute;z-index:4;width:92px;height:92px;border-radius:50%;background:var(--yellow);color:var(--ink);font-family:var(--head);font-size:17px;letter-spacing:.06em;line-height:1;text-align:center;display:flex;align-items:center;justify-content:center;transform:rotate(-10deg);padding:10px;text-transform:uppercase}
/* handwritten note */
.note{font-family:var(--hand);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1;color:var(--pink);transform:rotate(-4deg);display:inline-block}

/* ---------- hero: copy left, James on an offset navy block that bleeds off the page ---------- */
.hero{position:relative;color:var(--ink);background:var(--white);isolation:isolate;overflow:hidden;padding:0;display:flex;flex-direction:column}
.hero .bg{order:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 28px}
.hero .bg img{width:100%;height:var(--bgh,clamp(180px,24vw,300px));object-fit:cover;object-position:var(--pos,center 30%);border-radius:var(--r)}
.hero .wrap{width:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-top:44px;padding-bottom:22px}
.hero h1{margin-bottom:16px;color:var(--navy)}
.hero .lede{color:var(--ink);max-width:40ch}
.hero .kicker{display:none}
.hero.short .bg{display:none}
.hero.short .wrap{padding-bottom:16px}
.hero.short+section{padding-top:24px}
.hero.inner .wrap{padding-top:44px;padding-bottom:22px}
.hero.inner h1,.hero.inner .wrap h1{font-size:clamp(40px,5.2vw,72px);max-width:18ch}
@media(min-width:900px){.hero.inner .wrap{padding-top:56px;padding-bottom:26px}.hero.short .wrap{padding-bottom:20px}.hero.short+section{padding-top:28px}}

.hero.home .wrap{display:grid;gap:28px;padding-top:36px;padding-bottom:0;align-items:end}
.hero.home h1{font-size:clamp(46px,5.4vw,74px);max-width:none;margin-bottom:20px}
.hero.home h1 br{display:none}
.hero.home .copy{padding-bottom:8px}
.hero.home .copy .lede{margin-bottom:0}
/* the stage: block, polaroid, cut-out */
.stage{position:relative;height:min(470px,106vw);margin:0 calc(-1*var(--pad)) 0;}
.stage .block{position:absolute;left:24%;right:-40px;top:14%;bottom:0;background:var(--navy)}
.stage .cut{position:absolute;left:60%;bottom:0;width:min(62%,360px);transform:translateX(-40%);z-index:3}
.stage .cut img{width:100%;height:auto}
.stage .polaroid{position:absolute;left:1%;bottom:8%;width:min(32%,190px);z-index:2;background:var(--white);padding:8px 8px 30px;border:1px solid var(--navy);transform:rotate(-6deg)}
.stage .polaroid .duo{aspect-ratio:4/3}
.stage .polaroid .duo img{width:100%;height:100%;object-fit:cover}
.stage .polaroid .cap{position:absolute;left:10px;bottom:9px;font-family:var(--body);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);line-height:1}
@media(min-width:900px){
  .hero.home .wrap{grid-template-columns:1.05fr .95fr;gap:24px;padding-top:0;min-height:640px;align-items:stretch}
  .hero.home .copy{display:flex;flex-direction:column;justify-content:center;padding:56px 0 64px}
  .hero.home h1 br{display:inline}
  .stage{height:auto;margin:0 calc(-1*var(--pad)) 0 0}
  .stage .block{left:28%;right:-50vw;top:22%}
  .stage .cut{left:61%;width:min(70%,430px);transform:translateX(-40%)}
  .stage .polaroid{left:0;bottom:8%;width:min(32%,210px)}
}

/* ---------- marquees: brands and press ---------- */
.marq{padding:40px 0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);overflow:hidden}
.marq .label{font-size:14px;color:var(--mute);margin:0 0 16px;text-align:left}
.marq .label b{color:var(--navy)}
.row-m{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.row-m+.row-m{margin-top:18px}
.track{display:flex;align-items:center;gap:52px;width:max-content;animation:marq 70s linear infinite;padding-right:52px}
.row-m.rev .track{animation-direction:reverse}
.marq:hover .track{animation-play-state:paused}
.track img{height:auto;width:auto;max-height:38px;max-width:140px;object-fit:contain;filter:grayscale(1) brightness(.38) contrast(1.25);opacity:1;transition:filter .25s}
.track img.sq{max-height:50px;max-width:60px}
.track img.wide{max-height:30px;max-width:168px}
.track img:hover{filter:none}
.marq.press .track{gap:52px;animation-duration:56s}
.marq.press .track img{height:26px;max-height:none;max-width:200px;filter:grayscale(1) brightness(.45);opacity:1;mix-blend-mode:multiply}
.marq.press .track img.sq{height:40px;max-height:none}
.marq.press .track img.raster{height:22px}
.marq.press{border-top:0;padding-top:8px}
@keyframes marq{to{transform:translateX(-33.3333%)}}
@media(min-width:900px){.marq{padding:44px 0 36px}.track img{max-height:46px;max-width:168px}.track img.sq{max-height:60px;max-width:72px}.track img.wide{max-height:36px;max-width:200px}.marq.press .track img{height:30px}.marq.press .track img.sq{height:46px}.marq.press .track img.raster{height:26px}}
@media(prefers-reduced-motion:reduce){
  .track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:24px 36px}
  .row-m{mask-image:none;-webkit-mask-image:none}
}

/* ---------- numbers row: oversized numerals, hairlines, captions ---------- */
.numbers{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px}
@media(min-width:760px){.numbers{grid-template-columns:repeat(4,1fr);gap:0 32px}}
.numbers>div{border-left:1px solid var(--navy);padding:4px 0 6px 18px}
.numbers b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(56px,8vw,112px);line-height:.85;color:var(--navy);letter-spacing:0}
.numbers b small{font-size:.5em;vertical-align:top;margin-left:2px}
.numbers span{display:block;font-size:15px;color:var(--mute);margin-top:10px;max-width:16ch}

/* ---------- group index: hairline rows, not cards ---------- */
.index{list-style:none;margin:26px 0 0;display:grid;gap:0 48px}
@media(min-width:900px){.index{grid-template-columns:1fr 1fr}}
.index li{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.index li:last-child{border-bottom:1px solid var(--line)}
@media(min-width:900px){.index li:nth-last-child(2){border-bottom:1px solid var(--line)}}
.index .mark{width:72px;height:48px;display:flex;align-items:center;justify-content:center}
.index .mark img{max-height:48px;max-width:72px;width:auto;height:auto;object-fit:contain}
.index-foot{margin-top:18px}
.index a{text-decoration:none;display:block}
.index a b{font-family:var(--head);font-weight:400;font-size:22px;letter-spacing:.03em;display:block;line-height:1}
.index a:hover b{color:var(--pink)}
.index .what{font-size:14px;color:var(--mute);display:block;margin-top:2px}
.index .url{font-size:13px;color:var(--mute);letter-spacing:.02em;text-align:right;white-space:nowrap}
@media(max-width:640px){.index li{grid-template-columns:60px 1fr}.index .url{display:none}.index li:nth-child(n+9){display:none}.index li:nth-child(8){border-bottom:1px solid var(--line)}}

/* ---------- the Letter as a newspaper plate ---------- */
.letter{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.letter{grid-template-columns:1fr 1.1fr;gap:64px}}
.plate{position:relative;background:var(--white);border:1px solid var(--navy);padding:26px 26px 22px;transform:rotate(-1deg);max-width:560px;margin:14px auto 0}
.plate .mast{font-family:var(--head);font-size:clamp(40px,5vw,60px);line-height:.9;letter-spacing:.02em;border-bottom:3px double var(--navy);padding-bottom:10px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.plate .mast small{font-family:var(--body);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding-bottom:4px}
.plate ol{list-style:none;margin:6px 0 0}
.plate li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.plate li time{font-family:var(--head);font-size:18px;letter-spacing:.04em;color:var(--pink)}
.plate li span{font-size:16px;line-height:1.35}
.plate form.inline{margin-top:18px;max-width:none}
.plate form.inline input{border-radius:3px;border-color:var(--navy)}
.plate .btn{border-radius:3px}
.plate-flag{margin:10px 0 0}
.plate .tape{top:-14px;left:40px;margin:0;transform:rotate(-8deg)}
.letter .note{margin-top:10px}

/* ---------- Masterclass: the one navy band, a framed cover on a rotated wall ---------- */
.navy .stage-wall{position:relative;height:320px;margin:8px calc(-1*var(--pad)) 0;overflow:hidden}
.stage-wall{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent),linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent),linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
.wall{position:absolute;top:50%;left:50%;width:170%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform:translate(-50%,-50%) rotate(-7deg)}
.wall .duo{aspect-ratio:16/9;border-radius:4px}
.wall .duo img{width:100%;height:100%;object-fit:cover}
.navy .wall .duo:after{mix-blend-mode:multiply;opacity:.55}
.stage-wall .framed{position:absolute;top:50%;left:50%;width:220px;transform:translate(-50%,-50%) rotate(2deg);border:5px solid var(--white);background:var(--white);z-index:2}
.stage-wall .framed img{width:100%;height:auto}
.stage-wall .tape{display:none}
.when{font-family:var(--head);font-size:clamp(24px,3vw,34px);letter-spacing:.04em;color:var(--white);opacity:.85;line-height:1;margin-bottom:14px}
@media(min-width:900px){
  .navy .cols{align-items:center}
  .navy .stage-wall{height:420px;margin:0}
  .wall{width:150%;left:6%;gap:14px;transform:translate(0,-50%) rotate(-7deg)}
  .stage-wall .framed{width:300px;left:46%}
}

/* ---------- shelf: fanned workbook, real covers, typographic covers ---------- */
.shelf{display:grid;gap:40px;margin-top:30px}
@media(min-width:900px){.shelf{grid-template-columns:1.1fr 1fr;gap:56px;align-items:end}}
.fan{position:relative;display:flex;flex-direction:column;width:100%;margin:0 auto;max-width:520px;text-decoration:none;color:inherit}
.fan .stack{position:relative;display:block;width:100%;aspect-ratio:3/2.15}
.fan .leaf{position:absolute;display:block;left:50%;bottom:0;width:62%;transform-origin:50% 100%;background:var(--white);padding:6px;border:1px solid var(--navy)}
.fan .leaf.page{aspect-ratio:3/2;background:var(--white) repeating-linear-gradient(to bottom,transparent 0 22px,var(--line) 22px 23px);background-origin:content-box;background-clip:content-box}
.fan .leaf img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fan .leaf:nth-child(1){transform:translateX(-50%) rotate(-9deg) translateY(4px);z-index:1}
.fan .leaf:nth-child(2){transform:translateX(-50%) rotate(-1deg);z-index:2}
.fan .leaf:nth-child(3){transform:translateX(-50%) rotate(8deg) translateY(5px);z-index:1}
.fan .sticker{right:-26px;top:-26px}
.fan .cap{position:static;margin-top:40px;font-size:14px;color:var(--mute);display:block}
.fan .cap b{font-family:var(--head);font-weight:400;font-size:22px;letter-spacing:.03em;color:var(--navy);display:block}
.fan .cap .price{color:var(--pink);font-family:var(--head);font-size:18px;margin-left:8px}
.books{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;padding-bottom:14px;border-bottom:2px solid var(--navy);position:relative}
.books a{display:block;width:17%;text-decoration:none}
.books img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;transition:transform .25s}
.books a:hover img{transform:translateY(-6px)}
.books .cap,.books-cap{font-size:13px;color:var(--mute);margin-top:12px}
.coming{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.coming a{text-decoration:none;display:block}
.coming .cover{aspect-ratio:3/2;height:auto;container-type:inline-size;border:1px solid var(--navy);outline:6px solid var(--white);outline-offset:-7px;transform:rotate(-1.5deg)}
.coming a:nth-child(2) .cover{transform:rotate(1deg)}
.coming .cap{font-size:14px;color:var(--mute);margin-top:8px}
.coming .cap b{font-family:var(--head);font-weight:400;font-size:19px;letter-spacing:.03em;color:var(--navy);display:block}
.coming .cap .price{color:var(--pink);font-family:var(--head);font-size:16px;margin-left:6px}
.shelf-foot{margin-top:40px}

/* ---------- podcast: framed cover over a wall, then episode rows ---------- */
.pod{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.pod{grid-template-columns:1fr 1.15fr;gap:56px}}
.pod .stage-wall{position:relative;height:300px;margin:0 calc(-1*var(--pad));overflow:hidden}
.pod .wall .duo:after{opacity:.75}
.pod .framed{width:200px}
@media(min-width:900px){.pod .stage-wall{height:380px;margin:0}.pod .framed{width:260px;left:50%}}
.eps{list-style:none;margin:0}
.eps li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.eps li:last-child{border-bottom:1px solid var(--line)}
.eps time{font-family:var(--head);font-size:18px;letter-spacing:.04em;color:var(--pink);line-height:1.2;padding-top:3px}
.eps a{text-decoration:none;font-size:16.5px;line-height:1.35;display:block}
.eps a:hover{color:var(--pink)}
.listen{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.listen a{font-size:13px;font-weight:700;text-decoration:none;padding:8px 12px;border:1px solid var(--navy);border-radius:999px;color:var(--navy)}
.listen a:hover{background:var(--navy);color:var(--white)}

/* ---------- speaking ---------- */
.speak{display:grid;gap:30px;align-items:center}
@media(min-width:900px){.speak{grid-template-columns:1.1fr 1fr;gap:64px}}
.speak .print{max-width:560px;margin:14px auto 0}
.speak .print .duo{aspect-ratio:3/2}
.speak .from{font-size:15px;color:var(--mute);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.speak-link{margin-top:18px}

/* ---------- inner-page components (kept for every other page) ---------- */
.stubs{display:grid;gap:18px;margin-top:26px}
@media(min-width:760px){.stubs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.stubs.three{grid-template-columns:repeat(3,1fr)}}
.stub{display:grid;grid-template-columns:118px 1fr;background:var(--white);color:var(--ink);border:1px solid var(--line);overflow:hidden;text-decoration:none;position:relative}
.stub .date{background:var(--yellow);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 10px;font-family:var(--head);text-transform:uppercase;line-height:.9;border-right:1px solid var(--navy);text-align:center}
.stub .date b{font-weight:400;font-size:52px;display:block}
.stub .date span{font-size:20px;letter-spacing:.08em;display:block}
.stub .date i{font-style:normal;font-size:14px;letter-spacing:.08em;display:block;margin-top:6px;opacity:.75}
.stub .body{padding:18px 20px 18px 22px;display:flex;flex-direction:column;gap:6px}
.stub .body h3{margin:0;font-size:clamp(24px,3vw,30px)}
.stub .body p{margin:0;font-size:15px;color:var(--mute);max-width:none}
.stub .body .price{font-family:var(--head);font-size:22px;letter-spacing:.04em;color:var(--pink);margin-top:auto;padding-top:8px}
.stub .body .price small{font-family:var(--body);font-size:12px;color:var(--mute);letter-spacing:0;text-transform:none;margin-left:6px}
.stub:hover .body h3{color:var(--pink)}
.stub.soldout .date{background:var(--light)}
.stub.past{opacity:.72}

.grid{display:grid;gap:22px;margin-top:26px}
@media(min-width:420px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid.four{grid-template-columns:repeat(4,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}}
.prod{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);overflow:hidden;background:var(--white)}
.prod .img{aspect-ratio:3/2;background:var(--light);position:relative;overflow:hidden;container-type:inline-size}
.prod .img img{width:100%;height:100%;object-fit:cover}
.prod .img .tag{position:absolute;top:12px;left:12px;background:var(--yellow);color:var(--ink);font-family:var(--head);font-size:15px;letter-spacing:.08em;padding:5px 9px;border-radius:3px}
.prod .img .tag.soon{background:var(--white)}
.prod .meta{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .meta .kind{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.prod .meta h3{font-size:clamp(22px,2.4vw,26px);margin:0;line-height:.95}
.prod .meta p{font-size:14.5px;color:var(--mute);margin:0;max-width:none}
.prod .meta .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px}
.prod .meta .price{font-family:var(--head);font-size:26px;letter-spacing:.04em;color:var(--pink)}
.prod .meta .price s{color:var(--mute);font-size:18px;margin-right:8px}
.prod .meta .price .flag{margin-left:8px;vertical-align:middle}
.prod .meta .fl{margin:2px 0 0}
.prod:hover h3{color:var(--pink)}
.prod.book .img{aspect-ratio:1;background:var(--light)}
.prod.book .img img{object-fit:contain;padding:14px}

.cover{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px;background:var(--light);color:var(--navy);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.cover b{font-family:var(--head);font-weight:400;font-size:clamp(18px,6cqw,30px);line-height:.95;text-transform:uppercase;color:var(--mute)}
.cover i{font-style:normal;font-family:var(--head);font-size:13px;letter-spacing:.1em;color:var(--pink);margin:0}
.cover.typo{box-shadow:none}
.cover.typo b{font-size:clamp(20px,7cqw,34px);max-width:12ch;color:inherit}
.cover.typo em{font-style:normal;font-family:var(--body);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:inherit;opacity:.72;margin-top:10px}
.cover.typo[data-tone=navy]{background:var(--navy);color:#fff}
.cover.typo[data-tone=navy] i{color:var(--white);opacity:.7}
.cover.typo[data-tone=light]{background:var(--light);color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.cover.typo[data-tone=light] i{color:var(--pink)}
.prodhero .cover b{font-size:clamp(28px,8cqw,52px);max-width:12ch}

.shop{display:grid;gap:28px}
@media(min-width:900px){.shop{grid-template-columns:230px 1fr;align-items:start}}
.rail{position:sticky;top:84px}
.rail h3{font-size:22px;margin-bottom:8px}
.rail ul{list-style:none;margin:0 0 22px}
.rail li a{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line);text-decoration:none;font-size:15px}
.rail li a span{color:var(--mute);font-size:13px}
.rail li a:hover,.rail li a[aria-current]{color:var(--pink)}
.sortbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--mute)}
.sortbar select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--white)}
.shop .chips{display:none}
@media(max-width:899px){
  .rail{position:static}.rail .more{display:none}
  .shop .chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
  .shop .chips a{flex:none;font-family:var(--head);font-size:16px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none}
  .shop .chips a[aria-current]{background:var(--ink);color:var(--white);border-color:var(--ink)}
  .rail>h3,.rail>ul{display:none}
}

ul.tick{list-style:none;margin:0 0 20px}
ul.tick li{padding:6px 0 6px 24px;position:relative}
ul.tick li:before{content:"";position:absolute;left:4px;top:.75em;width:8px;height:8px;background:var(--pink);border-radius:50%}
.navy ul.tick li:before{background:var(--yellow)}
ul.plain{list-style:none;margin:0 0 20px}
ul.plain li{padding:14px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:10px}
ul.plain.wide li{grid-template-columns:120px 1fr}
ul.plain li:last-child{border-bottom:1px solid var(--line)}
ul.plain li b{font-family:var(--head);font-weight:400;font-size:22px;color:var(--pink);line-height:1.3}
ul.plain li span{max-width:66ch}
.navy ul.plain li{border-color:rgba(255,255,255,.18)}
.navy ul.plain li b{color:var(--yellow)}
table.t{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
table.t th,table.t td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-top:1px solid var(--line)}
table.t th{font-family:var(--head);font-weight:400;font-size:18px;letter-spacing:.06em;color:var(--pink)}
table.t tr:last-child td{border-bottom:1px solid var(--line)}
@media(max-width:640px){table.t.stack thead{display:none}table.t.stack td{display:block;padding:4px 0;border:0}table.t.stack tr{display:block;padding:12px 0;border-top:1px solid var(--line)}}

.cols{display:grid;gap:28px}
@media(min-width:900px){.cols{grid-template-columns:1fr 1fr;gap:56px;align-items:center}.cols.rev>*:first-child{order:2}}
.cols figure img{border-radius:var(--r)}
.cols.top{align-items:start}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;margin:26px 0}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:.9;color:var(--pink)}
.navy .stats b{color:var(--yellow)}
.stats span{display:block;font-size:14px;color:var(--mute);margin-top:6px}
.navy .stats span{color:#B9C0D1}

/* pull quote: a deliberate object in the display face, hairline above and below */
.quote{border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);padding:18px 0 14px;margin:22px 0;max-width:620px}
.quote p{font-family:var(--head);font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:.01em;text-transform:none;margin-bottom:10px;max-width:none;color:var(--navy)}
.quote cite{font-style:normal;font-size:14px;color:var(--mute);display:block}
.quote cite:before{content:"";display:inline-block;width:22px;height:1px;background:var(--pink);vertical-align:middle;margin-right:8px}
.navy .quote{border-color:rgba(255,255,255,.4)}
.navy .quote p{color:var(--white)}
.quotes{display:grid;gap:22px;margin-top:20px}
@media(min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}}

.logos{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;margin-top:20px}
.logos img{height:34px;width:auto;opacity:.85;filter:grayscale(1)}
.light .logos img,section:not(.navy) .logos img{mix-blend-mode:multiply}
.logos.books img{height:auto;width:110px;filter:none;opacity:1;border-radius:3px}
.logos.brands img{height:52px;filter:none;opacity:1}

.video{position:relative;aspect-ratio:16/9;background:var(--navy);border-radius:var(--r);overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.clips{display:grid;gap:18px;margin-top:22px}
@media(min-width:760px){.clips{grid-template-columns:repeat(2,1fr)}}
.clips figcaption{font-family:var(--head);font-size:20px;letter-spacing:.04em;margin-top:8px}

.form{display:grid;gap:14px;max-width:620px}
.form label{display:grid;gap:6px;font-size:14px;font-weight:700}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #C9C9C9;border-radius:4px;background:var(--white);color:var(--ink);width:100%}
.form textarea{min-height:120px}
.form .two{display:grid;gap:14px}
@media(min-width:640px){.form .two{grid-template-columns:1fr 1fr}}
.form .btn{justify-self:start}
.inline{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.inline input{flex:1;min-width:200px;font:inherit;font-size:16px;padding:13px 14px;border:1px solid #C9C9C9;border-radius:999px}

details.faq{border-top:1px solid var(--line)}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--head);font-size:24px;letter-spacing:.03em;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";color:var(--pink)}
details.faq[open] summary:after{content:"-"}
details.faq p{padding-bottom:16px}

/* review chips: dashed pink, never the button yellow */
.flag{display:inline-block;font-family:var(--head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--white);color:var(--pink);border:1px dashed var(--pink);vertical-align:2px}
.navy .flag{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.strip{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--mute)}
.pill{display:inline-block;font-family:var(--head);font-size:15px;letter-spacing:.08em;background:var(--light);padding:5px 10px;border-radius:3px}
.pcrumb{font-size:13px;color:var(--mute);margin-bottom:14px}
.pcrumb a{color:inherit}
.prodhero{display:grid;gap:30px}
@media(min-width:900px){.prodhero{grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}}
.prodhero .img{aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--light);container-type:inline-size}
.buybox{border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-top:18px}
.buybox .price{font-family:var(--head);font-size:44px;letter-spacing:.03em;line-height:1;color:var(--pink)}
.buybox .price small{font-family:var(--body);font-size:13px;color:var(--mute);letter-spacing:0;margin-left:8px}
.buybox .btn{width:100%;margin-top:14px}
.buybox .note{font-size:13px;color:var(--mute);margin-top:10px}
.fn-sum-item b,.offer-price,.stickybuy .sp{color:var(--pink)}
.stars{color:var(--yellow-deep);letter-spacing:2px;font-size:15px}
.mock{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);background:var(--pink);text-align:center;padding:7px 10px}

/* ---------- footer: short ---------- */
footer{background:var(--light);color:var(--ink);border-top:1px solid var(--line);padding:48px 0 28px;font-size:14.5px}
footer .top{display:grid;gap:28px;margin-bottom:34px}
@media(min-width:760px){footer .top{grid-template-columns:1.3fr 1fr 1fr 1fr}}
footer h4,footer .fh{font-family:var(--head);font-weight:400;font-size:19px;letter-spacing:.08em;color:var(--navy);margin-bottom:10px}
footer ul{list-style:none}
footer li{padding:3px 0}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--pink)}
footer .logo img{height:40px;width:auto;margin-bottom:14px}
footer .hand{color:var(--pink);margin-bottom:6px;font-size:28px}
footer .bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:13px;color:var(--mute)}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* inner pages */
/* ---------- inner hero: copy beside a mounted print, never a full-width rectangle ---------- */
.hero.inner{display:grid;gap:28px;max-width:var(--maxw);margin:0 auto;padding:36px var(--pad) 30px;align-items:center}
.hero.inner .wrap{padding:0;max-width:none;justify-content:center}
.hero.inner .wrap,.hero.inner.short .wrap{padding-top:0;padding-bottom:0}
.hero.inner h1,.hero.inner .wrap h1{font-size:clamp(40px,4.6vw,60px);max-width:15ch;margin-bottom:14px}
.hero.inner .lede{font-size:clamp(17px,2vw,20px);max-width:44ch}
.hero.inner .btn-row{margin-top:18px}
.hero.inner .bg{order:2;position:relative;width:100%;max-width:520px;margin:6px auto 0;padding:var(--mat);background:var(--white);border:1px solid var(--navy);transform:rotate(1.5deg)}
.hero.inner .bg:before{content:"";position:absolute;width:92px;height:26px;background:var(--yellow);opacity:.92;transform:rotate(-6deg);left:50%;top:-13px;margin-left:-46px;z-index:3}
.hero.inner .bg img{width:100%;height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover;object-position:var(--pos,center 30%);border-radius:0}
.hero.inner.short{padding-bottom:12px}
.hero.inner.short .bg{display:none}
.hero.inner.short+section{padding-top:28px}
.hero.inner .bg.wallbg{background:transparent;border:0;padding:0;transform:none;max-width:none;margin:0}
.hero.inner .bg.wallbg:before{display:none}
.wallbg .stage-wall{position:relative;height:320px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.wallbg .wall .duo:after{opacity:.78}
.wallbg .framed{width:210px}
@media(min-width:900px){
  .hero.inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;padding:48px var(--pad) 44px;min-height:0}
  .hero.inner .bg{justify-self:end;margin:0}
  .hero.inner.short{grid-template-columns:1fr}
  .wallbg .stage-wall{height:400px}
  .wallbg .framed{width:260px}
}

/* ---------- any figure in a two-column band is a mounted print; alternate the tilt ---------- */
.cols>figure:not(.raw){position:relative;background:var(--white);padding:var(--mat);border:1px solid var(--navy);transform:rotate(-1.5deg);justify-self:center;width:100%;max-width:560px}
.cols.rev>figure:not(.raw),.cols>div+figure:not(.raw){transform:rotate(1.5deg)}
.cols>figure:not(.raw):before{content:"";position:absolute;width:84px;height:24px;background:var(--yellow);opacity:.92;left:50%;top:-12px;margin-left:-42px;transform:rotate(-6deg);z-index:3}
.cols>figure:not(.raw) img{border-radius:0!important;width:100%;max-width:none!important;margin:0!important}
.cols>figure.portrait img{aspect-ratio:4/5;object-fit:cover}
.cols>figure.raw{display:flex;align-items:center;justify-content:center}
.cols>figure:not(.raw) figcaption{font-family:var(--hand);font-weight:600;font-size:20px;color:var(--ink);padding:10px 2px 0}

/* gallery grids become a pinboard of duotone prints */
.gal figure{position:relative;isolation:isolate;background:var(--white);padding:8px;border:1px solid var(--navy);overflow:hidden}
.gal figure:nth-child(odd){transform:rotate(-1.6deg)}
.gal figure:nth-child(even){transform:rotate(1.4deg)}
.gal figure img{border-radius:0!important;filter:grayscale(1) contrast(1.05)}
.gal figure:after{content:"";position:absolute;inset:8px;background:var(--navy);mix-blend-mode:lighten;pointer-events:none}
.gal figure:hover img{filter:none}
.gal figure:hover:after{opacity:0}

/* stats: oversized navy numerals on hairlines, same object as the home numbers row */
.stats{gap:22px 24px}
.stats>div{border-left:1px solid var(--navy);padding:2px 0 4px 16px}
.stats b{color:var(--navy);font-size:clamp(48px,6.4vw,84px);line-height:.88}
.navy .stats>div{border-color:rgba(255,255,255,.5)}
.navy .stats b{color:var(--yellow)}

/* the chapters: one oversized numeral per step */
ul.plain.chapters li{grid-template-columns:120px 1fr;align-items:start;padding:22px 0}
ul.plain.chapters li b{font-size:clamp(44px,6vw,72px);line-height:.85;color:var(--navy);letter-spacing:0}
ul.plain.chapters li span{padding-top:6px}

/* ticket stubs become hairline rows: date, name, line, who or price */
.stubs,.stubs.three{display:block;margin-top:14px}
.stub{grid-template-columns:150px 1fr;background:transparent;border:0;border-top:1px solid var(--line);gap:0 18px;padding:14px 0}
.stubs .stub:last-child{border-bottom:1px solid var(--line)}
.stub .date{background:transparent;border:0;align-items:flex-start;justify-content:flex-start;padding:4px 0 0;text-align:left;flex-direction:row;flex-wrap:wrap;gap:0 8px;align-content:flex-start}
.stub .date b{font-size:30px;color:var(--pink);line-height:1}
.stub .date span{font-size:22px;letter-spacing:.04em;color:var(--pink);line-height:1.2}
.stub .date i{font-size:12px;letter-spacing:.06em;width:100%;margin-top:4px;opacity:1;color:var(--mute)}
.stub .body{padding:0}
.stub .body h3{font-size:clamp(22px,2.6vw,28px)}
.stub .body .price{margin-top:4px;padding-top:0;font-size:16px;letter-spacing:.06em}
.stub.past .date b,.stub.past .date span{color:var(--mute)}
@media(max-width:560px){.stub{grid-template-columns:1fr}.stub .date{padding-bottom:6px}}

/* yellow bands: paper with one strip of tape, not a wall of yellow */
section.yellow{background:var(--light);color:var(--ink);position:relative;border-top:1px solid var(--line)}
section.yellow:before{content:"";position:absolute;left:50%;top:-13px;width:120px;height:26px;margin-left:-60px;background:var(--yellow);opacity:.92;transform:rotate(-3deg);z-index:2}

/* shop cards: covers on a shelf, hairline under the caption, no box */
.prod{border:0;background:transparent}
.prod .img{border:1px solid var(--line)}
.prod .meta{padding:14px 0 18px;border-bottom:1px solid var(--line)}
.prod.book .img{border:0;background:var(--light)}

/* product page: cover mounted, buy box as a card with the status sticker */
.prodhero .img{border:1px solid var(--navy);padding:var(--mat);background:var(--white);border-radius:0;transform:rotate(-1.5deg);aspect-ratio:auto}
.prodhero .img>img,.prodhero .img>.cover{aspect-ratio:3/2}
.prodhero .img>.cover{height:auto}
.buybox{position:relative;border:1px solid var(--navy);border-radius:0;padding:24px 22px 22px;margin-top:22px;background:var(--white)}
.buybox .sticker{right:-14px;top:-26px;width:84px;height:84px;font-size:15px}
ul.tick.included li:before{width:7px;height:12px;border:solid var(--pink);border-width:0 2px 2px 0;background:none;border-radius:0;transform:rotate(45deg);top:.55em;left:6px}

/* forms: the plate's field style everywhere */
.form input,.form select,.form textarea,.inline input{border-color:var(--navy);border-radius:3px}
.form{position:relative;border:1px solid var(--navy);padding:22px;background:var(--white)}
.form:before{content:"";position:absolute;width:84px;height:24px;background:var(--yellow);opacity:.92;left:50%;top:-12px;margin-left:-42px;transform:rotate(-6deg)}
.hero .form,.plate .form{border:0;padding:0}
.hero .form:before,.plate .form:before{display:none}

/* press logos as a quiet hairline row of vectors */
.logos{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:16px}
.logos img{height:24px;opacity:.75;filter:grayscale(1) brightness(.7)}
.logos.brands img,.logos.books img{filter:none;opacity:1}

/* clips: framed */
.clips figure{position:relative;background:var(--white);padding:8px;border:1px solid var(--navy)}
.clips figure:nth-child(odd){transform:rotate(-1deg)}
.clips figure:nth-child(even){transform:rotate(1deg)}
.clips figure img{border-radius:0!important}
.clips figcaption{font-family:var(--hand);font-weight:600;font-size:22px;letter-spacing:0;text-transform:none;color:var(--ink);padding:8px 2px 0}

/* the hero on the Letter page carries nothing but copy; the plate holds the one form */
.letter .plate{margin-top:0}
/* inner pages, round 2 */
.hero.inner h1,.hero.inner .wrap h1{max-width:20ch}
.buybox .note,.buybox p.note{font-family:var(--body);font-weight:400;font-size:13px;color:var(--mute);transform:none;display:block;margin-top:10px;line-height:1.5}
@media(max-width:560px){.cover.typo b{font-size:clamp(15px,6cqw,22px)}.cover.typo em{margin-top:6px}.cover{padding:10px 12px}}
/* inner pages, round 3: grids never grow past their track (min-content blowout at phone width) */
@media(min-width:420px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.numbers{grid-template-columns:repeat(4,minmax(0,1fr))}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.coming{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.index{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.letter{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.shelf{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.pod{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.speak{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.shop{grid-template-columns:230px minmax(0,1fr)}}
.prod .meta h3,.index a b,.eps a{overflow-wrap:anywhere}
/* inner pages, round 4 (critic r1 fixes) */
/* heroes: decisions, not a slot. align to the top of the print; per-page object variants */
@media(min-width:900px){.hero.inner{align-items:start}.hero.inner .wrap{padding-top:24px}}
.hero.inner[data-obj=l] .bg{transform:rotate(-2deg)}
.hero.inner[data-obj=l] .bg:before{left:-22px;top:26px;margin:0;transform:rotate(-40deg)}
.hero.inner[data-obj=corner] .bg{transform:rotate(1.2deg)}
.hero.inner[data-obj=corner] .bg:before{left:auto;right:-26px;top:22px;margin:0;transform:rotate(38deg)}
.hero.inner[data-obj=polaroid] .bg{padding:var(--mat) var(--mat) 56px;transform:rotate(-1.5deg)}
.hero.inner[data-obj=polaroid] .bg:before{display:none}
.hero.inner[data-obj=polaroid] .bg:after{content:attr(data-cap);position:absolute;left:var(--mat);bottom:14px;font-family:var(--hand);font-weight:600;font-size:22px;color:var(--ink)}
.hero.inner .bg.stack{transform:rotate(1.5deg)}
.hero.inner .bg.stack img.under{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);aspect-ratio:auto;padding:var(--mat);background:var(--white);border:1px solid var(--navy);box-sizing:border-box;transform:rotate(4deg) translate(24px,18px);z-index:-1;filter:grayscale(1) contrast(1.05)}
.hero.inner .bg.stack{isolation:isolate;margin-right:28px}
/* every screen is a mounted print too */
.video{aspect-ratio:auto;background:var(--white);border:1px solid var(--navy);border-radius:0;padding:var(--mat);overflow:visible}
.video iframe{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--navy)}
.video:before{content:"";position:absolute;width:84px;height:24px;background:var(--yellow);opacity:.92;left:50%;top:-12px;margin-left:-42px;transform:rotate(-6deg);z-index:3}
.cols .video{transform:rotate(1.5deg);margin-top:8px}
.cols .video+.small{margin-top:18px!important;font-family:var(--hand);font-weight:600;font-size:20px;color:var(--ink);letter-spacing:0;text-transform:none}
.pod-latest .video{transform:rotate(-.8deg);max-width:980px;margin:18px auto 0}
.pod-latest h2{font-family:var(--body);font-weight:700;font-size:clamp(24px,2.8vw,36px);line-height:1.15;letter-spacing:0;text-transform:none;max-width:30ch;margin-bottom:6px}
/* podcast wall: faded on all four sides, not clipped */
.wallbg .stage-wall{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent),linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent),linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
/* events guarantee: a sticker on the copy, band height from the copy */
.guar{position:relative}
.sticker.guar{right:-10px;top:-18px;width:120px;height:120px;font-size:17px;padding:10px;transform:rotate(8deg)}
@media(min-width:900px){.sticker.guar{right:-70px;top:4px}}
/* speaking stats as a full-width row under the two columns */
.stats.wide{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
/* two-column trait list so copy and video land at the same height */
ul.tick.two{columns:2;column-gap:32px}
ul.tick.two li{break-inside:avoid}
@media(max-width:560px){ul.tick.two{columns:1}}
/* shop shelf: covers are workbooks (matte, hairline, slight tilt), one status position, yellow once per shelf */
.prod .img{border:1px solid var(--navy);background:var(--white);padding:var(--mat);overflow:visible}
.prod .img>img,.prod .img>.cover{box-shadow:inset 0 0 0 1px var(--line)}
.prod:nth-child(odd) .img{transform:rotate(-1.2deg)}
.prod:nth-child(even) .img{transform:rotate(1deg)}
.prod.book .img{border:1px solid var(--navy);background:var(--white)}
.cover.typo{padding:18px 18px 16px;justify-content:flex-start;gap:10px}
.cover.typo b{max-width:none;font-size:clamp(20px,5.4cqw,30px);line-height:.95}
.cover.typo em{display:none}
.cover.typo.blank{justify-content:space-between}
.cover.typo.blank .flag{align-self:flex-start}
.prod .img .tag{top:calc(var(--mat) + 10px);left:calc(var(--mat) + 10px)}
.prod .img .tag.soon{background:var(--white);color:var(--ink);border:1px solid var(--navy)}
.prod .meta .row .btn{all:unset;cursor:pointer;font-family:var(--head);font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--yellow);padding-bottom:1px}
.prod.live .meta .row .btn{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--body);font-weight:700;font-size:13px;padding:11px 18px;background:var(--yellow);color:var(--ink);border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:560px){.cover.typo b{font-size:clamp(14px,5.6cqw,20px);max-width:none}}
@media(max-width:420px){.grid.three{grid-template-columns:1fr}}
/* product page: title on the inner scale, promise as the one pull line, less air above the breadcrumb */
.prodhero h1{font-size:clamp(40px,4.6vw,60px);margin:14px 0 10px}
.promise{font-family:var(--body);font-weight:400;font-size:clamp(18px,2vw,21px);line-height:1.35;text-transform:none;letter-spacing:0;color:var(--navy);border-left:2px solid var(--pink);padding-left:14px;margin:0 0 14px;max-width:40ch}
section:has(.prodhero){padding-top:40px}
/* letter page: plate pulled up to its heading, the handwritten note anchored to the plate */
.letter{align-items:start}
.plate .note{position:absolute;right:18px;bottom:-30px;font-size:24px;margin:0;z-index:3}
.plate form.inline input,.inline input,.form input{border-radius:999px}
.plate .btn{border-radius:999px}
/* masterclass tiers: the chip beside the price, not inside it */
.tiers .pr+.flag{display:block;margin-top:6px;width:fit-content}
/* round 4 follow-ups: sticker anchored top-right of the copy; shop column never wider than the phone */
.sticker.guar{left:auto}
@media(max-width:899px){.shop{grid-template-columns:minmax(0,1fr)}.shop>*{min-width:0}.shop .chips{max-width:100%}}
.prodhero p.promise{font-family:var(--body);font-weight:400;font-size:clamp(18px,2vw,21px);line-height:1.35;text-transform:none;letter-spacing:0;color:var(--navy);border-left:2px solid var(--pink);padding-left:14px;margin:0 0 14px;max-width:40ch}
.sticker.guar{position:absolute;left:auto}