/* ══════════════════════════════════════════════════════════════
   Viktor Nikolov - portfolio
   No framework, no build step. Edit this file directly.
   ══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
}

/* ── tokens ─────────────────────────────────────────────────── */
:root{
  --ink:      #0A0B0D;   /* page */
  --ink-2:    #0E1013;   /* raised surface */
  --ink-3:    #14161A;   /* card */
  --bone:     #ECE7DD;   /* primary text */
  --bone-dim: #9A968E;   /* secondary text */
  --bone-far: #6A675F;   /* tertiary / labels */
  --bronze:   #C6A15B;   /* the ONLY accent. use it sparingly. */
  --lapis:    #16233C;   /* cool depth, never a fill */
  --line:     rgba(236,231,221,.11);
  --line-2:   rgba(236,231,221,.055);

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
/* [hidden] is display:none, but any class that sets a display value beats it. Several controls
   here are inline-flex, so without this they would ignore the attribute and paint anyway. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* height:auto is load-bearing - the width/height attrs on <img> are presentational
   hints, and without this they lock the box to the intrinsic pixel height. */
img{ max-width:100%; display:block; height:auto; }
h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-.015em; text-wrap:balance; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
em{ font-style:italic; color:var(--bone); }
b{ font-weight:500; color:var(--bone); }
::selection{ background:var(--bronze); color:#0A0B0D; }

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

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

.skip{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  z-index:100; background:var(--bone); color:var(--ink);
  padding:.7rem 1.2rem; font-size:.85rem; border-radius:0 0 3px 3px;
}
.skip:focus{ top:0; }

/* ── shared type ────────────────────────────────────────────── */
.eyebrow{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-far); font-weight:400;
}
.shead > .eyebrow{ display:flex; align-items:center; gap:.75rem; }
.shead > .eyebrow::before{
  content:""; width:1.35rem; height:1px; flex:none;
  background:var(--bronze); opacity:.72;
}
.shead{ max-width:56ch; margin-bottom:clamp(3rem,6vw,5rem); }
.shead--wide{ max-width:64ch; }
.shead__t{
  font-family:var(--serif);
  font-size:clamp(2.4rem,1.6rem + 3.6vw,4.4rem);
  line-height:1.02;
  margin:.7rem 0 0;
  font-variation-settings:"opsz" 100;
}
.shead__d{
  margin-top:1.5rem; max-width:52ch;
  color:var(--bone-dim); font-size:1.06rem; line-height:1.7;
}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; font-size:.85rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; font-weight:400;
  border:1px solid transparent; border-radius:2px;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--solid{ background:var(--bone); color:var(--ink); }
.btn--solid:hover{ background:var(--bronze); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--bone-dim); }
.btn--ghost:hover{ border-color:var(--bronze); color:var(--bone); transform:translateY(-2px); }

/* ── nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:60;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,11,13,.72);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line-2);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:1.15rem var(--gut);
  display:flex; align-items:center; gap:2rem;
}
.nav__mark{
  font-family:var(--serif); font-size:1.5rem; letter-spacing:.12em;
  color:var(--bone); text-decoration:none; padding-right:.2rem;
}
.nav__mark span{ border-bottom:1px solid var(--bronze); padding-bottom:3px; }
.nav__links{ display:flex; gap:2.25rem; margin-left:auto; }
.nav__links a{
  position:relative; padding-block:.25rem;
  color:var(--bone-dim); text-decoration:none; font-size:.95rem;
  letter-spacing:.09em; text-transform:uppercase;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-.2rem; height:1px;
  background:var(--bronze); opacity:.78;
  transition:right .35s var(--ease);
}
.nav__links a:hover, .nav__links a.is-here{ color:var(--bone); }
.nav__links a:hover::after, .nav__links a.is-here::after{ right:0; }
/* The address is in the footer under Contact, where someone looks once they have a
   reason to write. In the nav it sat greyed out beside the section links, competing
   with them without ever being what anyone came for. */
@media (max-width:860px){
  .nav__links{ gap:1.4rem; }
  .nav__links a{ font-size:.84rem; letter-spacing:.06em; }
}

/* ── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:clamp(7rem,14vh,10rem) clamp(3.5rem,9vh,6rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{
  /* keep the hands + keys in frame - this is a photo of a musician working,
     not a headshot. face sits upper-right, instrument lower-left. */
  width:100%; height:100%; object-fit:cover; object-position:68% 100%;
  /* pull the warmth out of a snapshot so it reads as a photograph, not a headshot */
  filter:grayscale(.72) contrast(1.08) brightness(.7) sepia(.14);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{ from{ transform:scale(1.03); } to{ transform:scale(1.09); } }
@media (prefers-reduced-motion:reduce){ .hero__media img{ animation:none; transform:scale(1.03); } }

/* the ink that makes the type readable - left-weighted, plus a floor */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    /* a soft column of ink behind the type only - the photograph keeps the rest */
    linear-gradient(100deg, rgba(10,11,13,.97) 6%, rgba(10,11,13,.86) 26%, rgba(10,11,13,.30) 56%, rgba(10,11,13,.48) 100%),
    linear-gradient(0deg, rgba(10,11,13,.95) 0%, rgba(10,11,13,.25) 22%, rgba(10,11,13,0) 46%),
    radial-gradient(120% 80% at 20% 100%, rgba(22,35,60,.42), transparent 60%);
}
.hero__body{ position:relative; }
.hero__name{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3.3rem,1.4rem + 8.4vw,8.5rem);
  line-height:.92;
  letter-spacing:-.03em;
  margin:1.1rem 0 0;
  font-variation-settings:"opsz" 144;
}
.hero__name span{ display:block; color:var(--bone); }
.hero__role{
  margin-top:1.4rem;
  font-size:clamp(.82rem,.78rem + .2vw,.95rem);
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze);
}
.hero__deck{
  margin-top:1.6rem; max-width:46ch;
  color:var(--bone-dim); font-size:1.08rem; line-height:1.72;
  text-wrap:pretty;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }
.hero__rule{
  position:absolute; left:var(--gut); right:var(--gut); bottom:0; height:1px;
  background:linear-gradient(90deg, var(--bronze), rgba(198,161,91,.12) 40%, transparent 75%);
  opacity:.5;
}
@media (max-width:780px){
  .hero__media img{ object-position:50% 22%; filter:grayscale(.75) contrast(1.05) brightness(.58) sepia(.14); }
  .hero::before{
    background:
      linear-gradient(180deg, rgba(10,11,13,.75) 0%, rgba(10,11,13,.35) 32%, rgba(10,11,13,.95) 72%, var(--ink) 100%);
  }
}
@media (max-height:800px) and (min-width:781px){
  .hero{ padding-block:5.75rem 2.2rem; }
  .hero__name{ font-size:clamp(3.2rem,1.4rem + 7vw,7rem); }
  .hero__role{ margin-top:1rem; }
  .hero__deck{ margin-top:1.05rem; max-width:50ch; font-size:1rem; line-height:1.58; }
  .hero__cta{ margin-top:1.4rem; }
}

/* ── section rhythm ─────────────────────────────────────────────
   Padding is intentionally uneven: the game gets the room, the audio statement is compact, and
   the largest gap is the transition from the project into the profile. */
.stage-sec{ padding-block:clamp(5rem,10vh,7.5rem) clamp(6rem,13vh,10rem); }
.audio{
  padding-block:clamp(4.5rem,9vh,7rem);
  background:
    radial-gradient(75% 120% at 100% 45%, rgba(22,35,60,.20), transparent 62%),
    var(--ink-2);
  border-block:1px solid var(--line-2);
}
.profile{
  padding-block:clamp(6rem,13vh,10rem) clamp(5rem,10vh,7.5rem);
  border-top:1px solid var(--line-2);
}

/* ── game stage ─────────────────────────────────────────────── */
.stage{
  position:relative;
  border:1px solid var(--line);
  background:var(--ink-3);
  border-radius:3px;
  overflow:hidden;
}
/* the hairline that makes it read as a "screen" rather than a div */
.stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(236,231,221,.06), inset 0 0 90px rgba(0,0,0,.55);
}
.stage__frame{
  position:relative;
  aspect-ratio:16/9;
  display:grid; place-items:center;
  background:
    radial-gradient(80% 120% at 50% 120%, rgba(198,161,91,.10), transparent 55%),
    radial-gradient(100% 90% at 50% -10%, rgba(22,35,60,.55), transparent 60%),
    #0B0D11;
  overflow:hidden;
}
.stage__frame canvas{ width:100%; height:100%; display:block; }

/* slow light that crosses the empty stage - the only motion here */
.stage__frame::before{
  content:""; position:absolute; inset:-40% -10%;
  background:conic-gradient(from 210deg at 50% 50%, transparent, rgba(198,161,91,.055), transparent 28%);
  animation:sweep 14s linear infinite;
  pointer-events:none;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .stage__frame::before{ animation:none; } }

.stage__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

.stage__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }
/* darkens the middle of the poster so the plate copy stays readable on top of it */
.stage__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 62% at 50% 50%, rgba(6,7,10,.86), rgba(6,7,10,.42) 62%, rgba(6,7,10,.30) 100%),
    linear-gradient(0deg, rgba(6,7,10,.55), transparent 45%);
}
/* once the game is actually running, nothing may sit over the canvas */
.stage[data-state="running"] .stage__scrim,
.stage[data-state="running"] .stage__poster,
.stage[data-state="running"] .stage__grain{ display:none; }

/* No build published: the stage presents a real frame from the game, full strength,
   with every non-working control removed. No plate, no dead buttons, no promises. */
.stage[data-state="poster"] .stage__poster{ opacity:1; }
.stage[data-state="poster"] .stage__scrim{
  background:linear-gradient(0deg, rgba(6,7,10,.45), rgba(6,7,10,0) 42%);
}
.stage[data-state="poster"] .stage__frame::before{ animation:none; opacity:.5; }

/* A simple sequence of equal gameplay frames keeps every moment readable without assigning an
   arbitrary visual hierarchy to one screenshot. */
.stills{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.25rem,2.5vw,2rem);
  row-gap:clamp(2rem,4vw,3rem);
  margin-top:clamp(3rem,6vw,4.5rem);
}
.stills__i{ display:flex; flex-direction:column; min-width:0; }
.stills__i img{
  aspect-ratio:16 / 9; object-fit:cover;
  width:100%; border:1px solid var(--line); border-radius:2px;
  filter:saturate(.92) brightness(.94);
  transition:filter .6s var(--ease), transform .6s var(--ease);
}
.stills__i:hover img{ filter:none; transform:translateY(-3px); }
/* short factual labels, not captions - the image is the evidence */
.stills__i p{
  margin-top:.8rem;
  color:var(--bone-far); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
}

@media (max-width:760px){
  .stills{ grid-template-columns:1fr; }
}

/* Hidden from the first paint. It exists only for the local dev placeholder (SHOW_PLACEHOLDER),
   which is the one state that sets data-state="unavailable". */
.stage__plate{ display:none; position:relative; text-align:center; padding:2rem; max-width:44ch; }
.stage[data-state="unavailable"] .stage__plate{ display:block; }
.stage__kicker{
  font-family:var(--serif); font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem);
  color:var(--bone); letter-spacing:-.01em;
}
.stage__status{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1rem; padding:.4rem .95rem;
  border:1px solid var(--line); border-radius:999px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
  background:rgba(10,11,13,.5);
}
.stage__status .dot{
  width:6px; height:6px; border-radius:50%; background:var(--bronze);
  box-shadow:0 0 0 0 rgba(198,161,91,.5);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(198,161,91,0); } 100%{ box-shadow:0 0 0 0 rgba(198,161,91,0); } }
@media (prefers-reduced-motion:reduce){ .stage__status .dot{ animation:none; } }
.stage__note{ margin-top:1.2rem; color:var(--bone-far); font-size:.95rem; line-height:1.65; }

.stage__launch{
  position:absolute; z-index:3;
  display:none; align-items:center; gap:.7rem;
  padding:1.05rem 2.3rem; border-radius:2px; cursor:pointer;
  border:1px solid rgba(198,161,91,.65);
  background:linear-gradient(180deg, #D9B673, #B78E45);
  color:#161006;
  font-family:var(--sans); font-size:.85rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 22px rgba(198,161,91,.26);
  transition:transform .35s var(--ease), background .35s var(--ease),
             box-shadow .35s var(--ease);
  animation:launchBreathe 3.4s var(--ease) infinite;
}
.stage__launch svg{ width:16px; height:16px; fill:currentColor; }
.stage__launch:hover{
  background:linear-gradient(180deg, #E4C384, #C69C51);
  transform:scale(1.05);
  box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 40px rgba(198,161,91,.45);
  animation-play-state:paused;
}
/* a slow invitation, never a strobe */
@keyframes launchBreathe{
  0%,100%{ box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 22px rgba(198,161,91,.26); }
  50%    { box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 34px rgba(198,161,91,.42); }
}
@media (prefers-reduced-motion:reduce){ .stage__launch{ animation:none; } }
.stage[data-state="idle"] .stage__launch{ display:inline-flex; }
.stage[data-state="idle"] .stage__plate{ display:none; }

/* Idle: the game is one click away, so the artwork carries the frame - the scrim only pools
   enough ink behind the button to keep it readable, and the whole frame reads clickable. */
.stage[data-state="idle"] .stage__poster{ opacity:.88; }
.stage[data-state="idle"] .stage__scrim{
  background:
    radial-gradient(46% 52% at 50% 52%, rgba(6,7,10,.6), rgba(6,7,10,.2) 66%, rgba(6,7,10,.1) 100%),
    linear-gradient(0deg, rgba(6,7,10,.5), transparent 42%);
}
.stage[data-state="idle"] .stage__frame{ cursor:pointer; }
/* the faintest bronze on the screen's edge once there is a real game behind the glass */
.stage[data-state="idle"],
.stage[data-state="loading"],
.stage[data-state="running"]{ border-color:rgba(198,161,91,.3); }

.stage__load{ position:absolute; z-index:3; width:min(320px,60%); text-align:center; }
.stage__bar{ height:3px; background:var(--line-2); overflow:hidden; border-radius:2px; }
.stage__bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, #8F6B2F, var(--bronze) 55%, #E6CC90);
  box-shadow:0 0 12px rgba(198,161,91,.5);
  transition:width .25s linear;
}
.stage__pct{ margin-top:.9rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-far); }

.stage__fallback{ position:relative; z-index:3; padding:2rem; max-width:44ch; text-align:center; color:var(--bone-dim); }

/* phone-only caption pinned under the launch button */
.stage__mobilenote{
  position:absolute; z-index:3; left:1rem; right:1rem; bottom:.9rem;
  text-align:center; font-size:.78rem; line-height:1.5; color:var(--bone-dim);
  text-shadow:0 1px 8px rgba(6,7,10,.9);
}
.stage__mobilenote a{ color:var(--bronze); }

/* The fullscreen control only means anything once a build is running, so it
   is off the page until the stage reaches a state that has one. Nothing to flash. */
.stage__bar-ui{
  display:none; align-items:center; justify-content:flex-end; gap:1rem;
  padding:.85rem 1.1rem;
  border-top:1px solid var(--line);
  background:rgba(10,11,13,.6);
}
.stage[data-state="unavailable"] .stage__bar-ui,
.stage[data-state="idle"] .stage__bar-ui,
.stage[data-state="loading"] .stage__bar-ui,
.stage[data-state="running"] .stage__bar-ui{ display:flex; }
.stage__full{
  display:flex; align-items:center; gap:.5rem;
  background:none; border:1px solid var(--line); border-radius:2px;
  color:var(--bone-dim); padding:.45rem .9rem; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.stage__full svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; }
.stage__full:hover:not(:disabled){ color:var(--bone); border-color:var(--bronze); }
.stage__full:disabled{ opacity:.32; cursor:not-allowed; }
/* the close control only exists while the game is actually running */
.stage__stop{ display:none; }
.stage[data-state="running"] .stage__stop{ display:flex; }

/* the 16:9 canvas is right for the game, but too shallow for prose on a phone -
   give the placeholder room, and let the future canvas keep its own ratio */
@media (max-width:640px){
  .stage[data-state="unavailable"] .stage__frame{ aspect-ratio:4/3; }
  .stage__plate{ padding:1.25rem; }
  .stage__kicker{ font-size:1.5rem; }
  .stage__note{ font-size:.85rem; margin-top:.9rem; }
  .stage__status{ margin-top:.8rem; }
  .stage__bar-ui{ flex-direction:column; align-items:flex-start; gap:.7rem; }
  .stage__full{ align-self:stretch; justify-content:center; }
}

/* ── audio: a compact statement, paired with one frame ────────── */
.audio .shead{ margin-bottom:clamp(2rem,4vh,3rem); }

/* ── the gameplay reel ──────────────────────────────────────────
   This is the only place the audio work can actually be heard, so it carries the
   section rather than sitting beside it. */
.reel{ margin:0 0 clamp(2rem,4vh,3rem); }
.reel__frame{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:2px;
  background:#000;
}
.reel__v{
  display:block; width:100%; height:auto;
  aspect-ratio:16 / 9; background:#000;
}
/* the one place a warm light is allowed to gather: around the game itself.
   pointer-events:none is essential - this sits over the native video controls. */
.reel__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:2px;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55);
}
.reel__nosupport{ padding:2rem; color:var(--bone); font-size:.9rem; }
.reel__nosupport a{ color:var(--bronze); }

.reel__cap{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.6rem;
  padding-top:1rem;
}
.reel__hint{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--bronze);
}
.reel__hint svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.reel__desc{
  flex:1 1 22rem; margin:0;
  font-size:.85rem; line-height:1.65; color:var(--bone-dim);
}

.areas{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.areas li{
  padding:1.05rem 0; border-bottom:1px solid var(--line-2);
  font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:var(--bone);
}
@media (max-width:860px){
  .areas{ grid-template-columns:1fr; }
  .areas li:last-child{ border-bottom:none; }
}
@media (max-width:480px){
  .reel__hint{
    flex:1 1 100%; min-width:0;
    font-size:.68rem; letter-spacing:.1em; line-height:1.5;
  }
}


/* ── profile ────────────────────────────────────────────────── */
.profile__grid{
  display:grid; grid-template-columns:minmax(240px,34%) 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.profile__fig{ margin:0; position:relative; }
.profile__fig img{
  width:100%; border-radius:2px;
  filter:grayscale(.55) contrast(1.04) brightness(.9);
  transition:filter .8s var(--ease);
}
.profile__fig:hover img{ filter:grayscale(0) contrast(1) brightness(1); }
.profile__fig::after{
  content:""; position:absolute; inset:0; border:1px solid var(--line); border-radius:2px;
  pointer-events:none;
}
.profile__lead{ margin-top:1.8rem; color:var(--bone-dim); max-width:56ch; line-height:1.75; }
.profile__lead + .profile__lead{ margin-top:1.1rem; }

.facts{ margin:clamp(2.5rem,5vw,3.5rem) 0 0; border-top:1px solid var(--line); }
.facts > div{
  display:grid; grid-template-columns:minmax(110px,150px) 1fr; gap:1.5rem;
  padding:1.5rem 0; border-bottom:1px solid var(--line-2);
}
.facts dt{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-far); padding-top:.25rem; }
.facts dd{ margin:0; color:var(--bone); font-size:.98rem; line-height:1.6; }
.facts dd span{ color:var(--bone-far); font-size:.9rem; }
@media (max-width:900px){
  .profile__grid{ grid-template-columns:1fr; }
  .profile__fig{ max-width:300px; }
  .facts > div{ grid-template-columns:1fr; gap:.5rem; }
}

/* ── footer ─────────────────────────────────────────────────── */
.foot{
  padding-block:clamp(5rem,10vh,8rem) 3rem;
  border-top:1px solid var(--line);
  background:
    radial-gradient(90% 130% at 50% 100%, rgba(22,35,60,.45), transparent 62%),
    var(--ink);
}
.foot__mail{
  display:inline-block; margin-top:1.2rem; text-decoration:none;
  font-family:var(--serif); color:var(--bone);
  font-size:clamp(1.9rem,1rem + 4vw,4.2rem); line-height:1.1;
  letter-spacing:-.02em;
  background-image:linear-gradient(var(--bronze),var(--bronze));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .6s var(--ease), color .4s var(--ease);
  word-break:break-word;
}
.foot__mail:hover{ background-size:100% 1px; color:var(--bronze); }
.foot__row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:2rem; border-top:1px solid var(--line-2);
}
.foot__who{ color:var(--bone); font-size:1rem; line-height:1.6; }
.foot__who span{ color:var(--bone-far); }

.foot__fine{
  margin-top:3.5rem; font-size:.78rem; color:var(--bone-far);
}

/* ── reveal on scroll (progressive: no JS = visible) ─────────── */
.reveal{ opacity:1; }
.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}