/* ============================================================
   David Hope — Sculptor · Portfolio
   ============================================================ */

:root{
  /* palette — warm gallery dark */
  --ink:#0d0c0a;
  --ink-2:#141210;
  --ink-3:#1b1814;
  --bone:#ece4d6;
  --bone-2:#e3d9c8;
  --bone-dim:#b6ab98;
  --muted:#7c7263;
  --line:rgba(236,228,214,.14);
  --line-strong:rgba(236,228,214,.28);
  --bronze:#c08a4e;
  --bronze-2:#d6a566;
  --gold:#e7caa6;
  --umber:#6e4a28;

  --bg:var(--ink);
  --fg:var(--bone);

  /* type */
  --serif:'Fraunces', 'Times New Roman', Georgia, serif;
  --mono:'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease:cubic-bezier(.62,.05,.01,.99);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --pad: clamp(1.15rem, 4vw, 4.5rem);
  --maxw: 1680px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--serif);
  font-weight:340;
  line-height:1.5;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  cursor:none;
}
@media (hover:none){ body{cursor:auto} }

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:none}
::selection{background:var(--bronze);color:var(--ink)}

/* ---------- shared bits ---------- */
.section-label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bone-dim);display:flex;align-items:center;gap:.85em;
}
.section-label__no{color:var(--bronze)}
em{font-style:italic}

/* ============================================================
   GRAIN + VIGNETTE
   ============================================================ */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
  will-change:transform;mix-blend-mode:overlay;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}20%{transform:translate(-8%,4%)}
  30%{transform:translate(4%,-8%)}40%{transform:translate(-4%,8%)}50%{transform:translate(-8%,4%)}
  60%{transform:translate(8%,0)}70%{transform:translate(0,8%)}80%{transform:translate(4%,-4%)}
  90%{transform:translate(-4%,4%)}100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:8999;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 42%, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{position:fixed;top:0;left:0;z-index:9750;pointer-events:none;mix-blend-mode:difference;
  opacity:0;transition:opacity .4s}
.cursor.is-active{opacity:1}
.cursor__dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--bone);
  transform:translate(-50%,-50%)}
/* high-contrast cursor inside the detail lightbox (no blend, sits on busy imagery) */
.cursor.is-lightbox{mix-blend-mode:normal}
.cursor.is-lightbox .cursor__dot{width:11px;height:11px;background:var(--bronze-2);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 1px 6px rgba(0,0,0,.4)}
.cursor.is-lightbox .cursor__ring{border-color:rgba(255,255,255,.55)}
.cursor__ring{position:absolute;width:46px;height:46px;border:1px solid var(--bone);border-radius:50%;
  transform:translate(-50%,-50%) scale(.4);opacity:0;display:grid;place-items:center;
  transition:transform .45s var(--ease-out),opacity .45s var(--ease-out)}
.cursor__label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);opacity:0;transition:opacity .3s}
.cursor.is-hover .cursor__ring{transform:translate(-50%,-50%) scale(1);opacity:1}
.cursor.is-hover .cursor__dot{opacity:0}
.cursor.is-open .cursor__ring{transform:translate(-50%,-50%) scale(1.55);opacity:1}
.cursor.is-open .cursor__label{opacity:1}
.cursor.is-open .cursor__dot{opacity:0}
@media (hover:none){ .cursor{display:none} }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{position:fixed;inset:0;z-index:9800;background:var(--ink);display:grid;place-items:center}
.loader__inner{width:min(86vw,560px)}
.loader__name{font-family:var(--serif);font-weight:300;line-height:.92;
  font-size:clamp(3rem,11vw,8rem);display:flex;gap:.3em;overflow:hidden}
.loader__word{display:inline-block}
html.js .loader__word{transform:translateY(110%)}
.loader__word:last-child{font-style:italic;color:var(--bronze)}
.loader__meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.4rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim)}
.loader__count i{font-style:normal;color:var(--bronze)}
.loader__bar{margin-top:1rem;height:1px;background:var(--line);position:relative;overflow:hidden}
.loader__bar span{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--bronze)}
body:not(.is-loading) .loader{pointer-events:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:7000;display:flex;align-items:center;
  justify-content:flex-end;padding:clamp(1rem,2.2vw,1.7rem) var(--pad);
  mix-blend-mode:difference;color:var(--bone)}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.6rem);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.nav__links a{position:relative;overflow:hidden;padding:.2em 0}
.nav__links a span{display:inline-block;transition:transform .5s var(--ease-out)}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{border:1px solid var(--bone);border-radius:2em;padding:.55em 1.2em!important}
.nav__cta::after{display:none}
.nav__menu{display:none;flex-direction:column;gap:5px;width:34px;height:18px;justify-content:center}
.nav__menu span{display:block;height:1.5px;width:100%;background:var(--bone)}

.nav.is-hidden{transform:translateY(-120%)}
.nav{transition:transform .5s var(--ease)}
/* intro reveal — hidden from the first paint so nothing flashes before animating */
html.js .nav{opacity:0}
html.js .hero__cue{opacity:0}
html.js .hero__side{opacity:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero__grid{position:relative;z-index:2;padding:0 var(--pad) clamp(2rem,6vh,5rem);width:100%}
.hero__eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bronze-2);margin-bottom:clamp(.6rem,2vh,1.4rem)}
.hero__title{font-weight:300;line-height:1.0;letter-spacing:-.02em;
  font-size:clamp(3.8rem,20vw,20rem);text-transform:none}
.hero__line{display:block;overflow:hidden;padding-bottom:.09em}
.hero__line--italic{font-style:italic;color:var(--gold);margin-left:.06em;margin-top:-.2em}
.reveal-word{display:inline-block}
html.js .reveal-word{transform:translateY(118%)}
.hero__base{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  margin-top:clamp(1.2rem,4vh,2.6rem);border-top:1px solid var(--line);padding-top:1.4rem}
.hero__lede{font-size:clamp(1rem,1.5vw,1.35rem);max-width:34ch;color:var(--bone-2);font-weight:340;line-height:1.4}
.hero__cue{display:flex;align-items:center;gap:.9rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);white-space:nowrap}
.hero__cue-line{width:clamp(2rem,6vw,5rem);height:1px;background:var(--line-strong)}
.hero__cue-arrow{animation:bob 1.8s var(--ease) infinite;color:var(--bronze)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero__side{position:absolute;z-index:2;top:50%;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.hero__side span{display:block}
.hero__side--l{left:0;transform:rotate(-90deg) translateX(50%);transform-origin:left;left:calc(var(--pad) - .9rem)}
.hero__side--r{right:0;transform:rotate(90deg) translateX(-50%);transform-origin:right;right:calc(var(--pad) - .9rem)}

/* line reveal helper */
.line{overflow:hidden}
.line>span{display:inline-block}
html.js .line>span{transform:translateY(110%)}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{padding:clamp(3rem,6vh,5rem) var(--pad);max-width:1500px;margin:0 auto;position:relative}
.manifesto__index{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:clamp(1.4rem,3.5vh,2.4rem)}
.manifesto__text{font-weight:330;line-height:1.16;letter-spacing:-.015em;
  font-size:clamp(1.7rem,4.4vw,4.1rem);max-width:20ch;margin-left:auto;text-wrap:balance}
.manifesto__text .word{display:inline-block;opacity:.16;transition:opacity .4s}
.manifesto__sign{font-style:italic;color:var(--bronze);font-size:1.3rem;text-align:right;margin-top:2.5rem}

/* ============================================================
   WORKS — horizontal gallery
   ============================================================ */
.works{position:relative;background:var(--ink)}
.works__head{padding:clamp(2.5rem,5vh,4rem) var(--pad) clamp(1.6rem,3.5vh,2.6rem);
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem 2rem}
.works__title{grid-column:1/-1;font-weight:300;line-height:.9;letter-spacing:-.02em;
  font-size:clamp(3rem,11vw,10rem)}
.works__title em{color:var(--bronze)}
.works__hint{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);justify-self:end;align-self:start}

.track{position:relative;overflow:hidden}
.track__inner{display:flex;align-items:center;gap:clamp(2rem,5vw,6rem);
  padding:2rem var(--pad) 4rem;width:max-content;will-change:transform}

.card{position:relative;flex:0 0 auto}
/* uniform light panels — full sculpture contained, container extended with studio white */
.card__media{position:relative;overflow:hidden;background:transparent;
  height:min(74vh,780px);aspect-ratio:.5;border-radius:2px}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  will-change:transform;transition:filter .8s}
.card:hover .card__media{box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
.card:hover .card__media img{filter:saturate(1.05)}
.card__cap{display:flex;align-items:baseline;gap:1rem;margin-top:1.4rem}
.card__no{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;color:var(--bronze)}
.card__title{font-weight:330;font-size:clamp(1.6rem,2.4vw,2.6rem);line-height:1;font-style:italic}
.card__mat{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-left:auto;align-self:end;text-align:right;max-width:14ch}

/* wide variant for landscape feel pieces */
.card--wide .card__media{aspect-ratio:1.2}

/* intro & outro panels in the track */
.track__panel{flex:0 0 auto;width:min(40vw,440px);display:flex;flex-direction:column;justify-content:center;
  height:min(72vh,760px)}
.track__panel h3{font-weight:300;font-size:clamp(2rem,4vw,3.6rem);line-height:1;letter-spacing:-.02em}
.track__panel p{margin-top:1.2rem;color:var(--bone-dim);max-width:30ch}
.track__panel--end{align-items:flex-start}
.track__panel--end a{margin-top:1.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid var(--bronze);padding-bottom:.3em;color:var(--bronze-2)}

.works__progress{height:1px;background:var(--line);margin:0 var(--pad) clamp(3rem,7vh,5rem)}
.works__progress span{display:block;height:100%;background:var(--bronze);transform-origin:left;transform:scaleX(0)}

/* progress + counter pinned inside the horizontal track */
.track__hud{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(1rem,3vh,2rem);
  display:flex;align-items:center;gap:1.2rem;z-index:3;pointer-events:none}
.track__hud .track__count{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--bone-dim);white-space:nowrap}
.track__hud .track__count b{color:var(--bronze);font-weight:400}
.track__line{flex:1;height:1px;background:var(--line)}
.track__line i{display:block;height:100%;background:var(--bronze);transform-origin:left;transform:scaleX(0)}
@media (max-width:768px){ .track__hud{display:none} .works__progress{display:none} }

/* ============================================================
   FIGURE — light editorial split
   ============================================================ */
.figure{background:var(--bone);color:var(--ink);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,6rem);align-items:center;padding:clamp(5rem,12vh,11rem) var(--pad)}
.figure__media{position:relative;overflow:hidden;border-radius:2px;
  height:min(86vh,920px);background:transparent}
.figure__media img{width:100%;height:115%;object-fit:cover;object-position:center 35%;will-change:transform}
.figure__tag{position:absolute;left:1.2rem;bottom:1.2rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;background:rgba(13,12,10,.78);color:var(--bone);
  padding:.5em .9em;border-radius:2em}
.figure__body .section-label{color:var(--umber)}
.figure__body .section-label__no{color:var(--bronze)}
.figure__title{font-weight:300;line-height:.92;letter-spacing:-.02em;
  font-size:clamp(2.6rem,6vw,5.6rem);margin:1.6rem 0}
.figure__title em{color:var(--bronze)}
.figure__copy{max-width:42ch;color:#3a342b;font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.55}
.figure__spec{list-style:none;margin-top:2.4rem;border-top:1px solid rgba(13,12,10,.16)}
.figure__spec li{display:flex;justify-content:space-between;gap:1rem;padding:.95rem 0;
  border-bottom:1px solid rgba(13,12,10,.12);font-size:.95rem}
.figure__spec span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--umber)}
.figure__spec b{font-weight:340;font-style:italic}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--ink);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(1.4rem,3.5vh,2.6rem) 0}
.marquee__row{display:flex;align-items:center;gap:2.2rem;width:max-content;white-space:nowrap;will-change:transform}
.marquee__row span{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,4vw,3.4rem);color:var(--bone)}
.marquee__row i{color:var(--bronze);font-size:clamp(1rem,2vw,1.6rem);font-style:normal}

/* ============================================================
   STUDIO / ABOUT
   ============================================================ */
.studio{display:grid;grid-template-columns:.4fr 1fr;gap:clamp(2rem,5vw,5rem);
  padding:clamp(5rem,13vh,12rem) var(--pad);max-width:var(--maxw);margin:0 auto;align-items:start}
.studio__left{position:sticky;top:clamp(5rem,12vh,9rem)}
.studio__lead{font-weight:320;line-height:1.18;letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.2vw,3rem);max-width:24ch}
.studio__lead .word{display:inline-block;opacity:.16;transition:opacity .4s}
.studio__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(2.5rem,6vh,4rem)}
.studio__cols p{color:var(--bone-dim);font-size:1.02rem;line-height:1.6;max-width:42ch}
.studio__stats{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,5rem);margin-top:clamp(3rem,7vh,5rem);
  border-top:1px solid var(--line);padding-top:2.5rem}
.stat b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,6vw,5rem);
  line-height:.9;color:var(--bronze-2)}
.stat span{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact{padding:clamp(5rem,13vh,11rem) var(--pad) clamp(2rem,5vh,3rem);position:relative;
  border-top:1px solid var(--line)}
.contact__title{font-weight:300;line-height:.96;letter-spacing:-.02em;margin:clamp(1.5rem,4vh,2.6rem) 0;
  font-size:clamp(2.8rem,9vw,9rem)}
.contact__title .c-line{display:block;overflow:hidden;padding-bottom:.04em}
.contact__title .c-line>span{display:inline-block}
html.js .contact__title .c-line>span{transform:translateY(110%)}
.contact__title em{color:var(--bronze)}
.contact__mail{display:inline-block;font-style:italic;font-size:clamp(1.4rem,3vw,2.4rem);
  border-bottom:1px solid var(--line-strong);padding-bottom:.15em;transition:color .4s,border-color .4s}
.contact__mail:hover{color:var(--gold);border-color:var(--gold)}
.contact__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:clamp(3rem,8vh,6rem);
  max-width:760px}
.contact__grid--two{grid-template-columns:repeat(2,1fr);max-width:560px}
.contact__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);display:block;margin-bottom:.8rem}
.contact__grid p{color:var(--bone-dim);line-height:1.7}
.contact__grid a:hover{color:var(--gold)}
.contact__foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  margin-top:clamp(4rem,10vh,7rem);padding-top:1.6rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact__top:hover{color:var(--gold)}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:9600;display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem)}
.lightbox.is-open{display:flex}
.lightbox__bg{position:absolute;inset:0;background:rgba(8,7,6,.86);backdrop-filter:blur(14px);opacity:0}
.lightbox__close{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);z-index:3;
  width:46px;height:46px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center}
.lightbox__close span{position:absolute;width:16px;height:1.5px;background:var(--bone)}
.lightbox__close span:first-child{transform:rotate(45deg)}
.lightbox__close span:last-child{transform:rotate(-45deg)}
.lightbox__close:hover{border-color:var(--bronze)}
.lightbox__stage{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(280px,420px);
  gap:clamp(2rem,5vw,5rem);align-items:center;max-width:1300px;width:100%}
.lightbox__figure{position:relative;height:min(82vh,860px);display:flex;justify-content:center}
.lightbox__figure img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:2px}
.lightbox__meta{opacity:0}
.lightbox__no{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--bronze);margin-bottom:1.2rem}
.lightbox__title{font-weight:300;font-size:clamp(2.4rem,4.5vw,4rem);line-height:.95;letter-spacing:-.02em}
.lightbox__sub{font-style:italic;color:var(--bone-dim);margin-top:.6rem;font-size:1.15rem}
.lightbox__desc{color:var(--bone-2);margin-top:1.6rem;line-height:1.6;max-width:42ch}
.lightbox__specs{margin-top:1.8rem;border-top:1px solid var(--line)}
.lightbox__specs div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;
  border-bottom:1px solid var(--line);font-size:.92rem}
.lightbox__specs dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lightbox__specs dd{font-style:italic}
.lightbox__nav{display:flex;gap:1.5rem;margin-top:2rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase}
.lightbox__nav button{color:var(--bone-dim);transition:color .3s}
.lightbox__nav button:hover{color:var(--gold)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .studio{grid-template-columns:1fr}
  .studio__left{position:static}
  .lightbox__stage{grid-template-columns:1fr;max-width:560px;text-align:left}
  .lightbox__figure{height:min(56vh,560px)}
  .lightbox__meta{padding-bottom:1rem}
}

@media (max-width:768px){
  .nav__links{display:none}
  .nav__menu{display:flex}
  .hero{justify-content:flex-end}
  .hero__base{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .hero__side{display:none}
  .figure{grid-template-columns:1fr}
  .figure__media{height:min(78vh,640px);order:-1}
  .figure__copy{max-width:none}
  .studio__cols{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr;gap:2.2rem}
  .manifesto__text{margin-left:0}

  /* vertical gallery on mobile */
  .track{overflow:visible}
  .track__inner{flex-direction:column;width:100%;gap:clamp(3rem,8vw,4rem);padding:1rem var(--pad) 3rem;
    transform:none!important}
  .card{width:100%}
  .card__media{height:auto;aspect-ratio:.7;width:100%}
  .track__panel{width:100%;height:auto;padding:1rem 0}
  .works__hint{display:none}
}

@media (max-width:480px){
  .card__media{aspect-ratio:.62}
  .card__cap{flex-wrap:wrap;gap:.4rem}
  .card__mat{margin-left:0;text-align:left}
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal-word,.loader__word,.line>span{transform:none!important}
  .manifesto__text .word,.studio__lead .word{opacity:1!important}
  .grain{display:none}
}

/* no-JS / pre-init fallbacks: keep content visible if JS fails */
.no-js .reveal-word,.no-js .loader__word,.no-js .line>span{transform:none}
.no-js .loader{display:none}