/* =========================
   Typography tokens
   ========================= */

:root {
  /* Avenir and Avenir Next ship with macOS and iOS. Other platforms fall
     through to their own system sans. To change the site's type, change
     these two lines and nothing else. */
  --font-body:
    Avenir, "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-heading:
    Avenir, "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --weight-body: 300;
  --weight-heading: 500;

  /* One spacing value for date -> title -> excerpt, used on the homepage,
     the Posts page, and the top of every post. Change this one number to
     tighten or loosen all three at once. */
  --post-stack-gap: 1.15rem;
}

/* =========================
   Color tokens (light is the default)
   Every color in this file comes from these. Dark mode and
   high-contrast mode only swap the values here.
   ========================= */

:root {
  --bg: #eeeeee;
  --surface: #ffffff;
  --surface-alt: #f3f4f6;
  --surface-hover: #e5e7eb;
  --field-bg: #ffffff; /* form fields and buttons stay white so they stand out */
  --text: #2d3448;
  --text-muted: #47506b;
  --border: #d7dbe5;
  --border-strong: #b8bfcf;
  --current: #d7dbe5;
  --current-text: #2d3448;
  --brand: #2d3448;
  --header-bg: #161a24; /* same deep navy in light and dark mode */
  --button-bg: #2d3448;
  --button-text: #ffffff;
  --button-hover: #47506b;
  --focus: #2d3448;
  --link-underline: #7c86a1; /* 3.6:1 on white */
  --error-bg: #fff5f5;
  --error-border: #e0a1a1;
  --error-text: #7a1f1f;
  --success-bg: #f3f7f3;
  --success-border: #a9c4a9;
  --success-text: #2d5a2d;
}

/* Dark palette. Every text pair here passes WCAG AAA (7:1 or better).
   Body weight goes up from 300 to 400: thin light-on-dark strokes blur,
   especially for people with astigmatism. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161a24;
  --surface: #1f2431;
  --field-bg: #1f2431;
  --surface-alt: #2a3040;
  --surface-hover: #363d50;
  --text: #eeeeee;
  --text-muted: #c4cad8;
  --border: #47506b;
  --border-strong: #7c86a1;
  --current: #47506b;
  --current-text: #ffffff;
  --brand: #2d3448;
  --button-bg: #d7dbe5;
  --button-text: #161a24;
  --button-hover: #ffffff;
  --focus: #ffd600;
  --link-underline: #7c86a1; /* 4.3:1 on the dark panel */
  --error-bg: #3a1f22;
  --error-border: #8a3a3a;
  --error-text: #f4b4b4;
  --success-bg: #1f3322;
  --success-border: #4f7a4f;
  --success-text: #b5dcb5;
  --weight-body: 400;
}

/* =========================
   Base and reset
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

/* The logo is a one-color navy PNG with a transparent background, so it vanishes on dark.
   In dark mode, recolor it to the light text color. Any "no_bg" image gets this. */
:root[data-theme="dark"] img[src*="no_bg"] {
  filter: brightness(0) invert(0.93);
}

/* Callouts share the header navy; in dark mode give them an edge so they don't blend into the panel. */
:root[data-theme="dark"] .callout {
  border: 1px solid var(--border-strong);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* =========================
   Global elements
   ========================= */

a {
  color: var(--text);
  /* Refined underline: thin, softer color, pushed below the letters so it
     clears descenders (p, g, y). Hover and keyboard focus make it thick and
     full-strength, so pointing at a link gives clear feedback. */
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.25em;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

ul,
ol {
  padding-left: 1.75rem;
}

li + li {
  margin-top: 0.5rem;
}

/* =========================
   Accessibility helpers
   ========================= */

a[href="#main"],
.skip-link {
  position: absolute;
  left: -9999px;
}

a[href="#main"]:focus,
.skip-link:focus {
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
}

/* Two skip links (pages with skipTo): hidden together, shown together. */
.skip-links {
  position: absolute;
  top: 1rem;
  left: -9999px;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skip-links:focus-within {
  left: 1rem;
}

.skip-links a,
.skip-links a:focus {
  position: static;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
}

.skip-links a:focus {
  /* yellow ring: the links sit over the dark header, so navy wouldn't show */
  outline: 3px solid #ffd600;
  outline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* =========================
   Header and branding
   ========================= */

.site-header {
  background: var(--header-bg);
}

.site-header > .container {
  width: min(100% - 2rem, 64rem);
}

.site-branding {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; /* title and tagline share a baseline */
  align-content: center; /* the row sits in the vertical middle of the bar */
  gap: 0.25rem 0.75rem;
  min-height: 4.5rem;
  padding: 0.75rem 0;
}

.site-title {
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}

.site-title a {
  color: #ffffff;
  text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
  text-decoration: underline;
}

.tagline {
  margin: 0;
  font-family: "Times New Roman", serif;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.2;
  color: #ffd600;
}

.tagline-emphasis {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.header-stripes {
  display: grid;
  grid-template-rows: repeat(3, 10px);
}

.stripe {
  display: block;
}

/* Three stripes, dark to light: the original slate, steel blue and mist
   (the original darkest navy stripe was dropped). */
.stripe-1 {
  background: #47506b;
}

.stripe-2 {
  background: #7c86a1;
}

.stripe-3 {
  background: #d7dbe5;
}

/* =========================
   Shared layout
   ========================= */

.container {
  width: min(100% - 2rem, 72rem);
  margin: 0 auto;
}

main {
  padding: 0 0 1.5rem;
}

.layout {
  width: min(100% - 2rem, 64rem);
  margin: 1rem auto;
}

.content {
  min-width: 0;
  padding: 1.5rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  /* Reading size for body copy: 20px at a 1.6 ratio. Headings and small
     print are sized in rem, so they are unaffected by this. */
  font-size: 1.25rem;
  font-weight: var(--weight-body);
  line-height: 1.6;
}

.content .container {
  width: min(100% - 3rem, 46rem);
}

/* =========================
   Main content typography
   ========================= */

main .container {
  max-width: 46rem;
}

main h1,
main h2,
main h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: 1.2;
}

main h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.01em;
}

/* =========================
   Main navigation (under header)
   ========================= */

.site-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-nav .container {
  width: min(100% - 2rem, 64rem);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  display: block;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  border-radius: 0.35rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  background: var(--surface-alt);
  text-decoration: underline;
}

.site-nav a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  background: var(--current);
  color: var(--current-text);
  font-weight: 600;
}

/* Below the width where the menu fits on one row (about 61rem / 976px with Games and
   Wonders in it), switch to a grid of wide buttons, so the menu is either one clean
   row or the grid, never a ragged second line. rem-based, so zoom and larger text
   settings switch to the grid sooner. Keeps
   every link visible and restores the large targets the old sidebar had. */
@media (max-width: 61rem) {
  /* An even 3 x 3 grid: 7 links plus the Dark mode and Hide images buttons.
     If the menu ever has more or fewer items, the last row is just shorter.
     Labels may wrap onto two lines on very narrow screens or large text. */
  .site-nav ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.5rem 0;
  }

  /* Every button in a row is the same height, even when one label wraps */
  .site-nav li {
    display: flex;
  }

  .site-nav li > a,
  .site-nav li > button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.5rem;
  }

  .site-nav a {
    background: var(--surface-alt);
    text-align: center;
    white-space: normal;
  }

  .site-nav a:hover {
    background: var(--surface-hover);
  }
}

/* =========================
   Content media
   ========================= */

.content img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================
   Home page
   ========================= */

.home-content {
  margin-bottom: 2rem;
}

.home-content p {
  margin-top: 0;
  margin-bottom: 1.25rem;
  max-width: 62ch;
}

.home-intro {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.home-intro h2,
.home-intro p {
  margin: 0;
}

.home-intro h2 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.home-intro-primary,
.home-intro-secondary {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 300;
}

.home-posts {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.home-posts h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 1.5rem;
}

.home-posts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-posts li + li {
  margin-top: 0.75rem;
}

.home-posts .post-list-item {
  padding: 1.75rem 0;
}

.home-posts .post-excerpt {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.home-posts a {
  color: var(--text);
  text-decoration: none;
}

.home-posts a:hover,
.home-posts a:focus {
  text-decoration: underline;
}

.home-posts-link {
  margin: 1.5rem 0 0 0;
}

.home-posts-link a {
  font-weight: 600;
}

/* =========================
   Contact page
   ========================= */

.contact-form {
  margin-top: 1.5rem;
}

.form-field {
  margin-bottom: 1.25rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border-strong);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}

.form-field textarea {
  resize: vertical;
  min-height: 10rem;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}

.form-actions {
  margin-top: 1.5rem;
}

.form-actions button {
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--button-bg);
  background: var(--button-bg);
  color: var(--button-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.form-actions button:hover,
.form-actions button:focus {
  background: var(--button-hover);
  border-color: var(--button-hover);
}

.form-honeypot {
  position: absolute;
  left: -9999px;
}

.form-message {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid;
}

.form-error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.form-success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.form-message ul {
  margin: 0.5rem 0 0 1.25rem;
}

.form-message p {
  margin: 0;
}

.field-error {
  margin: 0.4rem 0 0;
  color: var(--error-text);
  font-weight: 600;
}

/* =========================
   Email signup
   ========================= */

.email-signup {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.email-signup > :first-child {
  margin-top: 0;
}

.email-signup > :last-child {
  margin-bottom: 0;
}

.email-signup h2 {
  margin-bottom: 0.75rem;
}

.email-signup-form {
  margin-top: 1.25rem;
}

.email-signup-help,
.email-signup-privacy {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.email-signup-privacy {
  margin-bottom: 0;
}

.sib-form-message-panel {
  display: none;
}

.sib-form-message-panel p {
  margin: 0;
}

.entry__error:empty {
  display: none;
}

.progress-indicator__icon {
  width: 1em;
  height: 1em;
  margin-right: 0.4rem;
  vertical-align: -0.1em;
  fill: currentColor;
}

.sib-hide-loader-icon {
  display: none;
}

/* =========================
   Post lists and post meta
   ========================= */

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-list > li + li {
  margin-top: 0;
}

.post-list-item {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}

/* On the Posts page the first post sits right under the page title's rule.
   Drop its top padding so the gap matches other pages (Tech and Access, Shop),
   where the header's 1.75rem bottom margin is the only space. */
.page-header + .post-list > li:first-child > .post-list-item {
  padding-top: 0;
}

.home-posts .post-list-item:last-child {
  border-bottom: 1px solid var(--border);
}

.post-list-title {
  margin: 0 0 var(--post-stack-gap) 0;
  font-family: var(--font-heading);
  /* 500 weight. Size sits between the 1.75rem that read too small and the
     2rem that read too large. Avenir has no weight between 500 and 600, so
     the tuning here is size, not weight. */
  font-weight: var(--weight-heading);
  font-size: 1.875rem;
  line-height: 1.15;
}

.post-list-title a {
  color: inherit;
  text-decoration: none;
}

.post-list-title a:hover,
.post-list-title a:focus {
  text-decoration: underline;
}

.post-date {
  margin: 0 0 var(--post-stack-gap);
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* On a post page the date sits just under the title rule, then the post
   starts one --post-stack-gap below it. */
.post-date-single {
  margin: 0 0 var(--post-stack-gap);
}

.post-excerpt {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* =========================
   Article content
   ========================= */

article header {
  margin-bottom: 1.75rem;
  padding-bottom: var(--post-stack-gap);
  border-bottom: 1px solid var(--border);
}

article header h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* =========================
   Section separators
   ========================= */

.section-divider {
  margin: 2rem 0 1.25rem;
  border: 0;
  border-top: 1px solid var(--border);
}

.related-links {
  margin-block-start: 2rem;
  padding-block-start: 1.25rem;
  border-top: 1px solid var(--border);
}

.related-links h2 {
  margin-block-start: 0;
}

/* =========================
   Navy callout
   ========================= */

.callout {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem;
  background: var(--brand);
  color: #ffffff;
  /* 400, not the page's 300. Light text on a dark field visually thins,
     so the body weight would go faint here. White on this navy measures
     12.38:1; the yellow label measures 8.89:1. Both clear WCAG AAA. */
  font-weight: 400;
}

.callout > :first-child {
  margin-top: 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout p {
  margin: 0 0 1rem;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-label {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd600;
}

.callout strong {
  font-weight: 600;
}

.callout a {
  color: #ffffff;
}

.callout a:hover,
.callout a:focus {
  color: #ffd600;
}

.callout ul,
.callout ol {
  margin: 0 0 1rem;
}

.callout li + li {
  margin-top: 0.4rem;
}

/* =========================
   Footer
   ========================= */

/* The generic .container is 72rem, but the header, nav and content column
   are all 64rem. Without this the footer sat 8rem wider and its text
   started further left than everything above it. */

/* =========================
   Responsive layout
   ========================= */

@media (min-width: 56rem) {
  .layout {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .content {
    padding: 2.25rem 0;
  }

  .content .container {
    width: min(100% - 5rem, 46rem);
    margin: 0 auto;
  }
}

/* =========================
   Study pages, tables, and separators
   ========================= */

hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
}

th,
td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  vertical-align: top;
}

th {
  text-align: left;
  background: var(--surface-alt);
}

.study-note,
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--border-strong);
  background: var(--surface-alt);
}

.study-note > :first-child,
blockquote > :first-child {
  margin-top: 0;
}

.study-note > :last-child,
blockquote > :last-child {
  margin-bottom: 0;
}

.lesson-navigation {
  margin-top: 2rem;
  padding-top: 1.25rem;
}

.lesson-navigation h2 {
  margin-top: 0;
}

/* =========================
   Shop
   ========================= */

.shop-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin: 2rem 0 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}

.shop-product-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

.shop-product-info h2 {
  margin-top: 0;
}

.shop-price {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.shop-price-note {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}

.shop-specs {
  margin: 1rem 0 1.5rem;
}

.shop-buy {
  margin: 1.5rem 0 0.75rem;
}

.shop-buy-link {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--button-bg);
  background: var(--button-bg);
  color: var(--button-text);
  font-weight: 600;
  text-decoration: none;
}

.shop-buy-link:hover,
.shop-buy-link:focus {
  background: var(--button-hover);
  border-color: var(--button-hover);
  text-decoration: underline;
}

.shop-buy-note {
  margin-top: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .shop-product {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================
   Hide images toggle
   ========================= */

/* Sits at the right end of the nav row; drops into the button grid on narrow screens. */
.site-nav .nav-tool {
  margin-left: auto;
}

.image-toggle,
.theme-toggle {
  display: block;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.35rem;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

.image-toggle:hover,
.theme-toggle:hover {
  background: var(--surface-alt);
  text-decoration: underline;
}

.image-toggle:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 61rem) {
  .site-nav .nav-tool {
    margin-left: 0;
  }

  .image-toggle,
  .theme-toggle {
    width: 100%;
    white-space: normal;
  }
}

/* Images hidden: content images, video, and embeds go away; alt text takes their place. */
.hide-images main img,
.hide-images main picture,
.hide-images main video,
.hide-images main iframe,
.hide-images main svg:not([aria-hidden="true"]) {
  display: none !important;
}

.img-alt-note {
  display: none;
}

.hide-images .img-alt-note {
  display: block;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--border-strong);
  background: var(--surface-alt);
  font-style: italic;
}

/* =========================
   Theme toggle (shares the nav-tool styling)
   ========================= */

.site-nav .nav-tool + .nav-tool {
  margin-left: 0;
}

/* =========================
   OS high-contrast support
   These follow the visitor's system settings; no button needed.
   ========================= */

/* macOS "Increase contrast" / Windows "prefers more contrast":
   pure black-and-white text, muted text goes full strength, borders get solid. */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme="dark"] {
    --link-underline: currentColor;
  }

  :root {
    --text: #000000;
    --text-muted: #000000;
    --border: #2d3448;
    --border-strong: #000000;
    --current: #2d3448;
    --current-text: #ffffff;
    --button-bg: #000000;
    --button-hover: #2d3448;
    --focus: #000000;
  }

  :root[data-theme="dark"] {
    --text: #ffffff;
    --text-muted: #ffffff;
    --border: #d7dbe5;
    --border-strong: #ffffff;
    --current: #ffffff;
    --current-text: #000000;
    --bg: #000000;
    --surface: #0d0f14;
    --button-bg: #ffffff;
    --button-text: #000000;
    --button-hover: #ffd600;
    --focus: #ffd600;
  }

  a {
    text-decoration: underline;
  }
}

/* Windows Contrast Themes: the OS replaces every color and drops backgrounds.
   Anything that relied on a background color alone needs a border or underline. */
@media (forced-colors: active) {
  .site-nav a[aria-current="page"] {
    border: 2px solid CanvasText;
    text-decoration: underline;
  }

  .img-alt-note,
  .callout,
  .home-intro,
  .email-signup,
  blockquote {
    border: 1px solid CanvasText;
  }

  .image-toggle,
  .theme-toggle,
  .form-actions button,
  .shop-buy-link {
    border: 2px solid ButtonText;
  }

  .header-stripes {
    display: none;
  }

  :focus-visible {
    outline: 3px solid Highlight !important;
  }
}

/* =========================
   Link-list rows
   Lists made only of links (class added at build time in eleventy.config.js)
   become full-width rows: big targets for Head Pointer and dwell clicking,
   and the row shape plus arrow say "link" without an underline.
   ========================= */

ul.link-list {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 2rem;
  padding: 0;
  list-style: none;
}

ul.link-list li + li {
  margin-top: 0;
}

ul.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  text-decoration: none;
}

/* Arrow is decoration: the "/ ''" part gives it empty alt text so screen
   readers don't announce "right arrow" on every link. */
ul.link-list a::after {
  content: "\2192";
  content: "\2192" / "";
  display: inline-block; /* keeps the hover underline off the arrow */
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 1.15em;
}

ul.link-list a:hover {
  border-color: var(--border-strong);
  background: var(--surface-alt);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

ul.link-list a:hover::after {
  color: var(--text);
}

ul.link-list a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

@media (prefers-contrast: more) {
  ul.link-list a {
    border-color: var(--text);
  }
}

@media (forced-colors: active) {
  ul.link-list a {
    border: 1px solid LinkText;
  }
}

/* =========================
   Footer
   Deep navy like the header, with the stripes flipped (light to dark)
   so the page opens and closes the same way. Same in light and dark mode.
   ========================= */

.site-footer {
  margin-top: 2.5rem;
  background: var(--header-bg);
  color: #d7dbe5; /* 12.9:1 on the footer navy */
}

.site-footer .container {
  width: min(100% - 2rem, 64rem);
}

.footer-stripes {
  display: grid;
  grid-template-rows: repeat(3, 10px);
}

.footer-main {
  padding: 2.5rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .footer-grid {
    /* Link columns take only the width they need; the brand column gets
       the rest, so the mission line has room to sit on one line. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 3rem;
  }
}

.site-footer p {
  margin: 0;
}

.footer-title {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5rem;
  line-height: 1.1;
}

.footer-title a {
  color: #ffffff;
  text-decoration: none;
}

.footer-title a:hover,
.footer-title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Title and tagline on one line, like the header; wraps on narrow screens. */
.footer-branding {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.footer-brand .tagline {
  font-size: 1.05rem;
}

.footer-mission {
  margin-top: 1rem !important;
  font-size: 0.95rem; /* about 15px: fine for footer text, still easy to read */
  line-height: 1.6;
}

.footer-heading {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8bfcf; /* 9.9:1 */
}

.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li + li {
  margin-top: 0;
}

/* Padding makes each link a comfortable target (about 40px tall). */
.footer-nav a {
  display: inline-block;
  padding: 0.4rem 0;
  color: #eeeeee;
  text-decoration-color: #7c86a1;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: #ffffff;
  text-decoration-color: currentColor;
}

.site-footer a:focus-visible {
  outline: 2px solid #ffd600;
  outline-offset: 3px;
}

.footer-bottom {
  padding: 1rem 0 1.25rem;
  border-top: 1px solid #2d3448;
  font-size: 0.9rem;
  color: #b8bfcf;
}

@media (forced-colors: active) {
  .footer-stripes {
    display: none;
  }

  .site-footer {
    border-top: 1px solid CanvasText;
  }
}