/* ──────────────────────────────────────────────────────────────────────────
   network-engineers.com — style.css
   Single-column landing page. Always dark. Self-hosted fonts.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Self-hosted fonts ──────────────────────────────────────────────────── */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Palette ────────────────────────────────────────────────────────────── */
:root {
  --ink:      #0B0F0E;
  --panel:    #101614;
  --paper:    #EDEBE4;   /* 14.6:1 on --ink */
  --dim:      #7C8C86;   /* 5.2:1 on --panel — terminal prompts */
  --chrome:   #8E9E98;   /* 6.5:1 on --panel — UI chrome */
  --rule:     #3A4642;
  --phosphor: #58C88E;   /* 8.0:1 on --panel */

  --t1: #E8873C;  --t2: #E8873C;
  --t3: #3FB463;  --t4: #4E93E8;
  --t5: #4E93E8;  --t6: #3FB463;
  --t7: #B07A4E;  --t8: #B07A4E;

  --jetbrains: 'JetBrains Mono', 'Courier New', monospace;
  --ibm-plex:  'IBM Plex Mono',  'Courier New', monospace;

  --mini-bar-h: 48px;
  --bot-h:      56px;
  --col-w:      960px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background:         var(--ink);
  color-scheme:       dark;
  scroll-behavior:    smooth;
  scroll-padding-top: calc(var(--mini-bar-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background:    var(--ink);
  color:         var(--paper);
  font-family:   var(--jetbrains);
  font-size:     16px;
  line-height:   1.75;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Content column ─────────────────────────────────────────────────────── */
/*
 * Constrains content to --col-w (960px) while letting the parent background
 * span the full viewport. Used inside masthead, mini-bar, main, and footer.
 */
.page-inner {
  max-width:      var(--col-w);
  margin-inline:  auto;
  padding-inline: 2rem;
}

/* ── Skip link ──────────────────────────────────────────────────────────── */
.skip-link {
  position:        absolute;
  top:             -10rem;
  left:            1rem;
  padding:         0.4rem 0.875rem;
  background:      var(--t1);
  color:           var(--ink);
  font-family:     var(--jetbrains);
  font-size:       0.875rem;
  border-radius:   0 0 4px 4px;
  z-index:         200;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ── Colour utilities ────────────────────────────────────────────────────── */
.t-dim { color: var(--dim); }
.t-wh  { color: var(--paper); }
.t-gr  { color: var(--phosphor); }
.t-ch  { color: var(--chrome); }
.t-t1  { color: var(--t1); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Global links ───────────────────────────────────────────────────────── */
a { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
a:hover         { text-decoration: none; }
a:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; border-radius: 2px; }

/* ── MASTHEAD — full-bleed background, constrained content ──────────────── */
/*
 * --wm is the single token that drives every masthead dimension.
 * At the 36px ceiling: bar ≈ 170px, wordmark 36px, mark ≈ 49px.
 * At the 18px floor (≤562px viewport): bar 96px, wordmark 18px, mark ≈ 24px.
 */
#masthead {
  --wm:          clamp(18px, 3.2vw, 36px);
  font-size:     var(--wm);        /* establishes em reference for all children */
  background:    var(--panel);
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  max-width:       var(--col-w);
  margin-inline:   auto;
  padding-inline:  max(24px, 1.2em);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          max(96px, 4.7em);
}

/* ── Stacked lockup (masthead only) ────────────────────────────────────── */
/*
 * Wordmark: var(--wm) = clamp(18px, 3.2vw, 36px).
 * Cap-height: 0.705em of --wm.
 * Mark: 1.92 × cap = 1.354em. Gap: 0.24 × cap = 0.169em.
 * Mark horizontal centre on the "." in ".com":
 *   "network-engineers" = 17 chars → period centre = 17.5ch.
 *   Mark width = 1.354em × (17.12÷15.92) = 1.456em → half ≈ 0.73em.
 *   margin-left: calc(17.5ch - 0.73em).
 *   viewBox x 3.44–20.56, y 4.44–20.36 (24×24 source, cropped to visible).
 */
.lockup-v {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             0.169em;          /* 0.24 × 0.705em cap */
  text-decoration: none;
  font-family:     var(--jetbrains);
  font-size:       var(--wm);
  line-height:     1;
  flex-shrink:     0;
}

.lockup-mark-v {
  height:      1.354em;               /* 1.92 × 0.705em cap */
  width:       auto;
  display:     block;
  margin-left: calc(17.5ch - 0.73em); /* period centre − mark half-width */
}

.lockup-v:focus-visible {
  outline: 2px solid var(--t1);
  outline-offset: 4px;
  border-radius:  2px;
}

.wm-line { letter-spacing: 0; }

/* ── Masthead right ─────────────────────────────────────────────────────── */
.masthead-right {
  text-align:  right;
  flex-shrink: 0;
  line-height: 1.6;
}

.mh-tagline {
  font-family:    var(--ibm-plex);
  font-size:      max(12px, 0.42em);  /* 0.42 × --wm, min 12px */
  color:          var(--chrome);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mh-status {
  font-family:    var(--ibm-plex);
  font-size:      max(12px, 0.42em);
  color:          var(--phosphor);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space:    nowrap;
}

.mh-cli-link {
  display:         inline-block;
  font-family:     var(--ibm-plex);
  font-size:       max(11px, 0.36em);
  color:           var(--dim);
  text-decoration: none;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  border:          1px solid var(--rule);
  padding:         2px 6px;
  border-radius:   2px;
  margin-top:      0.3em;
}
.mh-cli-link:hover        { color: var(--phosphor); border-color: var(--phosphor); }
.mh-cli-link:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 599px) {
  /* height, padding, and font-size all derived from --wm clamp — no overrides needed */
  .masthead-right { display: none; }
}

/* ── MINI-BAR — full-bleed fixed, appears when masthead scrolls away ─────── */
#mini-bar {
  position:      fixed;
  top: 0; left: 0; right: 0;
  height:        var(--mini-bar-h);
  background:    var(--panel);
  border-bottom: 1px solid var(--rule);
  z-index:       100;
  transform:     translateY(-100%);
  transition:    transform 160ms ease-out;
}

#mini-bar.visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  #mini-bar { transition: none; }
}

.mini-bar-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
}

/* ── Horizontal lockup ──────────────────────────────────────────────────── */
/*
 * Base: 22px. Cap ≈ 15.8px. Mark = 1.62 × cap = 1.1664em. Gap = 0.45em.
 * Overrides: .mini-lockup → 16px, .footer-lockup → 15px.
 */
.lockup-h {
  display:         inline-flex;
  align-items:     center;
  gap:             0.45em;
  text-decoration: none;
  font-family:     var(--jetbrains);
  font-size:       22px;
  line-height:     1;
  white-space:     nowrap;
  flex-shrink:     0;
}

.lockup-mark {
  height:      1.1664em;   /* 1.62 × cap — scales with font-size */
  width:       auto;
  display:     block;
  flex-shrink: 0;
}

.wm-name { color: var(--paper); }
.wm-tld  { color: var(--chrome); }

.lockup-h:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; border-radius: 2px; }

.mini-lockup   { font-size: 16px; }
.footer-lockup { font-size: 15px; }

.mini-bar-status {
  font-family:    var(--ibm-plex);
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--chrome);
  white-space:    nowrap;
}

@media (max-width: 480px) {
  .mini-bar-status { display: none; }
}

/* ── PANES — kept for phase 2 ────────────────────────────────────────────── */
.pane {
  position:      relative;
  background:    var(--panel);
  border:        1px solid var(--rule);
  border-radius: 4px;
  padding:       1.75rem 1.5rem 1.5rem;
}

.pane-title {
  position:    absolute;
  top:         -0.6em;
  left:        1em;
  background:  var(--ink);
  padding:     0 0.5em;
  color:       var(--chrome);
  font-family: var(--jetbrains);
  font-size:   max(12px, 0.8em);
  line-height: 1;
}

/* ── Blinking cursor ────────────────────────────────────────────────────── */
.cursor {
  display:        inline-block;
  width:          0.58em;
  height:         1em;
  background:     var(--t1);
  vertical-align: -0.1em;
  margin-left:    1px;
  animation:      blink 1.1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* ── Section command headings ───────────────────────────────────────────── */
.section-cmd {
  font-size:     inherit;
  font-weight:   400;
  line-height:   inherit;
  color:         var(--paper);
  margin-bottom: 0.5rem;
}

/* ── Config output ──────────────────────────────────────────────────────── */
.config-out {
  font-family: inherit;
  font-size:   inherit;
  line-height: inherit;
  white-space: pre;
  overflow-x:  auto;
  max-width:   100%;
  margin-top:  0;
}

/* ── HERO — bare terminal on --ink ─────────────────────────────────────── */
/*
 * No border, no pane background. Terminal sits directly on page background.
 * min-height: 11 lines × line-height 1.75 at 20px + top/bottom padding.
 * box-sizing: border-box, so padding is inside min-height. Zero CLS. No vh.
 */
.hero-block {
  font-size:      20px;
  line-height:    1.75;
  padding-top:    80px;
  padding-bottom: 72px;
  min-height:     calc(11 * 1.75em + 80px + 72px);
}

/* ── INTRO ──────────────────────────────────────────────────────────────── */
/*
 * Plain English — no terminal chrome. Answers "what is this" before the ask.
 */
.intro-block {
  margin-bottom: 64px;
}

.intro-headline {
  font-family: var(--jetbrains);
  font-size:   28px;
  line-height: 1.3;
  color:       var(--paper);
}

.intro-desc {
  font-family: var(--jetbrains);
  font-size:   21px;
  line-height: 1.6;
  color:       var(--chrome);
  max-width:   68ch;
  margin-top:  20px;
}

/* ── THE ASK — founding-circle CTA ─────────────────────────────────────── */
/*
 * 2px --t1 border. Background: orange at ~4% over --ink so it reads warm.
 * The only orange on the page outside the sticky bar's active state.
 */
.ask-block {
  border:        2px solid var(--t1);
  border-radius: 4px;
  background:    rgba(232, 135, 60, 0.04);
  padding:       40px;
  margin-bottom: 0;
}

.ask-heading {
  font-family:   var(--jetbrains);
  font-size:     22px;
  font-weight:   400;
  line-height:   1.35;
  color:         var(--paper);
  margin-bottom: 1.25rem;
}

.ask-desc {
  font-family:   var(--jetbrains);
  font-size:     18px;
  line-height:   1.75;
  color:         var(--chrome);
  max-width:     70ch;
  margin-bottom: 0.875rem;
}

.ask-status {
  display:     block;
  margin-top:  1rem;
  font-size:   15px;
  color:       var(--dim);
  line-height: 1.5;
}

/* ── Peer button ────────────────────────────────────────────────────────── */
.btn-peer {
  display:             inline-flex;
  align-items:         center;
  background:          transparent;
  border:              2px solid var(--t1);
  border-radius:       3px;
  color:               var(--t1);
  cursor:              pointer;
  font-family:         var(--jetbrains);
  font-size:           20px;
  letter-spacing:      0.06em;
  padding:             18px 32px;
  margin-top:          1.25rem;
  min-height:          44px;
  text-decoration:     none;
  -webkit-appearance:  none;
  appearance:          none;
  transition:          background 120ms, color 120ms;
}
.btn-peer:hover            { background: var(--t1); color: var(--ink); text-decoration: none; }
.btn-peer:focus-visible    { outline: 2px solid var(--t1); outline-offset: 3px; }
.btn-peer:disabled         { opacity: 0.45; cursor: default; }
.btn-peer:disabled:hover   { background: transparent; color: var(--t1); }

/* ── PEER FORM ──────────────────────────────────────────────────────────── */
#peer-form { margin-top: 1.5rem; }

.peer-field {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
  margin-bottom:  1.25rem;
}

.peer-label {
  font-family: var(--jetbrains);
  font-size:   15px;
  line-height: 1.5;
  color:       var(--chrome);
  cursor:      text;
}

.peer-input {
  background:         transparent;
  border:             none;
  border-bottom:      1px solid var(--rule);
  border-radius:      0;
  color:              var(--paper);
  font-family:        var(--jetbrains);
  font-size:          16px;
  line-height:        1.5;
  padding:            6px 0 8px;
  width:              100%;
  outline:            none;
  -webkit-appearance: none;
  transition:         border-color 120ms;
}

.peer-input:focus        { border-bottom-color: var(--t1); }
.peer-input::placeholder { color: var(--rule); }

@media (min-width: 600px) {
  .peer-field {
    flex-direction: row;
    align-items:    baseline;
    gap:            1.5ch;
    margin-bottom:  0.875rem;
  }
  .peer-label { white-space: nowrap; flex-shrink: 0; }
  .peer-input { flex: 1; min-width: 0; }
}

.peer-success {
  font-family: var(--jetbrains);
  font-size:   16px;
  line-height: 2;
  margin-top:  1.25rem;
}

/* ── ABOUT — compact secondary ──────────────────────────────────────────── */
/*
 * No border, no background. Reference material; config block says exactly
 * what in IOS syntax while the intro above says why in plain English.
 */
.about-block {
  font-size:     16px;
  line-height:   1.75;
  color:         var(--chrome);
  margin-top:    56px;
  margin-bottom: 56px;
  padding-left:  2ch;
}

.about-block .section-cmd {
  font-size:     16px;
  color:         var(--chrome);
  margin-bottom: 0.5rem;
}

/* ── phase 2 — conclusions list goes here once episodes have shipped ─────── */
/*
 * When conclusions exist, insert a <section id="conclusions"> before the
 * footer and uncomment the archive CSS block below.
 */

/* ── Conclusions archive — phase 2, reinstate when there are conclusions ──
.archive-list { margin-top: 0.25rem; }

.archive-entry {
  display:               grid;
  grid-template-columns: 6ch auto 1fr;
  gap:                   0 1.5ch;
  align-items:           baseline;
  padding:               0.3em 0.75rem;
  border-left:           4px solid;
  margin-bottom:         0.5em;
}

.ep-1 { border-color: var(--t1); } .ep-1 .ae-ep { color: var(--t1); }
.ep-2 { border-color: var(--t2); } .ep-2 .ae-ep { color: var(--t2); }
.ep-3 { border-color: var(--t3); } .ep-3 .ae-ep { color: var(--t3); }
.ep-4 { border-color: var(--t4); } .ep-4 .ae-ep { color: var(--t4); }
.ep-5 { border-color: var(--t5); } .ep-5 .ae-ep { color: var(--t5); }
.ep-6 { border-color: var(--t6); } .ep-6 .ae-ep { color: var(--t6); }
.ep-7 { border-color: var(--t7); } .ep-7 .ae-ep { color: var(--t7); }
.ep-8 { border-color: var(--t8); } .ep-8 .ae-ep { color: var(--t8); }

.ae-ep    { font-size: max(12px, 0.8em); }
.ae-date  { color: var(--chrome); white-space: nowrap; }
.ae-title { color: var(--paper); text-decoration: none; }
.ae-title:hover         { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.ae-title:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; border-radius: 2px; }

.archive-empty { color: var(--chrome); margin-top: 0.5rem; }
── end phase 2 ── */

/* ── FOOTER — minimal, full-bleed ──────────────────────────────────────── */
.site-footer {
  background:  var(--panel);
  border-top:  1px solid var(--rule);
}

.footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          64px;
}

.footer-links {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  font-size:   15px;
}

.footer-links a {
  color:           var(--chrome);
  text-decoration: none;
}
.footer-links a:hover         { color: var(--t1); }
.footer-links a:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; border-radius: 2px; }

.footer-links span { color: var(--dim); }

/* ── phase 2 — dashboard layout, reinstate when there are conclusions to list ──

.grid-col {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  margin-bottom:  1.5rem;
}
.grid-col:last-child { margin-bottom: 0; }
.grid-col > .pane    { margin-bottom: 0; }

@media (min-width: 1200px) {
  main {
    display:               grid;
    grid-template-columns: 58fr 42fr;
    gap:                   20px;
  }

  .grid-col { gap: 20px; margin-bottom: 0; }

  .grid-col:last-child #conclusions { order: 1; }
  .grid-col:last-child #join        { order: 2; }
  .grid-col:last-child #about       { order: 3; flex-grow: 1; }
}

── end phase 2 ── */

/* ── BOTTOM NAV — mobile only ───────────────────────────────────────────── */
@media (min-width: 900px) {
  #bottom-bar { display: none; }
}

@media (max-width: 899px) {
  body { padding-bottom: calc(var(--bot-h) + 2.5rem); }

  #bottom-bar {
    position:        fixed;
    bottom:          0; left: 0; right: 0;
    height:          var(--bot-h);
    display:         flex;
    align-items:     stretch;
    gap:             2.5em;
    padding-inline:  max(1rem, env(safe-area-inset-left, 1rem));
    background:      var(--panel);
    border-top:      1px solid var(--rule);
    font-family:     var(--ibm-plex);
    font-size:       14px;
    text-transform:  uppercase;
    letter-spacing:  0.14em;
    line-height:     1;
    z-index:         100;
    overflow-x:      auto;
    overflow-y:      hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #bottom-bar::-webkit-scrollbar { display: none; }

  #bottom-bar a {
    color:           var(--chrome);
    text-decoration: none;
    white-space:     nowrap;
    display:         flex;
    align-items:     center;
    gap:             0.3em;
    border-top:      2px solid transparent;
    flex-shrink:     0;
  }

  #bottom-bar a:hover                { color: var(--paper); }
  #bottom-bar a[aria-current="true"] { color: var(--paper); border-top-color: var(--phosphor); }
  #bottom-bar a:focus-visible        { outline: 2px solid var(--t1); outline-offset: 2px; border-radius: 2px; }

  .nav-join                      { color: var(--t1) !important; font-weight: 500; }
  .nav-join:hover                { color: var(--paper) !important; }
  .nav-join[aria-current="true"] { color: var(--t1) !important; }

  .key-label { color: #5A6864; letter-spacing: 0; }
}

/* ── MOBILE OVERRIDES ───────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .page-inner { padding-inline: 1.5rem; }

  .hero-block {
    font-size:      16px;
    padding-top:    48px;
    padding-bottom: 48px;
    min-height:     calc(11 * 1.75em + 48px + 48px);
  }

  .intro-headline { font-size: 22px; }
  .intro-desc     { font-size: 16px; margin-top: 16px; }
  .intro-block    { margin-bottom: 48px; }

  .ask-block { padding: 24px; }

  .footer-inner { height: auto; padding-block: 1.25rem; gap: 1rem; flex-wrap: wrap; }
}

/* ── 404 page ───────────────────────────────────────────────────────────── */
.body-center {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100dvh;
  max-width:       none;
  padding:         2rem 1.5rem;
}