/* ═══════════════════════════════════════════════
   zacharygeorge.com — portfolio
   ═══════════════════════════════════════════════ */

:root{
  --bg:      #0A0A0B;
  --bg-2:    #101012;
  --ink:     #F4F1EA;
  --ink-dim: #9C9A95;
  --ink-fade:#4A4A4D;
  --line:    rgba(244,241,234,.13);
  --acc:     #E9B949;
  --acc-deep:#C9922B;

  --pad: clamp(1.15rem, 4.5vw, 4.5rem);
  --maxw: 1440px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --fd: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fm: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--fd);
  font-size:clamp(1rem,.95rem + .25vw,1.075rem);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }

/* film grain */
body::after{
  content:"";
  position:fixed; inset:0; z-index:900;
  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='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--acc); color:#0A0A0B; }

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

.skip{
  position:fixed; top:-100px; left:1rem; z-index:1000;
  background:var(--acc); color:#0A0A0B; padding:.7rem 1.1rem;
  font:700 .85rem/1 var(--fm); border-radius:.4rem;
}
.skip:focus{ top:1rem; }

:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--acc); outline-offset:3px; border-radius:2px;
}

/* ══ shared type ══ */
.h2{
  margin:0 0 1.6rem;
  font-size:clamp(2.5rem,1.1rem + 8.4vw,7rem);
  font-weight:800;
  font-stretch:88%;
  line-height:.93;
  letter-spacing:-.035em;
  text-transform:none;
}
.h2 em{ font-style:normal; color:var(--acc); }

.line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.line > span{ display:block; }
/* masked-in only when JS is running, so text never gets stuck hidden */
html.js .line > span{
  transform:translateY(112%);
  transition:transform 1.05s var(--ease);
  will-change:transform;
}
html.js .line > span.on{ transform:none; }

.secnum{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.1rem;
  font:700 .78rem/1 var(--fm);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
}
.secnum span{ color:var(--acc); }
.secnum::after{ content:""; flex:1; height:1px; background:var(--line); max-width:6rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:0 0 1.4rem;
  font:700 .76rem/1 var(--fm);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);
}
.eyebrow i{ color:var(--ink-fade); font-style:normal; }
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 0 rgba(233,185,73,.65);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(233,185,73,.6); }
  70% { box-shadow:0 0 0 11px rgba(233,185,73,0); }
  100%{ box-shadow:0 0 0 0 rgba(233,185,73,0); }
}

.body{ margin:0 0 1.4rem; color:var(--ink-dim); max-width:52ch; }
.lede{
  margin:0 0 1.5rem;
  font-size:clamp(1.15rem,1rem + 1vw,1.65rem);
  font-weight:500; line-height:1.42; letter-spacing:-.015em;
  max-width:34ch;
}
html.js .lede .w{ opacity:.14; transition:opacity .5s var(--ease); }
html.js .lede .w.on{ opacity:1; }

/* ══ buttons ══ */
.btn{
  --h:3.35rem;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  min-height:var(--h); padding:0 1.5rem;
  border-radius:999px; overflow:hidden;
  font:700 .82rem/1 var(--fm); letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn span,.btn svg{ position:relative; z-index:2; }
.btn svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--acc); border-radius:inherit;
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn--fill{ background:var(--ink); color:#0A0A0B; }
.btn--fill::before{ background:var(--acc); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover{ color:#0A0A0B; border-color:var(--ink); }
.btn--wide{ width:100%; justify-content:center; }
.btn:hover::before{ transform:translateY(0); }
.btn--fill:hover{ color:#0A0A0B; }
.btn:hover svg{ transform:translate(2px,-2px); }
.btn--wide:hover svg,.btn--fill:hover svg{ transform:translateX(3px); }

/* ═══════════ preloader ═══════════ */
.loader{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-content:center;
  background:var(--bg);
  transition:transform .9s var(--ease-io), visibility .9s;
}
.loader.done{ transform:translateY(-101%); visibility:hidden; }
.loader__inner{ display:flex; align-items:baseline; gap:1rem; padding-inline:var(--pad); }
.loader__name{
  font-size:clamp(1.5rem,5vw,2.6rem); font-weight:800; font-stretch:85%;
  letter-spacing:-.03em;
}
.loader__num{ font:700 .9rem/1 var(--fm); color:var(--acc); }
.loader__bar{
  position:absolute; left:var(--pad); right:var(--pad); bottom:2.5rem;
  height:2px; background:var(--line);
}
.loader__bar i{ display:block; height:100%; width:0; background:var(--acc); }

/* ═══════════ progress ═══════════ */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:800;
  background:rgba(244,241,234,.07);
}
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--acc-deep),var(--acc));
}

/* ═══════════ cursor ═══════════ */
.cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block; position:fixed; top:0; left:0; z-index:950;
    pointer-events:none; mix-blend-mode:difference;
    opacity:0; transition:opacity .3s var(--ease);
  }
  .cursor.ready{ opacity:1; }  /* only after the pointer actually moves */
  .cursor__dot,.cursor__ring{
    position:absolute; border-radius:50%; translate:-50% -50%;
    background:var(--ink);
  }
  .cursor__dot{ width:6px; height:6px; }
  .cursor__ring{
    width:34px; height:34px; background:none;
    border:1px solid rgba(244,241,234,.55);
    transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease);
  }
  .cursor.hot .cursor__ring{ width:56px; height:56px; background:rgba(244,241,234,.18); }
}

/* ═══════════ nav ═══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:700;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  padding-block:.75rem;
}
.nav__logo{ display:flex; align-items:center; gap:.65rem; margin-right:auto; min-height:44px; }
.nav__mark{
  display:grid; place-content:center;
  width:2.1rem; height:2.1rem; flex:0 0 auto;
  border:1px solid var(--line); border-radius:.55rem;
  font:700 .74rem/1 var(--fm); letter-spacing:.04em;
  color:var(--acc);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.nav__logo:hover .nav__mark{ background:var(--acc); color:#0A0A0B; border-color:var(--acc); }
.nav__logotype{ font:700 .88rem/1 var(--fm); letter-spacing:-.01em; }
.nav__logotype i{ color:var(--ink-fade); font-style:normal; }

.nav__links{ display:flex; gap:.35rem; }
.nav__links a{
  position:relative; display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .85rem; border-radius:999px;
  font:700 .78rem/1 var(--fm); letter-spacing:.06em;
  color:var(--ink-dim);
  transition:color .35s var(--ease), background .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:rgba(244,241,234,.05); }
.nav__i{ color:var(--ink-fade); font-size:.68rem; transition:color .35s; }
.nav__links a.on{ color:var(--ink); background:rgba(244,241,234,.07); }
.nav__links a.on .nav__i{ color:var(--acc); }

.nav__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.15rem; border-radius:999px;
  border:1px solid var(--line);
  font:700 .78rem/1 var(--fm); letter-spacing:.1em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.nav__cta svg{ width:.95rem; height:.95rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); }
.nav__cta:hover{ background:var(--acc); border-color:var(--acc); color:#0A0A0B; }
.nav__cta:hover svg{ transform:translateY(2px); }

.burger{
  display:none; width:2.9rem; height:2.9rem; flex:0 0 auto;
  border:1px solid var(--line); border-radius:.7rem;
  position:relative;
}
.burger i{
  position:absolute; left:50%; top:50%; width:1.05rem; height:1.5px;
  background:var(--ink); translate:-50% -50%;
  transition:transform .4s var(--ease), opacity .3s;
}
.burger i:first-child{ transform:translateY(-4px); }
.burger i:last-child{ transform:translateY(4px); }
.burger[aria-expanded="true"] i:first-child{ transform:rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:rotate(-45deg); }

/* ═══════════ mobile menu ═══════════ */
.menu{
  position:fixed; inset:0; z-index:690;
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:6rem var(--pad) 2.5rem;
  background:var(--bg-2);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease-io);
}
.menu[hidden]{ display:none; }
.menu.open{ clip-path:inset(0 0 0 0); }
.menu__links{ display:flex; flex-direction:column; }
.menu__links a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid var(--line);
  font-size:clamp(2rem,10vw,3.2rem); font-weight:800; font-stretch:86%;
  letter-spacing:-.03em; line-height:1.25;
  opacity:0; transform:translateY(30px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.open .menu__links a{ opacity:1; transform:none; }
.menu__links a:nth-child(1){ transition-delay:.22s; }
.menu__links a:nth-child(2){ transition-delay:.3s; }
.menu__links a:nth-child(3){ transition-delay:.38s; }
.menu__links a:nth-child(4){ transition-delay:.46s; }
.menu__links a span{ font:700 .8rem/1 var(--fm); color:var(--acc); }
.menu__links a:active{ color:var(--acc); }

.menu__foot{ margin-top:auto; display:flex; flex-direction:column; gap:1.25rem; }
.menu__resume{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:3.2rem; border-radius:999px; background:var(--acc); color:#0A0A0B;
  font:700 .82rem/1 var(--fm); letter-spacing:.1em; text-transform:uppercase;
}
.menu__socials{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.menu__socials a{
  font:700 .78rem/1 var(--fm); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); padding:.5rem 0;
}

/* ═══════════ hero ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(5.5rem,11vh,7.5rem) var(--pad) 3.5rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__glow{
  position:absolute; z-index:-1;
  width:min(115vw,1150px); aspect-ratio:1;
  left:50%; top:-18%; translate:-50% 0;
  background:radial-gradient(circle at 50% 50%, rgba(233,185,73,.16), rgba(233,185,73,.05) 42%, transparent 66%);
  filter:blur(18px);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg,var(--line) 1px, transparent 1px);
  background-size:clamp(48px,7vw,92px) clamp(48px,7vw,92px);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 35%, #000 20%, transparent 78%);
  opacity:.55;
}
.hero__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; }

.hero__title{
  margin:0 0 clamp(1.4rem,3.2vw,2.5rem);
  /* the svh cap keeps all three lines above the fold on short/wide screens */
  font-size:min(clamp(3.1rem,.4rem + 15.2vw,12.5rem), 16.5svh);
  font-weight:900; font-stretch:80%;
  line-height:.87; letter-spacing:-.045em;
}
.hero__title em{ font-style:normal; color:var(--acc); }

.hero__meta{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:clamp(1.5rem,4vw,4rem);
  padding-top:clamp(1.25rem,3vw,2rem);
  border-top:1px solid var(--line);
}
.hero__blurb{
  flex:1 1 20rem; margin:0; max-width:44ch;
  color:var(--ink-dim); font-size:clamp(.98rem,.94rem + .2vw,1.1rem);
}
.hero__blurb strong{ color:var(--ink); font-weight:600; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero__rail{
  position:absolute; right:var(--pad); top:50%; translate:0 -50%;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.hero__railtext{
  writing-mode:vertical-rl;
  font:700 .72rem/1 var(--fm); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-fade);
}
.hero__railline{ width:1px; height:4.5rem; background:var(--line); }

.cue{
  position:absolute; right:var(--pad); bottom:1.55rem;
  display:none; align-items:center; gap:.75rem;
  font:700 .68rem/1 var(--fm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-fade);
  transition:color .4s var(--ease);
}
.cue:hover{ color:var(--ink); }
.cue__track{ position:relative; width:4rem; height:1px; background:var(--line); overflow:hidden; }
.cue__track i{
  position:absolute; inset:0; background:var(--acc);
  animation:cueRun 2.1s var(--ease-io) infinite;
}
@keyframes cueRun{
  0%{ transform:translateX(-100%); } 55%,100%{ transform:translateX(100%); }
}

/* ═══════════ marquee ═══════════ */
.marquee{
  border-block:1px solid var(--line);
  background:var(--bg-2);
  overflow:hidden; padding-block:.95rem;
}
.marquee--alt{ background:var(--acc); border-color:transparent; }
.marquee__row{ display:flex; width:max-content; }
.marquee__set{
  display:flex; align-items:center; gap:1.6rem; padding-right:1.6rem;
  animation:slide 34s linear infinite;
}
.marquee__row[data-dir="-1"] .marquee__set{ animation-direction:reverse; }
.marquee__set span{
  font-size:clamp(1.05rem,.9rem + .9vw,1.85rem);
  font-weight:700; font-stretch:85%; letter-spacing:-.02em; white-space:nowrap;
}
.marquee__set .ast{ color:var(--acc); font-size:.9em; }
.marquee--alt .marquee__set span{ color:#0A0A0B; }
.marquee--alt .marquee__set .ast{ color:rgba(10,10,11,.5); }
@keyframes slide{ to{ transform:translateX(-100%); } }

/* ═══════════ 01 about ═══════════ */
.about{ padding:clamp(5rem,11vw,9.5rem) 0; }
.about__grid{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr;
}
.about__media{ position:relative; }
.about__frame{
  position:relative; overflow:hidden; border-radius:1.1rem;
  border:1px solid var(--line);
  aspect-ratio:4/5;
  background:var(--bg-2);
}
.about__frame img{
  width:100%; height:118%; object-fit:cover; object-position:50% 22%;
  filter:grayscale(.35) contrast(1.06);
  transition:filter .8s var(--ease); /* transform is driven by the parallax loop */
}
.about__frame:hover img{ filter:grayscale(0) contrast(1); }
.about__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,11,.88), rgba(10,10,11,.35) 26%, transparent 52%);
}
.about__tag{
  position:absolute; z-index:2; left:1rem; bottom:1rem;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem .85rem; border-radius:999px;
  background:rgba(10,10,11,.6); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font:700 .7rem/1 var(--fm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim);
}
.about__tag i{ color:var(--acc); font-style:normal; }

.about__sticker{
  position:absolute; right:-.4rem; top:-1.5rem; width:6.5rem; height:6.5rem;
  animation:spin 22s linear infinite;
}
.about__sticker svg{ width:100%; height:100%; overflow:visible; }
.about__sticker text{
  fill:var(--ink-dim); font-family:var(--fm); font-size:8px;
  font-weight:700; text-transform:uppercase;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem; margin-top:2.25rem;
  border-top:1px solid var(--line); padding-top:1.6rem;
}
.stats b{
  display:block;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);
  font-weight:800; font-stretch:85%; line-height:1; letter-spacing:-.04em;
  color:var(--acc);
}
.stats span{
  display:block; margin-top:.45rem;
  font:700 .68rem/1.3 var(--fm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-fade);
}

/* ═══════════ 02 journey ═══════════ */
.journey{ position:relative; background:var(--bg-2); border-block:1px solid var(--line); }
.journey__pin{ padding:clamp(4.5rem,10vw,8rem) 0; }
.journey__head{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;
}
.journey__h2{ margin-bottom:1.35rem; }

/* horizontal-scroll affordance: a line that keeps sweeping right */
.journey__hint{
  display:inline-flex; align-items:center; gap:.65rem;
  margin-bottom:2rem;
  font:700 .7rem/1 var(--fm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-fade);
}
.journey__hint b{ font-weight:700; }
.journey__hint i{
  width:2.5rem; height:1px; background:var(--line);
  position:relative; overflow:hidden;
}
.journey__hint i::after{
  content:""; position:absolute; inset:0; background:var(--acc);
  animation:hintRun 2.2s var(--ease-io) infinite;
}
@keyframes hintRun{ 0%{ transform:translateX(-100%); } 55%,100%{ transform:translateX(100%); } }
.hint--desk{ display:none; }

.journey__track{
  padding-inline:var(--pad);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.journey__track::-webkit-scrollbar{ display:none; }

.journey__rail{
  display:flex; gap:1rem; width:max-content;
  padding-bottom:.5rem;
}

.job{
  position:relative;
  display:flex; flex-direction:column;
  width:min(80vw,26rem); flex:0 0 auto;
  padding:1.75rem 1.5rem 1.6rem;
  border:1px solid var(--line); border-radius:1.1rem;
  background:var(--bg);
  scroll-snap-align:center;
  transition:border-color .5s var(--ease), transform .6s var(--ease), background .5s;
}
.job:hover{ border-color:rgba(233,185,73,.4); transform:translateY(-4px); }
.job__idx{
  position:absolute; right:1.25rem; top:1.15rem;
  font:700 .78rem/1 var(--fm); color:var(--ink-fade);
}
.job--hi{ background:linear-gradient(170deg, rgba(233,185,73,.09), transparent 55%); border-color:rgba(233,185,73,.28); }
.job--hi .job__idx{ color:var(--acc); }
.job__date{
  margin:0 0 .9rem;
  font:700 .72rem/1 var(--fm); letter-spacing:.13em; text-transform:uppercase;
  color:var(--acc);
}
/* ongoing role — the dot keeps pulsing next to "Present" */
.job__date--now{ display:inline-flex; align-items:center; gap:.5rem; }
.pulse--sm{ width:6px; height:6px; flex:0 0 auto; }
.job__title{
  margin:0 0 .55rem;
  font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);
  font-weight:800; font-stretch:88%; line-height:1.03; letter-spacing:-.035em;
}
.job__title em{ font-style:normal; color:var(--acc); }
.job__org{
  margin:0 0 1.25rem; padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);
  font-size:.95rem; font-weight:600; color:var(--ink);
}
.job__org i{ display:block; margin-top:.2rem; font-style:normal; font-weight:400; font-size:.85rem; color:var(--ink-fade); }
.job__list{ display:flex; flex-direction:column; gap:.7rem; }
.job__list li{
  position:relative; padding-left:1.15rem;
  font-size:.93rem; line-height:1.5; color:var(--ink-dim);
}
.job__list li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:5px; height:5px; border-radius:50%; background:var(--acc-deep);
}
.job--cta{ justify-content:center; gap:.15rem; background:var(--ink); border-color:var(--ink); }
.job--cta .job__date{ color:var(--acc-deep); }
.job--cta .job__title{ color:#0A0A0B; margin-bottom:1rem; }
.job--cta .job__note{ margin:0 0 1.6rem; color:#4A4A4D; font-size:.93rem; }
.job--cta .btn--fill{ background:#0A0A0B; color:var(--ink); align-self:flex-start; }
.job--cta:hover{ transform:translateY(-4px); border-color:var(--ink); }

/* ═══════════ 03 skills ═══════════ */
.skills{ padding:clamp(5rem,11vw,9.5rem) 0; }
.skills__head{ margin-bottom:clamp(2.5rem,5vw,4rem); }

.slist{ border-top:1px solid var(--line); }
.slist li{
  position:relative;
  display:flex; align-items:center; gap:clamp(.9rem,3vw,2.5rem);
  padding:clamp(1rem,2.4vw,1.7rem) 0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.slist__n{
  flex:0 0 auto;
  font:700 .78rem/1 var(--fm); color:var(--ink-fade);
  transition:color .45s var(--ease);
}
.slist__t{
  flex:1;
  font-size:clamp(1.25rem,.85rem + 2.4vw,2.8rem);
  font-weight:700; font-stretch:88%; line-height:1.1; letter-spacing:-.03em;
  transition:transform .55s var(--ease), color .45s var(--ease);
}
.slist__b{
  flex:0 0 auto; width:.85rem; height:.85rem; border-radius:50%;
  border:1px solid var(--ink-fade);
  transition:background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.slist li::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(233,185,73,.07);
  transform:translateY(100%); transition:transform .55s var(--ease);
}
.slist li:hover::before{ transform:translateY(0); }
.slist li:hover .slist__t{ transform:translateX(clamp(.4rem,1.5vw,1.4rem)); color:var(--acc); }
.slist li:hover .slist__n{ color:var(--acc); }
.slist li:hover .slist__b{ background:var(--acc); border-color:var(--acc); transform:scale(1.25); }

.tools{ margin-top:clamp(3rem,6vw,5rem); }
.tools__label{
  margin:0 0 1.25rem;
  font:700 .74rem/1 var(--fm); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-fade);
}
.tools__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.tools__grid li{
  padding:1.25rem 1.1rem;
  border:1px solid var(--line); border-radius:.9rem;
  background:var(--bg-2);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.tools__grid li:hover{ border-color:rgba(233,185,73,.42); transform:translateY(-3px); }
.tools__grid b{
  display:block;
  font-size:clamp(1.05rem,.95rem + .6vw,1.5rem);
  font-weight:800; font-stretch:88%; letter-spacing:-.03em; line-height:1.1;
}
.tools__grid span{
  display:block; margin-top:.3rem;
  font:400 .7rem/1 var(--fm); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-fade);
}

/* ═══════════ 04 contact ═══════════ */
.contact{ padding:clamp(5rem,11vw,9.5rem) 0; }
.contact__grid{ display:grid; gap:clamp(2.75rem,6vw,5rem); grid-template-columns:1fr; }
.contact__h2{ margin-bottom:1.5rem; }

.socials{ margin-top:2rem; border-top:1px solid var(--line); }
.socials a{
  display:flex; align-items:center; gap:1rem;
  padding:1.05rem 0; border-bottom:1px solid var(--line);
  font-size:1.05rem; font-weight:600;
  transition:color .4s var(--ease), padding-left .4s var(--ease);
}
.socials .ico{ width:1.25rem; height:1.25rem; flex:0 0 auto; color:var(--ink-dim); transition:color .4s; }
.socials a i{ margin-left:auto; font:400 .78rem/1 var(--fm); font-style:normal; color:var(--ink-fade); }
.socials a:hover{ color:var(--acc); padding-left:.6rem; }
.socials a:hover .ico{ color:var(--acc); }

.form{
  padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--line); border-radius:1.2rem;
  background:var(--bg-2);
  align-self:start;
}
.form__label{
  margin:0 0 1.75rem;
  font:700 .74rem/1 var(--fm); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
}
.field{ position:relative; margin-bottom:1.4rem; }
.field input,.field textarea{
  width:100%; padding:1.5rem .1rem .6rem;
  background:none; border:0; border-bottom:1px solid var(--line);
  color:var(--ink); font:inherit; font-size:1rem;
  border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:6rem; }
.field label{
  position:absolute; left:.1rem; top:1.4rem;
  font:400 .95rem/1 var(--fd); color:var(--ink-fade);
  pointer-events:none;
  transition:transform .4s var(--ease), font-size .4s var(--ease), color .4s var(--ease);
  transform-origin:left top;
}
.field label b{ color:var(--acc); font-weight:400; }
.field input:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--acc); }
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.35rem); font-size:.72rem; color:var(--ink-dim);
  letter-spacing:.1em; text-transform:uppercase;
}
.field.err input,.field.err textarea{ border-bottom-color:#E2564B; }
.form__note{
  min-height:1.2rem; margin:.9rem 0 0;
  font:400 .8rem/1.4 var(--fm); color:var(--ink-fade);
}
.form__note.ok{ color:var(--acc); }
.form__note.bad{ color:#E2564B; }

/* ═══════════ footer ═══════════ */
.foot{ border-top:1px solid var(--line); padding:clamp(3rem,7vw,5rem) 0 2rem; overflow:hidden; }
.foot__big{ display:block; }
/* extra room so the descenders in "Zachary George" clear the reveal mask */
.foot__big .line{ padding-bottom:.2em; margin-bottom:-.14em; }
.foot__big span{
  display:block;
  font-size:clamp(2.6rem,.2rem + 13vw,11rem);
  font-weight:900; font-stretch:78%; line-height:.9; letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px var(--ink-fade);
  transition:color .7s var(--ease), -webkit-text-stroke-color .7s var(--ease);
}
.foot__big:hover span{ color:var(--acc); -webkit-text-stroke-color:transparent; }
.foot__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font:400 .78rem/1 var(--fm); color:var(--ink-fade);
}
.foot__row p{ margin:0; }
.foot__links{ display:flex; gap:.5rem; }
/* min-height keeps these comfortable thumb targets on touch screens */
.foot__links a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; transition:color .3s;
}
.foot__links a:hover{ color:var(--acc); }
.foot__top{
  margin-left:auto; display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px;
  letter-spacing:.1em; text-transform:uppercase; transition:color .3s;
}
.foot__top svg{ width:.9rem; height:.9rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); }
.foot__top:hover{ color:var(--acc); }
.foot__top:hover svg{ transform:translateY(-3px); }

/* ═══════════ reveal states ═══════════ */
html.js [data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
html.js [data-reveal].in{ opacity:1; transform:none; }
html:not(.js) .loader{ display:none; }

/* ═══════════ responsive ═══════════ */
@media (min-width:600px){
  .tools__grid{ grid-template-columns:repeat(4,1fr); }
}

@media (min-width:860px){
  .about__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; }
  .about__media{ position:sticky; top:14vh; }
  .contact__grid{ grid-template-columns:1.05fr .95fr; align-items:start; }
  .cue{ display:inline-flex; }
  .hero{ padding-bottom:4.5rem; }
}

@media (min-width:1000px){
  .job{ width:30rem; padding:2.25rem 2rem 2rem; }
  .stats{ gap:1.5rem; }
}

/* desktop: pinned horizontal journey */
@media (min-width:1000px) and (hover:hover){
  .journey{ border-bottom:0; }
  .journey__pin{
    position:sticky; top:0; height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding:0; overflow:hidden;
  }
  .journey__head{ margin-bottom:clamp(2rem,4vh,3.5rem); }
  .journey__h2{ margin-bottom:0; font-size:clamp(3rem,5.2vw,5.5rem); }
  .journey__hint{
    position:absolute; right:var(--pad); bottom:.4rem;
    margin-bottom:0;
  }
  .hint--touch{ display:none; }
  .hint--desk{ display:inline; }

  .journey__track{
    overflow:visible; scroll-snap-type:none;
    padding-inline:0;
  }
  .journey__rail{
    gap:1.5rem;
    padding-left:var(--pad);
    will-change:transform;
  }
  .job{ height:min(60vh,30rem); }
}

/* ── mobile tweaks ── */
@media (max-width:859px){
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:block; }
  .hero__rail{ display:none; }
  .hero{ min-height:100svh; padding-bottom:3rem; }
  /* the rotating badge sits over the photo at this width and reads as noise */
  .about__sticker{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; gap:1.25rem 1rem; }
  .stats li:last-child{ grid-column:span 2; }
  .socials a{ padding:1.15rem 0; }
}

@media (max-width:420px){
  .job{ width:84vw; }
  .stats{ grid-template-columns:1fr; }
  .stats li:last-child{ grid-column:auto; }
  .stats li{ display:flex; align-items:baseline; gap:.75rem; }
  .stats span{ margin-top:0; }
}

/* ═══════════ motion & print ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .line > span{ transform:none !important; }
  .lede .w{ opacity:1 !important; }
  .loader{ display:none; }
  .journey__pin{ position:static; height:auto; }
  .about__media{ position:static; }
}

@media print{
  .nav,.menu,.loader,.progress,.cursor,.marquee,.cue,.foot__big{ display:none !important; }
  body{ background:#fff; color:#000; }
  .job,.form{ break-inside:avoid; }
}