/* ReadMeJapan — "Tokyo" direction: bold condensed poster typography,
   flat vermilion-orange accent, monospace meta, gothic kanji marks.
   Article body stays in a calm reading serif; the chrome around it is loud. */

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

:root {
  --bg: #F0EFEA;
  --panel: #FFFFFF;
  --ink: #121210;
  --ink-2: #2B2A26;
  --mut: #5F5D55;
  --mut-2: #8C897C;
  --line: #D8D6CE;
  --accent: #E8430F;
  --accent-ink: #F0EFEA;
  --ticker-bg: #121210;
  --ticker-ink: #F0EFEA;
  --chip-bg: #FFFFFF;
  --hl-bg: rgba(232, 67, 15, .22);
  --seal: #C4351F;

  --display: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --jp-goth: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --jp-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131210; --panel: #1C1A16; --ink: #F0EFEA; --ink-2: #DAD5C7;
    --mut: #9C998C; --mut-2: #726F63; --line: #322F27;
    --accent: #FF5A2E; --accent-ink: #131210;
    --ticker-bg: #F0EFEA; --ticker-ink: #131210;
    --chip-bg: #1C1A16;
    --hl-bg: rgba(255, 90, 46, .32);
    --seal: #E5533A;
  }
}
:root[data-theme="dark"] {
  --bg: #131210; --panel: #1C1A16; --ink: #F0EFEA; --ink-2: #DAD5C7;
  --mut: #9C998C; --mut-2: #726F63; --line: #322F27;
  --accent: #FF5A2E; --accent-ink: #131210;
  --ticker-bg: #F0EFEA; --ticker-ink: #131210;
  --chip-bg: #1C1A16;
  --hl-bg: rgba(255, 90, 46, .32);
  --seal: #E5533A;
}
:root[data-theme="light"] {
  --bg: #F0EFEA; --panel: #FFFFFF; --ink: #121210; --ink-2: #2B2A26;
  --mut: #5F5D55; --mut-2: #8C897C; --line: #D8D6CE;
  --accent: #E8430F; --accent-ink: #F0EFEA;
  --ticker-bg: #121210; --ticker-ink: #F0EFEA;
  --chip-bg: #FFFFFF;
  --hl-bg: rgba(232, 67, 15, .22);
  --seal: #C4351F;
}

html { scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(232, 67, 15, .24); }
a { color: inherit; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  padding: 10px 18px; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
main.wrap { padding-bottom: 110px; }

/* lang="ja" default: serif JP for inline words inside body prose */
[lang="ja"] { font-family: var(--jp-serif); }

/* ---------- Ticker ---------- */
.ticker-wrap {
  background: var(--ticker-bg); color: var(--ticker-ink);
  overflow: hidden; white-space: nowrap; padding: 7px 0;
}
.ticker-track {
  display: inline-flex; gap: 34px; padding-left: 100%;
  font-family: var(--mono); font-size: 11px; letter-spacing: .8px;
  animation: ticker 46s linear infinite;
}
.ticker-track b { color: var(--accent); font-weight: 500; font-family: var(--jp-goth); margin-right: 8px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; padding-left: 24px; }
}

/* ---------- Sticky header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 3px solid var(--ink);
}
.site-header .bar {
  max-width: 1180px; margin: 0 auto; padding: 13px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .jp-mark { font-family: var(--jp-goth); font-weight: 700; font-size: 22px; color: var(--accent); white-space: nowrap; }
.brand .divider { width: 1px; height: 20px; background: var(--line); }
.brand .name {
  font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1;
  color: var(--ink); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
}

.lang-toggle {
  display: flex; align-items: center;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px;
}
.lang-toggle a {
  padding: 4px 14px; border-radius: 999px;
  font-family: var(--mono); font-weight: 600; font-size: 11.5px; letter-spacing: .5px;
  text-decoration: none; color: var(--mut); transition: background .2s, color .2s;
}
.lang-toggle a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.lang-toggle a:not([aria-current="true"]):hover { color: var(--ink); }

/* Top-of-site nav: every category + People, one row, scrolls horizontally on
   narrow screens rather than wrapping. Not sticky itself (scrolls away with
   the page) — only the brand bar above it stays pinned. */
.site-nav { background: var(--panel); border-bottom: 1px solid var(--line); }
.site-nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 28px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.site-nav-inner::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: none; padding: 9px 13px; margin: 0;
  font-family: var(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: .5px;
  text-transform: uppercase; text-decoration: none; color: var(--mut);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .16s, border-color .16s;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="true"] { color: var(--accent); border-color: var(--accent); }

/* ---------- Home: masthead ---------- */
.masthead { padding: 46px 0 20px; border-bottom: 4px solid var(--ink); }
.masthead h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(48px, 8.6vw, 100px);
  line-height: .86; letter-spacing: -1px; margin: 0; color: var(--ink);
}
.masthead .dek {
  font-family: var(--mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin: 14px 0 0;
}
.masthead .dek [lang="ja"] { font-family: var(--jp-goth); }

/* Category page: same masthead treatment, with the category's kanji as a
   small accent-colored mark ahead of the label. */
.cat-masthead { padding-top: 26px; }
.cat-masthead h1 {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(38px, 7vw, 76px);
}
.cat-masthead h1 .cat-jp {
  font-family: var(--jp-goth); font-weight: 700; color: var(--accent);
  font-size: 0.55em; line-height: 1;
}
.cat-masthead h1 .tag-hash { font-family: var(--display); }

/* Tag index rows: no kanji column, just the tag and its entry count. Unlike
   the category index (whole categories stay together via .cat-section's
   break-inside: avoid), this is a flat list — rows themselves must not
   split, but the list should still flow freely across columns. */
.tag-row .num { margin-left: auto; }
.tags-list .entry-row { break-inside: avoid; }

.standfirst {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.6; color: var(--ink-2);
  max-width: 640px; margin: 16px 0 0;
}

/* Home banner: a single wide-cropped woodblock print under the tagline. */
.home-banner {
  margin: 30px 0 0; border: 3px solid var(--ink); border-radius: 5px; overflow: hidden;
}
.home-banner img {
  display: block; width: 100%; height: clamp(160px, 28vw, 320px);
  object-fit: cover; object-position: 50% 38%;
}

/* Category body: standfirst + pull-quote + entry index in a left column,
   the category's woodblock print as a narrow sidebar on the right that
   runs the full height of that column — starting under the masthead rule
   and ending exactly where the entry list does, however long it is. The
   figure has no intrinsic height of its own (image is absolutely
   positioned out of flow), so the grid row sizes to the text column and
   the sidebar stretches to match; object-fit does the cropping. */
.cat-body {
  display: grid; grid-template-columns: 1fr minmax(180px, 260px); gap: 40px;
  margin-top: 8px;
}
.cat-body-text { min-width: 0; }
.cat-body-portrait {
  position: relative; margin: 0; min-height: 320px;
  border: 3px solid var(--ink); border-radius: 5px; overflow: hidden;
}
.cat-body-portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}

/* Filter box (progressive enhancement) */
.index-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 26px 0 0; }
.index-filter { margin: 0; flex: 1; }
.index-filter input {
  width: 100%; max-width: 440px; padding: 10px 2px; background: transparent;
  font-family: var(--mono); font-size: 15px; color: var(--ink);
  border: none; border-bottom: 2px solid var(--ink); border-radius: 0;
}
.index-filter input::placeholder { color: var(--mut); font-style: italic; }
.index-filter input:focus { outline: none; border-bottom-color: var(--accent); }
.no-results {
  display: none; font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--mut); padding: 34px 0;
}

/* View toggle (progressive enhancement: CSS-only via :has(), same pattern as
   the dictionary widget). Without :has() support the page just always shows
   the by-category view — a harmless fallback. */
.view-toggle {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px; flex: none;
}
.view-toggle input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.view-toggle label {
  padding: 4px 14px; border-radius: 999px; cursor: pointer;
  font-family: var(--mono); font-weight: 600; font-size: 11.5px; letter-spacing: .5px;
  color: var(--mut); transition: background .2s, color .2s;
}
.view-toggle input:checked + label { background: var(--accent); color: var(--accent-ink); }
.view-toggle label:hover { color: var(--ink); }
.view-toggle input:checked + label:hover { color: var(--accent-ink); }
.view-toggle input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.az-index { display: none; }
main:has(#view-az:checked) .cat-index { display: none; }
main:has(#view-az:checked) .az-index { display: block; }

/* ---------- Home: category index ---------- */
.cat-index, .az-index { column-width: 330px; column-gap: 56px; padding-top: 10px; }
.cat-section { break-inside: avoid; padding: 22px 0 10px; }
.cat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: var(--bg); padding: 7px 12px; margin: 0 0 2px;
}
/* Category headers (not individual entries) carry a slice of a woodblock
   print, dimmed by a scrim so the light text stays legible. No hover state
   here — only the label text inside is a link, not the whole bar. */
.cat-head.has-art {
  --art-y: 50%;
  background-image:
    linear-gradient(rgba(14, 17, 24, .62), rgba(14, 17, 24, .76)),
    var(--art-img);
  background-size: cover;
  background-position: 50% var(--art-y);
}
.cat-head .left { display: flex; align-items: baseline; gap: 9px; }
.cat-head .kanji { font-family: var(--jp-goth); font-weight: 700; font-size: 14px; color: var(--accent); }
.cat-head h2 {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: 1.4px; text-transform: uppercase; margin: 0;
}
.cat-head h2 a { color: inherit; text-decoration: none; }
.cat-head h2 a:hover { color: var(--accent); }
.az-section .letter { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--accent); }
.cat-head .count { font-family: var(--mono); font-size: 10px; opacity: .6; letter-spacing: 1px; }

.entry-row {
  position: relative; display: flex; align-items: baseline; gap: 13px;
  padding: 12px 10px 12px 14px; margin: 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; transition: background .16s;
}
.entry-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--accent); transition: width .16s;
}
.entry-row:hover { background: rgba(232, 67, 15, .06); }
.entry-row:hover::before { width: 4px; }
.entry-row .num { font-family: var(--mono); font-size: 10.5px; color: var(--mut-2); letter-spacing: .5px; min-width: 20px; font-variant-numeric: tabular-nums; }
.entry-row .t {
  font-family: var(--display); font-weight: 700; font-size: 19px; margin: 0;
  text-transform: uppercase; letter-spacing: .1px;
  color: var(--ink); line-height: 1.15; transition: color .16s; flex: 1;
}
.entry-row .k { font-family: var(--jp-goth); font-weight: 700; font-size: 17px; transition: color .16s; }
.entry-row:hover .t, .entry-row:hover .k { color: var(--accent); }

/* ---------- Entry page ---------- */
.running-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin: 26px 0 0; padding-bottom: 13px; border-bottom: 1px solid var(--line);
  font-family: var(--mono);
}
.running-head .back {
  font-weight: 600; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); text-decoration: none;
}
.running-head .back:hover { text-decoration: underline; text-underline-offset: 3px; }
.running-head .folio {
  font-weight: 500; font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--mut-2);
}
.running-head .folio a { text-decoration: none; }
.running-head .folio a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Opener: headline on the plain page, the cover art shown in full as a framed
   2:3 portrait beside it, with the seal pressed onto its corner. */
.opener-section {
  position: relative; margin-top: 22px;
  border: 3px solid var(--ink); border-radius: 5px; padding: 32px 34px;
  background: var(--panel);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.opener { display: grid; grid-template-columns: 1fr minmax(210px, 290px); gap: 40px; align-items: center; }
.opener .cat-kicker {
  font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; margin-bottom: 14px; color: var(--accent);
}
.opener .cat-kicker a { color: inherit; text-decoration: none; }
.opener .cat-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.opener h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(38px, 6vw, 68px); line-height: .92;
  letter-spacing: -.5px; margin: 0; color: var(--ink);
}
.opener .alt {
  font-family: var(--serif); font-size: 19px; color: var(--mut); margin-top: 12px;
}
.opener .alt .romaji { font-style: italic; color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; list-style: none; }
.tags li {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .3px;
  border: 1px solid var(--ink); border-radius: 3px;
  text-transform: uppercase;
}
.tags li a {
  display: block; padding: 5px 11px; color: var(--mut); text-decoration: none; transition: color .16s;
}
.tags li a:hover { color: var(--accent); }

/* The cover art, framed at its true 2:3 aspect so the whole print shows. */
.opener-portrait {
  position: relative; margin: 0; aspect-ratio: 2 / 3;
  border: 2px solid var(--ink); border-radius: 4px;
  overflow: hidden;
}
.opener-portrait img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero { display: flex; align-items: center; justify-content: center; }
/* The kanji reads as a vermilion hanko seal pressed onto the print: red
   characters in a thin red border, its ink roughened and thinned in soft
   patches by an SVG filter so it looks under-inked rather than perfectly
   printed. On the portrait it overhangs the lower-right corner. */
.opener .kanji {
  display: inline-block;
  font-family: var(--jp-goth); font-weight: 700;
  font-size: var(--ks, 44px); line-height: 1.04;
  color: var(--seal); background: transparent;
  border: 2.5px solid var(--seal); border-radius: 3px;
  padding: .2em .26em;
  transform: rotate(-1.8deg);
  filter: url(#hanko-ink);
}
.opener .kanji.vert { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -.02em; padding: .24em .2em; }
/* Seal pressed just below the headline, like a signature on the title. */
.opener-seal { margin-top: 26px; }
/* The "readmejapan.com" credit is now baked into the cover image's own
   pixels (site/watermark-covers.py) so a direct download always carries
   it — no separate DOM overlay needed here any more. */

/* ---------- People ---------- */
/* Person profile opener: framed portrait on the right, biography on the left. */
.person-opener { border: 3px solid var(--ink); border-radius: 5px; padding: 34px 36px; margin-top: 22px; }
.person-opener .portrait { margin: 0; }
.person-opener .portrait img {
  display: block; width: 100%; height: auto; border-radius: 3px;
  border: 1px solid var(--line); background: var(--panel);
}
.entry-person { max-width: 720px; margin: 40px auto 0; }
.portrait-credit {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .3px;
  color: var(--mut-2); margin: 26px 0 0; text-transform: uppercase;
}
.portrait-credit a { color: var(--accent); text-decoration: none; }
.portrait-credit a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* People index: portrait cards. */
.persons-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px; padding-top: 10px;
}
.person-card {
  display: flex; gap: 14px; align-items: center; text-decoration: none;
  border: 1px solid var(--line); border-radius: 5px; padding: 12px;
  background: var(--panel); transition: border-color .16s, transform .16s;
}
.person-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.person-card .portrait { flex: none; width: 74px; height: 74px; }
.person-card .portrait img {
  width: 74px; height: 74px; object-fit: cover; object-position: 50% 22%;
  border-radius: 4px; border: 1px solid var(--line); display: block;
}
.person-card .meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.person-card .name {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  text-transform: uppercase; letter-spacing: .1px; color: var(--ink); line-height: 1.1;
}
.person-card:hover .name { color: var(--accent); }
.person-card .jp { font-family: var(--jp-goth); font-weight: 700; font-size: 14px; color: var(--mut); }
.person-card .role { font-family: var(--mono); font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--mut-2); }

/* Era timeline filter. Without JS it's a static, readable scale of periods
   (the handles and selected-range fill stay hidden until .ready is set). */
.timeline-filter { margin: 30px 0 8px; }
.tl-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 12px;
}
.tl-head .tl-label { font-weight: 600; color: var(--accent); }
.tl-head .tl-status { color: var(--mut-2); }
.tl-head .tl-reset {
  margin-left: auto; display: none;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--mut); background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; transition: border-color .16s, color .16s;
}
.timeline-filter.ready .tl-reset { display: inline-block; }
.tl-reset:hover { border-color: var(--accent); color: var(--accent); }

.tl-track { position: relative; height: 46px; }
.tl-periods { position: absolute; inset: 0; }
.tl-period {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; margin: 0; border: none; border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .3px; text-transform: uppercase;
  color: var(--mut); overflow: hidden; white-space: nowrap;
}
.tl-period:nth-child(even) { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.tl-period:last-child { border-right: 1px solid var(--line); }
.tl-period span { pointer-events: none; }
.tl-period--narrow span { display: none; }
.timeline-filter.ready .tl-period { cursor: pointer; transition: background .16s, color .16s; }
.timeline-filter.ready .tl-period:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.timeline-filter.ready .tl-period.active { color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, transparent); }

.tl-range {
  position: absolute; top: 0; height: 100%; display: none;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
  pointer-events: none;
}
.timeline-filter.ready .tl-range { display: block; }
.tl-handle {
  position: absolute; top: 50%; width: 18px; height: 18px; display: none;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.35);
  cursor: ew-resize; padding: 0; touch-action: none; z-index: 2;
}
.timeline-filter.ready .tl-handle { display: block; }
.tl-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Reserves height for ~3 lines up front (the longest period note plus the
   default hint are both in that range) so swapping the text on click never
   shifts the layout below it. */
.tl-desc {
  font-family: var(--serif); font-size: 15px; font-style: italic; line-height: 1.55;
  color: var(--mut); max-width: 640px; margin: 16px 0 0; min-height: 3.1em;
}

/* Body shell: sticky TOC + article */
.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 30px; }

.toc { position: sticky; top: 74px; }
.toc .label {
  font-family: var(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mut-2); margin-bottom: 16px;
}
.toc nav { display: flex; flex-direction: column; gap: 3px; }
.toc a {
  display: flex; align-items: stretch; gap: 11px; padding: 5px 0;
  font-family: var(--sans); font-size: 13px; line-height: 1.35; letter-spacing: .1px;
  color: var(--mut); font-weight: 500; text-decoration: none; transition: color .18s;
}
.toc a .bar { width: 2px; border-radius: 1px; background: transparent; flex: none; }
.toc a .n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .3px; padding-top: 2px; color: var(--mut-2); }
.toc a:hover { color: var(--accent); }
.toc a.active { color: var(--accent); font-weight: 700; }
.toc a.active .bar { background: var(--accent); }
.toc a.active .n { color: var(--accent); }

.toc-mobile { display: none; margin: 20px 0 0; }
.toc-mobile select {
  width: 100%; padding: 13px 14px; font-family: var(--mono); font-size: 13.5px;
  border: 2px solid var(--ink); border-radius: 0; background: var(--panel); color: var(--ink);
}

article.entry { max-width: 740px; }

.lead { font-family: var(--serif); font-size: 20px; line-height: 1.62; color: var(--ink-2); margin: 0 0 15px; }
.lead-first::first-letter {
  font-family: var(--display); font-size: 3.9em; line-height: .8; font-weight: 700;
  float: left; margin: .04em .09em 0 0; color: var(--accent);
}

article.entry section { scroll-margin-top: 84px; margin-top: 42px; }

.wave-divider { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 26px 0 28px; }
.wave-divider::before, .wave-divider::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: var(--line); }

.sec-head { display: flex; align-items: baseline; gap: 13px; margin: 0 0 16px; }
.sec-head .n { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--accent); }
.sec-head h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 28px; margin: 0; color: var(--ink); letter-spacing: -.1px;
}

.cols { column-width: 300px; column-gap: 40px; column-rule: 1px solid var(--line); }
.cols p {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.7; color: var(--ink-2);
  margin: 0 0 15px; text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}

.dash-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 14px; }
.dash-list li {
  position: relative; padding-left: 22px;
  font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--ink-2);
}
.dash-list li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 11px; height: 2px; background: var(--accent);
}
.dash-list b, .dash-list strong { color: var(--ink); font-family: var(--sans); font-weight: 700; }

.pull { margin: 38px 0 4px; padding: 6px 0 6px 26px; border-left: 4px solid var(--accent); }
.pull p {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 28px; line-height: 1.28; color: var(--ink); margin: 0;
}
.pull figcaption { margin-top: 10px; }
.pull figcaption a {
  font-family: var(--mono); font-weight: 600; font-size: 11.5px;
  letter-spacing: .8px; text-transform: uppercase; color: var(--accent); text-decoration: none;
}
.pull figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cat-pull { max-width: 640px; }

/* Language note card — always ink/bg inverted, in both themes */
.note-card {
  scroll-margin-top: 84px; position: relative; margin: 50px 0 0;
  border: 2px solid var(--accent); border-radius: 4px;
  background: var(--ink); color: var(--bg);
  padding: 28px 30px 24px; overflow: hidden;
}
.note-card .hanko {
  position: absolute; top: 22px; right: 24px; width: 46px; height: 46px;
  border: 2px solid var(--accent); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); transform: rotate(-6deg);
  font-family: var(--jp-goth); font-weight: 700; font-size: 22px;
}
.note-card .note-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.note-card .note-head .n { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--accent); }
.note-card .note-head h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 24px; margin: 0; color: var(--bg); letter-spacing: -.1px; line-height: 1.05;
}
.note-card .sub { font-family: var(--serif); font-style: italic; font-size: 16.5px; color: var(--bg); opacity: .75; margin: 0 0 18px; }
.note-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.note-card li {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 15px; border-bottom: 1px dashed rgba(240, 239, 234, .3);
}
.note-card li:last-child { border-bottom: none; padding-bottom: 0; }
.note-card .jp { font-family: var(--jp-goth); font-weight: 700; font-size: 21px; color: var(--bg); }
.note-card .romaji { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--accent); margin-left: 10px; }
.note-card .gloss { font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--bg); opacity: .88; }

/* ---------- Key kanji / key words dictionary widget ----------
   Radio + label pairs, native browser semantics: clicking a chip works with
   zero JavaScript. Every digest is present in the initial HTML (SSR), so
   search engines see all of it, not just whichever one is currently shown. */
.dict-widget { margin-top: 46px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 40px; }
.chips-label {
  font-family: var(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mut-2); margin-bottom: 14px;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.words-block { flex: 1; min-width: 220px; }

.dict-radio {
  position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* Equal-size chip buttons for both kanji and word terms. */
.dict-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 58px; min-width: 58px; padding: 0 14px; box-sizing: border-box;
  border: 2px solid var(--ink); border-radius: 8px;
  font-family: var(--jp-goth); font-weight: 700; font-size: 22px; line-height: 1;
  color: var(--ink); background: var(--chip-bg); cursor: pointer; text-align: center;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.dict-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.dict-radio:checked + .dict-chip { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dict-radio:focus-visible + .dict-chip { outline: 2px solid var(--accent); outline-offset: 3px; }

/* SSR-visible digest panel. Baseline (no :has() support): item 0 only. */
.dict-panel {
  margin-top: 22px; padding: 26px 28px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--panel);
}
.dict-item { display: none; }
.dict-item[data-idx="0"] { display: block; }
.dict-term { font-family: var(--jp-goth); font-weight: 700; font-size: 34px; color: var(--accent); margin: 0 0 10px; line-height: 1; }
.dict-reading { font-family: var(--mono); font-size: 13px; letter-spacing: .3px; color: var(--mut); margin: 0 0 8px; }
.dict-meaning { font-family: var(--serif); font-size: 18px; color: var(--ink-2); margin: 0 0 10px; }
.dict-meaning.dict-empty { font-style: italic; color: var(--mut); }
.dict-meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--mut-2); margin: 0 0 16px;
}
.dict-full {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: .3px; color: var(--accent); text-decoration: none;
}
.dict-full:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Progressive enhancement: any chip works instantly with no JS at all in
   browsers that support :has() (~universal by 2026). Without it, only the
   first item shows, which is still a complete, sensible default. */
@supports selector(:has(*)) {
  .dict-widget:has(#dict-0:checked) .dict-item:not([data-idx="0"]) { display: none; }
  .dict-widget:has(#dict-0:checked) .dict-item[data-idx="0"] { display: block; }
  .dict-widget:has(#dict-1:checked) .dict-item:not([data-idx="1"]) { display: none; }
  .dict-widget:has(#dict-1:checked) .dict-item[data-idx="1"] { display: block; }
  .dict-widget:has(#dict-2:checked) .dict-item:not([data-idx="2"]) { display: none; }
  .dict-widget:has(#dict-2:checked) .dict-item[data-idx="2"] { display: block; }
  .dict-widget:has(#dict-3:checked) .dict-item:not([data-idx="3"]) { display: none; }
  .dict-widget:has(#dict-3:checked) .dict-item[data-idx="3"] { display: block; }
  .dict-widget:has(#dict-4:checked) .dict-item:not([data-idx="4"]) { display: none; }
  .dict-widget:has(#dict-4:checked) .dict-item[data-idx="4"] { display: block; }
  .dict-widget:has(#dict-5:checked) .dict-item:not([data-idx="5"]) { display: none; }
  .dict-widget:has(#dict-5:checked) .dict-item[data-idx="5"] { display: block; }
  .dict-widget:has(#dict-6:checked) .dict-item:not([data-idx="6"]) { display: none; }
  .dict-widget:has(#dict-6:checked) .dict-item[data-idx="6"] { display: block; }
  .dict-widget:has(#dict-7:checked) .dict-item:not([data-idx="7"]) { display: none; }
  .dict-widget:has(#dict-7:checked) .dict-item[data-idx="7"] { display: block; }
  .dict-widget:has(#dict-8:checked) .dict-item:not([data-idx="8"]) { display: none; }
  .dict-widget:has(#dict-8:checked) .dict-item[data-idx="8"] { display: block; }
  .dict-widget:has(#dict-9:checked) .dict-item:not([data-idx="9"]) { display: none; }
  .dict-widget:has(#dict-9:checked) .dict-item[data-idx="9"] { display: block; }
  .dict-widget:has(#dict-10:checked) .dict-item:not([data-idx="10"]) { display: none; }
  .dict-widget:has(#dict-10:checked) .dict-item[data-idx="10"] { display: block; }
  .dict-widget:has(#dict-11:checked) .dict-item:not([data-idx="11"]) { display: none; }
  .dict-widget:has(#dict-11:checked) .dict-item[data-idx="11"] { display: block; }
}

/* In-prose cross-links: to another article, or an anchor into this article's
   own dictionary widget above. Understated, so they don't compete with bold
   lead-ins or the pull-quote for attention. */
.term-link {
  color: inherit; text-decoration: underline; text-decoration-color: rgba(232, 67, 15, .45);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color .18s;
}
.term-link:hover { text-decoration-color: var(--accent); }

/* Highlighter mark: ==text== in source markdown. */
mark.hl {
  background: var(--hl-bg); color: inherit; padding: .02em .15em;
  border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Related topics */
.related-block { margin-top: 50px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.related-card {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 6px;
  text-decoration: none; transition: border-color .18s, transform .18s;
}
.related-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.related-card .k { font-family: var(--jp-goth); font-weight: 700; font-size: 30px; color: var(--ink); flex: none; }
.related-card .t {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 16.5px; color: var(--ink); line-height: 1.1;
}
.related-card .r { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--mut); }

/* Prev / next entry */
.entry-nav {
  margin-top: 54px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 20px;
}
.entry-nav a {
  text-decoration: none; max-width: 46%;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 17px; color: var(--ink); transition: color .18s;
}
.entry-nav a:hover { color: var(--accent); }
.entry-nav .dir {
  display: block; font-family: var(--mono); font-weight: 600; font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--mut-2); margin-bottom: 6px;
}
.entry-nav .next { margin-left: auto; text-align: right; }

/* ---------- Footer ---------- */
.site-footer { border-top: 4px solid var(--ink); margin-top: 90px; }
.site-footer .inner {
  max-width: 1180px; margin: 0 auto; padding: 24px 28px 40px;
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 14px;
}
.site-footer .colophon { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--mut-2); }
.site-footer .note { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--mut); max-width: 480px; }
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 560px; margin: 0 auto;
  background: var(--ink); color: var(--bg);
  border-radius: 4px; padding: 16px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-family: var(--serif); font-size: 13.5px; line-height: 1.4; margin: 0; flex: 1 1 260px; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner button {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  padding: 8px 14px; border-radius: 3px; border: 1px solid currentColor; opacity: .8; background: transparent; color: inherit; cursor: pointer;
}
.cookie-banner button:hover { opacity: 1; }
.cookie-banner button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: 1; }

/* ---------- 404 ---------- */
.error-page { padding: 80px 0; text-align: center; }
.error-page .kanji {
  font-family: var(--jp-goth); font-weight: 700; font-size: 120px; color: var(--accent); line-height: 1;
}
.error-page h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 38px; margin: 20px 0 10px; }
.error-page p { font-family: var(--serif); font-size: 18px; color: var(--mut); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .toc-mobile { display: block; }
}
@media (max-width: 780px) {
  .opener { grid-template-columns: 1fr; gap: 26px; }
  .opener-portrait { max-width: 300px; }
  .cat-body { grid-template-columns: 1fr; gap: 22px; }
  .cat-body-portrait { min-height: 0; }
  .cat-body-portrait img { position: static; height: clamp(220px, 60vw, 380px); }
}
@media (max-width: 620px) {
  .cols p { text-align: left; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-nav, .ticker-wrap, .toc, .toc-mobile, .index-filter, .entry-nav, .skip-link { display: none !important; }
  body { background: #fff; }
  article.entry { max-width: none; }
}