/* ==========================================================================
   FORMED BY SCRIPTURE
   Hope Experience Church
   ==========================================================================

   Built on the HopeX brand system. Do not introduce colours, typefaces or
   effects that are not in this file — brand fidelity is not negotiable
   (HopeX Operating System, Part 10.1).

   PALETTE     #000000 #FFFFFF · mint #80F6AE · yellow #FFC550
               coral #FF7176 · cyan #00D5D7
   TYPE        Poppins SemiBold/Bold (display) · Montserrat Regular/Medium (body)
   SEMANTICS   yellow = the mission line · mint = Belong · coral = Become
               cyan = Care and handoff · black/white = structure

   The five FORMED dimensions are deliberately NOT colour-coded. Colour
   would make them read as ranked or categorised. Only numerals are tinted.

   CONTENTS
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Rules & section heads
     06  Buttons & links
     07  Header & navigation
     08  Footer
     09  Hero
     10  Season block
     11  Dimension rows & detail
     12  Steps / how it works
     13  The Formation Pathways experience
     14  Pathway result
     15  Messages library
     16  About page
     17  Utility & motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand — fixed. */
  --ink:        #000000;
  --paper:      #FFFFFF;
  --mint:       #80F6AE;
  --yellow:     #FFC550;
  --coral:      #FF7176;
  --cyan:       #00D5D7;

  /* Structure — neutrals derived from ink.
     Every value used for TEXT below clears WCAG AA (4.5:1) on white AND on
     the two wash backgrounds. --decor is the one exception: it is only ever
     used for aria-hidden ornament (arrows, plus signs, dashes, dot
     separators), never for anything a person has to read. */
  --ink-90:     #1A1A1A;   /* 17.4 : 1 on white */
  --ink-70:     #4D4D4D;   /*  8.5 : 1 */
  --ink-55:     #6B6B6B;   /*  5.6 : 1 on white, 5.1 : 1 on wash */
  --ink-40:     #6E6E6E;   /*  5.3 : 1 on white, 4.9 : 1 on wash */
  --decor:      #B5B5B5;   /* ORNAMENT ONLY — never text */
  --rule:       #E0E0E0;
  --rule-heavy: #000000;
  --wash:       #F7F6F4;
  --wash-warm:  #FAF8F5;
  --on-dark-60: rgba(255,255,255,.62);  /* 7.8 : 1 on black */
  --on-dark-40: rgba(255,255,255,.52);  /* 4.9 : 1 on black */
  --rule-dark:  rgba(255,255,255,.18);

  /* Type */
  --display: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --t-hero:    clamp(2.6rem, 7.2vw, 5.75rem);
  --t-xxl:     clamp(2.1rem, 5vw, 3.9rem);
  --t-xl:      clamp(1.75rem, 3.6vw, 2.7rem);
  --t-lg:      clamp(1.35rem, 2.4vw, 1.85rem);
  --t-md:      clamp(1.1rem, 1.6vw, 1.3rem);
  --t-body:    clamp(1rem, 1.15vw, 1.0625rem);
  --t-sm:      .9375rem;
  --t-xs:      .8125rem;
  --t-eyebrow: .75rem;

  /* Space */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --section-y: clamp(4rem, 9vw, 8rem);
  --gutter:    clamp(1.25rem, 5vw, 3.5rem);
  --shell:     1240px;
  --measure:   68ch;
  --measure-tight: 58ch;

  --focus: var(--cyan);
}

/* --------------------------------------------------------------------------
   02 · RESET & BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Fieldsets carry a default border, padding and an intrinsic min-width that
   breaks grid and flex layouts. Every statement in the reflection is a real
   fieldset for accessibility, so this reset matters. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* One visible focus treatment, everywhere. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--yellow); color: var(--ink); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-5);
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-sm); text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s-4); }

/* --------------------------------------------------------------------------
   03 · TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); letter-spacing: -.015em; }
h4 { font-size: var(--t-md); letter-spacing: -.01em; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 var(--s-4);
  display: block;
}
.eyebrow--onDark { color: var(--on-dark-60); }

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: var(--measure-tight);
}
.lede--onDark { color: var(--on-dark-60); }

.pullquote {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.24;
  letter-spacing: -.015em;
  max-width: 22ch;
}

/* Scripture. Always NLT, always attributed. */
.scripture {
  border-left: 3px solid var(--yellow);
  padding-left: var(--s-5);
  margin: var(--s-6) 0;
  max-width: var(--measure-tight);
}
.scripture p {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.42;
  letter-spacing: -.01em;
  margin-bottom: var(--s-3);
}
.scripture cite {
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
}
.scripture-refs {
  font-size: var(--t-sm);
  color: var(--ink-55);
  letter-spacing: .01em;
}

.mission-line {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
}
.mark-yellow { background: var(--yellow); padding: 0 .18em; }

/* --------------------------------------------------------------------------
   04 · LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--dark  { background: var(--ink); color: var(--paper); }
.section--wash  { background: var(--wash); }
.section--warm  { background: var(--wash-warm); }

.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark p { color: var(--on-dark-60); }
.section--dark .scripture p { color: var(--paper); }
/* The attribution keeps --ink-55 by default, which is unreadable on black. */
.section--dark .scripture cite,
.section--dark .scripture-refs,
.hero .scripture cite { color: var(--on-dark-60); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
/* Grid and flex items default to a min-size of auto, which refuses to shrink
   below their content. On a 320px phone that pushes the page sideways. */
.grid-2 > * { min-width: 0; }
.grid-2--lead { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .grid-2--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   05 · RULES & SECTION HEADS
   -------------------------------------------------------------------------- */

.rule       { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--ink  { border-top: 2px solid var(--ink); }
.rule--dark { border-top: 1px solid var(--rule-dark); }

.section-head {
  border-top: 2px solid var(--ink);
  padding-top: var(--s-4);
  margin-bottom: var(--s-7);
}
.section--dark .section-head { border-top-color: var(--paper); }
.section-head .eyebrow { margin-bottom: var(--s-5); }

/* --------------------------------------------------------------------------
   06 · BUTTONS & LINKS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-4) var(--s-7);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--paper); color: var(--ink); }

.btn--onDark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--onDark:hover { background: transparent; color: var(--paper); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--ghostOnDark { background: transparent; color: var(--paper); border-color: var(--rule-dark); }
.btn--ghostOnDark:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn--sm { min-height: 46px; padding: var(--s-2) var(--s-5); font-size: var(--t-xs); }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .32; pointer-events: none;
}

.btn-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6);
}

/* Text link with a rule that grows. */
.link {
  color: inherit;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: .04em;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  transition: border-color .16s ease, color .16s ease;
}
.link:hover { border-bottom-color: var(--yellow); }
.link--onDark { border-bottom-color: var(--on-dark-40); }
.link--onDark:hover { border-bottom-color: var(--yellow); }

.link-quiet { color: var(--ink-70); text-decoration: underline; text-underline-offset: 3px; }
.link-quiet:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   07 · HEADER & NAVIGATION
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  min-height: 74px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.2;
  display: block;
}
.wordmark span { display: block; font-weight: 500; color: var(--ink-55); letter-spacing: .1em; }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.nav a {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-70);
  padding: var(--s-2) 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a[aria-current='page'] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

.nav__cta a {
  border: 2px solid var(--ink); color: var(--ink); font-weight: 600;
  padding: var(--s-2) var(--s-4);
}
.nav__cta a:hover { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s-3);
  background: none; border: 0;
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  padding: var(--s-3); margin-right: calc(var(--s-3) * -1);
  min-height: 48px;
}
.nav-toggle__bars { display: block; width: 22px; height: 10px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px;
  background: var(--ink); transition: transform .2s ease, top .2s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { top: 8px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after  { top: 4px; transform: rotate(-45deg); }

.nav-panel {
  position: fixed; inset: 74px 0 0 0; z-index: 99;
  background: var(--paper);
  padding: var(--s-6) var(--gutter) var(--s-8);
  overflow-y: auto;
  display: none;
}
.nav-panel[data-open='true'] { display: block; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel li { border-bottom: 1px solid var(--rule); }
.nav-panel a {
  display: block; padding: var(--s-5) 0;
  font-family: var(--display); font-weight: 600;
  font-size: 1.5rem; letter-spacing: -.01em;
  text-decoration: none; color: var(--ink);
}
.nav-panel a[aria-current='page'] { color: var(--ink-55); }
.nav-panel .btn { width: 100%; margin-top: var(--s-6); }

body[data-nav-open='true'] { overflow: hidden; }

@media (min-width: 940px) {
  .nav { display: block; }
  .nav-toggle, .nav-panel { display: none !important; }
}

/* --------------------------------------------------------------------------
   08 · FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--on-dark-60);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-sm);
}
.site-footer a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--on-dark-40); }
.site-footer a:hover { border-bottom-color: var(--yellow); }

.site-footer__top {
  display: grid; gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule-dark);
}
.site-footer h2 {
  font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-40); font-weight: 600; margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--s-3); }

.site-footer__lockup {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-md); color: var(--paper);
  letter-spacing: -.01em; line-height: 1.3;
}
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  justify-content: space-between; align-items: baseline;
  padding-top: var(--s-5);
  font-size: var(--t-xs);
  color: var(--on-dark-40);
}
.crisis {
  border: 1px solid var(--rule-dark);
  border-left: 3px solid var(--cyan);
  padding: var(--s-4);
  font-size: var(--t-xs);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   09 · HERO
   -------------------------------------------------------------------------- */

.hero {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(4rem, 12vw, 9rem) clamp(3.5rem, 9vw, 7rem);
  position: relative; overflow: hidden;
}
.hero__title {
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: .99;
  letter-spacing: -.035em;
  max-width: 15ch;
  margin-bottom: var(--s-6);
  color: var(--paper);
}
.hero__lede { max-width: 46ch; font-size: var(--t-md); color: var(--on-dark-60); line-height: 1.55; }
.hero__chips {
  display: flex; gap: 0; margin-bottom: var(--s-6);
  width: 132px; height: 8px;
}
.hero__chips span { flex: 1; }
.hero__chips span:nth-child(1) { background: var(--mint); }
.hero__chips span:nth-child(2) { background: var(--yellow); }
.hero__chips span:nth-child(3) { background: var(--coral); }
.hero__chips span:nth-child(4) { background: var(--cyan); }

/* Page header for interior pages. */
.page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); }
.page-head h1 { max-width: 18ch; margin-bottom: var(--s-5); }

/* --------------------------------------------------------------------------
   10 · THE LIVE SEASON, IN THE HERO
   --------------------------------------------------------------------------
   Sits to the right of the headline on a laptop, and below it on a phone.
   This is what fills the hero instead of a photograph: something true,
   current and specific to HopeX rather than a picture of people smiling.
   -------------------------------------------------------------------------- */

.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.hero__aside {
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s-5);
}

.hero-season__label {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-60);
  margin: 0 0 var(--s-4);
}

.hero-season__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1; letter-spacing: -.03em;
  color: var(--ink);
  background: var(--mint);
  display: inline-block;
  padding: .04em .14em;
  margin: 0 0 var(--s-4);
  max-width: none;
}
.hero-season__name[data-accent='coral']  { background: var(--coral); }
.hero-season__name[data-accent='yellow'] { background: var(--yellow); }
.hero-season__name[data-accent='cyan']   { background: var(--cyan); }
.hero-season__name[data-accent='grey']   { background: #BFBFBF; }

.hero-season__meta {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 var(--s-4);
}

.hero-season__note {
  font-size: var(--t-sm); line-height: 1.6;
  color: var(--on-dark-60);
  margin: 0; max-width: 36ch;
}

.hero-season__anchors {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.hero-season__anchors li {
  font-size: var(--t-xs); letter-spacing: .04em;
  border: 1px solid var(--rule-dark);
  padding: var(--s-1) var(--s-3);
  color: var(--on-dark-60);
}

/* --------------------------------------------------------------------------
   11 · DIMENSION ROWS & DETAIL
   -------------------------------------------------------------------------- */

.dim-list { border-top: 1px solid var(--rule); }

.dim-row {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  align-items: start;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background .16s ease, padding .16s ease;
}
.dim-row:hover { background: var(--wash-warm); }
@media (min-width: 700px) {
  .dim-row { grid-template-columns: 4.5rem 1fr auto; gap: var(--s-6); }
  .dim-row:hover { padding-inline: var(--s-4); }
}

.dim-row__num {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-sm); letter-spacing: .04em;
  background: var(--yellow); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: none;
}
.dim-row__name {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-lg); letter-spacing: -.018em;
  line-height: 1.15; margin-bottom: var(--s-2);
}
.dim-row__statement { font-size: var(--t-sm); color: var(--ink-70); max-width: 52ch; margin: 0; }
.dim-row__arrow {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  color: var(--decor); align-self: center; display: none;
}
@media (min-width: 700px) { .dim-row__arrow { display: block; } }
.dim-row:hover .dim-row__arrow { color: var(--ink); }

/* The five dimensions now sit on black on the homepage. Every borrowed
   light-mode value has to be restated: hairlines, statement text, the
   hover wash and the arrow. The yellow numeral chip needs nothing — black
   on yellow reads at 13:1 on either ground. */
.section--dark .dim-list { border-top-color: var(--rule-dark); }
.section--dark .dim-row { border-bottom-color: var(--rule-dark); }
.section--dark .dim-row:hover { background: rgba(255,255,255,.055); }
.section--dark .dim-row__name { color: var(--paper); }
.section--dark .dim-row__statement { color: var(--on-dark-60); }
.section--dark .dim-row__arrow { color: var(--on-dark-40); }
.section--dark .dim-row:hover .dim-row__arrow { color: var(--paper); }
.section--dark .pullquote { color: var(--paper); }

/* Detail article on the dimensions page. */
.dim-detail { padding-block: var(--section-y); border-bottom: 1px solid var(--rule); scroll-margin-top: 6rem; }
.dim-detail:last-of-type { border-bottom: 0; }
.dim-detail__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.dim-detail__areas {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-55);
}
.dim-detail__areas li { display: flex; align-items: center; gap: var(--s-4); }
.dim-detail__areas li:not(:last-child)::after { content: ''; width: 4px; height: 4px; background: var(--decor); }

.vision-line {
  display: inline-flex; flex-direction: column; gap: 2px;
  border-left: 3px solid var(--ink); padding-left: var(--s-4);
  margin-top: var(--s-6);
}
.vision-line strong {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase;
}
.vision-line span { font-size: var(--t-sm); color: var(--ink-70); }

/* --------------------------------------------------------------------------
   12 · STEPS
   -------------------------------------------------------------------------- */

.steps {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  border-top: 1px solid var(--rule);
}
.steps li {
  list-style: none;
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .steps li + li { border-left: 1px solid var(--rule); padding-left: var(--s-5); }
}
.steps__num {
  font-family: var(--display); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .16em; color: var(--ink-40); display: block; margin-bottom: var(--s-4);
}
.steps h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.steps p { font-size: var(--t-sm); color: var(--ink-70); margin: 0; }

/* Learn / Practice / Form */
.lpf { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 720px) { .lpf { grid-template-columns: repeat(3, 1fr); } }
.lpf div { border-top: 3px solid var(--yellow); padding-top: var(--s-4); }
.lpf strong {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: -.02em;
  display: block; margin-bottom: var(--s-2);
}
.lpf p { font-size: var(--t-sm); color: var(--ink-70); margin: 0; }
.section--dark .lpf p { color: var(--on-dark-60); }

/* --------------------------------------------------------------------------
   13 · THE FORMATION PATHWAYS EXPERIENCE
   -------------------------------------------------------------------------- */

.fp { padding-block: var(--s-6) var(--s-9); }

.fp-progress { position: sticky; top: 74px; z-index: 50; background: var(--paper); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.fp-progress__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4); margin-bottom: var(--s-3);
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-55);
}
.fp-progress__meta strong { color: var(--ink); font-weight: 600; }
.fp-progress__track { display: flex; gap: 4px; }
.fp-progress__track span { flex: 1; height: 3px; background: var(--rule); }
.fp-progress__track span[data-state='done']    { background: var(--ink); }
.fp-progress__track span[data-state='current'] { background: var(--yellow); }

.fp-section__head { padding-block: var(--s-7) var(--s-6); }
.fp-section__num {
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  background: var(--yellow); width: 2.6rem; height: 2.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
}
.fp-section__head h1 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.fp-section__head p { font-size: var(--t-sm); color: var(--ink-70); max-width: var(--measure-tight); }

.q { border-top: 1px solid var(--rule); padding-block: var(--s-6); }
.q:last-of-type { border-bottom: 1px solid var(--rule); }
.q__legend {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-md); line-height: 1.32; letter-spacing: -.012em;
  padding: 0; margin: 0 0 var(--s-5); max-width: 46ch;
  display: block; width: 100%;
}
.q__num { color: var(--ink-40); font-weight: 500; margin-right: .6em; }

.q__options { display: grid; gap: var(--s-2); }
@media (min-width: 640px) {
  .q__options { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
  .q__options .opt:last-child { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .q__options { grid-template-columns: repeat(5, 1fr); }
  .q__options .opt:last-child { grid-column: auto; }
}

.opt { position: relative; display: block; }
.opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.opt span {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  min-height: 56px; padding: var(--s-3) var(--s-3);
  border: 1.5px solid var(--rule);
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-70);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
  user-select: none;
}
.opt:hover span { border-color: var(--ink-40); color: var(--ink); }
.opt input:checked + span {
  background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600;
}
.opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

/* "I'm not sure" is dignified, never penalised. */
.opt--notsure input:checked + span { background: var(--ink-70); border-color: var(--ink-70); }
.opt--notsure span { font-style: normal; border-style: dashed; }

.fp-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between; align-items: center;
  padding-top: var(--s-7);
}
.fp-note { font-size: var(--t-xs); color: var(--ink-55); max-width: 42ch; margin: 0; }

.fp-intro__scale { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.fp-intro__scale li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.fp-intro__scale strong { font-family: var(--display); font-weight: 600; margin-right: var(--s-3); }

.resume {
  border: 2px solid var(--ink); padding: var(--s-5);
  margin-bottom: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
}
.resume p { font-size: var(--t-sm); margin: 0; }

/* --------------------------------------------------------------------------
   14 · PATHWAY RESULT
   -------------------------------------------------------------------------- */

.pw-hero { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.pw-hero__dim {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1; letter-spacing: -.035em;
  color: var(--paper); margin: var(--s-4) 0 var(--s-5);
  max-width: 14ch;
}
.pw-hero__statement { font-size: var(--t-md); color: var(--on-dark-60); max-width: 44ch; }
.pw-hero__not-a-grade {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-md); letter-spacing: -.01em;
  color: var(--yellow); margin-top: var(--s-6);
}

.pw-secondary {
  border: 1px solid var(--rule-dark); border-left: 3px solid var(--mint);
  padding: var(--s-5); margin-top: var(--s-6); max-width: 52ch;
}
.pw-secondary strong { color: var(--paper); font-family: var(--display); font-weight: 600; }
.pw-secondary p { margin: var(--s-2) 0 0; font-size: var(--t-sm); }

/* Watch / Practice / Respond */
.wpr { border-top: 2px solid var(--ink); }
.wpr__item { border-bottom: 1px solid var(--rule); padding-block: var(--s-7); }
.wpr__label {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: var(--s-4); display: block;
}
.wpr__item[data-kind='watch']    .wpr__label { color: var(--ink); }
.wpr__item[data-kind='practice'] .wpr__label { color: var(--ink); }
.wpr__item[data-kind='respond']  .wpr__label { color: var(--ink); }
.wpr__label::before {
  content: ''; display: inline-block; width: 26px; height: 3px;
  margin-right: var(--s-3); vertical-align: middle;
}
.wpr__item[data-kind='watch']    .wpr__label::before { background: var(--cyan); }
.wpr__item[data-kind='practice'] .wpr__label::before { background: var(--yellow); }
.wpr__item[data-kind='respond']  .wpr__label::before { background: var(--coral); }
.wpr h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.wpr p { color: var(--ink-70); }

/* The season arc. */
.arc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.arc li {
  display: grid; gap: var(--s-2) var(--s-6);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 780px) { .arc li { grid-template-columns: 13rem 1fr; } }
.arc__when {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
}
.arc__when span { display: block; font-weight: 500; color: var(--ink-55); letter-spacing: .06em; margin-top: 2px; }
.arc__what { font-size: var(--t-sm); color: var(--ink-70); margin: 0; }
.arc li[data-reassess='true'] .arc__when { color: var(--ink); }
.arc li[data-reassess='true'] { background: var(--wash-warm); }

/* Uncertainty panel — gentle, never alarming. */
.notsure-panel {
  border: 1px solid var(--rule); border-left: 3px solid var(--cyan);
  background: var(--wash-warm);
  padding: var(--s-6); margin-top: var(--s-7);
}
.notsure-panel h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.notsure-panel p { font-size: var(--t-sm); color: var(--ink-70); }

/* Care block — always present, never triggered. */
.care-block { border-top: 2px solid var(--cyan); padding-top: var(--s-5); }
.care-block__script {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-md); letter-spacing: -.01em;
  line-height: 1.35; margin: var(--s-5) 0; max-width: 30ch;
}

/* SafeOS handoff — mint, because this is Belong: the moment a private
   result becomes a relationship with a person. */
.handoff { border-top: 3px solid var(--mint); padding-top: var(--s-5); }
.handoff__form { margin-top: var(--s-6); }
.handoff__names { display: grid; gap: var(--s-4); }
@media (min-width: 560px) { .handoff__names { grid-template-columns: 1fr 1fr; } }

.handoff input[type='text'] {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--rule);
  background: var(--paper);
  font-family: var(--body);
  font-size: var(--t-body);
  color: var(--ink);
  transition: border-color .15s ease;
}
.handoff input[type='text']:hover { border-color: var(--ink-40); }
.handoff input[type='text']:focus { border-color: var(--ink); }

.handoff__preview {
  margin-top: var(--s-6);
  background: var(--wash-warm);
  border: 1px solid var(--rule);
  padding: var(--s-5);
}
.handoff__msg {
  font-size: var(--t-sm);
  line-height: 1.55;
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  background: var(--paper);
  border-left: 3px solid var(--mint);
  word-break: break-word;
  max-width: none;
}
.handoff__not { font-size: var(--t-xs); color: var(--ink-70); margin: 0; max-width: none; }

.handoff__error {
  min-height: 1.4rem; margin: var(--s-3) 0 0;
  font-size: var(--t-sm); color: var(--ink); font-weight: 500;
}
/* The send button stays DIMMED but CLICKABLE before a name is entered.
   The global .btn[aria-disabled] rule kills pointer events, which would mean
   someone tapping the greyed-out button gets nothing at all — no movement,
   no message, no idea why. Dimmed communicates "not ready yet"; clickable
   lets the page say "add your name so HopeX knows who to follow up with."
   A dead control is never the kinder option. */
.handoff .btn[aria-disabled='true'] {
  opacity: .45;
  pointer-events: auto;
  cursor: pointer;
}

/* Choose-your-own, for flat profiles. */
.choose { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.choose button {
  display: flex; align-items: center; gap: var(--s-4);
  text-align: left; width: 100%;
  padding: var(--s-5);
  border: 1.5px solid var(--rule); background: var(--paper);
  transition: border-color .15s ease, background .15s ease;
}
.choose button:hover { border-color: var(--ink); background: var(--wash-warm); }
.choose strong { font-family: var(--display); font-weight: 600; font-size: var(--t-md); letter-spacing: -.012em; }
.choose span { display: block; font-size: var(--t-sm); color: var(--ink-70); margin-top: 2px; }

.pw-empty { padding-block: var(--s-9); text-align: left; }

/* --------------------------------------------------------------------------
   15 · MESSAGES LIBRARY
   -------------------------------------------------------------------------- */

.filters { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: var(--s-4); margin-bottom: var(--s-7); }
.filters__row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.filter {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
  padding: var(--s-3) var(--s-4); min-height: 44px;
  border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink-70);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.filter:hover { border-color: var(--ink-40); color: var(--ink); }
.filter[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }

.filters__select {
  min-height: 44px; padding: var(--s-2) var(--s-4);
  border: 1.5px solid var(--rule); background: var(--paper);
  font-family: var(--display); font-size: var(--t-xs);
  letter-spacing: .05em; text-transform: uppercase;
}

.msg-grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.msg { display: flex; flex-direction: column; }
.msg__thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9; background: var(--wash);
  border: 1px solid var(--rule); overflow: hidden;
  margin-bottom: var(--s-4);
}
.msg__thumb img { width: 100%; height: 100%; object-fit: cover; }
.msg__thumb--none {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-40); text-align: center; padding: var(--s-4);
}
.msg__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.28); opacity: 0; transition: opacity .16s ease;
}
.msg__thumb:hover .msg__play, .msg__thumb:focus-visible .msg__play { opacity: 1; }
.msg__play span {
  background: var(--paper); color: var(--ink);
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  padding: var(--s-3) var(--s-5);
}
.msg__dim {
  font-family: var(--display); font-weight: 600;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-55); margin-bottom: var(--s-2); display: block;
}
.msg__title { font-size: var(--t-md); margin-bottom: var(--s-2); }
.msg__title a { color: inherit; text-decoration: none; }
.msg__title a:hover { border-bottom: 2px solid var(--yellow); }
.msg__meta { font-size: var(--t-xs); color: var(--ink-55); margin: 0 0 var(--s-2); }
.msg__desc { font-size: var(--t-sm); color: var(--ink-70); margin: 0; }

.msg-count { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-55); margin-bottom: var(--s-5); }

.series-note {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.42;
  letter-spacing: -.01em;
  max-width: var(--measure-tight);
  border-left: 3px solid var(--yellow);
  padding-left: var(--s-5);
  margin: 0 0 var(--s-5);
}

.empty-state {
  border: 1px dashed var(--rule); padding: var(--s-8) var(--s-6);
  text-align: center;
}
.empty-state h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.empty-state p { margin-inline: auto; color: var(--ink-70); }

/* --------------------------------------------------------------------------
   15b · WATCH + NOTES
   --------------------------------------------------------------------------
   The video must stay visible while someone types. On a laptop it is a
   sticky left column; on a phone it sticks to the top of the screen and
   the notes scroll beneath it. A notes field you have to scroll away from
   the video to reach does not get used.
   -------------------------------------------------------------------------- */

.watch { padding-block: var(--s-5) var(--s-9); }
.watch__back { margin-bottom: var(--s-5); }

.watch__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.watch__grid > * { min-width: 0; }
/* The player itself. These base rules MUST come before the media queries
   below — they set `position: relative`, and a later rule of equal
   specificity would quietly beat the `position: sticky` the phone layout
   depends on. */
.watch__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
.watch__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watch__video--none {
  display: flex; align-items: center; justify-content: center;
  background: var(--wash); border: 1px dashed var(--rule);
  text-align: center; padding: var(--s-6);
}
.watch__video--none p { color: var(--ink-55); font-size: var(--t-sm); margin: 0; max-width: none; }

@media (min-width: 1000px) {
  .watch__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* NOTE: no `align-items: start` here, deliberately. A sticky element can
     only travel inside its parent's box, so the media column must STRETCH
     to the full row height. With `align-items: start` the column shrinks to
     its own content and the video scrolls away after a few hundred pixels —
     which looks fine until someone reaches the third note field. */
  .watch__media { height: 100%; }
  .watch__sticky { position: sticky; top: 96px; }
}

/* On a phone, ONLY THE PLAYER pins to the top — not the player plus its
   title block. Sticking the whole group looks right until the group is
   taller than the space above the notes, at which point the browser pins
   its bottom edge and the video itself scrolls out of view, which is the
   one thing this page exists to prevent. */
@media (max-width: 999px) {
  /* `display: contents` dissolves both wrappers, so the video becomes a
     direct child of the tall grid and can stay pinned for the whole length
     of the notes. Sticking it inside .watch__media instead would pin it
     only until that short block scrolled past — the video would vanish
     exactly when someone started typing. Both are plain divs, so removing
     them from the box tree costs nothing semantically. */
  /* And the container drops to normal block flow, because a sticky GRID
     ITEM is confined to its own grid area — one row — which would pin the
     video for the height of the video and no further. In block flow its
     containing block is the whole column, notes included. */
  .watch__grid { display: block; }
  .watch__media, .watch__sticky { display: contents; }
  .watch__video {
    position: sticky;
    top: 74px;
    z-index: 40;
    margin-inline: calc(var(--gutter) * -1);
  }
  .watch__meta { padding-top: var(--s-5); padding-bottom: var(--s-6); background: var(--paper); }
  .watch__notes { padding-top: var(--s-2); }
}


.watch__meta { padding-top: var(--s-5); }
.watch__dim { text-decoration: none; display: inline-block; }
.watch__dim:hover { color: var(--ink); border-bottom: 1px solid var(--ink); }
.watch__title {
  font-size: var(--t-xl); margin-bottom: var(--s-3);
  letter-spacing: -.022em;
}
.watch__series-note { margin-top: var(--s-5); font-size: var(--t-sm); }

.watch__notes-head { font-size: var(--t-lg); }

.note-field { margin-bottom: var(--s-6); }
.note-field__label {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-md); letter-spacing: -.012em;
  margin-bottom: var(--s-3);
}
.note-field textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--s-4);
  border: 1.5px solid var(--rule);
  background: var(--paper);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  transition: border-color .15s ease;
}
.note-field textarea:hover { border-color: var(--ink-40); }
.note-field textarea:focus { border-color: var(--ink); }
.note-field textarea::placeholder { color: var(--ink-55); }

.watch__footnote {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-sm); letter-spacing: -.005em;
  border-left: 3px solid var(--yellow);
  padding-left: var(--s-4);
  margin: 0 0 var(--s-5);
}

.watch__status {
  min-height: 1.5rem;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--ink-55);
}
.watch__status[data-state='saving'] { color: var(--ink-40); }
.watch__status[data-state='error'],
.watch__status[data-state='warn'] { color: var(--ink); font-weight: 500; }

.watch__actions { margin-top: var(--s-3); }

/* Series navigation */
.series-nav { margin-top: var(--s-8); border-top: 1px solid var(--rule); padding-top: var(--s-5); }
.series-nav__row { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .series-nav__row { grid-template-columns: 1fr 1fr; } }
.series-nav__item {
  display: block; text-decoration: none; color: inherit;
  border: 1.5px solid var(--rule); padding: var(--s-4);
  transition: border-color .15s ease, background .15s ease;
}
.series-nav__item:hover { border-color: var(--ink); background: var(--wash-warm); }
.series-nav__item:last-child { text-align: right; }
.series-nav__row > span { display: none; }
@media (min-width: 560px) { .series-nav__row > span { display: block; } }
.series-nav__dir {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-55); margin-bottom: var(--s-2);
}
.series-nav__title {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: var(--t-sm); letter-spacing: -.01em; line-height: 1.25;
}
.series-nav__part { display: block; font-size: var(--t-xs); color: var(--ink-55); margin-top: 2px; }

/* "Your notes" marker on a message card */
.msg__noted {
  display: inline-block;
  margin-left: var(--s-3);
  background: var(--mint); color: var(--ink);
  padding: 1px .4em;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   15c · MY NOTES
   -------------------------------------------------------------------------- */

.note-list { margin-top: var(--s-7); border-top: 2px solid var(--ink); }

.note-entry { padding-block: var(--s-7); border-bottom: 1px solid var(--rule); }
.note-entry__title { font-size: var(--t-lg); margin: var(--s-2) 0 var(--s-2); }
.note-entry__title a { color: inherit; text-decoration: none; }
.note-entry__title a:hover { border-bottom: 2px solid var(--yellow); }

.note-entry__field { margin-top: var(--s-5); }
.note-entry__field h4 {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-55); margin-bottom: var(--s-2);
}
.note-entry__field p {
  margin: 0; white-space: normal;
  border-left: 2px solid var(--rule); padding-left: var(--s-4);
}

.notes-status { min-height: 1.5rem; font-size: var(--t-xs); color: var(--ink-55); }
.notes-status[data-state='error'] { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   16 · ABOUT
   -------------------------------------------------------------------------- */

.spine {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); margin: var(--s-6) 0;
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-md); letter-spacing: -.01em;
}
.spine span { padding: var(--s-2) var(--s-4); border: 2px solid var(--ink); }
.spine span[data-on='true'] { background: var(--yellow); }
/* These arrows are real text at 20px, so they take a readable grey rather
   than --decor — a low-vision reader should still see the direction. */
.spine em { font-style: normal; color: var(--ink-40); padding-inline: var(--s-1); }

.culture { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 700px) { .culture { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .culture { grid-template-columns: repeat(4, 1fr); } }
.culture div { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.culture strong { font-family: var(--display); font-weight: 600; font-size: var(--t-md); letter-spacing: -.012em; display: block; }

.not-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.not-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); color: var(--ink-70); display: flex; gap: var(--s-4); }
.not-list li::before { content: '—'; color: var(--decor); flex: none; }

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: var(--t-md);
  letter-spacing: -.012em; display: flex; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; color: var(--decor); flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding-bottom: var(--s-5); }
.faq p { font-size: var(--t-sm); color: var(--ink-70); }

/* --------------------------------------------------------------------------
   17 · UTILITY & MOTION
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.is-hidden { display: none !important; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.max-tight { max-width: var(--measure-tight); }

@media print {
  .site-header, .site-footer, .nav-toggle, .btn, .fp-progress,
  .no-print, .notes-status, .watch__status, .series-nav { display: none !important; }
  body { font-size: 11pt; }
  .pw-hero { background: none !important; color: #000 !important; padding-block: 0; }
  .pw-hero__dim, .pw-hero__statement, .pw-hero__not-a-grade { color: #000 !important; }
  .section { padding-block: 1rem; }
  a[href]::after { content: ''; }

  /* My Notes prints as a readable document: every note in full, each
     message starting cleanly rather than splitting across a page break. */
  .note-entry { break-inside: avoid; page-break-inside: avoid; padding-block: .6rem; }
  .note-entry__field p { border-left: 1px solid #999; }
  .note-list { border-top: 1pt solid #000; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}