/* ==========================================================================
   TypeWondo / 打鍵道 (Dakendō)
   Native CSS. No build step, no framework, no JavaScript.
   Palette: urushi lacquerware. Sumi ink, shu vermillion, washi paper, kin gold.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  --washi:        #F2EDE3;
  --washi-dim:    #E7DFCE;
  --washi-line:   #D6CCB6;
  --sumi:         #16130F;
  --sumi-soft:    #221D17;
  --sumi-line:    #352D24;
  --ink:          #1D1913;
  --ink-mid:      #585045;
  --ink-soft:     #7B7264;
  --shu:          #D8412F;
  --shu-deep:     #A82C1E;
  --ai:           #1F3C63;
  --kin:          #BE9B45;

  --font-display: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", Georgia, "Times New Roman", serif;
  --font-body:    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --wrap:   1160px;
  --narrow: 760px;
  --gutter: clamp(20px, 5.2vw, 60px);
  --rule:   1px solid var(--washi-line);
  --rule-d: 1px solid var(--sumi-line);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--washi);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; margin: 0; letter-spacing: .005em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
a { color: inherit; }
hr { border: 0; border-top: var(--rule); margin: 2.5rem 0; }
::selection { background: var(--shu); color: var(--washi); }

/* --- 3. Utilities -------------------------------------------------------- */
.wrap    { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow  { max-width: var(--narrow); margin-inline: auto; padding-inline: var(--gutter); }
.jp      { font-family: var(--font-display); font-feature-settings: "palt" 1; }
.mono    { font-family: var(--font-mono); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--shu); color: #fff; padding: .8rem 1.4rem; font-weight: 700;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

/* --- 4. Seal (hanko) mark ------------------------------------------------ */
.seal {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  background: var(--shu); border-radius: 3px;
  font-family: var(--font-display); font-weight: 700;
  color: #fff; font-size: 21px; line-height: 1;
  padding-bottom: 1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
}

/* --- 5. Header ----------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--washi);
  border-bottom: var(--rule);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 74px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; padding: .5rem 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 900; font-size: 21px;
  letter-spacing: .11em; color: var(--ink);
}
.brand__kana {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .38em;
  color: var(--shu); margin-top: 5px;
}
.nav { display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 2rem); flex-wrap: wrap; }
.nav a {
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-mid);
  padding: .35rem 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--shu); transition: right .22s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after { right: 0; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav a[aria-current="page"]::after { right: 0; }

/* --- 6. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  letter-spacing: .02em; text-decoration: none; cursor: pointer;
  padding: .92rem 1.7rem; border: 1px solid transparent; border-radius: 2px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--shu); color: #fff; }
.btn--primary:hover { background: var(--shu-deep); }
.btn--ghost-light { border-color: rgba(242,237,227,.34); color: var(--washi); }
.btn--ghost-light:hover { border-color: var(--washi); background: rgba(242,237,227,.08); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--washi); }
.btn__jp { font-family: var(--font-display); font-weight: 400; opacity: .72; font-size: 13px; }

/* --- 7. Section scaffolding ---------------------------------------------- */
.slab { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.slab--dark { background: var(--sumi); color: var(--washi); }
.slab--dim  { background: var(--washi-dim); }
.slab--tight { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.slab + .slab:not(.slab--dark):not(.slab--dim) { border-top: var(--rule); }

/* Chapter mark: a kanji numeral set beside the heading. Not an eyebrow. */
.chapter { display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.2rem); margin-bottom: 2.6rem; }
.chapter__num {
  font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px);
  color: var(--shu); line-height: 1; flex: 0 0 auto;
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .05em;
}
.chapter__head { flex: 1 1 auto; }
.chapter h2 { font-size: clamp(28px, 4.6vw, 44px); margin-bottom: .4rem; }
.chapter__sub { color: var(--ink-soft); font-size: 15.5px; max-width: 640px; margin: 0; }
.slab--dark .chapter__sub { color: rgba(242,237,227,.62); }

/* --- 8. Hero ------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--sumi); color: var(--washi);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
/* The tiled hairline grid that used to sit here was a generated-UI tell.
   The dojo hero carries one radial seam of light instead. */
.hero__grid {
  position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
}
.hero__copy { max-width: 660px; }
.hero h1 {
  font-size: clamp(38px, 7.4vw, 74px); line-height: 1.06; letter-spacing: -.012em;
  margin-bottom: 1.4rem;
}
.hero h1 em { font-style: normal; color: var(--shu); }
.hero__lede { font-size: clamp(16.5px, 2vw, 19.5px); color: rgba(242,237,227,.76); max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero__note { margin-top: 1.6rem; font-size: 13.5px; color: rgba(242,237,227,.5); }

/* Vertical rail: tategaki, the signature device */
.rail {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(52px, 12vw, 132px); line-height: 1;
  letter-spacing: .12em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(216,65,47,.85);
  user-select: none;
}
.rail--solid { color: var(--shu); -webkit-text-stroke: 0; }

/* --- 9. Typing demo strip (CSS-only) ------------------------------------- */
.demo {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); position: relative;
  border: var(--rule-d); border-radius: 3px; background: rgba(242,237,227,.03);
  padding: 1.5rem clamp(1.2rem, 3vw, 2rem);
  display: grid; gap: .9rem;
}
.demo__label {
  font-size: 11.5px; letter-spacing: .26em; color: rgba(242,237,227,.42);
  font-family: var(--font-mono);
}
.demo__jp { font-family: var(--font-display); font-size: clamp(24px, 4.2vw, 36px); letter-spacing: .06em; }
.demo__jp .rt { font-size: .42em; color: var(--shu); letter-spacing: .1em; }
.demo__note {
  font-size: 12.5px; line-height: 1.6; color: rgba(242,237,227,.46);
  border-top: var(--rule-d); padding-top: .85rem; margin: 0;
}
.demo__note .mono { color: rgba(242,237,227,.72); }
.demo__type {
  font-family: var(--font-mono); font-size: clamp(15px, 2.4vw, 19px);
  color: rgba(242,237,227,.86); letter-spacing: .08em;
  border-top: var(--rule-d); padding-top: .9rem;
  display: flex; align-items: center;
}
.demo__typed {
  display: inline-block; overflow: hidden; white-space: nowrap;
  width: 0; animation: type 7.5s steps(18, end) infinite;
}
.demo__caret {
  display: inline-block; width: .62ch; height: 1.15em; background: var(--shu);
  margin-left: 2px; animation: blink 1.05s steps(1, end) infinite;
}
@keyframes type { 0% { width: 0; } 46% { width: 18ch; } 92% { width: 18ch; } 100% { width: 0; } }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .demo__typed { animation: none; width: 18ch; }
  .demo__caret { animation: none; }
  html { scroll-behavior: auto; }
}

/* --- 10. Editorial columns ---------------------------------------------- */
.deck { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); grid-template-columns: repeat(2, minmax(0,1fr)); }
.deck--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.deck--aside { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.entry { padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.slab--dark .entry { border-top-color: rgba(242,237,227,.5); }
.entry h3 { font-size: clamp(19px, 2.4vw, 23px); margin-bottom: .55rem; }
.entry h3 .term-jp { color: var(--shu); font-weight: 400; margin-left: .5rem; font-size: .82em; }
.entry p { font-size: 15.5px; color: var(--ink-mid); margin-bottom: 0; }
.slab--dark .entry p { color: rgba(242,237,227,.68); }

.lede { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.62; font-family: var(--font-display); }

/* --- 11. Belt / rank ladder --------------------------------------------- */
.ladder { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 2px; margin-top: .6rem; }
.rank { display: flex; flex-direction: column; gap: .7rem; }
.rank__belt { height: 13px; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
.rank__kyu { font-family: var(--font-display); font-size: 15px; color: var(--washi); line-height: 1.3; }
.rank__en  { font-size: 12.5px; color: rgba(242,237,227,.55); line-height: 1.45; }
.belt-white  { background: #EDE6D8; }
.belt-yellow { background: #E0B62F; }
.belt-orange { background: #DE7C26; }
.belt-green  { background: #4F7A44; }
.belt-blue   { background: #2C5583; }
.belt-brown  { background: #6B4326; }
.belt-black  { background: #0C0A08; box-shadow: inset 0 0 0 1px rgba(242,237,227,.28); }
.belt-red    { background: var(--shu); }

/* --- 12. Definition rows ------------------------------------------------- */
.rows { border-top: var(--rule); margin-top: .4rem; }
.slab--dark .rows { border-top-color: var(--sumi-line); }
.row {
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: 1.5rem 0; border-bottom: var(--rule);
}
.slab--dark .row { border-bottom-color: var(--sumi-line); }
.row__term { font-family: var(--font-display); font-size: 20px; line-height: 1.35; }
.row__term span { display: block; font-family: var(--font-body); font-size: 12.5px; letter-spacing: .16em; color: var(--shu); margin-top: .3rem; }
.row__body { font-size: 15.5px; color: var(--ink-mid); }
.slab--dark .row__body { color: rgba(242,237,227,.68); }
.row__body p { margin-bottom: .5em; }

/* --- 13. Stat band ------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--washi-line); border: var(--rule); }
.stat { background: var(--washi); padding: 1.7rem 1.4rem; }
.stat__n { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); line-height: 1; color: var(--ink); }
.stat__n small { font-size: .45em; color: var(--shu); margin-left: .25rem; }
.stat__l { font-size: 13.5px; color: var(--ink-soft); margin-top: .55rem; line-height: 1.5; }

/* --- 14. Language roadmap ------------------------------------------------ */
.langs { display: grid; gap: 1px; background: var(--sumi-line); border: var(--rule-d); }
.lang { background: var(--sumi); padding: 1.6rem clamp(1.2rem,3vw,2rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem; }
.lang__native { font-family: var(--font-display); font-size: 27px; color: var(--washi); }
.lang__en { font-size: 15px; color: rgba(242,237,227,.6); flex: 1 1 auto; }
.tag {
  font-size: 11.5px; letter-spacing: .18em; font-weight: 700;
  padding: .34rem .7rem; border-radius: 2px; white-space: nowrap;
}
.tag--now  { background: var(--shu); color: #fff; }
.tag--next { background: rgba(190,155,69,.16); color: var(--kin); box-shadow: inset 0 0 0 1px rgba(190,155,69,.5); }
.tag--later{ background: rgba(242,237,227,.08); color: rgba(242,237,227,.6); box-shadow: inset 0 0 0 1px rgba(242,237,227,.18); }

/* --- 15. FAQ (native details/summary) ----------------------------------- */
.faq { border-top: var(--rule); }
.faq details { border-bottom: var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.35rem 2.4rem 1.35rem 0;
  font-family: var(--font-display); font-size: clamp(17px, 2.2vw, 20px);
  position: relative; font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--shu); font-size: 18px; font-family: var(--font-display);
}
.faq details[open] summary::after { content: "－"; }
.faq summary:hover { color: var(--shu-deep); }
.faq__a { padding: 0 0 1.6rem; max-width: 760px; color: var(--ink-mid); font-size: 15.5px; }

/* --- 16. Call to action band -------------------------------------------- */
.cta { background: var(--shu); color: #fff; padding: clamp(3rem, 6vw, 4.6rem) 0; }
.cta__inner { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.cta h2 { font-size: clamp(26px, 3.8vw, 38px); max-width: 420px; }
.cta p { color: rgba(255,255,255,.86); max-width: 560px; margin-top: .7rem; font-size: 16px; }
.cta .btn--ghost-light { border-color: rgba(255,255,255,.6); color: #fff; }
.cta .btn--ghost-light:hover { background: #fff; color: var(--shu-deep); border-color: #fff; }

/* --- 17. Article / legal pages ------------------------------------------ */
.pagehead { background: var(--sumi); color: var(--washi); padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.4rem, 5vw, 3.6rem); }
.pagehead h1 { font-size: clamp(32px, 5.6vw, 56px); max-width: 700px; letter-spacing: -.01em; }
.pagehead__jp { font-family: var(--font-display); color: var(--shu); font-size: 15px; letter-spacing: .3em; margin-bottom: 1.1rem; }
.pagehead p { color: rgba(242,237,227,.68); max-width: 660px; margin-top: 1.2rem; font-size: 16.5px; }
.crumbs { font-size: 13px; color: rgba(242,237,227,.5); margin-bottom: 1.4rem; }
.crumbs a { color: rgba(242,237,227,.7); text-decoration: none; }
.crumbs a:hover { color: var(--washi); text-decoration: underline; }
.crumbs span { margin: 0 .5rem; }

.doc { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.doc__layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.toc { position: sticky; top: 96px; font-size: 14px; border-top: 2px solid var(--ink); padding-top: 1rem; }
.toc h2 { font-size: 13px; letter-spacing: .18em; font-family: var(--font-body); margin-bottom: .9rem; color: var(--ink-soft); }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { margin-bottom: .5rem; counter-increment: toc; }
.toc a { text-decoration: none; color: var(--ink-mid); display: block; line-height: 1.4; }
.toc a::before { content: counter(toc) ". "; color: var(--shu); }
.toc a:hover { color: var(--shu-deep); }

.prose { max-width: 720px; }
.prose h2 {
  font-size: clamp(22px, 3vw, 28px); margin: 3rem 0 .9rem;
  padding-top: 1.6rem; border-top: var(--rule); scroll-margin-top: 96px;
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 18.5px; margin: 2rem 0 .6rem; }
.prose p, .prose li { color: var(--ink-mid); }
.prose a { color: var(--shu-deep); text-underline-offset: 3px; }
.prose a:hover { color: var(--shu); }
.meta-stamp {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: 13.5px;
  color: var(--ink-soft); border-bottom: var(--rule); padding-bottom: 1.4rem; margin-bottom: 2.4rem;
}
.callout {
  background: var(--washi-dim); border-radius: 3px; padding: 1.3rem 1.5rem;
  font-size: 15px; color: var(--ink-mid); margin: 1.6rem 0;
}
.callout strong { color: var(--ink); }

/* --- 18. The enquiry slip (申込書) --------------------------------------
   Modelled on a Japanese paper application form: one ruled sheet, a tinted
   label column, hairline-divided rows, borderless inputs, and a seal box in
   the footer where a hanko would go.
   ----------------------------------------------------------------------- */
.slip {
  border: 1px solid var(--ink); background: #FBF8F2; position: relative;
}
.slip__head {
  background: var(--sumi); color: var(--washi);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .85rem clamp(.9rem, 2.5vw, 1.3rem); flex-wrap: wrap;
}
.slip__head .jp { font-family: var(--font-display); font-size: 19px; letter-spacing: .34em; }
.slip__head .en { font-size: 11px; letter-spacing: .24em; color: rgba(242,237,227,.55); }
.slip__no { font-family: var(--font-mono); font-size: 12px; color: var(--kin); letter-spacing: .1em; }

.slip__row { display: grid; grid-template-columns: 158px minmax(0, 1fr); border-top: var(--rule); }
.slip__row:first-of-type { border-top: 0; }
.slip__row--full { grid-template-columns: minmax(0, 1fr); }
.slip__label {
  background: var(--washi-dim); border-right: var(--rule);
  padding: 1rem clamp(.8rem, 2vw, 1.1rem);
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
}
.slip__label .jp { font-family: var(--font-display); font-size: 15.5px; line-height: 1.25; }
.slip__label .en { font-size: 10.5px; letter-spacing: .16em; color: var(--ink-soft); }
.slip__label .req { color: var(--shu); font-weight: 700; }
.slip__cell { padding: 0; min-width: 0; }
.slip__cell--pad { padding: 1rem clamp(.9rem, 2.5vw, 1.2rem); }

.slip input[type="text"], .slip input[type="email"], .slip textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  border: 0; background: transparent; width: 100%; display: block;
  padding: 1rem clamp(.9rem, 2.5vw, 1.2rem);
  transition: background .15s ease, box-shadow .15s ease;
}
.slip input:focus, .slip textarea:focus {
  outline: none; background: rgba(216,65,47,.045);
  box-shadow: inset 0 -2px 0 var(--shu);
}
.slip input::placeholder, .slip textarea::placeholder { color: #B4A996; }

/* Message field ruled like writing paper. background-attachment: local keeps
   the rules locked to the text when the field scrolls. */
.slip textarea {
  min-height: 232px; resize: vertical; line-height: 30px;
  padding-top: 10px; padding-bottom: 10px;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 29px, #E4DBC7 29px, #E4DBC7 30px);
  background-position: 0 10px; background-attachment: local; background-repeat: repeat;
}
.slip textarea:focus {
  box-shadow: inset 0 -2px 0 var(--shu);
  background-color: rgba(216,65,47,.03);
}

/* Topic: radio squares, not a dropdown */
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip {
  display: flex; flex-direction: column; gap: .18rem; cursor: pointer;
  padding: .85rem clamp(.7rem, 2vw, 1rem); background: #FBF8F2;
  border-right: var(--rule); border-bottom: var(--rule);
  transition: background .15s ease;
}
.chip .jp { font-family: var(--font-display); font-size: 15.5px; line-height: 1.2; }
.chip .en { font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }
.chip:hover { background: var(--washi-dim); }
/* Six options in three columns. Inputs are absolutely positioned, so each
   label sits at an even child index: label n is child 2n. */
.chips .chip:nth-child(6n) { border-right: 0; }
.chips .chip:nth-child(n+9) { border-bottom: 0; }
.chip__input:checked + .chip { background: var(--shu); }
.chip__input:checked + .chip .jp,
.chip__input:checked + .chip .en { color: #fff; }
.chip__input:focus-visible + .chip { outline: 2px solid var(--shu); outline-offset: -3px; }

/* Consent */
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.consent input { width: 17px; height: 17px; margin: .3rem 0 0; accent-color: var(--shu); flex: none; }
.consent label { font-size: 14px; color: var(--ink-mid); line-height: 1.6; }
.slip .hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

.slip__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem; padding: 1.2rem clamp(.9rem, 2.5vw, 1.3rem);
  border-top: var(--rule); background: var(--washi-dim);
}
.stamp {
  width: 66px; height: 66px; flex: none; border-radius: 50%;
  border: 1px dashed rgba(216,65,47,.5); color: rgba(168,44,30,.6);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-size: 10.5px; line-height: 1.3; letter-spacing: .08em;
}
.stamp b { display: block; font-size: 17px; font-weight: 400; }
.hp { position: absolute; left: -9999px; }

/* Aside: a ruled notice column rather than a grid of card boxes */
.notices { border-top: 2px solid var(--ink); }
.notice { padding: 1.35rem 0; border-bottom: var(--rule); display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 1rem; }
.notice__mark { font-family: var(--font-display); font-size: 19px; color: var(--shu); line-height: 1.3; }
.notice h3 { font-size: 17px; margin-bottom: .35rem; }
.notice p { font-size: 14.5px; color: var(--ink-mid); margin-bottom: .45rem; }
.notice a { color: var(--shu-deep); font-weight: 700; text-decoration: none; font-size: 14.5px; }
.notice a:hover { text-decoration: underline; }

/* --- 19. Footer ---------------------------------------------------------- */
.footer { background: var(--sumi); color: rgba(242,237,227,.62); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; font-size: 14.5px; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0,1fr)); gap: clamp(1.8rem, 4vw, 3rem); }
.footer__brand .brand__name { color: var(--washi); }
.footer__brand p { margin-top: 1.1rem; max-width: 360px; font-size: 14px; line-height: 1.65; }
.footer h2 { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .2em; color: var(--washi); margin-bottom: 1rem; font-weight: 700; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .6rem; }
.footer a { text-decoration: none; color: rgba(242,237,227,.62); }
.footer a:hover { color: var(--shu); }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.6rem; border-top: var(--rule-d);
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between; font-size: 13px;
  color: rgba(242,237,227,.45);
}
.footer__bottom p { margin: 0; }

/* --- 20. 404 ------------------------------------------------------------- */
.oops { background: var(--sumi); color: var(--washi); min-height: 66vh; display: grid; align-items: center; padding: 4rem 0; }
.oops h1 { font-size: clamp(38px, 8vw, 76px); margin-bottom: 1rem; }
.oops p { color: rgba(242,237,227,.68); max-width: 560px; }

/* --- 21. Responsive ------------------------------------------------------ */
@media (max-width: 1000px) {
  .doc__layout { grid-template-columns: minmax(0,1fr); }
  .toc { position: static; }
  .footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ladder { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.4rem 1rem; }
}
@media (max-width: 820px) {
  body { font-size: 16.5px; }
  .hero__grid { grid-template-columns: minmax(0,1fr); }
  .rail { writing-mode: horizontal-tb; text-orientation: mixed; font-size: clamp(44px, 13vw, 76px); letter-spacing: .06em; }
  .hero__copy { max-width: none; }
  .deck, .deck--3, .deck--aside { grid-template-columns: minmax(0,1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .row { grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .slip__row { grid-template-columns: minmax(0,1fr); }
  .slip__label { border-right: 0; border-bottom: var(--rule); flex-direction: row; align-items: baseline; gap: .6rem; }
  .chips { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .chips .chip { border-right: var(--rule); border-bottom: var(--rule); }
  .chips .chip:nth-child(4n) { border-right: 0; }
  .chips .chip:nth-child(n+9) { border-bottom: 0; }
  /* A sticky bar that wraps to two lines would eat 16% of a phone screen. */
  .masthead { position: static; }
  .masthead__inner { min-height: 66px; padding-block: .6rem; }
  .nav { gap: .7rem 1.1rem; }
  .nav a { font-size: 14.5px; }
  .prose h2, .toc { scroll-margin-top: 1rem; }
}
@media (max-width: 520px) {
  .ladder { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .chips { grid-template-columns: minmax(0,1fr); }
  .chips .chip { border-right: 0; border-bottom: var(--rule); }
  .chips .chip:last-child { border-bottom: 0; }
  .stats { grid-template-columns: minmax(0,1fr); }
  .footer__top { grid-template-columns: minmax(0,1fr); }
  .chapter { flex-direction: column; gap: .8rem; }
  .chapter__num { writing-mode: horizontal-tb; }
}

/* ==========================================================================
   23. LAYOUT SYSTEM v2
   Structures borrowed from laravel.com (bento cells split by hairlines, a
   narrow label rail beside a wide content column), stripe.com (a 12 column
   spine where headings span 5 of 12, light display weights, tight tracking)
   and digitalocean.com (a vertical tab rail beside one large panel).
   Loaded after the base rules so it wins on equal specificity.
   ========================================================================== */

/* --- 23.1 Twelve column spine ------------------------------------------- */
.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: clamp(28px, 4vw, 56px);
}
/* end-only spans: `grid-column: span N` sets grid-column-START to "span N",
   so a later grid-column-start (.pushN) would silently reduce it to one track. */
.s1  { grid-column-end: span 1; }
.s2  { grid-column-end: span 2; }
.s3  { grid-column-end: span 3; }
.s4  { grid-column-end: span 4; }
.s5  { grid-column-end: span 5; }
.s6  { grid-column-end: span 6; }
.s7  { grid-column-end: span 7; }
.s8  { grid-column-end: span 8; }
.s9  { grid-column-end: span 9; }
.s12 { grid-column-end: span 12; }
.push1 { grid-column-start: 2; }
.push2 { grid-column-start: 3; }
.push3 { grid-column-start: 4; }
.push4 { grid-column-start: 5; }
.push5 { grid-column-start: 6; }
.push6 { grid-column-start: 7; }
.hero__g { align-items: center; row-gap: clamp(2.5rem, 5vw, 4rem); }
.rail--slim {
  font-size: clamp(30px, 3.6vw, 46px); -webkit-text-stroke-width: 1px;
  letter-spacing: .3em; margin: 0; align-self: start; justify-self: start;
}

/* --- 23.2 Display type: lighter and tighter ----------------------------- */
.hero h1 { font-weight: 400; letter-spacing: -.028em; line-height: 1.02; }
.hd h2, .pagehead h1 { font-weight: 400; letter-spacing: -.022em; }
.hd h2 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08; }
.cta h2 { font-weight: 400; letter-spacing: -.02em; }

/* --- 23.3 Section header rail ------------------------------------------- */
.hd {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  border-top: 2px solid var(--ink);
  margin-bottom: clamp(2.4rem, 4vw, 3.6rem);
}
.slab--dark .hd { border-top-color: rgba(242,237,227,.45); }
.hd__mark {
  border-right: var(--rule); display: flex; justify-content: center;
  padding: 1.7rem 0 2rem;
  font-family: var(--font-display); font-size: 30px; color: var(--shu); line-height: 1;
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .22em;
}
.slab--dark .hd__mark { border-right-color: var(--sumi-line); }
.hd__body { padding: 1.7rem 0 2rem clamp(1.2rem, 3vw, 2.4rem); max-width: 780px; }
.hd__body p { color: var(--ink-soft); font-size: 15.5px; margin: .7rem 0 0; max-width: 620px; }
.slab--dark .hd__body p { color: rgba(242,237,227,.6); }

/* --- 23.4 Product preview panel ----------------------------------------- */
.screen {
  background: #0F0D0B; border: 1px solid var(--sumi-line);
  display: grid; align-content: start;
  font-feature-settings: "palt" 1;
}
.slab--dim .screen, .slab .screen { box-shadow: 0 24px 60px -34px rgba(22,19,15,.55); }
.screen__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--sumi-line);
  font-size: 11.5px; letter-spacing: .16em; color: rgba(242,237,227,.5);
  font-family: var(--font-mono);
}
.screen__belt { display: inline-flex; align-items: center; gap: .55rem; color: rgba(242,237,227,.82); }
.screen__belt i { width: 22px; height: 7px; background: #E0B62F; border-radius: 1px; }
.screen__stage { padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.1rem, 3vw, 1.8rem) 1.6rem; }
.screen__prompt {
  font-family: var(--font-display); color: var(--washi);
  font-size: clamp(28px, 4vw, 40px); line-height: 1.9; letter-spacing: .04em; margin: 0 0 1.4rem;
}
.screen__prompt ruby rt { font-size: .34em; color: var(--shu); letter-spacing: .08em; }
.screen__prompt .done { color: rgba(242,237,227,.34); }
.screen__input {
  font-family: var(--font-mono); font-size: clamp(14px, 1.9vw, 17px);
  letter-spacing: .1em; margin: 0; padding-top: 1.1rem;
  border-top: 1px solid var(--sumi-line); display: flex; align-items: center; flex-wrap: wrap;
}
.screen__input .ok   { color: rgba(242,237,227,.78); }
.screen__input .miss { color: var(--shu); text-decoration: underline; text-underline-offset: 4px; }
.screen__input .todo { color: rgba(242,237,227,.24); }
.screen__input .car  { width: .6ch; height: 1.2em; background: var(--shu); margin: 0 1px; display: inline-block; }
.screen__gauges {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--sumi-line);
}
.gauge { padding: .95rem 1.1rem; border-right: 1px solid var(--sumi-line); }
.gauge:last-child { border-right: 0; }
.gauge b {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px); color: var(--washi); line-height: 1;
}
.gauge span { display: block; font-size: 10px; letter-spacing: .18em; color: rgba(242,237,227,.42); margin-top: .4rem; font-family: var(--font-mono); }
.screen__meter { height: 4px; background: var(--sumi-line); }
.screen__meter i { display: block; height: 100%; background: var(--shu); }
.screen-note { font-size: 12px; color: rgba(242,237,227,.4); margin: .9rem 0 0; letter-spacing: .02em; }
.slab .screen-note, .slab--dim .screen-note { color: var(--ink-soft); }

/* --- 23.5 Bento: cells divided by hairlines, no card borders ------------ */
.bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px; background: var(--washi-line); border: var(--rule);
}
.slab--dark .bento { background: var(--sumi-line); border-color: var(--sumi-line); }
.cell { background: var(--washi); padding: clamp(1.5rem, 2.6vw, 2.2rem); }
.slab--dim .cell { background: #F5F1E8; }
.slab--dark .cell { background: var(--sumi); }
.cell h3 { font-size: clamp(18px, 2.2vw, 22px); margin-bottom: .6rem; font-weight: 700; }
.cell h3 .term-jp { color: var(--shu); font-weight: 400; margin-left: .5rem; font-size: .82em; }
.cell p { font-size: 15.5px; color: var(--ink-mid); margin-bottom: 0; }
.slab--dark .cell p { color: rgba(242,237,227,.68); }
.cell--tall { grid-row: span 2; }
.cell--quiet { background: var(--washi-dim); }
.slab--dark .cell--quiet { background: #1B1713; }
.cell__big {
  font-family: var(--font-display); font-weight: 400; line-height: .92;
  font-size: clamp(46px, 7vw, 82px); letter-spacing: -.03em; color: var(--ink);
  display: block; margin-bottom: .8rem;
}
.slab--dark .cell__big { color: var(--washi); }
.cell__big small { font-size: .3em; color: var(--shu); margin-left: .3rem; letter-spacing: 0; }
.cell__rule { list-style: none; padding: 0; margin: .2rem 0 0; }
.cell__rule li {
  display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 1rem;
  padding: .6rem 0; border-top: var(--rule); font-size: 14.5px; color: var(--ink-mid);
  align-items: baseline; margin: 0;
}
.cell__rule li:first-child { border-top: 0; }
.cell__rule .k { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.cell__rule .v { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .06em; }
.cell__rule .v em { font-style: normal; color: var(--ink-soft); }

/* --- 23.6 Training halls: vertical tab rail + one panel ----------------- */
.halls { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.hall__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.halls__rail { border-top: var(--rule); align-self: start; }
.slab--dark .halls__rail { border-top-color: var(--sumi-line); }
.hall__tab {
  display: block; cursor: pointer; padding: 1.05rem .2rem 1.05rem 0;
  border-bottom: var(--rule); position: relative;
  transition: color .16s ease;
}
.slab--dark .hall__tab { border-bottom-color: var(--sumi-line); }
.hall__tab .jp { font-family: var(--font-display); font-size: 21px; display: block; line-height: 1.2; }
.hall__tab .en { font-size: 11px; letter-spacing: .2em; color: var(--ink-soft); display: block; margin-top: .25rem; }
.hall__tab::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; background: var(--shu); opacity: 0; transition: opacity .16s ease;
}
.hall__tab:hover { color: var(--shu-deep); }
.halls__stage { min-width: 0; }
.hall {
  display: none; border-top: 2px solid var(--ink);
  padding-top: clamp(1.4rem, 3vw, 2rem);
}
.slab--dark .hall { border-top-color: rgba(242,237,227,.5); }
.hall h3 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 400; letter-spacing: -.02em; margin-bottom: .9rem; }
.hall h3 span { color: var(--shu); font-size: .5em; letter-spacing: .18em; margin-left: .8rem; vertical-align: middle; }
.hall p { max-width: 640px; color: var(--ink-mid); }
.slab--dark .hall p { color: rgba(242,237,227,.68); }
.hall__meta { display: flex; flex-wrap: wrap; gap: .5rem 2.2rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: var(--rule); }
.slab--dark .hall__meta { border-top-color: var(--sumi-line); }
.hall__meta div { font-size: 13px; color: var(--ink-soft); }
.hall__meta b { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ink); font-weight: 400; margin-bottom: .2rem; }
.slab--dark .hall__meta b { color: var(--washi); }
#hall1:checked ~ .halls__rail label[for="hall1"]::after,
#hall2:checked ~ .halls__rail label[for="hall2"]::after,
#hall3:checked ~ .halls__rail label[for="hall3"]::after,
#hall4:checked ~ .halls__rail label[for="hall4"]::after { opacity: 1; }
#hall1:checked ~ .halls__rail label[for="hall1"],
#hall2:checked ~ .halls__rail label[for="hall2"],
#hall3:checked ~ .halls__rail label[for="hall3"],
#hall4:checked ~ .halls__rail label[for="hall4"] { color: var(--shu); }
#hall1:checked ~ .halls__stage .hall:nth-of-type(1),
#hall2:checked ~ .halls__stage .hall:nth-of-type(2),
#hall3:checked ~ .halls__stage .hall:nth-of-type(3),
#hall4:checked ~ .halls__stage .hall:nth-of-type(4) { display: block; }
.hall__radio:focus-visible ~ .halls__rail label { outline: 2px solid var(--shu); outline-offset: 3px; }

/* --- 23.7 Ledger: a ruled index, not a stat strip ----------------------- */
.ledger { border-top: 2px solid var(--ink); }
.slab--dark .ledger { border-top-color: rgba(242,237,227,.45); }
.ledger__row {
  display: grid; grid-template-columns: 190px 150px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem); align-items: baseline;
  padding: 1.5rem 0; border-bottom: var(--rule);
}
.slab--dark .ledger__row { border-bottom-color: var(--sumi-line); }
.ledger__n {
  font-family: var(--font-display); font-weight: 400; line-height: .9;
  font-size: clamp(38px, 5vw, 60px); letter-spacing: -.03em; color: var(--ink);
}
.slab--dark .ledger__n { color: var(--washi); }
.ledger__n small { font-size: .32em; color: var(--shu); margin-left: .25rem; letter-spacing: 0; }
.ledger__t { font-family: var(--font-display); font-size: 18px; line-height: 1.4; }
.ledger__t span { display: block; font-family: var(--font-body); font-size: 11.5px; letter-spacing: .16em; color: var(--shu); margin-top: .3rem; }
.ledger__d { font-size: 15px; color: var(--ink-mid); }
.slab--dark .ledger__d { color: rgba(242,237,227,.66); }

/* --- 23.8 Track: a stepped timeline on a ruled baseline ----------------- */
.track { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 2px solid var(--ink); }
.slab--dark .track { border-top-color: rgba(242,237,227,.45); }
.stop { position: relative; padding: 2.2rem clamp(1rem, 2vw, 1.8rem) 0 0; }
.stop + .stop { padding-left: clamp(1rem, 2vw, 1.8rem); border-left: var(--rule); }
.slab--dark .stop + .stop { border-left-color: var(--sumi-line); }
.stop::before {
  content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px;
  background: var(--shu); border-radius: 50%;
}
.stop + .stop::before { left: clamp(1rem, 2vw, 1.8rem); transform: translateX(-6px); }
.stop--future::before { background: var(--washi); box-shadow: inset 0 0 0 2px var(--shu); }
.slab--dark .stop--future::before { background: var(--sumi); }
.stop__when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--shu); }
.stop h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; margin: .5rem 0 .6rem; }
.stop h3 span { display: block; font-size: 12px; letter-spacing: .16em; color: var(--ink-soft); font-family: var(--font-body); margin-top: .25rem; }
.slab--dark .stop h3 span { color: rgba(242,237,227,.5); }
.stop p { font-size: 14.5px; color: var(--ink-mid); }
.slab--dark .stop p { color: rgba(242,237,227,.64); }

/* --- 23.9 Belt band, full bleed ----------------------------------------- */
.band { border-top: 1px solid var(--sumi-line); border-bottom: 1px solid var(--sumi-line); }
.band__inner { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); }
.band .rank { padding: 1.4rem clamp(.7rem, 1.4vw, 1.1rem); border-right: 1px solid var(--sumi-line); gap: .8rem; }
.band .rank:last-child { border-right: 0; }

/* --- 23.10 Sticky heading beside scrolling content ---------------------- */
.aside-head { position: sticky; top: 96px; }
.aside-head h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 400; letter-spacing: -.02em; }
.aside-head p { color: var(--ink-soft); font-size: 15px; margin-top: .8rem; }

/* --- 23.11 Responsive --------------------------------------------------- */
@media (max-width: 1000px) {
  /* Hero stacks before the screen panel gets too narrow to read. */
  .hero__g > .s1, .hero__g > .s5, .hero__g > .s6 { grid-column: auto / span 12; }
  .rail--slim { writing-mode: horizontal-tb; text-orientation: mixed; font-size: 32px; letter-spacing: .2em; }
  .hero .screen { max-width: 620px; }
  /* Two-up bento instead of a 12 column one. */
  .bento > .cell { grid-column: auto / span 6; grid-row: auto; }
  .bento > .cell.s12, .bento > .cell--tall { grid-column: auto / span 12; }
  .halls { grid-template-columns: minmax(0,1fr); }
  .halls__rail { display: none; }
  .hall { display: block; margin-top: 2rem; }          /* all four visible, no tabs */
  .hall:first-of-type { margin-top: 0; }
  .aside-head { position: static; }
  .track { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stop:nth-child(3) { border-left: 0; padding-left: 0; margin-top: 2.4rem; }
  .stop:nth-child(3)::before { left: 0; transform: none; }
  .stop:nth-child(n+3) { border-top: var(--rule); padding-top: 2.2rem; margin-top: 2.4rem; }
  .band__inner { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .band .rank:nth-child(4n) { border-right: 0; }
  .band .rank:nth-child(-n+4) { border-bottom: 1px solid var(--sumi-line); }
}
@media (max-width: 820px) {
  .g12 { grid-template-columns: minmax(0,1fr); }
  .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s12 { grid-column: auto / span 1; }
  .s1, .s2 { grid-column: auto / span 1; }
  .push1, .push2, .push3, .push4, .push5, .push6 { grid-column-start: auto; }
  .rail--slim { writing-mode: horizontal-tb; font-size: 34px; letter-spacing: .18em; }
  .bento { grid-template-columns: minmax(0,1fr); }
  .cell, .cell--tall { grid-column: auto / span 1; grid-row: auto; }
  .hd { grid-template-columns: 60px minmax(0,1fr); }
  .hd__mark { font-size: 24px; padding: 1.3rem 0 1.6rem; }
  .ledger__row { grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .ledger__n { font-size: 46px; }
  .aside-head { position: static; }
}
@media (max-width: 560px) {
  .track { grid-template-columns: minmax(0,1fr); }
  .stop, .stop + .stop { border-left: 0; padding-left: 0; }
  .stop + .stop { border-top: var(--rule); padding-top: 2.2rem; margin-top: 2.2rem; }
  .stop + .stop::before { left: 0; transform: none; }
  .band__inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .band .rank:nth-child(2n) { border-right: 0; }
  .band .rank { border-bottom: 1px solid var(--sumi-line); }
  .cell__rule li { grid-template-columns: minmax(0,1fr); gap: .2rem; }
}

/* ==========================================================================
   24. THE SCROLLING DRILL  ·  form index 6 of 7  ·  seed b5535ad7
   The page performs the drill it sells. Scrolling types 日本語を打つ one
   character at a time; each rep pins its character while the content passes.
   Sticky is the engine because animation-timeline is not Baseline.
   ========================================================================== */

/* --- 24.1 Browser surfaces -------------------------------------------------
   The parts we did not draw still carry the design. */
html { color-scheme: light; scrollbar-color: var(--shu) var(--washi-dim); scrollbar-width: thin; }
body { caret-color: var(--shu); }
::selection { background: var(--shu); color: #fff; }
a { text-underline-offset: .22em; text-decoration-thickness: from-font; }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; border-radius: 1px; }
.slab--dark :focus-visible, .hero :focus-visible, .footer :focus-visible { outline-color: var(--kin); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--washi-dim); }
::-webkit-scrollbar-thumb { background: var(--shu); border: 3px solid var(--washi-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--shu-deep); }
.tnum, .gauge b, .fig__n, .rank__kyu { font-variant-numeric: tabular-nums; }

/* --- 24.2 Contrast repair --------------------------------------------------
   Secondary text on sumi is tinted from washi, never neutral gray.
   Every value below clears 4.5:1 against #16130F. */
:root {
  --on-sumi:      #F2EDE3;   /* 16.1:1 */
  --on-sumi-2:    #C9BFAC;   /* 10.2:1  secondary */
  --on-sumi-3:    #A2988A;   /*  6.6:1  tertiary, the floor for body */
  --on-washi-2:   #574E42;   /*  7.4:1 on washi */
  --on-washi-3:   #6E6456;   /*  5.2:1 on washi */
  --hair-sumi:    #332C24;
  --hair-washi:   #D2C7B1;
}
.hero__lede, .slab--dark li,
.slab--dark .rep__body p, .slab--dark .hall p,
.slab--dark .stop p, .slab--dark .lang__en { color: var(--on-sumi-2); }
.rep--light .rep__body p, .rep--light .rep__body li { color: var(--on-washi-2); }
.hero__note, .rank__en, .screen-note, .lang__en, .crumbs, .footer, .footer a,
.pagehead p, .slab--dark .stop p, .slab--dark .hd__body p,
.slab--dark .chapter__sub { color: var(--on-sumi-3); }
.hd__body p, .chapter__sub, .stop p { color: var(--on-washi-3); }
.slab--dark .cell p, .slab--dark .entry p, .slab--dark .chapter__sub,
.slab--dark .row__body, .slab--dark .ledger__d, .slab--dark .stop p { color: var(--on-sumi-2); }
.ink-soft, .chapter__sub, .hint, .stat__l, .cell .en { color: var(--on-washi-3); }
.row__body, .entry p, .cell p, .faq__a, .prose p, .prose li, .ledger__d { color: var(--on-washi-2); }
.footer a:hover { color: var(--kin); }
.screen__bar { color: var(--on-sumi-3); }
.gauge span, .demo__label { color: var(--on-sumi-3); }
.screen__input .todo { color: #6A6155; }

/* --- 24.3 Type scale -------------------------------------------------------
   Three steps, obvious. Display is mincho at 400, body gothic at 400/700. */
.t-mega {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(46px, 8.2vw, 104px); line-height: .96; letter-spacing: -.035em;
  text-wrap: balance;
}
.t-big {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.028em;
  text-wrap: balance;
}
.t-lede { font-size: clamp(17px, 1.55vw, 21px); line-height: 1.62; max-width: 34em; }
.t-body { font-size: 16.5px; line-height: 1.72; max-width: 34em; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

/* --- 24.4 The sentence rail ------------------------------------------------
   日本語を打つ across the top of every rep. Characters already passed sit
   dimmed; the current one burns. This is the drill's state, drawn. */
.line {
  display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.1rem);
  padding: .9rem 0; border-bottom: 1px solid var(--hair-sumi);
  font-family: var(--font-display); font-size: clamp(15px, 1.7vw, 21px);
  letter-spacing: .16em; line-height: 1; flex-wrap: wrap;
}
.line--light { border-bottom-color: var(--hair-washi); }
.line b { font-weight: 400; color: #574E42; }
.line--light b { color: #8A8071; }
.line .done { color: var(--on-sumi-3); }
.line--light .done { color: var(--on-washi-3); }
.line .now { color: var(--shu); position: relative; }
.line .now::after {
  content: ""; position: absolute; left: 50%; bottom: -.9rem; translate: -50% 0;
  width: 7px; height: 7px; background: var(--shu); rotate: 45deg;
}
.line .todo { color: #4A4238; }
.line--light .todo { color: #BEB3A0; }
.line__romaji {
  margin-left: auto; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .12em; color: var(--on-sumi-3); font-variant-numeric: tabular-nums;
}
.line--light .line__romaji { color: var(--on-washi-3); }
.line__romaji i { font-style: normal; color: var(--shu); }

/* --- 24.5 A rep ------------------------------------------------------------
   Oversized character pinned left, content scrolling right. */
.rep { position: relative; padding: clamp(2.6rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem); }
.rep__grid {
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start;
  margin-top: clamp(2rem, 4vw, 3.4rem);
}
.rep__stage { position: sticky; top: clamp(88px, 12vh, 132px); align-self: start; }
.rep__glyph {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(120px, 27vw, 340px); line-height: .82; margin: 0;
  color: var(--shu); letter-spacing: 0; display: block;
  user-select: none;
}
.rep__glyph--outline { color: transparent; -webkit-text-stroke: 2px var(--shu); }
.rep__glyph--ink { color: var(--washi); }
.rep__read {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .28em;
  color: var(--on-sumi-3); margin: .4rem 0 0; text-transform: uppercase;
}
.rep--light .rep__read { color: var(--on-washi-3); }
.rep__body { min-width: 0; }
.rep__body > * + * { margin-top: 1.15rem; }
.rep__body h2 { margin-bottom: 0; }
.rep__body > h3 { margin-top: 2.6rem; }          /* more space above than below */
.rep__body > h3 + p { margin-top: .55rem; }

/* Facts set as display type inside prose, not a stat strip. */
.fig { display: block; margin: 2.2rem 0 0; }
.fig__n {
  font-family: var(--font-display); font-weight: 400; line-height: .9;
  font-size: clamp(52px, 7vw, 96px); letter-spacing: -.04em; color: var(--washi);
  display: block;
}
.rep--light .fig__n { color: var(--ink); }
.fig__n small { font-size: .26em; letter-spacing: 0; color: var(--shu); margin-left: .3rem; }
.fig__t { font-family: var(--font-display); font-size: 19px; margin-top: .5rem; }
.fig__d { font-size: 15.5px; margin-top: .4rem; max-width: 46em; }

/* --- 24.6 Hero -------------------------------------------------------------
   The drill mid-keystroke, at the scale it has in life. */
.dojo {
  position: relative; background: var(--sumi); color: var(--washi); overflow: clip;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.dojo::after {                     /* one seam of light, not a gradient wash */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 46% at 68% 34%, rgba(216,65,47,.14), transparent 70%);
}
.dojo__grid {
  position: relative; z-index: 1; display: grid; align-items: center;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.2rem, 5vw, 4rem);
}
.dojo h1 { margin: 0; }
.dojo h1 em { font-style: normal; color: var(--shu); }
.dojo__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.dojo__note { font-size: 13.5px; margin-top: 1.7rem; max-width: 42em; }

/* The pane: one giant character resolving from romaji. The authored moment. */
.pane { position: relative; }
.pane__frame {
  border: 1px solid var(--hair-sumi); background: #100E0C;
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: clamp(300px, 46vh, 460px);
}
.pane__top {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--hair-sumi);
  font-size: 11px; letter-spacing: .2em; color: var(--on-sumi-3);
}
.pane__belt { display: inline-flex; align-items: center; gap: .5rem; color: var(--on-sumi-2); }
.pane__belt i { width: 20px; height: 6px; background: #E0B62F; }
.pane__stage { display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem); position: relative; }
.pane__kanji {
  font-family: var(--font-display); font-weight: 400; line-height: 1;
  font-size: clamp(110px, 17vw, 230px); color: var(--washi); margin: 0;
  position: relative;
}
.pane__kanji span { display: inline-block; }
.pane__kanji .settling { color: var(--shu); animation: settle 6s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes settle {
  0%, 8%   { opacity: 0; filter: blur(14px); scale: 1.16; }
  26%, 74% { opacity: 1; filter: blur(0);    scale: 1; }
  92%,100% { opacity: 0; filter: blur(14px); scale: 1.16; }
}
.pane__bottom { border-top: 1px solid var(--hair-sumi); padding: .85rem 1rem; }
.pane__in {
  font-family: var(--font-mono); font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: .12em; display: flex; align-items: center; color: var(--on-sumi-2);
}
.pane__in .k { white-space: nowrap; display: inline-block; }
.pane__in .k s { text-decoration: none; color: #6B6154; }
.pane__car { width: .55ch; height: 1.15em; background: var(--shu); margin-left: 2px; animation: blink 1.05s steps(1,end) infinite; }
.pane__gauges { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair-sumi); }
.pane__gauges div { padding: .8rem 1rem; border-right: 1px solid var(--hair-sumi); }
.pane__gauges div:last-child { border-right: 0; }
.pane__gauges b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--washi); font-variant-numeric: tabular-nums; }
.pane__gauges span { display: block; font-size: 10px; letter-spacing: .18em; color: var(--on-sumi-3); margin-top: .3rem; }
.pane__cap { font-size: 12px; color: var(--on-sumi-3); margin: .85rem 0 0; }

/* Enhancement only. Chromium gets scroll-linked drift; everyone else gets the
   composition, which was never dependent on it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rep__glyph { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    @keyframes drift { from { opacity: .25; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .pane__kanji .settling, .pane__in .k, .pane__car { animation: none; }
  .pane__in .k { width: 7ch; }
  .pane__kanji .settling { opacity: 1; filter: none; scale: 1; }
}

/* --- 24.7 Belt ladder, full bleed and horizontal --------------------------- */
.belts { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); border-top: 1px solid var(--hair-sumi); }
.belt {
  padding: 1.3rem clamp(.7rem, 1.3vw, 1.1rem) 1.5rem;
  border-right: 1px solid var(--hair-sumi); display: grid; gap: .7rem; align-content: start;
}
.belt:last-child { border-right: 0; }
.belt__bar { height: 10px; }
.belt__k { font-family: var(--font-display); font-size: 16px; color: var(--washi); }
.belt__d { font-size: 12.5px; line-height: 1.5; color: var(--on-sumi-3); }

/* --- 24.8 FAQ marker: drawn, not a glyph ----------------------------------- */
.faq summary::after { content: none; }
.faq summary { padding-right: 3rem; }
.faq summary .mark { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 15px; height: 15px; }
.faq summary .mark::before, .faq summary .mark::after {
  content: ""; position: absolute; background: var(--shu); transition: rotate .22s cubic-bezier(.16,1,.3,1), opacity .22s;
}
.faq summary .mark::before { inset: 6px 0; height: 3px; }
.faq summary .mark::after  { inset: 0 6px; width: 3px; }
.faq details[open] summary .mark::after { rotate: 90deg; opacity: 0; }

/* --- 24.9 Form states ------------------------------------------------------ */
.slip input:user-invalid, .slip textarea:user-invalid {
  background: rgba(216,65,47,.07); box-shadow: inset 0 -2px 0 var(--shu-deep);
}
.slip input:user-valid, .slip textarea:user-valid { box-shadow: inset 0 -2px 0 #5F6B3E; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary:active { translate: 0 1px; }

/* --- 24.10 Responsive ------------------------------------------------------ */
@media (max-width: 1000px) {
  .dojo__grid { grid-template-columns: minmax(0,1fr); }
  .rep__grid { grid-template-columns: minmax(0,1fr); gap: 1.2rem; }
  .rep__stage { position: static; display: flex; align-items: baseline; gap: 1rem; }
  .rep__glyph { font-size: clamp(84px, 20vw, 150px); }
  .belts { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .belt:nth-child(4n) { border-right: 0; }
  .belt:nth-child(-n+4) { border-bottom: 1px solid var(--hair-sumi); }
}
@media (max-width: 620px) {
  .belts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .belt:nth-child(2n) { border-right: 0; }
  .belt { border-bottom: 1px solid var(--hair-sumi); }
  .line { font-size: 15px; gap: .45rem; }
  .line__romaji { margin-left: 0; width: 100%; }
  .pane__gauges { grid-template-columns: 1fr; }
  .pane__gauges div { border-right: 0; border-bottom: 1px solid var(--hair-sumi); }
}

/* --- 24.11 CTA band: shu at full strength is 4.45:1 against white, under the
   floor. Deepen the ground and tint the secondary text from the same hue. --- */
.cta { background: var(--shu-deep); }
.cta p { color: #F6DCD7; }
.cta .btn--ghost-light { border-color: #F0BDB4; color: #fff; }
.cta .btn--ghost-light:hover { background: #fff; color: var(--shu-deep); border-color: #fff; }
.tag--now { background: var(--shu-deep); }

/* --- 24.12 Pagehead reading, contact slip repairs ------------------------- */
.pagehead__read {
  font-family: var(--font-display); font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: .26em; color: var(--shu); margin: 1rem 0 0;
}
.pagehead__read span {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em;
  color: var(--on-sumi-3); margin-left: .9rem; text-transform: uppercase;
}
.pagehead h1 { max-width: 15em; }
.pagehead p { margin-top: 1.4rem; }

/* The slip header is a real heading now, so it must not inherit display sizing. */
.slip__head h2 {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; margin: 0; line-height: inherit;
}
.slip__head h2 .jp { font-family: var(--font-display); font-size: 19px; letter-spacing: .34em; }
.slip__head h2 .en { font-size: 11px; letter-spacing: .24em; color: var(--on-sumi-3); }

/* fieldset: no UA chrome, and children get an inset off the rule above them */
.slip__row--fs { border: 0; margin: 0; padding: 0; border-top: 1px solid var(--washi-line); }
.slip__row--fs > .slip__label { padding-top: 1.15rem; }
.slip__row--fs > .slip__cell { padding-top: 10px; }
.slip__row--fs .chips { border-top: 0; }

.notices__h {
  font-family: var(--font-body); font-size: 12px; letter-spacing: .2em;
  color: var(--on-washi-3); font-weight: 700; margin: 0 0 1rem;
}

/* --- 24.13 Measured contrast repair ---------------------------------------
   Every value below was set against the real painted ground, not the token.
   Vermillion at full strength is 3.8:1 on washi and 4.45:1 under white, so it
   splits into a darker ink for light grounds and a lighter one for sumi. --- */
:root {
  --shu-ink:  #96271A;   /* shu for small text ON washi */
  --shu-lite: #F58170;   /* shu for small text ON sumi  */
  --on-washi-2: #443C32;
  --on-washi-3: #554C40;
  --on-sumi-3:  #B8AD9D;
}
.skip-link { background: var(--shu-deep); }
.btn--primary { background: var(--shu-deep); }
.btn--primary:hover { background: #86200F; }
.brand__kana { color: var(--shu-ink); }
.footer .brand__kana, .slab--dark .brand__kana { color: var(--shu-lite); }
.line .now, .line__romaji i { color: var(--shu-lite); }
.line--light .now, .line--light .line__romaji i { color: var(--shu-ink); }
.line .now::after { background: var(--shu-lite); }
.line--light .now::after { background: var(--shu-ink); }
.rep__read, .pagehead__read span { color: var(--on-sumi-3); }
.rep--light .rep__read { color: var(--on-washi-3); }
.slip__label .en, .chip .en, .toc h2, .meta-stamp, .hint,
.stat__l, .notices__h, .stop h3 span { color: var(--on-washi-3); }
.slip__label .req, .consent .req { color: var(--shu-ink); }
.term-jp, .entry h3 .term-jp, .cell h3 .term-jp { color: var(--shu-ink); }
.slab--dark .term-jp { color: var(--shu-lite); }
.toc a::before, .prose a { color: var(--shu-ink); }
.faq summary:hover { color: var(--shu-ink); }
.nav a::after, .faq summary .mark::before, .faq summary .mark::after { background: var(--shu-deep); }
.slab--dark .stop h3 span { color: var(--on-sumi-3); }
.slab--dark a:not(.btn) { color: var(--shu-lite); }
.tag--next { color: #D8B45E; }

/* --- 24.14 Second measured pass --------------------------------------------
   Everything below failed against its real ground on the first audit. --- */
:root { --ink-soft: #554C40; }
.hall h3 span { color: var(--shu-ink); }
.slab--dark .hall h3 span { color: var(--shu-lite); }
.hall__tab .en, .hall__meta div, .hint { color: var(--on-washi-3); }
.slab--dark .hall__tab .en, .slab--dark .hall__meta div { color: var(--on-sumi-3); }
.footer__bottom { color: var(--on-sumi-3); }
.stamp { color: var(--shu-ink); border-color: rgba(150,39,26,.55); }
.demo__label, .screen__bar, .gauge span, .pane__top, .pane__gauges span,
.pane__cap, .rep__read { color: var(--on-sumi-3); }
.screen__input .todo, .pane__in .todo { color: #8A8073; }
.tag--later { color: #CFC5B4; box-shadow: inset 0 0 0 1px rgba(242,237,227,.3); }
.lang__en { color: var(--on-sumi-2); }

/* --- 25. COMMIT TO SUMI ----------------------------------------------------
   The detector flagged the washi ground as the default AI cream surface, and
   its own calibration names cream + serif display + signal red as the cluster
   this palette sat in. The tokens are unchanged; what changed is which one
   owns the page. The recorded use scene (a learner at a keyboard, alone, often
   late at night) forces dark anyway, so tonal steps in sumi carry the rhythm
   and washi becomes ink rather than ground.
   ------------------------------------------------------------------------- */
body { background: var(--sumi); color: var(--washi); }
.slab { background: var(--sumi); color: var(--washi); }
.slab--dim { background: #1E1915; }
.rep--light, .slab.rep--light { background: #1E1915; color: var(--washi); }
.masthead { background: var(--sumi); border-bottom: 1px solid var(--hair-sumi); }
.brand__name { color: var(--washi); }
.brand__kana, .footer .brand__kana { color: var(--shu-lite); }
.nav a { color: var(--on-sumi-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--washi); }
.nav a::after { background: var(--shu-lite); }
.pagehead { border-bottom: 1px solid var(--hair-sumi); }
.doc { background: #1E1915; }

/* Everything that assumed a paper ground, re-grounded. */
.rep--light .rep__body p, .rep--light .rep__body li { color: var(--on-sumi-2); }
.rep--light .rep__read, .rep--light .fig__n { color: var(--on-sumi-3); }
.rep--light .fig__n { color: var(--washi); }
.line--light { border-bottom-color: var(--hair-sumi); }
.line b, .line--light b { color: var(--on-sumi-3); }
.line--light .done, .line .done { color: var(--on-sumi-2); }
.line--light .todo, .line .todo { color: #6B6154; }
.line--light .now, .line--light .line__romaji i { color: var(--shu-lite); }
.line--light .now::after { background: var(--shu-lite); }
.line--light .line__romaji { color: var(--on-sumi-3); }
.hall__tab { border-bottom-color: var(--hair-sumi); }
.hall__tab .en, .hall__meta div { color: var(--on-sumi-3); }
.hall h3 span { color: var(--shu-lite); }
.hall p, .hall__meta b { color: var(--on-sumi-2); }
.hall__meta b { color: var(--washi); }
.hall, .halls__rail { border-top-color: rgba(242,237,227,.45); }
.hall__meta { border-top-color: var(--hair-sumi); }
.track, .ledger { border-top-color: rgba(242,237,227,.45); }
.stop + .stop { border-left-color: var(--hair-sumi); }
.stop p { color: var(--on-sumi-2); }
.stop h3 span { color: var(--on-sumi-3); }
.stop--future::before { background: var(--sumi); }
.faq, .faq details { border-color: var(--hair-sumi); }
.faq summary { color: var(--washi); }
.faq summary:hover { color: var(--shu-lite); }
.faq__a { color: var(--on-sumi-2); }
.faq__a a, .prose a, .toc a:hover { color: var(--shu-lite); }
.aside-head p { color: var(--on-sumi-3); }
.btn--ghost { border-color: var(--washi); color: var(--washi); }
.btn--ghost:hover { background: var(--washi); color: var(--sumi); }
.term-jp, .slab--dark .term-jp { color: var(--shu-lite); }
.toc { border-top-color: rgba(242,237,227,.45); }
.toc h2, .toc a { color: var(--on-sumi-3); }
.toc a { color: var(--on-sumi-2); }
.toc a::before { color: var(--shu-lite); }
.prose h2 { border-top-color: var(--hair-sumi); color: var(--washi); }
.prose p, .prose li { color: var(--on-sumi-2); }
.meta-stamp { border-bottom-color: var(--hair-sumi); color: var(--on-sumi-3); }
.callout { background: #2A241D; color: var(--on-sumi-2); }
.callout strong { color: var(--washi); }
.langs { border-color: var(--hair-sumi); background: var(--hair-sumi); }
.lang { background: #1E1915; }
.belts, .belt { border-color: var(--hair-sumi); }

/* The enquiry slip stays paper. A form is where paper belongs, and one
   deliberate light object on a dark page reads as a physical document. */
.slip { border-color: var(--washi); }
.notices { border-top-color: rgba(242,237,227,.45); }
.notice { border-bottom-color: var(--hair-sumi); }
.notice h3 { color: var(--washi); }
.notice p { color: var(--on-sumi-2); }
.notice a { color: var(--shu-lite); }
.notices__h { color: var(--on-sumi-3); }
.notice__mark { color: var(--shu-lite); }

/* --- 25.1 Browser-mode findings -------------------------------------------
   Functional UI text has an 11px floor; 10px fails on small viewports. --- */
.pane__gauges span, .gauge span, .screen__bar, .pane__top,
.slip__label .en, .chip .en { font-size: 12px; }

/* The blinking caret was a dev-tool costume simulating input where none
   exists. The drill marks its position with a static block instead. */
.pane__car, .demo__caret, .screen__input .car {
  animation: none; opacity: 1; background: var(--shu-lite);
}
.pane__in .k { max-width: 100%; }

html { scrollbar-color: var(--shu-lite) #1E1915; }
::-webkit-scrollbar-track { background: #1E1915; }
::-webkit-scrollbar-thumb { background: var(--shu); border-color: #1E1915; }

/* --- 25.2 Final browser-mode pass -----------------------------------------
   The outline glyph is decorative, aria-hidden, and drawn as a 2px vermillion
   stroke over a transparent fill; a rendering engine reads that fill as black
   and reports a contrast failure against text that has no fill to read.
   impeccable-disable low-contrast -- outline glyph is stroked, not filled */
.rep__glyph--outline { color: transparent; -webkit-text-stroke: 2px var(--shu); }

/* One authored moment: the kanji settling. The romaji below it is state, not
   motion, so the already-typed run and the remainder are simply drawn. */
.pane__in { gap: 0; }
.pane__car { width: .5ch; height: 1.15em; display: inline-block; }

/* --- 25.3 -----------------------------------------------------------------
   The outline glyph is gone. A transparent fill with a stroke is unreadable to
   any contrast checker, and filling it with the ground colour to fake the
   outline is 1:1 by construction. Solid shu and solid washi alternate instead.
   Raw vermillion is 4.2:1 on sumi, so small vermillion text takes --shu-lite;
   only display-scale glyphs keep the full-strength hue. ------------------- */
.rep__glyph--outline { color: var(--shu); -webkit-text-stroke: 0; }
.rep__glyph--ink { color: var(--washi); }
.fig__n small, .cell__big small, .ledger__n small, .stat__n small,
.stop__when, .pagehead__read, .row__term span, .demo__jp .rt,
.screen__prompt ruby rt, .lang__native, .chapter__num, .hd__mark { color: var(--shu-lite); }
.pane__in .k s { color: #8E8477; }
.line .todo, .line--light .todo { color: #8E8477; }
.screen__input .todo, .pane__in .todo { color: #8E8477; }

/* --- 25.4 Contact repairs after the ground flip ---------------------------
   The slip is the one deliberate paper object on a sumi page, so it re-grounds
   its own subtree rather than inheriting the page's ink colour. --- */
.slip { color: var(--ink); }
.slip__head { color: var(--washi); }
.slip__head h2 .en { color: var(--on-sumi-3); }
.slip__label .jp, .chip .jp { color: var(--ink); }
.consent label { color: var(--on-washi-2); }
.slip .hint { color: var(--on-washi-3); }

/* Bento cells follow the page onto sumi. */
.bento { background: var(--hair-sumi); border-color: var(--hair-sumi); }
.cell, .slab--dim .cell, .slab--dark .cell { background: #1E1915; }
.cell--quiet, .slab--dark .cell--quiet { background: #251F19; }
.cell h3 { color: var(--washi); }
.cell p, .entry p { color: var(--on-sumi-2); }
.entry { border-top-color: rgba(242,237,227,.45); }

/* A section label is not body text; drop the tracking the checker objected to
   and let size and colour carry it. */
.notices__h {
  letter-spacing: .06em; font-size: 13px; color: var(--on-sumi-3);
  text-transform: none;
}

/* --- 25.5 Tracking ---------------------------------------------------------
   Wide-tracked micro labels in Latin are part of the generated-UI cluster and
   the checker reads them as body text. Japanese keeps its tracking, where it
   is correct typography; Latin labels drop to a normal figure. --- */
.slip__label .en, .chip .en, .slip__no, .slip__head h2 .en, .pane__top,
.pane__gauges span, .gauge span, .screen__bar, .hall__tab .en, .rep__read,
.stop__when, .demo__label, .notices__h, .toc h2, .footer h2, .tag,
.pagehead__read span, .row__term span, .fig__t, .belt__d {
  letter-spacing: .04em;
}
.notices__h { letter-spacing: normal; }
.brand__kana, .line, .pagehead__read, .slip__head h2 .jp,
.rep__glyph, .lang__native { letter-spacing: .18em; }
.brand__name { letter-spacing: .1em; }

/* --- 25.6 -----------------------------------------------------------------
   The page is dark everywhere now, so ink-on-paper defaults are wrong by
   default rather than right by default. These were still keyed to .slab--dark
   and so missed .slab--dim, which the ground flip also darkened. The slip
   re-grounds its own subtree and is unaffected. ---------------------------- */
.term-jp { color: var(--shu-lite); }
.hd__body p, .chapter__sub, .stop p, .hint { color: var(--on-sumi-3); }
.slip .hint { color: var(--on-washi-3); }
.row__body, .entry p, .cell p, .faq__a, .ledger__d { color: var(--on-sumi-2); }
.ledger__row { border-bottom-color: var(--hair-sumi); }
.ledger__t, .row__term, .cell h3, .entry h3 { color: var(--washi); }
.rows, .row { border-color: var(--hair-sumi); }

/* Active tab: full-strength vermillion is 4.2:1 on sumi and this label is
   under 24px, so it takes the lighter hue like every other small mark. */
#hall1:checked ~ .halls__rail label[for="hall1"],
#hall2:checked ~ .halls__rail label[for="hall2"],
#hall3:checked ~ .halls__rail label[for="hall3"],
#hall4:checked ~ .halls__rail label[for="hall4"] { color: var(--shu-lite); }
#hall1:checked ~ .halls__rail label[for="hall1"]::after,
#hall2:checked ~ .halls__rail label[for="hall2"]::after,
#hall3:checked ~ .halls__rail label[for="hall3"]::after,
#hall4:checked ~ .halls__rail label[for="hall4"]::after { background: var(--shu-lite); }
.hall__tab:hover { color: var(--shu-lite); }

/* An earlier layer set .cell h3 .term-jp to the dark-ground ink at higher
   specificity than the flat .term-jp rule, so it survived the flip. */
.cell h3 .term-jp, .entry h3 .term-jp, .rep__body h3 .term-jp { color: var(--shu-lite); }
.slip .term-jp, .slip h3 .term-jp { color: var(--shu-ink); }

/* --- 26. THE DRILL ACTUALLY RUNS -------------------------------------------
   The rails were position:static, so the seven state changes happened 963 to
   1640px apart on a 900px viewport and no two were ever on screen together.
   The composition's entire claim was inert. Sticky pins each rail under the
   masthead for its section's full height, so the handoff to the next state
   happens in front of the reader instead of between scrolls. ------------- */
.line {
  position: sticky; top: 73px; z-index: 40;
  background: var(--sumi);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.rep--light .line, .slab--dim .line { background: #1E1915; }
.dojo .line { position: static; margin-inline: 0; padding-inline: 0; }

/* Hero: the action was at y=919 against a 900px fold, and 230px type wrapped
   the product's own word onto three lines. */
.dojo__grid { align-items: start; }
.dojo h1 { font-size: clamp(38px, 5.4vw, 74px); }
.pane__frame { min-height: clamp(240px, 32vh, 340px); }
.pane__kanji { font-size: clamp(58px, 7.6vw, 112px); white-space: nowrap; }
.pane__cap { margin-top: .7rem; }

/* The tab rail was 232px against a 278px panel. */
.halls { grid-template-columns: 150px minmax(0, 1fr); gap: clamp(1rem, 2.2vw, 2.2rem); }
.hall__tab .jp { font-size: 17px; }
.hall__tab .en { font-size: 12px; }

/* Focus ring was drawn on all four labels at once: the rule had no [for]. */
.hall__radio:focus-visible ~ .halls__rail label { outline: none; }
#hall1:focus-visible ~ .halls__rail label[for="hall1"],
#hall2:focus-visible ~ .halls__rail label[for="hall2"],
#hall3:focus-visible ~ .halls__rail label[for="hall3"],
#hall4:focus-visible ~ .halls__rail label[for="hall4"] {
  outline: 2px solid var(--kin); outline-offset: 3px;
}

@media (max-width: 820px) {
  .line { top: 0; }
}

/* --- 27. English leads, Japanese accents -----------------------------------
   The audience cannot read Japanese yet; that is why they are here. Functional
   labels lead in English, with the Japanese demoted to an accent. The brand
   marks (the drill rail, the rep glyphs, belt and mode names) keep theirs. */
.slip__label .jp { font-family: var(--font-body); font-size: 14.5px; font-weight: 700; letter-spacing: normal; }
.slip__label .en { font-size: 11.5px; letter-spacing: .04em; text-transform: none; }
.slip__head h2 .en { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--washi); }
.slip__head h2 .jp { font-size: 15px; letter-spacing: .28em; color: var(--on-sumi-3); }
.chip .jp { font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: normal; }
.chip .en { font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; }
.chip__input:checked + .chip .en { color: rgba(255,255,255,.82); }
.stamp b { font-size: 22px; }

/* --- 28. Two shapes that are not the prose armature ------------------------
   The homepage repeated one two-column row six times. These give the two
   heaviest sections their own form so the scroll has a rhythm. ---------- */

/* The input map. The product's core content, set as a real reference table. */
.map { width: 100%; border-collapse: collapse; margin: 2rem 0 1.6rem; }
.map caption { text-align: left; }
.map th {
  text-align: left; font-family: var(--font-body); font-weight: 700;
  font-size: 12px; letter-spacing: .04em; color: var(--on-sumi-3);
  padding: 0 1rem .7rem 0; border-bottom: 1px solid var(--hair-sumi);
}
.map td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--hair-sumi); vertical-align: baseline; }
.map tr:last-child td { border-bottom: 0; }
.map__r {
  font-family: var(--font-mono); font-size: 15px; color: var(--washi);
  white-space: nowrap; letter-spacing: .04em;
}
.map__r em { font-style: normal; color: var(--on-sumi-3); font-size: 13px; }
.map__k {
  font-family: var(--font-display); font-size: 30px; line-height: 1;
  color: var(--shu-lite); white-space: nowrap; width: 1%;
}
.map td:last-child { font-size: 14.5px; color: var(--on-sumi-2); }
.rep--light .map th, .rep--light .map td { border-bottom-color: var(--hair-sumi); }

/* The claim: one number carrying a whole section. */
.claim {
  display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.claim__n {
  font-family: var(--font-display); font-weight: 400; line-height: .82;
  font-size: clamp(96px, 17vw, 240px); letter-spacing: -.05em;
  color: var(--shu); margin: 0; font-variant-numeric: tabular-nums;
}
.claim__body > * + * { margin-top: 1.1rem; }

@media (max-width: 820px) {
  .claim { grid-template-columns: minmax(0,1fr); gap: .8rem; }
  .claim__n { font-size: clamp(76px, 24vw, 130px); }
  .map__k { font-size: 26px; }
  .map th:last-child, .map td:last-child { display: none; }
  .map__r { font-size: 14px; }
}

/* ==========================================================================
   29. MOBILE
   Adaptation is rethinking the surface for the context, not scaling pixels.
   Measured before writing this: 137 touch targets under 44x44, no navigation
   for 13.6 screens, the tab rail hidden with all four panels forced open, the
   sticky glyph switched off, and no safe-area or pointer handling at all.
   ========================================================================== */

/* --- 29.1 Input method, not screen size -----------------------------------
   A laptop can have a touchscreen and a tablet can have a mouse. Gate the
   hover affordances on hover capability rather than on width. */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { right: 0; }
  .chip:hover { background: var(--washi-dim); }
  .hall__tab:hover { color: var(--shu-lite); }
}
@media (hover: none) {
  /* Nothing to hover with: the active state carries the feedback instead. */
  .nav a::after { transition: none; }
  .btn--primary:active { background: #86200F; }
  .chip:active { background: var(--washi-dim); }
  .hall__tab:active { color: var(--shu-lite); }
}
@media (pointer: coarse) {
  .nav a, .footer a, .toc a { min-height: 44px; display: flex; align-items: center; }
  .footer li { margin-bottom: 0; }
  .faq summary { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .chip { min-height: 62px; }
  .hall__tab { padding-top: 1.15rem; padding-bottom: 1.15rem; }
  .consent input { width: 22px; height: 22px; }
  .btn { padding-block: 1.05rem; }
}

/* --- 29.2 Safe areas ------------------------------------------------------- */
:root { --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }
.wrap, .narrow {
  padding-left: max(var(--gutter), var(--safe-l));
  padding-right: max(var(--gutter), var(--safe-r));
}
.footer { padding-bottom: max(2.5rem, env(safe-area-inset-bottom, 0px)); }
.belts { padding-left: var(--safe-l); padding-right: var(--safe-r); }

@media (max-width: 820px) {
  /* --- 29.3 Navigation survives the scroll -------------------------------
     The masthead was static below 820px, so a 13-screen page had no wayfinding
     after the first viewport. Sticky and compact now, with the nav scrolling
     horizontally on one line rather than wrapping to two or hiding behind a
     hamburger. The drill rail pins directly beneath it. */
  .masthead { position: sticky; top: 0; z-index: 60; }
  .masthead__inner { min-height: 0; padding-block: .45rem; gap: .75rem; flex-wrap: nowrap; }
  .brand { flex: 0 0 auto; padding: .25rem 0; gap: .5rem; }
  .seal { width: 32px; height: 32px; flex-basis: 32px; font-size: 19px; }
  .brand__name { font-size: 16px; letter-spacing: .08em; }
  .brand__kana { font-size: 11px; letter-spacing: .26em; margin-top: 3px; }
  .nav {
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-end;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    gap: 1.1rem;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 15px; min-height: 44px; display: flex; align-items: center; padding-block: 0; }
  .brand { min-height: 44px; align-items: center; }
  .line { top: 57px; }

  /* Touch sizing keyed to width as well as to pointer:coarse. A viewport this
     narrow is a touch device in practice, and a 44px target costs a desktop
     browser at this width nothing. */
  .footer a, .toc a, .crumbs a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer li { margin-bottom: 0; }
  .faq summary { padding-top: 1.4rem; padding-bottom: 1.4rem; }
  .chip { min-height: 62px; }
  .btn { padding-block: 1rem; min-height: 48px; }
  .notice a { min-height: 44px; display: inline-flex; align-items: center; }

  /* --- 29.4 The signature device stays on ---------------------------------
     .rep__stage went static, so the pinned oversized kana, the one thing that
     makes this page itself, was switched off exactly where most people see it.
     It pins under the rail instead, at a size that leaves the prose room. */
  .rep__grid { gap: .9rem; }
  .rep__stage {
    position: sticky; top: 97px; z-index: 20;
    display: flex; align-items: baseline; gap: .8rem;
    padding: .45rem 0 .55rem;
    background: var(--sumi); border-bottom: 1px solid var(--hair-sumi);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .rep--light .rep__stage { background: #1E1915; }
  .rep__glyph { font-size: 46px; line-height: 1; }
  .rep__read { margin: 0; font-size: 11.5px; }

  /* --- 29.5 Tabs stay tabs ------------------------------------------------
     The rail was display:none with all four panels open: 1,998px of stacked
     near-identical blocks with no sign a choice had ever existed. The rail
     becomes a horizontal scroller and one panel shows, as on desktop. */
  .halls { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .halls__rail {
    display: flex; gap: 0; overflow-x: auto; border-top: 0;
    scrollbar-width: none; -ms-overflow-style: none;
    border-bottom: 1px solid var(--hair-sumi);
  }
  .halls__rail::-webkit-scrollbar { display: none; }
  .hall__tab {
    border-bottom: 2px solid transparent; white-space: nowrap;
    padding: .8rem 0 .7rem; margin-right: 1.3rem; flex: 0 0 auto;
  }
  .hall__tab::after { display: none; }
  .hall__tab .jp { font-size: 15px; }
  .hall__tab .en { font-size: 11.5px; }
  .hall { display: none; margin-top: 0; border-top: 0; padding-top: .5rem; }
  #hall1:checked ~ .halls__rail label[for="hall1"],
  #hall2:checked ~ .halls__rail label[for="hall2"],
  #hall3:checked ~ .halls__rail label[for="hall3"],
  #hall4:checked ~ .halls__rail label[for="hall4"] { border-bottom-color: var(--shu); }
  #hall1:checked ~ .halls__stage .hall:nth-of-type(1),
  #hall2:checked ~ .halls__stage .hall:nth-of-type(2),
  #hall3:checked ~ .halls__stage .hall:nth-of-type(3),
  #hall4:checked ~ .halls__stage .hall:nth-of-type(4) { display: block; }

  /* --- 29.6 Density ------------------------------------------------------- */
  .slab, .rep { padding-top: clamp(2.2rem, 7vw, 3rem); padding-bottom: clamp(2.4rem, 8vw, 3.4rem); }
  .dojo { padding-bottom: clamp(2.4rem, 8vw, 3.4rem); }
  .hall__meta { gap: .4rem 1.4rem; margin-top: 1.1rem; padding-top: .9rem; }
  .footer__top { gap: 1.6rem; }
  .rep__body > * + * { margin-top: .95rem; }
  .rep__body > h3 { margin-top: 1.9rem; }
  .claim { gap: .6rem; }
}

/* --- 29.7 Landscape phones: chrome must not eat the viewport -------------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .masthead { position: static; }
  .line { top: 0; }
  .rep__stage { top: 44px; }
  .slab, .rep, .dojo { padding-block: 1.6rem; }
  .pane__frame { min-height: 190px; }
}

/* --- 29.8 Small phones ----------------------------------------------------- */
@media (max-width: 360px) {
  .brand__name { font-size: 15px; }
  .nav { gap: .9rem; }
  .rep__glyph { font-size: 40px; }
  .claim__n { font-size: 72px; }
  .map__k { font-size: 24px; }
}

/* --- 29.9 Regressions the mobile pass introduced ---------------------------
   All three were caught by the browser-mode detector, not by eye.

   The seal is white on vermillion at 4.45:1, which cleared AA only while the
   glyph counted as large text (>=18.66px at weight 700). Shrinking it to 18px
   for mobile chrome dropped it under that bar and broke every page at once.
   Deepening the ground fixes it at any size instead of resting on an
   exemption, and --shu-deep already carries the primary button and CTA band. */
.seal { background: var(--shu-deep); }

/* Measure ran to ~89 characters on tablet, where the prose column goes full
   width but the type has not yet stepped down. */
/* Measure is capped once, at every width. It only binds when the column is
   actually wide enough to reach it, so a phone is unaffected and the tablet
   range stops running to 89 characters. */
.t-lede, .t-body, .rep__body p, .hall p, .fig__d, .claim__body p,
.faq__a p, .stop p, .notice p, .lang__en { max-width: 66ch; }

@media (max-width: 820px) {
  .line { top: 61px; }
  .rep__stage { top: 101px; }
}

/* --- 22. Print ----------------------------------------------------------- */
@media print {
  .masthead, .footer, .cta, .toc, .hero__actions { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .pagehead { background: #fff; color: #000; }
  .pagehead h1, .pagehead p { color: #000; }
  a { text-decoration: underline; }
}