/* FSM History — "Four Stars" · base.css
   Shared by every page: fonts, tokens (colour, type scale, spacing, motion), reset, layout, header/menu/footer,
   view transitions, shared components (cards, chips, events, star map, chart paper, tables, cite panel, toast) and print.
   Each page type adds one stylesheet of its own (home.css, timeline.css, era.css …).

   Two materials, one layout:
   - dark  = the night ocean: navy sea, white stars, faint sky.
   - light = the paper navigation chart: warm chart paper, ink stars with a thin ring, a faint graticule on maps.
   Pages use the tokens below and never hard-code colours. */

/* ---------- fonts
   Body: "FSM Sans" = Atkinson Hyperlegible with a plain (unslashed) zero, real 400 / 700 / italic 400.
   Made by scripts/tools/plain_zero.py (OFL; see fonts/FSMSans-OFL.txt). Latin-ext files have no digits and are unmodified.
   Display, dates, years: Newsreader (static 400 and a real 600). */
@font-face{font-family:'FSM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/FSMSans-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'FSM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/AtkinsonHyperlegible-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'FSM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/FSMSans-normal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'FSM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/AtkinsonHyperlegible-normal-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'FSM Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/FSMSans-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'FSM Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/AtkinsonHyperlegible-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Newsreader-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Newsreader-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Newsreader-normal-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Newsreader-normal-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/Newsreader-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/Newsreader-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens
   Light = paper navigation chart. Contrast on --bg / --bg2 / --bg3 (verified):
   ink 15.2 / 16.2 / 13.5 · dim 6.7 / 7.1 / 5.9 · blue 5.6 / 6.0 / 5.0 · line-strong 3.9 / 4.2 / 3.5 (non-text ≥3)
   states ≥4.5 on bg and bg2, ≥4.2 on bg3 · weak on weak-bg 4.8 · disp on disp-bg 5.8.
   Dark = night ocean: ink 15+ · dim 8.8 · line-strong 3.7 / 3.9 / 3.2. --line is decorative only (dividers). */
:root{
  --bg:#f6f2ea; --bg2:#fcfaf6; --bg3:#ece5d7; --ink:#0d1d33; --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230d1d33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --dim:#43576d; --line:#d6ccba; --line-strong:#6e7a87;
  --blue:#1d649f; --blue-ink:#ffffff; --star:#0d1d33; --star-ring:#0d1d33; --glow:#e9dfcb;
  --grat:rgba(29,100,159,.16); --sky:transparent; --sea:#f6f2ea;
  --weak:#8a5a00; --weak-bg:#f6e6c4; --disp:#9b2c2c; --disp-bg:#f5ded8;
  --pohnpei:#087680; --kosrae:#3a7520; --chuuk:#2457b3; --yap:#94600f; --national:#4c5c70; --outer:#7b4fa8;
  --display:"Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body:"FSM Sans", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --measure:68ch; --r:12px; --r-s:8px;
  /* type scale (phone → desktop), ratio ≈1.25 */
  --t-eyebrow:.75rem;                                   /* 12px: one small label per section at most */
  --t-xs:.8125rem;                                      /* 13px, meta (minimum) */
  --t-sm:.9375rem;                                      /* 15px */
  --t-body:1.0625rem;                                   /* 17px */
  --t-read:clamp(1.0625rem, .95rem + .45vw, 1.1875rem); /* 17 → 19px long-form */
  --t-lg:clamp(1.25rem, 1.15rem + .4vw, 1.375rem);      /* 20 → 22px ledes */
  --t-h3:clamp(1.375rem, 1.2rem + .6vw, 1.625rem);      /* 22 → 26px */
  --t-h2:clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);        /* 28 → 40px */
  --t-h1:clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);         /* 40 → 72px */
  --t-display:clamp(3.5rem, 2rem + 6.4vw, 7.5rem);      /* 56 → 120px */
  /* spacing rhythm: sections breathe in one step, blocks inside a section in another */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --gap:clamp(16px, 1rem + 1.2vw, 32px);
  --sec:clamp(48px, 2rem + 4vw, 104px);               /* vertical padding of a page section */
  /* motion: hover/press --d-1 · small state changes --d-2 · panels/sheets --d-3 · signature moments --d-4/--d-5 */
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-star:cubic-bezier(.34,1.3,.64,1);
  --d-1:120ms; --d-2:200ms; --d-3:320ms; --d-4:600ms; --d-5:1200ms;
  /* layout: --head-h is measured by site.js; --tl-h by timeline.js */
  --head-h:64px; --tl-h:0px;
  color-scheme: light;
}
@media (max-width:999px){:root{--head-h:56px}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d1d33; --bg2:#0a1729; --bg3:#13294a; --ink:#eef4fa; --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23eef4fa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --dim:#a9bdd3; --line:#24405f; --line-strong:#56789c;
  --blue:#6cace4; --blue-ink:#06121f; --star:#ffffff; --star-ring:transparent; --glow:#16365c;
  --grat:rgba(108,172,228,.07); --sky:#a9bdd3; --sea:#0b1a2f;
  --weak:#f1c96e; --weak-bg:#2c2513; --disp:#f3a6a0; --disp-bg:#33191b;
  --pohnpei:#6fd0cf; --kosrae:#a6d98a; --chuuk:#9cbcff; --yap:#f2c46a; --national:#c9d6e4; --outer:#cfa9f2;
  color-scheme: dark}}
:root[data-theme="dark"]{
  --bg:#0d1d33; --bg2:#0a1729; --bg3:#13294a; --ink:#eef4fa; --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23eef4fa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --dim:#a9bdd3; --line:#24405f; --line-strong:#56789c;
  --blue:#6cace4; --blue-ink:#06121f; --star:#ffffff; --star-ring:transparent; --glow:#16365c;
  --grat:rgba(108,172,228,.07); --sky:#a9bdd3; --sea:#0b1a2f;
  --weak:#f1c96e; --weak-bg:#2c2513; --disp:#f3a6a0; --disp-bg:#33191b;
  --pohnpei:#6fd0cf; --kosrae:#a6d98a; --chuuk:#9cbcff; --yap:#f2c46a; --national:#c9d6e4; --outer:#cfa9f2;
  color-scheme: dark}

/* ---------- motion: one global reduced-motion rule; cross-document view transitions where supported */
@view-transition{navigation:auto}
/* Baseline page turn: the old page lifts away, the new one settles in. The header is its own group, so it stays put.
   Page types can steer the direction by setting on :root:  --vt-dx / --vt-dy (entering offset, default 0 / 14px)
   and --vt-out-dx / --vt-out-dy (leaving offset, default 0 / -8px). Era pages flip the sign for "back". */
::view-transition-old(root){animation:vt-out var(--d-2) var(--ease-in-out) both}
::view-transition-new(root){animation:vt-in var(--d-3) var(--ease-out) both}
::view-transition-group(site-head){animation-duration:var(--d-2)}
@keyframes vt-out{to{opacity:0;transform:translate(var(--vt-out-dx,0),var(--vt-out-dy,-8px))}}
@keyframes vt-in{from{opacity:0;transform:translate(var(--vt-dx,0),var(--vt-dy,14px))}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  @view-transition{navigation:none}
}

/* ---------- reset & type */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 12px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--t-body)/1.62 var(--body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
::selection{background:color-mix(in srgb,var(--blue) 30%,transparent);color:var(--ink)}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:1px;transition:text-decoration-thickness var(--d-1)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;text-wrap:balance;margin:0 0 .5em}
h1{font-size:var(--t-h1);letter-spacing:-.015em;line-height:1.04}
h2{font-size:var(--t-h2);letter-spacing:-.008em}
h3{font-size:var(--t-h3);font-weight:600}
p{margin:0 0 1em;text-wrap:pretty}
/* dates and years: Newsreader lining tabular figures */
.date,.yh,.y,time,.num{font-family:var(--display);font-variant-numeric:lining-nums tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.js .nojs-only{display:none}
.no-js .js-only{display:none}
.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:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.prose{max-width:var(--measure);font-size:var(--t-read);line-height:1.65}
.prose.wide{max-width:none}
.prose h3,.prose h2.sub{margin-top:1.6em}
.prose h2.sub{font-size:var(--t-h3);font-weight:600}
.prose blockquote{margin:1em 0;padding:.6em 1em;border-left:3px solid var(--blue);background:var(--bg3);border-radius:0 8px 8px 0}
.prose table,.tbl{border-collapse:collapse;width:100%;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.prose th,.prose td,.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:.6em .7em;text-align:left;vertical-align:top}
.prose th,.tbl th{font-size:var(--t-xs);letter-spacing:.02em;color:var(--dim);font-weight:700;border-bottom-color:var(--line-strong)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:720px){.prose table{display:block;overflow-x:auto;max-width:100%}}
/* the eyebrow: a small caps label, used once per section at most (never above every heading) */
.eyebrow{font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:var(--sp-3)}
.eyebrow.num{font:600 var(--t-sm)/1.3 var(--display);letter-spacing:.02em;text-transform:none}
.muted{color:var(--dim)}
.skip{position:absolute;left:-999px;top:8px;background:var(--blue);color:var(--blue-ink);padding:10px 14px;border-radius:8px;z-index:50}
.skip:focus{left:12px}

/* ---------- brand mark: the four stars of the flag, as a diamond */
.brand{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font:600 1.25rem/1 var(--display);letter-spacing:-.005em;margin-right:auto;white-space:nowrap}
.brand svg{width:26px;height:26px;color:var(--star);flex:none;transition:transform var(--d-3) var(--ease-star)}
.brand:hover svg{transform:rotate(45deg)}
.brand:focus-visible{outline-offset:4px}

/* ---------- header (96% opaque with a 20px blur, so text scrolling under it never reads through; desktop: inline nav; < 1000px: 56px bar that hides on scroll down, Menu opens a dialog) */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;view-transition-name:site-head;
  background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:saturate(1.2) blur(20px);-webkit-backdrop-filter:saturate(1.2) blur(20px);
  border-bottom:1px solid var(--line);transition:transform var(--d-2) var(--ease-out),background-color var(--d-3) var(--ease-out),border-color var(--d-3) var(--ease-out)}
.site-head .wrap{display:flex;align-items:center;gap:8px 12px;min-height:63px}
.mainnav{display:flex;gap:0 2px;align-items:center;margin-right:8px}
.mainnav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--dim);text-decoration:none;font-size:var(--t-sm);white-space:nowrap;border-radius:999px;transition:color var(--d-1)}
.mainnav a::after{content:"";position:absolute;left:10px;right:10px;bottom:7px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:50% 50%;transition:transform var(--d-2) var(--ease-out)}
.mainnav a:hover{color:var(--ink)}
.mainnav a:hover::after{transform:scaleX(1)}
.mainnav a[aria-current="page"]{color:var(--ink)}
.mainnav a[aria-current="page"]::after{transform:scaleX(1);background:var(--ink)}
@media (max-width:1180px) and (min-width:1000px){.mainnav a{padding:0 7px}.mainnav a::after{left:7px;right:7px}}
.iconbtn{background:none;border:1px solid var(--line-strong);color:var(--ink);border-radius:999px;width:44px;height:44px;display:inline-grid;place-items:center;cursor:pointer;font:inherit;text-decoration:none;flex:none;padding:0;transition:border-color var(--d-1),background-color var(--d-1)}
.iconbtn:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.iconbtn svg{width:18px;height:18px}
.theme-btn svg{display:none}
:root:not([data-theme]) .theme-btn .i-auto,:root[data-theme="light"] .theme-btn .i-sun,:root[data-theme="dark"] .theme-btn .i-moon{display:block}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 13px;border:1px solid var(--line-strong);border-radius:999px;background:none;color:var(--ink);font:700 var(--t-sm)/1 var(--body);cursor:pointer;transition:border-color var(--d-1),background-color var(--d-1)}
.menu-btn:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.menu-btn svg{width:18px;height:18px}
.no-js .theme-btn{display:none}
/* Home: the header floats over the full-bleed hero until the page scrolls */
.t-home .site-head{background:color-mix(in srgb,var(--bg) 0%,transparent);border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
html.scrolled .t-home .site-head,.no-js .t-home .site-head{background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom-color:var(--line);backdrop-filter:saturate(1.2) blur(20px);-webkit-backdrop-filter:saturate(1.2) blur(20px)}
@media (max-width:999px){
  .site-head .wrap{min-height:55px;gap:8px}
  .js .mainnav,.theme-btn{display:none}
  .js .menu-btn{display:inline-flex}
  .js.head-hidden .site-head:not(:focus-within){transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 2px))}
  /* without JS there is no menu dialog: the nav wraps under the brand and the bar does not stick */
  .no-js .site-head{position:relative;top:0}
  .no-js .site-head .wrap{flex-wrap:wrap;padding-block:6px}
  .no-js .mainnav{order:3;width:100%;flex-wrap:wrap;margin:0 -10px}
  html.no-js{scroll-padding-top:12px}
}

/* ---------- menu dialog: always the night sky, whatever the theme */
.menu{--bg:#0d1d33;--bg2:#0a1729;--bg3:#13294a;--ink:#eef4fa;--dim:#a9bdd3;--line:#24405f;--line-strong:#56789c;--blue:#6cace4;--blue-ink:#06121f;--star:#ffffff;--star-ring:transparent;--glow:#16365c;--sky:#a9bdd3;--grat:rgba(108,172,228,.07);
  --pohnpei:#6fd0cf;--kosrae:#a6d98a;--chuuk:#9cbcff;--yap:#f2c46a;--national:#c9d6e4;--outer:#cfa9f2;
  color-scheme:dark;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--ink);overflow:auto;overscroll-behavior:contain;
  background:radial-gradient(130% 55% at 75% 0%,var(--glow) 0%,transparent 62%),radial-gradient(90% 40% at 0% 100%,#0f2440 0%,transparent 70%),var(--bg)}
.menu::backdrop{background:#06121f}
.menu[open]{animation:menu-in var(--d-3) var(--ease-out)}
@keyframes menu-in{from{opacity:0}}
:root:has(.menu[open]){overflow:hidden}
.menu-in{max-width:560px;min-height:100%;display:flex;flex-direction:column;margin:0 auto;padding:max(4px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.menu-top{display:flex;align-items:center;min-height:56px}
.menu-map{margin:0 -8px 4px;animation:menu-rise var(--d-4) var(--ease-out) both}
.menu-map .starmap{max-height:30vh}
.menu-links{list-style:none;margin:0 0 var(--sp-5);padding:0;counter-reset:m}
.menu-links li{animation:menu-rise var(--d-3) var(--ease-out) both;animation-delay:calc(40ms + var(--i,0) * 28ms)}
.menu-links a{display:flex;align-items:baseline;gap:12px;min-height:52px;padding:8px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:400 clamp(1.625rem,1.2rem + 2vw,2rem)/1.15 var(--display);letter-spacing:-.01em;transition:color var(--d-1),padding var(--d-2) var(--ease-out)}
.menu-links a:hover{color:var(--blue);padding-left:8px}
.menu-links a[aria-current="page"]{color:var(--blue)}
.menu-links a[aria-current="page"]::after{content:"";align-self:center;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-left:auto;box-shadow:0 0 10px var(--blue)}
@keyframes menu-rise{from{opacity:0;transform:translateY(10px)}}
.menu-more{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:0 0 var(--sp-6);padding:0;list-style:none;font-size:var(--t-sm)}
.menu-more a{display:flex;align-items:center;min-height:44px;color:var(--dim);text-decoration:none}
.menu-more a:hover{color:var(--ink);text-decoration:underline}
.theme-switch{border:0;margin:auto 0 0;padding:0;min-width:0}
.theme-switch legend{font-size:var(--t-xs);color:var(--dim);font-weight:700;padding:0;margin-bottom:8px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:999px;padding:3px;gap:3px}
.seg label{position:relative;display:grid;place-items:center;min-height:44px;border-radius:999px;font-weight:700;cursor:pointer;transition:background-color var(--d-2),color var(--d-2)}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--ink);color:var(--bg)}
.seg label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}

/* ---------- page header for inner pages */
.pagehead{border-bottom:1px solid var(--line);background:radial-gradient(700px 260px at 85% -30%,var(--glow) 0%,transparent 65%),var(--bg)}
.pagehead .wrap{padding-block:clamp(32px,2rem + 2vw,56px) clamp(22px,1rem + 1.4vw,36px)}
.pagehead .lede{font-size:var(--t-lg);line-height:1.5;color:var(--dim);max-width:62ch;margin:0}
.crumbs{font-size:var(--t-sm);color:var(--dim);margin-bottom:6px}
.crumbs a{color:var(--dim);display:inline-block;padding-block:6px}

/* ---------- sections, grids, cards */
.section{padding-block:var(--sec)}
.section + .section{border-top:1px solid var(--line)}
.section h2{margin-bottom:var(--sp-4)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:6px;color:var(--ink);text-decoration:none;min-width:0}
a.card{transition:border-color var(--d-1)}
a.card:hover{border-color:var(--blue)}
.card .t{font:600 var(--t-lg)/1.2 var(--display)}
.card .k{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-weight:700}
.card .k.num{font:600 var(--t-sm)/1.3 var(--display);letter-spacing:0;text-transform:none}
.card p{margin:0;color:var(--dim);font-size:var(--t-sm)}
.two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--gap)}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.eras{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.era-card .k{color:var(--dim)}
.band{background:var(--bg3);border-block:1px solid var(--line)}
.islandmap{align-self:start;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:8px}

/* ---------- chart paper: put .chart on any map container. Light mode draws a faint graticule (set --grid to the
   map's 5° spacing in px); dark mode leaves the night sea clear. Maps only, never behind reading text. */
.chart{background-color:var(--sea)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .chart{background-image:linear-gradient(var(--grat) 1px,transparent 1px),linear-gradient(90deg,var(--grat) 1px,transparent 1px);background-size:var(--grid,48px) var(--grid,48px);background-position:var(--grid-x,0) var(--grid-y,0)}}
:root[data-theme="light"] .chart{background-image:linear-gradient(var(--grat) 1px,transparent 1px),linear-gradient(90deg,var(--grat) 1px,transparent 1px);background-size:var(--grid,48px) var(--grid,48px);background-position:var(--grid-x,0) var(--grid-y,0)}

/* ---------- buttons, inputs, chips (interactive boundaries use --line-strong, ≥3:1) */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;background:var(--blue);color:var(--blue-ink);font-weight:700;padding:10px 22px;border-radius:999px;text-decoration:none;border:1px solid var(--blue);cursor:pointer;font-size:var(--t-body);font-family:var(--body);transition:filter var(--d-1),transform var(--d-1) var(--ease-out),background-color var(--d-1),border-color var(--d-1)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline-color:var(--ink)}
.tl-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-row + .tl-row{margin-top:8px}
.search{flex:1 1 220px;min-width:0;min-height:44px;background:var(--bg2);border:1px solid var(--line-strong);color:var(--ink);border-radius:999px;padding:9px 16px;font:inherit}
select.sel{-webkit-appearance:none;appearance:none;min-height:44px;background:var(--bg2) var(--chev) no-repeat right 18px center/12px 8px;border:1px solid var(--line-strong);color:var(--ink);border-radius:999px;padding:8px 46px 8px 18px;font:inherit;font-size:var(--t-sm);cursor:pointer}
select.sel::-ms-expand{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:var(--t-xs);font-weight:700;line-height:1.4;color:var(--ink);background:var(--bg2);text-decoration:none;white-space:nowrap}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--national));display:inline-block;flex:none}
button.chip,a.chip,label.chip{min-height:32px;padding:6px 12px;border-color:var(--line-strong);cursor:pointer;font-family:var(--body);transition:background-color var(--d-1),border-color var(--d-1)}
button.chip:hover,a.chip:hover,label.chip:hover{border-color:var(--blue)}
@media (pointer:coarse){button.chip,a.chip,label.chip{min-height:44px;padding-inline:14px}}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip[aria-pressed="true"] i{outline:2px solid var(--bg)}
.mark{display:inline-block;font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:5px;line-height:1.5}
.mark.weak{color:var(--weak);background:var(--weak-bg)}
.mark.disp{color:var(--disp);background:var(--disp-bg)}
.p-pohnpei{--c:var(--pohnpei)}.p-kosrae{--c:var(--kosrae)}.p-chuuk{--c:var(--chuuk)}.p-yap{--c:var(--yap)}.p-national{--c:var(--national)}.p-outer{--c:var(--outer)}
.todo{color:var(--weak);background:var(--weak-bg);padding:1px 6px;border-radius:5px;font-size:var(--t-xs);font-weight:700}

/* ---------- events: boxed cards in grids; borderless rows on a state rail under year headings */
.ev{background:var(--bg2);border:1px solid var(--line);border-left:4px solid var(--c,var(--national));border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0;scroll-margin-top:var(--tl-h,0px)}
/* the header height is counted once, by html{scroll-padding-top}; events add only the timeline's sticky controls */
.ev .meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-height:24px;font-size:var(--t-xs);color:var(--dim)}
.ev .date{font-weight:600;font-size:var(--t-sm);color:var(--ink)}
.ev .text{margin:0}
.ev .src{font-size:var(--t-sm);color:var(--dim);display:flex;flex-wrap:wrap;gap:0 12px;align-items:baseline}
.ev .src a{color:var(--dim);padding-block:6px}
.ev .perma{display:inline-grid;place-items:center;width:44px;height:44px;margin:-10px -10px -10px auto;color:var(--dim);border-radius:10px;text-decoration:none}
.ev .perma svg{width:16px;height:16px}
.ev .perma:hover{color:var(--blue);background:var(--bg3)}
.ev:target,.ev.hl{box-shadow:0 0 0 2px var(--blue);animation:ev-hl var(--d-4) var(--ease-out)}
@keyframes ev-hl{from{background-color:var(--glow)}}
.yearblock{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:14px;padding-block:10px;border-top:1px solid var(--line)}
.yearblock .yh{font:600 var(--t-h3)/1 var(--display);margin:12px 0 0;position:sticky;top:calc(var(--head-h) + var(--tl-h) + 8px);align-self:start}
.yearblock .evs{display:flex;flex-direction:column}
.yearblock .ev{background:none;border:0;border-left:3px solid var(--c,var(--national));border-bottom:1px solid var(--line);border-radius:0;padding:14px 4px 14px 16px}
.yearblock .ev:last-child{border-bottom:0}
.yearblock .ev:target,.yearblock .ev.hl{border-radius:0 8px 8px 0}
@media (max-width:560px){.yearblock{grid-template-columns:1fr;gap:2px}.yearblock .yh{position:static}}

/* ---------- star map (true positions); role=group, island links are focusable.
   Dark: white stars on the night sea. Light: ink stars with a thin ring, like a chart symbol. */
.starmap{width:100%;height:auto;display:block}
.starmap .isl text{fill:var(--ink);font:700 14px var(--body)}
.starmap .isl path{fill:var(--star);transition:fill var(--d-1)}
.starmap .isl .ring{fill:none;stroke:var(--star-ring);stroke-width:1;opacity:.7}
.starmap .isl:hover path,.starmap .isl:focus path{fill:var(--blue)}
.starmap .isl:focus-visible{outline:none}
.starmap .isl:focus-visible text{text-decoration:underline;text-decoration-thickness:2px}
.starmap .sky circle{fill:var(--sky);opacity:.45}
.starmap .outer circle{fill:var(--dim)}
.starmap .path{stroke:var(--blue);stroke-width:1.3;stroke-dasharray:3 6;fill:none;opacity:.8}
@media (prefers-reduced-motion:no-preference){.twinkle{animation:tw 3.4s ease-in-out infinite}@keyframes tw{50%{opacity:.15}}}

/* ---------- original + translation pairs (foreign sources, home) */
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:.6em 0 1em}
.pair blockquote{margin:0}
.pair blockquote:first-child{font-style:italic}
.pair blockquote:lang(ja){font-style:normal;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",var(--display)}
@media (max-width:720px){.pair{grid-template-columns:1fr}}

/* ---------- cite panel */
.cite{margin-top:40px;border-top:1px solid var(--line);padding-top:18px}
.cite details{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:4px 14px}
.cite summary{cursor:pointer;font-weight:700;padding-block:10px}
.cite .fmt{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;gap:8px 12px;align-items:start;margin:4px 0 12px;font-size:var(--t-sm)}
.cite code{font-family:var(--body);background:var(--bg3);padding:6px 8px;border-radius:6px;display:block;overflow-wrap:anywhere}
@media (max-width:600px){.cite .fmt{grid-template-columns:1fr}}

/* ---------- toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;font-size:var(--t-sm);box-shadow:0 6px 24px rgba(0,0,0,.25);animation:toast-in var(--d-2) var(--ease-out)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}}

/* ---------- footer: a quiet sign-off with the four-star mark */
.site-foot{border-top:1px solid var(--line);margin-top:var(--sp-7);padding-block:var(--sp-6) calc(var(--sp-7) + env(safe-area-inset-bottom,0px));color:var(--dim);font-size:var(--t-sm)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:flex-start}
.site-foot .sign{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;max-width:36ch}
.site-foot .sign svg{width:28px;height:28px;color:var(--star);grid-row:span 3;align-self:start}
.site-foot .sign b{font:600 1.125rem/1.2 var(--display);color:var(--ink)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:0 18px;max-width:640px}
.site-foot nav a{display:inline-flex;align-items:center;min-height:32px}
@media (pointer:coarse){.site-foot nav a{min-height:44px}}
.site-foot a{color:var(--dim)}
.site-foot a:hover{color:var(--ink)}

/* ---------- print */
@media print{
  /* every theme prints on white: the selector outranks the dark-theme rules above (:root[data-theme="dark"] and
     :root:not([data-theme="light"]) in a dark-scheme media query), and every token is remapped to its light value */
  :root:root:root{
    --bg:#fff; --bg2:#fff; --bg3:#f2f2f2; --ink:#000; --dim:#333; --line:#bbb; --line-strong:#888;
    --blue:#000; --blue-ink:#fff; --star:#000; --star-ring:#000; --glow:#eee;
    --grat:rgba(0,0,0,.12); --sky:transparent; --sea:#fff;
    --weak:#8a5a00; --weak-bg:#f6e6c4; --disp:#9b2c2c; --disp-bg:#f5ded8;
    --pohnpei:#087680; --kosrae:#3a7520; --chuuk:#2457b3; --yap:#94600f; --national:#4c5c70; --outer:#7b4fa8;
    color-scheme:light}
  html,body{background:#fff!important;color:#000}
  /* print the final state of every animation (an intro caught mid-play, a plate mid-zoom) */
  *,*::before,*::after{animation:none!important;transition:none!important}
  .skip-intro{display:none!important}
  body{font-size:11.5pt}
  .site-head,.site-foot,.menu,.tl-controls,.btns,.cite,.noprint,.skip,.toast,body::before{display:none!important}
  .hero,.pagehead{background:none}
  a{color:#000}
  .prose a[href^="http"]::after{content:" [" attr(href) "]";font-size:8.5pt;color:#444;word-break:break-all}
  .ev{break-inside:avoid;border-left-width:3px}
  .ev .perma{display:none}
  .yearblock .yh{position:static}
  h2,h3{break-after:avoid}
}