/* ==========================================================================
   Akane Books house sheet
   One file. No imports, no hosted fonts, no third party anything.

   Class names borrow the vocabulary of Japanese bookmaking, so a class
   always says which part of a printed page it stands for:

     kanban        signboard        site header
     kakoi         enclosure        centred container
     mikaeshi      endpaper         hero block
     obi           paper band       small red label strip
     midashi       headline         display heading helpers
     hashigaki     opening note     standfirst paragraph
     honbun        body text        article flow wrapper
     shiori        bookmark         card
     sashie        plate            figure with painted fallback
     hikaku        comparison       table that scrolls on its own
     hanrei        key              marked list, checklist
     warichu       inline gloss     callout aside
     michishirube  signpost         breadcrumb trail
     mokuji        contents         in page table of contents
     mondou        question answer  FAQ block
     tsudzuki      continued        read next strip
     tojiito       binding thread   stitched divider
     okuzuke       colophon         footer

   Colour is taken from the name: akane is the deep madder red of a
   Japanese dusk sky. Indigo and unbleached paper do the rest.
   ========================================================================== */

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

:root {
  --washi:      #f7f2e8;
  --washi-2:    #efe6d5;
  --washi-3:    #e6dac4;
  --sumi:       #181310;
  --sumi-2:     #3b322b;
  --kasumi:     #6d6156;
  --kei:        #ddd0b9;
  --akane:      #a3232c;
  --akane-deep: #7d161f;
  --akane-text: #8d1f26;
  --ai:         #22405f;
  --yamabuki:   #b8863c;

  --band:       linear-gradient(100deg, var(--akane) 0%, var(--akane-deep) 100%);

  /* panels that stay ink whatever theme the reader is in */
  --panel:      #14100e;
  --panel-2:    #241c17;
  --panel-fg:   #f4ecdd;
  --panel-mute: #b0a394;
  --panel-line: rgba(244, 236, 221, .17);
  --panel-link: #f0b6ac;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
           "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic",
          "Noto Sans JP", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --rhythm: 1.35rem;
  --gutter: clamp(1.15rem, 5vw, 3rem);
  --measure: 64ch;
  --wide: 74rem;

  --shadow-lift: 0 1px 0 var(--kei), 0 14px 34px -22px rgba(24, 19, 16, .5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --washi:      #14100e;
    --washi-2:    #1d1815;
    --washi-3:    #262019;
    --sumi:       #f2eadc;
    --sumi-2:     #d9cfbe;
    --kasumi:     #a49788;
    --kei:        #3a3129;
    --akane:      #c9433f;
    --akane-deep: #8e2027;
    --akane-text: #e5786d;
    --ai:         #7ba0c4;
    --yamabuki:   #d6a75c;
    --panel:      #221a15;
    --panel-2:    #2e241d;
    --shadow-lift: 0 1px 0 var(--kei), 0 16px 36px -24px rgba(0, 0, 0, .9);
  }
}

/* --- 2. reset and base --------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background-color: var(--washi);
  background-image:
    radial-gradient(60rem 40rem at 8% -8%, rgba(163, 35, 44, .07), transparent 60%),
    radial-gradient(50rem 38rem at 102% 4%, rgba(34, 64, 95, .07), transparent 62%);
  background-attachment: fixed;
  color: var(--sumi);
  font-family: var(--serif);
  font-size: clamp(1.02rem, .97rem + .28vw, 1.14rem);
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--akane-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--sumi); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--akane);
  outline-offset: 3px;
  border-radius: 2px;
}

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

h1 { font-size: clamp(2.35rem, 1.5rem + 4.4vw, 4.5rem); line-height: 1.03; }
h2 { font-size: clamp(1.62rem, 1.2rem + 1.9vw, 2.45rem); }
h3 { font-size: clamp(1.18rem, 1.06rem + .58vw, 1.45rem); }
h4 { font-size: 1.06rem; }

p, ul, ol, dl, blockquote, figure, table { margin: 0; }

hr { border: 0; }

::selection { background: var(--akane); color: #fff8ef; }

.hidden-note {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--sumi);
  color: var(--washi);
  padding: .7rem 1rem;
  z-index: 99;
}
.skip:focus { left: .5rem; top: .5rem; }

/* --- 3. containers and rhythm -------------------------------------------- */

.kakoi {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.kakoi--narrow { max-width: 48rem; }

.stack > * + * { margin-top: var(--rhythm); }

section { scroll-margin-top: 4.5rem; }

/* --- 4. site header ------------------------------------------------------ */

.kanban {
  border-bottom: 1px solid var(--kei);
  background: color-mix(in srgb, var(--washi) 88%, transparent);
  backdrop-filter: saturate(120%) blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.kanban__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem 1.4rem;
  padding-block: .85rem;
}

.kanban__mark {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--sumi);
  text-decoration: none;
  flex: 0 0 auto;
}
.kanban__mark b { color: var(--akane-text); font-weight: 600; }
.kanban__mark span {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kasumi);
}

.kanban__nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .95rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kanban__nav a {
  color: var(--sumi-2);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.kanban__nav a:hover { color: var(--akane-text); border-bottom-color: var(--akane); }
.kanban__nav a[aria-current="page"] { color: var(--akane-text); border-bottom-color: var(--akane); }

@media (min-width: 40em) {
  .kanban__mark { font-size: 1.5rem; }
  .kanban__nav { font-size: .78rem; gap: .15rem 1.4rem; }
}

/* --- 5. the obi, our one signature ornament ------------------------------ */

.obi {
  display: inline-block;
  background: var(--band);
  color: #fdf6ec;
  font-family: var(--sans);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .38rem .78rem .34rem;
  border-radius: 1px;
}
.obi--quiet {
  background: none;
  color: var(--akane-text);
  border: 1px solid currentColor;
  padding: .32rem .7rem .28rem;
}
.obi--ai { background: var(--ai); }

.tojiito {
  height: 3px;
  background:
    repeating-linear-gradient(90deg,
      var(--akane) 0 14px, transparent 14px 26px);
  opacity: .75;
  margin-block: 0;
}
.tojiito--thin {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--kei) 0 6px, transparent 6px 10px);
  opacity: 1;
}

/* --- 6. hero ------------------------------------------------------------- */

.mikaeshi {
  position: relative;
  padding-block: clamp(2.6rem, 8vw, 5.2rem) clamp(2.2rem, 6vw, 4rem);
  border-bottom: 1px solid var(--kei);
  overflow: hidden;
}

.mikaeshi__grid {
  display: grid;
  gap: clamp(1.8rem, 5vw, 3.4rem);
}

.mikaeshi h1 { margin-top: 1rem; }
.mikaeshi h1 + .hashigaki { margin-top: 1.45rem; }

.mikaeshi h1 em {
  font-style: normal;
  color: var(--akane-text);
  display: block;
}

.tatekaki {
  display: none;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--kasumi);
  position: absolute;
  right: .9rem;
  top: 3rem;
  user-select: none;
}

@media (min-width: 62em) {
  .mikaeshi__grid {
    grid-template-columns: 1.12fr .88fr;
    align-items: center;
  }
  .tatekaki { display: block; }
}

/* --- 7. standfirst, body flow -------------------------------------------- */

.hashigaki {
  font-size: clamp(1.1rem, 1.02rem + .5vw, 1.32rem);
  line-height: 1.6;
  color: var(--sumi-2);
  max-width: 40ch;
}
.hashigaki--wide { max-width: 58ch; }

.honbun {
  max-width: var(--measure);
  font-size: 1.06em;
}
.honbun > * + * { margin-top: var(--rhythm); }
.honbun h2 { margin-top: calc(var(--rhythm) * 2.1); }
.honbun h3 { margin-top: calc(var(--rhythm) * 1.5); }
.honbun h2 + p, .honbun h3 + p { margin-top: .7rem; }

.honbun h2 {
  padding-left: .85rem;
  border-left: 4px solid var(--akane);
  line-height: 1.16;
}

.honbun ul, .honbun ol { padding-left: 1.15rem; }
.honbun li + li { margin-top: .5rem; }
.honbun li::marker { color: var(--akane); }

.honbun strong { font-weight: 600; }

.honbun blockquote {
  border-left: 3px solid var(--kei);
  padding: .1rem 0 .1rem 1.1rem;
  color: var(--sumi-2);
  font-style: italic;
}

.honbun code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--washi-2);
  padding: .1em .35em;
  border-radius: 2px;
}

.jp {
  font-family: var(--serif);
  font-feature-settings: "palt" 1;
}

.romaji { font-style: italic; }

/* --- 8. section headers -------------------------------------------------- */

.hashira {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  border-top: 2px solid var(--sumi);
  padding-top: .8rem;
  margin-bottom: 1.6rem;
}
.hashira__no {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--akane-text);
}
.hashira h2 { flex: 3 1 15rem; }
.hashira p {
  flex: 2 1 21rem;
  color: var(--kasumi);
  font-size: .95rem;
  max-width: 52ch;
}

/* --- 9. cards ------------------------------------------------------------ */

.tsumeawase {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40em) {
  .tsumeawase { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .tsumeawase--three { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {
  .tsumeawase--three { grid-template-columns: repeat(3, 1fr); }
  .tsumeawase--four { grid-template-columns: repeat(4, 1fr); }
}

.shiori {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--washi-2);
  border: 1px solid var(--kei);
  border-radius: 3px;
  padding: 1.25rem 1.25rem 1.35rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.shiori::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 4px;
  background: var(--band);
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transition: opacity .18s ease;
}
.shiori:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--washi-3); }
.shiori:hover::before { opacity: 1; }

.shiori h3 { margin-bottom: .55rem; }
.shiori h3 a { color: inherit; text-decoration: none; }
.shiori h3 a::after { content: ""; position: absolute; inset: 0; }
.shiori p { color: var(--sumi-2); font-size: .96rem; }
.shiori .obi { margin-bottom: .85rem; align-self: flex-start; }
.shiori__meta {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kasumi);
}

.shiori--lead { background: var(--washi); border-color: var(--sumi); }
.shiori--lead::before { opacity: 1; }

/* --- 10. figures with a painted fallback --------------------------------- */

.sashie {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--kei);
  background-color: #2a211c;
  background-image:
    radial-gradient(120% 95% at 12% 0%, rgba(163, 35, 44, .55), transparent 58%),
    radial-gradient(100% 85% at 92% 100%, rgba(34, 64, 95, .55), transparent 55%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 9px),
    linear-gradient(158deg, #33281f 0%, #1b1512 100%);
  color: #efe3d2;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.4;
}
.sashie img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: #efe3d2;
  font-family: var(--sans);
  font-size: .78rem;
  padding: .6rem;
}
.sashie--hero { aspect-ratio: 4 / 5; }
.sashie--wide { aspect-ratio: 16 / 9; }
.sashie--band { aspect-ratio: 21 / 9; }

@media (min-width: 62em) {
  .sashie--hero { aspect-ratio: 3 / 4; }
}

figure.sashie-wrap { margin: 0; }
figure.sashie-wrap figcaption {
  margin-top: .6rem;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--kasumi);
}

/* --- 11. comparison tables ----------------------------------------------- */

.hikaku {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--kei);
  border-radius: 3px;
  background: var(--washi-2);
}
.hikaku table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: .93rem;
  font-family: var(--sans);
}
.hikaku caption {
  caption-side: top;
  text-align: left;
  padding: .85rem 1rem .1rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--kasumi);
}
.hikaku th, .hikaku td {
  text-align: left;
  padding: .72rem .9rem;
  border-bottom: 1px solid var(--kei);
  vertical-align: top;
}
.hikaku thead th {
  background: var(--sumi);
  color: var(--washi);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 0;
  position: sticky;
  top: 0;
}
.hikaku tbody th {
  font-weight: 600;
  color: var(--sumi);
  white-space: nowrap;
}
.hikaku tbody tr:last-child th,
.hikaku tbody tr:last-child td { border-bottom: 0; }
.hikaku tbody tr:nth-child(even) { background: color-mix(in srgb, var(--washi-3) 45%, transparent); }

/* --- 12. keyed lists and checklists -------------------------------------- */

.hanrei { list-style: none; padding: 0; margin: 0; }
.hanrei li {
  position: relative;
  padding-left: 1.75rem;
  margin-top: .78rem;
}
.hanrei li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .6em;
  width: .44rem;
  height: .44rem;
  background: var(--akane);
  transform: rotate(45deg);
}
.hanrei--check li::before {
  content: "\2713";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  color: var(--akane-text);
  font-weight: 700;
  font-family: var(--sans);
}
.hanrei--no li::before {
  content: "\00D7";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  color: var(--kasumi);
  font-weight: 700;
  font-family: var(--sans);
}
.hanrei b { font-weight: 600; }

/* --- 13. callout --------------------------------------------------------- */

.warichu {
  background: var(--washi-2);
  border-left: 4px solid var(--ai);
  border-radius: 0 3px 3px 0;
  padding: 1.05rem 1.15rem;
  font-size: .97rem;
}
.warichu--akane { border-left-color: var(--akane); }
.warichu h3, .warichu h4 {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--kasumi);
  margin-bottom: .5rem;
  font-weight: 700;
}
.warichu > * + * { margin-top: .65rem; }

/* --- 14. breadcrumb, contents, FAQ, read next ---------------------------- */

.michishirube {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kasumi);
  padding-block: 1.1rem 0;
}
.michishirube a { color: var(--kasumi); text-decoration: none; }
.michishirube a:hover { color: var(--akane-text); }
.michishirube span { margin-inline: .45rem; color: var(--akane); }

.mokuji {
  border: 1px solid var(--kei);
  border-left: 4px solid var(--akane);
  border-radius: 0 3px 3px 0;
  padding: 1.1rem 1.2rem;
  background: var(--washi-2);
}
.mokuji h2 {
  font-family: var(--sans);
  font-size: .72rem !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kasumi);
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 .7rem !important;
}
.mokuji ol {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .96rem;
}
.mokuji li + li { margin-top: .38rem; }
.mokuji li::marker { color: var(--akane); font-family: var(--sans); font-size: .8em; }
.mokuji a { color: var(--sumi-2); text-decoration: none; }
.mokuji a:hover { color: var(--akane-text); text-decoration: underline; }

.mondou { border-top: 1px solid var(--kei); }
.mondou details {
  border-bottom: 1px solid var(--kei);
  padding: .2rem 0;
}
.mondou summary {
  cursor: pointer;
  list-style: none;
  padding: .95rem 2.2rem .95rem 0;
  position: relative;
  font-weight: 600;
  font-size: 1.03rem;
  line-height: 1.35;
}
.mondou summary::-webkit-details-marker { display: none; }
.mondou summary::after {
  content: "+";
  position: absolute;
  right: .2rem;
  top: .78rem;
  font-family: var(--sans);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--akane);
  transition: transform .18s ease;
}
.mondou details[open] summary::after { transform: rotate(45deg); }
.mondou details[open] summary { color: var(--akane-text); }
.mondou .mondou__body {
  padding-bottom: 1.1rem;
  color: var(--sumi-2);
  font-size: .99rem;
}
.mondou .mondou__body > * + * { margin-top: .8rem; }

.tsudzuki {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46em) { .tsudzuki { grid-template-columns: repeat(3, 1fr); } }
.tsudzuki a {
  display: block;
  border-top: 2px solid var(--sumi);
  padding-top: .8rem;
  text-decoration: none;
  color: var(--sumi);
  font-size: 1.02rem;
  line-height: 1.32;
  font-weight: 600;
  transition: border-color .18s ease, color .18s ease;
}
.tsudzuki a small {
  display: block;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kasumi);
  margin-bottom: .35rem;
}
.tsudzuki a:hover { border-top-color: var(--akane); color: var(--akane-text); }

/* --- 15. page furniture -------------------------------------------------- */

.leaf { padding-block: clamp(2.6rem, 7vw, 4.6rem); }
.leaf--tight { padding-block: clamp(2rem, 5vw, 3.2rem); }
.leaf--dark {
  background: var(--panel);
  color: var(--panel-fg);
}
.leaf--dark h2, .leaf--dark h3, .leaf--dark h4 { color: var(--panel-fg); }
.leaf--dark p, .leaf--dark li { color: var(--panel-mute); }
.leaf--dark .hashira { border-top-color: var(--akane); }
.leaf--dark .hashira__no { color: var(--panel-link); }
.leaf--dark a { color: var(--panel-link); }
.leaf--dark .hanrei li { color: var(--panel-fg); }
.leaf--dark .hanrei b { color: #fff; }
.leaf--dark .shiori {
  background: var(--panel-2);
  border-color: var(--panel-line);
  color: var(--panel-fg);
}
.leaf--dark .shiori h3 a { color: var(--panel-fg); }
.leaf--dark .shiori:hover { border-color: var(--akane); }
.leaf--dark .shiori:hover h3 a { color: var(--panel-link); }
.leaf--dark .shiori p { color: var(--panel-mute); }
.leaf--dark .shiori__meta { color: #90867a; }
.leaf--dark .obi--quiet { color: var(--panel-link); }
.leaf--dark .warichu {
  background: var(--panel-2);
  border-left-color: var(--akane);
  color: var(--panel-fg);
}
.leaf--dark .warichu h3, .leaf--dark .warichu h4 { color: var(--panel-mute); }
.leaf--dark .warichu p { color: var(--panel-fg); }

.masthead {
  padding-block: clamp(2rem, 6vw, 3.4rem) clamp(1.4rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--kei);
}
.masthead h1 { margin-block: .9rem .95rem; }
.masthead__meta {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kasumi);
  margin-top: 1.2rem;
}

.two-up {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (min-width: 62em) {
  .two-up { grid-template-columns: minmax(0, 1fr) 18.5rem; align-items: start; }
  .two-up__side { position: sticky; top: 5.2rem; }
  .two-up > .honbun { max-width: 68ch; }
}

/* --- 16. colophon -------------------------------------------------------- */

.okuzuke {
  background: var(--panel);
  color: var(--panel-mute);
  font-size: .93rem;
  padding-block: clamp(2.4rem, 6vw, 3.6rem) 2rem;
  border-top: 1px solid var(--kei);
}
.okuzuke a { color: var(--panel-fg); text-decoration: none; }
.okuzuke a:hover { color: var(--panel-link); text-decoration: underline; }
.okuzuke .muted { color: #8d8377; }

.okuzuke__grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 46em) { .okuzuke__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.6rem; } }

.okuzuke h2 {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8d8377;
  margin-bottom: .9rem;
}
.okuzuke ul { list-style: none; padding: 0; }
.okuzuke li + li { margin-top: .52rem; }

.okuzuke__mark {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--panel-fg);
  letter-spacing: -.02em;
  display: block;
  margin-bottom: .7rem;
}
.okuzuke__mark b { color: var(--panel-link); font-weight: 600; }

.okuzuke__stance { max-width: 42ch; }

.okuzuke__foot {
  margin-top: 2.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--panel-line);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8d8377;
}

/* --- 17. small helpers --------------------------------------------------- */

.muted { color: var(--kasumi); }
.small { font-size: .9rem; }
.tight { max-width: 52ch; }
.center-lg { text-align: left; }
@media (min-width: 46em) { .center-lg--yes { text-align: center; margin-inline: auto; } }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
}
.pill-row a {
  display: inline-block;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sumi-2);
  border: 1px solid var(--kei);
  background: var(--washi-2);
  border-radius: 100px;
  padding: .42rem .85rem .38rem;
  transition: border-color .16s ease, color .16s ease;
}
.pill-row a:hover { border-color: var(--akane); color: var(--akane-text); }

.numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 1rem;
  list-style: none;
  padding: 0;
}
@media (min-width: 46em) { .numbers { grid-template-columns: repeat(4, 1fr); } }
.numbers b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--akane-text);
  font-weight: 600;
}
.numbers span {
  display: block;
  margin-top: .45rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kasumi);
  line-height: 1.4;
}
.leaf--dark .numbers b { color: var(--panel-link); }
.leaf--dark .numbers span { color: var(--panel-mute); }

@media print {
  .kanban, .tsudzuki, .okuzuke__grid { display: none; }
  body { background: #fff; color: #000; }
}

/* --- 18. Japanese setting -----------------------------------------------
   Appended after the sheet was written. Nothing above this line is changed.

   Reason: every measure in the sheet is expressed in ch, and ch is the
   width of the digit zero. A Japanese ideograph is roughly two of those,
   so 64ch reads as about thirty two characters a line and 40ch as twenty,
   which breaks the standfirst into a ladder. Japanese book pages set
   thirty eight to forty five characters a line, so the measures are
   restated in em. The rest is spacing: the micro labels are set in caps
   with .2em of tracking, which is right for Latin and far too airy for
   kana, and uppercase does nothing to a Japanese glyph.
   ------------------------------------------------------------------------ */

html[lang="ja"] {
  --measure: 38em;
}

html[lang="ja"] body { line-break: strict; word-break: normal; }

html[lang="ja"] h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem); line-height: 1.16; letter-spacing: .005em; }
html[lang="ja"] h2 { font-size: clamp(1.5rem, 1.16rem + 1.5vw, 2.15rem); line-height: 1.3; letter-spacing: .005em; }
html[lang="ja"] h3 { line-height: 1.35; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { font-feature-settings: "palt" 1; }

html[lang="ja"] .hashigaki { max-width: 24em; }
html[lang="ja"] .hashigaki--wide { max-width: 31em; }
html[lang="ja"] .hashira p { max-width: 30em; }
html[lang="ja"] .okuzuke__stance { max-width: 25em; }
html[lang="ja"] .tight { max-width: 30em; }
html[lang="ja"] .small.muted[style] { max-width: 34em; }

@media (min-width: 62em) {
  html[lang="ja"] .two-up > .honbun { max-width: 40em; }
}

html[lang="ja"] .obi { font-size: .74rem; letter-spacing: .12em; padding: .34rem .74rem .3rem; }
html[lang="ja"] .kanban__mark span { font-size: .64rem; letter-spacing: .12em; }
html[lang="ja"] .kanban__nav { font-size: .82rem; letter-spacing: .05em; }
html[lang="ja"] .michishirube,
html[lang="ja"] .masthead__meta,
html[lang="ja"] .shiori__meta,
html[lang="ja"] .hashira__no,
html[lang="ja"] .numbers span,
html[lang="ja"] .pill-row a,
html[lang="ja"] .tsudzuki a small,
html[lang="ja"] .warichu h3,
html[lang="ja"] .warichu h4,
html[lang="ja"] .mokuji h2,
html[lang="ja"] .okuzuke h2,
html[lang="ja"] .okuzuke__foot,
html[lang="ja"] .hikaku caption { letter-spacing: .07em; }
html[lang="ja"] .michishirube,
html[lang="ja"] .masthead__meta,
html[lang="ja"] .shiori__meta,
html[lang="ja"] .tsudzuki a small,
html[lang="ja"] .hikaku caption { font-size: .78rem; }
html[lang="ja"] .warichu h3,
html[lang="ja"] .warichu h4,
html[lang="ja"] .mokuji h2,
html[lang="ja"] .okuzuke h2 { font-size: .78rem !important; letter-spacing: .1em; }
html[lang="ja"] .hikaku table { font-size: .95rem; min-width: 40rem; }
html[lang="ja"] .hikaku thead th { font-size: .78rem; letter-spacing: .05em; }
html[lang="ja"] .hikaku tbody th { white-space: normal; min-width: 7em; }
html[lang="ja"] .mondou summary { line-height: 1.5; }
html[lang="ja"] .romaji { font-style: normal; }

/* --- 19. grid items must be allowed to shrink ----------------------------
   Not a Japanese issue, a general one, found while checking a 390px screen.

   .hikaku sets a min-width on its table so the columns stay readable, and
   wraps it in a scroll container. That works while the container can be
   narrower than the table. But a grid item defaults to min-width:auto,
   which means .honbun refuses to go below the min-content size of its
   widest descendant, and the table's min-width becomes the floor. On a
   390px screen the article column measured 642px wide and the body, which
   is overflow-x:hidden, silently cut the text off at the right edge instead
   of letting .hikaku scroll.

   min-width:0 on the grid children restores the intended behaviour: the
   column follows the viewport, the table scrolls inside its own box.
   ------------------------------------------------------------------------ */

.two-up > *,
.mikaeshi__grid > *,
.tsumeawase > *,
.tsudzuki > *,
.okuzuke__grid > * { min-width: 0; }