/* ============================================================
   NDF — V2 SKIN  ("Netram Defence Review, version 2")
   An enhanced evolution of the Classic military-newspaper look.
   Same serif newspaper *feel* and layout — but the olive/field-green
   is gone. In its place: deep navy (the NDF wordmark blue), warm
   ivory newsprint and a single brass gold used for hairlines, the
   active nav underline, focus rings, hover underlines and the globe.
   Crimson is kept, but disciplined: live/breaking, the primary CTA
   and editorial kickers only.

   Active only when <html data-skin="v2">. Every rule is scoped to
   that attribute, so without it nothing here applies. The three token
   blocks (light / dark@media / dark@attr) out-rank site.css's own
   :root dark tokens by specificity.

   Contrast (WCAG 2.x), light on --paper #F4F0E6:
     ink 14.6:1 · ink-2 8.1:1 · ink-3 4.8:1 · stamp 6.0:1 · gold (non-text hairline)
   dark on --ground #0C1018:
     ink 14.1:1 · ink-2 7.4:1 · ink-3 4.6:1 · stamp 5.6:1 · gold 7.1:1
   ============================================================ */

/* ---------- 1. TOKENS: light ---------- */
html[data-skin="v2"]{
  --ground:      #E8E2D4;   /* warm parchment, no green cast */
  --paper:       #F4F0E6;
  --paper-2:     #EBE5D7;   /* image wells, skeletons */
  --ink:         #171B25;   /* deep navy-ink */
  --ink-2:       #414859;
  --ink-3:       #676D7B;
  --rule:        #D4CCBA;
  --rule-soft:   #E0DACB;
  --stamp:       #9C2B22;   /* disciplined crimson */
  --stamp-hi:    #B5362B;
  --stamp-ink:   #F6F1E8;
  --field-a:     #1C3E70;   /* NAVY feature panels (was olive) */
  --field-b:     #0B2651;
  --field-ink:   #ECEADF;
  --field-mute:  #9FB2CE;
  --bar:         #212A3B;   /* dark navy top strip */
  --state-2:     #4C5264;
  --bar-ink:     #D6D1C4;
  --halftone:    rgba(255,255,255,.05);

  --gold:        #94763A;   /* brass; 1px hairlines + non-text accents */
  --gold-hi:     #B08F49;
  --gold-line:   rgba(148,118,58,.80);
  --gold-soft:   rgba(148,118,58,.20);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.11 0 0 0 0 0.15 0 0 0 6 -3.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-o: .05;
}

/* ---------- 1b. TOKENS: dark ---------- */
@media (prefers-color-scheme: dark){
  html[data-skin="v2"]:not([data-theme="light"]){
    --ground:     #0C1018;
    --paper:      #10151F;
    --paper-2:    #161C28;
    --ink:        #ECE7DB;
    --ink-2:      #AEB4C0;
    --ink-3:      #828896;
    --rule:       #272F3E;
    --rule-soft:  #1C2330;
    --stamp:      #E56E5F;   /* 5.6:1 on dark ground */
    --stamp-hi:   #EE8070;
    --stamp-ink:  #10151F;
    --field-a:    #163761;
    --field-b:    #0C2850;
    --field-ink:  #ECE7DB;
    --field-mute: #92A6C6;
    --bar:        #0A0E16;
    --state-2:    #9DAECB;
    --bar-ink:    #C6C2B6;
    --halftone:   rgba(255,255,255,.045);
    --gold:       #C7A765;
    --gold-hi:    #DCC088;
    --gold-line:  rgba(199,167,101,.72);
    --gold-soft:  rgba(199,167,101,.24);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.9 0 0 0 0 1 0 0 0 6 -3.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --grain-o: .04;
  }
}
html[data-skin="v2"][data-theme="dark"]{
  --ground:     #0C1018;
  --paper:      #10151F;
  --paper-2:    #161C28;
  --ink:        #ECE7DB;
  --ink-2:      #AEB4C0;
  --ink-3:      #828896;
  --rule:       #272F3E;
  --rule-soft:  #1C2330;
  --stamp:      #E56E5F;
  --stamp-hi:   #EE8070;
  --stamp-ink:  #10151F;
  --field-a:    #163761;
  --field-b:    #0C2850;
  --field-ink:  #ECE7DB;
  --field-mute: #92A6C6;
  --bar:        #0A0E16;
  --state-2:    #9DAECB;
  --bar-ink:    #C6C2B6;
  --halftone:   rgba(255,255,255,.045);
  --gold:       #C7A765;
  --gold-hi:    #DCC088;
  --gold-line:  rgba(199,167,101,.72);
  --gold-soft:  rgba(199,167,101,.24);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.9 0 0 0 0 1 0 0 0 6 -3.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-o: .04;
}

/* ============================================================
   2. PAPER, TEXTURE, FOCUS
   ============================================================ */
/* a finer, rasterised grain over the newsprint (no scroll-time filters) */
html[data-skin="v2"] body::before{
  opacity:var(--grain-o); mix-blend-mode:normal;
  background-image:var(--grain); background-size:220px 220px; background-repeat:repeat;
}
html[data-skin="v2"] ::selection{ background:var(--field-b); color:var(--field-ink); }
html[data-skin="v2"] :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
html[data-skin="v2"] ::-webkit-scrollbar-thumb{ background:var(--rule); }

/* ============================================================
   3. UTILITY BAR + MASTHEAD
   ============================================================ */
/* a thin gold filament seals the top strip to the masthead */
html[data-skin="v2"] .utility{ box-shadow:inset 0 -1px 0 var(--gold-soft); }
html[data-skin="v2"] .live{ color:var(--bar-ink); }

html[data-skin="v2"] .masthead{
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 var(--gold-soft);
}
html[data-skin="v2"] .masthead.is-stuck{
  box-shadow:0 1px 0 var(--gold-soft), 0 14px 34px -24px rgba(8,16,32,.6);
}
/* keep the navy NDF mark in full colour (do not desaturate) */
html[data-skin="v2"] .brand-logo{ filter:none; }
html[data-skin="v2"] .wordmark small{ color:var(--ink-3); }

/* nav: ink on hover, a GOLD underline that also marks the current page */
html[data-skin="v2"] .nav a{ color:var(--ink-2); }
html[data-skin="v2"] .nav a:hover{ color:var(--ink); }
html[data-skin="v2"] .nav a::after{ height:1.5px; background:var(--gold); }
html[data-skin="v2"] .nav a[aria-current="page"]{ color:var(--ink); }

html[data-skin="v2"] .mast-signin{ color:var(--ink-2); }
html[data-skin="v2"] .mast-signin:hover{ color:var(--ink); }

/* theme switch: active pill picks up a soft paper well + gold ring on focus */
html[data-skin="v2"] .theme-switch{ border-color:var(--rule); }
html[data-skin="v2"] .theme-switch button[aria-pressed="true"]{ background:var(--field-b); color:var(--field-ink); }

html[data-skin="v2"] .burger{ border-color:var(--rule); }
html[data-skin="v2"] .drawer{ background:var(--paper); border-left:1px solid var(--rule); }
html[data-skin="v2"] .drawer a{ border-bottom-color:var(--rule-soft); }
html[data-skin="v2"] .drawer a:hover{ color:var(--stamp); }

/* scroll-progress + banner */
html[data-skin="v2"] .progress{ height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-hi)); }
html[data-skin="v2"] .ndf-banner.is-breaking{ background:var(--stamp); color:var(--stamp-ink); }

/* ============================================================
   4. BUTTONS + FORMS
   ============================================================ */
/* primary stays crimson (the one deliberate pop); add a gold hairline lift */
html[data-skin="v2"] .btn-solid{ background:var(--stamp); color:var(--stamp-ink); border-color:var(--stamp); }
html[data-skin="v2"] .btn-solid:hover{ background:var(--stamp-hi); border-color:var(--stamp-hi); }
html[data-skin="v2"] .btn-ghost{ border-color:var(--rule); color:var(--ink); }
html[data-skin="v2"] .btn-ghost:hover{ border-color:var(--field-b); color:var(--field-b); background:transparent; }
@media (prefers-color-scheme: dark){
  html[data-skin="v2"]:not([data-theme="light"]) .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-hi); }
}
html[data-skin="v2"][data-theme="dark"] .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-hi); }

html[data-skin="v2"] .nl-row input:focus,
html[data-skin="v2"] .finder input:focus,
html[data-skin="v2"] .sub-field input:focus,
html[data-skin="v2"] .sub-field select:focus,
html[data-skin="v2"] .sub-field textarea:focus,
html[data-skin="v2"] .cmt-field input:focus,
html[data-skin="v2"] .cmt-field textarea:focus,
html[data-skin="v2"] .wpn-search:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }

/* ============================================================
   5. SECTION FRAMES, KICKERS, HOVER UNDERLINES
   ============================================================ */
/* section rule: ink baseline with a short gold tab at the start */
html[data-skin="v2"] .section-head{ border-bottom:2px solid var(--ink); position:relative; }
html[data-skin="v2"] .section-head::after{
  content:""; position:absolute; left:0; bottom:-2px; width:52px; height:2px; background:var(--gold);
}
html[data-skin="v2"] .link-more{ color:var(--stamp); }

/* the family of "headline lights up on hover" — gold underline everywhere */
html[data-skin="v2"] .gn-list li > a:hover,
html[data-skin="v2"] .reel-card:hover h3,
html[data-skin="v2"] .art-card:hover .art-title,
html[data-skin="v2"] .hl-card:hover .hl-headline,
html[data-skin="v2"] .post:hover h4,
html[data-skin="v2"] a.wpn-card:hover .wpn-card-name,
html[data-skin="v2"] .def-tile:hover .def-tile-name,
html[data-skin="v2"] .foot-col a:hover{
  color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1.5px;
  text-underline-offset:3px; text-decoration-color:var(--gold);
}
@media (prefers-color-scheme: dark){
  html[data-skin="v2"]:not([data-theme="light"]) .gn-list li > a:hover,
  html[data-skin="v2"]:not([data-theme="light"]) .reel-card:hover h3,
  html[data-skin="v2"]:not([data-theme="light"]) .art-card:hover .art-title,
  html[data-skin="v2"]:not([data-theme="light"]) .foot-col a:hover{ color:var(--gold-hi); }
}
html[data-skin="v2"][data-theme="dark"] .gn-list li > a:hover,
html[data-skin="v2"][data-theme="dark"] .reel-card:hover h3,
html[data-skin="v2"][data-theme="dark"] .art-card:hover .art-title,
html[data-skin="v2"][data-theme="dark"] .foot-col a:hover{ color:var(--gold-hi); }

/* global-news numbers + hints keep a quiet crimson; globe hint bold word navy-gold */
html[data-skin="v2"] .gn-top li.gn-lead::before{ color:var(--stamp); }

/* ============================================================
   6. FEATURE PANELS THAT WERE OLIVE  (now navy / no olive)
   ============================================================ */
/* image-less article placeholder — was a hard olive gradient */
html[data-skin="v2"] .art-ph{
  background:linear-gradient(140deg,#1C3E70,#0B2149);
  color:var(--field-ink);
}
/* weapon-plate troop silhouettes */
html[data-skin="v2"] .troops use:nth-child(odd){ fill:#122A50; }
/* dark field blocks keep their navy gradient from the tokens; just steady the mark */
html[data-skin="v2"] .markn::after{ background:var(--stamp); }
html[data-skin="v2"] .legend .k-land{ background:var(--state-2); }

/* cards lift a touch more crisply on the ivory ground */
html[data-skin="v2"] .reel-card,
html[data-skin="v2"] .art-card,
html[data-skin="v2"] .wpn-card{ transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }

/* ============================================================
   7. THE GLOBE  — navy sphere, pixelated brass land, gold borders
   (honours the house globe look: pixel land + gold borders/hover,
   no glow, no washed fills)
   ============================================================ */
/* the engine reads these (templates/assets/globe.js); an admin colour set on the Globe page wins */
html[data-skin="v2"] [data-globe]{
  --g-sea:#123766; --g-land:#B8954F; --g-desk:#F0E2BC;
  --g-border:#E3C77E; --g-hover:#F3E3B0; --g-hover-border:#FFF6D8;
  --g-grid:rgba(203,168,98,.16); --g-grid-w:.6;
  --g-limb:#CBA862; --g-limb-w:1; --g-ring:#E3C77E; --g-arc:#E3C77E;
}
@media (prefers-color-scheme: dark){
  html[data-skin="v2"]:not([data-theme="light"]) [data-globe]{ --g-sea:#0E2C52; --g-grid:rgba(199,167,101,.12); }
}
html[data-skin="v2"][data-theme="dark"] [data-globe]{ --g-sea:#0E2C52; --g-grid:rgba(199,167,101,.12); }
/* a globe set inside a navy field (about.html) */
html[data-skin="v2"] .field [data-globe]{ --g-sea:#0F2E55; }
html[data-skin="v2"] .global-hint b{ color:var(--stamp); }

/* ============================================================
   8. DEFENCE TABS + MISC ACCENTS
   ============================================================ */
html[data-skin="v2"] .def-tabs a[aria-current="true"],
html[data-skin="v2"] .def-tabs a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--gold); }
html[data-skin="v2"] .tab[aria-selected="true"]{ border-bottom-color:var(--gold); color:var(--ink); }
html[data-skin="v2"] .wpn-chip[aria-pressed="true"]{ background:var(--field-b); border-color:var(--field-b); color:var(--field-ink); }
html[data-skin="v2"] .news-topics button[aria-pressed="true"]{ background:var(--field-b); color:var(--field-ink); }
html[data-skin="v2"] .theme-toggle:hover{ border-color:var(--gold); color:var(--gold-hi); }

/* footer: gold hover underline already set above; seal the top edge */
html[data-skin="v2"] .footer{ border-top:1px solid var(--rule); box-shadow:inset 0 1px 0 var(--gold-soft); }