/* FJ Media Group design tokens.
   Extracted verbatim from raw/FJ Media Group On-Air Graphics.html, which is the
   brand kit export. Do not hand-edit values here: change the brand kit, re-export,
   and re-extract, or the website drifts from the on-air graphics.

   Fonts load from Google Fonts. The brand kit shipped no binaries. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
/* Core palette — brand kit 02 COLOR */
--fj-field-navy:#0E1922;      /* primary background */
--fj-signal-blue:#175070;     /* the F. panels, charts */
--fj-broadcast-red:#CF3B2C;   /* the J. rules, one CTA */
--fj-stadium-slate:#A8BCCC;   /* secondary type */
--fj-light-mode:#F4F2EE;      /* print, light grounds */

/* Support tints */
--fj-panel:#111E29;
--fj-divider:#1D2C38;
--fj-frame:#24384A;

/* Derived steps (interaction only — never introduce a new hue) */
--fj-blue-hi:#1C6289;
--fj-blue-lo:#123E56;
--fj-red-hi:#DC4C3C;
--fj-red-lo:#A82F23;
--fj-slate-dim:#7C8FA0;
--fj-light-dim:#DAD7D0;

/* Semantic — dark (default) */
--surface-page:var(--fj-field-navy);
--surface-panel:var(--fj-panel);
--surface-frame-border:var(--fj-frame);
--surface-accent:var(--fj-signal-blue);
--text-primary:var(--fj-light-mode);
--text-secondary:var(--fj-stadium-slate);
--text-muted:var(--fj-slate-dim);
--text-on-accent:var(--fj-light-mode);
--text-link:var(--fj-stadium-slate);
--text-link-hover:var(--fj-light-mode);
--border-divider:var(--fj-divider);
--border-frame:var(--fj-frame);
--rule-emphasis:var(--fj-broadcast-red);
--cta-bg:var(--fj-broadcast-red);
--cta-bg-hover:var(--fj-red-hi);
--cta-bg-active:var(--fj-red-lo);
--focus-ring:var(--fj-stadium-slate);

/* Chart / data ramp — blue only, per the 70/16/9/5 ratio */
--chart-1:#175070;--chart-2:#1C6289;--chart-3:#2B7BA8;--chart-4:#4E97C0;--chart-5:#8FBBD6;
--chart-highlight:var(--fj-broadcast-red);

/* Protection scrim for type over photography */
--scrim-bottom:linear-gradient(to top,rgba(14,25,34,.92) 0%,rgba(14,25,34,.72) 38%,rgba(14,25,34,0) 100%); /* @kind color */
--scrim-flat:rgba(14,25,34,.72);
}

/* Light ground (print, light editorial). Mark colors never change. */
[data-fj-theme="light"]{
--surface-page:var(--fj-light-mode);
--surface-panel:#FFFFFF;
--surface-frame-border:#D6D2CA;
--text-primary:var(--fj-field-navy);
--text-secondary:#5C6E7C;
--text-muted:#8496A3;
--text-link:var(--fj-signal-blue);
--text-link-hover:var(--fj-field-navy);
--border-divider:#DCD8D0;
--border-frame:#D6D2CA;
--focus-ring:var(--fj-signal-blue);
}

:root{
--font-display:"Oswald","Oswald Fallback",Helvetica Neue,sans-serif;
--font-mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,monospace;

/* Weights in use */
--fw-display-regular:400; /* @kind font */
--fw-display-medium:500; /* @kind font */
--fw-display-semibold:600; /* @kind font */

/* Sizes — literal values from brand kit 03 TYPE */
--fs-h1:52px;   --lh-h1:52px;   --ls-h1:.04em;
--fs-h2:30px;   --lh-h2:33px;   --ls-h2:.06em;
--fs-h3:22px;   --lh-h3:26px;   --ls-h3:.05em;
--fs-eyebrow:13px; --lh-eyebrow:16px; --ls-eyebrow:.30em;
--fs-body:16px;  --lh-body:26px;  --ls-body:0em;
--fs-body-sm:14px; --lh-body-sm:22px;
--fs-caption:12px; --lh-caption:16px; --ls-caption:.16em;

/* Roles */
--text-h1:var(--fw-display-semibold) var(--fs-h1)/var(--lh-h1) var(--font-display);
--text-h2:var(--fw-display-medium) var(--fs-h2)/var(--lh-h2) var(--font-display);
--text-h3:var(--fw-display-medium) var(--fs-h3)/var(--lh-h3) var(--font-display);
--text-eyebrow:var(--fw-display-regular) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-display);
--text-body-role:400 var(--fs-body)/var(--lh-body) var(--font-mono);
--text-caption-role:400 var(--fs-caption)/var(--lh-caption) var(--font-mono);
}
.fj-h1{font:var(--text-h1);letter-spacing:var(--ls-h1);text-transform:uppercase;color:var(--text-primary);margin:0}
.fj-h2{font:var(--text-h2);letter-spacing:var(--ls-h2);color:var(--text-primary);margin:0;text-wrap:pretty}
.fj-h3{font:var(--text-h3);letter-spacing:var(--ls-h3);color:var(--text-primary);margin:0}
.fj-eyebrow{font:var(--text-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-secondary);margin:0}
.fj-body{font:var(--text-body-role);color:var(--text-secondary);margin:0;text-wrap:pretty}
.fj-caption{font:var(--text-caption-role);letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--text-muted);margin:0}

:root{
--space-1:3px;   /* keyline */
--space-2:4px;
--space-3:8px;
--space-4:12px;
--space-5:16px;
--space-6:24px;
--space-7:32px;
--space-8:48px;
--space-9:64px;
--space-10:96px;
--space-11:128px;

--gutter-inline:24px;
--gutter-section:96px;
--stack-tight:8px;
--stack-default:16px;
--stack-loose:32px;

--content-max:1200px;
--measure-prose:62ch;

/* Logo rules — brand kit 01 */
--logo-min-size:32px;
--logo-clear-space:25%;
}

:root{
/* The mark's corners are never rounded; the system follows. */
--radius-none:0px;
--radius-pill:999px;   /* channel avatar / circular crops only */

--border-hairline:1px;
--border-keyline:3px;   /* red separator, brand kit 04 LOWER THIRD */
--border-frame-width:1px;

--border-default:1px solid var(--border-divider);
--border-frame-style:1px solid var(--border-frame);
--keyline-red:3px solid var(--fj-broadcast-red);

/* No gradients, glows, bevels or shadows on the mark. Elevation elsewhere is
   carried by tint steps and frames, not blur. One flat drop for overlays only. */
--shadow-none:none;
--shadow-overlay:0 24px 64px rgba(0,0,0,.55);
--blur-overlay:blur(6px); /* @kind other */
}

:root{
/* Broadcast cuts, not bounces. Linear wipes and short fades only. */
--ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--ease-linear:linear; /* @kind other */
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-default:200ms; /* @kind other */
--dur-wipe:320ms; /* @kind other */
--transition-interactive:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-default:0ms; /* @kind other */
--dur-wipe:0ms; /* @kind other */}}
@keyframes fj-wipe-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fj-fade-in{from{opacity:0}to{opacity:1}}

body{background:var(--surface-page);color:var(--text-primary);font:var(--text-body-role);margin:0;-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid currentColor;transition:var(--transition-interactive)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--fj-signal-blue);color:var(--fj-light-mode)}