/* =============================================================
   storyofenglish.com
   Layout: one horizontal river of time. Cards run left to right,
   each era opens with a colored marker card, and the chosen moment
   unfolds in a story panel below. Type and palette come from
   meaghanmalone.com (Instrument Serif display, Host Grotesk reading,
   IBM Plex Mono for dates), set light by default: plum ink on warm
   paper. A header toggle switches to the deep plum dark version.
   ============================================================= */
:root{
  /* light paper is the house look; dark is an opt-in from the header toggle */
  --bg:#FBF8F4;
  --paper2:#F3EEE9;
  --ink:#2A1A33;
  --plum:#4A1D52;
  --ink2:#6B5D70;
  --ink3:#8E8292;
  --rule:#E7E0E4;
  --chip:#EFE9EE;
  --band:#F6E4DE;
  --accent:#E5482A;
  --accent-text:#B63A1E;
  --on-plum:#FFFFFF;
  --hl:#F7D9A8;

  /* era colors, oldest to newest */
  --e0:#8F76D1; /* lilac: before English */
  --e1:#5B63D6; /* violet: Old English */
  --e2:#D81F67; /* magenta: Middle English */
  --e3:#E5482A; /* tangerine: Early Modern */
  --e4:#C98210; /* marigold: Modern */
  --e5:#2E8FB8; /* periwinkle-blue: Global */

  /* chart series (validated for color-vision deficiency) */
  --c-oe:#5B63D6; --c-fr:#D81F67; --c-sc:#2E8FB8; --c-la:#D98A10; --c-ot:#A35FB5;

  --display:'Instrument Serif','Noto Serif',Georgia,serif;
  --sans:'Host Grotesk','Noto Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','Noto Sans Mono',ui-monospace,SFMono-Regular,monospace;
  --old:'Noto Serif',Georgia,serif; /* has thorn, eth, wynn, yogh, IPA */
  --radius:14px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --measure:66ch;
  color-scheme:light;
}
:root[data-mode="dark"]{
  --bg:#1E1424; --paper2:#291D30; --ink:#EFE6F1; --plum:#F1DDF4; --ink2:#C2B3C7; --ink3:#9A8C9F;
  --rule:#3A2C42; --chip:#33263B; --band:#3A2333; --accent:#FF7A5C; --accent-text:#FF9C84; --on-plum:#1E1424; --hl:#6A4A1E;
  --e0:#A893E6; --e1:#8A90F0; --e2:#F0558E; --e3:#FF7A5C; --e4:#E2A33A; --e5:#55B5DA;
  --c-oe:#7078E0; --c-fr:#E0457F; --c-sc:#3C9CC4; --c-la:#B87A12; --c-ot:#AE6CC0;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
::selection{background:var(--band)}
a{color:var(--accent-text);text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-weight:500;line-height:1.12;margin:0;letter-spacing:-.015em;color:var(--plum);text-wrap:balance}
p{text-wrap:pretty;margin:0}
.old{font-family:var(--old)}
.ipa{font-family:var(--old);font-style:normal}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
.kicker{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.label{font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,5vw,3.6rem);line-height:.98;color:var(--plum);letter-spacing:0}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--ink);max-width:60ch}
.muted{color:var(--ink2)}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--plum)}
.brand b{font-family:var(--display);font-weight:400;font-size:1.6rem;letter-spacing:0;line-height:1}
.brand span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.head-nav{display:flex;gap:clamp(12px,2vw,26px);font-size:.95rem;font-weight:500}
.head-nav a{color:var(--plum);text-decoration:none;white-space:nowrap}
.head-nav a:hover{color:var(--accent-text)}
.modebtn{border:0;background:var(--chip);color:var(--plum);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}
.modebtn svg{width:17px;height:17px}
.modebtn:hover{background:var(--band)}
.head-right{display:flex;align-items:center;gap:8px}
.yearpill{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--plum);background:var(--chip);border-radius:999px;padding:6px 12px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:1180px){.head-nav{display:none}}
@media (max-width:1320px){.brand span{display:none}}
@media (max-width:760px){.brand span{display:none}}

/* era progress ribbon */
.ribbon{display:flex;height:6px}
.ribbon a{flex:1 1 0;display:block;opacity:.35;transition:opacity .3s}
.ribbon a.on{opacity:1}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,8vw,104px) clamp(40px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3.6rem,10vw,8.4rem);line-height:.88;letter-spacing:-.01em;color:var(--plum)}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lede{margin-top:clamp(20px,3vw,32px)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;font-weight:500;background:var(--plum);color:var(--on-plum);border:0;border-radius:999px;padding:12px 22px;cursor:pointer;text-decoration:none;transition:background .25s}
.btn:hover{background:var(--accent-text);color:var(--on-plum)}
.btn.ghost{background:transparent;color:var(--plum);box-shadow:inset 0 0 0 1.5px var(--plum)}
.btn.ghost:hover{background:var(--plum);color:var(--on-plum)}

.spellings{border-left:1px solid var(--rule);padding-left:clamp(18px,3vw,36px);display:grid;gap:14px}
.spellings .kicker{margin-bottom:4px}
.sp-row{display:grid;grid-template-columns:5.5rem minmax(0,1fr);align-items:baseline;gap:12px;opacity:.38;transition:opacity .5s var(--ease)}
.sp-row.on{opacity:1}
.sp-row .yr{font-family:var(--mono);font-size:.75rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.sp-row .w{font-family:var(--old);font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--plum);line-height:1.1}
.sp-row .w small{display:block;font-family:var(--sans);font-size:.8rem;color:var(--ink2);margin-top:2px}

/* ---------- controls ---------- */
.controls{background:var(--bg);border-block:1px solid var(--rule);padding-block:14px}
.controls .wrap{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chipbtn{font-family:var(--sans);font-size:.85rem;font-weight:500;border:0;background:transparent;color:var(--plum);padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer}
.chipbtn[aria-pressed="true"]{background:var(--plum);color:var(--on-plum);box-shadow:none}
.search{margin-left:auto;display:flex;align-items:center;gap:8px}
.search input{font:inherit;font-size:.9rem;color:var(--ink);background:var(--paper2);border:1px solid var(--rule);border-radius:999px;padding:7px 14px;width:min(240px,60vw)}
.search input::placeholder{color:var(--ink3)}
.count{font-family:var(--mono);font-size:.72rem;color:var(--ink2);white-space:nowrap}
@media (max-width:760px){
  .filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:2px}
  .chipbtn{white-space:nowrap}
  .search{margin-left:0;width:100%}
  .search input{width:100%}
}

/* ---------- horizontal timeline ---------- */
.timeline{padding-block:clamp(48px,7vw,80px) clamp(40px,6vw,72px);border-top:1px solid var(--rule)}
.tl-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:end;margin-bottom:24px}
.tl-how{max-width:46ch}
@media (max-width:760px){.tl-head{grid-template-columns:minmax(0,1fr)}}
.timeline .controls{border:0;padding-block:0 18px}

.tl-nav{display:flex;gap:16px;align-items:stretch;margin-bottom:14px}
.eramap{flex:1 1 auto;min-width:0;display:flex;gap:3px}
.eramap button{flex:var(--n,1) 1 0;min-width:0;border:0;cursor:pointer;background:color-mix(in srgb,var(--ec) 16%,var(--bg));color:var(--plum);border-radius:6px;padding:8px 10px 7px;text-align:left;display:grid;gap:2px;position:relative;overflow:hidden;transition:background .25s}
.eramap button::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--ec)}
.eramap button .short{display:none}
.eramap button b{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eramap button span{font-family:var(--mono);font-size:.62rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.eramap button[aria-current="true"]{background:var(--ec)}
.eramap button[aria-current="true"] b,.eramap button[aria-current="true"] span{color:var(--on-plum)}
.tl-arrows{display:flex;gap:6px;flex:none}
.arrowbtn{width:46px;border:0;border-radius:10px;background:var(--plum);color:var(--on-plum);cursor:pointer;display:grid;place-items:center;transition:background .25s,opacity .25s}
.arrowbtn svg{width:18px;height:18px}
.arrowbtn:hover{background:var(--accent-text)}
.arrowbtn:disabled{opacity:.3;cursor:default;background:var(--plum)}
@media (max-width:640px){.eramap button span{display:none}.eramap button .full{display:none}.eramap button .short{display:block}.eramap button{padding:8px 6px 6px}.tl-arrows{display:none}}

.track{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:max(16px,env(safe-area-inset-left,0px));overscroll-behavior-x:contain;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--ink3) transparent;-webkit-overflow-scrolling:touch}
.track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.track.dragging .card{pointer-events:none}
.track:focus-visible{outline-offset:-3px}
.track-inner{list-style:none;margin:0;display:flex;align-items:flex-start;gap:14px;width:max-content;position:relative;padding:34px max(16px,env(safe-area-inset-right,0px)) 26px max(16px,env(safe-area-inset-left,0px))}
@media (min-width:700px){.track-inner{padding-inline:max(40px,calc((100vw - 1180px) / 2 + 40px))}}
.track-inner::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--rule)}
.tl-item{position:relative;scroll-snap-align:start;display:flex}
.tl-item::before{content:"";position:absolute;left:22px;top:-25px;width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 3px var(--ec);z-index:1;transition:background .25s,transform .25s var(--ease)}
.tl-item.sel::before,.tl-item:hover::before{background:var(--ec);transform:scale(1.25)}
.tl-item.era-item::before{width:18px;height:18px;top:-28px;left:19px;background:var(--ec);box-shadow:0 0 0 4px var(--bg)}
.tl-item::after{content:"";position:absolute;left:0;right:-14px;top:-19px;height:2px;background:var(--ec);opacity:.55}

.card{width:min(300px,78vw);border:0;text-align:left;cursor:pointer;background:var(--paper2);color:var(--ink);border-radius:var(--radius);padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;font:inherit;transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.card:hover{transform:translateY(-3px)}
.card .when{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--plum);font-variant-numeric:tabular-nums}
.card h3{font-size:1.15rem;line-height:1.18}
.card .sum{font-size:.93rem;line-height:1.5;color:var(--ink2)}
.card .tags{padding-top:2px}
.card .open-hint{font-size:.85rem;font-weight:500;color:var(--accent-text)}
.tl-item.sel .card{background:var(--bg);box-shadow:inset 0 0 0 2px var(--ec)}

.era-card{width:min(360px,84vw);background:color-mix(in srgb,var(--ec) 13%,var(--bg));padding:22px 22px 24px;gap:12px}
.era-card .era-num{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.era-card h3{font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,4vw,3rem);line-height:.92;letter-spacing:0}
.era-card .dates{font-family:var(--mono);font-size:.82rem;font-weight:500;color:var(--plum);font-variant-numeric:tabular-nums}
.era-card .src{font-family:var(--old);font-size:1.1rem;line-height:1.35;color:var(--plum);border-left:3px solid var(--ec);padding-left:12px;margin-top:4px}
.tl-item.sel .era-card{background:color-mix(in srgb,var(--ec) 22%,var(--bg));box-shadow:none}

.scrub{display:flex;align-items:center;gap:14px;margin-top:4px}
.scrub .range{margin:0;flex:1 1 auto;min-width:0}
.scrub-end{font-family:var(--mono);font-size:.7rem;color:var(--ink2);white-space:nowrap}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tag{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);background:var(--chip);padding:3px 8px;border-radius:5px}

/* the story panel */
.story{--ec:var(--e1);margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,3vw,40px);padding-top:clamp(24px,3vw,36px);border-top:6px solid var(--ec)}
.story .meta{grid-column:1 / span 4;display:grid;gap:12px;align-content:start}
.story .bodytext{grid-column:5 / -1;display:grid;gap:16px;min-width:0}
.story .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.story .eyebrow i{width:10px;height:10px;border-radius:50%;background:var(--ec);display:inline-block}
.story .bigdate{font-family:var(--display);font-size:clamp(2.6rem,6vw,4.4rem);line-height:.95;color:var(--accent);font-variant-numeric:lining-nums}
.story h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.story .lead{font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.45;color:var(--plum);font-weight:500;max-width:var(--measure)}
.story p{max-width:var(--measure)}
.story h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-weight:500;margin-bottom:8px}
.story .quote{background:var(--paper2);border-radius:var(--radius);padding:18px 22px}
.story .stepper{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.story .sample{border-left:3px solid var(--ec);padding:4px 0 4px 18px}
.story .sample .src{font-family:var(--old);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.35;color:var(--plum)}
.story .sample .gl{font-size:.95rem;color:var(--ink2);margin-top:6px}
@media (max-width:860px){.story .meta,.story .bodytext{grid-column:1 / -1}}
.wordlist{display:flex;flex-wrap:wrap;gap:6px}
.wordlist span{font-family:var(--old);font-size:.98rem;background:var(--paper2);color:var(--plum);padding:3px 10px;border-radius:999px}
.quote .src{font-family:var(--old);font-size:1.15rem;line-height:1.45;color:var(--plum)}
.quote .gl{font-size:.92rem;color:var(--ink2);margin-top:4px}
.goto{font-weight:500}
mark{background:var(--hl);color:inherit;border-radius:3px;padding:0 2px}
.empty{padding:28px 0;color:var(--ink2)}

/* ---------- feature modules ---------- */
.module{padding-block:clamp(56px,8vw,96px);border-top:1px solid var(--rule)}
.module .top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-bottom:clamp(28px,4vw,44px)}
.module .top > div:first-child{grid-column:1 / span 5}
.module .top > div:last-child{grid-column:6 / -1;display:grid;gap:14px;align-content:start}
.module .top p{max-width:var(--measure)}
@media (max-width:860px){.module .top > div{grid-column:1 / -1 !important}}

/* lost letters */
.letters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.letter{border:0;background:var(--paper2);border-radius:var(--radius);padding:18px 8px 14px;cursor:pointer;display:grid;justify-items:center;gap:6px;transition:background .25s,transform .25s var(--ease)}
.letter b{font-family:var(--old);font-weight:400;font-size:clamp(2.6rem,6vw,4rem);line-height:1;color:var(--plum)}
.letter span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.letter:hover{transform:translateY(-2px)}
.letter[aria-pressed="true"]{background:var(--plum)}
.letter[aria-pressed="true"] b,.letter[aria-pressed="true"] span{color:var(--on-plum)}
.letter-card{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:clamp(18px,3vw,30px);border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--rule)}
.letter-card h3{font-family:var(--display);font-weight:400;font-size:2rem}
.letter-card dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0}
.letter-card dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding-top:4px}
.letter-card dd{margin:0}
@media (max-width:700px){.letters{grid-template-columns:repeat(3,minmax(0,1fr))}.letter-card{grid-template-columns:minmax(0,1fr)}}

/* prayer */
.keys{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;align-items:center}
.keys .kicker{margin-right:6px}
.prayer{display:grid;gap:0}
.pr{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:clamp(12px,3vw,32px);padding-block:18px;border-top:1px solid var(--rule)}
.pr .meta b{display:block;font-family:var(--mono);font-size:.82rem;color:var(--plum);font-variant-numeric:tabular-nums}
.pr .meta span{font-size:.85rem;color:var(--ink2)}
.pr .txt{font-family:var(--old);font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.55;color:var(--ink)}
.pr .txt [data-k]{border-radius:4px;padding:0 2px;transition:background .25s,color .25s}
.prayer.focus .txt [data-k].hit{background:var(--plum);color:var(--on-plum)}
.prayer.focus .txt [data-k]:not(.hit){color:inherit}
@media (max-width:640px){.pr{grid-template-columns:minmax(0,1fr);gap:6px}}

/* vowel shift */
.gvs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:start}
.gvs-words{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.gvs-stage{display:grid;gap:8px}
.gvs-big{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.gvs-big .word{font-family:var(--display);font-size:clamp(3.4rem,8vw,5.4rem);line-height:1;color:var(--plum)}
.gvs-big .snd{font-family:var(--old);font-size:clamp(1.8rem,4vw,2.6rem);color:var(--accent)}
.gvs-like{color:var(--ink2);min-height:1.6em}
.range{width:100%;accent-color:var(--plum);margin-top:12px}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.gvs-table{overflow-x:auto;margin-top:18px}
.gvs-table table{border-collapse:collapse;width:100%;min-width:440px;font-variant-numeric:tabular-nums}
.gvs-table th,.gvs-table td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--rule);font-size:.92rem}
.gvs-table th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);font-weight:500}
.gvs-table td{font-family:var(--old)}
.gvs-table td:first-child{font-family:var(--sans);font-weight:500;color:var(--plum)}
.gvs-table tr.sel td{background:var(--paper2)}
.gvs-table td.now{background:var(--plum) !important;color:var(--on-plum);border-radius:4px}
.vowel-svg{width:100%;height:auto;display:block;max-width:520px}
.vowel-svg text{font-family:var(--old);fill:var(--plum)}
.vowel-svg .lab{font-family:var(--mono);font-size:11px;fill:var(--ink2);letter-spacing:.08em}
.vowel-svg .frame{fill:none;stroke:var(--rule);stroke-width:1.5}
.vowel-svg .arr{fill:none;stroke:var(--ink3);stroke-width:1.6;opacity:.5;transition:stroke .3s,opacity .3s}
.vowel-svg .arr.on{stroke:var(--accent);opacity:1;stroke-width:2.4}
.vowel-svg .node{fill:var(--bg);stroke:var(--plum);stroke-width:1.5}
.vowel-svg .node.on{fill:var(--accent);stroke:var(--accent)}
@media (max-width:860px){.gvs{grid-template-columns:minmax(0,1fr)}}

/* word-origin chart */
.chart-wrap{display:grid;gap:18px}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--ink)}
.legend li{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.bars{display:grid;gap:18px}
.bar-row{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:16px;align-items:center}
.bar-row .rl{font-size:.92rem;color:var(--ink)}
.bar-row .rl small{display:block;font-family:var(--mono);font-size:.68rem;color:var(--ink2);letter-spacing:.06em}
.stack{display:flex;gap:2px;height:38px;position:relative}
.seg{height:100%;border-radius:2px;position:relative;cursor:default;min-width:3px;transition:filter .2s}
.seg:first-child{border-radius:4px 2px 2px 4px}
.seg:last-child{border-radius:2px 4px 4px 2px}
.seg:hover,.seg:focus-visible{filter:brightness(1.12)}
.seg .v{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:.74rem;font-weight:500;color:#fff;pointer-events:none}
.tip{position:fixed;z-index:80;pointer-events:none;background:var(--ink);color:var(--bg);font-size:.82rem;padding:7px 10px;border-radius:8px;max-width:240px;line-height:1.35}
.tip b{display:block}
.table-toggle{justify-self:start}
.data-table{overflow-x:auto}
.data-table table{border-collapse:collapse;min-width:420px;font-variant-numeric:tabular-nums}
.data-table th,.data-table td{padding:6px 12px;border-bottom:1px solid var(--rule);text-align:right;font-size:.9rem}
.data-table th:first-child,.data-table td:first-child{text-align:left}
.data-table th{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:500}
.source-note{font-size:.85rem;color:var(--ink2);max-width:var(--measure)}
@media (max-width:640px){.bar-row{grid-template-columns:minmax(0,1fr);gap:6px}}

/* word journeys */
.jfilters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.journeys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.journey{background:var(--paper2);border-radius:var(--radius);padding:20px;display:grid;gap:12px;align-content:start;min-width:0}
.journey h3{font-family:var(--display);font-weight:400;font-size:2.1rem;line-height:1}
.journey .from{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.path{list-style:none;margin:0;padding:0;display:grid;gap:0}
.path li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding-bottom:10px;position:relative}
.path li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--plum);margin-top:7px}
.path li:not(:last-child)::after{content:"";position:absolute;left:4px;top:18px;bottom:0;width:1px;background:var(--ink3)}
.path li:last-child::before{background:var(--accent)}
.path b{font-family:var(--old);font-weight:500;color:var(--plum)}
.path span{font-size:.9rem;color:var(--ink2)}
@media (max-width:980px){.journeys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.journeys{grid-template-columns:minmax(0,1fr)}}

/* quiz */
.quiz{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.qcard{background:var(--plum);color:var(--on-plum);border-radius:var(--radius);padding:clamp(22px,4vw,40px);display:grid;gap:18px;min-height:260px;align-content:space-between}
.qcard .kicker{color:color-mix(in srgb,var(--on-plum) 70%,transparent)}
.qcard .qt{font-family:var(--old);font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.4}
.qopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.qopt{border:0;border-radius:10px;padding:12px 14px;text-align:left;cursor:pointer;background:color-mix(in srgb,var(--on-plum) 12%,transparent);color:var(--on-plum);font-weight:500;font-size:.95rem}
.qopt:hover{background:color-mix(in srgb,var(--on-plum) 22%,transparent)}
.qopt.right{background:var(--e5);color:var(--on-plum)}
.qopt.wrong{background:var(--accent);color:var(--on-plum);opacity:.85}
.qopt:disabled{cursor:default}
.qfeed{min-height:4.5em;display:grid;gap:10px;align-content:start}
.qscore{font-family:var(--mono);font-size:.8rem;color:var(--ink2);font-variant-numeric:tabular-nums}
@media (max-width:860px){.quiz{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.qopts{grid-template-columns:minmax(0,1fr)}}

/* footer */
.foot{border-top:1px solid var(--rule);padding-block:48px 64px;background:var(--paper2)}
.foot .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.foot .a{grid-column:1 / span 5}
.foot .b{grid-column:6 / -1}
.foot ul{margin:10px 0 0;padding-left:1.1em;color:var(--ink2);font-size:.92rem;display:grid;gap:6px}
.foot .brand b{font-size:2.2rem}
@media (max-width:760px){.foot .a,.foot .b{grid-column:1 / -1}}

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

/* keep scrolling children inside their tracks */
.gvs > div,.chart-wrap,.module .top > div{min-width:0}
@media (max-width:760px){.filters{width:100%;min-width:0}}
@media (max-width:860px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .spellings{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:24px}
}
.heart{color:var(--accent);font-family:var(--old)}

/* ---------- why is English so irregular? ---------- */
.subhead{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;letter-spacing:0;margin-bottom:16px}
.subrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:end;margin:clamp(56px,7vw,88px) 0 20px}
.subrow p{max-width:var(--measure)}
@media (max-width:860px){.subrow{grid-template-columns:minmax(0,1fr)}}
.irr-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(18px,3vw,36px);align-items:start}
.layers{display:flex;flex-direction:column-reverse;gap:4px}
.layer{border:0;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;border-radius:8px;background:color-mix(in srgb,var(--lc) 16%,var(--bg));color:var(--plum);box-shadow:inset 6px 0 0 var(--lc);transition:background .25s,transform .25s var(--ease)}
.layer b{font-weight:500;font-size:1.05rem}
.layer span{font-family:var(--mono);font-size:.68rem;color:var(--ink2);text-align:right}
.layer:hover{transform:translateX(3px)}
.layer[aria-selected="true"]{background:var(--lc)}
.layer[aria-selected="true"] b,.layer[aria-selected="true"] span{color:var(--on-plum)}
.layers-cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);display:flex;justify-content:space-between;margin-top:8px}
.layer-panel{background:var(--paper2);border-radius:var(--radius);padding:clamp(20px,3vw,32px);display:grid;gap:16px;border-top:5px solid var(--lc,var(--plum))}
.layer-panel h3{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4vw,3rem);line-height:.95}
.layer-panel .when{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--plum)}
.layer-panel h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-weight:500;margin-bottom:6px}
.layer-panel ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
.layer-panel .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.layer-panel .caused{background:var(--bg);border-radius:10px;padding:14px 16px}
.layer-panel .wordlist span{background:var(--bg)}
@media (max-width:860px){.irr-grid{grid-template-columns:minmax(0,1fr)}.layer-panel .two{grid-template-columns:minmax(0,1fr)}}

.pfilters{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media (max-width:860px){.pfilters{justify-content:flex-start}}
.puzzles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.puzzle{background:var(--paper2);border-radius:var(--radius);overflow:hidden;min-width:0}
.puzzle button{width:100%;border:0;background:none;cursor:pointer;text-align:left;padding:18px 18px 16px;display:grid;gap:10px;color:var(--plum)}
.puzzle .lt{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.puzzle .lt i{width:9px;height:9px;border-radius:50%;background:var(--lc);display:inline-block}
.puzzle .pq{font-size:1.08rem;font-weight:500;line-height:1.3}
.puzzle .reveal{font-size:.85rem;font-weight:500;color:var(--accent-text)}
.puzzle .pa{padding:0 18px 18px;display:grid;gap:10px;font-size:.95rem}
.puzzle .pa .ex{font-family:var(--old);color:var(--plum);border-left:3px solid var(--lc);padding-left:10px}
.puzzle.open{box-shadow:inset 0 0 0 2px var(--lc)}
@media (max-width:980px){.puzzles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.puzzles{grid-template-columns:minmax(0,1fr)}}

.triplets{overflow-x:auto}
.triplets table{width:100%;min-width:480px;border-collapse:collapse}
.triplets th{text-align:left;padding:10px 14px;font-weight:500;vertical-align:bottom}
.triplets th b{display:flex;align-items:center;gap:8px;font-size:1rem;color:var(--plum)}
.triplets th b i{width:10px;height:10px;border-radius:50%;display:inline-block}
.triplets th span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:3px}
.triplets td{padding:12px 14px;border-top:1px solid var(--rule);font-family:var(--old);font-size:1.15rem;color:var(--ink)}
.triplets td:nth-child(1){font-size:1.15rem}
.triplets td:nth-child(3){font-style:italic}
.triplets tr:hover td{background:var(--paper2)}
.register{display:flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.register .bar{flex:1 1 auto;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--c-oe),var(--c-fr),var(--c-la))}

/* ---------- cream cards on the dark background ----------
   When a reader switches to dark mode, card surfaces switch to cream and take the light
   palette's ink, so they lift off the plum ground. */
:root[data-mode="dark"] :is(.card,.puzzle,.journey,.layer-panel,.letter,.story .quote){
  --bg:#FFFDF9; --paper2:#F7F0E8; --ink:#2A1A33; --plum:#4A1D52; --ink2:#5F5164; --ink3:#8E8292;
  --rule:#E4D9DF; --chip:#EDE3E8; --band:#F6E4DE; --accent:#D8411F; --accent-text:#A8351B; --on-plum:#FFFFFF; --hl:#F7D9A8;
  background:var(--paper2); color:var(--ink);
  box-shadow:0 1px 0 rgba(0,0,0,.25), 0 10px 28px -14px rgba(0,0,0,.55);
}
:root[data-mode="dark"] .tl-item.sel .card{background:var(--bg);box-shadow:inset 0 0 0 3px var(--ec), 0 12px 30px -12px rgba(0,0,0,.6)}
:root[data-mode="dark"] .tl-item.sel .era-card{background:color-mix(in srgb,var(--ec) 24%,var(--bg))}
:root[data-mode="dark"] .era-card{background:color-mix(in srgb,var(--ec) 16%,var(--bg))}
:root[data-mode="dark"] .puzzle.open{box-shadow:inset 0 0 0 3px var(--lc), 0 10px 28px -14px rgba(0,0,0,.55)}
:root[data-mode="dark"] .letter[aria-pressed="true"]{background:var(--plum)}

/* ---------- explore index ---------- */
.explore-index{border-top:0}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{display:grid;gap:6px;align-content:start;padding:18px 18px 20px;border-radius:var(--radius);background:var(--paper2);color:var(--ink);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s;min-width:0;border-top:4px solid var(--tc,var(--plum))}
.tile:hover{transform:translateY(-3px)}
.tile .tk{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.tile b{font-family:var(--display);font-weight:400;font-size:1.65rem;line-height:1;color:var(--plum)}
.tile span:last-child{font-size:.9rem;color:var(--ink2);line-height:1.45}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.tiles{grid-template-columns:minmax(0,1fr)}}

/* ---------- roots lab ---------- */
.rootbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-bottom:16px}
.rootbar .pfilters{justify-content:flex-start}
.partgrid{display:flex;flex-wrap:wrap;gap:8px}
.part{border:0;cursor:pointer;background:var(--paper2);color:var(--plum);border-radius:10px;padding:8px 12px 8px 14px;display:grid;gap:1px;text-align:left;box-shadow:inset 4px 0 0 var(--pc);transition:background .2s,transform .2s var(--ease)}
.part b{font-family:var(--old);font-weight:500;font-size:1.05rem}
.part span{font-size:.76rem;color:var(--ink2)}
.part:hover{transform:translateY(-2px)}
.part[aria-pressed="true"]{background:var(--pc)}
.part[aria-pressed="true"] b,.part[aria-pressed="true"] span{color:var(--on-plum)}
.rootout{margin-top:22px;display:grid;gap:16px}
.rootout .rhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.rootout .rhead h3{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4vw,3rem);line-height:1}
.rootout .rhead p{color:var(--ink2)}
.rwords{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rword{background:var(--paper2);border-radius:var(--radius);padding:16px 18px;display:grid;gap:10px;min-width:0}
.segs{display:flex;flex-wrap:wrap;gap:3px;align-items:flex-start}
.seg2{display:grid;justify-items:center;gap:2px}
.seg2 b{font-family:var(--old);font-weight:500;font-size:1.3rem;line-height:1.2;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--pc) 22%,transparent);color:var(--plum)}
.seg2.hit b{background:var(--pc);color:var(--on-plum)}
.seg2.join b{background:none;padding:2px 0;color:var(--ink2)}
.seg2 span{font-size:.68rem;color:var(--ink2);line-height:1.2;text-align:center;max-width:9em}
.rword .def{font-size:.95rem}
.rword .def b{color:var(--plum);font-weight:500}
.rword .note{font-size:.82rem;color:var(--ink2)}
@media (max-width:980px){.rwords{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.rwords{grid-template-columns:minmax(0,1fr)}}

.surgeon{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.scard{background:var(--plum);color:var(--on-plum);border-radius:var(--radius);padding:clamp(22px,4vw,36px);display:grid;gap:14px}
.scard .kicker{color:color-mix(in srgb,var(--on-plum) 70%,transparent)}
.sword{font-family:var(--display);font-size:clamp(2.6rem,6vw,3.8rem);line-height:1;display:flex;flex-wrap:wrap;gap:2px}
.sword .hit{color:var(--hl);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.sask{font-size:1rem}
.sopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sfeed{display:grid;gap:10px;align-content:start;min-height:4.5em}
@media (max-width:860px){.surgeon{grid-template-columns:minmax(0,1fr)}}

/* ---------- read it in the original ---------- */
.ptabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ptab{border:0;cursor:pointer;border-radius:12px;padding:10px 14px;text-align:left;background:var(--paper2);color:var(--plum);display:grid;gap:2px;box-shadow:inset 0 3px 0 var(--tc,var(--plum))}
.ptab b{font-weight:500}
.ptab span{font-family:var(--mono);font-size:.66rem;color:var(--ink2)}
.ptab[aria-selected="true"]{background:var(--plum);color:var(--on-plum);box-shadow:none}
.ptab[aria-selected="true"] span{color:color-mix(in srgb,var(--on-plum) 75%,transparent)}
.ptools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-bottom:16px}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:500;color:var(--plum);cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--plum)}
.passage{background:var(--paper2);border-radius:var(--radius);padding:clamp(20px,4vw,40px);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,4vw,48px)}
.passage .phead{grid-column:1 / -1;display:grid;gap:6px}
.passage .phead h3{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4vw,2.8rem);line-height:1}
.passage .phead .meta{font-family:var(--mono);font-size:.74rem;color:var(--ink2)}
.ptext{display:grid;gap:14px;min-width:0;align-content:start}
.pline{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:flex-start}
.tok{border:0;background:none;cursor:pointer;padding:2px 4px;border-radius:6px;display:inline-grid;justify-items:start;gap:0;font-family:var(--old);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.3;color:var(--ink);transition:background .2s}
.tok:hover{background:var(--chip)}
.tok small{font-family:var(--sans);font-size:.72rem;color:var(--ink2);line-height:1.2}
.tok[aria-pressed="true"]{background:var(--plum);color:var(--on-plum)}
.tok[aria-pressed="true"] small{color:color-mix(in srgb,var(--on-plum) 80%,transparent)}
.passage.color .tok{box-shadow:inset 0 -3px 0 var(--lc)}
.passage.color .tok[data-l="oe"]{background:color-mix(in srgb,var(--c-oe) 12%,transparent)}
.passage.color .tok[data-l="fr"]{background:color-mix(in srgb,var(--c-fr) 18%,transparent)}
.passage.color .tok[data-l="la"]{background:color-mix(in srgb,var(--c-la) 22%,transparent)}
.passage.color .tok[data-l="sc"]{background:color-mix(in srgb,var(--c-sc) 18%,transparent)}
.passage.color .tok[aria-pressed="true"]{background:var(--plum)}
.pside{display:grid;gap:14px;align-content:start;min-width:0}
.pword{background:var(--bg);border-radius:12px;padding:16px 18px;display:grid;gap:4px;border-left:4px solid var(--lc,var(--plum))}
.pword .o{font-family:var(--old);font-size:1.6rem;color:var(--plum);line-height:1.1}
.pword .m{font-size:1.05rem;font-weight:500}
.pword .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.pside h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-weight:500;margin-bottom:4px}
.pside p{font-size:.95rem}
@media (max-width:860px){.passage{grid-template-columns:minmax(0,1fr)}}

/* ---------- whale-road map ---------- */
.mapsteps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mapwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.mapsvg{width:100%;height:auto;display:block;background:color-mix(in srgb,var(--e5) 16%,var(--bg));border-radius:var(--radius)}
.mapsvg .land{fill:color-mix(in srgb,var(--ink) 8%,var(--bg));stroke:color-mix(in srgb,var(--ink) 22%,var(--bg));stroke-width:.8}
.mapsvg .route{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.mapsvg .route.draw{animation:draw 1.2s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.mapsvg .dot{fill:var(--plum);stroke:var(--bg);stroke-width:2}
.mapsvg .dlabel{font-family:var(--sans);font-size:13px;font-weight:500;fill:var(--plum);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.mapsvg .region{fill:color-mix(in srgb,var(--e2) 22%,transparent);stroke:var(--e2);stroke-width:1.5;stroke-dasharray:5 4}
.mapsvg .c-inner{fill:var(--c-oe)}.mapsvg .c-outer{fill:var(--c-fr)}.mapsvg .c-expanding{fill:var(--c-sc)}
.mapsvg .cdot{stroke:var(--bg);stroke-width:2}
.mapcap{background:var(--paper2);border-radius:var(--radius);padding:20px;display:grid;gap:8px}
.mapcap .y{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--accent)}
.mapcap h3{font-size:1.3rem}
.mapcap p{font-size:.95rem}
.mapcap .legend{font-size:.85rem}
.mapnav{display:flex;gap:10px;margin-top:14px}
@media (max-width:900px){.mapwrap{grid-template-columns:minmax(0,1fr)}}

/* ---------- englishes ---------- */
.englist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.eng{background:var(--paper2);border-radius:var(--radius);padding:clamp(18px,3vw,26px);display:grid;gap:12px;align-content:start;min-width:0}
.eng h3{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1}
.eng .where{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink2)}
.eng p{font-size:.95rem}
.eng table{width:100%;border-collapse:collapse;font-size:.92rem}
.eng td{padding:7px 8px 7px 0;border-top:1px solid var(--rule);vertical-align:top}
.eng td:first-child{font-family:var(--mono);font-size:.72rem;color:var(--ink2);white-space:nowrap;padding-top:9px}
.eng td:nth-child(2){font-family:var(--old);color:var(--plum);font-size:1rem}
.eng .link{font-size:.88rem;color:var(--ink2);border-left:3px solid var(--accent);padding-left:10px}
@media (max-width:820px){.englist{grid-template-columns:minmax(0,1fr)}}

/* ---------- runes ---------- */
.runebox{display:grid;gap:12px}
.runein{font:inherit;font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem);color:var(--plum);background:var(--paper2);border:1px solid var(--rule);border-radius:12px;padding:10px 16px;width:min(560px,100%)}
.runeout{font-family:'Noto Sans Runic',var(--old);font-size:clamp(2.6rem,8vw,5rem);line-height:1.15;color:var(--plum);letter-spacing:.06em;min-height:1.2em;overflow-wrap:anywhere}
.runecopy{display:flex;align-items:center;gap:12px}
.runekey{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.runekey li{background:var(--paper2);border-radius:10px;padding:10px 12px;display:grid;justify-items:center;gap:2px;min-width:5.5rem}
.runekey .r{font-family:'Noto Sans Runic',var(--old);font-size:1.9rem;color:var(--plum);line-height:1.1}
.runekey .n{font-family:var(--old);font-size:.92rem;color:var(--plum)}
.runekey .m{font-size:.72rem;color:var(--ink2);text-align:center;max-width:8em}

/* ---------- for teachers ---------- */
.teachcard{background:var(--paper2);border-radius:var(--radius);padding:clamp(20px,4vw,40px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,3vw,36px);border-top:6px solid var(--tc,var(--plum))}
.teachcard .ta{grid-column:1 / span 5;display:grid;gap:14px;align-content:start}
.teachcard .tb{grid-column:6 / -1;display:grid;gap:18px;align-content:start}
.teachcard h3{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4vw,3rem);line-height:1}
.teachcard .idea{font-size:1.15rem;font-weight:500;color:var(--plum);line-height:1.4}
.teachcard h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-weight:500;margin-bottom:6px}
.teachcard ol,.teachcard ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.teachcard .wordlist span{background:var(--bg)}
.teachcard .links{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:860px){.teachcard .ta,.teachcard .tb{grid-column:1 / -1}}

/* new surfaces join the cream cards in dark mode */
:root[data-mode="dark"] :is(.tile,.eng,.teachcard,.passage,.rword,.part,.runekey li,.mapcap,.ptab:not([aria-selected="true"])){
  --bg:#FFFDF9; --paper2:#F7F0E8; --ink:#2A1A33; --plum:#4A1D52; --ink2:#5F5164; --ink3:#8E8292;
  --rule:#E4D9DF; --chip:#EDE3E8; --band:#F6E4DE; --accent:#D8411F; --accent-text:#A8351B; --on-plum:#FFFFFF; --hl:#F7D9A8;
  background:var(--paper2); color:var(--ink);
}
:root[data-mode="dark"] .part[aria-pressed="true"]{background:var(--pc)}
:root[data-mode="dark"] .mapsvg .land{fill:#3A2C42;stroke:#4A3A52}

/* ---------- a strange grammar (after McWhorter) ---------- */
.story .altview{border-left:4px solid var(--e5);background:color-mix(in srgb,var(--e5) 9%,var(--bg));border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;display:grid;gap:8px}
.story .altview p{max-width:var(--measure)}
.story .altview .cite,.gcite{font-size:.82rem;color:var(--ink2)}
.gcite{margin-top:auto;padding-top:6px}
.gtwo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(14px,2vw,24px);align-items:stretch}
.gthree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(14px,2vw,24px)}
@media (max-width:900px){.gtwo,.gthree{grid-template-columns:minmax(0,1fr)}}
.gcard,.gmini,.gflag{background:var(--paper2);border-radius:var(--radius);padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:14px}
.gmini{gap:10px;border-top:4px solid var(--e5)}
.gmini h4,.gview h4,.gfeat h4{font-family:var(--sans);font-size:1.05rem;font-weight:600;color:var(--plum)}
.gh{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.1rem);line-height:1;color:var(--plum)}
.old{font-family:var(--old)}
.gsents{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gsents li{background:var(--bg);border-radius:10px;padding:10px 14px;display:grid;gap:2px}
.gsents .now{font-family:var(--old);font-size:1.12rem;color:var(--plum);transition:color .3s}
.gsents .was{font-size:.8rem;color:var(--ink3)}
.gsents.off .now{color:var(--accent-text)}
.gnote{font-size:.8rem;color:var(--ink3)}
.gingout{min-height:170px;display:grid;gap:6px;align-content:start}
.gbig{font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.05;color:var(--plum)}
.gingout .gl{color:var(--accent-text);font-weight:500}
.gcard .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.gside{background:var(--bg);border-radius:10px;padding:14px 16px;display:grid;gap:4px}
.gpar{font-size:1.25rem;color:var(--plum)}
.gfeatwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(14px,2vw,24px);align-items:start}
.gfeatwrap > .gcite{grid-column:1 / -1}
@media (max-width:900px){.gfeatwrap{grid-template-columns:minmax(0,1fr)}}
.gfeats{overflow-x:auto}
.gfeats table{border-collapse:collapse;width:100%;min-width:560px}
.gfeats th,.gfeats td{padding:10px 8px;border-bottom:1px solid var(--rule);text-align:center;font-size:.92rem}
.gfeats th{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:500;vertical-align:bottom}
.gfeats th:first-child,.gfeats td:first-child{text-align:left;font-weight:500;color:var(--plum)}
.gfeats tbody tr{cursor:pointer;transition:background .2s}
.gfeats tbody tr:hover,.gfeats tbody tr.sel{background:var(--paper2)}
.gfeats tbody tr:focus-visible{outline:2px solid var(--plum);outline-offset:-2px}
.gfeats .engcol{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.gy{color:var(--e1);font-size:1rem}
.gn{color:var(--accent);font-size:1rem}
.gfeat{background:var(--paper2);border-radius:var(--radius);padding:clamp(20px,3vw,28px);display:grid;gap:10px;border-top:4px solid var(--e1)}
.gfeat .old{font-size:1.08rem;color:var(--plum);line-height:1.45}
.glag{background:var(--paper2);border-radius:var(--radius);padding:clamp(22px,3vw,34px);display:grid;gap:18px}
.lagbar{position:relative;height:14px;border-radius:7px;background:var(--rule)}
.lagbar .seg{position:absolute;top:0;bottom:0;border-radius:7px}
.lagbar .spoken,.legend i.spoken{background:repeating-linear-gradient(45deg,var(--e0),var(--e0) 6px,color-mix(in srgb,var(--e0) 55%,var(--bg)) 6px,color-mix(in srgb,var(--e0) 55%,var(--bg)) 12px)}
.lagbar .gap,.legend i.gap{background:var(--ink3)}
.lagbar .written,.legend i.written{background:var(--e2)}
.lagpts{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lagpts li{display:grid;gap:4px;border-top:3px solid var(--e0);padding-top:8px;font-size:.88rem}
.lagpts li.gap{border-color:var(--ink3)}
.lagpts li.written{border-color:var(--e2)}
.lagpts b{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1;color:var(--plum)}
@media (max-width:700px){.lagpts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.glag .legend{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0;font-size:.82rem;color:var(--ink2)}
.glag .legend li{display:flex;align-items:center;gap:6px}
.glag .legend i{width:22px;height:10px;border-radius:5px;display:inline-block}
.gflag{border-top:4px solid var(--e4)}
.gviews{display:grid;gap:12px}
.gview{border-top:1px solid var(--rule);padding-top:16px;display:grid;gap:10px}
.gview .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,3vw,36px)}
.gview .two > div:last-child{border-left:3px solid var(--e5);padding-left:16px}
.gview .two > div:first-child{border-left:3px solid var(--ink3);padding-left:16px}
.gview p{max-width:var(--measure)}
@media (max-width:700px){.gview .two{grid-template-columns:minmax(0,1fr)}}
.gsrc{margin-top:clamp(28px,4vw,40px)}
:root[data-mode="dark"] :is(.gcard,.gmini,.gflag,.gfeat,.glag){--bg:#FFFDF9;--paper2:#F7F0E8;--ink:#2A1A33;--plum:#4A1D52;--ink2:#5F5164;--ink3:#8E8292;--rule:#E4D9DF;--accent:#D8411F;--accent-text:#A8351B;background:var(--paper2);color:var(--ink)}
.gfeats th:first-child,.gfeats td:first-child{position:sticky;left:0;background:var(--bg);z-index:1}
.gfeats tbody tr.sel td:first-child,.gfeats tbody tr:hover td:first-child{background:var(--paper2)}
@media (max-width:600px){.gfeats table{min-width:520px}.gfeats th:first-child,.gfeats td:first-child{min-width:130px}}