/* ==========================================================================
   Japan: A Journey Through Time — stylesheet
   Written for jack.monkeycode.au
   Author: Jack Cowley
   No external fonts, no CDNs, no build step. Drop it on a web server and go.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — drawn from traditional Japanese colour names */
  --sumi:        #17171b;   /* 墨   ink            */
  --sumi-soft:   #33333c;
  --washi:       #faf6ef;   /* 和紙 paper          */
  --washi-warm:  #f3ece0;
  --kinari:      #ebe2d3;   /* 生成 unbleached     */
  --ai:          #24476f;   /* 藍   indigo         */
  --ai-deep:     #162c47;
  --ai-light:    #4a7fb5;
  --shu:         #c8432c;   /* 朱   vermillion     */
  --shu-light:   #e0644a;
  --matcha:      #6c7f57;   /* 抹茶 green tea      */
  --kincha:      #a9803c;   /* 金茶 golden brown   */
  --sakura:      #e8b3b8;   /* 桜   cherry         */

  /* Semantic tokens (light theme) */
  --bg:          var(--washi);
  --bg-alt:      var(--washi-warm);
  --bg-sunk:     var(--kinari);
  --surface:     #ffffff;
  --text:        var(--sumi);
  --text-muted:  #5c5a55;
  --text-faint:  #85817a;
  --accent:      var(--ai);
  --accent-soft: var(--ai-light);
  --hot:         var(--shu);
  --rule:        rgba(23, 23, 27, 0.12);
  --rule-strong: rgba(23, 23, 27, 0.28);
  --shadow-sm:   0 1px 2px rgba(23, 23, 27, .06), 0 2px 8px rgba(23, 23, 27, .05);
  --shadow-md:   0 2px 6px rgba(23, 23, 27, .07), 0 12px 32px rgba(23, 23, 27, .08);

  /* Type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Rhythm */
  --measure:     68ch;
  --wide:        1180px;
  --gutter:      clamp(1.15rem, 4vw, 2.75rem);
  --radius:      3px;
  --radius-lg:   6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14141a;
    --bg-alt:      #1a1a22;
    --bg-sunk:     #101016;
    --surface:     #1e1e27;
    --text:        #ece7de;
    --text-muted:  #a8a298;
    --text-faint:  #837d73;
    --accent:      #7aaadd;
    --accent-soft: #9cc3ea;
    --hot:         #ef7458;
    --rule:        rgba(236, 231, 222, 0.14);
    --rule-strong: rgba(236, 231, 222, 0.3);
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-md:   0 2px 6px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .4);
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.72;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.5rem + 3.1vw, 3.6rem); letter-spacing: -0.022em; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.3rem); margin-top: 2.4em; }
h3 { font-size: clamp(1.2rem, 1.06rem + 0.6vw, 1.42rem); margin-top: 2em; }
h4 { font-size: 1.05rem; margin-top: 1.8em; font-family: var(--font-body); font-weight: 700;
     letter-spacing: .01em; }

h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color .15s ease;
}
a:hover { color: var(--hot); }

:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 3px;
  border-radius: 2px;
}

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 3rem 0;
}

ul, ol { padding-left: 1.3em; margin: 0 0 1.15em; }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }

strong { font-weight: 650; }

blockquote {
  margin: 2rem 0;
  padding: .2rem 0 .2rem 1.5rem;
  border-left: 3px solid var(--hot);
  font-family: var(--font-display);
  font-size: 1.15em;
  font-style: italic;
  color: var(--text-muted);
}
blockquote cite {
  display: block;
  margin-top: .7em;
  font-family: var(--font-body);
  font-size: .78em;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--bg-sunk);
  padding: .12em .38em;
  border-radius: var(--radius);
}

/* Japanese text set a touch larger — CJK glyphs read small next to Latin */
.jp { font-size: 1.06em; letter-spacing: .02em; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--hot);
  color: #fff;
  padding: .7rem 1.2rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }
.prose-wide { max-width: 82ch; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.section--alt { background: var(--bg-alt); }
.section--sunk { background: var(--bg-sunk); }

.stack > * + * { margin-top: 1.15em; }

.center { text-align: center; }
.center .prose { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Site header & navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.15rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--text);
  flex: 0 0 auto;
  margin-right: auto;
}
.brand:hover { color: var(--text); }
.brand__mark { width: 30px; height: 30px; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.brand__tag {
  font-size: .655rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: .12rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  padding: .42rem .7rem;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 16px; height: 10px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span    { top: 4.25px; }
.nav-toggle__bars::after  { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-4.25px) rotate(-45deg); }

.nav { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }

.nav a {
  display: block;
  padding: .42rem .62rem;
  font-size: .875rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { color: var(--text); background: var(--bg-sunk); }
.nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--hot);
}

/* -- Dropdown groups ------------------------------------------------------
   Twelve flat links wrapped onto a second row at 1280px. The two long runs
   (the history chapters, and the present-day pages) are grouped behind a
   button each, taking the top level to five items on one line.

   The group heading is a <button>, not a link: there is no "History" page to
   navigate to, and making it a link would promise one. The panel opens on
   hover and on :focus-within, so it works with the keyboard and with mouse
   before site.js loads; the script adds click-toggling and Escape.
   ------------------------------------------------------------------------ */

.nav__group { position: relative; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  padding: .42rem .62rem;
  font: inherit;
  font-size: .875rem;
  line-height: inherit;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav__toggle:hover { color: var(--text); background: var(--bg-sunk); }

/* Marked by site.js when the current page lives inside this group. */
.nav__group.is-current > .nav__toggle {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--hot);
}

.nav__chev {
  width: .6rem;
  height: .38rem;
  flex: 0 0 auto;
  transition: transform .18s ease;
  opacity: .75;
}
.nav__group:hover > .nav__toggle .nav__chev,
.nav__group:focus-within > .nav__toggle .nav__chev,
.nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + .45rem);
  left: -.4rem;
  z-index: 60;
  min-width: 19rem;
  padding: .9rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);

  /* Hidden but still focusable-adjacent: opacity+visibility rather than
     display:none, so the open/close can transition and :focus-within works. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.35rem);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* A vermillion top edge, matching the sign-in dialog. */
.nav__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--shu), var(--kincha) 60%, var(--ai));
}

/* Bridges the gap between button and panel so the pointer can cross it
   without the panel closing underneath. */
.nav__group::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: .5rem;
}

.nav__group:hover > .nav__panel,
.nav__group:focus-within > .nav__panel,
.nav__toggle[aria-expanded="true"] + .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Escape has to beat :focus-within. Dismissing with the keyboard returns focus
   to the toggle, which re-satisfies :focus-within and would leave the panel
   open — so Escape looked like it did nothing. This wins on source order
   (same specificity) and is cleared by site.js once focus leaves the group. */
.nav__group.is-dismissed > .nav__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.35rem);
}

.nav__panel-intro {
  margin: 0 0 .7rem;
  padding: 0 .55rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-muted);   /* same AA reason as .nav__note below */
}

.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel li { margin: 0; }

.nav__panel a {
  display: block;
  padding: .5rem .55rem;
  border-radius: var(--radius);
  white-space: normal;
}
.nav__panel a:hover { background: var(--bg-alt); }

.nav__label {
  display: block;
  font-size: .9rem;
  font-weight: 550;
  color: var(--text);
  line-height: 1.3;
}
.nav__panel a:hover .nav__label { color: var(--hot); }

.nav__note {
  display: block;
  margin-top: .1rem;
  font-size: .745rem;
  /* --text-faint would be the obvious pick, but at this size it measures
     4.05:1 on the dark panel — under the 4.5:1 AA floor for small text.
     --text-muted clears it in both themes. */
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: .01em;
}

.nav__panel a[aria-current="page"] {
  background: var(--bg-alt);
  box-shadow: inset 2px 0 0 var(--hot);
  font-weight: inherit;
}
.nav__panel a[aria-current="page"] .nav__label { color: var(--hot); }

/* The breakpoint was 1180px because twelve flat links needed that much room.
   Grouped into two dropdowns the bar measures ~368px, so brand + nav + account
   fit on one line down to a 747px viewport. 880px leaves headroom for longer
   group labels without handing tablets a hamburger they no longer need. */
@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem var(--gutter) 1.1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    max-height: min(74vh, 32rem);
    overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: .7rem .3rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--hot); padding-left: .8rem; }

  /* In the hamburger there is room to list everything, and a tap-to-open
     dropdown inside an already-open menu is a needless second step. So the
     groups flatten: the button becomes an inert section heading and the panel
     is always shown inline. */
  .nav__group { position: static; }

  .nav__toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 1.1rem .3rem .35rem;
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-faint);
    cursor: default;
    pointer-events: none;    /* heading only: the links below are the targets */
  }
  .nav__toggle:hover { background: none; color: var(--text-faint); }
  .nav__chev { display: none; }

  .nav__group.is-current > .nav__toggle {
    box-shadow: none;
    color: var(--hot);
    font-weight: 700;
  }

  .nav__panel,
  .nav__group:hover > .nav__panel,
  .nav__group:focus-within > .nav__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transition: none;
  }
  .nav__panel::before { display: none; }
  .nav__group::after { display: none; }

  /* The summary line is for the desktop panel, where the group heading has no
     page of its own to explain it. In the menu it is just noise. */
  .nav__panel-intro { display: none; }

  .nav__panel a {
    padding: .7rem .3rem;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .nav__panel li:last-child a { border-bottom: 0; }
  .nav__panel a[aria-current="page"] {
    background: none;
    box-shadow: inset 3px 0 0 var(--hot);
    padding-left: .8rem;
  }
  .nav__label { font-size: 1rem; font-weight: 500; }
  .nav__note  { font-size: .72rem; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule);
}

.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .95;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 10vw, 7.5rem);
}

.hero--home .hero__inner { padding-block: clamp(4.5rem, 13vw, 9rem); }

.hero__eyebrow {
  display: inline-block;
  font-size: .715rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hot);
  font-weight: 650;
  margin-bottom: 1.15rem;
}

.hero h1 { margin-bottom: .45em; }

.hero__lede {
  max-width: 46ch;
  font-size: clamp(1.06rem, 1rem + 0.42vw, 1.28rem);
  line-height: 1.62;
  color: var(--text-muted);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.5rem;
  margin-top: 1.9rem;
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--text-faint);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--hot);
  flex: 0 0 auto;
}

/* Page hero (interior pages) gets a subtle wave field instead of full art */
.hero--page {
  background:
    radial-gradient(120% 120% at 92% -20%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    var(--bg-alt);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--hot); color: #fff; }
.btn--primary:hover { background: var(--shu-light); color: #fff; }

.btn--ghost { border-color: var(--rule-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--hot); color: var(--hot); background: transparent; }

.btn__arrow { transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   7. Cards & grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.4vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

a.card { text-decoration: none; color: inherit; }
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  color: inherit;
}

.card__kicker {
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--hot);
  font-weight: 650;
  margin-bottom: .7rem;
}
.card h3 { margin: 0 0 .55rem; font-size: 1.24rem; }
.card p { color: var(--text-muted); font-size: .945rem; margin-bottom: 0; }
.card__more {
  margin-top: auto;
  padding-top: 1.15rem;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
a.card:hover .card__more { color: var(--hot); }
a.card:hover .card__more .btn__arrow { transform: translateX(3px); }

/* Era cards on the home page carry a coloured spine */
.card--era { border-left: 3px solid var(--accent); }
.card--era.is-ancient  { border-left-color: var(--matcha); }
.card--era.is-samurai  { border-left-color: var(--sumi-soft); }
.card--era.is-edo      { border-left-color: var(--kincha); }
.card--era.is-modern   { border-left-color: var(--shu); }

/* --------------------------------------------------------------------------
   8. Statistics strip
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat { background: var(--bg); padding: 1.5rem 1.3rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.3rem + 1.5vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.02em;
}
.stat__label {
  margin-top: .55rem;
  font-size: .805rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   9. Timeline
   -------------------------------------------------------------------------- */

.timeline {
  list-style: none;
  padding: 0;
  margin: 2.25rem 0 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: .55rem;
  bottom: .55rem;
  width: 1px;
  background: var(--rule-strong);
}
.timeline > li {
  position: relative;
  padding-left: 2.35rem;
  margin-bottom: 2.1rem;
}
.timeline > li:last-child { margin-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52rem;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}
.timeline > li.is-key::before { background: var(--hot); border-color: var(--hot); }

.timeline__date {
  display: block;
  font-family: var(--font-mono);
  font-size: .765rem;
  letter-spacing: .07em;
  color: var(--hot);
  font-weight: 600;
  margin-bottom: .25rem;
}
.timeline__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .3rem;
}
.timeline p { color: var(--text-muted); font-size: .945rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. Callouts, notes, fact boxes
   -------------------------------------------------------------------------- */

.note {
  margin: 2.25rem 0;
  padding: 1.35rem 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: .95rem;
}
.note--warn  { border-left-color: var(--hot); }
.note--tip   { border-left-color: var(--matcha); }
.note__title {
  display: block;
  font-size: .705rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
  margin-bottom: .55rem;
}
.note p:last-child { margin-bottom: 0; }

.factbox {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.65rem;
  margin: 2.25rem 0;
  box-shadow: var(--shadow-sm);
}
.factbox h3 { margin-top: 0; font-size: 1.1rem; }
.factbox dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.35rem; }
.factbox dt {
  font-size: .735rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 650;
  padding-top: .22rem;
}
.factbox dd { margin: 0; font-size: .95rem; }

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 34rem;
}
caption {
  caption-side: bottom;
  padding: .85rem 1rem;
  font-size: .8rem;
  color: var(--text-faint);
  text-align: left;
}
th, td {
  padding: .78rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  background: var(--bg-alt);
  font-size: .715rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-alt); }

/* --------------------------------------------------------------------------
   12. Feature list (checklist-style)
   -------------------------------------------------------------------------- */

.tick-list { list-style: none; padding: 0; }
.tick-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .85rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: .62rem;
  height: .34rem;
  border-left: 2px solid var(--hot);
  border-bottom: 2px solid var(--hot);
  transform: rotate(-45deg);
}

.def-list { margin: 1.75rem 0; }
.def-list dt {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  margin-top: 1.4rem;
}
.def-list dt:first-child { margin-top: 0; }
.def-list dd {
  margin: .3rem 0 0;
  color: var(--text-muted);
  font-size: .955rem;
}

/* --------------------------------------------------------------------------
   13. Pill tags
   -------------------------------------------------------------------------- */

.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.tag {
  display: inline-block;
  padding: .24rem .68rem;
  font-size: .735rem;
  letter-spacing: .04em;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  color: var(--text-muted);
  background: var(--bg);
}
.tag--hot { border-color: var(--hot); color: var(--hot); }

/* --------------------------------------------------------------------------
   14. Section headers
   -------------------------------------------------------------------------- */

.sec-head { margin-bottom: clamp(1.9rem, 4vw, 2.9rem); max-width: 60ch; }
.sec-head__eyebrow {
  display: block;
  font-size: .705rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--hot);
  font-weight: 650;
  margin-bottom: .85rem;
}
.sec-head h2 { margin: 0 0 .5rem; }
.sec-head p { color: var(--text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   15. Table of contents (interior pages)
   -------------------------------------------------------------------------- */

.toc {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  margin: 0 0 3rem;
}
.toc h2 {
  margin: 0 0 .85rem;
  font-family: var(--font-body);
  font-size: .705rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}
@media (max-width: 640px) { .toc ol { columns: 1; } }
.toc li { margin-bottom: .48rem; break-inside: avoid; }
.toc a { font-size: .92rem; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. Prev / next pager
   -------------------------------------------------------------------------- */

.pager {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
}
.pager a {
  display: block;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.pager a:hover { border-color: var(--hot); background: var(--bg-alt); color: inherit; }
.pager__dir {
  display: block;
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .35rem;
}
.pager__title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; }
.pager__next { text-align: right; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--sumi);
  color: #cfc9c0;
  padding-block: clamp(2.75rem, 6vw, 4.25rem) 2rem;
  margin-top: clamp(3rem, 7vw, 5rem);
}
@media (prefers-color-scheme: dark) {
  .site-footer { background: #0d0d12; border-top: 1px solid var(--rule); }
}

.site-footer a { color: #d9d3ca; text-decoration: none; }
.site-footer a:hover { color: var(--shu-light); text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.footer-grid h3 {
  font-family: var(--font-body);
  font-size: .69rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #8d867c;
  margin: 0 0 1rem;
  font-weight: 700;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .55rem; font-size: .9rem; }
.footer-grid p { font-size: .9rem; color: #a8a199; }

.footer-brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #f2ede5;
  margin: 0 0 .6rem;
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1.85rem;
  font-size: .83rem;
  color: #8d867c;
}
.colophon strong { color: #e6e0d7; font-weight: 600; }

.byline {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.byline::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--shu);
  flex: 0 0 auto;
}

/* Author credit block used on About and at the end of long pages */
.author-credit {
  display: flex;
  gap: 1.35rem;
  align-items: flex-start;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--hot);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.7rem;
  margin-top: 3rem;
}
.author-credit__mark {
  flex: 0 0 auto;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--hot);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.author-credit h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.author-credit p { margin: 0; font-size: .92rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   18. Decorative separator
   -------------------------------------------------------------------------- */

.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3.25rem 0;
  color: var(--rule-strong);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.divider span { font-size: 1.15rem; color: var(--hot); line-height: 1; }

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Spacing and sizing utilities.
   These exist because the vhost sets a Content-Security-Policy of
   style-src 'self', which blocks inline style="" attributes outright — the
   declarations are silently dropped and the page renders unstyled in those
   spots. Anything that would have been an inline style belongs here. */
.mt-xs { margin-top: .4rem; }
.mt-sm { margin-top: 2rem; }
.mt-md { margin-top: 2.5rem; }
.mt-lg { margin-top: 2.75rem; }
.mb-md { margin-bottom: 2.5rem; }
.my-md { margin-block: 2.25rem; }
.pt-0  { padding-top: 0; }

/* The opening paragraph of a page: a touch larger than body copy, without
   being a hero lede. */
.prose-intro {
  font-size: 1.13em;
  line-height: 1.68;
}

/* A print that would overwhelm the measure at full width. */
.art--narrow { max-width: 26rem; }

/* Let a wide table use the full column rather than the reading measure. */
.table-scroll--wide { max-width: none; }

/* --------------------------------------------------------------------------
   20. Traditional pattern motifs
   Seigaiha (青海波, "blue sea wave") and kōshi (格子, lattice), drawn as inline
   SVG data URIs so they cost no extra request and inherit no external asset.
   Kept very low-contrast: they should read as texture, not decoration.
   -------------------------------------------------------------------------- */

.seigaiha {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='24' viewBox='0 0 72 24'%3E%3Cg fill='none' stroke='%2324476f' stroke-width='1.1' stroke-opacity='.5'%3E%3Cpath d='M0 24a18 18 0 0 1 36 0 18 18 0 0 1 36 0'/%3E%3Cpath d='M0 24a12 12 0 0 1 24 0M24 24a12 12 0 0 1 24 0M48 24a12 12 0 0 1 24 0'/%3E%3Cpath d='M0 24a6 6 0 0 1 12 0M12 24a6 6 0 0 1 12 0M24 24a6 6 0 0 1 12 0M36 24a6 6 0 0 1 12 0M48 24a6 6 0 0 1 12 0M60 24a6 6 0 0 1 12 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 24px;
  background-repeat: repeat;
  opacity: .16;
}

.koshi {
  background-image:
    repeating-linear-gradient(0deg,  currentColor 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 22px);
  opacity: .05;
}

/* Decorative field that sits behind a section without touching its contents. */
.pattern-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.pattern-host { position: relative; }
.pattern-host > .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   21. Artwork figures
   Every image on this site is a public-domain woodblock print. They are matted
   on a warm ground the way a print is mounted, with the attribution attached
   rather than buried on a credits page.
   -------------------------------------------------------------------------- */

.art {
  margin: 2.75rem 0;
  padding: 0;
}

.art img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--kinari);
  box-shadow: var(--shadow-md);
}

/* Matted presentation: a warm border, as a print sits in its mount. */
.art--matted img {
  padding: clamp(.7rem, 2vw, 1.4rem);
  background: linear-gradient(180deg, #f6efe2, #ece2cf);
  border: 1px solid var(--rule);
}
@media (prefers-color-scheme: dark) {
  .art--matted img { background: linear-gradient(180deg, #2a2a34, #22222b); }
}

.art figcaption {
  margin-top: .85rem;
  font-size: .83rem;
  line-height: 1.6;
  color: var(--text-muted);
  border-left: 2px solid var(--hot);
  padding-left: .85rem;
}
.art figcaption strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: .12rem;
}
.art__credit { display: block; color: var(--text-faint); font-size: .775rem; margin-top: .25rem; }

/* Float a tall print beside the text on wide screens. */
.art--side { max-width: 22rem; }
@media (min-width: 900px) {
  .art--side {
    float: right;
    width: 20rem;
    margin: .4rem 0 1.75rem 2.5rem;
  }
  .art--side-left {
    float: left;
    margin: .4rem 2.5rem 1.75rem 0;
  }
}
.clearfix::after { content: ""; display: block; clear: both; }

/* A row of prints, e.g. the four seasons. */
.art-row {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 2.75rem 0;
}
.art-row .art { margin: 0; }
.art-row .art img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; }

/* Full-bleed band used between major sections. */
.art-band {
  position: relative;
  height: clamp(11rem, 24vw, 19rem);
  overflow: hidden;
  border-block: 1px solid var(--rule);
  margin: 0;
}
.art-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.art-band figcaption {
  position: absolute;
  right: 0; bottom: 0;
  margin: 0;
  border: 0;
  padding: .45rem .85rem;
  font-size: .715rem;
  color: #f0ebe2;
  background: rgba(15, 15, 20, .72);
  backdrop-filter: blur(3px);
  border-top-left-radius: var(--radius);
}
.art-band figcaption strong { display: inline; font-size: inherit; color: inherit; margin: 0; }

/* --------------------------------------------------------------------------
   22. Hero artwork
   -------------------------------------------------------------------------- */

.hero--art { border-bottom: 1px solid var(--rule); }
.hero--art .hero__inner { padding-block: clamp(3rem, 8vw, 6rem); }

.hero__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--bg) 95%, transparent) 0%,
      color-mix(in srgb, var(--bg) 88%, transparent) 38%,
      color-mix(in srgb, var(--bg) 42%, transparent) 68%,
      color-mix(in srgb, var(--bg) 22%, transparent) 100%);
}
@media (max-width: 780px) {
  .hero__scrim {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 82%, transparent) 0%,
      color-mix(in srgb, var(--bg) 93%, transparent) 55%,
      color-mix(in srgb, var(--bg) 97%, transparent) 100%);
  }
}
.hero--art .hero__inner { position: relative; z-index: 2; }
.hero__figcaption {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 3;
  padding: .4rem .8rem;
  font-size: .7rem;
  color: #efe9e0;
  background: rgba(15, 15, 20, .68);
  border-top-left-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   23. Account button & sign-in dialog
   -------------------------------------------------------------------------- */

.account-btn {
  flex: 0 0 auto;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.account-btn:hover { color: var(--hot); border-color: var(--hot); background: var(--bg-alt); }
.account-btn svg { width: 1.15rem; height: 1.15rem; }
.account-btn.is-authed { border-color: var(--matcha); color: var(--matcha); }
.account-btn__dot {
  position: absolute;
  top: 1px; right: 1px;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--matcha);
  border: 2px solid var(--bg);
}

.dlg {
  width: min(30rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.dlg::backdrop { background: rgba(12, 12, 16, .55); backdrop-filter: blur(2px); }
.dlg__pane { padding: clamp(1.5rem, 4vw, 2.1rem); }
.dlg__title { margin: 0 0 .4rem; font-size: 1.35rem; }
.dlg__lede { margin: 0 0 1.5rem; font-size: .92rem; color: var(--text-muted); }

.dlg__close-form { position: absolute; top: .4rem; right: .5rem; margin: 0; }
.dlg__close {
  width: 2rem; height: 2rem;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.dlg__close:hover { background: var(--bg-sunk); color: var(--text); }

/* Top edge of the dialog carries the vermillion rule used across the site. */
.dlg::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--shu), var(--kincha) 55%, var(--ai));
}

.form .field { margin-bottom: 1.05rem; }
.form label {
  display: block;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--text-muted);
  margin-bottom: .4rem;
}
.form input,
.form textarea {
  width: 100%;
  padding: .65rem .8rem;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form textarea { resize: vertical; min-height: 5.5rem; line-height: 1.55; }
.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field__hint {
  margin: .35rem 0 0;
  font-size: .74rem;
  color: var(--text-faint);
  text-align: right;
}
.form__error, .form__ok {
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  font-size: .87rem;
  border-radius: var(--radius);
}
.form__error { background: color-mix(in srgb, var(--shu) 13%, transparent); color: var(--hot);
                border: 1px solid color-mix(in srgb, var(--shu) 35%, transparent); }
.form__ok    { background: color-mix(in srgb, var(--matcha) 15%, transparent); color: var(--matcha);
                border: 1px solid color-mix(in srgb, var(--matcha) 38%, transparent); }

.queue {
  margin-top: 1.6rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
}
.queue h3 {
  margin: 0 0 .7rem;
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.queue ol { margin: 0; padding-left: 1.2rem; font-size: .88rem; color: var(--text-muted); }
.queue li { margin-bottom: .4rem; }
.queue time { display: block; font-size: .72rem; color: var(--text-faint); }

@media print {
  .site-header, .site-footer, .pager, .nav-toggle, .hero__art { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .card, .note, .factbox { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}