/* Alpha Epsilon Rho — Phi Theta Kappa Honor Society, Bellevue College
   One stylesheet, no build step. Edit this file directly.
   Palette follows Bellevue College's own institutional colours so the chapter
   reads as part of the college. Type is Source Sans 3 (Robert Slimbach, who
   also drew BC's Myriad Pro). Never add the PTK seal or Key logo, and never
   use BC's logo or wordmark — this is a student chapter site, not a BC page.

   ACCESSIBILITY RULE: --cyan (2.5:1) and --orange (2.7:1) on white both FAIL
   WCAG AA for text.
   Cyan is a fill and graphic accent only — button backgrounds, arrows, rules,
   the monogram. Link text on light backgrounds uses --blue (~10.8:1), and
   orange text on light uses --orange-ink (4.9:1). Both raw accents are fine
   as text on --blue-deep. */

:root {
  --blue: #003D79;
  --blue-deep: #162F57;
  --blue-mid: #00559E;
  --cyan: #00AEEF;
  --sky: #DCF2FA;
  --sky-mid: #AFE6FA;
  --gray: #EBEEF2;
  --orange: #DC8A2E;        /* Phi Theta Kappa accent, measured from ptk.org */
  --orange-ink: #A85F12;    /* darkened for text use: 4.87:1 on white */
  --ptk-navy: #1C3063;      /* Phi Theta Kappa navy */
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --border: #E5E7EB;
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --on-blue: #C6DEF2;
  --hero-ink: #FFFFFF;
  --label-ink: #00559E;
  --serif: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow: 0 6px 24px rgba(0, 0, 0, .07);
  --pad: 96px;
  --sec: 96px;
  --wrap: 1200px;
}

@media (max-width: 62rem) { :root { --pad: 40px; --sec: 72px; } }
@media (max-width: 40rem) { :root { --pad: 20px; --sec: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

::selection { background: var(--cyan); color: var(--blue-deep); }
::-moz-selection { background: var(--cyan); color: var(--blue-deep); }

html { scrollbar-color: var(--sky-mid) var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--sky-mid); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--blue-mid); }

body {
  margin: 0;
  caret-color: var(--blue-mid);
  text-underline-offset: .16em;
  text-decoration-thickness: 1.5px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  text-wrap: balance;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  color: var(--blue);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(32px, 5.2vw, 56px); letter-spacing: -.028em; }
h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -.022em; }
h3 { font-size: 21px; font-weight: 600; letter-spacing: -.011em; }
p { margin: 0 0 1.1em; }
a { color: var(--blue); text-underline-offset: .18em; }
a:not(.btn):hover { color: var(--blue-mid); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--blue-deep); }
.btn-solid:hover, .btn-solid:focus-visible { color: #fff; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }
.navy :focus-visible, .hero :focus-visible, .page-head :focus-visible, .site-head :focus-visible, .site-foot :focus-visible { outline-color: var(--orange); }

.skip { position: absolute; left: -9999px; background: var(--cyan); color: var(--blue-deep); padding: .75rem 1.25rem; font-weight: 700; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.narrow { max-width: 68ch; }

/* Measure: prose holds to a readable line length everywhere, including inside
   panels. Grid cells are already narrower, so this only bites on full-width text. */
p, .checklist li, .steps li, .themes li, .faq .ans { max-width: 72ch; }
.rule-center + p, [style*="text-align:center"] p, .marquee-item, .foot-legal p { max-width: none; }
.status p, .ledger .note, .note-box p { max-width: 68ch; }

.lbl { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label-ink); }
.lbl-light { color: var(--sky-mid); }

/* ---------- header ---------- */
.site-head { background: var(--blue-deep); }
.head-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: baseline; gap: 11px; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand strong { font-family: var(--serif); font-weight: 900; font-size: 27px; color: var(--cyan); letter-spacing: .03em; }
.brand span { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #93A6BC; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.site-nav > a:not(.btn) { font-size: 14px; color: #E8EDF3; text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.site-nav > a:not(.btn):hover { color: var(--cyan); }
.site-nav > a:not(.btn)[aria-current="page"] { color: var(--cyan); border-bottom-color: var(--cyan); }

/* ---------- buttons ---------- */
.btn { display: inline-block; font-size: 15px; font-weight: 700; padding: 15px 28px; border-radius: 6px; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: var(--sans); }
.btn-primary { background: var(--cyan); color: var(--blue-deep); }
.btn-primary:hover { background: #33C1F3; color: var(--blue-deep); }
.btn-solid { background: var(--blue); color: #fff; }
.btn-solid:hover { background: var(--blue-mid); color: #fff; }
.btn-pill { border-radius: 999px; padding: 11px 20px; font-size: 14px; }
.link-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--blue); text-decoration: none; border-bottom: 2px solid var(--cyan); padding-bottom: 4px; }

.link-cta-light { color: #FFFFFF; border-bottom-color: var(--cyan); font-weight: 600; }
.link-cta-light:hover { color: var(--sky-mid); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 34px; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--blue); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(0,22,48,.97) 0%, rgba(0,33,71,.93) 42%, rgba(0,33,71,.66) 100%); }
.hero .wrap { position: relative; padding-top: 104px; padding-bottom: 104px; }
.hero h1 { font-size: clamp(38px, 7.2vw, 88px); color: var(--hero-ink); max-width: 14ch; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.hero .lede { font-size: clamp(17px, 1.7vw, 19px); line-height: 1.55; color: var(--on-blue); max-width: 620px; margin-top: 24px; }
.hero .lbl { margin-bottom: 26px; display: block; }

.page-head { background: var(--blue); position: relative; overflow: hidden; }
.page-head .wrap { position: relative; padding-top: 84px; padding-bottom: 88px; }
.page-head h1 { color: var(--hero-ink); max-width: 16ch; text-wrap: balance; }
.page-head .lede { font-size: clamp(17px, 1.7vw, 19px); line-height: 1.6; color: var(--on-blue); max-width: 660px; margin: 22px 0 0; }
.page-head .lbl { margin-bottom: 22px; display: block; }
.watermark { position: absolute; right: -50px; top: -20px; font-family: var(--serif); font-weight: 900; font-size: 260px; line-height: .8; color: var(--cyan); opacity: .07; pointer-events: none; user-select: none; }
@media (max-width: 62rem) { .watermark { display: none; } }

/* ---------- sections ---------- */
section { padding: var(--sec) 0; }
.tint { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.navy { background: var(--blue-deep); }
.navy h2, .navy h3 { color: #fff; }
.navy p { color: var(--on-blue); }
.lead { font-size: clamp(17px, 1.8vw, 19px); color: var(--ink-soft); max-width: 60ch; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow); padding: 34px 30px; text-decoration: none; display: block; color: inherit; }
.card h3 { margin-top: 14px; }
.card p:last-child { margin-bottom: 0; }
.card-plain { box-shadow: none; }
.card-dash { background: none; border: 1px dashed #D8DDE4; border-top: 1px dashed #D8DDE4; box-shadow: none; }

/* overlapping card row, pulled up over the hero boundary */
.overlap { margin-top: -110px; position: relative; padding-top: 0; }
@media (max-width: 62rem) { .overlap { margin-top: -60px; } }

/* ---------- status ledger: the chapter's record, stated plainly ---------- */
.ledger { background: var(--sky); border: 1px solid var(--sky-mid); border-radius: 9px; padding: 44px 48px; }
@media (max-width: 40rem) { .ledger { padding: 28px 24px; } }
.ledger-rule { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.ledger-rule span { width: 34px; height: 3px; background: var(--cyan); flex-shrink: 0; }
.ledger dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; margin: 0; }
.ledger dt { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label-ink); }
.ledger dd { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; color: var(--blue); margin: 8px 0 0; }
.ledger dd.vacant { color: #9A3412; }
.ledger .note { margin: 32px 0 0; padding-top: 26px; border-top: 1px solid var(--sky-mid); color: #5A5440; font-size: 16px; line-height: 1.7; }

.status { background: var(--sky); border: 1px solid var(--sky-mid); border-radius: 9px; padding: 34px 38px 34px 40px; margin: 0 0 1.5rem; position: relative; }
.status::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--cyan); }
.status p { font-size: 17px; line-height: 1.75; color: #4A4533; margin: 0; }
.status strong { color: var(--blue); }
.note-box { background: var(--surface); border: 1px dashed #D8DDE4; border-radius: 9px; padding: 22px 24px; }
.note-box p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.note { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- zipper: image beside a text column ---------- */
.zip { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; }
.zip img { width: 100%; height: 430px; object-fit: cover; border-radius: 0 9px 9px 0; }
.zip-rev img { border-radius: 9px 0 0 9px; }
.zip-text { padding-right: var(--pad); }
.zip-rev .zip-text { padding-right: 0; padding-left: var(--pad); }
@media (max-width: 62rem) {
  .zip { grid-template-columns: 1fr; gap: 32px; }
  .zip img { height: 260px; border-radius: 0; }
  .zip-text { padding: 0 var(--pad); }
  .zip-rev .zip-text { padding: 0 var(--pad); }
  .zip-rev { direction: ltr; }
  .zip-rev > * { order: 0; }
}

/* ---------- stat badges ---------- */
.badge { width: 68px; height: 68px; border-radius: 999px; background: var(--sky); border: 1px solid var(--sky-mid); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.stat { text-align: center; }
.stat h3 { margin-top: 22px; }

.award-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.award-list li { border-left: 1px solid rgba(255,255,255,.22); padding-left: 22px; }
.award-list h3 { font-size: 20px; color: var(--cyan); line-height: 1.3; }
.award-list p { font-size: 15.5px; line-height: 1.7; color: var(--on-blue); margin: 12px 0 0; }
.award-list li.pending { border-left-color: rgba(255,255,255,.1); }
.award-list li.pending h3, .award-list li.pending p { color: #93A6BC; }

/* numbered steps — used only where order carries meaning */
.steps { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { display: flex; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--border); font-size: 17px; }
.steps li:last-child { border-bottom: none; }
.steps li::before { counter-increment: s; content: "0" counter(s); font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--blue-mid); flex-shrink: 0; width: 28px; }

.checklist { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.checklist li { padding-left: 1.6rem; position: relative; margin-bottom: .7rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .62em; width: 13px; height: 1.5px; background: var(--orange); }
.themes { padding: 0; margin: 30px 0 0; list-style: none; counter-reset: t; }
.themes li { display: flex; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--border); font-size: 16.5px; line-height: 1.6; }
.themes li::before { counter-increment: t; content: counter(t); font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--blue-mid); flex-shrink: 0; width: 28px; }

/* ---------- tables ---------- */
.data { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
caption { text-align: left; font-size: 14.5px; color: var(--ink-soft); padding: 0 0 .7rem; }
th, td { text-align: left; padding: 16px 28px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
th { background: var(--gray); font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
td.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-family: var(--serif); font-weight: 800; font-size: 18px; color: var(--blue); text-align: right; }
.table-scroll { overflow-x: auto; }

/* ---------- forms ---------- */
form { max-width: 560px; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow); padding: 40px 44px; max-width: none; }
@media (max-width: 40rem) { .form-card { padding: 26px 22px; } }
.field { margin-bottom: 18px; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
label { display: block; font-size: 14px; font-weight: 500; color: var(--blue); margin-bottom: 7px; }
.hint { display: block; font-weight: 400; font-size: 13px; color: var(--ink-soft); }
input, select, textarea { caret-color: var(--blue-mid); width: 100%; padding: 14px 15px; font: inherit; font-size: 16px; font-family: var(--sans); color: var(--ink); border: 1px solid #D3D9E0; border-radius: 6px; background: var(--surface); }
textarea { min-height: 130px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--blue); }
.form-status { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 6px; font-size: 15.5px; }
.form-status[data-state="ok"] { background: #E7F3EA; border: 1px solid #2E7D48; color: #1C5230; }
.form-status[data-state="error"] { background: #FBEAEA; border: 1px solid #A3282C; color: #7E1E22; }
.form-status:empty { display: none; }

.split { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 80px; align-items: start; }
@media (max-width: 62rem) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- footer ---------- */
.site-foot { background: var(--blue-deep); padding-top: 80px; position: relative; overflow: hidden; }
.site-foot .watermark { right: -40px; top: auto; bottom: -110px; font-size: 260px; opacity: .05; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 48px; position: relative; }
.site-foot h2 { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); font-family: var(--sans); margin-bottom: 18px; }
.site-foot .mark { font-family: var(--serif); font-weight: 900; font-size: 30px; color: var(--cyan); letter-spacing: .03em; }
.site-foot p { color: #93A6BC; font-size: 15px; line-height: 1.65; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-foot a { color: #E8EDF3; font-size: 15px; text-decoration: none; }
.site-foot a:hover { color: var(--cyan); }
.foot-legal { margin-top: 64px; padding: 26px 0 30px; border-top: 1px solid rgba(255,255,255,.12); position: relative; }
.foot-legal p { color: #9DB0C6; font-size: 12.5px; line-height: 1.7; margin-bottom: 8px; }
.foot-legal p:last-child { margin-bottom: 0; }


/* ---------- BC-style curved band divider ---------- */
.curve-b { border-radius: 0 0 50% 50% / 0 0 72px 72px; }
.curve-t { border-radius: 50% 50% 0 0 / 72px 72px 0 0; margin-top: -1px; position: relative; }
@media (max-width: 40rem) { .curve-b, .curve-t { border-radius: 0; } }


/* ================= PTK layer: orange accent, laurel motif, motion ================= */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* PTK sets a short orange rule under section headings — see ptk.org scholarships */
.rule-ptk { position: relative; padding-bottom: 18px; }
.rule-ptk::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--orange); border-radius: 2px; }
.navy .rule-ptk::after, .hero .rule-ptk::after { background: var(--orange); }
.rule-center { text-align: center; }
.rule-center.rule-ptk::after { left: 50%; transform: translateX(-50%); }

/* Laurel-leaf field: original geometry, evoking the academic laurel rather than
   reproducing any Society artwork. Decorative only, never carries meaning. */
.leaffield { position: relative; overflow: hidden; }
.leaffield::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23DC8A2E' fill-opacity='.18'%3E%3Cpath d='M40 60c26-26 62-30 62-30s-4 36-30 62-62 30-62 30 4-36 30-62z'/%3E%3Cpath d='M232 28c22 22 26 53 26 53s-31-4-53-26-26-53-26-53 31 4 53 26z' fill-opacity='.12'/%3E%3Cpath d='M196 196c26-26 62-30 62-30s-4 36-30 62-62 30-62 30 4-36 30-62z' fill-opacity='.14'/%3E%3Cpath d='M96 232c18 18 21 43 21 43s-25-3-43-21-21-43-21-43 25 3 43 21z' fill-opacity='.10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 340px 340px;
}
.leaffield > * { position: relative; }
.leaffield-dark::before { opacity: .42; filter: brightness(1.35); background-size: 420px 420px; }

/* Orange callout variant of the ledger/status panel */
.warm { background: #FDF4E9; border-color: #F0DCC0; }
.warm .note, .warm p { color: #5A4526; }

/* ---------- marquee: PTK transfer partners ---------- */
.marquee { overflow: hidden; position: relative; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 0; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-item { display: flex; align-items: center; gap: 14px; padding: 0 30px; white-space: nowrap; font-size: 18px; font-weight: 600; color: var(--blue); }
.marquee-item span { font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.marquee-item::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--orange); flex-shrink: 0; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- scroll reveal + micro-interactions ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
.card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
a.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.10); border-color: var(--sky-mid); }
.btn { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.btn:active { transform: translateY(1px); }
.link-cta::after { transition: transform .18s ease; }
.link-cta:hover::after { transform: translateX(4px); }
.site-nav a { transition: color .16s ease, border-color .16s ease; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; transform: none; }
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .hero h1 .ln > span { transform: none !important; opacity: 1 !important; }
  .hero-media img { transform: none !important; animation: none !important; }
  a.card:hover { transform: none; }
  .link-cta:hover::after { transform: none; }
}

/* ================= depth pass: timeline, FAQ, scorecard, rubric ================= */

/* Vertical timeline. Order carries meaning here, so the markers are dates. */
.timeline { list-style: none; margin: 34px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--sky-mid), var(--orange)); }
.timeline li { position: relative; padding: 0 0 30px 40px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--surface); border: 3px solid var(--blue-mid); }
.timeline li.now::before { border-color: var(--orange); background: var(--orange); }
.timeline .yr { font-variant-numeric: tabular-nums; display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }
.timeline h3 { margin: 6px 0 6px; }
.timeline p { margin: 0; color: var(--ink-soft); font-size: 16.5px; }

/* FAQ — native <details>, so it works with zero JS and is keyboard accessible. */
.faq { border-top: 1px solid var(--border); margin-top: 30px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font-size: 18px; font-weight: 600; color: var(--blue); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; margin-top: -7px; border-right: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--blue-mid); }
.faq .ans { padding: 0 44px 24px 0; }
.faq .ans p { margin: 0 0 .8em; color: var(--ink-soft); }
.faq .ans p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Five Star scorecard: each category plus where the chapter honestly stands. */
.score { display: grid; gap: 18px; margin-top: 34px; }
.score-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 26px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow); padding: 28px 30px; }
.score-row .n { font-size: 30px; font-weight: 700; color: var(--orange-ink); line-height: 1; }
.score-row h3 { margin: 0 0 8px; }
.score-row p { margin: 0; font-size: 16.5px; color: var(--ink-soft); }
.score-state { font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; text-align: center; white-space: nowrap; }
.state-block { background: #FDECE4; color: #8A3D12; }
.state-ready { background: var(--sky); color: var(--blue); }
@media (max-width: 62rem) { .score-row { grid-template-columns: minmax(0, 1fr); gap: 16px; } .score-state { justify-self: start; } }

/* Hallmark rubric weighting */
.rubric { margin-top: 30px; display: grid; gap: 16px; }
.rubric-row { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 54px; gap: 18px; align-items: center; font-size: 16.5px; }
.rubric-bar { height: 13px; border-radius: 999px; background: var(--gray); overflow: hidden; }
.rubric-bar span { display: block; height: 100%; background: var(--orange); border-radius: 999px; }
.rubric-row b { font-variant-numeric: tabular-nums; text-align: right; color: var(--blue); }
@media (max-width: 40rem) { .rubric-row { grid-template-columns: minmax(0, 1fr) 46px; } .rubric-bar { grid-column: 1 / -1; } }

/* Definition grid — term/detail pairs that are not a sequence */
.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 44px; margin: 30px 0 0; }
.defs > div { padding: 20px 0; border-top: 2px solid var(--sky-mid); }
.defs dt { font-weight: 700; color: var(--blue); font-size: 17.5px; }
.defs dd { margin: 7px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }


/* ================= icon system ================= */
/* One authored set, 24px grid, 1.75 stroke. Drawn, never a unicode glyph. */
.ico { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }
.ico-lg { width: 28px; height: 28px; }
.link-cta .ico { width: 17px; height: 17px; transition: transform .22s cubic-bezier(.16,1,.3,1); }
.link-cta:hover .ico { transform: translateX(4px); }
.faq summary .ico { position: absolute; right: 6px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--orange-ink); transition: transform .22s cubic-bezier(.16,1,.3,1); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.badge .ico { width: 28px; height: 28px; color: var(--blue); stroke-width: 1.6; }

/* ================= the authored moment ================= */
/* One orchestrated hero entrance, masked line by line. Everything else stays
   still — scattered entrances on every section is the pattern this replaces. */
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span { display: block; }
.js .hero h1 .ln > span { transform: translateY(105%); opacity: 0; animation: lift .95s cubic-bezier(.16,1,.3,1) forwards; }
.js .hero h1 .ln:nth-child(1) > span { animation-delay: .06s; }
.js .hero h1 .ln:nth-child(2) > span { animation-delay: .15s; }
.js .hero h1 .ln:nth-child(3) > span { animation-delay: .24s; }
@keyframes lift { to { transform: translateY(0); opacity: 1; } }
.js .hero .lede, .js .hero .actions { opacity: 0; animation: fade .8s cubic-bezier(.16,1,.3,1) .34s forwards; }
.js .hero .actions { animation-delay: .44s; }
@keyframes fade { to { opacity: 1; } }
.js .hero-media img { animation: settle 1.6s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ================= section nav (long pages) ================= */
.secnav { position: sticky; top: 0; z-index: 20; background: rgba(250,250,250,.93); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.secnav ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.secnav ol::-webkit-scrollbar { display: none; }
.secnav a { display: block; padding: 15px 16px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .16s ease, border-color .16s ease; }
.secnav a:hover { color: var(--blue); }
.secnav a[aria-current="true"] { color: var(--blue); border-bottom-color: var(--orange); }
@media (max-width: 40rem) { .secnav a { padding: 13px 12px; font-size: 13.5px; } }

/* ================= back to top ================= */
.totop { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: var(--blue); color: #fff; border: none; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .18s ease; }
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--blue-mid); }
.totop .ico { width: 20px; height: 20px; stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

/* ================= figure treatment ================= */
.fig { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.03em; }

/* ================= mobile navigation ================= */
/* Below 62rem the inline row became 3 stacked lines eating 27% of a phone
   screen. Desktop keeps the row; phones get a disclosure panel. */
.nav-toggle { display: none; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 14px; background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 6px; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nav-toggle:hover { border-color: var(--cyan); }
.nav-toggle .bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle .bars i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .24s cubic-bezier(.16,1,.3,1), opacity .18s ease; }
.nav-toggle .bars i:nth-child(1) { top: 0; }
.nav-toggle .bars i:nth-child(2) { top: 5px; }
.nav-toggle .bars i:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; }
  .head-inner { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blue-deep); border-top: 1px solid rgba(255,255,255,.12);
    padding: 8px var(--pad) calc(16px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 100%); overflow-y: auto;
    display: none;
  }
  .site-head { position: relative; }
  .site-head.open .site-nav { display: flex; animation: navIn .26s cubic-bezier(.16,1,.3,1); }
  @keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .site-nav > a:not(.btn) { min-height: 48px; display: flex; align-items: center; font-size: 16px; padding: 0; border-bottom: 1px solid rgba(255,255,255,.09); border-left: 0; }
  .site-nav > a:not(.btn)[aria-current="page"] { border-bottom-color: var(--cyan); }
  .site-nav .btn-pill { margin-top: 14px; min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 8px; }
}

/* ================= touch targets ================= */
@media (hover: none), (max-width: 62rem) {
  .link-cta { min-height: 44px; align-items: center; }
  .faq summary { padding-top: 18px; padding-bottom: 18px; min-height: 44px; }
  .secnav a { min-height: 44px; display: flex; align-items: center; }
  .site-foot a, .foot-grid a { display: inline-flex; min-height: 40px; align-items: center; }
  .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .totop { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 52px; height: 52px; }
}
/* touch devices get a real pressed state, since hover never fires */
@media (hover: none) {
  a.card:active { transform: scale(.985); }
  .btn:active { transform: scale(.985); }
  a.card:hover { transform: none; box-shadow: var(--shadow); }
}

/* ================= marquee control (WCAG 2.2.2) ================= */
.marquee-wrap { position: relative; }
.mq-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--blue); cursor: pointer; box-shadow: var(--shadow); }
.mq-toggle .ico { width: 16px; height: 16px; stroke-width: 2; }
.mq-toggle:hover { border-color: var(--sky-mid); }
.marquee.paused .marquee-track { animation-play-state: paused; }
@media (max-width: 40rem) { .mq-toggle { right: 8px; width: 44px; height: 44px; } }

/* ================= form validation ================= */
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #A3282C; }
.err { display: none; margin-top: 6px; font-size: 13.5px; color: #8E1F23; }
.field.invalid .err { display: block; }
button[aria-busy="true"] { opacity: .75; pointer-events: none; }

/* ================= FAQ filter ================= */
.faq-filter { position: relative; margin-top: 8px; }
.faq-filter input { padding-left: 42px; min-height: 48px; }
.faq-filter .ico { position: absolute; left: 14px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--ink-soft); pointer-events: none; }
.faq details[hidden] { display: none; }
.faq-none { display: none; padding: 26px 0; color: var(--ink-soft); }
.faq-none.on { display: block; }

/* ================= copy to clipboard ================= */
.copy { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 5px 15px; margin-left: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--blue); background: var(--sky); border: 1px solid var(--sky-mid); border-radius: 999px; cursor: pointer; }
.copy:hover { background: var(--sky-mid); }
.copy .ico { width: 14px; height: 14px; }
.copy.done { background: #E7F3EA; border-color: #2E7D48; color: #1C5230; }

/* narrow phones */
@media (max-width: 22.5rem) {
  :root { --pad: 16px; }
  .hero h1 { font-size: 34px; }
  .brand span { display: none; }
}

/* ================================================================
   SYSTEM LAYER
   209 inline styles across the pages meant every page invented its
   own spacing and panels. These are the shared values instead.
   ================================================================ */

:root {
  --s1: 6px;  --s2: 10px; --s3: 14px; --s4: 20px;
  --s5: 26px; --s6: 34px; --s7: 44px; --s8: 56px;
}

/* spacing scale */
.mt1{margin-top:var(--s1)} .mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)}
.mt5{margin-top:var(--s5)} .mt6{margin-top:var(--s6)} .mt7{margin-top:var(--s7)} .mt8{margin-top:var(--s8)}
.mt0{margin-top:0} .mb0{margin-bottom:0}
/* vertical flow: siblings space themselves, so nothing needs a one-off margin */
.flow > * + * { margin-top: var(--flow, var(--s4)); }
.flow-tight { --flow: var(--s2); }
.flow-loose { --flow: var(--s6); }
.center { text-align: center; }
.center .rule-ptk::after, .center > .actions { left: 50%; }
.center > .actions { justify-content: center; }
.mx-auto { margin-inline: auto; }

/* ================= buttons ================= */
/* One button, five variants, three sizes. Every state is defined, including
   the ones that only appear when something goes wrong. */
.btn { position: relative; gap: 9px; text-align: center; }
.btn-outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-quiet { background: var(--gray); color: var(--blue); }
.btn-quiet:hover { background: var(--sky-mid); color: var(--blue); }
.btn-ghost { background: transparent; color: var(--blue); padding-inline: 12px; }
.btn-ghost:hover { background: var(--sky); }
.on-dark.btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.on-dark.btn-outline:hover { background: #fff; color: var(--blue); }
.btn-sm { font-size: 14px; padding: 10px 18px; min-height: 40px; }
.btn-lg { font-size: 17px; padding: 18px 34px; }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: 46px; height: 46px; }
.btn .ico { width: 17px; height: 17px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--gray); color: #8B95A1; border-color: transparent; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"]::after { content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation-duration: 2.4s; } }

/* ================= panels ================= */
/* Replaces four different hand-rolled tinted boxes. */
.panel { border-radius: 9px; padding: 28px 30px; }
.panel-sky { background: var(--sky); color: #23394F; }
.panel-gray { background: var(--gray); color: #3A4652; }
.panel-warm { background: #FDF4E9; color: #5A4526; }
.panel-outline { background: var(--surface); border: 1px solid var(--border); }
.panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
@media (max-width: 40rem) { .panel { padding: 22px 20px; } }

/* ================= tags ================= */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.tag .ico { width: 13px; height: 13px; }
.tag-blocked { background: #FDECE4; color: #8A3D12; }
.tag-ready   { background: var(--sky); color: var(--blue); }
.tag-done    { background: #E7F3EA; color: #1C5230; }
.tag-neutral { background: var(--gray); color: #3A4652; }

/* ================= pending state ================= */
/* The chapter is honest about what has not started. That deserves a designed
   state, not a greyed-out apology — it is the site's actual argument. */
.pending { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 28px 30px 28px; overflow: hidden; }
.pending::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--orange) 0 14px, transparent 14px 26px); }
.pending h3 { margin-top: 0; }
.pending p { color: var(--ink-soft); margin-bottom: 0; }
.pending .tag { margin-bottom: 14px; }

/* ================= layout utilities ================= */
.cols { display: grid; gap: 22px; }
.cols-1-2 { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
.cols-2-1 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.cols-1-1 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 62rem) { .cols-1-2, .cols-2-1, .cols-1-1 { grid-template-columns: 1fr; } }
.rule { border: 0; border-top: 1px solid var(--border); margin: var(--s7) 0; }
.rule-dark { border-top-color: rgba(255,255,255,.14); }

/* ================= prev / next pager ================= */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: var(--s8); }
.pager a { display: flex; flex-direction: column; gap: 5px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.pager a:hover { border-color: var(--sky-mid); transform: translateY(-2px); }
.pager .dir { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.pager .dir .ico { width: 14px; height: 14px; color: var(--orange-ink); }
.pager .ttl { font-size: 18px; font-weight: 700; color: var(--blue); }
.pager .next { text-align: right; }
.pager .next .dir { justify-content: flex-end; }
.pager a:only-child { grid-column: 2; }
@media (max-width: 40rem) { .pager { grid-template-columns: 1fr; } .pager .next, .pager .next .dir { text-align: left; justify-content: flex-start; } .pager a:only-child { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .pager a:hover { transform: none; } }

/* ================= media card ================= */
.card-media { padding: 0; overflow: hidden; }
.card-media img { width: 100%; height: 190px; object-fit: cover; }
.card-media .body { padding: 26px 28px; }
.card-media .body > :last-child { margin-bottom: 0; }

/* ---- the last repeating one-offs, promoted ---- */
.defs-1 { grid-template-columns: 1fr; }
.on-dark-dt dt { color: #FFFFFF; }
.on-dark-dt dd { color: var(--on-blue); }
.w-full { width: 100%; }
.measure-wide { max-width: 940px; }
.pt0 { padding-top: 0; }
.hallmark { border-top: 3px solid var(--cyan); padding-top: 12px; font-weight: 700; font-size: 17px; color: var(--blue); }
.phase { font-weight: 700; font-size: 15px; color: var(--blue-mid); letter-spacing: .06em; text-transform: uppercase; }
.panel p, .panel-sky p, .panel-gray p { margin: 9px 0 0; font-size: 15.5px; }
.panel p:first-child { margin-top: 0; }

/* ================= gallery ================= */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.gallery a { position: relative; display: block; overflow: hidden; border-radius: 9px; background: var(--gray); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.gallery a:hover img { transform: scale(1.045); }
.gallery a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,33,71,.34), transparent 55%); opacity: 0; transition: opacity .3s ease; }
.gallery a:hover::after { opacity: 1; }
.g-wide { grid-column: span 7; aspect-ratio: 16/10; }
.g-tall { grid-column: span 5; aspect-ratio: 4/5; }
.g-third { grid-column: span 4; aspect-ratio: 4/3; }
.g-half { grid-column: span 6; aspect-ratio: 3/2; }
@media (max-width: 62rem) {
  .g-wide, .g-tall { grid-column: span 12; aspect-ratio: 16/9; }
  .g-third, .g-half { grid-column: span 6; aspect-ratio: 4/3; }
}
@media (max-width: 40rem) { .g-third, .g-half { grid-column: span 12; } }
@media (prefers-reduced-motion: reduce) { .gallery a:hover img { transform: none; } }

/* ================= counters ================= */
.count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ================= hero depth ================= */
.hero-media img { will-change: transform; }
.js .hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 78% 30%, rgba(0,174,239,.18), transparent 60%); }
.hero .wrap { z-index: 2; }

/* richer dark sections: the laurel field gets a light source */
.navy { position: relative; }
.navy::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 15% 0%, rgba(0,174,239,.13), transparent 62%); }
.navy > * { position: relative; z-index: 1; }

/* media card polish */
.card-media { transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease; }
.card-media:hover { box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.card-media img { transition: transform .5s cubic-bezier(.16,1,.3,1); }
a.card-media:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { a.card-media:hover img { transform: none; } }