@font-face {
  font-family: Archivo;
  src: url("assets/archivo.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/jetbrains-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #1b201b;
  --fg: #eef1e7;
  --muted: #acb0a6;
  --green: #7fb644;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --quick: 160ms;
  --standard: 320ms;
  --slow: 560ms;
  font-family: Archivo, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

* { box-sizing: border-box; }
body {
  display: flow-root;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse at 85% 10%, #b5bda015, transparent 48%),
    radial-gradient(ellipse at 12% 72%, #7fb64412, transparent 55%),
    var(--bg);
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }
svg { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, p, dl, dd { margin: 0; }
::selection { background: var(--green); color: var(--bg); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 14px 20px; background: var(--fg); color: var(--bg); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.bio {
  position: relative;
  width: min(100%, 600px);
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  container-type: inline-size;
  isolation: isolate;
  background:
    conic-gradient(from 190deg at 88% -8%, transparent 0deg, #eef1e70a 12deg, #eef1e705 24deg, transparent 38deg),
    radial-gradient(ellipse at 90% 12%, #c5ceae12, transparent 36%),
    radial-gradient(ellipse at 0% 72%, #7fb64416, transparent 55%);
}

/* Same quiet dotted field and film grain used in the main landing page. */
.bio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(#dce6cd24 .7px, transparent 1px) 0 0 / 24px 24px;
  mask-image: radial-gradient(ellipse at 65% 58%, #000 5%, transparent 72%);
}

.bio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 81cqw;
  padding: 17.2cqw 4cqw 4.5cqw 5.9cqw;
}
.hero-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 95% 20%, #c5ceae12, transparent 65%), var(--bg);
}
.chair {
  position: absolute;
  width: 135%;
  height: auto;
  top: 8cqw;
  left: 5%;
  filter: grayscale(1) brightness(.78);
  mix-blend-mode: screen;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 75%, transparent 100%);
}
.lamp-light { position: absolute; width: 24cqw; height: 24cqw; right: 2cqw; top: 9cqw; border-radius: 50%; background: radial-gradient(circle, #e1e8d91c, transparent 68%); }
.portrait { position: absolute; width: 58%; height: auto; left: 44%; top: 7.4cqw; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #1b201b1a 30%, transparent 68%), linear-gradient(0deg, #1b201b33, transparent 18%); }
.hero-shade::after { content: ""; position: absolute; left: 25cqw; top: 36cqw; width: 36cqw; height: 14cqw; background: radial-gradient(ellipse, #0a0b09a6 10%, #0a0b0966 45%, transparent 72%); filter: blur(7px); }
.header { position: absolute; top: 4.1cqw; left: 5.8cqw; right: 4.2cqw; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.logo { width: 22cqw; height: auto; }
.hero-copy { position: relative; }
.eyebrow { display: flex; align-items: center; gap: 2.5cqw; font-family: "JetBrains Mono", monospace; font-size: max(10px, 2.1cqw); font-weight: 400; line-height: 1.4; letter-spacing: .065em; color: var(--muted); }
.eyebrow::before { content: ""; flex: 0 0 2.9cqw; height: 2px; background: var(--green); }
h1 { margin-top: 2.3cqw; font-size: 9.1cqw; font-weight: 660; font-stretch: 88%; line-height: .91; letter-spacing: -.025em; }
h1 span { color: var(--green); white-space: nowrap; text-shadow: 0 1px 2px #0a0b09, 0 0 10px #0a0b0980; }
.hero-description {
  width: 42cqw;
  margin-top: 2.1cqw;
  font-size: max(14px, 3.1cqw);
  font-stretch: 100%;
  line-height: 1.42;
  letter-spacing: .005em;
  color: #d5d8ce;
}
.signature {
  width: 38cqw;
  margin-top: 2.5cqw;
  color: #e0e3d9;
  font-size: max(12px, 2.6cqw);
  font-stretch: 100%;
  line-height: 1.45;
  letter-spacing: .01em;
}
.signature-name { display: block; font-weight: 550; }
.signature-company { display: block; color: #bdc3b5; }
.signature::before { content: ""; display: block; width: 5.8cqw; height: 1px; margin-bottom: 1.8cqw; background: #7e837773; }

.content { padding-inline: 4.2cqw; }
.interactive { touch-action: manipulation; }
.contact {
  display: flex;
  align-items: center;
  gap: 3.2cqw;
  min-height: 17cqw;
  padding: 3.5cqw 4.1cqw;
  position: relative;
  overflow: hidden;
  border-radius: 1.9cqw;
  background: var(--green);
  color: #0a0e07;
  transition: background var(--standard) var(--ease), transform var(--quick) var(--ease), box-shadow var(--standard) var(--ease);
}
.contact:focus-visible { outline-color: var(--fg); }
.contact::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 25%, #ffffff24 45%, transparent 65%); transform: translateX(-110%); }
.contact-icon { flex: 0 0 9.8cqw; width: 9.8cqw; height: 9.8cqw; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: #0a0e07; }
.contact-icon svg { width: 5.3cqw; height: 5.3cqw; transition: transform var(--standard) var(--ease); }
.contact-copy { flex: 1; min-width: 0; display: grid; gap: .9cqw; position: relative; }
.contact-copy::before { content: ""; position: absolute; left: -1.7cqw; top: .6cqw; bottom: .6cqw; width: 1px; background: #1a291b40; }
.contact-copy strong { font-size: max(15px, 4.2cqw); line-height: 1.1; font-stretch: 90%; font-weight: 700; letter-spacing: -.015em; }
.contact-copy > span { font-size: max(12px, 3.05cqw); line-height: 1.3; font-stretch: 100%; }
.arrow { flex: 0 0 auto; width: 4.6cqw; height: 4.6cqw; stroke-width: 2.4; transition: transform var(--standard) var(--ease); }
.contact .arrow { margin-left: .3cqw; }

.proof { display: grid; grid-template-columns: 1fr 1fr; padding-block: 3.3cqw 4.3cqw; text-align: center; }
.proof > div { display: flex; flex-direction: column; gap: .25cqw; }
.proof > div + div { border-left: 1px solid #73776d; }
.proof dt { font-size: 3.75cqw; font-weight: 650; line-height: 1.1; }
.proof dd { font-size: max(11px, 2.5cqw); font-stretch: 100%; line-height: 1.5; color: var(--muted); }
.link-list { display: grid; gap: 2.05cqw; }
.link-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5.4cqw;
  min-height: 15.8cqw;
  padding: 2.25cqw 4.2cqw;
  border: 1px solid #dce6cd38;
  border-radius: 2cqw;
  background: #333c2e40;
  box-shadow: inset 0 1px 0 #f3f6ec08, 0 8px 24px -16px #080b0659;
  backdrop-filter: blur(7px);
  overflow: hidden;
  transition: border-color var(--standard) var(--ease), background var(--standard) var(--ease), transform var(--quick) var(--ease), box-shadow var(--standard) var(--ease);
}
.link-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(170px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #7fb64414, transparent 75%); transition: opacity var(--standard) var(--ease); }
.card-icon { flex: 0 0 11.3cqw; display: grid; place-items: center; width: 11.3cqw; height: 11.3cqw; border: 1px solid #dce6cd45; border-radius: 2.2cqw; background: #1b201b40; transition: border-color var(--standard) var(--ease), background var(--standard) var(--ease); }
.card-icon svg { width: 8.7cqw; height: 8.7cqw; stroke-width: 2.8; }
.card-copy { flex: 1; min-width: 0; display: grid; gap: .7cqw; }
.card-copy strong { font-size: max(15px, 3.85cqw); font-stretch: 90%; font-weight: 650; line-height: 1.15; letter-spacing: -.015em; }
.card-copy > span { font-size: max(12px, 2.85cqw); font-stretch: 100%; line-height: 1.35; color: var(--muted); }
.method-icon .endpoint { fill: var(--green); stroke: #a1cd74; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.results-icon .bar { fill: var(--fg); stroke: none; transform-box: fill-box; transform-origin: center bottom; }
.results-icon .bar-three, .results-icon .chart-dot, .sites-icon .window-dot { fill: var(--green); stroke: none; }
.sites-icon .window-line { stroke-width: 2; stroke: var(--green); stroke-dasharray: 24; stroke-dashoffset: 24; opacity: 0; transition: stroke-dashoffset var(--standard) var(--ease), opacity var(--standard) var(--ease); }

.social { display: flex; align-items: center; gap: 3.8cqw; min-height: max(44px, 9.2cqw); margin-top: 2.4cqw; padding: 2.1cqw 2cqw; border-block: 1px solid #666c5f; transition: color var(--standard) var(--ease), transform var(--quick) var(--ease); }
.instagram-icon { flex: 0 0 auto; width: 5.5cqw; height: 5.5cqw; stroke-width: 2.1; transition: transform var(--standard) var(--ease); }
.social span { flex: 1; font-size: max(13px, 2.9cqw); font-stretch: 95%; font-weight: 550; }
.social .arrow { width: 3.5cqw; height: 3.5cqw; }
.footer { padding: 2.9cqw 0 3.8cqw; text-align: center; }
.footer p { font-size: max(11px, 2.25cqw); font-stretch: 100%; font-weight: 550; line-height: 1.4; }
.footer span { display: block; margin-top: .2cqw; font-size: max(10px, 2.1cqw); font-stretch: 100%; line-height: 1.5; color: var(--muted); }

/* Every enhancement also has a keyboard equivalent. */
.interactive:active { transform: scale(.987); transition-duration: 120ms; }
.interactive:focus-visible .arrow { transform: translate(2px, -2px); }
.link-card:focus-visible { border-color: var(--green); background: #39492ec9; }
.link-card:focus-visible .card-icon { border-color: var(--green); }
.contact:focus-visible { background: #90c655; }
.social:focus-visible { color: var(--green); }

@media (hover: hover) and (pointer: fine) {
  .contact:hover { background: #90c655; box-shadow: 0 5px 24px #7fb64412; }
  .contact:hover::after { animation: sheen 700ms var(--ease) both; }
  .interactive:hover .arrow { transform: translate(3px, -3px); }
  .contact:hover .contact-icon svg { transform: rotate(-7deg) scale(1.06); }
  .link-card:hover { border-color: #91aa78; background: #39492e99; }
  .link-card:hover::before { opacity: 1; }
  .link-card:hover .card-icon { border-color: var(--green); background: #7fb64408; }
  .social:hover { color: var(--green); }
  .social:hover .instagram-icon { transform: rotate(-5deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: enter 650ms var(--ease) both; }
  .portrait { animation: portrait-enter 850ms var(--ease) both; }
  .header { animation: enter 500ms var(--ease) both; }
  .contact { animation: enter 600ms 100ms var(--ease) backwards; }
  .link-card:is(:hover, :focus-visible) .endpoint { animation: endpoint 600ms var(--ease); }
  .link-card:is(:hover, :focus-visible) .route { animation: route 650ms var(--ease); }
  .link-card:is(:hover, :focus-visible) .bar { animation: grow 500ms var(--ease); }
  .link-card:is(:hover, :focus-visible) .bar-two { animation-delay: 60ms; }
  .link-card:is(:hover, :focus-visible) .bar-three { animation-delay: 120ms; }
  .link-card:is(:hover, :focus-visible) .window-line { opacity: 1; stroke-dashoffset: 0; }
  [data-reveal].waiting { opacity: 0; transform: translateY(12px); }
  [data-reveal].revealed { animation: enter 520ms var(--ease) both; }
}

@keyframes enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes portrait-enter { from { opacity: 0; transform: translateY(6px) scale(1.015); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sheen { to { transform: translateX(110%); } }
@keyframes endpoint { 40% { transform: scale(1.2); } }
@keyframes route { from { stroke-dasharray: 75; stroke-dashoffset: 75; } to { stroke-dasharray: 75; stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scaleY(.5); } to { transform: scaleY(1); } }

@media (min-width: 720px) {
  .bio { margin-block: 24px; min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px); }
}

@media (max-width: 374px) {
  .portrait { left: 46%; }
  .card-copy > span { font-stretch: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal].waiting { opacity: 1; transform: none; }
  .interactive:active, .interactive:is(:hover, :focus-visible) .arrow,
  .contact:hover .contact-icon svg, .social:hover .instagram-icon { transform: none; }
}