body{
  background:var(--void);
  color:var(--paper);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}

/* Focus targets (views, project articles) shouldn't paint a ring on the
   whole container when the router moves focus into them. */
[tabindex="-1"]:focus{ outline:none; }
.project{ scroll-margin-top:88px; }

a{ color:var(--brass-bright); transition:color .2s ease; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--signal-blue); outline-offset:3px;
}

code{ font-family:'IBM Plex Mono', monospace; font-size:0.9em; color:var(--brass-bright); }

/* ---------- SKIP LINK ---------- */
.skip-link{
  position:absolute; left:16px; top:-60px;
  background:var(--brass-bright); color:var(--void);
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em;
  padding:10px 16px; z-index:200; text-decoration:none; border-radius:2px;
}
.skip-link:focus{ top:16px; }

/* ---------- PERSISTENT CORNER LINKS ---------- */
.corner-links{
  position:fixed; top:0; right:0; z-index:100;
  display:flex;
  background:rgba(10,10,12,0.9);
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);
}
.corner-links a{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--paper-dim);
  text-decoration:none;
  padding:16px 18px;
  border-left:1px solid var(--line);
  white-space:nowrap;
  transition:color .2s ease;
}
.corner-links a:first-child{ border-left:none; }
.corner-links a:hover, .corner-links a:focus-visible{ color:var(--brass-bright); }

/* ---------- EYEBROW / LABEL ---------- */
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--brass-bright);
  margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:16px; height:1px; background:var(--brass-bright); }

/* ---------- SECTION LABEL / DIVIDER ---------- */
.section-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--paper-dim);
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  margin-bottom:40px;
  display:flex; justify-content:space-between; gap:16px;
}
h2{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(26px,4vw,34px); color:var(--paper); }
.section-label h2{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--paper-dim);
}
.section-intro{
  color:var(--paper-dim); font-size:16px; max-width:60ch; margin:-24px 0 36px;
}
.bench-return{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--paper-dim); text-decoration:none; white-space:nowrap;
  transition:color .2s ease;
}
.bench-return:hover, .bench-return:focus-visible{ color:var(--ember-bright); }

.flag{
  display:block; margin-top:20px; padding:12px 16px;
  background:rgba(232,165,75,0.08); border-left:2px solid var(--brass-bright);
  color:var(--paper-dim); font-family:'IBM Plex Mono', monospace; font-size:12px; line-height:1.6;
}

/* ---------- AMBIENT LIFE (see js/ambient.js) ---------- */
/* Fixed to the viewport, not the page — sits behind all real content.
   z-index:0 (not a negative value) deliberately: it's inserted as body's
   first child, so plain DOM order already keeps every later, real element
   painting on top of it; a negative z-index here would repeat the same
   escape-the-stacking-context bug the spine line had against body's
   opaque background. */
.ambient{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.ambient span{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,165,75,0.5), transparent 70%);
  opacity:0.22;
  animation-name:drift; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate;
}
@keyframes drift{
  from{ transform:translate(0,0); }
  to{ transform:translate(var(--dx,20px), var(--dy,-40px)); }
}