/* tulunadu.org base: reset, typography for Latin and Kannada script, prose */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg, video, picture { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}

@layer base {
  body {
    min-height: 100vh; min-height: 100dvh;
    background: var(--bg); color: var(--text);
    font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-body);
    font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
  }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 620; line-height: var(--leading-tight); letter-spacing: -.012em; text-wrap: balance; color: var(--text); }
  h1 { font-size: var(--step-5); font-weight: 640; }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); line-height: var(--leading-snug); }
  h4 { font-size: var(--step-1); line-height: var(--leading-snug); }
  h5, h6 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
  p, li, dd { text-wrap: pretty; }
  small { font-size: var(--step--1); }
  strong, b { font-weight: 650; }

  /* Kannada script (Kannada and Tulu pages, and inline terms): own fonts, more leading, no tracking, no uppercase.
     Set on elements that carry a lang attribute, so everything else inherits and component rules still win. */
  [lang|="kn"], [lang|="tcy"] { font-family: var(--font-kn-body); letter-spacing: 0; }
  [lang|="en"] { font-family: var(--font-body); }
  html:is([lang|="kn"], [lang|="tcy"]) body { line-height: var(--leading-kn-body); }
  :is([lang|="kn"], [lang|="tcy"]) :is(h1, h2, h3, h4), :is(h1, h2, h3, h4):is([lang|="kn"], [lang|="tcy"]) { font-family: var(--font-kn-display); font-weight: 700; line-height: var(--leading-kn-tight); letter-spacing: 0; }
  :is([lang|="kn"], [lang|="tcy"]) :is(h5, h6) { text-transform: none; letter-spacing: 0; font-size: var(--step-0); }
  :is([lang|="kn"], [lang|="tcy"]) h1 { font-size: calc(var(--step-5) * .86); }
  :is(h1, h2, h3, h4)[lang|="en"] { font-family: var(--font-display); }

  a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; transition: color var(--fast) var(--ease); }
  a:hover { color: var(--link-hover); text-decoration-thickness: .14em; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
  ::selection { background: var(--accent); color: var(--on-accent); }

  hr { border: 0; height: 1px; background: var(--border-strong); margin-block: var(--space-xl); }
  blockquote { border-inline-start: 4px solid var(--accent-strong); padding: var(--space-2xs) 0 var(--space-2xs) var(--space-m); font-family: var(--font-display); font-size: var(--step-1); line-height: var(--leading-snug); color: var(--text); }
  blockquote :is(cite, footer) { display: block; margin-top: var(--space-2xs); font-family: var(--font-body); font-size: var(--step--1); font-style: normal; color: var(--text-muted); }
  code, kbd, samp { font-family: var(--font-mono); font-size: .92em; background: var(--bg-sunken); padding: .1em .35em; border-radius: var(--radius-s); }
  table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
  th, td { text-align: start; padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--border); vertical-align: top; }
  thead th { font-weight: 700; color: var(--text-muted); border-bottom: 2px solid var(--border-strong); white-space: nowrap; }
  figcaption { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-2xs); }

  /* long-form reading column */
  .prose { max-width: var(--measure); }
  .prose > * + * { margin-block-start: 1.1em; }
  .prose > :is(h2, h3, h4) { margin-block-start: 2em; }
  .prose > :is(h2, h3, h4) + * { margin-block-start: .6em; }
  .prose :is(ul, ol) { padding-inline-start: 1.3em; }
  .prose li + li { margin-block-start: .35em; }
  .prose li::marker { color: var(--brand); }
  .prose img { border-radius: var(--radius-m); }
}

@layer layout {
  .container { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
  .container-wide { width: min(100% - 2 * var(--gutter), var(--page-wide)); margin-inline: auto; }
  .container-prose { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
  .section { padding-block: var(--section); }
  .section-sunken { background: var(--bg-sunken); }
  .section-tint { background: var(--bg-tint); }
  .stack > * + * { margin-block-start: var(--stack, var(--space-s)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, var(--space-xs)); align-items: center; }
  .grid { display: grid; gap: var(--grid-gap, var(--space-m)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 17rem)), 1fr)); }
  .split { display: grid; gap: var(--space-l); }
  @media (min-width: 64em) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; } }
  .with-sidebar { display: grid; gap: var(--space-l); }
  @media (min-width: 64em) { .with-sidebar { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-2xl); } }
}

@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip-link { position: absolute; inset-inline-start: var(--space-s); top: -4rem; z-index: 100; padding: var(--space-2xs) var(--space-s); background: var(--brand); color: var(--on-brand); border-radius: var(--radius-s); }
  .skip-link:focus { top: var(--space-2xs); }
  .text-muted { color: var(--text-muted); } .text-brand { color: var(--brand); } .text-center { text-align: center; }
  .measure { max-width: var(--measure); } .mx-auto { margin-inline: auto; }
  .lead { font-size: var(--step-1); line-height: 1.55; color: var(--text-muted); }
  html:is([lang|="kn"], [lang|="tcy"]) .lead { line-height: 1.85; }
  @media (max-width: 47.99em) { .hide-mobile { display: none !important; } }
  @media (min-width: 48em) { .only-mobile { display: none !important; } }
  @media print {
    .site-header, .site-footer, .consent, .theme-toggle, .lang-switch { display: none !important; }
    body { background: #fff; color: #000; } a { color: #000; }
  }
}