/* GENERATED by tftng_ds/bin/build.mjs — do not edit */

/* source: masthead/masthead.css */
/* Full page width, not the 1240px cap: the rule under the bar runs edge to
 * edge (2026-09-07 review), so the root spans the viewport and the inline
 * padding does the centering — the content box is still the page cap minus
 * the spacing-6 gutters, aligned with .ft-site-main. overflow-x: clip keeps
 * the 100vw rule from adding a horizontal scrollbar where the scrollbar has
 * width. */
.ft-masthead {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-6) max(var(--spacing-6), calc(50% - var(--layout-max-page) / 2 + var(--spacing-6))) 0;
  overflow-x: clip;
  background: var(--color-paper-0);
  font-family: var(--font-family-sans);
}

/* Nav sits next to the lockup, bottom-aligned, with a spacing-8 gap (2026-08-21
 * call: the logo-to-nav void read as spread out). Bottom alignment plus the
 * link's spacing-2 padding/negative margin puts the active underline exactly
 * on the rule. */
.ft-masthead__bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--spacing-8);
  border-bottom: 2px solid transparent;
  padding-bottom: var(--spacing-2);
}

/* The 2px red rule, drawn full-bleed by a pseudo-element that exactly fills
 * the transparent border's slot; the root clips the horizontal overshoot. The
 * accent is this rule (2026-09-10 call), so the bar itself stays white. */
.ft-masthead__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 100vw;
  height: 2px;
  transform: translateX(-50%);
  background: var(--color-brand-red);
}

/* Nav is pushed to the right edge of the content box (2026-09-10 call). The
 * bar keeps justify-content: flex-start so the lockup stays put; the auto
 * margin absorbs all the slack between them, which degrades correctly to the
 * stacked layout below 1000px where the bar becomes a column. */
.ft-masthead__nav {
  margin-left: auto;
}

/* Breathing room around the lockup (2026-10-01 call): spacing-6 above it from
 * the root, and spacing-3 here on top of the bar's spacing-2 puts 20px between
 * the lockup and the rule. Padding on the brand rather than the bar keeps the
 * bottom-aligned nav's active underline on the rule; stacked, it adds to the
 * column gap for 20px between lockup and nav. */
.ft-masthead__brand {
  display: inline-flex;
  align-items: center;
  padding-bottom: var(--spacing-3);
  color: var(--color-ink-1);
  text-decoration: none;
}

/* 54px is the lockup's native pixel height (348x54): the largest the client's
 * enlarge-the-logo call can go without upscaling the raster. */
.ft-masthead__logo {
  display: block;
  height: 54px;
  width: auto;
}

.ft-masthead__wordmark {
  font-family: var(--font-family-serif);
  font-weight: 700;
  font-size: var(--font-size-h2);
  letter-spacing: var(--font-tracking-tight);
  color: var(--color-ink-1);
  line-height: 1;
}

.ft-masthead__nav-list {
  display: flex;
  gap: var(--spacing-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ft-masthead__nav-link {
  display: inline-block;
  font-family: var(--font-family-sans);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--color-ink-1);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding-bottom: var(--spacing-2);
  margin-bottom: calc(-1 * var(--spacing-2));
}

.ft-masthead__nav-link:hover {
  color: var(--color-brand-red);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.ft-masthead__nav-link--active {
  color: var(--color-brand-red);
  border-bottom: 2px solid var(--color-ink-1);
}

.ft-masthead__strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-1) 0;
}

.ft-masthead__date { line-height: 1; }

.ft-masthead__tagline {
  margin: 0;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-body-sm);
  color: var(--color-ink-3);
}

/* The lockup is 348px wide; with the nav at body size and a spacing-5 gap the
 * four links need ~300px, so the row technically holds down to ~740px. The
 * stack stays at 1000px on purpose: the breakpoint is C2's decision, not this
 * tightening's. */
@media (max-width: 1000px) {
  .ft-masthead {
    padding-top: var(--spacing-4);
  }
  .ft-masthead__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
  }
  /* Below the lockup's own width there is nothing left to enlarge: let it fill
   * the column and keep its aspect ratio instead of overflowing. */
  .ft-masthead__logo {
    height: auto;
    width: 348px;
    max-width: 100%;
  }
  .ft-masthead__nav-list {
    gap: var(--spacing-2) var(--spacing-3);
    flex-wrap: wrap;
  }
  .ft-masthead__nav-link {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* source: footer/footer.css */
.ft-footer {
  width: 100%;
  background: var(--color-paper-0);
  font-family: var(--font-family-sans);
  color: var(--color-ink-2);
}

.ft-footer__inner {
  width: 100%;
  max-width: var(--layout-max-page);
  margin: 0 auto;
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-5);
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 3fr auto;
  gap: var(--spacing-7);
  border-top: 2px solid var(--color-rule-strong);
  align-items: flex-start;
}

.ft-footer__brand { display: block; }

.ft-footer__mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-ink-1);
}

.ft-footer__logo { display: block; height: 32px; width: auto; }

.ft-footer__wordmark {
  font-family: var(--font-family-serif);
  font-weight: 700;
  font-size: var(--font-size-h3);
  letter-spacing: var(--font-tracking-tight);
  color: var(--color-ink-1);
  line-height: 1;
}

.ft-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-6) var(--spacing-7);
}

.ft-footer__col-heading {
  font-family: var(--font-family-sans);
  font-weight: 700;
  font-size: var(--font-size-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-eyebrow);
  color: var(--color-ink-1);
  margin-bottom: var(--spacing-3);
}

.ft-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ft-footer__link {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-meta);
  color: var(--color-ink-2);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.ft-footer__link:hover {
  color: var(--color-brand-red);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ft-footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ft-footer__fine-print {
  width: 100%;
  max-width: var(--layout-max-page);
  margin: 0 auto;
  padding: var(--spacing-3) var(--spacing-6) var(--spacing-5);
  border-top: 1px solid var(--color-rule-hair);
}

.ft-footer__legal {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  letter-spacing: 0.04em;
  color: var(--color-ink-4);
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .ft-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-5);
  }
}

/* source: chrome-shell.css */
/**
 * Page-shell rule for the site chrome.
 *
 * This is the `.ft-site-main` wrapper that sits between the masthead and the
 * footer on every route. It lived inline in the Astro Base.astro layout
 * (<style is:global>); it now lives here so the shared, unscoped chrome.css
 * build can carry it to BOTH the live Drupal theme (tftng_ai) and the Astro
 * pages — one source, so the two can never drift.
 */
.ft-site-main {
  width: 100%;
  max-width: var(--layout-max-page);
  margin: 0 auto;
  padding: 0 var(--spacing-6) var(--spacing-7);
  min-height: 50vh;
}