/* ==========================================================================
   product-story.css — the story product page (product.html)

   Added 2026-10-07 for product-story.html, which became product.html on
   2026-10-08 (Zlatan); the file kept its name. Page-scoped, like book3d.css:
   only product.html includes it. Everything it draws is new to this page; what it reuses
   (.next-steps, .feature-list, the author block, the reading contents) is
   left in blocks.css / product.css and not restated here.
   ========================================================================== */
/* ---- _two_in_one — the sum: reading + book = one of one ---- */
/* An <ol>: the parts are added in order, and the last is the total. The
   signs between them are drawn here, not written in the markup, so a
   screen reader hears three parts and not "plus" and "equals". */
.story-sum {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    max-width: var(--container-w);
    margin: 0 auto var(--space-8);
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .story-sum {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-14);
    }
}

.story-sum__part {
    position: relative;
    padding: var(--space-6);
    text-align: center;
    background: var(--c-blue-950-80);
    border-top: var(--border-blue-7);

    /* box-shadow: var(--shadow-tight) */
}

.story-sum__part--reading {
    border-top-color: var(--c-blue-700);
}

.story-sum__part--book {
    border-top-color: var(--c-blue-500);
}

/* The total wears the orange seam: it is the thing being bought. */
.story-sum__part--total {
    border-top: var(--border-orange-7);
}

.story-sum__part p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-white-75);
}

/* The sign sits in the gap after each part but the last: under it on a
   phone, beside it from 768px. */
.story-sum__part:not(:last-child)::after {
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--space-12));
    width: var(--space-12);
    font-family: var(--font-heading);
    font-size: var(--fs-4xl);
    line-height: var(--space-12);
    color: var(--c-orange);
    transform: translateX(-50%);
    content: "+";
}

.story-sum__part:nth-last-child(2)::after {
    content: "=";
}

@media (min-width: 768px) {
    .story-sum__part:not(:last-child)::after {
        top: 50%;
        left: auto;
        right: calc(-1 * var(--space-14));
        bottom: auto;
        width: var(--space-14);
        transform: translateY(-50%);
    }
}

.story-sum__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading-fat);
    font-size: var(--fs-xl);
    color: var(--c-white-85);
}

/* Icons are masks, so their colour is the token's (the account tabs do the
   same, 2026-10-07). */
.story-sum__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--space-4);
    background-color: var(--c-orange);
    -webkit-mask: var(--story-icon) center / contain no-repeat;
    mask: var(--story-icon) center / contain no-repeat;
}

.story-sum__icon--reading {
    --story-icon: url('../img/icons/planet-1.svg');
}

.story-sum__icon--book {
    --story-icon: url('../img/icons/book-open-5.svg');
}

.story-sum__icon--one {
    --story-icon: url('../img/icons/astro-star-white.svg');
}

/* A turn of the page's argument, said once under a block: larger than body
   text, in the heading face, never a heading itself. */
.story-turn {
    max-width: 36rem;
    margin-right: auto;
    margin-left: auto;

    /* font-family: var(--font-heading) */
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--c-white-75);
    margin-bottom: var(--space-12);
}

.story-turn a {
    color: var(--c-orange);
}

/* The PDF page's refund line under its steps is small print, not a turn of the
   argument (Zlatan, 2026-10-22). */
#ebook-how-it-comes .story-turn {
    font-size: var(--fs-xs);
}

/* ---- Two halves: a picture and its text ---- */
.story-row {
    align-items: center;
    gap: var(--space-6);
}

@media (min-width:900px) {
    .story-row {
        gap: var(--space-8);
    }
}

/* The picture on the right from 768px; on a phone it stays first, above the
   text, like every other picture on the page. */
@media (min-width: 768px) {
    .story-row--flip {
        flex-direction: row-reverse;
    }
}

.story-photo img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: var(--shadow-soft);
}

@media (max-width: 767px) {
    .story-photo,
    .story-wheel {
        margin-bottom: var(--space-8);
    }
}

/* ---- _your_sky — the wheel, turning ---- */
/* One turn in four minutes: slow enough to be felt rather than watched. */
.story-wheel img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
    opacity: .85;
    animation: story-wheel-turn 240s linear infinite backwards;
}

@keyframes story-wheel-turn {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-wheel img {
        animation: none;
    }
}

/* The three things we will ask for, as chips: said here first, so the order
   form is no surprise. */
.story-moment {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.story-moment li {
    padding: var(--space-1) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--c-white-85);
    border: 1px solid var(--c-orange-50);
    border-radius: var(--radius-pill);
}

@media (max-width: 899px) {
    .story-moment {
        justify-content: center;
    }
}

/* ---- _recognise — three passages, set as excerpts ---- */
.story-quotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
    .story-quotes {
        grid-template-columns: repeat(3, 1fr);
    }
}

.story-quote {
    margin: 0;
    padding: var(--space-6);
    text-align: left;
    background: var(--c-blue-850);
    border-top: var(--border-orange-5);
    box-shadow: var(--shadow-tight);
}

.story-quote__place {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin: 0 0 var(--space-3);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-orange);
}

.story-quote__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading-fat);
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
    color: var(--c-white-85);
    font-style: italic;
}

.story-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: italic;
}

/* The passage in the heading face, so it reads as a page of the book and
   not as more of ours. */
.story-quote blockquote p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--c-white-75);
}

/* ---- _book_object ---- */
.story-facts {
    margin-bottom: var(--space-8);
}

/* ---- _for_whom — two readers, side by side ---- */
.story-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .story-pair {
        grid-template-columns: 1fr 1fr;
    }
}

.story-card {
    padding: var(--space-8) var(--space-6);
    background: var(--c-blue-900);
    border-top: var(--border-blue-7);
    box-shadow: var(--shadow-tight);
}

.story-card__aside {
    padding-top: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--c-white-75);
    border-top: 1px solid var(--c-white-25);
}

/* ---- _how_it_comes — four steps, where the end pages have three ---- */
.story-steps {
    margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
    .story-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Three steps sit in one row of three, wherever the list has exactly
       three (the PDF page's; Zlatan, 2026-10-08, was an #ebook-how-it-comes
       rule). Found from the structure, so no page id and no count of the
       page's own: a fourth step brings back the 2 + 2 above. Its weight
       also beats the four-column rule below. */
    .story-steps:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .story-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- _lucky_star_close — the landing page's hero, as the last word ----
   Zlatan, 2026-10-08: "make it similar to hero on product-landing". It IS
   that hero (.product-intro, .hero-bg, .hero-scrim, .hero-content,
   .hero-commerce), so only what differs is written here: no header above
   it, so less room on top; the arrow has to sit over the photograph; and a
   price, which the landing hero gave up (2026-09-24) but a last button
   needs. */
#story-close > .section-arrow {
    position: relative;
    z-index: 2;
}

#story-close .hero-content {
    padding-top: var(--space-12);
}

.story-close__star {
    display: block;
    margin: 0 auto var(--space-4);
}

/* Left with the text from 900px, where .hero-content stops centring. */
@media (min-width: 900px) {
    .story-close__star {
        margin-left: 0;
    }
}

/* The price on the photograph: orange, as on every dark ground (5.6:1). */
.story-close__price {
    margin: 0;
    font-family: var(--font-heading-fat);
    font-size: var(--fs-4xl);
    line-height: 1.1;
    color: var(--c-orange);
}

.story-close__price .price-note {
    font-family: var(--font-body);
    color: var(--c-white-75);
}

.story-close__price sup {
    font-size: .5em;
}

/* A heading in two halves breaks between them, never inside one: "Then it
   becomes a" over "book." read as a mistake at 1024 wide. Both halves keep
   the heading's own colour (it is not a stressed word, see 2026-09-17). */
.story-line {
    display: inline-block;
    color: inherit;
}

/* ---- _dog_covers — one other cover, as two columns (product-dog.html) ----
   Added 2026-10-13 (Zlatan: "image on the left, text + button on the
   right"). The photo is a link to the cover, like a card, and rotates on its
   own; the name and the price take the page's two heading faces, the price
   in orange as on every dark ground (.story-close__price). Centred on a
   phone, where the photo stacks above the words. */
.dog-cover__photo {
    display: block;
}

.dog-cover__photo .card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.dog-cover__name {
    font-family: var(--font-heading-fat);
    font-size: var(--fs-3xl);
    line-height: 1.1;
}

.dog-cover__price {
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading-fat);
    font-size: var(--fs-4xl);
    line-height: 1.1;
    color: var(--c-orange);
}

@media (max-width: 767px) {
    .dog-cover__text {
        text-align: center;
    }
}

@media (min-width: 768px) {
    .dog-cover__text .button-row {
        text-align: left;
    }
}