/* ==========================================================================
   Internally Still — stylesheet

   Palette carried over from the earlier sites: rice paper 宣紙 and cinnabar
   seal red 朱砂 from the Lohan site, the dark hero with ambient character
   watermarks from the Internally Still site, celadon 青瓷 as the secondary
   accent from the T'ai Chi site.

   Contrast ratios are measured against --paper unless stated. Check them
   before changing any value.
   ========================================================================== */

:root {
  /* Ink and paper */
  --paper:      #f3efe6;
  --panel:      #ece6d9;   /* raised surface on paper */
  --ink:        #161615;   /* 15.8 : 1 */
  --ink-soft:   #3e3b36;   /*  9.7 : 1 */
  --muted:      #66625a;   /*  5.3 : 1 on paper, 4.9 : 1 on --panel */

  /* Accents */
  --red:        #9d2a22;   /*  6.6 : 1 — cinnabar, the seal colour */
  --red-bright: #d75a4d;   /* cinnabar on a dark ground */
  --celadon:    #436b5d;   /*  5.2 : 1 — safe for body text */
  --celadon-lt: #6e9080;   /*  3.1 : 1 — large text and rules only */
  --celadon-pale: #9dbcab; /* on the dark ground */

  /* Dark ground */
  --dark:       #16150f;
  --on-dark:    #f3efe6;   /* 15.9 : 1 on dark */
  --on-dark-soft: #b3ada0; /*  8.2 : 1 on dark */

  /* Lines */
  --rule: rgba(22, 22, 21, .16);   /* decorative hairlines */
  --edge: #847f74;                 /* UI borders — 3.5 : 1, clears 1.4.11 */
  --focus: #0b52c9;

  /* Type */
  --serif: Newsreader, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Traditional-character stack. Without this, Windows falls back to a
     simplified-leaning face and the glyphs render inconsistently. */
  --han: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PingFang TC",
         "Hiragino Mincho ProN", "Microsoft JhengHei", "PMingLiU", serif;

  /* Layout */
  --measure: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(3.5rem, 8vw, 6rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #131311;
    --panel:    #1e1d1a;
    --ink:      #ece7dc;
    --ink-soft: #cdc7ba;
    --muted:    #a8a297;

    --red:        #d75a4d;
    --red-bright: #e5776a;
    --celadon:    #9dbcab;
    --celadon-lt: #7f9e8e;
    --celadon-pale: #9dbcab;

    --dark:     #0d0d0b;

    --rule: rgba(236, 231, 220, .18);
    --edge: #7d776c;
    --focus: #8fb6ff;
  }
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }
img, svg { max-width: 100%; display: block; }
:is(h1, h2, h3, h4) { text-wrap: balance; font-weight: 400; }
p { text-wrap: pretty; }
[id] { scroll-margin-top: 96px; }

/* Chinese gets its own face throughout. */
.han, [lang^="zh"] { font-family: var(--han); }
.pinyin { font-family: var(--mono); font-size: .86em; letter-spacing: .02em; }

.eyebrow, .kicker {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--celadon);
  margin-bottom: 12px;
}

/* ------------------------------------------------------------- a11y ----- */

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.dark-band :focus-visible, .hero :focus-visible { outline-color: #8fb6ff; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--dark); color: var(--on-dark);
  padding: 12px 18px; font-weight: 700; font-size: 14px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

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

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

/* ------------------------------------------------------------ header ---- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: blur(14px); }
}

.nav {
  max-width: var(--measure); margin: auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wordmark .seal {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  font-family: var(--han); font-size: 22px;
  border-radius: 2px;
}
.wordmark strong {
  display: block; font-family: var(--serif);
  white-space: nowrap; font-size: 19px; font-weight: 400; letter-spacing: .01em;
}
.wordmark small {
  display: block; white-space: nowrap; font-family: var(--mono);
  color: var(--muted); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
}

.navlinks {
  display: flex; gap: 4px; align-items: center;
  list-style: none; margin: 0; padding: 0;
  font-size: 14px;
}
.navlinks > li { margin: 0; position: relative; }
.navlinks > li > a, .navitem-row > a, .navlinks .cta a { white-space: nowrap; }
.navlinks a { text-decoration: none; display: block; }
.navitem-row { display: flex; align-items: center; }

.navlinks > li > a,
.navitem-row > a {
  padding: 6px 8px;
  border-bottom: 2px solid transparent;
}
.navlinks > li > a:hover,
.navitem-row > a:hover { color: var(--red); }
.navlinks > li > a[aria-current="page"],
.navitem-row > a[aria-current="page"] {
  color: var(--red); border-bottom-color: var(--red); font-weight: 700;
}
/* The current page may be a sub-page; mark its parent too. */
.navitem.is-section > .navitem-row > a { border-bottom-color: var(--celadon-lt); }

.navlinks .cta { margin-left: 8px; }
.navlinks .cta a { padding: 10px 16px; border-bottom: 0; font-size: 13.5px; }
.navlinks .cta a[aria-current="page"] {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--red);
}

/* Chevron button: separate from the parent link, so the parent still
   navigates and the menu is usable without JavaScript. */
.subtoggle {
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-left: -4px;
  border: 0; background: none; color: var(--muted);
  cursor: pointer; padding: 0;
}
.subtoggle svg { width: 10px; height: 6px; transition: transform .18s ease; }
.subtoggle:hover { color: var(--red); }
.subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.submenu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 17rem;
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 10px 30px rgba(22, 22, 21, .14);
}
.submenu[hidden] { display: none; }
.submenu li { margin: 0; }
.submenu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 9px 12px; font-size: 14.5px;
}
.submenu a:hover { background: var(--panel); color: var(--red); }
.submenu a[aria-current="page"] { color: var(--red); font-weight: 700; background: var(--panel); }
.submenu .s-h { font-family: var(--han); color: var(--celadon); font-size: 13px; }
.submenu li:first-child a { border-bottom: 1px solid var(--rule); }

.menu-btn {
  display: none; align-items: center; gap: 8px;
  border: 1px solid var(--edge); background: none; color: inherit;
  font: inherit; font-size: 14px; padding: 8px 12px; cursor: pointer;
}
.menu-btn .bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.menu-btn .bars::before { top: -6px; }
.menu-btn .bars::after  { top:  6px; }

/* ------------------------------------------------------------ layout --- */

.wrap { max-width: var(--measure); margin: auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.narrow { max-width: 68ch; }
.section { padding: var(--section-y) 0; position: relative; overflow: hidden; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border: 1px solid var(--red); border-radius: 2px;
  font-family: var(--sans); font-weight: 700; font-size: 14.5px;
  text-decoration: none; cursor: pointer; background: none; color: inherit;
  transition: background-color .18s ease, color .18s ease;
}
.button.primary { background: var(--red); color: #fff; }
.button.primary:hover { background: color-mix(in srgb, var(--red) 85%, #000); }
.button:not(.primary):hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ------------------------------------------------- ambient watermark --- */

/* The signature device, carried over from the earlier site: one very large
   character set low-contrast behind each section. Each page has its own. */
.glyph {
  position: absolute;
  font-family: var(--han);
  line-height: .8;
  color: var(--ink);
  opacity: .05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-size: clamp(11rem, 26vw, 22rem);
  right: -.06em;
  top: 50%;
  transform: translateY(-50%);
}
.glyph.left { right: auto; left: -.06em; }
.hero .glyph, .dark-band .glyph { color: var(--on-dark); opacity: .07; }

/* -------------------------------------------------------------- hero --- */

.hero {
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
.hero .eyebrow { color: var(--celadon-pale); }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 8vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}
.hero .lead {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  color: var(--on-dark);
  max-width: 44ch;
  margin: 0 0 1rem;
}
.hero .sub { color: var(--on-dark-soft); max-width: 60ch; }
.hero .button { border-color: var(--on-dark); color: var(--on-dark); }
.hero .button.primary { background: var(--red-bright); border-color: var(--red-bright); color: #17110f; }
.hero .button:not(.primary):hover { background: rgba(255, 255, 255, .12); }

/* The three-character mark. Each art's glyph reappears as its own page's
   watermark, so the character does the navigational work. */
.tri-mark {
  display: flex; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(243, 239, 230, .22);
}
.tri-mark a { text-decoration: none; display: flex; align-items: baseline; gap: .6rem; }
.tri-mark .han { font-size: clamp(2rem, 5vw, 2.75rem); color: var(--celadon-pale); line-height: 1; }
.tri-mark .label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-dark-soft);
}
.tri-mark a:hover .han { color: var(--red-bright); }
.tri-mark a:hover .label { color: var(--on-dark); }

/* ridge line, carried over from the earlier site */
.ridge { display: block; width: 100%; height: 38px; color: var(--dark); margin-top: -1px; }

/* -------------------------------------------------------- page hero --- */

.page-hero { padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.05; margin: 0 0 1rem;
}
.page-hero .lead {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.5; color: var(--ink-soft); max-width: 46ch;
}
.crumb { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.crumb a { color: inherit; }

/* ------------------------------------------------- the lohan wordmark --- */

/* Supplied artwork, knocked out to transparent ink so it sits on the paper
   rather than in a white box. A second light-ink file is swapped in for the
   dark ground — cheaper and cleaner than filtering, which would grey the
   brush washes. */
.wordmark-hero {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 440px);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.lohan-wordmark { margin: 0; }
.lohan-wordmark picture { display: block; }
.lohan-wordmark img { width: 100%; height: auto; }
@media (max-width: 800px) {
  .wordmark-hero { grid-template-columns: 1fr; }
  .lohan-wordmark { max-width: 380px; order: -1; margin-inline: auto; }
}

/* ------------------------------------------------------------- prose --- */

h2 { font-family: var(--serif); font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; }
h3 { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin: 2.25rem 0 .6rem; }
h4 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .4rem; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose a:not(.button) { color: var(--red); text-underline-offset: 3px; }

.cols { display: grid; grid-template-columns: 12rem 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.cols .side { position: sticky; top: 6rem; align-self: start; margin: 0; }

.quiet { color: var(--muted); font-size: .94em; }
.note {
  border-left: 3px solid var(--celadon-lt);
  background: var(--panel);
  padding: 1.1rem 1.4rem;
  margin: 1.75rem 0;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

.quote {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1.35;
  border-left: 3px solid var(--red);
  padding: .3rem 0 .3rem 1.5rem;
  margin: 2rem 0;
  color: var(--ink);
}
.quote .han { display: block; font-size: 1.15em; margin-bottom: .5rem; color: var(--red); }
.quote cite {
  display: block; margin-top: .8rem; font-family: var(--mono);
  font-size: 12px; font-style: normal; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------------- grid --- */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin: 1.5rem 0; }
.cell { background: var(--paper); padding: 1.15rem 1.25rem; }
.cell .han { display: block; font-size: 2rem; line-height: 1; color: var(--red); margin-bottom: .3rem; }
.cell.is-corner .han { color: var(--celadon); }
.cell .cell-sub .han { font-size: 1.05em; color: var(--red); }
.cell .cell-sub {
  display: block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; color: var(--muted); margin-bottom: .4rem;
}
.cell p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

/* practices list */
.practices { list-style: none; padding: 0; margin: 1.5rem 0; }
.practices > li { border-top: 1px solid var(--rule); padding: 1.15rem 0; }
.practices > li:last-child { border-bottom: 1px solid var(--rule); }
.practices h3 {
  margin: 0 0 .35rem; display: flex; align-items: baseline;
  gap: .7rem; flex-wrap: wrap; font-size: 1.3rem;
}
.practices h3 .han { color: var(--red); font-size: 1.05em; }
.practices p { margin: 0; color: var(--ink-soft); }

/* lineage chain */
.chain { list-style: none; padding: 0; margin: 1.75rem 0; }
.chain li {
  position: relative; padding: 0 0 1.75rem 2.5rem;
  border-left: 1px solid var(--rule); margin-left: .5rem;
}
.chain li:last-child { border-left-color: transparent; padding-bottom: 0; }
.chain li::before {
  content: ""; position: absolute; left: -6px; top: .55rem;
  width: 11px; height: 11px; background: var(--paper);
  border: 2px solid var(--celadon-lt); border-radius: 50%;
}
.chain li.is-key::before { background: var(--red); border-color: var(--red); }
.chain .when {
  display: block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem;
}
.chain h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.chain p { margin: 0; color: var(--ink-soft); }

/* at-a-glance */
.glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0; border: 1px solid var(--rule); border-left: 3px solid var(--red);
  background: var(--panel); margin: 2rem 0;
}
.glance > div { padding: 1.1rem 1.35rem; }
.glance dt {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.glance dd { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.glance dd small { display: block; font-family: var(--sans); font-size: .82rem; color: var(--muted); margin-top: .2rem; }

/* status */
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1rem;
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status.running { color: var(--red); }
/* Not yet running — deliberately quieter than the cinnabar dot, so a visitor
   can tell at a glance which classes they can actually turn up to. */
.status.soon { color: var(--muted); }
.status.soon::before { background: none; box-shadow: inset 0 0 0 2px currentColor; }

.tag {
  display: inline-block; border: 1px solid var(--edge); border-radius: 2px;
  padding: 5px 11px; font-size: 12.5px; margin: 4px 5px 4px 0; color: var(--ink-soft);
}

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.card { border: 1px solid var(--rule); background: var(--panel); padding: 1.5rem; display: flex; flex-direction: column; }
.card .han { font-family: var(--han); font-size: 2.5rem; line-height: 1; color: var(--red); margin-bottom: 1rem; }
.card h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.card p { color: var(--ink-soft); margin: 0 0 1.25rem; }
.card .card-link { margin-top: auto; font-family: var(--mono); font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red); text-decoration: none; }
.card .card-link::after { content: " \2192"; }
.card .card-link:hover { text-decoration: underline; }

/* Dark ground. Rather than overriding each component, redefine the tokens —
   everything inside then inherits contrast-correct values automatically. */
.dark-band, .hero {
  --paper:    var(--dark);
  --panel:    #22211c;
  --ink:      #f3efe6;   /* 15.9 : 1 on --dark */
  --ink-soft: #cdc7ba;   /* 10.9 : 1 */
  --muted:    #b3ada0;   /*  8.2 : 1 */
  --red:      var(--red-bright);   /* 4.8 : 1 */
  --celadon:  var(--celadon-pale); /* 8.9 : 1 */
  --edge:     #9a948a;             /* 6.1 : 1 */
  --rule:     rgba(243, 239, 230, .18);
}
.dark-band { background: var(--dark); color: var(--on-dark); }
.dark-band .prose p, .dark-band .prose li { color: var(--on-dark-soft); }
.dark-band h2, .dark-band h3 { color: var(--on-dark); }
.dark-band .eyebrow { color: var(--celadon-pale); }
.dark-band .quote { color: var(--on-dark); border-left-color: var(--red-bright); }
.dark-band .quote .han { color: var(--red-bright); }
.dark-band .button { border-color: var(--on-dark); color: var(--on-dark); }
.dark-band .button.primary { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }
.dark-band .note { background: rgba(255, 255, 255, .06); border-left-color: var(--celadon-pale); }
.dark-band .note strong { color: var(--on-dark); }

/* ---------------------------------------------- thirteen postures wheel - */

.wheel { max-width: 460px; margin: 2rem auto; }
.wheel .ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.wheel .primary { fill: var(--red); }
.wheel .corner { fill: var(--celadon); }
.wheel .step { fill: var(--ink-soft); }
.wheel .hub { fill: var(--red); }
.wheel .spoke { stroke: var(--rule); stroke-width: 1; }
.wheel .gate, .wheel .step-g { font-family: var(--han); }

/* ------------------------------------------------------ section bar ---- */

/* Sits under the header on any page inside a discipline, so you can move
   sideways between siblings without going back up. */
.section-bar {
  position: sticky; top: 65px; z-index: 40;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.section-bar .wrap {
  display: flex; align-items: center; gap: .75rem;
  padding-top: 0; padding-bottom: 0;
}
.section-bar-title {
  font-family: var(--han); font-size: 19px; color: var(--red); flex: none;
}
.section-bar-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); flex: none;
  padding-right: .75rem; border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.section-bar .wrap { position: relative; }
.section-bar ul {
  display: flex; list-style: none; margin: 0; padding: 0;
  gap: 2px; overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.section-bar li { margin: 0; }
.section-bar a {
  display: block; padding: 12px 12px; font-size: 14px;
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; color: var(--ink-soft);
}
.section-bar a:hover { color: var(--red); }
.section-bar a[aria-current="page"] {
  color: var(--red); font-weight: 700; border-bottom-color: var(--red);
}

@media (max-width: 700px) {
  .section-bar { top: 59px; }
  /* Fade at the right edge so it reads as scrollable rather than cut off. */
  .section-bar .wrap::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 34px;
    background: linear-gradient(to right, transparent, var(--panel));
    pointer-events: none;
  }
  .section-bar .wrap { gap: .5rem; }
  .section-bar-name { display: none; }
}

/* ------------------------------------------------------------ pager ---- */

.pager { border-top: 1px solid var(--rule); padding: 2rem 0; }
.pager-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pager a {
  display: block; padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule); text-decoration: none;
}
.pager a:hover { background: var(--panel); border-color: var(--celadon-lt); }
.pager-next { text-align: right; }
.pager-dir {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .25rem;
}
.pager-label { display: block; font-family: var(--serif); font-size: 1.1rem; }
.pager a:hover .pager-label { color: var(--red); }
@media (max-width: 560px) {
  .pager-grid { grid-template-columns: 1fr; }
  .pager-next { text-align: left; }
}

/* --------------------------------------------------- sub-page nav ------ */

.subnav { margin: 2.5rem 0 0; }
.subnav > .eyebrow { margin-bottom: 1rem; }
.subnav ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
.subnav li { margin: 0; }
.subnav a {
  display: block; background: var(--paper); padding: 1.15rem 1.25rem;
  text-decoration: none; height: 100%;
}
.subnav a:hover { background: var(--panel); }
.subnav .t { display: block; font-family: var(--serif); font-size: 1.15rem; margin-bottom: .2rem; }
.subnav .t .han { color: var(--red); font-size: .9em; margin-left: .35rem; }
.subnav .d { display: block; font-size: .9rem; color: var(--muted); }
.subnav a:hover .t { color: var(--red); }

/* Timetable — the single source of truth for when things run. */
.timetable { width: 100%; border-collapse: collapse; margin: 2rem 0; text-align: left; }
.timetable th, .timetable td { padding: 1rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.timetable thead th {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  border-bottom: 1px solid var(--edge);
}
.timetable td:first-child { font-family: var(--serif); font-size: 1.15rem; }
.timetable td:first-child .han { color: var(--red); font-size: .85em; margin-left: .3rem; }
.timetable .freq {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red);
}
.timetable td small { display: block; color: var(--muted); font-size: .85rem; margin-top: .2rem; }
@media (max-width: 700px) {
  .timetable, .timetable tbody, .timetable tr, .timetable td { display: block; width: 100%; }
  .timetable thead { display: none; }
  .timetable tr { border-bottom: 1px solid var(--edge); padding: .75rem 0 1rem; }
  .timetable td:first-child { margin-bottom: .2rem; }
  .timetable td { border: 0; padding: .2rem 0; }
}

/* -------------------------------------------------------------- form --- */

.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: 13.5px; font-weight: 700; }
.field .hint { font-size: 13px; color: var(--muted); }
.form input, .form textarea, .form select {
  width: 100%; padding: 12px 13px; border: 1px solid var(--edge);
  background: var(--paper); color: var(--ink); font: inherit; border-radius: 2px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form button { justify-self: start; }

/* ------------------------------------------------------------ footer --- */

.site-footer { border-top: 1px solid var(--rule); padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .7fr .7fr; gap: 2.25rem; }
.site-footer h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.site-footer p, .site-footer a { color: var(--muted); font-size: 14.5px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .45rem 0; }
.site-footer a:hover { color: var(--red); }
.colophon {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--muted);
  display: flex; justify-content: space-between; gap: .8rem 1.5rem; flex-wrap: wrap;
}

/* ------------------------------------------- reduced widths: no boxes --- */

/* At full width the boxed grids are a useful device. Stacked into a single
   column they become a run of grey blocks, which reads as clutter rather than
   structure — so below this width they resolve into a plain hairline list. */
@media (max-width: 760px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
  }
  .cell {
    background: none;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .cell .han { display: inline-block; margin: 0 .5rem 0 0; vertical-align: -.15em; }
  .cell .cell-sub .han { font-size: 1.05em; color: var(--red); }
.cell .cell-sub { display: inline; }

  .facts { grid-template-columns: 1fr; gap: 0; }
  .fact { background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 1rem 0; }

  .glance {
    grid-template-columns: 1fr; background: none;
    border: 0; border-left: 3px solid var(--red);
  }
  .glance > div { padding: .8rem 0 .8rem 1rem; }

  /* Notes keep their emphasis but lose the filled block. */
  .note { background: none; padding: .6rem 0 .6rem 1.1rem; }

  .subnav ul { grid-template-columns: 1fr; gap: 0; background: none; border: 0;
    border-top: 1px solid var(--rule); }
  .subnav a { background: none; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .subnav a:hover { background: none; }
}

/* ------------------------------------------------------------ mobile --- */

@media (max-width: 1140px) {
  .wordmark small { display: none; }
}

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .cols .side { position: static; }
}

@media (max-width: 1080px) {
  .navlinks {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 64px); overflow-y: auto;
    background: var(--paper); padding: .5rem var(--gutter) 1.5rem;
    flex-direction: column; align-items: stretch; gap: 0;
    border-bottom: 1px solid var(--edge); font-size: 16px;
  }
  .navlinks[data-open="true"] { display: flex; }
  .navlinks > li { border-bottom: 1px solid var(--rule); }
  .navlinks > li > a, .navitem-row > a { padding: 13px 0; flex: 1; }
  .navitem-row { justify-content: space-between; }
  .subtoggle { width: 44px; height: 44px; margin: 0; }
  .subtoggle svg { width: 13px; height: 8px; }

  /* On mobile the submenu is an inline accordion, not an overlay. */
  .submenu {
    position: static; min-width: 0; border: 0; box-shadow: none;
    background: none; padding: 0 0 .5rem .9rem;
    border-left: 2px solid var(--celadon-lt); margin: 0 0 .5rem;
  }
  .submenu a { padding: 10px 0; font-size: 15px; }
  .submenu a:hover, .submenu a[aria-current="page"] { background: none; }
  .submenu li:first-child a { border-bottom: 0; }

  .navlinks .cta { border-bottom: 0; margin: 1rem 0 0; }
  .navlinks .cta a { text-align: center; }
  .menu-btn { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr; }
  .tri-mark { flex-wrap: wrap; gap: 1rem 2rem; }
}

@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .colophon { flex-direction: column; }
  .chain li { padding-left: 1.6rem; }
}

/* ------------------------------------------------------------- print --- */

@media print {
  .site-header, .menu-btn, .skip-link, .actions, .glyph, .ridge, .tri-mark,
  .section-bar, .pager, .subnav { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .dark-band { background: #fff !important; color: #000 !important; }
  .hero *, .dark-band * { color: #000 !important; }
  .section { padding: 1rem 0; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}