/* sevilo.org — direction A, "The Report" (design/0001-home-page.md, chosen 2026-10-19).
   Paper, ink, hairline rules and one yellow highlighter. No cards, shadows or gradients
   (B1-UI.22). Every colour pair in use passes WCAG AA; the ratios are in the design. */

/* ── fonts: served from this site only (B1-UI.14) ─────────────────────────────
   One family per role. The Tamil faces join the serif family by unicode-range, so a
   page with no Tamil never downloads them (B1-UI.9, B1-UI.17).
   font-display: optional -- a face that has not arrived by first paint is skipped for
   that view and used from cache on the next, so the page never shifts as fonts land.
   The first view's two faces are preloaded in base.html, so it is rare. */
@font-face { font-family: "Sevilo Serif"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("../fonts/noto-serif-latin-400-normal.v5-3-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sevilo Serif"; font-style: italic; font-weight: 400; font-display: optional;
  src: url("../fonts/noto-serif-latin-400-italic.v5-3-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sevilo Serif"; font-style: normal; font-weight: 600; font-display: optional;
  src: url("../fonts/noto-serif-latin-600-normal.v5-3-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sevilo Serif"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("../fonts/noto-serif-tamil-tamil-400-normal.v5-3-0.woff2") format("woff2");
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }
@font-face { font-family: "Sevilo Serif"; font-style: normal; font-weight: 600; font-display: optional;
  src: url("../fonts/noto-serif-tamil-tamil-600-normal.v5-3-0.woff2") format("woff2");
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }
@font-face { font-family: "Sevilo Sans"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("../fonts/noto-sans-latin-400-normal.v5-3-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sevilo Sans"; font-style: normal; font-weight: 600; font-display: optional;
  src: url("../fonts/noto-sans-latin-600-normal.v5-3-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── tokens ─────────────────────────────────────────────────────────────────── */
:root {
  --paper: #f7f3ea;
  --paper-deep: #efe8d9;
  --ink: #1e1d1a;
  --ink-soft: #57524a;
  --rule: #d6cdbb;
  --yellow: #f2c230;          /* never text on paper: it fails contrast there */
  --strip-old: #8e887c;       /* 4.8:1 on ink */
  --strip-en: #cfc8b9;        /* 10.1:1 on ink */
  --serif: "Sevilo Serif", Georgia, "Times New Roman", serif;
  --sans: "Sevilo Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 72rem;
  --gutter: 1rem;
  --measure: 36rem;
}

/* ── base ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* A jump to a section lands below the header, which stays in view (0003). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
@media (min-width: 1100px) { html { scroll-padding-top: 5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); }
a { color: var(--ink); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
p { margin: 0 0 1rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--ink); color: var(--paper); padding: .6rem .9rem; z-index: 10; }
.skip:focus { top: .75rem; }

/* ── header: stays in view (0003) ──────────────────────────────────────────────
   sticky, not fixed: it keeps its place in the flow, so nothing shifts. Wide screens get
   one line (wordmark · links · call to action); narrower ones put the links on a second
   line, and on a phone that line swipes sideways instead of wrapping. No JavaScript. */
header.site { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--ink); }
header.site .wrap { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand cta" "nav nav"; align-items: baseline; gap: .5rem 1.5rem; padding-top: .9rem; padding-bottom: .7rem; }
.wordmark { grid-area: brand; font: 600 1.5rem/1 var(--serif); letter-spacing: -.01em; text-decoration: none; }
nav.primary { grid-area: nav; display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; font-size: .875rem; }
nav.primary a { text-decoration: none; white-space: nowrap; padding: .2rem 0; }
nav.primary a:hover { text-decoration: underline; }
.header-cta { grid-area: cta; font: 600 .9375rem/1.2 var(--sans); text-decoration: none; border-bottom: 3px solid var(--yellow); padding-bottom: .15rem; white-space: nowrap; }
.header-cta:hover { border-bottom-color: var(--ink); }
.header-cta .short { display: none; }
@media (min-width: 1100px) {
  header.site .wrap { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav cta"; padding-top: 1.1rem; padding-bottom: .95rem; }
  nav.primary { justify-content: flex-end; flex-wrap: nowrap; }
}
@media (max-width: 760px) {
  header.site .wrap { padding-top: .7rem; padding-bottom: 0; gap: .35rem 1rem; }
  .header-cta .long { display: none; }
  .header-cta .short { display: inline; }
  /* One row that swipes sideways; only this row scrolls, never the page (B1-UI.6). */
  nav.primary { flex-wrap: nowrap; overflow-x: auto; gap: 1.25rem; font-size: .9375rem; padding: .35rem 0 .55rem; scrollbar-width: none; }
  nav.primary::-webkit-scrollbar { display: none; }
}

/* ── hero ───────────────────────────────────────────────────────────────────── */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; padding-top: 4.5rem; padding-bottom: 4.5rem; }
.kicker { font: 600 .8125rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1.5rem; }
h1 { font: 400 clamp(2.25rem, 5vw, 3.75rem)/1.12 var(--serif); letter-spacing: -.015em; margin: 0 0 1.75rem; max-width: 18ch; }
.mark { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .38em; text-underline-offset: -.18em; text-decoration-skip-ink: none; }
.lede { font-size: 1.1875rem; line-height: 1.6; max-width: var(--measure); margin: 0 0 2rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; }
.cta { font: 600 1.0625rem/1.2 var(--sans); text-decoration: none; border-bottom: 3px solid var(--yellow); padding-bottom: .3rem; }
.cta:hover { border-bottom-color: var(--ink); }
.facts { border-top: 1px solid var(--ink); margin: .5rem 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.facts li { border-bottom: 1px solid var(--rule); padding: .8rem 0; }
.facts b { display: block; font-weight: 600; }
.facts span { color: var(--ink-soft); }

/* ── the caption strip ──────────────────────────────────────────────────────── */
.caption-strip { background: var(--ink); color: var(--paper); }
.caption-strip .wrap { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem 3rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
.caption-strip .label { font: 400 .8125rem/1.6 var(--sans); color: var(--strip-en); }
.label-title { font: 600 .75rem/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); margin: 0 0 .25rem; }
.caption-strip .lines p { margin: 0; }
.caption-strip .old { font: 400 1.0625rem/1.5 var(--serif); color: var(--strip-old); }
.caption-strip .now { font: 400 1.375rem/1.45 var(--serif); color: var(--yellow); margin-top: .3rem; }
.caption-strip .en { font: 400 .9375rem/1.5 var(--sans); color: var(--strip-en); margin-bottom: .55rem; }

/* ── chapters ───────────────────────────────────────────────────────────────── */
section.chapter .wrap { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 3rem; padding-top: 4rem; padding-bottom: 4.5rem; border-top: 1px solid var(--ink); }
.hero + .caption-strip + section.chapter .wrap { border-top: 0; }
.chapter-no { font: 400 .875rem/1.4 var(--sans); color: var(--ink-soft); }
.chapter-no b { display: block; font: 400 2.75rem/1 var(--serif); color: var(--ink); margin-bottom: .5rem; }
h2, .h2 { font: 400 clamp(1.75rem, 3.4vw, 2.5rem)/1.2 var(--serif); letter-spacing: -.01em; margin: 0 0 1.25rem; max-width: 24ch; }
.intro { max-width: var(--measure); color: var(--ink-soft); margin: 0 0 2.5rem; }
h2 + .two-col, h2 + dl.points { margin-top: 2.25rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
h3 { font: 600 .8125rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ink); }
h3.spaced { margin-top: 2.5rem; }
dl.points { margin: 0; }
dl.points > div { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
dl.points.two-col > div:nth-child(-n+2) { border-top: 1px solid var(--ink); }
dl.points dt { font: 600 1.0625rem/1.4 var(--serif); margin-bottom: .2rem; }
dl.points dd { margin: 0; color: var(--ink-soft); font-size: .96875rem; }
.role { color: var(--ink); font-weight: 600; }
.note { margin-top: 1rem; font-size: .9375rem; color: var(--ink-soft); }

ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
ol.steps li { counter-increment: step; position: relative; padding: .9rem 0 .9rem 2.25rem; border-bottom: 1px solid var(--rule); color: var(--ink-soft); font-size: .96875rem; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: .75rem; font: 400 1.25rem/1.4 var(--serif); color: var(--ink); }
ol.steps b { color: var(--ink); font-weight: 600; }

ul.tips, ul.questions { margin: 0; padding: 0; list-style: none; }
ul.tips li, ul.questions li { padding: .7rem 0 .7rem 1.25rem; border-bottom: 1px solid var(--rule); position: relative; color: var(--ink-soft); font-size: .96875rem; }
ul.tips li::before, ul.questions li::before { content: "–"; position: absolute; left: 0; color: var(--ink); }

.notice { border-left: 3px solid var(--yellow); padding: .25rem 0 .25rem 1rem; margin: 2.5rem 0 0; font-size: .9375rem; color: var(--ink-soft); max-width: var(--measure); }
.write-to { margin-top: 2rem; font-size: 1.0625rem; max-width: var(--measure); }
.small { font-size: .875rem; color: var(--ink-soft); }

table.answers { width: 100%; border-collapse: collapse; font-size: .96875rem; }
table.answers th, table.answers td { text-align: left; vertical-align: top; padding: .9rem 1.5rem .9rem 0; border-bottom: 1px solid var(--rule); }
table.answers thead th { font: 600 .8125rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-top: 0; }
table.answers tbody th { font: 600 1.0625rem/1.4 var(--serif); width: 40%; }
table.answers td { color: var(--ink-soft); }

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 3rem; }
.person { border-top: 1px solid var(--ink); padding-top: 1rem; max-width: var(--measure); }
.person-name { font: 400 1.5rem/1.3 var(--serif); letter-spacing: 0; text-transform: none; border: 0; padding: 0; margin: 0; }
.person-role { font: 600 .8125rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: .2rem 0 1rem; }
.person p:not(.person-role) { color: var(--ink-soft); }

/* ── footer ─────────────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--ink); font-size: .875rem; color: var(--ink-soft); }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2rem; padding-top: 1.5rem; padding-bottom: 2.5rem; }
footer.site p { margin: 0; }

/* ── phone ──────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 2rem; padding-top: 3rem; padding-bottom: 3rem; }
  .caption-strip .wrap, section.chapter .wrap { grid-template-columns: 1fr; gap: 1.25rem; }
  section.chapter .wrap { padding-top: 2.5rem; padding-bottom: 3rem; }
  .chapter-no b { font-size: 2.25rem; }
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  dl.points.two-col { gap: 0; }
  dl.points.two-col > div:nth-child(2) { border-top: 0; }
  table.answers thead { display: none; }
  table.answers tr { display: block; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
  table.answers th, table.answers td { display: block; width: auto; padding: 0; border: 0; }
  table.answers tbody th { width: auto; margin-bottom: .2rem; }
}

/* ── print ──────────────────────────────────────────────────────────────────── */
@media print {
  :root { --paper: #fff; --ink-soft: #333; }
  body { font-size: 11pt; }
  header.site { position: static; }
  header.site nav, .header-cta, .skip, .actions { display: none; }
  .caption-strip { background: #fff; color: #000; border-top: 1px solid #000; border-bottom: 1px solid #000; }
  .caption-strip .old, .caption-strip .en, .caption-strip .label, .label-title { color: #333; }
  .caption-strip .now { color: #000; font-weight: 600; }
  section.chapter { break-inside: avoid-page; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #333; }
}