/* ============================================================================
   AITN · AI-Driven Tamil Nadu · Design system v2.0
   Flagship brand of Think TN Foundation (Section 8)

   Spatial system calibrated against the reference build:
     container 1265px @1440 · section rhythm 120px · hero full-viewport
     display 64–76px/1.16 · section head 52px/1.16 · card title 28px
     card radius 16px · grid gap 24px · pill buttons 48px
   Single identity: night ground, with one scoped cream band per page.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground + surfaces */
  --night:      #0A0A0D;
  --surface:    #14161B;
  --surface-2:  #1D212A;
  --surface-3:  #232935;
  --line:       #272D38;
  --line-2:     #343C4A;

  /* Accents */
  --mayil:      #4FB3BC;
  --mayil-deep: #00605F;   /* the deep teal band */
  --mayil-ink:  #0B5A63;
  --mayil-glow: rgba(79,179,188,.16);
  --manjal:     #E3B75C;
  --manjal-ink: #C8912A;
  --sand:       #FCEFDE;   /* light band, light theme */
  --indigo:     #8E9BC4;
  --indigo-ink: #1A2340;

  /* Text */
  --fg:   #EDE8DC;
  --fg-2: #A8B0BD;
  --fg-3: #838C9C;   /* tested: 5.34:1 on card, 5.60:1 on ground at 10px mono */

  /* Chart categorical (dark steps, fixed order) */
  --c1:#009EAD; --c2:#C4563F; --c3:#8168C6; --c4:#B08722; --c5:#AE5399; --c6:#399C68;

  /* Type families */
  --f-display: "Anek Latin","Anek Tamil","Segoe UI",system-ui,sans-serif;
  --f-serif:   "Source Serif 4","Noto Serif Tamil",Georgia,serif;
  --f-mono:    "IBM Plex Mono",Consolas,monospace;

  /* Type scale, reference-calibrated */
  --t-hero: clamp(2.6rem, 1.35rem + 4.9vw, 4.75rem);   /* 41.6 → 76 */
  --t-h1:   clamp(2.15rem, 1.4rem + 2.9vw, 3.5rem);    /* 34   → 56 */
  --t-h2:   clamp(1.95rem, 1.35rem + 2.6vw, 3.25rem);  /* 31   → 52 */
  --t-h3:   clamp(1.35rem, 1.12rem + 1.05vw, 1.75rem); /* 21.6 → 28 */
  --t-lead: clamp(1.06rem, 1rem + .42vw, 1.25rem);     /* 17   → 20 */
  --t-body: 1rem;
  --t-sm:   .9375rem;
  --t-xs:   .8125rem;
  --t-mono: .75rem;
  --lh-head: 1.16;

  /* Space: the rhythm that fixes the congestion */
  --s-section: clamp(4.5rem, 2.6rem + 5.4vw, 7.5rem);  /* 72 → 120 */
  --s-block:   clamp(2rem, 1.35rem + 2.4vw, 3.5rem);   /* 32 → 56  */
  --s-gap:     clamp(1rem, .7rem + 1vw, 1.5rem);       /* 16 → 24  */
  --gutter:    clamp(1.25rem, .35rem + 3.4vw, 5.5rem); /* 20 → 88  */
  --maxw: 1265px;
  --maxw-text: 780px;

  /* Geometry */
  --r-card: 16px;
  --r-lg:   24px;
  --r-blob: 48px;
  --r-sm:   10px;
  --r-pill: 100px;
  --btn-h:  48px;

  --shadow-1: 0 5px 20px rgba(0,0,0,.34);
  --shadow-2: 0 12px 44px rgba(0,0,0,.46);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Semantic bands (dark defaults) */
  --bg:      var(--night);
  --bg-2:    #0E1116;
  --bg-3:    #12151C;
  --card:    var(--surface);
  --border:  var(--line);
  --header-h: 76px;
  color-scheme: dark;

  /* Absolute ground colours: never re-scoped, so a divider can always paint
     the exact colour of the band on the other side of it. */
  --ground-night: #0A0A0D;
  --ground-band2: #0E1116;
  --ground-cream: #FAF7F0;
}

/* ---------------------------------------------------------------------------
   THE LIGHT BAND: a scoped ground, not a second theme.
   AITN runs on night. Where the site turns from argument to record, the ground
   turns to Think TN's olai cream: the parent brand's own paper. Because every
   component reads from these tokens, everything inside adapts automatically.
   Officers print these sections; a near-black page prints badly.
   -------------------------------------------------------------------------- */
.band-light{
  --bg:#FAF7F0; --bg-2:#F4EFE4; --bg-3:#FCEFDE;
  --surface:#FFFFFF; --surface-2:#F6F1E6; --surface-3:#EFE8D8;
  --card:#FFFFFF;
  --line:#E5DDCB; --line-2:#D4C9AF; --border:#E5DDCB;
  --mayil:var(--mayil-ink); --mayil-glow:rgba(11,90,99,.10);
  --manjal:var(--manjal-ink); --indigo:var(--indigo-ink);
  --fg:#191510; --fg-2:#544E45; --fg-3:#645D51;   /* tested: 5.96:1 on cream, 6.38:1 on white */
  --c1:#007A86; --c2:#A63D28; --c3:#5E44A8; --c4:#8A6612; --c5:#8C3B7A; --c6:#26794A;
  --shadow-1: 0 5px 20px rgba(41,38,47,.10);
  --shadow-2: 0 12px 44px rgba(41,38,47,.14);
  background:var(--bg); color:var(--fg);
  color-scheme: light;
}
/* Component corrections that only apply on the cream ground */
.band-light .btn--primary{ color:#fff; }
.band-light .pillrow a.active{ color:#fff; }
.band-light .tile .num{ color:#04252a; opacity:.2; }
.band-light .tile .weave{ opacity:.2;
  background-image:repeating-linear-gradient(58deg, color-mix(in srgb,#04252a 45%,transparent) 0 1px, transparent 1px 26px); }
.band-light .card::before,.band-light .figc::before,.band-light .evline::before{ opacity:.3; }
.band-light .pill{ background:color-mix(in srgb,#04252a 5%,transparent); }
.band-light .note{ background:color-mix(in srgb,var(--surface-2) 85%,transparent); }
/* --night is deliberately NOT re-scoped, so anything tinted with it must be
   corrected here or it puts dark text on a dark wash. */
.band-light .tile .role{ background:rgba(255,255,255,.78); color:#191510; }
.band-light .listrow .thumb .n{ color:#04252a; opacity:.72; }
.band-light ::selection{ background:var(--mayil-ink); color:#fff; }
/* Hue-coded text must be darkened on paper. The engine and layer hues are
   chosen for a near-black ground; on cream, manjal gold measures 1.88:1 and
   the rest fail too. Darkening keeps the colour coding and clears AA. */
.band-light .ecard .size{ color:color-mix(in srgb,var(--eh) 45%,#0B0906); }
.band-light .card .idx,
.band-light .slayer .idx{ color:color-mix(in srgb,var(--sl) 45%,#0B0906); }

/* ----------------------------------------------------------------------------
   1 · Reset + base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-display); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; transition:background .4s var(--ease), color .4s var(--ease);
}
img,svg,video{ max-width:100%; display:block; }
a{ color:var(--mayil); text-decoration:none; }
h1,h2,h3,h4{ font-weight:700; line-height:var(--lh-head); letter-spacing:-.02em; margin:0; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); }
h4{ font-size:1.08rem; }
p{ margin:0 0 1.1rem; }
:focus-visible{ outline:2.5px solid var(--mayil); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--mayil); color:#04252a; }
:lang(ta){ line-height:1.78; }
.skip{ position:absolute; left:-999px; background:var(--mayil); color:#04252a; padding:.8rem 1.2rem; z-index:1000; font-weight:700; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

/* Fine grain texture, gives flat dark panels a surface */
.tex::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   2 · Layout
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--text{ max-width:calc(var(--maxw-text) + var(--gutter)*2); }
.section{ padding-block:var(--s-section); position:relative; }
.section--half{ padding-block:calc(var(--s-section)*.6); }
.section--flush-t{ padding-top:0; }
.band-2{ background:var(--bg-2); }
.band-3{ background:var(--bg-3); }

.grid{ display:grid; gap:var(--s-gap); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1080px){ .g-4{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; }
.split--wide-l{ grid-template-columns:1.15fr .85fr; }
.split--wide-r{ grid-template-columns:.85fr 1.15fr; }
.split--top{ align-items:start; }
@media(max-width:980px){ .split,.split--wide-l,.split--wide-r{ grid-template-columns:1fr; } }

.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.serif{ font-family:var(--f-serif); }
.muted{ color:var(--fg-2); } .dim{ color:var(--fg-3); }
.hr{ height:1px; background:var(--border); border:0; }

/* Section heading block */
.sec-head{ margin-bottom:var(--s-block); }
.sec-head .sh-row{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.sec-head h2{ font-size:var(--t-h2); max-width:24ch; }
.sec-head .sec-lead{ color:var(--fg-2); font-size:var(--t-lead); max-width:56ch; margin:1.25rem 0 0;
  font-family:var(--f-serif); line-height:1.7; }
.eyebrow{ font-family:var(--f-mono); font-size:var(--t-mono); text-transform:uppercase; letter-spacing:.24em; color:var(--mayil); display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.15rem; }
.eyebrow::before{ content:""; width:30px; height:1px; background:currentColor; }
/* hue-coded eyebrows: #AE5399 and #C4563F fail as 12px text on night */
.eyebrow--hue{ color:color-mix(in srgb,var(--eb) 72%,var(--fg)); }
.seeall{ font-family:var(--f-mono); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.16em; color:var(--mayil); display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap; transition:gap .3s var(--ease); padding-bottom:.35rem; }
.seeall svg{ width:15px; height:15px; }
.seeall:hover{ gap:1rem; }

/* ----------------------------------------------------------------------------
   3 · Buttons
   -------------------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:var(--btn-h);
  padding:0 1.75rem; border-radius:var(--r-pill); border:1.5px solid transparent; cursor:pointer;
  font-family:var(--f-display); font-weight:600; font-size:1rem; letter-spacing:.005em;
  transition:transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s, color .3s; }
.btn svg{ width:17px; height:17px; flex:none; }
.btn--primary{ background:var(--mayil); color:#04252a; }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px var(--mayil-glow); }
.btn--ghost{ background:transparent; border-color:var(--line-2); color:var(--fg); }
.btn--ghost:hover{ border-color:var(--mayil); color:var(--mayil); transform:translateY(-2px); }
.btn--onteal{ background:#fff; color:#04302f; }
.btn--onteal:hover{ transform:translateY(-2px); }
.btn--outteal{ background:transparent; border-color:rgba(255,255,255,.42); color:#fff; }
.btn--outteal:hover{ border-color:#fff; transform:translateY(-2px); }
.btn--lg{ min-height:56px; padding:0 2.1rem; font-size:1.06rem; }
.textlink{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem; color:var(--fg); transition:color .3s, gap .3s var(--ease); }
.textlink svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.textlink:hover{ color:var(--mayil); } .textlink:hover svg{ transform:translateX(4px); }


/* ----------------------------------------------------------------------------
   4 · Utility bar · Header · Drawer
   -------------------------------------------------------------------------- */
.util{ background:var(--bg-2); border-bottom:1px solid var(--border); }
.util .wrap{ display:flex; justify-content:space-between; align-items:center; min-height:40px; gap:1rem; }
.util a,.util span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; color:var(--fg-3); }
.util a:hover{ color:var(--mayil); }
.util .u-left,.util .u-right{ display:flex; gap:1.5rem; align-items:center; }
@media(max-width:820px){ .util .u-left span:not(:first-child){ display:none; } }

.header{ position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.5); border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s, box-shadow .4s; }
.header.is-solid{ background:color-mix(in srgb,var(--bg) 95%,transparent); border-bottom-color:var(--border); box-shadow:0 12px 40px rgba(0,0,0,.28); }
.header .bar{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:1.25rem; }
.brand{ display:flex; align-items:center; gap:.8rem; flex:none; }
.brand .mark{ font-family:var(--f-display); font-weight:800; font-size:1.6rem; letter-spacing:-.035em; color:var(--fg); line-height:1; }
.brand .mark b{ color:var(--mayil); }
.brand .sub{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg-3); border-left:1px solid var(--border); padding-left:.8rem; line-height:1.3; }
@media(max-width:1140px){ .brand .sub{ display:none; } }
.nav{ display:flex; gap:.15rem; align-items:center; }
.nav a{ font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-2);
  padding:.6rem .78rem; border-radius:var(--r-sm); position:relative; transition:color .25s; }
.nav a:hover{ color:var(--fg); } .nav a.active{ color:var(--mayil); }
.nav a::after{ content:""; position:absolute; left:.78rem; right:.78rem; bottom:.3rem; height:2px; background:var(--mayil);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); border-radius:2px; }
.nav a:hover::after,.nav a.active::after{ transform:scaleX(1); }
@media(max-width:1140px){ .nav{ display:none; } }
.hctl{ display:flex; align-items:center; gap:.55rem; }
.icon-btn{ width:44px; height:44px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:transparent;
  color:var(--fg-2); display:grid; place-items:center; cursor:pointer; font-family:var(--f-mono); font-size:.72rem;
  transition:all .3s var(--ease); }
.icon-btn:hover{ border-color:var(--mayil); color:var(--mayil); transform:translateY(-2px); }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn.wide{ width:auto; padding-inline:1rem; }
.burger{ display:none; } @media(max-width:1140px){ .burger{ display:grid; } }

.drawer{ position:fixed; inset:0; z-index:200; background:var(--bg); transform:translateX(100%);
  transition:transform .5s var(--ease-out); display:flex; flex-direction:column; padding:1.5rem var(--gutter) 2.5rem; overflow-y:auto; }
.drawer.open{ transform:none; }
.drawer .d-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{ font-size:clamp(1.5rem,1.2rem + 1.6vw,2rem); font-weight:700; letter-spacing:-.025em; padding:.9rem 0;
  border-bottom:1px solid var(--border); color:var(--fg); display:flex; justify-content:space-between; align-items:baseline; }
.drawer nav a span{ font-family:var(--f-mono); font-size:.78rem; color:var(--fg-3); }
.drawer nav a:hover{ color:var(--mayil); }

/* ----------------------------------------------------------------------------
   5 · Hero, full viewport, generous
   -------------------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:min(92vh,940px); padding-block:clamp(3.5rem,2rem + 6vw,7rem); }
.hero--page{ min-height:auto; padding-block:clamp(3rem,2rem + 4vw,5.5rem); display:block; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-glow{ position:absolute; border-radius:50%; filter:blur(130px); }
.hero-glow.g1{ width:62vw; height:62vw; max-width:820px; max-height:820px; top:-20%; right:-12%;
  background:radial-gradient(circle,var(--mayil),transparent 64%); opacity:.3; }
.hero-glow.g2{ width:52vw; height:52vw; max-width:680px; max-height:680px; bottom:-28%; left:-14%;
  background:radial-gradient(circle,var(--manjal),transparent 64%); opacity:.15; }
/* The strata: the seven-layer stack, drawn as the hero's own landscape.
   The signature artefact doubles as the photography this brand refuses to fake. */
.hero-strata{ position:absolute; inset:-14% -8%; display:flex; flex-direction:column; gap:1.1%;
  transform:rotate(-7deg) scale(1.14); transform-origin:62% 50%;
  /* one coherent atmosphere, not a rainbow: desaturate hard and veil in brand teal */
  filter:saturate(.42) brightness(.92);
  mask-image:linear-gradient(96deg, transparent 14%, #000 62%, #000 88%, transparent 100%); }
.hero-strata i{ display:block; flex:1; border-radius:200px; filter:blur(28px); opacity:.34;
  background:linear-gradient(90deg, transparent 4%,
    color-mix(in srgb,var(--s) 52%,transparent) 48%,
    color-mix(in srgb,var(--s) 16%,transparent) 100%); }

/* A crisp hairline per stratum, so the seven layers read AS seven layers */
.hero-strata--lines{ filter:none; z-index:1;
  mask-image:linear-gradient(96deg, transparent 20%, #000 66%, #000 90%, transparent 100%); }
.hero-strata--lines i{ filter:none; border-radius:0; opacity:.5; background:none;
  border-top:1px solid color-mix(in srgb,var(--s) 55%,transparent); }
/* the veil that unifies the strata into a single teal dusk */
.hero-veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(104deg, var(--bg) 8%, color-mix(in srgb,var(--mayil-deep) 26%,transparent) 58%,
             color-mix(in srgb,var(--mayil-deep) 12%,transparent) 100%);
  mix-blend-mode:soft-light; }
@media (prefers-reduced-motion:no-preference){
  html.js .hero-strata i{ animation:drift 22s var(--ease) infinite alternate; }
  html.js .hero-strata i:nth-child(2n){ animation-duration:28s; animation-delay:-6s; }
  html.js .hero-strata i:nth-child(3n){ animation-duration:34s; animation-delay:-12s; }
}
@keyframes drift{ from{ transform:translateX(-2.2%); } to{ transform:translateX(2.2%); } }

.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(2.5rem,1.5rem + 4vw,5.5rem); align-items:center; width:100%; }
@media(max-width:1020px){ .hero-inner{ grid-template-columns:1fr; gap:2.75rem; } }

/* Headline, short, huge, one focal thought */
.hero h1{ font-size:clamp(3rem,1.3rem + 6.4vw,5.5rem); letter-spacing:-.042em; max-width:15ch;
  line-height:1.0; }
.hero h1 .em{ color:var(--mayil); }
.hero h1 .mut{ color:var(--fg-3); }
.hero-support{ font-family:var(--f-serif); font-size:clamp(1.08rem,1rem + .55vw,1.35rem);
  color:var(--fg-2); max-width:44ch; line-height:1.66;
  margin:clamp(1.5rem,1rem + 1.3vw,2.25rem) 0 clamp(1.9rem,1.3rem + 1.7vw,2.75rem); }
.hero-cta{ display:flex; gap:clamp(1rem,.6rem + 1.2vw,1.9rem); flex-wrap:wrap; align-items:center; }

/* Scroll cue: the reference's thin vertical rule */
.hero-scroll{ position:absolute; left:var(--gutter); bottom:clamp(1.5rem,3vh,2.75rem); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.9rem; font-family:var(--f-mono);
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-3); }
.hero-scroll::after{ content:""; width:1px; height:clamp(44px,6vh,72px);
  background:linear-gradient(var(--line-2),transparent); }
@media(max-width:1020px){ .hero-scroll{ display:none; } }

/* Hero utility cluster, glass tiles that are links, as the reference's are */
.hq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.hq{ position:relative; overflow:hidden; border-radius:var(--r-card); padding:1.4rem 1.5rem;
  background:color-mix(in srgb,var(--card) 62%,transparent);
  border:1px solid color-mix(in srgb,var(--fg) 11%,transparent);
  backdrop-filter:blur(16px) saturate(1.3); text-decoration:none; color:inherit;
  transition:transform .45s var(--ease), border-color .45s, background .45s; }
.hq:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--mayil) 55%,transparent);
  background:color-mix(in srgb,var(--card) 78%,transparent); }
.hq .lbl{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  font-family:var(--f-mono); font-size:.68rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.15em; color:var(--fg-2); }
.hq .lbl svg{ width:14px; height:14px; flex:none; opacity:.5; transition:transform .35s var(--ease), opacity .35s; }
.hq:hover .lbl{ color:var(--fg); }
.hq:hover .lbl svg{ opacity:1; transform:translateX(4px); }
.hq .big{ font-family:var(--f-display); font-weight:700; letter-spacing:-.028em; line-height:1;
  font-size:clamp(1.6rem,1.1rem + 1.5vw,2.3rem); color:var(--fg); margin-top:.9rem; }
.hq .sub{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-2); margin-top:.6rem; line-height:1.55; }
.hq--span2{ grid-column:1/-1; }
.hq--feature{ background:linear-gradient(142deg,
    color-mix(in srgb,var(--mayil) 26%,var(--card)) 0%, color-mix(in srgb,var(--card) 72%,transparent) 78%);
  border-color:color-mix(in srgb,var(--mayil) 36%,transparent); }
.hq--feature .lbl{ color:var(--mayil); }
.hq--feature .big{ font-family:var(--f-display); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:clamp(2.4rem,1.5rem + 2.8vw,3.6rem); letter-spacing:-.038em; }
.hq--feature .big{ letter-spacing:-.036em; }
/* Currency mark, numeral and unit are all set at one size on one baseline.
   Only colour separates them, so the figure reads as a single lockup. */
.hq--feature .big .c,
.hq--feature .big .u{ font-size:1em; font-weight:inherit; color:var(--mayil);
  vertical-align:baseline; letter-spacing:inherit; margin:0; }
.hq--note{ display:flex; align-items:center; gap:1.1rem; padding-block:1.2rem; }
.hq--note .t{ display:block; font-size:.92rem; font-weight:600; letter-spacing:-.012em; color:var(--fg); line-height:1.45; }
.hq--note .s{ display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--fg-2); margin-top:.5rem; line-height:1.6; }
@media(max-width:420px){ .hq-grid{ grid-template-columns:1fr; } }

/* ----------------------------------------------------------------------------
   6 · Cards, portrait, image-led, generous padding
   -------------------------------------------------------------------------- */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden;
  position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  box-shadow:var(--shadow-1); transition:transform .5s var(--ease), border-color .5s, box-shadow .5s; }
.card:hover{ transform:translateY(-7px); border-color:var(--line-2); box-shadow:var(--shadow-2); }
.card-body{ padding:1.6rem 1.6rem 1.75rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.card-body h3{ font-size:var(--t-h3); }
.card-body > p{ margin:0; }
.pill{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-mono); font-size:.64rem;
  text-transform:uppercase; letter-spacing:.14em; padding:.42em .8em; border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--night) 60%,transparent); border:1px solid var(--border); color:var(--fg-2); width:fit-content; }
.card .meta{ display:flex; gap:1rem; align-items:center; font-family:var(--f-mono); font-size:var(--t-xs);
  color:var(--fg-3); margin-top:auto; padding-top:1.1rem; }

/* Visual tile: the "photography slot", built from type + gradient + geometry */
.tile{ position:relative; overflow:hidden; aspect-ratio:3/2; display:flex; align-items:flex-end; padding:1.35rem 1.5rem; }
.tile::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(125% 130% at 82% 12%, color-mix(in srgb,var(--eh) 52%,transparent), transparent 64%),
             linear-gradient(158deg, color-mix(in srgb,var(--eh) 22%,var(--surface-2)) 8%, var(--surface) 92%); }
.tile::after{ content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.tile .num{ position:absolute; right:.02em; bottom:-.22em; z-index:1; font-family:var(--f-display); font-weight:800;
  font-size:clamp(6rem,4rem + 6vw,9.5rem); line-height:.82; letter-spacing:-.06em;
  color:#fff; opacity:.19; transform-origin:bottom right;
  transition:opacity .55s var(--ease), transform .55s var(--ease); }
.tile .rule{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--eh); opacity:.8; z-index:2; }
.tile .role{ position:relative; z-index:2; font-family:var(--f-mono); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--fg); background:color-mix(in srgb,var(--night) 50%,transparent);
  border:1px solid color-mix(in srgb,var(--eh) 45%,transparent); padding:.42em .8em; border-radius:var(--r-pill); backdrop-filter:blur(6px); }
.card:hover .tile .num{ opacity:.3; transform:scale(1.06); }

.ecard .size{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--eh); font-size:1.15rem; font-weight:600; }
.card .idx{ color:var(--sl); }
.ecard .card-body{ gap:.6rem; }

/* Editorial feature row: 1 large + stacked list (reference "Get inspired") */
.feature-row{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(1.5rem,1rem + 2.5vw,3rem); align-items:start; }
@media(max-width:980px){ .feature-row{ grid-template-columns:1fr; } }
.feature-card .tile{ aspect-ratio:16/11; }
.feature-card .card-body{ padding:1.9rem 1.9rem 2rem; }
.feature-card h3{ font-size:clamp(1.5rem,1.2rem + 1.3vw,2rem); }
.listrows{ display:flex; flex-direction:column; }
.listrow{ display:grid; grid-template-columns:96px 1fr auto; gap:1.35rem; align-items:center; padding:1.35rem 0;
  border-bottom:1px solid var(--border); text-decoration:none; color:inherit; transition:padding-left .35s var(--ease); }
.listrow:first-child{ border-top:1px solid var(--border); }
.listrow:hover{ padding-left:.5rem; }
.listrow .thumb{ width:96px; height:72px; border-radius:12px; position:relative; overflow:hidden; flex:none; }
.listrow .thumb::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 75% 20%, color-mix(in srgb,var(--eh) 62%,transparent), transparent 65%),
             linear-gradient(150deg, color-mix(in srgb,var(--eh) 24%,var(--surface-2)), var(--surface)); }
.listrow .thumb .n{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-mono);
  font-size:1.05rem; font-weight:600; color:#fff; opacity:.95; }
.listrow .lr-k{ font-family:var(--f-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.15em; color:var(--fg-3); }
.listrow h4{ font-size:1.08rem; margin-top:.4rem; }
.listrow .go{ color:var(--fg-3); transition:color .3s, transform .3s var(--ease); }
.listrow .go svg{ width:16px; height:16px; }
.listrow:hover .go{ color:var(--mayil); transform:translateX(4px); }
@media(max-width:520px){ .listrow{ grid-template-columns:64px 1fr; } .listrow .thumb{ width:64px; height:56px; } .listrow .go{ display:none; } }

/* Figure / stat panel */
.figc{ border:1px solid var(--border); border-radius:var(--r-card); padding:1.75rem 1.85rem; background:var(--card); }
.figc .val{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.9rem,1.3rem + 1.9vw,2.75rem); line-height:1; color:var(--fg); }
.figc .lab{ color:var(--fg-2); font-size:var(--t-sm); margin-top:.85rem; }
.figc .src{ font-family:var(--f-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:var(--fg-3); }
.figc h3{ font-size:1.12rem; }
.figc > :last-child{ margin-bottom:0; }

/* ----------------------------------------------------------------------------
   7 · Colour bands + curved dividers
   -------------------------------------------------------------------------- */
.teal-band{ position:relative; background:linear-gradient(135deg,var(--mayil-deep) 0%,#013f42 62%,#012b2e 100%);
  color:#EAF6F7; overflow:hidden; }
.teal-band h2,.teal-band h3{ color:#fff; }
.teal-band .eyebrow{ color:#9be3dd; }
.teal-band p{ color:#c9e7e8; }
.teal-band .figc{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }
.teal-band .figc .val{ color:#fff; } .teal-band .figc .lab{ color:#c9e7e8; } .teal-band .figc .src{ color:#8fc9cb; }
.teal-band .blob{ position:absolute; width:52vw; height:52vw; max-width:760px; max-height:760px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 62%); top:-24%; right:-12%; pointer-events:none; }
.gold-band{ position:relative; background:linear-gradient(150deg,color-mix(in srgb,var(--manjal) 15%,var(--bg-2)),var(--bg-2) 70%); overflow:hidden; }

/* SVG curve divider, sits at the top or bottom edge of a band */
.curve{ position:absolute; left:0; width:100%; line-height:0; pointer-events:none; z-index:1; }
.curve svg{ width:100%; height:clamp(38px,4.4vw,78px); display:block; }
.curve--t{ top:-1px; } .curve--b{ bottom:-1px; }
/* The divider paints the colour of the band on the OTHER side of the edge. */
.curve path{ fill:var(--ground-night); }
.curve--cream path{ fill:var(--ground-cream); }
.curve--band2 path{ fill:var(--ground-band2); }

/* Diagonal-cut band (reference events hero) */
.diag{ position:relative; overflow:hidden; }
.diag::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg,var(--mayil-deep),#012b2e);
  clip-path:polygon(0 0,100% 0,100% 78%,0 100%); }

/* ----------------------------------------------------------------------------
   8 · Tables
   -------------------------------------------------------------------------- */
.tblwrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-card); background:var(--card); }
.teal-band .tblwrap{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); }
table.data{ width:100%; border-collapse:collapse; font-size:var(--t-sm); min-width:480px; }
table.data th,table.data td{ text-align:left; padding:1.15rem 1.4rem; border-bottom:1px solid var(--border); }
.teal-band table.data th,.teal-band table.data td{ border-bottom-color:rgba(255,255,255,.16); color:#e6f4f4; }
table.data thead th{ background:var(--surface-2); font-family:var(--f-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.13em; color:var(--fg-2); font-weight:600; }
.teal-band table.data thead th{ background:rgba(255,255,255,.09); color:#b8dedd; }
table.data tbody tr:last-child td{ border-bottom:none; }
table.data .num{ text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
table.data .row-hi{ background:color-mix(in srgb,var(--mayil) 10%,transparent); }
.teal-band table.data .row-hi{ background:rgba(255,255,255,.11); }
table.data .row-hi td{ font-weight:600; }

/* ----------------------------------------------------------------------------
   9 · The Intelligence Stack diagram
   -------------------------------------------------------------------------- */
.stack-layers{ display:flex; flex-direction:column; gap:.7rem; }
.slayer{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.25rem;
  padding:1.3rem 1.6rem; border:1px solid var(--border); border-radius:var(--r-card);
  background:linear-gradient(90deg,color-mix(in srgb,var(--sl) 15%,var(--card)),var(--card) 72%);
  position:relative; overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.slayer::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sl); }
.slayer:hover,.slayer.hot{ transform:translateX(8px); border-color:var(--sl); box-shadow:-8px 0 28px color-mix(in srgb,var(--sl) 22%,transparent); }
.slayer .idx{ font-family:var(--f-mono); font-size:.72rem; font-weight:600; width:2.2ch;
  /* lifted toward the body colour: #AE5399 and #C4563F fail as small text on night */
  color:color-mix(in srgb,var(--sl) 72%,var(--fg)); }
.slayer .name{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; letter-spacing:-.012em; }
.slayer .claim{ display:block; color:var(--fg-2); font-size:var(--t-sm); margin-top:.3rem; }
.slayer .go{ color:var(--sl); opacity:0; transform:translateX(-6px); transition:all .3s var(--ease); }
.slayer .go svg,.slayer svg{ width:16px; height:16px; }
.slayer:hover .go{ opacity:1; transform:none; }
@media(max-width:600px){ .slayer{ grid-template-columns:auto 1fr; padding:1.1rem 1.25rem; } .slayer .go{ display:none; } }
.stack-watermark{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; color:var(--fg-3); text-align:right; margin-top:1.1rem; }

/* ----------------------------------------------------------------------------
   10 · Evidence legend · gate · callout · prose
   -------------------------------------------------------------------------- */
.evline{ border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(1.75rem,1.2rem + 1.6vw,2.75rem); background:var(--card); }
.evline .lead{ font-weight:700; font-size:var(--t-h3); margin-bottom:1.5rem; letter-spacing:-.015em; }
.evline .legend{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; font-size:var(--t-sm); color:var(--fg-2); }
.evline .legend > div{ display:flex; gap:.6rem; align-items:baseline; }
@media(max-width:760px){ .evline .legend{ grid-template-columns:1fr; gap:.9rem; } }

.gate{ display:grid; gap:.8rem; }
.gate-item{ display:flex; gap:1rem; align-items:flex-start; padding:1.2rem 1.4rem; border:1px solid var(--border);
  border-radius:var(--r-card); background:var(--card); }
.gate-box{ width:24px; height:24px; border-radius:7px; border:1.5px solid var(--line-2); flex:none; display:grid; place-items:center; margin-top:.05rem; }
.gate-item.done .gate-box{ background:var(--mayil); border-color:var(--mayil); }
.gate-item.done .gate-box svg{ width:13px; height:13px; color:#04252a; }
.gate-item.todo .gate-box{ border-style:dashed; }
.gate-item .gt{ font-weight:600; }
.gate-item .gd{ color:var(--fg-2); font-size:var(--t-sm); margin-top:.3rem; }
.gate-item .idx{ font-family:var(--f-mono); font-weight:600; color:var(--mayil); }

.callout{ border-left:3px solid var(--manjal); padding:1.35rem 0 1.35rem 1.75rem; font-family:var(--f-serif);
  font-size:var(--t-lead); line-height:1.62; color:var(--fg); }
.callout--teal{ border-color:var(--mayil); }
.teal-band .callout{ border-color:#9be3dd; color:#eaf6f7; }
.note{ font-family:var(--f-mono); font-size:var(--t-xs); line-height:1.85; color:var(--fg-3);
  background:color-mix(in srgb,var(--surface-2) 55%,transparent); border-left:2px solid var(--line-2);
  padding:1.1rem 1.35rem; border-radius:0 var(--r-sm) var(--r-sm) 0; }
.prose{ max-width:var(--maxw-text); }
.prose p,.prose li{ font-family:var(--f-serif); font-size:var(--t-lead); line-height:1.75; color:var(--fg); }
.prose h3{ font-family:var(--f-display); font-size:var(--t-h3); margin:2.75rem 0 1rem; }
.prose ul{ padding-left:1.3rem; } .prose li{ margin-bottom:.7rem; }
.prose > :first-child{ margin-top:0; }
.teal-band .note{ background:rgba(255,255,255,.08); border-left-color:rgba(255,255,255,.35); color:#b9dcdd; }
.teal-band .note a{ color:#fff; text-decoration:underline; }

/* Page header */
.pagehead{ padding-top:clamp(2.5rem,1.5rem + 3vw,4rem); padding-bottom:clamp(2rem,1.4rem + 2.4vw,3.5rem); position:relative; overflow:hidden; }
.crumb{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--fg-3); letter-spacing:.06em;
  margin-bottom:1.4rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.crumb a{ color:var(--fg-3); } .crumb a:hover{ color:var(--mayil); }
.crumb svg{ width:11px; height:11px; opacity:.5; flex:none; }
.pagehead h1{ font-size:var(--t-h1); max-width:24ch; }
.pagehead .ph-lead{ font-family:var(--f-serif); font-size:var(--t-lead); color:var(--fg-2); max-width:58ch;
  margin-top:1.5rem; line-height:1.7; }
.pillrow{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:clamp(2rem,1.4rem + 2vw,3rem);
  padding-top:1.5rem; border-top:1px solid var(--border); }
.pillrow a{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.08em; padding:.62rem 1.15rem;
  border-radius:var(--r-pill); border:1px solid var(--border); color:var(--fg-2); transition:all .3s var(--ease); }
.pillrow a:hover{ border-color:var(--mayil); color:var(--mayil); }
.pillrow a.active{ background:var(--mayil); color:#04252a; border-color:var(--mayil); }

/* ----------------------------------------------------------------------------
   11 · Carousel with peeking cards
   -------------------------------------------------------------------------- */
.carousel{ position:relative; }
.carousel-track{ display:flex; gap:var(--s-gap); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:.5rem; }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track > *{ scroll-snap-align:start; flex:0 0 clamp(270px,30%,360px); }
.carousel-bleed .carousel-track{ padding-right:var(--gutter); margin-right:calc(var(--gutter)*-1); }
.carousel-nav{ display:flex; gap:.6rem; }

/* ----------------------------------------------------------------------------
   12 · Footer
   -------------------------------------------------------------------------- */
.footer{ background:var(--bg-2); border-top:1px solid var(--border); padding-top:var(--s-section); }
.footer-top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(1.5rem,1rem + 2.5vw,3rem);
  padding-bottom:clamp(2.5rem,1.8rem + 2vw,3.5rem); border-bottom:1px solid var(--border); }
@media(max-width:940px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .footer-top{ grid-template-columns:1fr; } }
.footer .f-lead{ font-family:var(--f-serif); color:var(--fg-2); font-size:var(--t-sm); line-height:1.75; max-width:40ch; margin-top:1.2rem; }
.footer .thanks{ font-family:var(--f-serif); color:var(--mayil); margin-top:1.4rem; }
.fcol h4{ font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.15em; color:var(--fg-3); margin-bottom:1.2rem; }
.fcol a{ display:block; color:var(--fg-2); font-size:var(--t-sm); padding:.4rem 0; transition:color .25s, padding-left .25s; }
.fcol a:hover{ color:var(--mayil); padding-left:.35rem; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding-block:2rem; font-family:var(--f-mono); font-size:var(--t-xs); color:var(--fg-3); }
.footer-bottom a{ color:var(--fg-3); } .footer-bottom a:hover{ color:var(--mayil); }
.backtop{ display:inline-flex; align-items:center; gap:.6rem; min-height:44px; padding:0 1.3rem;
  border:1px solid var(--line-2); border-radius:var(--r-pill); font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2); transition:all .3s var(--ease); }
.backtop svg{ width:15px; height:15px; }
.backtop:hover{ border-color:var(--mayil); color:var(--mayil); transform:translateY(-2px); }

/* ----------------------------------------------------------------------------
   13 · Motion, progressive enhancement only (html.js)
   -------------------------------------------------------------------------- */
html.js [data-reveal]{ opacity:0; transform:translateY(30px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.js [data-reveal].in{ opacity:1; transform:none; }
html.js [data-reveal][data-delay="1"]{ transition-delay:.09s; }
html.js [data-reveal][data-delay="2"]{ transition-delay:.18s; }
html.js [data-reveal][data-delay="3"]{ transition-delay:.27s; }
html.js [data-reveal][data-delay="4"]{ transition-delay:.36s; }
html.js [data-reveal][data-delay="5"]{ transition-delay:.45s; }
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ----------------------------------------------------------------------------
   13b · Pixel polish: the fine layer that separates good from rich
   -------------------------------------------------------------------------- */
/* A single-pixel top highlight gives every panel a lit edge instead of a flat fill */
.card,.figc,.evline,.qc,.hq,.slayer,.gate-item,.tblwrap{ isolation:isolate; }
.card::before,.figc::before,.evline::before,.hq::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 22%,transparent) 22%,
             color-mix(in srgb,var(--fg) 22%,transparent) 78%,transparent); opacity:.5; }
.figc,.evline{ position:relative; }
.tile::before{ z-index:0; }

/* A fine diagonal rule motif inside the visual tiles, structure, not decoration */
.tile .weave{ position:absolute; inset:0; z-index:0; opacity:.16; pointer-events:none;
  background-image:repeating-linear-gradient(58deg, color-mix(in srgb,#fff 60%,transparent) 0 1px, transparent 1px 26px);
  mask-image:linear-gradient(215deg,#000 6%,transparent 62%); }

/* Buttons get a soft top sheen so the pill reads as a solid object */
.btn--primary{ background-image:linear-gradient(180deg,rgba(255,255,255,.18),transparent 58%); }
.btn--onteal{ background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.72)); }

/* Mono metadata: consistent optical tracking + true tabular figures everywhere */
.mono,.eyebrow,.pill,.seeall,.textlink,.hq .lbl,.hq .sub,.note,.crumb,.stack-watermark,
.figc .src,.card .meta,.footer-bottom,.util a,.util span,.backtop,.pillrow a,.hero-scroll{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"kern" 1; }

/* Links inside prose get a refined underline rather than a browser default */
.prose a,.callout a,.note a,.sec-lead a{ color:var(--mayil);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb,var(--mayil) 42%,transparent); transition:text-decoration-color .3s; }
.prose a:hover,.callout a:hover,.note a:hover{ text-decoration-color:var(--mayil); }

/* Optical alignment: pull the eyebrow rule flush with the text column edge */
.eyebrow{ margin-left:1px; }
/* Headline rag control, stop widows on the big display sizes */
h1,h2{ text-wrap:balance; }
.sec-lead,.hero-support,.ph-lead{ text-wrap:pretty; }

/* ----------------------------------------------------------------------------
   14 · Print, officers print; sources survive, chrome does not
   -------------------------------------------------------------------------- */
@media print{
  .util,.header,.footer,.drawer,.hero-bg,.icon-btn,.btn,.backtop,.carousel-nav,.curve,.tex::after,
  .hero-strata,.hero-scroll,.tile .weave,.card::before,.figc::before,.evline::before,.hq::before{ display:none !important; }
  body{ background:#fff; color:#000; }
  *{ box-shadow:none !important; text-shadow:none !important; }
  .card,.figc,.tblwrap,.slayer,.evline,.gate-item{ border-color:#bbb !important; break-inside:avoid; }
  .teal-band,.gold-band,.tile::before,.tile::after{ background:none !important; }
  a{ color:#000; text-decoration:underline; }
  .section{ padding-block:1.4rem; }
  .hero{ min-height:auto; }
}