@font-face{font-family:"Lilita One";src:url(assets/fonts/LilitaOne-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:Poppins;font-weight:400;src:url(assets/fonts/Poppins-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:Poppins;font-weight:600;src:url(assets/fonts/Poppins-SemiBold.ttf) format("truetype");font-display:swap}
:root{--navy:#14296B;--deep:#0D1A45;--sky:#73C7F5;--sun:#FFD726;--pine:#2E9E4F;--forest:#1E5B3A;--cream:#FFF8E7;--ink:#1E1E2E;
 --bg:var(--cream);--tone:#F4EBD0;--fg:var(--ink);--muted:#45455a;--m:clamp(20px,4vw,56px);--ease:cubic-bezier(.2,.7,.2,1)}
@media(prefers-color-scheme:dark){:root{--bg:#0b1640;--tone:#12235a;--fg:var(--cream);--muted:#d3d6e6}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;font:400 1.0625rem/1.6 Poppins,system-ui,sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden}
h1,h2,h3{font-family:"Lilita One",Poppins,sans-serif;font-weight:400;margin:0}
h1{font-size:clamp(3.2rem,9vw,8rem);line-height:.95;letter-spacing:-.02em}
h2{font-size:clamp(2.2rem,5.5vw,4.5rem);line-height:1;letter-spacing:-.015em}
h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1}
p{margin:0 0 1em}a{color:inherit}
.wrap{padding:0 var(--m);max-width:1500px;margin:0 auto}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.skip{position:absolute;left:-999px;background:var(--sun);color:var(--ink);padding:10px 16px;z-index:99}.skip:focus{left:8px;top:8px}

/* header: plain bar */
.site-header{position:sticky;top:0;z-index:10;background:var(--navy);color:var(--cream)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:76px;transition:min-height .3s var(--ease)}
.site-header.small .bar{min-height:56px}.site-header.small .brand img{width:40px;height:40px}
.brand img{display:block;width:56px;height:56px;transition:width .3s var(--ease),height .3s var(--ease)}
nav{display:flex;gap:6px;align-items:center}
nav a{text-decoration:none;font-weight:600;padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;position:relative}
nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:3px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1)}
.menu-btn{display:none;background:var(--sun);color:var(--ink);border:0;font:600 1rem Poppins;border-radius:0;padding:10px 18px;min-height:44px}
@media(max-width:700px){.menu-btn{display:block}nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;padding:8px var(--m) 20px}nav.open{display:flex}}

/* hero: the keycap is the object */
.hero{background:var(--navy);color:var(--cream);min-height:calc(100svh - 76px);display:flex;align-items:center;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--m);align-items:center;width:100%;padding-block:64px}
.hero h1 span{color:var(--sun);display:block}
.lead{font-size:clamp(1.15rem,1.7vw,1.5rem);max-width:34ch;margin:32px 0 36px}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 32px;background:var(--sun);color:var(--ink);font-weight:600;text-decoration:none;border:0;border-radius:0;transition:transform .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-3px);background:#fff}.btn:active{transform:translateY(1px)}
.btn.alt{color:inherit;background:rgba(255,255,255,.14)}
.btn.alt:hover{background:rgba(255,255,255,.26)}
.keywrap{display:grid;place-items:center;gap:20px}
.key{position:relative;width:min(100%,380px);aspect-ratio:1;border:0;background:#c9a600;border-radius:12%;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.key .face{position:absolute;inset:0 0 9% 0;background:var(--sun);border-radius:12%;display:grid;place-items:center;transition:transform .14s ease-out}
.key:hover .face{transform:translateY(2%)}
.key.down .face,.key:active .face{transform:translateY(9%)}
.key .ctrl{position:absolute;left:11%;top:9%;font:600 clamp(.95rem,2vw,1.5rem) Poppins;color:var(--navy)}
.key .p{font:clamp(9rem,22vw,17rem)/1 "Lilita One";color:var(--navy);margin-top:-2%}
.hint{margin:0;color:var(--cream);font-weight:600}
.hero .key{animation:land 1s var(--ease) both .3s}
@keyframes land{0%{transform:translateY(-60px);opacity:0}60%{transform:translateY(8px);opacity:1}100%{transform:none;opacity:1}}
@media(max-width:800px){.hero{min-height:0}.hero-grid{grid-template-columns:1fr}.key{width:min(60%,280px)}}

/* sections */
.section{padding-block:clamp(88px,12vw,200px)}
.section>.wrap>h2{margin-bottom:clamp(32px,5vw,72px)}
.tone{background:var(--tone)}

/* top 3: coloured tiles */
.tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px)}
.tile{background:var(--forest);color:var(--cream);display:flex;flex-direction:column;padding:clamp(20px,3vw,44px);text-decoration:none;overflow:hidden}
.tiles li{display:flex}.tiles li>.tile{flex:1}.tiles li:nth-child(2) .tile{background:var(--navy)}.tiles li:nth-child(3) .tile{background:var(--deep)}
.tile .cv{aspect-ratio:3/4;display:grid;place-items:center;margin-bottom:28px}
.tile img{width:70%;height:auto;display:block;transition:transform .5s var(--ease)}
.tile:hover img{transform:translateY(-12px) rotate(-2deg) scale(1.03)}
.tile h3{margin-bottom:8px}.tile .go{margin-top:auto;font-weight:600;color:var(--sun)}
.tile .go::after{content:" \2192";display:inline-block;transition:transform .3s var(--ease)}.tile:hover .go::after{transform:translateX(6px)}
.more-link{margin-top:clamp(32px,4vw,56px)}
.more-link .btn{background:var(--navy);color:var(--cream)}.more-link .btn:hover{background:var(--forest)}
@media(max-width:900px){.tiles{grid-template-columns:1fr}.tile .cv{aspect-ratio:auto}.tile img{width:60%;max-width:300px}}

/* mission band */
.band{background:var(--sun);color:var(--ink)}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:var(--m)}
.mv h2{margin-bottom:24px}.mv p{font-size:clamp(1.25rem,2.1vw,2rem);line-height:1.3;max-width:26ch}
@media(max-width:800px){.mv{grid-template-columns:1fr}}

/* cta */
.cta-band{background:var(--navy);color:var(--cream)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--m);align-items:end}
.cta-grid p{font-size:1.25rem;max-width:34ch}
@media(max-width:800px){.cta-grid{grid-template-columns:1fr}}

/* sub-page header */
.page-hero{background:var(--navy);color:var(--cream);padding-block:clamp(72px,10vw,160px)}
.page-hero p{font-size:clamp(1.15rem,1.7vw,1.5rem);max-width:40ch;margin:28px 0 0}

/* books page rows */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(260px,1fr) 1.2fr;gap:var(--m);align-items:center;padding:clamp(40px,6vw,96px) var(--m);background:var(--forest);color:var(--cream)}
.row.navy{background:var(--navy)}.row.deep{background:var(--deep)}
.row img{width:min(100%,360px);height:auto;justify-self:center;display:block;transition:transform .5s var(--ease)}
.row:hover img{transform:rotate(-2deg) scale(1.03)}
.row h3{font-size:clamp(2rem,4vw,3.5rem);margin:14px 0 10px}
.row .sub{font-weight:600;color:var(--sun);margin:0 0 16px}
.row p{max-width:46ch}
.badge{display:inline-block;background:var(--sun);color:var(--ink);font-size:.95rem;font-weight:600;padding:4px 14px}
.soon{display:inline-block;background:var(--cream);color:var(--ink);padding:12px 22px;font-weight:600;margin-top:8px}
a.buy{display:inline-block;background:var(--sun);color:var(--ink);padding:14px 26px;font-weight:600;text-decoration:none;margin-top:8px}
@media(max-width:800px){.row{grid-template-columns:1fr}}
.series-intro{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--m);align-items:start}
.series-intro p{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.4;max-width:34ch}
@media(max-width:800px){.series-intro{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m);list-style:none;padding:0;margin:0}
.steps h3{margin-bottom:12px}
.sky{background:var(--sky);color:var(--ink)}
.facts{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:clamp(32px,4vw,56px) 0 0}
.facts li{background:var(--cream);color:var(--ink);padding:10px 20px;font-weight:600}
@media(max-width:800px){.steps{grid-template-columns:1fr}}

/* about */
.story{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--m);align-items:center}
.story p{font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.45;max-width:36ch}
.keybox{background:var(--navy);color:var(--cream);padding:clamp(28px,4vw,56px);display:grid;place-items:center;gap:20px;text-align:center}
.keybox img{width:min(60%,220px);height:auto}.keybox p{font-size:1.15rem;margin:0}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px);list-style:none;padding:0;margin:0}
.trust li{background:var(--tone);padding:clamp(24px,3vw,40px)}
.trust h3{margin-bottom:12px}.trust p{margin:0}
@media(max-width:800px){.story,.trust{grid-template-columns:1fr}}

footer{background:var(--deep);color:var(--cream);padding-block:clamp(56px,8vw,112px)}
.foot-name{font:clamp(3rem,13vw,13rem)/.9 "Lilita One";letter-spacing:-.02em;color:var(--sun);margin:0 0 clamp(32px,5vw,64px)}
.foot{display:flex;gap:var(--m);justify-content:space-between;flex-wrap:wrap}.foot p{margin:.2rem 0}
.foot nav{flex-direction:column;align-items:flex-start;gap:0}.foot nav a{padding:6px 0}.foot nav a::after{left:0;right:0;bottom:6px}
p.small{font-size:.9rem;opacity:.9;max-width:52ch}
footer a{color:var(--sun)}

/* motion: only when JS is on, so content is never hidden otherwise */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
.js .tile.rv{transform:translateY(60px)}.js .tile.rv.in{transform:none}
.js .tile .cv img{transform:translateY(40px) rotate(-3deg);opacity:0}
.js .tile.in .cv img{opacity:1;transform:none;transition:opacity .9s var(--ease) .25s,transform .9s var(--ease) .25s}
.js .tile.in:hover .cv img{transform:translateY(-12px) rotate(-2deg) scale(1.03);transition-delay:0s}
.js .hero h1,.js .hero .lead,.js .hero .cta,.js .page-hero h1,.js .page-hero p{animation:up .9s var(--ease) both}
.js .hero .lead,.js .page-hero p{animation-delay:.15s}.js .hero .cta{animation-delay:.3s}
@keyframes up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .rv,.js .tile .cv img{opacity:1!important;transform:none!important}}
[hidden]{display:none!important}
.cta{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:520px){.cta .btn{flex:1 1 100%;justify-content:center}.more-link .btn,.cta-grid .btn{width:100%;justify-content:center}}
/* about page: pen-name authors */
#authors .lead{font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:60ch;margin-bottom:clamp(24px,3vw,40px)}
.authors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px);list-style:none;padding:0;margin:0}
.authors li{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:clamp(16px,2vw,32px);align-items:center;background:var(--tone);padding:clamp(20px,3vw,36px)}
.authors img{width:100%;height:auto;display:block;border-radius:50%}
.authors h3{margin-bottom:4px}.authors .sub{font-weight:600;margin-bottom:10px}.authors p{margin:0}
@media(max-width:800px){.authors{grid-template-columns:1fr}.authors li{grid-template-columns:120px 1fr}}

/* Compact character credits and the printed/coloured spread comparison. */
.author-strip{padding-block:64px}.author-strip>.wrap>h2{margin-bottom:24px}
.author-strip p{max-width:75ch}.author-links{display:flex;flex-wrap:wrap;gap:24px 56px;margin:28px 0}
.byline{display:flex;align-items:center;gap:14px;width:fit-content;margin:18px 0;text-decoration:none;min-height:48px}
.byline:hover span{text-decoration:underline}.byline img,.row .byline img{width:48px;height:48px;object-fit:cover;border-radius:50%;flex-shrink:0;transform:none;transition:none}
.author-strip .byline img{width:72px;height:72px}.pen-name{font-size:.85em}
.spread{max-width:1100px;margin:32px auto 0}.spread-stage{position:relative;--reveal:50%;background:#fff}
.spread-stage img{display:block;width:100%;height:auto}.spread-after{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.spread-divider{position:absolute;left:var(--reveal);top:0;bottom:0;width:3px;background:var(--navy);transform:translateX(-50%);pointer-events:none}
.spread-controls{margin-top:20px}.spread-controls label{display:block;font-weight:600}
.spread-controls input{display:block;width:100%;height:48px;margin:8px 0;accent-color:var(--navy);cursor:ew-resize;touch-action:pan-y}
.spread-controls input:focus-visible{outline-color:var(--navy)}
.spread-labels{display:flex;justify-content:space-between;gap:16px;font-weight:600;font-size:.9rem}
.spread-note{background:var(--cream);color:var(--ink);padding:16px;margin:20px 0}.spread figcaption{font-size:.9rem;margin-top:16px;max-width:80ch}
.spread-short img{display:block;width:100%;max-width:700px;height:auto;margin:24px 0}
@media(max-width:400px){.authors li{grid-template-columns:1fr}.authors img{max-width:120px}}

/* Keep desktop previews and the featured books in a single screen. */
#top3{padding-block:40px}
#top3>.wrap>h2{margin-bottom:12px}
#top3 .section-intro{margin-bottom:24px}
.preview-action{margin:16px 0 0}
.preview-cover{display:block;width:fit-content;margin:auto}
.row h3 a{text-decoration:none}.row h3 a:hover{text-decoration:underline}
.preview-dialog{border:0;padding:24px;width:min(1120px,calc(100% - 32px));max-height:calc(100dvh - 32px);background:var(--bg);color:var(--fg);overflow:auto}
.preview-dialog::backdrop{background:rgba(13,26,69,.8)}
.preview-dialog form{display:flex;justify-content:flex-end;margin-bottom:12px}
.preview-close{font:600 1rem Poppins;cursor:pointer}
.preview-dialog h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.preview-dialog .spread{margin-top:16px}
body:has(.preview-dialog[open]){overflow:hidden}
@media(min-width:901px){
  #top3 .tile{padding:20px 24px}
  #top3 .tile .cv{aspect-ratio:auto;height:clamp(180px,27vh,290px);margin-bottom:16px}
  #top3 .tile img{width:auto;height:clamp(180px,27vh,290px);max-width:100%;object-fit:contain}
  #top3 .tile h3{font-size:1.7rem}
  #top3 .tile p{font-size:1rem;line-height:1.5;margin-bottom:12px}
  #top3 .more-link{margin:24px 0 0}
  #spread-preview{padding-block:28px}
  #spread-preview>.wrap>h2{font-size:clamp(2.2rem,4vw,3.5rem);margin-bottom:12px}
  #spread-preview .spread{margin-top:16px}
  .spread-stage{width:fit-content;max-width:100%;margin-inline:auto}
  .spread-stage .spread-before{width:auto;max-width:100%;max-height:calc(100vh - 430px);object-fit:contain}
  .spread-stage .spread-after{height:100%;object-fit:contain}
  .spread-controls{margin-top:10px}
  .spread-controls input{margin:0;height:40px}
  .spread-controls .small{margin-bottom:0}
  .spread figcaption{margin-top:10px;max-width:none}
  .preview-dialog .spread-stage .spread-before{max-height:calc(100vh - 350px)}
}