@font-face{font-family:Inter;src:url('/assets/Inter-Regular-954b1626386a.ttf') format('truetype');font-display:swap;font-weight:400}@font-face{font-family:Inter;src:url('/assets/Inter-Bold-f8227d14d418.ttf') format('truetype');font-display:swap;font-weight:700}@font-face{font-family:Zilla;src:url('/assets/ZillaSlab-Bold-4ec3a04a4eef.ttf') format('truetype');font-display:swap;font-weight:700}
:root{--ink:#17283c;--paper:#fff9ed;--cream:#f7edda;--red:#811c2d;--gold:#e7b853;--line:#cdbda0;--muted:#4c5864;--white:#fffdf8}*{box-sizing:border-box}html{scroll-padding-top:1rem}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.65 Inter,Arial,sans-serif}a{color:#752238;text-underline-offset:.2em}a:hover{text-decoration-thickness:3px}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{touch-action:manipulation}button,.button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.65rem 1.15rem;border:2px solid var(--red);border-radius:5px;background:var(--red);color:white;font-weight:700;text-decoration:none;line-height:1.35;text-align:center}button.secondary,.button.secondary{background:transparent;color:var(--red)}button:disabled{opacity:.6;cursor:not-allowed}button:hover:not(:disabled),.button:hover{filter:brightness(1.12)}:focus-visible{outline:3px solid #006e9c;outline-offset:4px}h1,h2,h3{font-family:Zilla,Georgia,serif;line-height:1.12;margin:0 0 1rem}h1{font-size:clamp(2.35rem,5vw,4rem)}h2{font-size:clamp(1.8rem,3.8vw,2.6rem)}h3{font-size:1.5rem}p{margin:.4rem 0 1.2rem}img{max-width:100%;height:auto}hr{border:0;border-top:1px solid var(--line);margin:2rem 0}.skip{position:absolute;top:-100px;left:1rem;background:white;color:var(--ink);padding:1rem;z-index:100}.skip:focus{top:1rem}.site-header{background:var(--ink);color:white;border-bottom:3px solid var(--gold)}.nav{max-width:1280px;margin:auto;padding:.75rem clamp(1rem,3vw,2.2rem);display:flex;gap:1.3rem;align-items:center;justify-content:space-between}.brand{font:700 1.4rem/1.1 Zilla,Georgia,serif;color:#fff4db;text-decoration:none}.brand span{display:block;font:400 .7rem/1.8 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}.nav-links{display:flex;flex-wrap:wrap;gap:.8rem 1.25rem;align-items:center}.nav-links>a{color:white;text-decoration:none;font-size:.95rem}.nav-links>a:last-child{background:var(--gold);color:var(--ink);padding:.55rem .85rem;border-radius:3px;font-weight:700}.nav-links>a:hover{text-decoration:underline}.hero{background:linear-gradient(90deg,rgba(54,5,17,.92),rgba(54,5,17,.68)),url('/assets/curtain-web-729f9ba603df.jpg') center/cover;color:#fff9eb}.hero-inner{max-width:1280px;margin:auto;padding:clamp(2rem,5vw,4.5rem) clamp(1.2rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(230px,.7fr);align-items:center;gap:clamp(1.5rem,5vw,4.5rem)}.eyebrow{font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:.85rem;color:var(--gold)}.hero h1{font-size:clamp(2.7rem,4.6vw,4.5rem);max-width:12ch}.hero .book-title{font-weight:700;font-size:1.15rem;max-width:37ch}.hero .intro{max-width:54ch}.availability{font-weight:700;color:#f9d988;margin:.6rem 0}.hero .button{background:var(--gold);border-color:var(--gold);color:var(--ink)}.hero a:not(.button){color:#fff6df}.hero .micro{font-size:.88rem;max-width:45ch;margin-top:.6rem}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.3rem;margin:1rem 0}.book-stage{perspective:1200px;display:flex;justify-content:center;padding:1.2rem}.book-object{position:relative;width:min(100%,310px);transform:rotateY(-11deg) rotateZ(2deg);filter:drop-shadow(16px 20px 18px rgba(0,0,0,.4))}.book-object .front{display:block;width:100%;border-radius:1px 5px 5px 1px}.book-object .spine{position:absolute;left:0;top:0;height:100%;width:9.6%;object-fit:fill;transform-origin:left;transform:rotateY(-88deg)}.panel-run{max-width:1280px;margin:auto;background:var(--cream)}.art-panel{margin:0;border-bottom:1px solid var(--line)}.art-panel>img{display:block;width:100%;height:auto}.panel-actions{padding:.75rem clamp(1rem,3vw,2rem) 1rem;display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center;background:#fff9ee}.panel-actions a{font-weight:700}.panel-actions details{margin-left:auto;font-size:.9rem;flex-basis:fit-content}.panel-actions details[open]{flex-basis:100%}.panel-actions summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--muted)}.panel-actions details p{max-width:72ch}.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}.news{background:var(--ink);color:var(--paper);padding:3rem max(1.2rem,calc((100vw - 1100px)/2));border-top:5px solid var(--gold)}.news-inner{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;max-width:1100px;margin:auto}.news h2{font-size:2.7rem}.news a{color:#ffe0a0}.form-shell{background:white;color:var(--ink);border-radius:6px;padding:1.3rem}.form-shell a{color:var(--red)}.form-shell .ml-embedded{min-height:0}.form-shell input{font-size:18px!important}.form-shell label.owned-label{display:block;font-weight:700;font-size:18px;margin:.5rem 0}.form-shell [aria-invalid=true]{outline:2px solid #ae1833;outline-offset:2px}.form-shell .vendor-help{font-size:16px;margin:0}.form-error,.error{color:#9e1932;font-weight:700}.form-error:empty{display:none}.content{max-width:1120px;margin:auto;padding:clamp(2rem,5vw,4rem) clamp(1.1rem,4vw,2.2rem)}.narrow{max-width:820px}.lead{font-size:1.2rem;max-width:65ch}.breadcrumb{font-size:.9rem;margin-bottom:1.25rem}.note{border-left:4px solid var(--gold);background:var(--cream);padding:1rem 1.3rem;margin:1.4rem 0}.notice{border:1px solid var(--line);border-radius:4px;background:var(--white);padding:1.2rem}.small{font-size:.9rem}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.25rem;margin:1.5rem 0}.card{border:1px solid var(--line);border-radius:5px;background:var(--white);padding:1.5rem}.card>*:last-child{margin-bottom:0}.card h3{margin-bottom:.65rem}.sample-card{padding:1rem;display:flex;flex-direction:column;gap:.7rem}.sample-card img{max-height:240px;object-fit:contain;background:white;width:100%}.sample-card a{font-weight:700}.source-note{font-size:.88rem;color:var(--muted);max-width:70ch}.page-image{max-height:78vh;max-width:100%;object-fit:contain;display:block;margin:auto;background:white}.page-reader{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem}.page-text{white-space:pre-line;font-size:1.1rem;max-width:70ch}.sample-controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin:1rem 0}.sample-controls select{max-width:100%}.dialog{border:0;border-radius:8px;max-width:min(1080px,96vw);max-height:94vh;width:96vw;padding:1.2rem;background:var(--paper);color:var(--ink)}.dialog::backdrop{background:rgba(7,18,30,.87)}.dialog-head{display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:.8rem}.dialog-head h2{font-size:1.6rem;margin:0}.dialog .page-image{max-height:64vh}.dialog .page-text{margin:1rem auto}.dialog video,.watch-video{display:block;width:100%;background:#000;aspect-ratio:16/9}.video-transcript{margin-top:1.5rem}.tabs{display:flex;gap:.5rem;flex-wrap:wrap;border-bottom:2px solid var(--line);padding-bottom:.8rem;margin:1.4rem 0}.tabs button{background:transparent;color:var(--red)}.tabs button[aria-selected=true]{background:var(--red);color:white}.tab-panel{padding:1rem 0}.rules li{padding:.35rem 0}.decade-nav{display:flex;flex-wrap:wrap;gap:.6rem}.tag{border:1px solid var(--line);padding:.15rem .6rem;border-radius:2px;font-size:.85rem;display:inline-block;margin:0 .3rem .4rem 0}.label-demo button{min-height:44px;padding:.4rem .7rem}.label-value.active{background:var(--gold);outline:2px solid var(--red)}.question{background:var(--white);border:1px solid var(--line);padding:clamp(1.2rem,4vw,2rem);border-radius:6px}.question legend{font:700 1.6rem/1.3 Zilla,Georgia,serif;margin:0 0 1.2rem}.question fieldset{border:0;padding:0;margin:0}.options{display:grid;gap:.65rem;margin:1rem 0}.option{display:flex;align-items:center;gap:.75rem;border:1px solid var(--line);border-radius:4px;padding:.8rem;cursor:pointer;background:#fff}.option:has(input:checked){border:2px solid var(--red);padding:calc(.8rem - 1px);background:#fff3d4}.option input{accent-color:var(--red);width:22px;height:22px;flex:none}.reveal{border-left:4px solid #345f4e;background:#eaf1e8;padding:1rem 1.3rem;margin:1rem 0}.progress{font-size:.95rem;font-weight:700;color:var(--muted)}.score{font:700 2.3rem/1.2 Zilla,Georgia,serif}.status{padding:.75rem 0;min-height:2.5rem}input:not([type=checkbox]):not([type=radio]),select,textarea{border:1px solid #74808a;border-radius:4px;padding:.65rem .75rem;min-height:48px;background:white;color:var(--ink);max-width:100%}label.field{display:grid;gap:.3rem;margin:1rem 0;font-weight:700}.check{display:flex;gap:.8rem;align-items:start;margin:1rem 0}.check input{width:22px;height:22px;flex:none;margin-top:.3rem;accent-color:var(--red)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.7rem;border-bottom:1px solid var(--line)}th{font-weight:700}caption{font-weight:700;text-align:left;margin-bottom:.7rem}.table-scroll{overflow:auto}.sheet{background:white;padding:1.5rem;border:1px solid var(--line);margin:2rem 0;color:#111;break-inside:avoid}.sheet h2{font-size:1.6rem}.sheet td{height:2.2rem}.sheet .blank{height:2.5rem;border-bottom:1px solid #444;display:inline-block;min-width:9rem}.gift-note{padding:3rem;border:3px double var(--ink);background:white;min-height:340px}.site-footer{background:var(--ink);color:var(--cream);padding:2.5rem clamp(1.2rem,4vw,3rem)}.footer-inner{max-width:1200px;margin:auto}.footer-links{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-bottom:1rem}.site-footer a{color:var(--cream)}.site-footer p{font-size:.88rem;margin:.5rem 0}.hidden,[hidden]{display:none!important}.copy-link{word-break:break-all}.print-only{display:none}details{margin:.7rem 0}summary{cursor:pointer;font-weight:700;min-height:44px;padding:.4rem 0}noscript p{border-left:4px solid var(--gold);padding:.8rem;background:var(--cream);color:var(--ink)}
@media(max-width:760px){body{font-size:18px}.nav{align-items:flex-start;gap:.6rem;padding:.7rem 1rem}.brand{font-size:1.16rem;max-width:120px}.brand span{font-size:.58rem}.nav-links{gap:.5rem .85rem;justify-content:flex-end;max-width:230px}.nav-links>a{font-size:.82rem}.nav-links>a:last-child{padding:.35rem .55rem}.hero-inner{grid-template-columns:minmax(0,1fr) 125px;gap:.8rem;padding:1.5rem 1.15rem 1.8rem;align-items:start}.hero-copy{display:contents}.hero .eyebrow{grid-column:1/-1;font-size:.75rem;margin:0}.hero h1{grid-column:1;font-size:clamp(2.15rem,7.6vw,3.1rem);margin:0}.hero .book-title{grid-column:1;font-size:1rem;line-height:1.5;margin:0}.hero .intro{grid-column:1/-1;font-size:1rem;margin:.6rem 0 0}.hero .availability{grid-column:1/-1;margin:.3rem 0 0}.hero .primary-action{grid-column:1/-1;margin:0}.hero .primary-action .button{width:100%}.hero .micro{grid-column:1/-1;font-size:.8rem;margin:0}.hero .secondary-actions{grid-column:1/-1;margin:.3rem 0 0;font-size:.9rem}.book-stage{grid-column:2;grid-row:2/4;padding:.4rem 0 0}.book-object{width:116px}.panel-actions{padding:.65rem 1rem .8rem;font-size:.95rem;gap:.4rem 1.1rem}.panel-actions details{margin:0}.news{padding:2rem 1rem}.news-inner{grid-template-columns:1fr;gap:1rem}.news h2{font-size:2.2rem}.form-shell{padding:.8rem}.content{padding:2rem 1.1rem}.page-reader{grid-template-columns:1fr}.dialog{padding:.8rem}.dialog .page-image{max-height:59vh}.dialog-head h2{font-size:1.2rem}.dialog-head button{font-size:.9rem;padding:.5rem}.tabs{gap:.4rem}.tabs button{font-size:.95rem;padding:.6rem}.sheet{padding:.75rem}.sheet th,.sheet td{padding:.4rem}.gift-note{padding:1.4rem}.news .lead{font-size:1.1rem}}
@media(max-width:360px){.hero-inner{grid-template-columns:minmax(0,1fr) 100px}.book-object{width:92px}.hero h1{font-size:2rem}.nav{flex-wrap:wrap}.nav-links{max-width:none;justify-content:flex-start}.brand{max-width:none}.brand span{display:none}}
.dialog video,.watch-video{height:auto;max-height:72vh;object-fit:contain;aspect-ratio:16/9}
.field{min-width:0}.field select,.field input,.field textarea{width:100%;min-width:0;max-width:100%}
@media(prefers-reduced-motion:no-preference){.button,button{transition:background-color .15s,filter .15s}}
@media print{@page{margin:12mm}body{font:11pt/1.35 Arial,sans-serif;background:white;color:black}.site-header,.site-footer,.no-print,.skip,.breadcrumb,.news{display:none!important}.content{max-width:none;padding:0}.print-only{display:block}.sheet{border:0;margin:0;padding:0;break-after:page}.sheet:last-child{break-after:auto}.sheet td{height:8mm}.sheet th,.sheet td{padding:2mm}.sheet h2{font-size:19pt}.sheet .small{font-size:10pt}.gift-note{min-height:100mm}a{color:black;text-decoration:none}.print-intro{display:none}}

:focus-visible,.form-shell :focus-visible{outline:3px solid #11263d;outline-offset:3px;box-shadow:0 0 0 6px #ffe29e}
.vendor-unavailable .ml-embedded{min-height:0}.vendor-recovery{margin:.8rem 0}.vendor-status{font-weight:700;margin:0 0 1rem}
.form-shell a.button{color:#fff}
@media(max-width:760px){.hero .eyebrow,.hero .micro,.nav-links>a,.small,.source-note{font-size:1rem}.brand span{display:none}}

/* ===== Session 257 sprint: sales-funnel homepage ===== */
.s-hero{position:relative;color:#fff9eb;background:radial-gradient(58% 68% at 27% 64%,rgba(255,206,122,.34),rgba(255,206,122,0) 64%),linear-gradient(180deg,rgba(34,4,12,.38),rgba(34,4,12,.62)),url('/assets/curtain-web-729f9ba603df.jpg') center top/cover;border-bottom:5px solid var(--gold)}
.s-wrap{max-width:1280px;margin:auto;padding:clamp(1.3rem,3vw,2.4rem) clamp(1rem,3vw,2.4rem) clamp(2rem,4vw,3.2rem)}
.s-hero-head{text-align:center;max-width:1120px;margin:0 auto calc(2.25rem + .107*clamp(1.56rem,3vw,2.34rem) + 8px)}
.s-kicker{font:700 1.14rem/1.4 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 calc(1.55rem - 5pt)}
.s-hero h1{font-size:clamp(2.1rem,4.3vw,3.75rem);text-wrap:balance;color:#fffdf8;margin:0 0 calc(1.35rem + 5pt);text-shadow:0 3px 16px rgba(0,0,0,.5);letter-spacing:.005em}
.s-title{font:700 clamp(1.56rem,3vw,2.34rem)/1.25 Zilla,Georgia,serif;color:#ffe3a3;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.s-title span{display:inline-block;font:400 clamp(1.2rem,1.8vw,1.44rem)/1.3 Inter,Arial,sans-serif;color:#fff3dc;margin-left:.35rem}
.s-stage{display:grid;grid-template-columns:minmax(250px,5fr) minmax(0,7fr);grid-template-areas:"book film" "book form";gap:0 clamp(1.5rem,4vw,3.6rem);align-items:start}
.s-book-col{grid-area:book;align-self:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.s-book{display:block;position:relative;width:min(100%,440px);perspective:1800px;text-decoration:none;color:inherit;margin:0 auto}
.s-book:focus-visible{outline:4px solid var(--gold);outline-offset:8px}
.s-book-3d{position:relative;display:block;transform:rotateY(-15deg) rotateZ(1.2deg);transform-style:preserve-3d;filter:drop-shadow(24px 30px 26px rgba(0,0,0,.6));transition:transform .55s ease}
.s-book-3d .front{display:block;width:100%;height:auto;border-radius:2px 6px 6px 2px}
.s-book-3d .spine{position:absolute;left:0;top:0;height:100%;width:9.6%;object-fit:fill;transform-origin:left;transform:rotateY(-88deg)}
.s-look{position:absolute;left:50%;bottom:-1.1rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.1rem;border-radius:999px;background:var(--gold);color:var(--ink);font:700 1.05rem/1 Inter,Arial,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap}
.s-book:hover .s-look{background:#ffd46b}
.s-film{grid-area:film}
.s-screen{position:relative;border:4px solid var(--gold);border-radius:10px;background:#000;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 8px rgba(23,40,60,.85);overflow:hidden}
.s-screen video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.s-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;border:0;border-radius:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55));color:#fff;cursor:pointer;min-height:0;padding:0;font:700 1.15rem/1.2 Inter,Arial,sans-serif}
.s-play-icon{display:flex;align-items:center;justify-content:center;width:92px;height:92px;border-radius:50%;background:var(--red);border:4px solid var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.s-play-icon::before{content:"";margin-left:8px;border-style:solid;border-width:18px 0 18px 30px;border-color:transparent transparent transparent #fff}
.s-play:hover .s-play-icon,.s-play:focus-visible .s-play-icon{transform:scale(1.06);background:#9c2236}
.s-play-label{padding:.35rem .8rem;border-radius:6px;background:rgba(0,0,0,.6)}
.s-film-cap{margin:.7rem 0 0;font-size:1rem;color:#fff3dc}
.s-film-cap a{color:#ffe3a3}
.s-date{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.35rem 1.2rem;margin:1.1rem auto 0;padding:.9rem 1.8rem;border:3px solid var(--gold);border-radius:12px;background:rgba(23,40,60,.94);text-align:center;box-shadow:0 0 0 6px rgba(231,184,83,.16),0 12px 30px rgba(0,0,0,.35)}
.s-date-top{font:700 clamp(1.2rem,2.2vw,1.75rem)/1.15 Inter,Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#fff9eb}
.s-date-main{font:700 clamp(2rem,3.9vw,3.1rem)/1 Zilla,Georgia,serif;color:var(--gold)}
.s-form{grid-area:form;margin-top:1rem}.s-form-lead{margin:0 0 .4rem;font-weight:700;color:#fff3dc}
/* Section frame used by the selling sections */
.s-section{padding:clamp(2.4rem,5vw,4.2rem) clamp(1rem,3vw,2.4rem);background:var(--paper)}
.s-section.alt{background:var(--cream)}
.s-section.dark{background:var(--ink);color:var(--paper)}
.s-section-inner{max-width:1180px;margin:auto}
.s-section-head{text-align:center;max-width:820px;margin:0 auto clamp(1.4rem,3vw,2.2rem)}
.s-section-head h2{margin-bottom:.5rem}
.s-section-head p{font-size:1.15rem;color:var(--muted);margin:0}
.s-section.dark .s-section-head p{color:#e9dcc2}
.s-eyebrow{font:700 .9rem/1.3 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 .5rem}
.s-section.dark .s-eyebrow{color:var(--gold)}
/* Notify strip used between sections */
/* Approved panels */
.s-panels{max-width:1280px;margin:auto}
.s-panel{margin:0;background:var(--cream)}
.s-panel>img{display:block;width:100%;height:auto}
.s-panel-extra{background:var(--paper);padding:clamp(1.6rem,3.4vw,2.8rem) clamp(1rem,3vw,2.4rem);border-bottom:1px solid var(--line)}
.s-panel-extra>.s-section-inner{max-width:1120px}
.s-panel-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.4rem;padding:1rem;background:var(--paper);border-bottom:1px solid var(--line);font-weight:700}
/* FAQ */
.s-faq{max-width:860px;margin:auto}
.s-faq details{border:1px solid var(--line);border-radius:10px;background:#fffdf8;margin:0 0 .8rem;padding:0}
.s-faq summary{cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.2rem;font:700 1.2rem/1.35 Zilla,Georgia,serif;position:relative;min-height:44px}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font:700 1.6rem/1 Inter,Arial,sans-serif;color:var(--red)}
.s-faq details[open] summary::after{content:"–"}
.s-faq details>div{padding:0 1.2rem 1rem}
.s-faq details>div p{margin:.2rem 0 .8rem}
/* Official sign-up section tweaks */
.news .s-date-inline{display:inline-block;margin:.2rem 0 1rem;padding:.35rem .8rem;border:2px solid var(--gold);border-radius:8px;color:var(--gold);font:700 1.25rem/1.2 Zilla,Georgia,serif}
/* Header call to action */
.nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;border-radius:6px;background:var(--gold);color:var(--ink)!important;font-weight:700;text-decoration:none}
.nav-cta:hover{background:#ffd46b}
@media(max-width:760px){
  /* Phones: the book sits beside the release date, so the book, the date and the film all show on the first screen; the sign-up follows. */
  .s-wrap{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);grid-template-areas:"kicker kicker" "h1 h1" "title title" "book date" "film film" "form form";column-gap:1rem;align-items:center}
  .s-hero-head,.s-stage{display:contents}
  .s-kicker{grid-area:kicker;margin-bottom:calc(1.45rem - 5pt)}
  .s-hero h1{grid-area:h1;margin-bottom:calc(1.15rem + 5pt)}
  .s-title{grid-area:title;margin:0 0 2.2rem}
  .s-date{grid-area:date;margin:0;flex-direction:column;gap:.45rem;padding:.9rem .6rem}
  .s-date-top{font-size:1rem;letter-spacing:.05em}
  .s-date-main{font-size:1.95rem}
  .s-book-col{grid-area:book;margin:0 0 1.3rem}
  .s-book{width:100%}
  .s-look{font-size:.92rem;padding:.5rem .75rem;bottom:-1rem}
  .s-film{grid-area:film;margin-top:1.3rem}
  .s-form{grid-area:form}
}
@media(max-width:480px){
  .s-hero h1{font-size:2.15rem}
  .s-title span{display:block;margin:.3rem 0 0}
  .s-play-icon{width:72px;height:72px}
  .s-kicker{font-size:.96rem}
}
@media(prefers-reduced-motion:reduce){.s-book-3d{transition:none}}
/* Fallback top bar (replaced by the sign-up component's own bar when present) */
.s-topbar{display:flex;align-items:center;justify-content:center;gap:.6rem 1.2rem;flex-wrap:wrap;padding:.45rem 1rem;background:var(--ink);color:var(--gold);border-bottom:1px solid rgba(231,184,83,.5);text-align:center}
.s-topbar p{margin:0;font:700 1.05rem/1.3 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.s-topbar a{display:inline-flex;align-items:center;min-height:40px;padding:.3rem .9rem;border-radius:6px;background:var(--gold);color:var(--ink);font-weight:700;text-decoration:none}
/* Footer release reminder */
.s-footer-release{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:0 0 1.4rem;margin:0 0 1.4rem;border-bottom:1px solid rgba(255,255,255,.18)}
.s-footer-when{margin:0;font:700 1.35rem/1.3 Zilla,Georgia,serif;color:var(--gold)}
.s-footer-release .button{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* Phone header: brand + the two actions that matter */
@media(max-width:760px){
  .nav{flex-wrap:nowrap;gap:.6rem}
  .nav-links{gap:.2rem .8rem;flex-wrap:nowrap}
  .nav-links a:not(.nav-cta):not([href="/inside"]){display:none}
  .brand{font-size:1.15rem}
  .brand span{display:none}
  .s-topbar p{font-size:.85rem;letter-spacing:.05em}
  .s-topbar{gap:.4rem .8rem;padding:.35rem .6rem}
  .s-topbar a{display:none}
  .s-topbar p{font-size:.8rem;letter-spacing:.04em}
}
/* Spec strip: the book at a glance */
.s-spec{background:var(--ink);color:var(--paper);border-bottom:4px solid var(--gold)}
.s-spec ul{list-style:none;margin:0 auto;padding:clamp(1rem,2.4vw,1.6rem) clamp(1rem,3vw,2.4rem);max-width:1280px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.s-spec li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem}
.s-spec-num{font:700 clamp(1.9rem,3vw,2.6rem)/1 Zilla,Georgia,serif;color:var(--gold)}
.s-spec-label{font:700 1rem/1.2 Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#fffdf8}
.s-spec-note{font-size:.95rem;line-height:1.35;color:#e9dcc2}
@media(max-width:1000px){.s-spec ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.s-spec ul{grid-template-columns:repeat(2,minmax(0,1fr))}.s-spec-note{font-size:.9rem}}

/* One sign-up card per call to action: the signup component draws the card itself. */
.s-notify{margin:clamp(1.6rem,3vw,2.4rem) auto 0;max-width:640px;text-align:left}
.s-notify.compact{max-width:600px}

/* Look inside: plain-text alternative link */
.s-textlink{padding:0 1rem 2.4rem;text-align:center;font-size:1.05rem}

/* The official MailerLite form (the one real form on each page) dressed in the site's own type and colors.
   Selectors start at #news so they outrank the vendor's #mlb2-… rules; error states keep their red border. */
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper{background:transparent!important;max-width:100%!important;width:100%!important}
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody{padding:0!important}
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4{font-family:Zilla,Georgia,serif!important;font-weight:700!important;font-size:1.75rem!important;line-height:1.15!important;color:var(--ink)!important;margin:0 0 .5rem!important}
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p{font-family:Inter,Arial,sans-serif!important;font-size:1.02rem!important;line-height:1.5!important;color:#33404c!important}
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow label{font-family:Inter,Arial,sans-serif!important;font-weight:700!important;font-size:1rem!important;color:var(--ink)!important;margin:0 0 .3rem!important}
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input{font-family:Inter,Arial,sans-serif!important;font-size:1.08rem!important;min-height:52px!important;padding:.6rem .8rem!important;border:2px solid #8b7b62!important;border-radius:8px!important;color:var(--ink)!important;background:#fff!important}
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .ml-field-group.ml-error input{border-color:#b3261e!important}
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions p{font-family:Inter,Arial,sans-serif!important;font-size:.95rem!important;color:#33404c!important}
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary,
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading{font-family:Inter,Arial,sans-serif!important;font-weight:700!important;font-size:1.15rem!important;min-height:56px!important;border-radius:8px!important;background:var(--red)!important;border:2px solid var(--red)!important;color:#fff!important}
#news .form-shell .ml-form-embedContainer.ml-subscribe-form .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover{background:#6a1424!important}

/* "Notify me" links become buttons that open the sign-up pop-up: keep their link look. */
button.nav-cta{border:0;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;line-height:1.2}
.s-footer-release button.button{font:inherit;font-weight:700;cursor:pointer;min-height:48px;padding:.6rem 1.2rem;border-radius:8px;background:var(--gold);border:2px solid var(--gold);color:var(--ink)}
/* Phones: the sticky release bar already carries "Notify me", so the header keeps just the book and Look inside. */
@media(max-width:900px){.nav-links .nav-cta{display:none}}

/* Fable check fixes (26 Oct) */
/* Readability for older readers: larger header, footer and eyebrow type, 44px header taps. */
.nav-links>a{font-size:1.0625rem;min-height:44px;display:inline-flex;align-items:center}
.brand span{font-size:.8rem}
.eyebrow{font-size:.92rem}
.site-footer p{font-size:1rem}
/* Phone and tablet menu: every page stays one tap away. */
.s-menu{display:none;position:relative}
.s-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .85rem;border:2px solid var(--gold);border-radius:6px;color:#fff4db;font:700 1rem/1 Inter,Arial,sans-serif;cursor:pointer;user-select:none}
.s-menu>summary::-webkit-details-marker{display:none}
.s-menu>summary::before{content:"";width:18px;height:14px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.s-menu[open]>summary{background:rgba(231,184,83,.2)}
.s-menu__panel{position:absolute;right:0;top:calc(100% + .55rem);z-index:80;width:min(84vw,300px);display:flex;flex-direction:column;padding:.5rem;background:var(--ink);border:2px solid var(--gold);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.s-menu__panel a,.s-menu__panel button{display:flex;align-items:center;min-height:50px;padding:.4rem .95rem;border:0;border-radius:6px;background:none;color:#fff4db;font:400 1.1rem/1.2 Inter,Arial,sans-serif;text-decoration:none;text-align:left;cursor:pointer}
.s-menu__panel a:hover,.s-menu__panel a:focus-visible,.s-menu__panel button:focus-visible{background:rgba(231,184,83,.2)}
.s-menu__panel .s-menu__cta{margin-top:.45rem;justify-content:center;background:var(--gold);color:var(--ink);font-weight:700}
.s-menu__panel .s-menu__cta:hover{background:#ffd46b}
@media(max-width:900px){.s-menu{display:block}.nav-links{margin-left:auto}.nav-links a:not([href="/inside"]){display:none}}
/* The play label no longer covers the poster: a small pill at the top left; the line moves under the film. */
.s-play{background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 34%)}
.s-play-label{position:absolute;left:.75rem;top:.75rem;padding:.35rem .85rem;border-radius:999px;background:rgba(0,0,0,.72);font:700 1rem/1.2 Inter,Arial,sans-serif}
.s-film-cap strong{color:#fff}
/* Free quiz: the ask inside the "Round complete" card. */
.s-quiz-ask{margin:1rem 0 1.2rem;padding:1rem 1.15rem;border:2px solid var(--gold);border-radius:10px;background:#fff3d6}
.s-quiz-ask p{margin:0 0 .8rem;font-size:1.05rem;line-height:1.5}
.s-quiz-ask__btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.6rem 1.6rem;border:0;border-radius:8px;background:var(--red);color:#fff;font:700 1.1rem/1.2 Inter,Arial,sans-serif;text-decoration:none;cursor:pointer}
.s-quiz-ask__btn:hover{background:#6a1424}

/* ===== Arthur's second round, 26 Oct (OD-786 / OD-787) ===== */
/* Header: the name in the white script of the social profile picture. */
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.15rem;line-height:1}
.brand-script{display:block;width:auto;height:46px;max-width:none}
.brand span{line-height:1.3;margin-left:.2rem}
@media(max-width:900px){.brand-script{height:38px}}
@media(max-width:480px){.brand-script{height:30px}.brand{max-width:none}}
@media(max-width:360px){.brand-script{height:26px}}
/* Hero book: the hardback, turned a touch inwards so its broad spine shows. The shadow sits on the stage,
   because a filter on the 3D object itself would flatten it. */
.s-book-stage{display:block;perspective:1250px;perspective-origin:50% 42%;filter:drop-shadow(24px 30px 26px rgba(0,0,0,.55))}
.s-book-3d{transform:rotateY(29deg);filter:none;transition:transform .6s ease}
.s-book:hover .s-book-3d,.s-book:focus-visible .s-book-3d{transform:rotateY(21deg) translateY(-4px)}
.s-hb-front{position:relative;display:block;border-radius:2px 5px 5px 2px;overflow:hidden}
.s-hb-front .front{border-radius:0}
.s-hb-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.12) 1.5%,rgba(255,255,255,.2) 3%,rgba(0,0,0,.34) 4.4%,rgba(255,255,255,.12) 5.6%,rgba(0,0,0,0) 8.5%),linear-gradient(112deg,rgba(255,255,255,0) 52%,rgba(255,255,255,.1) 66%,rgba(255,255,255,0) 80%)}
.s-hb-spine{position:absolute;top:0;left:-15.7%;width:15.7%;height:100%;transform-origin:100% 50%;transform:rotateY(-90deg);overflow:hidden;border-radius:5px 0 0 5px;background:#5a0f19}
.s-hb-spine img{display:block;width:100%;height:100%;object-fit:fill}
.s-hb-spine::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.14) 16%,rgba(255,255,255,.14) 42%,rgba(0,0,0,.06) 66%,rgba(0,0,0,.42) 100%)}
@media(prefers-reduced-motion:reduce){.s-book-3d{transition:none}.s-book:hover .s-book-3d{transform:rotateY(29deg)}}
/* Section headings: larger, to match How to Play. */
.s-eyebrow{font-size:clamp(1.1rem,1.6vw,1.3rem);letter-spacing:.14em;margin:0 0 .4rem}
.s-section-head h2,.s-section-head h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.06;margin:0 0 .6rem}
.s-section-head p{font-size:clamp(1.12rem,1.5vw,1.3rem)}
/* Spacing: one even rhythm, neither cramped nor gappy. */
.s-section{padding:clamp(2rem,4.2vw,3.25rem) clamp(1rem,3vw,2.4rem)}
.s-section-head{margin:0 auto clamp(1rem,2.2vw,1.5rem)}
.s-notify{margin:clamp(1.1rem,2.2vw,1.6rem) auto 0}
.s-panel-extra{padding:clamp(1.6rem,3.2vw,2.6rem) clamp(1rem,3vw,2.4rem)}
.news{padding-top:clamp(2rem,4.2vw,3.25rem);padding-bottom:clamp(2rem,4.2vw,3.25rem)}
/* Spec strip: what comes free with the book. */
.s-spec-bonus{max-width:1280px;margin:0 auto;padding:0 clamp(1rem,3vw,2.4rem) clamp(1rem,2.2vw,1.4rem);text-align:center;font:600 1.08rem/1.5 Inter,Arial,sans-serif;color:#fff3dc}
.s-spec-free{display:inline-block;margin:0 .5rem .2rem 0;padding:.15rem .6rem;border-radius:4px;background:var(--gold);color:var(--ink);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem}
/* Email gates on the quiz and the printable round. */
.s-gate{margin:1.2rem 0 1.6rem}
.s-print-gate{margin:1.4rem 0;padding:1.2rem 1.3rem;border:2px solid var(--gold);border-radius:10px;background:#fffdf8}
.s-print-gate h3{margin:0 0 .4rem}
.s-print-open{margin:1rem 0 0}
/* Measured gap fixes (gaps.cjs, 26 Oct): each band is now a deliberate, even space. */
.s-wrap{padding-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.s-notify .rtd-su{margin-top:0;margin-bottom:0}
.s-flipbook.flipbook{padding-top:clamp(4px,.8vw,8px);padding-bottom:0}
section.howto.howto{padding:clamp(.5rem,1.2vw,1rem)}
section.howto .howto__frame{padding-top:clamp(0px,.5vw,.4rem);padding-bottom:clamp(0px,.5vw,.4rem)}
.s-panel-extra .rtd-ix.ix-block{padding:0}
/* Phone header: keep "Look inside" on one line beside the script name and the menu. */
.nav-links>a{white-space:nowrap}
@media(max-width:420px){.brand-script{height:26px}.nav{gap:.5rem}.nav-links>a{font-size:1rem}}
/* Hero date: "Early November" sits on the same line as "Coming soon to Amazon in" (OD-788);
   stacked on phones, so centred there. */
.s-date{align-items:baseline}
@media(max-width:760px){.s-date{align-items:center}}
/* Hero: "Look inside" sits just below the cover instead of over it (OD-789). */
.s-look{position:static;transform:none;display:flex;width:max-content;max-width:100%;margin:1.3rem auto 0}

/* ===== Arthur's fourth round, 26 Oct (OD-791 to OD-795) ===== */
/* Hero date (OD-791, OD-793): one line, with an ordinary word space between "IN" and "Early November" (the space is in
   the box's own type, the same as the spaces between the other words). The two parts share a baseline, and the box is
   balanced on the capitals of "Coming soon to Amazon in": "Early November" rises above them about as far as its "y"
   drops below. --date-shift is measured by datebox.cjs. Stacked on phones, where each line is centred. */
.s-date{display:block;width:fit-content;max-width:100%;margin:2.25rem auto 0;--date-shift:calc(.105*clamp(2rem,3.9vw,3.1rem));padding:calc(.9rem - var(--date-shift)) 1.8rem calc(.9rem + var(--date-shift));font:700 clamp(1.2rem,2.2vw,1.75rem)/1.15 Inter,Arial,sans-serif;letter-spacing:.07em;color:#fff9eb}
.s-date-top,.s-date-main{white-space:nowrap}
.s-date-main{letter-spacing:normal}
@media(max-width:760px){
  .s-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:auto;gap:.45rem;padding:.9rem .6rem}
  .s-date-top,.s-date-main{white-space:normal}
}
/* The hardback turns over (OD-791 item 5, OD-795). Four sides: front, spine, page edges and back. --turn spins it about
   its own middle; --bd is its depth in pixels (15.7% of its width, as on the real 320-page hardback), set by sprint.js. */
.s-book{position:relative;width:min(100%,440px);margin:0 auto;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;cursor:grab}
.s-book.is-dragging{cursor:grabbing}
.s-book img{-webkit-user-drag:none}
.s-book-3d{--bd:0px;--turn:0deg;position:relative;display:block;transform-style:preserve-3d;transform:rotateY(29deg) translateY(0) translateZ(calc(var(--bd)*-.5)) rotateY(var(--turn)) translateZ(calc(var(--bd)*.5));transition:transform .85s cubic-bezier(.3,.75,.25,1)}
.s-book:hover .s-book-3d,.s-book:focus-visible .s-book-3d{transform:rotateY(21deg) translateY(-4px) translateZ(calc(var(--bd)*-.5)) rotateY(var(--turn)) translateZ(calc(var(--bd)*.5))}
.s-book.is-dragging .s-book-3d{transition:none}
.s-hb-front,.s-hb-back,.s-hb-spine,.s-hb-pages{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.s-hb-front,.s-hb-back{container-type:inline-size}
.s-hb-back{position:absolute;inset:0;transform:translateZ(calc(var(--bd)*-1)) rotateY(180deg);border-radius:5px 2px 2px 5px;overflow:hidden;background:#f6e6ca}
.s-hb-back img{display:block;width:100%;height:100%}
.s-hb-back::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.1) 1.5%,rgba(255,255,255,.18) 3%,rgba(0,0,0,.28) 4.4%,rgba(255,255,255,.1) 5.6%,rgba(0,0,0,0) 8.5%)}
.s-hb-pages{position:absolute;top:0;left:100%;width:15.7%;height:100%;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,transparent 0 11%,#f6e6ca 11% 89%,#f3dfbd 89%),linear-gradient(180deg,#701617,#7b1515,#7c1414,#641a17,#6a1817,#4a2429,#36303c,#484c56,#d1a46d,#1157b9)}
.s-hb-pages::before{content:"";position:absolute;top:1.6%;bottom:1.6%;left:11%;right:11%;background:repeating-linear-gradient(90deg,#fbf6ea 0 1px,#e4d8bf 1px 2px);box-shadow:inset 0 0 7px rgba(0,0,0,.3)}
/* "Look Inside" and "See Back Cover", side by side between the sign and the heart (OD-795; the clear band is 53.9-57.3%
   of the cover's height, measured on the artwork). On the back they sit on the plain bottom border, below the barcode. */
.s-cover-actions{position:absolute;left:50%;top:55.6%;z-index:2;display:flex;align-items:center;gap:.6em;transform:translate(-50%,-50%);font-size:15px;font-size:clamp(12px,3.55cqw,16px);white-space:nowrap}
.s-hb-back .s-cover-actions{top:95.6%}
.s-look,.s-turn{position:static;display:inline-flex;align-items:center;gap:.42em;width:auto;min-height:0;margin:0;padding:.62em 1.05em;border-radius:999px;font:700 1em/1 Inter,Arial,sans-serif;letter-spacing:.01em;text-decoration:none;cursor:pointer;transform:none;box-shadow:0 .3em .9em rgba(0,0,0,.5)}
.s-look svg,.s-turn svg{width:1.15em;height:1.15em;flex:none}
.s-look{background:var(--gold);color:var(--ink);border:2px solid #fff1c8}
.s-turn{background:var(--ink);color:#fff9eb;border:2px solid var(--gold)}
.s-turn[hidden]{display:none}
.s-book:hover .s-look,.s-book-actions .s-look{background:var(--gold)}
.s-book:hover .s-look:hover,.s-book-actions .s-look:hover{background:#ffd46b}
.s-book .s-turn:hover,.s-book-actions .s-turn:hover{background:#26476b}
.s-look:focus-visible,.s-turn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.s-book-actions{display:none}
@media(max-width:760px){
  /* Phones: the cover is about 150 px wide, too small for two buttons, so they sit in a row just under the book. */
  .s-cover-actions{display:none}
  .s-wrap{grid-template-areas:"kicker kicker" "h1 h1" "title title" "book date" "actions actions" "film film" "form form"}
  .s-book-col{margin:0 0 1rem}
  .s-book-actions{grid-area:actions;display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;font-size:1rem}
  .s-book-actions .s-look,.s-book-actions .s-turn{min-height:44px;padding:.55em 1em}
  .s-film{margin-top:1.1rem}
}
@media(prefers-reduced-motion:reduce){.s-book-3d{transition:none}.s-book:hover .s-book-3d{transform:rotateY(29deg) translateY(0) translateZ(calc(var(--bd)*-.5)) rotateY(var(--turn)) translateZ(calc(var(--bd)*.5))}}
/* The brush-script name (OD-792, OD-798, OD-801): a touch smaller, in the space left of the "Be the first to know" form,
   an ordinary gap under "Get notified the day it's out", with the American flag centred under it; on phones it follows
   the form. Pages without the sign-up section end with the same name and flag at the top of the footer. */
.news-inner{grid-template-areas:"text form" "logo form";grid-template-rows:auto 1fr}
.news-text{grid-area:text}
.news-inner>.form-shell{grid-area:form}
.news-signoff,.footer-signoff{display:flex;flex-direction:column;align-items:center;gap:clamp(.8rem,1.4vw,1.1rem);width:100%;max-width:540px}
.news-signoff{grid-area:logo;align-self:start;margin:0}
/* An ordinary gap above the name (OD-801): the same as between the paragraphs above it, so no extra row gap. */
@media(min-width:761px){.news-inner{row-gap:0}}
.signoff-logo{display:block;width:100%;height:auto}
/* Three times its first size and 6 points closer to the name (OD-803). */
.signoff-flag{display:block;width:auto;height:clamp(120px,10.8vw,150px);margin-top:-6pt;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 8px 22px rgba(0,0,0,.38)}
@media(max-width:760px){
  .news-inner{grid-template-areas:"text" "form" "logo";grid-template-rows:auto}
  .news-signoff{margin:.8rem auto 0}
}
.footer-signoff{margin:0 auto 1.6rem}
/* Header: the American flag just right of the script name (OD-799, OD-800), medium: clearly seen, smaller than the
   lettering, its middle level with the middle of the s at the end of "Days" (49.3% down the image, OD-803). The script image grew when its
   tails were restored (OD-802), so its heights rise by 223/195 to keep the letters the size they were. */
.brand{display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:.6rem;row-gap:.15rem;max-width:none;--logo-h:52.6px;--flag-h:28px}
.brand span{grid-column:1/-1}
.brand-script{height:var(--logo-h)}
.brand-flag{display:block;width:auto;max-width:none;height:var(--flag-h);position:relative;top:calc(var(--logo-h)*-.007);border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
@media(max-width:900px){.brand{--logo-h:43.5px;--flag-h:23px}}
@media(max-width:480px){.brand{--logo-h:34.3px;--flag-h:19px;column-gap:.5rem}}
@media(max-width:420px){.brand{--logo-h:29.7px;--flag-h:17px;column-gap:.45rem}}
/* Small phones: the flag's room comes from the header's own spacing first; only the narrowest phones get a slightly
   smaller name, so nothing runs off the screen. */
@media(max-width:430px){.nav{padding-left:.75rem;padding-right:.75rem;gap:.45rem}.s-menu>summary{padding:.4rem .65rem;gap:.4rem}}
@media(max-width:380px){.brand{--logo-h:27px;--flag-h:15px;column-gap:.35rem}.nav{gap:.35rem}.nav-links>a{font-size:.95rem}.s-menu>summary{padding:.4rem .55rem}}
/* At 320 (also an iPhone with Display Zoom, common with older readers) "Look inside" stays one tap away in the menu and
   on the page, so the name and flag keep their size. */
@media(max-width:340px){.nav-links{display:none}.s-menu{margin-left:auto}}
/* Phone header: the Menu button no longer picks up the FAQ list's spacing (a stray 11px above and below it, from the
   general details rule), so the name, flag, "Look inside" and Menu sit level and the bar loses its empty band. */
.s-menu{margin-top:0;margin-bottom:0}
@media(max-width:760px){.nav{align-items:center}}
/* The headline (OD-809, OD-811): "The Ultimate Trip Down America's Memory Lane." always on one line, as large as fits the
   whole screen width less a small margin each side, not the 1,120px column. The hero is the measure, so a desktop scroll
   bar is never counted. In Zilla Bold the line is 22.0 times as wide as its type size, so the size is 98% of that width
   divided by 22, up to 96px on very wide screens. */
.s-hero{container-type:inline-size}
.s-h1-fit{--h1-gap:clamp(1rem,1.8cqw,1.75rem);width:calc(100cqw - 2*var(--h1-gap));margin-left:calc(50% - 50cqw + var(--h1-gap))}
.s-hero h1{white-space:nowrap;text-wrap:nowrap;font-size:min(6rem,calc((100cqw - 2*var(--h1-gap))*.04455))}
@media(max-width:760px){.s-h1-fit{grid-area:h1}}
/* Phones (OD-824): the headline breaks after "Down" into two lines, each as large as fits, up to 44px. The longer line,
   "America's Memory Lane.", is 10.98 times as wide as its type size, so the size is 98% of the width divided by 10.98.
   The release-date box beside the book sits higher: its top edge (the faint gold ring) is level with the top of the book,
   about 11pt higher on the screen than before (OD-824; a 15px nudge was hidden by the bigger headline, Arthur: "The box"),
   then 4pt lower than level (OD-828, Arthur: "move the box down by 4 points (it went to far up)"), then 5pt lower again,
   9pt below the top of the book in all (OD-829, Arthur: "MOVE THE COMINS SOON BOX AGAIN DOWNY BY 5 POINTS"), then 8pt lower again,
   17pt below the top of the book in all (OD-831, Arthur: "MOVE IT DOWN ANOTHER 8 POINS ... (IN MOBILE VIEW)"). */
.s-h1-br{display:none}
@media(max-width:760px){
  .s-h1-br{display:inline}
  .s-hero h1{font-size:min(2.75rem,calc((100cqw - 2*var(--h1-gap))*.0893));line-height:1.12}
  .s-date{align-self:start;margin-top:calc(6px + 17pt)}
}
/* Phones (OD-833): gap A runs from the top of the book (the cover's edge beside the box) down to the top of the box. The
   box reaches down so the gap from its bottom to the bottom of the book is also gap A, and its text sits in the middle.
   The book grows with the screen width, so the height is two straight lines in vw, measured by gapB.cjs (the book's
   corners from markers that ride its 3D turn): within 0.3px from 320 to 760 wide. Where the text needs more room (320
   wide) the box keeps its text height. The .7px puts the text's ink, not its line boxes, in the exact middle. */
@media(max-width:760px){
  .s-date{box-sizing:border-box;min-height:min(calc(69.4vw - 89.54px),calc(64.83vw - 65.23px));padding-top:calc(.9rem + .7px);padding-bottom:calc(.9rem - .7px)}
}
/* Sharing the quiz (OD-810): large labelled buttons, WhatsApp and Facebook in their own colours, the rest plain. */
.s-share{margin:1.3rem 0;padding:1.1rem 1.2rem 1.2rem;border:2px solid var(--gold);border-radius:8px;background:#fff7e3}
.s-share h3{margin:0 0 .35rem;font-size:1.55rem;color:var(--red)}
.s-share__h{margin:0 0 .65rem;font-weight:700}
.s-share__lead{margin:0 0 .85rem}
.s-share__list{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.s-share__list li{margin:0}
.s-share .s-share__btn{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.5rem 1rem;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:700 1rem/1.2 Inter,Arial,sans-serif;text-decoration:none;cursor:pointer}
.s-share .s-share__btn svg{width:22px;height:22px;flex:none}
.s-share .s-share__btn:hover{background:var(--cream);filter:none;text-decoration:none}
.s-share .s-share__btn--whatsapp{background:#25d366;border-color:#25d366;color:#062a14}
.s-share .s-share__btn--whatsapp:hover{background:#1fc05c}
.s-share .s-share__btn--facebook{background:#0866ff;border-color:#0866ff;color:#fff}
.s-share .s-share__btn--facebook:hover{background:#0758db}
.s-share .s-share__btn--x{background:#000;border-color:#000;color:#fff}
.s-share .s-share__btn--x:hover{background:#2b2b2b}
.s-share__status{margin:.6rem 0 0;font-weight:700;color:#2f5a49;word-break:break-word}
.s-share__status:empty{display:none}
.s-share--row{margin:0 0 1.4rem;padding:0;border:0;background:none}
.s-share--invite{margin:1rem 0;padding:.9rem 1rem;background:#fffdf8}
@media(max-width:480px){.s-share{padding:1rem .9rem 1.1rem}.s-share .s-share__btn{padding:.5rem .85rem}}