/* Text pages (Tarina, Näin se toimii, UKK, Ehdot, Tietosuoja, Yhteystiedot). Same tokens as the map page (app.css). */
:root{--ground:#0c0b0a;--panel:#0f0e0c;--ink:#efe6d2;--muted:#b9a98a;--line:rgba(201,161,89,.45);--accent:#c9a159;--cta-bg:linear-gradient(180deg,#f6e2a6,#d6ad5e 45%,#9e7430);--cta-fg:#140f06;color-scheme:dark;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;--mono:"IBM Plex Mono",Menlo,Consolas,monospace;--ui:"IBM Plex Sans","Segoe UI",system-ui,sans-serif}
:root[data-mj="light"]{--ground:#ece4d2;--panel:#f6eedb;--ink:#1c1710;--muted:#5d4f3a;--line:rgba(110,80,30,.4);--accent:#9a7130;--cta-bg:#1c1710;--cta-fg:#e9cf8c;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:1.02rem/1.6 var(--ui)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.wm{font-family:var(--display);font-weight:900;font-size:2rem;line-height:.9;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.back,.cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--cta-bg);color:var(--cta-fg);box-shadow:0 0 0 1px #5e4317;font-family:var(--display);font-weight:900;font-size:1.1rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border-radius:2px;white-space:nowrap}
main{max-width:640px;margin:0 auto;padding:28px 16px 40px}
h1{font-family:var(--display);font-weight:900;font-size:2.6rem;line-height:.95;letter-spacing:.02em;text-transform:uppercase;margin:0 0 6px;text-wrap:balance}
.sub{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 24px}
h2{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;margin:30px 0 6px;color:var(--accent)}
p{margin:0 0 14px}
.lead{font-size:1.25rem;line-height:1.45;border-left:3px solid var(--accent);padding-left:12px}
ol{margin:0 0 14px;padding-left:22px}li{margin:6px 0}
.note{border:1px solid var(--line);padding:12px 14px;color:var(--muted)}
.cta{margin-top:12px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.foot{border-top:1px solid var(--line);padding:22px 16px 34px;max-width:640px;margin:0 auto;color:var(--muted);font-size:.85rem}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:14px}
.foot a{color:var(--ink);min-height:32px;display:inline-flex;align-items:center}
.foot a[aria-current]{color:var(--accent);text-decoration:none}
.foot p{margin:0 0 4px}
/* Back arrow (top left): returns to the menu list on the map page */
.arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:2px;color:var(--ink);background:var(--panel)}
.top .wm{margin-right:auto}
/* Small arrow at the bottom centre, shown after scrolling down: back to the top of the page */
.ylos{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line);border-radius:2px;background:var(--panel);color:var(--ink);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ylos[hidden]{display:none}
.ylos:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Back-to-top arrow slightly see-through so the text under it stays readable (Baddy 10 Oct 2026) */
.ylos{opacity:.6;box-shadow:none}.ylos:hover,.ylos:focus-visible{opacity:1}
/* wordmark (sized for the longer Kirjurikansa, now Sanawatti): shrink on narrow screens so the top bar never scrolls sideways */
.wm{font-size:clamp(1.3rem,6vw,2rem);min-width:0}
.top{flex-wrap:nowrap}

/* the emblem beside the name in the page header */
.wm{display:inline-flex;align-items:center;gap:10px}
.wm .emb{width:34px;height:34px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(201,161,89,.4)}
.wm .emb.l{display:none}
:root[data-mj=light] .wm .emb.d{display:none}
:root[data-mj=light] .wm .emb.l{display:block}
@media (max-width:420px){.wm .emb{width:28px;height:28px}.wm{gap:8px}}
/* subtitles in the same small caps as the map page (was a typewriter-style mono font) */
.sub{font-family:var(--ui);font-variant:normal;text-transform:none;font-size:.95rem;font-weight:500;letter-spacing:.01em;line-height:1.4}