/* =====================================================================
   story-page.css (2026-10-30, Phase 1 step 3): a story's page and a collection's page (Shared/_StoryView,
   Public/Story, Public/Collection, Stories/Preview). Reading layout: one column, photos wide, recipe in a card.
   ===================================================================== */
.sp {
    --sp-navy: #102f56; --sp-text: #2b3d52; --sp-muted: #617286; --sp-line: #e4e9ee; --sp-soft: #f6f8fb; --sp-gold: #c88a22;
    max-width: 920px; margin: 0 auto; padding: 8px 0 48px; color: var(--sp-text);
}
.sp-flash { max-width: 920px; margin: 10px auto 0; padding: 10px 14px; border-radius: 10px; background: #e6f4ec; color: #22603f; font-size: .92rem; }

/* author's banner */
.sp-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #f1dfb8; border-radius: 10px; background: #fffaf0; font-size: .88rem; }
.sp-preview a { color: var(--sp-navy); font-weight: 500; overflow-wrap: anywhere; }
.sp-preview-edit { margin-left: auto; }

/* hero */
.sp-hero { margin: 0 0 22px; }
.sp-cover { margin: 0 0 18px; border-radius: 16px; overflow: hidden; background: var(--sp-soft); }
.sp-cover img { display: block; width: 100%; max-height: 640px; object-fit: cover; }
.sp-head { padding: 0 4px; }
.sp-eyebrow { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; color: var(--sp-gold); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sp-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(200, 138, 34, .4); }
.sp-eyebrow > * + *::before { content: "·"; margin-right: 14px; color: #d8b77a; }
.sp-title { margin: 0 0 8px; color: var(--sp-navy); font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; }
.sp-by { margin: 0; color: var(--sp-muted); font-size: .95rem; }
.sp-by strong { color: var(--sp-navy); font-weight: 600; }
.sp-handle { margin-left: 8px; color: #8a99a8; }

/* story text */
.sp-story { max-width: 680px; margin: 0 4px 26px; font-size: 1.12rem; line-height: 1.75; }
.sp-story p { margin: 0 0 14px; }
.sp-story--drop p:first-child::first-letter { float: left; margin: 6px 8px 0 0; color: var(--sp-navy); font-family: "Fraunces", Georgia, serif; font-size: 3.1em; line-height: .8; }

/* photos */
.sp-photos { display: grid; gap: 10px; margin: 0 0 28px; }
.sp-photos--1 { grid-template-columns: 1fr; }
.sp-photos--2 { grid-template-columns: 1fr 1fr; }
.sp-photos--3 { grid-template-columns: repeat(3, 1fr); }
.sp-photos figure { margin: 0; }
.sp-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--sp-soft); }
.sp-photos--1 img { aspect-ratio: auto; max-height: 520px; }
.sp-photos figcaption { margin-top: 6px; color: var(--sp-muted); font-size: .84rem; }

/* video */
.sp-video { position: relative; margin: 0 0 30px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b1622; }
.sp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* recipe */
.sp-recipe { padding: clamp(18px, 3vw, 32px); border: 1px solid var(--sp-line); border-radius: 18px; background: #fff; box-shadow: 0 6px 24px rgba(16, 47, 86, .05); }
.sp-kicker { margin: 0 0 4px; color: var(--sp-gold); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sp-recipe-title { margin: 0 0 6px; color: var(--sp-navy); font-family: "Fraunces", Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; }
.sp-recipe-desc { margin: 0 0 12px; color: var(--sp-muted); }
.sp-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 10px 0 4px; padding: 12px 0; border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }
.sp-facts > span { display: flex; flex-direction: column; gap: 2px; color: var(--sp-navy); font-weight: 600; }
.sp-facts small { color: var(--sp-muted); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sp-stepper { display: inline-flex; align-items: center; gap: 8px; }
.sp-stepper button { width: 28px; height: 28px; border: 1px solid var(--sp-line); border-radius: 50%; background: #fff; color: var(--sp-navy); font-size: 1rem; line-height: 1; cursor: pointer; }
.sp-stepper button:hover { background: var(--sp-soft); }
.sp-stepper output { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.sp-scaled { margin: 6px 0 0; color: var(--sp-gold); font-size: .82rem; }

.sp-cols { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 44px); margin-top: 18px; }
.sp-cols h3, .sp-notes h3 { margin: 0 0 10px; color: var(--sp-navy); font-size: 1rem; font-weight: 600; }
.sp-cols h4 { margin: 14px 0 6px; color: var(--sp-muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sp-ing ul { margin: 0; padding: 0; list-style: none; }
.sp-ing li { padding: 7px 0; border-bottom: 1px dashed #edf0f4; line-height: 1.4; }
.sp-q { color: var(--sp-navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-u { color: var(--sp-navy); font-weight: 500; }
.sp-note { display: block; color: var(--sp-muted); font-size: .82rem; }
.sp-steps ol { margin: 0; padding: 0; list-style: none; }
.sp-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.sp-step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--sp-navy); color: #fff; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.sp-step-body p { margin: 2px 0 6px; line-height: 1.6; white-space: pre-line; }
.sp-jump { padding: 3px 10px; border: 1px solid #f1dfb8; border-radius: 999px; background: #fffaf0; color: #8a5d12; font-size: .78rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.sp-jump:hover { background: #fdf0d8; }
.sp-allergens { margin: 18px 0 0; padding: 10px 14px; border-radius: 10px; background: #fff6f4; color: #8f2b1f; font-size: .92rem; }
.sp-allergens small { color: #a25b51; }
.sp-notes { margin-top: 18px; }
.sp-notes p { margin: 0; white-space: pre-line; color: var(--sp-text); }
.sp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sp-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--sp-line); border-radius: 999px; background: #fff; color: var(--sp-navy); font-weight: 500; cursor: pointer; }
.sp-btn:hover { background: var(--sp-soft); }
.sp-muted { color: var(--sp-muted); }

/* footer */
.sp-foot { margin: 30px 4px 0; padding-top: 20px; border-top: 1px solid var(--sp-line); }
.sp-author { display: flex; gap: 12px; align-items: flex-start; }
.sp-author p { margin: 2px 0 0; color: var(--sp-muted); font-size: .9rem; }
.sp-author a { color: var(--sp-navy); }
.sp-avatar { flex: 0 0 42px; height: 42px; border-radius: 50%; background: #eef2f7; color: var(--sp-navy); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.sp-made { margin: 16px 0 0; color: var(--sp-muted); font-size: .85rem; }
.sp-made a { color: var(--sp-navy); }
.sp-report { margin-top: 10px; padding: 0; border: 0; background: none; color: #8a99a8; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.sp-reasons { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-reasons label { display: flex; gap: 8px; align-items: center; font-size: .92rem; }

/* collection page */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sp-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--sp-line); border-radius: 14px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.sp-card:hover { box-shadow: 0 8px 24px rgba(16, 47, 86, .1); transform: translateY(-2px); }
.sp-card-img { display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #f5f8fc, #eef2f7); }
.sp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px 16px; }
.sp-card-body b { color: var(--sp-navy); font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 500; }
.sp-card-body small { color: var(--sp-gold); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sp-card-sum { color: var(--sp-muted); font-size: .9rem; line-height: 1.5; }

@media (max-width: 700px) {
    .sp { padding-top: 0; }
    .sp-cover { margin-left: -12px; margin-right: -12px; border-radius: 0; }
    .sp-cols { grid-template-columns: 1fr; }
    .sp-photos--3 { grid-template-columns: 1fr 1fr; }
    .sp-story { font-size: 1.05rem; }
    .sp-recipe { border-radius: 14px; }
}

/* print: the recipe on paper; story, photos and video stay on screen */
@media print {
    .header, .footer, .aks-pagebar, .aks-backbar, .sp-preview, .sp-flash, .sp-story, .sp-photos, .sp-video, .sp-actions, .sp-foot, .sp-stepper button, .sp-cover { display: none !important; }
    .sp { max-width: none; padding: 0; }
    .sp-hero { margin-bottom: 8px; }
    .sp-title { font-size: 20pt; }
    .sp-recipe { border: 0; box-shadow: none; padding: 0; }
    .sp-cols { grid-template-columns: .85fr 1.15fr; }
    .sp-jump { display: none; }
    body { background: #fff !important; }
}


/* =====================================================================
   PORTRAIT PHOTOS (2026-10-31): most phone photos are tall. Nothing is cropped to a strip:
   a tall cover sits beside the title on wide screens; the gallery keeps each photo's own shape (columns).
   ===================================================================== */
@media (min-width: 801px) {
    .sp-hero--portrait { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; align-items: end; }
    .sp-hero--portrait .sp-cover { margin: 0; }
    .sp-hero--portrait .sp-cover img { max-height: 640px; aspect-ratio: auto; object-fit: cover; }
    .sp-hero--portrait .sp-head { padding-bottom: 12px; }
}
@media (max-width: 800px) {
    .sp-hero--portrait .sp-cover img { max-height: 78vh; }
}

/* gallery: justified rows (Shared/_StoryView sets each figure's flex-grow to its width ÷ height): one height per row,
   every photo whole, the row ends level */
.sp-photos { display: flex; flex-direction: column; gap: 10px; columns: auto; }
.sp-photo-row { display: flex; gap: 10px; align-items: flex-start; }
.sp-photo-row figure { min-width: 0; margin: 0; }
.sp-photos img { display: block; width: 100%; height: auto; aspect-ratio: auto; max-height: none; object-fit: initial; border-radius: 12px; background: var(--sp-soft); }


/* =====================================================================
   FULL WIDTH ON TABLETS AND BIG SCREENS (2026-10-31). One layout that adapts; phones keep the single column.
   • a landscape cover runs edge to edge, the title on its lower part over a soft fade (magazine opening)
   • a portrait cover sits beside the title at screen height
   • the story stays a reading column (680px); photos, video and the recipe widen to 1200 / 1100px
   The layout's .container is full width with side padding (--container-padding), so edge to edge = that padding, negated.
   ===================================================================== */
@media (min-width: 900px) {
    /* the page owns its gutters here (as the home page does), so the cover can reach both edges exactly */
    body:has(.sp) .content > .container { padding-left: 0; padding-right: 0; }
    body:has(.sp) .aks-backbar { padding-left: 24px; padding-right: 24px; }
    .sp { max-width: none; padding-top: 0; padding-left: 24px; padding-right: 24px; }
    .sp > .sp-preview, .sp-flash { max-width: 1100px; margin-left: auto; margin-right: auto; }
    .sp > .sp-preview { margin-top: 12px; }
    .sp > .sp-story { max-width: 680px; margin-left: auto; margin-right: auto; font-size: 1.16rem; }
    .sp > .sp-photos { max-width: 1200px; margin-left: auto; margin-right: auto; }
    .sp > .sp-video { max-width: 1100px; margin-left: auto; margin-right: auto; }
    .sp > .sp-recipe { max-width: 1100px; margin-left: auto; margin-right: auto; }
    .sp > .sp-foot { max-width: 680px; margin-left: auto; margin-right: auto; }
    .sp--collection > .sp-grid-wrap { max-width: 1200px; margin: 0 auto; }

    /* plain (no cover): a centered head */
    .sp-hero--plain { max-width: 1100px; margin: 28px auto 26px; }

    /* landscape cover: edge to edge, title on the photo */
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) {
        position: relative;
        margin: 0 -24px 40px;
    }
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-cover { margin: 0; border-radius: 0; }
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-cover img { width: 100%; height: clamp(420px, 72vh, 820px); max-height: none; object-fit: cover; }
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-head {
        position: absolute; left: 0; right: 0; bottom: 0;
        padding: 140px max(var(--container-padding, 16px), calc((100% - 1100px) / 2)) 40px;
        background: linear-gradient(180deg, rgba(8, 20, 36, 0) 0%, rgba(8, 20, 36, .55) 55%, rgba(8, 20, 36, .78) 100%);
        color: #fff;
    }
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-title { color: #fff; font-size: clamp(2.4rem, 4.2vw, 4.2rem); max-width: 22ch; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-eyebrow { color: #f3d9a6; }
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-eyebrow a { border-bottom-color: rgba(243, 217, 166, .5); }
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-eyebrow > * + *::before { color: rgba(243, 217, 166, .7); }
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-by, .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-by strong { color: rgba(255, 255, 255, .92); }
    .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) .sp-handle { color: rgba(255, 255, 255, .7); }

    /* portrait cover: beside the title, at screen height */
    .sp-hero--portrait {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
        max-width: 1200px; margin: 24px auto 44px;
    }
    .sp-hero--portrait .sp-cover { margin: 0; border-radius: 18px; }
    .sp-hero--portrait .sp-cover img { height: min(82vh, 860px); max-height: none; width: 100%; object-fit: cover; }
    .sp-hero--portrait .sp-title { font-size: clamp(2.6rem, 4.2vw, 4rem); }

    /* the recipe card: more room */
    .sp-recipe { padding: 40px 44px; }
    .sp-cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
}

/* a story page's preview banner sits above an edge-to-edge cover: keep it off the photo */
@media (min-width: 900px) {
    .sp > .sp-preview + .sp-hero:is(.sp-hero--wide, :has(> .sp-cover):not(.sp-hero--portrait)) { margin-top: 12px; }
}

/* photo rows centre when story-page.js caps their width (and so their height) */
.sp-photo-row { width: 100%; margin-left: auto; margin-right: auto; }

/* phones and small tablets: the app's container runs edge to edge here, so the story page brings its own 16px gutter;
   the cover still reaches both edges */
@media (max-width: 899px) {
    .sp { padding-left: 16px; padding-right: 16px; }
    .sp .sp-cover { margin-left: -16px; margin-right: -16px; border-radius: 0; }
    body:has(.sp) .aks-backbar { padding-left: 16px; padding-right: 16px; }
    .sp-flash { margin-left: 16px; margin-right: 16px; }
}

/* 2026-10-31: the story page owns its gutters at every width (not only from 900px): between phone and laptop
   (601–899px) the app's container added its own 16px, so the cover stopped 16px short of the edges */
body:has(.sp) .content > .container { padding-left: 0; padding-right: 0; }

/* very wide screens (2026-10-31): photos get more room; the story column stays 680px (long lines tire the eye) */
@media (min-width: 1800px) {
    .sp > .sp-photos { max-width: 1600px; }
    .sp > .sp-video { max-width: 1280px; }
}
/* covers: crop from a little above the middle, where faces usually are */
.sp-cover img { object-position: 50% 38%; }

/* the author's link from the story's recipe card to the full recipe (Details) */
.sp-recipe-open { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; color: #2563a8; font-size: .86rem; font-weight: 500; text-decoration: none; }
.sp-recipe-open:hover { text-decoration: underline; }
@media print { .sp-recipe-open { display: none !important; } }

/* 2026-10-31, step 4: Save to my recipes */
.sp-inline { display: contents; }
.sp-btn--primary { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.sp-btn--primary:hover { background: var(--sp-navy); filter: brightness(1.15); color: #fff; }
.sp-saved { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px; color: #22603f; font-weight: 600; }
.sp-linkbtn { border: 0; background: none; padding: 0 4px; color: var(--sp-muted); text-decoration: underline; cursor: pointer; font-size: .9rem; align-self: center; }
.sp-flash--err { background: #fdecec; color: #8a1f1f; }

/* 2026-10-31, Phase 1 step 5: an author's page (/@handle, Public/Profile) */
.sp-profile-head { display: flex; align-items: center; gap: 20px; }
.sp-profile-head .sp-head { padding: 0; }
.sp-profile-head .sp-title { margin-bottom: 2px; }
.sp-profile-head .sp-handle { margin-left: 0; }
.sp-avatar--lg { flex: 0 0 84px; width: 84px; height: 84px; font-family: "Fraunces", Georgia, serif; font-size: 2.2rem; font-weight: 500; }
.sp-profile-bio { margin: 8px 0 0; max-width: 60ch; color: var(--sp-text); font-size: 1.02rem; line-height: 1.5; }
.sp-profile-section + .sp-profile-section { margin-top: 36px; }
.sp-profile-h { margin: 0 0 14px; color: var(--sp-navy); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sp-card-from { margin-top: auto; padding-top: 4px; color: #8a99a8; font-size: .8rem; }
.sp-profile-empty { margin: 8px 4px 0; }
.sp--profile .sp-foot { max-width: 1200px; }
.sp-by a, .sp-author strong a { color: inherit; text-decoration: none; }
.sp-by a:hover, .sp-author strong a:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .sp-profile-head { gap: 14px; margin-top: 18px; }
    .sp-avatar--lg { flex-basis: 60px; width: 60px; height: 60px; font-size: 1.6rem; }
}

/* 2026-10-31: Share on the collection and profile pages */
.sp-actions--center { justify-content: center; margin: 32px auto 0; }
.sp-profile-share { margin-top: 12px; }