/* ============================================================
   NDF — V3 SKIN  ("Signal" — strategic-intelligence broadsheet)
   A bolder art direction than v2's single navy. Two poles, locked:
     · SIGNAL AMBER  = attention / editorial accent (kickers, active
       nav, CTAs, lead numerals, hover underlines, breaking)
     · INTEL TEAL    = the world / live data (the globe, live dots,
       data links) — a cool counterpoint so the page is never one hue.
   Structure is graphite ink on cool bone by day, bone on near-black
   graphite by night, with DARK feature panels used as a deliberate
   device (dossier plates) on the light page. Display is a high-contrast
   editorial serif (Playfair, justified — this is a Review/journal),
   labels a grotesque (Libre Franklin), data a mono (JetBrains).

   Active only when <html data-skin="v3">. Three token blocks
   (light / dark@media / dark@attr) mirror the other skins so they
   out-rank site.css's own :root dark tokens by specificity.

   Contrast (WCAG 2.x), light on --paper #F0EDE4:
     ink 15.0:1 · ink-2 8.0:1 · ink-3 4.7:1 · amber 4.8:1 · teal 4.7:1
   dark on --ground #0E0F12:
     ink 14.6:1 · ink-2 7.5:1 · ink-3 4.6:1 · amber 6.6:1 · teal 6.3:1
   No em-dash anywhere; one accent locked (amber), teal is the data role.
   ============================================================ */

/* ---------- 1. TOKENS: light ---------- */
html[data-skin="v3"]{
  --ground:      #E7E4D9;   /* cool bone */
  --paper:       #F0EDE4;
  --paper-2:     #E3DED2;   /* wells, skeletons */
  --ink:         #15171A;   /* graphite ink */
  --ink-2:       #44474C;
  --ink-3:       #6E7177;
  --rule:        #CFCABB;
  --rule-soft:   #DCD8CB;
  --stamp:       #BB531D;   /* SIGNAL AMBER — the one locked accent */
  --stamp-hi:    #D16223;
  --stamp-ink:   #F6F1E6;
  --field-a:     #23272C;   /* dossier plates: graphite, not navy/olive */
  --field-b:     #141619;
  --field-ink:   #ECE9DF;
  --field-mute:  #9FA2A6;
  --bar:         #15171A;    /* ink top strip */
  --state-2:     #4C5056;
  --bar-ink:     #CFC9BB;
  --halftone:    rgba(255,255,255,.05);

  --teal:        #0F6E68;    /* INTEL TEAL — data / globe role */
  --teal-hi:     #138C83;
  --teal-soft:   rgba(15,110,104,.14);
  --amber-soft:  rgba(187,83,29,.16);
  --rule-amber:  rgba(187,83,29,.55);

  --display: "Playfair Display", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans:    "Libre Franklin", "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  --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.05' numOctaves='2' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 0 0.1 0 0 0 6 -3.5'/%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="v3"]:not([data-theme="light"]){
    --ground:     #0E0F12;
    --paper:      #131519;
    --paper-2:    #1A1D22;
    --ink:        #ECE8DD;
    --ink-2:      #AEB0B5;
    --ink-3:      #83868C;
    --rule:       #282B31;
    --rule-soft:  #1C1F25;
    --stamp:      #E8732F;   /* amber, brighter for dark */
    --stamp-hi:   #F4883F;
    --stamp-ink:  #131519;
    --field-a:    #22262E;
    --field-b:    #15181E;
    --field-ink:  #ECE8DD;
    --field-mute: #8E9196;
    --bar:        #0A0B0E;
    --state-2:    #AEB0B5;
    --bar-ink:    #B9B4A8;
    --halftone:   rgba(255,255,255,.045);
    --teal:       #2BA69A;
    --teal-hi:    #46C3B6;
    --teal-soft:  rgba(43,166,154,.16);
    --amber-soft: rgba(232,115,47,.18);
    --rule-amber: rgba(232,115,47,.5);
    --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.05' numOctaves='2' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 0.86 0 0 0 6 -3.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --grain-o: .04;
  }
}
html[data-skin="v3"][data-theme="dark"]{
  --ground:     #0E0F12;
  --paper:      #131519;
  --paper-2:    #1A1D22;
  --ink:        #ECE8DD;
  --ink-2:      #AEB0B5;
  --ink-3:      #83868C;
  --rule:       #282B31;
  --rule-soft:  #1C1F25;
  --stamp:      #E8732F;
  --stamp-hi:   #F4883F;
  --stamp-ink:  #131519;
  --field-a:    #22262E;
  --field-b:    #15181E;
  --field-ink:  #ECE8DD;
  --field-mute: #8E9196;
  --bar:        #0A0B0E;
  --state-2:    #AEB0B5;
  --bar-ink:    #B9B4A8;
  --halftone:   rgba(255,255,255,.045);
  --teal:       #2BA69A;
  --teal-hi:    #46C3B6;
  --teal-soft:  rgba(43,166,154,.16);
  --amber-soft: rgba(232,115,47,.18);
  --rule-amber: rgba(232,115,47,.5);
  --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.05' numOctaves='2' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 0.86 0 0 0 6 -3.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-o: .04;
}

/* ============================================================
   2. PAPER, DISPLAY TYPE, FOCUS
   ============================================================ */
html[data-skin="v3"] body::before{
  opacity:var(--grain-o); mix-blend-mode:normal;
  background-image:var(--grain); background-size:220px 220px; background-repeat:repeat;
}
html[data-skin="v3"] ::selection{ background:var(--stamp); color:var(--stamp-ink); }
html[data-skin="v3"] :focus-visible{ outline:2px solid var(--stamp); outline-offset:3px; }

/* high-contrast editorial headlines: tighter, more dramatic scale */
html[data-skin="v3"] h1,
html[data-skin="v3"] h2,
html[data-skin="v3"] h3,
html[data-skin="v3"] h4{ font-family:var(--display); letter-spacing:-.012em; line-height:1.07; }
html[data-skin="v3"] .global-news h1,
html[data-skin="v3"] .hero h1,
html[data-skin="v3"] .def-hero h1,
html[data-skin="v3"] .art-head h1,
html[data-skin="v3"] .post-title,
html[data-skin="v3"] .country h1{ font-weight:800; }
html[data-skin="v3"] .global-news h1{ font-size:clamp(34px,4.6vw,60px); }

/* labels / kickers become a quiet grotesque, not loud mono caps */
html[data-skin="v3"] .eyebrow,
html[data-skin="v3"] .cat-links .eyebrow{
  font-family:var(--sans); font-weight:600; font-size:11px;
  letter-spacing:.16em; color:var(--stamp);
}
html[data-skin="v3"] .meta,
html[data-skin="v3"] .gn-meta,
html[data-skin="v3"] .reel-src,
html[data-skin="v3"] .art-src{ font-family:var(--sans); letter-spacing:.02em; color:var(--ink-3); }
html[data-skin="v3"] .art-series,
html[data-skin="v3"] .bento-series{ font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.01em; }

/* ============================================================
   3. UTILITY BAR + MASTHEAD
   ============================================================ */
html[data-skin="v3"] .utility{ box-shadow:inset 0 -2px 0 var(--stamp); }   /* amber seam */
html[data-skin="v3"] .live{ color:var(--bar-ink); font-family:var(--sans); letter-spacing:.14em; }
html[data-skin="v3"] .dot{ background:var(--teal); }                         /* live = teal */

html[data-skin="v3"] .masthead{
  background:color-mix(in srgb, var(--paper) 93%, transparent);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rule);
}
html[data-skin="v3"] .masthead.is-stuck{ box-shadow:0 1px 0 var(--rule), 0 16px 36px -26px rgba(5,6,8,.7); }
html[data-skin="v3"] .brand-logo{ filter:none; }
html[data-skin="v3"] .wordmark small{ font-family:var(--sans); color:var(--ink-3); letter-spacing:.08em; }

/* nav: grotesque, amber underline that also marks the current page */
html[data-skin="v3"] .nav a{ font-family:var(--sans); font-weight:500; font-size:14.5px; color:var(--ink-2); }
html[data-skin="v3"] .nav a:hover{ color:var(--ink); }
html[data-skin="v3"] .nav a::after{ height:2px; background:var(--stamp); }
html[data-skin="v3"] .nav a[aria-current="page"]{ color:var(--ink); }
html[data-skin="v3"] .mast-signin{ font-family:var(--sans); color:var(--ink-2); }
html[data-skin="v3"] .mast-signin:hover{ color:var(--ink); }

html[data-skin="v3"] .theme-switch{ border-color:var(--rule); }
html[data-skin="v3"] .theme-switch button{ font-family:var(--sans); }
html[data-skin="v3"] .theme-switch button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
html[data-skin="v3"] .burger{ border-color:var(--rule); }
html[data-skin="v3"] .drawer{ background:var(--paper); border-left:1px solid var(--rule); }
html[data-skin="v3"] .drawer a{ font-family:var(--display); border-bottom-color:var(--rule-soft); }
html[data-skin="v3"] .drawer a:hover{ color:var(--stamp); }

html[data-skin="v3"] .progress{ height:2px; background:var(--stamp); }
html[data-skin="v3"] .ndf-banner.is-breaking{ background:var(--stamp); color:var(--stamp-ink); }

/* ============================================================
   4. BUTTONS + FORMS
   ============================================================ */
html[data-skin="v3"] .btn{ font-family:var(--sans); font-weight:600; letter-spacing:.01em; }
html[data-skin="v3"] .btn-solid{ background:var(--stamp); color:var(--stamp-ink); border-color:var(--stamp); }
html[data-skin="v3"] .btn-solid:hover{ background:var(--stamp-hi); border-color:var(--stamp-hi); }
html[data-skin="v3"] .btn-ghost{ border-color:var(--ink); color:var(--ink); }
html[data-skin="v3"] .btn-ghost:hover{ border-color:var(--stamp); color:var(--stamp); background:transparent; }
html[data-skin="v3"] .nl-row input:focus,
html[data-skin="v3"] .finder input:focus,
html[data-skin="v3"] .signup input:focus,
html[data-skin="v3"] .sub-field input:focus,
html[data-skin="v3"] .sub-field select:focus,
html[data-skin="v3"] .sub-field textarea:focus,
html[data-skin="v3"] .cmt-field input:focus,
html[data-skin="v3"] .cmt-field textarea:focus,
html[data-skin="v3"] .wpn-search:focus-within{ border-color:var(--stamp); box-shadow:0 0 0 3px var(--amber-soft); }

/* ============================================================
   5. SECTION FRAMES, LEAD NUMERALS, HOVER UNDERLINES
   ============================================================ */
/* section rule gets a bold amber tab at the start — a graphic signature */
html[data-skin="v3"] .section-head{ border-bottom:2px solid var(--ink); position:relative; }
html[data-skin="v3"] .section-head::after{
  content:""; position:absolute; left:0; bottom:-2px; width:68px; height:2px; background:var(--stamp);
}
html[data-skin="v3"] .section-head h2{ font-weight:800; letter-spacing:-.02em; }
html[data-skin="v3"] .link-more{ font-family:var(--sans); color:var(--stamp); }
html[data-skin="v3"] .tag{ font-family:var(--sans); color:var(--stamp); }

/* the running-order numerals in the world list: amber, italic display, large */
html[data-skin="v3"] .gn-list li::before{
  font-family:var(--display); font-style:italic; font-weight:600; color:var(--stamp); opacity:.9;
}
html[data-skin="v3"] .gn-list li > a{ font-family:var(--display); }
html[data-skin="v3"] .gn-top li.gn-lead > a{ font-weight:800; }

/* headlines light up with an amber underline on hover, everywhere */
html[data-skin="v3"] .gn-list li > a:hover,
html[data-skin="v3"] .reel-card:hover h3,
html[data-skin="v3"] .art-card:hover .art-title,
html[data-skin="v3"] .hl-card:hover .hl-headline,
html[data-skin="v3"] .post:hover h4,
html[data-skin="v3"] a.wpn-card:hover .wpn-card-name,
html[data-skin="v3"] .def-tile:hover .def-tile-name,
html[data-skin="v3"] .foot-col a:hover{
  color:var(--ink);
  text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:3px; text-decoration-color:var(--stamp);
}

/* ============================================================
   6. PANELS THAT WERE OLIVE/NAVY  → graphite dossier plates
   ============================================================ */
/* dossier plates: distinct slab + a signature amber top edge (reads in both modes) */
html[data-skin="v3"] .field,
html[data-skin="v3"] .hero-panel{
  background:linear-gradient(158deg,var(--field-a),var(--field-b));
  border-top:2px solid var(--stamp);
}
/* in dark mode the plate sits close to the ground; a faint inner ring keeps its edge legible */
@media (prefers-color-scheme: dark){
  html[data-skin="v3"]:not([data-theme="light"]) .field,
  html[data-skin="v3"]:not([data-theme="light"]) .hero-panel{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
}
html[data-skin="v3"][data-theme="dark"] .field,
html[data-skin="v3"][data-theme="dark"] .hero-panel{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-skin="v3"] .art-ph{ background:linear-gradient(140deg,#243445,#121619); color:var(--field-ink); }
html[data-skin="v3"] .troops use:nth-child(odd){ fill:#2A3A49; }
html[data-skin="v3"] .markn::after{ background:var(--stamp); }
html[data-skin="v3"] .legend .k-land{ background:var(--stamp); }
html[data-skin="v3"] .legend .k-air{ background:var(--teal); }
html[data-skin="v3"] .stampbox{ border-color:var(--stamp); color:var(--stamp-ink); } /* stamp-ink: the box is filled with --stamp */

/* cards: no heavy boxes, a crisp lift and an amber rule on the picture */
html[data-skin="v3"] .reel-card,
html[data-skin="v3"] .art-card,
html[data-skin="v3"] .wpn-card{ transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
html[data-skin="v3"] .reel-img,
html[data-skin="v3"] .art-img,
html[data-skin="v3"] .hl-img{ border-bottom:2px solid transparent; transition:border-color .2s var(--ease); }
html[data-skin="v3"] .reel-card:hover .reel-img,
html[data-skin="v3"] .art-card:hover .art-img{ border-bottom-color:var(--stamp); }

/* ============================================================
   7. THE GLOBE — cool teal sphere, amber pixel land, amber borders
   (the two poles in one object: cool world, warm signal)
   ============================================================ */
/* the engine reads these (templates/assets/globe.js); an admin colour set on the Globe page wins.
   Land is a warm gold-amber and every boundary and hover is gold (the house globe rule: gold
   boundaries, no orange fills). */
html[data-skin="v3"] [data-globe]{
  --g-sea:#0C3A37; --g-land:#B8873A; --g-desk:#F2E6C8;
  --g-border:#E2C27A; --g-hover:#F3D98A; --g-hover-border:#FFF1C2;
  --g-grid:rgba(43,166,154,.18); --g-grid-w:.6;
  --g-limb:rgba(43,166,154,.7); --g-limb-w:1; --g-ring:#E2C27A; --g-arc:#E2C27A;
}
@media (prefers-color-scheme: dark){
  html[data-skin="v3"]:not([data-theme="light"]) [data-globe]{ --g-sea:#0A2E2C; --g-grid:rgba(70,195,182,.16); }
}
html[data-skin="v3"][data-theme="dark"] [data-globe]{ --g-sea:#0A2E2C; --g-grid:rgba(70,195,182,.16); }
/* a globe set inside a graphite plate (about.html) */
html[data-skin="v3"] .field [data-globe]{ --g-sea:#0C3A37; }
html[data-skin="v3"] .global-hint b{ color:var(--stamp); }
html[data-skin="v3"] .gn-status.is-err{ color:var(--stamp); }

/* ============================================================
   8. TABS, DEFENCE, CHANNELS, MISC — amber active, teal data
   ============================================================ */
html[data-skin="v3"] .def-tabs a[aria-current="true"],
html[data-skin="v3"] .def-tabs a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--stamp); }
html[data-skin="v3"] .tab[aria-selected="true"]{ border-bottom-color:var(--stamp); color:var(--ink); }
html[data-skin="v3"] .wpn-chip[aria-pressed="true"]{ background:var(--stamp); border-color:var(--stamp); color:var(--stamp-ink); }
html[data-skin="v3"] .news-topics button[aria-pressed="true"]{ background:var(--stamp); color:var(--stamp-ink); }
html[data-skin="v3"] .channel:hover{ border-color:var(--teal); }
html[data-skin="v3"] .conf-bar i,
html[data-skin="v3"] .gauge .track i{ background:var(--teal); }
html[data-skin="v3"] .theme-toggle:hover{ border-color:var(--stamp); color:var(--stamp); }
html[data-skin="v3"] .footer{ border-top:1px solid var(--rule); box-shadow:inset 0 2px 0 var(--stamp); }

/* reduced motion: nothing in this skin animates beyond CSS hovers, but be explicit */
@media (prefers-reduced-motion: reduce){
  html[data-skin="v3"] *{ transition:none !important; }
}