/*
 * The web doorway for Life At. This is the phone app's school picker and About
 * screen (mobile/src/mobile.css .o-shell + .m-card, views/Onboarding.tsx and
 * views/AboutView.tsx) rebuilt as two static pages: same neutral grey-to-paper
 * shell, same Lockup 2A rows, same hard offset shadows.
 */

:root {
  --navy: #13294b;
  --navy-rgb: 19, 41, 75;
  --paper: #f7f4ed;
  --white: #ffffff;
  --gray: #5b6670;
  --line: rgba(19, 41, 75, 0.22);
  --carolina: #4b9cd3;
  --shell-top: #202328;

  /* The app ships no webfonts; matching it means matching these stacks. */
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --editorial: Georgia, "Times New Roman", serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --inset-top: env(safe-area-inset-top, 0px);
  --inset-bottom: env(safe-area-inset-bottom, 0px);
  --inset-left: env(safe-area-inset-left, 0px);
  --inset-right: env(safe-area-inset-right, 0px);

  /* The doorway commits to one light world, exactly as the app does.
     Nothing here reacts to the OS theme. */
  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

/* The doorway belongs to the parent Life At product, so it wears the neutral
   grey rather than any campus palette. */
.o-shell {
  min-height: 100dvh;
  padding: calc(var(--inset-top) + 20px) calc(var(--inset-right) + 22px) calc(var(--inset-bottom) + 24px) calc(var(--inset-left) + 22px);
  background: linear-gradient(180deg, var(--shell-top) 0 270px, var(--paper) 270px 100%);
}

/* On a desktop window the phone screen holds its width and centres, so the
   page reads as the app rather than a stretched copy of it. */
.o-screen {
  max-width: 420px;
  margin: 0 auto;
}

/* ── Lockup 2A ─────────────────────────────────────────────────────────── */

.life-at-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.life-at-mark,
.life-at-wordmark {
  --life-at-ink: #0f2338;
  --life-at-accent: #2f8fe0;
  --life-at-ring: #ffffff;
}

.life-at-mark[data-life-at-theme="unc"],
.life-at-wordmark[data-life-at-theme="unc"] { --life-at-ink: #13294b; --life-at-accent: #4b9cd3; }
.life-at-mark[data-life-at-theme="ncsu"],
.life-at-wordmark[data-life-at-theme="ncsu"] { --life-at-ink: #111111; --life-at-accent: #cc0000; }
.life-at-mark[data-life-at-theme="duke"],
.life-at-wordmark[data-life-at-theme="duke"] { --life-at-ink: #012169; --life-at-accent: #00539b; }
/* Pennsylvania Sky, so the pin reads against the navy chevron. */
.life-at-mark[data-life-at-theme="psu"],
.life-at-wordmark[data-life-at-theme="psu"] { --life-at-ink: #001e44; --life-at-accent: #009cde; }
/* Charlotte Green on the near-black green, so the pin reads on the chevron. */
.life-at-mark[data-life-at-theme="charlotte"],
.life-at-wordmark[data-life-at-theme="charlotte"] { --life-at-ink: #10241c; --life-at-accent: #005035; }

.life-at-chevron { fill: var(--life-at-ink); stroke: var(--life-at-ink); }
.life-at-pin { fill: var(--life-at-accent); stroke: var(--life-at-ring); }
.life-at-pin-dot { fill: var(--life-at-ring); }

.life-at-mark { display: inline-flex; width: 46px; height: 46px; flex: 0 0 auto; }
.life-at-mark svg { display: block; width: 100%; height: 100%; }

/* On the icon field the palette inverts: ink becomes the field, the chevron
   is knocked out in white, and the pin rings itself in the field colour. */
.life-at-mark-field { fill: var(--life-at-ink); }
.life-at-mark .life-at-chevron { fill: #ffffff; stroke: #ffffff; }
.life-at-mark .life-at-pin { stroke: var(--life-at-ink); }
.life-at-mark .life-at-pin-dot { fill: var(--life-at-ink); }

.life-at-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.235em;
  min-width: 0;
  color: var(--life-at-ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.life-at-wordmark-line { display: inline-flex; align-items: baseline; gap: 0.24em; }
.life-at-wordmark-at { display: inline-flex; align-items: baseline; }
.life-at-wordmark-at > span { margin-left: 0.1em; }
.life-at-wordmark-pin { width: 0.63em; height: 0.74em; overflow: visible; }

.life-at-wordmark-school {
  color: var(--life-at-ink);
  font-size: max(12px, 0.41em);
  font-weight: 600;
  letter-spacing: 0.3em;
}

/* The shell runs dark behind the brand, so the lockup reverses: white
   wordmark, and the pin rings itself in the shell colour instead of white. */
.o-brand { color: var(--white); }
.o-brand .life-at-wordmark { --life-at-ink: #ffffff; --life-at-ring: var(--shell-top); }

/* ── Top bar ───────────────────────────────────────────────────────────── */

.o-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The picker's one secondary action, reversed out of the dark band. */
.o-bar-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 13px;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  color: var(--white);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), transform 140ms var(--ease);
}

.o-bar-link:hover,
.o-bar-link:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }

.o-bar-link:active {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(1px);
  transition-duration: 45ms;
}
.o-bar-link:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

.o-back {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin: -8px 0 4px -11px;
  color: var(--white);
}

.o-back svg { width: 22px; height: 22px; }

/* ── Stage ─────────────────────────────────────────────────────────────── */

.o-stage { margin-top: 46px; }

/* On About the heading block already sits inside the dark band. */
.o-top .o-stage { margin-top: 30px; }

.o-stage h1 {
  max-width: 300px;
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(36px, 10vw, 44px);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-transform: uppercase;
}

/* The About screen's kicker: the app sets it in the same condensed face,
   one step down from the title it introduces. */
.o-kicker {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--display);
  font-size: clamp(19px, 5.4vw, 23px);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.o-school-list { display: grid; gap: 14px; margin-top: 42px; }

/* Each row carries its own school's accent, since the picker itself has no
   campus and cannot take one from the tokens. */
.o-school {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 96px;
  padding: 16px;
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  text-align: left;
  text-decoration: none;
  --o-school-accent: #4b9cd3;
  box-shadow: 5px 5px 0 var(--o-school-accent);
  /* Kill the tap-highlight box and the 300ms tap delay so the press state
     below is the only feedback, and it arrives immediately. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: transform 170ms var(--ease), box-shadow 170ms var(--ease);
}

.o-school.ncsu { --o-school-accent: #b52626; }
.o-school.duke { --o-school-accent: #00539b; }
.o-school.psu  { --o-school-accent: #1e407c; }
.o-school.charlotte { --o-school-accent: #005035; }

.o-school:hover,
.o-school:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--o-school-accent);
}

.o-school:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--o-school-accent);
  transition-duration: 45ms;
}

.o-school:focus-visible { outline: 3px solid var(--o-school-accent); outline-offset: 4px; }

/* Each row is the edition's own lockup on white: the mark in its campus
   colours, the wordmark beside it with the school beneath. Not a university
   logo; no school has licensed its marks to this product. */
.o-school-brand { gap: 14px; }
.o-school-brand .life-at-mark { width: 54px; height: 54px; }
.o-school-brand .life-at-wordmark { font-size: 20px; }
.o-arrow { width: 21px; height: 21px; flex: 0 0 auto; }

.o-note {
  margin: 24px 0 0;
  color: var(--gray);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

/* ── Cards, as the About screen sets them ──────────────────────────────── */

.m-cards { margin-top: 26px; }

.m-card {
  margin-bottom: 14px;
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--navy);
  box-shadow: 4px 4px 0 var(--navy);
}

.m-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.m-card p + p { margin-top: 12px; }

.m-kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
}

.m-card h2 {
  margin: 2px 0 14px;
  font-family: var(--editorial);
  font-size: 23px;
  font-weight: 700;
}

.m-about-contact {
  margin: 12px 0 0;
  color: var(--gray);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.m-about-contact a { color: var(--navy); font-weight: 700; }

.m-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--carolina);
  border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
  color: var(--navy);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}

.m-button svg { width: 16px; height: 16px; }
.m-button:hover,
.m-button:focus-visible { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }
.m-button:focus-visible { outline: 3px solid var(--carolina); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .o-school, .o-bar-link { transition-duration: 1ms; }
  .o-school:hover, .o-school:focus-visible, .o-school:active,
  .o-bar-link:active { transform: none; }
  .o-school:active { box-shadow: 0 0 0 var(--o-school-accent); }
}

/* ───────────────────────────────────────────────────────────────────────────
   About. A copy of the Life at Carolina About screen (LifeDashboard about-view):
   the same oversized condensed hero over a 4px rule, the same bordered portrait
   with its hard offset shadow, the same Georgia column with a Carolina-blue
   opening letter, and the same cloud-blue feedback panel.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --cloud: #edf5fb;
  --carolina-ink: #236a98;
  --ink: #111820;
  /* Foreground for controls filled with the campus accent. White on Carolina
     blue is 2.5:1; the phone app already solves this with navy, so we do too. */
  --accent-text: var(--navy);
}

.a-page { display: flex; min-height: 100dvh; flex-direction: column; }

.a-top {
  padding: calc(var(--inset-top) + 20px) calc(var(--inset-right) + 22px) 20px calc(var(--inset-left) + 22px);
  background: var(--shell-top);
}

.a-body {
  flex: 1;
  padding: 34px calc(var(--inset-right) + 22px) calc(var(--inset-bottom) + 44px) calc(var(--inset-left) + 22px);
  background: var(--paper);
}

.a-wrap { max-width: 1120px; margin: 0 auto; }
.a-top .a-wrap { display: flex; align-items: center; gap: 14px; }

.a-hero {
  margin: 0 0 34px;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--navy);
}

.a-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(56px, 11vw, 90px);
  font-weight: 950;
  letter-spacing: -0.075em;
  line-height: 0.87;
  text-transform: uppercase;
}

.a-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  gap: 52px;
}

/* One column before the portrait starts squeezing the text measure. */
@media (max-width: 860px) {
  .a-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .a-portrait { max-width: 280px; }
}

.a-portrait {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 3px solid var(--navy);
  box-shadow: 5px 5px 0 var(--navy);
}

/* Width and height are declared on the element too, so the row does not
   reflow when the photograph arrives. */
.a-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 1280;
  object-fit: cover;
}

/* 17px Georgia at this measure runs about 68 characters. */
.a-copy p {
  max-width: 63ch;
  margin: 0 0 18px;
  color: var(--ink);
  font-family: var(--editorial);
  font-size: 17px;
  line-height: 1.7;
}

.a-copy p:first-of-type::first-letter {
  padding-right: 2px;
  color: var(--carolina-ink);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 800;
  line-height: 34px;
}

.a-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.a-link {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
  color: var(--navy);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}

.a-link svg { width: 21px; height: 21px; }

.a-link:hover,
.a-link:focus-visible { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--navy); }

.a-link:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--navy);
  transition-duration: 45ms;
}
.a-link:focus-visible { outline: 3px solid var(--carolina-ink); outline-offset: 3px; }

.a-panel {
  margin-top: 56px;
  padding: clamp(20px, 4vw, 32px);
  background: var(--cloud);
  border: 3px solid var(--navy);
  box-shadow: 5px 5px 0 var(--navy);
}

.a-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Sentence case, as the Carolina panel sets it. */
.a-panel h2 {
  margin: 4px 0 6px;
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 34px);
  font-weight: 800;
  line-height: 1.1;
}

.a-panel p {
  max-width: 60ch;
  margin: 0 0 20px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

/* iOS zooms any control under 16px, and 15px body is tight on a phone. */
@media (max-width: 720px) {
  .a-panel p { font-size: 16px; }
}

.a-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  background: var(--carolina);
  border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
  color: var(--accent-text);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}

.a-cta svg { width: 16px; height: 16px; }
.a-cta:hover,
.a-cta:focus-visible { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--navy); }

.a-cta:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--navy);
  transition-duration: 45ms;
}
.a-cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .a-link, .a-cta { transition-duration: 1ms; }
  .a-link:hover, .a-link:focus-visible, .a-link:active,
  .a-cta:hover, .a-cta:focus-visible, .a-cta:active { transform: none; }
  .a-link:active, .a-cta:active { box-shadow: 0 0 0 var(--navy); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Desktop. Below 880px the page stays the phone screen it always was. Above
   it, the same framework — dark band, paper, hard offsets, condensed caps —
   opens up into a poster: oversized headline over a watermark of the mark,
   a five-campus spine, and the picker as a staggered card grid. Everything
   added here is shapes and colour; no new copy. Scoped to .o-shell so the
   About page (.a-page) keeps its own desktop layout.
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 880px) {
  .o-shell {
    --band: clamp(390px, 48vh, 480px);
    overflow-x: clip;
    padding: calc(var(--inset-top) + 26px) clamp(30px, 5vw, 64px) 84px;
    /* Same two worlds as the phone gradient, plus a faint dot grid pressed
       into the paper. The dots ride over the dark band too, where they all
       but vanish — which is the point. */
    background:
      radial-gradient(rgba(var(--navy-rgb), 0.11) 1.5px, transparent 1.5px) 0 0 / 26px 26px,
      linear-gradient(180deg, var(--shell-top) 0 var(--band), var(--paper) var(--band) 100%);
  }

  /* The stage dissolves so the screen can compose bar, headline, list and
     note as one column that owns the whole viewport: the note holds the
     floor, and the paper below the cards stops reading as leftovers. */
  .o-screen {
    display: flex;
    flex-direction: column;
    max-width: 1180px;
    min-height: calc(100dvh - var(--inset-top) - 116px);
  }

  .o-stage { display: contents; }

  .o-bar { position: relative; z-index: 2; }
  .o-brand { gap: 16px; }
  .o-brand .life-at-mark { width: 84px; height: 84px; }
  .o-brand .life-at-wordmark { font-size: 30px; }

  /* The one nav control gets the house treatment instead of a ghost box:
     paper block, ink border, Carolina under it, mechanical press. */
  .o-bar-link {
    padding: 13px 24px;
    border: 2px solid var(--navy);
    background: var(--paper);
    color: var(--navy);
    font-size: 12px;
    box-shadow: 4px 4px 0 var(--carolina);
  }

  .o-bar-link:hover,
  .o-bar-link:focus-visible {
    background: var(--white);
    border-color: var(--navy);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--carolina);
  }

  .o-bar-link:active {
    background: var(--white);
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--carolina);
  }

  .o-bar-link:focus-visible { outline: 3px solid var(--carolina); outline-offset: 3px; }

  .o-stage h1 {
    position: relative;
    z-index: 1;
    max-width: none;
    margin-top: 54px;
    font-size: clamp(62px, 7.8vw, 118px);
    letter-spacing: -0.05em;
    line-height: 0.92;
    text-shadow: 6px 6px 0 rgba(75, 156, 211, 0.38);
    animation: o-rise 440ms var(--ease) backwards;
  }

  /* The mark itself, blown up to poster scale and tipped over the band's
     right shoulder. Decoration only; the real lockups carry the meaning. */
  .o-stage h1::after {
    content: "";
    position: absolute;
    top: -150px;
    right: 0;
    z-index: -1;
    width: min(clamp(240px, 22vw, 320px), 32vh);
    height: min(clamp(283px, 26vw, 378px), 38vh);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M50 14 L92 108 H74 L50 52 L26 108 H8 Z' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M50 47c12.2 0 22 9.8 22 22 0 14.6-22 39-22 39s-22-24.4-22-39c0-12.2 9.8-22 22-22z' fill='rgba(75,156,211,0.30)' stroke='rgba(255,255,255,0.22)' stroke-width='2'/%3E%3Ccircle cx='50' cy='69' r='8' fill='rgba(255,255,255,0.22)'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(-8deg);
    pointer-events: none;
  }

  .o-school-list {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
    gap: 30px 24px;
    margin-top: 56px;
  }

  /* Two flagships up top, three across beneath: the staggered poster grid.
     Each card leans a hair off true and stands up straight on approach. */
  .o-school {
    --tilt: 0deg;
    min-height: 150px;
    padding: 24px 26px;
    box-shadow: 7px 7px 0 var(--o-school-accent);
    transform: rotate(var(--tilt));
    animation: o-card-in 480ms var(--ease) backwards;
  }

  .o-school:nth-of-type(odd)  { --tilt: -0.35deg; }
  .o-school:nth-of-type(even) { --tilt: 0.3deg; }

  /* Two tiers of the stagger: pairs with a full-width base while the
     cards are narrow, opening to two-over-three once the long Charlotte
     lockup has room to clear its arrow. */
  .o-school { grid-column: span 3; }
  .o-school:nth-of-type(5) { grid-column: 1 / -1; }

  .o-school:nth-of-type(1) { animation-delay: 90ms; }
  .o-school:nth-of-type(2) { animation-delay: 135ms; }
  .o-school:nth-of-type(3) { animation-delay: 180ms; }
  .o-school:nth-of-type(4) { animation-delay: 225ms; }
  .o-school:nth-of-type(5) { animation-delay: 270ms; }

  @media (min-width: 1140px) {
    .o-school:nth-of-type(3), .o-school:nth-of-type(4),
    .o-school:nth-of-type(5) { grid-column: span 2; }
  }

  .o-school:hover,
  .o-school:focus-visible {
    transform: translate(-3px, -3px) rotate(0deg);
    box-shadow: 12px 12px 0 var(--o-school-accent);
  }

  .o-school:active {
    transform: translate(7px, 7px) rotate(var(--tilt));
    box-shadow: 0 0 0 var(--o-school-accent);
  }

  .o-school-brand { gap: 18px; }
  .o-school-brand .life-at-mark { width: 64px; height: 64px; }
  .o-school-brand .life-at-wordmark { font-size: 23px; }

  /* The arrow earns a tile of its own, cut from the same cloth as the
     marks: bordered square, hard corners, ink flood on approach. */
  .o-arrow {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 11px;
    border: 2px solid var(--navy);
    background: var(--paper);
    transition: transform 170ms var(--ease), background 170ms var(--ease), color 170ms var(--ease);
  }

  .o-school:hover .o-arrow,
  .o-school:focus-visible .o-arrow {
    transform: translateX(5px);
    background: var(--navy);
    color: var(--white);
  }

  /* The note earns a pair of rules instead of more type. */
  .o-shell .o-note {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    padding-top: 46px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .o-shell .o-note::before,
  .o-shell .o-note::after {
    content: "";
    height: 2px;
    flex: 1;
    background: var(--line);
  }
}

@keyframes o-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes o-card-in {
  from { opacity: 0; transform: translateY(24px) rotate(var(--tilt, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .o-stage h1, .o-school, .o-arrow { animation: none; }
  .o-school { --tilt: 0deg; }
  /* Restate the file's earlier motion opt-out: these desktop rules sit later
     in the cascade, so they must hold still on their own. */
  .o-school:hover, .o-school:focus-visible { transform: none; }
  .o-school:active { transform: none; box-shadow: 0 0 0 var(--o-school-accent); }
  .o-bar-link:hover, .o-bar-link:focus-visible, .o-bar-link:active { transform: none; }
  .o-school:hover .o-arrow,
  .o-school:focus-visible .o-arrow { transform: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   About, desktop. The same poster grammar as the picker so the two pages
   read as one product: dotted paper, a ghost of the mark behind the hero,
   the Carolina offset under the headline, and the portrait pinned up at a
   slight angle with the product colour behind it. Shapes only; the page's
   words are untouched. Scoped to .a-page and ≥880px.
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 880px) {
  /* The picker's band, worn by About too: one dark world down to --a-band,
     paper with the dot grid below it. The bar and body go transparent so
     the page paints as a single composition instead of two strips. */
  .a-page {
    --a-band: 270px;
    background:
      radial-gradient(rgba(var(--navy-rgb), 0.11) 1.5px, transparent 1.5px) 0 0 / 26px 26px,
      linear-gradient(180deg, var(--shell-top) 0 var(--a-band), var(--paper) var(--a-band) 100%);
  }

  .a-top {
    background: transparent;
    padding-left: clamp(28px, 4.5vw, 64px);
    padding-right: clamp(28px, 4.5vw, 64px);
  }

  .a-body {
    background: transparent;
    padding-left: clamp(28px, 4.5vw, 64px);
    padding-right: clamp(28px, 4.5vw, 64px);
  }

  .a-hero {
    position: relative;
    z-index: 1;
    padding-bottom: 18px;
    border-bottom-color: var(--white);
  }

  .a-hero h1 {
    color: var(--white);
    text-shadow: 6px 6px 0 rgba(75, 156, 211, 0.38);
    animation: o-rise 440ms var(--ease) backwards;
  }

  /* The same ghost of the mark as the picker's band, over the hero's
     right shoulder. */
  .a-hero::after {
    content: "";
    position: absolute;
    right: 0;
    top: -118px;
    z-index: -1;
    width: min(clamp(170px, 16vw, 230px), calc((var(--a-band) - 40px) / 1.18));
    height: min(clamp(200px, 18.9vw, 271px), calc(var(--a-band) - 40px));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M50 14 L92 108 H74 L50 52 L26 108 H8 Z' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M50 47c12.2 0 22 9.8 22 22 0 14.6-22 39-22 39s-22-24.4-22-39c0-12.2 9.8-22 22-22z' fill='rgba(75,156,211,0.30)' stroke='rgba(255,255,255,0.22)' stroke-width='2'/%3E%3Ccircle cx='50' cy='69' r='8' fill='rgba(255,255,255,0.22)'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(-8deg);
    pointer-events: none;
  }

  /* The photograph sits flush with the copy beside it — pinned up at the
     faintest angle, with the product colour behind it. */
  .a-portrait {
    --tilt: -0.5deg;
    box-shadow: 7px 7px 0 var(--carolina);
    transform: rotate(var(--tilt));
    animation: o-card-in 480ms var(--ease) 90ms backwards;
  }

  .a-panel { box-shadow: 7px 7px 0 var(--navy); }

  .a-page .o-note {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .a-page .o-note::before,
  .a-page .o-note::after {
    content: "";
    height: 2px;
    flex: 1;
    background: var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .a-hero h1, .a-portrait { animation: none; }
  .a-portrait { transform: none; }
}