/* zillaai.pro
   Palette inherited from the existing site - the lime on near-black is established
   identity, not a new choice. What changed is the typography: the old site declared
   Inter / Manrope / Space Grotesk and never loaded a single one of them, so it had
   been rendering in system fallbacks. Archivo now carries structure, and body copy
   is set in a serif because this site's job is to be READ, not scanned for status.

   Committed single theme. The brand is dark; there is no light variant to design.
   Every colour is therefore painted explicitly and nothing is inherited from a host. */

:root {
  --bg: #05090D;
  --bg-2: #07131A;
  --panel: rgba(12, 24, 32, 0.76);
  --border: #26343A;
  --border-soft: rgba(182, 255, 26, 0.22);
  --text: #E8EEF2;
  --muted: #9AA6AD;
  --dim: #627078;
  --signal: #B6FF1A;
  --cyan: #00D8FF;
  --violet: #A78BFA;

  --display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.14rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------- structure */

.shell { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }

header.site {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
header.site .shell {
  display: flex; align-items: baseline; gap: 28px;
  padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 1.06rem;
  letter-spacing: -0.01em; color: var(--text); text-decoration: none;
}
.wordmark span { color: var(--signal); }
nav.site { margin-left: auto; display: flex; gap: 22px; }
nav.site a {
  font-family: var(--display); font-size: .84rem; font-weight: 500;
  letter-spacing: .04em; color: var(--muted); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
nav.site a:hover { color: var(--text); }
nav.site a[aria-current="page"] { color: var(--signal); border-bottom-color: var(--border-soft); }

main { padding: clamp(44px, 7vw, 88px) 0 96px; }

footer.site {
  border-top: 1px solid var(--border);
  padding: 30px 0 60px;
  color: var(--dim);
  font-family: var(--display);
  font-size: .82rem;
}
footer.site .shell { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--signal); }
footer.site .spacer { margin-left: auto; }

/* ------------------------------------------------------------------------- type */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.05rem, 5.2vw, 3.15rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.72rem); margin-top: 2.4em; margin-bottom: .5em; }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1.25em; }
a { color: var(--text); text-decoration-color: var(--border-soft);
    text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal); text-decoration-color: var(--signal); }

strong { color: #fff; font-weight: 600; }
em { color: var(--text); }

blockquote {
  margin: 1.8em 0; padding-left: 22px;
  border-left: 2px solid var(--border-soft);
  color: var(--muted); font-style: italic;
}
hr { border: 0; border-top: 1px solid var(--border); margin: 3em 0; }

ul, ol { margin: 0 0 1.25em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
li::marker { color: var(--dim); }

code {
  font-family: var(--mono); font-size: .86em;
  background: var(--bg-2); border: 1px solid var(--border);
  padding: .08em .34em; border-radius: 3px; color: var(--cyan);
}
pre {
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 16px 18px; overflow-x: auto; margin: 1.6em 0;
}
pre code { background: none; border: 0; padding: 0; color: var(--text); font-size: .82rem; }

.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 16px;
}

/* --------------------------------------------------------------------- home lede */

.lede { margin-bottom: clamp(56px, 9vw, 104px); }
.lede h1 { margin-bottom: .5em; }
.lede .standfirst {
  font-size: clamp(1.16rem, 1.5vw, 1.4rem);
  line-height: 1.55; color: var(--muted); max-width: 58ch; margin: 0;
}

/* ------------------------------------------------------------------------ entries */

.entries { list-style: none; margin: 0; padding: 0;
           border-top: 1px solid var(--border); }
/* An entry is now art + text rather than date + text. The date used to occupy its own
   11rem column; it moves inside the text block so the artwork can have the column, and
   the thumbnail keeps a two-column layout all the way down to phone width rather than
   stacking - thirteen full-bleed 1200x630 cards stacked would turn the archive into a
   scroll. */
.entry { border-bottom: 1px solid var(--border); }
.entry a {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0 26px;
  padding: 26px 0; text-decoration: none; color: inherit; align-items: start;
}
.entry-art {
  display: block; width: 100%; height: auto; aspect-ratio: 600 / 315;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg-2);
}
.entry a:hover .entry-art { border-color: var(--border-soft); }
.entry-text { display: block; }
.entry time {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: .78rem; color: var(--dim);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.entry h3 { margin: 0; color: var(--text); }
.entry p { margin: .3em 0 0; color: var(--muted); font-size: .96rem; }
.entry a:hover h3 { color: var(--signal); }
@media (max-width: 640px) {
  .entry a { grid-template-columns: 6.5rem 1fr; gap: 0 16px; padding: 20px 0; }
  .entry time { margin-bottom: 4px; font-size: .72rem; }
  .entry p { font-size: .9rem; }
}

.section-label {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px;
}
.section-label h2 {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0;
}
.section-label a {
  margin-left: auto; font-family: var(--display); font-size: .8rem;
  color: var(--dim); text-decoration: none;
}
.section-label a:hover { color: var(--signal); }

/* -------------------------------------------------------------------------- post */

article.post header { margin-bottom: clamp(34px, 5vw, 52px); }
article.post h1 { margin-bottom: .45em; }
article.post .standfirst {
  font-size: 1.2rem; line-height: 1.55; color: var(--muted);
  max-width: 58ch; margin: 0 0 18px;
}
article.post .meta {
  font-family: var(--mono); font-size: .78rem; color: var(--dim);
  letter-spacing: .02em; padding-top: 14px; border-top: 1px solid var(--border);
}
article.post > *:not(header) { max-width: var(--measure); }
article.post h2 { color: var(--text); }

.postnav {
  margin-top: clamp(48px, 7vw, 80px); padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: var(--display); font-size: .86rem;
}

/* ------------------------------------------------------------------ focus / motion */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- review record
   A signed, dated human review on AI-assisted writing. Shown even when there has
   not been one, because concealing the pending state would defeat the purpose. */
.review {
  margin-top: clamp(40px, 6vw, 64px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--signal);
  padding: 20px 22px;
  background: var(--bg-2);
  max-width: var(--measure);
}
.review.pending { border-left-color: var(--dim); }
.review-h {
  font-family: var(--display); font-weight: 600; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 10px;
}
.review.pending .review-h { color: var(--muted); }
.review p { margin: 0; font-size: .93rem; color: var(--muted); }
.review ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.review li time {
  font-family: var(--mono); font-size: .78rem; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.review li .by { font-family: var(--display); font-size: .82rem; color: var(--text); margin-left: 10px; }
.review li p { margin-top: 5px; color: var(--muted); }

/* ------------------------------------------------------------- front page trace
   Same motif as the social cards, inline so there is no extra request and no script
   (script-src is 'none'). Decorative, hidden from assistive tech. */
:root { --trace: #223a41; }
.trace {
  display: block; width: 100%; height: clamp(70px, 12vw, 130px);
  margin: clamp(30px, 5vw, 44px) 0 clamp(38px, 6vw, 60px);
}
.lede h1 { margin-bottom: .5em; }
.lede .measure > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- mobile type scale fix
   H2 was rendering nearly as large as H1 on a phone, so section headings competed
   with the page title and the hierarchy collapsed. */
@media (max-width: 640px) {
  h1 { font-size: 2.05rem; line-height: 1.1; }
  h2 { font-size: 1.22rem; margin-top: 2em; }
  body { font-size: 1.0rem; line-height: 1.62; }
  .lede .standfirst, article.post .standfirst { font-size: 1.06rem; }
  .entry a { padding: 20px 0; }
}

/* The lede's bottom margin and the trace's top margin were stacking into a dead band.
   The trace now owns that spacing on the front page. */
.lede:has(+ .trace) { margin-bottom: 0; }
.trace { margin-top: clamp(18px, 3vw, 26px); }

/* ------------------------------------------------------------------- proof block
   The front page's one piece of evidence. Deliberately quieter than the lede: this
   earns attention by being checkable, not by being loud. Same bordered-panel family
   as .review, since both exist to show a record rather than make a claim. */
.proof {
  max-width: var(--measure);
  margin: clamp(40px, 7vw, 76px) 0 clamp(32px, 5vw, 56px);
  padding: clamp(22px, 3.5vw, 32px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--signal);
  background: var(--bg-2);
}
.proof-eyebrow {
  font-family: var(--display); font-weight: 600; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 10px;
}
.proof h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 0 0 .7em; }
.proof p { margin: 0 0 1.1em; }
.proof > p:last-child { margin-bottom: 0; }

.proof-record {
  margin: 1.6em 0;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 16px 18px;
}
.proof-record dl { margin: 0; display: grid; gap: 7px; }
.proof-record dl > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 14px; align-items: baseline;
}
.proof-record dt {
  font-family: var(--mono); font-size: .74rem; color: var(--dim);
  letter-spacing: .04em; text-transform: uppercase;
}
.proof-record dd {
  margin: 0; font-family: var(--mono); font-size: .82rem; color: var(--text);
}
.proof-record dl > div:first-child dd { color: var(--signal); }
.proof-note {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: .84rem; color: var(--dim);
}
@media (max-width: 640px) {
  .proof-record dl > div { grid-template-columns: 1fr; gap: 2px; }
  .proof-record dd { padding-bottom: 4px; }
}

/* ---------------------------------------------------------------------------
   Product surface (2026-09-13). The site was a four-post essay blog on a domain
   that is now the product's own; these are the pieces a company site needs and a
   writing archive does not. Tokens above are reused unchanged - this adds layout,
   not a second palette.
   --------------------------------------------------------------------------- */

.hero { padding: clamp(28px, 6vw, 64px) 0 clamp(6px, 2vw, 14px); }
.hero .eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--signal); margin: 0 0 18px;
}
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 6.2vw, 62px); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0 0 20px; max-width: 20ch;
}
.hero .standfirst {
  font-size: clamp(18px, 2.3vw, 22px); line-height: 1.55;
  color: var(--muted); max-width: 60ch; margin: 0 0 30px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.btn {
  display: inline-block; padding: 11px 20px; border: 1px solid var(--border);
  border-radius: 3px; font-family: var(--display); font-weight: 600;
  font-size: 14.5px; letter-spacing: .3px; color: var(--text); text-decoration: none;
}
.btn:hover { border-color: var(--border-soft); color: var(--signal); }
.btn.primary { background: var(--signal); border-color: var(--signal); color: #05090D; }
.btn.primary:hover { background: #c8ff4d; border-color: #c8ff4d; color: #05090D; }

/* Wider than .measure: the home page carries commitment blocks, not running prose. */
.prose-wide { max-width: 78ch; }
.prose-wide h2 {
  font-family: var(--display); font-size: clamp(21px, 2.6vw, 27px);
  letter-spacing: -0.01em; margin: clamp(38px, 5vw, 56px) 0 14px;
  padding-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--border);
}
.prose-wide h2:first-child { border-top: 0; padding-top: 0; margin-top: 6px; }
/* Each commitment gets a signal rule, so the list reads as a set of claims that can
   be held against the finished product rather than as marketing subheadings. */
.prose-wide h3 {
  font-family: var(--display); font-size: 17.5px; letter-spacing: .1px;
  margin: 28px 0 8px; padding-left: 13px; border-left: 2px solid var(--signal);
}
.prose-wide p { max-width: 68ch; }

@media (max-width: 620px) {
  .hero h1 { max-width: none; }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---- control board inside a proof panel ----
   A graded status list, rendered rather than screenshotted: the structure of a real
   board is the disclosure risk, and blurring cannot remove structure without also
   removing what made the image worth showing. Three states carry the argument -
   bad (never ran / silent), warn (armed but unverified), ok (within its cadence). */
.proof-record .board div{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.proof-record .board div:last-child{border-bottom:0}
.proof-record .board dt{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.2px}
.proof-record .board dd{margin:0;font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap}
.proof-record .board dd.bad{color:#ff8a8a}
.proof-record .board dd.warn{color:var(--signal)}
.proof-record .board dd.ok{color:#8fd8a8}
@media (max-width:560px){
  .proof-record .board div{flex-direction:column;gap:3px}
  .proof-record .board dd{text-align:left}
}

/* The console figure: product imagery, placed after the argument rather than before it.
   A picture of a dashboard above the fold is a claim; the same picture underneath the six
   commitments is an illustration of them, which is the only thing it is entitled to be.
   Sized by the measure so it lines up with the prose above it rather than bleeding wide. */
.console {
  max-width: var(--measure);
  margin: clamp(40px, 7vw, 76px) 0 clamp(24px, 4vw, 44px);
}
.console img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-2);
}
/* Two-part, like .proof: a mono label that states the status of the image, then the
   explanation in the reading face. The whole caption was mono at first - correct size,
   correct colour, and still a wall, because 300 characters of monospace is a thing the
   eye skips rather than reads. The label is the part that must survive a glance. */
.console figcaption {
  font-family: var(--body); font-size: .95rem; line-height: 1.65;
  color: var(--muted); margin-top: 14px;
}
.console-label {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 6px;
}

/* The bands. The site had a colour scheme and prose and no pictures - the drawn
   console and the seeded traces are diagrams, and a diagram is not a photograph.
   These are made on the estate's own GPU, one per page, from a single family:
   infrastructure at night, seen from altitude, lit in the site's own accent. It is
   the argument as an image - the work happening in real places you can point at,
   in the dark, mostly unlit. Full shell width, because a teaser that hedges is not
   a teaser. */
.band {
  position: relative;
  margin: clamp(26px, 4vw, 42px) 0 clamp(30px, 5vw, 52px);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
}
.band img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1536 / 640; object-fit: cover;
}
/* The image runs to the page ground at its lower edge instead of stopping at a
   hard line, so it reads as part of the page rather than a pasted-in rectangle. */
.band::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
@media (max-width: 640px) {
  .band img { aspect-ratio: 16 / 10; }
}