/* ───────── tokens ───────── */
:root{
  --paper:#F4F2EC;
  --cobalt:#1A33C9;
  --ink:#0C1020;
  --moss:#3B5E3A;
  --sage:#9CAE8E;
  --signal:#FF4D1C;
  --carbon:#1C1E24;
  --paper-soft:#EAE7E0;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

::-webkit-scrollbar {
    display: none;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.55;
  letter-spacing:0.005em;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* shared grain — applied as an overlay on tinted surfaces */
.grain{position:relative;isolation:isolate}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("#grain-tex");
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:240px 240px;
  opacity:0.10;
  mix-blend-mode:multiply;
  z-index:1;
}
.grain > *{position:relative;z-index:2}
/* darker surfaces use a lighter-grain blend */
.grain.on-dark::after{mix-blend-mode:screen;opacity:0.07}

/* ───────── top mono label bar (instrument panel) ───────── */
.ribbon{
  background:var(--carbon);
  color:#EDEAE2;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:11px 28px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  text-align:center;
  flex-wrap:wrap;
}
.ribbon .r-l,.ribbon .r-r{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap}
.ribbon .dot{width:6px;height:6px;border-radius:50%;background:var(--sage);display:inline-block}
.ribbon a:hover{color:#fff}

/* ───────── primary nav ───────── */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 28px;
  border-bottom:1px solid rgba(12,16,32,0.08);
  position:sticky;top:0;z-index:50;
  background:rgba(244,242,236,0.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.nav .wm{
  font-family:var(--serif);
  font-weight:300;
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.nav .wm em{font-style:italic;color:var(--cobalt); margin-left: -10px;}
.nav .wm .nav-mark{width:22px;height:auto;flex:none}
.nav ul{
  list-style:none;display:flex;gap:32px;margin:0;padding:0;
  font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
}
.nav ul a{opacity:0.7;transition:opacity .2s}
.nav ul a:hover{opacity:1}

/* ───────── HERO common ───────── */
.hero{
  position:relative;overflow:hidden;
  padding:120px 28px 220px;
  min-height:78vh;
  display:flex;
  isolation:isolate;
}
/* the cobalt radial swell — fades out softly toward the bottom so it tapers
   into the next section instead of clipping at a hard edge */
.swell{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.4) 82%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.4) 82%, rgba(0,0,0,0) 100%);
}
.swell .blob{
  position:absolute;
  border-radius:50%;
  filter:blur(20px);
  will-change:transform;
}
.swell .blob-a{
  width:70vw;height:60vw;left:-10vw;top:20vw;
  background:radial-gradient(circle at 50% 50%, rgba(26,51,201,0.55), rgba(26,51,201,0) 65%);
  animation:swell-a 22s ease-in-out infinite alternate;
}
.swell .blob-b{
  width:55vw;height:50vw;right:-8vw;top:-10vw;
  background:radial-gradient(circle at 50% 50%, rgba(26,51,201,0.30), rgba(26,51,201,0) 65%);
  animation:swell-b 28s ease-in-out infinite alternate;
}
.swell .blob-c{
  width:40vw;height:38vw;left:30vw;top:-12vw;
  background:radial-gradient(circle at 50% 50%, rgba(26,51,201,0.18), rgba(26,51,201,0) 65%);
  animation:swell-c 34s ease-in-out infinite alternate;
}
@keyframes swell-a{
  0%   { transform: translate3d(0,     0,     0) scale(1);    }
  25%  { transform: translate3d(14vw, -8vw,   0) scale(1.12); }
  50%  { transform: translate3d(10vw,  12vw,  0) scale(0.93); }
  75%  { transform: translate3d(-8vw,  8vw,   0) scale(1.08); }
  100% { transform: translate3d(-12vw, -6vw,  0) scale(0.96); }
}
@keyframes swell-b{
  0%   { transform: translate3d(0,     0,     0) scale(1);    }
  25%  { transform: translate3d(-12vw,  8vw,  0) scale(1.14); }
  50%  { transform: translate3d(6vw,   14vw,  0) scale(0.90); }
  75%  { transform: translate3d(14vw,  -4vw,  0) scale(1.10); }
  100% { transform: translate3d(-6vw,  -10vw, 0) scale(0.95); }
}
@keyframes swell-c{
  0%   { transform: translate3d(0,     0,     0) scale(1);    }
  25%  { transform: translate3d(-10vw,  10vw, 0) scale(1.10); }
  50%  { transform: translate3d(8vw,  -10vw,  0) scale(0.94); }
  75%  { transform: translate3d(14vw,   6vw,  0) scale(1.08); }
  100% { transform: translate3d(-4vw,   10vw, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  .swell .blob{animation:none}
}
.hero .grain-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:240px 240px;
  opacity:0.12;
  mix-blend-mode:multiply;
}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto}
.tagline{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.7;
}
.tagline .bullet{color:var(--cobalt);margin:0 0.4em}

/* hero v1 — centered, classic */
.hero[data-variant="centered"] .hero-inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  justify-content:center;gap:36px;
  padding-top:40px;
}
.hero[data-variant="centered"] .h-wordmark{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(72px,11vw,168px);
  line-height:0.92;
  letter-spacing:-0.025em;
  color:var(--ink);
  margin:0;
}
.hero[data-variant="centered"] .h-wordmark em{
  font-style:italic;color:var(--cobalt);font-weight:300;
}
.hero[data-variant="centered"] .h-desc{
  max-width:560px;font-size:18px;line-height:1.5;color:rgba(12,16,32,0.78);
  font-weight:300;
}
.hero[data-variant="centered"] .h-meta{
  display:flex;gap:32px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:0.25em;text-transform:uppercase;opacity:0.55;
}

/* hero v2 — left-aligned with lap number */
.hero[data-variant="lap"] .hero-inner{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:60px;align-items:end;
  min-height:60vh;
}
.hero[data-variant="lap"] .lap-content{display:flex;flex-direction:column;gap:32px;align-self:end}
.hero[data-variant="lap"] .h-wordmark{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(72px,10vw,148px);
  line-height:0.94;letter-spacing:-0.025em;margin:0;color:var(--ink);
}
.hero[data-variant="lap"] .h-wordmark em{font-style:italic;color:var(--cobalt);font-weight:300}
.hero[data-variant="lap"] .h-desc{
  max-width:520px;font-size:17px;line-height:1.55;color:rgba(12,16,32,0.78);font-weight:300;
}
.hero[data-variant="lap"] .lap-stamp{
  text-align:right;
  align-self:end;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.25em;text-transform:uppercase;
  color:rgba(12,16,32,0.6);
  display:flex;flex-direction:column;gap:8px;
}
.hero[data-variant="lap"] .lap-number{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:160px;line-height:0.9;color:var(--cobalt);letter-spacing:-0.04em;
  margin-bottom:-12px;
}

/* hero v3 — split column */
.hero[data-variant="split"]{padding:90px 28px 110px;min-height:72vh}
.hero[data-variant="split"] .hero-inner{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:80px;align-items:center;
}
.hero[data-variant="split"] .h-wordmark{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(64px,9.5vw,140px);
  line-height:0.92;letter-spacing:-0.025em;margin:0;color:var(--ink);
}
.hero[data-variant="split"] .h-wordmark em{font-style:italic;color:var(--cobalt);font-weight:300}
.hero[data-variant="split"] .right{display:flex;flex-direction:column;gap:24px;padding-top:30px}
.hero[data-variant="split"] .h-desc{
  font-size:19px;line-height:1.5;color:rgba(12,16,32,0.82);font-weight:300;max-width:420px;
}
.hero[data-variant="split"] .h-rule{
  width:48px;height:1px;background:var(--ink);opacity:0.35;
}

/* ───────── section common ───────── */
section.band{padding:120px 28px;position:relative;overflow:hidden}
.band-inner{max-width:1280px;margin:0 auto}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:0.28em;
  text-transform:uppercase;opacity:0.6;margin-bottom:24px;display:block;
}
.kicker.on-dark{color:rgba(237,234,226,0.6)}
h2.section-h{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(48px,6.5vw,84px);line-height:0.98;letter-spacing:-0.02em;
  margin:0 0 48px;max-width:920px;
}
h2.section-h em{font-style:italic;color:var(--cobalt);font-weight:300}

/* ───────── WORK ───────── */
.work{background:var(--paper)}

/* layout v1 — three across, cobalt/paper alternating */
.work-grid[data-layout="row3"]{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.work-grid[data-layout="row3"] .card{
  aspect-ratio: 4 / 5;
  padding:32px;
  display:flex;flex-direction:column;justify-content:space-between;
}

/* layout v2 — two large stacked */
.work-grid[data-layout="stack2"]{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.work-grid[data-layout="stack2"] .card{
  aspect-ratio: 5 / 4;
  padding:44px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.work-grid[data-layout="stack2"] .card:nth-child(3){display:none}

/* layout v3 — asymmetric */
.work-grid[data-layout="asym"]{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  grid-template-rows:auto auto;
  gap:24px;
}
.work-grid[data-layout="asym"] .card:nth-child(1){
  grid-row: 1 / span 2;
  aspect-ratio:auto;
  min-height:600px;
  padding:48px;
}
.work-grid[data-layout="asym"] .card:nth-child(2),
.work-grid[data-layout="asym"] .card:nth-child(3){
  aspect-ratio:auto;
  min-height:288px;
  padding:32px;
}
.work-grid[data-layout="asym"] .card{
  display:flex;flex-direction:column;justify-content:space-between;
}

/* card styling */
.card{
  position:relative;isolation:isolate;
  border:1px solid transparent;
  transition:transform .25s ease;
}
.card.cobalt{background:var(--cobalt);color:var(--paper)}
.card.paper{background:var(--paper);color:var(--ink);border-color:rgba(12,16,32,0.10)}
.card.ink{background:var(--ink);color:var(--paper)}
.card .c-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.24em;
  text-transform:uppercase;
  opacity:0.7;
}
.card.cobalt .c-label,.card.ink .c-label{color:rgba(244,242,236,0.7)}
.card .c-title{
  font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.2vw,46px);
  line-height:1.02;letter-spacing:-0.015em;margin:0;
}
.card .c-title em{font-style:italic}
.card.paper .c-title em{color:var(--cobalt)}
.card .c-body{
  font-size:14.5px;line-height:1.5;max-width:32ch;
  opacity:0.85;
}
.card .c-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  opacity:0.6;
}
.card:hover{transform:translateY(-2px)}
.card .c-num{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:64px;line-height:1;opacity:0.18;
}
.card.paper .c-num{color:var(--cobalt)}

/* mouse-follow swell — sits behind content and grain */
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0;transition:opacity 0.4s ease;
}
.card.paper::before{
  background:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),
    rgba(26,51,201,0.13) 0%, transparent 70%);
}
.card.cobalt::before{
  background:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.11) 0%, transparent 65%);
}
.card:hover::before{opacity:1}

/* grain for cards — applied via ::after */
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:240px 240px;
  opacity:0.10;
  mix-blend-mode:multiply;
}
.card.cobalt::after,.card.ink::after{mix-blend-mode:screen;opacity:0.08}
.card > *{position:relative;z-index:1}

/* ───────── ABOUT strip ───────── */
.about{padding:160px 28px;background:var(--paper)}
.about-inner{
  max-width:880px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:48px;
  align-items:start;
}
.about .leaf{
  width:6px;background:var(--moss);align-self:stretch;
  margin-top:8px;
  border-radius:1px;
  min-height:140px;
}
.about[data-accent="sage"] .leaf{background:var(--sage)}
.about .a-content{display:flex;flex-direction:column;gap:28px}
.about .a-kick{
  font-family:var(--mono);font-size:11px;letter-spacing:0.28em;
  text-transform:uppercase;color:var(--moss);
}
.about[data-accent="sage"] .a-kick{color:var(--sage)}
.about h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(36px,4.8vw,60px);line-height:1.02;letter-spacing:-0.015em;
  margin:0;color:var(--ink);
}
.about h3 em{font-style:italic;color:var(--moss)}
.about[data-accent="sage"] h3 em{color:var(--sage)}
.about p{
  font-size:18px;line-height:1.6;color:rgba(12,16,32,0.78);font-weight:300;
  max-width:62ch;margin:0;
}
.about .a-foot{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.24em;
  text-transform:uppercase;color:rgba(12,16,32,0.55);
  display:flex;gap:32px;margin-top:12px;
}

.about .a-more button{
  font-family: var(--mono);
  border-radius: 9999px;
  border: none;
  background-color: var(--moss);
  color: var(--paper);
  padding: 10px;
}

.about .a-more{
  transition: ease 0.3s;
}

.about .a-more:hover{
  transform:translateY(-2px);
}

/* ───────── CONTACT footer ───────── */
footer.contact{
  background:var(--ink);color:#EDEAE2;
  padding:140px 28px 56px;
  position:relative;overflow:hidden;
}
footer.contact .grain-overlay{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:240px 240px;opacity:0.06;mix-blend-mode:screen;
}
.contact-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:48px;
}
.contact .f-kick{
  font-family:var(--mono);font-size:11px;letter-spacing:0.28em;
  text-transform:uppercase;color:rgba(237,234,226,0.55);
}
.contact .mark{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(56px,8vw,110px);line-height:0.95;letter-spacing:-0.025em;
  color:#EDEAE2;margin:0;
}
.contact .mark em{font-style:italic;color:var(--cobalt);font-weight:300}
.contact .mark-symbol{
  width:clamp(72px,9vw,120px);
  height:auto;
  aspect-ratio: 602 / 787;
  margin-bottom:-8px;
  display:block;
  background-color: var(--paper);
  -webkit-mask: url('assets/ringtail-white.png') center/contain no-repeat;
          mask: url('assets/ringtail-white.png') center/contain no-repeat;
}
.contact .insta-wrap{
  display:inline-flex;align-items:center;gap:18px;
  border-top:1px solid rgba(237,234,226,0.18);
  border-bottom:1px solid rgba(237,234,226,0.18);
  padding:22px 36px;
  position:relative;
}
.contact .insta{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(28px,3.6vw,44px);letter-spacing:-0.01em;
  color:#EDEAE2;
}
.contact .insta:hover{color:var(--cobalt)}
/* SIGNAL ORANGE — single moment, the flag */
.signal-flag{
  width:10px;height:24px;background:var(--signal);
  display:inline-block;flex:none;
  box-shadow:0 0 0 1px rgba(255,77,28,0.0);
}
.signal-flag.in-hero{margin-left:14px;align-self:center}
.contact .meta-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
  width:100%;max-width:760px;margin-top:24px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.24em;
  text-transform:uppercase;color:rgba(237,234,226,0.62);
  text-align:left;
}
.contact .meta-row .label{display:block;color:rgba(237,234,226,0.4);margin-bottom:10px;font-size:9.5px}
.contact .meta-row a:hover{color:#fff}
.contact .colophon{
  margin-top:64px;padding-top:28px;width:100%;
  border-top:1px solid rgba(237,234,226,0.10);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.24em;
  text-transform:uppercase;color:rgba(237,234,226,0.4);
}

/* hero signal flag option */
.hero .signal-rule{
  width:36px;height:3px;background:var(--signal);
  display:inline-block;margin-bottom:6px;
}

/* ───────── INTRO OVERLAY ───────── */
.intro{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:var(--cobalt);
  background-image:radial-gradient(120% 120% at 50% 40%,
    #2742e0 0%, var(--cobalt) 55%, #142aa8 100%);
}
/* inherit the site's grain system; screen blend reads on dark cobalt */
.intro .intro-grain.grain{position:absolute;inset:0;pointer-events:none}
.intro .intro-grain.grain::after{mix-blend-mode:screen;opacity:0.12}

.intro-ver{
  position:absolute;top:24px;left:24px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:0.2em;color:rgba(244,242,236,0.6);
}

.intro-mark{display:flex;flex-direction:column;align-items:center;gap:22px}
.intro-logo{width:72px;height:auto;opacity:0}

.intro-word{
  margin:0;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,8vw,96px);
  line-height:0.95;
  color:var(--paper);
  text-align:center;
}
.intro-word em{font-style:italic;color:var(--paper)}
/* each word sits in an overflow-hidden mask; the inner element slides up */
/* padding-block: vertical room for ascenders/descenders at line-height<1   */
/* padding-inline: horizontal room for italic swash glyphs (Fraunces "l")   */
.intro-word .iw{display:block;overflow:hidden;padding:.2em .3em}
.intro-word .iw > *{display:block;transform:translateY(110%)}

.intro-foot{
  position:absolute;bottom:32px;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.intro-bar{
  width:min(280px,60vw);height:1px;
  background:rgba(244,242,236,0.25);overflow:hidden;
}
.intro-bar-fill{
  display:block;height:100%;width:0%;
  background:var(--signal); /* the one signal-orange moment in the animation */
}
.intro-count{
  font-family:var(--mono);font-size:12px;letter-spacing:0.2em;
  color:rgba(244,242,236,0.85);
}

/* ───────── HERO LINE MASKS ───────── */
/* overflow:hidden on .line creates the clipping plane for the slide-up reveal */
/* padding-block: extends clip past glyph edges (line-height 0.92 is tighter     */
/*   than Fraunces metrics); margin-block compensation preserves inter-line gap   */
/* padding-inline: room for italic swash glyphs — the "l" in Ringtail extends    */
/*   past the advance width; no margin-inline needed (centered text, wider box)  */
.h-wordmark .line{display:block;overflow:hidden;padding:.18em .3em;margin-block:-.18em}
.h-wordmark .line .ls{display:block;transform:translateY(110%)}

/* ───────── responsive ───────── */
@media (max-width:980px){
  .nav ul{display:none}
  .ribbon{flex-wrap:wrap;gap:8px}
  .hero[data-variant="lap"] .hero-inner,
  .hero[data-variant="split"] .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero[data-variant="lap"] .lap-number{font-size:96px}
  .work-grid[data-layout="row3"],
  .work-grid[data-layout="stack2"],
  .work-grid[data-layout="asym"]{grid-template-columns:1fr;grid-template-rows:auto}
  .work-grid[data-layout="asym"] .card:nth-child(1){grid-row:auto;min-height:480px}
  .about-inner{grid-template-columns:1fr;gap:24px}
  .about .leaf{width:auto;height:4px;min-height:0}
  .contact .meta-row{grid-template-columns:1fr;gap:24px;text-align:center}
}

@media (prefers-reduced-motion: reduce){
  .intro{display:none}
  .h-wordmark .line{overflow:visible}
  .h-wordmark .line .ls{transform:none}
  .intro-word .iw > *{transform:none}
}