:root {
  --bg: #14100D;
  --text: #B7A794;
  --bright: #EFE6D8;
  --accent: #E9A23B;
  --ember: #D66A3A;
  --muted: #8E7B66;
  --border: #362B22;
  --border-strong: #4A3A2B;
  --border-soft: #2C2219;
  --border-mobile: #241C15;
  --tag-text: #C8B7A2;
  --link-border: #6B5540;
  --nav-bg-mobile: #16120F;
  --font-sans: Archivo, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
main > section { scroll-margin-top: 0; }

a { color: var(--bright); text-decoration: none; border-bottom: 1px solid var(--link-border); padding-bottom: 1px; }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* Background scene */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0.55; }
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,13,0.74) 0%, rgba(20,16,13,0.88) 40%, rgba(20,16,13,0.94) 100%);
}

/* Mark / logo */
.mark {
  position: fixed; top: 0; left: 0; z-index: 4; pointer-events: none;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 30px clamp(20px, 5vw, 56px) 34px;
  background: linear-gradient(180deg, rgba(20,16,13,0.92) 0%, rgba(20,16,13,0) 100%);
  animation: fadein 0.7s ease-out 0.15s both;
}
.mark .rule { display: block; width: 1px; height: 44px; flex: none; margin-top: 4px; background: linear-gradient(180deg, var(--ember) 0%, #3A2C21 100%); }
.mark-link { display: flex; flex-direction: column; gap: 6px; border-bottom: none; pointer-events: auto; }
.mark-name { color: var(--bright); font-size: 16px; line-height: 1; font-variation-settings: 'wdth' 114, 'wght' 560; letter-spacing: 0.02em; }
.mark-role { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.06em; color: var(--muted); }

.menu-btn {
  display: none; margin-left: auto; align-items: center; gap: 9px; pointer-events: auto;
  padding: 9px 14px; background: none; border: 1px solid var(--border-strong); color: var(--bright);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.menu-btn-icon { display: flex; flex-direction: column; gap: 3px; width: 14px; }
.menu-btn-icon span { display: block; height: 1px; background: var(--ember); }

/* Nav rail */
.nav-rail {
  position: fixed; top: 50%; right: clamp(14px, 3vw, 34px); z-index: 4; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 15px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  pointer-events: none; animation: fadein 0.7s ease-out 0.3s both;
}
.nav-link {
  display: flex; align-items: center; gap: 10px; border-bottom: none; pointer-events: auto;
  color: var(--muted); transition: color 0.2s ease;
}
.nav-link:hover, .nav-link.is-active { color: var(--bright); }
.nav-link-contact { color: var(--ember); }
.nav-dash { width: 14px; height: 1px; flex: none; background: currentColor; transition: width 0.3s ease; }
.nav-link.is-active .nav-dash { width: 34px; }

/* Main / sections */
main {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
  padding: 0 clamp(20px, 5vw, 56px); box-sizing: border-box;
}
section { display: flex; flex-direction: column; width: 100%; max-width: 72ch; }
.section-heading {
  margin: 0; color: var(--bright); font-size: clamp(27px, 3.4vw, 40px); line-height: 1.1;
  font-variation-settings: 'wdth' 122, 'wght' 210; letter-spacing: 0.05em; text-indent: 0.05em;
}
.section-body-block { gap: clamp(26px, 3.5vh, 38px); padding: clamp(70px, 11vh, 140px) 0; }
.section-experience-block { gap: clamp(40px, 5vh, 62px); padding: clamp(70px, 11vh, 140px) 0; }

/* Hero */
.hero { min-height: 100vh; justify-content: center; padding: 40px 0 60px; }
.hero-bleed { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); display: flex; justify-content: center; }
.hero-block { width: max-content; }
.hero h1 {
  margin: 0; color: var(--bright); font-size: clamp(36px, 8.2vw, 136px); line-height: 0.94;
  font-variation-settings: 'wdth' 116, 'wght' 240; letter-spacing: -0.005em; white-space: nowrap; margin-left: -0.058em;
}
.hero-line {
  margin: clamp(18px, 2.4vh, 26px) 0 0; font-family: var(--font-mono); font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember); white-space: nowrap;
}
.hero-intro { margin: clamp(28px, 4vh, 42px) 0 0; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.62; max-width: 56ch; }

.field-grid { margin: clamp(34px, 5vh, 52px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 30px; max-width: 66ch; }
.field { display: flex; flex-direction: column; gap: 6px; padding-top: 13px; border-top: 1px solid var(--border); }
.field dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.field dd { margin: 0; font-size: 16px; color: var(--bright); }

/* About */
.about-copy { display: flex; flex-direction: column; gap: 20px; max-width: 60ch; font-size: 18px; line-height: 1.68; }
.about-copy p { margin: 0; }

.stat-grid { margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 18px 28px; max-width: 60ch; }
.stat { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; border-top: 1px solid var(--border-strong); }
.stat dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.stat dd { margin: 0; color: var(--accent); font-size: 26px; letter-spacing: 0.01em; }

.tag-group { display: flex; flex-direction: column; gap: 14px; }
.tag-group h3 { margin: 0; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.tag-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 9px; }
.tag { padding: 7px 13px; border: 1px solid var(--border-strong); color: var(--tag-text); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; }

/* Experience */
.job { display: flex; flex-direction: column; gap: 14px; }
.job-meta { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.job h3 { margin: 0; color: var(--bright); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.16; font-variation-settings: 'wdth' 112, 'wght' 320; }
.job-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
.job-list li { display: flex; gap: 12px; font-size: 17px; line-height: 1.6; }
.job-dash { color: var(--link-border); font-family: var(--font-mono); font-size: 13px; padding-top: 3px; }

/* Credentials / contact records */
.record-grid { margin: 0; display: grid; grid-template-columns: minmax(110px, 22%) 1fr; column-gap: clamp(16px, 3vw, 34px); max-width: 66ch; }
.record-grid dt { padding: 14px 0; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.record-grid dd { margin: 0; padding: 14px 0; border-top: 1px solid var(--border); color: var(--bright); font-size: 16.5px; line-height: 1.6; }

.contact-lede { margin: 0; color: var(--bright); font-size: clamp(21px, 2.7vw, 30px); line-height: 1.32; font-variation-settings: 'wdth' 112, 'wght' 280; max-width: 32ch; }

.contact-grid { margin: 0; display: grid; grid-template-columns: minmax(84px, 15%) 1fr; column-gap: clamp(16px, 3vw, 32px); max-width: 60ch; font-size: 16.5px; }
.contact-grid dt { padding: 13px 0; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.contact-grid dd { margin: 0; padding: 13px 0; border-top: 1px solid var(--border); }
.contact-grid dd.is-last { border-bottom: 1px solid var(--border); color: var(--bright); }
.mono-link { font-family: var(--font-mono); font-size: 14px; }

.downloads { margin: 46px 0 0; display: flex; flex-direction: column; gap: 16px; max-width: 62ch; }
.downloads h3 { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.downloads-note { margin: 0; font-size: 16.5px; line-height: 1.6; }

/* Responsive */
@media (max-width: 980px) {
  .menu-btn { display: flex !important; }
  .nav-rail {
    z-index: 5; box-sizing: border-box; top: 58px !important; right: 0 !important; left: 0 !important;
    transform: none !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    padding: 6px 0 14px !important; background: var(--nav-bg-mobile) !important; border-bottom: 1px solid var(--border-soft);
  }
  .nav-rail[data-open="closed"] { display: none !important; }
  .nav-rail .nav-link { justify-content: space-between; padding: 14px clamp(20px, 5vw, 56px) !important; font-size: 12.5px !important; border-top: 1px solid var(--border-mobile); }
  .nav-rail .nav-dash { width: 20px !important; }
  .mark {
    z-index: 6 !important; right: 0; border-bottom: 1px solid var(--border-soft); align-items: center !important;
    padding: 0 clamp(20px, 5vw, 56px) !important; height: 58px; gap: 10px !important; background: var(--nav-bg-mobile) !important;
  }
  .mark .rule { height: 30px !important; margin-top: 0 !important; }
  .mark-link { gap: 4px !important; }
  .mark-name { font-size: 13px !important; }
  .mark-role { font-size: 9.5px !important; line-height: 1.35 !important; letter-spacing: 0.05em !important; }
  .hero { padding-top: 120px !important; }
}
@media (max-width: 700px) {
  .hero-bleed { width: 100% !important; margin-left: 0 !important; justify-content: flex-start !important; }
  .hero-block { width: 100% !important; }
  .hero h1 { white-space: normal !important; font-size: clamp(40px, 13vw, 78px) !important; margin-left: -0.045em !important; }
  .hero-line { white-space: normal !important; font-size: 12px !important; letter-spacing: 0.13em !important; }
}