/* ==========================================================================
   Base: fonts, reset, type scale, layout primitives
   ========================================================================== */

/* ---- Self-hosted fonts (variable files, latin + kannada subsets) ------- */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../fonts/syne-latin-var-normal.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: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/newsreader-latin-var-normal.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: "Newsreader";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/newsreader-latin-var-italic.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: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-var-normal.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: "Noto Sans Kannada";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/noto-sans-kannada-kannada-var-normal.woff2") format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0B83, U+0C80-0CF3, U+1CD0, U+1CD2, U+1CDA, U+1CF2, U+1CF4, U+200C-200D, U+20B9, U+25CC, U+A830-A835;
}
@font-face {
  font-family: "Noto Sans Kannada";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/noto-sans-kannada-latin-var-normal.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;
}

/* ---- Reset ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  background: var(--c-surface);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--c-on-surface);
  font-family: var(--font-serif);
  font-size: var(--t-body-md-size);
  line-height: var(--t-body-md-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--c-primary-fixed);
  color: var(--c-on-primary-fixed);
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

svg.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg.icon.icon-fill {
  fill: currentColor;
  stroke: none;
}

.no-scrollbar {
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Type scale (DESIGN.md typography) --------------------------------- */
.t-display-xl,
.t-display-lg,
.t-headline-lg,
.t-headline-md {
  font-family: var(--font-display);
  text-transform: uppercase;
}

.t-display-xl {
  font-size: var(--t-display-xl-size);
  line-height: var(--t-display-xl-lh);
  letter-spacing: var(--t-display-xl-ls);
  font-weight: var(--t-display-xl-w);
}

.t-display-lg {
  font-size: var(--t-display-lg-size);
  line-height: var(--t-display-lg-lh);
  letter-spacing: var(--t-display-lg-ls);
  font-weight: var(--t-display-lg-w);
}

.t-headline-lg {
  font-size: var(--t-headline-lg-size);
  line-height: var(--t-headline-lg-lh);
  letter-spacing: var(--t-headline-lg-ls);
  font-weight: var(--t-headline-lg-w);
}

.t-headline-md {
  font-size: var(--t-headline-md-size);
  line-height: var(--t-headline-md-lh);
  letter-spacing: var(--t-headline-md-ls);
  font-weight: var(--t-headline-md-w);
}

.t-headline-sm {
  font-family: var(--font-serif);
  font-size: var(--t-headline-sm-size);
  line-height: var(--t-headline-sm-lh);
  letter-spacing: var(--t-headline-sm-ls);
  font-weight: var(--t-headline-sm-w);
  text-transform: none;
}

.t-body-lg {
  font-family: var(--font-serif);
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-lh);
  letter-spacing: var(--t-body-lg-ls);
  font-weight: 400;
}

.t-body-md {
  font-family: var(--font-serif);
  font-size: var(--t-body-md-size);
  line-height: var(--t-body-md-lh);
  letter-spacing: var(--t-body-md-ls);
  font-weight: 400;
}

.t-body-sm {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
  letter-spacing: var(--t-body-sm-ls);
  font-weight: 400;
}

.t-label-lg,
.t-label-md,
.t-label-sm {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.t-label-lg {
  font-size: var(--t-label-lg-size);
  line-height: var(--t-label-lg-lh);
  letter-spacing: var(--t-label-lg-ls);
  font-weight: var(--t-label-lg-w);
}

.t-label-md {
  font-size: var(--t-label-md-size);
  line-height: var(--t-label-md-lh);
  letter-spacing: var(--t-label-md-ls);
  font-weight: var(--t-label-md-w);
}

.t-label-sm {
  font-size: var(--t-label-sm-size);
  line-height: var(--t-label-sm-lh);
  letter-spacing: var(--t-label-sm-ls);
  font-weight: var(--t-label-sm-w);
}

.t-kannada {
  font-family: var(--font-kannada);
}

/* modifiers used by the screens */
.is-italic { font-style: italic; }
.is-bold { font-weight: 700; }
.is-extrabold { font-weight: 800; }
.is-tight { letter-spacing: var(--ls-tight); }
.is-tighter { letter-spacing: var(--ls-tighter); }
.is-wide { letter-spacing: var(--ls-wide); }
.is-wider { letter-spacing: var(--ls-wider); }
.is-widest { letter-spacing: var(--ls-widest); }
.is-leading-none { line-height: 1; }
.is-leading-tight { line-height: 1.25; }
.is-leading-snug { line-height: 1.375; }
.is-leading-relaxed { line-height: 1.625; }
.is-upper { text-transform: uppercase; }
.is-muted { color: var(--c-on-surface-variant); }
.is-secondary { color: var(--c-secondary); }
.is-primary { color: var(--c-primary); }
.is-tertiary { color: var(--c-tertiary); }
.is-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.is-clamp-1,
.is-clamp-2,
.is-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.is-clamp-1 { -webkit-line-clamp: 1; }
.is-clamp-2 { -webkit-line-clamp: 2; }
.is-clamp-3 { -webkit-line-clamp: 3; }

/* ---- Layout primitives ------------------------------------------------- */
.site-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--c-surface);
  padding-top: var(--header-h);
  padding-bottom: calc(var(--dock-h) + 2rem);
}

.site-main.has-compact-header { padding-top: var(--header-compact-h); }
.site-main.has-reader-header { padding-top: var(--header-reader-h); padding-bottom: 3rem; }

.wrap {
  width: 100%;
  padding-left: var(--margin);
  padding-right: var(--margin);
}

.stack { display: flex; flex-direction: column; }
.stack-xs { display: flex; flex-direction: column; gap: var(--space-xs); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-sm); }
.stack-md { display: flex; flex-direction: column; gap: var(--space-md); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-lg); }

.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.row-end { display: flex; align-items: flex-end; justify-content: space-between; }
.row-start { display: flex; align-items: flex-start; justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

.pt-md { padding-top: var(--space-md); }
.pt-xl { padding-top: var(--space-xl); }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }

/* Section header: eyebrow label + headline, used across every screen */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
}

.section-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-label-sm-size);
  line-height: var(--t-label-sm-lh);
  letter-spacing: var(--ls-widest);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--section-accent);
}

.section-head .eyebrow .dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--section-accent);
}

.section-head .eyebrow .dot.is-square { border-radius: 0; }

.section-head h2 {
  margin-top: 0;
}

/* Generic chips used as metadata ribbons */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: var(--t-label-sm-size);
  line-height: var(--t-label-sm-lh);
  letter-spacing: var(--t-label-sm-ls);
  font-weight: 600;
  text-transform: uppercase;
  background: var(--c-surface-high);
  color: var(--c-on-surface-variant);
  white-space: nowrap;
}

.chip.is-square { border-radius: 0; }
.chip.is-pill { border-radius: var(--r-full); }
.chip.is-primary { background: var(--c-primary); color: var(--c-on-primary); }
.chip.is-primary-container { background: var(--c-primary-container); color: var(--c-on-primary-container); }
.chip.is-primary-fixed { background: var(--c-primary-fixed); color: var(--c-on-primary-fixed); }
.chip.is-tertiary { background: var(--c-tertiary); color: var(--c-on-tertiary); }
.chip.is-tertiary-container { background: var(--c-tertiary-container); color: var(--c-on-tertiary-container); }
.chip.is-tertiary-fixed { background: var(--c-tertiary-fixed); color: var(--c-on-tertiary-fixed); }
.chip.is-secondary-fixed { background: var(--c-secondary-fixed); color: var(--c-on-secondary-fixed); }
.chip.is-ink { background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); }
.chip.is-on-surface { background: var(--c-on-surface); color: var(--c-surface); }
.chip.is-white { background: var(--c-surface-lowest); color: var(--c-on-surface); box-shadow: var(--sh-sm); }
.chip.is-error { background: var(--c-error-container); color: var(--c-on-error-container); }
.chip.is-lime { background: var(--c-lime); color: var(--c-on-surface); }
.chip.is-coral { background: var(--c-coral); color: var(--c-surface); }
.chip.is-accent { background: var(--section-accent); color: var(--section-on-accent); }
.chip.is-outline-dark { background: rgb(227 226 223 / 0.2); color: inherit; }
.chip.is-md { font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--t-label-md-ls); font-weight: 700; padding: 0.25rem 0.625rem; }
.chip.is-tiny { font-size: 9px; }

/* Buttons: primary editorial CTA + ghost action */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-lg);
  font-family: var(--font-mono);
  font-size: var(--t-label-lg-size);
  line-height: var(--t-label-lg-lh);
  letter-spacing: var(--t-label-lg-ls);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--sh-md);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: pointer;
}

.btn:active { transform: scale(0.98); }
.btn.is-block { width: 100%; }
.btn.is-square { border-radius: 0; }
.btn.is-md { font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--t-label-md-ls); padding: 0.625rem 1rem; }
.btn.is-sm { font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); padding: 0.5rem 1rem; border-radius: var(--r-lg); }
.btn.is-container { background: var(--c-primary-container); color: var(--c-on-primary-container); }
.btn.is-tertiary { background: var(--c-tertiary); color: var(--c-on-tertiary); }
.btn.is-ink { background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); }
.btn.is-on-surface { background: var(--c-on-surface); color: var(--c-surface); }
.btn.is-surface { background: var(--c-surface); color: var(--c-on-surface); }
.btn.is-ghost { background: var(--c-surface-high); color: var(--c-on-surface); box-shadow: none; }
.btn.is-white { background: var(--c-surface-lowest); color: var(--c-on-surface); box-shadow: var(--sh-sm); }
.btn.is-coral { background: var(--c-coral); color: var(--c-surface); }
.btn.is-accent { background: var(--section-accent); color: var(--section-on-accent); }
.btn.is-between { justify-content: space-between; }
.btn.is-hard { border: 2px solid var(--c-ink); border-radius: 0; box-shadow: none; }
.btn.is-hard:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--c-ink); }

@media (hover: hover) {
  .btn:hover { background: var(--c-primary-container); color: var(--c-on-primary-container); }
  .btn.is-ghost:hover { background: var(--c-surface-highest); color: var(--c-on-surface); }
  .btn.is-ink:hover, .btn.is-on-surface:hover { background: var(--c-primary); color: var(--c-on-primary); }
  .btn.is-white:hover, .btn.is-surface:hover { background: var(--c-surface-container); color: var(--c-on-surface); }
  .btn.is-tertiary:hover { background: var(--c-tertiary-container); color: var(--c-on-tertiary-container); }
  .btn.is-coral:hover { background: var(--c-primary-container); }
}

/* Pulse / ping dots used in tickers and stamps */
.dot-live {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-primary);
  animation: pulse 2s var(--ease) infinite;
}

.dot-live.is-lg { width: 0.625rem; height: 0.625rem; }
.dot-live.is-ping { animation: ping 1s var(--ease) infinite; }
.dot-live.is-tertiary-fixed { background: var(--c-tertiary-fixed); }
.dot-live.is-tertiary-container { background: var(--c-tertiary-container); }
.dot-live.is-surface { background: var(--c-surface); }
.dot-live.is-green { background: var(--c-live); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dot-live { animation: none; }
}

/* Glow blobs behind dark cards */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  background: rgb(180 30 4 / 0.2);
}

.glow.is-tr { top: -3rem; right: -3rem; width: 12rem; height: 12rem; }
.glow.is-br { bottom: -2.5rem; right: -2.5rem; width: 10rem; height: 10rem; }
.glow.is-tl { top: -3rem; left: -3rem; width: 12rem; height: 12rem; background: rgb(204 255 0 / 0.1); }
.glow.is-primary-container { background: var(--c-primary-container); filter: blur(24px); }
.glow.is-fixed { background: rgb(255 218 211 / 0.4); filter: blur(24px); }

/* a single long word in a display headline wraps (hyphenated) instead of widening the page */
.t-display-xl, .t-display-lg, .t-headline-lg, .article-title { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

/* desktop-only fragments (shown by desktop.css ≥ 1024px) */
.is-desk,
.broadsheet,
.footer-legal .nav-legal,
.footer-blurb,
.footer-col,
.footer-chips .chip.is-press { display: none; }
.dk { display: none; }