/* ---------------------------------------------------------
   Tokens
--------------------------------------------------------- */
:root{
  --void:    #131313;
  --panel:   #1b1b1b;
  --panel-2: #222222;
  --ivory:   #f2f2f2;
  --mute:    #999999;
  --nova:    #ffffff;
  --nova-dim:#555555;
  --ember:   #808080;
  --hair:    rgba(255,255,255,0.09);

  --bkk-glow: #d9873c;
  --co-glow:  #3f7ea8;

  --display: 'Instrument Serif', Georgia, serif;
  --body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;

  --wrap: 72rem;
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------------------------------------------------------
   Reset
--------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  overflow-x:hidden;
  background:var(--void);
  color:var(--ivory);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,dl,dd,figure,blockquote{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

:focus-visible{
  outline:2px solid var(--nova);
  outline-offset:3px;
}

::selection{ background:var(--nova); color:var(--void); }

/* ---------------------------------------------------------
   Entry veil: cold-open reveal
--------------------------------------------------------- */
.entry-veil{
  position:fixed; inset:0; z-index:300; pointer-events:none;
  background:var(--void);
  opacity:1;
  animation:veilLift 1.3s var(--ease) .2s forwards;
}
@keyframes veilLift{ to{ opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion:reduce){
  .entry-veil{ animation:none; opacity:0; visibility:hidden; }
}

/* ---------------------------------------------------------
   Custom cursor: the light you carry
--------------------------------------------------------- */
.custom-cursor, .custom-cursor a, .custom-cursor button{ cursor:none; }
.cursor-light{
  position:fixed; left:0; top:0; z-index:200; pointer-events:none;
  display:none;
  transform:translate3d(var(--cx,50vw), var(--cy,50vh), 0);
}
.custom-cursor .cursor-light{ display:block; }
.cursor-light__core{
  position:absolute; left:-4px; top:-4px; width:8px; height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--bkk-glow), var(--co-glow));
  box-shadow:0 0 14px 2px rgba(255,255,255,.4);
  transition:transform .25s var(--ease);
}
.cursor-light__halo{
  position:absolute; left:-21px; top:-21px; width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.cursor-light.is-hover .cursor-light__core{ transform:scale(2); }
.cursor-light.is-hover .cursor-light__halo{ transform:scale(1.4); opacity:.55; }

/* ---------------------------------------------------------
   Two Cities: ambient warm/cool light
--------------------------------------------------------- */
.atmosphere{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.atmosphere__glow{
  position:absolute; width:64vmax; height:64vmax; border-radius:50%;
  transform:translate(-50%,-50%);
  filter:blur(90px);
  mix-blend-mode:screen;
  opacity:.18;
  transition:opacity 1.1s var(--ease), left 1.4s var(--ease), top 1.4s var(--ease);
}
.atmosphere__glow--warm{
  left:var(--warm-x, 22%); top:var(--warm-y, 32%);
  background:radial-gradient(circle, var(--bkk-glow) 0%, transparent 68%);
}
.atmosphere__glow--cool{
  left:var(--cool-x, 78%); top:var(--cool-y, 62%);
  background:radial-gradient(circle, var(--co-glow) 0%, transparent 68%);
}
body[data-zone="story"] .atmosphere__glow{ opacity:.4; transition:opacity 1.1s var(--ease), left .4s var(--ease), top .4s var(--ease); }
body[data-zone="hero"] .atmosphere__glow{ opacity:.26; }
body[data-zone="contact"] .atmosphere__glow{ opacity:.24; }
@media (prefers-reduced-motion:reduce){
  .atmosphere__glow{ transition:opacity 1.1s var(--ease); }
}

/* ---------------------------------------------------------
   Grain + scroll progress
--------------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:100;
  background:transparent;
}
.progress__bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--ember), var(--nova));
  transition:width .08s linear;
}

/* ---------------------------------------------------------
   Type helpers
--------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--nova);
  margin-bottom:1.25rem;
}
.eyebrow__dot{ color:var(--mute); margin:0 .3em; }

.nova-text{ color:var(--nova); font-style:italic; }

/* ---------------------------------------------------------
   Top bar
--------------------------------------------------------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  border-bottom:1px solid var(--hair);
}
.topbar::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(19,19,19,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.topbar__mark{
  font-family:var(--display);
  font-style:italic;
  font-size:1.35rem;
  color:var(--ivory);
}
.topbar__nav{ display:flex; gap:2rem; }
.topbar__nav a{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  position:relative;
  padding-bottom:.3rem;
  display:inline-block;
  transition:color .3s var(--ease), transform .25s var(--ease);
}
.topbar__nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--nova);
  transition:width .3s var(--ease);
}
.topbar__nav a:hover,
.topbar__nav a.active{ color:var(--ivory); }
.topbar__nav a.active::after{ width:100%; }

.topbar__toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:.5rem;
}
.topbar__toggle span{
  width:20px; height:1px; background:var(--ivory); display:block;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:6rem 1.5rem 3rem;
}
.stars{
  position:absolute; inset:-15%; z-index:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 68%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 58% 14%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 46%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 78%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 22% 88%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 40%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 92%, rgba(255,255,255,.55), transparent 60%);
  background-repeat:no-repeat;
  animation:twinkle 7s ease-in-out infinite;
  transform:translate(calc(var(--px,0) * -9px), calc(var(--py,0) * -6px));
  transition:transform .8s var(--ease);
}
@keyframes twinkle{
  0%,100%{ opacity:.7; }
  50%{ opacity:1; }
}
.skyline{
  position:absolute; left:0; right:0; bottom:-2px;
  width:100%; height:34vh; min-height:200px; max-height:320px;
  perspective:800px;
  background:
    radial-gradient(60% 90% at 12% 100%, rgba(217,135,60,.35), transparent 70%),
    radial-gradient(60% 90% at 88% 100%, rgba(63,126,168,.32), transparent 70%);
  opacity:1;
  transform:translate3d(0, var(--horizon-shift, 0px), 0);
  transition:opacity 1.1s var(--ease);
}
body:not([data-zone="hero"]) .skyline{ opacity:.4; }
body[data-zone="story"] .skyline{ opacity:.55; }
body[data-zone="modeling"] .skyline,
body[data-zone="vunova"] .skyline,
body[data-zone="influence"] .skyline{ opacity:.5; }
body[data-zone="day"] .skyline,
body[data-zone="interests"] .skyline{ opacity:.5; }

/* Scene cross-fade: each part of the site is a different place */
.scene{ opacity:0; transition:opacity 1.4s var(--ease); }
.scene--boundary{ opacity:1; }
body[data-zone="modeling"] .scene--boundary,
body[data-zone="vunova"] .scene--boundary,
body[data-zone="influence"] .scene--boundary,
body[data-zone="day"] .scene--boundary,
body[data-zone="interests"] .scene--boundary{ opacity:0; }
body[data-zone="modeling"] .scene--bangkok,
body[data-zone="vunova"] .scene--bangkok,
body[data-zone="influence"] .scene--bangkok{ opacity:1; }
body[data-zone="day"] .scene--colorado,
body[data-zone="interests"] .scene--colorado{ opacity:1; }

.skyline__bkk{
  fill:var(--void);
  transform:translate(calc(var(--px,0) * -30px), calc(var(--py,0) * -16px)) rotateX(calc(var(--py,0) * -2deg));
  transition:transform .35s var(--ease);
  transform-origin:50% 100%;
}
.skyline__co{
  transform:translate(calc(var(--px,0) * 26px), calc(var(--py,0) * -16px)) rotateX(calc(var(--py,0) * -2deg));
  transition:transform .35s var(--ease);
  transform-origin:50% 100%;
}
.skyline__co-back{ fill:var(--void); opacity:.55; }
.skyline__co-front{ fill:var(--void); }
.skyline__pines{
  fill:var(--void);
  transform:translate(calc(var(--px,0) * 44px), calc(var(--py,0) * -24px));
  transition:transform .3s var(--ease);
}
.skyline__mist{
  transform:translate(calc(var(--px,0) * 12px), calc(var(--py,0) * -6px));
  transition:transform .6s var(--ease);
}
.skyline__windows circle{
  fill:var(--bkk-glow);
  animation:windowFlicker 5s ease-in-out infinite;
}
@keyframes windowFlicker{
  0%,100%{ opacity:.15; }
  50%{ opacity:.95; }
}
.skyline__mist-wisp{
  fill:rgba(180,205,220,.14);
  filter:blur(6px);
  animation:mistDrift 26s ease-in-out infinite;
}
.skyline__mist-wisp--b{ animation-duration:34s; animation-delay:-8s; }
.skyline__mist-wisp--c{ animation-duration:30s; animation-delay:-16s; }
@keyframes mistDrift{
  0%{ transform:translateX(-40px); opacity:.5; }
  50%{ transform:translateX(50px); opacity:.9; }
  100%{ transform:translateX(-40px); opacity:.5; }
}
@media (prefers-reduced-motion:reduce){
  .skyline{ transform:none; transition:none; }
  .skyline__windows circle{ animation:none; opacity:.6; }
  .skyline__mist-wisp{ animation:none; opacity:.6; }
}
.pin{ position:absolute; left:50%; bottom:9%; z-index:1; pointer-events:none; }
.pin__fall{
  position:absolute; left:-7px; bottom:0; width:14px; height:14px;
  animation:pinFall 1s cubic-bezier(.34,1.56,.4,1) 1.1s both;
}
.pin__shape{
  display:block; width:14px; height:14px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:linear-gradient(135deg, var(--bkk-glow), var(--co-glow));
  box-shadow:0 0 12px 2px rgba(255,255,255,.4);
}
@keyframes pinFall{
  0%{ transform:translateY(-170px); opacity:0; }
  55%{ opacity:1; }
  75%{ transform:translateY(6px); }
  100%{ transform:translateY(0); opacity:1; }
}
.pin__ring{
  position:absolute; left:-3px; bottom:-3px; width:6px; height:6px;
  border-radius:50%; border:1px solid rgba(255,255,255,.5);
  opacity:0;
  animation:pinRing .7s ease-out 2.05s both;
}
@keyframes pinRing{
  0%{ opacity:.9; transform:scale(0); }
  100%{ opacity:0; transform:scale(9); }
}

.hero__inner{ position:relative; z-index:1; max-width:46rem; }
.hero__eyebrow{ display:inline-block; }
.hero__name{ line-height:.92; }
.ignite{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(4.2rem, 13vw, 9.5rem);
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--ivory);
  opacity:0;
}
.ignite.go{
  animation:ignite 1.5s var(--ease) forwards;
}
@keyframes ignite{
  0%{ opacity:0; filter:blur(14px); transform:scale(.92); text-shadow:0 0 0 rgba(255,255,255,0); }
  50%{ opacity:1; filter:blur(0); transform:scale(1.015); text-shadow:0 0 50px rgba(255,255,255,.85), 0 0 110px rgba(255,255,255,.4); }
  100%{ opacity:1; filter:blur(0); transform:scale(1); text-shadow:0 0 0 rgba(255,255,255,0); }
}
.hero__handle{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--mute);
  margin-top:.75rem;
}
.hero__tagline{
  margin-top:1.75rem;
  font-size:1.05rem;
  color:var(--ivory);
  opacity:.85;
}
.scroll-cue{
  margin-top:3.5rem;
  display:inline-flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute);
}
.scroll-cue__line{
  width:1px; height:34px; background:linear-gradient(var(--nova), transparent);
  animation:scrollpulse 2.2s ease-in-out infinite;
}
@keyframes scrollpulse{
  0%,100%{ opacity:.4; transform:scaleY(.7); transform-origin:top; }
  50%{ opacity:1; transform:scaleY(1); transform-origin:top; }
}

/* ---------------------------------------------------------
   Section shell
--------------------------------------------------------- */
.section{ padding:8rem 1.5rem; position:relative; }
.section--dark{ background:var(--panel); }
.section__inner{ max-width:var(--wrap); margin:0 auto; }
.section__title{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:1.05; letter-spacing:-.01em;
  margin-bottom:2.5rem;
}
.section__title::before{
  content:""; position:absolute; inset:-50% -25%;
  background:radial-gradient(circle, rgba(255,255,255,.55), transparent 62%);
  opacity:0; z-index:-1; pointer-events:none;
}
.section__title.in-view::before{ animation:novaBurst .9s ease-out forwards; }
@keyframes novaBurst{
  0%{ opacity:0; transform:scale(.35); }
  30%{ opacity:.85; }
  100%{ opacity:0; transform:scale(1.6); }
}
.section__lede{
  max-width:42rem; font-size:1.08rem; color:var(--ivory); opacity:.85;
  margin-bottom:3.5rem;
}

/* ---------------------------------------------------------
   Reveal-on-scroll
--------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------
   Story
--------------------------------------------------------- */
.pull-quote{
  position:relative; display:block;
  font-family:var(--display); font-style:normal; font-weight:400;
  font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.1; letter-spacing:-.01em;
  color:var(--nova);
  max-width:48rem; margin-bottom:3.5rem;
}
.pull-quote::before{
  content:""; position:absolute; inset:-50% -25%;
  background:radial-gradient(circle, rgba(255,255,255,.55), transparent 62%);
  opacity:0; z-index:-1; pointer-events:none;
}
.pull-quote.in-view::before{ animation:novaBurst .9s ease-out forwards; }
.story__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  margin-bottom:3rem;
}
.story__col p{ margin-bottom:1.25rem; color:var(--ivory); opacity:.88; }
.story__proud{
  color:var(--nova) !important; opacity:1 !important;
  font-style:italic; font-family:var(--display); font-size:1.2rem;
}
.chips{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:3.5rem;
}
.chips span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--hair); border-radius:2px;
  padding:.5rem .85rem; color:var(--mute);
}
/* ---------------------------------------------------------
   Modeling
--------------------------------------------------------- */
.modeling__layout{
  display:grid; grid-template-columns:20rem 1fr; gap:3rem; align-items:start;
}
.compcard{
  background:var(--panel-2); border:1px solid var(--hair); border-radius:2px;
  padding:2rem;
}
.compcard__photo{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top;
  border-radius:2px; margin-bottom:1.5rem; filter:contrast(1.05);
}
.compcard__title{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--nova); margin-bottom:1.5rem;
}
.compcard__grid{ display:flex; flex-direction:column; }
.compcard__grid > div{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.65rem 0; border-bottom:1px solid var(--hair);
  font-family:var(--mono);
}
.compcard__grid dt{ color:var(--mute); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.compcard__grid dd{ color:var(--ivory); font-size:.92rem; }
.compcard__note{
  margin-top:1.5rem; font-family:var(--mono); font-size:.72rem;
  color:var(--mute); font-style:italic;
}
.tearsheets{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.tearsheet{
  position:relative; aspect-ratio:3/4; border-radius:2px; overflow:hidden;
  display:flex; align-items:flex-end; cursor:default;
  border:1px solid var(--hair);
  background:var(--panel-2);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tearsheet img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  filter:contrast(1.05);
  transition:filter .4s var(--ease), transform .5s var(--ease);
}
.tearsheet::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(19,19,19,.85) 100%);
  pointer-events:none;
}
.tearsheet:hover img{ filter:contrast(1.1); transform:scale(1.04); }
.tearsheet:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -20px rgba(255,255,255,.35);
}
.tearsheet__label{
  position:relative; z-index:1; padding:1rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ivory);
}
.gallery{ margin-top:3.5rem; }
.gallery__title{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--nova); margin-bottom:1.25rem;
}
.gallery__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
.gallery__photo{
  aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  border:1px solid var(--hair); background:var(--panel-2);
}
.gallery__photo img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:contrast(1.05);
  transition:filter .4s var(--ease), transform .5s var(--ease);
}
.gallery__photo:hover img{ filter:contrast(1.1); transform:scale(1.04); }

/* ---------------------------------------------------------
   Vunova
--------------------------------------------------------- */
.vunova-section{ text-align:center; padding-top:9rem; padding-bottom:9rem; }
.vunova-mark{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.2rem,11vw,7rem);
  letter-spacing:.02em;
  color:var(--ivory);
  opacity:0;
}
.vunova-mark.go{ animation:ignite 1.6s var(--ease) forwards; }
.vunova-meaning{
  font-family:var(--display); font-style:italic; color:var(--nova);
  font-size:1.3rem; margin-top:.75rem; margin-bottom:4rem;
}
.vunova__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  text-align:left; margin-bottom:3.5rem;
}
.vunova__col p{ color:var(--ivory); opacity:.88; font-size:1.02rem; }
.badge{
  display:inline-block; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--nova); border:1px solid var(--nova-dim);
  border-radius:2px; padding:.5rem .9rem; margin-bottom:1.25rem;
}
.moodboard{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem;
}
.moodboard span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--hair); border-radius:100px;
  padding:.55rem 1.1rem; color:var(--mute);
}
.sketches{ margin-top:3.5rem; text-align:left; }
.sketches__title{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--nova); margin-bottom:1.25rem;
}
.sketches__grid{
  display:flex; gap:1rem;
}
.sketches__photo{
  width:120px; flex:0 0 auto;
  aspect-ratio:3/4; overflow:hidden; border-radius:2px;
  border:1px solid var(--hair); background:var(--panel-2);
}
.sketches__photo img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.02) sepia(.08);
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.sketches__photo:hover img{ transform:scale(1.04); filter:contrast(1.06) sepia(.08); }

/* ---------------------------------------------------------
   Influence
--------------------------------------------------------- */
.influence .section__lede{ margin-bottom:3rem; }
.influence__photos{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem;
  margin-bottom:3.5rem;
}
.influence__photo{
  aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  border:1px solid var(--hair); background:var(--panel-2);
}
.influence__photo img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.03);
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.influence__photo:hover img{ transform:scale(1.04); filter:contrast(1.08); }
.socials{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--hair);
}
.socials a{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem .5rem; border-bottom:1px solid var(--hair);
  transition:padding-left .3s var(--ease), color .3s var(--ease);
}
.socials a:nth-child(odd){ border-right:1px solid var(--hair); padding-right:1.5rem; }
.socials a:hover{ padding-left:1rem; color:var(--nova); }
.socials__label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute);
}
.socials__handle{ font-family:var(--display); font-style:italic; font-size:1.15rem; }

/* ---------------------------------------------------------
   Day in the Life
--------------------------------------------------------- */
.day__grid{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-flow:dense; gap:.75rem;
}
.day__item{
  aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  border:1px solid var(--hair); background:var(--panel-2);
}
.day__item--wide{ grid-column:span 2; aspect-ratio:8/5; }
.day__item img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05);
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.day__item:hover img{ transform:scale(1.04); filter:contrast(1.1); }

/* ---------------------------------------------------------
   Interests
--------------------------------------------------------- */
.index-list{ border-top:1px solid var(--hair); }
.index-list__row{
  display:grid; grid-template-columns:3.5rem minmax(9rem,14rem) minmax(0,1fr);
  gap:1.5rem; align-items:baseline;
  padding:1.5rem 0; border-bottom:1px solid var(--hair);
  transition:padding-left .35s var(--ease), border-color .35s var(--ease);
}
.index-list__row:hover{ padding-left:.75rem; border-color:var(--nova-dim); }
.index-list__num{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.05em;
  color:var(--mute);
}
.index-list__title{
  font-family:var(--display); font-size:1.4rem; color:var(--nova);
}
.index-list__desc{ color:var(--ivory); opacity:.82; font-size:.95rem; }

/* ---------------------------------------------------------
   Contact
--------------------------------------------------------- */
.contact{ text-align:center; padding-bottom:10rem; }
.contact__title{
  font-family:var(--display); font-size:clamp(2.4rem,6vw,4rem); margin-bottom:2rem;
}
.contact__email{
  display:inline-block; font-family:var(--mono); font-size:clamp(1rem,2.4vw,1.3rem);
  color:var(--ivory); border-bottom:1px solid var(--nova-dim);
  padding-bottom:.4rem; transition:color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
}
.contact__email:hover{ color:var(--nova); border-color:var(--nova); }
.contact__socials{
  margin-top:3rem; display:flex; justify-content:center; flex-wrap:wrap; gap:1.75rem;
}
.contact__socials a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); transition:color .3s var(--ease), transform .25s var(--ease);
  display:inline-block;
}
.contact__socials a:hover{ color:var(--nova); }

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:2rem clamp(1.25rem,4vw,3rem);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); border-top:1px solid var(--hair);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width:860px){
  .topbar__nav{
    position:fixed; inset:0; top:0; z-index:80;
    display:none; flex-direction:column; align-items:flex-start;
    justify-content:center; gap:2rem;
    padding:2rem 2.5rem;
    background:rgba(19,19,19,.98);
  }
  .topbar__nav.open{ display:flex; }
  .topbar__nav a{ font-size:1rem; }
  .topbar__toggle{ display:flex; }

  .story__grid,
  .vunova__grid{ grid-template-columns:1fr; gap:2rem; }
  .modeling__layout{ grid-template-columns:1fr; }
  .tearsheets{ grid-template-columns:1fr 1fr 1fr; }
  .index-list__row{
    grid-template-columns:3rem minmax(0,1fr); column-gap:1.25rem; row-gap:.4rem;
    align-items:start;
  }
  .index-list__num{ grid-column:1; grid-row:1; }
  .index-list__title{ grid-column:2; grid-row:1; }
  .index-list__desc{ grid-column:2; grid-row:2; }
  .socials{ grid-template-columns:1fr; }
  .influence__photos{ grid-template-columns:1fr 1fr 1fr; }
  .gallery__grid{ grid-template-columns:1fr 1fr 1fr; }
  .day__grid{ grid-template-columns:repeat(4,1fr); }
  .socials a:nth-child(odd){ border-right:0; padding-right:.5rem; }
  .section{ padding:5.5rem 1.25rem; }
}

@media (max-width:560px){
  .tearsheets{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:1fr 1fr; }
  .day__grid{ grid-template-columns:1fr 1fr; }
  .day__item--wide{ grid-column:span 2; }
  .influence__photos{ grid-template-columns:1fr; }
  .chips{ gap:.5rem; }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .stars{ animation:none; }
  .scroll-cue__line{ animation:none; }
  .ignite,.vunova-mark{ animation:none !important; opacity:1 !important; filter:none; text-shadow:none; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .section__title::before{ animation:none !important; opacity:0 !important; }
  .tearsheet,.index-list__row,.socials a{ transition:none; }
  .topbar__nav a,.contact__email,.contact__socials a{ transition:color .3s var(--ease); }
  .cursor-light{ display:none !important; }
  .custom-cursor, .custom-cursor a, .custom-cursor button{ cursor:auto; }
  .skyline__bkk,.skyline__co,.skyline__pines,.skyline__mist,.stars{ transform:none !important; transition:none; }
  .pin__fall{ animation:none; transform:none; opacity:1; }
  .pin__ring{ animation:none; opacity:0; }
}