/* FMI — instrument panel system
   gunmetal-olive field / sodium-amber indicator / azimuth signature
   -------------------------------------------------------------- */

:root{
  --field:#151d1b;
  --field-2:#1b2622;
  --panel:#202f2a;
  --panel-2:#26362f;
  --line:#324139;
  --line-2:#41564c;
  --bone:#e4dfcf;
  --bone-2:#aab0a4;
  --dim:#7b837a;
  --amber:#e6a83a;
  --amber-2:#c58c2a;
  --flag:#b8462e;

  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --maxw:1140px;
  --pad:clamp(1.25rem,4.5vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--field);
  color:var(--bone);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.02rem,.55vw + .92rem,1.16rem);
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* faint printed-panel grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

::selection{background:var(--amber);color:var(--field)}

a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.02em}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.skip{
  position:absolute;left:-999px;top:0;z-index:40;
  background:var(--amber);color:var(--field);
  font-family:var(--mono);font-size:.8rem;padding:.5rem .9rem;
}
.skip:focus{left:0}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

/* ---- telemetry strip ---------------------------------------- */
.telemetry{
  border-bottom:1px solid var(--line);
  background:var(--field-2);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-2);
}
.telemetry .wrap{
  display:flex;justify-content:space-between;gap:1rem;
  padding-block:.55rem;
}
.telemetry .t-right{color:var(--amber);white-space:nowrap}

/* ---- masthead ----------------------------------------------- */
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem 2rem;flex-wrap:wrap;
  padding-block:1.15rem;
}
.masthead{border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--bone)}
.brand-mark{color:var(--bone);flex:0 0 auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-family:var(--display);font-weight:900;font-size:1.42rem;
  letter-spacing:.02em;
}
.brand-sub{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bone-2);margin-top:.28rem;
}

.nav{display:flex;flex-wrap:wrap;gap:.15rem 1.35rem;font-family:var(--mono)}
.nav a{
  text-decoration:none;color:var(--bone-2);
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  padding-block:.2rem;position:relative;transition:color .15s ease;
}
.nav a:hover{color:var(--bone)}
.nav a.is-active{color:var(--amber)}
.nav a.is-active::before{content:"▸ ";color:var(--amber)}

/* ---- generic section rhythm --------------------------------- */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--tight{padding-block:clamp(2.5rem,6vw,4.5rem)}
.divider{border:0;border-top:1px solid var(--line);margin:0}

.kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--amber-2)}

.lede{
  font-size:clamp(1.14rem,1vw + 1rem,1.4rem);
  color:var(--bone);max-width:40ch;
}
.muted{color:var(--bone-2)}

/* ---- hero --------------------------------------------------- */
.hero .wrap{
  display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding-block:clamp(3.2rem,7vw,6rem);
}
.hero h1{
  font-size:clamp(2.5rem,6vw,4.7rem);
  font-weight:900;
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.lede{margin-top:1.6rem}
.hero .cues{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.4rem 2rem}

.cue{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--bone);
  border-bottom:1px solid var(--line-2);padding-bottom:.35rem;
  transition:border-color .18s ease,color .18s ease;
}
.cue::after{content:" →";color:var(--amber)}
.cue:hover{color:var(--amber);border-color:var(--amber)}

/* instrument */
.instrument{width:min(100%,340px);margin-inline:auto}
.instrument figcaption{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-2);text-align:center;
  margin-top:1.1rem;line-height:1.6;
}
.needle{transform-box:view-box;transform-origin:150px 150px;transform:rotate(47deg)}
@media (prefers-reduced-motion:no-preference){
  .needle{animation:settle 1.7s cubic-bezier(.16,.84,.28,1) both}
  @keyframes settle{
    0%{transform:rotate(9deg)}
    68%{transform:rotate(51deg)}
    100%{transform:rotate(47deg)}
  }
}

/* ---- readout blocks (is / isn't, data) ---------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.readout{
  border:1px solid var(--line);
  background:var(--field-2);
  padding:clamp(1.4rem,2.4vw,2rem);
  position:relative;
}
.readout .tag{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-2);
  display:block;margin-bottom:1rem;
}
.readout.is .tag{color:var(--amber)}
.readout.isnt .tag{color:var(--flag)}
.readout ul{margin:0;padding:0;list-style:none}
.readout li{
  padding-left:1.4rem;position:relative;margin-block:.55rem;
  color:var(--bone);
}
.readout li::before{
  content:"—";position:absolute;left:0;color:var(--line-2);
}
.readout.is li::before{content:"+";color:var(--amber)}
.readout.isnt li::before{content:"×";color:var(--flag)}

/* strip of constraint data */
.data-strip{
  border-block:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.data-strip .cell{
  padding:1.6rem clamp(1rem,2vw,1.5rem);
  border-left:1px solid var(--line);
}
.data-strip .cell:first-child{border-left:0}
.data-strip .num{
  font-family:var(--display);font-weight:800;font-size:1.9rem;
  color:var(--amber);line-height:1;
}
.data-strip .cap{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-2);margin-top:.65rem;
  line-height:1.5;
}

/* pulled quote */
.quote{
  border-left:2px solid var(--amber);
  padding:.4rem 0 .4rem 1.6rem;
  font-family:var(--serif);font-size:clamp(1.2rem,1.4vw + 1rem,1.7rem);
  font-style:italic;color:var(--bone);max-width:44ch;
}
.quote cite{
  display:block;margin-top:1rem;font-style:normal;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-2);
}

/* ---- prose (content pages) ---------------------------------- */
.head{max-width:52ch}
.head h1{font-size:clamp(2.1rem,4.4vw,3.4rem);margin-bottom:1.3rem}
.prose{max-width:60ch}
.prose h2{
  font-size:clamp(1.35rem,2vw,1.75rem);margin-top:2.8rem;margin-bottom:.9rem;
}
.prose p{margin-block:1.05rem}
.prose p+p{margin-top:1.05rem}
.prose strong{color:var(--bone);font-weight:600}
.prose a{color:var(--amber);text-underline-offset:3px}

.two-col{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
}
.two-col .aside{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-2);line-height:1.9;
  border-top:1px solid var(--line);padding-top:1.2rem;
}

/* ---- method phases ------------------------------------------ */
.phase{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.6rem);
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line);
}
.phase:last-of-type{border-bottom:1px solid var(--line)}
.phase .idx{
  font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);
  color:var(--line-2);line-height:.9;
}
.phase h3{font-size:clamp(1.3rem,2.2vw,1.85rem);margin-bottom:.4rem}
.phase .label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);margin-bottom:1rem;
}
.phase p{margin:0;max-width:58ch;color:var(--bone)}

/* ---- field notes -------------------------------------------- */
.note{
  border-top:1px solid var(--line);
  padding-block:clamp(2rem,4vw,2.8rem);
}
.note:last-child{border-bottom:1px solid var(--line)}
.note .meta{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-2);
  display:flex;gap:1.2rem;margin-bottom:1rem;flex-wrap:wrap;
}
.note .meta .n{color:var(--amber)}
.note h3{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:.8rem}
.note p{margin:0;max-width:64ch;color:var(--bone)}

/* ---- contact ------------------------------------------------ */
.mailto{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,4vw,2.6rem);
  color:var(--amber);text-decoration:none;
  display:inline-block;border-bottom:2px solid transparent;
  transition:border-color .18s ease;word-break:break-word;
}
.mailto:hover{border-color:var(--amber)}

/* ---- footer ------------------------------------------------- */
.footer{border-top:1px solid var(--line);background:var(--field-2);margin-top:2rem}
.foot-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem;
  padding-block:clamp(2.4rem,5vw,3.6rem);
}
.foot-brand .brand-name{font-size:1.6rem}
.foot-tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--bone-2);margin:.7rem 0 0;
}
.foot-nav{display:flex;flex-direction:column;gap:.5rem}
.foot-nav a{
  text-decoration:none;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);
  transition:color .15s ease;
}
.foot-nav a:hover{color:var(--amber)}
.foot-meta{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--bone-2);line-height:1.9;text-align:right;
}
.foot-strip{
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:.9rem;
}
.foot-strip span:nth-child(2){color:var(--amber-2)}

/* ---- responsive --------------------------------------------- */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .instrument{order:-1;width:min(74%,300px)}
  .split{grid-template-columns:1fr}
  .data-strip{grid-template-columns:1fr 1fr}
  .data-strip .cell:nth-child(3){border-left:0}
  .two-col{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:1.6rem}
  .foot-meta{text-align:left}
}
@media (max-width:460px){
  .telemetry .t-left{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .data-strip{grid-template-columns:1fr}
  .data-strip .cell{border-left:0;border-top:1px solid var(--line)}
  .data-strip .cell:first-child{border-top:0}
  .phase{grid-template-columns:1fr;gap:.6rem}
}