/* Bahau Local Chronicles v2: "signboard & timetable" */

:root {
  --ground: #F4F3EF;
  --surface: #FFFFFF;
  --sunk: #EBEAE5;
  --ink: #1B1B19;
  --ink-2: #3C3B37;
  --muted: #5E5D58;
  --rule: #D9D7D0;
  --rule-strong: #1B1B19;
  --accent: #A8321E;
  --audio: #1F4F43;
  --audio-ink: #FFFFFF;
  --bar: #1B1B19;
  --bar-ink: #F4F3EF;
  --bar-accent: #F4C9A8;
  --plaque: #A8321E;
  --plaque-ink: #FBF7F0;
  --photo-bg: #121211;
  --shadow: 0 1.5rem 3rem -1rem rgba(20, 18, 15, .28);

  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-read: "Source Serif 4", Georgia, serif;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-han: "Noto Serif SC", "Songti SC", serif;
  --read-size: 1.2rem;
  --read-leading: 1.75;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 4.5rem;
  --player-h: 0px;
  color-scheme: light;
}

html[data-lang="zh"] {
  --font-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-read: "Noto Serif SC", "Songti SC", serif;
  --font-display: "Noto Serif SC", "Songti SC", serif;
  --read-size: 1.15rem;
  --read-leading: 1.95;
}

html[data-lang="ta"] {
  --font-ui: "Noto Sans Tamil", "IBM Plex Sans", sans-serif;
  --font-read: "Noto Serif Tamil", serif;
  --font-display: "Noto Serif Tamil", serif;
  --read-size: 1.08rem;
  --read-leading: 1.9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #141413; --surface: #1C1B19; --sunk: #232220; --ink: #ECEAE4; --ink-2: #D2CFC7; --muted: #A9A69D;
    --rule: #34332F; --rule-strong: #ECEAE4; --accent: #EE8A70; --audio: #2F7A65; --audio-ink: #FFFFFF;
    --bar: #23221F; --bar-ink: #ECEAE4; --bar-accent: #F4C9A8; --plaque: #9E2F1C; --plaque-ink: #FBF1E6;
    --photo-bg: #0B0B0A; --shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, .6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #141413; --surface: #1C1B19; --sunk: #232220; --ink: #ECEAE4; --ink-2: #D2CFC7; --muted: #A9A69D;
  --rule: #34332F; --rule-strong: #ECEAE4; --accent: #EE8A70; --audio: #2F7A65; --audio-ink: #FFFFFF;
  --bar: #23221F; --bar-ink: #ECEAE4; --bar-accent: #F4C9A8; --plaque: #9E2F1C; --plaque-ink: #FBF1E6;
  --photo-bg: #0B0B0A; --shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, .6); color-scheme: dark;
}

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

html { font-size: calc(100% * var(--text-scale, 1)); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-ui); line-height: 1.5; padding-bottom: var(--player-h); transition: padding-bottom .3s var(--ease); }
img { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.fill { fill: currentColor; stroke: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.mono, .num { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; }
.num { color: var(--accent); }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .75rem 1rem; background: var(--ink); color: var(--ground); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.icon-btn { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--ink); }
.icon-btn:hover { color: var(--accent); }


.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .4rem 1.25rem; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font-size: .95rem; font-weight: 500; text-decoration: none; transition: background .2s, color .2s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--ink); color: var(--ground); font-weight: 600; }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--line:hover { background: var(--sunk); }
.btn--quiet { border-color: transparent; padding-inline: .5rem; }
.btn--quiet:hover { color: var(--accent); }
.btn--audio { background: var(--audio); border-color: var(--audio); color: var(--audio-ink); font-weight: 600; }
.btn--audio:hover { filter: brightness(1.12); }
.btn-kicker { display: block; font-size: .75rem; color: var(--muted); }
.btn[data-continue] { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; line-height: 1.35; font-weight: 600; }
.link-strong { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: .1rem; }

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

.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule-strong); }
.header-inner { display: flex; align-items: center; gap: 1rem 2rem; min-height: var(--header-h); }
.menu-btn { display: none; margin-left: -.6rem; }
.brand { display: flex; flex: none; align-items: center; gap: .75rem; text-decoration: none; min-width: 0; }
/* The name as a small red signboard: click it to go home. */
.brand-text { display: flex; flex-direction: column; min-width: 0; padding: .4rem .9rem .45rem; background: var(--plaque); color: var(--plaque-ink); transition: filter .2s; }
.brand:hover .brand-text, .brand:active .brand-text { filter: brightness(1.1); }
/* On the home page the signboard is the title; don't repeat it in the header
   (on phones it slides in once the signboard has scrolled away). */
@media (min-width: 56.01rem) {
  /* The hidden signboard takes no room, so the menu lines up with the content
     column in every language (the script sets the exact offset). */
  .page-home .header-inner { position: relative; }
  .page-home .brand { position: absolute; left: clamp(1rem, 4vw, 2.5rem); }
  .page-home.nav-ready .main-nav { transition: margin-left .35s var(--ease); }
  .page-home .brand { opacity: 0; visibility: hidden; transform: translateY(-.4rem); transition: opacity .3s ease, transform .35s var(--ease), visibility .3s; }
  .page-home.past-hero .brand { opacity: 1; visibility: visible; transform: none; }
}
.brand-name { font: 600 1.15rem/1.2 var(--font-display); white-space: nowrap; }
.brand-sub { font-family: var(--font-mono); font-size: .7rem; color: color-mix(in srgb, var(--plaque-ink) 85%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-nav { display: flex; gap: 1.5rem; }
.main-nav a { position: relative; text-decoration: none; padding: .4rem 0; font-size: .95rem; white-space: nowrap; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { font-weight: 600; }
.header-tools { margin-left: auto; display: flex; flex: 1 1 auto; justify-content: flex-end; min-width: 0; align-items: center; gap: .6rem; }
.search-trigger { display: inline-flex; flex: 0 1 15rem; align-items: center; gap: .6rem; height: 2.75rem; min-width: 2.75rem; padding: 0 .9rem; border: 1px solid var(--rule); background: var(--surface); color: var(--muted); font-size: .88rem; text-align: left; }
.search-trigger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-trigger:hover { border-color: var(--rule-strong); }
.lang-switch { display: flex; border: 1px solid var(--rule-strong); }
.lang-switch a { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 .75rem; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.lang-switch a + a { border-left: 1px solid var(--rule-strong); }
.lang-switch a:hover { background: var(--sunk); }
.lang-switch a[aria-current="page"] { background: var(--ink); color: var(--ground); }
.lang-switch--full { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.settings-wrap { position: relative; }
.theme-btn { border: 1px solid var(--rule-strong); }
.theme-btn:hover { background: var(--ink); color: var(--ground); }
.aa-btn { height: 2.75rem; min-width: 2.75rem; padding: 0 .7rem; border: 1px solid var(--rule-strong); background: transparent; font: 1.05rem/1 var(--font-display); }
.aa-btn[aria-expanded="true"] { background: var(--ink); color: var(--ground); }
.settings { position: absolute; right: 0; top: calc(100% + .6rem); z-index: 50; width: 21rem; padding: 1.1rem; background: var(--surface); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); display: grid; gap: 1rem; transform-origin: top right; }
.settings:not([hidden]) { animation: pop .22s var(--ease); }
.settings-row { display: grid; gap: .4rem; }
.settings-label { font-size: .85rem; font-weight: 600; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); }
.seg button { min-height: 2.75rem; border: 0; background: transparent; font-size: .85rem; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--sunk); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.size-a { font-family: var(--font-display) !important; font-size: 1.05rem !important; }
.size-a--s { font-size: .85rem !important; }
.size-a--l { font-size: 1.35rem !important; }

/* ---------------------------------------------------------------- drawer, dialogs */

dialog { color: var(--ink); }
.drawer { margin: 0; width: min(26rem, 100%); max-width: 100%; height: 100%; max-height: 100%; padding: 0; border: 0; border-right: 1px solid var(--rule-strong); background: var(--ground); overflow-y: auto; }
.drawer::backdrop { background: rgba(10, 10, 9, .5); }
.drawer[open] { animation: slide-in .32s var(--ease); }
.drawer-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: .5rem .5rem .5rem 1.25rem; background: var(--ground); border-bottom: 1px solid var(--rule-strong); }
.drawer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); }
.drawer-links a { padding: .5rem 0; font-weight: 600; text-decoration: none; }
.drawer-settings { padding: 1rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--rule-strong); }
.drawer-settings .settings { position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; animation: none; }
.drawer-contents { padding: 1rem 1.25rem 2rem; }
.drawer-contents h2 { margin: 0 0 .5rem; font: 600 1.4rem var(--font-display); }
.drawer-part { border-top: 1px solid var(--rule); }
.drawer-part:last-child { border-bottom: 1px solid var(--rule); }
.drawer-part summary { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: .5rem; min-height: 3rem; cursor: pointer; list-style: none; font-weight: 500; }
.drawer-part summary::-webkit-details-marker { display: none; }
.drawer-part summary svg { transition: transform .25s var(--ease); }
.drawer-part[open] summary svg { transform: rotate(180deg); }
.drawer-part ol { list-style: none; margin: 0 0 .75rem; padding: 0 0 0 4.5rem; }
.drawer-part li a { display: flex; gap: .6rem; padding: .45rem 0; font-size: .92rem; text-decoration: none; color: var(--ink-2); }
.drawer-part li a[aria-current="page"] { margin-left: -.6rem; padding-inline: .6rem; background: var(--bar); color: var(--bar-ink); }
.drawer-part li a[aria-current="page"] .num { color: var(--bar-accent); }

.search-dialog { width: min(46rem, calc(100% - 2rem)); max-height: min(80svh, 46rem); margin: 8svh auto auto; padding: 0; border: 1px solid var(--rule-strong); background: var(--ground); box-shadow: var(--shadow); overflow: hidden; display: none; }
.search-dialog[open] { display: flex; flex-direction: column; animation: pop .22s var(--ease); }
.search-dialog::backdrop { background: rgba(10, 10, 9, .55); backdrop-filter: blur(2px); }
.search-form { display: flex; align-items: center; gap: .5rem; padding: .5rem; border-bottom: 1px solid var(--rule-strong); }
.search-field { flex: 1; display: flex; align-items: center; gap: .6rem; padding: 0 .75rem; color: var(--muted); }
.search-field input { flex: 1; min-height: 3rem; border: 0; outline: 0; background: transparent; font-size: 1.1rem; color: var(--ink); }
.search-status { margin: 0; padding: .75rem 1.25rem; font-size: .85rem; color: var(--muted); }
.search-results { list-style: none; margin: 0; padding: 0 .5rem .75rem; overflow-y: auto; }
.search-results a { display: grid; grid-template-columns: 3rem 1fr; gap: .2rem .5rem; padding: .75rem; text-decoration: none; border-top: 1px solid var(--rule); }
.search-results a:hover, .search-results a:focus-visible { background: var(--surface); }
.search-results strong { font: 600 1.05rem/1.4 var(--font-display); }
.search-results .snip { grid-column: 2; font-size: .88rem; color: var(--ink-2); line-height: 1.6; }
mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; padding: 0 .1em; }

.lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(10, 10, 9, .96); color: #F4F3EF; overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; animation: fade .25s ease; }
.lightbox::backdrop { background: transparent; }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 3.5rem 3.75rem 3rem; max-width: 100%; }
.lb-img { max-width: 100%; max-height: calc(100svh - 10rem); object-fit: contain; touch-action: pan-y; }
/* The viewer is dark for photographs; images with see-through areas get a
   paper mat so their labels stay readable. */
.lb-img.has-alpha { background: #F4F3EF; padding: clamp(.5rem, 2vw, 1.25rem); }
.lightbox[open] .lb-img { animation: lb-in .4s var(--ease); }
.lb-cap { max-width: 46rem; font-size: .92rem; line-height: 1.6; text-align: center; color: #E3E0D8; }
.lb-close, .lb-prev, .lb-next { position: absolute; color: #F4F3EF; }
.lb-close { top: .75rem; right: .75rem; }
.lb-prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .5rem; top: 50%; transform: translateY(-50%); }
.lb-close svg, .lb-prev svg, .lb-next svg { width: 1.6rem; height: 1.6rem; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: var(--bar-accent); }
.lb-count { position: absolute; top: 1.4rem; left: 1.25rem; margin: 0; font: .8rem var(--font-mono); color: #BDB9AF; }

/* ---------------------------------------------------------------- home */

.hero { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.hero-plaque { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem 0 1.5rem; background: var(--plaque); color: var(--plaque-ink); min-height: 34rem; }
.vertical-title { margin: 0; writing-mode: vertical-rl; font: 900 5.6rem/1 var(--font-han); letter-spacing: .14em; }
.vertical-title span { display: inline-block; }
.hero-plaque--en .vertical-title, .hero-plaque--bm .vertical-title { font: 600 3.3rem/1.15 var(--font-display); letter-spacing: .01em; }
.hero-plaque--ta .vertical-title { font: 600 2.5rem/1.35 var(--font-display); letter-spacing: 0; }
.lang-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lang-choice-label { margin-right: .35rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.lang-choice a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--rule-strong); font-size: .95rem; text-decoration: none; transition: background .2s, color .2s; }
.lang-choice a:hover { background: var(--sunk); }
.lang-choice a[aria-current="page"] { background: var(--ink); color: var(--ground); font-weight: 600; }
.lc-short { display: none; }
.lang-choice a[lang="zh-Hans"] { font-family: "Noto Serif SC", "Noto Sans SC", serif; }
.lang-choice a[lang="ta"] { font-family: "Noto Sans Tamil", var(--font-ui); }

.hero-plaque-foot { writing-mode: vertical-rl; font: .72rem var(--font-mono); letter-spacing: .25em; opacity: .85; }
.hero-main { display: grid; gap: 1.75rem; align-content: start; min-width: 0; container-type: inline-size; }
.cover { margin: 0; }
/* Hero slideshow: one fixed 16:9 frame on every screen; each photo sits whole
   inside it on the dark photo mat, so the page below never moves. */
.slides { position: relative; aspect-ratio: 16 / 9; background: var(--photo-bg); overflow: hidden; }
.slide { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s ease; }
.slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.slide-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .5rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule-strong); }
.slide-controls { display: flex; gap: .3rem; }
.slide-btn { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--rule); background: transparent; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.slide-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.slide-btn svg { width: 1rem; height: 1rem; }
/* Two lines reserved, so a longer caption never pushes the page down. */
.slide-caption { margin: 0; min-height: 3.2em; padding-top: .45rem; font-size: .9rem; line-height: 1.6; }
.slide-link { margin-left: .4rem; white-space: nowrap; font-family: var(--font-mono); font-size: .78rem; color: var(--accent); }
.slide-count { padding-top: .6rem; color: var(--muted); white-space: nowrap; }
/* Tagline left, buttons right, in one row; the tagline wraps instead of the buttons. */
.hero-copy { display: grid; grid-template-columns: minmax(14rem, 1fr) auto; align-items: end; gap: 1.5rem 2.5rem; }
.hero-alt-title { margin: 0; font: italic 1.35rem var(--font-display); font-family: "Source Serif 4", Georgia, serif; color: var(--ink-2); }
.hero-lede { margin: .9rem 0 0; max-width: 38em; font: 1.05rem/1.8 var(--font-read); color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: nowrap; gap: .75rem; align-items: center; }
[data-continue-title] { display: block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Too narrow for one row (smaller laptops, tablets, phones): buttons go under the tagline. */
@container (max-width: 56rem) {
  .hero-copy { grid-template-columns: minmax(0, 1fr); }
  .hero-actions { flex-wrap: wrap; }
}

.contents { background: var(--surface); border-block: 1px solid var(--rule-strong); padding-block: clamp(2.5rem, 5vw, 4rem); }
.block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .75rem 2rem; margin-bottom: 1.75rem; }
.block-head h2 { margin: 0; font: 600 clamp(2rem, 4vw, 2.6rem)/1.2 var(--font-display); }
.block-head .mono { margin: 0; color: var(--muted); }
/* Parts as cards in a two-column grid, in book order. Cards in the same row
   share one height, so their tops and bottoms line up. */
.toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; align-items: stretch; }
.toc-part { display: flex; flex-direction: column; background: var(--ground); border: 1px solid var(--rule); }
.toc-part ol { flex: 1; padding-bottom: .5rem; }
.toc-part li:last-child a { border-bottom: 0; }
@media (max-width: 44rem) { .toc { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.toc-part h3 { display: flex; align-items: center; gap: 1rem; margin: 0; padding: .7rem 1rem; background: var(--bar); color: var(--bar-ink); font: 600 1.05rem var(--font-display); }
.toc-part h3 .num { color: var(--bar-accent); font-weight: 500; }
.toc-part ol { list-style: none; margin: 0; padding: 0; }
.toc-part li a { display: grid; grid-template-columns: 3rem 1fr; gap: .5rem; align-items: baseline; padding: .7rem .5rem; border-bottom: 1px solid var(--rule); text-decoration: none; font: 1rem/1.5 var(--font-read); transition: background .2s, padding .25s var(--ease); }
.toc-part li a:hover { background: var(--sunk); padding-left: .9rem; }
.toc-part li a:hover .toc-title { color: var(--accent); }
.toc-part li a.is-last-read { box-shadow: inset 3px 0 0 var(--accent); }

.photo-strip { padding-block: clamp(2.5rem, 5vw, 4rem); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1.5rem; }
.tiles a { display: flex; flex-direction: column; gap: .55rem; text-decoration: none; }
.tile-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sunk); }
.tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.tiles a:hover .tile-img img { transform: scale(1.05); }
.tile-cap { font: .98rem/1.55 var(--font-read); }

/* ---------------------------------------------------------------- section page */

.section-layout { display: grid; grid-template-columns: 17rem minmax(0, 46rem); gap: clamp(2rem, 4vw, 4rem); padding-block: 2rem 4rem; }
.part-nav { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; max-height: calc(100svh - var(--header-h) - 3rem); overflow-y: auto; }
.part-nav .mono { margin: 0; color: var(--muted); }
.part-name { margin: .3rem 0 .9rem; font: 600 1.2rem/1.35 var(--font-display); }
.part-nav ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.part-nav a { display: grid; grid-template-columns: 2.4rem 1fr; gap: .3rem; padding: .55rem .5rem; border-bottom: 1px solid var(--rule); font-size: .88rem; line-height: 1.45; text-decoration: none; color: var(--ink-2); transition: background .2s; }
.part-nav a:hover { background: var(--sunk); }
.part-nav a[aria-current="page"] { background: var(--bar); color: var(--bar-ink); }
.part-nav a[aria-current="page"] .num { color: var(--bar-accent); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; font-size: .85rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.section-head { position: relative; display: flex; gap: 1.5rem; align-items: flex-start; padding-top: 1.25rem; }
.section-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rule-strong); transform-origin: left; }
.section-num { font: 400 4.2rem/.85 var(--font-mono); color: var(--accent); letter-spacing: -.03em; }
.section-head h1 { margin: 0; font: 600 clamp(1.9rem, 3.6vw, 2.7rem)/1.18 var(--font-display); }
.section-alt { margin: .4rem 0 0; font-size: 1.05rem; color: var(--muted); }
.section-alt:lang(zh-Hans) { font-family: var(--font-han); }
.section-alt:lang(en) { font-family: "Source Serif 4", Georgia, serif; font-style: italic; }
.section-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.75rem 0 2.25rem; }
.section-actions .btn--line { border-color: var(--rule); font-size: .9rem; }
.section-actions .btn { white-space: nowrap; }
/* Tamil labels run long: tighten the buttons so they share one row. */
html[data-lang="ta"] .section-actions { gap: .5rem; }
html[data-lang="ta"] .section-actions .btn { gap: .45rem; padding-inline: .8rem; font-size: .84rem; }
/* In a narrow Tamil column, "copy link" becomes an icon; its label shows briefly once copied. */
.section { container-type: inline-size; }
@container (max-width: 45.5rem) {
  html[data-lang="ta"] [data-copy-link]:not(.is-copied) { padding-inline: .9rem; }
  html[data-lang="ta"] [data-copy-link]:not(.is-copied) [data-copy-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.prose { font-family: var(--font-read); font-size: var(--read-size); line-height: var(--read-leading); overflow-wrap: break-word; }
.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--accent); word-break: break-all; }
.prose h3 { margin: 2em 0 .8em; font: 600 1.35em/1.35 var(--font-display); }
.prose .consolidated-part + .consolidated-part { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.prose .consolidated-part h3 { margin-top: 0; }
.prose .credit-list { margin: 0 0 2rem; }
.prose .credit-line { margin: 0; padding: .35rem 0; border-bottom: 1px solid var(--rule); font-family: var(--font-ui); font-size: .95rem; line-height: 1.6; }

.fig { margin: 2.25rem 0; }
/* Images sit on the page's own background, so see-through areas (maps,
   cut-outs, tilted scans) follow light or dark mode. */
.fig-media { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; overflow: hidden; }
.fig-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fig figcaption { padding: .65rem 0 .2rem; border-bottom: 1px solid var(--rule); font: .88rem/1.6 var(--font-ui); color: var(--ink-2); }
.fig--small { max-width: 17rem; }
/* The printed book's cover in the acknowledgements: a modest, centred thumbnail. */
.fig--book { max-width: 15rem; margin-inline: auto; }
.fig--book figcaption { text-align: center; }
.ph-media--whole img { object-fit: contain; }
.fig--portrait { max-width: 30rem; margin-inline: auto; }
.fig-run { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; margin: 2.25rem 0; align-items: start; }
.fig-run[data-count="2"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.fig-run .fig { margin: 0; max-width: none; }
.fig:target .fig-media { outline: 3px solid var(--accent); outline-offset: 4px; }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-strong); }
.pager-card { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); background: var(--surface); text-decoration: none; transition: border-color .2s, transform .25s var(--ease); }
.pager-card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.pager-card--next { text-align: right; }
.pager-card .mono { color: var(--muted); }
.pager-title { font: 1.05rem/1.4 var(--font-display); }

/* ---------------------------------------------------------------- player */

.player { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; background: var(--bar); color: var(--bar-ink); border-top: 3px solid var(--audio); transform: translateY(110%); transition: transform .35s var(--ease); }
.player.is-shown { transform: none; }
.player-inner { display: flex; align-items: center; gap: .75rem 1rem; padding-block: .6rem; }
.player .icon-btn { color: var(--bar-ink); }
.player-toggle { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--bar-ink); color: var(--bar); flex: none; }
.player-info { flex: 1; min-width: 0; display: grid; gap: .3rem; }
.player-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.player-line .mono { white-space: nowrap; }
.player-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-seek { width: 100%; height: 1.25rem; margin: 0; accent-color: var(--bar-accent); background: transparent; }
.player-speed { min-width: 3.4rem; height: 2.75rem; border: 1px solid color-mix(in srgb, var(--bar-ink) 35%, transparent); background: transparent; color: var(--bar-ink); font: .9rem var(--font-mono); }
.player-note { font-size: .75rem; color: color-mix(in srgb, var(--bar-ink) 75%, transparent); max-width: 8rem; line-height: 1.3; }
.player-toggle.is-blocked { animation: nudge 1.4s var(--ease) infinite; }

/* ---------------------------------------------------------------- photos, audiobook, legal */

.page-intro { padding-block: clamp(2rem, 4vw, 3rem) 1.5rem; }
.page-intro h1 { margin: 0 0 .5rem; font: 600 clamp(2.2rem, 4vw, 3rem)/1.15 var(--font-display); }
.page-intro p { margin: 0 0 1.5rem; max-width: 44em; color: var(--ink-2); font: 1.02rem/1.75 var(--font-read); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip { min-height: 2.5rem; padding: 0 .9rem; border: 1px solid var(--rule); background: var(--surface); font-size: .88rem; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.check { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: .9rem; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.photo-grid { list-style: none; margin: 0 0 4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 1.5rem 1.25rem; }
.ph[hidden] { display: none; }
.ph-media { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--sunk); overflow: hidden; cursor: zoom-in; }
.ph-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ph-media:hover img { transform: scale(1.05); }
.ph-meta { display: grid; grid-template-columns: 2.4rem 1fr; gap: .3rem; padding-top: .5rem; font-size: .85rem; line-height: 1.5; text-decoration: none; color: var(--ink-2); }
.ph-meta span:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ph-meta:hover span:last-child { color: var(--accent); text-decoration: underline; }

.tracks { list-style: none; margin: 0 0 4rem; padding: 0; border-top: 1px solid var(--rule-strong); max-width: 52rem; }
.tracks li { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); }
.track { flex: 1; display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .5rem; min-height: 3.25rem; padding: .5rem; border: 0; background: transparent; text-align: left; font: 1rem/1.45 var(--font-read); transition: background .2s; }
.track:hover { background: var(--sunk); }
.track-state { color: var(--muted); }
.track.is-active { background: color-mix(in srgb, var(--audio) 16%, var(--ground)); box-shadow: inset 4px 0 0 var(--audio); font-weight: 600; }
.track.is-active .track-state { color: var(--audio); }
:root[data-theme="dark"] .track.is-active .track-state { color: #7CC8AF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .track.is-active .track-state { color: #7CC8AF; } }
.track-read { display: flex; align-items: center; padding: 0 1rem; font-size: .85rem; color: var(--muted); }
.audiobook-controls { display: flex; gap: .75rem; }

.legal { max-width: 52rem; padding-block: 2.5rem 4rem; font: 1.02rem/1.8 var(--font-read); }
.legal .section-kicker { font: .8rem var(--font-mono); color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.legal h1 { font: 600 clamp(2rem, 4vw, 2.8rem)/1.2 var(--font-display); margin: .3rem 0 1rem; }
.legal h2 { margin: 2.5rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--rule-strong); font: 600 1.45rem/1.3 var(--font-display); }
.legal a { color: var(--accent); }
.legal code { font-family: var(--font-mono); font-size: .85em; background: var(--sunk); padding: .1em .3em; }

/* ---------------------------------------------------------------- footer, to-top */

.site-footer { background: var(--bar); color: color-mix(in srgb, var(--bar-ink) 85%, transparent); font-size: .9rem; line-height: 1.7; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; padding-block: 2.5rem 3rem; }
.footer-brand { display: flex; gap: .8rem; align-items: flex-start; }
.footer-brand strong { color: var(--bar-ink); font: 600 1.15rem var(--font-display); }
.site-footer p { margin: 0; }
.site-footer a { color: var(--bar-accent); }
.footer-links { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; }
.footer-links a { color: var(--bar-ink); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-note { flex-basis: 100%; font-size: .82rem; }
.to-top { position: fixed; z-index: 30; right: 1rem; bottom: calc(1rem + var(--player-h)); display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); background: var(--ground); opacity: 0; pointer-events: none; transform: translateY(.5rem); transition: opacity .25s, transform .25s var(--ease), bottom .3s var(--ease); }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 68rem) {
  .search-trigger { flex: none; min-width: 0; width: 2.75rem; padding: 0; justify-content: center; }
  .search-trigger span { display: none; }
  .section-layout { grid-template-columns: minmax(0, 1fr); }
  .part-nav { display: none; }
  .section-layout > .section { max-width: 46rem; margin-inline: auto; width: 100%; }
}
@media (max-width: 56rem) {
  :root { --header-h: 3.75rem; }
  /* Phones and tablets: the header slides away while reading on, and back
     when scrolling up (the script toggles .is-tucked). */
  .site-header { transition: transform .3s var(--ease); }
  .site-header.is-tucked { transform: translateY(-100%); }
  .menu-btn { display: inline-flex; }
  .main-nav, .lang-switch--header, .settings-wrap { display: none; }
  .theme-btn { border: 0; }
  .header-tools { gap: .25rem; }
  .search-trigger { border: 0; background: transparent; color: var(--ink); }
  .brand-name { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
  .brand { flex: 0 1 auto; }
  .brand-text { padding: .3rem .75rem .35rem; }
  /* Home page: the header's red name is the signboard, so the separate band
     is hidden (kept for screen readers as the page heading). */
  .page-home .hero { grid-template-columns: minmax(0, 1fr); }
  .page-home .hero-plaque { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; animation: none; }
}
@media (max-width: 44rem) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-inline: 0; padding-top: 0; }
  .hero-plaque { min-height: 0; flex-direction: row; padding: 1.1rem clamp(1rem, 4vw, 2.5rem); }
  .vertical-title { writing-mode: horizontal-tb; font-size: clamp(1.7rem, 9vw, 2.4rem); letter-spacing: .1em; white-space: nowrap; }
  /* Phones: keep the band, chooser and cover within the first screen. */
  .hero-plaque { padding: .6rem clamp(1rem, 4vw, 2.5rem); }
  .hero-plaque-foot { display: none; }
  .hero-plaque .vertical-title, .hero-plaque--zh .vertical-title { white-space: nowrap; font-size: clamp(1.15rem, 5.6vw, 1.5rem); line-height: 1.25; letter-spacing: .04em; }
  .hero-plaque--zh .vertical-title { letter-spacing: .2em; }
  .hero-plaque--ta .vertical-title { font-size: clamp(1rem, 4.8vw, 1.25rem); }
  .hero-main { gap: .9rem; padding-top: .8rem; }
  .lang-choice { gap: .35rem; }
  .lang-choice-label { margin-right: .25rem; font-size: .8rem; }
  .lang-choice a { padding: 0 .75rem; min-width: 2.75rem; justify-content: center; }
  .lc-full { display: none; }
  .lc-short { display: inline; }
  html[data-lang="ta"] .lang-choice-label { flex-basis: 100%; }
  .slide-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .slide-controls { grid-column: 1 / -1; order: 2; }
  .slide-btn { width: 2.75rem; height: 2.75rem; }
  .slide-caption { min-height: 4.8em; }
  .hero-plaque-foot { writing-mode: horizontal-tb; font-size: .62rem; letter-spacing: .15em; text-align: right; }
  .hero-main { padding-inline: clamp(1rem, 4vw, 2.5rem); }
  .hero-copy .btn { flex: 1 1 100%; justify-content: center; }
  .btn[data-continue] { align-items: center; }
  .section-head { gap: 1rem; }
  .section-num { font-size: 2.8rem; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .fig--lead, .cover-full { margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem)); }
  .fig--lead figcaption { padding-inline: clamp(1rem, 4vw, 2.5rem); }
  .player-note { display: none; }
  .player-inner { gap: .5rem; }
  .player .player-step { display: none; }
  .lb-figure { padding-inline: .5rem; }
  .lb-prev, .lb-next { top: auto; bottom: .5rem; transform: none; }
}

/* ---------------------------------------------------------------- motion */

@keyframes pop { from { opacity: 0; transform: translateY(-.4rem) scale(.98); } }
@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(-100%); } }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bar-accent) 60%, transparent); } 60% { box-shadow: 0 0 0 .6rem transparent; } }
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes plaque-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes char-drop { from { opacity: 0; transform: translateY(-.35em); } }
@keyframes num-in { from { opacity: 0; transform: translateX(-.4em); } }

/* Everything below only runs when JS has set html.anim (and motion is allowed),
   so content is never hidden for readers without JavaScript. */
.anim [data-reveal="text"] { opacity: 0; transform: translateY(.9rem); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.anim [data-reveal="row"] { opacity: 0; transform: translateX(-.6rem); transition: opacity .45s var(--ease), transform .55s var(--ease); transition-delay: var(--d, 0ms); }
.anim [data-reveal="tile"] { opacity: 0; transform: translateY(1.1rem) scale(.985); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.anim [data-reveal="bar"] { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--ease); transition-delay: var(--d, 0ms); }
.anim [data-reveal="image"] img { clip-path: inset(100% 0 0 0); transform: scale(1.08); filter: grayscale(1) brightness(1.3) contrast(.8); transition: clip-path 1s var(--ease), transform 1.6s var(--ease), filter 1.8s ease; transition-delay: var(--d, 0ms); }
.anim [data-reveal="image"] figcaption { opacity: 0; transition: opacity .6s ease .45s; }
.anim [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0); }
.anim [data-reveal="image"].is-in img { clip-path: inset(0); transform: none; filter: none; }
.anim [data-reveal="image"].is-in figcaption { opacity: 1; }

.anim .hero-plaque { animation: plaque-in 1s var(--ease) both; }
.anim .vertical-title span { animation: char-drop .7s var(--ease) both; animation-delay: calc(.45s + var(--i) * 110ms); }
.anim .hero-plaque-foot { animation: fade 1s ease 1.2s both; }
.anim .hero-copy > * { animation: rise .8s var(--ease) both; }
.anim .hero-copy > :nth-child(2) { animation-delay: .15s; }
.anim .section-head::before { animation: draw .9s var(--ease) both; }
.anim .section-num { animation: num-in .7s var(--ease) .15s both; }
.anim .section-head h1, .anim .section-alt { animation: rise .7s var(--ease) .1s both; }
.anim .section-actions { animation: rise .7s var(--ease) .25s both; }
.anim .crumbs, .anim .part-nav { animation: fade .6s ease both; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .18s ease both vt-out; }
  ::view-transition-new(root) { animation: .32s var(--ease) both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(.6rem); } }
}

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

@media print {
  .site-header, .site-footer, .player, .to-top, .part-nav, .section-actions, .pager, .hero-actions { display: none !important; }
  .anim [data-reveal], .anim [data-reveal] img, .anim [data-reveal] figcaption { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  body { background: #fff; color: #000; }
}