/* tulunadu.org components */
@layer components {
  /* ---------- check band: the red, gold and black check of Yakshagana costume, used as the site's divider ---------- */
  .band { --c: 8px; height: calc(var(--c) * 2); border: 0; margin: 0;
    background:
      conic-gradient(var(--check-b) 25%, transparent 0 50%, var(--check-c) 0 75%, transparent 0) 0 0 / calc(var(--c) * 2) calc(var(--c) * 2),
      var(--check-a); }
  .band-thin { --c: 5px; }

  /* ---------- header ---------- */
  .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
  .site-header .bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-s); min-height: var(--header-h); padding-block: var(--space-2xs); }
  @media (max-width: 39.99em) {
    .site-header { position: static; }
    .lang-switch { order: 3; width: 100%; }
    .lang-switch a { flex: 1; text-align: center; padding-block: .35rem; }
  }
  .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); margin-inline-end: auto; }
  .brand img { width: 2.5rem; height: 2.5rem; }
  .brand-name { font-family: var(--font-display); font-weight: 640; font-size: 1.3rem; letter-spacing: -.01em; line-height: 1; }
  .brand-name span { color: var(--brand); font-weight: 420; }
  .brand-kn { display: block; font-family: var(--font-kn-display); font-weight: 700; font-size: .78rem; color: var(--brand); line-height: 1.3; margin-top: .1rem; }
  .site-nav ul { display: flex; gap: var(--space-m); list-style: none; padding: 0; margin: 0; }
  .site-nav a { text-decoration: none; color: var(--text); font-weight: 550; padding-block: .4rem; border-bottom: 2px solid transparent; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--brand); color: var(--brand-strong); }

  .lang-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-raised); }
  .lang-switch a { text-decoration: none; color: var(--text-muted); font-size: var(--step--1); font-weight: 600; line-height: 1.5; padding: .22rem .7rem; border-radius: var(--radius-pill); white-space: nowrap; }
  .lang-switch a:hover { color: var(--text); background: var(--bg-sunken); }
  .lang-switch a[aria-current="true"] { background: var(--brand); color: var(--on-brand); }

  .icon { width: 1.25em; height: 1.25em; flex: none; }
  .icon-btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text); }
  .icon-btn:hover { border-color: var(--brand); color: var(--brand-strong); }
  /* theme switch = the Tulu flag: red emblem on the pale button in the light look, white emblem on a red button in the dark look */
  .icon-emblem { width: 1.6em; height: 1.6em; }
  .theme-toggle { color: var(--flag-red); border-color: color-mix(in srgb, var(--flag-red) 45%, var(--border-strong)); }
  .theme-toggle:hover { color: var(--flag-red); border-color: var(--flag-red); }
  :root[data-theme="dark"] .theme-toggle { background: var(--flag-red); border-color: var(--flag-red); color: var(--flag-white); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle { background: var(--flag-red); border-color: var(--flag-red); color: var(--flag-white); } }
  .theme-toggle .i-moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; } }

  /* ---------- buttons ---------- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; padding: .55rem 1.3rem; border-radius: var(--radius-pill); border: 2px solid transparent; font-weight: 650; text-decoration: none; line-height: 1.3; transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
  .btn-primary { background: var(--brand); color: var(--on-brand); } .btn-primary:hover { background: var(--brand-strong); color: var(--on-brand); }
  .btn-accent { background: var(--accent); color: var(--on-accent); } .btn-accent:hover { background: var(--accent-strong); color: var(--on-accent); }
  .btn-ghost { border-color: var(--border-strong); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--brand); color: var(--brand-strong); }
  .btn-small { padding: .35rem .8rem; font-size: var(--step--1); min-height: 2.3rem; }

  /* ---------- share row: WhatsApp / email, end of a content page ---------- */
  .share { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-m); }

  /* ---------- small labels ---------- */
  .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
  html:is([lang|="kn"], [lang|="tcy"]) .eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--step-0); }
  .eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }
  .badge { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem; border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 650; background: var(--bg-sunken); color: var(--text-muted); border: 1px solid var(--border); }
  .badge-live { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
  .badge-live::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 0 var(--accent-strong); animation: pulse 2.2s infinite; }
  .badge-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
  .badge-note { background: var(--note-bg); color: var(--note); border-color: transparent; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-strong) 70%, transparent); } 70% { box-shadow: 0 0 0 .55rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

  /* ---------- hero ---------- */
  .hero { position: relative; isolation: isolate; background: var(--bg); }
  .hero-art { background: var(--hero-img) center bottom / cover no-repeat; aspect-ratio: 1600 / 640; width: 100%; max-height: 62vh; min-height: 13rem; }
  .hero-copy { padding-block: var(--space-xl) var(--space-2xl); }
  .hero-copy h1 { max-width: 18ch; }
  html:is([lang|="kn"], [lang|="tcy"]) .hero-copy h1 { max-width: 22ch; }
  .hero-copy .lead { max-width: 60ch; }
  @media (min-width: 64em) {
    .hero { display: grid; grid-template-columns: minmax(0, 1fr); }
    .hero-art { max-height: 56vh; }
  }

  /* ---------- notice (dated news line) ---------- */
  .notice { display: grid; gap: var(--space-xs); padding: var(--space-m); border-radius: var(--radius-l); background: var(--bg-raised); border: 1px solid var(--border); border-inline-start: 6px solid var(--accent-strong); box-shadow: var(--shadow-1); }
  .notice time { font-weight: 700; color: var(--accent-text); font-size: var(--step--1); letter-spacing: .04em; }
  .notice h2, .notice h3 { font-size: var(--step-2); }
  .notice .src { font-size: var(--step--1); color: var(--text-subtle); }

  /* ---------- topic cards ---------- */
  .topic-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; padding: var(--space-m); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), border-color var(--slow) var(--ease); }
  .topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }
  .topic-card .glyph { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-m); background: var(--bg-tint); color: var(--brand-strong); }
  .topic-card .glyph svg { width: 2.4rem; height: 2.4rem; }
  .topic-card h3 { font-size: var(--step-1); margin-bottom: .15rem; }
  .topic-card .native { display: block; font-family: var(--font-kn-display); font-weight: 600; font-size: var(--step--1); color: var(--accent-text); line-height: 1.5; margin-bottom: .3rem; }
  .topic-card p { font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; }
  html:is([lang|="kn"], [lang|="tcy"]) .topic-card p { line-height: 1.8; }
  .topic-card.is-flagship { border-color: var(--accent-strong); background: linear-gradient(180deg, var(--warn-bg), var(--bg-raised) 60%); }
  .topic-card .flag { position: absolute; top: -0.7rem; inset-inline-end: var(--space-s); background: var(--accent); color: var(--on-accent); font-size: var(--step--2); font-weight: 700; padding: .1rem .6rem; border-radius: var(--radius-pill); }

  /* ---------- photographs with a credit line (the site credits every image) ---------- */
  .photo { position: relative; margin: 0; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-sunken); box-shadow: var(--shadow-1); }
  .photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio, 4 / 3); }
  .photo figcaption { position: absolute; inset: auto 0 0 0; margin: 0; padding: 2.2rem var(--space-s) var(--space-xs); color: #FCF8F0; background: linear-gradient(180deg, transparent, rgb(18 13 11 / .82)); font-size: var(--step--1); line-height: 1.4; }
  .photo figcaption strong { display: block; font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; }
  html:is([lang|="kn"], [lang|="tcy"]) .photo figcaption strong { font-family: var(--font-kn-display); }
  .photo .credit { display: block; opacity: .82; font-size: var(--step--2); margin-top: .15rem; }
  .photo .credit a { color: inherit; }
  .photo-grid { display: grid; gap: var(--space-s); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 64em) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ---------- callouts: note, disputed (sources differ), source ---------- */
  .callout { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow-wrap: anywhere; gap: var(--space-xs) var(--space-s); padding: var(--space-s) var(--space-m); border-radius: var(--radius-m); background: var(--note-bg); color: var(--text); border-inline-start: 4px solid var(--note); }
  .callout > .icon { color: var(--note); width: 1.5rem; height: 1.5rem; margin-top: .15rem; }
  .callout-title { font-weight: 700; color: var(--note); }
  .callout :is(ul, ol) { padding-inline-start: 1.2em; } .callout li + li { margin-block-start: .3em; }
  .callout-disputed { background: var(--disputed-bg); border-color: var(--disputed); } .callout-disputed > .icon, .callout-disputed .callout-title { color: var(--disputed); }
  .callout-source { background: var(--bg-sunken); border-color: var(--border-strong); } .callout-source > .icon, .callout-source .callout-title { color: var(--text-muted); }

  /* ---------- a Tulu term: transliteration in italics, Kannada script after it ---------- */
  .term { font-style: italic; }
  .term-kn { font-family: var(--font-kn-body); font-style: normal; color: var(--accent-text); margin-inline-start: .25em; white-space: nowrap; }
  .term-kn::before { content: "("; color: var(--text-subtle); } .term-kn::after { content: ")"; color: var(--text-subtle); }

  /* ---------- citations and sources ---------- */
  sup.cite a { text-decoration: none; font-weight: 700; padding-inline: .15em; color: var(--link); }
  .sources { font-size: var(--step--1); color: var(--text-muted); }
  .sources ol { padding-inline-start: 1.4em; } .sources li + li { margin-top: .5em; }
  .sources .licence { display: inline-block; font-size: var(--step--2); padding: 0 .45em; border: 1px solid var(--border-strong); border-radius: var(--radius-s); margin-inline-start: .35em; white-space: nowrap; }

  /* ---------- principles ---------- */
  .principle { padding: var(--space-m); border-radius: var(--radius-l); background: var(--bg-raised); border: 1px solid var(--border); }
  .principle .icon { width: 2rem; height: 2rem; color: var(--brand); margin-bottom: var(--space-xs); }
  .principle h3 { font-size: var(--step-1); margin-bottom: .35rem; }
  .principle p { color: var(--text-muted); font-size: var(--step--1); }

  /* ---------- progress list ---------- */
  .progress { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
  .progress li { position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-s); padding-bottom: var(--space-m); }
  .progress li::before { content: ""; position: absolute; inset-inline-start: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--border-strong); }
  .progress li:last-child { padding-bottom: 0; } .progress li:last-child::before { display: none; }
  .progress .dot { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg); color: var(--text-subtle); }
  .progress .dot svg { width: 1.1rem; height: 1.1rem; }
  .progress .is-done .dot { background: var(--ok); border-color: var(--ok); color: var(--bg); }
  .progress .is-now .dot { background: var(--accent); border-color: var(--accent-strong); color: var(--on-accent); }
  .progress strong { display: block; } .progress span { color: var(--text-muted); font-size: var(--step--1); }

  /* ---------- breadcrumbs, table of contents, pagination (content pages) ---------- */
  .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; font-size: var(--step--1); color: var(--text-muted); }
  .breadcrumbs li + li::before { content: "/"; margin-inline-end: .4rem; color: var(--text-subtle); }
  .toc { position: sticky; top: calc(var(--header-h) + 1rem); padding: var(--space-s) var(--space-m); border-inline-start: 3px solid var(--accent-strong); font-size: var(--step--1); }
  .toc ol { list-style: none; padding: 0; } .toc li + li { margin-top: .45rem; } .toc a { text-decoration: none; color: var(--text-muted); } .toc a:hover, .toc a[aria-current] { color: var(--brand-strong); }
  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--bg-raised); }

  /* ---------- forms ---------- */
  .field { display: grid; gap: .35rem; } .field label { font-weight: 650; font-size: var(--step--1); }
  .input { width: 100%; min-height: 2.9rem; padding: .5rem .9rem; border-radius: var(--radius-m); border: 1.5px solid var(--border-strong); background: var(--bg-raised); color: var(--text); }
  .input:focus-visible { outline-offset: 0; border-color: var(--focus); }

  /* ---------- footer, with a Mangalore-tile edge ---------- */
  .site-footer { background: var(--masi-900); color: #E9DFCE; margin-top: var(--section); }
  :root[data-theme="dark"] .site-footer { background: #0B0807; }
  .tile-edge { height: 22px; background-color: var(--odu-600);
    background-image: radial-gradient(circle at 11px -3px, transparent 11px, var(--odu-700) 11.5px 13px, transparent 13.5px); background-size: 22px 22px; }
  .site-footer .inner { padding-block: var(--space-xl); display: grid; gap: var(--space-l); }
  @media (min-width: 48em) { .site-footer .inner { grid-template-columns: 1.4fr 1fr 1fr; } }
  .site-footer a { color: var(--arashina-300); } .site-footer a:hover { color: var(--arashina-100); }
  .site-footer h2 { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: #B3A598; font-weight: 700; margin-bottom: var(--space-xs); }
  html:is([lang|="kn"], [lang|="tcy"]) .site-footer h2 { font-family: var(--font-kn-body); letter-spacing: 0; text-transform: none; font-size: var(--step-0); }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: .35rem; }
  .site-footer .fine { border-top: 1px solid #3B302A; padding-block: var(--space-s); font-size: var(--step--1); color: #B3A598; }

  /* ---------- analytics consent ---------- */
  .consent { position: fixed; inset: auto var(--space-s) var(--space-s) var(--space-s); z-index: 80; max-width: 34rem; margin-inline: auto; padding: var(--space-s) var(--space-m); border-radius: var(--radius-l); background: var(--bg-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); font-size: var(--step--1); }
  .consent p { margin-bottom: var(--space-xs); color: var(--text-muted); }
  .consent .btn { min-height: 2.4rem; padding: .3rem 1rem; }
}

@layer components {
  .topic-grid { --grid-min: 19rem; padding: 0; margin: var(--space-l) 0 0; }
  .principles { --grid-min: 15rem; padding: 0; margin: var(--space-l) 0 0; }
  .hero .band { margin: 0; }
}

@layer components {
  .section > :is(.container, .container-prose).stack { --stack: var(--space-l); }
  .section .stack.measure { --stack: var(--space-xs); }
}

@layer components {
  /* phones: the caption sits under the photograph instead of over it, so a small image is not covered by its own credit */
  @media (max-width: 47.99em) {
    .photo { background: var(--bg-raised); border: 1px solid var(--border); }
    .photo img { height: auto; }
    .photo figcaption { position: static; background: none; color: var(--text); padding: var(--space-2xs) var(--space-xs) var(--space-xs); }
    .photo figcaption strong { font-size: var(--step--1); }
    .photo .credit { opacity: 1; color: var(--text-muted); }
  }
}

@layer components {
  /* ---------- hero: the animated under-construction banner leads at every width ---------- */
  .hero { padding-block: var(--space-l) var(--space-xl); }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: center; }
  .uc-banner { margin: 0; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); background: #FCF1D8; }
  .uc-banner img { width: 100%; height: auto; }
  .hero-text h1 { max-width: 16ch; }
  html:is([lang|="kn"], [lang|="tcy"]) .hero-text h1 { max-width: 20ch; }
  .hero-text .lead { max-width: 56ch; }
  @media (max-width: 47.99em) {
    .hero { padding-block-start: 0; }
    .uc-banner { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; }
  }
  @media (min-width: 64em) {
    .hero { padding-block: var(--space-xl) var(--space-2xl); }
    .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
    .hero-text h1 { font-size: var(--step-4); }
  }
  @media (min-width: 90em) { .hero-text h1 { font-size: var(--step-5); } }

  /* header links appear only where there is room */
  .site-nav { display: none; }
  @media (min-width: 64em) { .site-nav { display: block; margin-inline-end: var(--space-s); } .site-nav a { font-size: var(--step--1); } }
  .section.news { padding-block: var(--space-xl); }

  .who-line { color: var(--text-muted); font-size: var(--step--1); padding-inline-start: var(--space-m); border-inline-start: 3px solid var(--gold, var(--accent)); }
  .who-line a { color: var(--brand-strong); font-weight: 600; }

  a.topic-card { color: inherit; text-decoration: none; }
  .topic-card.is-open:hover h3 { color: var(--brand-strong); }
  .topic-card.is-open h3::after { content: " \2192"; color: var(--accent-strong); }

  /* ---------- section figures (diagrams): one image per theme ---------- */
  .section-figure { margin: 0 auto; max-width: 52rem; }
  .section-figure img { width: 100%; height: auto; }
  .table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 36rem; }
  .content-figure { margin: var(--space-l) 0; } .content-figure img { width: 100%; height: auto; border-radius: var(--radius-m); } .content-figure figcaption { margin-top: var(--space-xs); font-size: var(--step--1); color: var(--text-muted); }
  .only-dark { display: none; }
  :root[data-theme="dark"] .only-light { display: none; } :root[data-theme="dark"] .only-dark { display: block; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-light { display: none; } :root:not([data-theme="light"]) .only-dark { display: block; } }

  /* ---------- read-aloud: one header button; a small player bar at the bottom only while it is open ---------- */
  .reader-btn:not(.is-ready) { visibility: hidden; } /* keeps its place until the script knows the browser can speak: no layout shift */
  @media (max-width: 23.99em) { .site-header .icon-btn { width: 2.25rem; height: 2.25rem; } }
  .reader-btn[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-strong); }
  .reader-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s);
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--bg-raised); border-top: 1px solid var(--border-strong); box-shadow: 0 -4px 16px rgb(0 0 0 / .12); }
  .reader-bar[hidden] { display: none; }
  .reader-bar > * { min-width: 0; max-width: 100%; }
  .reader-bar .btn-small { padding: .35rem .8rem; font-size: var(--step--1); min-height: 2.3rem; }
  .reader-bar .icon-btn { width: 2.3rem; height: 2.3rem; }
  .reader-select { font: inherit; font-size: var(--step--1); padding: .3rem .5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: var(--bg); color: var(--text); width: auto; max-width: min(100%, 14rem); text-overflow: ellipsis; }
  .reader-status { font-size: var(--step--1); color: var(--text-muted); flex: 1 1 12rem; }
  .reader-bar .reader-close { margin-inline-start: auto; }
  body.has-reader-bar { padding-bottom: 4.5rem; }
  body.has-reader-bar .consent { bottom: 5rem; }
  .is-reading { background: var(--note-bg); box-shadow: 0 0 0 6px var(--note-bg); border-radius: 3px; }
  .uc-banner { position: relative; }
  .uc-banner .anim-toggle { position: absolute; right: var(--space-s); bottom: var(--space-s); max-width: calc(100% - 2 * var(--space-s)); padding: .3rem .7rem; font-size: var(--step--1); white-space: normal; text-align: right; background: color-mix(in srgb, var(--bg) 85%, transparent); }

  /* ---------- prose pages: title block, aside box, text; contents list on laptops; aside in a right rail on wide laptops ---------- */
  .page-prose { display: grid; grid-template-columns: minmax(0, var(--measure)); grid-template-areas: "head" "aside" "body"; justify-content: center; row-gap: var(--space-m); }
  .page-head { grid-area: head; } .page-aside { grid-area: aside; } .page-body { grid-area: body; } .page-toc { grid-area: toc; display: none; }
  .page-head > h1 { margin-block-start: .45em; }
  .page-head > .lead { margin-block-start: .9em; }
  .page-body { max-width: none; }
  .page-toc h2 { font-family: var(--font-body); font-size: var(--step--2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-xs); }
  .page-toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--border-strong); }
  .page-toc li + li { margin-block-start: .1rem; }
  .page-toc a { display: block; padding: .3rem 0 .3rem var(--space-s); margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--text-muted); font-size: var(--step--1); text-decoration: none; line-height: 1.35; }
  .page-toc a:hover { color: var(--brand-strong); border-color: var(--brand); }
  .infobox { padding: var(--space-m); border-radius: var(--radius-l); background: var(--bg-raised); box-shadow: var(--shadow-1); border-top: 4px solid var(--brand); }
  .infobox h2 { font-family: var(--font-body); font-size: var(--step--2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-s); }
  .infobox dl { font-size: var(--step--1); line-height: 1.4; }
  .infobox dt { font-size: var(--step--2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
  .infobox dd { margin: .1rem 0 0; overflow-wrap: anywhere; } .infobox dl > div + div { margin-top: .7rem; }
  @media (min-width: 40em) and (max-width: 79.99em) { .infobox dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-s) var(--space-m); } .infobox dl > div + div { margin-top: 0; } }
  @media (min-width: 64em) {
    .page-prose { grid-template-columns: 12rem minmax(0, 70ch); grid-template-areas: "toc head" "toc aside" "toc body"; column-gap: var(--space-2xl); row-gap: var(--space-l); align-items: start; }
    .page-toc { display: block; position: sticky; top: calc(4.5rem + var(--space-m)); padding-top: .35rem; }
  }
  @media (min-width: 80em) {
    .page-prose { grid-template-columns: 12rem minmax(0, 70ch) 17rem; grid-template-areas: "toc head aside" "toc body aside"; column-gap: var(--space-2xl); }
    .page-aside { position: sticky; top: calc(4.5rem + var(--space-m)); padding-top: .35rem; }
  }

  /* ---------- purpose ---------- */
  .purpose-grid { display: grid; gap: var(--space-m); }
  @media (min-width: 48em) { .purpose-grid { grid-template-columns: 1fr 1fr; gap: var(--space-l); } }
  .statement { padding: var(--space-m) var(--space-m) var(--space-m) var(--space-l); border-inline-start: 5px solid var(--brand); background: var(--bg-raised); border-radius: 0 var(--radius-l) var(--radius-l) 0; box-shadow: var(--shadow-1); }
  .statement h3 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--space-2xs); }
  html:is([lang|="kn"], [lang|="tcy"]) .statement h3 { font-family: var(--font-kn-body); letter-spacing: 0; text-transform: none; font-size: var(--step-0); }
  .statement p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; }
  html:is([lang|="kn"], [lang|="tcy"]) .statement p { font-family: var(--font-kn-display); font-weight: 500; line-height: 1.8; font-size: var(--step-0); }
  .aims { --grid-min: 16rem; padding: 0; margin: var(--space-l) 0 0; }
  .aim { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; }
  .aim .num { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; }
  .aim h3 { font-size: var(--step-1); margin-bottom: .2rem; } .aim p { color: var(--text-muted); font-size: var(--step--1); }

  /* ---------- proverb of the week ---------- */
  .proverb-card { display: grid; gap: var(--space-xs); max-width: var(--measure); margin-inline: auto; padding: var(--space-l); border-radius: var(--radius-l); background: var(--bg-raised); border: 1px solid var(--border); border-inline-start: 6px solid var(--accent-strong); box-shadow: var(--shadow-1); }
  .proverb-tulu { font-family: var(--font-kn-display); font-weight: 600; font-size: var(--step-3); line-height: var(--leading-kn-tight); color: var(--text); }
  .proverb-translit { font-style: italic; color: var(--text-muted); }
  .proverb-literal, .proverb-meaning { color: var(--text); }
  .proverb-card > p:last-child { margin-block-start: var(--space-xs); }

  /* ---------- help build this ---------- */
  .contribute { background: var(--bg-tint); }
  .roles { --grid-min: 18rem; padding: 0; margin: var(--space-l) 0 0; }
  .role { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); padding: var(--space-m); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-l); }
  .role .icon { width: 1.9rem; height: 1.9rem; color: var(--brand); margin-top: .15rem; }
  .role h3 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; margin-bottom: .2rem; }
  html:is([lang|="kn"], [lang|="tcy"]) .role h3 { font-family: var(--font-kn-body); }
  .role p { color: var(--text-muted); font-size: var(--step--1); }
  .write-to { display: grid; gap: var(--space-l); padding: var(--space-l); border-radius: var(--radius-l); background: var(--brand); color: var(--on-brand); }
  @media (min-width: 64em) { .write-to { grid-template-columns: 5fr 6fr; gap: var(--space-2xl); padding: var(--space-xl); align-items: center; } }
  .write-line { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; }
  html:is([lang|="kn"], [lang|="tcy"]) .write-line { font-family: var(--font-kn-display); font-weight: 600; line-height: 1.6; }
  .write-line a { display: block; font-size: clamp(1.05rem, 4.6vw, var(--step-2)); color: inherit; font-family: var(--font-display); font-weight: 640; text-decoration-color: var(--accent); text-decoration-thickness: .12em; overflow-wrap: anywhere; }
  .write-line a:hover { color: var(--arashina-300); }
  .write-to p { color: inherit; } .write-to .partners { padding-inline-start: var(--space-m); border-inline-start: 3px solid color-mix(in srgb, currentColor 35%, transparent); }
  .write-to .partners h3 { color: inherit; font-size: var(--step-1); } .write-to .partners p { font-size: var(--step--1); opacity: .92; }

  /* ---------- footer ---------- */
  .site-footer .inner { grid-template-columns: 1fr; }
  @media (min-width: 40em) { .site-footer .inner { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
  @media (min-width: 64em) { .site-footer .inner { grid-template-columns: 1.7fr 1.1fr .8fr 1.3fr; gap: var(--space-xl); } .foot-brand { grid-column: auto; } }
  .foot-brand img { width: min(16rem, 70%); height: auto; } .foot-brand p { max-width: 30rem; color: #CFC4B2; }
  .foot-mail { font-weight: 650; overflow-wrap: anywhere; }
  .foot-bottom { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-xl); align-items: center; justify-content: space-between; padding-block: var(--space-m); border-top: 1px solid #3B302A; }
  .foot-bottom .fine { border: 0; padding: 0; margin: 0; max-width: 34rem; font-size: var(--step--1); color: #B3A598; }
  .flag-note { display: flex; gap: var(--space-s); align-items: center; font-size: var(--step--1); color: #B3A598; max-width: 36rem; margin: 0; }
  .flag-note img { flex: none; width: 6rem; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgb(255 255 255 / .2), 0 6px 18px rgb(0 0 0 / .45); }
}

@layer components {
  /* dark theme by system preference (no explicit choice): same footer ground as the explicit dark theme */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer { background: #0B0807; } }
}

@layer components {
  /* ---------- content pages: the Tulu-name line under h1, variant callouts, section-index cards ---------- */
  /* sup.cite and .sources (the citation link and the numbered source list) already have styles above, under "citations and sources". */
  .page-names { margin-block-start: .3em; font-size: var(--step-0); color: var(--text-muted); }
  .page-names span[lang="tcy"] { font-family: var(--font-kn-display); font-weight: 600; color: var(--accent-text); }
  .translit { font-style: italic; }
  .page-names .translit { color: var(--text-muted); }

  /* a regional variant: the same callout base as .callout-disputed/.callout-source, no icon column, a third border colour so it reads as a different kind of note */
  .callout-variant { grid-template-columns: minmax(0, 1fr); background: var(--ok-bg); border-color: var(--ok); }
  .callout-variant .callout-title { color: var(--ok); }

  /* a section index: reuses .topic-grid for the layout; .page-card is a plainer, linked version of .topic-card (no icon glyph, no flagship ribbon) */
  .page-card { display: block; padding: var(--space-m); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); text-decoration: none; color: inherit; transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), border-color var(--slow) var(--ease); }
  .page-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }
  .page-card h3 { font-size: var(--step-1); margin-bottom: .15rem; }
  .page-card .native { display: block; font-family: var(--font-kn-display); font-weight: 600; font-size: var(--step--1); color: var(--accent-text); line-height: 1.5; margin-bottom: .3rem; }
  .page-card p { font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; }
}