/* 言の葉 design system (REDESIGN-PLAN v1.2 §3): tokens, type by language,
   the floating navigation, buttons, the double-bezel card, pictures, footer
   and motion. Every page loads /fonts.css and this file before its own sheet.

   House rules, checked by the plan's greps:
   - no hard 1px outlines: rings and hairlines are box-shadows on --hairline;
   - transitions are written in longhand so the easing is always a token
     (--ease-enter in, --ease-exit out), never a keyword;
   - type is 12px or larger; 11px only for Latin uppercase eyebrows. */

:root {
  --paper: #F8F4EA;
  --paper-2: #EFE8DA;
  --white: #FFFDF8;
  --ink: #1F2A25;
  --muted: #636B64;
  --pine: #2B4C40;
  --pine-deep: #1F3A30;
  --vermilion: #B4532F;
  --vermilion-deep: #96421F;
  --vermilion-text: #A0472A;
  --gold: #C6A066;
  --indigo: #34465A;
  --amber-text: #7A5212;
  --hairline: rgba(31, 42, 37, .10);
  --ring: rgba(31, 42, 37, .08);
  --tint: rgba(31, 42, 37, .04);
  --shadow: 0 1px 2px rgba(31, 42, 37, .04), 0 12px 32px -16px rgba(31, 42, 37, .14);
  --shadow-lift: 0 1px 2px rgba(31, 42, 37, .05), 0 24px 48px -24px rgba(31, 42, 37, .16);

  --gutter: clamp(16px, 4vw, 48px);
  --content: 1240px;
  --section: clamp(96px, 10vw, 160px);
  --gap: 24px;
  --r-outer: 28px;
  --r-inner: 22px;
  --r-control: 14px;

  --ease-enter: cubic-bezier(.32, .72, 0, 1);
  --ease-exit: cubic-bezier(.7, 0, .84, 0);
  --t-micro: 160ms;
  --t-small: 320ms;
  --t-enter: 440ms;
  --t-block: 640ms;
  --t-page: 800ms;
  --stagger: 40ms;

  --z-grain: 30;
  --z-nav: 40;
  --z-drawer: 50;
  --z-menu: 60;
  --z-toast: 70;

  /* Type stacks; the :lang() rules below swap them per language. */
  --display: "KT Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --text: "KT Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --display-tracking: -.022em;
  --display-leading: 1.04;
  color-scheme: light;
}

:lang(zh-CN) {
  --display: "KT Fraunces", "KT Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --text: "KT Jakarta", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --display-tracking: .01em;
  --display-leading: 1.2;
}
:lang(zh-TW) {
  --display: "KT Fraunces", "KT Serif TC", "Songti TC", "Noto Serif CJK TC", "Source Han Serif TC", serif;
  --text: "KT Jakarta", "PingFang TC", "Noto Sans CJK TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  --display-tracking: .01em;
  --display-leading: 1.2;
}
:lang(ko) {
  --display: "KT Fraunces", "KT Serif KR", "AppleMyungjo", "Noto Serif CJK KR", "Source Han Serif K", serif;
  --text: "KT Jakarta", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Source Han Sans K", "Malgun Gothic", sans-serif;
  --display-tracking: -.01em;
  --display-leading: 1.24;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:lang(ja) {
  --display: "KT Shippori", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
  --text: "KT Zen Kaku", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --display-tracking: .02em;
  --display-leading: 1.3;
  word-break: normal;
  line-break: strict;
}

/* Each element that names its language picks up that language's stacks, so a
   Japanese word inside a Chinese sentence never borrows Chinese glyphs. */
html, [lang] { font-family: var(--text); }
:is(h1, h2, h3, h4, .display),
:is(h1, h2, h3, h4, .display) [lang] { font-family: var(--display); }
:lang(ja):is(h1, h2, h3, h4, .display),
:is(h1, h2, h3, h4, .display) :lang(ja) { font-feature-settings: "palt"; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 112px; background: var(--paper); }
/* In-page links glide (the link that was followed holds focus); scrolls a
   script makes, and the reader's own, stay immediate. */
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Paper grain: a fixed layer that never reacts to the pointer. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: var(--display-tracking); line-height: var(--display-leading); text-wrap: balance; color: var(--ink); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: .22em; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(198, 160, 102, .35); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -64px; z-index: calc(var(--z-menu) + 1); padding: 10px 16px; border-radius: 999px; background: var(--pine); color: var(--white); text-decoration: none; transition-property: transform; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.skip-link:focus-visible { transform: translateY(88px); }

/* ---------------------------------------------------------------- layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 640px); margin-inline: auto; }
.page { padding-top: clamp(112px, 12vw, 152px); }
.section { margin-top: var(--section); }

/* ---------------------------------------------------------------- type */
.display-xl { font-size: clamp(44px, 6.4vw, 92px); }
.display-l { font-size: clamp(36px, 4.6vw, 64px); }
.display-m { font-size: clamp(30px, 3.4vw, 46px); }
:lang(zh) .display-xl, :lang(ko) .display-xl { font-size: clamp(40px, 5.4vw, 76px); }
:lang(zh) .display-l, :lang(ko) .display-l { font-size: clamp(32px, 4vw, 54px); }
/* A heading that may break only between phrases: at spaces, punctuation and
   <wbr> (Chinese and Japanese otherwise break between any two characters). */
.phrase { word-break: keep-all; overflow-wrap: anywhere; }
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; color: #3A4640; max-width: 34em; }
:lang(zh) .lead, :lang(ko) .lead, :lang(ja) .lead { line-height: 1.85; }
.muted { color: var(--muted); }
.fine { font-size: 14px; line-height: 1.65; color: var(--muted); }
.accent { color: var(--vermilion-text); }
.num { font-family: var(--display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }

/* Eyebrow: a small pill above a heading. Latin is 11px uppercase with wide
   tracking; Chinese, Japanese and Korean are 12px and set as written. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--vermilion-text);
  font-family: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
:lang(zh) .eyebrow, :lang(ja) .eyebrow, :lang(ko) .eyebrow,
.eyebrow:lang(zh), .eyebrow:lang(ja), .eyebrow:lang(ko) { font-size: 12px; letter-spacing: .04em; text-transform: none; }
.eyebrow-quiet { color: var(--muted); }
.eyebrow-on-dark { background: rgba(255, 253, 248, .08); box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .16); color: #EBD3A8; }

/* ---------------------------------------------------------------- icons */
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.i-fill { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--pine);
  --btn-fg: var(--white);
  --btn-hover: var(--pine-deep);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 7px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition-property: transform, background-color, box-shadow, color;
  transition-duration: var(--t-micro), var(--t-small), var(--t-small), var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.btn:has(.btn-icon) { padding-right: 7px; }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(.98); }
.btn-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 253, 248, .14);
  transition-property: transform, background-color;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.btn-icon .i { transition-property: transform; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.btn:hover .btn-icon { transform: translate(2px, -2px) scale(1.06); }
.btn-accent { --btn-bg: var(--vermilion); --btn-hover: var(--vermilion-deep); }
.btn-quiet { --btn-bg: var(--white); --btn-fg: var(--pine); --btn-hover: #F3EEE2; box-shadow: inset 0 0 0 1px var(--ring), var(--shadow); }
.btn-quiet .btn-icon { background: rgba(43, 76, 64, .08); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--pine); --btn-hover: rgba(43, 76, 64, .07); box-shadow: inset 0 0 0 1px rgba(43, 76, 64, .22); }
.btn-ghost .btn-icon { background: rgba(43, 76, 64, .08); }
.btn-small { min-height: 38px; padding: 5px 16px; font-size: 14px; gap: 10px; }
.btn-small:has(.btn-icon) { padding-right: 5px; }
.btn-small .btn-icon { width: 28px; height: 28px; }
/* An icon that leads (play buttons) takes the tight side; the label keeps its air. */
.btn:has(> .btn-icon + span) { padding-left: 7px; padding-right: 24px; }
.btn-small:has(> .btn-icon + span) { padding-left: 5px; padding-right: 16px; }
/* …and it is the pill's other centre, so it never travels: on hover it stays
   concentric, its well deepens and the glyph swells a little. Only a trailing
   arrow moves. */
:is(.btn, .bill-button):not([disabled]):hover > .btn-icon:first-child { transform: none; background: rgba(255, 253, 248, .24); }
:is(.btn-quiet, .btn-ghost):not([disabled]):hover > .btn-icon:first-child { background: rgba(43, 76, 64, .15); }
:is(.btn, .bill-button):not([disabled]):hover > .btn-icon:first-child .i { transform: scale(1.12); }
.btn[disabled], .btn[aria-disabled="true"] { --btn-bg: #CFC8B8; --btn-hover: #CFC8B8; --btn-fg: #F7F3EA; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[disabled] .btn-icon { transform: none; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vermilion-text);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 2px;
}
.link-arrow .i { transition-property: transform; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.link-arrow:hover .i { transform: translate(2px, -2px); }
.chip {
  display: inline-flex;
  font-family: var(--text);
  font-style: normal;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(43, 76, 64, .08);
  color: var(--pine);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.chip-free { background: rgba(43, 76, 64, .1); color: var(--pine); }
.chip-paid { background: rgba(180, 83, 47, .1); color: var(--vermilion-text); }
.chip-ok { background: var(--pine); color: var(--white); }

/* ---------------------------------------------------------------- double bezel */
.bezel {
  padding: 6px;
  border-radius: var(--r-outer);
  background: var(--tint);
  box-shadow: 0 0 0 1px var(--ring), var(--shadow);
}
.bezel-core {
  height: 100%;
  border-radius: var(--r-inner);
  background: var(--white);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(31, 42, 37, .04);
  overflow: hidden;
}
.bezel-flat { box-shadow: 0 0 0 1px var(--ring); }
.bezel-pine .bezel-core { background: var(--pine); color: var(--white); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1); }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ---------------------------------------------------------------- the printed leaf */
/* 言の葉 means "leaves of words", and 葉 is also how a sheet of a bound book
   is counted. The head of a page is set as one leaf of a woodblock-printed
   book (版本):
   - .leaf is the sheet of paper, a shade lighter than the desk, with square
     corners and its own margins;
   - .leaf-frame is the printed frame (版框), drawn 四周双边: a heavy outer
     rule and a hairline inner rule, as cut on the block;
   - .hanshin is the centre strip (版心) between the two half-pages, ruled on
     both sides, with the book's name set vertically between the fish-tail
     marks (魚尾); phones turn it into a running head;
   - .kento are the registration marks (見当) cut outside the image on every
     woodblock: the hook at the bottom right, the straight guide at the bottom
     left. They sit in the sheet's lower margin.
   The rules are box-shadows in ink, never borders. */
:root {
  --sheet: #FCFAF3;
  --frame-ink: rgba(31, 42, 37, .62);
  --frame-ink-2: rgba(31, 42, 37, .34);
  --leaf-margin: clamp(12px, 2.4vw, 36px);
  --frame-pad: clamp(20px, 3.6vw, 56px);
  --frame-rule: 7px;
  --bleed: calc(var(--frame-rule) - var(--frame-pad));
}
.leaf {
  position: relative;
  padding: var(--leaf-margin) var(--leaf-margin) calc(var(--leaf-margin) + 14px);
  border-radius: 3px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--ring), var(--shadow);
}
.leaf-frame {
  position: relative;
  padding: var(--frame-pad);
  box-shadow: inset 0 0 0 2px var(--frame-ink), inset 0 0 0 6px var(--sheet), inset 0 0 0 7px var(--frame-ink-2);
}
.hanshin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0 0 20px;
  box-shadow: inset 1px 0 var(--frame-ink-2), inset -1px 0 var(--frame-ink-2);
  color: var(--ink);
  font-family: var(--display);
  line-height: 1;
}
.hanshin > span { writing-mode: vertical-rl; letter-spacing: .32em; white-space: nowrap; }
.hanshin-title { font-size: 19px; }
.hanshin-sub { font-size: 13px; color: var(--muted); }
.gyobi { flex: none; width: 26px; height: 17px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 42%, 0 100%); }
.gyobi-up { transform: scaleY(-1); }
.kento { position: absolute; pointer-events: none; opacity: .72; }
.kento-hook { right: calc(var(--leaf-margin) + 2px); bottom: 8px; width: 24px; height: 9px; box-shadow: inset -1.25px 0 var(--vermilion), inset 0 -1.25px var(--vermilion); }
.kento-bar { left: calc(var(--leaf-margin) + 48px); bottom: 8px; width: 36px; height: 1.25px; background: var(--vermilion); }
/* A seal (落款) in the house vermilion, the same 言 as the brand mark. */
.rakkan { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; background: var(--vermilion); color: #FFF8EC; font-family: var(--display); font-size: 18px; line-height: 1; }
@media (max-width: 767px) {
  .hanshin { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0; box-shadow: none; }
  .hanshin > span { writing-mode: horizontal-tb; letter-spacing: .18em; }
  .hanshin-title { font-size: 16px; }
  .hanshin-sub { font-size: 12px; }
  .hanshin > .hanshin-sub:last-child { margin-left: auto; }
  .gyobi { width: 7px; height: 12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
  .gyobi-up { display: none; }
}

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: #3A4640; }
.input, .field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(31, 42, 37, .14);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  transition-property: box-shadow;
  transition-duration: var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
.input:focus, .field :is(input, select, textarea):focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--pine), 0 0 0 4px rgba(43, 76, 64, .12); }
select { appearance: none; -webkit-appearance: none; }
.select-pill {
  min-height: 36px;
  padding: 6px 30px 6px 14px;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5' fill='none' stroke='%232B4C40' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(43, 76, 64, .18);
  color: var(--pine);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--vermilion); }

/* ---------------------------------------------------------------- navigation */
.site-nav {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  isolation: isolate;
  font-family: var(--text);
}
.site-nav:empty { display: none; }
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(250, 247, 240, .78);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(31, 42, 37, .09), 0 1px 2px rgba(31, 42, 37, .04), 0 16px 36px -20px rgba(31, 42, 37, .16);
}
.nav-brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--vermilion);
  color: #FFF8EC;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -8px rgba(150, 66, 31, .55);
}
.nav-brand .brand-word { font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: .04em; }
.nav-panel { display: flex; align-items: center; gap: 6px; }
.nav-glyphs { display: flex; align-items: center; gap: 2px; padding: 0 6px; box-shadow: inset 1px 0 var(--hairline), inset -1px 0 var(--hairline); }
.nav-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pine);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition-property: background-color, color;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.nav-glyph:hover { background: rgba(43, 76, 64, .08); }
.nav-glyph[aria-current="page"] { background: var(--pine); color: var(--white); }
.nav-glyph .nav-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition-property: opacity, transform;
  transition-duration: var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
.nav-glyph:is(:hover, :focus-visible) .nav-tip { opacity: 1; transform: none; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 13px;
  border-radius: 999px;
  color: #33413A;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition-property: background-color, color;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.nav-link:hover { background: rgba(43, 76, 64, .07); color: var(--pine); }
.nav-link[aria-current="page"] { color: var(--vermilion-text); }
.nav-link .nav-mark { display: none; }
.nav-actions { display: flex; align-items: center; gap: 6px; padding-left: 6px; }
.nav-account {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  max-width: 190px;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pine);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition-property: background-color, transform;
  transition-duration: var(--t-small), var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
.nav-account:hover { background: var(--pine-deep); }
.nav-account:active { transform: scale(.98); }
.nav-toggle { display: none; }
@media (min-width: 1100px) { .nav-home { display: none; } }

@media (max-width: 1099px) {
  .site-nav { width: calc(100% - 2 * var(--gutter)); max-width: 560px; justify-content: space-between; }
  .nav-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 8px 6px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--pine);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
  }
  .nav-toggle-lines { position: relative; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 253, 248, .14); }
  .nav-toggle-lines span {
    position: absolute;
    left: 8px;
    width: 12px;
    height: 1.25px;
    border-radius: 1px;
    background: currentColor;
    transition-property: transform;
    transition-duration: var(--t-small);
    transition-timing-function: var(--ease-enter);
  }
  .nav-toggle-lines span:first-child { top: 11px; }
  .nav-toggle-lines span:last-child { top: 16px; }
  .nav-open .nav-toggle-lines span:first-child { transform: translateY(2.5px) rotate(45deg); }
  .nav-open .nav-toggle-lines span:last-child { transform: translateY(-2.5px) rotate(-45deg); }
  .nav-panel {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 104px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(248, 244, 234, .9);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
    backdrop-filter: blur(28px) saturate(1.3);
    visibility: hidden;
    opacity: 0;
    transition-property: opacity, visibility;
    transition-duration: var(--t-small), 0s;
    transition-delay: 120ms, var(--t-small);
    transition-timing-function: var(--ease-exit);
  }
  .nav-open .nav-panel { visibility: visible; opacity: 1; transition-delay: 0s; transition-timing-function: var(--ease-enter); }
  .nav-glyphs { order: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0; margin-top: 28px; box-shadow: none; }
  .nav-links { order: 1; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links li { overflow: hidden; box-shadow: inset 0 -1px var(--hairline); }
  .nav-link {
    display: flex;
    justify-content: space-between;
    min-height: 0;
    padding: 18px 2px;
    border-radius: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(28px, 7.4vw, 40px);
    font-weight: 500;
    letter-spacing: var(--display-tracking);
    line-height: 1.15;
    transform: translateY(105%);
    transition-property: transform;
    transition-duration: var(--t-small);
    transition-timing-function: var(--ease-exit);
  }
  .nav-link:hover { background: transparent; }
  /* Each link rises inside its own clipped row, so the focus ring sits inside it. */
  .nav-link:focus-visible { outline-offset: -4px; border-radius: 10px; }
  .nav-link .nav-mark { display: block; font-size: .5em; color: var(--vermilion-text); align-self: center; }
  .nav-open .nav-link { transform: none; transition-duration: var(--t-block); transition-timing-function: var(--ease-enter); transition-delay: calc(var(--i, 0) * 50ms + 60ms); }
  .nav-glyph {
    width: auto;
    height: auto;
    aspect-ratio: 1;
    border-radius: 18px;
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--ring);
    font-size: 26px;
    flex-direction: column;
    opacity: 0;
    transform: translateY(16px);
    transition-property: opacity, transform, background-color;
    transition-duration: var(--t-small);
    transition-timing-function: var(--ease-exit);
  }
  .nav-open .nav-glyph { opacity: 1; transform: none; transition-duration: var(--t-block); transition-timing-function: var(--ease-enter); transition-delay: calc(var(--i, 0) * 50ms + 60ms); }
  .nav-glyph .nav-tip { position: static; translate: none; padding: 4px 0 0; background: none; color: var(--muted); opacity: 1; transform: none; font-size: 12px; }
  .nav-actions {
    order: 3;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 28px 0 0;
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--t-small);
    transition-timing-function: var(--ease-exit);
  }
  .nav-open .nav-actions { opacity: 1; transition-duration: var(--t-block); transition-timing-function: var(--ease-enter); transition-delay: 380ms; }
  .nav-account { min-height: 44px; padding: 8px 20px; max-width: 60%; }
  .nav-actions .select-pill { min-height: 44px; }
  html.nav-open { overflow: hidden; }
}
@media (max-width: 420px) {
  .nav-brand .brand-word { font-size: 17px; }
  .nav-toggle-label { display: none; }
  .nav-toggle { padding-left: 8px; }
}

/* ---------------------------------------------------------------- footer */
.site-foot { margin-top: var(--section); padding: 0 0 calc(40px + env(safe-area-inset-bottom)); }
.site-foot-inner { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 32px 64px; padding-top: 48px; box-shadow: inset 0 1px var(--hairline); }
.foot-brand { display: grid; gap: 10px; align-content: start; }
.foot-brand strong { font-family: var(--display); font-size: 22px; font-weight: 500; }
.foot-brand p { max-width: 36em; font-size: 14px; color: var(--muted); line-height: 1.65; }
.foot-links { display: flex; flex-wrap: wrap; align-content: start; justify-content: flex-end; gap: 10px 28px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.foot-links a, .foot-links button { padding: 0; border: 0; background: none; color: #3A4640; text-decoration: none; font-size: 14px; }
.foot-links a:hover, .foot-links button:hover { color: var(--vermilion-text); }
.foot-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 0; padding-top: 24px; box-shadow: inset 0 1px var(--hairline); font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- pictures */
/* A woodblock picture of a word (§5). The pictures are printed on a warm
   cream; --pic-paper matches it, so an "object" floats on any surface of
   that colour with no visible edge, a "scene" sits in a rounded box of it,
   and a word without a picture shows a quiet wave pattern instead. */
:root { --pic-paper: #F8F0D9; }
.pic { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic-object img { -webkit-mask-image: radial-gradient(closest-side, #000 64%, transparent 100%); mask-image: radial-gradient(closest-side, #000 64%, transparent 100%); }
.pic-scene { border-radius: 20px; background: var(--pic-paper); box-shadow: inset 0 0 0 1px var(--ring); }
.pic-scene img { transform: scale(1.24); }
.pic-thumb { border-radius: 14px; background: var(--pic-paper); }
.pic-empty {
  border-radius: 20px;
  background-color: var(--pic-paper);
  background-image:
    radial-gradient(circle at 50% 100%, transparent 0 40%, rgba(43, 76, 64, .12) 41% 44%, transparent 45% 60%, rgba(43, 76, 64, .12) 61% 64%, transparent 65% 80%, rgba(43, 76, 64, .12) 81% 84%, transparent 85%),
    radial-gradient(circle at 50% 100%, transparent 0 40%, rgba(43, 76, 64, .12) 41% 44%, transparent 45% 60%, rgba(43, 76, 64, .12) 61% 64%, transparent 65% 80%, rgba(43, 76, 64, .12) 81% 84%, transparent 85%);
  background-size: 40px 20px;
  background-position: 0 0, 20px 10px;
  box-shadow: inset 0 0 0 1px var(--ring);
}

/* ---------------------------------------------------------------- motion */
/* Durations: 160 micro · 320 small · 440 enter · 640 block · 800 page; groups
   step 40ms. Only the signature (the print, 760ms) runs past 600ms.
   Entrances are hidden only when JavaScript runs and motion is allowed
   (boot.js sets .js; motion.js adds .motion-ready when the page is set).

   The entrance grammar follows the print:
   - Headings are printed (the signature, below).
   - Paper (cards, pictures, panels) is laid onto the block a hair off
     register and settles into it: a short diagonal along the print's sweep,
     4px, front-loaded, never a rise. Each card arrives whole, shell and
     contents as one sheet.
   - Words and controls next to a heading only fade in; they never travel.
   The first screen is set by 840ms: heading 0–760, words 200–520, picture
   280–840 (the picture's press is the signature's one echo). */
[data-step="1"] { --delay: 120ms; }
[data-step="2"] { --delay: 200ms; }
[data-step="3"] { --delay: 280ms; }
@keyframes kt-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes kt-line { from { transform: translateY(105%); } to { transform: none; } }
@keyframes kt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes kt-settle { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kt-register { from { opacity: 0; transform: translate(4px, -4px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes kt-sink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }

.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: inline-block; }
html.js.motion [data-enter] { opacity: 0; }
html.js.motion [data-enter="line"] { opacity: 1; }
html.js.motion [data-enter="line"] .line > span { transform: translateY(105%); }
html.js.motion.motion-ready [data-enter] { animation: kt-fade var(--t-small) var(--ease-enter) both; animation-delay: var(--delay, 0ms); }
html.js.motion.motion-ready [data-enter="line"] { animation: none; }
html.js.motion.motion-ready [data-enter="line"] .line > span { animation: kt-line 600ms var(--ease-enter) both; animation-delay: calc(var(--delay, 0ms) + var(--line, 0) * var(--stagger)); }
html.js.motion.motion-ready [data-enter="figure"] { animation: kt-register var(--t-enter) var(--ease-enter) both; animation-delay: var(--delay, 0ms); }

/* Print (摺り), the signature: a woodblock heading prints in passes.
   1. Key block: an outline of the words (motion.js lays a copy over them),
      readable from the first frame.
   2. Ink: the words are rubbed on in one slanted sweep along the reading
      direction, like a baren drawn across the paper (polygon clip, front-
      loaded on --ease-enter); the outline lifts as the ink lands.
   3. Colour: a highlighted word (vermilion) is a second block, printed a
      beat later and settling the last 0.04em into register.
   Only clip-path, opacity and transform move. Until motion.js has set the
   heading up it stays hidden, and only where scripts run and motion is
   welcome; boot.js shows it after 2.5s if motion.js never arrives. */
@keyframes kt-ink {
  from { clip-path: polygon(0 -12%, 0 -12%, -28% 112%, -28% 112%); }
  to { clip-path: polygon(0 -12%, 128% -12%, 100% 112%, -28% 112%); }
}
@keyframes kt-key { 0%, 42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kt-pass {
  from { clip-path: polygon(0 -12%, 0 -12%, -28% 112%, -28% 112%); transform: translate(.04em, -.03em); }
  to { clip-path: polygon(0 -12%, 128% -12%, 100% 112%, -28% 112%); transform: none; }
}
html.js.motion [data-print]:not(.print-armed):not(.print-done) { opacity: 0; }
html.motion-off [data-print] { opacity: 1 !important; }
.print-armed { position: relative; }
.print-armed > .print-ink { display: block; clip-path: polygon(0 -12%, 0 -12%, -28% 112%, -28% 112%); }
.print-armed > .print-key {
  position: absolute;
  inset: 0;
  display: block;
  padding: inherit;
  color: transparent;
  -webkit-text-stroke: max(.6px, .018em) var(--print-key, rgba(31, 42, 37, .42));
  pointer-events: none;
  user-select: none;
}
/* The key block is outline only: no word inside it keeps its own fill. */
.print-armed > .print-key * { color: transparent; }
.print-armed > .print-key .hero-highlight { -webkit-text-stroke-color: rgba(180, 83, 47, .5); }
.print-armed .hero-highlight { display: inline-block; }
.print-armed > .print-ink .hero-highlight { clip-path: polygon(0 -12%, 0 -12%, -28% 112%, -28% 112%); transform: translate(.04em, -.03em); }
/* The key block stands alone for 100ms before the ink comes down. */
.print-armed.is-printing > .print-ink { animation: kt-ink 660ms var(--ease-enter) calc(var(--print-delay, 0ms) + 100ms) both; }
.print-armed.is-printing > .print-key { animation: kt-key 820ms var(--ease-enter) var(--print-delay, 0ms) both; }
.print-armed.is-printing > .print-ink .hero-highlight { animation: kt-pass 480ms var(--ease-enter) calc(var(--print-delay, 0ms) + 260ms) both; }

/* A heading set vertically (縦書き) reads top to bottom, right column first:
   the same sweep turns to run down the columns, the right one leading. */
@keyframes kt-ink-v {
  from { clip-path: polygon(-12% -40%, 112% -40%, 112% -12%, -12% -40%); }
  to { clip-path: polygon(-12% -40%, 112% -40%, 112% 140%, -12% 112%); }
}
@keyframes kt-pass-v {
  from { clip-path: polygon(-12% -40%, 112% -40%, 112% -12%, -12% -40%); transform: translate(.03em, -.04em); }
  to { clip-path: polygon(-12% -40%, 112% -40%, 112% 140%, -12% 112%); transform: none; }
}
.print-armed.print-v > .print-ink, .print-armed.print-v > .print-ink .hero-highlight { clip-path: polygon(-12% -40%, 112% -40%, 112% -12%, -12% -40%); }
.print-armed.print-v.is-printing > .print-ink { animation-name: kt-ink-v; }
.print-armed.print-v.is-printing > .print-ink .hero-highlight { animation-name: kt-pass-v; }

/* The echo: the hero's woodblock picture is pressed with the same sweep,
   after the heading has begun to print. The whole sheet (frame, picture and
   seal) is pressed at once, so no empty frame is ever seen; the clip reaches
   past the frame so its shadow is never cut. */
@keyframes kt-press {
  from { clip-path: polygon(-12% -12%, -12% -12%, -40% 112%, -40% 112%); }
  to { clip-path: polygon(-12% -12%, 140% -12%, 112% 112%, -40% 112%); }
}
html.js.motion [data-enter="press"] { opacity: 1; clip-path: polygon(-12% -12%, -12% -12%, -40% 112%, -40% 112%); }
html.js.motion.motion-ready [data-enter="press"] { animation: kt-press 560ms var(--ease-enter) var(--delay, 0ms) both; }

/* Scroll reveal for cards and pictures (never body text): the sheet is laid
   down off register and settles (kt-register as a transition). Where a
   shell holds a group of rows (data-reveal-shell; style.css says at which
   widths it is drawn), the shell arrives with its rows as one sheet: an
   empty shell is never seen. */
html.js.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translate(4px, -4px); }
html.motion-off [data-reveal] { opacity: 1 !important; transform: none !important; }
html.js.motion [data-reveal]:not(.is-done) {
  transition-property: opacity, transform;
  transition-duration: var(--t-small), var(--t-enter);
  transition-timing-function: var(--ease-enter);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
/* Eyebrows are words: they fade, they do not move. */
html.js.motion .eyebrow[data-reveal]:not(.is-in) { transform: none; }
/* A chapter card's glyph is its seal: once the sheet is down, the glyph is
   inked in with the print's sweep (ink only, no key block, 300ms), a beat
   after its card. The heading's print stays the one large move. */
html.js.motion [data-reveal] > .card-glyph { transition: clip-path 300ms var(--ease-enter) calc(var(--i, 0) * var(--stagger) + 120ms); }
html.js.motion [data-reveal]:not(.is-in) > .card-glyph { clip-path: polygon(0 -12%, 0 -12%, -28% 112%, -28% 112%); }
html.js.motion [data-reveal].is-in:not(.is-done) > .card-glyph { clip-path: polygon(0 -12%, 128% -12%, 100% 112%, -28% 112%); }

/* View transitions: chapter card → chapter page (the glyph is shared) and a
   list card → the detail drawer. The page itself does not cross-fade: the old
   view leaves quickly, the new one rises. */
::view-transition-group(*) { animation-duration: var(--t-page); animation-timing-function: var(--ease-enter); }
::view-transition-old(root) { animation: kt-fade-out var(--t-micro) var(--ease-exit) both; }
::view-transition-new(root) { animation: kt-rise var(--t-block) var(--ease-enter) 120ms both; }
/* Between the old view leaving and the new one rising, the paper shows, not
   the browser's white. */
::view-transition { background: var(--paper); }
/* The drawer is revealed inside the card's growing outline (a container
   transform), never spilling past it; the outline is filled, so the box stays
   solid while the card's content gives way to the drawer's. The scrim exists
   only in the new state, so the browser would stack it above the card; the
   drawer stays on top, as it is on the page. */
::view-transition-group(kt-detail) { animation-duration: var(--t-block); overflow: clip; border-radius: 24px; background: var(--white); z-index: 2; }
/* In a morph the old content must clear early, or the two layers read as a
   double exposure halfway through: it fades on the fast-start curve. */
::view-transition-old(kt-detail) { animation: kt-fade-out 150ms var(--ease-enter) both; }
::view-transition-new(kt-detail) { animation: kt-fade 240ms var(--ease-enter) 40ms both; }
::view-transition-old(kt-scrim) { animation: kt-fade-out var(--t-small) var(--ease-exit) both; }
::view-transition-new(kt-scrim) { animation: kt-fade var(--t-small) var(--ease-enter) both; }
html.vt-detail::view-transition-old(root), html.vt-detail::view-transition-new(root) { animation: none; }
/* The same morph on wide screens, where the detail is a centred card
   (style.css): the clicked card grows into it in 440ms and shrinks back in
   320ms, both on the front-loaded curve, no overshoot. Only the card is
   captured: the page is not (no root snapshot), so it stays live under the
   transition and its scrim dims and softens at the card's pace (app.js
   fadeScrim). Capturing the page meant two full-window images, the new one
   carrying the scrim's backdrop blur, cross-fading under the card; Safari
   dropped the first frames of the expand for it, where the curve moves
   most, and kept the page frozen for 800ms. A card opened without a source,
   or closed away from it (card-fade), fades with the scrim instead. */
html:is(.vt-card, .vt-card-close, .vt-card-fade) { view-transition-name: none; }
html:is(.vt-card, .vt-card-close, .vt-card-fade)::view-transition { background: none; }
/* The card's rim and shadow lie outside its box, where the morph clips them
   anyway; left on, they only enlarge the captured image Safari scales. */
html:is(.vt-card, .vt-card-close, .vt-card-fade) .detail-drawer { box-shadow: none; }
html.vt-card::view-transition-group(kt-detail) { animation-duration: var(--t-enter); border-radius: var(--r-inner); }
html.vt-card-close::view-transition-group(kt-detail) { animation-duration: var(--t-small); border-radius: var(--r-inner); }
html.vt-card::view-transition-old(kt-detail) { animation: kt-fade-out 140ms var(--ease-enter) both; }
html.vt-card::view-transition-new(kt-detail) { animation: kt-fade 220ms var(--ease-enter) 60ms both; }
html.vt-card-close::view-transition-old(kt-detail) { animation: kt-fade-out 120ms var(--ease-enter) both; }
html.vt-card-close::view-transition-new(kt-detail) { animation: kt-fade 180ms var(--ease-enter) 40ms both; }
html.vt-card-fade::view-transition-group(kt-detail) { background: none; border-radius: var(--r-inner); }
html.vt-card-fade::view-transition-new(kt-detail) { animation: kt-fade var(--t-enter) var(--ease-enter) both; }
html.vt-card-fade::view-transition-old(kt-detail) { animation: kt-fade-out var(--t-small) var(--ease-enter) both; }
/* The nav is the same on both sides of a chapter change: it stays where it is
   (its two identical images cross-fade without a dip) while the page under it
   changes, instead of fading and rising with it. Named only during that
   transition: a named element is a backdrop root, which would switch off the
   menu's frosted glass. */
html.vt-chapter .site-nav { view-transition-name: kt-nav; }
::view-transition-group(kt-nav) { z-index: 3; }
/* Changing chapter: the old page clears first (100ms, fast start) while the
   glyph holds still, so the glyph's path never crosses the old page's words;
   only then does it travel (520ms, front-loaded), and the new page fades in
   around it at 280ms, once it has nearly landed, so it never crosses the new
   page's words either. The chapter title is printed after (app.js). */
html.vt-chapter::view-transition-old(root) { animation: kt-fade-out 100ms var(--ease-enter) both; }
html.vt-chapter::view-transition-new(root) { animation: kt-fade var(--t-small) var(--ease-enter) 280ms both; }
html.vt-chapter::view-transition-group(kt-glyph) { animation-duration: 520ms; animation-delay: 100ms; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  html, html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  html.js [data-enter], html.js [data-reveal], html.js [data-enter="line"] .line > span, html.js [data-enter] img { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; }
  [data-print], [data-print] * { opacity: 1 !important; clip-path: none !important; animation: none !important; }
  .print-key { display: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------- 404 */
.not-found { display: grid; justify-items: start; align-content: center; gap: 28px; min-height: calc(100dvh - 240px); }

/* ---------------------------------------------------------------- toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition-property: opacity, transform;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-exit);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); transition-timing-function: var(--ease-enter); }

@media (max-width: 767px) {
  /* One vertical step between sections on phones, on every page. */
  :root { --section: 72px; }
  body { font-size: 16px; }
  .site-foot-inner { grid-template-columns: 1fr; }
  .foot-links { justify-content: flex-start; }
  .foot-meta { flex-direction: column; }
}