/* ==========================================================================
   With You — Story pages
   ==========================================================================

   Shared styles for index, why, people, how-it-works and pay-it-forward.
   Loaded after styles/design-system.css and built only from its tokens.

   These pages are read by frightened people, often on a phone, often late at
   night. So: one reading column, generous space, 18px body text, soft cards
   with borders rather than shadows, and one clear call to action per section.

   Colour rules (from the measured contrast notes in design-system.css):
     - Gold is used only on the fixed dark teal surface (.st-dark), where
       --brand-gold-500 reaches 5.80:1. On light surfaces the accent is
       --text-accent (gold-800, 6.23:1 on white).
     - .st-dark deliberately uses the brand primitive --brand-teal-800 in both
       light and dark mode: it is the brand band (hero, closing call, footer),
       not a themed surface, and gold only passes on it.
   ========================================================================== */

/* --- Layout -------------------------------------------------------------- */
.st-wrap {
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: var(--space-5);
}

/* ~65 characters at 18px — a comfortable reading measure. */
.st-read {
    max-width: 38rem;
    margin-inline: auto;
}

.st-center { text-align: center; }

.st-section {
    padding-block: var(--space-7);
}
@media (min-width: 48rem) {
    .st-section { padding-block: var(--space-8); }
}

.st-section--raised { background: var(--surface-raised); }
.st-section--selected { background: var(--surface-selected); }

.st-section__title {
    margin-bottom: var(--space-4);
    font-size: var(--text-2xl);
    color: var(--text-primary);
}
.st-section__intro {
    margin-bottom: var(--space-6);
    color: var(--text-secondary);
}

/* --- The brand band (dark teal) ------------------------------------------ */
.st-dark {
    background: var(--brand-teal-800);
    color: var(--grey-000);
}
.st-dark :is(h1, h2, h3, h4) { color: var(--grey-000); }
.st-dark a:not(.ds-btn) { color: var(--brand-teal-100); }
/* The default focus ring is teal and would vanish on teal. */
.st-dark :focus-visible { outline-color: var(--brand-gold-500); }

/* --- Navigation ----------------------------------------------------------- */
.st-nav {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-subtle);
}
.st-nav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-3);
}
.st-nav__logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
}
.st-nav__logo img {
    display: block;
    height: 36px;
    width: auto;
}
.st-nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    font-size: var(--text-base);
}
.st-nav__links a:not(.ds-btn) {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    color: var(--text-secondary);
    text-decoration: none;
}
.st-nav__links a:not(.ds-btn):hover { color: var(--text-primary); text-decoration: underline; }
.st-nav__links a[aria-current="page"] {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

/* On a narrow phone the text links take their own row under the logo, so
   nothing is hidden and nothing is squeezed. */
@media (max-width: 40rem) {
    .st-nav__links { width: 100%; justify-content: space-between; }
}

/* --- Hero ------------------------------------------------------------------ */
.st-hero {
    padding-block: var(--space-7) var(--space-8);
}
.st-hero h1 {
    margin-bottom: var(--space-4);
    font-size: var(--text-3xl);
    letter-spacing: -0.01em;
}
.st-hero--light { background: var(--surface-page); }
.st-hero--light h1 { color: var(--text-primary); }

.st-lede {
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}
.st-dark .st-lede { color: var(--brand-teal-100); }

.st-eyebrow {
    display: inline-block;
    margin-bottom: var(--space-4);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    color: var(--text-accent);
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
}
.st-dark .st-eyebrow {
    color: var(--brand-gold-500);
    background: transparent;
    border-color: var(--brand-teal-600);
}

.st-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-6);
}
.st-center .st-actions { justify-content: center; }

.st-small {
    font-size: var(--text-base);
    color: var(--text-secondary);
}
.st-dark .st-small { color: var(--brand-teal-100); }

/* --- Buttons (extend .ds-btn) --------------------------------------------- */
.st-btn-lg {
    min-height: 52px;
    padding-inline: var(--space-6);
    font-size: var(--text-lg);
}
/* Gold on the dark band: teal-900 text on gold-500 is about 7:1. */
.st-btn-gold {
    background: var(--brand-gold-500);
    color: var(--brand-teal-900);
}
.st-btn-gold:hover { opacity: 0.92; }
.ds-btn--primary:hover { opacity: 0.92; }

.st-link {
    font-weight: var(--weight-semibold);
    color: var(--text-link);
}

/* --- Cards ------------------------------------------------------------------ */
.st-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    list-style: none;
}
@media (min-width: 40rem) {
    .st-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 64rem) {
    .st-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.st-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
@media (min-width: 48rem) {
    .st-card { padding: var(--space-6); }
}
.st-section--raised .st-card { background: var(--surface-page); }
.st-card h3 {
    margin-bottom: var(--space-2);
    font-size: var(--text-xl);
    color: var(--text-primary);
}
.st-card p { color: var(--text-secondary); }
.st-card p + p { margin-top: var(--space-3); }

/* Emoji sit in a soft round badge so they read as friendly markers rather
   than as loud clip-art. They are decorative: aria-hidden in the markup. */
.st-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--surface-selected);
    font-size: 1.5rem;
    line-height: 1;
}

/* --- Honest notes ----------------------------------------------------------- */
.st-note {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--status-caution-bg);
    color: var(--text-primary);
    font-size: var(--text-base);
    border-left: 4px solid var(--status-caution-fg);
}

.st-tag {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

/* --- Professor Dey ----------------------------------------------------------- */
.st-portrait {
    display: block;
    width: 10rem;
    height: 10rem;
    margin-inline: auto;
    border-radius: var(--radius-full);
    object-fit: cover;
    /* A soft ring rather than a shadow — see the performance budget. */
    border: 4px solid var(--surface-selected);
}
@media (min-width: 48rem) {
    .st-portrait { width: 12rem; height: 12rem; }
}

.st-figure { margin: 0 0 var(--space-6); text-align: center; }
.st-figure figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.st-tribute {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
}
@media (min-width: 48rem) {
    .st-tribute { padding: var(--space-7); }
}
.st-tribute h2 {
    margin-bottom: var(--space-4);
    text-align: center;
    color: var(--text-primary);
}
.st-tribute p { color: var(--text-primary); }

/* --- Quotes --------------------------------------------------------------------- */
.st-quote {
    margin: var(--space-5) 0;
    padding: 0 0 0 var(--space-5);
    border-left: 3px solid var(--text-accent);
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
    font-style: italic;
    color: var(--text-primary);
}
.st-quote--center {
    padding: 0;
    border-left: 0;
    text-align: center;
    color: var(--text-accent);
    font-size: var(--text-2xl);
}

.st-centerpiece {
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-5);
    text-align: center;
}
.st-centerpiece blockquote {
    margin: 0 0 var(--space-5);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    font-weight: var(--weight-semibold);
    color: var(--brand-gold-500);
}
.st-centerpiece p { color: var(--brand-teal-100); }

/* --- Long-form story ------------------------------------------------------------- */
.st-story h2 {
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}
.st-story .st-lead {
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}
.st-story p { color: var(--text-primary); }
.st-story + .st-story { border-top: 1px solid var(--border-subtle); }

.st-soft {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
}
.st-soft blockquote {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--text-accent);
}
.st-soft p + p { margin-top: var(--space-3); }

.st-list {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.st-list__item {
    padding-left: var(--space-4);
    border-left: 3px solid var(--brand-teal-100);
}
.st-list__item h3 {
    margin-bottom: var(--space-1);
    font-size: var(--text-lg);
    color: var(--text-primary);
}
.st-list__item p { color: var(--text-secondary); }

.st-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-5);
    padding: 0;
    list-style: none;
}
.st-chips li {
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--surface-selected);
    color: var(--text-primary);
    font-size: var(--text-base);
}

/* --- Steps (how it works, pay it forward) --------------------------------------- */
.st-steps {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.st-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
}
.st-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: var(--grey-000);
    font-weight: var(--weight-semibold);
}
.st-step h3 {
    margin-bottom: var(--space-2);
    font-size: var(--text-xl);
    color: var(--text-primary);
}
.st-step p { color: var(--text-secondary); }

.st-example {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    font-size: var(--text-base);
}
.st-example h4 {
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    color: var(--text-primary);
}
.st-example p { color: var(--text-primary); }
.st-example ul { margin: 0; padding-left: var(--space-5); }

.st-circle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.st-circle li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 8rem;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
}
.st-circle p { margin: 0; color: var(--text-primary); }

/* --- Forms (people page) ------------------------------------------------------- */
.st-options {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr;
    margin: var(--space-4) 0 var(--space-5);
}
@media (min-width: 40rem) {
    .st-options { grid-template-columns: repeat(2, 1fr); }
}
.st-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--surface-raised);
    font-size: var(--text-base);
    cursor: pointer;
}
.st-option input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent-primary); }
.st-option:has(input:checked) { background: var(--surface-selected); border-color: var(--accent-primary); }

.st-textarea { min-height: 8rem; resize: vertical; }

/* --- Footer ------------------------------------------------------------------ */
.st-footer {
    padding-block: var(--space-7) var(--space-6);
    font-size: var(--text-base);
}
.st-footer__top {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-6);
}
@media (min-width: 48rem) {
    .st-footer__top { grid-template-columns: 1fr 1fr; }
}
.st-footer__brand img { display: block; height: 32px; width: auto; margin-bottom: var(--space-3); }
.st-footer__tagline { font-style: italic; color: var(--brand-teal-100); }
.st-footer__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
.st-footer__cols h2 {
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    color: var(--brand-gold-500);
}
.st-footer__cols a {
    display: flex;
    align-items: center;
    min-height: var(--touch-min);
    text-decoration: none;
}
.st-footer__cols a:hover { text-decoration: underline; }
.st-footer__bottom {
    padding-top: var(--space-5);
    border-top: 1px solid var(--brand-teal-600);
    text-align: center;
}
.st-footer__promise {
    margin-bottom: var(--space-1);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--brand-gold-500);
}
.st-footer__inspiration { color: var(--brand-teal-100); }
.st-footer__legal {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--brand-teal-100);
}

/* --- Plain lists and follow-on text (privacy, safety, help, accessibility) --- */
.st-prose ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.st-prose li + li { margin-top: var(--space-2); }
.st-list + p, .st-list + ul { margin-top: var(--space-5); }

.st-chips--center { justify-content: center; }

/* Questions and answers (help page): native disclosure, no script */
.st-faq details {
    border-top: 1px solid var(--border-subtle);
    padding-block: var(--space-3);
}
.st-faq details:last-child { border-bottom: 1px solid var(--border-subtle); }
.st-faq summary {
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}
.st-faq details[open] summary { margin-bottom: var(--space-3); }
.st-faq ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }

@media (forced-colors: active) {
    .st-card, .st-tribute, .st-soft, .st-example, .st-option { border: 1px solid CanvasText; }
}