/* =============================================================
   SAKE — 日本酒 · Knowledge Base
   Design system: sharp edges, pale ground, quiet type.
   No border-radius anywhere. No shadows. Hairline rules only.
   ============================================================= */

:root{
  color-scheme: light;

  /* --- Ground: pale, warm, low-chroma paper ------------------ */
  --paper:      #FBFAF7;
  --paper-2:    #F5F3ED;
  --paper-3:    #EDEAE2;
  --paper-4:    #E4E0D6;

  /* --- Ink: soft near-black, never pure #000 ----------------- */
  --ink:        #201E1B;
  --ink-2:      #55504A;
  --ink-3:      #8B857C;
  --ink-4:      #ADA79E;

  /* --- Hairlines -------------------------------------------- */
  --rule:       #E1DCD2;
  --rule-2:     #CDC6B9;
  --rule-3:     #B4AC9C;

  /* --- Accent: muted koji gold-brown ------------------------- */
  --accent:     #7C6B52;
  --accent-2:   #A08F73;
  --accent-pale:#E9E2D2;

  /* --- Pale semantic hues (chips, panels, diagram fills) ----- */
  --h-rice:     #F0EDE4;
  --h-water:    #E0E7E9;
  --h-koji:     #EDE5D2;
  --h-yeast:    #E6E2EC;
  --h-wood:     #E7DFD2;
  --h-moss:     #E0E6DB;
  --h-plum:     #EEE1DF;
  --h-amber:    #EADCC1;
  --h-snow:     #E9ECEE;
  --h-ash:      #E6E4E0;

  /* --- Metrics ---------------------------------------------- */
  --rail:       232px;
  --toc:        208px;
  --measure:    72ch;
  --bar:        57px;
  --gut:        40px;

  /* --- Type -------------------------------------------------- */
  --sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial,
          "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Meiryo",
          "Noto Sans JP", "Noto Sans TC", "Microsoft JhengHei",
          "PingFang TC", sans-serif;
  --serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
           "Noto Serif JP", "Noto Serif TC", "Songti TC", "MS Mincho", serif;
  --mono: "SF Mono", "JetBrains Mono", "Consolas", "Menlo", monospace;

  /* --- Derived surfaces -------------------------------------- */
  --bar-bg:     rgba(251,250,247,.94);
  --scrim:      rgba(32,30,27,.26);
}

/* =============================================================
   Dark theme. Same discipline: warm, low-chroma, no pure black,
   no shadows, hairline rules, every corner square.
   Applied by an explicit data-theme attribute so the choice in
   the menu always wins over the operating system.
   ============================================================= */
html[data-theme="dark"]{
  color-scheme: dark;

  --paper:      #16150F;
  --paper-2:    #1D1C16;
  --paper-3:    #26241D;
  --paper-4:    #2F2D24;

  --ink:        #E9E5DA;
  --ink-2:      #BDB7A8;
  --ink-3:      #8E887B;
  --ink-4:      #6F695E;

  --rule:       #2C2A22;
  --rule-2:     #3C382D;
  --rule-3:     #534E40;

  --accent:     #C6B08A;
  --accent-2:   #A3916F;
  --accent-pale:#39331F;

  --h-rice:     #262319;
  --h-water:    #1B2326;
  --h-koji:     #292316;
  --h-yeast:    #24212E;
  --h-wood:     #282218;
  --h-moss:     #1F261E;
  --h-plum:     #2B2220;
  --h-amber:    #2E2516;
  --h-snow:     #1D2123;
  --h-ash:      #24231E;

  --bar-bg:     rgba(22,21,15,.94);
  --scrim:      rgba(0,0,0,.44);
}

/* --- Language-aware type: JA/ZH prefer their own stacks ------ */
html[lang="ja"]{
  --sans: "IBM Plex Sans", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Meiryo",
          "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --serif: "Spectral", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS Mincho",
           "Noto Serif JP", Georgia, serif;
}
html[lang="zh-Hant"]{
  --sans: "IBM Plex Sans", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
          "Hiragino Sans TC", "Helvetica Neue", Arial, sans-serif;
  --serif: "Spectral", "Songti TC", "PMingLiU", "Noto Serif TC", "MingLiU", Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; border-radius:0 !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + 24px); }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.75;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--accent-pale); color:var(--ink); }

:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
a:focus-visible{ outline-offset:3px; }

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

/* ============================ Type ========================== */
h1,h2,h3,h4,h5{ margin:0; font-weight:500; line-height:1.3; letter-spacing:-0.01em; text-wrap:balance; }

.h-display{
  font-family:var(--serif);
  font-size:clamp(34px,5.2vw,58px);
  line-height:1.12;
  font-weight:400;
  letter-spacing:-0.02em;
}
h1{ font-family:var(--serif); font-size:clamp(28px,3.4vw,40px); font-weight:400; letter-spacing:-0.015em; }
h2{ font-size:clamp(19px,2vw,23px); letter-spacing:0.005em; }
h3{ font-size:16px; }
h4{ font-size:14px; }

p{ margin:0 0 1.05em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule-2); transition:border-color .12s, color .12s; }
a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

strong,b{ font-weight:600; color:var(--ink); }
em{ font-style:italic; }
small{ font-size:12px; }
hr{ border:0; border-top:1px solid var(--rule); margin:40px 0; }

code,kbd{ font-family:var(--mono); font-size:.86em; background:var(--paper-3); padding:1px 5px; border:1px solid var(--rule); }

/* Japanese / romaji inline furniture */
.jp{ font-family:var(--serif); }
.romaji{ font-style:italic; color:var(--ink-2); }
.kana{ font-size:.82em; color:var(--ink-3); letter-spacing:.02em; }

.eyebrow{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin:0 0 14px;
}
.lede{ font-size:17px; line-height:1.72; color:var(--ink-2); max-width:64ch; }
.muted{ color:var(--ink-3); }
.tiny{ font-size:11.5px; letter-spacing:.06em; color:var(--ink-3); }

/* Numerals in tables/figures */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ========================== Skeleton ======================== */
.wrap{ max-width:1440px; margin:0 auto; padding:0 var(--gut); }

/* --- Top bar ------------------------------------------------ */
.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--bar-bg);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.topbar-in{
  max-width:1440px; margin:0 auto; padding:0 var(--gut);
  height:var(--bar); display:flex; align-items:center; gap:20px;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
  border:0; color:var(--ink); flex:0 0 auto;
}
.brand:hover{ color:var(--ink); }
.brand-mark{
  font-family:var(--serif); font-size:19px; letter-spacing:.30em;
  text-transform:uppercase; font-weight:400;
}
.brand-masu{
  flex:0 0 auto; width:15px; height:15px; position:relative;
  border:1px solid var(--ink-2); align-self:center; margin-right:2px;
}
.brand-masu::after{
  content:""; position:absolute; inset:3px; border:1px solid var(--rule-3);
}
.brand:hover .brand-masu{ border-color:var(--ink); }
.brand-jp{ font-family:var(--serif); font-size:13px; color:var(--ink-3); letter-spacing:.14em; }

.topbar-spacer{ flex:1 1 auto; }

/* --- Side menu: opened from the hamburger, top right ---------- */
.menubtn{ flex:0 0 auto; }

.sidemenu{
  position:fixed; top:var(--bar); right:0;
  width:min(340px,88vw); height:calc(100vh - var(--bar));
  background:var(--paper); border-left:1px solid var(--rule-2);
  padding:26px 24px 60px; overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(101%); transition:transform .22s ease;
  z-index:58; scrollbar-width:thin;
}
.sidemenu.is-open{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .sidemenu{ transition:none; } }
.sidemenu::-webkit-scrollbar{ width:6px; }
.sidemenu::-webkit-scrollbar-thumb{ background:var(--rule-2); }

.menu-group{ margin-bottom:24px; }
.sidemenu > .menu-group:first-child{ margin-bottom:26px; }
.menu-group h5{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); font-weight:600; margin:0 0 10px;
}
.menu-group a{
  display:block; padding:5px 0 5px 12px; border:0;
  border-left:2px solid transparent;
  font-size:13.5px; color:var(--ink-2); line-height:1.5;
  transition:color .12s,border-color .12s;
}
.menu-group a:hover{ color:var(--ink); border-left-color:var(--rule-2); }
.menu-group a.is-active{ color:var(--ink); border-left-color:var(--ink); font-weight:600; }
.menu-group a .rail-jp{
  display:block; font-size:10.5px; color:var(--ink-4);
  letter-spacing:.06em; font-weight:400; margin-top:1px;
}
.menu-nav{ border-top:1px solid var(--rule); padding-top:22px; }

.langrow{
  display:flex; width:100%; align-items:baseline; justify-content:space-between; gap:12px;
  appearance:none; background:transparent; cursor:pointer;
  border:1px solid var(--rule); border-bottom:0;
  font-family:var(--sans); text-align:left;
  padding:9px 12px; color:var(--ink-2);
  transition:background .12s,color .12s;
}
.langrow:last-of-type{ border-bottom:1px solid var(--rule); }
.langrow:hover{ background:var(--paper-2); color:var(--ink); }
.langrow.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.langrow.is-on + .langrow{ border-top-color:var(--ink); }
.langrow-n{ font-size:13.5px; }
.langrow-c{ font-size:10px; letter-spacing:.16em; opacity:.72; }

.scrim{
  position:fixed; inset:var(--bar) 0 0 0;
  background:var(--scrim); z-index:57;
}

/* --- Icon buttons ------------------------------------------- */
.iconbtn{
  appearance:none; background:transparent; border:1px solid var(--rule-2);
  width:31px; height:31px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink-2); padding:0; transition:background .12s,color .12s;
}
.iconbtn:hover{ background:var(--paper-3); color:var(--ink); }
.iconbtn svg{ width:15px; height:15px; }


/* --- Page grid ---------------------------------------------- */
.shell{
  max-width:1440px; margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:var(--rail) minmax(0,1fr) var(--toc);
  gap:0;
  align-items:start;
}

/* --- Left rail ---------------------------------------------- */
.rail{
  position:sticky; top:var(--bar); align-self:start;
  height:calc(100vh - var(--bar));
  overflow-y:auto; overscroll-behavior:contain;
  padding:34px 26px 60px 0;
  border-right:1px solid var(--rule);
  scrollbar-width:thin;
}
.rail::-webkit-scrollbar{ width:6px; }
.rail::-webkit-scrollbar-thumb{ background:var(--rule-2); }

.rail-group{ margin-bottom:26px; }
.rail-group h5{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); font-weight:600; margin:0 0 9px;
}
.rail a{
  display:block; padding:4px 0 4px 12px; border:0;
  border-left:2px solid transparent;
  font-size:13.5px; color:var(--ink-2); line-height:1.5;
  transition:color .12s,border-color .12s,background .12s;
}
.rail a:hover{ color:var(--ink); border-left-color:var(--rule-2); }
.rail a.is-active{ color:var(--ink); border-left-color:var(--ink); font-weight:600; }
.rail a .rail-jp{ display:block; font-size:10.5px; color:var(--ink-4); letter-spacing:.06em; }

/* --- Main --------------------------------------------------- */
main{ padding:52px 56px 140px; min-width:0; }
main.full{ grid-column:2 / -1; }

/* --- Right TOC ---------------------------------------------- */
.toc{
  position:sticky; top:var(--bar); align-self:start;
  height:calc(100vh - var(--bar)); overflow-y:auto;
  padding:52px 0 60px 0; border-left:1px solid var(--rule);
  padding-left:22px; scrollbar-width:thin;
}
.toc h5{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); font-weight:600; margin:0 0 11px;
}
.toc a{
  display:block; font-size:12.5px; line-height:1.5; color:var(--ink-3);
  padding:3px 0 3px 10px; border:0; border-left:1px solid var(--rule);
}
.toc a:hover{ color:var(--ink); border-left-color:var(--rule-3); }
.toc a.is-active{ color:var(--ink); border-left-color:var(--ink); }
.toc a.lvl3{ padding-left:22px; font-size:12px; color:var(--ink-4); }

/* ====================== Page furniture ====================== */
.pagehead{ border-bottom:1px solid var(--rule); padding-bottom:30px; margin-bottom:44px; }
.pagehead .kicker{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.pagehead .kicker::after{ content:""; flex:1; height:1px; background:var(--rule); }
.pagehead h1{ margin-bottom:14px; }
.pagehead .sub{ font-family:var(--serif); font-size:15px; color:var(--ink-3); margin:-8px 0 16px; letter-spacing:.06em; }

section.block{ margin:0 0 66px; scroll-margin-top:calc(var(--bar) + 20px); }
section.block > h2{
  padding-bottom:11px; border-bottom:1px solid var(--rule);
  margin-bottom:22px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
section.block > h2 .h2-jp{ font-family:var(--serif); font-size:13px; color:var(--ink-3); font-weight:400; letter-spacing:.1em; }
section.block h3{ margin:34px 0 12px; letter-spacing:0; }
section.block h4{ margin:22px 0 8px; color:var(--ink-2); }

/* ========================== Panels ========================== */
.panel{ border:1px solid var(--rule); background:var(--paper-2); padding:22px 24px; margin:24px 0; }
.panel.tint-rice { background:var(--h-rice); }
.panel.tint-water{ background:var(--h-water); }
.panel.tint-koji { background:var(--h-koji); }
.panel.tint-yeast{ background:var(--h-yeast); }
.panel.tint-wood { background:var(--h-wood); }
.panel.tint-moss { background:var(--h-moss); }
.panel.tint-amber{ background:var(--h-amber); }
.panel.tint-snow { background:var(--h-snow); }
.panel.tint-plum { background:var(--h-plum); }
.panel > :first-child{ margin-top:0; }
.panel h4{ margin-top:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }

.note{ border-left:2px solid var(--rule-3); padding:2px 0 2px 18px; margin:22px 0; color:var(--ink-2); font-size:14px; }
.note .note-label{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); font-weight:600; margin-bottom:5px; }

blockquote{
  margin:26px 0; padding:0 0 0 22px; border-left:2px solid var(--rule-2);
  font-family:var(--serif); font-size:17px; line-height:1.65; color:var(--ink-2);
}
blockquote cite{ display:block; margin-top:10px; font-family:var(--sans); font-size:11.5px; font-style:normal; letter-spacing:.1em; color:var(--ink-4); text-transform:uppercase; }

/* ========================== Tables ========================== */
.tablewrap{ overflow-x:auto; margin:22px 0; border:1px solid var(--rule); }
table{ border-collapse:collapse; width:100%; font-size:13px; background:var(--paper); }
caption{ caption-side:top; text-align:left; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:12px 14px; background:var(--paper-2); border-bottom:1px solid var(--rule); font-weight:600; }
th,td{ text-align:left; padding:9px 14px; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.55; }
thead th{ background:var(--paper-2); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:var(--paper-2); }
td.num,th.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.t-key{ font-weight:600; }
.t-jp{ font-family:var(--serif); color:var(--ink-2); }
td.t-jp{ white-space:nowrap; }

/* ========================== Lists =========================== */
ul,ol{ margin:0 0 1.05em; padding-left:1.15em; max-width:var(--measure); }
li{ margin-bottom:.4em; }
ul.plain{ list-style:none; padding-left:0; }
ul.plain li{ padding-left:16px; position:relative; }
ul.plain li::before{ content:""; position:absolute; left:0; top:.72em; width:7px; height:1px; background:var(--rule-3); }

dl.defs{ margin:20px 0; }
dl.defs dt{ font-weight:600; font-size:13.5px; margin-top:15px; display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; }
dl.defs dt .t-jp{ font-weight:400; font-size:12.5px; }
dl.defs dd{ margin:2px 0 0; padding-left:0; color:var(--ink-2); font-size:14px; max-width:var(--measure); }

/* ========================== Grids =========================== */
.grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin:24px 0; }
.grid.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.c4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid > .cell{ background:var(--paper); padding:20px 22px; }
.grid > .cell > :first-child{ margin-top:0; }
.grid > .cell h3,.grid > .cell h4{ margin-top:0; }
.cell-k{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); font-weight:600; margin-bottom:8px; }
.cell-v{ font-family:var(--serif); font-size:26px; line-height:1.15; letter-spacing:-.01em; }
.cell-v small{ font-family:var(--sans); font-size:12px; color:var(--ink-3); letter-spacing:.04em; }

/* ========================== Chips =========================== */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; }
.chip{
  display:inline-block; font-size:11px; letter-spacing:.06em;
  padding:3px 9px; border:1px solid var(--rule-2); background:var(--paper-2);
  color:var(--ink-2); white-space:nowrap;
}
.chip.rice { background:var(--h-rice); }
.chip.water{ background:var(--h-water); }
.chip.koji { background:var(--h-koji); }
.chip.yeast{ background:var(--h-yeast); }
.chip.wood { background:var(--h-wood); }
.chip.moss { background:var(--h-moss); }
.chip.amber{ background:var(--h-amber); }
.chip.plum { background:var(--h-plum); }
.chip.snow { background:var(--h-snow); }

/* ========================== Figures ========================= */
figure{ margin:26px 0; }
figure svg{ display:block; width:100%; height:auto; }
figcaption{ font-size:11.5px; color:var(--ink-3); margin-top:9px; line-height:1.55; letter-spacing:.02em; }
.figframe{ border:1px solid var(--rule); background:var(--paper-2); padding:22px; overflow-x:auto; }

/* ========================= Utilities ======================== */
.stack-s > * + *{ margin-top:8px; }
.stack-m > * + *{ margin-top:18px; }
.row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.sep{ height:1px; background:var(--rule); margin:34px 0; border:0; }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.hide{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ========================= Footer =========================== */
.foot{ border-top:1px solid var(--rule); margin-top:70px; padding:34px 0 60px; font-size:12px; color:var(--ink-3); }
.foot .foot-in{ display:flex; gap:34px; flex-wrap:wrap; justify-content:space-between; }
.foot a{ color:var(--ink-2); border-bottom-color:var(--rule); }

/* ========================= Prev / Next ====================== */
.pager{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:60px; }
.pager a{ background:var(--paper); padding:20px 22px; border:0; display:block; color:var(--ink); }
.pager a:hover{ background:var(--paper-2); }
.pager .pg-k{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); font-weight:600; display:block; margin-bottom:6px; }
.pager .pg-t{ font-family:var(--serif); font-size:17px; }
.pager a.next{ text-align:right; }
.pager .empty{ background:var(--paper-2); }

/* ======================== Timeline ========================== */
.timeline{ margin:26px 0; border-top:1px solid var(--rule); }
.tl-item{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:0; border-bottom:1px solid var(--rule); }
.tl-when{ padding:18px 18px 18px 0; border-right:1px solid var(--rule); }
.tl-year{ font-family:var(--serif); font-size:19px; line-height:1.15; letter-spacing:-.01em; }
.tl-era{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); margin-top:5px; font-weight:600; }
.tl-era .t-jp{ display:block; text-transform:none; letter-spacing:.08em; font-weight:400; font-size:11px; }
.tl-body{ padding:18px 0 18px 22px; }
.tl-body h4{ margin:0 0 5px; font-size:14.5px; }
.tl-body h4 .t-jp{ font-weight:400; font-size:12.5px; color:var(--ink-3); margin-left:7px; }
.tl-body p{ margin:0; font-size:14px; color:var(--ink-2); }
.tl-body p + p{ margin-top:.7em; }

/* ========================== Steps =========================== */
.steps{ margin:26px 0; }
.step{ display:grid; grid-template-columns:56px minmax(0,1fr); border-top:1px solid var(--rule); }
.steps .step:last-child{ border-bottom:1px solid var(--rule); }
.step-n{
  padding:18px 0; font-family:var(--serif); font-size:15px; color:var(--ink-3);
  border-right:1px solid var(--rule); text-align:left;
  font-variant-numeric:tabular-nums;
}
.step-b{ padding:18px 0 18px 22px; }
.step-b h4{ margin:0 0 4px; font-size:15px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.step-b h4 .t-jp{ font-weight:400; font-size:13px; color:var(--ink-2); }
.step-b h4 .romaji{ font-size:12px; }
.step-meta{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin:0 0 8px; font-weight:600; }
.step-b p{ margin:0 0 .75em; font-size:14px; color:var(--ink-2); }
.step-b p:last-child{ margin-bottom:0; }

/* ========================== Scale =========================== */
.scale{ margin:26px 0; border:1px solid var(--rule); background:var(--paper-2); padding:24px 26px 18px; }
.scale-bar{ position:relative; height:36px; border-bottom:1px solid var(--rule-3); margin-bottom:8px; }
.scale-seg{ position:absolute; top:0; height:36px; border-left:1px solid var(--rule-2); }
.scale-seg:first-child{ border-left:0; }
.scale-lab{ position:absolute; bottom:-1px; left:0; padding:0 0 6px 7px; font-size:11px; color:var(--ink-2); white-space:nowrap; }
.scale-legend{ display:none; }
.scale-lgi{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-2); }
.scale-lgi i{ display:inline-block; width:10px; height:10px; border:1px solid var(--rule-2); flex:0 0 auto; }
.scale-ticks{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.scale-note{ font-size:12px; color:var(--ink-3); margin-top:12px; }

/* ========================== Matrix ========================== */
.matrix{ margin:26px 0; overflow-x:auto; border:1px solid var(--rule); }
.matrix table{ min-width:560px; }
.matrix td.mx{ background:var(--paper-2); }
.matrix td.mx strong{ display:block; font-size:14px; margin-bottom:3px; }
.matrix td.mx .t-jp{ display:block; font-size:12px; color:var(--ink-2); margin-bottom:6px; white-space:normal; }
.matrix td.mx span.mx-d{ font-size:12px; color:var(--ink-3); line-height:1.5; display:block; }
.matrix th.axis{ background:var(--paper-3); font-size:10px; }

/* ====================== Compare columns ===================== */
.compare{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin:26px 0; }
.compare > div{ background:var(--paper); padding:18px 20px; }
.compare h4{ margin:0 0 10px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.compare h4 .t-jp{ text-transform:none; letter-spacing:.04em; color:var(--ink-3); font-weight:400; }
.compare p{ font-size:13.5px; color:var(--ink-2); margin:0; }

/* ==================== Glossary index ======================== */
.gloss-filter{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:20px 0 8px; }
.gloss-filter input{
  font-family:var(--sans); font-size:14px; padding:8px 12px; border:1px solid var(--rule-2);
  background:var(--paper); color:var(--ink); min-width:240px; flex:1 1 240px; outline:none;
}
.gloss-filter input:focus{ border-color:var(--ink-3); }
.gloss-count{ font-size:11.5px; color:var(--ink-4); letter-spacing:.08em; }
.gloss-list{ border-top:1px solid var(--rule); margin-top:14px; }
.gloss-row{ display:grid; grid-template-columns:210px minmax(0,1fr); border-bottom:1px solid var(--rule); }
.gloss-term{ padding:13px 16px 13px 0; border-right:1px solid var(--rule); }
.gloss-term .g-r{ font-weight:600; font-size:13.5px; }
.gloss-term .g-j{ font-family:var(--serif); font-size:13px; color:var(--ink-2); display:block; margin-top:2px; }
.gloss-def{ padding:13px 0 13px 18px; font-size:13.5px; color:var(--ink-2); }
.gloss-cat{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); font-weight:600; display:block; margin-top:4px; }

/* ========================= Responsive ======================= */
@media (max-width:1240px){
  .shell{ grid-template-columns:var(--rail) minmax(0,1fr); }
  .toc{ display:none; }
  main{ padding-right:0; }
}
@media (max-width:900px){
  :root{ --gut:22px; }
  .shell{ grid-template-columns:minmax(0,1fr); }
  .rail{ display:none; }
  main{ padding:34px 0 100px; }
  .grid.c3,.grid.c4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-jp{ display:none; }
}
@media (max-width:760px){
  .chip{ white-space:normal; }
  .scale{ padding:20px 18px 16px; }
  .scale-lab{ display:none; }
  .scale-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 2px; }
}
@media (max-width:640px){
  .gloss-row{ grid-template-columns:minmax(0,1fr); }
  .gloss-term{ border-right:0; padding-bottom:0; }
  .gloss-def{ padding-left:0; padding-top:6px; }
  .tl-item{ grid-template-columns:minmax(0,1fr); }
  .tl-when{ border-right:0; padding:16px 0 0; }
  .tl-body{ padding-left:0; }
  .step{ grid-template-columns:34px minmax(0,1fr); }
  .step-b{ padding-left:14px; }
}
@media (max-width:560px){
  body{ font-size:14.5px; }
  .grid.c2,.grid.c3,.grid.c4{ grid-template-columns:minmax(0,1fr); }
  .pager{ grid-template-columns:1fr; }
  .pager a.next{ text-align:left; }
  .topbar-in{ gap:12px; }
}

@media print{
  .topbar,.rail,.toc,.pager,.scrim,.sidemenu{ display:none !important; }
  .shell{ display:block; } main{ padding:0; }
  body{ background:#fff; font-size:11pt; }
  a{ border:0; color:inherit; }
}

/* ========================== Search ========================== */
.searchwrap{ position:relative; flex:1 1 180px; max-width:320px; margin-left:auto; }
.searchbox{
  width:100%; font-family:var(--sans); font-size:13px; line-height:1.5;
  padding:6px 10px; border:1px solid var(--rule-2);
  background:var(--paper); color:var(--ink); outline:none;
  -webkit-appearance:none; appearance:none;
}
.searchbox:focus{ border-color:var(--ink-3); }
.searchbox::placeholder{ color:var(--ink-4); letter-spacing:.04em; }
.searchbox::-webkit-search-cancel-button{ display:none; }

.results{
  position:absolute; top:calc(100% + 7px); right:0;
  width:min(480px,86vw); background:var(--paper);
  border:1px solid var(--rule-2); max-height:min(62vh,520px);
  overflow-y:auto; z-index:70; scrollbar-width:thin;
}
.results a{
  display:flex; gap:14px; align-items:baseline; justify-content:space-between;
  padding:8px 13px; border:0; border-bottom:1px solid var(--rule);
  color:var(--ink); font-size:13px; line-height:1.45;
}
.results a:last-child{ border-bottom:0; }
.results a:hover{ background:var(--paper-2); color:var(--ink); }
.results a.sel{ background:var(--paper-3); color:var(--ink); }
.results .r-t{ flex:1 1 auto; min-width:0; }
.results .r-j{ font-family:var(--serif); color:var(--ink-3); font-size:12px; margin-left:7px; }
.results .r-p{
  flex:0 0 auto; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); white-space:nowrap;
}
.results .r-empty{ padding:13px; font-size:12.5px; color:var(--ink-3); }

@media (max-width:900px){
  .searchwrap{ flex:1 1 120px; max-width:none; }
}
@media (max-width:560px){
  .searchbox{ font-size:12px; padding:5px 8px; }
  .results{ width:min(94vw,480px); right:-40px; }
}
@media print{ .searchwrap,.sidemenu,.scrim{ display:none !important; } }

/* Pages with no in-page headings give their column back to the text */
.shell.no-toc{ grid-template-columns:var(--rail) minmax(0,1fr); }
.shell.no-toc main{ padding-right:0; }

/* ========================== Related ========================= */
.related{ margin:46px 0 0; padding-top:24px; border-top:1px solid var(--rule); }
.related-h{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); font-weight:600; margin:0 0 16px; }
.related-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px 30px; }
.related-list li{ margin:0; font-size:13.5px; line-height:1.5; }
.related-list a{ font-weight:600; }
.rel-jp{ font-size:11.5px; color:var(--ink-4); margin-left:6px; }
.rel-why{ display:block; color:var(--ink-3); font-size:12.5px; line-height:1.55; margin-top:3px; }
@media (max-width:760px){ .related-list{ grid-template-columns:1fr; gap:14px; } }

/* ========================== Figure index ==================== */
.figindex{ margin:26px 0; display:grid; grid-template-columns:repeat(2,1fr); gap:26px 34px; }
.figindex-group{ border-top:1px solid var(--rule); padding-top:12px; }
.figindex-page{ font-size:13px; font-weight:600; margin-bottom:7px; }
.figindex-item{ font-size:12.5px; line-height:1.5; color:var(--ink-3); margin:0 0 5px; }
.figindex-item a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid transparent; }
.figindex-item a:hover{ border-bottom-color:var(--rule-2); }
@media (max-width:760px){ .figindex{ grid-template-columns:1fr; gap:20px; } }

/* ========================== Theme rows ====================== */
.themerow{
  display:flex; width:100%; align-items:center; gap:10px;
  appearance:none; background:transparent; cursor:pointer;
  border:1px solid var(--rule); border-bottom:0;
  font-family:var(--sans); text-align:left;
  padding:9px 12px; color:var(--ink-2);
  transition:background .12s,color .12s;
}
.themerow:last-of-type{ border-bottom:1px solid var(--rule); }
.themerow:hover{ background:var(--paper-2); color:var(--ink); }
.themerow.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.themerow.is-on + .themerow{ border-top-color:var(--ink); }
.themerow svg{ width:14px; height:14px; flex:0 0 auto; }
.themerow-n{ font-size:13.5px; }

/* ========================== Colophon ======================== */
.colophon{
  margin-top:30px; padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:12px; line-height:1.65; color:var(--ink-3);
}
.colophon .colo-t{
  font-family:var(--serif); font-size:13.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 8px;
}
.colophon p{ margin:0 0 7px; max-width:none; }
.colophon a{
  display:inline; padding:0; border:0; border-bottom:1px solid var(--rule-2);
  color:var(--ink-2); font-size:12px; line-height:1.65;
}
.colophon a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.colophon .colo-links{ margin-top:10px; }
.colophon .colo-links a{ display:inline-block; }
.colophon .colo-links > div{ margin-bottom:5px; }

/* ================ Responsive: figures on a phone ============ */
/* A 760-unit diagram scaled into a 320px screen makes 9.5px type
   into 4px type. Below this width the figure keeps a legible size
   and its frame scrolls sideways instead. */
@media (max-width:700px){
  figure svg{ min-width:600px; }
  .figframe{ -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding:16px; }
  .figframe::after{
    content:attr(data-hint); display:block; position:sticky; left:0;
    margin-top:10px; font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-4);
  }
  .figframe::-webkit-scrollbar{ height:5px; }
  .figframe::-webkit-scrollbar-thumb{ background:var(--rule-2); }
}
@media (max-width:560px){
  .brand-mark{ font-size:15px; letter-spacing:.18em; }
  .brand{ gap:7px; }
  .topbar-in{ gap:10px; }
  .tablewrap::after{
    content:attr(data-hint); display:block; position:sticky; left:0;
    padding:6px 10px; font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-4); border-top:1px solid var(--rule);
  }
  .figframe{ padding:14px 12px; }
  main{ padding-bottom:72px; }
}
@media (max-width:400px){
  :root{ --gut:16px; }
  .brand-mark{ font-size:13.5px; letter-spacing:.12em; }
  .searchbox{ font-size:12px; }
}