/* ==========================================================================
   LAND CRUSHER — brand layer
   Loaded after style.css and store.css. Colour, type and component skin only.
   It does not set heights on .chapter / .emblem-finale: the scroll story reads
   those, so layout that drives the animation stays in the two older sheets.
   ========================================================================== */

/* ---- Type: Archivo (wide italic caps, echoes the badge) + Besley (slab) ---- */
@font-face{font-family:Archivo;src:url('./fonts/archivo.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url('./fonts/archivo-italic.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:Besley;src:url('./fonts/besley.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:Besley;src:url('./fonts/besley-italic.ttf') format('truetype');font-weight:400 900;font-style:italic;font-display:swap}

:root{
  /* Palette. Taken from the badge itself, a sun-faded truck brochure, and the
     three-colour heritage stripe. */
  --dune:oklch(85% .042 86);            /* page / stage */
  --dune-hi:oklch(91% .032 90);
  --dune-lo:oklch(76% .052 80);
  --badge-black:oklch(22% .008 20);     /* the logo's black: rgb(35 31 32) */
  --badge-black-2:oklch(28% .01 30);
  --cast-silver:oklch(79% .004 250);    /* the logo's silver: rgb(186 188 190) */
  --silver-hi:oklch(92% .008 200);
  --ink-soft:oklch(37% .025 70);        /* body copy on dune */
  --silver-soft:oklch(74% .012 80);     /* body copy on black */
  --stripe-1:oklch(83% .155 88);        /* heritage yellow */
  --stripe-2:oklch(70% .175 55);        /* heritage orange */
  --stripe-3:oklch(50% .19 29);         /* heritage red, also the text accent */
  --stripes:linear-gradient(var(--stripe-1) 0 33.4%,var(--stripe-2) 33.4% 66.7%,var(--stripe-3) 66.7%);

  /* The badge leans 24 degrees. Plates, ticks and stripes lean with it. */
  --slant:-24deg;

  /* Type roles */
  --font-display:Archivo,'Arial Black',sans-serif;
  --font-text:Besley,Rockwell,Georgia,serif;
  --step-label:.6875rem;                 /* 11 */
  --step-body:.9375rem;                  /* 15 */
  --step-h3:clamp(1.375rem,1.9vw,1.75rem);
  --step-h2:clamp(2.25rem,4vw,4.25rem);
  --step-h1:clamp(2.5rem,4.7vw,5rem);

  /* Space: 4pt scale */
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:48px;--space-2xl:96px;

  /* Legacy names used by style.css, re-pointed at the new palette */
  --ink:var(--dune);
  --paper:var(--badge-black);
  --muted:var(--ink-soft);
  --line:oklch(22% .008 20 / .24);
  --accent:var(--stripe-3);
}

body{font-family:var(--font-text);font-size:16px;background:var(--dune);color:var(--badge-black)}

/* ---- Headings: wide italic caps, with the punchline set in slab italic ---- */
h1,h2,.product h3{font-family:var(--font-display);font-style:italic;font-weight:800;font-stretch:108%;text-transform:uppercase;letter-spacing:-.025em;line-height:.94}
h1{font-size:var(--step-h1);margin-bottom:var(--space-lg)}
h2{font-size:var(--step-h2);margin-bottom:var(--space-lg)}
h1 em,h2 em{display:inline-block;margin-top:.14em;font-family:var(--font-text);font-style:italic;font-weight:500;font-stretch:normal;text-transform:none;letter-spacing:-.03em;font-size:.92em;line-height:1;color:inherit}

/* ---- Labels ---- */
.eyebrow,.spec span,.hero-bottom,.floor-label,.product-meta,.chapter-nav span,button,.loading,footer{font-family:var(--font-display);font-weight:650;font-stretch:100%}
.eyebrow{max-width:none!important;font-size:var(--step-label)!important;letter-spacing:.16em;margin-bottom:var(--space-lg)!important;text-transform:uppercase}
.dash{width:30px;height:9px;background:var(--stripes);transform:skewX(var(--slant))}

/* ---- Body copy ---- */
.chapter .copy{width:44%;max-width:600px}
.copy p{font-size:var(--step-body);line-height:1.6;max-width:36ch;color:var(--ink-soft)}
.intro{margin-bottom:var(--space-xl);line-height:1.6}
.spec{margin-top:var(--space-xl);padding-top:var(--space-md);gap:6px;max-width:300px}
.spec span{font-size:var(--step-label);letter-spacing:.16em;color:var(--stripe-3)}
.spec strong{font-family:var(--font-text);font-style:italic;font-weight:500;font-size:1.0625rem;color:var(--badge-black)}

/* ---- The plate: every call to action is cut like the TOYOTA plate ---- */
.text-link,.header-note{font-family:var(--font-display);font-weight:750;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:var(--space-md);padding:13px 18px;background:var(--silver-hi);color:var(--badge-black);border:1.5px solid var(--badge-black);box-shadow:4px 4px 0 var(--badge-black);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1),background-color .18s}
.text-link span,.header-note span{font-size:1rem;line-height:1}
.text-link:hover,.header-note:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--badge-black);background:var(--stripe-1)}
.text-link:hover span{transform:none}
.header-note{padding:10px 14px;font-size:var(--step-label);box-shadow:3px 3px 0 var(--badge-black)}

/* ---- Masthead ---- */
.masthead{background:linear-gradient(to bottom,oklch(85% .042 86 / .96),oklch(85% .042 86 / 0))}
.identity{display:block;line-height:0}
.identity img{display:block;height:40px;width:auto}

/* ---- Stage: brochure paper instead of a dark showroom ---- */
.stage{background:radial-gradient(ellipse at 64% 52%,var(--dune-hi) 0,var(--dune) 46%,var(--dune-lo) 100%)}
.stage-wash{background:linear-gradient(90deg,oklch(85% .042 86 / .78) 0%,oklch(85% .042 86 / .35) 30%,transparent 48%),linear-gradient(0deg,oklch(76% .052 80 / .7),transparent 24%)}
.emblem-chapter .stage-wash{background:linear-gradient(0deg,oklch(76% .052 80 / .55),transparent 30%)}
.floor-label{font-size:var(--step-label);letter-spacing:.16em;opacity:.75}
.giant-type{display:none}
.hero-bottom{font-size:var(--step-label);letter-spacing:.16em}
.loading{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}

/* ---- Chapter ticks, slanted like the badge ---- */
.chapter-nav a:after{width:14px;height:4px;border:0;border-radius:0;background:oklch(22% .008 20 / .32);transform:skewX(var(--slant));transition:width .2s cubic-bezier(.2,.8,.2,1),background-color .2s}
.chapter-nav a[aria-current]:after{width:26px;background:var(--stripe-3);border:0}
.chapter-nav span{font-size:var(--step-label);right:36px}

/* ---- View controls: a black switch panel ---- */
.view-controls{background:var(--badge-black);color:var(--silver-hi);border:0;border-radius:0;padding:4px 20px;box-shadow:4px 4px 0 oklch(22% .008 20 / .25)}
.view-controls button{font-size:var(--step-label);letter-spacing:.14em}
.view-controls button:hover{color:var(--stripe-1)}
.view-controls .divider{background:oklch(92% .008 200 / .3)}

/* ---- Progress: the heritage stripe fills as you scroll ---- */
.progress-track{height:6px;background:oklch(22% .008 20 / .14)}
#progress{background:var(--stripes)}

/* ---- The goods ---- */
.collection{background:var(--badge-black);color:var(--silver-hi);padding-top:calc(var(--space-2xl) + 18px)}
.collection:before{content:'';position:absolute;inset:0 0 auto;height:18px;background:var(--stripes)}
.collection-heading{align-items:flex-end;margin-bottom:var(--space-2xl)}
.collection-heading .eyebrow{color:var(--stripe-1)!important}
.collection h2 em{color:var(--cast-silver)}
.collection-heading>p{font-size:var(--step-body);line-height:1.6;color:var(--silver-soft);max-width:38ch}
.preview-note{font-family:var(--font-display);font-weight:650;font-size:var(--step-label);letter-spacing:.14em;text-transform:uppercase;color:var(--stripe-1);margin-top:var(--space-lg)}
.products{grid-template-columns:repeat(2,1fr);gap:var(--space-2xl) var(--space-lg)}
.product-emblem{grid-column:1/-1;display:grid;grid-template-columns:1.55fr 1fr;gap:var(--space-xl);align-items:end}
.product-art,.product:nth-child(2) .product-art,.product:nth-child(3) .product-art,.product:nth-child(4) .product-art{background:var(--badge-black-2);outline:1px solid oklch(92% .008 200 / .16)}
.product-meta{font-size:var(--step-label);letter-spacing:.16em;text-transform:uppercase;color:var(--stripe-1);margin-top:var(--space-lg)}
.product-emblem .product-meta{margin-top:0}
.product h3{font-size:var(--step-h3);letter-spacing:-.015em;line-height:1;margin:var(--space-md) 0 var(--space-sm)}
.product-emblem h3{font-size:var(--step-h2)}
.product p{font-size:var(--step-body);line-height:1.6;color:var(--silver-soft);max-width:40ch;margin:0}
.product details{border-top:1px solid oklch(92% .008 200 / .22);margin-top:var(--space-lg);padding-top:var(--space-sm);font-size:.875rem}
.product summary{font-family:var(--font-display);font-weight:650;font-size:var(--step-label);letter-spacing:.16em;text-transform:uppercase;align-items:center;padding:var(--space-sm) 0}
.product summary span{font-size:1.125rem;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.product details p{margin-top:var(--space-sm);font-size:.875rem}
.product details a{color:var(--silver-hi)}
.photo-expand{font-family:var(--font-display);font-weight:650;font-size:var(--step-label);letter-spacing:.1em;text-transform:uppercase;background:var(--silver-hi);color:var(--badge-black)}
.concept-caption{font-size:.8125rem;line-height:1.6;color:var(--silver-soft);max-width:60ch;margin-top:var(--space-2xl)}
.collection summary:focus-visible,.collection a:focus-visible{outline-color:var(--stripe-1)}
.shopping .masthead{background:var(--badge-black)}

/* ---- Footer ---- */
footer{background:var(--badge-black);color:var(--silver-hi);border-top:1px solid oklch(92% .008 200 / .16);align-items:center;font-size:var(--step-label);letter-spacing:.14em;padding-top:var(--space-xl)}
footer img{display:block;height:34px;width:auto}
footer p{font-family:var(--font-text);font-weight:400;font-size:.8125rem;line-height:1.6;color:var(--silver-soft);max-width:52ch}

@media(min-width:1600px){.chapter .copy{max-width:680px}.copy p{font-size:1rem;max-width:36ch}}
@media(max-width:1100px){.products{grid-template-columns:1fr 1fr}.product-emblem{grid-template-columns:1fr;gap:var(--space-lg)}.product-emblem .product-meta{margin-top:0}}
@media(max-width:800px){
  h1,.hero h1{font-size:2.125rem}
  h2,.emblem-copy h2{font-size:2.125rem}
  .chapter .copy{width:100%;max-width:100%}
  .copy p{font-size:.875rem;line-height:1.55;max-width:32ch}
  .intro{margin-bottom:var(--space-lg)}
  .eyebrow{font-size:.625rem!important;margin-bottom:var(--space-md)!important}
  .text-link{font-size:.6875rem;padding:11px 14px;gap:12px}
  .identity img{height:22px}
  .masthead .header-note{max-width:none;font-size:.625rem;padding:8px 10px;gap:8px;line-height:1}
  .stage-wash{background:linear-gradient(180deg,oklch(85% .042 86 / .82) 0,oklch(85% .042 86 / .5) 34%,transparent 58%,oklch(76% .052 80 / .6))}
  .hero-bottom{font-size:.625rem}
  .spec{margin-top:var(--space-lg);padding-top:var(--space-sm)}
  .spec strong{font-size:.9375rem}
  .view-controls button{font-size:.625rem}
  .collection{padding-top:calc(var(--space-xl) + 34px)}
  .collection-heading{margin-bottom:var(--space-xl)}
  .products{grid-template-columns:1fr;gap:var(--space-xl)}
  .product-emblem h3{font-size:2.125rem}
  footer{align-items:flex-start}
}

/* ---- The swipe: three heritage stripes that run flat, then turn up ----
   One element plus two pseudo-elements, so the flat run stretches to any width
   while the corner radius stays fixed. Tune with --w (stripe), --g (gap), --r (turn). */
.swipe{--w:12px;--g:3px;--r:96px;position:absolute;box-sizing:border-box;pointer-events:none;border:solid var(--stripe-1);border-width:0 var(--w) var(--w) 0;border-bottom-right-radius:var(--r)}
.swipe:before,.swipe:after{content:'';position:absolute;box-sizing:border-box;border:solid;border-width:0 var(--w) var(--w) 0}
.swipe:before{inset:0 var(--g) var(--g) 0;border-color:var(--stripe-2);border-bottom-right-radius:calc(var(--r) - var(--w) - var(--g))}
.swipe:after{inset:0 calc(var(--g)*2 + var(--w)) calc(var(--g)*2 + var(--w)) 0;border-color:var(--stripe-3);border-bottom-right-radius:calc(var(--r) - var(--w)*2 - var(--g)*2)}
/* Behind the truck: painted on the brochure page, under the 3D canvas */
/* The upswing runs to the top of the page and fades out as it climbs */
.stage-swipe{left:0;top:0;width:91%;height:86%;-webkit-mask-image:linear-gradient(to bottom,transparent 3%,#000 52%);mask-image:linear-gradient(to bottom,transparent 3%,#000 52%)}
.floor-label{display:none} /* the swipe owns the floor now */
/* Footer: the stripes turn up toward "Back to top" */
footer{overflow:hidden}
.footer-swipe{--w:8px;--g:2px;--r:56px;left:0;right:calc(var(--gutter) + 30px);bottom:26px;height:62px}
footer>:not(.footer-swipe){position:relative;z-index:1}
@media(max-width:800px){
  .stage-swipe{--w:8px;--g:2px;--r:64px;top:0;height:78%;width:80%;-webkit-mask-image:linear-gradient(to bottom,transparent 12%,#000 66%);mask-image:linear-gradient(to bottom,transparent 12%,#000 66%)}
  .footer-swipe{right:24px;bottom:34px;height:56px}
}

/* Hero: the heritage stripe sits under "factory", exactly as wide as the word */
.understripe{display:inline-block;position:relative;padding-bottom:.3em}
.understripe:after{content:'';position:absolute;left:0;right:.04em;bottom:.06em;height:.17em;background:var(--stripes);transform:skewX(var(--slant))}

/* ---- Phone: keep the copy off the truck ----
   Phone chapters are short (60svh, set in store.css), so copy from two or three
   chapters used to ride over the model at once. Here each chapter's copy sits in one
   fixed slot under the masthead and crossfades as its chapter passes, so text never
   travels across the truck. Pure CSS scroll-driven fades; app.js is not involved.
   Browsers without scroll-driven CSS, or with reduced motion, keep the normal flow. */
@media(max-width:800px){
  .chapter:not(.hero):not(.emblem-finale) h2{font-size:2.125rem;margin-bottom:var(--space-md)}
  .chapter .spec{display:none}
  .copy p{max-width:34ch}
  /* By the last chapter the truck has moved up to centre stage: headline and button only */
  #whole .copy p:not(.eyebrow){display:none}
  /* Bigger truck: enlarge the rendered canvas around the model's centre */
  #car{transform:scale(1.16);transform-origin:49% 68%}
}
@supports (animation-timeline:view()){
  @media(max-width:800px) and (prefers-reduced-motion:no-preference){
    .chapter{view-timeline:--chapter block}
    .chapter:not(.hero) .copy{position:fixed;top:calc(92px + env(safe-area-inset-top,0px));left:var(--gutter);right:var(--gutter);width:auto;animation:copy-pass linear both;animation-timeline:--chapter;animation-range:cover}
    /* The intro copy fades as it reaches the masthead instead of sliding under the logo */
    .hero .copy{animation:intro-out linear both;animation-timeline:--chapter;animation-range:cover}
    .hero .hero-bottom{animation:hint-out linear both;animation-timeline:--chapter;animation-range:cover}
  }
}
/* Chapter cover progress: 37.5% is the chapter top at 40% of the screen, 75% is it 20% above the top */
@keyframes copy-pass{0%,38%{opacity:0;visibility:hidden}43%,69%{opacity:1;visibility:visible}74%,100%{opacity:0;visibility:hidden}}
@keyframes hint-out{0%,51%{opacity:1}57%,100%{opacity:0}}
@keyframes intro-out{0%,50.5%{opacity:1;visibility:visible}57%,100%{opacity:0;visibility:hidden}}