/* ==================================================
   BEFORE THE CITY WOKE UP — What Hundreds of Sunday
   Mornings Taught Me

   A dedicated stylesheet for one long-form story page.

   Same "product story" system introduced by macbook-story.css
   and carried forward by gt6-story.css / raider-story.css: same
   tokens, same chapter rhythm, same pastel tint language, same
   scroll-reveal behaviour. This piece leans even further from a
   review than raider-story.css did — there is no product, no
   spec sheet and nothing to score, so the review-only apparatus
   (spec strip, factor grid, source tags, callouts) has been left
   out entirely rather than carried over unused. The palette shifts
   to something quieter and closer to dawn: dusty rose for the
   sunrise, misty blue-grey for the pre-dawn street, sage for the
   route, warm cream for the coffee afterwards. Keep the shared
   tokens in sync with style.css / featured-story.css /
   macbook-story.css / gt6-story.css / raider-story.css if any of
   them change.
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

:root{

    color-scheme:light;

    --bg:#F7F2E9;
    --text:#1B1B1B;
    --story-text:#3E3E3E;
    --muted:#666;
    --muted-2:#777;
    --border:#ddd;
    --surface:#F6F0E5;
    --surface-2:#EFE7D8;

    /* single restrained accent — a dusty sunrise rose, standing in
       for the first light on those Sunday mornings without tipping
       into anything loud. Used sparingly: chapter numbers, rules,
       metric highlights. */
    --accent:#B5654A;
    --accent-soft:#B5654A;

    /* always-dark "moment" sections — deliberately constant across
       themes for dramatic contrast, not tied to light/dark mode */
    --ink:#0A0A0B;
    --ink-text:#F4F2ED;
    --ink-muted:#9B978E;
    --ink-border:#2A2A2B;

    --ease-out-apple:cubic-bezier(.16,1,.3,1);
    --radius-lg:26px;
    --radius-md:18px;
    --radius-sm:12px;

}

[data-theme="dark"]{

    color-scheme:dark;

    --bg:#121212;
    --text:#F5F3EF;
    --story-text:#D8D3C9;
    --muted:#B8B3A9;
    --muted-2:#948E82;
    --border:#2A2A2A;
    --surface:#181818;
    --surface-2:#1D1D1D;

    --accent:#DA9679;
    --accent-soft:#DA9679;

}

body{
    font-family:"Manrope",sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.75;
    overflow-x:hidden;
}

h1,h2,h3,h4{
    font-family:"DM Sans",sans-serif;
    color:var(--text);
    letter-spacing:-0.02em;
}

::selection{
    background:var(--text);
    color:var(--bg);
}

a{
    color:inherit;
}

img{
    display:block;
    width:100%;
}

/* ---------- BACK LINK ---------- */

.back-link{
    display:inline-block;
    text-decoration:none;
    color:var(--muted-2);
    font-size:15px;
    transition:.3s;
}

.back-link:hover{
    color:var(--text);
}

.back-link:focus-visible{
    outline:2px solid var(--text);
    outline-offset:4px;
    border-radius:4px;
}

/* ---------- SHARED LAYOUT ---------- */

.wrap{
    width:min(1180px,90%);
    margin:auto;
}

.wrap--narrow{
    width:min(760px,90%);
    margin:auto;
}

.wrap--mid{
    width:min(920px,90%);
    margin:auto;
}

/* ==================================================
   HERO
================================================== */

.review-hero{
    padding:28px 0 0;
}

.review-hero .back-link{
    display:inline-block;
    margin-bottom:56px;
}

.review-hero .eyebrow{
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    font-weight:700;
    color:var(--muted-2);
    margin-bottom:22px;
    text-align:center;
}

.review-hero h1{
    font-size:clamp(38px,6vw,88px);
    line-height:1.04;
    font-weight:800;
    text-align:center;
    max-width:1100px;
    margin:0 auto 26px;
}

.review-hero .subtitle{
    font-size:clamp(17px,2vw,22px);
    color:var(--muted);
    text-align:center;
    max-width:640px;
    margin:0 auto 56px;
}

.review-hero-image{
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--surface);
    box-shadow:0 30px 80px rgba(0,0,0,.22);
}

.review-hero-image img{
    display:block;
    width:100%;
    height:auto;
}

.chapter p.review-hero-credit,
.review-hero p.review-hero-credit{
    width:min(1180px,90%);
    max-width:none;
    margin:16px auto 0;
    text-align:center;
    font-size:12px;
    color:var(--muted-2);
}

/* ==================================================
   CHAPTERS — shared rhythm
================================================== */

.chapter{
    width:min(1180px,90%);
    margin:auto;
    padding:100px 0;
}

.chapter--tight{
    padding:78px 0;
}

.chapter-head{
    max-width:760px;
    margin-bottom:56px;
}

.chapter-kicker{
    display:flex;
    align-items:baseline;
    gap:14px;
    margin-bottom:20px;
}

.chapter-kicker .num{
    font-family:"DM Sans",sans-serif;
    font-size:14px;
    font-weight:700;
    color:var(--accent);
}

.chapter-kicker .label{
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:12px;
    font-weight:700;
    color:var(--muted-2);
}

.chapter h2{
    font-size:clamp(30px,4.2vw,54px);
    line-height:1.06;
    font-weight:800;
}

.chapter-lede{
    font-size:19px;
    color:var(--story-text);
    max-width:680px;
    margin-top:18px;
}

.chapter p{
    font-size:18px;
    line-height:1.85;
    color:var(--story-text);
    max-width:680px;
}

.chapter p + p{
    margin-top:22px;
}

/* Full-bleed, permanently-dark "moment" sections — a small number of
   these punctuate the page for contrast; not tied to the site's own
   light/dark theme, so no [data-theme] override needed here. */

.chapter--ink{
    background:var(--ink);
    color:var(--ink-text);
    width:100%;
    padding:125px 0;
    margin:0;
}

.chapter--ink .wrap,
.chapter--ink .wrap--narrow{
    text-align:center;
}

.chapter--ink .chapter-kicker{
    justify-content:center;
}

.chapter--ink .chapter-kicker .label{
    color:var(--ink-muted);
}

.chapter--ink p{
    color:var(--ink-muted);
    max-width:620px;
    margin:0 auto;
    font-size:18px;
}

/* ---------- BIG STATEMENT TYPE ---------- */

.statement{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(32px,5.6vw,80px);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-0.02em;
    max-width:980px;
}

.statement--center{
    margin:0 auto;
    text-align:center;
}

.statement .dim{
    color:var(--muted-2);
}

.chapter--ink .statement{
    color:var(--ink-text);
}

.statement + .statement{
    margin-top:6px;
}

.statement-support{
    font-size:19px;
    color:var(--muted);
    max-width:560px;
    margin:26px auto 0;
    text-align:center;
}

.chapter--ink .statement-support{
    color:var(--ink-muted);
}

/* ==================================================
   PASTEL TINT SYSTEM

   Same mechanism as the rest of the story system: a modifier class
   alongside a card component (e.g. class="info-card tint-sage")
   swaps that card's background, border and small-accent colour.

   This page's palette reaches for dawn rather than golden hour:
   dusty rose for first light, misty blue for the pre-dawn street,
   sage for the route through the park, warm amber for streetlight,
   soft clay for the road itself, and a quiet cream for the coffee
   that follows.
================================================== */

.tint-blush{ --tint-bg:#F7E2DE; --tint-border:rgba(181,101,74,.3); --tint-accent:#B5654A; }
.tint-cream{ --tint-bg:#F6EFDD; --tint-border:rgba(180,145,58,.32); --tint-accent:#A9843A; }
.tint-sage{ --tint-bg:#E8EFE1; --tint-border:rgba(107,138,86,.28); --tint-accent:#6B8A55; }
.tint-mist{ --tint-bg:#E6EBEE; --tint-border:rgba(90,115,140,.26); --tint-accent:#5A7390; }
.tint-amber{ --tint-bg:#FBF0D6; --tint-border:rgba(196,160,40,.3); --tint-accent:#A9862A; }
.tint-clay{ --tint-bg:#F1E2D8; --tint-border:rgba(180,110,70,.3); --tint-accent:#A85F35; }

[data-theme="dark"] .tint-blush{ --tint-bg:rgba(210,120,90,.10); --tint-border:rgba(220,140,110,.32); --tint-accent:#E0977C; }
[data-theme="dark"] .tint-cream{ --tint-bg:rgba(215,180,100,.10); --tint-border:rgba(216,185,104,.32); --tint-accent:#D8B968; }
[data-theme="dark"] .tint-sage{ --tint-bg:rgba(140,180,120,.10); --tint-border:rgba(150,190,130,.3); --tint-accent:#9BC384; }
[data-theme="dark"] .tint-mist{ --tint-bg:rgba(120,150,180,.10); --tint-border:rgba(140,170,200,.3); --tint-accent:#96B7D6; }
[data-theme="dark"] .tint-amber{ --tint-bg:rgba(210,180,90,.12); --tint-border:rgba(222,192,110,.32); --tint-accent:#E0C275; }
[data-theme="dark"] .tint-clay{ --tint-bg:rgba(206,130,80,.12); --tint-border:rgba(217,150,110,.32); --tint-accent:#DB9A70; }

/* Tinted cards get a slightly heavier top edge in their accent colour
   — a small editorial "stripe" device. Untinted cards are untouched. */
.info-card[class*="tint-"]{
    border-top:3px solid var(--tint-accent);
}

/* ==================================================
   CARD GRID
================================================== */

.card-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:8px;
}

.info-card{
    background:var(--tint-bg, var(--surface));
    border:1px solid var(--tint-border, var(--border));
    border-radius:var(--radius-md);
    padding:26px 24px;
}

.info-card .card-label{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
    font-weight:700;
    color:var(--tint-accent, var(--muted-2));
    margin-bottom:10px;
}

.info-card .card-title{
    font-family:"DM Sans",sans-serif;
    font-size:20px;
    font-weight:700;
    margin-bottom:10px;
}

.info-card p{
    font-size:15.5px;
    color:var(--story-text);
    line-height:1.7;
    max-width:none;
}

.info-card p + p{
    margin-top:12px;
}

/* ---------- SPLIT FEATURE (image/text pairing used throughout for
   the photographs; same rounded-corner, shadowed image treatment as
   .review-hero-image, just contained to half the row) ---------- */

.split-feature{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:44px;
    align-items:center;
    margin-top:52px;
}

.split-feature img{
    border-radius:var(--radius-lg);
    box-shadow:0 20px 50px rgba(0,0,0,.16);
}

.split-feature .split-text p{
    max-width:none;
}

.split-feature.reverse{
    grid-template-columns:1.15fr 0.85fr;
}

.split-feature.reverse .split-image{
    order:2;
}

.split-feature.reverse .split-text{
    order:1;
}

/* ==================================================
   PULL QUOTE — FEATURE TREATMENT

   Reuses the pastel tint system (apply e.g. class="feature-quote
   tint-mist") so its panel colour always matches whichever chapter
   it sits inside, rather than introducing a one-off palette.
================================================== */

.feature-quote{
    position:relative;
    width:min(760px,92%);
    margin:48px auto 0;
    text-align:center;
    padding:64px 32px 52px;
    background:var(--tint-bg, var(--surface));
    border:1px solid var(--tint-border, var(--border));
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.feature-quote::before{
    content:"\201C";
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    font-family:"DM Sans",sans-serif;
    font-weight:800;
    font-size:160px;
    line-height:1;
    color:var(--tint-accent, var(--accent));
    opacity:.16;
    pointer-events:none;
}

.feature-quote p{
    position:relative;
    z-index:1;
    font-family:"DM Sans",sans-serif;
    font-weight:800;
    font-size:clamp(26px,4vw,44px);
    line-height:1.28;
    letter-spacing:-0.01em;
    color:var(--text);
    max-width:none;
}

.feature-quote .quote-rule{
    position:relative;
    z-index:1;
    width:56px;
    height:3px;
    background:var(--tint-accent, var(--accent));
    border-radius:2px;
    margin:28px auto 0;
}

/* ==================================================
   CLOSING STATEMENT

   Large, centred, no distractions — the dedicated final section the
   story ends on rather than trailing off after the last paragraph.
================================================== */

.verdict-final{
    text-align:center;
}

.verdict-final .statement{
    margin:0 auto;
}

/* ==================================================
   SCROLL REVEAL (mirrors style.css's .hidden/.show system;
   Script.js adds .hidden to every <section> automatically —
   no JS changes needed for this page to use it)
================================================== */

.hidden{
    opacity:0;
    transform:translateY(28px);
    filter:blur(6px);
    transition:opacity .8s var(--ease-out-apple),
               transform .8s var(--ease-out-apple),
               filter .8s var(--ease-out-apple);
}

.show{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}

/* Card-level stagger, driven purely by the parent section's own
   .show class — no extra JS required beyond the existing observer. */
.card-grid > *{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s var(--ease-out-apple), transform .6s var(--ease-out-apple);
}

.show .card-grid > *{
    opacity:1;
    transform:translateY(0);
}

.card-grid > *:nth-child(2){ transition-delay:.08s; }
.card-grid > *:nth-child(3){ transition-delay:.16s; }
.card-grid > *:nth-child(4){ transition-delay:.24s; }
.card-grid > *:nth-child(5){ transition-delay:.32s; }
.card-grid > *:nth-child(6){ transition-delay:.4s; }

@media (prefers-reduced-motion:reduce){

    .hidden,
    .card-grid > *{
        transition:none !important;
    }

    .hidden{
        opacity:1;
        transform:none;
        filter:none;
    }

    .card-grid > *{
        opacity:1;
        transform:none;
    }

}

/* ==================================================
   FOOTER + THEME TOGGLE
   (identical markup/behaviour to the rest of the site —
   duplicated here because this page has its own stylesheet)
================================================== */

footer{
    border-top:1px solid var(--border);
    text-align:center;
    padding:40px;
    color:var(--muted-2);
    font-size:14px;
}

.theme-toggle{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:1000;
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    box-shadow:0 8px 24px rgba(0,0,0,.14);
    cursor:pointer;
    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.theme-toggle:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.theme-toggle:focus-visible{
    outline:2px solid var(--text);
    outline-offset:3px;
}

.theme-toggle-icon{
    width:20px;
    height:20px;
}

.theme-toggle-icon--sun{
    display:none;
}

[data-theme="dark"] .theme-toggle-icon--sun{
    display:block;
}

[data-theme="dark"] .theme-toggle-icon--moon{
    display:none;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width:1024px){

    .card-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .split-feature,
    .split-feature.reverse{
        grid-template-columns:1fr;
        gap:32px;
    }

    .split-feature .split-image,
    .split-feature.reverse .split-image{
        order:1;
    }

    .split-feature .split-text,
    .split-feature.reverse .split-text{
        order:2;
    }

}

@media (max-width:768px){

    .chapter{
        padding:68px 0;
    }

    .chapter--ink{
        padding:84px 0;
    }

    .chapter p,
    .chapter-lede{
        font-size:16.5px;
    }

    .card-grid{
        grid-template-columns:1fr;
    }

    .feature-quote{
        padding:52px 24px 40px;
    }

    .feature-quote::before{
        font-size:110px;
    }

}

@media (max-width:600px){

    .review-hero .back-link{
        margin-bottom:36px;
    }

    .chapter{
        padding:54px 0;
    }

    .chapter--ink{
        padding:68px 0;
    }

    .theme-toggle{
        bottom:18px;
        right:18px;
        width:42px;
        height:42px;
    }

    .theme-toggle-icon{
        width:18px;
        height:18px;
    }

}