@font-face{
  font-family:'Blade Runner Movie';
  src:url('assets/fonts/BladeRunnerMovie.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Michroma';
  src:url('assets/fonts/Michroma-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/fonts/SpaceGrotesk-Variable.woff2') format('woff2-variations'),
      url('assets/fonts/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#f3ede1;
  --bg-alt:#e9dfcd;
  --paper-line:rgba(20,14,10,0.07);
  --ink:#1b1512;
  --ink-soft:#5c4d42;
  --line:#dccdb4;
  --ledger:#7c2a24;
  --ledger-ink:#f6ece1;
  --brass:#6b4428;
  --card:#faf5ea;
  --heading:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --display:'Blade Runner Movie','Michroma','Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --radius:3px;
  --maxw:960px;
  --fx:0;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#100d0b;
    --bg-alt:#17120e;
    --paper-line:rgba(246,236,225,0.06);
    --ink:#f1e7d9;
    --ink-soft:#b3a08c;
    --line:#302722;
    --ledger:#cc5a4c;
    --ledger-ink:#100d0b;
    --brass:#b9895a;
    --card:#17120e;
    --fx:1;
  }
}
:root[data-theme="dark"]{
  --bg:#100d0b;--bg-alt:#17120e;--paper-line:rgba(246,236,225,0.06);--ink:#f1e7d9;--ink-soft:#b3a08c;--line:#302722;--ledger:#cc5a4c;--ledger-ink:#100d0b;--brass:#b9895a;--card:#17120e;--fx:1;
}
:root[data-theme="light"]{
  --bg:#f3ede1;--bg-alt:#e9dfcd;--paper-line:rgba(20,14,10,0.07);--ink:#1b1512;--ink-soft:#5c4d42;--line:#dccdb4;--ledger:#7c2a24;--ledger-ink:#f6ece1;--brass:#6b4428;--card:#faf5ea;--fx:0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    var(--paper-line) 27px,
    var(--paper-line) 28px
  );
}
img{max-width:100%;display:block;}
a{color:inherit;}
.num, time, .tl-date, .tag{font-family:var(--mono);font-variant-numeric:tabular-nums;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* NAV */
header.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{font-family:var(--heading);font-size:1.05rem;font-weight:700;letter-spacing:.01em;text-decoration:none;}
.brand .brand-mark{color:var(--ledger);}
.navlinks{display:flex;gap:26px;list-style:none;margin:0;padding:0;}
.navlinks a{text-decoration:none;font-size:.82rem;color:var(--ink-soft);transition:color .15s;text-transform:uppercase;letter-spacing:.06em;}
.navlinks a:hover{color:var(--ink);}
.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ledger);color:var(--ledger-ink);
  padding:9px 16px;border-radius:var(--radius);font-size:.78rem;font-weight:700;
  text-decoration:none;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;
}
.navtoggle{display:none;background:none;border:0;color:var(--ink);font-size:1.4rem;cursor:pointer;}

@media (max-width:720px){
  .navlinks{position:fixed;top:60px;left:0;right:0;background:var(--bg);flex-direction:column;padding:20px 24px;border-bottom:1px solid var(--line);gap:16px;display:none;}
  .navlinks.open{display:flex;}
  .navtoggle{display:block;}
  .nav-cta{display:none;}
}

/* HERO */
.hero{padding:80px 0 52px;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  color:var(--ledger);font-weight:700;margin-bottom:16px;
  font-family:var(--mono);
}
.hero h1{
  font-family:var(--display);font-size:clamp(1.7rem,3.8vw,2.6rem);
  line-height:1.32;margin:0 0 22px;font-weight:400;text-wrap:balance;
  letter-spacing:-.01em;
}
.hero p.lead{
  font-size:1.1rem;color:var(--ink-soft);max-width:620px;margin:0 0 32px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px;}
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius);font-size:.85rem;font-weight:700;
  text-decoration:none;border:1px solid transparent;transition:transform .15s,opacity .15s;
  text-transform:uppercase;letter-spacing:.04em;
}
.btn:hover{transform:translateY(-1px);}
.btn::after{
  content:'';position:absolute;top:0;left:-30%;width:16%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(57,255,136,0.7),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.btn:hover::after{animation:btnScan .55s ease-out;}
@keyframes btnScan{
  0%{left:-20%;opacity:calc(var(--fx) * 0.9);}
  100%{left:110%;opacity:0;}
}
.btn-primary{background:var(--ledger);color:var(--ledger-ink);}
.btn-outline{border-color:var(--ink);color:var(--ink);}
.hero-meta{display:flex;flex-wrap:wrap;gap:20px 24px;font-size:.85rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:20px;font-family:var(--mono);}
.hero-meta span{display:flex;align-items:center;gap:7px;}
.hero-meta a{border-bottom:1px solid var(--line);}

/* SECTION */
section{padding:58px 0;border-top:1px solid var(--line);}
.section-head{margin-bottom:34px;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.section-head .eyebrow{margin-bottom:8px;}
.section-head h2{font-family:var(--heading);font-size:1.7rem;margin:0;font-weight:700;text-wrap:balance;}
.section-head p{color:var(--ink-soft);margin:8px 0 0;max-width:520px;font-size:.92rem;}

/* RESUME CARD */
.resume-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;position:relative;
  border-left:3px solid var(--ledger);
}
.resume-card h3{font-family:var(--heading);font-size:1.15rem;margin:0 0 10px;}
.resume-card p{color:var(--ink-soft);margin:0 0 22px;}
.resume-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* TIMELINE / EXPERIENCE — ledger line-items */
.timeline{display:flex;flex-direction:column;}
.tl-item{
  display:grid;grid-template-columns:150px 1fr;gap:24px;
  padding:26px 0;border-top:1px solid var(--line);
}
.tl-item:first-child{border-top:none;}
.tl-date{color:var(--ink-soft);font-size:.78rem;padding-top:3px;line-height:1.5;}
.tl-role{font-weight:700;font-size:1.02rem;margin:0 0 2px;font-family:var(--heading);}
.tl-org{color:var(--ledger);font-weight:700;font-size:.85rem;margin:0 0 12px;text-transform:uppercase;letter-spacing:.03em;}
.tl-item ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:.93rem;}
.tl-item li{margin-bottom:6px;}
@media (max-width:640px){
  .tl-item{grid-template-columns:1fr;gap:6px;}
}

/* GRID CARDS (activities) — field-notebook cards, slight tilt */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;transition:transform .2s;
}
.card:hover{transform:translateY(-2px);}
.card .tag{
  display:inline-block;font-size:.7rem;font-weight:700;
  color:var(--brass);margin-bottom:10px;letter-spacing:.03em;
}
.card h3{margin:0 0 8px;font-size:1rem;font-family:var(--heading);}
.card p{margin:0;color:var(--ink-soft);font-size:.9rem;}

/* SKILLS */
.skill-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.skill-cols h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;color:var(--ink-soft);font-family:var(--mono);}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  background:var(--bg-alt);border:1px solid var(--line);
  padding:7px 13px;border-radius:var(--radius);font-size:.82rem;
}
@media (max-width:640px){.skill-cols{grid-template-columns:1fr;}}

/* EDUCATION */
.edu-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;border-left:3px solid var(--brass);}
.edu-block .school{font-family:var(--heading);font-size:1.25rem;margin:0 0 4px;font-weight:700;}
.edu-block .degree{color:var(--ink-soft);margin:0 0 18px;font-size:.88rem;font-family:var(--mono);}
.coursework{display:flex;flex-wrap:wrap;gap:8px;}

/* CONTACT / FOOTER */
footer{padding:54px 0 40px;border-top:1px solid var(--line);}
.contact-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:36px;}
.contact-row h2{font-family:var(--heading);font-size:1.9rem;margin:0 0 12px;}
.contact-links{display:flex;flex-direction:column;gap:8px;font-size:.95rem;font-family:var(--mono);}
.contact-links a{text-decoration:none;border-bottom:1px solid var(--line);}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--ink-soft);font-size:.78rem;font-family:var(--mono);}

.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---- SUBPAGE HEADER (case studies / blog posts) ---- */
.subhead{padding:44px 0 40px;}
.subhead .back{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.78rem;
  color:var(--ink-soft);text-decoration:none;margin-bottom:22px;text-transform:uppercase;letter-spacing:.05em;
}
.subhead .back:hover{color:var(--ink);}
.subhead h1{font-family:var(--heading);font-size:clamp(2rem,4.2vw,2.9rem);margin:0 0 14px;font-weight:700;text-wrap:balance;}
.meta-row{display:flex;flex-wrap:wrap;gap:22px;font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:16px;margin-top:20px;}
.meta-row strong{color:var(--ink);font-weight:700;}

/* ---- PROSE (essays / blog posts) ---- */
.prose{max-width:680px;}
.prose h2{font-family:var(--heading);font-size:1.4rem;margin:40px 0 14px;font-weight:700;}
.prose h3{font-family:var(--heading);font-size:1.1rem;margin:30px 0 10px;font-weight:700;font-style:italic;color:var(--ink-soft);}
.prose p{margin:0 0 18px;color:var(--ink);}
.prose p.lede{font-size:1.05rem;color:var(--ink-soft);}
.prose a{color:var(--ledger);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;}
.prose a:hover{text-decoration-color:var(--ledger);}
.prose ul{margin:0 0 18px;padding-left:20px;color:var(--ink);}
.prose ul li{margin-bottom:10px;}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--bg-alt);padding:1px 5px;border-radius:2px;}
.data-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.92rem;}
.data-table th,.data-table td{border:1px solid var(--line);padding:9px 14px;text-align:left;}
.data-table th{font-weight:700;background:var(--bg-alt);}
.data-table td:not(:first-child),.data-table th:not(:first-child){font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;}
.fig-card{background:#f7f5ef;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:30px 0;}
.fig-card img{width:100%;display:block;}
.fig-card figcaption{margin-top:12px;color:#5c4d42;}
.post-header{margin:0 0 32px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.post-header img{width:100%;display:block;}
.dual-fig{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0;}
.dual-fig .fig-card{margin:0;}
@media (max-width:640px){.dual-fig{grid-template-columns:1fr;}}
.source-note{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-soft);}
.prose blockquote{
  margin:24px 0;padding:4px 0 4px 20px;border-left:2px solid var(--ledger);
  color:var(--ink-soft);font-style:italic;
}
.prose figure{margin:28px 0;}
.prose figure img{border-radius:var(--radius);border:1px solid var(--line);}
.prose figcaption{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);margin-top:8px;}
.essay-divider{
  display:flex;align-items:center;gap:14px;margin:52px 0 30px;
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--brass);
}
.essay-divider::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---- PHOTO GALLERY ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery a{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .3s;}
.gallery a:hover img{transform:scale(1.04);}
.gallery.wide img{aspect-ratio:3/2;}
@media (max-width:640px){.gallery{grid-template-columns:repeat(2,1fr);}}

/* ---- CASE STUDY / BLOG INDEX CARDS ---- */
.index-list{display:flex;flex-direction:column;}
.index-row{
  display:grid;grid-template-columns:120px 1fr auto;align-items:baseline;gap:20px;
  padding:22px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);
}
.index-row:first-child{border-top:none;}
.index-row .idx-date{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);}
.index-row .idx-title{font-family:var(--heading);font-size:1.1rem;font-weight:700;}
.index-row .idx-title span{display:block;font-family:var(--sans);font-weight:400;font-size:.85rem;color:var(--ink-soft);margin-top:4px;}
.index-row .idx-arrow{font-family:var(--mono);color:var(--ledger);opacity:0;transition:opacity .15s,transform .15s;transform:translateX(-4px);}
.index-row:hover .idx-arrow{opacity:1;transform:none;}
.index-row:hover .idx-title{color:var(--ledger);}
@media (max-width:640px){.index-row{grid-template-columns:1fr;gap:4px;}.idx-arrow{display:none;}}

/* preview cards on homepage linking to subpages */
.preview-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
  transition:transform .2s,border-color .2s;
}
.preview-card:hover{transform:translateY(-3px);border-color:var(--ledger);}
.preview-card .pc-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt);}
.preview-card .pc-img img{width:100%;height:100%;object-fit:cover;}
.preview-card .pc-body{padding:18px 20px;}
.preview-card .tag{color:var(--brass);}
.preview-card h3{margin:8px 0 6px;font-family:var(--heading);font-size:1.05rem;}
.preview-card p{margin:0;color:var(--ink-soft);font-size:.88rem;}

/* ---- CRT / CYBERPUNK AMBIENT FX (dark theme only, via --fx) ---- */
.crt-scanlines{
  position:fixed;inset:0;z-index:35;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.09) 0px,
    rgba(0,0,0,0.09) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity:var(--fx);
  mix-blend-mode:multiply;
  will-change:opacity,filter;
}
.crt-scanlines.flicker{animation:crtFlicker .22s steps(3,end);}
@keyframes crtFlicker{
  0%{opacity:calc(var(--fx) * 1);filter:brightness(1);}
  20%{opacity:calc(var(--fx) * 0.35);filter:brightness(1.4);}
  45%{opacity:calc(var(--fx) * 0.9);filter:brightness(0.9);}
  70%{opacity:calc(var(--fx) * 0.5);filter:brightness(1.2);}
  100%{opacity:calc(var(--fx) * 1);filter:brightness(1);}
}
.glitch-band{
  position:fixed;inset:0;z-index:36;pointer-events:none;
  opacity:var(--fx);
  mix-blend-mode:overlay;
}
.type-caret{
  display:inline-block;width:.5em;height:.85em;margin-left:2px;
  background:currentColor;vertical-align:-0.1em;
  animation:caretBlink 1s steps(1,end) infinite;
}
.type-caret.idle{animation:none;opacity:0;transition:opacity .8s ease;}
@keyframes caretBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .crt-scanlines,.glitch-band{display:none;}
  .type-caret{animation:none;}
}

.count-up{font-variant-numeric:tabular-nums;}

/* ---- View Transitions: native cross-fade between pages ---- */
@view-transition{
  navigation:auto;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:0.32s;
  animation-timing-function:ease;
}