/* Our Story page (assets/css/story.css) — loaded only by about.php.
   Classes prefixed st- ("story"). Reuses style.css tokens, so the
   sitewide light/dark theme applies with no extra work: --navy inverts
   to near-white and --site-bg-surface to a dark surface under
   [data-theme="dark"]. Only hardcoded light values need the overrides
   at the bottom.

   Layout intent: running prose is capped near 66 characters because a
   narrow measure reads better — the width is earned back by a sticky
   rail beside it rather than by stretching the text. */

/* ---------- Compact hero ---------- */
.st-hero { padding: 20px clamp(20px, 4vw, 72px) 26px; }
.st-hero-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px; align-items: center;
}
.st-hero h1 { margin: 0 0 6px; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; }
.st-hl {
  background: linear-gradient(120deg, var(--teal-dark), var(--teal) 55%, var(--orange-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.st-lede { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 700; color: var(--navy); max-width: 30ch; }
.st-hero-art { display: flex; justify-content: flex-end; gap: 6px; }
.st-hero-art img { width: 108px; height: auto; filter: drop-shadow(0 10px 16px rgba(18,58,102,.16)); }

/* ---------- Reading column + sticky rail ---------- */
.st-wrap {
  max-width: 1180px; margin: 0 auto; padding: 26px clamp(20px, 4vw, 32px) 10px;
  display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.st-read { max-width: 66ch; }
.st-read p { margin: 0 0 18px; font-size: 1.07rem; line-height: 1.75; color: var(--text); }
/* The two standalone beats in the narrative. Styled in place rather
   than pulled into the rail as quotes — repeating the author's own
   sentences elsewhere on the page would read as padding. */
.st-emph { font-size: 1.22rem !important; font-weight: 800; color: var(--navy) !important; line-height: 1.45 !important; }
.st-turn {
  font-size: 1.5rem !important; font-weight: 900; color: var(--teal-dark) !important;
  margin: 30px 0 22px !important; padding-top: 24px; border-top: 2px dashed var(--border);
}
.st-close {
  font-size: 1.16rem !important; font-weight: 800; color: var(--navy) !important; line-height: 1.6 !important;
  background: linear-gradient(180deg, #FFF6E4, #FFE3C7);
  border-radius: 20px; padding: 20px 24px; margin-top: 30px !important;
}
.st-sign { margin-top: 20px !important; font-weight: 900; color: var(--navy) !important; font-size: 1.05rem !important; }
.st-sign span { font-weight: 700; color: var(--muted); font-size: .92rem; }

.st-rail-inner { position: sticky; top: 96px; display: grid; gap: 14px; }
.st-card {
  background: var(--site-bg-surface); border-radius: 20px; padding: 20px;
  box-shadow: var(--soft-shadow); border-top: 5px solid var(--teal);
}
.st-card--explore { border-top-color: var(--orange); }
.st-card-ic { font-size: 1.6rem; }
.st-card h2 { margin: 6px 0 6px; font-size: 1.1rem; color: var(--navy); }
.st-card p { margin: 0 0 12px; font-size: .95rem; font-weight: 600; color: var(--muted); line-height: 1.55; }
.st-link { font-weight: 800; color: var(--teal-dark); }

/* ---------- Slim closing row (not a full pastel card) ---------- */
.st-next {
  max-width: 1180px; margin: 22px auto 40px; padding: 16px clamp(20px, 4vw, 32px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.st-next p { margin: 0; font-weight: 700; color: var(--navy); }

/* ---------- Dark mode: only the hardcoded light values ---------- */
[data-theme="dark"] .st-close { background: linear-gradient(180deg, #332619, #241A10); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-close { background: linear-gradient(180deg, #332619, #241A10); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .st-wrap { grid-template-columns: 1fr; gap: 26px; }
  .st-read { max-width: none; }
  /* Rail stops being a rail: two cards side by side under the story. */
  .st-rail-inner { position: static; grid-template-columns: 1fr 1fr; }
  .st-hero-inner { grid-template-columns: 1fr; }
  .st-hero-art { justify-content: flex-start; }
  .st-hero-art img { width: 88px; }
}
@media (max-width: 560px) {
  .st-rail-inner { grid-template-columns: 1fr; }
  .st-read p { font-size: 1.03rem; }
  .st-turn { font-size: 1.32rem !important; }
  .st-next { flex-direction: column; align-items: flex-start; }
}