/* ─────────────────────────────────────────────────────────────────────────────
   Agentcy Core — public landing page styles.

   PART 1 is a verbatim copy of brand/tokens/{colors,typography,spacing,
   effects}.css. It is copied rather than imported because deploy/site.Dockerfile
   ships site/ alone: an `@import '../brand/…'` would resolve locally and 404 in
   the container, which is exactly the class of drift that only shows up in
   production. Same precedent as workspace/src/styles/tokens/.

   brand/tokens/*.css remains the source of truth. If a token changes there,
   re-copy the block below; do not edit values here.

   tokens/fonts.css is deliberately NOT copied — its `@import` blocks rendering
   on a third-party request. index.html preconnects and links the same three
   families instead.

   PART 2 is the page itself and exists only here.
   ────────────────────────────────────────────────────────────────────────── */

/* ═══ PART 1 — tokens, copied verbatim ══════════════════════════════════════ */

/* --- brand/tokens/colors.css ---------------------------------------------- */
:root{
/* Base — paper & ink */
--paper-0:#FCFBF7;
--paper-1:#F5F3EC;
--paper-2:#EDEAE0;
--paper-3:#E4E0D3;
--ink-1:#1A1915;
--ink-2:#45433A;
--ink-3:#767366;
--ink-4:#9C9989;
--line-1:#DCD8C9;
--line-2:#C6C1AE;
--line-ink:#1A1915;
/* Accent — grape */
--grape-1:#3F196B;
--grape-2:#31124F;
--grape-3:#230C38;
--grape-wash:#EFE9F6;
--grape-line:#C9B9DE;
/* Verdicts (Compliance Gate: block / warn / log) */
--verdict-block:#A03219;
--verdict-block-wash:#F6E7E2;
--verdict-warn:#8F6508;
--verdict-warn-wash:#F5EDD8;
--verdict-log:#2E6B4A;
--verdict-log-wash:#E6F0E9;
/* Freshness (fact age) */
--fresh:#2E6B4A;
--aging:#8F6508;
--stale:#A03219;
/* Semantic aliases */
--surface-page:var(--paper-1);
--surface-card:var(--paper-0);
--surface-recessed:var(--paper-2);
--surface-inverse:var(--ink-1);
--text-body:var(--ink-1);
--text-secondary:var(--ink-2);
--text-muted:var(--ink-3);
--text-faint:var(--ink-4);
--text-on-inverse:var(--paper-0);
--text-interactive:var(--grape-1);
--border-hairline:var(--line-1);
--border-strong:var(--line-2);
--border-emphasis:var(--line-ink);
--interactive:var(--grape-1);
--interactive-hover:var(--grape-2);
--interactive-active:var(--grape-3);
--interactive-wash:var(--grape-wash);
--focus-ring:0 0 0 2px var(--paper-0),0 0 0 4px var(--grape-1);
}

/* --- brand/tokens/typography.css ------------------------------------------ */
:root{
--font-display:'Libre Caslon Text',Georgia,'Times New Roman',serif;
--font-ui:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
--font-mono:'Fragment Mono','SF Mono',Consolas,monospace;
/* Scale */
--text-display-xl:44px;--leading-display-xl:1.12;
--text-display:32px;--leading-display:1.18;
--text-title:22px;--leading-title:1.25;
--text-heading:17px;--leading-heading:1.35;
--text-body-size:15px;--leading-body:1.55;
--text-small:13px;--leading-small:1.45;
--text-mono:12.5px;--leading-mono:1.5;
--text-micro:11px;--leading-micro:1.4;
/* Weights (Hanken Grotesk) */
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
/* Tracking */
--tracking-label:0.08em;
--tracking-mono-label:0.06em;
}
body{font-family:var(--font-ui);font-size:var(--text-body-size);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--text-interactive);text-decoration:none;border-bottom:1px solid var(--grape-line)}
a:hover{color:var(--interactive-hover);border-bottom-color:currentColor}

/* --- brand/tokens/spacing.css --------------------------------------------- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--radius-1:2px;--radius-2:4px;--radius-3:8px;--radius-pill:999px;
--container-reading:680px;--container-page:1120px;
}

/* --- brand/tokens/effects.css --------------------------------------------- */
:root{
--shadow-lift:0 1px 2px rgba(26,25,21,.06),0 8px 24px rgba(26,25,21,.1);
--shadow-overlay:0 4px 12px rgba(26,25,21,.1),0 24px 64px rgba(26,25,21,.18);
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--rule-hairline:1px solid var(--line-1);
--rule-heavy:2px solid var(--ink-1);
}

/* ═══ PART 2 — the landing page ═════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}
body{margin:0}
img{display:block;max-width:100%}

:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-1)}

/* Layout ------------------------------------------------------------------- */
.wrap{max-width:var(--container-page);margin:0 auto;padding:0 var(--space-8)}
.reading{max-width:var(--container-reading)}

/* Ledger head: a 2px ink rule tops every major section, like a bound record. */
.section{border-top:var(--rule-heavy);padding:var(--space-5) 0 var(--space-16)}
.section:last-of-type{padding-bottom:var(--space-12)}

.section-label{font-family:var(--font-mono);font-size:var(--text-micro);line-height:var(--leading-micro);letter-spacing:var(--tracking-mono-label);text-transform:uppercase;color:var(--text-muted);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}

.section-title{font-family:var(--font-display);font-size:var(--text-display);line-height:var(--leading-display);font-weight:var(--weight-regular);margin:var(--space-8) 0 0}
.section-intro{margin:var(--space-4) 0 0;color:var(--text-secondary)}

.note{font-family:var(--font-mono);font-size:var(--text-mono);line-height:var(--leading-mono);color:var(--text-muted);margin:var(--space-4) 0 0}

/* Masthead ----------------------------------------------------------------- */
.masthead{border-bottom:var(--rule-hairline);background:var(--surface-page)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:64px;flex-wrap:wrap;padding-top:var(--space-3);padding-bottom:var(--space-3)}

.lockup{display:inline-flex;align-items:center;gap:var(--space-3);border-bottom:none;color:var(--text-body)}
.lockup:hover{color:var(--text-body)}
.lockup svg{width:26px;height:26px;flex:none}
.lockup__word{font-family:var(--font-display);font-size:var(--text-heading);line-height:1;letter-spacing:.01em}

.nav{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.nav a{font-size:var(--text-small);color:var(--text-secondary);border-bottom:1px solid transparent}
.nav a:hover{color:var(--text-body);border-bottom-color:var(--border-strong)}

/* Buttons ------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-size:var(--text-small);line-height:1;font-weight:var(--weight-medium);padding:11px var(--space-4);border-radius:var(--radius-1);border:1px solid var(--interactive);background:var(--interactive);color:var(--text-on-inverse);transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.btn:hover{background:var(--interactive-hover);border-color:var(--interactive-hover);color:var(--text-on-inverse)}
.btn:active{background:var(--interactive-active);border-color:var(--interactive-active)}
.btn svg{width:16px;height:16px;flex:none}

.btn--quiet{background:transparent;border-color:var(--border-strong);color:var(--text-body)}
.btn--quiet:hover{background:var(--surface-recessed);border-color:var(--border-emphasis);color:var(--text-body)}

.btn-row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8)}

/* Hero --------------------------------------------------------------------- */
.hero{border-top:var(--rule-heavy);padding:var(--space-5) 0 var(--space-16)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--space-12);align-items:center;margin-top:var(--space-10)}
.hero__title{font-family:var(--font-display);font-size:var(--text-display-xl);line-height:var(--leading-display-xl);font-weight:var(--weight-regular);margin:0;letter-spacing:-.005em}
.hero__lede{margin:var(--space-6) 0 0;color:var(--text-secondary);max-width:52ch}

.hero__figure{position:relative;margin:0}
.hero__figure img{width:100%;height:100%;aspect-ratio:1376/768;object-fit:cover;border-radius:0}

/* Overlay is a paper-0 capsule or ink-1 type — nothing else sits on the
   photographs (brand/readme.md, brand imagery). */
.capsule{position:absolute;left:var(--space-5);bottom:var(--space-5);right:var(--space-5);background:var(--paper-0);border:var(--rule-hairline);padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--text-mono);line-height:var(--leading-mono);color:var(--text-secondary)}
.capsule strong{font-weight:var(--weight-regular);color:var(--text-body)}

/* Ruled rows — the primary structural device -------------------------------- */
.rows{margin:var(--space-10) 0 0;border-top:var(--rule-hairline)}
.row{display:grid;grid-template-columns:3rem 15rem 1fr;gap:var(--space-6);padding:var(--space-5) 0;border-bottom:var(--rule-hairline);align-items:start}
.row__index{font-family:var(--font-mono);font-size:var(--text-mono);line-height:var(--leading-body);letter-spacing:var(--tracking-mono-label);color:var(--text-faint)}
.row__term{font-weight:var(--weight-semibold);line-height:var(--leading-body)}
.row__def{color:var(--text-secondary);margin:0}

.rows--tight .row{grid-template-columns:9rem 1fr}

/* Cards -------------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5);margin-top:var(--space-10)}
.card{background:var(--surface-card);border:var(--rule-hairline);border-radius:var(--radius-2);padding:var(--space-6)}
.card__label{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-mono-label);text-transform:uppercase;color:var(--text-muted);display:block}
.card__title{font-family:var(--font-display);font-size:var(--text-title);line-height:var(--leading-title);font-weight:var(--weight-regular);margin:var(--space-3) 0 0}
.card p{margin:var(--space-3) 0 0;color:var(--text-secondary)}
.card p + p{margin-top:var(--space-3)}

/* Ledger table ------------------------------------------------------------- */
.table-scroll{margin-top:var(--space-10);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:640px}
caption{text-align:left;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-mono-label);text-transform:uppercase;color:var(--text-muted);padding-bottom:var(--space-3)}
thead th{border-top:var(--rule-heavy);border-bottom:var(--rule-hairline);text-align:left;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-mono-label);text-transform:uppercase;font-weight:var(--weight-regular);color:var(--text-muted);padding:var(--space-3) var(--space-4) var(--space-3) 0}
tbody td{border-bottom:var(--rule-hairline);padding:var(--space-4) var(--space-4) var(--space-4) 0;vertical-align:top;font-size:var(--text-small);line-height:var(--leading-body);color:var(--text-secondary)}
tbody th{border-bottom:var(--rule-hairline);padding:var(--space-4) var(--space-4) var(--space-4) 0;vertical-align:top;text-align:left;font-weight:var(--weight-semibold);font-size:var(--text-small);white-space:nowrap}
tbody tr{transition:background var(--duration-fast) var(--ease-standard)}
tbody tr:hover{background:var(--surface-recessed)}
td .limit{color:var(--text-muted)}

/* Mono metadata label — evidence, not decoration. */
.stamp{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-mono-label);text-transform:uppercase;color:var(--text-muted)}

/* Full-bleed band ---------------------------------------------------------- */
.band{position:relative;margin:0;border-top:var(--rule-heavy)}
.band img{width:100%;height:clamp(220px,32vw,380px);object-fit:cover;object-position:center 42%}
.band .capsule{left:auto;right:auto;bottom:var(--space-8);max-width:min(560px,calc(100% - var(--space-16)));margin-left:var(--space-8);font-family:var(--font-display);font-size:var(--text-title);line-height:var(--leading-title);color:var(--text-body);padding:var(--space-5) var(--space-6)}

/* Two-column boundary ledger ----------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);margin-top:var(--space-10)}
.list{list-style:none;margin:var(--space-5) 0 0;padding:0;border-top:var(--rule-hairline)}
.list li{padding:var(--space-4) 0;border-bottom:var(--rule-hairline);color:var(--text-secondary);font-size:var(--text-small);line-height:var(--leading-body)}
.list li b{font-weight:var(--weight-semibold);color:var(--text-body)}
.column-head{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-mono-label);text-transform:uppercase;color:var(--text-muted);margin:0}

/* Numbered scope list ------------------------------------------------------- */
.steps{counter-reset:step;list-style:none;margin:var(--space-10) 0 0;padding:0;border-top:var(--rule-hairline)}
.steps li{counter-increment:step;position:relative;padding:var(--space-5) 0 var(--space-5) 3rem;border-bottom:var(--rule-hairline);color:var(--text-secondary)}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:var(--space-5);font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--tracking-mono-label);color:var(--text-faint)}
.steps li b{font-weight:var(--weight-semibold);color:var(--text-body)}

/* Statement ---------------------------------------------------------------- */
.statement{font-family:var(--font-display);font-size:var(--text-title);line-height:var(--leading-title);color:var(--text-body);margin:var(--space-8) 0 0;max-width:var(--container-reading)}

/* Footer ------------------------------------------------------------------- */
.footer{border-top:var(--rule-heavy);padding:var(--space-8) 0 var(--space-12)}
.footer__grid{display:flex;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;align-items:flex-start}
.footer__meta{font-family:var(--font-mono);font-size:var(--text-micro);line-height:var(--leading-mono);letter-spacing:var(--tracking-mono-label);color:var(--text-muted);margin:var(--space-4) 0 0}
.footer__meta span{display:block}
.footer__links{display:flex;gap:var(--space-6);flex-wrap:wrap;font-size:var(--text-small)}
.footer__links a{color:var(--text-secondary);border-bottom:1px solid transparent}
.footer__links a:hover{color:var(--text-body);border-bottom-color:var(--border-strong)}

/* Responsive ---------------------------------------------------------------- */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:var(--space-8)}
  .split{grid-template-columns:1fr;gap:var(--space-8)}
  .row{grid-template-columns:2.5rem 1fr;gap:var(--space-3) var(--space-4)}
  .row__def{grid-column:2}
  .rows--tight .row{grid-template-columns:1fr}
  .rows--tight .row__def{grid-column:1}
  .band .capsule{margin-left:var(--space-5);margin-right:var(--space-5);max-width:none;bottom:var(--space-5);font-size:var(--text-heading);line-height:var(--leading-heading)}
}

@media (max-width:640px){
  .wrap{padding:0 var(--space-5)}
  .hero__title{font-size:var(--text-display)}
  .section-title{font-size:var(--text-title)}
  .section{padding-bottom:var(--space-12)}
  .nav{gap:var(--space-4)}
  .nav .nav__link{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms!important;animation-duration:1ms!important}
}