:root{
  --bg:#1c1712;
  --bg-alt:#221b14;
  --panel:#2a221a;
  --turquoise:#3fa9a0;
  --turquoise-light:#7ed4c9;
  --rust:#c1552c;
  --sun:#e8b23d;
  --sand:#ece0c6;
  --sand-dim:#b7a98c;
  --chrome:#8a8f8c;
  --line:rgba(236,224,198,0.14);
  --radius:2px;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--sand);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,.display{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:0;
  color:var(--sand);
}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.06em;}
a{color:var(--turquoise-light);}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
:focus-visible{outline:2px solid var(--sun); outline-offset:3px;}

/* archived ribbon */
.archived-banner{
  background:var(--rust); color:#fff3ea;
  font-family:'IBM Plex Mono'; font-size:0.78rem; letter-spacing:0.05em;
  text-align:center; padding:9px 16px;
}
.archived-banner strong{text-transform:uppercase;}

/* nav */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(28,23,18,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:'Oswald', sans-serif; font-weight:600; font-size:1.02rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--sand);
}
.brand-badge{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--turquoise-light), var(--turquoise) 60%, #206159 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono'; font-size:11px; color:#0f1a18; font-weight:700;
}
nav.links{display:flex; gap:24px; flex-wrap:wrap;}
nav.links a{
  color:var(--sand-dim); text-decoration:none; font-size:0.82rem;
  letter-spacing:0.05em; text-transform:uppercase; font-family:'IBM Plex Mono';
  transition:color .2s ease;
}
nav.links a:hover, nav.links a.active{color:var(--turquoise-light);}

/* page header */
.page-hero{padding:72px 0 48px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#241c14 0%, #1c1712 100%);}
.eyebrow{
  font-family:'IBM Plex Mono'; font-size:0.76rem; letter-spacing:0.16em;
  color:var(--turquoise-light); text-transform:uppercase; margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--turquoise-light); display:inline-block;}
.page-hero h1{font-size:clamp(2.1rem,5.5vw,3.6rem); max-width:20ch;}
.page-hero p.lede{max-width:60ch; color:var(--sand-dim); margin-top:18px; font-size:1.02rem;}

.btn{
  display:inline-block; padding:12px 22px; text-decoration:none;
  font-family:'IBM Plex Mono'; font-size:0.8rem; letter-spacing:0.06em;
  text-transform:uppercase; border-radius:var(--radius);
  transition:transform .18s ease, background .18s ease;
}
.btn-primary{background:var(--turquoise); color:#0c1f1c;}
.btn-primary:hover{background:var(--turquoise-light); transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line); color:var(--sand);}
.btn-ghost:hover{border-color:var(--turquoise-light); color:var(--turquoise-light); transform:translateY(-2px);}

/* route / mile-marker device */
.route{position:relative; padding-left:64px;}
.route::before{
  content:""; position:absolute; left:22px; top:0; bottom:0; width:2px;
  background:repeating-linear-gradient(to bottom, var(--turquoise) 0 10px, transparent 10px 20px);
}
.marker{position:relative; margin-bottom:6px;}
.marker::before{
  content:attr(data-mile); position:absolute; left:-64px; top:2px; width:44px; height:44px;
  background:var(--bg-alt); border:2px solid var(--turquoise); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono'; font-size:0.7rem; color:var(--turquoise-light);
}

section{padding:76px 0;}
.section-head{margin-bottom:36px; max-width:62ch;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:12px;}
.section-head p{color:var(--sand-dim);}
.section-alt{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{background:var(--bg); padding:26px 24px; transition:background .2s ease;}
.card:hover{background:var(--panel);}
.card .tag{font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--turquoise-light); letter-spacing:0.08em;}
.card h3{font-size:1.1rem; margin-top:8px; margin-bottom:8px; text-transform:none; letter-spacing:0;}
.card p{color:var(--sand-dim); font-size:0.92rem; margin:0;}

.note{
  margin-top:22px; font-family:'IBM Plex Mono'; font-size:0.78rem;
  color:var(--sand-dim); border-left:2px solid var(--chrome); padding-left:14px;
}

.prose p{color:var(--sand-dim); margin:0 0 16px; max-width:66ch;}
.prose a{color:var(--turquoise-light);}

footer{border-top:1px solid var(--line); padding:44px 0 30px; background:var(--bg-alt);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:32px;}
.foot-grid h4{font-family:'IBM Plex Mono'; font-size:0.74rem; color:var(--sand-dim); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:12px;}
.foot-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:9px;}
.foot-grid a{color:var(--sand); text-decoration:none; font-size:0.9rem;}
.foot-grid a:hover{color:var(--turquoise-light);}
.foot-bottom{border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--sand-dim);}

@media (max-width:820px){
  .foot-grid{grid-template-columns:1fr;}
  nav.links{display:none;}
  .route{padding-left:48px;}
  .marker::before{left:-48px; width:36px; height:36px; font-size:0.62rem;}
}