/* Dimblehouse website.
   Palette, type and logos come from the brand guidelines, unchanged.
   Concept A ("The Threshold") for the house; Concept C's "rooms" for the books,
   so each book keeps its own colours while the publisher frames it. */

/* ---------- Fonts ---------- */
@font-face{font-family:"Libre Caslon Display";src:url("../fonts/libre-caslon-display.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url("../fonts/libre-caslon-text.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url("../fonts/libre-caslon-text-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Cabin";src:url("../fonts/cabin.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --green:#183D32; --green-deep:#0F2A22; --ivory:#F4F0E6; --gold:#B49A62; --ink:#292A27;
  --deepgold:#7A6536; --lichen:#8E9C84; --parchment:#E6DDC9;
  --bg:var(--ivory); --surface:#FBF8F1; --text:var(--ink); --muted:#55564F;
  --heading:var(--green); --rule:rgba(24,61,50,.16); --focus:var(--deepgold);
  --on-dark:var(--ivory); --on-dark-muted:rgba(244,240,230,.84);
  --error:#9A3B2A; --success:#2F6B4F;
  --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Cabin","Gill Sans","Gill Sans MT",system-ui,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --section:clamp(72px,10vw,140px);
  --wrap:1200px; --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--green)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.7 var(--serif);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p a,li a,dd a,.prose a{color:var(--green);text-decoration-color:var(--gold);text-underline-offset:3px}
p a:hover,li a:hover,dd a:hover,.prose a:hover{color:var(--deepgold)}
h1,h2,h3,h4{font-weight:400;margin:0;color:var(--heading);text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{padding-left:1.25em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:820px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--gold)}
.skip{position:absolute;left:var(--s2);top:-80px;z-index:100;background:var(--ivory);color:var(--green);padding:12px 18px;font:600 .875rem var(--sans);text-decoration:none;transition:top .2s}
.skip:focus{top:var(--s2)}
main:focus{outline:none}

/* ---------- Type helpers ---------- */
.eyebrow{font:600 .75rem/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--deepgold);margin:0 0 var(--s2)}
.on-dark .eyebrow{color:var(--gold)}
.h-display{font-family:var(--display);font-size:clamp(2.125rem,4.4vw,3.375rem);line-height:1.1;margin-bottom:var(--s3)}
.h-section{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.15;margin-bottom:var(--s3)}
.lede{font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.6}
.muted{color:var(--muted)}
.tag{display:inline-block;font:600 .6875rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--deepgold)}
.small{font:400 .875rem/1.6 var(--sans);color:var(--muted)}
.orn{width:44px;height:44px;margin:0 auto var(--s4)}

/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;font:600 .8125rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;text-align:center;border:1px solid transparent;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn--solid{background:var(--green);color:var(--ivory);border-color:var(--green)}
.btn--solid:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn--line{border-color:var(--green);color:var(--green);background:transparent}
.btn--line:hover{background:var(--green);color:var(--ivory)}
.on-dark .btn--solid{background:var(--ivory);color:var(--green);border-color:var(--ivory)}
.on-dark .btn--solid:hover{background:#fff;border-color:#fff}
.on-dark .btn--line{color:var(--ivory);border-color:var(--gold)}
.on-dark .btn--line:hover{background:var(--gold);color:var(--green);border-color:var(--gold)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn-row--center{justify-content:center}
.link{font:600 .8125rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--green);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:4px;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.link:hover{color:var(--deepgold)}
.link svg{width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.on-dark .link{color:var(--ivory)}
.on-dark .link:hover{color:var(--gold)}
.ext::after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:.35em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- Header and navigation ---------- */
.site-header{position:relative;z-index:30;background:var(--green);color:var(--ivory);border-bottom:1px solid rgba(244,240,230,.1)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:84px}
.brand{display:block;line-height:0;flex:none}
.brand{position:relative}
.brand img{height:52px;width:auto}
.brand .h-desc{position:absolute;left:0;top:0}
.js .is-home .brand .h-desc{opacity:0;transition:opacity .7s var(--ease)}
.js .is-home.desc-moved .brand .h-desc{opacity:1}
@media (max-width:480px){.brand img{height:44px}}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,1.6vw,28px)}
.nav a{display:inline-flex;align-items:center;min-height:44px;font:500 .8125rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ivory);border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.nav a:hover{border-bottom-color:var(--gold)}
.nav a[aria-current]{border-bottom-color:var(--gold);color:#fff}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 14px;background:none;border:1px solid rgba(244,240,230,.6);color:var(--ivory);font:600 .75rem var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.menu-btn svg{width:18px;height:18px}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
@media (max-width:1080px){
  .menu-btn{display:inline-flex}
  .nav ul{display:none}
  .nav.is-open ul{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--green);padding:var(--s1) var(--gutter) var(--s4);border-top:1px solid rgba(180,154,98,.5);box-shadow:0 18px 30px rgba(0,0,0,.28)}
  .nav.is-open a{font-size:.9375rem;min-height:52px;width:100%;border-bottom:1px solid rgba(244,240,230,.14)}
  .nav.is-open a[aria-current]{color:var(--gold);border-bottom-color:rgba(244,240,230,.14)}
}
.draft-bar{background:#F3D98B;color:#3A2E0B;font:500 .8125rem/1.4 var(--sans);text-align:center;padding:8px var(--gutter)}

/* ---------- Home hero (Concept A) ---------- */
.arch{border-radius:50% 50% 0 0 / 36% 36% 0 0}
.hero{background:var(--green);color:var(--on-dark);position:relative;overflow:hidden}
.hero__body{position:relative;text-align:center;padding:clamp(56px,9vw,120px) 0 clamp(96px,14vw,180px)}
.hero__door{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(640px,92vw);aspect-ratio:48/66;border:1px solid rgba(180,154,98,.32);border-bottom:0;pointer-events:none}
.hero__door::before{content:"";position:absolute;inset:22px 22px 0;border:1px solid rgba(180,154,98,.16);border-bottom:0;border-radius:inherit}
.hero__door::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:71%;aspect-ratio:2/1;border-radius:999px 999px 0 0;background:radial-gradient(60% 100% at 50% 100%,rgba(180,154,98,.30),rgba(180,154,98,.08) 60%,rgba(180,154,98,0) 100%)}
.hero__slides{position:absolute;inset:22px 22px 0;overflow:hidden;transform:translateZ(0)}
.hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity,transform;transition:opacity 2s cubic-bezier(.4,0,.2,1);backface-visibility:hidden}
.hero__slide.is-active{opacity:.72}
.hero__slide.is-leaving{opacity:0}
/* The veil keeps the logo, lede and buttons legible: darkest where the text sits, lighter at the crown of the arch. */
.hero__veil{position:absolute;inset:0;background:
  radial-gradient(70% 34% at 50% 34%,rgba(15,42,34,.62),rgba(15,42,34,0) 100%),
  linear-gradient(180deg,rgba(24,61,50,.30) 0%,rgba(24,61,50,.48) 26%,rgba(24,61,50,.70) 52%,rgba(24,61,50,.55) 78%,rgba(24,61,50,.92) 100%)}
/* The slow drift runs for longer than a picture is shown, and is kept running while the
   picture fades out (same animation, so it never restarts or snaps back). */
@media (prefers-reduced-motion:no-preference){
  .hero__slide.is-active,.hero__slide.is-leaving{animation:drift 12s linear both}
  @keyframes drift{from{transform:scale(1.07)}to{transform:scale(1)}}
}
.hero__door::after{z-index:1}
.hero__body>.wrap{position:relative;z-index:2}
.hero__books{display:none}
/* "Explore": an invitation to scroll, in Antique Gold at the foot of the arch. Set at 19px semibold,
   which counts as large text, so the guidelines' gold on Hollow Green (4.4:1) meets WCAG AA. */
/* Sits at the bottom of the visible screen (below the 84px header), never lower than the foot of the arch. */
.hero__explore{position:absolute;z-index:3;left:50%;top:min(calc(100svh - 84px - 96px),calc(100% - 96px));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:6px 12px;
  font:600 1.1875rem/1 var(--sans);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;text-decoration:none;color:var(--gold);
  transition:opacity .9s var(--ease),transform .9s var(--ease),color .2s}
.hero__explore svg{width:26px;height:26px}
.hero__explore:hover{color:#CDB27A}
.js .hero__explore{opacity:0;transform:translate(-50%,10px);pointer-events:none}
.js .hero.explore-in .hero__explore{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.js .hero.explore-in.scrolled .hero__explore{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hero.explore-in .hero__explore svg{animation:nudge 2.6s ease-in-out 1.2s infinite}
  @keyframes nudge{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(7px)}}
}
/* Wide screens: the featured covers tumble in beside the arch, settle, and rest. */
@media (min-width:1180px){
  .hero__books{display:block;list-style:none;margin:0;padding:0;position:absolute;z-index:3;inset:0;pointer-events:none;
    --w:clamp(160px,12vw,230px);--gap:28px;
    /* Distance from the centre of the page to the covers: half the arch, plus breathing room. */
    --edge:calc(50% + min(320px,46vw) + clamp(48px,6vw,120px))}
  .tumble{position:absolute;width:var(--w);pointer-events:auto}
  /* One each side of the arch, the right one set a little lower so the pair feels placed by hand.
     A third featured book would sit below the first, spaced by the covers' own height (2:3). */
  .tumble--1{top:16%;right:var(--edge);--r:-6deg;--from:-26deg;--d:0s}
  .tumble--2{top:27%;left:var(--edge);--r:5deg;--from:24deg;--d:.45s}
  .tumble--3{top:calc(16% + var(--w) * 1.5 + var(--gap));right:var(--edge);--r:3deg;--from:-18deg;--d:.9s}
  .tumble__book{display:block;text-decoration:none;color:var(--ivory);transform:rotate(var(--r));transition:transform .45s var(--ease)}
  .tumble__book .cover{box-shadow:0 2px 4px rgba(0,0,0,.25),0 26px 44px -14px rgba(0,0,0,.65)}
  .tumble__book:hover,.tumble__book:focus-visible{transform:rotate(0deg) translateY(-8px) scale(1.04)}
  .tumble__label{display:block;margin-top:14px;font:500 .75rem/1.4 var(--sans);letter-spacing:.06em;color:var(--on-dark-muted);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
  .tumble__label b{display:block;font:400 1.0625rem/1.25 var(--display);letter-spacing:0;color:var(--ivory);margin-bottom:2px}
  .tumble__book:hover .tumble__label,.tumble__book:focus-visible .tumble__label{opacity:1;transform:none}
  .tumble__book:focus-visible{outline-offset:6px}
}
@media (min-width:1180px) and (prefers-reduced-motion:no-preference){
  /* Before the fall: above the hero, out of sight. */
  .js .tumble{transform:translateY(-130vh) rotate(var(--from));opacity:0}
  .js .hero.books-in .tumble{animation:tumble 1.9s cubic-bezier(.3,.05,.25,1) var(--d) both}
  @keyframes tumble{
    0%{transform:translateY(-130vh) rotate(var(--from));opacity:1}
    68%{transform:translateY(14px) rotate(calc(var(--from) * -.12))}
    84%{transform:translateY(-6px) rotate(calc(var(--from) * .05))}
    100%{transform:none;opacity:1}
  }
  /* Then a barely-there float, out of step with each other. */
  .js .hero.books-in .tumble__float{display:block;animation:float 8s ease-in-out calc(var(--d) + 1.9s) infinite alternate}
  .tumble--2 .tumble__float{animation-duration:9.5s!important}
  @keyframes float{from{transform:translateY(0) rotate(0)}to{transform:translateY(-9px) rotate(.8deg)}}
}
.tumble__float{display:block}
.hero__body{--lockup:min(560px,86vw);--lift:calc(var(--lockup) * .06054)}
.hero__lockup{position:relative;width:var(--lockup);margin:0 auto}
.hero__lockup img{display:block;width:100%;height:auto}
.hero__lockup .l{position:absolute;left:0;top:0}
.hero__lockup .l-desc{transition:opacity .45s ease-in}
.hero__lockup .l-strap{width:100%;height:100%;transition:transform .8s var(--ease)}
.hero__lockup .w{position:absolute;opacity:0}
.hero__lockup .w.is-on{opacity:1}
.hero__body .hero__lede,.hero__body .hero__ctas{transition:transform .8s var(--ease)}
.hero.desc-gone .l-desc{opacity:0}
.hero.lifted .l-strap,.hero.lifted .hero__lede,.hero.lifted .hero__ctas{transform:translateY(calc(-1 * var(--lift)))}
/* The strapline's first word: the new one is written in with a soft left-to-right ink wipe. */
@media (prefers-reduced-motion:no-preference){
  .hero__lockup .w.is-in{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;animation:ink-in 1.1s cubic-bezier(.4,0,.2,1) both}
  .hero__lockup .w.is-out{animation:ink-out .5s ease-in both}
  @keyframes ink-in{from{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}to{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}}
  @keyframes ink-out{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(3px)}}
}
.hero__lede{position:relative;margin:clamp(32px,5vw,52px) auto 0;max-width:34ch;font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.6;color:var(--on-dark-muted)}
.hero__ctas{position:relative;justify-content:center;margin-top:var(--s5)}

/* ---------- Sections ---------- */
.section{padding:var(--section) 0}
.section--surface{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.section--parchment{background:var(--parchment)}
.section--green{background:var(--green);color:var(--on-dark)}
.section--green h2,.section--green h3{color:var(--ivory)}
.section--green p{color:var(--on-dark-muted)}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}
/* Home introduction: a quarter less space above the emblem, a third less below the last line
   (measured to the last words, so the paragraph's own margin is counted in). */
.section.intro{padding-top:calc(var(--section) * .75);padding-bottom:calc((var(--section) + 1.125rem) * 2 / 3)}
.intro p:last-child{margin-bottom:0}
.intro h2{font-family:var(--display);font-size:clamp(2rem,4.4vw,3.375rem);line-height:1.12;max-width:20ch;margin:0 auto var(--s4)}
.intro p{max-width:62ch;font-size:1.125rem}
.section-head{text-align:center;margin-bottom:clamp(40px,6vw,72px)}
.section-head h2{font-family:var(--display);font-size:clamp(2.25rem,4.6vw,3.5rem);line-height:1.1}
.section-head p{max-width:54ch;margin:var(--s2) auto 0;color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,112px);align-items:center}
.split--top{align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

.mark-panel{background:var(--green);aspect-ratio:48/62;max-width:420px;width:100%;margin:0 auto;display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden}
.mark-panel span{display:block;width:66%;aspect-ratio:2/1;border-radius:999px 999px 0 0;background:var(--gold)}
.mark-panel small{position:absolute;top:18%;left:0;right:0;text-align:center;font:italic 400 clamp(1.25rem,2vw,1.625rem)/1.4 var(--serif);color:var(--ivory);padding:0 12%}
@media (max-width:860px){.mark-panel{max-width:300px}}

.closing{text-align:center;padding:clamp(80px,11vw,150px) 0}
.closing h2{font-family:var(--display);font-size:clamp(2.25rem,5vw,3.75rem);line-height:1.08;margin-bottom:var(--s3)}
.closing p{max-width:46ch;margin:0 auto var(--s5);font-size:1.125rem}
.closing .orn{width:56px;height:56px}

/* ---------- Book rooms (Concept C) ---------- */
.room{position:relative;overflow:hidden;color:var(--room-text);background:var(--room-bg);padding:clamp(72px,9vw,128px) 0}
.room::before{content:"";position:absolute;inset:-40px;background:var(--room-art) center/cover no-repeat;filter:blur(36px) saturate(1.1);opacity:.32;transform:scale(1.1)}
.room::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--room-bg) 30%,transparent 100%);opacity:.9}
.room--flip::after{background:linear-gradient(270deg,var(--room-bg) 30%,transparent 100%)}
.room .wrap{position:relative;z-index:1}
.room__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,112px);align-items:center}
.room--flip .room__cover{order:2}
.room__cover .cover{max-width:400px;margin:0 auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.room .tag{color:var(--room-accent)}
.room h2,.room h3{font-family:var(--display);font-size:clamp(2.5rem,5vw,4.25rem);line-height:1;color:var(--room-head);margin:14px 0 10px}
.room h2 a,.room h3 a{text-decoration:none;color:inherit}
.room h2 a:hover,.room h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--room-accent)}
.room .sub{font-style:italic;font-size:1.25rem;margin-bottom:var(--s4);color:var(--room-text)}
.room .sub a{color:inherit;text-decoration-color:var(--room-accent)}
.room .line{font-family:var(--display);font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.3;color:var(--room-head);margin-bottom:var(--s3)}
.room p{color:var(--room-muted);max-width:52ch}
.room .meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font:500 .8125rem/1.5 var(--sans);letter-spacing:.06em;color:var(--room-text);margin:var(--s4) 0;padding:var(--s2) 0;border-top:1px solid var(--room-rule);border-bottom:1px solid var(--room-rule)}
.room .meta span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--room-accent);margin-right:10px;vertical-align:middle}
.btn--room{background:var(--room-accent);color:var(--room-bg);border-color:var(--room-accent)}
.btn--room:hover{background:var(--room-head);border-color:var(--room-head)}
.btn--ghost{color:var(--room-head);border-color:var(--room-rule);background:transparent}
.btn--ghost:hover{border-color:var(--room-head)}
.room :focus-visible{outline-color:var(--room-accent)}
.room__imprint{display:flex;align-items:center;gap:10px;margin:var(--s5) 0 0;font:600 .6875rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--room-muted)}
.room__imprint img{width:22px;height:22px}
.room .breadcrumb{color:var(--room-muted)}
.room .breadcrumb a{color:var(--room-text)}
.books-more{text-align:center;padding:clamp(48px,6vw,72px) 0;background:var(--surface);border-bottom:1px solid var(--rule)}
@media (max-width:900px){
  .room__grid{grid-template-columns:1fr}
  .room--flip .room__cover{order:0}
  .room__cover .cover{max-width:280px}
  .room::after,.room--flip::after{background:linear-gradient(180deg,transparent 0,var(--room-bg) 45%)}
}
@media (max-width:520px){.room .btn-row .btn{width:100%}}

/* ---------- Covers ---------- */
.cover{display:block;position:relative;aspect-ratio:2/3;background:var(--parchment);box-shadow:0 1px 2px rgba(0,0,0,.12),0 18px 38px -12px rgba(20,30,25,.38);overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.16) 0,rgba(255,255,255,.08) 1.2%,rgba(0,0,0,0) 3.5%);pointer-events:none}
.cover--placeholder{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;background:var(--green);color:var(--ivory);font:400 1.25rem/1.2 var(--display)}

/* ---------- Inner page head ---------- */
.page-head{padding:clamp(32px,4.5vw,56px) 0 clamp(28px,3.5vw,44px);border-bottom:1px solid var(--rule)}
.page-head + .section{padding-top:clamp(40px,5vw,72px)}
.page-head h1{font-family:var(--display);font-size:clamp(2.25rem,4.6vw,3.75rem);line-height:1.06;max-width:24ch;margin-bottom:var(--s2)}
.page-head .eyebrow{margin-bottom:12px}
.page-head .lede{max-width:52ch;color:var(--ink);margin:0}
.page-head--center{text-align:center}
.page-head--center h1,.page-head--center .lede{margin-left:auto;margin-right:auto}
.breadcrumb{font:500 .875rem/1.4 var(--sans);color:var(--muted);margin:0 0 var(--s3)}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li+li::before{content:"\203A";margin-right:6px;color:var(--gold)}
.breadcrumb a{color:var(--green);text-decoration:none;display:inline-block;padding:4px 0}
.breadcrumb a:hover{text-decoration:underline;text-decoration-color:var(--gold)}

/* ---------- Prose ---------- */
.prose{max-width:66ch}
.prose h2{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.15;margin:var(--s6) 0 var(--s3)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;margin:var(--s5) 0 var(--s2)}
.prose li{margin-bottom:.5em}
.prose blockquote{margin:var(--s4) 0;padding-left:var(--s3);border-left:1px solid var(--gold);font-family:var(--display);font-size:1.5rem;line-height:1.35;color:var(--green)}
.callout{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--gold);padding:var(--s3) var(--s4);margin:var(--s4) 0}
.callout p:last-child{margin:0}
.todo{background:#FBF1D0;border:1px dashed #B8962E;color:#3A2E0B;padding:var(--s2) var(--s3);font:400 .9375rem/1.6 var(--sans);margin:var(--s3) 0}
.todo strong{font-weight:700}
.placeholder{background:#FBF1D0;border-bottom:1px dashed #B8962E;padding:0 4px;font-family:var(--sans);font-size:.92em}

/* ---------- Catalogue ---------- */
.shelf-group+.shelf-group{margin-top:clamp(56px,8vw,96px)}
.shelf-group__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);border-top:1px solid var(--gold);padding-top:var(--s2);margin-bottom:var(--s5)}
.shelf-group__head h2{font:600 .8125rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--deepgold)}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr));gap:clamp(40px,5vw,72px) clamp(24px,4vw,56px)}
.book-card{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:0 clamp(20px,3vw,40px);align-items:start}
.book-card .cover{grid-row:1 / span 9}
@media (max-width:520px){.book-card{grid-template-columns:1fr}.book-card .cover{grid-row:auto;max-width:220px}}
.book-card .cover{margin-bottom:var(--s3);transition:transform .35s var(--ease)}
.book-card>*:not(.cover){grid-column:2}
@media (max-width:520px){.book-card>*:not(.cover){grid-column:1}}
.book-card:hover .cover{transform:translateY(-6px)}
.book-card h3{font-family:var(--display);font-size:1.75rem;line-height:1.15;margin:6px 0 4px}
.book-card h3 a{text-decoration:none}
.book-card h3 a::after{content:"";position:absolute;inset:0}
.book-card{position:relative}
.book-card .by{font:600 .75rem var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:0 0 var(--s2)}
.book-card .series-line{font-style:italic;color:var(--muted);margin:0 0 4px}
.book-card p.short{font-size:1rem;margin-bottom:var(--s2)}
.status{display:inline-flex;align-items:center;gap:8px;font:500 .8125rem/1.4 var(--sans);color:var(--muted)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.room .status{color:var(--room-text)}
.room .status::before{background:var(--room-accent)}

/* ---------- Book page ---------- */
.book-hero .room__grid{align-items:start}
.book-hero h1{font-family:var(--display);font-size:clamp(2.75rem,6vw,5rem);line-height:1;color:var(--room-head);margin:14px 0 10px}
.book-hero .actions{margin-top:var(--s4)}
.book-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px)}
.book-body aside{align-self:start;position:sticky;top:24px}
@media (max-width:900px){.book-body{grid-template-columns:1fr}.book-body aside{position:static}}
.details{font:400 .9375rem/1.5 var(--sans);margin:0;border-top:1px solid var(--gold)}
.details div{display:grid;grid-template-columns:118px 1fr;gap:var(--s2);padding:12px 0;border-bottom:1px solid var(--rule)}
.details dt{color:var(--muted);font-weight:500}
.details dd{margin:0}
.details--terms div{grid-template-columns:minmax(118px,200px) 1fr}
.details--terms dt{color:var(--green);font-weight:600}
.themes{list-style:none;padding:0;margin:0}
.themes li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--rule)}
.themes li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:7px;border-radius:14px 14px 0 0;background:var(--gold)}
.plates{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s5) 0}
.plates figure{margin:0}
.plates img{width:100%;aspect-ratio:4/5;object-fit:cover}
.plates figcaption{font:400 .8125rem/1.5 var(--sans);color:var(--muted);margin-top:8px}
@media (max-width:520px){.plates{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--rule);padding:clamp(24px,3vw,36px)}
.card h3{font-family:var(--display);font-size:1.625rem;line-height:1.2;margin-bottom:var(--s2)}
.order{list-style:none;margin:0;padding:0;counter-reset:ord}
.order li{counter-increment:ord;display:grid;grid-template-columns:56px 1fr;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.order li::before{content:counter(ord);display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50% 50% 0 0;background:var(--green);color:var(--ivory);font:400 1.375rem var(--display)}
.order b{display:block;font:400 1.375rem/1.25 var(--display);color:var(--green)}
.order b a{text-decoration:none;color:inherit}
.order b a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.order span{color:var(--muted);font-size:.9375rem}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 var(--s5);margin:0;padding:0;list-style:none}
.people li{padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.people b{display:block;font:400 1.25rem/1.3 var(--display);color:var(--green)}
.people span{color:var(--muted);font-size:.9375rem}
.wide-art{margin:0;position:relative}
.wide-art img{width:100%;aspect-ratio:1322/586;object-fit:cover}

/* ---------- Buying ---------- */
.buy{border-top:1px solid var(--gold)}
.buy__row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule);align-items:start}
.buy__row h3{font:600 .875rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:4px}
.buy__facts{font:400 .875rem/1.6 var(--sans);color:var(--muted);margin:0}
.buy__where{display:grid;gap:var(--s2)}
.buy__label{display:block;font:600 .6875rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--deepgold);margin-bottom:6px}
.buy__none{font:400 .875rem/1.5 var(--sans);color:var(--muted);margin:0}
.buy .btn{min-height:44px;padding:10px 18px;font-size:.75rem}
@media (max-width:760px){.buy__row{grid-template-columns:1fr;gap:var(--s2)}}
.listing{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,5vw,72px);padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid var(--rule)}
.listing:first-of-type{padding-top:0}
.listing .cover{max-width:240px}
.listing h2{font-family:var(--display);font-size:clamp(2rem,3.6vw,2.75rem);line-height:1.1;margin:8px 0 4px}
.listing h2 a{text-decoration:none}
@media (max-width:640px){.listing{grid-template-columns:1fr}.listing .cover{max-width:200px}}
.two-ways{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s6)}
@media (max-width:760px){.two-ways{grid-template-columns:1fr}}

/* ---------- Publishing ---------- */
.approaches{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
.approach{background:var(--surface);border:1px solid var(--rule);padding:clamp(28px,4vw,48px);display:flex;flex-direction:column}
.approach--green{background:var(--green);border-color:var(--green);color:var(--on-dark)}
.approach--green h3{color:var(--ivory)}
.approach--green p{color:var(--on-dark-muted)}
.approach h3{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.12;margin-bottom:var(--s2)}
.approach .for{font-style:italic;margin-bottom:var(--s3)}
.approach .btn{margin-top:auto;align-self:flex-start}
.approach .note{font:400 .875rem/1.6 var(--sans);border-top:1px solid var(--rule);padding-top:var(--s2);margin-top:var(--s2)}
.approach--green .note{border-top-color:rgba(244,240,230,.2)}
@media (max-width:860px){.approaches{grid-template-columns:1fr}}
.areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 var(--s5)}
.areas li{padding:var(--s3) 0 var(--s3) 40px;border-bottom:1px solid var(--rule);position:relative}
.areas li::before{content:"";position:absolute;left:0;top:30px;width:20px;height:10px;border-radius:20px 20px 0 0;background:var(--gold)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);counter-reset:step;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:var(--gold)}
.steps li{position:relative;counter-increment:step}
.steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50% 50% 0 0;background:var(--green);color:var(--ivory);font:400 1.375rem var(--display);margin-bottom:var(--s3);position:relative}
.steps h3{font:600 .8125rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.steps p{font-size:.9375rem;color:var(--muted);margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:var(--s5)}.steps::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Forms ---------- */
.form-panel{background:var(--surface);border:1px solid var(--rule);padding:clamp(24px,4vw,56px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.field label,.field legend{display:block;font:600 .875rem/1.4 var(--sans);color:var(--ink);margin-bottom:8px;padding:0}
.field .hint{display:block;font:400 .8125rem/1.5 var(--sans);color:var(--muted);margin:-4px 0 8px}
.req{color:var(--error)}
.field input[type=text],.field input[type=email],.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;font:400 1rem/1.5 var(--sans);color:var(--ink);background:#fff;border:1px solid #8C8B82;border-radius:0;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183D32' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(122,101,54,.35)}
.field [aria-invalid="true"]{border-color:var(--error)}
.field .error{display:block;font:600 .8125rem/1.5 var(--sans);color:var(--error);margin-top:6px}
.field .error:empty{display:none}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:4px var(--s3)}
@media (max-width:640px){.checks{grid-template-columns:1fr}}
.field label.check,.check{display:flex;font-weight:400;color:var(--ink);margin:0;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;font:400 .9375rem/1.5 var(--sans);cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--green)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-fine{font:400 .8125rem/1.6 var(--sans);color:var(--muted);margin:var(--s2) 0 0}
.form-status{margin-top:var(--s3);padding:var(--s2) var(--s3);font:500 .9375rem/1.5 var(--sans)}
.form-status[data-state="ok"]{background:#E5EFE8;color:var(--success);border-left:3px solid var(--success)}
.form-status[data-state="error"]{background:#F6E6E1;color:var(--error);border-left:3px solid var(--error)}
.form-status[data-state="busy"]{background:var(--parchment);color:var(--ink)}
.error-summary{background:#F6E6E1;border-left:3px solid var(--error);padding:var(--s2) var(--s3);margin-bottom:var(--s3);font:400 .9375rem/1.5 var(--sans)}
.error-summary h3{font:600 1rem var(--sans);color:var(--error);margin-bottom:6px}
.error-summary ul{margin:0}
.error-summary a{color:var(--error)}
.turnstile-slot{min-height:66px;margin-top:var(--s2)}

/* ---------- Clear Language Approach ---------- */
.clear-quote{margin:0;padding:var(--s4) 0 var(--s4) var(--s4);border-left:2px solid var(--gold);font:400 clamp(1.75rem,3vw,2.5rem)/1.25 var(--display);color:var(--green)}
.clear-quote__after{padding-left:calc(var(--s4) + 2px);font-style:italic;color:var(--muted)}
.aims-title{font:600 .8125rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--deepgold);margin-bottom:var(--s3)}
.aims{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--s3)}
.aims li{position:relative;background:var(--ivory);border:1px solid var(--rule);padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 28px);line-height:1.6}
.aims li::before{content:"";position:absolute;left:var(--s4);top:calc(var(--s4) + 8px);width:18px;height:9px;border-radius:18px 18px 0 0;background:var(--gold)}
.aims b{display:block;font:400 1.375rem/1.25 var(--display);color:var(--green);margin-bottom:6px}
.aims-note{max-width:66ch;margin:var(--s5) auto 0;text-align:center;font-size:1.125rem;font-style:italic;color:var(--green)}
.cl-commit p{margin:0 auto var(--s2);max-width:58ch}
.closing .cl-final{font:400 clamp(1.5rem,2.6vw,2.125rem)/1.3 var(--display);color:var(--ivory);max-width:28ch;margin-top:var(--s4)}
.closing .cl-sign{font:600 .8125rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.closing .cl-sign em{font:italic 400 1.0625rem var(--serif);letter-spacing:0;text-transform:none;color:var(--ivory)}
.clear-summary .points{list-style:none;margin:var(--s4) 0;padding:0;display:grid;gap:0}
.clear-summary .points li{padding:14px 0 14px 32px;border-bottom:1px solid var(--rule);position:relative}
.clear-summary .points li::before{content:"";position:absolute;left:0;top:24px;width:16px;height:8px;border-radius:16px 16px 0 0;background:var(--gold)}
.clear-summary .points b{font-weight:700;color:var(--green)}


.empty{max-width:640px;margin:0 auto;text-align:center;padding:var(--s4) 0}
.empty h2{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.375rem);margin-bottom:var(--s2)}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{display:grid;grid-template-columns:160px 1fr;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.post-list time{font:500 .8125rem var(--sans);letter-spacing:.08em;color:var(--muted)}
.post-list h2{font-family:var(--display);font-size:1.875rem;line-height:1.15;margin-bottom:8px}
.post-list h2 a{text-decoration:none}
@media (max-width:640px){.post-list li{grid-template-columns:1fr;gap:6px}}
.topics{list-style:none;padding:0;margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.topics li{font:500 .8125rem var(--sans);letter-spacing:.06em;border:1px solid var(--rule);padding:8px 14px;background:var(--surface)}

/* ---------- Footer ---------- */
.site-footer{background:var(--green);color:var(--on-dark-muted);font:400 .9375rem/1.7 var(--sans);padding:var(--s6) 0 var(--s4);border-top:1px solid rgba(244,240,230,.12)}
.site-footer h2{font:600 .75rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer a{text-decoration:none;color:var(--ivory);display:inline-block;padding:5px 0}
.site-footer a:hover{color:var(--gold);text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s5)}
.footer-logo{width:260px;margin-bottom:18px}
.footer-legal{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid rgba(244,240,230,.16);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);font-size:.8125rem}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>:first-child{grid-column:1/-1}}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .reveal.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media (max-width:480px){.hero__ctas .btn,.closing .btn{width:100%}}
@media print{.site-header,.site-footer,.skip,.draft-bar{display:none}.room{background:#fff!important;color:#000}.room::before,.room::after{display:none}}

/* Home page: the featured books, one at a time. Every slide shares one grid cell, so the carousel is as tall as the tallest. */
.carousel{position:relative}
.carousel__track{display:grid}
.carousel__slide{grid-area:1/1;min-width:0}
.carousel .room{height:100%;padding-bottom:clamp(104px,11vw,148px);display:flex;flex-direction:column;justify-content:center}
.carousel .room .reveal{opacity:1;transform:none}
.carousel__dots{display:none}
.carousel.is-ready .carousel__slide{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.carousel.is-ready .carousel__slide.is-active{opacity:1;visibility:visible;transition:opacity .6s var(--ease),visibility 0s}
.carousel.is-ready .carousel__dots{display:flex;justify-content:center;gap:4px}
.carousel__foot{display:none}
.carousel.is-ready .carousel__foot{position:absolute;left:0;right:0;bottom:clamp(18px,2.25vw,28px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px}
.carousel.is-ready ~ .books-more{display:none}
.carousel__dot{width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.carousel__dot::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1.5px solid var(--dot,#fff);opacity:.7;transition:background .3s,opacity .3s}
.carousel__dot[aria-current="true"]::before{background:var(--dot,#fff);opacity:1}
.carousel__dot:hover::before{opacity:1}
.carousel__dot:focus-visible{outline:2px solid var(--dot,#fff);outline-offset:-2px;border-radius:50%}
@media (prefers-reduced-motion:reduce){.carousel.is-ready .carousel__slide,.carousel.is-ready .carousel__slide.is-active{transition:none}}

/* The same arrow as "Explore", turned to point left and right. */
.carousel__arrow{display:none;position:absolute;z-index:2;top:50%;width:48px;height:48px;margin-top:-24px;padding:0;border:0;background:none;cursor:pointer;color:var(--gold);align-items:center;justify-content:center;transition:color .2s,transform .3s var(--ease)}
.carousel__arrow svg{width:26px;height:26px}
.carousel__arrow--prev{left:clamp(8px,2vw,32px)}
.carousel__arrow--next{right:clamp(8px,2vw,32px)}
.carousel__arrow--prev svg{transform:rotate(90deg)}
.carousel__arrow--next svg{transform:rotate(-90deg)}
.carousel__arrow:hover{color:#CDB27A}
.carousel__arrow--prev:hover{transform:translateX(-3px)}
.carousel__arrow--next:hover{transform:translateX(3px)}
.carousel__arrow:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:50%}
.carousel.is-ready .carousel__arrow{display:flex}
@media (max-width:900px){
  .carousel__arrow{top:auto;bottom:calc(clamp(18px,2.25vw,28px) + 60px);margin-top:0}
  .carousel__arrow--prev{left:calc(50% - 104px)}
  .carousel__arrow--next{right:calc(50% - 104px)}
}

/* Pause: sits at the end of the dots, in the same colour. */
.carousel__pause{width:32px;height:32px;margin:0;padding:0;border:0;background:none;cursor:pointer;color:var(--dot,#fff);display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .2s}
.carousel__pause:hover{opacity:1}
.carousel__pause svg{width:16px;height:16px}
.carousel__pause .i-play{display:none}
.carousel__pause[aria-pressed="true"] .i-pause{display:none}
.carousel__pause[aria-pressed="true"] .i-play{display:block}
.carousel__pause:focus-visible{outline:2px solid var(--dot,#fff);outline-offset:-2px;border-radius:50%}

/* Home page spacing: the book sections, the commitment and Publishing with Us sit closer together. */
.carousel .room{justify-content:flex-start;padding-top:clamp(28px,3.4vw,48px);padding-bottom:clamp(134px,12vw,155px)}
.carousel .room__imprint{margin-top:var(--s3)}
.is-home .cl-commit{padding-top:clamp(40px,5.5vw,75px);padding-bottom:clamp(40px,5.5vw,75px)}
.is-home #publishing{padding-top:calc(var(--section) / 2);padding-bottom:calc(var(--section) / 2)}

/* The foot of the introduction echoes the foot of the arch: the same soft golden glow rising from the bottom edge,
   with "Explore" and its arrow above it, in Deep Gold on the ivory. Everything stays wholly inside this section. */
.is-home #intro{position:relative;overflow:hidden;padding-top:calc(var(--section) * .375);padding-bottom:clamp(150px,15vw,200px)}
.is-home #intro::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(454px,66vw);aspect-ratio:2/1;border-radius:999px 999px 0 0;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(180,154,98,.34),rgba(180,154,98,.10) 60%,rgba(180,154,98,0) 100%)}
.intro__explore{position:absolute;z-index:1;left:0;right:0;bottom:clamp(30px,3.4vw,44px);margin:0 auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0 12px;font:600 1.1875rem/1 var(--sans);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;text-decoration:none;color:var(--deepgold);transition:opacity .7s var(--ease),transform .7s var(--ease),color .2s}
.intro__explore svg{display:block;overflow:visible}
@media (prefers-reduced-motion:no-preference){.intro__explore .nudge{animation:nudge 2.6s ease-in-out 1.2s infinite}}
.intro__explore:hover{color:var(--ink)}
.intro__explore:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:2px}
.js .intro__explore.reveal.is-in.passed{opacity:0;transform:translateY(-8px);pointer-events:none}

/* Wide screens: a cover, smaller than the ones at the top, tumbles down the left of a section (The Shadows of War
   in the introduction, The Star of Promise in About) once enough of it is on screen, and rests where it lands.
   The section clips it, so it falls in from the section's own top edge. */
.is-home #about,.is-home .closing.has-book{position:relative;overflow:hidden}
.is-home #about{padding-top:calc(var(--section) * 2 / 3);padding-bottom:calc(var(--section) * 2 / 3)}
.intro__book{display:none}
@media (min-width:1180px){
  .intro__book{display:block;position:absolute;z-index:1;--bw:clamp(118px,9.5vw,168px);width:var(--bw);top:34%;
    left:max(24px,calc(50% - 380px - var(--bw) - clamp(0px,(100vw - 1180px) * .12,110px)))}
  .intro__book-link{display:block;text-decoration:none;color:var(--ink);transform:rotate(-4deg);transition:transform .45s var(--ease)}
  .intro__book .cover{box-shadow:0 2px 4px rgba(41,42,39,.18),0 22px 38px -16px rgba(41,42,39,.45)}
  .intro__book-link:hover,.intro__book-link:focus-visible{transform:rotate(0deg) translateY(-6px) scale(1.04)}
  .intro__book-link:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
  .intro__book-label{display:block;margin-top:12px;font:500 .75rem/1.4 var(--sans);letter-spacing:.06em;color:var(--muted,#5b5c56);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
  .intro__book-label b{display:block;font:400 1.0625rem/1.25 var(--display);letter-spacing:0;color:var(--ink);margin-bottom:2px}
  .intro__book-link:hover .intro__book-label,.intro__book-link:focus-visible .intro__book-label{opacity:1;transform:none}
  /* The same cover on the right, in the dark closing section: mirrored tilt, light label. */
  .intro__book--right{left:auto;right:max(24px,calc(50% - 380px - var(--bw) - clamp(0px,(100vw - 1180px) * .12,110px)))}
  .intro__book--right .intro__book-link{transform:rotate(4deg)}
  .intro__book--right .intro__book-link:hover,.intro__book--right .intro__book-link:focus-visible{transform:rotate(0deg) translateY(-6px) scale(1.04)}
  .intro__book--right .intro__book-link{color:var(--ivory)}
  .intro__book--right .intro__book-label{color:rgba(241,233,210,.8)}
  .intro__book--right .intro__book-label b{color:var(--ivory)}
  .intro__book--right .intro__book-link:focus-visible{outline-color:var(--gold)}
}
@media (min-width:1180px) and (prefers-reduced-motion:no-preference){
  /* Before the fall: above the section, out of sight (the section clips it). */
  .js .intro__book{opacity:0;transform:translateY(-440px) rotate(-14deg)}
  .js .has-book.books-in .intro__book{animation:tumble-soft 1.7s cubic-bezier(.3,.05,.25,1) both}
  @keyframes tumble-soft{
    0%{transform:translateY(-440px) rotate(-14deg);opacity:1}
    68%{transform:translateY(9px) rotate(1.5deg)}
    84%{transform:translateY(-3px) rotate(-.6deg)}
    100%{transform:none;opacity:1}
  }
  .js .intro__book--right{transform:translateY(-440px) rotate(14deg)}
  .js .has-book.books-in .intro__book--right{animation-name:tumble-soft-right}
  @keyframes tumble-soft-right{
    0%{transform:translateY(-440px) rotate(14deg);opacity:1}
    68%{transform:translateY(9px) rotate(-1.5deg)}
    84%{transform:translateY(-3px) rotate(.6deg)}
    100%{transform:none;opacity:1}
  }
}