/* ==========================================================================
   ALDER & VALE — Landscape design & build
   Typeface: Finlandica (single family, 400–700 + true italic)
   Spacing : strict 8px system — 8/16/24/32/40/48/64/80/96/128/160/192
   ========================================================================== */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* 8px spacing scale */
  --s1:8px;  --s2:16px;  --s3:24px;  --s4:32px;  --s5:40px;  --s6:48px;
  --s7:56px; --s8:64px;  --s10:80px; --s12:96px; --s16:128px; --s20:160px; --s24:192px;

  /* fluid rhythm — endpoints land on the 8px scale */
  --section-y: clamp(96px, 11vw, 192px);
  --gut:       clamp(16px, 4.2vw, 64px);
  --radius:    clamp(16px, 1.6vw, 32px);
  --radius-sm: 16px;

  /* colour — two grounds + one accent */
  --bone:    #EFEBE2;
  --bone-2:  #E5DFD2;
  --bone-3:  #D9D2C2;
  --ink:     #141A11;
  --moss:    #2B3623;
  --clay:    #A9542E;
  --ink-72:  rgba(20,26,17,.72);
  --ink-52:  rgba(20,26,17,.52);
  --ink-38:  rgba(20,26,17,.38);
  --line:    rgba(20,26,17,.16);
  --line-soft: rgba(20,26,17,.09);
  --bone-72: rgba(239,235,226,.72);
  --bone-52: rgba(239,235,226,.52);
  --line-lt: rgba(239,235,226,.22);

  /* type */
  --t-hero:    clamp(2.5rem, 11.4vw, 15rem);
  --t-display: clamp(2.375rem, 6.2vw, 6.5rem);
  --t-mid:     clamp(1.75rem, 3.4vw, 3.25rem);
  --t-h3:      clamp(1.375rem, 1.9vw, 2rem);
  --t-lede:    clamp(1.0625rem, 1.3vw, 1.4375rem);
  --t-body:    1rem;
  --t-sm:      .875rem;
  --t-label:   .6875rem;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul,address{ margin:0; padding:0; }
ol,ul{ list-style:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
address{ font-style:normal; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:'Finlandica', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.62;
  color:var(--ink);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

::selection{ background:var(--ink); color:var(--bone); }
:focus-visible{ outline:2px solid var(--clay); outline-offset:4px; border-radius:2px; }

html{ scrollbar-width:thin; scrollbar-color:var(--ink-38) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--ink-38); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-52); }

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

/* ─── Shared type ────────────────────────────────────────────────────────── */
em{ font-style:italic; font-weight:400; }

.label{
  display:inline-block;
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--ink-52);
}
.label--idx{
  display:flex; align-items:center; gap:var(--s2);
  margin-bottom:var(--s5);
}
.label--idx span{
  color:var(--clay);
  font-variant-numeric:tabular-nums;
}
.label--idx::after{
  content:''; flex:1 1 auto; height:1px; background:var(--line);
  max-width:120px;
}

.h-display{
  font-size:var(--t-display);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.032em;
  text-wrap:balance;
}
.lede{
  font-size:var(--t-lede);
  line-height:1.5;
  color:var(--ink-72);
  max-width:46ch;
}

/* optional break — only where the line is long enough to need it */
.br-md{ display:none; }
@media (min-width:900px){ .br-md{ display:inline; } }

.wrap{
  width:100%;
  max-width:1680px;
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* masked reveal wrappers — padding gives ascenders/descenders room inside the
   mask at sub-1 line-heights; the negative margin keeps layout metrics intact. */
.ln{
  display:block; overflow:hidden;
  padding-block:.14em .20em;
  margin-block:-.14em -.20em;
}
.ln__i{ display:block; }

/* word-level masks (JS-generated, preserves inline <em>) */
.wd{
  display:inline-block; overflow:hidden;
  vertical-align:bottom;
  padding-block:.16em .22em;
  margin-block:-.16em -.22em;
}
.wd__i{ display:inline-block; will-change:transform; }

/* ─── Links & buttons ────────────────────────────────────────────────────── */
.link{
  position:relative;
  text-decoration:none;
  color:inherit;
}
.link::after{
  content:''; position:absolute; left:0; bottom:-2px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.link:hover::after,.link:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s1) var(--s1) var(--s1) var(--s3);
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bone);
  color:var(--ink);
  text-decoration:none;
  font-size:var(--t-sm);
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn svg{
  width:24px; height:24px; flex:none;
  padding:6px;
  border-radius:999px;
  background:var(--ink);
  stroke:var(--bone); stroke-width:1.4;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:background .4s var(--ease), stroke .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.btn:hover svg{ background:var(--bone); stroke:var(--ink); transform:translate(2px,-2px); }

.btn--ghost{ background:transparent; }
.btn--light{ background:var(--bone); border-color:transparent; }
.btn--light:hover{ background:var(--bone); color:var(--ink); }
.btn--light:hover svg{ background:var(--ink); stroke:var(--bone); }
.btn--sm{ font-size:var(--t-label); letter-spacing:.06em; text-transform:uppercase; }

/* ─── Media frames ───────────────────────────────────────────────────────── */
.media{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:var(--bone-3);
}
.media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease);
}
.media--r{ border-radius:var(--radius-sm); }
a:hover .media img,
.card:hover .media img,
.swatch:hover .media img{ transform:scale(1.045); }

/* ─── Preloader ──────────────────────────────────────────────────────────── */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink); color:var(--bone);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--gut);
}
.preloader__inner{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s4);
}
.preloader__mark{
  font-size:clamp(1.25rem,2.6vw,2rem);
  font-weight:400; letter-spacing:-.02em;
}
.preloader__count{
  font-size:clamp(3rem,9vw,8rem);
  font-weight:400; line-height:.85; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.preloader__rule{ height:1px; background:var(--line-lt); width:100%; }
.preloader__rule i{ display:block; height:1px; width:0%; background:var(--bone); }
body.is-loaded{ }

/* ─── Nav ────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; z-index:90;
  top:var(--s2); left:var(--s2); right:var(--s2);
  pointer-events:none;
}
.nav__bar{
  pointer-events:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--s4);
  padding:var(--s2) var(--s2) var(--s2) var(--s4);
  border-radius:999px;
  background:rgba(239,235,226,.13);
  border:1px solid rgba(239,235,226,.22);
  backdrop-filter:blur(20px) saturate(1.25);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  color:var(--bone);
  transition:background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.nav__mark{
  display:inline-flex; align-items:center; gap:var(--s1);
  text-decoration:none; color:inherit;
  font-size:1.0625rem; font-weight:500; letter-spacing:-.015em;
  white-space:nowrap;
}
.nav__leaf{ width:12px; height:16px; fill:currentColor; flex:none; }
.nav__links{
  display:flex; align-items:center; gap:var(--s4);
  justify-self:center;
  font-size:var(--t-sm);
}
.nav__links .link{ opacity:.82; }
.nav__links .link:hover{ opacity:1; }
.nav__bar .btn{ justify-self:end; }

/* light-on-dark (over hero) */
.nav .btn{ background:transparent; border-color:rgba(239,235,226,.28); color:var(--bone); }
.nav .btn svg{ background:var(--bone); stroke:var(--ink); }
.nav .btn:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.nav .btn:hover svg{ background:var(--ink); stroke:var(--bone); }

/* ink-on-bone (past hero) */
.nav.is-solid .nav__bar{
  background:rgba(239,235,226,.92);
  border-color:var(--line);
  color:var(--ink);
}
.nav.is-solid .btn{ border-color:var(--line); color:var(--ink); }
.nav.is-solid .btn svg{ background:var(--ink); stroke:var(--bone); }
.nav.is-solid .btn:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.nav.is-solid .btn:hover svg{ background:var(--bone); stroke:var(--ink); }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero{ height:340vh; position:relative; }
.hero__sticky{ position:sticky; top:0; height:100vh; padding:var(--s2); }
.hero__frame{
  position:relative; height:100%; width:100%;
  border-radius:var(--radius); overflow:hidden;
  background:var(--moss);
  isolation:isolate;
}
.hero__seasons{ position:absolute; inset:0; }
.hero__season{
  position:absolute; inset:0;
  opacity:0;
  will-change:opacity;
}
.hero__season.is-active{ opacity:1; }
.hero__season img{ width:100%; height:100%; object-fit:cover; }

.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(118% 78% at 50% 46%, rgba(20,26,17,.36) 0%, rgba(20,26,17,.12) 54%, rgba(20,26,17,0) 82%),
    linear-gradient(to bottom, rgba(20,26,17,.34) 0%, rgba(20,26,17,0) 28%, rgba(20,26,17,0) 48%, rgba(20,26,17,.62) 100%);
  pointer-events:none;
}

.hero__content{
  position:absolute; z-index:2;
  left:0; right:0; top:50%;
  transform:translateY(-54%);
  padding-inline:var(--s4);
  text-align:center; color:var(--bone);
}
.hero__title{
  font-size:var(--t-hero);
  font-weight:400;
  line-height:.86;
  letter-spacing:-.045em;
  text-shadow:0 2px 40px rgba(20,26,17,.22);
}
.hero__title em{ font-style:italic; }
.hero__sub{
  margin-top:var(--s5);
  font-size:clamp(.9375rem,1.15vw,1.1875rem);
  line-height:1.5;
  color:rgba(239,235,226,.88);
  text-shadow:0 1px 28px rgba(20,26,17,.45);
}

.hero__meta{
  position:absolute; z-index:2;
  left:0; right:0; bottom:0;
  padding:var(--s4);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:var(--s3);
  color:var(--bone);
}
.hero__caption{ display:flex; flex-direction:column; gap:var(--s1); }
.hero__caption .label{ color:var(--bone-52); }
.hero__seasonName{
  font-size:clamp(1.25rem,2.4vw,2rem);
  font-weight:400; line-height:1; letter-spacing:-.02em;
}
.hero__ticks{ display:flex; gap:var(--s1); justify-self:center; padding-bottom:var(--s1); }
.hero__ticks i{
  width:32px; height:2px; border-radius:2px;
  background:rgba(239,235,226,.28);
  transition:background .5s var(--ease);
}
.hero__ticks i.is-on{ background:var(--bone); }
.hero__scroll{
  justify-self:end;
  display:flex; align-items:center; gap:var(--s2);
}
.hero__scroll .label{ color:var(--bone-52); }
.hero__scroll svg{
  width:10px; height:24px; flex:none;
  stroke:var(--bone-72); stroke-width:1.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  animation:nudge 2.4s var(--ease) infinite;
}
@keyframes nudge{ 0%,100%{transform:translateY(-2px);opacity:.5} 50%{transform:translateY(2px);opacity:1} }

/* ─── Manifesto ──────────────────────────────────────────────────────────── */
.manifesto{ padding-block:var(--section-y); }
.manifesto__text{
  font-size:var(--t-mid);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.025em;
  max-width:22ch;
  text-wrap:pretty;
}
.manifesto__foot{
  margin-top:var(--s16);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--s8) var(--s12);
  align-items:start;
  padding-top:var(--s6);
  border-top:1px solid var(--line);
}
.stats{ display:flex; gap:var(--s8); flex-wrap:wrap; }
.stats dt{ margin-bottom:var(--s1); }
.stats dd{
  font-size:clamp(1.75rem,3vw,2.75rem);
  font-weight:400; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

/* ─── Approach ───────────────────────────────────────────────────────────── */
.approach{ padding-block:0 var(--section-y); }
.approach__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s12);
  align-items:stretch;
}
.approach__left{ display:flex; flex-direction:column; }
.approach__left .h-display{ max-width:11ch; }
.approach__body{
  margin-top:auto;
  padding-top:var(--s12);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink-72);
  max-width:44ch;
}
.approach__thumbs{
  margin-top:var(--s6);
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2);
  max-width:400px;
}
.approach__thumbs .media{ aspect-ratio:4/5; }

.approach__cards{ display:flex; flex-direction:column; gap:var(--s2); }
.card{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(140px,18vw,232px);
  gap:var(--s6);
  align-items:center;
  padding:var(--s6);
  border-radius:var(--radius);
  background:var(--bone-2);
  transition:background .6s var(--ease);
}
.card__text{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); }
.card__title{
  font-size:var(--t-h3);
  font-weight:400; line-height:1.05; letter-spacing:-.03em;
}
.card__text p{ color:var(--ink-72); font-size:.9375rem; max-width:38ch; }
.card__text .btn{ margin-top:var(--s2); }
.card__media{ aspect-ratio:1/1; align-self:stretch; height:auto; }
.card--dark{ background:var(--moss); color:var(--bone); }
.card--dark .card__text p{ color:var(--bone-72); }
.card--dark .btn{ background:var(--bone); color:var(--ink); border-color:transparent; }

/* ─── Work ───────────────────────────────────────────────────────────────── */
.work{ padding-block:var(--section-y); background:var(--bone); }
.work__head{ margin-bottom:var(--s16); }
.work__head .h-display{ max-width:14ch; }

.work__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
.work__col{ display:flex; flex-direction:column; gap:clamp(64px,9vw,160px); }
.work__col--b{ padding-top:clamp(64px,13vw,224px); }

.proj__link{ display:block; text-decoration:none; color:inherit; }
.proj__media{ border-radius:var(--radius); }
.proj--a .proj__media,.proj--c .proj__media{ aspect-ratio:4/5; }
.proj--b .proj__media,.proj--d .proj__media{ aspect-ratio:3/2; }
.proj__meta{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s1) var(--s3);
  margin-top:var(--s3);
  padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.proj__num{
  grid-row:1/3;
  font-size:var(--t-label); font-weight:500; letter-spacing:.14em;
  color:var(--clay); padding-top:.5em;
  font-variant-numeric:tabular-nums;
}
.proj__title{
  font-size:var(--t-h3); font-weight:400; line-height:1.05; letter-spacing:-.03em;
}
.proj__loc{ font-size:var(--t-sm); color:var(--ink-52); }
.proj__note{
  grid-column:2; margin-top:var(--s2);
  font-size:.9375rem; color:var(--ink-72); max-width:40ch;
}

/* ─── Marquee ────────────────────────────────────────────────────────────── */
.marquee{
  overflow:hidden; white-space:nowrap;
  padding-block:var(--s6);
  border-block:1px solid var(--line);
  user-select:none;
}
.marquee__track{ display:inline-flex; will-change:transform; }
.marquee__set{
  font-size:clamp(2.5rem,6.4vw,6rem);
  font-weight:400; line-height:1; letter-spacing:-.035em;
  padding-right:.3em;
  color:var(--ink);
}
.marquee__set i{ font-style:normal; color:var(--clay); padding-inline:.12em; }

/* ─── Process ────────────────────────────────────────────────────────────── */
.process{ padding-block:var(--section-y) 0; }
.process__head{ margin-bottom:var(--s16); }

.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); }
.step{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2);
  padding-top:var(--s3);
  border-top:1px solid var(--ink);
  height:100%;
}
.step__num{
  font-size:var(--t-label); font-weight:500; letter-spacing:.14em;
  color:var(--clay); font-variant-numeric:tabular-nums;
}
.step__title{
  font-size:var(--t-h3); font-weight:400; line-height:1.05; letter-spacing:-.03em;
  margin-top:var(--s5);
}
.step__body{ font-size:.9375rem; color:var(--ink-72); }
.step__time{ margin-top:auto; padding-top:var(--s5); }

/* full-bleed band */
.band{
  position:relative;
  margin-top:var(--section-y);
  height:clamp(480px,76vh,880px);
  overflow:hidden;
}
.band img{
  position:absolute; left:0; top:-10%;
  width:100%; height:120%;
  object-fit:cover;
  will-change:transform;
}
.band::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,26,17,.10), rgba(20,26,17,.55));
}
.band__quote{
  position:absolute; z-index:2;
  inset:auto 0 0 0;
  padding:var(--gut);
  color:var(--bone);
  display:flex; flex-direction:column; gap:var(--s3);
}
.band__quote blockquote{
  font-size:clamp(1.5rem,3.4vw,3.25rem);
  font-weight:400; line-height:1.1; letter-spacing:-.03em;
  max-width:20ch;
  text-wrap:balance;
}
.band__quote .label{ color:var(--bone-52); }

/* ─── Palette ────────────────────────────────────────────────────────────── */
.palette{ padding-block:var(--section-y); }
.palette__head{ margin-bottom:var(--s12); }
.palette__head .h-display{ max-width:16ch; }
.swatches{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4) var(--s2); }
.swatch .media{ aspect-ratio:1/1; margin-bottom:var(--s3); }
.swatch__name{
  font-size:1.0625rem; font-weight:500; letter-spacing:-.015em; line-height:1.3;
  margin-bottom:var(--s1);
}

/* ─── Journal ────────────────────────────────────────────────────────────── */
.journal{ padding-block:0 var(--section-y); }
.journal__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--s4);
  margin-bottom:var(--s12);
  padding-bottom:var(--s6);
  border-bottom:1px solid var(--line);
}
.journal__head .label--idx{ flex-basis:100%; margin-bottom:var(--s3); }
.link--more{ font-size:var(--t-sm); }

.posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6) var(--s4); }
.post__link{ display:block; text-decoration:none; color:inherit; }
.post__media{ aspect-ratio:3/2; margin-bottom:var(--s3); }
.post__date{ margin-bottom:var(--s2); }
.post__title{
  font-size:1.375rem; font-weight:400; line-height:1.2; letter-spacing:-.025em;
  margin-bottom:var(--s2);
  max-width:24ch;
}
.post__excerpt{ font-size:.9375rem; color:var(--ink-72); max-width:38ch; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.foot{
  background:var(--ink); color:var(--bone);
  padding-block:var(--section-y) var(--s6);
  border-radius:var(--radius) var(--radius) 0 0;
  margin-top:var(--s2);
}
.foot .label{ color:var(--bone-52); }
.foot .label--idx::after{ background:var(--line-lt); }
.foot__cta{
  display:block;
  text-decoration:none; color:inherit;
  font-size:var(--t-hero);
  font-weight:400; line-height:.86; letter-spacing:-.045em;
  margin-bottom:var(--s20);
}
.foot__cta em{ font-style:italic; }
.foot__cta .ln__i{ transition:color .5s var(--ease); }
.foot__cta:hover .ln__i{ color:var(--clay); }

.foot__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s8) var(--s4);
  padding-top:var(--s6);
  border-top:1px solid var(--line-lt);
}
.foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); }
.foot__col .label{ margin-bottom:var(--s1); }
.foot__col a{ color:var(--bone-72); font-size:.9375rem; }
.foot__col a:hover{ color:var(--bone); }
.foot__big{ font-size:clamp(1rem,1.5vw,1.25rem) !important; color:var(--bone) !important; letter-spacing:-.015em; }
.foot address{ color:var(--bone-72); font-size:.9375rem; line-height:1.6; }

.foot__bar{
  margin-top:var(--s16);
  padding-top:var(--s3);
  border-top:1px solid var(--line-lt);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6);
  justify-content:space-between; align-items:center;
}
.clock{ font-variant-numeric:tabular-nums; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .approach__grid{ grid-template-columns:1fr; gap:var(--s10); }
  .approach__body{ margin-top:var(--s6); padding-top:0; }
  .approach__thumbs{ max-width:none; grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s8) var(--s4); }
  .swatches{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__bar{ grid-template-columns:1fr auto; padding-left:var(--s3); }
  .hero{ height:300vh; }
  .hero__meta{ grid-template-columns:1fr; gap:var(--s3); padding:var(--s3); }
  .hero__ticks{ justify-self:start; }
  .hero__scroll{ display:none; }
  .manifesto__foot{ grid-template-columns:1fr; gap:var(--s6); }
  .card{ grid-template-columns:1fr; gap:var(--s4); padding:var(--s4); }
  .card__media{ aspect-ratio:16/9; order:-1; }
  .work__grid{ grid-template-columns:1fr; gap:var(--s10); }
  .work__col{ gap:var(--s10); }
  .work__col--b{ padding-top:0; }
  .posts{ grid-template-columns:1fr; gap:var(--s10); }
  .post__title{ max-width:none; }
}

@media (max-width:620px){
  :root{ --section-y:clamp(80px,16vw,120px); }
  .nav__bar{ padding:var(--s1) var(--s1) var(--s1) var(--s3); }
  .nav__bar .btn{ padding:var(--s1); border-color:transparent; }
  .nav__bar .btn span{ display:none; }
  .steps{ grid-template-columns:1fr; gap:var(--s6); }
  .swatches{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) var(--s2); }
  .foot__grid{ grid-template-columns:1fr; gap:var(--s6); }
  .stats{ gap:var(--s5); }
  .manifesto__text{ max-width:none; }
  .hero__title{ letter-spacing:-.035em; }
  .band__quote blockquote{ max-width:none; }
  .foot__bar{ gap:var(--s2); }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero{ height:auto; }
  .hero__sticky{ position:relative; height:100vh; }
  .hero__season{ opacity:0; }
  .hero__season.is-active{ opacity:1; }
  .band img{ height:100%; }
}

/* ─── 404 ────────────────────────────────────────────────────────────────── */
.notfound{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--s10) var(--gut) var(--s6);
}
.notfound__code{
  font-size:var(--t-hero);
  font-weight:400; line-height:.86; letter-spacing:-.045em;
}
.notfound__code em{ font-style:italic; }
.notfound__body{ margin-top:var(--s6); max-width:42ch; }
.notfound__body p{ font-size:var(--t-lede); line-height:1.5; color:var(--ink-72); }
.notfound__body .btn{ margin-top:var(--s6); }
.notfound__foot{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); justify-content:space-between;
  padding-top:var(--s3); border-top:1px solid var(--line);
}