/* ============================================================
   Variant: BRAND SYSTEM
   ------------------------------------------------------------
   Chozo Brand System v2.0 — "built on the official palette".
   Source document: brand/index.html

   Implements pairing "A · Ink", which the document names as the
   recommended treatment for website, app UI and decks:
   Ink dominant, orange for the one action, mono carrying every
   number.

   Every value below is quoted from the brand document rather
   than chosen here. Where the document states a contrast ratio
   it is repeated in the comment, so an edit that breaks one is
   visible at the point of the change.

   The document's hard rules, enforced throughout:
     - No orange text below 24px, and never on white
     - Dark type on orange fills — never white (white on orange
       is 2.6:1 and unusable)
     - Orange and Deep Blue never touch edge-to-edge; separate
       them with ink, paper, or space
     - The orange-to-ink gradient belongs to the mark alone;
       everything else is flat
     - Green and red exist only inside status UI, never in
       marketing copy — with one signed-off exception, the
       window-control dots; see TERMINAL WINDOWS at the bottom
     - Cards are bordered, never shadowed
     - Buttons: 44px min height, 2px radius maximum. Note this
       radius rule sits inside the document's BUTTONS block, so
       it governs buttons — the terminal windows below are
       rounded to 8px, which the document does not forbid.
     - Body 16px and never smaller; measure capped at 70
       characters; left-aligned always
   ============================================================ */

/* ---------- typefaces ----------
   "Jost for the voice, Plex for the work." Jost is the closest
   open-licensed match to the wordmark's geometry — perfect circles
   in the O, flat terminals — so headlines and the logo finally look
   like the same brand. Self-hosted for the same reason as the rest
   of the site: no render-blocking third-party stylesheet and no
   DNS+TLS setup to another origin before a glyph can download.
   Jost and Plex Sans are variable; Plex Mono ships per weight. */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   02 / Palette — four official, five derived
   ============================================================ */
:root {
  color-scheme: dark;

  /* ---- the four official colours, exactly as supplied ----
     Renamed per the document: the original sheet's "Dark Blue" and
     "Light Blue" were the wrong way round, so #232D33 is Ink and
     #17384C is Deep Blue. Values untouched. */
  --ink-c:      #232D33;   /* Ink        433 C  — 13.9:1 on paper        */
  --deep-blue:  #17384C;   /* Deep Blue  2965 U — 11.9:1 on white        */
  --orange:     #FF972C;   /* Orange     130 U  — 6.5:1 on ink, 2.1:1 on white */
  --gray:       #849696;   /* Gray              — 4.5:1 on ink, 3.1:1 on white */

  /* ---- derived: surfaces and legibility, not new brand colours ---- */
  --ink-raised: #2C383F;   /* cards and nav on Ink            */
  --hairline:   #3A464D;   /* borders on dark — NON-TEXT only */
  --gray-600:   #5A6B6B;   /* secondary text on light — 5.5:1 */
  --gray-200:   #E1E7E7;   /* rules, table lines, chart tracks */
  --paper-c:    #F1F4F4;   /* light page ground               */

  /* semantic: status UI only, never marketing or print */
  --status-warn: var(--orange);

  /* ---- derived for dark raised surfaces ----
     The document measures Gray at "4.5:1 on ink", and on Ink #232D33 it is
     exactly that. But it also introduces Ink Raised #2C383F for cards and nav,
     and Deep Blue #17384C for secondary panels — and Gray drops to 3.89:1 and
     3.98:1 on those. Almost all secondary text on this page sits on a raised
     surface, so the official value would fail where it is actually used.

     These are lightened siblings in the same neutral hue, no new colours —
     the mirror of the move the document already makes on the light side,
     where it derives Gray 600 #5A6B6B because the official Gray only manages
     3.1:1 on paper. Ratios below are against Ink Raised, the worst case. */
  --gray-300:    #98A7A7;   /* 4.83:1 on raised, 5.63:1 on ink  */
  --status-up:   #3FBF83;   /* 5.15:1 on raised                 */
  --status-down: #FF7A6B;   /* 4.73:1 on raised                 */

  /* ============================================================
     Mapped onto the shared structural layer.
     This is pairing A · Ink, so Ink is the page ground and the
     brand's Paper becomes the text colour sitting on it.
     ============================================================ */
  --paper:      var(--ink-c);
  --paper-2:    var(--ink-raised);
  --paper-3:    var(--deep-blue);

  --ink:        var(--paper-c);       /* 13.4:1 on ink */
  --ink-2:      var(--gray-300);          /*  4.5:1 on ink */
  --ink-3:      var(--gray-300);          /*  the document gives one gray for
                                          all secondary text on dark      */

  --rule:       var(--hairline);
  --rule-soft:  var(--ink-raised);

  /* ---- accent ----
     Orange is a GRAPHIC and action colour: fills, rules, marks, and
     buttons with dark type on them. It is never small text. The
     structural layer uses --accent in a few text positions, so each
     of those is overridden further down to Paper or Gray rather than
     letting orange leak below 24px. */
  --accent:      var(--orange);
  --accent-lg:   var(--orange);       /* display-size text only, >=24px */
  --accent-hi:   #E5871F;             /* hover, -10% lightness          */
  --accent-fill: var(--orange);
  --accent-wash: #33302A;
  --on-accent:   var(--ink-c);        /* "Type on orange is always Ink"  */

  /* Deep Blue is the "secondary panel on dark" surface. Note it never
     meets an orange edge anywhere in this stylesheet — the featured
     plan uses the raised ink surface for exactly that reason. */
  --deep:            var(--deep-blue);
  --on-deep:         var(--paper-c);
  --on-deep-2:       var(--gray-300);
  --accent-on-deep:  var(--paper-c);  /* NOT orange — see the edge rule */

  --signal: var(--status-up);
  --danger: var(--status-down);

  /* "Cards are bordered, never shadowed." */
  --shadow-1: none;
  --shadow-2: none;

  /* ---- 03 / Typography ----
     Jost for the voice, Plex for the work. Sizes are the document's
     scale; body is 16px and "never smaller", so --t-0 does not scale. */
  --t--1: 0.875rem;                                    /* Small   14/21 */
  --t-0:  1rem;                                        /* Body    16/26 */
  --t-1:  1.125rem;                                    /* Body L  18/28 */
  --t-2:  1.3125rem;                                   /* H3      21/27 */
  --t-3:  clamp(1.5rem, 1.28rem + .95vw, 1.875rem);    /* H2      30/35 */
  --t-4:  clamp(1.875rem, 1.4rem + 2vw, 2.625rem);     /* H1      42/46 */
  --t-5:  clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);     /* Display 60/62 */

  --font-display: "Jost", "Century Gothic", Futura, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* H1-H3 are all 500; only Display is 600. The document specifies no
     negative tracking on headings — only on the wordmark. */
  --display-weight: 500;
  --display-tracking: 0;
  --display-case: none;
  --display-leading: 1.167;                            /* H2 35/30 */

  /* Eyebrow: 12px mono, +14%. Uppercase, because the document also
     says "no letterspacing on lowercase" — the two rules together
     only resolve one way. */
  --eyebrow-family: var(--font-mono);
  --eyebrow-tracking: .14em;
  --eyebrow-case: uppercase;

  /* "Square corners, 2px radius maximum." */
  --radius:      2px;
  --radius-lg:   2px;
  --radius-pill: 2px;
  --border-w:    1px;
  --rule-w:      1px;

  /* ---- spacing scale · 4px base ----
     4 · 8 · 12 · 16 · 24 · 32 · 48 · 72, straight from the document. */
  --s-1: .5rem;      /*  8 */
  --s-2: 1rem;       /* 16 */
  --s-3: 1.5rem;     /* 24 */
  --s-4: 2rem;       /* 32 */
  --s-5: 3rem;       /* 48 */
  --s-6: 4.5rem;     /* 72 */

  --measure: 70ch;

  --panel-bg: var(--ink-raised);
  --panel-bd: var(--hairline);

  /* "The orange-to-ink gradient belongs to the mark alone. Everything
     else is flat." So there is no page texture and no hero glow. */
  --page-texture: none;
  --hero-glow: none;
}

body { line-height: 1.625; }                            /* Body 26/16 */

/* ---------- headings ---------- */
.display { font-size: var(--t-3); line-height: 1.167; }
h3 { font-size: var(--t-2); line-height: 1.286; }       /* H3 27/21 */

/* left-aligned always; measure capped at 70 characters */
.section__head, .section__lede { text-align: left; }
.lede, .section__lede, .cal__copy, .contact__intro p, .faq__body, .service__body {
  max-width: min(70ch, 100%);
}

/* Gray, not orange — an eyebrow is 12px and orange text under 24px
   is the single most common way this palette breaks. */
.eyebrow {
  font-size: .75rem;
  font-weight: 500;
  color: var(--gray-300);
}

/* ---------- 06 / Buttons ---------- */
.btn {
  min-height: 44px;
  padding: .6875rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-0);
  letter-spacing: 0;
  transition: background-color .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease);
}
/* the document specifies a lightness change on hover, not a lift */
.btn:hover, .btn:active { transform: none; }

/* Primary is the one orange action in view. Type on it is always Ink —
   white on orange is 2.6:1 and unusable. */
.btn--primary {
  --btn-bg: var(--orange);
  --btn-bd: var(--orange);
  --btn-fg: var(--ink-c);          /* 6.5:1 */
}
.btn--primary:hover { --btn-bg: var(--accent-hi); --btn-bd: var(--accent-hi); }

.btn--ghost {
  --btn-bd: var(--hairline);
  --btn-fg: var(--paper-c);
}
.btn--ghost:hover { --btn-bd: var(--gray); background: var(--ink-raised); }

/* ---------- header ---------- */
.site-head {
  background: var(--ink-c);
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck { border-bottom-color: var(--hairline); }

/* Wordmark setting, per the document: "Jost Semibold, tracking -2%,
   for CHOZO. TECHNOLOGIES is Jost Light at +34% tracking, optically
   matched to the original art." */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-size: 1.125rem;
  gap: .55rem;
}
.wordmark__text em {
  font-weight: 300;
  letter-spacing: .34em;
  color: var(--gray-300);
  font-size: .78em;
  margin-left: .34em;   /* offsets the trailing letterspace */
}

/* The page is Ink regardless of the visitor's system theme, so the
   dark-surface mark has to apply unconditionally — the markup's
   prefers-color-scheme <source> would otherwise serve the light-surface
   art to anyone browsing in light mode. This is the lightened variant,
   which keeps the phoenix's orange instead of flattening it to white. */
.wordmark__mark { content: url("../assets/mark-dark.png"); }

.nav a {
  font-family: var(--font-body);
  font-size: var(--t--1);
  color: var(--gray-300);
}
.nav a:hover { color: var(--paper-c); }
/* secondary, not orange — the hero CTA is the one action in this view */
.nav__cta {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-color: var(--hairline);
  color: var(--paper-c);
}
.nav__cta:hover { background: var(--ink-raised); border-color: var(--gray-300); color: var(--paper-c); }

@media (max-width: 56rem) {
  .nav { background: var(--ink-c); border-bottom-color: var(--hairline); }
}

/* ---------- hero ---------- */
.hero { border-bottom: 1px solid var(--hairline); }
.hero__copy h1 {
  font-size: var(--t-5);        /* Display 60 */
  font-weight: 600;
  line-height: 1.033;           /* 62/60 */
}
/* orange as text is allowed here and only here — display size, well
   above the 24px floor, at 6.5:1 on ink */
.hero__copy h1 em { color: var(--orange); }

.lede { font-size: var(--t-1); line-height: 1.556; color: var(--gray-300); }

.hero__note {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-300);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-2);
}

/* ---------- the log: mono carrying every number ---------- */
.log {
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  padding: 0;
}
.log__head {
  border-bottom: 1px solid var(--hairline);
  padding: .75rem var(--s-3);
  margin: 0;
}
.log__head h2 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-c);
}
.log__tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .1em;
  border: 1px solid var(--hairline);
  color: var(--gray-300);
  padding: .2rem .5rem;
}
/* OPERATIONAL — a genuine status indicator, which is the only context
   the document allows green in */
.pulse { background: var(--status-up); }
.pulse::after { border-color: var(--status-up); }

.log__list { padding: var(--s-2) var(--s-3); }
.log__list li {
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.5;
  border-bottom-color: var(--rule-soft);
  grid-template-columns: 3.4rem 1fr;
  color: var(--gray-300);
}
.log__list time { color: var(--gray-300); }
/* figures are Paper, not orange — they are well under 24px */
.log__list b { color: var(--paper-c); font-weight: 500; }
.log__list .is-final { color: var(--paper-c); }
.log__list .is-final time { color: var(--gray-300); }
.log__list .is-final b { color: var(--status-up); }   /* resolved / up */
.log__foot {
  font-family: var(--font-mono);
  font-size: .7rem;
  margin: 0;
  padding: .7rem var(--s-3);
  border-top: 1px solid var(--hairline);
  color: var(--gray-300);
}

/* ---------- stack band ---------- */
.band {
  background: var(--ink-raised);
  border-block: 1px solid var(--hairline);
}
.band__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--gray-300);
}
.band__list {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--paper-c);
}
.band__list li + li::before { background: var(--hairline); border-radius: 0; width: 4px; height: 4px; }

/* ---------- services ---------- */
.section--inset { background: var(--ink-raised); }
.service { border-top-color: var(--hairline); }
.service:last-child { border-bottom-color: var(--hairline); }
/* An orange rule (graphic) over a gray numeral (text under 24px).
   The colour is carried by the rule, not by the digits. */
.service__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-0);
  letter-spacing: .1em;
  color: var(--gray-300);
  padding-top: .5rem;
  border-top: 2px solid var(--orange);
  display: block;
  width: 2.25rem;
}
.service__body h3 { font-size: var(--t-2); }
.service__body > p { color: var(--gray-300); }
.service__points li::before {
  background: var(--orange);      /* a mark, not text */
  border-radius: 0;
  width: .4rem;
  height: .4rem;
  top: .6em;
}

/* ---------- ownership: Deep Blue, the secondary panel on dark ---------- */
.own {
  background: var(--deep-blue);
  border-block: 1px solid var(--hairline);
}
.own .eyebrow { color: var(--gray-200); }
/* Paper, not orange: orange and Deep Blue must not meet edge-to-edge,
   and a headline set in orange on this panel is exactly that. */
.own .display em { color: var(--paper-c); }
.own__points li::before { background: var(--gray-200); border-radius: 0; }

/* ---------- how it works ---------- */
.step {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-3);
}
.step:nth-child(1) { border-top: 2px solid var(--orange); }
.step:nth-child(2), .step:nth-child(3) { border-top-color: var(--hairline); }
.step__when {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--gray-300);
}
.step h3 { font-size: var(--t-2); }
.step p { color: var(--gray-300); font-size: var(--t-0); line-height: 1.625; }

/* ---------- plans: bordered, never shadowed ---------- */
.plan {
  background: var(--ink-c);
  border: 1px solid var(--hairline);
  padding: var(--s-3);
}
/* "A 3px orange cap marks the featured one — one per group."
   The featured card stays on the raised ink surface rather than Deep
   Blue, because an orange cap on a Deep Blue card would put the two
   colours edge-to-edge. */
.plan--feature {
  background: var(--ink-raised);
  border-color: var(--hairline);
  border-top: 3px solid var(--orange);
}
.plan--feature .plan__for,
.plan--feature .plan__unit,
.plan--feature .plan__list li { color: var(--gray-300); }
.plan--feature .plan__list li::before { background: var(--orange); }
.plan--feature .plan__flag { color: var(--gray-300); }

.plan__flag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--gray-300);
}
.plan__name { font-size: var(--t-2); }
/* a figure, and above 24px, so orange is legal here */
.plan__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-3);
  color: var(--orange);
}
.plan__unit { font-family: var(--font-mono); font-size: .8rem; color: var(--gray-300); }
.plan__price-note { font-family: var(--font-display); font-weight: 500; font-size: var(--t-2); color: var(--paper-c); }
.plan__for { color: var(--gray-300); font-size: var(--t-0); }
.plan__list { color: var(--gray-300); font-size: var(--t-0); }
.plan__list li::before { background: var(--orange); border-radius: 0; }
.plan__note {
  border-left: 2px solid var(--hairline);
  color: var(--gray-300);
  font-size: var(--t--1);
}

/* ---------- testimonials ---------- */
.quote { border-top-color: var(--hairline); }
.quote:first-child { border-top-color: var(--orange); }
/* a decorative glyph at display size, not running text */
.quote__mark { font-family: var(--font-display); font-weight: 600; color: var(--orange); }
.quote blockquote { color: var(--gray-300); }
.quote figcaption { font-family: var(--font-mono); font-size: .75rem; color: var(--gray-300); }
.quote figcaption b { color: var(--paper-c); font-weight: 500; }
.marks__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--gray-300);
}
.marks__row li { color: var(--hairline); opacity: 1; }
.marks__row li:hover { color: var(--gray-300); }

/* ---------- about ---------- */
.cal__copy p { color: var(--gray-300); }
.portrait-ph {
  border: 1px solid var(--hairline);
  background-color: var(--ink-raised);
  background-image: repeating-linear-gradient(
    45deg, transparent 0 9px, var(--hairline) 9px 10px
  );
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--gray-300);
}
.pull {
  border-left: 3px solid var(--orange);   /* an orange rule — graphic use */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-2);
  line-height: 1.286;
  color: var(--paper-c);
}

/* ---------- FAQ ---------- */
.faq__list { border-top-color: var(--hairline); }
.faq details { border-bottom-color: var(--hairline); }
.faq summary {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-1);
  letter-spacing: 0;
}
/* the hover cue is the chevron turning orange — a mark, not the text */
.faq summary:hover { color: var(--paper-c); }
.faq summary:hover::after { color: var(--orange); }
.faq__body { color: var(--gray-300); font-size: var(--t-0); }

/* ---------- contact ---------- */
.contact__intro p { color: var(--gray-300); }
.contact__direct > div { border-top-color: var(--hairline); }
.contact__direct dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--gray-300);
}
.contact__direct dd { color: var(--paper-c); }
/* the link colour is Paper; orange carries the underline, which is a
   rule rather than type, so the 24px floor does not apply to it */
.contact__direct a { color: var(--paper-c); border-bottom-color: var(--hairline); }
.contact__direct a:hover { color: var(--paper-c); border-bottom-color: var(--orange); }

/* ---------- 06 / Form field ---------- */
.form {
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  padding: var(--s-3);
}
.field label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t--1);
  color: var(--paper-c);
}
.field .req { color: var(--paper-c); }   /* 14px — not an orange context */
.form__legend { font-family: var(--font-mono); font-size: .75rem; color: var(--gray-300); }
.field input, .field select, .field textarea {
  min-height: 44px;
  background: var(--ink-c);
  border: 1px solid var(--hairline);
  color: var(--paper-c);
  font-size: var(--t-0);
}
.field textarea { min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}
/* red and green only inside status UI — a failed form field qualifies */
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--status-down); }
.field__error { font-family: var(--font-mono); font-size: .75rem; color: var(--status-down); }
.form__status { font-family: var(--font-mono); font-size: .75rem; color: var(--gray-300); }
.form__status.is-ok { color: var(--status-up); }
.form__fine { font-size: var(--t--1); color: var(--gray-300); }

/* ---------- footer ---------- */
.site-foot {
  background: var(--ink-raised);
  border-top-color: var(--hairline);
}
.foot__mark {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.foot__mark em {
  font-weight: 300;
  letter-spacing: .34em;
  color: var(--gray-300);
  font-size: .78em;
  margin-left: .34em;
}
.foot__line, .foot__legal { font-family: var(--font-mono); font-size: .75rem; color: var(--gray-300); }
.foot__nav a { color: var(--gray-300); }
.foot__nav a:hover { color: var(--paper-c); }
.foot__legal { border-top-color: var(--hairline); }

/* ============================================================
   TERMINAL WINDOWS
   ------------------------------------------------------------
   Three sections become real windows: the overnight log, Core
   Philosophy, and About. Everything else on the page is left set
   normally — the contrast against ordinary sections is what makes
   the windows land, and it keeps the long prose sections readable.

   Per the brief: backgrounds stay solid, type and colour are
   unchanged, and the chrome is drawn only from the palette —
   "treat it like a custom UI theme" rather than borrowing macOS
   red/amber/green, which would spend the semantic colours on
   decoration.

   All of this is CSS. The markup underneath is the same shared
   semantic HTML every other design uses; there is no window
   chrome in it to hook onto, so the title bars are drawn with
   pseudo-elements and the traffic lights are three radial
   gradients painted into the bar's own background.
   ============================================================ */

:root {
  /* Window-control dots — the real macOS stoplights.
     An earlier pass themed these to the palette (Orange / Gray / Hairline)
     to avoid spending the semantic red and green on decoration. The client
     read the result as looking wrong, so they are back to the genuine
     colours: at a glance, window controls that are not red-yellow-green
     do not read as window controls.

     This is the one place the design leaves the palette, and it is a
     deliberate, reversible choice — set the three below to var(--orange),
     var(--gray) and var(--hairline) to put it back inside the rule.
     All three are fills rather than type, so the 24px orange rule and the
     contrast floors do not apply to them. */
  --tl-1: #FF5F57;   /* red    — palette-safe alternative: var(--orange)   */
  --tl-2: #FEBC2E;   /* yellow — palette-safe alternative: var(--gray)     */
  --tl-3: #28C840;   /* green  — palette-safe alternative: var(--hairline) */

  /* Window corner radius.
     The document's "square corners, 2px radius maximum" sits inside the
     BUTTONS block of section 06, so it governs buttons — not every surface.
     An earlier pass applied it globally, which is why these windows were
     square. Buttons stay at 2px; the windows get the rounding a modern OS
     actually uses, which is both what was asked for and closer to the
     document than the blanket reading was. */
  --radius-window: 8px;

  --titlebar-h: 2.25rem;
  --titlebar-bg: #323F47;   /* one step above Ink Raised */
}

/* the shared title bar: background, hairline, and three lights */
.log__head,
.own__body::before,
.cal::before {
  background:
    /* Explicit lengths, not percentage stops. The first pass used
       "circle 5.5px, colour 99%, transparent 100%" — a 1% band on a 5.5px
       radius is 0.055px, far under one device pixel, so the edge rendered
       hard and jagged instead of feathering. Nothing to do with the palette;
       a ~0.9px band gives the browser room to anti-alias properly. */
    radial-gradient(circle at 1.05rem 50%, var(--tl-1) 4.6px, transparent 5.5px),
    radial-gradient(circle at 2.35rem 50%, var(--tl-2) 4.6px, transparent 5.5px),
    radial-gradient(circle at 3.65rem 50%, var(--tl-3) 4.6px, transparent 5.5px),
    var(--titlebar-bg);
}

/* ---------- 1. the overnight log ---------- */
/* The tag moved onto the title bar, which is a step lighter than Ink Raised —
   Gray 300 only manages 4.35:1 there, so it steps up to Gray 200 (9.3:1). */
.log__head .log__tag { color: var(--gray-200); border-color: var(--hairline); }

.log { border: 1px solid var(--hairline); overflow: hidden; border-radius: var(--radius-window); }
.log__head {
  height: var(--titlebar-h);
  padding: 0 var(--s-3) 0 5rem;   /* clear of the lights */
  border-bottom: 1px solid var(--hairline);
  gap: .5rem;
}
.log__head h2 {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--gray-300);
}
/* The live-status pulse has to move to the right-hand end of the bar.
   Left where the markup puts it, it lands immediately after the green
   traffic light and reads as a fourth one. Title centred to match the
   other two windows. */
.log__head h2 { order: 2; flex: 1; text-align: center; }
.log__head .pulse { order: 3; }
.log__tag { order: 4; margin-left: .5rem; }

/* ---------- 2. ownership — paragraphs and bullets in a window ---------- */
.own__body {
  position: relative;
  background: var(--ink-c);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-window);
  padding: calc(var(--titlebar-h) + var(--s-3)) var(--s-3) var(--s-3);
  overflow: hidden;
}
.own__body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--titlebar-h);
  border-bottom: 1px solid var(--hairline);
}
.own__body::after {
  content: "~/chozo/philosophy";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--titlebar-h);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--gray-300);
  pointer-events: none;
}
/* Deliberate exception 2 — mono inside the window only */
.own__body p {
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.75;
  color: var(--gray-300);
}
.own__body p:first-of-type::before {
  content: "$ cat philosophy.txt\A\A";
  white-space: pre;
  color: var(--gray-300);
}
.own__points {
  font-family: var(--font-mono);
  font-size: .8125rem;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--hairline);
}
.own__points li { padding-left: 1.4rem; }
.own__points li::before {
  content: "*";                  /* ASCII, so it stays in Plex Mono */
  background: none;
  width: auto; height: auto;
  top: 0;
  color: var(--gray-200);
  font-family: var(--font-mono);
}

/* ---------- 3. About — the whole section as a neofetch window ---------- */
.cal {
  position: relative;
  background: var(--ink-c);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-window);
  padding: calc(var(--titlebar-h) + var(--s-4)) var(--s-4) var(--s-4);
  grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr);
  gap: var(--s-4);
  align-items: start;
  overflow: hidden;
}
.cal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--titlebar-h);
  border-bottom: 1px solid var(--hairline);
}
.cal::after {
  content: "tk@chozotech: ~";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--titlebar-h);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--gray-300);
  pointer-events: none;
}

/* the "distro logo" slot: a user silhouette in ASCII text art.

   Pure ASCII, deliberately. Block characters (U+2588 and friends) would
   give a solid silhouette, but they sit outside the latin subset of Plex
   Mono that this site ships — so they fall back to whatever mono the OS
   supplies, whose advance width differs, and the art shears apart. Every
   character below is inside U+0000-00FF and therefore renders in the same
   font as the rest of the readout.

   Generated from an ellipse rather than hand-typed so the head reads as
   round: monospace cells are roughly twice as tall as they are wide, so
   the horizontal radius is doubled to compensate.

   The art is generated content inside an element the markup already marks
   as role="img" with an aria-label, so assistive tech announces "Photo of
   placeholder" and never tries to read the block characters out. */
.cal__portrait { padding-top: .35rem; }
.portrait-ph {
  aspect-ratio: auto;
  border: 0;
  background: none;
  display: block;
  padding: 0;
  place-items: start;
}
.portrait-ph::before {
  content: "        #########\A      #############\A     ###############\A     ###############\A     ###############\A      #############\A        #########\A\A     ################\A  #####################\A #######################\A#########################\A#########################";
  display: block;
  white-space: pre;
  font-family: var(--font-mono);
  /* The art is 25 columns wide, so the size is bound to the column rather
     than fixed — at ~0.6em per monospace advance, 25 columns fills the
     portrait column at roughly 1.2vw on a desktop viewport. */
  font-size: clamp(.5rem, 1.15vw, .95rem);
  line-height: 1.05;              /* tight, so the rows read as one mass */
  letter-spacing: 0;
  color: var(--orange);           /* a graphic, not type */
  text-align: left;
}
/* keep the placeholder note, demoted to a caption under the art */
.portrait-ph span {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--gray-300);
  text-transform: uppercase;
}

/* the readout column */
.cal__copy { max-width: none; font-family: var(--font-mono); }

/* neofetch's user@host line, then its rule. 24px exactly, which is
   the floor at which orange is allowed to be type. */
.cal__copy::before {
  content: "tk@chozotech";
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--orange);
  margin-bottom: .35rem;
}
.cal__copy::after { content: none; }

.cal__copy .eyebrow {
  border-top: 1px dashed var(--hairline);
  padding-top: .6rem;
  margin-bottom: var(--s-2);
}
.cal__copy .display {
  font-family: var(--font-mono);
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--paper-c);
  margin-bottom: var(--s-3);
}
/* Deliberate exception 2, again — mono inside the window */
.cal__copy p {
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.75;
  color: var(--gray-300);
}
.cal__copy p + p { margin-top: var(--s-2); }

/* the closing quote as an echoed line */
.pull {
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.7;
  border-left: 2px solid var(--orange);
  background: var(--ink-raised);
  padding: var(--s-2) var(--s-3);
  margin-top: var(--s-3);
  color: var(--paper-c);
}
.pull::before {
  content: "$ echo ";
  color: var(--gray-300);
}

@media (max-width: 56rem) {
  .cal { grid-template-columns: 1fr; }
  .portrait-ph::before { font-size: .62rem; }
}