/* The Autobiography of a Fool · bespoke series page (round 2: full-bleed standard)
   Art direction: the series' white engraving on black (a shelf of books, an
   open book, a fallen crown on a wooden table) and its one orange-red. The
   page is a study at night: the cover stands on the table, the crown names
   the confession, and then the book of Saul's life is opened and read, page
   by page, as you scroll (the signature motion). It ends in the light of the
   open Word and the cover back on the table. Lime stays SMR's own accent
   (buy, focus). */

@view-transition{navigation:auto}

:root{
  --ink:#0b0b0b;--char:#141312;--line:#2b2926;
  --bone:#f3efe7;--mute:#bdb7ae;--dim:#8f8a82;
  --flame:#ff5224;--bar:#fa2a07;--flame-ink:#b2290b;
  --paper:#ebe5d8;--paper2:#e2dac9;--paper-ink:#1b1714;--paper-mute:#4d463e;
  --lime:#b6ff00;
  --disp:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --book:'IM Fell English',Georgia,'Times New Roman',serif;
  --gut:64px;
  --edge:max(var(--gut),calc((100vw - 1640px)/2));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.6}
main{overflow-x:clip}
a{color:inherit}
img{max-width:100%;display:block}
figure,blockquote{margin:0}
cite{font-style:normal}
em{font-style:normal}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:30;background:var(--lime);color:var(--ink);padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.wrap{padding-left:var(--edge);padding-right:var(--edge)}

/* ── shared SMR header (copied from catalog.css) ── */
.top{height:80px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:absolute;top:0;left:0;right:0;z-index:10}
.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(--bone)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--bone)}
.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(--bone);white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}
.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}
.btn:hover{transform:translateY(-2px)}
.btn.green{background:var(--lime);color:var(--ink)}.btn.green:hover{background:var(--bone)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}

/* ── type pieces drawn from the series art ── */
.label{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin:0 0 22px}
.h-big{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.92;margin:0;font-size:clamp(44px,5.4vw,100px)}
.h-big em,.confess-h em{color:var(--flame)}

/* ── buy action ── */
.btn-buy{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:16px 26px 16px 28px;background:var(--lime);color:var(--ink);font:800 14px/1.2 Manrope,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .16s ease,background .15s}
.btn-buy b{font-family:var(--disp);font-size:26px;letter-spacing:0;line-height:1;padding-left:14px;border-left:1px solid rgba(10,10,10,.35)}
.btn-buy:hover{transform:translateY(-2px);background:#fff}

/* ═════════ 1 · HERO: the study at night ═════════ */
.hero{position:relative;min-height:max(780px,100svh);isolation:isolate}
.hero-ground{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(36% 46% at 70% 62%,rgba(255,96,40,.16),transparent 72%),
    linear-gradient(90deg,rgba(11,11,11,.95) 0%,rgba(11,11,11,.84) 32%,rgba(11,11,11,.34) 58%,rgba(11,11,11,.2) 80%,rgba(11,11,11,.5) 100%),
    linear-gradient(180deg,rgba(11,11,11,.7) 0%,transparent 20%,transparent 66%,var(--ink) 100%),
    url(/assets/series/the-autobiography-of-a-fool/scene-2400.webp) 60% 40%/cover no-repeat,
    var(--char)}
.hero-in{position:relative;min-height:inherit;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-rows:auto 1fr;padding-top:96px;padding-bottom:64px;column-gap:32px}
.crumbs{grid-column:1;grid-row:1}
.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(--mute)}
.crumbs li+li::before{content:'/';margin-right:10px;color:#6a665f}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--mute)}
.crumbs a:hover{color:var(--lime)}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;color:var(--bone)}
.hero-copy{grid-column:1;grid-row:2;align-self:center;position:relative;z-index:2;padding-bottom:12px}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 26px;font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.kicker::before{content:'';width:calc(var(--edge) + 70px);height:16px;margin-left:calc(-1 * var(--edge));background:var(--bar)}
.kicker span+span{color:var(--mute)}
.hero-title{font-family:var(--disp);font-weight:800;text-transform:uppercase;margin:0 0 30px;color:#fff;line-height:.8}
.ht-a{display:block;font-size:clamp(28px,3vw,50px);letter-spacing:.03em;line-height:1;margin-bottom:.12em}
.ht-b{display:block;color:var(--flame);font-size:clamp(150px,17.5vw,300px);letter-spacing:-.02em;line-height:.76;margin-left:-.04em;text-shadow:0 10px 60px rgba(0,0,0,.6)}
.hero-line{font-size:clamp(17px,1.3vw,20px);line-height:1.55;max-width:560px;margin:0 0 32px;color:var(--mute)}
.hero-line strong{display:block;color:var(--bone);font-weight:800;font-size:1.12em;line-height:1.4;margin-bottom:8px}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.buy-note{margin:0;font-size:13px;color:var(--mute);max-width:220px;line-height:1.45}
.follow{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:26px;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);text-decoration:none;border-bottom:1px solid rgba(243,239,231,.25)}
.follow:hover{color:var(--bone);border-color:var(--flame)}
/* the book of his life, standing on the table */
.volume{grid-column:2;grid-row:1/3;justify-self:center;align-self:end;position:relative;width:min(27vw,440px);margin-bottom:5vh;transform:perspective(1400px) rotateY(-14deg) rotate(-1.2deg);transform-origin:50% 100%}
.volume::before{content:'';position:absolute;left:-6%;right:-14%;bottom:-5%;height:12%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.85),transparent 72%);z-index:-1}
.volume::after{content:'';position:absolute;top:1.2%;bottom:.4%;right:-9px;width:9px;background:linear-gradient(90deg,#d8d0bf,#b9b09c 40%,#8a8270);transform:skewY(-28deg);transform-origin:0 0}
.volume-img{width:100%;height:auto;view-transition-name:cover-the-autobiography-of-a-fool;box-shadow:0 46px 80px -24px rgba(0,0,0,.92),-30px 10px 90px rgba(255,90,36,.16),0 0 0 1px rgba(255,255,255,.05)}
.bar-b{position:absolute;right:0;bottom:12%;width:min(24vw,380px);height:clamp(16px,1.9vw,30px);background:var(--bar);z-index:0}
.hero-in{z-index:1}

/* ═════════ 2 · THE CONFESSION ═════════ */
.confess{position:relative;padding:150px 0 120px;isolation:isolate}
.crown{position:absolute;right:-4vw;top:-6%;width:min(54vw,820px);z-index:-1;opacity:.9;
  -webkit-mask-image:radial-gradient(48% 46% at 52% 54%,#000 52%,transparent 100%);mask-image:radial-gradient(48% 46% at 52% 54%,#000 52%,transparent 100%)}
.crown img{width:100%;height:auto}
.confess-in{position:relative}
.confess-h{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;margin:0 0 40px;font-size:clamp(54px,7vw,128px);max-width:11.5em;text-shadow:0 4px 40px rgba(0,0,0,.7)}
.verse-full{font-family:var(--book);font-style:italic;font-size:clamp(19px,1.5vw,23px);line-height:1.5;color:var(--mute);max-width:660px;margin:0 0 70px}
.verse-full cite,.morgan cite{display:block;margin-top:12px;font-family:var(--disp);font-style:normal;font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.confess-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;max-width:980px}
.confess-cols p{margin:0;font-size:17px;line-height:1.65;color:var(--mute)}
.morgan span{display:block;font-family:var(--book);font-size:clamp(26px,2.2vw,34px);line-height:1.25;color:var(--bone)}

/* ═════════ 3 · SEVEN MISTAKES: the art's orange as a whole screen ═════════ */
.story{position:relative;isolation:isolate}
.seven{position:relative;isolation:isolate;overflow:hidden;min-height:max(720px,100svh);display:flex;align-items:center;
  background:linear-gradient(180deg,var(--ink) 0,#4a0f04 6vh,var(--bar) 22vh,var(--bar) 100%);padding:24vh 0 12vh}
.seven-art{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-1;mix-blend-mode:screen;opacity:.36;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 22%,#000 48%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,transparent 22%,#000 48%,#000 100%)}
.seven-in{position:relative;width:100%}
.seven-k{color:var(--ink)}
.seven-h{margin:0;font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.84;color:var(--ink)}
.seven-h .s1{display:block;font-size:15.6vw;letter-spacing:-.012em;white-space:nowrap;margin-left:-.045em}
.seven-h .s2{display:block;margin-top:.5em;font-size:5.4vw;letter-spacing:.005em;color:var(--bone);line-height:.95}
.seven-h .s3{display:block;font-size:9.3vw;letter-spacing:-.01em;margin-left:-.03em}
.seven-bars{display:flex;gap:1.3vw;margin:6vh 0 0}
.seven-bars i{display:block;width:9vw;height:max(10px,1.4vw);background:var(--ink)}

/* ═════════ THE BOOK OF HIS LIFE (signature) ═════════ */
.track{position:relative;background:linear-gradient(180deg,var(--bar) 0,#a51b04 30%,#3a0c03 66%,var(--ink) 100%)}
.stage{position:relative;padding:40px 24px 140px}

/* pages, shared by every mode; --u is the page's own unit */
.page{position:relative;overflow:hidden;background:var(--paper);color:var(--paper-ink);container-type:inline-size;--u:1cqw}
.plate{background:#0c0c0c}
.plate img{width:100%;height:100%;object-fit:cover}
.page::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3}
.front::after,.base::after{background:linear-gradient(90deg,rgba(0,0,0,.34) 0,rgba(0,0,0,.08) 5%,transparent 12%)}
.back::after{background:linear-gradient(270deg,rgba(0,0,0,.34) 0,rgba(0,0,0,.08) 5%,transparent 12%)}
.cover-page::after{background:linear-gradient(90deg,rgba(255,255,255,.12) 0,rgba(0,0,0,.3) 1.6%,transparent 5%)}
.chap{background:
  radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.35),transparent 60%),
  linear-gradient(180deg,var(--paper) 0,var(--paper2) 100%);
  display:flex;flex-direction:column;padding:6.5% 8% 6.5% 9.5%}
.back.chap{padding:6.5% 9.5% 6.5% 8%}
.rh{display:flex;justify-content:space-between;gap:12px;margin:0 0 calc(var(--u)*3.6);font-family:var(--disp);font-weight:600;font-size:max(11px,calc(var(--u)*2.2));letter-spacing:.24em;text-transform:uppercase;color:var(--paper-mute);border-bottom:1px solid rgba(27,23,20,.18);padding-bottom:calc(var(--u)*1.5)}
.mk{display:flex;flex-direction:column}
.num{margin:0;font-family:var(--disp);font-weight:800;font-size:max(56px,calc(var(--u)*32));line-height:.76;color:var(--flame-ink);letter-spacing:-.015em;margin-left:-.03em}
/* the mistake is the poster on every right-hand page */
.mis{margin:calc(var(--u)*3) 0 0;padding-bottom:calc(var(--u)*3.2);border-bottom:2px solid var(--flame-ink);font-family:var(--disp);font-weight:800;font-size:max(30px,calc(var(--u)*13.8));line-height:.86;text-transform:uppercase;letter-spacing:-.005em;color:var(--paper-ink);overflow-wrap:break-word;hyphens:manual}
.mis span{display:block;font-weight:600;font-size:max(12px,calc(var(--u)*2.6));line-height:1.2;letter-spacing:.26em;color:var(--flame-ink);margin-bottom:calc(var(--u)*1.6)}
.chap h3{margin:auto 0 calc(var(--u)*2.8);padding-top:calc(var(--u)*3.4);font-family:var(--book);font-weight:400;font-size:max(21px,calc(var(--u)*6));line-height:1.04;letter-spacing:-.005em}
.chap h3 small{display:block;margin-top:calc(var(--u)*.9);font-style:italic;font-size:.6em;line-height:1.2;color:var(--paper-mute)}
.lead{margin:0 0 calc(var(--u)*3);font-family:var(--book);font-size:max(15px,calc(var(--u)*3.55));line-height:1.42}
.vs{margin:0;padding-left:calc(var(--u)*3);border-left:2px solid var(--flame-ink)}
.vs p{margin:0;font-family:var(--book);font-style:italic;font-size:max(15px,calc(var(--u)*3.55));line-height:1.38}
.vs cite,.ref{display:block;margin-top:calc(var(--u)*1.2);font-family:var(--disp);font-weight:600;font-size:max(11px,calc(var(--u)*2.3));letter-spacing:.2em;text-transform:uppercase;color:var(--flame-ink)}
.end .num{font-size:max(60px,calc(var(--u)*40))}
.end h3{margin:calc(var(--u)*4) 0 calc(var(--u)*4);padding-top:0;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:max(36px,calc(var(--u)*14.5));line-height:.86;letter-spacing:-.005em}
.mis-k{display:block;font-weight:600;font-size:.2em;line-height:1.2;letter-spacing:.26em;color:var(--flame-ink);margin-bottom:calc(var(--u)*1.8)}
.end .lead{margin-top:auto;font-size:max(17px,calc(var(--u)*5));margin-bottom:calc(var(--u)*1.5)}
.end .ref{margin:0}
.plea{margin:calc(var(--u)*5) 0 0;font-family:var(--book);font-style:italic;font-size:max(15px,calc(var(--u)*4));line-height:1.35;color:var(--paper-mute);border-top:1px solid rgba(27,23,20,.2);padding-top:calc(var(--u)*2.6)}
/* Parts IV–VI have no lesson art: their plates are crops of the series art, typeset like Parts I–III */
.typeset img{filter:brightness(.92)}
.pc{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:0 9% 19%;
  background:linear-gradient(180deg,transparent 30%,rgba(8,8,8,.55) 62%,rgba(8,8,8,.8) 100%)}
.pc::before,.pc::after{content:'';position:absolute;background:var(--bar)}
.pc::before{left:0;top:9%;width:29%;height:4.2%}
.pc::after{right:0;top:87%;width:29%;height:4.2%}
.pc-n{display:block;font-family:var(--disp);font-weight:800;font-size:max(70px,calc(var(--u)*36));line-height:.78;color:var(--flame);letter-spacing:-.01em;margin-bottom:calc(var(--u)*3)}
.pc-t{display:block;font-family:var(--disp);font-weight:600;font-size:max(13px,calc(var(--u)*3.7));line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:#fff;max-width:20em}
.runner{display:none}

/* static book (no JS, reduced motion, short screens): open spreads laid on the orange that darkens */
.book{display:grid;grid-template-columns:repeat(2,minmax(0,min(46vw,660px)));justify-content:center;row-gap:56px}
.leaf{display:contents}
.book .plate{aspect-ratio:4/5}
.book .page{box-shadow:0 34px 60px -26px rgba(0,0,0,.9)}
.book .cover-page{grid-column:1/-1;justify-self:center;width:calc(50% - 0px)}

/* flip book (desktop, motion allowed): the open book fills the screen; scroll turns the leaves */
html.fool-flip .track{height:calc(7 * 100svh + 100svh);background:none}
html.fool-flip .stage{position:sticky;top:0;height:100svh;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding-bottom:18px;overflow:hidden;isolation:isolate;background:var(--bar);
  --ph:min(calc(100svh - 82px),calc((100vw - 40px) / 1.6));--pw:calc(var(--ph) * .8)}
html.fool-flip .stage::before,html.fool-single .stage::before{content:'';position:absolute;inset:0;z-index:-1;mix-blend-mode:screen;opacity:.3;background:url(/assets/series/the-autobiography-of-a-fool/shelf-wide-1600.webp) center 30%/cover no-repeat}
html.fool-flip .book{display:block;position:relative;width:calc(var(--pw) * 2);height:var(--ph);row-gap:0;transform:translateX(calc((var(--open,0) - 1) * var(--pw) / 2))}
html.fool-flip .leaf{display:block;position:absolute;left:50%;top:0;width:var(--pw);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform}
html.fool-flip .book .page{position:absolute;inset:0;aspect-ratio:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:none}
html.fool-flip .book::before{content:'';position:absolute;top:2%;bottom:-1%;right:0;left:calc(50% - var(--pw) * var(--open,0));box-shadow:0 40px 90px -10px rgba(0,0,0,.85);z-index:-1}
html.fool-flip .book .back{transform:rotateY(180deg)}
/* explicit face switch (opacity keeps the text in the accessibility tree): WebKit does not always honour backface-visibility here */
html.fool-flip .leaf .back,html.fool-flip .leaf.turned .front{opacity:0}
html.fool-flip .leaf.turned .back{opacity:1}
html.fool-flip .book .base{inset:auto;left:50%;top:0;width:var(--pw);height:var(--ph);box-shadow:2px 0 0 #d7cfbf,4px 1px 0 #bdb4a2,6px 2px 0 #8f8776}
html.fool-flip .book .cover-page{width:auto;justify-self:stretch;grid-column:auto}
html.fool-flip .page::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.12));opacity:var(--sh,0)}
/* the flip page keeps a fixed 4:5 shape, so its type scales with the page alone (no px floors) */
html.fool-flip .rh{font-size:calc(var(--u)*2.2)}html.fool-flip .mis span{font-size:calc(var(--u)*2.6)}html.fool-flip .lead,html.fool-flip .vs p{font-size:calc(var(--u)*3.55)}html.fool-flip .vs cite,html.fool-flip .ref{font-size:calc(var(--u)*2.3)}html.fool-flip .chap h3{font-size:calc(var(--u)*6)}html.fool-flip .mis{font-size:calc(var(--u)*13.8)}html.fool-flip .num{font-size:calc(var(--u)*32)}
html.fool-flip .end .num{font-size:calc(var(--u)*40)}html.fool-flip .end h3{font-size:calc(var(--u)*14.5)}html.fool-flip .end .lead{font-size:calc(var(--u)*5)}html.fool-flip .plea{font-size:calc(var(--u)*4)}
html.fool-flip .runner,html.fool-single .runner{display:flex;align-items:center;gap:20px;font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);min-height:28px;transition:color .4s}
html.fool-flip .stage.lit .runner,html.fool-single .stage.lit .runner{color:var(--ink)}
.tally{display:flex;gap:6px}
.tally i{display:block;width:26px;height:7px;background:rgba(243,239,231,.22);transition:background .25s}
.stage.lit .tally i{background:rgba(11,11,11,.22)}
.tally i.on,.stage.lit .tally i.on{background:var(--bone)}
.stage.lit .tally i.on{background:var(--ink)}

/* single-page book (phone, motion allowed): each full-screen page swings away from the spine */
html.fool-single .track{height:calc(14 * 62svh + 100svh);background:none}
html.fool-single .stage{position:sticky;top:0;height:100svh;padding:0 0 14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;overflow:hidden;isolation:isolate;background:var(--g,var(--bar));
  --pw:min(100vw,560px);--ph:min(calc(100svh - 56px),calc(var(--pw) * 2))}
html.fool-single .book{display:block;position:relative;width:var(--pw);height:var(--ph);row-gap:0}
html.fool-single .book .page{position:absolute;inset:0;aspect-ratio:auto;transform-origin:0 50%;will-change:transform,opacity;box-shadow:0 28px 50px -20px rgba(0,0,0,.95);container-type:size;--u:min(1cqw,.55cqh)}
html.fool-single .book .cover-page{width:auto;justify-self:stretch;grid-column:auto}
html.fool-single .art{background:var(--g,var(--bar));box-shadow:none}
html.fool-single .art img{object-fit:contain;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
html.fool-single .back::after{background:linear-gradient(90deg,rgba(0,0,0,.34) 0,rgba(0,0,0,.08) 5%,transparent 12%)}
html.fool-single .chap,html.fool-single .back.chap{padding:7% 7% 6% 8%}
html.fool-single .rh{font-size:calc(var(--u)*2.9);margin-bottom:calc(var(--u)*5)}
html.fool-single .num{font-size:calc(var(--u)*50)}
html.fool-single .mis{font-size:calc(var(--u)*17)}
html.fool-single .mis span{font-size:calc(var(--u)*3.3)}
html.fool-single .chap h3{font-size:calc(var(--u)*8.2)}
html.fool-single .lead,html.fool-single .vs p{font-size:calc(var(--u)*4.6)}
html.fool-single .vs cite,html.fool-single .ref{font-size:calc(var(--u)*3)}
html.fool-single .end .num{font-size:calc(var(--u)*40)}
html.fool-single .end h3{font-size:calc(var(--u)*16)}
html.fool-single .end .lead{font-size:calc(var(--u)*5.6)}
html.fool-single .plea{font-size:calc(var(--u)*4.8)}
html.fool-single .pc-n{font-size:calc(var(--u)*44)}
html.fool-single .pc-t{font-size:calc(var(--u)*4.4)}
html.fool-single .pc{padding-bottom:30%}
html.fool-single .pc::before{top:16%}
html.fool-single .pc::after{top:80%}
html.fool-single .runner{font-size:14px;gap:14px;letter-spacing:.16em}

/* ═════════ 4 · THE TRIUMPH OF WISDOM: dark into paper ═════════ */
.wisdom{position:relative;isolation:isolate;background:var(--paper);color:var(--paper-ink)}
.openbook{position:relative;width:100%;height:min(92svh,64vw);overflow:hidden;background:var(--ink);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 96%);mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 96%)}
.openbook img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.wis-top{position:relative;margin-top:-8svh}
.wisdom .label{color:var(--paper-mute)}
.wis-h{margin:0;font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.84;letter-spacing:-.015em}
.wis-h span,.wis-h em{display:block;white-space:nowrap;font-size:12.2vw;margin-left:-.04em}
.wis-h em{color:var(--flame-ink)}
.wis-pair{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:7vw;align-items:end;margin-top:7vh}
.wis-lede{margin:0;font-size:clamp(18px,1.45vw,23px);line-height:1.6;color:var(--paper-mute)}
.wis-ask{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(34px,3.6vw,64px);line-height:.95;text-transform:uppercase}
.wis-list{position:relative;isolation:isolate;overflow:hidden;padding:10vh 0 8vh}
.wis-ink{position:absolute;right:-6vw;top:4%;height:96%;width:auto;max-width:none;z-index:-1;filter:invert(1);mix-blend-mode:multiply;opacity:.2;
  -webkit-mask-image:radial-gradient(50% 48% at 55% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(50% 48% at 55% 50%,#000 45%,transparent 100%)}
.wis-list ol{list-style:none;margin:0;counter-reset:w}
.wis-list li{counter-increment:w;display:grid;grid-template-columns:11vw minmax(0,1fr);column-gap:3vw;align-items:start;padding:5vh 0 6vh;border-top:2px solid rgba(27,23,20,.85)}
.wis-list li::before{content:counter(w);grid-row:1/3;font-family:var(--disp);font-weight:800;font-size:15vw;line-height:.74;color:var(--flame-ink);letter-spacing:-.02em}
.wis-list blockquote{font-family:var(--book);font-style:italic;font-size:clamp(30px,4.3vw,80px);line-height:1.06;max-width:19em}
.wis-list p{margin:2.4vh 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--paper-mute)}
.wis-list cite{display:inline-block;margin-left:10px;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--flame-ink)}

/* ═════════ 5 · THE CLOSE: orange poster, then the cover in the dark ═════════ */
.close{position:relative;isolation:isolate;background:var(--ink);margin-top:-1px;padding-bottom:110px}
.close-poster{position:relative;isolation:isolate;overflow:hidden;min-height:max(760px,112svh);display:flex;align-items:center;padding:34svh 0 36svh;
  background:linear-gradient(180deg,var(--paper) 0,#f3a07f 10svh,var(--bar) 28svh,var(--bar) 66%,#5a1204 86%,var(--ink) 100%)}
.close-art{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;z-index:-1;mix-blend-mode:screen;opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,transparent 18%,#000 40%,#000 70%,transparent 90%);mask-image:linear-gradient(180deg,transparent 18%,#000 40%,#000 70%,transparent 90%)}
.close-poster .wrap{position:relative;width:100%}
.close-k{color:var(--ink)}
.close-h{margin:0;font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.86;color:var(--ink)}
.close-h span{display:block;font-size:10.6vw;letter-spacing:-.015em;white-space:nowrap;margin-left:-.04em}
.close-h em{display:block;margin-top:.12em;font-size:6.5vw;color:var(--bone);letter-spacing:-.005em;white-space:nowrap}
.close-src{margin:26px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
.close-in{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:6vw;align-items:end;margin-top:-30svh}
.stand{justify-self:center;width:min(34vw,560px);transform:perspective(1400px) rotateY(12deg) rotate(1deg);transform-origin:50% 100%;position:relative}
.stand::before{content:'';position:absolute;left:-14%;right:-6%;bottom:-5%;height:12%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.9),transparent 72%);z-index:-1}
.stand img{width:100%;height:auto;box-shadow:0 50px 90px -20px rgba(0,0,0,.95),30px 0 120px rgba(255,90,36,.3)}
.close-copy{padding-bottom:10px}
.price{margin:0 0 26px;display:flex;align-items:flex-end;gap:18px}
.price strong{font-family:var(--disp);font-weight:800;font-size:clamp(130px,15vw,280px);line-height:.74;color:#fff;letter-spacing:-.02em}
.price span{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-bottom:6px}
.buy-note{margin:14px 0 40px;font-size:13px;color:var(--mute);line-height:1.45}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;margin:0;max-width:620px}
.facts div{padding:14px 0;border-top:1px solid var(--line)}
.facts dt{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.facts dd{margin:4px 0 0;font-size:15px;color:var(--bone)}
.facts dd a{display:inline-flex;align-items:center;min-height:44px;color:var(--bone);text-decoration-color:var(--flame);text-underline-offset:4px}
.facts dd a:hover{color:var(--lime)}
.next{display:flex;flex-wrap:wrap;gap:24px 80px;margin-top:120px}
.next-a{display:flex;flex-direction:column;text-decoration:none;min-height:44px}
.next-a .label{margin:0 0 6px;font-size:13px}
.next-t{font-family:var(--disp);font-weight:800;font-size:48px;text-transform:uppercase;line-height:1;color:var(--bone)}
.next-a:hover .next-t{color:var(--flame)}

/* ── footer (copied from catalog.css) ── */
.foot{border-top:1px solid var(--line);padding-bottom:40px}
.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(--bone)}
.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)}

/* ── arrival and reveals (JS adds .fool-anim when motion is allowed) ── */
html.fool-anim .volume-img{animation:settle 1.1s cubic-bezier(.2,.8,.2,1) both}
html.fool-anim .bar-b{animation:barin .9s .25s cubic-bezier(.2,.8,.2,1) both}
html.fool-anim .kicker::before{animation:barin .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:0 50%}
@keyframes settle{from{opacity:0;transform:translateY(-26px) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes barin{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bar-b{transform-origin:100% 50%}
html.fool-anim [data-in]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
html.fool-anim [data-in].in{opacity:1;transform:none}
html.fool-anim .seven-bars i{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
html.fool-anim .seven-bars.in i{transform:none}
html.fool-anim .seven-bars.in i:nth-child(2){transition-delay:.06s}html.fool-anim .seven-bars.in i:nth-child(3){transition-delay:.12s}html.fool-anim .seven-bars.in i:nth-child(4){transition-delay:.18s}html.fool-anim .seven-bars.in i:nth-child(5){transition-delay:.24s}html.fool-anim .seven-bars.in i:nth-child(6){transition-delay:.3s}html.fool-anim .seven-bars.in i:nth-child(7){transition-delay:.36s}

/* ── tablet ── */
@media (max-width:1100px) and (min-width:901px){
  .hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .volume{width:min(32vw,440px)}
}

/* ── phone & small tablet: its own composition ── */
@media (max-width:900px){
  :root{--gut:20px}
  .nav{display:none}
  .top{gap:12px}
  .hero{min-height:0}
  .hero-ground{background:
    radial-gradient(60% 30% at 50% 30%,rgba(255,96,40,.18),transparent 72%),
    linear-gradient(180deg,rgba(11,11,11,.72) 0%,rgba(11,11,11,.25) 16%,rgba(11,11,11,.3) 38%,rgba(11,11,11,.92) 58%,var(--ink) 70%),
    url(/assets/series/the-autobiography-of-a-fool/scene-tall-1100.webp) 50% 0/100% auto no-repeat,var(--ink)}
  .hero-in{display:flex;flex-direction:column;padding-top:84px;padding-bottom:30px}
  .volume{order:2;width:min(60vw,360px);margin:14px auto 0;align-self:center;transform:perspective(1200px) rotateY(-12deg) rotate(-1deg)}
  .hero-copy{order:3;margin-top:44px;padding-bottom:0}
  .kicker{font-size:14px;gap:6px 12px}
  .kicker::before{width:calc(var(--edge) + 40px);height:12px}
  .ht-a{font-size:min(7.4vw,40px)}
  .ht-b{font-size:min(37vw,230px)}
  .hero-line{font-size:17px}
  .buy{display:block}
  .btn-buy{width:100%;justify-content:space-between}
  .buy-note{max-width:none;margin-top:12px}
  .bar-b{bottom:auto;top:calc(84px + min(60vw,360px) * .92);width:28vw;height:14px}
  .confess{padding:110px 0 120px}
  .crown{width:118vw;right:-40vw;top:-2%;opacity:.55}
  .confess-h{font-size:min(14vw,76px)}
  .verse-full{font-size:18px;margin-bottom:46px}
  .confess-cols{display:block}
  .confess-cols p+p{margin-top:26px}
  .seven{min-height:100svh;padding:22svh 0 10svh;align-items:flex-end}
  .seven-art{object-position:30% 50%;opacity:.4}
  .seven-h .s1{font-size:17.4vw;white-space:normal;line-height:.82}
  .seven-h .s2{font-size:8.6vw;margin-top:.45em}
  .seven-h .s3{font-size:13.4vw;line-height:.86}
  .seven-bars{gap:2vw}.seven-bars i{width:11vw;height:10px}
  .book{grid-template-columns:minmax(0,min(100%,520px));row-gap:26px}
  .book .cover-page{width:100%}
  .back::after{background:linear-gradient(90deg,rgba(0,0,0,.3) 0,transparent 10%)}
  .back.chap{padding:7% 7% 6.5% 8%}
  .chap{padding:7% 7% 6.5% 8%}
  .stage{padding:20px 20px 100px}
  .tally{gap:4px}.tally i{width:14px;height:6px}
  .openbook{height:68svh}
  .openbook img{object-position:50% 50%}
  .wis-top{margin-top:-6svh}
  .wis-h span,.wis-h em{font-size:12.6vw}
  .wis-pair{display:block;margin-top:44px}
  .wis-ask{margin-top:36px;font-size:min(10vw,52px)}
  .wis-list{padding:60px 0 26svh}
  .wis-ink{right:-40vw;opacity:.16}
  .wis-list li{grid-template-columns:20vw minmax(0,1fr);column-gap:4vw;padding:34px 0 40px}
  .wis-list li::before{font-size:22vw}
  .wis-list blockquote{font-size:min(7.4vw,40px);line-height:1.12}
  .close-poster{min-height:100svh;padding:28svh 0 40svh;align-items:flex-start}
  .close-art{object-position:20% 60%}
  .close-h span{font-size:16.4vw;white-space:normal;line-height:.84}
  .close-h em{font-size:11vw;white-space:normal;line-height:.9;margin-top:.25em}
  .close-in{display:block;margin-top:-30svh}
  .stand{width:min(72vw,420px);margin:0 auto}
  .close-copy{padding-top:64px}
  .price strong{font-size:min(40vw,190px)}
  .close-copy .btn-buy{width:100%;justify-content:space-between}
  .buy-note{margin-bottom:34px}
  .facts{grid-template-columns:1fr}
  .next{margin-top:70px}
  .next-t{font-size:34px}
  .fgrid{display:block;padding-top:48px}.fnav{margin-top:24px}
}
@media (max-width:420px){
  .brand{gap:9px}.brand-mark{height:36px;width:36px}.brand-name{font-size:9.5px;letter-spacing:.13em}
  .top .btn.sm{padding:10px 12px;font-size:10px;gap:8px}
  .btn-buy{padding:14px 18px 14px 20px;font-size:13px}
  .btn-buy b{font-size:23px}
}
@media (max-width:350px){.top .btn.sm span{display:none}.brand-name{font-size:8.5px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* ═════════ Saul's crown, set aside: the series' own engraved crown, cut from the art,
   in the bottom-right of the buy screen. Gold light sweeps through its engraving
   (the crown is the mask; a warm gold band travels behind it), and faint glints
   run along a few of its strokes. Plays only while in view. ═════════ */
.sc{--crown:url(/assets/series/the-autobiography-of-a-fool/crown-960.webp);
  position:absolute;right:calc(var(--edge) - 1vw);bottom:20px;width:clamp(230px,21vw,430px);aspect-ratio:1001/918;z-index:0}
.sc-tilt{position:absolute;inset:0;transform:rotate(-6deg);transform-origin:50% 80%}
.sc-tilt::before{content:'';position:absolute;left:4%;right:4%;bottom:-3%;height:22%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.85),transparent 70%);transform:rotate(6deg)}
.sc-ink,.sc-sheen,.sc-flare,.sc-glints{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;
  -webkit-mask:var(--crown) center/100% 100% no-repeat;mask:var(--crown) center/100% 100% no-repeat}
.sc-ink{background:#b9b2a5;transition:background-color .6s ease}
.sc-glow{position:absolute;inset:0;filter:drop-shadow(0 0 7px rgba(242,170,62,.42))}
.sc-sheen::before,.sc-flare::before{content:'';position:absolute;top:-30%;bottom:-30%;left:-100%;width:300%}
/* static gold sheen: reduced motion, no JS, or before the section is in view */
.sc-sheen::before{background:linear-gradient(118deg,transparent 0 32%,rgba(226,160,62,.32) 41%,rgba(255,222,150,.62) 48.5%,rgba(226,160,62,.32) 56%,transparent 65% 100%)}
.sc-flare,.sc-glints{display:none}
/* live: a narrow band of gold light travels through the engraving every few seconds */
.sc-live .sc-sheen::before{transform:translateX(-36%);
  background:linear-gradient(112deg,transparent 0 42.5%,rgba(214,146,52,.5) 45.6%,#f3c162 48.3%,#fff3d2 50%,#f3c162 51.7%,rgba(214,146,52,.5) 54.4%,transparent 57.5% 100%);
  animation:sc-sweep 5.2s cubic-bezier(.45,.05,.35,1) .4s infinite;animation-play-state:paused}
.sc-live .sc-glints{display:block}
.sc-glints path{fill:none;stroke:#ffd27a;stroke-width:16;stroke-linecap:round;stroke-dasharray:13 400;stroke-dashoffset:14;opacity:0;
  animation:sc-glint 8.4s linear infinite;animation-play-state:paused}
.sc-glints path:nth-child(2){animation-delay:1.4s}
.sc-glints path:nth-child(3){animation-delay:2.8s;animation-duration:9.1s}
.sc-glints path:nth-child(4){animation-delay:4.2s;animation-duration:9.1s}
.sc-glints path:nth-child(5){animation-delay:5.6s}
.sc-glints path:nth-child(6){animation-delay:7s}
.sc.is-on .sc-sheen::before,.sc.is-on .sc-glints path{animation-play-state:running}
@keyframes sc-sweep{0%{transform:translateX(-36%)}56%,100%{transform:translateX(36%)}}
@keyframes sc-glint{0%{stroke-dashoffset:14;opacity:0}5%{opacity:.95}34%{opacity:.95}40%,100%{stroke-dashoffset:-100;opacity:0}}
/* desktop hover: a brighter, wider pass of light */
@media (hover:hover) and (pointer:fine){
  .sc-live .sc-flare{display:block}
  .sc-flare::before{transform:translateX(-36%);
    background:linear-gradient(112deg,transparent 0 39%,rgba(232,160,58,.6) 44%,#ffd781 47.5%,#fffaf0 50%,#ffd781 52.5%,rgba(232,160,58,.6) 56%,transparent 61% 100%)}
  .sc-live .sc:hover .sc-flare::before{animation:sc-flare 1.6s cubic-bezier(.42,.1,.3,1) 1 both}
  .sc-live .sc:hover .sc-ink{background-color:#d6cbb5}
}
@keyframes sc-flare{0%{transform:translateX(-36%)}100%{transform:translateX(36%)}}
/* narrow desktop: the link row reaches the right edge, so the crown takes its own row, right-aligned above it */
@media (max-width:1239.98px) and (min-width:901px){
  .sc{position:relative;right:auto;bottom:auto;width:min(24vw,270px);margin:72px calc(var(--edge) - 1vw) -60px auto}
}
/* wide screens: a little more dark under the links so the crown never meets the facts */
@media (min-width:1400px){
  .close:has(.sc){padding-bottom:170px}
  .sc{width:min(21vw,360px)}
}
/* phone: its own place, centred above the bottom links; just the timed shimmer */
@media (max-width:900px){
  .sc{--crown:url(/assets/series/the-autobiography-of-a-fool/crown-560.webp);position:relative;right:auto;bottom:auto;width:min(62vw,300px);margin:84px auto -20px}
}
@media (prefers-reduced-motion:reduce){
  .sc-sheen::before{transform:none !important;
    background:linear-gradient(118deg,transparent 0 32%,rgba(226,160,62,.32) 41%,rgba(255,222,150,.62) 48.5%,rgba(226,160,62,.32) 56%,transparent 65% 100%) !important}
  .sc-flare,.sc-glints{display:none !important}
}