/*
  My Story — a magazine feature, not a stack of twelve identical text blocks.

  Structure: an asymmetric opener, a narrow reading column for the chapters, one full-bleed plate of
  Nathy's own artwork, an offset method block, a three-part "what I make" row, and a closing
  statement on the ink ground. The reading column stays narrow on purpose — the chapters are prose
  and prose needs a measure.
*/

/* ---- Opener ---------------------------------------------------------------- */
.story-hero {
    padding-block: var(--space-2xl) var(--section-gap-tight);
    background: var(--color-bg);
}

.story-hero__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.story-hero__text {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    align-content: center;
}

.story-hero__eyebrow {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
}

.story-hero__title {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
    margin: 0;
    max-inline-size: 15ch;
}

.story-hero__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-ink-muted);
    max-inline-size: var(--measure);
    margin: 0;
}

.story-hero__media { margin: 0; }

.story-hero__media img {
    inline-size: 100%;
    aspect-ratio: var(--ratio-portrait);
    object-fit: cover;
    object-position: center 30%;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

@media (min-width: 62rem) {
    .story-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: var(--space-3xl);
    }

    .story-hero__media img { aspect-ratio: var(--ratio-tall); }
}

/* ---- Reading column --------------------------------------------------------- */
.story-body {
    display: grid;
    gap: var(--space-2xl);
    padding-block: var(--section-gap-tight);
    max-inline-size: calc(var(--container-narrow) + var(--container-pad) * 2);
}

/* ---- How the story is set ----------------------------------------------------
   Three decisions the owner makes in "Montar a página", expressed here and only here.

   She reported the chapters reading as one dense slab: a heading sitting straight on its own text,
   line after line with nothing between them, one paragraph running into the next. Two of those were
   outright bugs - a chapter inside an illustrated row had NO gap at all between its heading and its
   text, because that column is a plain block box and both elements set margin: 0, and paragraphs
   inside a chapter had no separation for the same reason.

   Fixing them is not the same as deciding how much. How open a page of prose should be is a
   typographic judgement, it is hers, and the honest way to give it to her is three named choices
   whose meanings live in this file. Nothing she picks is a measurement; every value below is.

   The default column is what the page shipped as, so a page nobody has set reads exactly as before. */
.story {
    --story-title-gap: var(--space-sm);
    --story-leading: var(--leading-loose);
    --story-paragraph-gap: var(--space-md);
}

.cg-reading--titleGap-compact { --story-title-gap: var(--space-2xs); }
.cg-reading--titleGap-spacious { --story-title-gap: var(--space-lg); }

.cg-reading--lineSpacing-compact { --story-leading: var(--leading-normal); }
.cg-reading--lineSpacing-spacious { --story-leading: 2; }

.cg-reading--paragraphSpacing-compact { --story-paragraph-gap: var(--space-xs); }
.cg-reading--paragraphSpacing-spacious { --story-paragraph-gap: var(--space-xl); }

.story-chapter { display: grid; gap: var(--story-title-gap); }

/* The illustrated chapters. A plain block column with margin: 0 on both children put the heading
   flat against its own text, which is what the owner was looking at. */
.story-row__text { display: grid; gap: var(--story-title-gap); align-content: start; }
.story-row--centred .story-row__text { align-content: center; }

.story-chapter__title {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

/* Nathy's voice: the chapters are set in the editorial serif, larger and looser than UI text. */
.story-chapter__body {
    font-family: var(--font-editorial);
    font-size: var(--text-lg);
    line-height: var(--story-leading);
    color: var(--color-ink);
    margin: 0;
    max-inline-size: none;
}

/* Between paragraphs, and between a paragraph and a list. The owner writes several paragraphs per
   chapter; they had nothing between them and ran together as one block of type. Only the gaps BETWEEN
   are set, so a chapter still starts and ends flush with its own box. */
.story-chapter__body > * { margin: 0; line-height: inherit; }
.story-chapter__body > * + * { margin-block-start: var(--story-paragraph-gap); }

/* ---- Full-bleed plate -------------------------------------------------------- */
.story-figure {
    margin: 0;
    grid-column: 1 / -1;
}

.story-figure img {
    inline-size: 100%;
    aspect-ratio: var(--ratio-editorial);
    object-fit: cover;
    object-position: center 32%;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

/* ---- Method block (offset) ---------------------------------------------------- */
/* The closing chapter rides on the ink ground, not the muted one.
   The owner: "This background should be black as it is on design system off the all other parts." The
   design system uses --cg-black for a section that closes a stretch of reading, which is what this
   one does, and the About page already ends on it further down. On the muted grey this band read as
   one more light row after five of them. Text tokens move with the ground — an ink background with
   --color-ink type on it would be unreadable. */
.story-method {
    padding-block: var(--section-gap-tight);
    background: var(--cg-black);
    color: var(--color-on-deep);
}

.story-method .story-chapter__title { color: var(--color-on-deep-strong); }

.story-method__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.story-method__text { display: grid; gap: var(--space-md); align-content: center; }

.story-method__body {
    font-family: var(--font-editorial);
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-on-deep);
    margin: 0;
    max-inline-size: var(--measure);
}

.story-method__media { margin: 0; }

.story-method__media img {
    inline-size: 100%;
    aspect-ratio: var(--ratio-piece);
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

@media (min-width: 62rem) {
    .story-method__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
        gap: var(--space-3xl);
    }
}

/* ---- "What I make" ------------------------------------------------------------ */
.story-make { padding-block: var(--section-gap-tight); }

.story-make__grid {
    display: grid;
    gap: var(--space-xl);
}

@media (min-width: 48rem) {
    .story-make__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); }
}

.story-make__item {
    display: grid;
    gap: var(--space-sm);
    justify-items: start;
    align-content: start;
    padding-block-start: var(--space-md);
    border-block-start: 2px solid var(--color-ink-strong);
}

.story-make__title { font-size: var(--text-lg); margin: 0; }
.story-make__body { color: var(--color-ink-muted); margin: 0; }

/* ---- Closing ------------------------------------------------------------------ */
.story-closing {
    padding-block: var(--section-gap);
    background: var(--cg-black);
    color: var(--color-on-deep);
}

.story-closing__inner {
    display: grid;
    gap: var(--space-lg);
    justify-items: start;
    max-inline-size: 52rem;
}

.story-closing .story-chapter__title {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-display);
    color: var(--color-on-deep-strong);
}

.story-closing__body {
    font-family: var(--font-editorial);
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-on-deep);
    margin: 0;
    max-inline-size: var(--measure);
}

.story-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-sm);
}

/* Buttons inside the closing block sit on the ink ground. */
.story-closing .button--primary {
    background: var(--cg-red);
    border-color: var(--cg-red);
    color: var(--cg-white);
}

.story-closing .button--ghost {
    border-color: var(--color-on-deep);
    color: var(--color-on-deep);
}

.story-closing .button--ghost:hover { background: var(--color-on-deep); color: var(--cg-black); }
.story-closing .button--link { color: var(--color-accent-on-deep); }

/* ---- The story, as alternating editorial rows (PPT slides 12–14) ---------------------------------
   Text and photograph side by side, the photograph swapping sides each chapter. The point is rhythm:
   read one chapter, cross the page, read the next. Stacked chapters read as a document; alternating
   ones read as a story, which is what this page is. */

.story-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    margin-block-end: var(--space-3xl);
    align-items: start;
}

.story-row:last-child { margin-block-end: 0; }

.story-row__text { min-inline-size: 0; }
.story-row__figure { margin: 0; min-inline-size: 0; }

.story-row__figure img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

@media (min-width: 56rem) {
    .story-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        gap: var(--space-3xl);
        align-items: start;
    }

    /* The photograph moves to the left on alternating chapters. Only the visual order changes — the
       heading still precedes its own text in the document, so the reading order and the outline are
       untouched for a screen reader or a crawler. */
    .story-row--reverse .story-row__text { order: 2; }
    .story-row--reverse .story-row__figure { order: 1; }

    /* Chapter 3, the one the owner annotated: text centred against the photograph rather than pinned
       to the top of the column. */
    .story-row--centred { align-items: center; }
}

/* On a phone every chapter is text then photograph, in document order — alternating sides means
   nothing in a single column, and reordering there would only decouple a caption from its chapter. */
@media (max-width: 55.99rem) {
    .story-row--reverse .story-row__text,
    .story-row--reverse .story-row__figure { order: initial; }
}

/* =========================================================================
   REDESIGN LAYER — the story as a studio notebook
   The opening sits on a light kiln floor; every chapter carries its number, large and in the red;
   photographs sit in the kiln frame and open larger (components.js); the two paths at the end
   become two doors that answer the hand; the dark bands take the kiln floor too.
   ========================================================================= */
.story-hero { position: relative; overflow: hidden; }
.story-hero__media img { border-radius: var(--radius-xl); }

/* The chapter number comes from the markup (data-num): a CSS counter would skip the chapters a
   tab has hidden and number every visible one "01". */
.story-chapter__title[data-num]::before {
    content: attr(data-num);
    display: block;
    margin-block-end: 0.35em;
    font-family: var(--font-display);
    font-size: 0.5em;
    font-weight: 900;
    font-stretch: 125%;
    letter-spacing: -0.02em;
    color: var(--cg-red);
}

.story-row__figure { border-radius: var(--radius-xl); overflow: hidden; }
.story-row__figure img { transition: transform 900ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .story-row__figure:hover img { transform: scale(1.04); }
}

.story-method,
.story-closing { position: relative; overflow: hidden; }

/* The two paths: the grid made room for three and drew two. */
@media (min-width: 48rem) {
    .story-make__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.story-make__item {
    position: relative;
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 90% at 0% 0%, var(--kiln-glow-soft), transparent 60%),
        var(--color-surface);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}

.story-make__item::before {
    content: "";
    position: absolute;
    inset-inline: var(--space-xl);
    inset-block-start: -1px;
    block-size: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--heat-gradient);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .story-make__item:hover {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--kiln-ember) 45%, transparent);
        box-shadow: 0 30px 60px -40px var(--kiln-glow);
    }
}

.story-make__title { font-size: var(--text-xl); font-stretch: 108%; }

/* =========================================================================
   LESS SCROLL, MORE PAGE (owner request, 30/09/2026)
   The five chapters are a book: numbered tabs across the top (components.js), one chapter on screen
   at a time with its photograph beside it, all chapters stacked in one cell so the page never jumps.
   Chapters 7 and 8 sit side by side as two cards. Without the script nothing is hidden: the chapters
   read one after another, as before.
   ========================================================================= */
.story-book.is-tabbed {
    max-inline-size: var(--container-max);
    display: grid;
    gap: var(--space-xl);
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

/* The five chapter tabs sit on ONE line (owner, 30/09/2026): five equal columns on a wide screen, the
   titles allowed to wrap inside their pill; on a phone one swipeable row. */
@media (min-width: 56rem) {
    .story-book.is-tabbed > .tabs__bar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: visible;
    }

    .story-book.is-tabbed .tabs__tab {
        justify-content: center;
        align-items: center;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
        padding-inline: 0.8rem;
        font-size: var(--text-xs);
        border-radius: var(--radius-lg);
        min-block-size: 3.2rem;
    }
}

.story-book.is-tabbed .story-row {
    grid-area: 2 / 1;
    margin: 0;
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(90% 70% at 0% 0%, var(--kiln-glow-soft), transparent 60%),
        var(--color-surface);
    box-shadow: 0 40px 80px -60px rgb(20 14 12 / 0.45);
    align-items: center;
}

.story-book.is-tabbed .story-row[hidden] { display: grid; visibility: hidden; opacity: 0; pointer-events: none; }

/* The tabs already number the chapters. */
.story-book.is-tabbed .story-chapter__title[data-num]::before { display: none; }

.story-book.is-tabbed .story-chapter__title { font-size: var(--text-2xl); font-stretch: 108%; }

.story-book.is-tabbed .story-row__figure img {
    aspect-ratio: 4 / 5;
    max-block-size: min(70vh, 34rem);
    inline-size: 100%;
    object-fit: cover;
}

@media (min-width: 56rem) {
    .story-book.is-tabbed .story-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); }
}

/* Chapters 7 and 8, side by side. */
.story-pair {
    max-inline-size: var(--container-max);
    display: grid;
    gap: var(--space-lg);
    padding-block: clamp(2rem, 1rem + 3vw, 4rem);
}

@media (min-width: 56rem) {
    .story-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.story-pair .story-chapter {
    margin: 0;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.story-pair .story-chapter__title { font-size: var(--text-xl); }