@font-face{font-family:Source;src:url(assets/fonts/SourceSans3.ttf)}
@font-face{font-family:Literata;src:url(assets/fonts/Literata.ttf)}

/* Yomu — landing and help

   Built on the approved Atomic 22 landing system: #0c131d ground, #78b6ff
   accent, Source Sans 3 with Literata for reading, 1320px/90% measure, 760px
   breakpoint, publisher branding, and the explanation / walkthrough /
   practical / download sequence.

   This page's layout is the book: an inverted header with navigation first,
   a narrow centred measure throughout, the reading panel set as the centre
   of the page, captures before features, and the walkthrough as three even
   columns. Layout is what separates it from the other apps. */

*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:#0c131d;color:#edf2fa;font:18px/1.6 Source,sans-serif;--accent:#78b6ff;--muted:#b0bed0;--rule:#2c394a;--panel:#111d2b;--panel-line:#334258}
a{color:var(--accent);text-underline-offset:5px}
a:hover{color:#fff}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
::selection{background:#3466a1;color:#fff}

.skip{position:absolute;left:10px;top:-80px}
.skip:focus{top:10px}

h1,h2,h3{line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.8rem,5.6vw,5rem);letter-spacing:-.035em;margin:0 0 24px}
h2{font-size:clamp(1.8rem,3.2vw,2.9rem);letter-spacing:-.025em}
h3{font-size:1.45rem;line-height:1.35}
p{max-width:70ch}
.lead{font-size:1.25rem;color:#c5d0df;max-width:62ch}
section{padding:52px 0}

/* ---- inverted header: navigation first, publisher last --------- */
header,main,footer{width:min(1320px,90%);margin:auto}
header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
header a{text-decoration:none}
header .publisher{color:#e5edf8;font-weight:650;order:2}
header nav{order:1;display:flex;gap:28px;flex-wrap:wrap;font-size:.98rem}
header nav a{color:#aebccd}
header nav a:hover{color:#fff}
header .brand{width:220px;max-height:85px;object-fit:contain}

/* ---- centred, narrow measure ---------------------------------- */
.brandline{display:flex;align-items:center;justify-content:center;gap:20px;margin:60px 0 20px}
.brandline .icon{width:64px;height:64px;object-fit:contain}
.wordmark{width:250px;max-height:105px;object-fit:contain;object-position:left center}

.reading{max-width:900px;margin:0 auto;text-align:center;padding-top:16px}
.reading h1{font-family:Literata,serif;font-weight:500;letter-spacing:-.02em}
.reading .lead{margin:0 auto 32px}
.reading .actions{justify-content:center}
.reading .status{text-align:center}

/* ---- the reading panel: the centre of the page ---------------- */
.stage{border:1px solid var(--panel-line);border-radius:12px;overflow:hidden;background:var(--panel);margin-top:56px;text-align:left}
.stage-head{padding:15px 24px;border-bottom:1px solid var(--panel-line);display:flex;justify-content:space-between;gap:16px;align-items:center}
.reading-panel{display:grid;grid-template-columns:1.55fr 1fr}
.prose{padding:44px;font:23px/1.85 Literata,serif;color:#e4e9f3}
.sentence{border-radius:3px}
.sentence.active{background:#254a70;box-shadow:0 0 0 3px #254a70}
.queue{padding:28px;border-left:1px solid var(--panel-line);display:flex;flex-direction:column;justify-content:center}
.queue h2{font-size:1.4rem;line-height:1.35;margin-bottom:14px}
.queue button{background:transparent;color:#d6e2f1;display:block;text-align:left;width:100%;padding:18px 12px;border-bottom:1px solid var(--panel-line);border-radius:0}
.queue button[aria-pressed=true]{color:var(--accent);background:#1c2e42}
.reading-controls{display:flex;align-items:center;justify-content:center;gap:22px;padding:22px 40px;border-top:1px solid var(--panel-line);flex-wrap:wrap}
button:not(.button){background:transparent;color:#d6e2f1;border:1px solid var(--panel-line);border-radius:7px;padding:11px 20px}
button:not(.button):hover{border-color:var(--accent);color:#fff}

/* ---- captures come before features on this page --------------- */
.gallery{display:flex;gap:28px;align-items:flex-start;margin:72px auto 0;max-width:760px}
.gallery figure{max-width:340px;width:100%;margin:0}
.gallery img{width:100%;max-height:520px;object-fit:contain;object-position:top center;background:#0f1826;border:1px solid var(--panel-line);border-radius:12px;padding:10px}
figcaption{margin-top:14px}
.status,figcaption,.caption{font-size:.94rem;color:var(--muted)}

/* ---- features as a single ruled column ------------------------ */
.details{max-width:900px;margin:72px auto 0;border-top:1px solid var(--panel-line)}
.details article{padding:34px 0;border-bottom:1px solid var(--rule);padding-left:26px;border-left:2px solid var(--panel-line)}
.details article:first-of-type{border-left-color:var(--accent)}
.details h2{margin-bottom:16px}
.details p{color:#c2cfe0}

/* ---- explanation: three even columns -------------------------- */
.explanation{border-top:1px solid var(--panel-line);padding:76px 0;margin-top:76px}
.explanation-intro{max-width:760px;margin:0 auto;text-align:center}
.explanation h2{margin-top:0}
.walkthrough{counter-reset:walk;list-style:none;padding:0;margin:52px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1080px}
.walkthrough li{counter-increment:walk;text-align:center;padding:34px 26px}
.walkthrough li:before{content:counter(walk,decimal-leading-zero);display:block;font-size:2rem;line-height:1.1;color:#80b8f5;margin-bottom:14px}
.walkthrough h3{margin:0 0 12px}
.walkthrough p{margin:0 auto;color:#c2cfe0;font-size:.98rem;max-width:36ch}
.practical{max-width:760px;margin:56px auto 0;text-align:center}
.practical h3{margin-top:28px}
.practical p{color:#c2cfe0;margin-inline:auto}

/* ---- download: centred, at the foot of the measure ----------- */
.download{border-top:1px solid var(--panel-line);padding:64px 0 20px;text-align:center}
.download h2{margin-bottom:24px}
.download .actions{justify-content:center}
.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:26px 0}
.button{display:inline-block;padding:13px 24px;background:var(--accent);color:#091321;border:1px solid transparent;border-radius:7px;font-weight:650;text-decoration:none;font-size:1.05rem}
.button:hover{background:#bedcff;color:#091321}
.resources{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-top:22px}

footer{border-top:1px solid var(--panel-line);padding:34px 0 52px;color:var(--muted);text-align:center;font-size:.94rem}
footer .resources{margin-top:12px;justify-content:center}

/* ---- help page ------------------------------------------------- */
.help{max-width:880px;margin-inline:auto}
.help>h1{margin-top:50px}
.help>nav{margin-bottom:35px}
.help section{padding:24px 0}
.help li{margin:12px 0}
.help p{max-width:70ch}

figure{margin:0}
img{max-width:100%;height:auto}

/* ---- 760px ------------------------------------------------------ */
@media(max-width:760px){
  header{gap:16px}
  header nav{gap:20px;order:1;width:100%}
  header .publisher{order:2}
  .brandline{margin:38px 0 14px;gap:14px}
  .wordmark{max-width:65vw}
  section{padding:34px 0}
  h1{font-size:2.8rem}
  .reading-panel,.walkthrough,.details{grid-template-columns:1fr}
  .queue{border-left:0;border-top:1px solid var(--panel-line)}
  .prose{font-size:19px;padding:26px}
  .reading-controls{padding:18px;gap:14px}
  .gallery{flex-direction:column;gap:24px}
  .gallery figure{max-width:none}
  .details article{padding-left:18px}
  .explanation{padding:48px 0;margin-top:52px}
  .practical{margin-top:40px}
  .download{padding:44px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}