/* ============ tokens ============ */
/* Two themes. :root carries light; the dark values are declared once and applied
   twice, by the media query for readers who never touch the switch and by
   [data-theme] for readers who do. The :not([data-theme="light"]) guard is what
   lets an explicit light choice win over a dark system preference. */
:root{
  color-scheme:light;
  --paper:#F4F1EA;
  --paper-2:#EAE5D9;
  --ink:#1B211C;
  --muted:#59615A;
  --forest:#1E2922;
  --forest-2:#151F19;
  --on-forest:#DFDED1;
  --on-forest-muted:#B3B9A9;
  --laterite:#9C3B21;
  --laterite-lit:#C85F3F;
  --brass:#8F6E24;
  --brass-lit:#CBA553;
  --rule:rgba(27,33,28,.20);
  --hair:rgba(27,33,28,.10);
  --hair-inv:rgba(223,222,209,.16);

  /* --logo is the brand colour and the only accent on the page. Light mode uses the
     raw ink of the logo files, #924618, which is what that ink was drawn for: 5.98:1
     on this paper. Dark mode keeps the hue and saturation and lifts the lightness,
     because the raw ink manages only 1.7:1 on dark paper. The mark is painted with
     it too (see .brand-mark), so the logo and every accent are literally one colour.
     --logo-lit is the hover state and moves away from the paper in each theme:
     deeper on light, brighter on dark. */
  --logo:#924618;
  --logo-lit:#7E3C13;
  --accent:var(--logo);--accent-lit:var(--logo-lit);

  /* the footer and the contact band are forest in both themes, so the mark and the
     accents that sit on them need the lifted ink whatever the page is doing. */
  --logo-on-dark:#DD7231;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mal:"Anek Malayalam","Noto Sans Malayalam",var(--sans);
  --mal-text:"Noto Sans Malayalam","Anek Malayalam",var(--sans);

  --gut:clamp(22px,5vw,92px);
  --maxw:1400px;
  --head-h:60px;
  /* 1 in either dark theme, 0 in light. A flag, not a colour: the theme icon reads it. */
  --dark:0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#12160F;--paper-2:#191E16;--ink:#E6E4D8;--muted:#9B998C;
    --forest:#0C110D;--forest-2:#080C09;--on-forest:#E6E4D8;--on-forest-muted:#939B8C;
    --laterite:#CE5D3D;--laterite-lit:#E07354;--brass:#C9A44E;--brass-lit:#D8B761;
    --rule:rgba(230,228,216,.22);--hair:rgba(230,228,216,.11);--hair-inv:rgba(230,228,216,.14);
    --logo:#DD7231;--logo-lit:#E5905D;--dark:1;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#12160F;--paper-2:#191E16;--ink:#E6E4D8;--muted:#9B998C;
  --forest:#0C110D;--forest-2:#080C09;--on-forest:#E6E4D8;--on-forest-muted:#939B8C;
  --laterite:#CE5D3D;--laterite-lit:#E07354;--brass:#C9A44E;--brass-lit:#D8B761;
  --rule:rgba(230,228,216,.22);--hair:rgba(230,228,216,.11);--hair-inv:rgba(230,228,216,.14);
  --logo:#DD7231;--logo-lit:#E5905D;--dark:1;
}
/* the permanently forest bands keep dark form controls, scrollbars and carets
   even when the rest of the page is light. */
.sect-dark,.band,.foot,.player{color-scheme:dark}

/* ============ base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:clamp(17px,.9vw + 14.4px,19.5px);
  line-height:1.68;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.05;letter-spacing:-.015em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2.5px solid var(--laterite-lit);outline-offset:3px;border-radius:1px}
::selection{background:var(--accent);color:var(--paper)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:absolute;left:var(--gut);top:-60px;z-index:99;
  background:var(--laterite);color:#F5F1E9;font-family:var(--sans);font-size:.85rem;
  padding:10px 16px;text-decoration:none;transition:top .16s ease;
}
.skip:focus{top:10px}

/* bilingual */
/* English only for now. The Malayalam copy is left in the markup on purpose.
   To bring the second language back: swap the rule below for the pair
     html[data-lang="en"] .ml{display:none!important}
     html[data-lang="ml"] .en{display:none!important}
   restore the .langsw buttons in the header and the language block in the script,
   put data-lang="en" back on <html>, and put Anek Malayalam + Noto Sans Malayalam
   back in the Google Fonts href. */
.ml,.foot-mal{display:none!important}
.ml{font-family:var(--mal-text);line-height:1.85;letter-spacing:0;font-weight:400}
h1 .ml,h2 .ml,h3 .ml,h4 .ml,.hero-word,.foot-mal,.band-txt.ml,.rail .ml{font-family:var(--mal)}
h1 .ml,h2 .ml,h3 .ml,h4 .ml{line-height:1.4;font-weight:500}

/* ============ pattern layer ============ */
.strap{display:block;height:26px;color:var(--accent);opacity:.34;border-block:1px solid var(--hair)}
.strap svg{display:block;width:100%;height:24px}
.pat{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* The hero lattice. Same tile and same brass as the footer, but the hero ground
   flips with the theme and cream paper shows ink far more readily than dark paper
   does, so the two themes need different opacities to land at the same subtlety.
   Measured against the footer, which is --brass-lit at .10 on forest. */
.pat-hero{color:var(--brass-lit);opacity:.02;mask-image:radial-gradient(125% 95% at 88% -4%,#000 0%,transparent 68%)}
:root[data-theme="dark"] .pat-hero{opacity:.07}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pat-hero{opacity:.07}}
.pat-foot{color:var(--brass-lit);opacity:.10}
.pat-jaali{color:var(--accent);opacity:.22}
/* the About vision band's strapwork. Its pattern lives inside that svg, so this colour reaches it. */
.pat-band{color:var(--brass-lit);opacity:.16}

/* rosette watermark. Its top edge sits on the section's top edge, so the circle
   rides beside the heading and the opening paragraph instead of centring on the
   facts list. */
.rosette{
  position:absolute;pointer-events:none;color:var(--accent);opacity:.07;
  width:min(46vw,620px);right:calc(var(--gut) * -0.35);top:0;
}
@media (max-width:900px){.rosette{display:none}}
/* clip, not hidden: hidden would make .sect a scroll container and the sticky
   .rail inside it would stop sticking. This is what stops the rosette bleed
   from giving the whole page a horizontal scrollbar. */
.sect{position:relative;overflow-x:clip}

.label{
  font-family:var(--sans);font-size:.79rem;letter-spacing:.028em;
  color:var(--muted);line-height:1.45;font-variant-numeric:tabular-nums;
}
.lede{font-size:1.16em;line-height:1.52;max-width:38ch}
.body{max-width:58ch;color:var(--muted)}
.body.ml{max-width:44ch}
.link{
  font-family:var(--sans);font-size:.87rem;font-weight:500;text-decoration:none;
  color:var(--accent);border-bottom:1.5px solid currentColor;padding-bottom:2px;
  display:inline-block;transition:color .16s ease,border-color .16s ease;
}
.link:hover{color:var(--ink);border-bottom-color:var(--ink)}
.on-dark .link{color:var(--brass-lit)}
.on-dark .link:hover{color:var(--on-forest);border-bottom-color:var(--on-forest)}

/* ============ header ============ */
.top{
  position:sticky;top:0;z-index:60;
  /* --paper-2 so the sticky bar is seamless against the hero at scroll top */
  background:color-mix(in srgb,var(--paper-2) 92%,transparent);
  backdrop-filter:blur(12px) saturate(1.1);
}
.top-in{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
/* the mark is <use href="#logo">, so it inherits colour like every other ornament */
.brand-mark,.foot-mark{display:block;flex:none;color:var(--logo)}
.brand-mark{width:50px;height:48px}
.brand-rule{width:1px;align-self:stretch;background:var(--rule);margin:2px 0}
.brand-name{font-family:var(--serif);font-size:1rem;line-height:1.24;font-weight:400}
.brand-name span{display:block}
.nav{display:flex;gap:clamp(18px,2.6vw,40px);align-items:center;justify-content:center}
.nav a{
  font-family:var(--sans);font-size:.9rem;text-decoration:none;white-space:nowrap;
  padding:5px 0;border-bottom:1.5px solid transparent;
}
.nav a:hover{border-bottom-color:var(--rule)}
/* any value: inner pages mark their own entry "page", the scroll-spy would set "true" */
.nav a[aria-current]{border-bottom-color:var(--accent)}
.acts{display:flex;align-items:center;gap:14px;justify-self:end}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;background:none;border:none;cursor:pointer;color:var(--ink);
}
.icon-btn:hover{color:var(--accent-lit)}
/* theme switch: an .icon-btn that shows the theme it switches to. The two glyphs
   cross-fade and turn on --dark, so the icon is right before the script runs. */
.tog-sun,.tog-moon{
  transform-box:view-box;transform-origin:center;
  transition:opacity .28s ease,transform .5s cubic-bezier(.2,.7,.2,1);
}
.tog-sun{opacity:var(--dark);transform:rotate(calc((1 - var(--dark)) * -90deg)) scale(calc(.55 + var(--dark) * .45))}
.tog-moon{opacity:calc(1 - var(--dark));transform:rotate(calc(var(--dark) * 90deg)) scale(calc(1 - var(--dark) * .45))}
@media (prefers-reduced-motion:reduce){.tog-sun,.tog-moon{transition:none}}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:.88rem;font-weight:500;text-decoration:none;
  background:var(--logo);color:var(--paper);
  padding:12px 26px;border-radius:999px;border:1px solid var(--logo);
  transition:background .18s ease,color .18s ease;
}
.pill:hover{background:transparent;color:var(--logo)}
.pill svg{width:20px;height:9px}
.burger{
  display:none;background:none;border:1px solid var(--rule);border-radius:999px;
  padding:8px 14px;cursor:pointer;color:inherit;font-family:var(--sans);font-size:.82rem;
}
@media (max-width:1080px){
  .top-in{grid-template-columns:auto 1fr}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--rule);
    padding:4px var(--gut) 18px;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--hair)}
  .nav a[aria-current]{border-bottom-color:var(--hair);color:var(--accent)}
  .burger{display:block}
  .acts .pill{display:none}
}
@media (max-width:560px){
  .brand-mark{width:40px;height:38px}
  .brand-name{font-size:.86rem}
}
/* Small phones: the brand and the actions together outgrew the viewport. Tighten
   the gaps and the mark so every control still fits at 320px. */
@media (max-width:430px){
  .top-in{gap:10px;padding-inline:18px}
  .brand{gap:8px}
  .brand-mark{width:34px;height:33px}
  .brand-name{font-size:.8rem}
  .acts{gap:6px}
  .icon-btn{width:30px}
  .burger{padding:8px 11px}
}
/* Touch targets. Pointer-based readers keep the tighter desktop metrics. */
@media (pointer:coarse){
  .icon-btn,.burger{min-height:44px}
  .burger{display:inline-flex;align-items:center}
}

/* ============ hero ============ */
.hero{
  position:relative;overflow:hidden;
  background:var(--paper-2);color:var(--ink);
  min-height:calc(100svh - var(--head-h));
  display:flex;align-items:center;
  padding:clamp(24px,4vh,56px) 0 clamp(28px,5vh,64px);
}
@supports not (height:100svh){.hero{min-height:calc(100vh - var(--head-h))}}
.hero-in{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px);align-items:center;
}
@media (max-width:960px){
  .hero{min-height:0;padding-block:clamp(36px,6vh,64px) clamp(40px,6vh,72px)}
  .hero-in{grid-template-columns:1fr;gap:clamp(32px,6vw,52px)}
}
.hero-eyebrow{
  font-family:var(--sans);font-size:.76rem;font-weight:500;
  letter-spacing:.40em;text-transform:uppercase;color:var(--muted);
  margin:0 0 clamp(20px,3.2vh,36px);
}
.hero-eyebrow.ml{letter-spacing:.06em;text-transform:none;font-family:var(--mal-text)}
.hero h1{
  font-size:clamp(2.2rem,min(4.9vw,8.2vh),4.5rem);
  line-height:1.08;font-weight:400;letter-spacing:.035em;max-width:18ch;
}
.hero h1 .ml{max-width:15ch;font-size:.84em}
.hero-sub{
  margin:clamp(20px,3.2vh,36px) 0 0;max-width:44ch;
  font-family:var(--sans);font-size:clamp(.94rem,1.75vh,1.03rem);
  line-height:1.72;letter-spacing:.01em;color:var(--muted);
}
.hero-sub.ml{font-family:var(--mal-text);max-width:38ch;line-height:1.86}
.hero-acts{margin-top:clamp(26px,4vh,46px)}

/* --- arch + calligraphy --- */
.hero-art{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center}
@media (max-width:560px){.hero-art{grid-template-columns:1fr}}
.arch{
  /* margin:0 because this is a <figure>; the UA default 1em 40px pushes it out of
     its column and clips it on phones. .plate resets the same way. */
  position:relative;width:100%;max-width:430px;justify-self:center;margin:0;
  aspect-ratio:5/7;max-height:min(66vh,620px);
  clip-path:url(#archClip);
}
.arch svg,.arch img{width:100%;height:100%;display:block;object-fit:cover}
.arch img{position:absolute;inset:0}
.hero-tag{
  font-family:var(--sans);font-size:.98rem;line-height:1.45;color:var(--ink);
  max-width:9ch;position:relative;z-index:3;
}
.hero-tag.ml{font-family:var(--mal-text);max-width:12ch;font-size:.92rem;line-height:1.7}
.hero-tag hr{border:none;height:1px;background:var(--rule);width:34px;margin:16px 0 0}
@media (max-width:560px){.hero-tag{max-width:none;text-align:center;margin-top:18px}.hero-tag hr{margin-inline:auto}}

/* Phones, on request: the illustration comes first and small, the words read below it, and the whole
   hero fits one screen. Sized in svh, not vh, so the browser's own toolbars are already accounted for. */
@media (max-width:700px){
  .hero{min-height:calc(100svh - var(--head-h));padding-block:clamp(14px,2.2svh,26px) clamp(18px,2.8svh,32px)}
  .hero-in{gap:clamp(14px,2.2svh,24px)}
  .hero-art{order:-1;grid-template-columns:1fr;gap:10px}
  /* the width comes from the height, since a stretched grid item ignores the aspect ratio */
  .arch{--arch-h:min(22svh,200px);height:var(--arch-h);width:calc(var(--arch-h) * 5 / 7);max-height:none;max-width:100%}
  .hero-tag{max-width:none;text-align:center;margin-top:0}
  .hero-tag hr{margin-inline:auto}
  .hero h1{font-size:clamp(1.5rem,4.4svh,2.2rem)}
  .hero-eyebrow{margin-bottom:clamp(10px,1.6svh,20px)}
  .hero-sub{margin-top:clamp(10px,1.6svh,18px);font-size:clamp(.86rem,1.9svh,.95rem);line-height:1.6}
  .hero-acts{margin-top:clamp(14px,2.2svh,24px)}
}

/* ============ editorial grid ============ */
.sect{padding:clamp(66px,9vw,132px) 0}
.sect-band{background:var(--paper-2)}
.sect-dark{background:var(--forest);color:var(--on-forest)}
.sect-dark .label,.sect-dark .body{color:var(--on-forest-muted)}
.grid{
  display:grid;
  grid-template-columns:minmax(160px,2.4fr) minmax(0,9.6fr);
  gap:clamp(30px,5vw,96px);
  align-items:start;
}
@media (max-width:880px){.grid{grid-template-columns:1fr;gap:22px}}
.rail{position:sticky;top:calc(var(--head-h) + 42px)}
@media (max-width:880px){.rail{position:static}}
.rail h2{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:400;letter-spacing:-.01em;margin-bottom:10px}
.rail .label{display:block;max-width:22ch}
.rail-orn{color:var(--accent);width:30px;height:30px;display:block;margin-bottom:16px;opacity:.85}

/* ============ statement ============ */
/* The heading and lede sit in the left column so the facts list starts level with the heading.
   The list's top rule meets the heading's cap top, not its line box: the letters start
   about --stmt-h × .119 below the box. That factor is Source Serif 4's, averaged over 768–1440px
   because optical sizing shifts it a little; re-measure if --serif changes. */
.stmt{--stmt-h:clamp(1.6rem,3.2vw,2.7rem)}
.stmt h3{font-size:var(--stmt-h);font-weight:400;letter-spacing:-.024em;max-width:22ch;margin-bottom:.55em}
.stmt h3 .ml{max-width:24ch;font-size:.86em}
.stmt .body{margin-top:clamp(28px,3.6vw,46px)}
.stmt-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px)}
.stmt-cols .facts{margin-top:calc(var(--stmt-h)*0.119)}
@media (max-width:700px){.stmt-cols{grid-template-columns:1fr}.stmt-cols .facts{margin-top:revert}}
.facts{border-top:1px solid var(--rule)}
.fact{display:grid;grid-template-columns:7.5rem 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair)}
.fact dt{font-family:var(--sans);font-size:.8rem;letter-spacing:.02em;color:var(--muted);padding-top:.3em}
.fact dd{margin:0;font-size:1rem;line-height:1.56}
.fact dd.ml{font-size:.92rem}
@media (max-width:520px){.fact{grid-template-columns:1fr;gap:3px}}

/* ============ programme ============ */
.prog{border-top:1px solid var(--rule)}
.prog-row{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr) 13rem 6rem;
  gap:clamp(16px,2.4vw,36px);align-items:baseline;
  padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--hair);
  text-decoration:none;transition:padding-left .2s ease;
}
.prog-row:hover{padding-left:10px}
.prog-row:hover .prog-t{color:var(--accent-lit)}
@media (max-width:900px){
  .prog-row{grid-template-columns:5.5rem 1fr;row-gap:6px}
  .prog-row .prog-v{grid-column:2}
  .prog-row .prog-a{grid-column:2}
}
.prog-d{font-family:var(--sans);font-size:.83rem;letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.4}
.prog-d b{display:block;font-weight:500;color:var(--ink);font-size:.95rem}
.prog-t{font-size:1.22rem;line-height:1.36;transition:color .16s ease}
.prog-t.ml{font-size:1.06rem}
.prog-v{font-family:var(--sans);font-size:.85rem;color:var(--muted);line-height:1.45}
.prog-a{font-family:var(--sans);font-size:.83rem;color:var(--laterite);white-space:nowrap}

/* ============ programme: episode list ============ */
/* Just Remember That, every episode, on programme.html. A real sequence, so the numbers stay, and
   the rows read across. The list is written out from reference/just-remember-that-episodes.json. */
.eps{
  list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));column-gap:clamp(18px,2.4vw,34px);
}
.eps a{
  display:grid;grid-template-columns:2.1em minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--hair);text-decoration:none;
}
.eps a:hover .ep-t{color:var(--accent-lit)}
.ep-n,.ep-d{font-family:var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.ep-n{font-size:.8rem}
.ep-t{font-size:.98rem;line-height:1.4;transition:color .16s ease}
.ep-d{font-size:.76rem}

/* ============ series: episode grid ============ */
/* just-remember-that.html: the same episodes as a YouTube-style grid, a 16:9 thumbnail with the
   running time in its corner and the title beneath. The thumbnails are copies in jrt/, not hot-linked
   from YouTube, so the CSP's img-src 'self' and privacy.html's single third party both still hold.
   The words come first in the markup so each link reads "Episode 1 Waste 0:45"; order lifts the
   thumbnail back above them. */
.ahero .hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
/* The series art is a wide title card, so it sits whole in a 16:10 .plate beside the text instead of
   in About's tall ogee, which could only crop it. No tag column either. Picture first on phones, as
   About's is. The column split is behind min-width so it cannot beat About's one-column stack. */
@media (min-width:821px){.jrt-hero .ahero-in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
@media (max-width:700px){.jrt-poster{order:-1}}

/* The episode player: a native <dialog>, so focus, Escape and the inert page behind it come free. It
   floats on a forest backdrop in both themes, hence on-dark and its place in the color-scheme rule.
   The width is also capped by the height, so a landscape phone still fits the whole 16:9 frame. */
.player{
  width:min(1100px,calc(100vw - 2 * var(--gut)),calc((100svh - 120px) * 16 / 9));max-width:none;
  padding:0;border:0;background:transparent;color:var(--on-forest);overflow:visible;
}
.player::backdrop{background:var(--forest-2);opacity:.92}
.player-bar{display:flex;align-items:center;gap:12px 22px;padding-bottom:12px}
.player-t{flex:1;margin:0;font-family:var(--sans);font-size:.92rem;line-height:1.4}
.player .icon-btn{color:var(--on-forest)}
.player .icon-btn:hover{color:var(--brass-lit)}
.player-v{aspect-ratio:16/9;background:var(--forest-2)}
.player-v iframe{display:block;width:100%;height:100%;border:0}
.vids-head{margin-bottom:clamp(28px,3.4vw,48px)}
.vids-head h2{font-size:clamp(1.6rem,3.2vw,2.7rem);letter-spacing:-.024em;margin-bottom:.4em}
.vids{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3vw,42px) clamp(14px,1.8vw,26px);
}
@media (max-width:1080px){.vids{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.vids{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vids a{display:flex;flex-direction:column;text-decoration:none}
.vid-th{
  order:-1;position:relative;display:block;aspect-ratio:16/9;overflow:hidden;margin-bottom:12px;
  background:var(--paper-2);border:1px solid var(--hair);
}
.vid-th img{width:100%;height:100%;object-fit:cover}
.vid-d{
  position:absolute;right:6px;bottom:6px;padding:4px 6px;line-height:1;
  font-family:var(--sans);font-size:.72rem;font-weight:500;font-variant-numeric:tabular-nums;
  background:var(--forest);color:var(--on-forest);
}
.vid-n{font-family:var(--sans);font-size:.76rem;letter-spacing:.028em;color:var(--muted);font-variant-numeric:tabular-nums}
.vid-t{font-size:1.02rem;line-height:1.36;margin-top:2px;transition:color .16s ease}
.vids a:hover .vid-t{color:var(--accent-lit)}

/* ============ commitments ============ */
.commit{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
@media (max-width:860px){.commit{grid-template-columns:1fr}}
.commit article{background:var(--paper-2);padding:clamp(24px,2.6vw,34px) clamp(18px,2vw,30px)}
.sect:not(.sect-band) .commit article{background:var(--paper)}
.commit h3{font-size:1.26rem;font-weight:400;margin-bottom:.5em;letter-spacing:-.012em}
.commit h3 .ml{font-size:.94em}
.commit p{font-size:1rem;line-height:1.62;color:var(--muted)}
.orn{width:26px;height:26px;color:var(--accent);opacity:.9;margin-bottom:18px}

/* ============ plates ============ */
.plate{
  position:relative;aspect-ratio:4/3;overflow:hidden;margin:0;
  background:linear-gradient(158deg,rgba(30,41,34,.10),rgba(30,41,34,.22)),var(--paper-2);
  border:1px solid var(--hair);
}
.plate.wide{aspect-ratio:16/10}
.plate.sq{aspect-ratio:1}
.plate img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.plate figcaption{
  position:absolute;left:0;bottom:0;font-family:var(--sans);font-size:.73rem;letter-spacing:.02em;
  background:var(--forest);color:var(--on-forest);padding:6px 10px;
}
.plate .roof-w{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:40%;color:var(--forest);opacity:.26}

/* ============ projects ============ */
.proj-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,56px);align-items:center;padding-bottom:clamp(34px,4vw,58px);border-bottom:1px solid var(--hair)}
@media (max-width:840px){.proj-lead{grid-template-columns:1fr}}
.proj-lead h3{font-size:clamp(1.55rem,3vw,2.35rem);font-weight:400;letter-spacing:-.022em;margin:.35em 0 .5em;max-width:15ch}
.proj-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,56px);padding-top:clamp(30px,3.6vw,50px)}
@media (max-width:700px){.proj-pair{grid-template-columns:1fr}}
.proj-pair .plate{margin-bottom:clamp(16px,1.8vw,24px)}
.proj-pair h3{font-size:1.36rem;font-weight:400;margin:.35em 0 .45em;letter-spacing:-.012em}
.proj-pair p,.proj-lead p{color:var(--muted);font-size:1.01rem;max-width:46ch}

/* ============ news ============ */
.news-header { margin-bottom: clamp(24px, 4vw, 40px); }
.news-header h2 { font-size: clamp(2.2rem, min(4.5vw, 6vh), 3.2rem); font-weight: 400; letter-spacing: -.02em; margin: 0; }
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 32px); }
.news-card { display: flex; flex-direction: column; }
.news-card .plate { width: 100%; aspect-ratio: 16/11; margin-bottom: clamp(16px, 2vw, 24px); }
.news-card h3 { font-size: clamp(1.2rem, 1.5vw, 1.35rem); font-weight: 400; margin: 0 0 .5em; letter-spacing: -.01em; line-height: 1.3; }
.news-card p.desc { font-size: .95rem; color: var(--muted); margin: 0 0 1.2em; line-height: 1.6; flex-grow: 1; }
.news-card .label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .8em; display: block; }
.news-card .link { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; align-self: flex-start; }
@media (max-width: 1080px) { .news-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* ============ gallery ============ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.gal .plate{aspect-ratio:1;border:1px solid var(--hair)}
@media (max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ============ visit + subscribe ============ */
.close-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,88px)}
@media (max-width:820px){.close-in{grid-template-columns:1fr;gap:44px}}
.close-in h2{font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:400;letter-spacing:-.022em;max-width:16ch;margin-bottom:.6em}
.addr{font-style:normal;color:var(--on-forest-muted);font-size:1.02rem;line-height:1.75}
.addr a{color:var(--brass-lit);text-decoration:none;border-bottom:1px solid transparent}
.addr a:hover{border-bottom-color:currentColor}
.form{display:flex;gap:10px;flex-wrap:wrap}
.form label{display:block;width:100%;font-family:var(--sans);font-size:.81rem;color:var(--on-forest-muted);margin-bottom:9px}
.form input{
  flex:1 1 210px;min-width:0;font-family:var(--sans);font-size:.95rem;padding:13px 20px;border-radius:999px;
  background:transparent;color:var(--on-forest);border:1px solid rgba(223,222,209,.32);
}
.form input::placeholder{color:rgba(223,222,209,.4)}
.form button{
  font-family:var(--sans);font-size:.9rem;font-weight:500;cursor:pointer;padding:13px 30px;
  border-radius:999px;border:1px solid var(--brass-lit);background:var(--brass-lit);color:var(--forest-2);
}
.form button:hover{background:transparent;color:var(--brass-lit)}
.form-note{font-family:var(--sans);font-size:.84rem;color:var(--brass-lit);margin:13px 0 0;min-height:1.2em}

/* ============ footer ============ */
.foot{position:relative;overflow:hidden;background:var(--forest-2);color:var(--on-forest);padding:clamp(46px,5.5vw,72px) 0 26px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,48px)}
@media (max-width:820px){.foot-in{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.foot-in{grid-template-columns:1fr}}
.foot h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.03em;color:var(--brass-lit);margin-bottom:15px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot a{font-family:var(--sans);font-size:.93rem;text-decoration:none;color:var(--on-forest-muted)}
.foot a:hover{color:var(--on-forest)}
.foot-mark{width:56px;height:54px;margin-bottom:20px;color:var(--logo-on-dark)}
.foot-mal{font-family:var(--mal);font-weight:500;font-size:1.45rem;color:var(--on-forest);margin-bottom:12px;line-height:1.3}
.foot-note{font-family:var(--sans);font-size:.91rem;color:var(--on-forest-muted);max-width:30ch;line-height:1.6}
.foot-bot{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:clamp(36px,4.5vw,58px);padding-top:20px;border-top:1px solid var(--hair-inv);
  font-family:var(--sans);font-size:.82rem;color:var(--on-forest-muted);
}
.social{display:flex;gap:15px}
.social a{display:inline-flex;color:var(--on-forest-muted)}
.social a:hover{color:var(--brass-lit)}

/* ============ inner page: masthead ============ */
/* Inner pages open on a short band instead of the home page's full-screen hero. */
.page-head{position:relative;overflow:hidden;background:var(--paper-2);padding:clamp(46px,7vw,96px) 0 clamp(38px,5vw,72px)}
.page-head .wrap{position:relative}
.page-head h1{font-size:clamp(2rem,4.4vw,3.5rem);font-weight:400;letter-spacing:-.018em;max-width:16ch;margin:.24em 0 0}
.page-head .lede{margin:clamp(18px,2.4vw,28px) 0 0;max-width:56ch;font-family:var(--sans);font-size:1.02rem;line-height:1.72;color:var(--muted)}
.crumb{font-family:var(--sans);font-size:.79rem;letter-spacing:.028em;color:var(--muted)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--rule)}
.crumb a:hover{color:var(--accent);border-bottom-color:currentColor}

/* ============ about: hero ============ */
/* About opens on its own hero instead of the short .page-head band: text, the ogee picture and the
   tag line. --paper-2, as on the home hero, so the sticky header stays seamless. */
.ahero{
  position:relative;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--hair);
  padding:clamp(34px,6vh,86px) 0 clamp(44px,8vh,104px);
}
.ahero-in{
  position:relative;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr) auto;
  gap:clamp(22px,3.4vw,60px);align-items:center;
}
@media (max-width:1080px){.ahero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:820px){.ahero-in{grid-template-columns:1fr;gap:clamp(30px,6vw,48px)}}
/* The same jaali lattice the old About masthead carried, with a vertical fade instead of the home
   hero's top-right one: full strength from the top to halfway down, then fading to nothing at the
   bottom edge. The theme opacities in the pattern layer still apply. */
.ahero .pat-hero{mask-image:linear-gradient(to bottom,#000 50%,transparent 100%)}
/* 15ch, not the comp's 13ch: the comp measured it for a different headline. This one breaks as
   "An initiative of / Kochi, working / since 1996." at every width; 13ch stranded "Kochi," below 820px. */
.ahero h1{font-size:clamp(2.1rem,min(4.6vw,7.4vh),4.15rem);line-height:1.08;letter-spacing:-.024em;max-width:15ch}
.ahero h1 .ml{max-width:15ch;font-size:.84em}
.ahero-body{
  margin:clamp(20px,3vh,34px) 0 0;max-width:44ch;font-family:var(--sans);
  font-size:clamp(.94rem,1.7vh,1.03rem);line-height:1.74;color:var(--muted);
}
.ahero-body.ml{font-family:var(--mal-text);max-width:38ch;line-height:1.88}
/* a <figure>, so margin:0 for the same reason as .arch */
.ogee{
  position:relative;width:100%;max-width:440px;justify-self:center;margin:0;
  aspect-ratio:5/7;max-height:min(72vh,660px);clip-path:url(#ogeeClip);
}
.ogee svg,.ogee img{width:100%;height:100%;display:block;object-fit:cover}
.ogee img{position:absolute;inset:0}
.ahero-tag{font-family:var(--sans);font-size:.98rem;line-height:1.5;color:var(--ink);max-width:9ch}
.ahero-tag.ml{font-family:var(--mal-text);max-width:12ch;font-size:.92rem;line-height:1.72}
.ahero-tag hr{border:none;height:1px;background:var(--rule);width:32px;margin:18px 0 0}
@media (max-width:1080px){
  .ahero-tag{grid-column:1/-1;max-width:none;display:flex;align-items:center;gap:16px}
  .ahero-tag hr{margin:0}
}

/* Phones, on request, exactly as the home hero: the picture first and small, the words below it, the
   whole thing one screen. The same two traps apply — the width is computed from the height because a
   stretched grid item ignores aspect-ratio, and this block has to stay after the rules it overrides. */
@media (max-width:700px){
  .ahero{
    min-height:calc(100svh - var(--head-h));display:flex;align-items:center;
    padding-block:clamp(14px,2.2svh,26px) clamp(18px,2.8svh,32px);
  }
  .ahero-in{width:100%;gap:clamp(14px,2.2svh,24px)}
  .ogee{--ogee-h:min(22svh,200px);order:-1;height:var(--ogee-h);width:calc(var(--ogee-h) * 5 / 7);max-height:none;max-width:100%}
  .ahero h1{font-size:clamp(1.5rem,4.4svh,2.1rem)}
  .ahero-body{margin-top:clamp(10px,1.6svh,18px);font-size:clamp(.86rem,1.9svh,1.03rem);line-height:1.6}
}

/* ============ about: vision band ============ */
/* forest in both themes, like .sect-dark, hence its place in the color-scheme rule */
.band{position:relative;overflow:hidden;background:var(--forest-2);color:var(--on-forest);padding:clamp(72px,10vw,140px) 0}
.band-in{position:relative;max-width:min(var(--maxw),980px);margin:0 auto;padding-inline:var(--gut);text-align:center}
/* heading and sub text set exactly as the Mission rail's .rail h2 and .label, recoloured for forest */
.band-head{margin:0 0 clamp(22px,2.6vw,34px)}
.band-head h2{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.01em;margin-bottom:10px}
.band-head .label{display:block;color:var(--on-forest-muted)}
.band-txt{font-size:clamp(1.4rem,3.1vw,2.5rem);line-height:1.36;letter-spacing:-.02em;margin:0 auto .9em;max-width:24ch}
.band-txt.ml{font-size:clamp(1.15rem,2.4vw,1.85rem);line-height:1.62;max-width:26ch}

/* ============ about: mission ============ */
.miss{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4.5vw,72px);border-top:1px solid var(--rule);margin:0;padding:0}
@media (max-width:760px){.miss{grid-template-columns:1fr}}
.miss li{
  list-style:none;display:grid;grid-template-columns:20px minmax(0,1fr);gap:15px;
  padding:16px 0;border-bottom:1px solid var(--hair);font-size:1rem;line-height:1.56;
}
.miss li.ml{font-size:.97rem;line-height:1.78}
.miss .orn-sm{width:16px;height:16px;color:var(--accent);opacity:.75;margin-top:.3em}

/* ============ inner page: mission list ============ */
/* used by accessibility.html and privacy.html; About has its own two-column .miss */
.mission{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.mission li{
  background:var(--paper);padding:clamp(15px,1.6vw,20px) 0 clamp(15px,1.6vw,20px) clamp(34px,3vw,46px);
  position:relative;font-size:1rem;line-height:1.62;color:var(--muted);
}
.sect-band .mission li{background:var(--paper-2)}
.mission li::before{
  content:"";position:absolute;left:clamp(8px,1vw,14px);top:calc(clamp(15px,1.6vw,20px) + .62em);
  width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--accent);
}

/* ============ inner page: people ============ */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px) clamp(18px,2.4vw,34px)}
@media (max-width:900px){.people{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.people{grid-template-columns:1fr}}
.people.lead-row{grid-template-columns:1fr;margin-bottom:clamp(26px,3vw,42px);padding-bottom:clamp(26px,3vw,42px);border-bottom:1px solid var(--hair)}
.person{display:flex;align-items:center;gap:clamp(13px,1.4vw,18px);min-width:0}
/* The portrait slot. It renders as a monogram until a real photograph is dropped
   in as <img> — same trick as .plate, so nothing needs restyling when they land. */
.face{
  position:relative;flex:none;width:clamp(56px,5.4vw,70px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:var(--paper-2);border:1px solid var(--hair);
  display:grid;place-items:center;
}
.sect-band .face{background:var(--paper)}
.lead-row .face{width:clamp(76px,7vw,96px)}
.face span{font-family:var(--sans);font-size:.84rem;font-weight:500;letter-spacing:.04em;color:var(--accent)}
.lead-row .face span{font-size:1.04rem}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.person-name{font-family:var(--sans);font-size:.97rem;font-weight:500;line-height:1.35}
.lead-row .person-name{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:400;letter-spacing:-.012em}
.person-role{font-family:var(--sans);font-size:.8rem;letter-spacing:.02em;color:var(--muted);margin-top:3px}