/* ============================================================================
   granttasker.com — single site stylesheet (Project Rules §5)
   Sections:
     01  Design tokens
     02  Fonts (@font-face slots — awaiting owner-supplied WOFF2 files)
     03  Base / reset
     04  Typography
     05  Layout primitives
     06  Header + navigation
     07  Footer
     08  Components (databox eyebrows, buttons, cards, forms, share, icons)
     09  Page: home
     10  Page: books
     11  Page: about + contact
     12  Page: resources
     13  Page: blog
     14  Utilities + accessibility
     15  Print
   Design language: FAA-chart vernacular — monospace "data block" labels,
   thin rules, faint chart art behind sections, red used sparingly like a
   chart CAUTION box. Buttons never move on hover (owner preference):
   hover feedback is color/border only.
   ========================================================================== */

/* ============================ 01 DESIGN TOKENS ============================ */
:root {
  /* Brand palette (7 owner-supplied colors) */
  --c-paper:    #f4f3ee;  /* chart-paper off-white          */
  --c-stone:    #817f75;  /* warm gray — muted labels        */
  --c-slate:    #414753;  /* mid slate — borders, secondary  */
  --c-ink:      #2b303a;  /* dark slate — primary dark       */
  --c-graphite: #303030;  /* neutral dark                    */
  --c-carbon:   #222323;  /* darkest surface                 */
  --c-signal:   #95190c;  /* caution red — accent, sparingly */

  /* Derived tints/shades of the palette (kept minimal) */
  --c-signal-deep: #6f1209;              /* hover shade of --c-signal   */
  --c-paper-hi:  rgba(244,243,238,.92);  /* body text on dark           */
  --c-paper-mid: rgba(244,243,238,.70);  /* muted text on dark          */
  --c-line-dark: rgba(244,243,238,.16);  /* hairlines on dark           */
  --c-line-lite: rgba(65,71,83,.28);     /* hairlines on paper          */

  /* Type. Montserrat (OFL) self-hosted as the Gotham lookalike — the
     Adobe Fonts CDN is prohibited by Project Rules §4. See §02 for the
     file drop-in note. Until the WOFF2 files land, the stack falls
     through to close geometric system sans faces. */
  --font-sans: "Montserrat", "Avenir Next",
               -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
               "Liberation Mono", Menlo, monospace;

  /* Rhythm */
  --wrap-max: 72rem;
  --space-section: clamp(4rem, 9vw, 7rem);
  --radius: 4px;

  /* Motion */
  --ease: 180ms ease;
}

/* =============================== 02 FONTS ================================ */
/* Brand face decision: Montserrat (SIL Open Font License), self-hosted,
   as the free lookalike for Gotham (whose Adobe Fonts CDN is prohibited
   by Project Rules §4). Download steps are in /assets/fonts/README.txt.
   Once the three WOFF2 files below are placed in /assets/fonts/,
   uncomment this block — the --font-sans stack already leads with
   Montserrat, so no other change is needed.

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* ============================ 03 BASE / RESET ============================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;               /* 17px base */
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-paper);
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a {
  color: var(--c-signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--ease), text-decoration-color var(--ease);
}
a:hover { color: var(--c-signal-deep); }

hr {
  border: 0;
  border-top: 1px solid var(--c-line-lite);
  margin: 2.5rem 0;
}

/* ============================= 04 TYPOGRAPHY ============================== */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .01em;
  color: inherit;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); }

p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

.lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.55;
  max-width: 42em;
}

.muted { color: var(--c-slate); }

/* ========================== 05 LAYOUT PRIMITIVES ========================== */
.wrap {
  width: min(var(--wrap-max), 100% - 3rem);
  margin-inline: auto;
}

.section { padding-block: var(--space-section); position: relative; }

/* Dark sections: ink or carbon surface, light text */
.section--dark   { background: var(--c-ink);    color: var(--c-paper-hi); }
.section--carbon { background: var(--c-carbon); color: var(--c-paper-hi); }
.section--dark a:not(.btn),
.section--carbon a:not(.btn) { color: var(--c-paper-hi); text-decoration-color: var(--c-signal); }
.section--dark a:not(.btn):hover,
.section--carbon a:not(.btn):hover { color: #fff; }

/* Faint chart art behind a section. The image sits in ::before so content
   stays selectable and legible. On paper: multiply. On dark: inverted +
   screen, which turns chart linework into faint light traces. */
.section--chart::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--chart-img);
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: var(--chart-opacity, .10);
  pointer-events: none;
}
.section--dark.section--chart::before,
.section--carbon.section--chart::before,
.page-hero.section--chart::before {
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: var(--chart-opacity-dark, .12);
}
.section--chart > .wrap { position: relative; }

/* Chart art assignments (one class per background element, so HTML never
   needs inline styles — Project Rules §5) */
.chart-bg--ifr        { --chart-img: url("/assets/images/backgrounds/slc-low-ifr-chart.jpg"); }
.chart-bg--flyway     { --chart-img: url("/assets/images/backgrounds/slc-fly-chart.jpg"); }
.chart-bg--vor        { --chart-img: url("/assets/images/backgrounds/vor-diagram.jpg"); }
/* Instrument diagrams carry large glyphs, so they run fainter than charts */
.chart-bg--nav {
  --chart-img: url("/assets/images/backgrounds/navigation-diagram.jpg");
  --chart-opacity: .05;
  --chart-opacity-dark: .05;
}
.chart-bg--attitude {
  --chart-img: url("/assets/images/backgrounds/attitude-diagram.jpg");
  --chart-opacity: .05;
  --chart-opacity-dark: .05;
}
.chart-bg--performance{ --chart-img: url("/assets/images/backgrounds/performance-chart.jpg"); }

/* Two-column media/content split, stacks on small screens */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 800px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--flip > :first-child { order: 2; }
}

/* ======================= 06 HEADER + NAVIGATION =========================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-signal);
  color: var(--c-paper);
  padding: .6rem 1rem;
}
.skip-link:focus { left: 0; color: var(--c-paper); }

.site-header {
  background: var(--c-carbon);
  border-bottom: 1px solid var(--c-line-dark);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  margin-right: auto;
}
.brand__mark { width: auto; height: 2rem; }
/* Branded wordmark image (owner-supplied, replaces the HTML name text).
   Sized by height; width stays proportional. Slight opacity lift on hover
   stands in for the old text color change (no movement, per the rules). */
.brand__wordmark { width: auto; height: .8rem; opacity: .92; transition: opacity .15s ease; }
.brand:hover .brand__wordmark { opacity: 1; }
.site-nav__list {
  list-style: none;
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  display: block;
  padding: 1.4rem 0;
  color: var(--c-paper-hi);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.site-nav__list a:hover { color: #fff; border-bottom-color: var(--c-signal); }
.site-nav__list a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--c-signal);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 1px solid var(--c-slate);
  border-radius: var(--radius);
  color: var(--c-paper-hi);
  font: inherit;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem .85rem;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.nav-toggle:hover { border-color: var(--c-signal); color: #fff; }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 16px; height: 2px;
  background: currentColor;
  position: relative;
  content: "";
}
.nav-toggle__bars::before { position: absolute; top: -5px; }
.nav-toggle__bars::after  { position: absolute; top:  5px; }

@media (max-width: 719px) {
  .site-header__inner { gap: 1rem; }
  .brand__mark { height: 1.6rem; }
  .brand__wordmark { height: .5rem; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--c-carbon);
    border-bottom: 1px solid var(--c-line-dark);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; gap: 0; padding: .5rem 1.5rem 1rem; }
  .site-nav__list a { padding: .85rem 0; border-bottom: 1px solid var(--c-line-dark); }
  .site-nav__list a[aria-current="page"],
  .site-nav__list a:hover { border-bottom-color: var(--c-signal); }
}

/* =============================== 07 FOOTER ================================ */
.site-footer {
  background: var(--c-carbon);
  color: var(--c-paper-mid);
  border-top: 3px solid var(--c-signal);
  padding-top: 3.5rem;
  font-size: .95rem;
}
.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.site-footer__lockup { width: min(16rem, 100%); }
.site-footer__tagline { margin-top: 1.2rem; max-width: 26em; }

.site-footer__heading {
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 1rem;
}
.site-footer nav ul,
.site-footer__legal ul {
  list-style: none; margin: 0; padding: 0;
}
.site-footer nav li,
.site-footer__legal li { margin-bottom: .55rem; }
.site-footer a:not(.elsewhere-link) {
  color: var(--c-paper-mid);
  text-decoration: none;
  transition: color var(--ease);
}
.site-footer a:not(.elsewhere-link):hover { color: var(--c-paper); }

.elsewhere-list {
  list-style: none;
  display: flex;
  gap: .75rem;
  margin: 0; padding: 0;
}
.elsewhere-link {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--c-slate);
  border-radius: var(--radius);
  color: var(--c-paper-mid);
  transition: color var(--ease), border-color var(--ease), background-color var(--ease);
}
.elsewhere-link:hover {
  color: var(--c-paper);
  border-color: var(--c-signal);
  background: var(--c-graphite);
}
.elsewhere-link .icon { width: 1.2rem; height: 1.2rem; fill: currentColor; }

.site-footer__base {
  border-top: 1px solid var(--c-line-dark);
  margin-top: 3rem;
  padding-block: 1.4rem;
  font-size: .85rem;
  color: var(--c-stone);
}
.site-footer__base p { margin: 0; }

/* ============================= 08 COMPONENTS ============================== */

/* --- Databox eyebrow: styled after IFR-chart data blocks ------------------ */
.databox {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-slate);
  border: 1px solid var(--c-line-lite);
  padding: .45rem .8rem;
  margin-bottom: 1.4rem;
}
.databox::before {
  content: "";
  width: .55rem; height: .55rem;
  background: var(--c-signal);
  flex: none;
}
.databox { line-height: 1.7; }
.section--dark .databox,
.section--carbon .databox {
  color: var(--c-stone);
  border-color: var(--c-line-dark);
}

/* --- Buttons: hover changes color/border only — NEVER position ----------- */
.btn {
  display: inline-block;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: .85rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.btn--primary {
  background: var(--c-signal);
  border-color: var(--c-signal);
  color: var(--c-paper);
}
.btn--primary:hover {
  background: var(--c-signal-deep);
  border-color: var(--c-signal-deep);
  color: var(--c-paper);
}
.btn--ghost {                      /* on light surfaces */
  background: transparent;
  border-color: var(--c-slate);
  color: var(--c-ink);
}
.btn--ghost:hover { border-color: var(--c-signal); color: var(--c-signal); }
.btn--ghost-dark {                 /* on dark surfaces */
  background: transparent;
  border-color: var(--c-stone);
  color: var(--c-paper-hi);
}
.btn--ghost-dark:hover { border-color: var(--c-signal); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-lite);
  border-top: 3px solid var(--c-slate);
  padding: 1.6rem 1.6rem 1.4rem;
  transition: border-color var(--ease);
}
.card:hover { border-color: var(--c-signal); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

.card--dark {
  background: var(--c-carbon);
  border-color: var(--c-slate);
  border-top-color: var(--c-slate);
}
.card--dark:hover { border-color: var(--c-signal); }
.card--dark h3 a { color: var(--c-paper); text-decoration: none; }
.card--dark h3 a:hover { color: #fff; }

.card-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2rem;
}

/* --- Link lists (Resources) ----------------------------------------------- */
.link-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.link-list li {
  border-bottom: 1px solid var(--c-line-lite);
}
.link-list li:last-child { border-bottom: 0; }
.link-list a {
  display: block;
  padding: .95rem .25rem;
  color: var(--c-ink);
  text-decoration: none;
  transition: color var(--ease), padding-color var(--ease);
}
.link-list a:hover { color: var(--c-signal); }
.link-list .link-list__note {
  display: block;
  font-size: .88rem;
  color: var(--c-slate);
  margin-top: .15rem;
}
.link-list a:hover .link-list__note { color: inherit; }

/* --- Forms ----------------------------------------------------------------- */
.form-grid { display: grid; gap: 1.2rem; max-width: 40rem; }
.form-field label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: .4rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  font: inherit;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-slate);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--c-signal);
  outline-offset: 1px;
  border-color: var(--c-signal);
}
.form-hp { display: none; }  /* honeypot (Web3Forms botcheck) — must be display:none per their docs */

/* --- Share row (blog posts) ------------------------------------------------ */
.post-links {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line-lite);
}
.post-links__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-right: .4rem;
}
.post-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: inherit;
  font-size: .85rem;
  color: var(--c-ink);
  background: none;
  border: 1px solid var(--c-line-lite);
  border-radius: var(--radius);
  padding: .5rem .9rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.post-link:hover { border-color: var(--c-signal); color: var(--c-signal); }
.post-link .icon { width: .95rem; height: .95rem; fill: currentColor; }

/* ============================== 09 PAGE: HOME ============================= */
.hero {
  position: relative;
  background: var(--c-carbon);
  color: var(--c-paper);
  min-height: min(82vh, 46rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media,
.hero__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {                 /* legibility scrim */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(34,35,35,.92) 0%, rgba(34,35,35,.35) 45%, rgba(34,35,35,.15) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  max-width: 46rem;
}
.hero__content h1 { color: var(--c-paper); }
.hero__content .lede { color: var(--c-paper-hi); }

/* Page heroes (interior pages) */
.page-hero {
  background: var(--c-ink);
  color: var(--c-paper-hi);
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.page-hero > .wrap { position: relative; }
.page-hero h1 { color: var(--c-paper); margin-bottom: .3em; }
.page-hero .lede { color: var(--c-paper-mid); margin: 0; }

/* Book feature strip on home */
.book-feature__cover {
  border: 1px solid var(--c-line-dark);
  width: min(20rem, 80%);
  margin-inline: auto;
}

/* "Recently From The Blog" — latest-post feature (hand-updated per post) */
.latest-post {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}
@media (min-width: 720px) {
  .latest-post { grid-template-columns: minmax(0, 18rem) 1fr; gap: 3rem; }
}
.latest-post__media {
  display: block;
  border: 1px solid var(--c-line-dark);
  max-width: 18rem;
}
.latest-post__media img { display: block; width: 100%; height: auto; }
.latest-post__title { margin: 0 0 .35rem; }
.latest-post__title a {
  color: var(--c-paper);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-dark);
  transition: color .15s ease, border-color .15s ease;
}
.latest-post__title a:hover { color: #fff; border-color: var(--c-signal); }
.latest-post__date {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin: 0 0 1rem;
}

/* ============================= 10 PAGE: BOOKS ============================= */
.book-detail__cover {
  border: 1px solid var(--c-line-lite);
  box-shadow: 0 18px 40px -22px rgba(34,35,35,.55);
  width: min(22rem, 100%);
  margin-inline: auto;
}
.book-meta {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  font-size: .95rem;
}
.book-meta li {
  display: flex;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--c-line-lite);
}
.book-meta__key {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-slate);
  flex: 0 0 9rem;
  padding-top: .2rem;
}

/* ========================= 11 PAGE: ABOUT + CONTACT ======================= */
.portrait {
  border: 1px solid var(--c-line-lite);
  width: min(20rem, 100%);
}

/* =========================== 12 PAGE: RESOURCES =========================== */
.resource-section + .resource-section {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--c-line-lite);
}
.badge-soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-paper);
  background: var(--c-slate);
  padding: .25rem .6rem;
  border-radius: var(--radius);
  vertical-align: middle;
}

/* ============================= 13 PAGE: BLOG ============================== */
.post-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.post-list__item {
  border: 1px solid var(--c-line-lite);
  border-left: 3px solid var(--c-slate);
  padding: 1.6rem 1.8rem;
  transition: border-color var(--ease);
}
.post-list__item + .post-list__item { margin-top: 1.4rem; }
.post-list__item:hover { border-color: var(--c-signal); }
.post-list__item h2 { font-size: 1.35rem; margin-bottom: .35em; }
.post-list__item h2 a { color: var(--c-ink); text-decoration: none; }
.post-list__item h2 a:hover { color: var(--c-signal); }
.post-list__date {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-slate);
}

/* Post article body */
.post { max-width: 44rem; }
.post__meta {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: 2rem;
}
.post h2 { margin-top: 1.8em; }

.rss-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 2.5rem;
  font-size: .9rem;
  color: var(--c-ink);
  text-decoration: none;
  border: 1px solid var(--c-line-lite);
  border-radius: var(--radius);
  padding: .6rem 1rem;
  transition: border-color var(--ease), color var(--ease);
}
.rss-cta:hover { border-color: var(--c-signal); color: var(--c-signal); }
.rss-cta .icon { width: 1rem; height: 1rem; fill: currentColor; }

/* ====================== 14 UTILITIES + ACCESSIBILITY ====================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--c-signal);
  outline-offset: 2px;
}
.section--dark :focus-visible,
.section--carbon :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--c-paper);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ================================ 15 PRINT ================================ */
@media print {
  .site-header, .site-footer, .nav-toggle, .post-links,
  .btn, .hero__media, .hero__media-video, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .page-hero, .section--dark, .section--carbon {
    background: #fff !important; color: #000 !important;
  }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
  .section--chart::before { display: none; }
}