/* ==========================================================================
   Shillong Teer — shillongteer.biz (हिंदी)
   Layout reused from the supplied header reference; card / nav / footer /
   article treatments follow the supplied screenshots.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#07070E;
  --panel:#120F21;
  --panel-2:#15181B;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);

  --gold-1:#FAC554;
  --gold-2:#F9B31E;
  --gold-soft:#FAE46E;
  --cream:#FEF7DA;
  --orange:#EF5F00;

  --txt:rgba(255,255,255,.80);
  --txt-dim:rgba(255,255,255,.58);
  --txt-strong:#FFFFFF;

  --wrap:1200px;
  --r-lg:20px;
  --r-md:12px;

  --f-display:"Baloo 2","Noto Sans Devanagari","Trebuchet MS",sans-serif;
  --f-body:"Mukta","Noto Sans Devanagari","Segoe UI",sans-serif;

  /* motion — one easing vocabulary so every control feels like the same set */
  --t-fast:.16s;
  --t-mid:.3s;
  --t-slow:.62s;
  --ease-out:cubic-bezier(.16,1,.3,1);   /* decelerate: lifts, slides, fades */
  --ease-pop:cubic-bezier(.34,1.56,.64,1); /* slight overshoot: presses, pops */
}

*,*::before,*::after{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}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  /* looping attention glows and click ripples are dropped outright, not sped up */
  .head-cta,.auth-reg{animation:none!important}
  .ripple{display:none!important}
}

html{background:var(--ink)}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.85;
  color:var(--txt);
  background:transparent;
}

/* Site-wide background. A fixed pseudo-element rather than
   background-attachment:fixed — that repaints badly on very long pages
   and is broken on iOS Safari. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url("../images/background.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

img{max-width:100%;display:block;border:0}
a{color:var(--gold-1);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--gold-1);outline-offset:2px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold-2);color:#231703;padding:10px 16px;border-radius:8px;font-weight:700}

/* ==========================================================================
   1. HEADER  (layout reused from reference: menu · logo · search · actions · CTA)
   ========================================================================== */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(7,7,14,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-row{
  display:flex;align-items:center;gap:14px;
  min-height:70px;
}

.head-menu{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;
  background:none;border:0;border-radius:10px;color:var(--gold-1);cursor:pointer;
  transition:background var(--t-fast) ease, transform var(--t-fast) var(--ease-pop);
}
.head-menu:hover{background:rgba(250,197,84,.12)}
.head-menu:active{transform:scale(.9)}
.head-menu svg{width:26px;height:26px;fill:currentColor;
  transition:transform var(--t-mid) var(--ease-out)}
/* bars nudge apart on hover, and the button rotates a touch once the nav is open */
.head-menu:hover svg{transform:scale(1.08)}
.head-menu[aria-expanded="true"] svg{transform:rotate(90deg)}

.head-logo{flex:0 0 auto;display:flex;align-items:center}
.head-logo img{height:40px;width:auto}

.head-search{flex:1 1 auto;min-width:0}
.head-search form{display:flex;align-items:stretch;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:999px;overflow:hidden;
  transition:border-color var(--t-mid) ease, box-shadow var(--t-mid) ease}
.head-search form:focus-within{
  border-color:rgba(250,197,84,.55);
  box-shadow:0 0 0 3px rgba(250,197,84,.14)}
.head-search input{
  flex:1 1 auto;min-width:0;background:transparent;border:0;color:var(--txt-strong);
  font-family:var(--f-body);font-size:15px;padding:11px 18px}
.head-search input::placeholder{color:rgba(255,255,255,.42)}
.head-search input:focus{outline:none}
.head-search button{
  flex:0 0 auto;background:transparent;border:0;color:var(--gold-1);
  padding:0 16px;cursor:pointer;
  transition:color var(--t-fast) ease, transform var(--t-fast) var(--ease-pop)}
.head-search button:hover{color:var(--gold-soft)}
.head-search button:active{transform:scale(.86)}
.head-search button svg{width:17px;height:17px;fill:currentColor;
  transition:transform var(--t-mid) var(--ease-out)}
.head-search button:hover svg{transform:rotate(-12deg) scale(1.14)}

.head-actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.head-icon{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  background:none;border:0;color:var(--gold-1);cursor:pointer;
  padding:6px 10px;border-radius:10px;
  font-family:var(--f-body);font-size:11px;line-height:1.2;text-decoration:none;
  transition:background var(--t-fast) ease, transform var(--t-fast) var(--ease-pop)}
.head-icon:hover{background:rgba(250,197,84,.12);text-decoration:none}
.head-icon:active{transform:scale(.93)}
.head-icon svg{width:25px;height:25px;fill:currentColor;
  transition:transform var(--t-mid) var(--ease-pop)}
.head-icon:hover svg{transform:translateY(-2px) scale(1.08)}
.head-icon span{color:var(--txt-dim);transition:color var(--t-fast) ease}
.head-icon:hover span{color:var(--txt-strong)}

.head-cta{
  position:relative;overflow:hidden;
  flex:0 0 auto;
  display:inline-block;padding:11px 20px;border-radius:999px;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  color:#241704;font-family:var(--f-display);font-weight:700;font-size:15px;
  white-space:nowrap;box-shadow:0 4px 14px rgba(249,179,30,.28);
  transition:transform var(--t-mid) var(--ease-pop),
             box-shadow var(--t-mid) var(--ease-out),
             filter var(--t-fast) ease;
  animation:cta-glow 3.8s ease-in-out infinite}
/* light glints across the pill on hover — same trick as the auth buttons */
.head-cta::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-130%);
  transition:transform var(--t-slow) var(--ease-out)}
.head-cta:hover::before,.head-cta:focus-visible::before{transform:translateX(130%)}
.head-cta:hover,.head-cta:focus-visible{
  filter:brightness(1.07);text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(249,179,30,.48)}
.head-cta:active{
  transform:translateY(0) scale(.96);
  box-shadow:0 3px 10px rgba(249,179,30,.34)}
/* the resting glow is dropped on interaction so the hover shadow can take over */
.head-cta:hover,.head-cta:focus-visible,.head-cta:active{animation:none}

@keyframes cta-glow{
  0%,100%{box-shadow:0 4px 14px rgba(249,179,30,.28)}
  50%    {box-shadow:0 5px 21px rgba(249,179,30,.54)}
}

@media (max-width:1000px){ .head-icon span{display:none} }
@media (max-width:860px){
  .head-search{order:5;flex-basis:100%}
  .head-row{flex-wrap:wrap;padding-bottom:12px;gap:10px}
  .head-logo{margin-right:auto}
}
@media (max-width:520px){
  .head-cta{padding:9px 14px;font-size:13px}
  .head-logo img{height:32px}
}

/* ---------- explore nav (tabs + icon link row) ---------- */
.explore-nav{background:rgba(11,10,22,.92);border-bottom:1px solid var(--line-2)}
.tab-list{display:flex;gap:26px;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line-2)}
.tab-list button{
  position:relative;
  background:none;border:0;cursor:pointer;padding:13px 2px;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  color:var(--txt-dim);margin-bottom:-1px;
  transition:color var(--t-mid) ease}
.tab-list button:hover{color:var(--txt-strong)}
/* underline grows out from the centre instead of snapping on */
.tab-list button::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--gold-2);border-radius:3px 3px 0 0;
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--t-mid) var(--ease-out)}
.tab-list button:hover::after{transform:scaleX(.4)}
.tab-list button[aria-selected="true"]{color:var(--gold-1)}
.tab-list button[aria-selected="true"]::after{transform:scaleX(1)}

.tab-panel{display:none;gap:8px;padding:12px 0;overflow-x:auto;scrollbar-width:thin}
.tab-panel.is-on{display:flex}
.nav-link{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:8px 14px 8px 8px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--txt);font-size:14px;font-weight:600;white-space:nowrap;
  transition:border-color var(--t-mid) ease, color var(--t-mid) ease,
             transform var(--t-fast) var(--ease-pop),
             box-shadow var(--t-mid) var(--ease-out)}
/* warm wash wipes in from the left edge on hover */
.nav-link::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(250,197,84,.20),rgba(239,95,0,.10));
  opacity:0;transform:translateX(-100%);
  transition:transform var(--t-mid) var(--ease-out), opacity var(--t-fast) ease}
.nav-link:hover::before,.nav-link:focus-visible::before{opacity:1;transform:translateX(0)}
.nav-link:hover,.nav-link:focus-visible{
  border-color:rgba(250,197,84,.45);color:var(--txt-strong);text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.38)}
.nav-link:active{transform:translateY(0) scale(.97)}
.nav-link svg{width:26px;height:26px;flex:0 0 auto;position:relative;
  transition:transform var(--t-mid) var(--ease-pop)}
.nav-link:hover svg{transform:rotate(-8deg) scale(1.12)}
/* label only — must NOT catch the injected .ripple span, or the ripple
   loses position:absolute, joins the flow and inflates the whole row */
.nav-link span:not(.ripple){position:relative}
/* category items in the Browse Categories tab carry no href */
span.nav-link{cursor:default;-webkit-user-select:none;user-select:none}

/* ---------- LOGIN / रजिस्टर twin buttons (from reference) ---------- */
.auth-band{padding:22px 0 6px}
.auth-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;font-weight:700}
.auth-grid a{
  text-align:center;padding:13px 10px;border-radius:10px;color:#fff;
  font-family:var(--f-display);font-size:17px;letter-spacing:.5px;
  position:relative;overflow:hidden;
  transition:transform var(--t-mid) var(--ease-pop),
             filter var(--t-fast) ease,
             box-shadow var(--t-mid) var(--ease-out),
             letter-spacing var(--t-mid) var(--ease-out)}
.auth-grid a:hover,.auth-grid a:focus-visible{
  text-decoration:none;transform:translateY(-3px);
  filter:brightness(1.12);letter-spacing:1.1px}
.auth-grid a:active{transform:translateY(-1px) scale(.975);filter:brightness(1.04)}
.auth-grid a.auth-login{
  border:1px solid rgba(250,197,84,.85);
  background:linear-gradient(145deg,#3a2c0c,#1a1505 55%,#2a1f0a);
  text-shadow:0 0 6px rgba(250,197,84,.65);
  box-shadow:0 0 12px rgba(249,179,30,.22),inset 0 0 8px rgba(255,215,0,.10),0 2px 5px rgba(0,0,0,.6)}
.auth-grid a.auth-reg{
  border:1px solid rgba(255,168,40,.9);
  background:linear-gradient(145deg,#F9B31E,#EF7A00 55%,#EF5F00);
  color:#2A1602;text-shadow:0 1px 0 rgba(255,255,255,.30);
  box-shadow:0 0 14px rgba(239,95,0,.40),inset 0 0 10px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.55)}
.auth-grid a::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.42) 18%,transparent 36%);
  transform:translateX(-120%);
  transition:transform var(--t-slow) var(--ease-out)}
.auth-grid a:hover::before,.auth-grid a:focus-visible::before{transform:translateX(120%)}

/* register is the action we want found, so it breathes until it is touched */
.auth-grid a.auth-reg{animation:reg-pulse 3.2s ease-in-out infinite}
.auth-grid a.auth-reg:hover,
.auth-grid a.auth-reg:focus-visible,
.auth-grid a.auth-reg:active{animation:none}
@keyframes reg-pulse{
  0%,100%{box-shadow:0 0 14px rgba(239,95,0,.40),inset 0 0 10px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.55)}
  50%    {box-shadow:0 0 24px rgba(239,95,0,.70),inset 0 0 14px rgba(255,255,255,.26),0 2px 6px rgba(0,0,0,.55)}
}
@media (max-width:420px){ .auth-grid a{font-size:15px;padding:12px 6px} }

/* ==========================================================================
   2. HERO  (no dark overlay on the image — text-shadow only)
   ========================================================================== */
.hero{padding:18px 0 8px}
.hero-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(250,197,84,.28);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.hero-frame img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}
/* the two banner images are affiliate links — give them a press/hover affordance.
   The reduced-motion block at the top already kills the transition. */
.banner-link{display:block;overflow:hidden;line-height:0;border-radius:inherit}
.banner-link img{display:block;transition:transform var(--t-slow) var(--ease-out),filter var(--t-mid) ease}
.banner-link:hover img,.banner-link:focus-visible img{transform:scale(1.035);filter:saturate(1.06) brightness(1.05)}
.banner-link:focus-visible{outline:2px solid var(--gold-1);outline-offset:-3px}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:26px 30px 24px}
.hero-kicker{
  font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--gold-1);
  margin:0 0 4px;
  text-shadow:0 1px 2px #000,0 0 5px rgba(0,0,0,.98),0 2px 14px rgba(0,0,0,.95),0 0 34px rgba(0,0,0,.9)}
.hero-title{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(24px,4.1vw,50px);line-height:1.22;margin:0 0 6px;color:#fff;
  text-shadow:0 2px 3px #000,0 0 9px rgba(0,0,0,.98),0 3px 18px rgba(0,0,0,.95),0 0 46px rgba(0,0,0,.9)}
.hero-sub{
  margin:0;max-width:60ch;font-size:clamp(13px,1.5vw,18px);color:#fff;
  text-shadow:0 1px 2px #000,0 0 5px rgba(0,0,0,.98),0 2px 14px rgba(0,0,0,.95),0 0 34px rgba(0,0,0,.9)}
@media (max-width:640px){
  .hero-copy{position:static;padding:16px 4px 0}
  .hero-title,.hero-sub,.hero-kicker{text-shadow:none}
  .hero-title{color:var(--cream)}
}

/* ==========================================================================
   3. GAME CATEGORY PILLS
   ========================================================================== */
.cat-band{padding:16px 0 4px}
.cat-track{
  display:flex;align-items:center;gap:4px;
  background:rgba(9,8,20,.72);
  border:1px solid var(--line);
  border-radius:999px;padding:7px;
  justify-content:space-between;
  overflow-x:auto;scrollbar-width:none}
@media (max-width:900px){ .cat-track{justify-content:flex-start} }
.cat-track::-webkit-scrollbar{display:none}
.cat-pill{
  position:relative;overflow:hidden;
  flex:0 0 auto;background:none;border:0;cursor:pointer;
  padding:11px 26px;border-radius:999px;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  color:rgba(255,255,255,.88);white-space:nowrap;letter-spacing:.3px;
  transition:background var(--t-mid) ease, color var(--t-fast) ease,
             transform var(--t-fast) var(--ease-pop),
             box-shadow var(--t-mid) var(--ease-out)}
.cat-pill:hover{color:#fff;background:rgba(255,255,255,.07);transform:translateY(-1px)}
.cat-pill:active{transform:translateY(0) scale(.95)}
.cat-pill[aria-pressed="true"]{
  background:linear-gradient(180deg,#FAC554,#FABB37 50%,#F9B31E);
  color:#3A2503;box-shadow:0 3px 12px rgba(249,179,30,.35);
  /* pops once when the filter is applied, so the change is visible */
  animation:pill-pop .34s var(--ease-pop)}
.cat-pill[aria-pressed="true"]:hover{transform:none}
@keyframes pill-pop{
  0%  {transform:scale(.9)}
  60% {transform:scale(1.06)}
  100%{transform:scale(1)}
}
@media (max-width:640px){ .cat-pill{padding:9px 18px;font-size:14px} }

/* ==========================================================================
   4. LEAD  (H1 + intro — sits above the games grid)
   ========================================================================== */
.lead{padding:26px 0 4px}
.lead-inner{
  background:linear-gradient(180deg,rgba(18,15,33,.92),rgba(12,10,24,.92));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3.6vw,40px)}
.lead h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(25px,3.6vw,42px);line-height:1.3;
  color:var(--cream);margin:0 0 16px}
.lead p{margin:0 0 15px;max-width:76ch}
.lead p:last-child{margin-bottom:0}

/* ==========================================================================
   5. GAMES GRID  (square artwork from the lottery catalogue)
   ========================================================================== */
.games{padding:26px 0 10px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.sec-head h2{
  font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.6vw,28px);
  color:var(--gold-soft);margin:0}
.sec-head p{margin:0;font-size:14px;color:var(--txt-dim)}

.game-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:24px 16px;
  list-style:none;margin:0;padding:0}
@media (max-width:1100px){ .game-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:900px){ .game-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:700px){ .game-grid{grid-template-columns:repeat(3,1fr);gap:20px 14px} }
@media (max-width:480px){ .game-grid{grid-template-columns:repeat(2,1fr)} }

.game-card{min-width:0}
.game-card a{display:block;color:inherit}
.game-card a:hover{text-decoration:none}

.gcard-frame{
  position:relative;
  background:var(--orange);
  border-radius:30px 0 30px 0;
  padding:4px;
  transition:transform .22s ease, box-shadow .22s ease}
.game-card a:hover .gcard-frame,
.game-card a:focus-visible .gcard-frame{
  transform:translateY(-4px);box-shadow:0 14px 30px rgba(239,95,0,.34)}
.game-card a:active .gcard-frame{
  transform:translateY(-1px) scale(.975);
  box-shadow:0 6px 14px rgba(239,95,0,.30);
  transition-duration:var(--t-fast)}

.gcard-panel{
  position:relative;
  border-radius:27px 10px 27px 10px;
  aspect-ratio:1;
  overflow:hidden;
  background:#0d0d14}

.gcard-image{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.005);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}

.game-card a:hover .gcard-image,
.game-card a:focus-visible .gcard-image{transform:scale(1.055)}

.gcard-name{
  font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1.35;
  color:var(--txt-strong);text-align:center;margin:10px 0 0;
  overflow-wrap:anywhere}

.games-empty{
  grid-column:1/-1;text-align:center;padding:34px 12px;color:var(--txt-dim);
  border:1px dashed var(--line);border-radius:var(--r-md)}

.games-note{
  margin:22px 0 0;padding:14px 18px;border-radius:var(--r-md);
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:14px;color:var(--txt-dim)}

/* ==========================================================================
   6. ARTICLE  (dark panel, gold headings — follows the article reference)
   ========================================================================== */
.article{padding:34px 0 46px}
.article-inner{
  --pad:clamp(22px,3.6vw,44px);
  background:linear-gradient(180deg,rgba(18,15,33,.94),rgba(11,10,22,.94));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--pad);
  overflow:hidden}                 /* clips the bleeding banner to the panel radius */

/* Banner repeats the hero at the head of the article. It bleeds to the panel
   edges via negative margins that cancel the panel padding, and is cropped to a
   strip — the full 16:9 hero would push the whole article below the fold. */
.art-banner{
  position:relative;
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 28px}
.art-banner img{
  width:100%;height:auto;
  aspect-ratio:1672/520;
  object-fit:cover;
  object-position:center 36%}      /* keeps the archer, arrows and target in frame */
/* fades the bottom of the image into the panel so it reads as part of the card */
.art-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(14,12,26,0),rgba(14,12,26,.72) 62%,rgba(13,11,24,.97))}
@media (max-width:700px){
  .art-banner img{aspect-ratio:1672/700}
  .art-banner{margin-bottom:22px}
}

/* callout used for the disclaimer that closes the article */
.art-note{
  margin:30px 0 0;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  font-size:14px;line-height:1.7;color:var(--txt-dim)}
.art-note strong{
  display:block;margin:0 0 6px;
  font-family:var(--f-display);font-weight:700;color:var(--gold-soft)}
.art-eyebrow{
  font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:2px;
  color:var(--gold-2);margin:0 0 10px}

.toc{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.03);padding:18px 22px;margin:0 0 30px}
.toc h2{font-family:var(--f-display);font-size:17px;color:var(--gold-soft);margin:0 0 10px}
.toc ol{margin:0;padding-inline-start:20px;columns:2;column-gap:34px}
.toc li{margin:0 0 6px;break-inside:avoid;font-size:15px}
.toc a{color:var(--txt)}
.toc a:hover{color:var(--gold-1)}
@media (max-width:700px){ .toc ol{columns:1} }

.art-body h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(20px,2.5vw,27px);line-height:1.4;
  color:var(--gold-soft);margin:38px 0 14px;scroll-margin-top:96px}
.art-body h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(17px,2vw,21px);line-height:1.45;
  color:var(--cream);margin:26px 0 10px;scroll-margin-top:96px}
.art-body p{margin:0 0 16px;max-width:78ch}
.art-body ul,.art-body ol{margin:0 0 18px;padding-inline-start:24px;max-width:78ch}
.art-body li{margin:0 0 8px}
.art-body strong{color:var(--cream);font-weight:700}

/* Keyword marks. <mark> ships with a yellow-on-black UA style that is unusable
   here, so it is fully replaced: a gold highlighter swipe across the lower half
   of the line, which stays legible on the dark panel and survives line wraps. */
.kw{
  background:linear-gradient(180deg,rgba(250,197,84,.09),rgba(250,197,84,.17));
  color:var(--cream);
  font-weight:600;
  padding:1px 5px;
  border-radius:4px;
  border-bottom:2px solid rgba(250,197,84,.50);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  transition:background var(--t-mid) ease,
             border-color var(--t-mid) ease,
             color var(--t-fast) ease}
.kw:hover{
  background:linear-gradient(180deg,rgba(250,197,84,.18),rgba(239,95,0,.24));
  border-bottom-color:var(--gold-1);
  color:#fff}
.art-body em{color:var(--txt-dim)}
.art-body a{color:var(--gold-1);text-decoration:underline;text-underline-offset:3px}
/* Keyword marks that link home. The mark's swipe and bottom border already read
   as the link, so the anchor's underline is dropped rather than doubled. Kept
   after .art-body a, which has the same specificity. */
a.kw-link,a.kw-link:hover{text-decoration:none}
.art-body h2:first-child{margin-top:0}

.tbl-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:var(--r-md)}
.art-body table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.art-body thead th{
  background:rgba(249,179,30,.13);color:var(--gold-soft);
  font-family:var(--f-display);font-weight:700;text-align:start}
.art-body th,.art-body td{
  padding:11px 15px;border-bottom:1px solid var(--line-2);
  vertical-align:top;line-height:1.65}
.art-body tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.art-body tbody tr:last-child td{border-bottom:0}

/* ==========================================================================
   7. FOOTER  (4 columns + bottom bar — redesigned from the reference)
   ========================================================================== */
.site-foot{
  background:rgba(21,24,27,.96);
  border-top:1px solid var(--line);
  margin-top:10px}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:34px;
  padding:44px 0 34px}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;gap:28px} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }

.foot-brand-name{
  font-family:var(--f-display);font-weight:800;font-size:24px;
  color:var(--orange);margin:0 0 4px;letter-spacing:.5px}
.foot-brand-name span{color:var(--gold-1)}
.foot-tag{margin:0 0 12px;font-size:13px;color:var(--txt-dim)}
.foot-about{margin:0;font-size:14px;line-height:1.75;max-width:38ch}

.foot-col h3{
  font-family:var(--f-display);font-weight:700;font-size:15px;
  color:var(--gold-1);margin:0 0 12px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0 0 9px}
.foot-col a{
  color:var(--txt);font-size:14px;
  display:inline-block;
  transition:color var(--t-fast) ease, transform var(--t-mid) var(--ease-out)}
.foot-col a:hover{color:var(--gold-1);transform:translateX(4px);text-decoration:none}

.foot-mail{
  display:inline-block;margin:0;
  font-family:var(--f-display);font-weight:600;color:var(--orange);font-size:15px;
  transition:color var(--t-fast) ease, transform var(--t-fast) var(--ease-pop)}
.foot-mail:hover{color:var(--gold-1)}
.foot-mail:active{transform:scale(.96)}

.foot-bar{
  border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding:18px 0 26px;font-size:12.5px;color:var(--txt-dim);line-height:1.7}
.foot-bar p{margin:0;max-width:62ch}

/* ==========================================================================
   8. CLICK RIPPLE  (spans injected by js/main.js on press)
   Hosts must already be position:relative + overflow:hidden — that is true of
   .head-cta, .auth-grid a, a.nav-link and .cat-pill. The tab buttons are left
   out on purpose: clipping them would cut off their sliding underline.
   Nothing else in the sheet may set position on a descendant span of a host:
   `.nav-link span` (0,1,1) outranks `.ripple` (0,1,0) and used to knock the
   ripple back into the flow.
   ========================================================================== */
.ripple{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  transform:scale(0);
  opacity:.7;
  background:radial-gradient(circle,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.22) 55%,
      rgba(255,255,255,0) 72%);
  animation:ripple-out .6s var(--ease-out) forwards}
@keyframes ripple-out{
  to{transform:scale(1);opacity:0}
}