/* ---------- Fonts: Instrument Sans (variable, 400-700) + Fragment Mono (both SIL Open Font License, free for web use) ---------- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:300 700;font-stretch:75% 100%;font-display:swap;src:url("../fonts/InstrumentSans-VF.woff2") format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:300 700;font-stretch:75% 100%;font-display:swap;src:url("../fonts/InstrumentSans-Italic-VF.woff2") format('woff2');}
@font-face{font-family:'Fragment Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/FragmentMono-Regular.ttf") format('truetype');}
@font-face{font-family:'Fragment Mono';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/FragmentMono-Italic.ttf") format('truetype');}

/* ---------- Tokens ---------- */
:root{
  --ink:#11130f; --ink-deep:#0c0f0b; --cream:#f4efe4; --sand:#F4E0BE;
  --gold:#BF993D; --green:#2D9771; --forest:#005938;
  --cream-70:rgba(244,239,228,0.7); --cream-60:rgba(244,239,228,0.6); --cream-45:rgba(244,239,228,0.45);
  --rule:rgba(244,239,228,0.1);
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'Fragment Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --pad-x:clamp(20px,8vw,140px);
  --pad-y:clamp(90px,14vh,170px);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:70px;}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;}
::selection{background:var(--gold);color:var(--ink);}
.skip{position:absolute;left:-9999px;top:0;background:var(--sand);color:var(--ink);padding:10px 16px;z-index:9999;}
.skip:focus{left:10px;top:10px;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:0.05;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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.3em;color:var(--gold);text-transform:uppercase;margin-bottom:clamp(28px,5vh,56px);}
.label{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;color:var(--cream-45);text-transform:uppercase;}
.section{position:relative;padding:var(--pad-y) var(--pad-x);}
.section + .section{border-top:1px solid rgba(244,239,228,0.07);}
.h2{font-weight:300;font-size:clamp(28px,4.2vw,60px);line-height:1.1;letter-spacing:-0.015em;color:var(--cream);max-width:24ch;}
.h2 em{font-style:normal;color:var(--green);}
.body{font-size:clamp(16px,1.25vw,18px);line-height:1.75;color:var(--cream-70);max-width:62ch;}
.body + .body{margin-top:1.2em;}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:8000;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);border-bottom:1px solid transparent;
  transition:background .5s ease,border-color .5s ease,padding .4s ease;}
.site-header.scrolled{background:rgba(13,15,11,0.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(244,239,228,0.08);padding-top:15px;padding-bottom:15px;}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;}
.brand .mark{width:26px;height:26px;object-fit:contain;}
.brand .type{height:15px;width:auto;padding-left:2px;}
.nav{display:flex;align-items:center;gap:clamp(20px,3vw,40px);}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;color:var(--cream-60);text-decoration:none;text-transform:uppercase;transition:color .3s;}
.nav a:hover{color:var(--cream);}
.nav a.pill{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:0.04em;text-transform:none;color:var(--ink);background:var(--sand);padding:9px 18px;border-radius:999px;}
.nav a.pill:hover{background:var(--cream);color:var(--ink);}
.menu-btn{display:none;background:none;border:1px solid rgba(244,239,228,0.25);border-radius:999px;color:var(--cream);font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;padding:8px 14px;cursor:pointer;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--ink);overflow:hidden;}
.hero-media{position:absolute;inset:-15%;animation:hdrift 34s ease-in-out infinite;}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-shade-1{position:absolute;inset:0;background:radial-gradient(120% 90% at 18% 50%,rgba(17,19,15,0.92) 0%,rgba(17,19,15,0.6) 45%,rgba(17,19,15,0.2) 100%);}
.hero-shade-2{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,15,0.6) 0%,rgba(17,19,15,0) 30%,rgba(17,19,15,0.85) 100%);}
.hero-content{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:110px var(--pad-x) 120px;}
.hero h1{font-weight:400;font-size:clamp(40px,7vw,104px);line-height:0.98;letter-spacing:-0.02em;color:var(--cream);max-width:13ch;}
.hero h1 em{color:var(--green);font-style:italic;font-weight:300;}
.hero p{font-size:clamp(16px,1.5vw,21px);line-height:1.6;color:rgba(244,239,228,0.7);max-width:50ch;margin-top:34px;}
.hero .eyebrow{letter-spacing:0.34em;margin-bottom:30px;}
.hero-foot{position:absolute;left:var(--pad-x);bottom:46px;z-index:3;display:flex;align-items:center;gap:14px;}
.scroll-line{width:1px;height:34px;background:rgba(244,239,228,0.3);position:relative;overflow:hidden;}
.scroll-line span{position:absolute;top:0;left:0;width:1px;height:10px;background:var(--gold);animation:scrolldot 2.4s ease-in-out infinite;}
.coords{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:rgba(244,239,228,0.5);}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(30px,4vw,64px);margin-top:clamp(56px,8vh,100px);border-top:1px solid var(--rule);padding-top:clamp(40px,5vh,64px);}
.about-grid h3{font-weight:500;font-size:21px;color:var(--sand);margin:18px 0 14px;}
.about-grid p{font-size:15px;line-height:1.7;color:var(--cream-60);}

/* ---------- Name / Hercules Mine ---------- */
.name{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,110px);align-items:end;}
.name-word{font-weight:300;font-size:clamp(56px,10vw,160px);line-height:0.9;letter-spacing:-0.03em;color:var(--cream);}
.pron{font-family:var(--mono);font-size:clamp(13px,1.1vw,15px);letter-spacing:0.08em;color:var(--gold);margin-top:22px;}
.pron b{font-weight:400;color:var(--sand);}
.pron i{font-style:italic;}
.def{font-size:clamp(19px,1.9vw,27px);line-height:1.45;color:var(--cream);max-width:34ch;}
.def-sub{font-size:16px;line-height:1.7;color:var(--cream-60);margin-top:20px;max-width:46ch;}
.mine{position:relative;height:clamp(460px,90vh,880px);overflow:hidden;background:var(--ink-deep);}
.mine .parallax{position:absolute;inset:-12% 0;}
.mine img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;}
.mine::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,15,0.35) 0%,rgba(17,19,15,0) 22%,rgba(17,19,15,0) 72%,rgba(17,19,15,0.8) 100%);pointer-events:none;}
.mine figcaption{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:30px;z-index:2;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(244,239,228,0.7);}

/* ---------- People ---------- */
.person{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,110px);margin-top:clamp(40px,6vh,70px);border-top:1px solid var(--rule);padding-top:clamp(40px,5vh,64px);}
.person-name{font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-0.015em;color:var(--cream);}
.person-role{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--gold);text-transform:uppercase;margin-top:12px;}
.creds{list-style:none;margin-top:34px;border-top:1px solid var(--rule);}
.creds li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:14px;color:var(--cream-70);}
.creds li span:first-child{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--cream-45);text-transform:uppercase;padding-top:2px;}

/* ---------- Consulting ---------- */
.consult{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,80px);align-items:end;}
.text-link{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--sand);text-decoration:none;border:1px solid rgba(244,224,190,0.4);border-radius:999px;padding:14px 24px;white-space:nowrap;transition:background .3s,color .3s;}
.text-link:hover{background:var(--sand);color:var(--ink);}
.text-link .arr{transition:transform .3s;}
.text-link:hover .arr{transform:translateX(4px);}

/* ---------- Projects ---------- */
.projects-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:clamp(40px,7vh,80px);}
.projects-head .body{max-width:36ch;font-size:15px;}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px);}
.tile{grid-column:span 2;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink-deep);border-radius:2px;}
.tile.wide{grid-column:span 3;aspect-ratio:16/9;}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(0.22,1,0.36,1),filter .8s ease;filter:saturate(0.85);}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(17,19,15,0) 30%,rgba(17,19,15,0.94) 100%);transition:background .6s ease;}
.tile-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2vw,28px);}
.tile-loc{font-family:var(--mono);font-size:10.5px;letter-spacing:0.2em;color:var(--sand);text-transform:uppercase;}
.tile h3{font-weight:500;font-size:clamp(19px,1.6vw,24px);line-height:1.2;color:var(--cream);margin-top:8px;}
.tile p{font-size:14.5px;line-height:1.6;color:rgba(244,239,228,0.82);max-width:40ch;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px);
  transition:max-height .6s cubic-bezier(0.22,1,0.36,1),opacity .5s ease,transform .6s cubic-bezier(0.22,1,0.36,1),margin .6s ease;}
.tile:hover img,.tile:focus-within img{transform:scale(1.05);filter:saturate(1);}
.tile:hover::before,.tile:focus-within::before{background:linear-gradient(180deg,rgba(1,40,26,0.35) 0%,rgba(17,19,15,0.93) 100%);}
.tile:hover p,.tile:focus-within p{max-height:9em;opacity:1;transform:none;margin-top:12px;}
/* touch screens have no hover: always show the description */
@media (hover:none){
  .tile p{max-height:none;opacity:1;transform:none;margin-top:10px;}
  .tile::before{background:linear-gradient(180deg,rgba(17,19,15,0) 20%,rgba(17,19,15,0.92) 100%);}
}

/* ---------- Contact ---------- */
.contact{position:relative;overflow:hidden;background:var(--forest);padding:clamp(90px,16vh,190px) var(--pad-x);text-align:center;}
.contact-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.85;mix-blend-mode:luminosity;pointer-events:none;}
.contact .veil{position:absolute;inset:0;background:radial-gradient(100% 100% at 50% 0%,rgba(0,89,56,0.2) 0%,rgba(1,40,26,0.85) 70%);}
.contact-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.contact .eyebrow{color:var(--sand);}
.contact h2{font-weight:300;font-size:clamp(32px,5vw,68px);line-height:1.04;letter-spacing:-0.02em;color:var(--cream);}
.contact-lead{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:rgba(244,239,228,0.74);margin:24px auto 44px;}
.contact-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 30px;font-family:var(--sans);font-weight:500;font-size:15px;text-decoration:none;transition:background .3s,color .3s,border-color .3s;}
.btn-solid{background:var(--sand);color:var(--ink);}
.btn-solid:hover{background:var(--cream);}
.btn-line{border:1px solid rgba(244,239,228,0.35);color:var(--cream);}
.btn-line:hover{border-color:var(--cream);}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-deep);padding:clamp(56px,8vh,90px) var(--pad-x) 40px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;border-bottom:1px solid var(--rule);padding-bottom:clamp(40px,6vh,70px);}
.foot-grid .brand{margin-bottom:22px;}
.foot-grid .brand .mark{width:24px;height:24px;}
.foot-grid .brand .type{height:13.5px;}
.foot-blurb{font-size:14px;line-height:1.7;color:rgba(244,239,228,0.5);max-width:34ch;}
.foot-grid .label{margin-bottom:18px;display:block;}
.foot-list{display:flex;flex-direction:column;gap:11px;font-size:14px;line-height:1.5;color:var(--cream-60);}
.foot-list a{text-decoration:none;transition:color .3s;}
.foot-list a:hover{color:var(--cream);}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:rgba(244,239,228,0.35);}

/* ---------- Reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(0.22,1,0.36,1),transform 1.1s cubic-bezier(0.22,1,0.36,1);}
.js [data-reveal].shown{opacity:1;transform:none;}

@keyframes hdrift{0%{transform:translate3d(0,0,0) scale(1.08);}50%{transform:translate3d(-1.5%,-1.2%,0) scale(1.13);}100%{transform:translate3d(0,0,0) scale(1.08);}}
@keyframes scrolldot{0%{transform:translateY(0);opacity:0;}30%{opacity:1;}70%{opacity:1;}100%{transform:translateY(20px);opacity:0;}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-media,.scroll-line span{animation:none;}
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .tiles{grid-template-columns:repeat(2,1fr);}
  .tile,.tile.wide{grid-column:span 1;aspect-ratio:4/3;}
  .tile.wide:last-child{grid-column:span 2;aspect-ratio:16/8;}
  .name,.person,.consult{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-grid > :first-child{grid-column:1 / -1;}
}
@media (max-width:760px){
  .menu-btn{display:block;}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:rgba(13,15,11,0.97);
    border-bottom:1px solid rgba(244,239,228,0.08);padding:8px 20px 22px;display:none;}
  .nav.open{display:flex;}
  .nav a{padding:14px 0;width:100%;border-bottom:1px solid rgba(244,239,228,0.06);font-size:12px;}
  .nav a.pill{margin-top:16px;width:auto;border-bottom:0;padding:11px 22px;}
  .site-header.menu-open{background:rgba(13,15,11,0.97);}
}
@media (max-width:620px){
  .tiles{grid-template-columns:1fr;}
  .tile,.tile.wide,.tile.wide:last-child{grid-column:span 1;aspect-ratio:4/3;}
  .foot-grid{grid-template-columns:1fr;}
  .hero-foot{bottom:28px;}
  .mine{height:clamp(300px,62vh,560px);}
  .mine figcaption{bottom:20px;font-size:10px;}
}

/* Placeholders stay hidden until real values are filled in (see TODOs in index.html) */
a[data-email][href="mailto:EMAIL"], a.text-link[href="#"]{display:none !important;}