/* ==========================================================================
   Engage — NAD Adventist Education quarterly newsletter
   Shared stylesheet. Built to match the Figma "Fall 2026" file at 1052px.
   File: Engage · https://www.figma.com/design/2EOd3dVcgYM0QMAqA5vxs0/Engage
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-pro-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-pro-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/source-sans-pro-latin-900-normal.woff2") format("woff2");
}
@font-face {
  font-family: "League Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/league-gothic-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/open-sans-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/open-sans-latin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/open-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Baskervville";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/baskervville-latin-400-italic.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root {
  /* Layout */
  --page-width: 1052px;     /* Figma artboard: the narrowest the page holds */
  --content-width: 972px;
  --page-margin: calc((var(--page-width) - var(--content-width)) / 2);  /* 40px */

  /* Article grid — 200 + 20 + 532 + 20 + 200 = 972 */
  --rail-width: 200px;      /* callout rail (left) and author rail (right) */
  --copy-width: 532px;
  --rail-gap: 20px;

  /* Neutrals */
  --ink: #000000;
  --paper: #ffffff;
  --band: #4b4b4b;          /* hero / masthead band */
  --rule-card: #cbcbcb;     /* hairlines above + below the card row */
  --rule-aside: #a3a3a3;    /* rule at the left of the article column */
  --rule-nav: #8d8d8d;      /* nav-bar dividers */
  --nav-text: #8d8d8d;
  --btn-border: #474747;
  --copyright: #c3c3c3;
  --placeholder: #d9d9d9;
  --panel: #f0f0f0;            /* the author panel on a phone */

  /* Brand */
  --engage-blue: #4bb8e9;

  /* Section accents (Figma variables) */
  --accent-brown: #998675;        /* welcome  */
  --accent-light-green: #c7d82f;      /* create, as fill */
  --accent-light-green-text: #8f9c1d;  /* create, as type — 3.03:1 on white */
  --accent-green-text: #498345;        /* alc, as type — 4.55:1 on white */
  --accent-purple: #a17bb5;       /* discover */
  --accent-dark-green: #5d8080;   /* encounter*/
  --accent-orange: #f28e14;       /* challenge*/
  --accent-green: #9ac897;        /* alc      */
  --accent-blue: #00bff3;      /* snippets */

  /* All Things New — the initiative's own palette, this feature only */
  --atn-navy: #003a60;
  --atn-gold: #c3922e;
  --feature-arrow: #e0d3b1;    /* home feature_lead arrows, on the hero */

  /* Entrance motion — slower and softer than the 220ms interaction states */
  --reveal-duration: 700ms;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --reveal-stagger: 140ms;

  /* Interaction */
  --state-blue: #00bff3;    /* Figma `blue` variable — nav active, button hover */
  --state-duration: 220ms;
  --state-ease: ease-in-out;
}

/* Respect the OS "reduce motion" setting — states still change, instantly. */
@media (prefers-reduced-motion: reduce) {
  :root { --state-duration: 1ms; }
}

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

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Sans Pro", system-ui, sans-serif;
  font-weight: 400;
}

p { margin: 0; }

h1, h2, h3, h4 { margin: 0; font-size: inherit; font-weight: inherit; }

a { color: inherit; text-decoration: none; }
button { margin: 0; padding: 0; border: 0; background: none; color: inherit;
         font: inherit; letter-spacing: inherit; cursor: pointer; }

img, svg { display: block; }

/* The page itself spans the viewport, so every band — hero, card row, footer,
   article hero — bleeds edge to edge. Responsive breakpoints come later, so a
   min-width holds the desktop composition together below 1052px.

   It is also a full-height flex column: bands keep their designed heights and
   the footer takes up whatever viewport height is left over, so on a tall
   monitor the footer locks to the bottom of the screen. */
.page {
  width: 100%;
  min-width: var(--page-width);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page > * { flex: 0 0 auto; }

/* A centred stage the width of the Figma artboard. Bands are full-bleed; their
   contents are positioned against this, so every frame coordinate still holds.
   Anything on the content column is offset by --page-margin rather than a
   literal number, so narrowing the margins is a one-token change. */
.stage {
  width: var(--page-width);
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.container {
  width: var(--content-width);
  margin: 0 auto;
}

/* ==========================================================================
   HOME — masthead
   ========================================================================== */
.home-masthead {
  position: relative;
  height: 158px;
  background: var(--paper);
  z-index: 2;
}

/* "SUMMER 2026 / PAST ISSUES" */
.issue-block {
  position: absolute;
  left: var(--page-margin);
  top: 15px;
  width: 113px;
}

.issue-date {
  font-size: 18px;
  line-height: 18px;
  height: 23px;
  text-transform: uppercase;
}

.issue-archive {
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--engage-blue);
}

/* past-issues component. The 93px width is reserved in both states, so the
   hover arrow appears in space already held open — no reflow. */
.past-issues {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 93px;
}

.past-issues__arrow {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
  opacity: 0;
  transition: opacity var(--state-duration) var(--state-ease);
}

@media (hover: hover) {
  .past-issues:hover .past-issues__arrow,
  .past-issues:focus-visible .past-issues__arrow { opacity: 1; }
}
.past-issues:focus-visible .past-issues__arrow { opacity: 1; }

/* The wordmark deliberately overhangs the band below it. */
.home-wordmark {
  position: absolute;
  left: 50%;
  top: 51px;
  width: 499.6px;
  height: 144.6px;
  transform: translateX(-50%);
}
.home-wordmark img { width: 100%; height: 100%; }

.masthead-tagline {
  position: absolute;
  left: calc(var(--page-margin) + 701px);
  top: 104px;
  height: 54px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid var(--ink);
}
.masthead-tagline p {
  width: 198px;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
}

/* ---------- Hero band ---------- */
/* Full-bleed but always 508px tall, as designed. The artwork fills the width
   and crops from the centre rather than the band getting taller. */
.home-hero {
  width: 100%;
  height: 508px;
  background: var(--band);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Neutral stand-in until artwork is dropped in. */
.hero-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.28);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Feature leads ----------
   `feature_lead` (34:1042) — the two features called out over the hero. Right
   aligned type, a hairline, then the arrow; the block sits on the hero's own
   scrim, which is baked into the artwork. */
/* The stage overlays the artwork rather than following it in flow. */
.home-hero .stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.hero-features {
  position: absolute;
  left: calc(var(--page-margin) + 485px);   /* 525 on the 1052 artboard */
  top: 289px;                                /* 447 from the top of the page */
  z-index: 1;
}

.hero-features__label {
  width: 316px;               /* right-aligned to the titles below it */
  font-family: "Source Sans Pro", system-ui, sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 4.48px;
  text-align: right;        /* ranged right on the titles, not centred on them */
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}

.feature-lead {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;           /* 463 → 475 */
}
.feature-lead + .feature-lead { margin-top: 0; }

.feature-lead__title {
  width: 316px;
  flex: none;
  padding: 10px 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 39px;
  letter-spacing: -2.64px;
  text-align: right;
  color: var(--paper);
}
.feature-lead__title em { font-style: italic; }

.feature-lead__rule {
  align-self: stretch;
  width: 0;
  flex: none;
  border-left: 1px solid var(--paper);
}

.feature-lead__arrow {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: var(--feature-arrow);
  transition: background-color var(--state-duration) var(--state-ease);
}
.feature-lead__arrow svg { width: 24px; height: 24px; fill: var(--ink); }

/* Same language as the section cards below: the arrow is the affordance. */
@media (hover: hover) {
  .feature-lead:hover .feature-lead__arrow { background: var(--paper); }
}
.feature-lead:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
.feature-lead:focus-visible .feature-lead__arrow { background: var(--paper); }

/* ==========================================================================
   HOME — section card row
   ========================================================================== */
.card-row {
  display: flex;
  justify-content: center;
  background: var(--ink);
  border-top: 1px solid var(--rule-card);
  border-bottom: 1px solid var(--rule-card);
}

.section-card {
  width: 139px;
  height: 186px;
  padding: 17px 10px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition:
    background-color var(--state-duration) var(--state-ease),
    color var(--state-duration) var(--state-ease);
}

.section-card__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.section-card__title {
  width: 100%;
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 18px;
  height: 20px;
  text-align: center;
}

.section-card__rule {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--paper);
  margin: 0;
  transition: border-color var(--state-duration) var(--state-ease);
}

.section-card__desc {
  width: 100%;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
}

.section-card__arrow {
  width: 40px;
  height: 40px;
  border-radius: 30px;
  background: var(--section-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.section-card__arrow svg {
  width: 24px;
  height: 24px;
  fill: var(--paper);
}

/* ==========================================================================
   Section accents — declared once, in one place
   ==========================================================================
   `--section-accent` is set either on a home card (`.section-card--x`) or on a
   whole article page (`.section-x` on `.page`). It drives the card arrow, the
   card's hover divider, and the section-tag fill — so a section's colour is
   stated once and every use follows. */
/* Two tokens, not one. `--section-accent` is the fill — the section tag, the
   card arrows, the break bars — where the colour sits behind white type and
   any of these greens is fine. `--section-accent-text` is the colour used AS
   type, where a light accent fails against white. It defaults to the accent,
   so a section only declares it when the fill colour cannot carry text.
   create: #c7d82f is 1.58:1 against white; #8f9c1d is 3.03:1. */
.page, .section-card { --section-accent-text: var(--section-accent); }

.section-welcome,   .section-card--welcome   { --section-accent: var(--accent-brown); }
.section-create,    .section-card--create    { --section-accent: var(--accent-light-green); }
.section-discover,  .section-card--discover  { --section-accent: var(--accent-purple); }
.section-encounter, .section-card--encounter { --section-accent: var(--accent-dark-green); }
.section-challenge, .section-card--challenge { --section-accent: var(--accent-orange); }
.section-alc,       .section-card--alc       { --section-accent: var(--accent-green); }
.section-snippets,  .section-card--snippets  { --section-accent: var(--accent-blue); }

.section-create,    .section-card--create    { --section-accent-text: var(--accent-light-green-text); }
.section-alc,       .section-card--alc       { --section-accent-text: var(--accent-green-text); }

/* Hover — `home-cards / Property 1=Variant2`: card reverses to white, type
   goes black, the divider picks up the section accent, arrow is unchanged. */
/* Keyboard focus gets the same reversed state, plus the browser's focus ring. */
.section-card:focus-visible {
  background: var(--paper);
  color: var(--ink);
}
.section-card:focus-visible .section-card__rule { border-top-color: var(--section-accent); }

@media (hover: hover) {
  .section-card:hover {
    background: var(--paper);
    color: var(--ink);
  }
  .section-card:hover .section-card__rule { border-top-color: var(--section-accent); }
}

/* ==========================================================================
   Footer (shared)
   ========================================================================== */
/* Grows into any viewport height the bands above don't use, so the footer
   locks to the bottom of the screen on a tall monitor. Its contents stay
   anchored to the bottom edge (justify-content: flex-end), matching the
   extended footer in the Figma frame. Never shorter than the designed 129px. */
.site-footer {
  flex: 1 0 auto;
  min-height: 129px;
  padding: 19px 10px;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.site-footer__inner {
  width: var(--content-width);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.site-footer__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.newsletter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--btn-border);
  border-radius: 21px;
  background: transparent;
  color: var(--nav-text);
  font-family: inherit;
  font-size: 18px;
  line-height: 16px;
  letter-spacing: -0.9px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--state-duration) var(--state-ease),
    color var(--state-duration) var(--state-ease);
}

/* Hover — `newsletter-button / Property 1=Variant2` */
.newsletter-button:focus-visible {
  border-color: var(--state-blue);
  color: var(--state-blue);
}
@media (hover: hover) {
  .newsletter-button:hover {
    border-color: var(--state-blue);
    color: var(--state-blue);
  }
}

.site-footer__copyright {
  width: 420px;
  height: 20px;
  font-size: 12px;
  line-height: 18px;
  color: var(--copyright);
}

.site-footer__logo {
  width: 241.73px;
  height: 66.84px;
  flex: none;
}
.site-footer__logo img { width: 100%; height: 100%; }

/* ==========================================================================
   ARTICLE PAGES — masthead
   ========================================================================== */
.article-masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 66px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}

/* 78px tall so the wordmark overhangs the 66px bar, as designed. */
.article-masthead__inner {
  width: var(--content-width);
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.article-masthead__nav {
  width: 511px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: 12px;
}

/* The drawer toggle only exists below 1052 — see the RESPONSIVE section. */
.nav-toggle { display: none; }

.nav-bar {
  height: 32px;
  display: flex;
  align-items: center;
}

.nav-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 18px;
  line-height: 16px;
  letter-spacing: -0.9px;
  text-align: center;
  color: var(--nav-text);
  white-space: nowrap;
  transition: color var(--state-duration) var(--state-ease);
}

/* `nav-button / Property 1=hover` */
.nav-bar__link:focus-visible { color: var(--ink); }
@media (hover: hover) {
  .nav-bar__link:hover { color: var(--ink); }
}

/* `nav-button / Property 1=active` — the section the reader is currently on.
   Listed last so active wins over hover: the current section keeps its blue
   when the pointer passes over it. */
.nav-bar__link[aria-current],
.nav-bar__link[aria-current]:hover,
.nav-bar__link[aria-current]:focus-visible { color: var(--state-blue); }

/* ---------- Feature drop-down ----------
   `feature` is the one nav item that fans out: an issue can carry more than
   one feature, so the button opens a small panel of them rather than linking
   straight through. Hover and focus-within do the opening in CSS alone, so it
   works with JavaScript off; nav.js only adds Escape, outside-click and the
   tap toggle that touch devices need. */
.nav-bar__item {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}

.nav-bar__trigger {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-bar__caret {
  width: 16px;
  height: 16px;
  margin-left: -2px;
  flex: none;
  fill: currentColor;
  transition: transform var(--state-duration) var(--state-ease);
}

.nav-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);    /* clears the 66px masthead rule */
  z-index: 6;
  min-width: 264px;
  margin: 0;                /* the UA's list margin would drop it too far */
  padding: 6px 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--state-duration) var(--state-ease),
              transform var(--state-duration) var(--state-ease),
              visibility var(--state-duration) var(--state-ease);
}

.nav-menu__link {
  display: block;
  padding: 8px 14px;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.9px;
  color: var(--nav-text);
  transition: color var(--state-duration) var(--state-ease);
}
.nav-menu__link em { font-style: italic; }

@media (hover: hover) {
  .nav-menu__link:hover { color: var(--ink); }
}
.nav-menu__link:focus-visible { color: var(--ink); }

/* The feature that is not written yet: shown so the shape of the menu is
   right, but not a link. Swap the span for an anchor when the page lands. */
.nav-menu__link--pending {
  color: var(--copyright);
  cursor: default;
}

.nav-menu__link[aria-current="page"] { color: var(--state-blue); }

/* Open — by pointer, by keyboard, or by the tap toggle in nav.js. */
.nav-bar__item--menu.is-open .nav-menu,
.nav-bar__item--menu:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-bar__item--menu.is-open .nav-bar__caret,
.nav-bar__item--menu:focus-within .nav-bar__caret { transform: rotate(180deg); }

@media (hover: hover) {
  .nav-bar__item--menu:hover .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-bar__item--menu:hover .nav-bar__caret { transform: rotate(180deg); }
}

.nav-bar__divider {
  width: 0;
  height: 100%;
  border-left: 1px solid var(--rule-nav);
  flex: none;
}

/* Wordmark + issue lockup */
.article-masthead__lockup {
  position: relative;
  width: 311px;
  height: 78px;
  flex: none;
}

.article-masthead__wordmark {
  position: absolute;
  left: 0;
  top: 17px;
  width: 210px;
  height: 61px;
}
.article-masthead__wordmark img { width: 100%; height: 100%; }

.article-masthead__issue {
  position: absolute;
  left: 195px;
  top: 45px;
  height: 21px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-left: 1px solid var(--ink);
  font-size: 18px;
  line-height: 18px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   ARTICLE PAGES — hero + body
   ========================================================================== */
.article-hero {
  position: relative;
  height: 320px;
  background: var(--band);
  overflow: hidden;
}

/* ---------- Header artwork ----------
   The title band carries a photograph on the article pages. The type is white
   Light at 80px, so the picture has to sit back: it is laid on black and made
   partly transparent rather than covered with a scrim, which keeps the band's
   tone consistent from page to page however light or dark the photograph is.

   `--hero-veil` is set per section below, tuned so the brightest tenth of the
   area the title covers still gives white type at least 4:1. Raise it to let
   more of a picture through, lower it if a title is fighting the image. */
.article-hero__media {
  position: absolute;
  inset: 0;
  background: var(--ink);
}
.article-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--hero-veil, 0.65);
}
/* The titles are left-aligned and sit low in the band, so the scrim is heaviest
   where the type is and clears to nothing on the right. That covers bright
   spots a flat veil cannot reach — Encounter's gold wordmark, ALC's laptop —
   while leaving the open side of each photograph brighter than a uniform
   darkening would. */
.article-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0) 100%),
    /* Stops are measured from the page centre, not the viewport edge, so the
       scrim keeps pace with the content column as the browser widens instead
       of sliding out from under the type. */
    linear-gradient(to right,
      rgba(0,0,0,0.55) 0,
      rgba(0,0,0,0.34) calc(50% + 60px),
      rgba(0,0,0,0.14) calc(50% + 340px),
      rgba(0,0,0,0)    calc(50% + 500px));
}
/* The title sits in .stage, which is positioned, so it paints over the art. */
.article-hero .stage { z-index: 1; }

/* With the scrim carrying the type area, the veil only has to tame each
   picture's overall brightness — so more of every photograph survives. */
.section-welcome   { --hero-veil: 0.55; }   /* auditorium, bright screen    */
.section-create    { --hero-veil: 0.75; }   /* music graphic, mid tone      */
.section-discover  { --hero-veil: 0.65; }   /* ISTE booth, bright banner    */
.section-encounter { --hero-veil: 0.85; }   /* already dark — barely veiled */
.section-challenge { --hero-veil: 0.70; }   /* classroom, bright faces      */
.section-alc       { --hero-veil: 0.65; }   /* laptop, bright desk          */

/* Runs the full 972px content column. A single-line title is just text in
   the h1; a long one splits into a `__main` line and a smaller `__sub` line. */
.article-hero__title {
  position: absolute;
  left: var(--page-margin);
  top: 74px;          /* 140px from the top of the page */
  width: var(--content-width);
  padding: 10px 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-end;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 80px;
  line-height: 72px;
  letter-spacing: -4.8px;
  color: var(--paper);
}
.article-hero__title span { width: 100%; }

/* The second line of a split title */
.article-hero__title-sub {
  font-size: 50px;
  letter-spacing: -3px;
}

/* The body has no fixed height: it is as tall as its longest column plus the
   trailing space before the footer. Article length can now vary freely. */
.article-body {
  padding-bottom: 140px;
}

/* ---------- The three-column grid ----------
   200 + 20 + 532 + 20 + 200 = 972, exactly the content column. Each column
   starts at the top of the body and carries its own designed offset, so the
   relationships from the frame hold while the page height follows the copy. */
.article-grid {
  position: relative;
  width: var(--content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--rail-width) var(--copy-width) var(--rail-width);
  column-gap: var(--rail-gap);
  align-items: start;
}

/* Left rail — callouts. 730px from the top of the page. */
.article-rail { margin-top: 344px; }

/* ---------- section-tag ----------
   Hangs off the bottom-left of the dark band, filled with the page's own
   `--section-accent` (set by the `.section-*` class on `.page`). It is
   anchored to the band edge rather than to the content flow, so it is the one
   absolutely positioned thing left in the body. */
.section-tag {
  position: absolute;
  left: 10px;         /* 50px from the left of the page */
  top: 0;             /* 386px from the top of the page */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 19px;
  border-radius: 0 0 0 20px;
  background: var(--section-accent);
  color: var(--paper);
  font-size: 20px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

/* ---------- callout ----------
   Carries no position of its own — it fills whatever column it is dropped
   into, so it can move to the right rail or between paragraphs later. */
.callout {
  width: 100%;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.callout p { width: 100%; }

/* `callout / Property 1=italic` */
.callout--italic {
  font-family: "Baskervville", "Baskerville", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: normal;
  letter-spacing: -0.52px;
}

/* `callout / Property 1=block` */
.callout--block {
  border-top: 4px solid var(--ink);
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 34px;
  letter-spacing: -0.36px;
  text-transform: uppercase;
}

/* Right rail — rises 45px into the dark band, as in the design. */
.author-card {
  position: relative;
  z-index: 3;
  margin-top: -45px;  /* 341px from the top of the page */
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.author-card__portrait {
  width: 100%;
  height: 240px;
  background: var(--placeholder);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8f8f8f;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.author-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.author-card__name {
  font-size: 16px;
  line-height: 17px;
  letter-spacing: -0.48px;
}

.author-card__title {
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

.author-card__bio {
  font-size: 12px;
  line-height: 17px;
  letter-spacing: -0.36px;
}
/* A bio can run to more than one paragraph (welcome). Spacing is tighter than
   body copy so the block still reads as one caption. */
.author-card__bio + .author-card__bio { margin-top: 9px; }

/* Centre column. Width comes from the grid; the rule runs the height of the
   copy, so it grows with the article. */
.article-copy {
  margin-top: 83px;   /* 469px from the top of the page */
  padding: 10px;
  border-left: 1px solid var(--rule-aside);
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.32px;
}

.article-copy > p { margin-bottom: 12px; }
.article-copy > :last-child { margin-bottom: 0; }

/* "Body 2" — the opening paragraph of an article */
.article-copy__lede {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.4px;
}

/* ==========================================================================
   SNIPPETS — a dark page with a card grid, not an article
   ========================================================================== */
.page--dark { background: var(--ink); }

/* ---------- Intro band ----------
   Full-bleed with a white hairline under it. The title + copy lockup is 862px
   (184 + 5 + 673) centred on the viewport — deliberately not the 972 column. */
.snippets-intro {
  margin-top: 26px;   /* 92px from the top of the page */
  height: 124px;
  display: flex;
  gap: 5px;
  align-items: flex-start;
  justify-content: center;
  border-bottom: 1px solid var(--paper);
}

.snippets-intro__title {
  width: 184px;
  height: 56px;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 50px;
  line-height: 72px;
  letter-spacing: -3px;
  color: var(--paper);
}

.snippets-intro__lockup {
  width: 673px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 0 10px 15px;
  border-left: 1px solid #b7b7b7;
}

.snippets-intro__body {
  width: 100%;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: -0.28px;
  color: var(--paper);
}

/* ---------- launch-button ---------- */
.launch-button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 9px;
  border-radius: 30px;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 34px;
  letter-spacing: -0.36px;
  color: var(--ink);
  white-space: nowrap;
}
.launch-button--reverse { color: var(--paper); }

.launch-icon {
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: var(--state-blue);
}
.launch-icon svg {
  width: 17px;
  height: 17px;
  fill: var(--paper);
  transform: rotate(-45deg);   /* arrow_forward → the launch diagonal */
}

/* ---------- Card grid ---------- */
.snippet-grid {
  width: var(--content-width);
  margin: 26px auto 0;   /* 242px from the top of the page */
  padding-bottom: 75px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 17px;
}

/* ---------- snippet-cards ---------- */
.snippet-card {
  display: flex;
  align-items: center;
  padding: 12px;
  position: relative;
  color: var(--paper);
}

/* full-width variants sit directly on the page — no panel behind them */
.snippet-card--full-right,
.snippet-card--full-left {
  width: var(--content-width);
  border-radius: 8px;
}
.snippet-card--full-left { gap: 21px; }

/* half-width variants are panels */
.snippet-card--half-left,
.snippet-card--half-right {
  border-radius: 14px;
  background: #2c2c2c;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.5);
}
.snippet-card--half-left  { width: 471px; height: 442px; }
.snippet-card--half-right { width: 476px; }

.snippet-card__text {
  flex: 1 0 0;
  min-width: 0;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
/* only the half-left variant carries the rule between image and copy */
.snippet-card--half-left .snippet-card__text { border-left: 1px solid var(--paper); }

.snippet-card__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.snippet-card__title {
  width: 100%;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.56px;
}
/* "/take note/" is Parry SemiBold in Figma. Parry is a commercial typeface;
   Georgia is the chosen substitute rather than a placeholder — confirmed
   31 Aug — so the stack below is the final one. */
.snippet-card__title--display {
  font-family: "Parry", Georgia, "Times New Roman", serif;
  font-weight: 600;
}

.snippet-card__body {
  width: 100%;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: -0.28px;
}
.snippet-card__body p + p { margin-top: 0; }

.snippet-card__links {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.snippet-card__media {
  flex: none;
  position: relative;
  overflow: hidden;
}
.snippet-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per-card media boxes, straight from the frame */
.snippet-card__media--take-note     { width: 437px; height: 459px; }
.snippet-card__media--journey       { width: 186px; height: 208px; }
.snippet-card__media--journey img   { object-position: left center; }
.snippet-card__media--edtech {
  width: 236px;
  height: 166px;
  align-self: flex-start;
  margin-top: 80px;   /* the panel sits high in the card, not centred */
}
.snippet-card__media--edtech img { object-position: center bottom; }
.snippet-card__media--finder        { width: 462px; height: 373px; }

/* ==========================================================================
   sel_card — a download card for the article rail
   ==========================================================================
   Replaces the callout on pages that link to a resource. The 24px icon slot is
   held open in both states, so the hover icon appears without any reflow. */
.sel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d1d1;
  border-radius: 12px;
  color: var(--ink);
  transition: border-color var(--state-duration) var(--state-ease);
}

.sel-card__cover {
  width: 100%;
  aspect-ratio: 198 / 259;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow var(--state-duration) var(--state-ease);
}
.sel-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sel-card__label {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sel-card__text {
  flex: 1 0 0;
  min-width: 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.28px;
  text-transform: uppercase;
}
.sel-card__text strong { font-weight: 700; }

/* Icon slot — reserved in both states */
.sel-card__slot {
  width: 24.042px;
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.sel-card__slot .launch-icon {
  opacity: 0;
  transition: opacity var(--state-duration) var(--state-ease);
}

/* Hover — `sel_card / Property 1=Variant2`: border goes blue, the cover lifts,
   the launch icon appears. */
.sel-card:focus-visible { border-color: var(--state-blue); }
.sel-card:focus-visible .sel-card__cover { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.sel-card:focus-visible .sel-card__slot .launch-icon { opacity: 1; }

@media (hover: hover) {
  .sel-card:hover { border-color: var(--state-blue); }
  .sel-card:hover .sel-card__cover { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
  .sel-card:hover .sel-card__slot .launch-icon { opacity: 1; }
}

/* ---------- Article subhead ----------
   Set in the page's own `--section-accent`, so a subhead is brown on welcome,
   orange on challenge, and so on — same single source as the section tag. */
.article-copy h2 {
  margin-top: 34px;
  margin-bottom: 12px;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 24px;
  letter-spacing: -0.54px;
  text-transform: uppercase;
  color: var(--section-accent-text);
}
/* Bold runs carried over from the Word manuscript — Open Sans Bold. */
.article-copy strong { font-weight: 700; }
.article-copy em { font-style: italic; }

/* ---------- Lists ----------
   No list style in the Figma frame yet; derived from the body scale. The
   marker takes the page accent, the same as the subhead. */
.article-copy ul {
  margin: 0 0 12px;
  padding-left: 22px;
}
.article-copy li { margin-bottom: 6px; }
.article-copy li:last-child { margin-bottom: 0; }
.article-copy li::marker { color: var(--section-accent-text); }

/* ---------- Byline ----------
   Closes an article, set in italic as in the manuscript. */
.article-copy__byline {
  margin-top: 22px;
  font-style: italic;
}

/* ---------- Inset figure ----------
   An image sitting in the reading column. These are dense promotional sheets
   and product screens, so at 512px the detail is lost — the whole point of the
   caption is that it invites the reader to open the full size. The click
   target is the image itself; `assets/js/slideshow.js` handles the modal. */
.article-figure {
  margin: 26px 0;
}

.article-figure__link {
  display: block;
  position: relative;
  border: 1px solid var(--rule-card);
  overflow: hidden;
  transition: border-color var(--state-duration) var(--state-ease),
              box-shadow var(--state-duration) var(--state-ease);
}
.article-figure__link img { display: block; width: 100%; height: auto; }

/* The zoom affordance, in the same language as the sel_card launch icon:
   held open in the layout, revealed on hover. */
.article-figure__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--state-duration) var(--state-ease);
}
.article-figure__zoom svg { width: 20px; height: 20px; fill: var(--ink); }

@media (hover: hover) {
  .article-figure__link:hover { border-color: var(--state-blue); box-shadow: 0 4px 4px rgba(0,0,0,0.25); }
  .article-figure__link:hover .article-figure__zoom { opacity: 1; }
}
.article-figure__link:focus-visible { border-color: var(--state-blue); }
.article-figure__link:focus-visible .article-figure__zoom { opacity: 1; }

.article-figure figcaption {
  margin-top: 8px;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.26px;
  color: #5c5c5c;
}

/* ---------- Source note ----------
   Where an article cites where its material came from (create). Set smaller
   than body copy and separated by a rule, so it reads as apparatus rather
   than as a last paragraph. */
.article-copy__sources {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-card);
  font-size: 13px;
  line-height: 19px;
  letter-spacing: -0.26px;
  color: #5c5c5c;
}
/* A second credit line sits under the first — one rule for the block, not one
   per paragraph. */
.article-copy__sources + .article-copy__sources {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}
.article-copy__sources a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--rule-nav);
  transition: color var(--state-duration) var(--state-ease);
}
@media (hover: hover) { .article-copy__sources a:hover { color: var(--ink); } }
.article-copy__sources a:focus-visible { color: var(--ink); }

/* ==========================================================================
   Testimonies — a run of first-hand accounts inside an article
   ==========================================================================
   Each entry opens with the `feature-break` bar (70 × 8 in the page accent,
   the same device the feature frame uses between school stories) and closes
   with an attribution. The manuscript's "__________" separators translate
   directly to the bar. */
.testimony { margin-top: 34px; }

.testimony::before {
  content: "";
  display: block;
  width: 70px;
  height: 8px;
  margin-bottom: 22px;
  background: var(--section-accent);
}

.testimony > p { margin-bottom: 12px; }
.testimony > p:last-child { margin-bottom: 0; }

/* Derived — a title inside a single testimony, below the article subhead. */
.testimony__title {
  margin-bottom: 12px;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.4px;
}

.testimony__attribution {
  margin-top: 16px;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.28px;
  text-transform: uppercase;
  color: var(--section-accent-text);
}
.testimony__attribution span {
  display: block;
  font-weight: 500;
  text-transform: none;
  color: var(--ink);
}

/* ---------- Rail stack ----------
   The rail can hold a callout plus a run of cards. */
.article-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Cover shapes for the rail cards, straight from each component */
.sel-card__cover--video { aspect-ratio: 178 / 100; }
.sel-card__cover--site  { aspect-ratio: 178 / 215; }
.sel-card__cover--site img { object-position: left center; }

/* Numbered lists — same treatment as the bulleted list. */
.article-copy ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.article-copy ol > li { margin-bottom: 12px; }
.article-copy ol > li:last-child { margin-bottom: 0; }
.article-copy ol > li::marker {
  color: var(--section-accent-text);
  font-weight: 700;
}
.article-copy li > p { margin-top: 12px; }

/* ==========================================================================
   Article note — a page-specific addendum below the article
   ==========================================================================
   The rule runs edge to edge; the copy continues the article's reading column
   so the measure stays comfortable. Used on alc only so far. */
.article-note {
  border-top: 1px solid var(--ink);
  padding-bottom: 60px;
}

.article-note__inner {
  width: var(--content-width);
  margin: 0 auto;
  padding-top: 34px;
}

.article-note p {
  /* Sits on the copy column: rail + gap = 220px in from the container edge. */
  margin-left: calc(var(--rail-width) + var(--rail-gap));
  width: var(--copy-width);
  padding: 0 10px;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.32px;
}

/* The accent is light against white, so the link is underlined as well as
   coloured — remove the text-decoration line if you want colour alone. */
.article-note a {
  color: var(--section-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   FEATURE — School Highlights
   ==========================================================================
   A single wide story column with a card rail on the left. The section tag
   sits on a full-bleed rule rather than a dark band, and the page carries two
   fixed colours rather than a single section accent: brown for the school
   names and the tag, orange for the break bars and story subtitles. */
.section-feature {
  --section-accent: var(--accent-brown);
  --feature-rule: var(--accent-orange);
}

.feature-title {
  width: var(--content-width);
  margin: 0 auto;
  padding: 10px 10px 20px;
  display: flex;
  align-items: flex-end;
  height: 213px;                /* 66 → 279 */
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 120px;
  line-height: 95px;
  letter-spacing: -7.2px;
}

/* Full-bleed rule at y296, with the section tag hanging off it. */
.feature-rule {
  margin-top: 17px;             /* 279 → 296 */
  border-top: 1px solid var(--ink);
}
.feature-rule__inner {
  position: relative;
  width: var(--content-width);
  height: 0;
  margin: 0 auto;
}
.feature-rule .section-tag { top: 0; }

/* ---------- Body: 200px card rail + 662px story column ---------- */
.feature-body { padding: 53px 0 140px; }   /* rule (296) → first story (349) */

/* Story column only — the launch cards hang into the left gutter from inside
   their own story, so they stay aligned however long the copy runs. */
.feature-stories {
  width: 662px;
  margin-left: calc((100% - var(--content-width)) / 2 + var(--rail-width));
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* ---------- One story ---------- */
.feature-story {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-story__break {
  width: 70px;
  height: 8px;
  background: var(--feature-rule);
}

.feature-story__head {
  width: 511px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.feature-story__school {
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: normal;
  letter-spacing: -0.54px;
  text-transform: uppercase;
  color: var(--section-accent-text);
}

.feature-story__subtitle {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 18px;
  line-height: normal;
  letter-spacing: -0.36px;
  color: var(--feature-rule);
}

.feature-story__body {
  position: relative;
  padding-left: 20px;
  display: flex;
}

/* Launch card — sits in the left gutter, top-aligned with the body copy. */
.feature-story__card {
  position: absolute;
  left: -200px;
  top: 0;
  width: var(--rail-width);
}

.feature-story__copy {
  flex: 1 0 0;
  min-width: 0;
  padding: 10px;
  border-left: 1px solid var(--rule-aside);
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.32px;
}
.feature-story__copy > p { margin-bottom: 12px; }
.feature-story__copy > p:last-child { margin-bottom: 0; }
/* first-of-type, not first-child — a floated figure can precede the copy */
.feature-story__copy > p:first-of-type {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.4px;
}

/* Byline: name at body size, affiliation smaller and uppercase. */
.feature-story__byline span {
  font-size: 13px;
  text-transform: uppercase;
}

/* A story whose opening paragraphs run beside an image. The image floats into
   the right margin — aligned to the 972 content column rather than the story
   one — so the copy narrows beside it and reflows to full width underneath. */
.feature-story__aside {
  float: right;
  width: 222px;
  margin: -4px -120px 22px 11px;   /* right edge lands on the content column */
}
.feature-story__aside img { width: 100%; height: auto; border-radius: 4px; }

/* ==========================================================================
   FEATURE — All Things New
   ==========================================================================
   The second feature carries the initiative's own identity rather than the
   newsletter's: a navy hero with the campaign artwork, League Gothic pillars
   in `--atn-navy`, and a Baskervville gold scripture line. Structurally it is
   simpler than the School Highlights feature — one reading column on the
   article grid's copy position, with full-bleed bands breaking out of it. */
.atn {
  --section-accent: var(--accent-brown);   /* the tag stays a section tag */
}
/* The hero already ends where the rule belongs, so it does not need the 17px
   drop the School Highlights title block leaves under it. */
.atn .feature-rule { margin-top: -2px; }

/* ---------- Hero ----------
   Navy full-bleed; the artwork sits on the 972 column, top-aligned and
   cropped by the band, exactly as the frame scales it. */
.atn-hero {
  position: relative;
  height: 436px;
  background: var(--atn-navy);
  overflow: hidden;
}
.atn-hero__art {
  width: var(--content-width);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.atn-hero__art img {
  display: block;
  width: 100%;
  height: auto;
}
/* "SCHOOLS ADVANCE" sits above the wordmark baked into the artwork. */
.atn-hero__kicker {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 339px;
  height: 137px;
  margin-left: calc(var(--content-width) / -2 + 122px);
  padding: 10px 10px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 24px;
  letter-spacing: -0.54px;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
}

/* ---------- Reading column ----------
   The article grid's copy column, without the grid: same 532 at the same
   offset, same hairline, so this feature still reads as the same newsletter. */
.atn-body { padding-bottom: 0; }

.atn-copy {
  width: var(--copy-width);
  margin-left: calc((100% - var(--content-width)) / 2 + var(--rail-width) + var(--rail-gap));
  padding: 10px;
  border-left: 1px solid var(--rule-aside);
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.32px;
}
.atn-copy > p { margin-bottom: 12px; }
.atn-copy > p:last-child { margin-bottom: 0; }
.atn-copy--lede > p:first-child {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.4px;
}
.atn-copy em { font-style: italic; }
.atn-copy strong { font-weight: 700; }
/* Links in the prose only — the rail card is an <a> too, and it carries the
   sel_card treatment rather than an underline. */
.atn-copy p a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--state-duration) var(--state-ease);
}
@media (hover: hover) { .atn-copy p a:hover { color: var(--state-blue); } }
.atn-copy p a:focus-visible { color: var(--state-blue); }

.atn-copy__byline { font-style: italic; }

/* A copy block that carries a card in the left rail, the same device the
   School Highlights stories use. */
.atn-copy--carded { position: relative; }
.atn-copy--carded .sel-card {
  position: absolute;
  left: calc(var(--rail-width) * -1 - var(--rail-gap) - 1px);
  top: 0;
  width: var(--rail-width);
}

/* ---------- Pillars ----------
   Four of them, centred on the page rather than on the reading column. */
.atn-pillars {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.atn-pillars li {
  width: 143px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.atn-pillars__name {
  font-family: "League Gothic", "Oswald", "Arial Narrow", sans-serif;
  line-height: 34px;
  letter-spacing: -0.58px;
  font-size: 29px;
  color: var(--atn-navy);
  text-transform: uppercase;
  white-space: nowrap;     /* "SERVE LIKE JESUS" overhangs the 143 box rather
                              than wrapping, as the frame sets it */
}

/* Row one — artwork above the name. */
.atn-pillars--icons { gap: 36px; }
.atn-pillars--icons li { gap: 8px; }
.atn-pillars--icons img { display: block; width: 71px; height: 71px; }
.atn-pillars--icons .atn-pillars__name { padding: 0 10px; }

/* Row two — the verb set large over a rule, the rest beneath. */
.atn-pillars--words { gap: 21px; }
.atn-pillars--words .atn-pillars__verb {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-bottom: 1px solid #c8c8c8;
  font-family: "League Gothic", "Oswald", "Arial Narrow", sans-serif;
  font-size: 53px;
  line-height: 34px;
  letter-spacing: -1.06px;
  color: var(--atn-navy);
  text-transform: uppercase;
}
.atn-pillars--words .atn-pillars__name {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Scripture ----------
   Centred on the reading column, gold Baskervville over a small citation. */
.atn-quote {
  width: 473px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  text-align: center;
}
.atn-quote p {
  font-family: "Baskervville", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 29px;
  line-height: normal;
  letter-spacing: -0.58px;
  color: var(--atn-gold);
}
.atn-quote cite {
  font-style: normal;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: -0.36px;
  text-transform: uppercase;
}

/* ---------- Video band ----------
   Full-bleed black. The slot holds a 16:9 embed at the band's height; until
   the URL lands it shows the placeholder the frame specifies. */
.atn-video {
  height: 494px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.atn-video__slot {
  position: relative;
  height: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
}
.atn-video__slot iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.atn-video__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 72px;
  letter-spacing: -1.44px;
  color: var(--paper);
}

/* ---------- Closing call to action ----------
   The device image crosses the rule, so the rule is drawn behind it. */
.atn-cta {
  position: relative;
  padding-bottom: 83px;    /* clears the art, which overhangs the copy */
}
.atn-cta__rule {
  border-top: 1px solid var(--ink);
  margin-top: 74px;
}
.atn-cta__inner {
  position: relative;
  width: var(--content-width);
  margin: 0 auto;
  display: flow-root;      /* contain the text's margin so the art measures
                              from the rule, not from the first line */
}
.atn-cta__art {
  position: absolute;
  right: 0;
  top: -79px;              /* the device breaks the rule, as designed */
  width: 379px;
}
.atn-cta__art img { display: block; width: 100%; height: auto; }
.atn-cta__text {
  width: 366px;
  margin: 36px 0 0 221px;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 18px;
  line-height: normal;
  letter-spacing: -0.36px;
}
.atn-cta__text strong { font-weight: 700; }
.atn-cta .launch-button { margin: 22px 0 0 354px; }

/* ---------- Reveal on scroll ----------
   Only under `.js-reveal`, which `reveal.js` sets on <html> while the head is
   parsing — so with JavaScript off nothing is ever hidden. `is-visible` is
   added by the observer when the block scrolls into view.

   The pillars fade where the scripture also rises: the icons are a set being
   counted off, so they should arrive in place; the quote is a change of voice,
   so it earns the movement. */
.js-reveal .atn-pillars--icons > li {
  opacity: 0;
  transition: opacity var(--reveal-duration) var(--reveal-ease);
}
.atn-pillars--icons.is-visible > li { opacity: 1; }

/* One after another, left to right. */
.atn-pillars--icons > li:nth-child(2) { transition-delay: calc(var(--reveal-stagger) * 1); }
.atn-pillars--icons > li:nth-child(3) { transition-delay: calc(var(--reveal-stagger) * 2); }
.atn-pillars--icons > li:nth-child(4) { transition-delay: calc(var(--reveal-stagger) * 3); }

.js-reveal .atn-quote {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
}
.atn-quote.is-visible {
  opacity: 1;
  transform: none;
}

/* Motion turned down: never hide anything, and drop the stagger with it. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .atn-pillars--icons > li,
  .js-reveal .atn-quote {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .atn-pillars--icons > li { transition-delay: 0s; }
}

/* ==========================================================================
   Slide-show modal
   ========================================================================== */
body.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
}

.lightbox__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Square stage — the supplied photography is square. */
.lightbox__stage {
  position: relative;
  width: min(72vh, 720px);
  aspect-ratio: 1 / 1;
  background: #111;
}

.lightbox__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--slide-fade, 600ms) ease-in-out;
}
.lightbox__slide.is-active { opacity: 1; }

/* A single image rather than a show: the stage takes the picture's own shape
   instead of the square the slide-show photos share, so a tall sheet or a wide
   screenshot fills the space it deserves. */
.lightbox--fit .lightbox__stage {
  width: auto;
  height: auto;
  aspect-ratio: auto;
  max-width: 90vw;
  max-height: 82vh;
  background: none;
}
.lightbox--fit .lightbox__slide {
  position: static;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
}
.lightbox--fit .lightbox__nav { display: none; }
.lightbox--fit .lightbox__counter { display: none; }

.lightbox__caption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.28px;
  text-transform: uppercase;
  color: var(--paper);
}
.lightbox__counter { color: rgba(255, 255, 255, 0.55); }

/* Controls */
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  padding: 0;
  transition: opacity var(--state-duration) var(--state-ease);
}
.lightbox__close svg,
.lightbox__nav svg { fill: currentColor; }

.lightbox__close {
  top: -46px;
  right: -4px;
  width: 32px;
  height: 32px;
}
.lightbox__close svg { width: 26px; height: 26px; }

.lightbox__nav {
  top: calc(min(72vh, 720px) / 2 - 24px);
  width: 48px;
  height: 48px;
}
.lightbox__nav svg { width: 40px; height: 40px; }
.lightbox__nav--prev { left: -64px; }
.lightbox__nav--next { right: -64px; }

.lightbox__close:hover,
.lightbox__nav:hover { opacity: 0.6; }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid var(--state-blue); outline-offset: 4px; }

/* ==========================================================================
   RESPONSIVE
   ==========================================================================
   Everything above is the desktop composition at the Figma artboard width and
   is left untouched at 1052 and up. Two breakpoints sit under it:

     < 1052px   tablet — the fixed 972 column becomes fluid, the nav becomes a
                drawer, and the three-column article grid folds to two
     <  700px   phone  — one column throughout, bands and display type scale

   The whole thing turns on two custom properties. Redefining --page-margin as
   a literal gutter and --content-width as "the rest" makes every centred
   container, and every offset expressed against them, fluid at once — which is
   why so few individual rules need overriding below.
   ========================================================================== */

@media (max-width: 1051px) {

  :root {
    --page-margin: 24px;
    --content-width: calc(100% - var(--page-margin) * 2);
  }

  .page { min-width: 0; }
  .stage { width: 100%; }

  /* ---------- Masthead: the nav becomes a drawer ---------- */
  .article-masthead__inner {
    height: 66px;
    align-items: center;
  }
  .article-masthead__nav {
    width: auto;
    height: auto;
    padding-bottom: 0;
    justify-content: center;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 41;              /* stays tappable over the open drawer */
    height: 44px;                /* a real tap target */
    padding: 0;
    font-family: "Source Sans Pro", system-ui, sans-serif;
    font-size: 18px;
    letter-spacing: -0.9px;
    color: var(--nav-text);
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform var(--state-duration) var(--state-ease),
                opacity var(--state-duration) var(--state-ease);
  }
  .nav-toggle__bars {
    position: relative;
  }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav-toggle__bars::before { top: -7px; }
  .nav-toggle__bars::after  { top: 7px; }

  /* Open: the bars become a cross. */
  .nav-toggle[aria-expanded="true"] { color: var(--ink); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

  /* The panel itself. Off-canvas until the toggle opens it. */
  .nav-bar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    width: min(320px, 84vw);
    height: auto;
    padding: 82px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border-right: 1px solid var(--ink);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--state-duration) var(--state-ease),
                visibility var(--state-duration) var(--state-ease);
  }
  .nav-bar.is-open {
    transform: none;
    visibility: visible;
  }

  /* The scrim behind it. */
  .article-masthead__nav::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--state-duration) var(--state-ease),
                visibility var(--state-duration) var(--state-ease);
  }
  .article-masthead__nav.is-open::before { opacity: 1; visibility: visible; }
  body.has-nav-open { overflow: hidden; }

  .nav-bar__divider { display: none; }
  .nav-bar__link {
    justify-content: flex-start;
    padding: 11px 0;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -0.6px;
  }

  /* The feature list is a heading and two links, not a drop-down: there is no
     hover on a phone, and the panel has room to show both outright. */
  .nav-bar__item {
    position: static;
    display: block;
    align-self: stretch;
    margin-bottom: 6px;
  }
  .nav-bar__trigger {
    pointer-events: none;         /* it is a label here, not a control */
    padding-bottom: 4px;
    font-size: 14px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--rule-nav);
  }
  .nav-bar__caret { display: none; }
  .nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 8px;
    border: 0;
    box-shadow: none;
  }
  .nav-menu__link {
    padding: 9px 0 9px 14px;
    font-size: 19px;
    line-height: 24px;
    border-left: 2px solid var(--rule-card);
  }
  .nav-menu__link[aria-current="page"] { border-left-color: var(--state-blue); }

  /* ---------- Home ---------- */
  .home-masthead {
    height: auto;
    padding: 16px 0 10px;
  }
  .issue-block,
  .home-wordmark,
  .masthead-tagline {
    position: static;
    transform: none;
  }
  .home-masthead .stage {
    width: var(--content-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .issue-block { align-self: flex-start; width: auto; }
  .home-wordmark {
    width: min(420px, 100%);
    height: auto;
  }
  .home-wordmark img { height: auto; }
  .masthead-tagline {
    height: auto;
    border-left: 0;
    padding: 0;
    text-align: center;
  }
  .masthead-tagline p { width: auto; max-width: 34em; }

  .home-hero { height: 380px; }

  /* The feature leads clear the artwork's scrim; keep them right-aligned to
     the content column rather than to a coordinate from the artboard. */
  .hero-features {
    left: auto;
    right: var(--page-margin);
    top: auto;
    bottom: 26px;
  }

  /* ---------- Section cards ---------- */
  .card-row { flex-wrap: wrap; justify-content: flex-start; }
  .section-card {
    width: 25%;
    height: auto;
    min-height: 170px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* ---------- Article pages ---------- */
  .article-hero { height: auto; }
  .article-hero .stage { height: auto; }
  .article-hero__title {
    position: relative;
    left: auto;
    top: auto;
    width: var(--content-width);
    margin: 0 auto;
    padding: 74px 0 34px;
    font-size: 54px;
    line-height: 50px;
    letter-spacing: -2.2px;
  }
  .article-hero__title-sub { font-size: 34px; letter-spacing: -1.3px; }

  /* Two columns: the article beside a rail that carries the author above the
     supporting cards, which is the desktop relationship minus a column. */
  .article-grid { grid-template-columns: minmax(0, 1fr) var(--rail-width); }
  .article-copy {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 56px;
    width: auto;
  }
  .author-card { grid-column: 2; grid-row: 1; margin-top: 56px; }
  .article-rail { grid-column: 2; grid-row: 2; margin-top: 30px; }
  .section-tag { left: 0; }

  /* ---------- Feature: School Highlights ---------- */
  .feature-title {
    width: var(--content-width);
    height: auto;
    padding: 74px 0 24px;
    font-size: 76px;
    line-height: 68px;
    letter-spacing: -3.4px;
  }
  .feature-body { padding-top: 40px; }
  .feature-stories {
    width: var(--content-width);
    margin: 0 auto;
  }
  .feature-story__head { width: auto; }
  .feature-story__body { padding-left: 0; }
  .feature-story__card {
    position: static;
    width: var(--rail-width);
    margin-bottom: 18px;
  }
  .feature-story__body {
    display: block;                /* the card now sits above the copy */
  }
  .feature-story__copy,
  .feature-story__body--split .feature-story__copy { width: auto; }
  .feature-story__aside {
    float: right;
    width: 40%;
    max-width: 222px;
    margin: 4px 0 16px 22px;
  }

  /* ---------- Feature: All Things New ---------- */
  .atn-hero { height: auto; }
  .atn-hero__art { width: 100%; }
  .atn-hero__kicker {
    position: absolute;
    left: var(--page-margin);
    right: auto;
    top: 18px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    font-size: 22px;
    line-height: 22px;
  }
  .atn-copy {
    width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
  }
  .atn-copy--carded .sel-card {
    position: static;
    width: var(--rail-width);
    margin-bottom: 18px;
  }
  .atn-quote { width: min(473px, 100%); }
  .atn-video { height: auto; }
  .atn-video__slot { width: 100%; height: auto; }
  .atn-cta__rule { margin-top: 54px; }
  .atn-cta__inner { width: var(--content-width); }
  .atn-cta__art {
    position: static;
    width: min(379px, 60%);
    margin: 26px 0 0 auto;
  }
  .atn-cta__text { width: auto; max-width: 420px; margin-left: 0; }
  .atn-cta .launch-button { margin-left: 0; }
  .atn-cta { padding-bottom: 48px; }

  /* ---------- Snippets ---------- */
  .snippets-intro {
    width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    height: auto;
    padding-bottom: 18px;
  }
  .snippets-intro__lockup { width: auto; flex: 1 1 auto; min-width: 0; }
  .snippet-grid { width: var(--content-width); }
  .snippet-card--full-right,
  .snippet-card--full-left { width: 100%; }
  .snippet-card--half-left,
  .snippet-card--half-right { width: calc(50% - 9px); height: auto; }

  /* The media boxes are cut straight from the frame, so they have to give up
     their fixed widths before the text column gets squeezed to nothing. */
  .snippet-card__media {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 45%;
    height: auto;
    aspect-ratio: var(--snippet-media-ratio, 1);
  }
  .snippet-card__media--take-note { --snippet-media-ratio: 437 / 459; }
  .snippet-card__media--journey   { --snippet-media-ratio: 186 / 208; }
  .snippet-card__media--edtech    { --snippet-media-ratio: 236 / 166; margin-top: 0; }
  .snippet-card__media--finder    { --snippet-media-ratio: 462 / 373; }
  .snippet-card__media img { height: 100%; }
  .snippet-card__text { min-width: 0; }

  /* ---------- Article note (alc) ---------- */
  .article-note__inner { width: var(--content-width); }
  .article-note p {
    margin-left: calc(var(--rail-width) + var(--rail-gap));
    width: auto;
    max-width: var(--copy-width);
  }

  /* ---------- Footer ---------- */
  .site-footer__inner { width: var(--content-width); }
  .site-footer__copyright { width: auto; height: auto; }
  /* Narrow columns can force a launch-button label onto two lines. Trading the
     34px line box for 22px + 6px padding keeps a one-line button exactly 34px
     tall — unchanged — while a wrapped one sets tightly instead of double
     spaced. The icon is a hair taller than the line it sits on, so -1px
     centres it on the first line under `flex-start`. */
  .launch-button {
    white-space: normal;
    align-items: flex-start;
    line-height: 22px;
    padding: 6px 9px;
  }
  .launch-button .launch-icon { margin: -1px 0; }
}

/* ---------- Phone (< 700) ----------
   One column throughout. The tablet block above still applies, so this only
   carries what actually differs. */
@media (max-width: 699px) {

  :root { --page-margin: 20px; }

  /* ---------- Home ---------- */

  /* The lockup is 316px of right-ranged type — too wide to sit on the
     artwork here, so it drops below the hero on its own ground. The band has
     to stop clipping and stop being a fixed box for that to be possible; the
     artwork keeps the height instead. */
  .home-hero { height: auto; overflow: visible; background: var(--paper); }
  .hero-media { height: 260px; }
  .home-hero .stage { position: static; }
  .hero-features {
    position: static;
    width: var(--content-width);
    margin: 0 auto;
    padding: 26px 0 30px;
    background: var(--paper);
  }
  .hero-features__label {
    width: auto;
    text-align: left;
    color: var(--ink);
    font-size: 14px;
    letter-spacing: 3.4px;
  }
  .feature-lead {
    margin-top: 14px;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule-card);
  }
  .feature-lead + .feature-lead { margin-top: 14px; }
  .feature-lead__title {
    width: auto;
    flex: 1 1 auto;
    padding: 0;
    text-align: left;
    color: var(--ink);
    font-size: 30px;
    line-height: 30px;
    letter-spacing: -1.4px;
  }
  .feature-lead__rule { display: none; }

  /* ---------- Section cards ---------- */
  .section-card {
    width: 100%;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px var(--page-margin);
    border-right: 0;
  }
  .section-card__head { flex: 1 1 auto; align-items: flex-start; gap: 4px; }
  .section-card__title,
  .section-card__desc { text-align: left; }
  .section-card__title { height: auto; font-size: 24px; line-height: 26px; }
  .section-card__desc { font-size: 14px; line-height: 17px; }
  .section-card__rule { display: none; }

  /* ---------- Article pages ---------- */
  .article-hero__title {
    padding: 58px 0 26px;
    font-size: 38px;
    line-height: 38px;
    letter-spacing: -1.4px;
  }
  .article-hero__title-sub { font-size: 27px; letter-spacing: -0.9px; }

  /* One column: the article, then what supports it, then who wrote it. The
     source order puts the rail first (it is the left column on desktop), so
     order rather than display:block does the stacking. The padding is the
     room the section tag needs — it is still absolutely positioned. */
  .article-grid {
    display: flex;
    flex-direction: column;
    padding-top: 48px;
  }
  .article-copy {
    order: 1;
    margin-top: 0;
    padding: 0 0 0 14px;
  }
  .article-rail { order: 2; margin-top: 34px; }
  /* The author becomes a band rather than a rule — on one narrow column the
     bio otherwise reads as more article. It bleeds to the page edges, so the
     change of ground is unmistakable. */
  .author-card {
    order: 3;
    margin: 40px calc(var(--page-margin) * -1) 0;
    padding: 28px var(--page-margin) 32px;
    background: var(--panel);
  }
  .author-card__portrait { width: 160px; height: 192px; }
  /* 12px is a caption size beside a 532px column; on a phone it is just small. */
  .author-card__bio { font-size: 14px; line-height: 20px; letter-spacing: -0.2px; }
  .author-card__title { font-size: 11px; line-height: 16px; }
  .author-card__name { font-size: 18px; line-height: 20px; }
  .article-body { padding-bottom: 70px; }
  .callout, .article-rail .sel-card { width: 100%; max-width: 360px; }
  .article-copy h2 { font-size: 22px; line-height: 24px; }

  /* ---------- Feature: School Highlights ---------- */
  .feature-title {
    padding: 58px 0 20px;
    font-size: 46px;
    line-height: 44px;
    letter-spacing: -1.8px;
  }
  .feature-stories { gap: 40px; }
  .feature-story__copy { padding-left: 14px; }
  .feature-story__card { width: 100%; max-width: 300px; }
  .feature-story__aside { float: none; width: 100%; max-width: 300px; margin: 0 0 16px; }
  .feature-story__school { font-size: 22px; line-height: 24px; }

  /* ---------- Feature: All Things New ---------- */
  .atn-hero__kicker { font-size: 17px; line-height: 17px; top: 12px; }
  .atn-copy { padding-left: 14px; }
  .atn-copy--carded .sel-card { width: 100%; max-width: 300px; }

  /* Two by two rather than four across. */
  .atn-pillars { flex-wrap: wrap; row-gap: 26px; }
  .atn-pillars--icons { column-gap: 8px; }
  .atn-pillars--words { column-gap: 8px; }
  .atn-pillars li { width: calc(50% - 6px); }
  .atn-pillars__name { font-size: 24px; line-height: 28px; }
  .atn-pillars--words .atn-pillars__verb { font-size: 42px; height: 44px; }

  .atn-quote p { font-size: 23px; }
  .atn-cta__art { width: 100%; max-width: 340px; margin: 24px auto 0; }
  .atn-cta__text { margin-top: 30px; }

  /* ---------- Article note (alc) ---------- */
  .article-note p { margin-left: 0; padding: 0; }

  /* ---------- Masthead lockup ---------- */
  .article-masthead__lockup { width: 208px; height: 62px; }
  .article-masthead__wordmark { width: 140px; height: 41px; top: 12px; }
  .article-masthead__issue { left: 130px; top: 30px; font-size: 14px; }
  .nav-toggle__label { display: none; }

  /* ---------- Snippets ---------- */
  .snippet-card--half-left,
  .snippet-card--half-right { width: 100%; }
  .snippet-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .snippet-card--full-right { flex-direction: column-reverse; }
  .snippet-card__media { max-width: 100%; width: 100%; align-self: stretch; }
  .snippet-card__links { flex-direction: column; gap: 8px; }
  .snippets-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .snippets-intro__title { width: auto; height: auto; font-size: 40px; line-height: 44px; }
  .snippets-intro__lockup {
    width: 100%;
    align-items: flex-start;
    padding: 0;
    border-left: 0;
  }
  .snippets-intro .launch-button { align-self: flex-start; }

  /* ---------- Footer ---------- */
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  /* ---------- Modal ---------- */
  .lightbox__nav--prev { left: -6px; }
  .lightbox__nav--next { right: -6px; }
  .lightbox__stage { width: min(88vw, 520px); }
  .lightbox--fit .lightbox__slide,
  .lightbox--fit .lightbox__stage { max-width: 92vw; max-height: 70vh; }
}

/* ==========================================================================
   ARCHIVE — every issue since 2016
   ==========================================================================
   Forty issues is a lot of links, so the page is grouped by year rather than
   run as one list: eleven headings scan faster than forty rows. Each issue is
   a tile in the card language the rest of the site already uses, and the arrow
   is coloured by season — a system that holds all the way down the page rather
   than a palette applied at random. */
.archive-intro {
  width: var(--content-width);
  margin: 0 auto;
  padding: 40px 0 8px;
}
.archive-intro p {
  max-width: 620px;
  padding-left: 10px;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  letter-spacing: -0.4px;
}

.archive-body { padding-bottom: 120px; }

.archive-year {
  width: var(--content-width);
  margin: 0 auto;
  padding-top: 44px;
}

/* The year is a running head: big, light, sitting on its own rule. */
.archive-year__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0 10px 12px;
  border-bottom: 1px solid var(--ink);
}
.archive-year__number {
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -3px;
}
.archive-year__count {
  font-family: "Source Sans Pro", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--nav-text);
}

.archive-issues {
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ---------- One issue ---------- */
.issue-card {
  height: 100%;
  min-height: 132px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #d1d1d1;
  border-radius: 12px;
  transition: border-color var(--state-duration) var(--state-ease),
              box-shadow var(--state-duration) var(--state-ease);
}
.issue-card__season {
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -1.5px;
}
.issue-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.issue-card__year {
  font-family: "Source Sans Pro", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 1.4px;
  color: var(--nav-text);
}
.issue-card__arrow {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: var(--issue-accent, var(--nav-text));
}
.issue-card__arrow svg { width: 20px; height: 20px; fill: var(--paper); }

/* Season, not section — the colour means the same thing on every row. */
.issue-card--spring { --issue-accent: var(--accent-light-green); }
.issue-card--summer { --issue-accent: var(--accent-orange); }
.issue-card--fall   { --issue-accent: var(--accent-brown); }
.issue-card--winter { --issue-accent: var(--accent-blue); }

@media (hover: hover) {
  .issue-card:hover {
    border-color: var(--state-blue);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
  }
}
.issue-card:focus-visible { border-color: var(--state-blue); }

/* ---------- The issue you are already reading ---------- */
.issue-card--current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.issue-card--current .issue-card__year { color: rgba(255, 255, 255, 0.6); }
/* An eyebrow above the season, not a second line in the foot — at 14px it
   wraps there and crowds the arrow. */
.issue-card__badge {
  display: block;
  margin-bottom: 6px;
  font-family: "Source Sans Pro", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--state-blue);
}

/* The archive band carries no artwork, so it does not need the full 320 the
   article pages give a photograph. */
.section-archive .article-hero { height: 230px; }

@media (max-width: 1051px) {
  .archive-intro,
  .archive-year { width: var(--content-width); }
  .archive-issues { grid-template-columns: repeat(3, 1fr); }
  /* .section-archive .article-hero out-specifies the responsive height:auto,
     so the band has to be handed back explicitly. */
  .section-archive .article-hero { height: auto; }
}

@media (max-width: 699px) {
  .archive-intro { padding-top: 28px; }
  .archive-intro p { font-size: 17px; padding-left: 0; }
  .archive-year { padding-top: 32px; }
  .archive-year__head { padding-left: 0; padding-right: 0; }
  .archive-year__number { font-size: 38px; line-height: 38px; letter-spacing: -2px; }
  .archive-issues { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .issue-card { min-height: 108px; padding: 13px; gap: 12px; }
  .issue-card__season { font-size: 23px; line-height: 24px; letter-spacing: -1px; }
  .issue-card__arrow { width: 30px; height: 30px; }
  .issue-card__arrow svg { width: 18px; height: 18px; }
  .archive-body { padding-bottom: 70px; }
}