/* ==========================================================================
   Direction d — "Phosphor" (Farner Intelligent Systems)
   Terminal phosphor monochrome: #84C20D + two dimmed alpha steps over
   #0A0C0A; white for body-critical text only; #B2B1B1 nearly absent
   (placeholder chips + footer legal line). Single family: JetBrains Mono.
   Layout: grid-forward tiling-window-manager panes. Density: airy.
   Nav collapses to a hamburger below 1024px (sanctioned threshold).
   Contrast (measured against #0A0C0A ground):
     #84C20D            9.07:1  (headings, prompts, buttons-as-ground)
     --phos-dim (a .72) 5.10:1  (secondary text, input borders — AA normal)
     --phos-faint (.34) 1.99:1  (decorative pane borders / ornament only)
     #FFFFFF           19.6:1   · #B2B1B1 9.25:1
   ========================================================================== */

:root {
  --ground: #0A0C0A;
  --well: #0D100C;                       /* form inputs / pane bars (permitted near-black family) */
  --phos: #84C20D;
  --phos-dim: rgba(132, 194, 13, 0.72);  /* dimmed step 1 — secondary text, UI borders */
  --phos-faint: rgba(132, 194, 13, 0.34);/* dimmed step 2 — decorative borders, glyphs */
  --ink: #FFFFFF;                        /* body-critical text only */
  --grey: #B2B1B1;                       /* nearly absent: placeholders, footer legal */
  --glow: 0 0 10px rgba(132, 194, 13, 0.35);
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, 'Liberation Mono', monospace;
  --header-height: 3.5rem; /* true rendered status-bar height at every viewport */
}

html {
  background: var(--ground);
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-0);
  line-height: var(--leading-relaxed);
}

::selection {
  background: var(--phos);
  color: var(--ground);
}

:focus-visible {
  outline: 2px solid var(--phos);
  outline-offset: 3px;
}

a {
  text-decoration: none;
}

.container {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Header — status bar (family B, fully opaque; logo band is true #000000)
   -------------------------------------------------------------------------- */
#header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: #000000; /* the whole bar is the logo's true-#000 band */
  /* hairline drawn as an inset shadow so it adds no height —
     the rendered bar stays exactly var(--header-height) (§1.1.4) */
  box-shadow: inset 0 -1px 0 var(--phos-faint);
}

.statusbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding-inline: var(--gutter);
}

.logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: #000000;
}

.logo-img {
  width: 108px; /* 108×52.2 — fits inside the 56px bar so min-height governs */
  height: auto;
}

#site-nav {
  display: none; /* JS toggles below 1024px; static row without JS */
  font-size: var(--text--1);
}

#site-nav a {
  color: var(--phos-dim);
  display: block;
  padding: var(--space-3) 0;
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
}

#site-nav a:hover {
  color: var(--phos);
  text-shadow: var(--glow);
}

.header-contact {
  margin-left: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  color: var(--phos);
  border: 1px solid var(--phos-dim);
  border-radius: var(--radius-1);
}

.nav-toggle svg {
  display: block;
}

/* Open mobile nav — opaque black panel under the status bar */
.js #site-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background: #000000;
  border-bottom: 1px solid var(--phos-faint);
  padding: var(--space-4) var(--gutter) var(--space-6);
}

.js.nav-open #site-nav {
  display: block;
}

/* No-JS fallback: nav renders as a static wrapping row inside the bar */
html:not(.js) #site-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
  flex-basis: 100%;
  padding-bottom: var(--space-2);
}

html:not(.js) .statusbar {
  flex-wrap: wrap;
}

html:not(.js) .nav-toggle {
  display: none;
}

/* the wrapped no-JS header is taller than --header-height; over-pad anchors */
html:not(.js) {
  scroll-padding-top: calc(var(--header-height) + 7rem);
}

/* --------------------------------------------------------------------------
   Buttons (compact CTA pair — shortlist #7, in mono)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-5);
  font-size: var(--text--1);
  font-weight: 700;
  border-radius: var(--radius-1);
  white-space: nowrap;
}

.btn-solid {
  background: var(--phos);
  color: var(--ground);
}

.btn-solid:hover {
  box-shadow: var(--glow);
}

.btn-ghost {
  border: 1px solid var(--phos-dim);
  color: var(--phos);
}

.btn-ghost:hover {
  border-color: var(--phos);
  text-shadow: var(--glow);
}

/* --------------------------------------------------------------------------
   Panes — tiling-window-manager frames
   -------------------------------------------------------------------------- */
.pane {
  border: 1px solid var(--phos-faint);
  border-radius: var(--radius-1);
  background: var(--ground);
}

.pane-bar {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--phos-faint);
  background: var(--well);
  color: var(--phos-dim);
  font-size: var(--text--1);
  letter-spacing: var(--tracking-wide);
}

.sq {
  width: 0.5em;
  height: 0.5em;
  background: var(--phos);
  display: inline-block;
  margin-right: var(--space-3);
  flex-shrink: 0;
}

/* Responsive prompt host: the full domain at >=768, a short form on phones so a
   prompt + command fits one row at 375. Decorative text (aria-hidden parents). */
.prompt-short { display: inline; }
.prompt-long  { display: none; }

@media (min-width: 768px) {
  .prompt-short { display: none; }
  .prompt-long  { display: inline; }
}

.pane-body {
  padding: var(--space-5) var(--space-4);
}

/* Multi-paragraph prose panes (founder bio) — the placeholder they replaced was
   a single line, so pane-body carried no paragraph rhythm. */
.pane-body:not(.profile-list) > p + p {
  margin-top: var(--space-4);
}

/* Bio pane spans the full grid width, so the prose keeps its own reading measure
   rather than running the container's full width. */
.pane-bio .bio-prose > p {
  max-width: var(--measure);
}

.bio-prose > p + p {
  margin-top: var(--space-4);
}

/* Bio: prose beside a supplied portrait at >=1024, portrait above the prose below that.
   (768 was tried and rejected: a 20rem portrait left the prose column at ~31ch.) */
.bio-layout {
  display: grid;
  gap: var(--space-5);
}

.bio-portrait {
  margin: 0;
  /* Never render wider than the desktop slot; the supplied file is 701px natural
     and must never be upscaled. */
  max-width: 20rem;
}

.bio-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--phos-faint);
}

@media (min-width: 1024px) {
  .bio-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: start;
  }

  .bio-prose {
    grid-column: 1;
    grid-row: 1;
  }

  .bio-portrait {
    grid-column: 2;
    grid-row: 1;
  }
}

/* --------------------------------------------------------------------------
   Sections — airy rhythm, slash-comment eyebrows (owned by direction d)
   -------------------------------------------------------------------------- */
main section {
  padding-block: var(--space-section);
}

.eyebrow {
  color: var(--phos-dim);
  font-size: var(--text--1);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

h2 {
  color: var(--phos);
  font-size: var(--text-3);
  font-weight: 700;
  line-height: var(--leading-snug);
  text-shadow: var(--glow);
  margin-bottom: var(--space-5);
}

h3 {
  color: var(--ink);
  font-size: var(--text-1);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.desc {
  color: var(--ink);
  max-width: var(--measure);
}

.kicker {
  color: var(--phos-dim);
  font-size: var(--text--1);
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   Terminal session shared bits
   -------------------------------------------------------------------------- */
.term .line {
  margin-bottom: var(--space-3);
  overflow-wrap: break-word;
}

.prompt {
  color: var(--phos-dim);
}

.cmd {
  color: var(--phos);
  font-size: var(--text--1);
}

.dim {
  color: var(--phos-dim);
}

.stage {
  color: var(--phos-dim);
  font-size: var(--text--1);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--phos);
  box-shadow: var(--glow);
}

@media (prefers-reduced-motion: no-preference) {
  .cursor {
    animation: blink 1.1s steps(2, jump-none) infinite;
  }
}

@keyframes blink {
  50% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
#hero {
  padding-top: var(--space-7);
}

.hero-pane .pane-body {
  padding: var(--space-6) var(--space-4);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.hero-h1 {
  color: var(--phos);
  font-size: var(--text-4);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-shadow: var(--glow);
  max-width: 30ch;
  margin-block: var(--space-4) var(--space-4);
}

.hero-sub {
  color: var(--ink);
  max-width: var(--measure-narrow);
  margin-bottom: var(--space-3);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ASCII ornament (shortlist #17): small grid at mobile, wide grid ≥768 —
   swapped, never scaled or clipped */
.ornament {
  align-self: end;
  overflow: hidden;
}

.ornament pre {
  font-family: var(--font-mono);
  font-size: 0.8125rem; /* 13px — mono UI floor */
  line-height: 1.35;
  color: var(--phos-dim);
  text-shadow: var(--glow);
  white-space: pre;
}

.orn-wide {
  display: none;
}

/* --------------------------------------------------------------------------
   Offerings — one session, four command/output blocks
   -------------------------------------------------------------------------- */
.arc-line {
  color: var(--phos);
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

.session .cmd-block {
  margin-bottom: var(--space-7);
}

.session .cmd-block:last-of-type {
  margin-bottom: var(--space-5);
}

.session .out {
  padding-left: var(--space-4);
  border-left: 1px solid var(--phos-faint);
}

.session .hot .out {
  border-left: 2px solid var(--phos); /* visual emphasis only — no added words */
}

.sow {
  font-size: var(--text--1);
}

/* --------------------------------------------------------------------------
   Work — 2×2 pane grid (stacks to one column below 768)
   -------------------------------------------------------------------------- */
/* Engagements panes size to their own content; equal row heights left short panes
   (e.g. "Engagement shape") stretched with dead space inside their borders. */
.cred-line {
  max-width: var(--measure);
}

.cred-line + .cred-line {
  margin-top: var(--space-3);
}

/* Founder: degrees + profiles share a row beneath the bio at >=768. */
.founder-sub {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 768px) {
  .founder-sub {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Contact: reason-to-write + reply expectation above the fields. */
.contact-intro {
  max-width: var(--measure);
}

.contact-intro + .contact-intro {
  margin-top: var(--space-3);
}

.contact-meta {
  color: var(--phos-dim);
  margin-bottom: var(--space-5);
}

/* Recent work: panes size to content; the last (internal tooling) spans the row. */
#work .pane-grid {
  align-items: start;
}

@media (min-width: 768px) {
  #work .pane-wide {
    grid-column: 1 / -1;
  }
}

#engagements .pane-grid {
  align-items: start;
}

.pane-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   Founder
   -------------------------------------------------------------------------- */
.founding-line {
  color: var(--ink);
  margin-bottom: var(--space-6);
}

.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.pane-pending {
  border-style: dashed;
}

.profile-link {
  color: var(--phos);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-link:hover {
  color: var(--white);
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .profile-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* Placeholder blocks — designed-looking, clearly non-final, non-interactive */
.tbp {
  display: inline-block;
  border: 1px dashed var(--phos-dim);
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-4);
  color: var(--grey);
  font-size: var(--text--1);
}

/* --------------------------------------------------------------------------
   Differentiators
   -------------------------------------------------------------------------- */
.diff-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--measure);
}

.diff-list li {
  position: relative;
  padding-left: var(--space-5);
}

.diff-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5em;
  height: 0.5em;
  background: var(--phos);
}

/* --------------------------------------------------------------------------
   Credentials
   -------------------------------------------------------------------------- */
.cred-line {
  color: var(--ink);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   Contact — the final pane
   -------------------------------------------------------------------------- */
.contact-loc {
  color: var(--phos-dim);
  margin-bottom: var(--space-1);
}

.contact-onsite {
  color: var(--phos-dim);
  font-size: var(--text--1);
  margin-bottom: var(--space-6);
}

.contact-pane {
  max-width: 44rem;
}

.contact-pane form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.field {
  width: 100%;
}

.field label {
  display: block;
  color: var(--phos);
  font-size: var(--text--1);
  margin-bottom: var(--space-2);
}

.field input,
.field textarea {
  width: 100%;
  background: var(--well);
  border: 1px solid var(--phos-dim);
  border-radius: var(--radius-1);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  caret-color: var(--phos);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline-offset: 1px;
}

.form-live {
  color: var(--phos);
  font-size: var(--text--1);
  min-height: 1.5em;
}

.pending-note {
  margin-top: var(--space-6);
  border-top: 1px solid var(--phos-faint);
  padding-top: var(--space-5);
}

.note-line {
  color: var(--phos-dim);
  font-size: var(--text--1);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Footer — true #000 band
   -------------------------------------------------------------------------- */
#footer {
  background: #000000;
  border-top: 1px solid var(--phos-faint);
  padding-block: var(--space-8);
}

.footer-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-brand {
  background: #000000;
}

.logo-footer {
  /* Mobile: fill the container (343px at 375 inside 16px padding), centred; the file
     is 360px natural so it is never upscaled, and the 2x srcset serves 720px on
     high-DPI. The PNG carries the logo's own black field — 15.2% of its width sits
     below the wordmark — so the bottom margin cancels that field proportionally and
     the gap beneath is the grid gap alone. The supplied file itself is untouched. */
  display: block;
  width: min(100%, 360px);
  margin: 0 auto calc(min(100%, 360px) * -0.152);
}

@media (min-width: 768px) {
  /* Desktop: two-column footer unchanged — 280px logo, mark on the container's left
     edge (26px of field left of the mark, 43px below the wordmark at this size). */
  .footer-brand {
    flex: 0 0 280px;            /* fixed column so the flex item cannot shrink the logo */
  }

  .logo-footer {
    width: 280px;
    max-width: none;            /* override the reset's img { max-width: 100% } */
    margin: 0 0 -43px -26px;
  }
}

/* Form hidden until a sending backend exists (customer decision); email is the
   interim contact path. Belt-and-braces with the hidden attribute. */
.form-pending[hidden] {
  display: none;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text--1);
}

.foot-loc,
.foot-mail {
  color: var(--phos-dim);
}

.tbp-mini {
  padding: var(--space-1) var(--space-3);
}

.foot-legal {
  color: var(--grey);
  font-size: var(--text--2);
}

/* --------------------------------------------------------------------------
   Motion (progressive enhancement — JS adds .motion-ok only when
   prefers-reduced-motion is not set; without it everything is static
   and fully visible, cursor steady)
   -------------------------------------------------------------------------- */
.motion-ok .fx-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

.motion-ok .fx-reveal.in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   ≥768px — tablet: work/founder panes tile, wide ASCII grid swaps in
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .pane-body {
    padding: var(--space-6);
  }

  .hero-pane .pane-body {
    padding: var(--space-7) var(--space-6);
  }

  .hero-h1 {
    font-size: var(--text-4);
  }

  .orn-wide {
    display: block;
  }

  .orn-small {
    display: none;
  }

  .pane-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Founder: bio spans full width; profiles sit beneath as a slim strip.
     (Was 3fr/2fr, sized when the bio was a one-line placeholder.) */
  .founder-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .footer-meta {
    align-items: flex-end;
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   ≥1024px — desktop: nav inline in the status bar, hero two-column
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .js.nav-open #site-nav,
  .js #site-nav,
  #site-nav {
    position: static;
    display: flex;
    flex-basis: auto;
    column-gap: var(--space-5);
    padding: 0;
    border: 0;
    background: transparent;
  }

  #site-nav a {
    min-height: 0;
    padding: var(--space-1) 0;
  }

  .nav-toggle {
    display: none;
  }

  html:not(.js) {
    scroll-padding-top: calc(var(--header-height) + 0.5rem);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: end;
  }

  .ornament {
    justify-self: end;
  }
}