@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#10262b;
  --paper:#f3efe4;
  --paper-dim:#e9e2cd;
  --water:#1f6f78;
  --forest:#2f5233;
  --savanna:#7c8f4a;
  --shrub:#a98c3f;
  --soil:#b9794a;
  --text:#1c1c1a;
  --text-soft:#4d5652;
  --line:rgba(16,38,43,.14);
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3{
  font-family:'Spectral',serif;
  font-weight:600;
  margin:0 0 .4em;
  color:var(--ink);
}
h1{font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.08; font-weight:500;}
h2{font-size:1.7rem;}
h3{font-size:1.15rem;}
p{margin:0 0 1em; max-width:62ch; color:var(--text-soft);}
a{color:inherit;}
img{max-width:100%;display:block;}

.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.02em;}

/* ---------- layout shell ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.logo{
  font-family:'Spectral',serif; font-weight:600; font-size:1.05rem;
  text-decoration:none; color:var(--ink); letter-spacing:.01em;
}
.logo b{font-weight:600;}
nav.primary{display:flex; gap:26px; flex-wrap:wrap;}
nav.primary a{
  text-decoration:none; font-size:.92rem; color:var(--text-soft);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
nav.primary a:hover, nav.primary a.active{
  color:var(--ink); border-color:var(--water);
}

/* ---------- coordinate strip ---------- */
.coord{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  color:var(--text-soft); letter-spacing:.04em;
  border-top:1px solid var(--line);
  padding:8px 0; opacity:.85;
}

/* ---------- ticker ---------- */
.ticker{
  background:var(--ink); color:var(--paper);
  overflow:hidden; white-space:nowrap; padding:9px 0;
}
.ticker-track{display:inline-block; padding-left:100%; animation:scroll 26s linear infinite;}
.ticker-track span{margin-right:2.5em; font-size:.82rem; font-family:'IBM Plex Mono',monospace; letter-spacing:.03em;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none; padding-left:0;} }

/* ---------- hero ---------- */
.hero{padding:70px 0 50px; border-bottom:1px solid var(--line);}
.hero-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:56px; align-items:center;}
.hero-photo{
  aspect-ratio:4/5; background:var(--paper-dim); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-soft); font-size:.85rem; text-align:center; padding:20px;
  overflow:hidden;
}
.hero-photo img{width:100%; height:100%; object-fit:cover;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--water);
  letter-spacing:.03em; margin-bottom:14px;
}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:var(--radius); text-decoration:none;
  font-size:.9rem; font-weight:500; border:1px solid var(--ink);
}
.btn.solid{background:var(--ink); color:var(--paper);}
.btn.solid:hover{background:var(--water); border-color:var(--water);}
.btn.ghost{background:transparent; color:var(--ink);}
.btn.ghost:hover{border-color:var(--water); color:var(--water);}
.social-row{display:flex; gap:16px; margin-top:22px; font-size:.85rem;}
.social-row a{text-decoration:none; color:var(--text-soft); border-bottom:1px solid var(--line);}
.social-row a:hover{color:var(--water); border-color:var(--water);}

/* ---------- legend chips (land-cover palette used functionally) ---------- */
.legend{display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 0;}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.76rem; font-family:'IBM Plex Mono',monospace; color:var(--text-soft);
}
.chip i{width:10px; height:10px; display:inline-block; border-radius:1px;}
.chip.eau i{background:var(--water);}
.chip.foret i{background:var(--forest);}
.chip.savane-a i{background:var(--savanna);}
.chip.savane-b i{background:var(--shrub);}
.chip.sol i{background:var(--soil);}

/* ---------- tool strip ---------- */
.tools{padding:26px 0; border-bottom:1px solid var(--line); display:flex; gap:26px; flex-wrap:wrap;}
.tools span{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--text-soft);
  padding:5px 0; border-bottom:1px dashed var(--line);
}

/* ---------- sections ---------- */
section{padding:56px 0;}
section.bordered{border-bottom:1px solid var(--line);}
.section-head{display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:32px; flex-wrap:wrap;}
.section-head a.view-all{font-size:.86rem; text-decoration:none; color:var(--water); border-bottom:1px solid var(--water);}

/* ---------- project cards ---------- */
.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.card{
  border:1px solid var(--line); padding:22px; background:var(--paper);
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--text);
  transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--water);}
.card .tag{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--water);}
.card .stat{font-family:'Spectral',serif; font-size:1.5rem; color:var(--ink); font-weight:600;}
.card .place{font-size:.8rem; color:var(--text-soft); margin-top:auto; border-top:1px solid var(--line); padding-top:10px;}
.card.soon{opacity:.6;}
.card .status{font-size:.72rem; font-family:'IBM Plex Mono',monospace; color:var(--soil);}

/* ---------- timeline ---------- */
.timeline{border-left:1px solid var(--line); padding-left:26px; display:flex; flex-direction:column; gap:30px;}
.timeline .item{position:relative;}
.timeline .item::before{
  content:''; position:absolute; left:-31px; top:6px; width:9px; height:9px;
  background:var(--water); border-radius:50%;
}
.timeline .year{font-family:'IBM Plex Mono',monospace; font-size:.76rem; color:var(--water); margin-bottom:4px; display:block;}

/* ---------- skills grid ---------- */
.skills-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.skill{border:1px solid var(--line); padding:16px 18px;}
.skill h3{font-size:.95rem; margin-bottom:4px;}
.skill p{font-size:.85rem; margin:0;}

/* ---------- certs ---------- */
.certs{display:flex; flex-direction:column;}
.certs .cert{
  display:flex; justify-content:space-between; gap:20px; padding:16px 0;
  border-bottom:1px solid var(--line); align-items:baseline;
}
.certs .cert .date{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--text-soft); white-space:nowrap;}

/* ---------- resource list ---------- */
.res-list{display:flex; flex-direction:column;}
.res-item{
  display:grid; grid-template-columns:150px 1fr auto; gap:24px; align-items:center;
  padding:20px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--text);
  transition:background .15s;
}
.res-list .res-item:last-child{border-bottom:1px solid var(--line);}
.res-item.is-live:hover{background:var(--paper-dim);}
.res-item .kind{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--water); letter-spacing:.02em;}
.res-item .kind .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--water); margin-right:6px;}
.res-item h4{font-family:'Spectral',serif; font-size:1.05rem; font-weight:600; margin-bottom:4px;}
.res-item .sub{font-size:.85rem; color:var(--text-soft); margin:0;}
.res-link-arrow{
  font-family:'IBM Plex Mono',monospace; font-size:1.1rem; color:var(--water);
  transition:transform .15s ease; white-space:nowrap;
}
.res-item.is-live:hover .res-link-arrow{transform:translateX(4px);}
.badge-soon{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--text-soft);
  border:1px solid var(--line); padding:4px 10px; white-space:nowrap; border-radius:var(--radius);
}
.badge-soon .eta{opacity:.75;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:34px 0; font-size:.8rem; color:var(--text-soft);}
.footer-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.field label{font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--text-soft);}
.field input, .field textarea{
  border:1px solid var(--line); background:transparent; padding:10px 12px;
  font-family:'IBM Plex Sans',sans-serif; font-size:.95rem; color:var(--text); border-radius:var(--radius);
}
.field textarea{resize:vertical; min-height:110px;}
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.contact-list li{border-bottom:1px solid var(--line); padding-bottom:14px;}
.contact-list .label{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--water); display:block; margin-bottom:4px;}

/* ---------- project detail: hero stat row ---------- */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:32px 0;}
.stat-box{background:var(--paper); padding:22px 20px;}
.stat-box .num{font-family:'Spectral',serif; font-weight:600; font-size:1.7rem; color:var(--ink);}
.stat-box .label{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--text-soft); letter-spacing:.03em; margin-top:6px;}

/* ---------- project detail: status tag ---------- */
.status-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.04em;
  color:var(--text-soft); border:1px solid var(--line); padding:5px 12px; margin-bottom:14px;
}
.status-tag .dot{width:6px; height:6px; border-radius:50%; background:var(--soil);}

/* ---------- project detail: methodology steps ---------- */
.methodo-steps{display:flex; flex-direction:column; margin-top:18px;}
.step{display:grid; grid-template-columns:44px 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--line);}
.methodo-steps .step:last-child{border-bottom:1px solid var(--line);}
.step .idx{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--water);}
.step h4{font-family:'Spectral',serif; font-size:1.02rem; font-weight:600; margin-bottom:6px; color:var(--ink);}
.step p{color:var(--text-soft); font-size:.9rem; margin:0; max-width:60ch;}

/* ---------- project detail: callout ---------- */
.callout{border-left:2px solid var(--water); padding:16px 20px; margin:24px 0; max-width:64ch; background:var(--paper-dim);}
.callout p{color:var(--ink); margin:0; font-size:.92rem;}

/* ---------- project detail: figure placeholders ---------- */
figure.shot{margin:24px 0;}
.fig-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.fig-grid.three{grid-template-columns:1fr 1fr 1fr;}
.shot-placeholder{
  aspect-ratio:4/3; background:var(--paper-dim); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--text-soft); font-family:'IBM Plex Mono',monospace; font-size:.72rem; padding:16px;
}
figure.shot img{width:100%; display:block; border:1px solid var(--line);}
figure.shot figcaption{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--text-soft); margin-top:8px; letter-spacing:.02em;}

/* ---------- project detail: mini table ---------- */
.mini-table{width:100%; border-collapse:collapse; margin-top:18px; font-size:.87rem;}
.mini-table th, .mini-table td{padding:9px 10px; border-top:1px solid var(--line); text-align:left;}
.mini-table th{font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.04em; color:var(--text-soft); text-transform:uppercase; font-weight:500;}
.mini-table td{color:var(--text-soft);}
.mini-table td.num{color:var(--ink); font-family:'IBM Plex Mono',monospace;}
.mini-table tr:last-child td{border-bottom:1px solid var(--line);}

/* ---------- project detail: page block ---------- */
.block{padding:44px 0; border-top:1px solid var(--line);}
.block h2{font-size:1.5rem;}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{order:-1; max-width:220px;}
  .projects-grid{grid-template-columns:1fr;}
  .skills-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  nav.primary{gap:16px;}
  .stat-row{grid-template-columns:1fr;}
  .fig-grid, .fig-grid.three{grid-template-columns:1fr;}
  .step{grid-template-columns:1fr; gap:6px;}
  .res-item{grid-template-columns:1fr; gap:6px;}
}