/* ============================================================================
   THE AMP SITE DESIGN SYSTEM — one system, three doors.

   Brad, 7 Sep 2026: "Yes, methodology doors." The root, /audiovibes and /aba
   are not three brands and not three audiences. They are one house — ABA — with
   doors cut for different arrivals. A reader who walks from one to another must
   feel he never left the building.

   That constraint is enforced HERE rather than remembered. There is exactly one
   stylesheet. A door does not get its own look; it gets one token:

       --door            the accent rail and eyebrow colour for this door

   Nothing else varies. If a future page needs a second variable to look right,
   the page is wrong, not the system.

   Ground is near-black slate, type is cream, display type and marks are
   champagne gold — the brand as shipped, per the ABA brand kit. Orange is an
   accent and never a fill.
   ========================================================================= */

/* Fonts are served from this origin as ordinary files. S2's zero-external-
   request rule governs the TOOL BUILD, which must be provably self-contained;
   it does not govern the host page, and a same-origin font file discloses
   nothing to a third party. Five faces, not ten — every weight here is used. */
@font-face{font-family:Chivo;src:url(/fonts/chivo-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Chivo;src:url(/fonts/chivo-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  /* Champagne gold. --g-face is a ramp, not a tint: the top-and-bottom return
     is what reads as bevelled metal. A flat gold does not, at any weight. */
  --g-hi:#FFF6DA; --g-1:#F2DCA0; --g-2:#D9B85F; --g-3:#A8842C; --g-4:#6E5417;
  --g-face:linear-gradient(180deg,#FFF6DA 0%,#F2DCA0 20%,#D9B85F 44%,
           #A8842C 54%,#6E5417 64%,#D9B85F 80%,#FFF6DA 100%);

  --teal:#0D6E60; --teal-2:#12907C; --teal-edge:#1FB89E;
  --taupe:#7C7359; --taupe-2:#968B6C;
  --orange:#BF510C; --orange-2:#E0731C;   /* accent only — never a fill */
  --cyan:#35D2E6; --violet:#A78BFA;       /* AudioVibes only, sparingly */

  /* RED IS NOT DECORATION AND IT IS NOT A SECOND ORANGE. It carries exactly one
     meaning on this site: an hour that missed the estimate. That is Brad's own
     convention, carried in from the Cost Management Tool, where overruns are
     documented in red on the signed milestone. Never use it for an error state,
     a destructive button or emphasis — the moment it appears anywhere but a
     variance, the one thing it means stops meaning anything. Orange stays the
     delivery accent, and the two never appear in the same component. */
  --red:#A82219; --red-2:#CE3527;

  --slate:#0E171E; --slate-2:#16222B; --slate-3:#1E2C36;
  --ink:#0A1015;
  --cream:#F8F2E6;
  --cream-2:rgba(248,242,230,.86);
  --cream-3:rgba(248,242,230,.56);
  --hair:rgba(248,242,230,.14);

  /* The one per-door token. Home is gold; the doors carry their own rail. */
  --door:var(--g-2);

  --wrap:clamp(20px,5vw,64px);
  --max:1180px;
  --read:68ch;      /* a measure, so body copy never runs the full 1180 */
}

[data-door="audiovibes"]{--door:var(--cyan)}
[data-door="aba"]{--door:var(--teal-edge)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--slate);
  color:var(--cream);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:clamp(17px,.6vw + 15px,19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;          /* the punch list forbids sideways scroll */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Skip link — the first focusable thing on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--cream);color:var(--ink);padding:12px 18px;border-radius:0 0 8px 0;
  font-weight:500}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--g-1);outline-offset:3px;border-radius:3px}

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

/* ---------------------------------------------------------------- type ---- */
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  color:var(--door)}
.display{font-family:Chivo,system-ui,sans-serif;font-weight:900;
  letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2.1rem,5.2vw,4rem)}
h2{font-family:Chivo,system-ui,sans-serif;font-weight:900;letter-spacing:-.025em;
  line-height:1.1;font-size:clamp(1.5rem,2.6vw,2.15rem)}
h3{font-family:Chivo,system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;
  line-height:1.22;font-size:1.06rem}
p{max-width:var(--read)}
p + p{margin-top:1em}
.lede{font-size:clamp(1.06rem,1.5vw,1.3rem);color:var(--cream-2);line-height:1.55}

/* THE ORIENTATION LINE — one sentence under an h1 saying what this page is and
   what house it is in.
   Why every page needs one: a door is by definition where people arrive without
   having read anything first. Someone following a link from elsewhere lands on
   /aba cold, not knowing AMP exists, that there is a tool, or that there is a
   rulebook behind it. Without this line the site is eight arguments and no
   context — which is exactly what it was on 8 Sep 2026 before Brad said so. */
.orient{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.82rem;
  line-height:1.55;color:var(--cream-3);margin-top:.9rem;
  border-left:2px solid var(--door);padding-left:14px;max-width:60ch}
.small{font-size:.86rem;color:var(--cream-3)}
strong{font-weight:500;color:var(--cream)}

/* Gold display type. Two stacked spans, not a text-shadow: background-clip on
   text paints a shadow OVER the gradient, so the drop has to be its own layer
   underneath. Both spans carry the same string; aria-hidden on the drop keeps
   a screen reader from reading the word twice. */
.metal{position:relative;display:inline-block;font-family:Chivo,sans-serif;
  font-weight:900;letter-spacing:-.025em;line-height:1.02;white-space:nowrap}
.metal .drop{position:absolute;left:0;right:0;top:3px;color:#2A1F08}
.metal .face{position:relative;background:var(--g-face);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* -------------------------------------------------------------- chrome ---- */
.masthead{position:sticky;top:0;z-index:20;
  background:rgba(14,23,30,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair)}
.masthead .wrap{display:flex;align-items:center;gap:clamp(14px,3vw,34px);
  min-height:74px;flex-wrap:wrap}

/* THE LOCKUP. The dark-ground file, because this site is dark. The light-ground
   file — identical but for the subtitle colour — is at /assets/amp-lockup-light.png
   for white documents, print and light-mode feeds.
   Why two files rather than one: the subtitle is cream, which measures 16.26:1
   on this slate and 1.11:1 on white. Functionally invisible on white, and the
   subtitle is the ONLY place the parent name appears — on a light ground the
   one-file version turns AMP into an acronym of nothing.
   Height is held at 58px, close to the 70px the lockup was drawn at. Below
   about 44px the subtitle stops resolving, so it must not be scaled down
   further; use the plectrum alone if a smaller mark is ever needed. */
.brandline{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.brandline img{height:58px;width:auto}
/* NO mobile shrink. A 48px version was tried at 390px and the subtitle went to
   a smudge — the exact failure the height note above describes. The lockup is
   166px wide, which fits a 390px viewport with the nav wrapping beneath it, so
   there is nothing to gain by shrinking it and a brand name to lose. */
nav.doors{display:flex;gap:clamp(10px,2vw,22px);flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;letter-spacing:.04em}
nav.doors a{text-decoration:none;color:var(--cream-3);padding:6px 2px;
  border-bottom:2px solid transparent}
nav.doors a:hover{color:var(--cream)}
nav.doors a[aria-current="page"]{color:var(--cream);border-bottom-color:var(--door)}
/* Sign in is not a door. It is set apart so it does not read as a fourth room
   in a house that has three. */
nav.doors a.signin{margin-left:auto;padding:6px 14px;border:1px solid var(--hair);
  border-radius:8px;color:var(--cream-2)}
nav.doors a.signin:hover{border-color:var(--g-3);color:var(--cream)}
nav.doors a.signin[aria-current="page"]{border-color:var(--door);color:var(--cream)}

/* --------------------------------------------------------------- blocks --- */
section{padding-block:clamp(46px,7vw,86px)}
section + section{border-top:1px solid var(--hair)}

/* ASYMMETRIC ON PURPOSE. The old value was clamp(58px,10vw,120px) top and
   bottom — drama for a hero that opened on a hook. The home page's job is now
   to IDENTIFY, and 120px of dark above the first line pushes the sentence that
   says what this is below where the eye lands. Less above, and the space kept
   below, where it still separates the hero from the section under it. */
.hero{padding-block:clamp(34px,4.5vw,60px) clamp(52px,8vw,96px)}
.hero .display{margin-top:.5rem;max-width:16ch}
.hero .lede{margin-top:1.4rem}

.rail{border-left:3px solid var(--door);padding-left:clamp(16px,2.4vw,26px)}

.grid{display:grid;gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
/* FOUR cards in a three-column grid leaves an orphan on the second row, which
   reads as a mistake rather than a set. .pair holds two per row, so four make a
   square and each card gets the width its longer text wants. */
.grid.pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

.card{background:var(--slate-2);border:1px solid var(--hair);border-radius:14px;
  padding:clamp(18px,2.4vw,26px);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--door)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--cream-2);font-size:1rem;max-width:none}

/* A card that ENDS IN A CONTROL rather than a sentence. Three cards never hold
   the same amount of copy, so three inline links land at three different
   heights and the row reads as unfinished. This pushes the control to the
   bottom of whichever card is tallest and lines all of them up.
   Use .card.act only where the card's job is to send the reader somewhere.
   Inside one, the button is ALWAYS .btn.ghost — see the note on .btn below. */
.card.act{display:flex;flex-direction:column}
.card.act .btns{margin-top:auto;padding-top:1.4rem;margin-bottom:0}

/* A quoted canonical statement. It is quoted because it is canonical — the
   wording is owned by SECURITY_CANONICAL.md and echoed verbatim, never
   paraphrased. The monospace face is the tell that these words are fixed. */
.canon{background:var(--slate-2);border:1px solid var(--hair);
  border-left:3px solid var(--g-2);border-radius:0 12px 12px 0;
  padding:clamp(16px,2.2vw,24px);font-family:"IBM Plex Mono",monospace;
  font-size:.9rem;line-height:1.6;color:var(--cream-2)}
.canon + .canon{margin-top:14px}
.canon b{color:var(--cream);font-weight:500}

/* A statement's label and status. The status is part of the statement: an open
   item presented without its status is a different claim. */
.stmt{margin-top:2rem}
.stmt-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:.7rem}
.stmt-id{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.8rem;
  letter-spacing:.1em;color:var(--g-2)}
.stmt-head h3{font-size:1rem}
.status{font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.13em;padding:3px 9px;border-radius:99px;
  border:1px solid currentColor}
.status.open{color:var(--orange-2)}
.status.withdrawn{color:var(--taupe-2)}
.note{font-size:.88rem;color:var(--cream-3);margin-top:.6rem;max-width:var(--read)}

/* A withdrawn statement stays on the page it was withdrawn from. Struck, not
   deleted — that is the promise the home page makes, kept here. */
.canon.struck{border-left-color:var(--taupe-2);opacity:.72}
.canon.struck s{text-decoration-thickness:1px}

.btn{display:inline-flex;align-items:center;gap:.6em;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:.86rem;letter-spacing:.04em;
  padding:13px 22px;border-radius:10px;border:1px solid var(--g-3);
  background:linear-gradient(180deg,var(--g-1),var(--g-2));color:var(--ink);
  font-weight:600}
.btn:hover{background:linear-gradient(180deg,#FFF6DA,var(--g-1))}
/* GOLD IS THE PRIMARY ACTION AND THERE IS ONE PER SECTION. Gold says "this is
   the thing to do"; a row of three gold buttons says nothing is, and the one
   that actually matters loses. Navigation between pages is .btn.ghost. The one
   gold button on a page is the ask. */
.btn.ghost{background:none;color:var(--cream);border-color:var(--hair)}
.btn.ghost:hover{border-color:var(--door);background:var(--slate-2)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.8rem}

/* The tool's frame. Fixed tall rather than auto-sizing: auto-sizing needs a
   height ping from inside the frame, and acting on a posted message — even a
   number — is a listener this page does not currently need. The tool scrolls
   inside its own frame instead, which costs a little elegance and adds no
   message handling at all. */
.frame{border:1px solid var(--hair);border-radius:14px;overflow:hidden;
  background:var(--slate-2)}
.frame iframe{display:block;width:100%;height:min(1400px,180vh);border:0}

/* Wide content scrolls inside its own box. The page body never scrolls
   sideways — punch list, rendering section. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================================
   THE LEDGERS — the same nine intervals, settled or not settled.

   This is the on-page twin of the forwardable graphic, and it is HTML rather
   than a PNG for four reasons, in order of how much they matter:

     1. preflight_site.py cannot read a picture. The claims inside this block —
        the gate wording, the red-variance wording — are echoes of approved
        sentences, and an echo the linter cannot see is an echo nobody is
        checking. Ship the argument as an image and the gate has a hole in it
        exactly where the claims are.
     2. It reflows. A 3000px two-column comparison does not survive 390px, and
        390px is the width this site is actually tested at.
     3. It is real text, so it needs no heroic alt copy and it can be selected,
        searched and read aloud.
     4. It weighs nothing. The PNG is 968 KB against a 740 KB site.

   WHAT IS LOAD-BEARING IN THE DRAWING. Both columns are built from the SAME
   two elements — a bar and a status. The argument is not "one side is untidy":
   it is that identical events resolve differently. On the left nothing closes,
   so each bar carries the last one forward and the accumulation IS the shape.
   On the right each bar settles where it happened, so none of them travels.
   Keep the elements identical or the point goes.

   THE BAR WIDTHS ARE A SHAPE, NOT DATA, and must never be presented as data.
   No axis, no scale, no figures. A fabricated number on a graphic about
   estimate integrity would be the exact defect the method exists to prevent.

   THE STACKED CASE. Below about 740px the columns stack and the adjacency —
   which is most of the argument — is lost. The two headings are written to
   carry the contrast in words alone for exactly that reason. Do not shorten
   them to fit.
   ========================================================================= */
.ledgers{display:grid;gap:clamp(16px,2.2vw,26px);margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}

.ledger{background:var(--slate-2);border:1px solid var(--hair);border-radius:14px;
  padding:clamp(18px,2.4vw,24px);position:relative;overflow:hidden;
  display:flex;flex-direction:column}
.ledger::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.ledger.now::before{background:var(--red-2)}
.ledger.aba::before{background:var(--door)}
.ledger .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;
  margin-bottom:.55rem}
.ledger.now .k{color:var(--red-2)}
.ledger.aba .k{color:var(--door)}
.ledger h3{font-size:1.12rem;margin-bottom:1.1rem}

.lrows{border-top:1px solid var(--hair)}
.lrow{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--hair)}
.lrow .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;
  letter-spacing:.08em;color:var(--cream-3);flex:0 0 1.55em}
.ltrack{flex:1 1 auto;min-width:0;display:block}
/* display:block is load-bearing, not tidiness. These are <span>s, and width and
   height do nothing on an inline box — the first build of this section rendered
   nine empty rows on both sides and lost the entire argument. */
.lbar{display:block;height:8px;border-radius:99px;min-width:6px}
.lbar.carry{background:linear-gradient(90deg,rgba(168,34,25,.5),var(--red-2))}
.lbar.over{background:var(--red-2)}
.lbar.under{background:var(--teal-edge)}

.ltag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;flex:0 0 auto;
  white-space:nowrap}
.ltag.settled{color:var(--teal-edge);border:1px solid rgba(31,184,158,.34);
  border-radius:99px;padding:3px 9px}
/* No border and no pill on the unresolved one. A thing that has not been dealt
   with must not be dressed as a badge. */
.ltag.carried{color:rgba(206,53,39,.8);padding:3px 0}
@media (max-width:560px){ .ltag .long{display:none} }

.lfoot{margin-top:1.1rem;border-radius:11px;padding:14px 15px}
.ledger.now .lfoot{background:rgba(168,34,25,.16);border:1px solid rgba(206,53,39,.42)}
.ledger.aba .lfoot{background:rgba(13,110,96,.16);border:1px solid rgba(31,184,158,.34)}
.lfoot h4{font-family:Chivo,system-ui,sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:-.01em;line-height:1.2;margin-bottom:.4rem}
.ledger.now .lfoot h4{color:#F2A9A2}
.ledger.aba .lfoot h4{color:var(--teal-edge)}
.lfoot p{font-size:.9rem;line-height:1.5;color:var(--cream-2);max-width:none}

footer.foot{border-top:1px solid var(--hair);padding-block:38px;
  color:var(--cream-3);font-size:.86rem}
footer.foot .wrap{display:flex;gap:18px 34px;flex-wrap:wrap;align-items:baseline}
footer.foot a{color:var(--cream-2);text-decoration:none;border-bottom:1px solid var(--hair)}
footer.foot a:hover{color:var(--cream)}
footer.foot .copy{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}