/* ============================================================
   OUR STORY — page-scoped stylesheet
   Loaded only on /our-story/. Namespaced `story-`.
   Reuses the site's existing `.reveal` / `.in-view` scroll-hook
   (wired globally in site.js) — no page-specific JS required.
   ============================================================ */

/* The page runs wider and larger than the rest of the site — it is a
   poster, not a text page, and at 1180px the composition left a dead
   margin either side on any modern laptop. Scoped to .story-main so the
   shared .container everywhere else is untouched. */
.story-main .container { max-width: 1340px; }

.story-main {
  overflow-x: hidden;
  position: relative;
  background-color: var(--charcoal);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: clamp(34px, 2.6vw, 46px) clamp(34px, 2.6vw, 46px);
  background-position: center top;
}

/* ------------------------------------------------------------
   Shared word-reveal primitive
   Any element with `.story-words` wraps pre-split <span class="word">
   children; revealing the parent (via `.reveal`/`.in-view`) fades
   and lifts each word in sequence using its `--i` index.
------------------------------------------------------------ */
.has-js .story-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(6px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.05s);
}

.has-js .story-words.in-view .word {
  opacity: 1;
  transform: none;
  filter: none;
}

/* The highlighted mark word carries its own static rotation — merge
   it with the reveal transform instead of letting the generic rule
   cancel it out. */
.has-js .story-words .word.story-hero-mark-block { transform: translateY(0.4em) rotate(-1.4deg); }
.has-js .story-words.in-view .word.story-hero-mark-block { transform: rotate(-1.4deg); }

@media (prefers-reduced-motion: reduce) {
  .has-js .story-words .word { transition: none; opacity: 1; transform: none; filter: none; }
}

/* ------------------------------------------------------------
   Opening — the question
   Grid-paper backdrop, an oversized inverted-highlight headline,
   hand-drawn doodles and rotated stamp badges — editorial-poster
   energy instead of a plain centered title.
------------------------------------------------------------ */
.story-hero {
  /* svh is the viewport with the mobile browser chrome showing, so the
     hero is never taller than the screen the reader actually has. vh
     first as the fallback for browsers without the small-viewport unit. */
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(100px, 13vh, 150px) var(--gutter) clamp(48px, 7vh, 72px);
  position: relative;
  overflow: hidden;
}

.story-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 32%, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

.story-hero > * { position: relative; z-index: 2; }

.story-hero-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.74rem, 0.9vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(24px, 4vh, 44px);
}

.story-hero-title {
  position: relative;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.1rem, 6.4vw, 5rem);
  line-height: 1.12;
  color: var(--ink);
  max-width: 15ch;
}

.story-hero-title .word-line {
  display: block;
}

.story-hero-title .word-line--mark {
  margin: 0.14em 0;
}

.story-hero-mark-block {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3.4rem, 12vw, 9.6rem);
  line-height: 0.95;
  color: #161515;
  background: #FDE962;
  padding: 0.05em 0.22em 0.1em;
  transform: rotate(-1.4deg);
}

/* The "wow" bit — a glossy shine sweeps across the highlight block
   on a loop, like light catching a foil sticker. */
.story-hero-mark-block::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  transform: skewX(-22deg);
  animation: story-shine 3.6s ease-in-out infinite;
}

@keyframes story-shine {
  0%, 22% { left: -60%; }
  55%     { left: 130%; }
  100%    { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .story-hero-mark-block::after { animation: none; display: none; }
}

/* Doodles — original, hand-drawn-style SVG strokes (own paths,
   not traced from any reference). Decorative only. */
.story-hero-doodle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.story-hero-doodle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.story-hero-doodle path { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }

.story-hero-doodle--underline {
  width: clamp(150px, 18vw, 300px);
  height: clamp(26px, 2.4vw, 36px);
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: clamp(6px, 1.4vh, 14px);
}
.story-hero-doodle--underline path { stroke: var(--yellow); stroke-width: 3; }

/* Looping arrow — sits on the left, points right toward the
   highlighted word, bouncing toward it on repeat. */
.story-hero-doodle--arrow {
  width: clamp(90px, 8vw, 130px);
  height: clamp(90px, 8vw, 130px);
  left: clamp(4%, 10vw, 16%);
  top: calc(62% - 30px);
  animation: story-arrow-loop 2.2s ease-in-out infinite;
}
.story-hero-doodle--arrow path { stroke: #fff; stroke-width: 2.5; }

@keyframes story-arrow-loop {
  0%   { transform: translate(-10px, -6px) rotate(10deg); opacity: 0.35; }
  50%  { transform: translate(0, 0) rotate(6deg); opacity: 1; }
  100% { transform: translate(-10px, -6px) rotate(10deg); opacity: 0.35; }
}

/* Traveling arrow — a curly-tailed swoosh that draws itself in as
   it flies from off-screen, lands pointing at "leeway", holds a
   beat, then unwinds and does it again. */
.story-hero-flyby {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  right: clamp(0%, 4vw, 6%);
  top: 44%;
  width: clamp(130px, 18vw, 300px);
  height: clamp(64px, 5.6vw, 88px);
  animation: story-flyby-move 4.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.story-hero-flyby svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 88% 50%;
  animation: story-flyby-murmur 0.9s ease-in-out infinite;
}

/* A small constant nudge at the pointing end — the tip keeps
   murmuring toward "leeway" instead of sitting dead still. */
@keyframes story-flyby-murmur {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50%      { transform: translateX(-7px) rotate(-2.5deg); }
}
.story-hero-flyby path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 460;
  animation: story-flyby-draw 4.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes story-flyby-move {
  0%   { transform: translateX(50vw); opacity: 0; }
  16%  { opacity: 1; }
  46%  { transform: translateX(0); opacity: 1; }
  74%  { transform: translateX(0); opacity: 1; }
  92%  { transform: translateX(-18px); opacity: 0; }
  100% { transform: translateX(50vw); opacity: 0; }
}

@keyframes story-flyby-draw {
  0%   { stroke-dashoffset: 460; }
  16%  { stroke-dashoffset: 460; }
  46%  { stroke-dashoffset: 0; }
  74%  { stroke-dashoffset: 0; }
  92%  { stroke-dashoffset: -460; }
  100% { stroke-dashoffset: -460; }
}

@media (max-width: 900px) {
  .story-hero-flyby { display: none; }
}

/* Gen-Z scrapbook energy lines — scattered zigzag marks, own paths,
   each wiggling on a slightly different beat so they never sync up. */
.story-zigzag {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}
.story-zigzag svg { display: block; width: 100%; height: 100%; overflow: visible; }
.story-zigzag path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

@keyframes story-wiggle-a {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(4deg) scale(1.06); }
}
@keyframes story-wiggle-b {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-6px); }
}

.story-zigzag--a {
  width: clamp(70px, 6vw, 100px); height: clamp(24px, 2.1vw, 34px);
  left: clamp(6%, 12vw, 16%);
  bottom: 24%;
  animation: story-wiggle-a 3.4s ease-in-out infinite;
}
.story-zigzag--a path { stroke: var(--purple-soft); stroke-width: 3; }

.story-zigzag--b {
  width: clamp(46px, 4vw, 66px); height: clamp(46px, 4vw, 66px);
  right: clamp(8%, 14vw, 20%);
  bottom: 30%;
  animation: story-wiggle-b 2.8s ease-in-out infinite;
}
.story-zigzag--b path { stroke: var(--yellow); stroke-width: 2.5; }

@keyframes story-heart-pulse {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(4deg) scale(1.12); }
}

/* Sticker tags — rotated little text badges, dropped in like
   scrapbook stickers. Own copy, on-brand, not lorem-genz filler. */
.story-sticker {
  position: absolute;
  z-index: 3;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(0.72rem, 0.82vw, 0.92rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: clamp(7px, 0.7vw, 11px) clamp(12px, 1.2vw, 18px);
  border-radius: 0;
  white-space: nowrap;
  pointer-events: none;
  animation: story-heart-pulse 3.2s ease-in-out infinite;
}

.story-sticker--purple { background: var(--purple); color: #fff; }
.story-sticker--yellow { background: #FDE962; color: #161515; }
.story-sticker--outline { background: transparent; border: 1.5px solid var(--ink-muted); color: var(--ink-muted); }

.story-sticker--1 { left: clamp(4%, 9vw, 12%); bottom: 8%; transform: rotate(-5deg); animation-delay: 0.2s; }
.story-sticker--2 { right: clamp(2%, 5vw, 8%); top: 10%; transform: rotate(4deg); animation-delay: 0.9s; }
.story-sticker--3 { left: 46%; top: 6%; transform: rotate(-3deg); animation-delay: 1.6s; }

@media (max-width: 900px) {
  .story-sticker { display: none; }
}

/* ------------------------------------------------------------
   Shooting stars — brief diagonal streaks. Each instance sets its
   own top / delay / size via inline custom properties, so there is
   one clean rule per direction instead of eight guessed variants.
   Left- and right-entering stars are timed to never overlap and
   sit in different vertical bands, so the sky reads as considered
   rather than a scatter of duplicated code.
------------------------------------------------------------ */
.story-star {
  --sy: 20%;
  --sd: 0s;
  --ss: 3px;
  position: absolute;
  z-index: 1;
  top: var(--sy);
  width: var(--ss);
  height: var(--ss);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px 2px rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: story-shoot-l 9s cubic-bezier(0.3, 0, 0.7, 1) infinite;
  animation-delay: var(--sd);
}

.story-star::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 120px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(255, 255, 255, 0.85), transparent);
}

.story-star--l { left: -4%; }

/* The tail (::before) always trails opposite the travel direction —
   its geometry (right:100%, fading "to left") stays identical for
   both directions. Only the spawn edge and the rotate angle change;
   re-mirroring the tail as well pointed it the wrong way, so a
   right-entering star looked like it was leading with its own tail
   instead of trailing it. */
.story-star--r {
  left: auto;
  right: -4%;
  animation-name: story-shoot-r;
}

@keyframes story-shoot-l {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6) rotate(22deg); }
  4%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(22deg); }
  24%  { opacity: 1; transform: translate(58vw, 24vh) scale(1) rotate(22deg); }
  30%  { opacity: 0; transform: translate(64vw, 27vh) scale(0.6) rotate(22deg); }
  100% { opacity: 0; }
}

@keyframes story-shoot-r {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6) rotate(158deg); }
  4%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(158deg); }
  24%  { opacity: 1; transform: translate(-58vw, 24vh) scale(1) rotate(158deg); }
  30%  { opacity: 0; transform: translate(-64vw, 27vh) scale(0.6) rotate(158deg); }
  100% { opacity: 0; }
}

@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .story-star { display: none; }
}

/* Stamp badges — rotated corner marks, like a hand-stamped tag. */
.story-badge {
  position: absolute;
  z-index: 3;
  border: 1.5px solid var(--charcoal-line);
  font-family: var(--font-body);
  font-size: clamp(0.64rem, 0.75vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: clamp(10px, 1vw, 15px) clamp(12px, 1.2vw, 18px);
  line-height: 1.35;
  text-align: center;
}

.story-badge--left {
  left: clamp(4%, 7vw, 10%);
  top: clamp(120px, 16vh, 180px);
  transform: rotate(-6deg);
}

.story-badge--right {
  right: clamp(4%, 7vw, 10%);
  bottom: clamp(60px, 10vh, 110px);
  transform: rotate(5deg);
  border-color: var(--yellow);
  color: var(--yellow);
}

/* Phones. The decoration goes, and the type takes the room it frees —
   the headline is the whole composition at this width, so it is sized
   off vw with a floor that still reads on a 320px screen. */
@media (max-width: 700px) {
  .story-badge, .story-hero-doodle--arrow, .story-zigzag { display: none; }
  .story-hero-title { font-size: clamp(2rem, 8.6vw, 3rem); max-width: 13ch; }
  .story-hero-mark-block { font-size: clamp(2.9rem, 17.5vw, 5rem); }
  /* The desktop top padding clears the corner badges, which are hidden
     here — without trimming it the centred block is pushed a long way
     below the optical middle of the screen. */
  /* 92svh plus the breadcrumb above it overruns the screen, and since
     the block is centred the headline ends up well below the optical
     middle. 74svh puts it back where the eye expects it. */
  .story-hero {
    min-height: 74vh;
    min-height: 74svh;
    padding-top: 72px;
    padding-bottom: clamp(40px, 6vh, 64px);
  }
}

.story-hero-note {
  margin-top: clamp(36px, 6vh, 64px);
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
  max-width: 46ch;
  text-align: left;
}

.story-hero-note-icon {
  flex-shrink: 0;
  font-size: clamp(1.6rem, 2.2vw, 2.3rem);
  animation: story-heart-pulse 2.4s ease-in-out infinite;
}

.story-hero-note p {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-muted);
}

.story-hero-note strong { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------
   Marquee ribbon — infinite scrolling strip between sections.
------------------------------------------------------------ */
.story-marquee {
  overflow: hidden;
  background: #FDE962;
  padding: clamp(14px, 1.5vw, 22px) 0;
  transform: rotate(-1.2deg);
  margin-top: clamp(-48px, -5vh, -28px);
  margin-bottom: clamp(24px, 4vh, 40px);
  position: relative;
  z-index: 4;
}

.story-marquee-track {
  display: flex;
  width: max-content;
  animation: story-marquee-scroll 22s linear infinite;
}

.story-marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.45vw, 1.6rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #161515;
  padding: 0 clamp(22px, 2vw, 32px);
  white-space: nowrap;
}

@keyframes story-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .story-hero-doodle--arrow,
  .story-zigzag,
  .story-sticker,
  .story-hero-note-icon,
  .story-scatter,
  .story-marquee-track { animation: none; }
  .story-hero-flyby, .story-star { display: none; }
}

/* ------------------------------------------------------------
   Definition card — dictionary-style entry
------------------------------------------------------------ */
.story-definition {
  /* The card is a direct child of <main>, so it gets no container
     gutter of its own. Below ~780px it would otherwise run edge to
     edge and clip its own border and corner ticks against the screen. */
  width: calc(100% - 2 * var(--gutter));
  max-width: 780px;
  margin: 0 auto clamp(64px, 9vh, 110px);
  padding: clamp(28px, 4vh, 52px) clamp(24px, 5vw, 56px);
  text-align: center;
  border: 1.5px solid var(--charcoal-line);
  position: relative;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.story-definition::before,
.story-definition::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--yellow);
}
.story-definition::before { top: -8px; left: -8px; border-width: 1.5px 0 0 1.5px; }
.story-definition::after { bottom: -8px; right: -8px; border-width: 0 1.5px 1.5px 0; }

.has-js .story-definition { opacity: 0; transform: translate3d(0, 24px, 0); }
.has-js .story-definition.in-view { opacity: 1; transform: none; }

.story-definition-word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  color: var(--ink);
}

.story-definition-phon {
  color: var(--ink-faint);
  font-size: clamp(0.95rem, 1.15vw, 1.2rem);
  margin-left: 10px;
}

.story-definition-pos {
  display: block;
  margin: clamp(14px, 1.6vw, 20px) 0 clamp(18px, 2vw, 26px);
  font-size: clamp(0.72rem, 0.85vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple-soft);
}

.story-definition-list {
  /* base.css only clears the markers on ul. Without this the browser's
     own "1." sits next to the yellow counter below and every sense is
     numbered twice. */
  list-style: none;
  padding-left: 0;
  color: var(--ink-muted);
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.7;
  text-align: left;
  counter-reset: def;
  max-width: 620px;
  margin: 0 auto;
}

.story-definition-list li {
  counter-increment: def;
  position: relative;
  padding-left: clamp(30px, 2.6vw, 40px);
  margin-bottom: clamp(12px, 1.4vw, 18px);
}

.story-definition-list li::before {
  content: counter(def);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  font-weight: 700;
  color: var(--yellow);
}

/* ------------------------------------------------------------
   Manifesto — big centered statement
------------------------------------------------------------ */
.story-manifesto {
  background: rgba(255, 255, 255, 0.025);
  padding: clamp(64px, 9vh, 110px) var(--gutter);
  position: relative;
  overflow: hidden;
}

.story-scatter {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  line-height: 1;
}

.story-scatter--bolt {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  left: clamp(6%, 12vw, 16%);
  top: clamp(14%, 18vh, 20%);
  animation: story-heart-pulse 3s ease-in-out infinite;
}

.story-scatter--zap {
  position: absolute;
  display: inline-block;
  font-size: 1.4rem;
  right: -34px;
  top: -6px;
  animation: story-heart-pulse 2.2s ease-in-out infinite;
}

.story-principles-head { position: relative; }

.story-zigzag--c {
  width: 40px; height: 40px;
  right: clamp(6%, 12vw, 18%);
  bottom: clamp(14%, 18vh, 22%);
  animation: story-wiggle-b 3.1s ease-in-out infinite;
}
.story-zigzag--c path { stroke: var(--ink-faint); stroke-width: 2.5; }

@media (max-width: 700px) {
  .story-scatter, .story-zigzag--c { display: none; }
}

.story-manifesto-text {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.2vw, 3.9rem);
  line-height: 1.26;
  color: var(--ink);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.has-js .story-manifesto-text { opacity: 0; transform: translate3d(0, 24px, 0); }
.has-js .story-manifesto-text.in-view { opacity: 1; transform: none; }

.story-manifesto-text em {
  font-style: italic;
  color: var(--yellow);
}

/* ------------------------------------------------------------
   Principles — the way we work
------------------------------------------------------------ */
.story-principles {
  padding: clamp(56px, 8vh, 96px) 0;
  position: relative;
  overflow: hidden;
}

.story-principles-head {
  text-align: center;
  margin-bottom: clamp(36px, 6vh, 72px);
}

/* .section-heading / .eyebrow / .section-lede are the site-wide sizes.
   This page sits a step above them, so raise the ceiling here rather
   than in base.css, where it would move every other page too. */
.story-main .section-heading { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.story-main .section-lede { font-size: clamp(1.05rem, 1.35vw, 1.3rem); max-width: 66ch; }
.story-main .eyebrow { font-size: clamp(0.72rem, 0.85vw, 0.9rem); }

.story-principle {
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) 1fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  padding: clamp(26px, 3.8vh, 48px) 0;
  border-top: 1px solid var(--charcoal-line);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

.story-principle:last-child { border-bottom: 1px solid var(--charcoal-line); }

.has-js .story-principle { opacity: 0; transform: translate3d(0, 30px, 0); }
.has-js .story-principle.in-view { opacity: 1; transform: none; }

.story-principle-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  color: #a9861c;
  line-height: 1;
}

.story-principle-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.7vw, 2.35rem);
  color: var(--ink);
  margin-bottom: clamp(14px, 1.4vw, 20px);
}

.story-principle-body p {
  color: var(--ink-muted);
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.7;
  max-width: 62ch;
}

.story-principle-line {
  width: clamp(64px, 6vw, 92px);
  height: 2px;
  background: var(--yellow);
  margin-bottom: clamp(20px, 2vw, 28px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease) 0.15s;
}

.has-js .story-principle.in-view .story-principle-line { transform: scaleX(1); }

@media (max-width: 700px) {
  .story-principle { grid-template-columns: 1fr; gap: 10px; }
  .story-principle-num { font-size: 2.1rem; }
  .story-principle-line { margin-bottom: 16px; }
}

/* Very small phones (iPhone SE and down). --gutter is 6vw, which at
   320px is only 19px of side padding — enough for body copy but not
   for the definition card's own border and inner padding on top of it.
   Trim the card's inset instead of the page gutter, so the text keeps
   its measure and nothing runs into the frame. */
@media (max-width: 380px) {
  .story-definition { padding: 24px 18px; }
  .story-definition-list li { padding-left: 26px; }
  .story-hero-note { gap: 10px; }
}


/* ============================================================
   LIGHT THEME — pass over hardcoded dark-only colors.
   The rest of the site swaps --charcoal / --ink per theme
   already; these are the spots this page hardcoded a literal
   black/white value and needs a matching light-mode correction,
   keeping the page on purple / yellow / near-black in both modes.
   ============================================================ */
:root[data-theme="light"] .story-main {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
}

:root[data-theme="light"] .story-hero::before {
  background: radial-gradient(ellipse 65% 55% at 50% 32%, transparent 0%, rgba(255, 255, 255, 0.55) 100%);
}

:root[data-theme="light"] .story-hero-doodle--arrow path,
:root[data-theme="light"] .story-hero-flyby path { stroke: var(--purple); }

:root[data-theme="light"] .story-star {
  background: var(--purple);
  box-shadow: 0 0 9px 2px rgba(136, 93, 206, 0.45);
}
:root[data-theme="light"] .story-star::before { background: linear-gradient(to left, rgba(136, 93, 206, 0.6), transparent); }