/* ===========================================================================
   Voice of Gudalur — one stylesheet for the three citizen-action pages
   (/, /grievances/18982473/, /grievances/19177921/).

   Served from this origin and referenced with a root-relative path, so every
   page works from its own directory depth. No @import, no web fonts, no
   remote URL: style-src 'self' in _headers covers the whole lot.
   ========================================================================= */

:root{
  --crust:#F7EFE3; --skin:#F3E2D5; --card:#FFFFFF; --paper-2:#EFEAE0;
  --ink:#2A1F14; --ink-2:#5C4A38; --ink-3:#8A725C; --line:#D8C3A6; --line-2:#C6BFAE;
  --terracotta:#C65A2E; --terracotta-deep:#9C4220; --terracotta-soft:#E8C4A0;
  /* The pressed state of the red button. --terracotta itself carries white text
     at 4.28:1, which clears WCAG AA for large text and nothing smaller; the
     button's own label is 15px, so both of its states use the deep value and
     press goes darker still. */
  --terracotta-press:#7E3517;
  --ochre:#B98A2F; --amber:#8A5300; --amber-bg:#FBF1DC; --amber-line:#E7C98B;
  --green:#137A4D; --green-dark:#0B5936; --mint:#3ED598;
  --forest:#0B1410; --forest-2:#123020; --night:#1C140C;
  --radius:16px;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
         "Noto Sans Tamil","Noto Sans Malayalam","Noto Sans Kannada",
         "Noto Sans Devanagari","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --shadow:0 14px 34px rgba(18,24,20,.08);
}

/* --- the legacy baseline ---------------------------------------------------
   Everything after this point is written for browsers from about 2020 on:
   clamp(), env() safe-area insets, min(), and the vendor-prefixed animation
   properties. On an older browser a declaration that uses a function it does
   not understand is dropped whole, so `padding:0 clamp(18px,4.4vw,40px)`
   leaves the gutter at zero rather than at 20px, and `left:calc(clamp(16px,5vw,
   26px) + env(safe-area-inset-left,0px))` leaves the skip button unpositioned.

   So the plain value is stated here, first, for every one of those
   declarations; the modern rule that follows overrides it wherever it parses.
   This is what keeps the film, the reveal and the whole layout working on a
   2016 phone. Two things are deliberately NOT back-filled:

     - flexbox `gap` (Chrome 84 / Safari 14.1, 2020-21). A row of pills or
       buttons loses its spacing on an older browser but keeps its order and
       stays tappable, and a margin-based stand-in would double up the moment
       gap does work. Grid `gap` is fine - it predates flex gap by years.
     - :focus-visible. Unsupported, the selector is dropped and the browser's
       own focus ring takes over, which is usable; a plain :focus fallback
       would draw a ring on every mouse click too. */
*,*::before,*::after{box-sizing:border-box}
body{font-size:16px;line-height:1.6}
.wrap{padding:0 20px}
.topbar{background:#F7F5EF}
.topin{gap:14px}
.navlinks{gap:14px}
.brand{gap:11px}
.btn{font-size:15px;line-height:1.2;padding:14px 22px;min-height:50px}
.btn svg{width:18px;height:18px}
.acts{gap:10px}
.sec{padding:44px 0}
#grievances ~ .sec{padding:24px 0}
.sec h2{font-size:1.7rem}
.sec-intro{font-size:1rem}
.subhead{font-size:1.1rem}
.hero{padding:46px 0 48px}
.hero h1{font-size:2.1rem}
.hero .lede{font-size:1rem}
.idgrid{gap:16px}
.idcard{padding:18px}
.idcard h2{font-size:1.2rem}
.figrow{gap:14px}
.fig{padding:14px 15px}
.fig .n{font-size:1.55rem}
.fig .l{font-size:13.5px}
.grid2{gap:18px;grid-template-columns:1fr}
.panelbox{padding:18px}
.panelbox h3{font-size:1.1rem}
.docitem{gap:12px 16px;margin-top:18px;padding-top:18px}
.docacts{gap:8px}
.docacts .btn{min-height:44px;padding:11px 16px;font-size:14px}
.kv{gap:11px}
.kv>div{gap:2px}
.quote{margin:22px 0 0;padding:16px 18px}
.demands{margin:20px 0 0;gap:10px}
.demands li{padding-left:32px}
.heads{margin:20px 0 0;gap:12px}
.heads li{padding:14px 16px}
.tag{margin-top:9px;font-size:10.5px}
.steps{margin:30px 0 0;gap:16px}
.step{padding:18px}
.step h3{font-size:1.16rem}
.step .who{margin:9px 0 0}
.step p{margin:12px 0 0}
.step .acts{margin-top:18px}
.notice{padding:28px 0}
.notice .nn{gap:12px}
.notice .nn h2{font-size:1.15rem}
.notice p{margin:14px 0 0}
.newsgrid{margin:30px 0 0;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.newsitem{gap:10px;padding:20px 20px 18px}
.medcta{margin:26px 0 0;padding:22px}
.medcta p{font-size:1rem}
.medcta .acts{margin-top:18px}
.rules{margin:20px 0 0;gap:10px}
.isnot{padding:18px;margin-top:28px}
.isnot h3{font-size:1.05rem}
.crumbs{margin:0 0 18px;gap:8px}
.phasegrid{margin-top:22px;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.phase{padding:18px 19px}
.howto{margin:26px 0 0;gap:14px}
.warn{margin:22px 0 0;padding:15px 17px}
.xlink{gap:12px;margin-top:28px;padding-top:22px}
.foot{padding:40px 0}
.footin{gap:22px}
.footlinks{gap:14px 22px;font-size:14px}
.social{gap:10px}
.social a{width:44px;height:44px}
.langrow{gap:6px}
.langbar{padding:10px 0 0}
.iscn svg{width:88vw}
.icpn{left:20px;right:20px;bottom:30px;font-size:17px}
.iskip{left:16px;bottom:16px;font-size:14px;padding:8px 18px}
.ititle{font-size:34px}
.audiobtn{right:12px;bottom:12px}
.srcnote{margin:14px 0 0}
.hero-note{margin:22px 0 0;padding:13px 15px}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crust);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--terracotta-deep)}
a:hover{color:var(--ink);text-decoration:underline}
strong{color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
/* :focus-visible is Chrome 86 / Safari 15.4 / Firefox 85, all 2021. Where it is
   missing the rule above is dropped whole and the browser's own ring takes over
   - usable, but not in this palette, and not at all in a browser that draws no
   ring of its own. This restores the custom ring for those browsers. The cost
   is a ring on mouse click too, which is exactly what they already did. */
@supports not selector(:focus-visible){
  a:focus,button:focus,summary:focus,input:focus,[tabindex]:focus{
    outline:3px solid var(--terracotta);outline-offset:3px}
  .iskip:focus,.copybtn:focus{outline:3px solid #fff;outline-offset:3px}
}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.015em;line-height:1.1;margin:0}
p{margin:0}
ul,ol{margin:0}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(18px,4.4vw,40px)}
.narrow{max-width:820px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 18px;z-index:20;border-radius:0 0 10px 0;font-weight:800}
.skip:focus{left:0}

/* --- the masthead ----------------------------------------------------------
   Two rows: the slim bar that stays pinned, and the language row beneath it.
   Only the bar is sticky on purpose - five translated pills pinned to the top
   of a 360px screen would hold a fifth of the viewport for a control most
   visitors touch once, and every anchor jump would land under it. */
.top{display:block}
.topbar{position:sticky;top:0;z-index:10;background:rgba(247,245,239,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:64px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink);font-weight:900;font-size:16.5px;letter-spacing:-.01em}
.brand img{border-radius:8px}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.navlinks{display:flex;align-items:center;gap:clamp(10px,2.4vw,26px)}
.navlinks a{color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
.navlinks a:hover{color:var(--ink);border-bottom-color:var(--terracotta)}
/* --- the language row. Kept hidden in the markup and revealed by the script
   once it has actually built the buttons - an empty "Change language" label
   with nothing under it is worse than no switcher at all. */
.langbar{padding:10px 0 0}
.langbar[hidden]{display:none}
.langbar .langlab{margin:0 0 7px}

/* --- buttons --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border-radius:999px;font-family:inherit;font-weight:800;
  font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;min-height:50px;
  border:2px solid transparent;text-align:center;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,
             border-color .15s ease,color .15s ease;
  -webkit-transition:transform .15s ease,box-shadow .15s ease,background .15s ease,
             border-color .15s ease,color .15s ease}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px)}
.btn-red{background:var(--terracotta-deep);border-color:var(--terracotta-deep);color:#fff}
.btn-red:hover{background:var(--terracotta-press);border-color:var(--terracotta-press);
  box-shadow:0 10px 26px rgba(126,53,23,.32)}
.btn-green{background:var(--green);border-color:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark);border-color:var(--green-dark);
  box-shadow:0 10px 26px rgba(19,122,77,.3)}
.btn-out{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-out:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.btn-light{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-wide{width:100%}
.btn[disabled],.btn.busy{opacity:.72;cursor:default;box-shadow:none;transform:none}
.acts{display:flex;flex-wrap:wrap;gap:12px}
/* --- sections -------------------------------------------------------------- */
.sec{padding:clamp(44px,8.5vh,92px) 0;scroll-margin-top:78px}
#grievances ~ .sec{padding:clamp(24px,4.5vh,48px) 0}
.rule{height:1px;background:var(--line);border:0;margin:0;position:relative}
.rule::before{content:"";position:absolute;left:0;top:-1px;width:76px;height:3px;
  background:var(--terracotta)}
.seclab{font-size:12px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;
  color:var(--terracotta-deep)}
.seclab.g{color:var(--green)}
.sec h2{margin:.4em 0 0;font-size:clamp(1.7rem,4.8vw,2.9rem);text-wrap:balance}
.sec-intro{margin:.9em 0 0;max-width:66ch;color:var(--ink-2);
  font-size:clamp(1rem,2vw,1.12rem)}
.subhead{margin:34px 0 0;font-size:clamp(1.1rem,2.6vw,1.4rem)}

/* --- hero ------------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 460px at 84% -14%,rgba(62,213,152,.16),transparent 62%),
  radial-gradient(700px 400px at 2% 106%,rgba(198,90,46,.12),transparent 60%),
  linear-gradient(180deg,var(--forest) 0%,#0D1611 55%,#0A110D 100%);
  color:#F2F5F1;padding:clamp(46px,9vh,96px) 0 clamp(48px,9vh,100px)}
.hero .eyebrow{font-size:12px;font-weight:900;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mint)}
.hero h1{margin:18px 0 0;color:#F7F4EC;font-size:clamp(2.1rem,7.2vw,4.35rem);
  text-wrap:balance}
.hero .lede{margin:22px 0 0;max-width:62ch;font-size:clamp(1rem,2.2vw,1.2rem);
  color:rgba(242,245,241,.82)}
.idgrid{display:grid;gap:16px;margin:34px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(292px,1fr))}
.idcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-top:4px solid var(--terracotta);border-radius:var(--radius);
  padding:clamp(18px,3vw,26px)}
.idcard.g{border-top-color:var(--mint)}
.idcard .kid{font-family:var(--mono);font-size:13px;letter-spacing:.12em;
  color:var(--mint);text-transform:uppercase;font-weight:700}
.idcard h2{margin:8px 0 0;color:#F7F4EC;font-size:clamp(1.2rem,3.2vw,1.6rem);
  line-height:1.2}
.idcard p{margin:12px 0 0;color:rgba(242,245,241,.76);font-size:15px}
.idcard .acts{margin-top:18px}
.srcnote{margin:14px 0 0;font-size:13px;color:var(--ink-2);line-height:1.55}
.hero .srcnote{color:rgba(242,245,241,.6)}
.hero .srcnote.big{font-size:14px}
.hero-note{margin:22px 0 0;padding:13px 15px;background:rgba(251,241,220,.07);
  border:1px solid rgba(231,201,139,.34);border-radius:12px;
  color:rgba(242,245,241,.82);font-size:14.5px;max-width:70ch}
.hero-note b{color:#fff}

/* --- figures --------------------------------------------------------------- */
.figrow{display:grid;gap:14px;margin:26px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.fig{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:14px 15px}
.fig .n{font-size:clamp(1.55rem,4.4vw,2.1rem);font-weight:900;line-height:1;
  color:var(--terracotta)}
.fig.g .n{color:var(--green)}
.fig .l{margin:8px 0 0;font-size:13.5px;font-weight:700;color:var(--ink)}
.fig .s{margin:5px 0 0;font-size:12px;color:var(--ink-2)}

/* --- two-column: record and its action card -------------------------------- */
.grid2{display:grid;gap:clamp(18px,3.4vw,34px);margin-top:28px;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
.panelbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,3.2vw,30px);box-shadow:var(--shadow)}
.panelbox h3{margin:0;font-size:clamp(1.1rem,2.6vw,1.4rem)}

/* --- the documents section --------------------------------------------------
   Each file is a row: what it is on the left, the two ways to get it on the
   right. The rows wrap to a single column before the buttons get narrow enough
   to be a mis-tap. */
.doccol{display:flex;flex-direction:column}
.docitem{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:12px 16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.docitem:first-of-type{margin-top:16px}
.doctext{flex:1 1 240px;min-width:0}
.docname{margin:0;font-weight:900;font-size:1.02rem;line-height:1.3}
.docsig{margin:6px 0 0;font-size:14px;color:var(--ink-2);line-height:1.55}
.docacts{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto}
.docacts .btn{min-height:44px;padding:11px 16px;font-size:14px}
.kv{display:grid;gap:11px;margin:20px 0 0}
.kv>div{display:grid;gap:2px}
.kv dt{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2)}
.kv dd{margin:0;font-weight:700;font-size:15.5px}
.kv dd.mono{font-family:var(--mono);letter-spacing:.04em}
.kv dd.nostatus{color:var(--terracotta-deep)}
.quote{margin:22px 0 0;padding:16px 18px;background:var(--paper-2);
  border-left:4px solid var(--green);border-radius:0 12px 12px 0}
.quote .q{font-weight:700;line-height:1.55}
.quote .qs{margin-top:10px;font-size:12.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.demands{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.demands li{position:relative;padding-left:32px;font-weight:600;line-height:1.5}
.demands li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:8px;
  border-left:3px solid var(--green);border-bottom:3px solid var(--green);
  -webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.heads{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.heads li{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px}
.heads b{display:block;font-weight:900;font-size:15.5px;line-height:1.35}
.heads span{display:block;margin-top:7px;font-size:14px;line-height:1.55;
  color:var(--ink-2)}
.tag{display:inline-block;margin-top:9px;font-size:10.5px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  border:1px solid var(--amber-line);background:var(--amber-bg);border-radius:99px;
  padding:3px 9px}
/* --- action cards (the ordered official steps) ----------------------------- */
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px;counter-reset:st}
.step{counter-increment:st;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(18px,3vw,26px);box-shadow:var(--shadow);
  border-left:4px solid var(--line-2)}
.step.main{border-left-color:var(--terracotta)}
.step.last{border-left-color:var(--green);background:var(--paper-2)}
.step .stno{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:900;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.step .stno::before{content:counter(st);display:inline-flex;align-items:center;
  justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:13px;letter-spacing:0}
.step h3{margin:12px 0 0;font-size:clamp(1.16rem,2.9vw,1.5rem)}
.step .who{margin:9px 0 0;font-size:13px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terracotta-deep)}
.step p{margin:12px 0 0;color:var(--ink-2)}
.step .acts{margin-top:18px}
.step .foot-note,.mailto-note{margin:14px 0 0;font-size:13px;color:var(--ink-2)}

/* --- letter template ------------------------------------------------------- */
.mailtpl{position:relative;margin:18px 0 0}
.mailtpl pre{margin:0;padding:16px 16px 54px;background:#0F1712;color:#DCE7DF;
  border-radius:12px;font-family:var(--mono);font-size:13px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;overflow-x:hidden}
.copybtn{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;
  gap:8px;padding:9px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:12.5px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.copybtn:hover{background:rgba(255,255,255,.16)}
.copybtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* --- provenance band ------------------------------------------------------- */
.notice{background:var(--amber-bg);border-top:1px solid var(--amber-line);
  border-bottom:1px solid var(--amber-line);padding:clamp(28px,5vh,46px) 0}
.notice .nn{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline}
.notice .nn h2{font-size:clamp(1.15rem,3vw,1.6rem)}
.notice p{margin:14px 0 0;max-width:70ch;color:#4A3A18}
.notice .tag{margin-top:0}

/* --- the dark band ----------------------------------------------------------*/
.dark{background:linear-gradient(168deg,var(--forest) 0%,var(--forest-2) 78%);color:#EFF6F1}
.dark .seclab{color:var(--mint)}
.dark h2{color:#fff}
.dark .sec-intro{color:rgba(239,246,241,.8)}
.dark .srcnote{color:rgba(242,245,241,.6)}

/* --- what the papers reported (the dark band's cards) ----------------------
   Four cards: two columns reads as a deliberate block and gives the body text
   room. auto-fit alone lands on three at desktop width and orphans the fourth. */
.newsgrid{display:grid;gap:clamp(14px,2.4vw,20px);margin:30px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
@media (min-width:760px){.newsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.newsitem{display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;
  border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--terracotta);
  border-radius:14px;background:rgba(255,255,255,.045)}
/* outlet + date, set small and quiet so the headline is what reads first */
.newsout{margin:0!important;font-family:var(--mono);font-size:12px!important;
  letter-spacing:.06em;color:rgba(242,245,241,.66)!important}
.newsitem h3{margin:0;color:#F7F4EC;font-size:1.06rem;line-height:1.28}
.newsbody{margin:0!important;color:rgba(242,245,241,.8)!important;font-size:14.5px;
  line-height:1.6;flex:1}
/* "as reported" - marks the headline as the paper's wording, not our paraphrase.
   align-self matters: the card is a column flexbox, so without it the pill
   stretches the full card width instead of hugging its text. */
.newstag{align-self:flex-start;display:inline-block;padding:3px 9px;border-radius:999px;
  background:rgba(231,201,139,.14);border:1px solid rgba(231,201,139,.4);
  color:#E7C98B;font-size:10.5px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase}
.newsmore{margin-top:2px;display:inline-flex;align-items:center;gap:7px;
  align-self:flex-start;color:var(--mint);font-size:13.5px;font-weight:800;
  text-decoration:none;border-bottom:2px solid rgba(62,213,152,.34);
  padding-bottom:2px;min-height:44px}
.newsmore:hover{border-bottom-color:var(--mint)}
.newsmore svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the close of the section: the ask, stated once, in plain words */
.medcta{margin:clamp(26px,4vw,40px) 0 0;padding:clamp(22px,3.6vw,34px);
  border-radius:var(--radius);background:rgba(251,241,220,.07);
  border:1px solid rgba(231,201,139,.34)}
.medcta p{margin:0;color:rgba(247,244,236,.9);font-size:clamp(1rem,2.2vw,1.16rem);
  line-height:1.6;max-width:62ch}
.medcta .acts{margin-top:18px}

/* --- record-page bits ------------------------------------------------------ */
.rules{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.rules li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-2);
  line-height:1.55}
.rules li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;
  border-radius:2px;background:var(--terracotta);
  -webkit-transform:rotate(45deg);transform:rotate(45deg)}
.rules li b{color:var(--ink)}
.isnot{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--terracotta);
  border-radius:var(--radius);padding:clamp(18px,3.2vw,26px);margin-top:28px;max-width:70ch}
.isnot h3{margin:0;font-size:clamp(1.05rem,2.6vw,1.3rem)}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px;
  font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2)}
.crumbs a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.crumbs a:hover{color:var(--terracotta-deep);border-color:var(--terracotta-deep)}
.phasegrid{display:grid;gap:14px;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.phase{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 19px;box-shadow:var(--shadow)}
.phase.one{border-top:4px solid var(--terracotta)}
.phase.two{border-top:4px solid var(--green)}
.phase .pl{margin:0;font-size:11px;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.phase h4{margin:.5em 0 .3em;font-size:1.08rem;font-weight:900;line-height:1.3}
.phase p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.howto{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;counter-reset:hw}
.howto li{counter-increment:hw;position:relative;padding-left:46px;color:var(--ink-2);
  line-height:1.6}
.howto li::before{content:counter(hw);position:absolute;left:0;top:0;width:32px;height:32px;
  border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:15px}
.howto li b{color:var(--ink)}
.warn{margin:22px 0 0;padding:15px 17px;background:var(--amber-bg);
  border:1px solid var(--amber-line);border-radius:12px;font-size:14.5px;color:#4A3A18;
  max-width:74ch}
.warn b{color:#2C2109}
.xlink{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--line)}

/* --- footer ---------------------------------------------------------------- */
.foot{background:var(--forest);color:rgba(255,255,255,.78);padding:clamp(40px,7vh,72px) 0}
.footin{display:grid;gap:22px}
.foot a{color:rgba(255,255,255,.82);text-decoration:none}
.foot a:hover{color:var(--mint)}
.footlinks{display:flex;flex-wrap:wrap;gap:14px 22px;font-size:14px;font-weight:700}
.social{display:flex;flex-wrap:wrap;gap:10px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;
  height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.26);color:#fff;
  -webkit-transition:transform .15s ease,border-color .15s ease,color .15s ease;
  transition:transform .15s ease,border-color .15s ease,color .15s ease}
.social a:hover{border-color:var(--mint);color:var(--mint);
  -webkit-transform:translateY(-2px);transform:translateY(-2px)}
.social svg{width:19px;height:19px;fill:currentColor}
.disc{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72);max-width:72ch}
.disc b{color:#fff}
/* .fine is 11.5px uppercase - small text, so it needs the full 4.5:1, and 42%
   white on the forest green measured 4.09:1. 62% measures 7.6:1. */
.fine{margin:0;font-size:11.5px;letter-spacing:.16em;color:rgba(255,255,255,.62);
  text-transform:uppercase}
/* --- the language switcher, in the masthead --------------------------------
   Pills, one per language, each labelled in its own script and nothing else:
   at 360px five two-line buttons do not fit, and a reader looking for their
   own language is looking for its own script. */
.langrow{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.langbtn{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;min-height:44px;border:1px solid var(--line-2);border-radius:999px;
  background:#fff;color:var(--ink);font-family:inherit;font-size:14px;font-weight:800;
  line-height:1.15;cursor:pointer;
  -webkit-transition:border-color .15s ease,background .15s ease,color .15s ease;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.langbtn:hover{border-color:var(--ink)}
.langbtn[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.langlab{margin:0 0 9px;font-size:11.5px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}

/* --- reveal: progressive enhancement. Nothing is hidden without JS. -------- */
.js .rv{opacity:0;-webkit-transform:translateY(14px);transform:translateY(14px)}
.js .rv.in{opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition:opacity .5s ease,transform .5s ease;
  transition:opacity .5s ease,transform .5s ease}

/* --- responsive ------------------------------------------------------------ */
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .navlinks a[data-nav="documents"]{display:none}
}
@media (max-width:620px){
  .tag{font-size:12.5px}
  .kv dt{font-size:12.5px;letter-spacing:.1em}
  .step .stno,.langlab,.fine{font-size:12.5px}
  .hero .eyebrow,.seclab,.fig .s{font-size:12.5px}
  .crumbs{font-size:13px}
  .step .who{font-size:12.5px}
  .footlinks{font-size:15px}
  .copybtn{min-height:44px;padding:12px 16px}
}
@media (max-width:620px){
  body{font-size:16px}
  .topin{min-height:58px}
  .brand{font-size:15px}
  .btn{font-size:14.5px;padding:13px 18px}
}

/* --- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1!important;-webkit-transform:none!important;transform:none!important;transition:none!important}
  .btn,.social a,.copybtn,.langbtn,.iskip,.audiobtn{-webkit-transition:none!important;transition:none!important}
  .btn:hover,.social a:hover{-webkit-transform:none!important;transform:none!important}
  .btn .spin{animation:none;border-top-color:rgba(255,255,255,.9)}
}

/* --- background music ------------------------------------------------------ */
/* Icon-only now: a fixed 44x44 pill. The offsets clear the iPhone home
   indicator and the rounded corners, since the head sets viewport-fit=cover;
   the env() fallback keeps the calculation valid on older browsers. */
.audiobtn{position:fixed;
  right:calc(clamp(12px,3vw,22px) + env(safe-area-inset-right,0px));
  bottom:calc(clamp(12px,3vw,22px) + env(safe-area-inset-bottom,0px));
  z-index:45;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:12px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(11,20,16,.9);-webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);color:#fff;touch-action:manipulation;
  cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  -webkit-transition:transform .18s ease;transition:transform .18s ease}
.audiobtn[hidden]{display:none}
.audiobtn:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px)}
.audiobtn svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.audiobtn .wv{display:none}
.audiobtn[aria-pressed="true"] .wv{display:block}
.audiobtn[aria-pressed="true"] .mx{display:none}
/* --- intro film ------------------------------------------------------------ */
/* Twenty-four seconds, six scenes, played across the whole viewport before the
   core site is revealed. It is `hidden` in the markup: only vog-support.js
   starts it - never without JavaScript, never under prefers-reduced-motion - so
   those readers meet the site directly, and the overlay locks nothing.
   vog-support.js owns the same number (FILM_MS) and the six scene switch times;
   the progress bar below is the visible half of it. */
.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(232,163,61,.22),transparent 60%),
    linear-gradient(180deg,#0C1712 0%,#12241B 55%,#1C140C 100%)}
.intro[hidden]{display:none}
.ilock,.ilock body{overflow:hidden;position:fixed;width:100%}
.istage{position:absolute;top:0;right:0;left:0;bottom:28%;display:flex;align-items:center;justify-content:center}
.iscn{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;
  will-change:opacity,transform;
  opacity:0;-webkit-transition:opacity .9s ease;transition:opacity .9s ease}
.iscn svg{width:min(88vw,540px);height:auto;max-height:100%;display:block}
.intro.run .iscn.on{opacity:1}
.icopy{position:relative;z-index:2;min-height:5.6em}
.icpn{will-change:opacity,transform;position:absolute;left:clamp(20px,6vw,32px);right:clamp(20px,6vw,32px);
  bottom:calc(clamp(30px,7vh,54px) + env(safe-area-inset-bottom,0px));
  margin:0 auto;max-width:30ch;text-align:center;color:#F7EFE3;
  font-size:clamp(17px,4.4vw,21px);font-weight:800;line-height:1.45;
  text-shadow:0 2px 16px rgba(0,0,0,.6);opacity:0;
  -webkit-transform:translateY(12px);transform:translateY(12px);
  -webkit-transition:opacity .7s ease,transform .7s ease;transition:opacity .7s ease,transform .7s ease}
.icpn.on{opacity:1;-webkit-transform:none;transform:none}
.ibar{position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:rgba(247,239,227,.14)}
.ibar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--terracotta),var(--mint))}
/* 24s: the same length the film runs for, so the bar empties exactly as the
   last scene ends. vog-support.js owns that number too (FILM_MS) - change both
   together. */
.intro.run .ibar i{-webkit-animation:ibarfill 24s linear forwards;animation:ibarfill 24s linear forwards}
@-webkit-keyframes ibarfill{to{width:100%}}
@keyframes ibarfill{to{width:100%}}
/* Skip the film. Bottom-left, clear of the fixed sound button (bottom-right)
   and of the iPhone home indicator; icon-less text, large enough to tap. */
.iskip{position:absolute;z-index:5;
  left:calc(clamp(16px,5vw,26px) + env(safe-area-inset-left,0px));
  bottom:calc(clamp(16px,4vh,26px) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:8px 18px;border-radius:999px;
  border:1px solid rgba(247,239,227,.34);
  background:rgba(11,20,16,.5);-webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);color:#F7EFE3;
  font-size:clamp(14px,3.6vw,16px);font-weight:700;letter-spacing:.01em;
  cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-transition:opacity .4s ease,transform .18s ease,background .18s ease;
  transition:opacity .4s ease,transform .18s ease,background .18s ease;
  opacity:.9}
.iskip[hidden]{display:none}
.iskip:hover{background:rgba(11,20,16,.72);opacity:1}
.iskip:focus-visible{outline:2px solid var(--mint);outline-offset:2px;opacity:1}
.ititle{margin:0;font-size:clamp(34px,9vw,58px);font-weight:900;
  letter-spacing:-.02em;color:#F7EFE3;text-align:center;
  text-shadow:0 4px 30px rgba(0,0,0,.5)}
/* scene 1 - dawn over the hills */
.iscn1 .isun{-webkit-transform:translate(0,46px);transform:translate(0,46px);opacity:0}
.iscn1.on .isun{-webkit-animation:isunrise 3.6s cubic-bezier(.22,.61,.36,1) .3s forwards;animation:isunrise 3.6s cubic-bezier(.22,.61,.36,1) .3s forwards}
@-webkit-keyframes isunrise{to{-webkit-transform:translate(0,-6px);transform:translate(0,-6px);opacity:1}}
@keyframes isunrise{to{transform:translate(0,-6px);opacity:1}}
.iscn1 .ismist{-webkit-animation:ismist 4s ease-in-out infinite alternate;animation:ismist 4s ease-in-out infinite alternate}
@-webkit-keyframes ismist{from{-webkit-transform:translateX(-14px);transform:translateX(-14px)}to{-webkit-transform:translateX(14px);transform:translateX(14px)}}
@keyframes ismist{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
/* scene 2 - the problems that stayed; the young walking out of frame */
.iscn2.on .isfig{-webkit-animation:iwalk 3.6s ease-in-out .3s forwards;animation:iwalk 3.6s ease-in-out .3s forwards}
@-webkit-keyframes iwalk{to{-webkit-transform:translate(52px,-3px);transform:translate(52px,-3px);opacity:.15}}
@keyframes iwalk{to{transform:translate(52px,-3px);opacity:.15}}
/* scene 3 - the letter, and the people it gathered */
.iscn3 .ispaper{-webkit-transform:translateY(70px);transform:translateY(70px);opacity:0}
.iscn3.on .ispaper{-webkit-animation:ipaper 2.2s cubic-bezier(.22,.61,.36,1) .2s forwards;animation:ipaper 2.2s cubic-bezier(.22,.61,.36,1) .2s forwards}
@-webkit-keyframes ipaper{to{-webkit-transform:none;transform:none;opacity:1}}
@keyframes ipaper{to{transform:none;opacity:1}}
.iscn3 .ippl{opacity:0;-webkit-transform:translateY(24px);transform:translateY(24px)}
.iscn3.on .ippl{-webkit-animation:irise 1.1s ease forwards;animation:irise 1.1s ease forwards}
.iscn3.on .ip1{-webkit-animation-delay:.7s;animation-delay:.7s}
.iscn3.on .ip2{-webkit-animation-delay:1.1s;animation-delay:1.1s}
.iscn3.on .ip3{-webkit-animation-delay:1.5s;animation-delay:1.5s}
.iscn3.on .ip4{-webkit-animation-delay:1.9s;animation-delay:1.9s}
.iscn3.on .ip5{-webkit-animation-delay:2.3s;animation-delay:2.3s}
@-webkit-keyframes irise{to{opacity:1;-webkit-transform:none;transform:none}}
@keyframes irise{to{opacity:1;transform:none}}
/* scene 4 - temporary becomes permanent: the well fills, the tree grows,
   the shutter rolls up */
.iscn4 .istree{transform-box:fill-box;transform-origin:50% 100%;
  -webkit-transform:scaleY(.22);transform:scaleY(.22);opacity:.5}
.iscn4.on .istree{-webkit-animation:igrow 3.6s cubic-bezier(.34,1.28,.64,1) .3s forwards;animation:igrow 3.6s cubic-bezier(.34,1.28,.64,1) .3s forwards}
@-webkit-keyframes igrow{to{-webkit-transform:scaleY(1);transform:scaleY(1);opacity:1}}
@keyframes igrow{to{transform:scaleY(1);opacity:1}}
.iscn4 .isleaves{opacity:0}
.iscn4.on .isleaves{-webkit-animation:ifade 1.6s ease 2.1s forwards;animation:ifade 1.6s ease 2.1s forwards}
.iscn4 .iswater{transform-box:fill-box;transform-origin:50% 100%;
  -webkit-transform:scaleY(0);transform:scaleY(0)}
.iscn4.on .iswater{-webkit-animation:ifill 2.6s ease .8s forwards;animation:ifill 2.6s ease .8s forwards}
@-webkit-keyframes ifill{to{-webkit-transform:scaleY(1);transform:scaleY(1)}}
@keyframes ifill{to{transform:scaleY(1)}}
.iscn4 .isshutter{transform-box:fill-box;transform-origin:50% 0}
.iscn4.on .isshutter{-webkit-animation:iopen 2.2s ease 2.2s forwards;animation:iopen 2.2s ease 2.2s forwards}
@-webkit-keyframes iopen{to{-webkit-transform:scaleY(0);transform:scaleY(0)}}
@keyframes iopen{to{transform:scaleY(0)}}
.iscn4 .isglow{-webkit-animation:ifade 1.2s ease 2.8s forwards;animation:ifade 1.2s ease 2.8s forwards}
@-webkit-keyframes ifade{to{opacity:1}}
@keyframes ifade{to{opacity:1}}
/* scene 5 - by us: the flag, the people */
.iscn5 .ifig{opacity:0;-webkit-transform:translateY(34px);transform:translateY(34px)}
.iscn5.on .ifig{-webkit-animation:irise 1.2s ease forwards;animation:irise 1.2s ease forwards}
.iscn5.on .if1{-webkit-animation-delay:.2s;animation-delay:.2s}
.iscn5.on .if2{-webkit-animation-delay:.6s;animation-delay:.6s}
.iscn5.on .if3{-webkit-animation-delay:1s;animation-delay:1s}
.iscn5.on .if4{-webkit-animation-delay:1.4s;animation-delay:1.4s}
.iscn5 .iflag{transform-box:fill-box;transform-origin:10% 60%;
  -webkit-transform:scale(.62);transform:scale(.62);opacity:0}
.iscn5.on .iflag{-webkit-animation:iflagin 1.6s cubic-bezier(.22,.61,.36,1) 1.8s forwards;animation:iflagin 1.6s cubic-bezier(.22,.61,.36,1) 1.8s forwards}
@-webkit-keyframes iflagin{to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}
@keyframes iflagin{to{transform:scale(1);opacity:1}}
.iscn5 .iwave{transform-box:fill-box;transform-origin:0 50%}
.iscn5.on .iwave{-webkit-animation:iwave 2s ease-in-out 2.9s infinite alternate;animation:iwave 2s ease-in-out 2.9s infinite alternate}
@-webkit-keyframes iwave{to{-webkit-transform:skewY(-5deg) translateX(4px);transform:skewY(-5deg) translateX(4px)}}
@keyframes iwave{to{transform:skewY(-5deg) translateX(4px)}}
/* scene 6 - the title */
.iscn6 .ititle{opacity:0;-webkit-transform:scale(.9);transform:scale(.9);letter-spacing:.16em}
.iscn6.on .ititle{-webkit-animation:ititle 2.2s cubic-bezier(.22,.61,.36,1) .3s forwards;animation:ititle 2.2s cubic-bezier(.22,.61,.36,1) .3s forwards}
@-webkit-keyframes ititle{to{opacity:1;-webkit-transform:none;transform:none;letter-spacing:-.02em}}
@keyframes ititle{to{opacity:1;transform:none;letter-spacing:-.02em}}
/* the film is motion by definition; under reduced motion it never plays */
@media (prefers-reduced-motion:reduce){
  /* the film still tells its story: every scene snaps to its finished state
     instead of tweening into it, and the progress bar keeps real time */
  .iscn,.icpn,.iscn *{-webkit-transition-duration:.01s!important;transition-duration:.01s!important}
  .iscn *,.icpn{-webkit-animation-duration:.01s!important;animation-duration:.01s!important;-webkit-animation-delay:0s!important;animation-delay:0s!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;-webkit-animation-name:none!important;animation-name:none!important}
}
@media (max-width:420px){
  .istage{inset:0 0 32% 0}
}

/* iOS: kill the 300ms tap delay and double-tap zoom everywhere */
button,a{touch-action:manipulation}