/* Curiosity vs Conviction — bespoke series page.
   Art direction: the series' own wheat-pasted poster paper. Yellow paper is carnal curiosity, green paper is
   Christian conviction, and the line between them is the art's real torn edge (a mask traced from the
   Story_L1_Quote graphic, not drawn). Every round of the page starts yellow and ends green: the hero poster,
   the war of the question, the eleven lessons (the book turns from the problem to hope at Lesson 6), then
   night and the poster in the light. Signature motion: the green paper tears upward through the question as
   you scroll, turning curiosity down and conviction up. */

@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

:root{
  --ink:#101111; --paper:#f4f2ea; --mute:#c9ccd1; --lime:#b6ff00;
  /* sampled from the series art */
  --yel:#d8920a; --yel-hi:#eaa71a; --grn:#2e6440; --grn-d:#21492e; --night:#0d1d13;
  --ink-g:#13241a;        /* ink on yellow paper (6:1+) */
  --acc-g:#1b4f2d;        /* green accent on yellow */
  --acc-y:#f2b420;        /* yellow accent on green */
  --pill:#f4f2ea; --pill-t:#2a5c38;
  --gut:64px;
  --tw:max(100vw,1100px);              /* width the torn edge is drawn at */
  --th:calc(var(--tw) * .13875);       /* its height (mask is 1600 x 222) */
  --vh:100vh;
  --focus:var(--lime);
}
@supports (height:100svh){:root{--vh:100svh}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
main{overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}main{overflow-x:clip}}
a{color:inherit}
img{max-width:100%;display:block}
figure{margin:0}
blockquote{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--lime);color:var(--ink);padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- shared SMR header + footer (copied from catalog.css) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 Manrope,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:transform .12s,background .15s,color .15s,box-shadow .12s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn.green{background:var(--lime);color:var(--ink)}.btn.green:hover{background:var(--paper)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.top{height:80px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:5;background:var(--ink)}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--mute);transition:color .15s}
.nav a:hover{color:var(--paper)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--paper)}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.brand-name{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}
.foot{background:var(--ink);padding-bottom:40px;position:relative}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:64px;align-items:start}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--mute);max-width:300px}
.fnav{display:flex;flex-direction:column;gap:4px}
.fnav:nth-of-type(1){grid-column:7/10}.fnav:nth-of-type(2){grid-column:10/13}
.fnav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--mute)}
.fnav a:hover{color:var(--paper)}
.fline{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:48px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ---------- the two papers + the torn edge ---------- */
.y-paper,.hero,.war,.war-pin,.ly{background:var(--yel) url(/assets/series/curiosity-vs-conviction/paper-yellow-2400.webp) center top/cover no-repeat}
.g-paper,.war-sheet,.room,.lg,.hero-title .ht-con::before{background:var(--grn) url(/assets/series/curiosity-vs-conviction/paper-green-2400.webp) center top/cover no-repeat}
/* a sheet whose top edge is the art's torn edge; it is pasted over whatever came before it */
.torn,.war-sheet,.hero-title .ht-con::before{
  -webkit-mask:url(/assets/series/curiosity-vs-conviction/tear-mask.png) var(--tx,50%) 0/var(--tw) var(--th) repeat-x,linear-gradient(#000,#000) 0 calc(var(--th) - 2px)/100% 100% no-repeat;
  mask:url(/assets/series/curiosity-vs-conviction/tear-mask.png) var(--tx,50%) 0/var(--tw) var(--th) repeat-x,linear-gradient(#000,#000) 0 calc(var(--th) - 2px)/100% 100% no-repeat}
.torn{position:relative;margin-top:calc(var(--th) * -1);padding-top:var(--th)}

/* ---------- type voices ---------- */
.hero-title,.war-text,.room-title,.sec-title,.get-title,.close-quote p,.who{font-family:'League Gothic','Barlow Condensed',Impact,sans-serif;font-weight:400;text-transform:uppercase;margin:0;letter-spacing:.005em}
/* the art's white label pill: small heavy caps, green text */
.pill{display:inline-block;margin:0;background:var(--pill);color:var(--pill-t);font:800 12px/1.2 Manrope,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px 6px;border-radius:7px;white-space:nowrap}
.pill-ink{background:var(--ink-g);color:var(--pill)}
.kicker{margin:0 0 22px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-y)}
.acc{font-style:normal}
.y-ink{color:var(--ink-g)}

/* ---------- 1 · hero ---------- */
.hero{--tx:62%;position:relative;isolation:isolate;overflow:hidden;margin-top:calc(var(--th) * -.52);padding-top:calc(var(--th) * .78);
  display:grid;grid-template-columns:var(--gut) minmax(0,1fr) minmax(0,.72fr) var(--gut);column-gap:0;color:var(--ink-g);--focus:var(--ink-g)}
.hero-copy{grid-column:2;padding-bottom:calc(var(--th) * 1.15);position:relative}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-g)}
.crumbs li+li::before{content:'/';margin-right:10px;opacity:.6}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px}
.hero .pill-ink{margin-top:18px}
.hero-title{position:relative;margin-top:22px;font-size:clamp(84px,12.2vw,232px);line-height:.84}
.hero-title>span{display:block}
.ht-cur{color:var(--ink-g)}
/* the green paper starts at the second line of the title, wherever it wraps (static position of the pseudo) */
.hero-title .ht-con{color:var(--paper);padding-top:.16em}
.hero-title .ht-con::before{content:"";position:absolute;z-index:-1;left:calc(-1 * var(--gut));width:100vw;height:400vh;margin-top:calc(var(--th) * -.36 - .02em)}
.ht-vs{position:absolute;left:3.6em;top:5.15em;font:800 .135em/1 Manrope,Arial,sans-serif !important;text-transform:lowercase;letter-spacing:0;
  width:2.5em;height:2.5em;border-radius:50%;background:var(--yel-hi);color:var(--ink-g);display:grid !important;place-items:center;z-index:2;
  box-shadow:0 0 0 .22em var(--grn)}
.tagline{margin:26px 0 0;font-size:14px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);max-width:560px;line-height:1.6}
.tagline .acc{color:var(--acc-y)}
.lede{margin:22px 0 0;font-size:18px;line-height:1.6;max-width:520px;color:var(--paper)}
.hero-buy{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;--focus:var(--lime)}
.btn.buy{background:var(--lime);color:var(--ink);box-shadow:0 6px 0 #0f2a19}
.btn.buy:hover{background:var(--paper);box-shadow:0 8px 0 #0f2a19}
.btn.buy:active{box-shadow:0 2px 0 #0f2a19}
.hero-more{min-height:44px;display:inline-flex;align-items:center;gap:10px;color:var(--paper);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-underline-offset:6px}
.hero-cover{grid-column:3;align-self:center;justify-self:center;width:min(100%,400px);position:relative;z-index:1;margin:0 0 0 56px;transform:rotate(2.4deg)}
.hero-cover img,.paste img,.get-cover img{width:100%;height:auto;box-shadow:0 2px 0 rgba(0,0,0,.18),0 30px 50px -18px rgba(8,20,12,.6),0 60px 90px -40px rgba(8,20,12,.5)}
.cover-img{view-transition-name:cover-curiosity-vs-conviction;background:var(--grn)}
/* a strip of tape, like a pasted poster */
.hero-cover::before,.paste::before{content:"";position:absolute;z-index:2;top:-14px;left:50%;width:120px;height:30px;margin-left:-60px;transform:rotate(-3deg);
  background:linear-gradient(180deg,rgba(244,242,234,.78),rgba(226,222,206,.72));box-shadow:0 1px 2px rgba(0,0,0,.18)}

/* ---------- 2 · the war (signature) ---------- */
.war{--tx:24%;height:calc(var(--vh) * 2.6 + var(--th));z-index:1}
.war-pin{position:sticky;top:0;height:var(--vh);overflow:hidden;--y:calc(var(--vh) * .5 - var(--th) * .52);--e:.5}
.war-q{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut)}
.war-text{font-size:clamp(60px,9vw,168px);line-height:.86;color:var(--ink-g)}
.war-text>span{display:block}
.w-a,.w-b{font:800 clamp(14px,1.45vw,22px)/1.3 Manrope,Arial,sans-serif;letter-spacing:.2em}
.w-a{margin-bottom:.5em}.w-b{margin:1.1em 0 .45em}
.w-cur{transform:scale(calc(1 - var(--e) * .5));transform-origin:50% 60%}
.w-con{transform:scale(calc(.84 + var(--e) * .34));transform-origin:50% 40%;color:var(--acc-g)}
.war-src{margin:clamp(26px,4vh,52px) 0 0;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-g)}
.war-sheet{position:absolute;left:0;right:0;top:0;height:calc(100% + var(--th) + 16px);transform:translate3d(0,var(--y),0)}
.war-q-g{bottom:auto;height:var(--vh);transform:translate3d(0,calc(-1 * var(--y)),0)}
.war-q-g .war-text,.war-q-g .war-src{color:var(--paper)}
.war-q-g .w-con{color:var(--acc-y)}
.js .war-pin .war-sheet,.js .war-pin .war-q-g{will-change:transform}

/* ---------- 3 · the elephant in the room ---------- */
.room{position:relative;margin-top:-2px;display:grid;grid-template-columns:var(--gut) minmax(0,1.1fr) minmax(0,.9fr) var(--gut);column-gap:64px;padding:clamp(20px,3vw,50px) 0 calc(var(--th) * 1.1)}
.room-copy{grid-column:2}
.room-title{font-size:clamp(54px,6.4vw,112px);line-height:.9;max-width:11ch}
.room-title .acc{color:var(--acc-y)}
.room-body{margin:28px 0 0;font-size:18px;line-height:1.65;max-width:560px}
.room-body+.room-body{margin-top:16px}
.who{margin-top:14px;display:flex;flex-wrap:wrap;gap:0 .32em;font-size:clamp(48px,5.4vw,96px);line-height:.95}
.room-poster{grid-column:3;align-self:end;justify-self:center;width:min(100%,520px);position:relative;z-index:3;margin-bottom:calc(var(--th) * -1.9);transform:rotate(3.2deg)}
.paste figcaption{margin-top:16px;transform:rotate(-1deg)}

/* ---------- 4 · the eleven lessons ---------- */
.lessons{position:relative}
.ly{--tx:80%;color:var(--ink-g);--focus:var(--ink-g);display:grid;grid-template-columns:var(--gut) minmax(0,1.3fr) minmax(0,.7fr) var(--gut);column-gap:64px;padding-bottom:calc(var(--th) * 1.4)}
.ly-head,.ly .lsn-list{grid-column:2}
.ly-head{padding-top:clamp(40px,5vw,90px)}
.sec-title{font-size:clamp(58px,7vw,128px);line-height:.88}
.ly .sec-title .acc{color:var(--acc-g);white-space:nowrap}
.half{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:30px 0 0;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.lsn-list{list-style:none;margin:28px 0 0;padding:0}
.lsn{display:grid;grid-template-columns:clamp(70px,7vw,118px) minmax(0,1fr);column-gap:22px;padding:24px 0}
.lsn-n{font:800 clamp(52px,5.4vw,92px)/.8 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.01em;color:var(--acc-g)}
.lsn-b h3{font-size:13px}
.lsn-q{margin:14px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.5;font-weight:600;max-width:40ch}
.lsn-ref{margin:10px 0 0;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#3b2c05}
.seam{position:relative;z-index:3;height:0}
.seam .paste{position:absolute;width:clamp(240px,25vw,420px)}
.seam-a .paste{right:calc(var(--gut) + 2vw);transform:translateY(-62%) rotate(-3deg)}
.seam-b .paste{left:calc(var(--gut) + 1vw);transform:translateY(-64%) rotate(2.6deg)}
.lg{--tx:10%;display:grid;grid-template-columns:var(--gut) minmax(0,.9fr) minmax(0,1.1fr) var(--gut);column-gap:72px;align-items:start;padding-bottom:clamp(120px,14vw,220px)}
.lg-head{grid-column:2;grid-row:1;position:sticky;top:48px;padding-top:clamp(30px,4vw,70px)}
.lg .lsn-list{grid-column:3;grid-row:1;margin-top:clamp(200px,24vw,380px)}
.turn p{font-family:'League Gothic','Barlow Condensed',Impact,sans-serif;text-transform:uppercase;font-size:clamp(44px,4.4vw,84px);line-height:.92;margin:0;max-width:15ch}
.turn .acc{color:var(--acc-y)}
.turn footer,.close-quote footer{margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);opacity:.85}
.lg .lsn-n{color:var(--acc-y)}
.lg .lsn-ref{color:#d9e6dc}

/* ---------- 5 · new lines (night falls on the green) ---------- */
.lines{position:relative;display:grid;grid-template-columns:var(--gut) minmax(0,.9fr) minmax(0,1.1fr);column-gap:64px;align-items:center;
  padding:clamp(180px,20vw,330px) 0 clamp(90px,10vw,160px);
  background:linear-gradient(180deg,var(--grn) 0,#264f34 12%,#163222 34%,var(--night) 60%,var(--night) 100%)}
.lines-copy{grid-column:2;grid-row:1}
.lines-copy .sec-title{font-size:clamp(46px,5.2vw,96px);max-width:13ch}
.lines-copy .sec-title .acc{color:var(--acc-y)}
.lines-intro{margin:26px 0 0;font-size:15px;line-height:1.6;color:#cfdcd2;max-width:460px}
.drawn{list-style:none;margin:22px 0 0;padding:0;counter-reset:ln}
.drawn li{counter-increment:ln;display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;align-items:baseline;padding:16px 0}
.drawn li::before{content:"Line " counter(ln);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-y);
  border-top:2px solid var(--acc-y);padding-top:8px}
.drawn p{margin:0;font-size:17px;line-height:1.55;max-width:44ch}
.lines-screen{grid-column:3;grid-row:1;position:relative;margin-right:-9vw}
.lines-screen::before{content:"";position:absolute;inset:-18% -10% -22% -16%;background:radial-gradient(closest-side,rgba(234,167,26,.28),rgba(46,100,64,.18) 55%,transparent);z-index:-1}
.lines-screen img{width:100%;height:auto;box-shadow:0 0 0 10px #0a140e,0 0 0 11px rgba(255,255,255,.08),0 40px 90px -30px rgba(0,0,0,.8);border-radius:4px}

/* ---------- 6 · get the series ---------- */
.get{position:relative;display:grid;grid-template-columns:var(--gut) minmax(0,.85fr) minmax(0,1fr) var(--gut);column-gap:72px;align-items:center;
  padding:clamp(40px,5vw,80px) 0 clamp(110px,10vw,160px);
  background:radial-gradient(ellipse 50% 60% at 28% 46%,rgba(234,167,26,.26),rgba(46,100,64,.2) 50%,transparent 75%),linear-gradient(180deg,var(--night) 0,var(--night) 70%,var(--ink) 100%)}
.get-cover{grid-column:2;position:relative;transform:rotate(-2.2deg);max-width:520px;justify-self:center;width:100%}
.get-cover img{box-shadow:0 2px 0 rgba(0,0,0,.3),0 50px 80px -30px rgba(0,0,0,.85),-30px 70px 120px -60px rgba(234,167,26,.25)}
.get-copy{grid-column:3;max-width:560px;--focus:var(--lime)}
.close-quote p{font-size:clamp(46px,5vw,92px);line-height:.9}
.close-quote .acc{color:var(--acc-y)}
.get-title{margin-top:44px;font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:14px;letter-spacing:.18em;color:var(--paper)}
.price{display:flex;align-items:baseline;gap:14px;margin:14px 0 0}
.price strong{font:800 96px/.9 'Barlow Condensed',Impact,sans-serif}
.price span{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.inc{list-style:none;margin:20px 0 0;padding:0;font-size:16px;line-height:1.5}
.inc li{display:flex;gap:12px;align-items:baseline;padding:4px 0}
.inc li::before{content:"";flex:none;width:8px;height:8px;background:var(--lime);transform:translateY(-1px)}
.buy-lg{margin-top:28px;min-height:64px;font-size:14px;padding:16px 30px}
.note{margin:14px 0 0;font-size:13px;color:var(--mute)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 30px;margin:34px 0 0}
.facts div{margin:0}
.facts dt{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:4px 0 0;font-size:15px;font-weight:600}
.more{display:flex;flex-wrap:wrap;gap:6px 30px;margin:30px 0 0}
.more a{min-height:44px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--paper)}
.more a:hover{color:var(--lime)}

/* ---------- motion (only with JS and no reduced-motion preference) ---------- */
.motion .hero-cover{animation:paste .9s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes paste{from{transform:translateY(-26px) rotate(-4deg);opacity:0}to{transform:rotate(2.4deg);opacity:1}}
.motion .paste.pre img{opacity:0;transform:translateY(24px) scale(.97)}
.motion .paste img{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .war{height:auto}
  .war-pin{position:relative}
}

/* ================= wide ================= */
@media (min-width:1700px){
  .lede,.room-body{font-size:19px}
  .hero{grid-template-columns:var(--gut) minmax(0,1fr) minmax(0,.62fr) var(--gut)}
}

/* ================= tablet ================= */
@media (max-width:1180px){
  :root{--gut:40px}
  .nav{gap:22px}
  .room,.ly,.lg,.lines,.get{column-gap:40px}
  .hero-cover{margin-left:40px}
  .lines{grid-template-columns:var(--gut) minmax(0,1fr) minmax(0,1fr)}
}

/* ================= phone ================= */
@media (max-width:900px){
  :root{--gut:20px;--tw:170vw}
  .nav{display:none}
  .hero{grid-template-columns:var(--gut) minmax(0,1fr) var(--gut)}
  .hero-copy{padding-bottom:0}
  .hero-title{font-size:min(23.5vw,170px);margin-top:16px}
  .tagline{font-size:12px;letter-spacing:.16em}
  .lede{font-size:16px}
  .hero-buy .btn{flex:1 1 100%}
  .hero-cover{grid-column:2;width:66%;justify-self:center;margin:44px 0 calc(var(--th) * 1.2)}

  .war-text{font-size:min(15.5vw,120px)}
  .w-a,.w-b{font-size:12px;letter-spacing:.16em}

  .room{grid-template-columns:var(--gut) minmax(0,1fr) var(--gut);padding-bottom:calc(var(--th) * .9)}
  .room-copy,.room-poster{grid-column:2}
  .room-poster{width:70%;justify-self:end;margin:48px 2% calc(var(--th) * -1.6) 0}
  .room-body{font-size:16px}

  .ly,.lg{grid-template-columns:var(--gut) minmax(0,1fr) var(--gut);column-gap:0}
  .ly-head,.ly .lsn-list,.lg-head,.lg .lsn-list{grid-column:2;grid-row:auto}
  .lg-head{position:static}
  .lg .lsn-list{margin-top:28px}
  .ly-head{padding-top:110px}
  .ly{padding-bottom:calc(var(--th) + 52vw)}
  .lg{padding-top:calc(var(--th) + 56vw)}
  .lsn{grid-template-columns:52px minmax(0,1fr);column-gap:14px;padding:20px 0}
  .lsn-n{font-size:46px}
  .lsn-b h3{font-size:11.5px;white-space:normal}
  .lsn-q{font-size:16px}
  .seam .paste{width:62vw}
  .seam-a .paste{right:auto;left:19vw;transform:translateY(-50%) rotate(-3deg)}
  .seam-b .paste{left:19vw;transform:translateY(-46%) rotate(2.6deg)}
  .lg{padding-bottom:calc(52vw)}

  .lines{grid-template-columns:var(--gut) minmax(0,1fr) var(--gut);padding-top:calc(64vw + 40px);column-gap:0}
  .lines-copy{grid-column:2;grid-row:2}
  .lines-screen{grid-column:1/-1;grid-row:1;margin:0 0 40px 8vw}
  .lines-screen img{border-radius:3px 0 0 3px;box-shadow:0 0 0 6px #0a140e,0 30px 60px -24px rgba(0,0,0,.8)}
  .drawn li{grid-template-columns:1fr;gap:8px}
  .drawn li::before{width:76px}
  .drawn p{font-size:16px}

  .get{grid-template-columns:var(--gut) minmax(0,1fr) var(--gut);column-gap:0;padding-top:20px}
  .get-cover{grid-column:2;width:74%;margin-bottom:56px}
  .get-copy{grid-column:2}
  .price strong{font-size:84px}
  .buy-lg{width:100%}
  .facts{grid-template-columns:1fr 1fr;gap:18px 24px}
  .fgrid{display:block;padding-top:48px}.fnav{margin-top:24px}
}
@media (min-width:600px) and (max-width:900px){
  :root{--tw:130vw}
  .hero-cover{width:52%}
  .seam .paste{width:44vw}
  .seam-a .paste,.seam-b .paste{left:28vw}
  .ly{padding-bottom:calc(var(--th) + 36vw)}
  .lg{padding-top:calc(var(--th) + 40vw);padding-bottom:40vw}
  .lines{padding-top:calc(40vw + 40px)}
  .get-cover{width:56%}
}
@media (max-width:420px){
  .brand{gap:9px}.brand-mark{height:36px;width:36px}.brand-name{font-size:9.5px;letter-spacing:.13em}
  .top{gap:12px}.top .btn.sm{padding:10px 12px;font-size:10px;gap:8px}
}
@media (max-width:350px){
  .top .btn.sm span{display:none}.brand-name{font-size:8.5px}
  .pill{letter-spacing:.06em}
  .crumbs ol{font-size:10px;letter-spacing:.08em;gap:0 8px}.crumbs li+li::before{margin-right:8px}
}

/* Closing glow behind the book actually glows (Aaron 2026-10-26): a warm gold light that breathes behind the cover */
.get-cover::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:175%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,206,92,.62) 0,rgba(234,167,26,.42) 22%,rgba(234,167,26,.16) 48%,rgba(46,100,64,.08) 66%,transparent 78%);
  filter:blur(6px);animation:cvcGlow 4.8s ease-in-out infinite}
.get-cover::after{content:"";position:absolute;z-index:-1;inset:-6%;border-radius:12px;pointer-events:none;
  box-shadow:0 0 60px 16px rgba(255,200,80,.42),0 0 140px 40px rgba(234,167,26,.24);animation:cvcGlowEdge 4.8s ease-in-out infinite}
@keyframes cvcGlow{0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes cvcGlowEdge{0%,100%{opacity:.7}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.get-cover::before,.get-cover::after{animation:none;opacity:.9}}