*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; background: var(--surface); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--text);
  font: 400 var(--fs-base)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--mandarin) 40%, transparent); color: var(--cream); }

/* Headings: Playfair Display in cream (SANAT-YONETIMI). Solid colour, no gradient text: Playfair's hairlines need a flat
   fill to stay legible. An <em> inside a heading is the single accent word, in mandarin (only at ≥ 24 px). */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; letter-spacing: 0; margin: 0 0 var(--s-4); text-wrap: balance; color: var(--cream); }
h1 { font-weight: 900; font-size: clamp(2rem, 5.4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.35rem); }
h3 { font-size: 1.2rem; line-height: 1.25; }
h1 em, h2 em { font-style: normal; color: var(--mandarin); }
p { margin: 0 0 var(--s-4); max-width: 68ch; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li + li { margin-top: var(--s-2); }
li::marker { color: var(--mandarin); }
strong { font-weight: 600; color: var(--cream); }

/* Focus ring: 2 px mandarin-light, offset 2 px (SANAT-YONETIMI input/focus rule). */
:focus-visible { outline: 2px solid var(--mandarin-light); outline-offset: 2px; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-skip);
  background: var(--ink-0); color: var(--cream); border: 1px solid var(--mandarin); border-radius: 6px; padding: var(--s-3) var(--s-4); font-weight: 600;
}
.skip-link:focus { top: var(--s-4); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 768px) { .container { padding-inline: var(--s-8); } }

.section { padding-block: var(--s-12); }
@media (min-width: 1024px) { .section { padding-block: var(--s-16); } }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-8); }
.section__head h2 { margin: 0; }
/* Eyebrow: letter-spaced mandarin label capitals led by a short ember → mandarin rule. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s-3);
  font: 800 0.8125rem/1 var(--font-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mandarin);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, var(--ember), var(--mandarin)); }
.badge-18, .updated, .sticky-bar .btn { font-family: var(--font-label); }

/* Bands: the page ground and the deeper court black, blended at their edges (no hard seam). */
.band--ink { background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 18%, var(--ink-0) 82%, var(--ink-1) 100%); }
.band--paper { background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-2) 40%, var(--ink-2) 60%, var(--ink-1) 100%); }

/* Section divider: an ember → mandarin-deep hairline that fades out at both ends. */
.stripe {
  position: relative; height: 1px; max-width: var(--container); margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--ember) 20%, var(--mandarin-deep) 50%, var(--ember) 80%, transparent);
}

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-lg); margin-top: var(--s-8); }
.prose a { color: var(--mandarin); }
.prose a:hover { color: var(--mandarin-light); }
.prose ul li::marker, .prose ol li::marker { font-weight: 700; }

main { display: block; }
@media (max-width: 767px) { body { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}