/*
 * /about — the founder story, set as an editorial spread.
 *
 * Loaded only by info.html when seoPage == 'about' (the other Info pages are documents and
 * keep the guide.css reading column). Every colour, font, radius and easing value here comes
 * from the map.css :root tokens — this file lays out an editorial page, it never redefines
 * the palette.
 *
 * The shape of the page: the site's 880px Info column, edge to edge — copy starts and ends where
 * /guides' content does — with a numbered heading per section and one square photographic plate
 * set narrower than the text. Type is guide.css's scale, not a bespoke one.
 * Markup: fragments/about-panel.html.
 *
 * Bump the ?v= in info.html on every edit here (CLAUDE.md) — static assets are cached for a
 * year and the old bytes will keep being served otherwise.
 */

/* —— Shell overrides ————————————————————————————————————————————————
   info.html renders the guide document shell, which centres an 880px reading column and pads it.
   The story re-applies that same column per band (so each one can carry its own vertical rhythm
   and its own top rule), so the shell's single padded column is released here. */

.about-story-body .info-main {
    max-width: none;
    padding: 0;
}

.story {
    /* The band and gutter are .guide-main / .info-main's, not this page's own: the story has to
       start on the same left edge as the section nav above it, the /guides column, and the legal
       footer below it. Every band on this page uses them, so the hero, the numbers, the prose,
       the photograph and the closing spread all share one axis. */
    --band: 880px;
    --gutter: 24px;
    /* The photographic plate's width — narrower than the band so it does not swamp the copy. */
    --measure: 34rem;
    --rule: rgba(41, 40, 36, 0.13);
    color: var(--ink);
}

@media (max-width: 720px) {
    .story {
        --gutter: 18px; /* matches guide.css's small-screen .guide-main padding */
    }
}

/* —— Opening ———————————————————————————————————————————————————————— */

.story-hero {
    max-width: var(--band);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.25rem) var(--gutter) clamp(0.75rem, 2vw, 1.25rem);
}

.story-hero .doc-hero__kicker {
    margin: 0 0 10px;
}

/* .guide-title's scale, verbatim — this h1 is the counterpart of a guide's h1. */
.story-hero__title {
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}

/* .guide-standfirst's scale. */
.story-hero__sub {
    color: var(--ink-soft);
    font-size: 1.1rem;
    line-height: 1.65;
    margin: 0;
    max-width: 34ch;
}

/* —— Numbered sections ——————————————————————————————————————————————— */

.story-section {
    max-width: var(--band);
    margin: 0 auto;
    padding: clamp(0.75rem, 2vw, 1.25rem) var(--gutter);
}

/* The copy fills the band: its right edge has to land where /guides' content right edge does,
   which is a wider line than a text column would otherwise take. */
.story-body {
    max-width: none;
}

.story-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--terracotta-ink);
    margin: 0 0 0.6rem;
    font-family: var(--font, Inter, "Inter Fallback", sans-serif);
}

.story-num::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 1px;
    margin-top: 0.45rem;
    background: var(--rule);
}

/* .guide-h2's scale; the top margin lives on .story-num / the section padding instead. */
.story-h2 {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

/* —— Prose ——————————————————————————————————————————————————————————— */

/* .guide-section p, verbatim. */
.story-prose p {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 16px;
}

.story-prose p:last-child {
    margin-bottom: 0;
}

/* The first line of a section carries the thought — a standfirst, at .guide-standfirst's size. */
.story-prose .story-lede {
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1.65;
}

/* The line a section lands on. */
.story-prose .story-close-line {
    color: var(--ink);
}

/* The advertising sentence — present, deliberately not a feature of the page. */
.story-prose .story-aside {
    color: var(--muted);
    font-size: 0.95rem;
}

/* —— Pull quotes ————————————————————————————————————————————————————— */

.story-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.4rem, 3.2vw, 1.85rem);
    line-height: 1.3;
    color: var(--primary);
    margin: clamp(1.25rem, 3vw, 1.75rem) 0;
}

.story-quote--major {
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
}


/* —— Stanzas (the "Maybe you…" / "Sometimes…" runs) ——————————————————— */

.story-stanza {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: clamp(1rem, 2.5vw, 1.4rem) 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.7;
}

.story-stanza--tight {
    gap: 0.15rem;
}

.story-stanza--closing span,
.story-stanza--finale span {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    line-height: 1.5;
}

/* —— Feature runs (Surprise Me, Shortlists, …) ——————————————————————— */

.story-features {
    margin: clamp(1.25rem, 3vw, 1.75rem) 0;
    border-top: 1px solid var(--rule);
}

.story-feature {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
}

.story-feature b {
    font-family: var(--serif);
    font-size: 1.1em;
    font-weight: 700;
    color: var(--ink);
}

/* —— The photographic plate ——————————————————————————————————————————
   Starts on the page's left axis like everything else, but is the one element held narrower than
   the band — at the full 832px it swamped the copy around it.

   The source frame is a portrait 360-camera selfie: a letterbox crop would cut the family in
   half. On a phone the frame is shown whole; from tablet up it is squared off, with
   object-position holding the family and the shoreline and trimming only sky and foreground.
   Swap in a wider original and only the aspect-ratio below needs revisiting. */

.story-plate {
    max-width: var(--band);
    margin: clamp(1.25rem, 3vw, 1.75rem) auto;
    padding: 0 var(--gutter);
}

.story-plate picture {
    display: block;
}

/* --measure exists for this and nothing else. */
.story-plate picture,
.story-plate__caption {
    max-width: var(--measure);
}

.story-plate__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: 50% 60%;
}

@media (min-width: 700px) {
    .story-plate__img {
        aspect-ratio: 1 / 1;
    }
}

.story-plate__caption {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.7rem;
}

.story-plate__place {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--ink);
}

.story-plate__note {
    color: var(--muted);
    font-size: 0.88rem;
}

/* —— Closing spread ——————————————————————————————————————————————————— */

.story-finale {
    max-width: var(--band);
    margin: 0 auto;
    padding: clamp(1.5rem, 3.5vw, 2.25rem) var(--gutter);
    border-top: 1px solid var(--rule);
}


.story-finale__title {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.story-finale__start {
    margin: clamp(1rem, 2.5vw, 1.4rem) 0 0;
}

.story-startlink {
    color: var(--primary);
    font-size: 1.05rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}

.story-startlink:hover,
.story-startlink:focus-visible {
    color: var(--primary-hover);
    text-decoration-thickness: 2px;
}

.story-finale__lines {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2.8vw, 1.6rem);
    line-height: 1.3;
    color: var(--ink);
}

.story-finale__lines span:last-child {
    color: var(--primary);
    font-style: italic;
}

/* —— Reveal ————————————————————————————————————————————————————————————
   The class is written on <html> by about-reveal.js, so without JS (and for a crawler) every
   section is simply visible — nothing here can hide content on its own. */

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}