/* ==========================================================================
   Sutra, Centre for Policy, Systems and Social Development
   Dark editorial system. Self-hosted type, no build step.

   Display: Clash Display (Indian Type Foundry, ITF Free Font License)
   Body:    Switzer      (Indian Type Foundry, ITF Free Font License)
   Devanagari: Tiro Devanagari Hindi (SIL Open Font License)

   Contrast, measured against #161514:
     #F4F0EA  16.3:1   body text, passes AAA
     #D2654A   5.0:1   accent text and links on dark, passes AA
     #A8432B   3.0:1   FILLS AND BORDERS ONLY, never text on dark
   ========================================================================== */

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Variable.woff2") format("woff2-variations");
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Variable.woff2") format("woff2-variations");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiro Devanagari Hindi";
  src: url("../fonts/TiroDevanagariHindi-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+25CC, U+A830-A839;
}

:root {
  --ink:        #161514;   /* deepest ground */
  --ink-2:      #221F1D;   /* raised panels */
  --ink-3:      #2B2B2B;   /* borders on dark */
  --bone:       #F4F0EA;   /* text on dark, ivory ground */
  --bone-2:     #E7E0D6;
  --madder:     #A8432B;   /* fills, rules, never text on dark */
  --ember:      #D2654A;   /* accent text and links on dark */
  --dim:        #A49C92;   /* secondary text on dark, 7.4:1 */
  --dim-ink:    #5C5650;   /* secondary text on ivory */

  --display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --body: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --deva: "Tiro Devanagari Hindi", serif;

  --wrap: 82rem;
  --gutter: 1.5rem;
  --pad: 3.25rem;
}
@media (min-width: 48rem) { :root { --pad: 5.25rem; --gutter: 2.5rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

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

/* ---- Display type ---- */
h1, h2, h3, h4 {
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* Clash Display is reserved for H1, H2, the statement band and the figures,
   so headings have contrast instead of every level shouting. */
h1, h2 { font-family: var(--display); }
h1 { font-size: clamp(2.125rem, 1.685rem + 1.88vw, 3.375rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 1.442rem + 1.32vw, 2.625rem); line-height: 1.15; letter-spacing: -.01em; }
h3 { font-size: clamp(1.125rem, 1.037rem + .38vw, 1.375rem); line-height: 1.25; font-weight: 600; }
h4 { font-family: var(--body); font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ember); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 2px; }

.lede { font-size: clamp(1.125rem, 1.081rem + .19vw, 1.25rem); line-height: 1.55; color: var(--dim); max-width: 52ch; }
.dim { color: var(--dim); }
.deva { font-family: var(--deva); }

.skip-link {
  position: absolute; left: .5rem; top: -5rem; z-index: 400;
  background: var(--bone); color: var(--ink); padding: .9rem 1.4rem;
  font-weight: 600; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 60rem; }
section { padding-block: var(--pad); }

.band-ink   { background: var(--ink); }
.band-raise { background: var(--ink-2); }
.band-madder{ background: var(--madder); color: var(--bone); }
.band-bone  { background: var(--bone); color: var(--ink); }
.band-bone h1, .band-bone h2, .band-bone h3 { color: var(--ink); }
.band-bone a { color: var(--madder); }
.band-bone .lede, .band-bone .dim { color: var(--dim-ink); }

/* ---- Jaali: the signature lattice, built from the logo's thread geometry --- */
.jaali {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<g fill='none' stroke='%23A8432B' stroke-width='1'>\
<path d='M60 0 L120 60 L60 120 L0 60 Z'/>\
<path d='M60 20 L100 60 L60 100 L20 60 Z'/>\
<circle cx='60' cy='60' r='18'/>\
<path d='M0 0 L20 20 M120 0 L100 20 M0 120 L20 100 M120 120 L100 100'/>\
<path d='M60 0 V20 M60 100 V120 M0 60 H20 M100 60 H120'/>\
</g></svg>");
  background-size: 120px 120px;
  opacity: .14;
}
.jaali-soft { opacity: .07; }
.has-jaali { position: relative; overflow: hidden; }
.has-jaali > .wrap { position: relative; z-index: 1; }

/* A single madder hairline used as a divider, not as decoration on every block */
.hair { border: 0; border-top: 1px solid var(--ink-3); margin: 0; }
.hair-madder { border: 0; border-top: 1px solid var(--madder); margin: 0; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(22,21,20,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--ink-3);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.1rem; position: relative; }
.site-header.is-compact .wrap { padding-block: .6rem; }
.brand { display: block; line-height: 0; }
.brand img { width: 196px; transition: width .2s ease; }
.site-header.is-compact .brand img { width: 158px; }
@media (max-width: 30rem) { .brand img { width: 150px; } }

.site-nav ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  font-size: .9375rem; font-weight: 500; color: var(--bone); text-decoration: none;
  padding: .7rem .8rem; display: block; min-height: 2.75rem; line-height: 1.4rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ember); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--madder); color: var(--ember); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--body); font-size: .9375rem; font-weight: 500;
  padding: .85rem 1.75rem; min-height: 3rem; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; border-radius: 2px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-solid { background: var(--madder); color: var(--bone); }
.btn-solid:hover { background: var(--ember); color: var(--ink); }
.btn-ghost { border-color: var(--ink-3); color: var(--bone); }
.btn-ghost:hover { border-color: var(--ember); color: var(--ember); }
.band-bone .btn-ghost { border-color: rgba(22,21,20,.25); color: var(--ink); }
.band-bone .btn-ghost:hover { border-color: var(--madder); color: var(--madder); }
.band-madder .btn-ghost { border-color: rgba(244,240,234,.5); color: var(--bone); }
.site-nav a.btn { border-bottom-width: 1.5px; }
.site-nav a.btn-solid:hover { color: var(--ink); }

/* ---- Mobile menu ---- */
.nav-toggle {
  display: none; align-items: center; gap: .5rem; background: transparent;
  color: var(--bone); border: 1.5px solid var(--ink-3); border-radius: 2px;
  font-family: var(--body); font-size: .9375rem; font-weight: 600;
  padding: .65rem 1rem; min-height: 3rem; cursor: pointer;
}
.nav-toggle svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 2; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 64rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%; display: none;
    background: var(--ink); border-top: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.5rem; }
  .site-nav li { border-bottom: 1px solid var(--ink-3); }
  .site-nav li:last-child { border-bottom: 0; padding-top: 1rem; }
  .site-nav a { padding: 1rem .25rem; font-size: 1.0625rem; border-bottom: 0; }
}

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--ink-3); }
@media (min-width: 60rem) { .hero { max-height: 85vh; display: flex; align-items: center; } }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { max-width: 14ch; margin-bottom: .3em;
    font-size: clamp(2.5rem, 1.706rem + 3.38vw, 4.75rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 500; }
.hero .lede { max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.5rem; }

/* The huge outlined Devanagari signature */
.deva-mark {
  position: absolute; right: -.08em; bottom: -.22em; z-index: 1;
  font-family: var(--deva); font-size: clamp(14rem, 30vw, 32rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1px rgba(210,101,74,.22);
  pointer-events: none; user-select: none;
}

/* Thread animation: strokes draw once, then stop */
.thread-draw path, .thread-draw circle {
  stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000);
  animation: draw 1.6s cubic-bezier(.65,0,.35,1) forwards;
}
.thread-draw .d2 { animation-delay: .18s; }
.thread-draw .d3 { animation-delay: .36s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- Statement band ---- */
.statement { padding-block: clamp(3.5rem, 9vw, 7rem); }
.statement p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.625rem, 1.273rem + 1.5vw, 2.625rem);
  line-height: 1.15; letter-spacing: -.01em; max-width: 26ch; margin: 0;
}

/* ---- Expanding rows, replacing card grids ---- */
.rows { border-top: 1px solid var(--ink-3); }
.row-item { border-bottom: 1px solid var(--ink-3); }
.row-item:last-child { border-bottom: 0; }
.row-item > summary, .row-head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.5rem); cursor: pointer; list-style: none;
}
.row-item > summary::-webkit-details-marker { display: none; }
.row-item h3 { margin: 0; font-family: var(--body); font-weight: 600;
  font-size: clamp(1.375rem, 1.243rem + .56vw, 1.75rem); letter-spacing: 0; transition: color .18s ease; }
.row-item[open] h3, .row-item > summary:hover h3 { color: var(--ember); }
.row-sign { font-family: var(--display); font-size: 1.75rem; color: var(--madder); line-height: 1; transition: transform .2s ease; }
.row-item[open] .row-sign { transform: rotate(45deg); }
.row-body { padding-bottom: 2rem; max-width: 58ch; color: var(--dim); }
.row-body a { font-weight: 600; }

/* ---- Oversized figures ---- */
.figures { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 60rem) { .figures { grid-template-columns: repeat(3, 1fr); } }
.fig-n {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3.25rem, 2.722rem + 2.25vw, 4.75rem);
  line-height: 1; letter-spacing: -.02em; color: var(--ember); display: block;
}
.fig-t { display: block; margin-top: 1rem; font-size: 1.0625rem; max-width: 30ch; }
.fig-s { display: block; margin-top: .75rem; font-size: .8125rem; color: var(--dim); }

/* ---- Editorial split ---- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1.3fr .7fr; }
  .split-flip > *:first-child { order: 2; }
}

/* Duotone treatment, applied uniformly to every photograph */
.duo { position: relative; overflow: hidden; background: var(--ink-2); }
.duo img { width: 100%; filter: grayscale(1) contrast(1.08) brightness(.82); mix-blend-mode: luminosity; }
.duo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, var(--madder), #4A2317); mix-blend-mode: color; pointer-events: none; }
.duo figcaption { font-size: .75rem; color: var(--dim); padding-top: .6rem; }

/* Slim decorative panel. Deliberately not a large empty image box: it reads
   as a rule drawn from the jaali, and a real photograph can replace it later. */
.plate { position: relative; overflow: hidden; height: 7rem; background: var(--ink-2);
         border-left: 2px solid var(--madder); }
.plate .jaali { opacity: .34; }
@media (min-width: 60rem) { .plate { height: 10rem; } }
.band-bone .plate { background: #EDE6DC; }

/* ---- Horizontal scroll strip ---- */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 22rem); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.5rem; scrollbar-width: thin; }
.strip > * { scroll-snap-align: start; }
.strip-card { background: var(--ink-2); border: 1px solid var(--ink-3); padding: 2rem; text-decoration: none; color: var(--bone); display: block; }
.strip-card:hover { border-color: var(--madder); }
.strip-card .n { font-family: var(--display); font-size: 2.5rem; color: var(--madder); line-height: 1; display: block; margin-bottom: 1rem; }
.strip-card h3 { font-size: clamp(1.125rem, 1.037rem + .38vw, 1.375rem); }
.strip-card p { color: var(--dim); font-size: .9375rem; margin: .5rem 0 0; }

/* ---- Thread of steps ---- */
.steps { display: grid; gap: 2.5rem; position: relative; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: .75rem; height: 1px; background: var(--madder); opacity: .4; display: none; }
@media (min-width: 56rem) { .steps::before { display: block; } }
.step { position: relative; }
.step .dot { width: 1.5rem; height: 1.5rem; border: 2px solid var(--madder); background: var(--ink); border-radius: 50%; position: relative; z-index: 1; }
.step h3 { margin: 1.25rem 0 .5rem; }
.step p { color: var(--dim); margin: 0; max-width: 32ch; }

/* ---- Magazine insight layout ---- */
/* Cards are containers, never links. The title carries the link and stretches
   over the card with ::after, so the author link inside stays clickable and
   no anchor is ever nested inside another. */
.lead-story { display: grid; gap: 2rem; position: relative; }
@media (min-width: 60rem) { .lead-story { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3.5rem; } }
.lead-story h3 { font-size: clamp(1.375rem, 1.243rem + .56vw, 1.75rem); font-family: var(--body); font-weight: 600; letter-spacing: 0; margin: .6rem 0 0; }
.lead-story h3 a { color: inherit; text-decoration: none; }
.lead-story h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.lead-story:hover h3 a { color: var(--ember); }
.lead-story .dek { color: var(--dim); font-size: 1.0625rem; margin: .6rem 0 0; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li:first-child { border-top: 1px solid var(--ink-3); }
.post-list li { border-bottom: 1px solid var(--ink-3); position: relative; display: grid; gap: .4rem; padding-block: 1.4rem; }
.post-list h3 { margin: 0; font-size: clamp(1.125rem, 1.037rem + .38vw, 1.375rem); letter-spacing: 0; font-weight: 600; }
.post-list h3 a { color: var(--bone); text-decoration: none; }
.post-list h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.post-list li:hover h3 a { color: var(--ember); }
.band-bone .post-list h3 a { color: var(--ink); }

/* Anything that must stay clickable sits above the stretched link. */
.byline a, .post-list .byline a, .lead-story .byline a { position: relative; z-index: 1; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.byline a:hover { color: var(--ember); }
.kicker { font-family: var(--body); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.byline { font-size: .8125rem; color: var(--dim); }
.band-bone .kicker { color: var(--madder); }
.band-bone .post-list { border-color: rgba(22,21,20,.14); }
.band-bone .post-list li { border-color: rgba(22,21,20,.14); }

.band-bone .byline, .band-bone .fig-s, .band-bone .sources { color: var(--dim-ink); }
.band-bone .step p, .band-bone .row-body { color: var(--dim-ink); }

/* ---- Chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-family: var(--body); font-size: .875rem; font-weight: 600;
  padding: .6rem 1.1rem; min-height: 2.75rem; display: inline-flex; align-items: center;
  border: 1.5px solid var(--ink-3); background: transparent; color: var(--bone);
  border-radius: 999px; cursor: pointer; text-decoration: none;
}
.chip:hover { border-color: var(--ember); color: var(--ember); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--madder); border-color: var(--madder); color: var(--bone); }
.band-bone .chip { border-color: rgba(22,21,20,.2); color: var(--ink); }
.band-bone .chip[aria-pressed="true"] { background: var(--madder); color: var(--bone); border-color: var(--madder); }

/* ---- Post reading page, ivory ---- */
.post-head { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6.5rem); border-bottom: 1px solid var(--ink-3); }
.post-head .wrap { position: relative; z-index: 1; }
.post-head h1 { font-size: clamp(2.125rem, 1.685rem + 1.88vw, 3.375rem); max-width: 20ch; }
.post-head .dek { font-size: clamp(1.125rem, 1.081rem + .19vw, 1.25rem); color: var(--dim); max-width: 56ch; line-height: 1.55; }
.post-meta { display: flex; align-items: center; gap: .9rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--madder); max-width: 32rem; font-size: .9375rem; }
.post-meta strong { display: block; }
.post-meta span.r { color: var(--dim); }

.reading { background: var(--bone); color: var(--ink); }
.article { max-width: 58ch; font-size: 1.1875rem; line-height: 1.72; }
@media (min-width: 48rem) { .article { font-size: 1.25rem; } }
.article p { hyphens: none; text-align: left; }
.article h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); margin-top: 2em; color: var(--ink); }
.article h3 { font-size: 1.3125rem; margin-top: 1.7em; color: var(--ink); }
.article ul, .article ol { padding-left: 1.25em; margin: 0 0 1.3em; }
.article li { margin-bottom: .5em; }
.article li::marker { color: var(--madder); font-weight: 700; }
.article a { color: var(--madder); }
.article blockquote, .pullquote {
  margin: 2em 0; padding-left: 1.25em; border-left: 3px solid var(--madder);
  font-family: var(--display); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink);
}
.article > header { display: none; }

.sources { max-width: 58ch; margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(22,21,20,.18); font-size: .9375rem; color: var(--dim-ink); }
.sources h2 { font-family: var(--body); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: .9rem; }
.sources ol { padding-left: 1.25em; }
.sources li { margin-bottom: .5em; }
.sources a { color: var(--madder); }

.author-card { max-width: 58ch; margin-top: 3.5rem; display: flex; gap: 1.25rem; }

/* ---- Monogram ---- */
.mono { width: 3rem; height: 3rem; flex: none; border: 1px solid var(--madder); color: var(--ember); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 1rem; border-radius: 50%; }
.mono-lg { width: 7rem; height: 7rem; font-size: 2rem; }
.band-bone .mono { color: var(--madder); }

/* ---- Footer ---- */
.site-footer { background: var(--ink-2); padding-block: 4.5rem 2rem; font-size: .9375rem; color: var(--dim); }
.site-footer .brand img { width: 184px; }
.site-footer h2, .site-footer h3 { font-family: var(--body); color: var(--bone); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.1rem; font-weight: 600; }
.site-footer a { color: var(--dim); text-decoration: none; display: inline-block; min-height: 1.5rem; padding-block: .3rem; }
.site-footer a:hover { color: var(--ember); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2.5rem; }
.foot-legal { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-3); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .8125rem; }
.social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.social a { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink-3); padding: 0; border-radius: 2px; }
.social a:hover { border-color: var(--madder); }
.social svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Scroll reveal ---- */
/* Reveals apply only once JavaScript has confirmed itself by adding .js to
   the html element. Without JavaScript nothing is ever hidden. */
html.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---- Forms ---- */
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-size: .9375rem; font-weight: 600; margin-bottom: .45rem; }
.field label span[aria-hidden] { color: var(--ember); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--bone); background: var(--ink-2);
  border: 1.5px solid var(--ink-3); border-radius: 2px; padding: .8rem .95rem; min-height: 3rem;
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--dim); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--ember); }
#formStatus:empty { display: none; }
#captchaQuestion { font-weight: 700; color: var(--ember); }

/* ==========================================================================
   Accessibility panel
   ========================================================================== */
.a11y-trigger {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 300;
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--madder);
  background: var(--ink-2); color: var(--ember); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.a11y-trigger svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.a11y-trigger:hover { background: var(--madder); color: var(--bone); }
.a11y-panel {
  position: fixed; left: 1rem; bottom: 4.5rem; z-index: 301;
  width: min(20rem, calc(100vw - 2rem));
  background: var(--ink-2); border: 1px solid var(--ink-3); border-top: 3px solid var(--madder);
  padding: 1.25rem; color: var(--bone);
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-family: var(--body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
.a11y-group { margin-bottom: 1rem; }
.a11y-group:last-child { margin-bottom: 0; }
.a11y-group > p { font-size: .75rem; font-weight: 600; margin: 0 0 .5rem; color: var(--dim); }
.a11y-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.a11y-btn { font-family: var(--body); font-size: .875rem; font-weight: 600; padding: .5rem .85rem; min-height: 2.5rem; border: 1.5px solid var(--ink-3); background: transparent; color: var(--bone); border-radius: 2px; cursor: pointer; }
.a11y-btn:hover { border-color: var(--ember); color: var(--ember); }
.a11y-btn[aria-pressed="true"] { background: var(--madder); border-color: var(--madder); color: var(--bone); }

html[data-a11y-contrast="on"] {
  --ink: #000; --ink-2: #000; --ink-3: #FFF; --bone: #FFF; --dim: #FFF; --ember: #FFD9CC;
}
html[data-a11y-contrast="on"] .band-bone { background: #FFF; color: #000; }
html[data-a11y-contrast="on"] .jaali { opacity: .25; }
html[data-a11y-grayscale="on"] body { filter: grayscale(1); }
html[data-a11y-links="on"] main a { background: #FFE98F; color: #161514; text-decoration: underline; text-decoration-thickness: 2px; padding: 0 .15em; }

/* ---- Breadcrumbs ---- */
.crumbs { font-size: .8125rem; color: var(--dim); margin: 0 0 1.5rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: .45rem; color: var(--ink-3); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--ember); text-decoration: underline; }
.crumbs [aria-current] { color: var(--bone); }
.band-bone .crumbs, .band-bone .crumbs a { color: var(--dim-ink); }
.band-bone .crumbs [aria-current] { color: var(--ink); }


/* ---- One line per boundary: corrections ---- */
.btn + .btn { margin-left: .5rem; }
@media (max-width: 30rem) { p > .btn { display: flex; width: 100%; margin: 0 0 .625rem; } p > .btn + .btn { margin-left: 0; } }

@media (max-width: 64rem) {
  .site-nav { border-top: 1px solid var(--ink-3); border-bottom: 0; box-shadow: 0 12px 24px rgba(0,0,0,.4); }
  .site-header.is-compact { box-shadow: none; }
}

.strip { scrollbar-width: none; -ms-overflow-style: none; }
.strip::-webkit-scrollbar { width: 0; height: 0; display: none; }
.strip-wrap { position: relative; }
.strip-wrap::after { content: ""; position: absolute; top: 0; bottom: 1.5rem; right: 0; width: 5rem;
  background: linear-gradient(90deg, transparent, var(--ink)); pointer-events: none; }
.strip-nav { display: flex; gap: .5rem; margin-top: 1.25rem; }
.strip-btn { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--bone); border: 1.5px solid var(--ink-3); border-radius: 2px; cursor: pointer; }
.strip-btn:hover:not(:disabled) { border-color: var(--ember); color: var(--ember); }
.strip-btn:disabled { opacity: .35; cursor: default; }
.strip-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 30rem) { .a11y-trigger { bottom: .75rem; left: .75rem; } .site-footer { padding-bottom: 5rem; } }