/* =============================================================
   GIFU — 岐阜の魂 · The Spirit of Gifu
   Design system: sharp edges, pale ground, quiet type.
   No border-radius anywhere. No shadows. Hairline rules only.

   The design system is that of The Book of Sake (13STUDIO,
   github.com/13studio-sudo/sake). The one change
   is a fix: pages without an in-page contents list keep a single
   column below 900px (see ".shell.no-toc").
   ============================================================= */

: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;
}
.sidemenu.is-open{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .sidemenu{ transition:none; } }

.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);
 
}

.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;
}
.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; }


/* ==================== Brand directory ======================= */
/* One entry is a two-column record: the identity block on the
   left, the house note and the standing products on the right.
   Hairlines only; the left column is separated by a rule rather
   than by a box, so a run of a hundred entries reads as a list
   and not as a hundred cards.                                  */
.brands{ margin:22px 0 8px; }
.brandlist{ border-top:1px solid var(--rule-2); }

.brandgroup{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--ink-2);
  margin:0; padding:26px 0 9px;
  border-bottom:1px solid var(--rule-2);
}
.brandgroup .t-jp{
  text-transform:none; letter-spacing:.08em; font-weight:400;
  color:var(--ink-4); font-family:var(--serif); font-size:12.5px;
  margin-left:8px;
}
.brandlist > .brandgroup:first-child{ padding-top:10px; }

.kura{
  display:grid; grid-template-columns:200px minmax(0,1fr);
  border-bottom:1px solid var(--rule);
}
.kura-id{ padding:16px 18px 16px 0; border-right:1px solid var(--rule); }
.kura-body{ padding:16px 0 16px 20px; }

.bn{ line-height:1.2; }
.bn-j{ font-family:var(--serif); font-size:17px; color:var(--ink); }
.bn-r{ font-size:11.5px; letter-spacing:.09em; color:var(--ink-3); }
.bh{ font-size:12.5px; color:var(--ink-2); margin-top:5px; line-height:1.45; }
.bh .t-jp{ font-family:var(--serif); }
.bm{
  display:flex; gap:10px; justify-content:space-between; align-items:baseline;
  margin-top:7px; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4);
}
.bm .best{ letter-spacing:.06em; }

.bnote{ font-size:13.5px; color:var(--ink-2); margin:0 0 10px; line-height:1.62; }

.bprods{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.bprods li{ padding:9px 0 9px; border-bottom:1px solid var(--rule); }
.bprods li:last-child{ border-bottom:0; padding-bottom:0; }
.bp-n{
  font-family:var(--serif); font-size:14px; color:var(--ink);
  display:block; margin-bottom:2px;
}
.bp-n .bp-r{
  font-family:var(--sans); font-style:normal; font-size:11px;
  letter-spacing:.08em; color:var(--ink-4); margin-left:7px;
}
.bp-s{ display:block; font-size:11.5px; color:var(--ink-2); letter-spacing:.02em; }
.bp-s b{ font-weight:600; color:var(--accent); letter-spacing:.04em; }
.bp-m{ color:var(--ink-3); }
.bp-sep{ color:var(--rule-3); margin:0 7px; }
.bp-u{ color:var(--ink-4); }
.bp-d{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; line-height:1.55; }

/* ==================== Rice cross-index ====================== */
.riceidx{ border-top:1px solid var(--rule-2); margin:22px 0 8px; }
.riceidx-row{
  display:grid; grid-template-columns:200px minmax(0,1fr);
  border-bottom:1px solid var(--rule);
}
.ri-k{
  position:relative; padding:13px 40px 13px 0;
  border-right:1px solid var(--rule);
}
.ri-j{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.ri-r{ font-size:11px; letter-spacing:.08em; color:var(--ink-4); margin-left:8px; }
.ri-n{ position:absolute; top:14px; right:18px; font-size:11px; color:var(--ink-3); }
.ri-b{ padding:13px 0 13px 20px; font-size:13px; line-height:1.9; }
.ri-b a{
  font-family:var(--serif); color:var(--ink-2);
  border-bottom:1px solid var(--rule-2); text-decoration:none;
}
.ri-b a:hover{ color:var(--ink); border-bottom-color:var(--ink-3); }
.ri-sep{ color:var(--rule-3); margin:0 7px; }

/* ========================= 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:860px){
  .kura{ grid-template-columns:150px minmax(0,1fr); }
  .kura-id{ padding-right:14px; }
  .kura-body{ padding-left:15px; }
}
@media (max-width:640px){
  .riceidx-row{ grid-template-columns:minmax(0,1fr); }
  .ri-k{ border-right:0; padding:14px 40px 0 0; }
  .ri-n{ top:15px; right:0; }
  .ri-b{ padding:7px 0 14px; }
  .kura{ grid-template-columns:minmax(0,1fr); }
  .kura-id{ border-right:0; padding:16px 0 0; }
  .kura-body{ padding:9px 0 16px; }
  .bm{ justify-content:flex-start; gap:14px; }
  .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;
}
.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; }
/* ...but below the rail breakpoint there is no rail to leave room for */
@media (max-width:900px){ .shell.no-toc{ grid-template-columns:minmax(0,1fr); } }

/* ========================== 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-ed{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-4); }
.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; 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);
  }
}
@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; }
}

/* ========================= Scrollbars =======================
   No browser lets a native scrollbar be squared: Chromium rounds the
   thumb, Firefox exposes only a colour, and Windows adds arrow buttons
   on top. So the native bar is hidden outright and a 3px line is drawn
   instead — one fixed element per scrolling container, positioned from
   that container's own geometry by core.js.

   Square ends, no track, no arrows, no fade. It follows the theme
   because it is an ordinary element taking ordinary tokens.
   ============================================================= */

/* 1. hide the native bar everywhere */
html{ scrollbar-width:none; -ms-overflow-style:none; }
*{ scrollbar-width:none; }
::-webkit-scrollbar,
*::-webkit-scrollbar{ width:0; height:0; background:transparent; }
::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb{ background:transparent; }
::-webkit-scrollbar-button,
*::-webkit-scrollbar-button{ display:none; width:0; height:0; }

/* 2. draw our own */
.sbar{
  position:fixed;
  z-index:75;
  background:var(--rule-3);
  background-clip:content-box;      /* paint the content box only */
  border-style:solid;
  border-color:transparent;         /* ...but take pointer events on all of it */
  border-radius:0;
  touch-action:none;
  cursor:default;
  transition:background-color .12s;
}
/* 3px of ink inside a 15px grab strip: the bar stays a hairline and the
   target stays the size of a pointer. */
.sbar-v{ width:15px; border-width:0 6px; }
.sbar-h{ height:15px; border-width:6px 0; }
/* --rule-3 and --ink-4 are almost the same value, so hover steps two
   rungs up the scale — otherwise there is no visible feedback. */
.sbar:hover{ background-color:var(--ink-3); }
.sbar.is-drag{ background-color:var(--ink-2); }

/* A finger does not drag a scrollbar; on touch it is a read-out only. */
@media (pointer:coarse){ .sbar{ pointer-events:none; } }
@media print{ .sbar{ display:none !important; } }