/*
 * listenpastthewords.com
 *
 * Ported from concept-7-white.html (2 April 2026) — the approved design.
 * Plain CSS, no framework. Sections below map one-to-one onto the view
 * partials in app/views/, so a section can be reordered or dropped by
 * editing the template without hunting for its styles.
 */

/* ==========================================================================
   FONTS — Urbanist, self-hosted (variable, covers weights 100-900)
   ========================================================================== */
@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/urbanist-latin-6b16ce6e.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Urbanist';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/urbanist-latin-italic-3332beb7.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
    --navy: #234A5D;
    --orange: #FF8200;
    --teal: #0397A7;
    --muted: #7292BB;
    --dark-navy: #1A3A4A;
    --bg: #FAFAF7;
    --cream: #F5F3EE;
    --text: #234A5D;
    --text-light: #7292BB;

    --font-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-weight: 400;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.7;
}

/* ==========================================================================
   PROGRESS BAR — layouts/application
   ========================================================================== */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--orange);
    z-index: 200;
    width: 0%;
    transition: width 0.1s linear;
}

/* ==========================================================================
   NAV — shared/_nav
   ========================================================================== */
.nav {
    position: fixed;
    top: 2px;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1.5rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s ease;
}
.nav.scrolled {
    padding: 0.85rem 4rem;
    background: rgba(250, 250, 247, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 12px rgba(35, 74, 93, 0.05);
}
/* The mark on its own. The design's object-fit crop of the horizontal lockup is
   gone — it never worked, because object-fit does nothing at width: auto. */
.nav-logo {
    display: flex;
    align-items: center;
}
.nav-logo img {
    height: 34px;
    width: auto;
    display: block;
}
.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    align-items: center;
}
.nav-links a {
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.4;
    transition: opacity 0.3s;
}
.nav-links a:hover { opacity: 1; }
.nav-subscribe-btn {
    display: inline-block;
    background: var(--orange);
    color: white !important;
    opacity: 1 !important;
    padding: 0.45rem 1.1rem;
    border-radius: 3px;
    font-size: 0.68rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    transition: background 0.2s;
}
.nav-subscribe-btn:hover { background: #e67500; }

/* ==========================================================================
   HERO — home/_hero
   ========================================================================== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
}
/* Subtle mountain watermark */
.hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: url("/assets/logo-mark-2e929d4e.png") center/contain no-repeat;
    opacity: 0.04;
    pointer-events: none;
}
.hero-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0;
    animation: gentleFade 1s ease forwards 0.3s;
    position: relative;
}
.hero h1 {
    font-weight: 300;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    line-height: 1.25;
    color: var(--navy);
    max-width: 720px;
    margin: 2rem auto 0;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: gentleFade 1s ease forwards 0.6s;
    position: relative;
}
/* Subhead — carries what is being sold for a cold visitor, so it sits between
   the headline and the rule.
   Raised 21 Aug 2026 from 1rem to 1.25rem. At 1rem it matched the section body
   copy exactly but sat under a 57.6px headline and read as small print. It is
   now a step above the philosophy paragraphs (1.15rem), which are the largest
   body text on the page. */
.hero-subhead {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--muted);
    max-width: 620px;
    margin: 1.75rem auto 0;
    opacity: 0;
    animation: gentleFade 1s ease forwards 0.75s;
    position: relative;
}
.hero-rule {
    width: 50px;
    height: 2px;
    background: var(--orange);
    margin: 2.5rem auto 0;
    opacity: 0;
    animation: gentleFade 1s ease forwards 0.9s;
    position: relative;
}
/* Made deliberately more prominent 21 Aug 2026. At 0.65rem with a 1px hairline
   it was easy to miss, and on a page whose whole argument is below the fold,
   missing it is expensive. */
.hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0;
    animation: gentleFade 1s ease forwards 1.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.hero-scroll-line {
    width: 2px;
    height: 52px;
    border-radius: 1px;
    background: linear-gradient(to bottom, var(--teal), rgba(3, 151, 167, 0));
    animation: scrollPulse 2s ease infinite;
}
/* A chevron under the line, travelling down with the pulse. Two 2px bars
   rotated into a V — no extra markup and no image request. */
.hero-scroll-line::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: rotate(45deg);
    animation: scrollChevron 2s ease infinite;
}
.hero-scroll-line { position: relative; }

/* ==========================================================================
   DIVIDER — shared/_divider
   ========================================================================== */
/* Strengthened 21 Aug 2026. At 50x1px and 0.2 opacity the section break was
   almost invisible, so the three failure sections read as one wall of text. */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 2.25rem 0;
}
.divider-line {
    width: 90px;
    height: 2px;
    border-radius: 1px;
    background: var(--teal);
    opacity: 0.5;
}
.divider-dot {
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 50%;
    opacity: 0.9;
}

/* ==========================================================================
   PHILOSOPHY — home/_philosophy
   ========================================================================== */
.section-philosophy {
    padding: 6rem 2rem 5rem;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.philosophy-text {
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--muted);
    letter-spacing: 0.01em;
}
.philosophy-text .highlight {
    color: var(--orange);
    font-weight: 500;
}
.philosophy-text p { margin-bottom: 1.75rem; }
.philosophy-text p:last-child { margin-bottom: 0; }
/* Byline — added with the v1 copy. It is the page's only credibility line and
   there is no About page, so it is set off from the argument above it. */
.philosophy-byline {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--navy);
    padding-top: 1.75rem;
    border-top: 1px solid rgba(3, 151, 167, 0.2);
}

/* ==========================================================================
   LEAK SECTIONS — home/_leak (rendered once per entry)
   ========================================================================== */
.section-leak {
    padding: 4.5rem 2rem;
    max-width: 680px;
    margin: 0 auto;
}
/* Raised 21 Aug 2026 from 0.65rem (10.4px). It names the failure the section is
   about — the reader's way in — and at hairline size it was being skipped.
   Letter-spacing eased off a little so the longer labels do not sprawl. */
.leak-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1.25rem;
}
.leak-title {
    font-weight: 300;
    font-size: 1.65rem;
    color: var(--navy);
    margin-bottom: 1.25rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.leak-body {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--muted);
    font-weight: 400;
}
/* Bodies are multi-paragraph as of the v1 copy — one <p> each. */
.leak-body + .leak-body { margin-top: 1.25rem; }
.leak-body strong {
    color: var(--navy);
    font-weight: 500;
}

/* Pull-quote — added with the v1 copy. Section 2 only: a line of buyer
   dialogue that sets up the failure described underneath it. */
.leak-quote {
    font-size: 1.05rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.7;
    color: var(--navy);
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--orange);
}

/* PIPELINE VISUAL */
.leak-visual {
    margin: 2.5rem 0;
    padding: 2rem 1.5rem;
    background: var(--navy);
    border-radius: 6px;
}
.pipeline {
    display: flex;
    align-items: center;
    gap: 0;
    height: 48px;
}
.pipe-stage {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.pipe-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--teal);
    opacity: 0.12;
    border-radius: 2px;
    transition: opacity 0.5s;
}
.pipe-stage.active::before { opacity: 0.35; }
.pipe-stage.active { color: rgba(255,255,255,0.9); }
.pipe-stage.leak::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--orange);
    border-radius: 50%;
    opacity: 0;
    animation: drip 2.5s ease infinite;
}
.pipe-gap {
    width: 2px;
    height: 100%;
    background: var(--navy);
}
.leak-visual-note {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: var(--orange);
    text-align: center;
    margin-top: 1rem;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.leak-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--orange);
    text-decoration: none;
    margin-top: 1.5rem;
    letter-spacing: 0.02em;
    transition: gap 0.2s;
}
.leak-cta:hover { gap: 0.7rem; }

/* ==========================================================================
   THE FIX — home/_fix
   ========================================================================== */
.section-fix {
    padding: 5rem 2rem;
    max-width: 680px;
    margin: 0 auto;
}
.fix-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.fix-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.75rem;
}
.fix-header h2 {
    font-weight: 300;
    font-size: 2rem;
    color: var(--navy);
    letter-spacing: -0.01em;
}

.fix-steps { position: relative; }
.fix-steps::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 40px;
    bottom: 40px;
    width: 1px;
    background: linear-gradient(to bottom, var(--teal), var(--orange));
    opacity: 0.25;
}
.fix-step {
    display: flex;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
    align-items: flex-start;
}
.fix-step:last-child { margin-bottom: 0; }
.fix-badge {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    color: white;
    position: relative;
    z-index: 1;
}
.fix-step:last-child .fix-badge { background: var(--orange); }
.fix-content h3 {
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 0.4rem;
    letter-spacing: 0.01em;
}
.fix-content p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--muted);
}

/* ==========================================================================
   SIGNUP CARD — home/_signup
   ========================================================================== */
.section-signup {
    padding: 3rem 2rem 5rem;
    max-width: 680px;
    margin: 0 auto;
}
.signup-card {
    background: var(--cream);
    border-radius: 6px;
    padding: 3rem;
    text-align: center;
}
.signup-card h3 {
    font-weight: 300;
    font-size: 1.6rem;
    color: var(--navy);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.signup-card p {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 2rem;
}
/* The body is two paragraphs — the magnet, then the ongoing promise. They are
   one thought, so they sit closer to each other than the block does to the form
   beneath it. Scoped to .signup-body rather than `p + p`, which would also pull
   up the flash message that can follow them. */
.signup-body + .signup-body { margin-top: -1.25rem; }
.signup-form {
    display: flex;
    gap: 0;
    max-width: 400px;
    margin: 0 auto;
}
.signup-form input {
    flex: 1;
    padding: 0.85rem 1.1rem;
    background: white;
    border: 1px solid rgba(35, 74, 93, 0.12);
    border-right: none;
    border-radius: 3px 0 0 3px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--navy);
    outline: none;
    transition: border-color 0.3s;
}
.signup-form input::placeholder { color: var(--muted); opacity: 0.5; }
.signup-form input:focus { border-color: var(--teal); }
.signup-form button {
    padding: 0.85rem 1.5rem;
    background: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 0 3px 3px 0;
    color: white;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.signup-form button:hover { background: #e67500; }
/* Flash message after a signup attempt. */
.signup-note {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 1.25rem;
    font-style: italic;
    font-weight: 300;
}
/* The standing reassurance line under the form. Its own class so it is not
   styled as, or stacked identically to, the flash message above. */
.signup-reassurance {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: 0;
}

/* ==========================================================================
   WRITING — home/_writing
   ========================================================================== */
.section-writing {
    padding: 5rem 2rem;
    max-width: 720px;
    margin: 0 auto;
}
.writing-header { margin-bottom: 2.5rem; }
.writing-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.5rem;
}
/* Replaced the "Recent thinking." <h2> with the v1 copy drop — a standfirst,
   not a second heading, so the page keeps one <h2> per section. */
.writing-standfirst {
    font-weight: 300;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--navy);
    letter-spacing: -0.01em;
}
.writing-list { list-style: none; }
.writing-item {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(35, 74, 93, 0.06);
    cursor: pointer;
    transition: padding-left 0.3s;
}
.writing-item:hover { padding-left: 0.5rem; }
.writing-item:hover .writing-item-title { color: var(--orange); }
.writing-num {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--orange);
    opacity: 0.15;
    line-height: 1;
    transition: opacity 0.3s;
}
.writing-item:hover .writing-num { opacity: 0.45; }
.writing-item-meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.writing-date {
    font-size: 0.75rem;
    color: var(--muted);
    min-width: 70px;
    font-weight: 400;
}
.writing-item-title {
    font-weight: 400;
    font-size: 1rem;
    color: var(--navy);
    transition: color 0.3s;
    line-height: 1.4;
}
.writing-subscribe-hint {
    font-size: 0.7rem;
    color: var(--teal);
    margin-top: 0.3rem;
    opacity: 0;
    transition: opacity 0.3s;
    font-weight: 500;
}
.writing-item:hover .writing-subscribe-hint { opacity: 1; }

/* Anchor wrapper added in the Rails port so blog links are real links
   rather than a cursor:pointer div. Inherits colour from the item. */
.writing-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ==========================================================================
   CLOSING — home/_closing
   ========================================================================== */
.section-closing {
    padding: 5rem 2rem;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.closing-text {
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.65;
    color: var(--muted);
    margin-bottom: 2.5rem;
}
.closing-text em {
    color: var(--orange);
    font-style: normal;
    font-weight: 500;
}
.closing-ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-primary {
    display: inline-block;
    padding: 0.85rem 2rem;
    background: var(--orange);
    color: white;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 3px;
    transition: all 0.3s;
}
.cta-primary:hover {
    background: #e67500;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 130, 0, 0.2);
}
.cta-secondary {
    display: inline-block;
    padding: 0.85rem 2rem;
    border: 1px solid var(--navy);
    color: var(--navy);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 3px;
    transition: all 0.3s;
}
.cta-secondary:hover {
    background: var(--navy);
    color: white;
}

/* ==========================================================================
   FOOTER — shared/_footer
   ========================================================================== */
.footer {
    padding: 3rem 4rem;
    border-top: 1px solid var(--teal);
    border-image: linear-gradient(to right, transparent, rgba(3, 151, 167, 0.25), transparent) 1;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-tagline {
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--muted);
}
.footer-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}
.footer-links a {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--orange); }
.footer-copy {
    font-size: 0.68rem;
    color: var(--muted);
    opacity: 0.4;
    text-align: center;
    padding: 1.5rem 2rem 2rem;
}

/* Legal line — IGM Ventures Ltd. Added in the Rails port; the design's
   footer carried only a copyright line. */
.footer-legal {
    font-size: 0.62rem;
    color: var(--muted);
    opacity: 0.4;
    text-align: center;
    padding: 0 2rem 2rem;
    line-height: 1.6;
}

/* ==========================================================================
   SCROLL PROMPT — shared/_scroll_prompt
   ========================================================================== */
.scroll-prompt {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--navy);
    color: white;
    padding: 0.65rem 1.4rem;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    z-index: 90;
    transition: transform 0.4s ease, visibility 0.4s;
    box-shadow: 0 4px 24px rgba(35, 74, 93, 0.2);
    cursor: pointer;
    /* It is a <button> now, for keyboard access — reset the UA styling. */
    border: 0;
    font-family: var(--font-sans);
    text-align: left;
    /* Parked off-screen when inactive. visibility, not just transform, so a
       button nobody can see cannot be reached by Tab either. */
    visibility: hidden;
}
.scroll-prompt:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}
.scroll-prompt.visible {
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}
.scroll-prompt .dot {
    width: 5px;
    height: 5px;
    background: var(--orange);
    border-radius: 50%;
}
/* The picked-out phrase. Was an inline <a> when the pill was a div; the copy
   carries no link now, so the emphasis is all this needs to do. */
.scroll-prompt strong {
    color: var(--orange);
    font-weight: 600;
}

/* ==========================================================================
   INNER PAGES — writing index, articles, contact, privacy

   Not in concept-7-white.html, which is homepage-only. Built from the same
   tokens and type scale so these pages read as part of the same site.
   ========================================================================== */
.page {
    /* Top padding clears the fixed nav. */
    padding: 9rem 2rem 5rem;
    max-width: 720px;
    margin: 0 auto;
}
.page-narrow { max-width: 620px; }

.page-header { margin-bottom: 3rem; }
.page-title {
    font-weight: 300;
    font-size: 2.2rem;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.page-standfirst {
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--muted);
    margin-top: 1rem;
}
/* Contact page only — the site's single line of logistics. Set a step quieter
   than the standfirst above it: it answers a practical question rather than
   carrying the argument. */
.page-logistics {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--muted);
    margin-top: 0.9rem;
}
.page-empty {
    font-size: 1rem;
    color: var(--muted);
}

.article-date {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.75rem;
}
.article-subtitle {
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--muted);
    margin-top: 0.85rem;
}
.article-footer {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(35, 74, 93, 0.08);
}
.writing-item-subtitle {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.3rem;
    line-height: 1.6;
}

/* Rendered markdown */
.prose {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--navy);
}
.prose > * + * { margin-top: 1.5rem; }
.prose h2 {
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--navy);
    margin-top: 3rem;
    letter-spacing: -0.01em;
}
.prose h3 {
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--navy);
    margin-top: 2.25rem;
}
.prose a {
    color: var(--orange);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 130, 0, 0.35);
}
.prose a:hover { border-bottom-color: var(--orange); }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.5rem; }
.prose blockquote {
    border-left: 2px solid var(--teal);
    padding-left: 1.4rem;
    color: var(--muted);
    font-weight: 300;
    font-style: italic;
}
.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    background: var(--cream);
    padding: 0.15em 0.4em;
    border-radius: 3px;
}
.prose pre {
    background: var(--navy);
    color: white;
    padding: 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
}
.prose pre code {
    background: none;
    padding: 0;
    font-size: 0.85rem;
}
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.prose hr {
    border: none;
    border-top: 1px solid rgba(35, 74, 93, 0.1);
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.prose th, .prose td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid rgba(35, 74, 93, 0.08);
}
.prose th {
    font-weight: 600;
    color: var(--navy);
}

/* Forms */
.contact-form { display: block; }
.form-field { margin-bottom: 1.5rem; }
.form-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.form-field input,
.form-field textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background: white;
    border: 1px solid rgba(35, 74, 93, 0.12);
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--navy);
    outline: none;
    transition: border-color 0.3s;
}
.form-field textarea { resize: vertical; }
.form-field input:focus,
.form-field textarea:focus { border-color: var(--teal); }

.contact-form input[type="submit"] {
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
}

/* Checkbox row — label sits beside the box, not above it like text fields. */
.form-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}
.form-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--teal);
    flex: none;
}
.form-check label {
    display: inline;
    margin-bottom: 0;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    cursor: pointer;
}

.form-errors {
    background: rgba(255, 130, 0, 0.07);
    border-left: 2px solid var(--orange);
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    font-size: 0.88rem;
    color: var(--navy);
}
.form-errors ul {
    margin-top: 0.5rem;
    padding-left: 1.2rem;
}
.form-success {
    background: rgba(3, 151, 167, 0.07);
    border-left: 2px solid var(--teal);
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    font-size: 0.9rem;
    color: var(--navy);
}

/* .placeholder-notice removed 21 Aug 2026 — the privacy page was its only
   consumer, and that page now carries a real policy. */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes gentleFade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
    0%, 100% { opacity: 0.45; transform: scaleY(0.65); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); }
}
@keyframes scrollChevron {
    0%, 100% { opacity: 0.35; transform: translateY(0) rotate(45deg); }
    50% { opacity: 1; transform: translateY(7px) rotate(45deg); }
}
@keyframes drip {
    0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.4); }
    25% { opacity: 0.7; }
    100% { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.15); }
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respect a reader's reduced-motion preference. Added in the Rails port:
   the design animates on scroll throughout, which can trigger discomfort. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .nav { padding: 1rem 1.5rem; }
    .nav.scrolled { padding: 0.75rem 1.5rem; }
    .nav-links { display: none; }
    .nav-logo img { height: 26px; }
    .hero { padding: 5rem 1.5rem; }
    .hero h1 { font-size: 1.85rem; }
    .hero-subhead { font-size: 1.08rem; margin-top: 1.4rem; }
    .divider { padding: 1.75rem 0; }
    .divider-line { width: 64px; }
    .hero::before { width: 300px; height: 300px; }
    .section-philosophy { padding: 4rem 1.5rem; }
    .section-leak { padding: 3rem 1.5rem; }
    .leak-title { font-size: 1.3rem; }
    .leak-quote { font-size: 0.98rem; padding-left: 1rem; }
    .pipeline { flex-direction: column; height: auto; }
    .pipe-stage { height: 36px; width: 100%; font-size: 0.55rem; }
    .pipe-gap { width: 100%; height: 2px; }
    .pipe-stage.leak::after { display: none; }
    .section-fix { padding: 3.5rem 1.5rem; }
    /* The bridge question is 97 characters and doubles as the section head.
       At the desktop 2rem it runs to four lines here and swamps the first
       step, so it steps down one line's worth. Copy is approved; do not cut it. */
    .fix-header h2 { font-size: 1.55rem; }
    .section-signup { padding: 2rem 1.5rem 4rem; }
    .signup-card { padding: 2rem 1.5rem; }
    .signup-form { flex-direction: column; }
    .signup-form input {
        border-right: 1px solid rgba(35, 74, 93, 0.12);
        border-radius: 3px;
    }
    .signup-form button { border-radius: 3px; }
    .section-writing { padding: 3.5rem 1.5rem; }
    .writing-item { grid-template-columns: 1fr; gap: 0; }
    .writing-num { display: none; }
    .section-closing { padding: 3.5rem 1.5rem; }
    .closing-ctas { flex-direction: column; align-items: center; }
    .footer {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 2rem 1.5rem;
    }
    .page { padding: 7rem 1.5rem 3.5rem; }
    .page-title { font-size: 1.7rem; }
}