/* Hanseby.com — built from the Hanseby design system (tokens.json + components/bundle.css).
   Every colour, size and space comes from the tokens below. */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/eb-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/eb-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/eb-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --paper:#fbfaf6; --parchment:#f2eadc; --band:#f3e6d6; --line:#d8ccba;
  --ink:#15110d; --ink-soft:#54483c; --story-red:#a93535; --oxblood:#6e1f14; --on-oxblood:#fbfaf6;
  --leather:#331e11; --gold:#e0bb94; --night:#141b26; --on-night:#f2eadc; --device:#dcdcde; --scrim:rgba(21,17,13,.55);
  --font-display:"EB Garamond",Garamond,Georgia,serif;
  --font-sans:"Source Sans 3","Source Sans Pro","Segoe UI",system-ui,sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --radius-0:0;--radius-sm:2px;--radius-device:28px;--radius-round:999px;
  --shadow-paper:0 1px 2px rgba(21,17,13,.08),0 8px 24px rgba(21,17,13,.08);
  --shadow-device:0 24px 48px rgba(21,17,13,.25);
  --page-max:1440px;--content-max:1160px;--prose-max:640px;
  --nav-h:64px;
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-snap-type:y proximity;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:13px;line-height:21px;overflow-x:hidden}
body.ground-parchment{background:var(--parchment) url(/assets/img/paper-texture.webp) repeat;background-size:900px}
img{max-width:100%;height:auto}
a{color:var(--story-red);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:400;text-wrap:balance;font-feature-settings:"liga","dlig"}
p{margin:0 0 var(--space-3)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:var(--space-2) var(--space-4)}
.skip:focus{top:var(--space-2)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--space-6)}
.prose{max-width:var(--prose-max)}
.snap{scroll-snap-align:start}
@media (max-width:640px){.wrap{padding-inline:var(--space-4)}}

/* type styles */
.t-display-l{font-family:var(--font-display);font-size:clamp(36px,4.6vw,56px);line-height:1.1;font-weight:400;margin:0}
.t-heading{font-family:var(--font-display);font-size:32px;line-height:38px;font-weight:400;margin:0 0 var(--space-4)}
.t-lede{font-family:var(--font-display);font-size:26px;line-height:40px}
.t-body-serif{font-family:var(--font-display);font-size:15px;line-height:23px}
.q{font-weight:600;margin:var(--space-5) 0 var(--space-1)}
h2.q,h3.q{font-family:var(--font-sans);font-size:13px;line-height:21px}
.label{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.caption{font-size:12px;line-height:17px;color:var(--ink-soft)}
.editions{list-style:none;padding:0;margin:0 0 var(--space-4)}
.editions li{margin:0 0 var(--space-1)}
.editions b{font-weight:600}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-5);font-family:var(--font-display);font-size:16px;line-height:24px}
.cta a{color:var(--ink);text-decoration:underline}
.cta a:hover{color:var(--story-red)}
.cta .bar{color:var(--line)}
@media (max-width:640px){.t-lede{font-size:20px;line-height:30px}}

/* ---------- Button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-size:18px;line-height:24px;font-weight:500;text-decoration:none;cursor:pointer;border-radius:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:7px var(--space-5);transition:background-color .15s ease,color .15s ease;min-height:44px}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--primary{background:var(--oxblood);border-color:var(--oxblood);color:var(--on-oxblood)}
.btn--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--lg{font-size:24px;line-height:30px;padding:12px var(--space-6)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn--on-night{border-color:var(--on-night);color:var(--on-night)}
.btn--on-night:hover{background:var(--on-night);color:var(--night)}

/* ---------- NavBar ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(251,250,246,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.ground-parchment .nav{background:rgba(242,234,220,.94)}
.nav__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4);max-width:var(--page-max);margin-inline:auto;padding:var(--space-2) var(--space-6);min-height:var(--nav-h)}
.nav__home{justify-self:start;display:inline-flex;padding:var(--space-1)}
.nav__home img{width:34px;height:auto;display:block}
.nav__logo{display:block}
.nav__logo img{display:block;height:26px;width:auto}
.nav__tools{justify-self:end;display:flex;align-items:center;gap:var(--space-4)}
.nav__lang{display:inline-flex;align-items:center;gap:var(--space-1);font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em}
.nav__lang a{color:var(--ink-soft);text-decoration:none;padding:var(--space-2) var(--space-1)}
.nav__lang a+a::before{content:"|";color:var(--line);margin-right:var(--space-2)}
.nav__lang a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.nav__key{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--ink);text-decoration:none;font-family:var(--font-display);font-size:18px;padding:var(--space-1)}
.nav__key img{height:34px;width:auto;display:block}
.nav__key .key-on{display:none}
.signed-in .nav__key .key-on{display:block}
.signed-in .nav__key .key-off{display:none}
.nav__key .lbl-in{display:none}
.signed-in .nav__key .lbl-in{display:inline}
.signed-in .nav__key .lbl-out{display:none}
.nav__menu{background:none;border:0;cursor:pointer;padding:var(--space-2);display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav__menu img{width:26px;height:auto;display:block}
.nav__panel{position:absolute;right:var(--space-6);top:100%;z-index:40;background:var(--paper);border:1px solid var(--ink);min-width:280px;padding:var(--space-3) 0;box-shadow:var(--shadow-paper)}
.nav__panel[hidden]{display:none}
.nav__panel a{display:block;padding:var(--space-2) var(--space-5);color:var(--ink);text-decoration:none;font-family:var(--font-display);font-size:22px;line-height:32px}
.nav__panel a:hover,.nav__panel a[aria-current="page"]{color:var(--story-red)}
.nav__panel hr{border:0;border-top:1px solid var(--line);margin:var(--space-2) var(--space-5)}
.nav__panel .small{font-size:18px;line-height:26px}
@media (max-width:640px){
  :root{--nav-h:56px}
  .nav__bar{padding-inline:var(--space-4);gap:var(--space-2)}
  .nav__logo img{height:18px}
  .nav__home img,.nav__key img{height:26px;width:auto}
  .nav__key span{display:none!important}
  .nav__tools{gap:var(--space-2)}
  .nav__panel{left:var(--space-4);right:var(--space-4);min-width:0}
}

/* ---------- PageTitle ---------- */
.title{text-align:center;padding:var(--space-8) var(--space-4) var(--space-6)}
.title h1,.title h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(44px,6vw,76px);line-height:1.05;letter-spacing:-.01em}
.title p{margin:var(--space-3) auto 0;max-width:var(--prose-max);font-family:var(--font-display);font-size:21px;line-height:30px;color:var(--ink-soft)}

/* ---------- SceneBand ---------- */
.band{background:var(--band);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center}
.band__art{align-self:stretch;min-height:260px}
.band__art img{display:block;width:100%;height:100%;object-fit:cover}
.band__text{padding:var(--space-7) var(--space-6);font-family:var(--font-display);font-size:26px;line-height:40px;max-width:30ch}
.band__text p{margin:0 0 var(--space-3)}
@media (max-width:760px){
  .band{grid-template-columns:minmax(0,1fr)}
  .band__art{min-height:0}
  .band__text{font-size:20px;line-height:30px;padding:var(--space-5) var(--space-4) var(--space-6)}
}
.bleed{display:block;width:100%;height:auto}
.bleed-wrap{background:var(--band)}

/* ---------- ProductCard ---------- */
.grid{display:grid;gap:var(--space-7) var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.card{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:left;min-width:0}
.card__media{width:100%;display:flex;justify-content:center;align-items:center;min-height:200px}
.card__media img{display:block;max-width:100%;height:auto}
.card__media--book img{border-radius:var(--radius-sm);box-shadow:var(--shadow-paper)}
.card__media--tablet{background:var(--ink);padding:12px;border-radius:var(--radius-device);box-shadow:var(--shadow-device)}
.card__media--tablet img{border-radius:12px;width:100%}
.card__media--crop img{width:100%;box-shadow:none}
.card__media--plain img{max-height:340px;width:auto;background:#fff;box-shadow:var(--shadow-paper)}
.card__media--cutout{min-height:260px}
.card__media--cutout img{max-height:300px;width:auto}
.card__body{width:100%}
.card__format{display:block;font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--space-1)}
.card__title{margin:0;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:30px}
.card__desc{margin:var(--space-2) 0 0;font-family:var(--font-display);font-size:15px;line-height:23px}
.card__price{margin:var(--space-2) 0 0;font-family:var(--font-display);font-size:22px;line-height:28px;font-variant-numeric:tabular-nums}
.card__action{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-2);width:100%}
.card__action .row{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}
.card__note{font-size:12px;line-height:17px;color:var(--ink-soft);text-align:center}
.card .notify{width:100%}

/* ---------- ComingSoon ---------- */
.coming{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:var(--space-2) var(--space-4);border-block:1.5px solid var(--ink);padding:var(--space-5) var(--space-4);text-align:center;font-family:var(--font-display);font-size:30px;line-height:38px;max-width:var(--content-max);margin:var(--space-8) auto}
.coming__label{font-style:italic}
.coming__items{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-4)}
.coming__items span+span::before{content:"·";margin-right:var(--space-4);color:var(--story-red)}
.coming a{color:var(--story-red);font-size:18px}
@media (max-width:640px){.coming{font-size:22px;line-height:30px;margin-inline:var(--space-4)}}

/* ---------- NotifyForm ---------- */
.notify{max-width:480px}
.notify__label{display:block;font-weight:600;margin-bottom:var(--space-2)}
.notify__row{display:flex;gap:var(--space-2);flex-wrap:wrap}
.notify input,.field input,.field textarea,.field select{flex:1 1 220px;min-width:0;font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:0;padding:7px var(--space-3);min-height:44px}
.notify__privacy{margin:var(--space-2) 0 0;font-size:12px;line-height:17px;color:var(--ink-soft)}
.notify__done{font-family:var(--font-display);font-size:21px;line-height:30px;margin:0}
.form-msg{font-family:var(--font-display);font-size:19px;line-height:28px;margin-top:var(--space-3)}
.form-msg.err{color:var(--story-red)}
.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.field label{font-weight:600}
.field textarea{min-height:160px;resize:vertical}
.hp{position:absolute;left:-9999px}

/* ---------- FAQ ---------- */
.faq{position:relative;max-width:760px;margin:var(--space-8) auto var(--space-9);padding-inline:var(--space-4)}
.faq__title{margin:0 0 var(--space-4);text-align:center;font-family:var(--font-display);font-weight:400;font-size:32px;line-height:38px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:24px;line-height:28px;color:var(--story-red)}
.faq details[open] summary::after{content:"–"}
.faq__a{margin:0;padding:0 0 var(--space-4);max-width:var(--prose-max)}
.faq__mascot{position:absolute;right:-210px;bottom:-24px;width:200px;height:auto;pointer-events:none}
.faq__mascot--left{right:auto;left:-220px}
@media (max-width:1240px){.faq__mascot,.faq__mascot--left{position:static;display:block;width:150px;margin:var(--space-5) auto 0}}

/* ---------- ReadMore ---------- */
.readmore>button{display:inline-flex;align-items:center;gap:var(--space-2);background:none;border:0;padding:var(--space-2) 0;cursor:pointer;color:var(--story-red);font-family:var(--font-sans);font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;min-height:44px}
.readmore__glyph{font-size:18px;letter-spacing:0}
.readmore__body{margin-top:var(--space-2)}
.readmore__body[hidden]{display:none}

/* ---------- VideoPlayer ---------- */
.video{position:relative;width:100%;aspect-ratio:16/9;background:var(--night);overflow:hidden}
.video img,.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:var(--radius-round);border:2px solid var(--on-night);background:var(--scrim);color:var(--on-night);cursor:pointer;display:grid;place-items:center}
.video__play svg{width:30px;height:30px;margin-left:5px;fill:currentColor}
.video__play:focus-visible{outline-color:var(--on-night)}
.video__cap{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}
.video__note{font-size:14px;line-height:20px;color:var(--ink-soft);text-align:center}

/* ---------- Corner marks ---------- */
.marks{position:relative;max-width:var(--page-max);margin-inline:auto;height:110px;pointer-events:none}
.marks__mouse{position:absolute;left:var(--space-7);bottom:var(--space-4);height:96px;width:auto}
.marks__icons{position:absolute;right:var(--space-7);bottom:var(--space-4);display:flex;gap:var(--space-4);align-items:flex-end}

@media (max-width:640px){.marks{height:80px}.marks__mouse{left:var(--space-4);height:64px}.marks__icons{right:var(--space-4)}.marks__icons img{height:32px}}

/* ---------- Footer ---------- */
.footer{background:var(--paper);border-top:1.5px solid var(--ink);margin-top:var(--space-8);padding:var(--space-8) 0 var(--space-6);font-size:13px;line-height:21px}
.ground-parchment .footer{background:transparent}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:var(--space-6)}
.footer__brand img{height:22px;width:auto;margin-bottom:var(--space-3)}
.footer h2{font-family:var(--font-sans);font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--space-3)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:0 0 var(--space-1)}
.footer a{color:var(--ink);text-decoration:none}
.footer a:hover{text-decoration:underline;color:var(--story-red)}
.footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);border-top:1px solid var(--line);margin-top:var(--space-7);padding-top:var(--space-4);color:var(--ink-soft);font-size:14px;line-height:20px}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ======================= HOME ======================= */

/* Quote band */
.quote{text-align:center;margin:0;padding-top:var(--space-9)}
.quote blockquote{margin:0 auto;max-width:24ch;padding-inline:var(--space-4);font-family:var(--font-display);font-weight:500;font-size:clamp(32px,4.4vw,52px);line-height:1.15;position:relative;z-index:1}
.quote__band{background:var(--band);margin-top:calc(-1 * clamp(20px,2.6vw,34px));padding-top:var(--space-7)}
.quote__band img{display:block;width:100%;max-width:var(--content-max);margin:0 auto}

/* Town map in a monitor */
.town-sec{padding:var(--space-9) var(--space-4) 0}
.town{position:relative;max-width:1170px;margin-inline:auto;padding-top:64px}
.town__peek{position:absolute;left:50%;bottom:calc(100% - 2px);transform:translate(-50%,0);width:150px;height:auto;z-index:-1;transition:transform .9s cubic-bezier(.23,1,.32,1) .2s}
html.js .town:not(.in) .town__peek{transform:translate(-50%,70%)}
.town__screen{position:relative;z-index:0;isolation:isolate;background:#1b1d22;padding:16px 16px 0;border-radius:18px 18px 0 0;box-shadow:var(--shadow-device)}
.town__stage{position:relative;aspect-ratio:2752/1536;overflow:hidden;background:#0a1230}
.town__stage img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.town__stage .lit{opacity:0;-webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--x) var(--y),#000 55%,transparent 100%);mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--x) var(--y),#000 55%,transparent 100%);transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
.town__stage .lit.on{opacity:1;transition:opacity .65s cubic-bezier(.2,.8,.2,1)}
.town__stage svg{position:absolute;inset:0;width:100%;height:100%}
.town__stage polygon{fill:transparent}
.town__stage a:focus-visible polygon{stroke:var(--gold);stroke-width:5;stroke-dasharray:14 9}
.town__label{position:absolute;transform:translate(-50%,-100%);padding:.3em .9em;background:var(--night);color:var(--on-night);font-family:var(--font-display);font-size:clamp(14px,1.6vw,22px);white-space:nowrap;border:1px solid var(--gold);opacity:0;pointer-events:none;transition:opacity .3s}
.town__label.show{opacity:1}
.town__sound{position:absolute;right:1.6%;bottom:2.4%;width:44px;height:44px;border-radius:50%;border:1px solid rgba(224,187,148,.5);background:rgba(20,27,38,.7);color:var(--on-night);cursor:pointer;display:grid;place-items:center;padding:0}
.town__sound svg{width:22px;height:22px}
.town__sound .waves{opacity:0}.town__sound.on .waves{opacity:1}.town__sound.on .mute{opacity:0}
.town__chin{background:linear-gradient(#e6e6e8,var(--device));border-radius:0 0 18px 18px;text-align:center;padding:var(--space-5) var(--space-4);font-family:var(--font-display);font-size:26px;line-height:32px;color:var(--ink)}
.town__stand{display:block;margin:0 auto;width:min(30%,344px);height:auto}
.town__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-5);margin-top:var(--space-4);font-family:var(--font-display);font-size:20px}
.town__links a{color:var(--ink)}
@media (max-width:640px){.town__chin{font-size:18px;line-height:24px}.town{padding-top:44px}.town__peek{width:100px}.town__screen{padding:8px 8px 0}}

/* Home sections */
.hsec{position:relative;max-width:var(--page-max);margin:var(--space-9) auto 0;padding-inline:var(--space-6)}
.hsec>.t-display-l{text-align:center;margin-bottom:var(--space-7)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start}
.split--wide-art{grid-template-columns:1.25fr 1fr}
@media (max-width:860px){.split,.split--wide-art{grid-template-columns:1fr}.hsec{padding-inline:var(--space-4)}}




.ra__title{text-align:right;max-width:var(--content-max);margin:0 auto var(--space-6)}
.ra__title .t-display-l{display:block}
.ra__title .sub{display:block;font-family:var(--font-display);font-size:clamp(30px,3.6vw,48px);line-height:1.15}
.ra__more{background:url(/assets/img/scribble-cloud.webp) center/contain no-repeat;padding:var(--space-5) 0}
@media (max-width:760px){.ra__title{text-align:left}}

.colour__art img{width:100%}
.colour__mouse{display:block;width:min(100%,420px);margin:var(--space-5) 0 0 auto}

.parents__art img{width:100%;background:var(--paper)}
.edge-bottom{display:block;width:100%;height:24px;background:url(/assets/img/paper-edge-bottom.webp) repeat-x center/auto 100%;margin-top:var(--space-6);opacity:.9}

.store-teaser{position:relative}
.store-teaser__max{position:absolute;right:6%;top:-30px;width:180px}
.store-teaser__ring{position:relative;max-width:1180px;margin:0 auto}
.store-teaser__ring::before{content:"";position:absolute;inset:6% 4% 0 18%;background:url(/assets/img/ink-circle.webp) center/contain no-repeat;opacity:.5;pointer-events:none}
.store-teaser__map{position:absolute;left:0;bottom:-40px;width:42%;max-width:470px;pointer-events:none}
.store-teaser__cards{position:relative;padding:var(--space-6) var(--space-4) 260px}
.store-teaser__more{position:relative;text-align:center;font-family:var(--font-display);font-size:32px;line-height:40px;margin-top:var(--space-7)}
.store-teaser__more a{color:var(--ink)}
@media (max-width:860px){.store-teaser__ring::before,.store-teaser__map{display:none}.store-teaser__cards{padding-bottom:var(--space-6)}.store-teaser__max{position:static;display:block;margin:0 auto var(--space-4);width:140px}}

/* ======================= SECTION PAGES ======================= */
.kino-hero{background:var(--night)}
.kino-hero img{display:block;width:100%;max-height:70vh;object-fit:cover}
.kino-feature{text-align:center;padding:var(--space-8) var(--space-4) 0}
.kino-feature h2{font-size:clamp(40px,5vw,60px);line-height:1.1;margin:0 0 var(--space-3)}
.kino-feature p{font-family:var(--font-display);font-size:21px;line-height:30px;margin:0 auto var(--space-1);max-width:46ch}
.kino-trailer{max-width:980px;margin:var(--space-6) auto 0;padding-inline:var(--space-4)}
.kino-trailer .label{display:block;text-align:center;margin-bottom:var(--space-3);font-family:var(--font-display);font-size:21px;letter-spacing:0;text-transform:none;color:var(--ink)}
.night-band img{display:block;width:100%}

.lost{background:#1a120c}
.lost img{display:block;width:100%}
.lost-wrap{position:relative}
.lost-mouse{position:absolute;left:3%;bottom:-18%;width:min(30%,380px)}
.lost-body{max-width:var(--prose-max);margin:var(--space-9) auto var(--space-8);text-align:center;padding-inline:var(--space-4)}
.lost-body .row{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-5)}

.legal{max-width:760px;margin:0 auto;padding:0 var(--space-4) var(--space-8);position:relative}
.legal h2{font-size:36px;line-height:44px;text-align:center;margin:var(--space-8) 0 var(--space-5)}
.legal h3{font-family:var(--font-sans);font-size:17px;font-weight:600;margin:var(--space-5) 0 var(--space-1)}
.legal ul{padding-left:1.2em}
.legal .judge{position:absolute;left:-230px;top:var(--space-7);width:190px}
.legal nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);justify-content:center;font-family:var(--font-display);font-size:20px}
.legal .meta{font-size:14px;color:var(--ink-soft)}
@media (max-width:1240px){.legal .judge{position:static;display:block;width:140px;margin:var(--space-5) auto 0}}

.account{max-width:var(--content-max);margin:0 auto var(--space-9);padding-inline:var(--space-6)}
.account .panel{border:1.5px solid var(--ink);padding:var(--space-6);background:var(--paper)}
.account .panel+.panel{margin-top:var(--space-6)}
.account h2{font-size:30px;line-height:36px;margin:0 0 var(--space-3)}
.account .status{font-family:var(--font-display);font-size:22px;line-height:30px}
.account .row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.account .cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
@media (max-width:760px){.account .cols{grid-template-columns:1fr}.account{padding-inline:var(--space-4)}.account .panel{padding:var(--space-5)}}

.chars{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);text-align:center}
.chars img{height:200px;width:auto;object-fit:contain}
.chars h3{font-size:26px;margin:var(--space-2) 0 var(--space-1)}
.chars p{font-family:var(--font-display);font-size:18px;line-height:26px}
@media (max-width:760px){.chars{grid-template-columns:1fr 1fr}}
.page-sec{max-width:var(--content-max);margin:var(--space-8) auto;padding-inline:var(--space-6)}
@media (max-width:640px){.page-sec{padding-inline:var(--space-4)}}
.page-sec h2{font-size:36px;line-height:44px;margin:0 0 var(--space-4)}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-1) var(--space-5);margin:0}
.facts dt{font-weight:600}.facts dd{margin:0}

.toast{position:fixed;left:50%;bottom:var(--space-5);transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:var(--space-3) var(--space-5);font-family:var(--font-display);font-size:19px;z-index:60;max-width:calc(100vw - 32px)}
.toast[hidden]{display:none}

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

/* Cream-ground illustrations melt into paper, parchment and band */
.blend,.band__art img,.quote__band img,.sword__art,.colour__art img,.parents__art img,.ra__show,.soon__art img.scene,.chars img{mix-blend-mode:multiply}
.parents__art img{background:transparent}
.chars .vignette{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mix-blend-mode:normal}
.store-teaser .card__body{background:rgba(242,234,220,.82);padding:var(--space-2)}
@media (max-width:640px){
  .key-mark{display:none}
  .coming__items{flex-direction:column;gap:var(--space-1)}
  .coming__items span+span::before{content:none}
}

/* ---------- Home hero: the leather-cover film ---------- */
.hero{position:relative;height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));min-height:380px;background:var(--leather);overflow:hidden}
.hero__stage{position:absolute;inset:0}
.hero__still,.hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero__still--last{opacity:0}
.hero__stage[data-state="end"] .hero__still--last{opacity:1}
.hero__film{opacity:0}
.hero__film.show{opacity:1}
.hero__hint{position:absolute;left:50%;bottom:var(--space-5);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;cursor:pointer;font:600 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night);text-shadow:0 1px 8px rgba(0,0,0,.6);transition:opacity .4s ease;min-height:44px;padding:var(--space-2) var(--space-4)}
.hero__hint span{font-size:20px;animation:hb-nudge 2.4s cubic-bezier(.77,0,.175,1) infinite}
.hero__stage[data-state="playing"] .hero__hint{opacity:0}
@keyframes hb-nudge{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(5px)}}

/* ---------- Home: The Magic Sword (layout from Home4) ---------- */
.sword{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start;max-width:1200px;margin:0 auto}
.sword__left{position:relative}
.sword__text{position:relative;z-index:1;max-width:390px;margin-left:var(--space-6)}
.sword__art{position:relative;z-index:0;display:block;width:100%;max-width:560px;margin-top:-170px;pointer-events:none}
.sword__cover{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow-paper);border-radius:var(--radius-sm);transition:opacity .25s}
.sword__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin:var(--space-3) 0 var(--space-5)}
.sword__thumb{padding:0;border:0;background:none;cursor:pointer;display:block;outline-offset:2px}
.sword__thumb img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .2s,opacity .2s}
.sword__thumb:hover img{transform:translateY(-2px);opacity:.85}
.sword__right .q:first-of-type{margin-top:var(--space-3)}
@media (max-width:860px){.sword{grid-template-columns:1fr}.sword__text{margin-left:0;max-width:none}.sword__art{margin-top:var(--space-4)}.sword__right{order:-1}}

/* ---------- Home: Coming soon (text over the autumn scene) ---------- */
.soon{position:relative;margin-top:var(--space-9);padding-left:28px}
.soon__edge{position:absolute;left:0;top:0;bottom:0;width:28px;background:url(/assets/img/paper-edge-left.webp) repeat-y left top/100% auto}
.soon__stack{display:grid;max-width:1180px;margin:0 auto}
.soon__stack>*{grid-area:1/1}
.soon__text{position:relative;z-index:1;justify-self:end;width:min(42%,440px);margin-right:4%}
.soon__text p{margin-bottom:var(--space-3)}
.soon__envelope{display:block;width:44px;margin:var(--space-2) 0 var(--space-3)}
.soon__art{align-self:end;display:block;width:100%;margin-top:150px;pointer-events:none}
@media (max-width:860px){.soon__stack>*{grid-area:auto}.soon__text{width:auto;justify-self:stretch;margin:0}.soon__art{margin-top:var(--space-5)}}

/* the stage must paint above the peeking mouse */
.town__stage{z-index:1}

/* ---------- Home: read-along iPad scene (Home5) ---------- */
.ra__scene{position:relative;max-width:1300px;margin:0 auto;aspect-ratio:1441/800}
.ra__bg{position:absolute;left:0;right:0;bottom:4%;width:100%;height:auto;will-change:transform}
.ra__brush{position:absolute;right:3%;top:30%;width:22%;height:auto;opacity:.95;will-change:transform}
.ra__ipad{position:absolute;left:19%;top:2%;width:62%;aspect-ratio:3/2;box-sizing:content-box;padding:16px;background:#0c0c0d;border-radius:var(--radius-device);box-shadow:var(--shadow-device)}
.ra__ipad iframe{display:block;width:100%;height:100%;border:0;border-radius:10px;background:#17110c}
.ra__sound{position:absolute;right:0;top:calc(100% + 14px);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font:500 16px/1 var(--font-display);cursor:pointer}
.ra__sound[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.ra__sound svg{width:20px;height:20px}
.ra__sound .waves{opacity:0}.ra__sound[aria-pressed="true"] .waves{opacity:1}.ra__sound[aria-pressed="true"] .mute{opacity:0}
.ra__issey{position:absolute;left:1%;bottom:-14%;width:20%;height:auto;will-change:transform;pointer-events:none}
.ra__body{display:block;max-width:820px;margin:var(--space-9) auto 0;padding-left:16%}
@media (max-width:760px){.ra__scene{aspect-ratio:auto;padding:0 0 var(--space-6)}.ra__bg{position:relative;bottom:auto}.ra__ipad{position:relative;left:auto;top:auto;width:calc(100% - 20px);padding:10px;margin:-38% auto 0;border-radius:18px}.ra__brush{display:none}.ra__issey{left:-2%;bottom:-6%;width:30%}.ra__body{padding-left:0;margin-top:var(--space-7)}}

/* ---------- Corner icons and keys are links ---------- */
.marks{pointer-events:none}
.marks__icons{pointer-events:auto}
.mark-icon{display:inline-flex;padding:6px;border-radius:2px;transition:transform .16s ease-out,opacity .16s ease}
.mark-icon img{height:44px;width:auto;opacity:.85;display:block}
.key-link .key-on{display:none}
.signed-in .key-link .key-on{display:block}.signed-in .key-link .key-off{display:none}
.key-mark{position:absolute;right:var(--space-7);top:0;padding:6px}
.key-mark img{height:52px;width:auto;display:block}
@media (hover:hover) and (pointer:fine){.mark-icon:hover,.key-mark:hover{transform:translateY(-2px)}.mark-icon:hover img{opacity:1}}
@media (max-width:640px){.mark-icon img{height:32px}}

/* ---------- Press feedback ---------- */
.btn,.nav__menu,.nav__key,.mark-icon,.sword__thumb,.ra__sound,.town__sound{transition-property:transform,background-color,color,opacity;transition-duration:.16s;transition-timing-function:ease-out}
.btn:active,.nav__menu:active,.nav__key:active,.mark-icon:active,.sword__thumb:active,.ra__sound:active,.town__sound:active,.hero__hint:active{transform:scale(.97)}
.hero__hint:active{transform:translateX(-50%) scale(.97)}

/* ---------- Quiet entrances: text and pictures settle in once as they scroll into view ---------- */
html.js :is(.title,.hsec>.t-display-l,.ra__title,.band__text,.card,.faq,.sword__left,.sword__right,.soon h2,.soon__text,.ra__body,.coming,.chars>div,.lost-body,.account .panel,.legal>h2,.page-sec>h2,.quote blockquote,.split>div,.store-teaser__ring,.kino-feature,.kino-trailer,.town){opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.23,1,.32,1) var(--d,0ms),transform .8s cubic-bezier(.23,1,.32,1) var(--d,0ms)}
html.js :is(.title,.hsec>.t-display-l,.ra__title,.band__text,.card,.faq,.sword__left,.sword__right,.soon h2,.soon__text,.ra__body,.coming,.chars>div,.lost-body,.account .panel,.legal>h2,.page-sec>h2,.quote blockquote,.split>div,.store-teaser__ring,.kino-feature,.kino-trailer,.town).in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js :is(.title,.hsec>.t-display-l,.ra__title,.band__text,.card,.faq,.sword__left,.sword__right,.soon h2,.soon__text,.ra__body,.coming,.chars>div,.lost-body,.account .panel,.legal>h2,.page-sec>h2,.quote blockquote,.split>div,.store-teaser__ring,.kino-feature,.kino-trailer,.town){transform:none;transition:opacity .3s linear}
  .ra__bg,.ra__brush,.ra__issey{transform:none!important}
  .hero__hint span{animation:none}
}

/* Login page: 20px above and below the content; both boxes share one height so their borders line up */
.account--login .cols{align-items:stretch}
.account--login .panel{padding-block:20px;display:flex;flex-direction:column}
/* Form fields in a column must not stretch (the 220px flex-basis was meant for the row layout of the notify form) */
.field input,.field select,.field textarea{flex:none}
.account--login .field input{height:60px}
.account .cols>.panel+.panel{margin-top:0}  /* side-by-side boxes start on the same line */
/* Login page: Max reading, bottom right, drifting slightly as the page scrolls */
.account--login{position:relative;padding-bottom:230px}
.login-mouse{position:absolute;right:var(--space-6);bottom:0;width:200px;height:auto;pointer-events:none;will-change:transform}
@media (max-width:640px){.account--login{padding-bottom:170px}.login-mouse{width:140px;right:var(--space-4)}}

/* School page: matched stage boxes + parallax */
.card--stage{align-items:stretch}
.card__stage{position:relative;width:100%;aspect-ratio:5/4;margin-top:var(--space-6);background:#e9dcc4;border:1px solid rgba(21,17,13,.12);border-radius:18px;box-shadow:inset 0 0 0 10px rgba(255,255,255,.35);overflow:visible}
.card__stage img{position:absolute;left:50%;bottom:0;will-change:transform;max-width:none}
.card__stage--page img{height:92%;width:auto;bottom:4%;transform:translateX(-50%) rotate(-2deg);background:#fff;box-shadow:0 10px 24px rgba(21,17,13,.18)}
.card__stage--cutout img{height:118%;width:auto;transform:translateX(-50%) translateY(var(--py,0px));filter:drop-shadow(0 14px 18px rgba(21,17,13,.22))}
.card--stage .card__body{background:none;padding:var(--space-2) 0 0}
@media (prefers-reduced-motion:reduce){.card__stage--cutout img{transform:translateX(-50%)}}
.band--true .band__art img{mix-blend-mode:normal}
.type-ch{opacity:0;transition:opacity .12s linear}.type-ch.on{opacity:1}
.type-caret{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-.12em;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.town__peek{bottom:100%;z-index:2;transform:translate(-50%,4.7%);transition:transform .9s cubic-bezier(.23,1,.32,1) .2s,opacity .5s ease .2s}
html.js .town:not(.in) .town__peek{transform:translate(-50%,40%);opacity:0}
.town__peek{transform:translate(-50%,-2px)}
.town__base{position:relative}
.town__mouse{position:absolute;left:50%;top:6px;width:min(14%,150px);height:auto;transform:translateX(-50%);z-index:2;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(21,17,13,.18));transition:transform .9s cubic-bezier(.23,1,.32,1) .2s,opacity .6s ease .2s}
html.js .town:not(.in) .town__mouse{transform:translate(-50%,24px);opacity:0}
.town__mouse{top:-14px;width:min(16.1%,172px)}
.town__mouse{top:42px}
.town__links{margin-top:calc(var(--space-4) + 70px)}
.town__mouse{top:4px}
.town__links{margin-top:calc(var(--space-4) + 15px)}
.band--true .band__text{font-size:20.8px;line-height:32px}
@media (max-width:640px){.band--true .band__text{font-size:16px;line-height:24px}}
.band__text{font-size:20.8px;line-height:32px}
.band__art img{mix-blend-mode:normal}
@media (max-width:640px){.band__text{font-size:16px;line-height:24px}}
.town__links{margin-top:calc(var(--space-4) + 35px)}
.grid--2:has(.card__media--book) .card__media--crop{aspect-ratio:3/2;min-height:0}.grid--2:has(.card__media--book) .card__media--crop img{height:100%;width:auto;max-width:100%;object-fit:contain}
/* Store */
.shop__h{font-family:var(--font-display);font-weight:500;font-size:32px;line-height:40px;text-align:center;margin:0 0 var(--space-2)}
.shop__sub{text-align:center;margin:0 0 var(--space-6);color:var(--ink-soft);font-family:var(--font-display);font-size:18px}
.shop + .shop{margin-top:var(--space-9,96px)}
.shop__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch;margin-top:var(--space-5)}
.card--shop{position:relative;align-items:stretch;height:100%}
.card--shop .card__body{background:none;padding:var(--space-3) 0 0;flex:1}
.card--shop .card__action{margin-top:auto;padding-top:var(--space-3)}
.shop__stage{position:relative;aspect-ratio:5/4;background:#e9dcc4;border:1px solid rgba(21,17,13,.12);border-radius:18px;box-shadow:inset 0 0 0 10px rgba(255,255,255,.35);overflow:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.card--shop:hover .shop__stage{transform:translateY(-4px);box-shadow:inset 0 0 0 10px rgba(255,255,255,.35),0 14px 30px rgba(21,17,13,.12)}
.shop__stage img{position:absolute;left:50%;top:50%;transition:transform .6s cubic-bezier(.16,1,.3,1);max-width:none}
.solo--book{width:78%;transform:translate(-50%,-50%);border-radius:6px;box-shadow:0 12px 24px rgba(21,17,13,.25)}
.solo--tablet{width:82%;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 18px rgba(21,17,13,.22))}
.solo--page{height:84%;transform:translate(-50%,-50%) rotate(-2deg);background:#fff;box-shadow:0 10px 24px rgba(21,17,13,.18)}
.card--shop:hover .solo--book,.card--shop:hover .solo--tablet{transform:translate(-50%,-50%) scale(1.03)}
.card--shop:hover .solo--page{transform:translate(-50%,-50%) rotate(0deg) scale(1.03)}
.bi{box-shadow:0 10px 22px rgba(21,17,13,.22)}
.bi--cover{width:58%;border-radius:5px}
.bi--tablet{width:62%;box-shadow:none;filter:drop-shadow(0 10px 16px rgba(21,17,13,.22))}
.bi--page{height:62%;background:#fff}
.n2 .bi:nth-child(1){transform:translate(-78%,-62%) rotate(-4deg)}
.n2 .bi:nth-child(2){transform:translate(-22%,-38%) rotate(3deg)}
.n3 .bi--cover{transform:translate(-86%,-66%) rotate(-5deg)}
.n3 .bi--tablet{transform:translate(-20%,-58%) rotate(3deg)}
.n3 .bi--page{transform:translate(-40%,-30%) rotate(-1deg)}
.card--shop:hover .n2 .bi:nth-child(1){transform:translate(-84%,-64%) rotate(-6deg)}
.card--shop:hover .n2 .bi:nth-child(2){transform:translate(-16%,-36%) rotate(5deg)}
.card--shop:hover .n3 .bi--cover{transform:translate(-92%,-68%) rotate(-7deg)}
.card--shop:hover .n3 .bi--tablet{transform:translate(-14%,-60%) rotate(5deg)}
.card--shop:hover .n3 .bi--page{transform:translate(-40%,-26%) rotate(1deg)}
.bundle--hot .shop__stage{border:2px solid var(--oxblood);background:#efd9c0}
.bundle__badge{position:absolute;z-index:2;top:-12px;left:50%;transform:translateX(-50%);background:var(--oxblood);color:var(--on-oxblood);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;white-space:nowrap}
.card__price s{color:var(--ink-soft);font-size:16px;margin-left:6px}
.bundle .card__format{color:var(--oxblood)}
.shop__notify{max-width:560px;margin:var(--space-7) auto 0;text-align:center}
.shop__notify:target{animation:notifyPulse 1.2s ease 1}
@keyframes notifyPulse{0%{box-shadow:0 0 0 0 rgba(110,31,20,.35)}100%{box-shadow:0 0 0 18px rgba(110,31,20,0)}}
@media (prefers-reduced-motion:reduce){.shop__stage,.shop__stage img{transition:none}}