/* ==================================================
   THE MOTORCYCLE THAT STILL MAKES ME SMILE — 29,000
   Kilometres Later with the TVS Raider

   A dedicated stylesheet for one long-form story page.

   This is the same "product story" system introduced by
   macbook-story.css and carried forward by gt6-story.css: same
   tokens, same chapter rhythm, same pastel tint language, same
   scroll-reveal behaviour. Nothing structural changes here — this
   piece is a story, not a review, so the review-only apparatus
   (scorecard, buying-decision triad, sources bibliography) has been
   left out rather than carried over unused. The one deliberate shift
   is the palette: warmer, softer, closer to the golden-hour feeling
   the story is actually about. Keep the shared tokens in sync with
   style.css / featured-story.css / macbook-story.css / gt6-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 — warm amber, standing in for the
       Raider's own yellow without borrowing its literal saturation.
       Used sparingly: chapter numbers, rules, metric highlights. */
    --accent:#B8842E;
    --accent-soft:#B8842E;

    /* 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:#D9A857;
    --accent-soft:#D9A857;

}

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(42px,6.4vw,96px);
    line-height:1.02;
    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:660px;
    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);
}

/* ---------- SPEC STRIP ---------- */

.spec-strip{
    width:min(1100px,92%);
    margin:64px auto 0;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
}

.spec-chip{
    background:var(--surface);
    padding:20px 14px;
    text-align:center;
}

.spec-chip .spec-value{
    display:block;
    font-family:"DM Sans",sans-serif;
    font-size:17px;
    font-weight:700;
    color:var(--text);
    margin-bottom:6px;
}

.spec-chip .spec-label{
    display:block;
    font-size:10.5px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    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);
}

/* ---------- METRIC BLOCK ---------- */

.metric-block{
    text-align:center;
    max-width:640px;
    margin:0 auto;
}

.metric-block .metric{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(30px,4.6vw,58px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--accent);
    margin-bottom:18px;
}

.metric-block p{
    margin:0 auto;
}

/* ==================================================
   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 shifts the shared palette warmer than the MacBook/GT6
   pieces, to match a story about golden-hour rides rather than
   spec sheets: warm cream, dusty orange, sage green, muted sky
   blue, pale yellow (a quiet nod to the bike's own paint) and a
   soft neutral grey for anything that doesn't need a colour to
   make its point.
================================================== */

.tint-cream{ --tint-bg:#F7EEDA; --tint-border:rgba(180,145,58,.32); --tint-accent:#A9843A; }
.tint-orange{ --tint-bg:#F5E4D3; --tint-border:rgba(196,120,58,.32); --tint-accent:#B96B2E; }
.tint-sage{ --tint-bg:#E9EFE2; --tint-border:rgba(107,138,86,.28); --tint-accent:#6B8A55; }
.tint-sky{ --tint-bg:#E7EEF2; --tint-border:rgba(90,130,155,.26); --tint-accent:#5A829B; }
.tint-yellow{ --tint-bg:#FBF3D6; --tint-border:rgba(196,160,40,.3); --tint-accent:#A9862A; }
.tint-grey{ --tint-bg:#EFECE5; --tint-border:rgba(120,113,101,.26); --tint-accent:#726C5D; }

[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-orange{ --tint-bg:rgba(206,130,70,.12); --tint-border:rgba(217,150,100,.32); --tint-accent:#DB9760; }
[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-sky{ --tint-bg:rgba(120,165,195,.10); --tint-border:rgba(140,180,210,.3); --tint-accent:#8FB8D6; }
[data-theme="dark"] .tint-yellow{ --tint-bg:rgba(210,180,90,.12); --tint-border:rgba(222,192,110,.32); --tint-accent:#E0C275; }
[data-theme="dark"] .tint-grey{ --tint-bg:rgba(160,155,140,.12); --tint-border:rgba(180,175,160,.28); --tint-accent:#B3AD9C; }

/* 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-"],
.decision-card[class*="tint-"],
.duo-card[class*="tint-"]{
    border-top:3px solid var(--tint-accent);
}

/* ==================================================
   CARD GRIDS
================================================== */

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

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

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

.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;
}

/* ---------- TWO-SIDED COMPARISON ---------- */

.duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:8px;
}

.duo-card{
    border-radius:var(--radius-md);
    padding:36px 30px;
    border:1px solid var(--tint-border, var(--border));
    background:var(--tint-bg, var(--surface));
}

.duo-card .duo-label{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(22px,3vw,34px);
    font-weight:800;
    margin-bottom:14px;
    color:var(--tint-accent, var(--text));
}

.duo-card p{
    font-size:16px;
    color:var(--story-text);
    max-width:none;
}

/* ---------- SPLIT FEATURE (image/text pairing used for detail and
   close-up shots throughout this piece; same rounded-corner,
   shadowed image treatment as .review-hero-image, just contained to
   half the row instead of full width) ---------- */

.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;
}

/* ---------- FACTOR GRID (spec chips inside a chapter) ---------- */

.factor-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin:22px 0 4px;
}

.factor-chip{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:14px 12px;
    text-align:center;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.4px;
    color:var(--muted);
}

/* ---------- RECOMMENDATION CALLOUT ---------- */

.callout{
    background:var(--ink);
    color:var(--ink-text);
    border-radius:var(--radius-lg);
    padding:44px 40px;
    text-align:left;
    margin-top:36px;
}

.callout .card-label{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
    font-weight:700;
    color:var(--ink-muted);
    margin-bottom:14px;
}

.callout .verdict{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(24px,3.6vw,40px);
    font-weight:800;
    line-height:1.2;
    color:var(--ink-text);
}

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

   Reuses the pastel tint system (apply e.g. class="feature-quote
   tint-sky") 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;
}

/* ==================================================
   SOURCE TAGS
================================================== */

.source-tag{
    display:inline-block;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:999px;
    margin-bottom:16px;
}

.source-tag--experience{
    background:rgba(184,132,46,.14);
    color:var(--accent);
}

.source-tag--spec{
    border:1px solid var(--border);
    color:var(--muted-2);
}

/* ==================================================
   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;
}

.verdict-tagline{
    font-family:"DM Sans",sans-serif;
    font-weight:700;
    font-size:22px;
    color:var(--ink-text);
    text-align:center;
    margin:26px auto 0;
}

/* ==================================================
   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 > *,
.duo > *{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s var(--ease-out-apple), transform .6s var(--ease-out-apple);
}

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

.card-grid > *:nth-child(2),
.duo > *:nth-child(2){ transition-delay:.08s; }

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

/* Spec strip lives in the hero, above the fold — it's visible on
   load rather than gated behind scroll-triggered .show, since the
   header isn't part of Script.js's section-based reveal system. */
.spec-strip > *{
    opacity:0;
    animation:specIn .7s var(--ease-out-apple) forwards;
}

.spec-strip > *:nth-child(1){ animation-delay:.05s; }
.spec-strip > *:nth-child(2){ animation-delay:.12s; }
.spec-strip > *:nth-child(3){ animation-delay:.19s; }
.spec-strip > *:nth-child(4){ animation-delay:.26s; }
.spec-strip > *:nth-child(5){ animation-delay:.33s; }
.spec-strip > *:nth-child(6){ animation-delay:.4s; }
.spec-strip > *:nth-child(7){ animation-delay:.47s; }

@keyframes specIn{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }
}

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

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

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

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

    .spec-strip > *{
        animation:none !important;
        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,
    .card-grid--4{
        grid-template-columns:repeat(2,1fr);
    }

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

    .spec-strip{
        grid-template-columns:repeat(4,1fr);
    }

    .spec-strip > *:nth-child(5){
        grid-column:span 1;
    }

    .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;
    }

    .duo,
    .card-grid,
    .card-grid--2,
    .card-grid--4{
        grid-template-columns:1fr;
    }

    .spec-strip{
        grid-template-columns:repeat(3,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;
    }

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

    .callout{
        padding:32px 24px;
    }

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

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

}