/* =====================================================================
   HFC.GLOBAL SYSTEM  (/system.css)
   Shared design tokens and a small component set for all 11 pages.
   Direction: "the official fight-night programme". Solid bone type,
   flat near-black surfaces, one 1px line, two chamfer sizes, gold only
   for buying, live/on-sale status and prices.

   LOAD ORDER. Link this file right after /fonts/hfc-display.css and
   before the page's inline <style>, so page rules win at equal
   specificity. Every component rule is a single class (specificity
   0,1,0 plus pseudo-classes; the guards below are wrapped in :where()
   so they add nothing), so a later single-class rule in the page's
   <style> overrides it.
   /chrome.css (nav, sheet, footer) stays namespaced with its own --g-*
   tokens; nothing here targets .gnav / .gsheet / .gfoot.

   WHAT THIS FILE MAY RESTYLE. Only elements that carry a class below,
   (no global rules in this version: the refresh-picks preview keeps
   every untouched section exactly as live, so text-wrap is set per section). There are no other element selectors, no
   resets and no :root properties other than custom properties.

   NAMES. The pages already define --void --panel --edge --bone --steel
   --ignite --blue --red --green --display --skinny --body --mono --rim
   --chamfer --rail --mc ... with values that differ from page to page
   (members sets --body and --mono to Montserrat). None of those names
   is defined here. Component internals use private --_* properties.

   ---------------------------------------------------------------------
   TOKENS (all on :root)
   ---------------------------------------------------------------------
   Colour roles
     --bg              #0A0A0B   page background
     --surface         #131316   cards, panels, accordions, inputs
     --surface-raised  #1A1B1F   hover / raised / selected surface
     --surface-hover   bone 6%   hover wash on transparent controls
     --line            #242A34   the one 1px border and divider
     --line-strong     bone 18%  secondary-button border, emphasis line
     --text            #EDEAE3   bone: headings and body copy
     --text-2          #B4BCC8   secondary copy, ledes, answers
     --text-muted      #8A93A0   steel: labels, meta, captions (6.4:1)
     --gold            #E4B94F   ONLY: buy fill, live/on-sale status, prices
     --gold-hi         #F6DF95   primary-button hover
     --gold-fill       gradient  primary-button fill #F6DF95>#D9AE45>#9C7118
     --on-gold         #241A05   text on gold
     --chrome-text     gradient  no longer used (20 Oct: no silver headings;
                                 the hero H1 and ticket city names are bone)
     --error           #D23B3B   error borders and icons
     --error-text      #DA5C5C   error message text (5.3:1 on --bg)
     --verified        #0095F6   the Verified ticks beside @HFCMAIN only
     --focus           #E4B94F   keyboard focus ring on dark surfaces
     --focus-on-gold   #0A0A0B   keyboard focus ring on the gold fill
   Machine liveries (identity only: plates, bracket dots, tape corners,
   shop picker; no glow). --livery-<m> is the fill or swatch,
   --livery-<m>-text the tint for text, at least 4.5:1 on --bg,
   --surface and --surface-raised.
     adrius #2A78D6 / #3F86DA      troy #D23B3B / #DA5C5C
     adesan-x #8B2BE2 / #A962EA    bang-bang #FF6A00
     mighty-mech #22D3EE           vulcan #1E9E52 (+ --livery-vulcan-2
     rampage #FF1F3D / #FF2845            #D4AF37, its second colour)
     neon #2EE81E
   Type families (same stacks the pages use today)
     --font-display  'HFC Velocity Bold'   headings, primary buttons (HFC Display Bold behind it)
     --font-skinny   'HFC Display Skinny' labels, secondary buttons, chips
     --font-body     'Titillium Web'      body copy (400 / 600 / 700 only;
                                          500 is never loaded)
     --font-mono     'Chivo Mono'         numbers, data
     HFC Display (both faces): letter-spacing 0 always, never add
     tracking; font-synthesis:none, no synthetic bold or italic. It has
     no $ · – — → £ €: those fall back to the next font in the stack.
   Type sizes
     --t-display  clamp(28px, min(9.4vw, 4.7vw + 28px), 96px)  homepage
                  hero H1. Equal to today's 9.4vw on phones (35.25px at
                  375), 64px at 768, 96px from 1440.
     --t-h1       clamp(34px, 3.4vw + 22px, 72px)  inner-page titles
     --t-h2       clamp(22px, 2.5vw + 12px, 48px)  section headings
     --t-h3       clamp(17px, .5vw + 15px, 22px)   sub-heads, card titles
     --t-lead     18px   standfirst / lede
     --t-body     16px   body copy
     --t-small    14px   notes, fine print (sentence case, body face)
     --t-label    12px   Skinny labels: the smallest size on the site
     --t-data     13px   Chivo Mono numbers and data
     --lh-display 1.02   --lh-heading 1.08   --lh-body 1.6
     Rule: inside a section nothing is larger than --t-h3 except the one
     figure the section exists for.
   Spacing   --space-4 8 12 16 24 32 48 64 96 128 (px)
   Rhythm    --sec          clamp(56px, 4vw + 40px, 96px)  section padding
             --sec-compact  clamp(40px, 2vw + 32px, 64px)  tight sections
             --sec-feature  clamp(72px, 6vw + 48px, 144px) the one big one
   Layout    --wrap 1200px (content width)   --wrap-text 62ch (reading)
             --gutter clamp(16px, 4vw, 48px) (16px side gutter on phones)
   Chamfers  always top-left plus bottom-right, two sizes only
             --cut-s 10px   buttons, chips, inputs, countdown units
             --cut-l 18px   cards, panels, media frames
             --clip-s / --clip-l   the matching clip-path polygons:
                                   clip-path:var(--clip-l)
   Motion    --dur-fast 160ms (hover, press)   --dur-slow 320ms (panels,
             sheets)   --ease cubic-bezier(.2,.8,.25,1). The hero video
             is the only ambient motion: no loops, pulses or sheens.

   ---------------------------------------------------------------------
   COMPONENTS (class-based; add the class, keep your own classes/ids)
   ---------------------------------------------------------------------
   Buttons are a variant PLUS a size, always both:
       <a class="btn-primary btn-l" ...>GET TICKETS NOW</a>
       <button class="btn-secondary btn-m" type="button">...</button>
   The size class is what opts an element in: a bare .btn-secondary is
   still the legacy gold "neon tube" button that index.html (~line
   1700) and shop/index.html (~line 272) style themselves, and this
   file leaves it alone. Don't mix the system classes with the legacy
   .cta (it brings its own ::before/::after sheen).
   .btn-primary    Gold buy/join action: GET TICKETS NOW, Join, Add to
                   bag. HFC Display Bold, --gold-fill, --on-gold text,
                   --cut-s chamfer; hover --gold-hi and 1px lift; press
                   scale .98; dark focus ring drawn inside the chamfer.
                   :disabled / [aria-disabled="true"] = flat, muted
                   (SOLD OUT). One per view where possible.
   .btn-secondary  Every other action. Transparent, 1px --line-strong
                   frame that follows the chamfer, bone text, HFC
                   Display Skinny; hover bone frame and --surface-hover;
                   gold focus ring inside the chamfer.
   .btn-l .btn-m .btn-s   56px (heroes only) / 48px (sections, tier
                   rows) / 40px (nav, compact rows) tall; 18 / 16 / 14px
                   type. Width is the page's call (e.g. width:100% on
                   phones). Labels may wrap to two lines.
   .link           Inline text link (or a <button> that reads as one):
                   takes the surrounding text's face and size, bone,
                   1px underline 3px below in --text-muted, bone and 2px
                   on hover. Email links, "Directions", legal, footer.
   .card           Flat panel: --surface fill, 1px --line frame,
                   --cut-l chamfer, 24px padding. On an <a href> it is a
                   block, raises on hover and shows a focus ring.
   .card--live     Add to a .card: the one on-sale card in view, 1px
                   gold frame. Put a .chip.chip--live (ON SALE) inside.
   .chip           Small Skinny 12px label on --surface-raised, --cut-s.
   .chip--live     Add to a .chip: live/on-sale status, bone text after
                   a square gold dot.
   .accordion      <details class="accordion"><summary>Q</summary>
                   <p>A</p></details>. Flat, 1px frame, --cut-s, plus /
                   minus mark, 56px summary row. Stacked accordions get
                   an 8px gap. For the FAQ, shop shipping, fight-night
                   info.
   .status-card    Centred status panel, max 600px, for /404.html,
                   /shop/thanks/, /members/welcome/ (presentation only).
                   Parts: .status-card__eyebrow (12px Skinny label),
                   .status-card__title (HFC Display, --t-h2, bone),
                   .status-card__body (--text-2 copy),
                   .status-card__actions (button row).

   LEGACY GUARD (temporary). /shop/thanks/ and /members/welcome/ have
   their own .card (the gold-edged panel built from a child
   .edge-clip). The system .card skips any .card with a direct
   .edge-clip child; those pages move to .status-card. Drop the guard
   once no page has that markup.
   ===================================================================== */

:root{
  /* colour roles */
  --bg:#0A0A0B;
  --surface:#131316;
  --surface-raised:#1A1B1F;
  --surface-hover:rgba(237,234,227,.06);
  --line:#242A34;
  --line-strong:rgba(237,234,227,.18);
  --text:#EDEAE3;
  --text-2:#B4BCC8;
  --text-muted:#8A93A0;
  --gold:#E4B94F;
  --gold-hi:#F6DF95;
  --gold-fill:linear-gradient(180deg,#F6DF95 0%,#D9AE45 55%,#9C7118 100%);
  --on-gold:#241A05;
  --chrome-text:linear-gradient(180deg,#FAFCFE 0%,#DDE4EA 52%,#B7C2CC 100%);
  --error:#D23B3B;
  --error-text:#DA5C5C;
  --verified:#0095F6;
  --focus:#E4B94F;
  --focus-on-gold:#0A0A0B;

  /* machine liveries: fill / text tint */
  --livery-adrius:#2A78D6;      --livery-adrius-text:#3F86DA;
  --livery-troy:#D23B3B;        --livery-troy-text:#DA5C5C;
  --livery-adesan-x:#8B2BE2;    --livery-adesan-x-text:#A962EA;
  --livery-bang-bang:#FF6A00;   --livery-bang-bang-text:#FF6A00;
  --livery-mighty-mech:#22D3EE; --livery-mighty-mech-text:#22D3EE;
  --livery-vulcan:#1E9E52;      --livery-vulcan-text:#1E9E52;
  --livery-vulcan-2:#D4AF37;
  --livery-rampage:#FF1F3D;     --livery-rampage-text:#FF2845;
  --livery-neon:#2EE81E;        --livery-neon-text:#2EE81E;

  /* type */
  --font-display:'HFC Velocity Bold','HFC Display','Anton',sans-serif;
  --font-skinny:'HFC Display Skinny','Titillium Web',sans-serif;
  --font-body:'Titillium Web','Inter',system-ui,sans-serif;
  --font-mono:'Chivo Mono',ui-monospace,monospace;
  --t-display:clamp(28px,min(9.4vw,calc(4.7vw + 28px)),96px);
  --t-h1:clamp(34px,calc(3.4vw + 22px),72px);
  --t-h2:clamp(22px,calc(2.5vw + 12px),48px);
  --t-h3:clamp(17px,calc(.5vw + 15px),22px);
  --t-lead:18px;
  --t-body:16px;
  --t-small:14px;
  --t-label:12px;
  --t-data:13px;
  --lh-display:1.02;
  --lh-heading:1.08;
  --lh-body:1.6;

  /* spacing scale and section rhythm */
  --space-4:4px;   --space-8:8px;   --space-12:12px; --space-16:16px;
  --space-24:24px; --space-32:32px; --space-48:48px; --space-64:64px;
  --space-96:96px; --space-128:128px;
  --sec:clamp(56px,calc(4vw + 40px),96px);
  --sec-compact:clamp(40px,calc(2vw + 32px),64px);
  --sec-feature:clamp(72px,calc(6vw + 48px),144px);

  /* layout */
  --wrap:1200px;
  --wrap-text:62ch;
  --gutter:clamp(16px,4vw,48px);

  /* chamfers: top-left + bottom-right */
  --cut-s:10px;
  --cut-l:18px;
  --clip-s:polygon(var(--cut-s) 0,100% 0,100% calc(100% - var(--cut-s)),calc(100% - var(--cut-s)) 100%,0 100%,0 var(--cut-s));
  --clip-l:polygon(var(--cut-l) 0,100% 0,100% calc(100% - var(--cut-l)),calc(100% - var(--cut-l)) 100%,0 100%,0 var(--cut-l));

  /* motion */
  --dur-fast:160ms;
  --dur-slow:320ms;
  --ease:cubic-bezier(.2,.8,.25,1);
}

/* ---------- the only global rules ---------- */

/* ---------- shared chamfer geometry ----------
   A component sets --_cut on itself. Its frame and focus ring are
   absolutely placed pseudo-elements clipped to a 45-degree chamfered
   ring (evenodd polygon): --_fo is the ring's distance in from the
   edge, --_fw its width. .4142 = tan(22.5deg) keeps the inner edge
   parallel to the cut, so the line follows the chamfer exactly. */
.btn-primary:where(.btn-l,.btn-m,.btn-s):focus-visible::after,
.btn-secondary:where(.btn-l,.btn-m,.btn-s)::before,
.btn-secondary:where(.btn-l,.btn-m,.btn-s):focus-visible::after,
.card:not(:where(:has(> .edge-clip)))::before,
.card:not(:where(:has(> .edge-clip))):focus-visible::after,
.accordion::before,
.status-card::before{
  --_fi:calc(var(--_fo) + var(--_fw));
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  clip-path:polygon(evenodd,
    calc(var(--_cut) + var(--_fo) * .4142) var(--_fo),
    calc(100% - var(--_fo)) var(--_fo),
    calc(100% - var(--_fo)) calc(100% - var(--_cut) - var(--_fo) * .4142),
    calc(100% - var(--_cut) - var(--_fo) * .4142) calc(100% - var(--_fo)),
    var(--_fo) calc(100% - var(--_fo)),
    var(--_fo) calc(var(--_cut) + var(--_fo) * .4142),
    calc(var(--_cut) + var(--_fo) * .4142) var(--_fo),
    calc(var(--_cut) + var(--_fi) * .4142) var(--_fi),
    var(--_fi) calc(var(--_cut) + var(--_fi) * .4142),
    var(--_fi) calc(100% - var(--_fi)),
    calc(100% - var(--_cut) - var(--_fi) * .4142) calc(100% - var(--_fi)),
    calc(100% - var(--_fi)) calc(100% - var(--_cut) - var(--_fi) * .4142),
    calc(100% - var(--_fi)) var(--_fi),
    calc(var(--_cut) + var(--_fi) * .4142) var(--_fi))}
/* frames: 1px, at the edge */
.btn-secondary:where(.btn-l,.btn-m,.btn-s)::before,
.card:not(:where(:has(> .edge-clip)))::before,
.accordion::before,
.status-card::before{--_fo:0px;--_fw:1px;background:var(--line);
  transition:background-color var(--dur-fast) var(--ease)}
/* focus rings: 2px, 3px in from the edge */
.btn-primary:where(.btn-l,.btn-m,.btn-s):focus-visible::after,
.btn-secondary:where(.btn-l,.btn-m,.btn-s):focus-visible::after,
.card:not(:where(:has(> .edge-clip))):focus-visible::after{--_fo:3px;--_fw:2px;background:var(--focus)}
.btn-primary:where(.btn-l,.btn-m,.btn-s):focus-visible::after{background:var(--focus-on-gold)}

/* ======================= BUTTONS ======================= */
/* sizes: L heroes only, M sections and tier rows, S nav and compact rows */
.btn-l{--_h:56px;--_px:32px;--_fs:18px}
.btn-m{--_h:48px;--_px:24px;--_fs:16px}
.btn-s{--_h:40px;--_px:16px;--_fs:14px}

:is(.btn-primary,.btn-secondary):where(.btn-l,.btn-m,.btn-s){
  --_cut:var(--cut-s);
  position:relative;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  min-height:var(--_h);max-width:100%;padding:var(--space-8) var(--_px);
  font-size:var(--_fs);font-weight:400;font-style:normal;line-height:1.1;
  letter-spacing:0;text-transform:uppercase;text-align:center;text-decoration:none;
  font-synthesis:none;
  border:0;border-radius:0;box-shadow:none;text-shadow:none;
  -webkit-appearance:none;appearance:none;
  clip-path:polygon(var(--_cut) 0,100% 0,100% calc(100% - var(--_cut)),calc(100% - var(--_cut)) 100%,0 100%,0 var(--_cut));
  cursor:pointer;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease)}
:is(.btn-primary,.btn-secondary):where(.btn-l,.btn-m,.btn-s):focus-visible{outline:none}

/* primary: the gold buy / join action */
.btn-primary:where(.btn-l,.btn-m,.btn-s){
  font-family:var(--font-display);
  color:var(--on-gold);background:var(--gold-fill)}
.btn-primary:where(.btn-l,.btn-m,.btn-s):active{transform:scale(.98);filter:brightness(.95)}
.btn-primary:where(.btn-l,.btn-m,.btn-s):is(:disabled,[aria-disabled="true"]){
  background:var(--surface-raised);color:var(--text-muted);
  cursor:not-allowed;pointer-events:none;transform:none;filter:none}

/* secondary: everything that is not buying */
.btn-secondary:where(.btn-l,.btn-m,.btn-s){
  font-family:var(--font-skinny);
  color:var(--text);background:transparent}
.btn-secondary:where(.btn-l,.btn-m,.btn-s)::before{background:var(--line-strong)}
.btn-secondary:where(.btn-l,.btn-m,.btn-s):active{transform:scale(.98)}
.btn-secondary:where(.btn-l,.btn-m,.btn-s):is(:disabled,[aria-disabled="true"]){
  color:var(--text-muted);cursor:not-allowed;pointer-events:none;transform:none}

@media (hover:hover){
  .btn-primary:where(.btn-l,.btn-m,.btn-s):hover{background:var(--gold-hi);transform:translateY(-1px)}
  .btn-primary:where(.btn-l,.btn-m,.btn-s):hover:active{transform:scale(.98)}
  .btn-secondary:where(.btn-l,.btn-m,.btn-s):hover{background:var(--surface-hover)}
  .btn-secondary:where(.btn-l,.btn-m,.btn-s):hover::before{background:var(--text)}
}

/* ======================= TEXT LINK ======================= */
/* takes the surrounding text's face and size; ignores a page's bare a{} or button{} styling */
.link{
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-shadow:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;
  color:var(--text);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--text-muted);
  -webkit-tap-highlight-color:transparent;
  transition:text-decoration-color var(--dur-fast) var(--ease)}
.link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover){
  .link:hover{text-decoration-color:var(--text);text-decoration-thickness:2px}
}

/* ======================= CARD ======================= */
.card:not(:where(:has(> .edge-clip))){
  --_cut:var(--cut-l);
  position:relative;box-sizing:border-box;
  padding:var(--space-24);
  color:var(--text);background:var(--surface);
  clip-path:var(--clip-l);
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-fast) var(--ease)}
.card:not(:where(:has(> .edge-clip))):where(:any-link){display:block;text-decoration:none}
.card:not(:where(:has(> .edge-clip))):focus-visible{outline:none}
.card--live:not(:where(:has(> .edge-clip)))::before{background:var(--gold)}
@media (hover:hover){
  .card:not(:where(:has(> .edge-clip))):any-link:hover{background:var(--surface-raised)}
  .card:not(:where(:has(> .edge-clip))):not(.card--live):any-link:hover::before{background:var(--line-strong)}
}

/* ======================= CHIP ======================= */
.chip{
  display:inline-flex;align-items:center;gap:var(--space-8);
  box-sizing:border-box;min-height:28px;padding:0 var(--space-12);
  font-family:var(--font-skinny);font-size:var(--t-label);font-weight:400;font-style:normal;
  line-height:1;letter-spacing:0;text-transform:uppercase;white-space:nowrap;
  font-synthesis:none;
  color:var(--text-2);background:var(--surface-raised);
  clip-path:var(--clip-s)}
.chip--live{color:var(--text)}
.chip--live::before{content:"";flex:none;width:8px;height:8px;background:var(--gold)}

/* ======================= ACCORDION ======================= */
.accordion{
  --_cut:var(--cut-s);
  position:relative;display:block;box-sizing:border-box;
  color:var(--text);background:var(--surface);
  clip-path:var(--clip-s)}
.accordion + .accordion{margin-top:var(--space-8)}
.accordion[open]{padding-bottom:var(--space-24)}
.accordion[open]::before{background:var(--line-strong)}
.accordion > summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);
  box-sizing:border-box;min-height:56px;padding:var(--space-12) var(--space-24);
  list-style:none;cursor:pointer;
  font-family:var(--font-body);font-size:var(--t-body);font-weight:600;line-height:1.4;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-fast) var(--ease)}
.accordion > summary::-webkit-details-marker{display:none}
.accordion > summary::marker{content:""}
/* plus / minus mark, drawn in CSS */
.accordion > summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,
             linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;
  color:var(--text-muted)}
.accordion[open] > summary::after{
  background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat;
  color:var(--text)}
.accordion > summary:focus-visible{outline:2px solid var(--focus);outline-offset:-7px}
.accordion > :not(summary){
  margin:0 var(--space-24);
  font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-2)}
.accordion > :not(summary) + :not(summary){margin-top:var(--space-12)}
@media (hover:hover){
  .accordion > summary:hover{background:var(--surface-raised)}
}

/* ======================= STATUS CARD ======================= */
.status-card{
  --_cut:var(--cut-l);
  position:relative;box-sizing:border-box;
  width:min(100%,600px);margin-inline:auto;
  padding:clamp(24px,6vw,40px);
  color:var(--text);background:var(--surface);
  clip-path:var(--clip-l)}
.status-card__eyebrow{
  margin:0 0 var(--space-12);
  font-family:var(--font-skinny);font-size:var(--t-label);font-weight:400;font-style:normal;
  line-height:1.3;letter-spacing:0;text-transform:uppercase;font-synthesis:none;
  color:var(--text-muted)}
.status-card__title{
  margin:0;
  font-family:var(--font-display);font-size:var(--t-h2);font-weight:400;font-style:normal;
  line-height:var(--lh-heading);letter-spacing:0;text-transform:uppercase;font-synthesis:none;
  color:var(--text)}
.status-card__body{
  margin:var(--space-16) 0 0;
  font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-2)}
.status-card__actions{
  display:flex;flex-wrap:wrap;gap:var(--space-12);margin-top:var(--space-32)}

/* ======================= MOTION + CONTRAST PREFERENCES ======================= */
@media (prefers-reduced-motion:reduce){
  :is(.btn-primary,.btn-secondary):where(.btn-l,.btn-m,.btn-s),
  .btn-secondary:where(.btn-l,.btn-m,.btn-s)::before,
  .link,
  .card:not(:where(:has(> .edge-clip))),
  .card:not(:where(:has(> .edge-clip)))::before,
  .accordion::before,
  .accordion > summary,
  .status-card::before{transition:none}
  :is(.btn-primary,.btn-secondary):where(.btn-l,.btn-m,.btn-s):is(:hover,:active,:hover:active){transform:none}
}
/* Windows high contrast drops backgrounds: give the controls a real edge and ring */
@media (forced-colors:active){
  :is(.btn-primary,.btn-secondary):where(.btn-l,.btn-m,.btn-s){border:1px solid ButtonText}
  :is(.btn-primary,.btn-secondary):where(.btn-l,.btn-m,.btn-s):focus-visible,
  .card:not(:where(:has(> .edge-clip))):focus-visible{outline:2px solid Highlight;outline-offset:-5px}
  .card:not(:where(:has(> .edge-clip))),.accordion,.status-card{border:1px solid CanvasText}
}

/* NEWS HIDDEN FOR THE LAUNCH: the News and Latest links carry the hidden attribute (netlify.toml sends /news to /),
   and nav/footer rules such as .gnav-links a{display:inline-block} would otherwise show them. Remove with the attribute. */
a[href="/news/"][hidden],a[href="/#latest"][hidden],a[href="#latest"][hidden],section#latest[hidden]{display:none !important}