/* AĞUSTOS DESIGN SYSTEM v7.4.2 · GENERATED DISTRIBUTION KIT CSS
   Sources: tokens/design-tokens.json + brand/brands.json + tokens/web.css.tmpl
   Do not hand-edit this file. Run: python3 scripts/build_design_system.py */

/* -- 1. CSS variables ---------------------------------------- */

:root {
  /* Substrate — white is the paper. Cream is a callout band only. */
  --paper:        #ffffff;
  --paper-white:  #ffffff;
  --cream:        #fdf5f5;
  --surface:      #ebebeb;

  /* Footer is light: white paper under a hairline. It never follows the theme invert. */
  --footer-paper: #ffffff;
  --footer-ink:   #15130f;
  --footer-cta-hover: #404040;

  /* Ink */
  --ink:        #15130f;
  --ink-soft:   #404040;
  --ink-faint:  #8a8378;

  /* Rule */
  --rule:        #e8e4da;
  --rule-white:  #e8e4da;

  /* Semantic state colors for product and application surfaces */
  --state-success: #1f6b4a;
  --state-warning: #8a5a00;
  --state-danger:  #b42318;
  --state-info:    #1a4d8f;

  /* Shared signal. Red is rationed: the logo, the 2px content-link rule, the
     2px current-page menu rule, keyboard focus, and one highlighter stroke
     per page. Never a button, never a fill. */
  --signal: #cf142a;

  /* Shared spacing and measures */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 80px;
  --measure-content: 1180px;
  --measure-gutter: 32px;
  --measure-text: 54ch;
  --measure-body: 41rem;
  --control-min: 44px;
  --sidebar-width: 240px;
  /* The sticky bar below 1024px: a 44px target, 8px above and below, and the rule.
     The bar and the anchor scroll offset both read it. */
  --sidebar-bar-height: calc(var(--control-min) + 2 * var(--space-xs) + 1px);
  /* The sticky top menu at every width: a 44px target, the chrome padding above and below, and the rule.
     The menu and the anchor scroll offset both read it. */
  --site-header-height: calc(var(--control-min) + 2 * 10px + 1px);
  /* The phone search row under the top menu: a 44px field, 8px above and below, and the rule. */
  --site-header-search-height: calc(var(--control-min) + 2 * var(--space-xs) + 1px);
  /* The three heights above equal the rendered chrome. A browser scrolls to whole
     pixels, so a target at a fractional position can stop up to 1px under the
     sticky chrome. Every anchor offset adds this 1px. */
  --anchor-snap: 1px;

  /* The one section spacing: sections, the closing band, and the gap after the hero. */
  --section-space: clamp(72px, 9vw, 104px);

  /* Named type sizes for adapter chrome and native platform mappings */
  --size-footnote: 13px;
  --size-body-compact: 15.5px;
  --size-body: 16.5px;

  /* Two radii: 6px controls, 12px cards. --radius-sm is kept as an alias of md. */
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* Motion — short, purposeful state changes; never decorative drift */
  --dur: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Identity ink — selected per page and used by lockups or decisive brand fields.
     Ağustos is red; every other house brand is neutral black/white. */
  --brand-agustos:     #cf142a;
  --brand-pataraz:     #15130f;
  --brand-pld:         #15130f;
  --brand-iesdesk:     #15130f;
  --brand-specquick:   #15130f;
  --brand-memregunes:  #15130f;

  /* Default brand fallback (resolves before any .brand-* applies) */
  --brand: var(--brand-agustos);

  /* Type stacks — retained in v3
     --display: Inter Tight (logo, hero, headings, UI). Falls back through
                Inter to native UI fonts. Variable wght 100–900 with italics.
     --body:    Inter (paragraphs, inline elements). Falls back to the
                canonical system stack ending in Apple Color Emoji.
     --mono:    JetBrains Mono with native ui-monospace fallback. Variable first,
                matching --display and --body so one @font-face name serves both. */
  --display: 'Inter Tight Variable', 'Inter Tight', 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body:    'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji";
  --mono:    'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, ui-monospace, monospace;
}

/* -- 2. Per-brand application -------------------------------- */

.brand-agustos   { --brand: var(--brand-agustos); }
.brand-pataraz   { --brand: var(--brand-pataraz); }
.brand-pld       { --brand: var(--brand-pld); }
.brand-iesdesk   { --brand: var(--brand-iesdesk); }
.brand-specquick { --brand: var(--brand-specquick); }
.brand-memregunes { --brand: var(--brand-memregunes); }

/* Substrate override — kept for compatibility. White is already the default paper. */
.paper-white {
  --paper: var(--paper-white);
  --rule:  var(--rule-white);
}

/* The browser draws its own parts (scrollbars, checkboxes, select menus, date
   pickers) in the scheme it is told: light here, dark in the dark theme, and
   light again on the light islands. */
:root { color-scheme: light; }

/* Dark theme — product UI via html[data-theme="dark"]. Same six colours, flipped.
   Marketing pages stay light. The footer stays light. */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #15130f;
  --paper-white:  #15130f;
  --cream:        #ebebeb;
  --surface:      #404040;
  --ink:        #ffffff;
  --ink-soft:   #8a8378;
  --ink-faint:  #8a8378;
  --rule:        #404040;
  --rule-white:  #404040;

  /* State colors are substrate-specific. The light values fall to 2.19-3.11
     contrast on dark paper; these lift every one back above 7. */
  --state-success: #7ec9a2;
  --state-warning: #d9a441;
  --state-danger:  #f08c82;
  --state-info:    #8ab6e8;
}
html[data-theme="dark"] code,
html[data-theme="dark"] .type-code {
  background: rgba(255, 255, 255, 0.07);
}

/* Light islands in the dark theme: the footer never flips, and the dark
   callout band is light gray. Scope the light roles back inside both, or
   their text renders white on light at 1.00-1.19:1 and a primary button
   inside turns off-black on off-black. */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .band--cream {
  --paper:       #ffffff;
  --paper-white: #ffffff;
  --surface:     #ebebeb;
  --ink:         #15130f;
  --ink-soft:    #404040;
  --ink-faint:   #8a8378;
  --rule:        #e8e4da;
  --rule-white:  #e8e4da;
  color: var(--ink);
  color-scheme: light;
}

/* Buttons are black, never red. In the dark theme they simply invert with the
   ink: the primary becomes white on off-black. No exception rule is needed. */

/* -- 3. Reset + global rules --------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  /* locl: Turkish capitalization correctness when lang="tr". Mandatory.
     ss01: Inter's open digits (open 4, 6 and 9). It does not change the "a": Inter's
     default "a" is already two-storey. A taste decision; see MEMORY.md, review-patch. */
  font-feature-settings: "locl" on, "kern" on, "ss01" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  line-height: 1.65;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* -- 4. Typography and content classes ---------------------- */

/* --- Hero (2) — NEW IN v2.0 --- */

.type-hero {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(55px, 7vw, 89px);
  line-height: 0.97;
  letter-spacing: -0.042em;
  text-wrap: balance;
  color: var(--ink);
  max-width: 15ch;
  margin: 0 0 var(--space-2xl);
}

.type-hero-md {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(43px, 4.6vw, 55px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0 0 var(--space-xl);
}

/* Hero deck — upright body utility, paired with either hero token.
   margin: 0 — relies on the preceding hero token's margin-bottom for spacing. */
.type-hero-deck {
  font-family: var(--body);
  font-weight: 400;
  font-style: normal;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0;
}
/* The deck has no bottom margin, so the block after it would sit flush.
   Hero links and actions carry their own top margin. */
.type-hero-deck + :not(.hero-actions) {
  margin-top: 1em;
}

/* --- Headings (4) --- */

/* === Vertical rhythm — three tiers ===
   (1) BASELINE: every element has margin-bottom 1em (≈16px) → uniform prose flow.
   (2) SECTION BREAK: a heading adds margin-top, and adjacent vertical margins
       collapse to the LARGER value (CSS spec). Two steps, in px, not em:
       40px (--space-3xl) above an H2, 32px (--space-2xl) above an H3 or an H4.
   (3) Heading size and weight carry the rest of the hierarchy.
   See DESIGN.md §"Vertical rhythm" for the rationale. */

h1, .type-h1 {
  font-family: var(--display);
  font-size: clamp(43px, 4.6vw, 55px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin: 0 0 1em;
  color: var(--ink);
}

h2, .type-h2 {
  font-family: var(--display);
  font-size: clamp(34px, 3.4vw, 43px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
  /* margin-top 40px (collapses with prior body's 1em → max wins).
     margin-bottom 1em matches baseline → consistent gap below the heading. */
  margin: var(--space-3xl) 0 1em;
  color: var(--ink);
}

h3, .type-h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.014em;
  margin: var(--space-2xl) 0 1em;
  color: var(--ink);
}

h4, .type-h4 {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-transform: none;
  margin: var(--space-2xl) 0 1em;
  color: var(--ink-soft);
}

/* --- Body & inline (8) --- */

p, .type-body {
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
  /* Baseline rhythm — 1em (≈16px) below every element. */
  margin: 0 0 1em;
  color: var(--ink);
}

em, .type-em {
  font-style: italic;
  font-weight: 400;
}

/* Bold marks a fact the reader scans for, once per paragraph at most.
   600, not 700: it has to sit with thin headings. */
strong, .type-strong {
  font-weight: 600;
  color: var(--ink);
}

/* The highlighter: one marker stroke per page, behind one to four words of the
   main headline. Brand red at low strength; the text stays ink. */
mark, .type-highlight {
  color: inherit;
  background: none;
}
mark.type-highlight,
.type-highlight {
  padding: 0 0.06em;
  margin: 0 -0.02em;
  border-radius: 0.12em 0.3em 0.16em 0.35em;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--signal) 0%, transparent) 0%,
      color-mix(in srgb, var(--signal) 20%, transparent) 1.5%,
      color-mix(in srgb, var(--signal) 15%, transparent) 50%,
      color-mix(in srgb, var(--signal) 19%, transparent) 97%,
      color-mix(in srgb, var(--signal) 0%, transparent) 100%)
    0 62% / 100% 52% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Content-link rule: 2px red underline. Hover turns the ink red; the rule stays.
   Chrome, buttons, and footer links reset this. */
a, .type-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
/* Visited content links settle to ink-soft. `:where` keeps the rule at element
   specificity, so class-styled chrome and menu links keep their own colour. */
a:where(:visited), .type-link:where(:visited) { color: var(--ink-soft); }
a:hover, .type-link:hover { color: var(--signal); }
/* Red text on off-black is 3.35:1, below the 4.5:1 text floor. In the dark
   theme hover dims the ink instead; the red rule stays the signal. `:where`
   keeps the weight of `a:hover`, so class-styled chrome keeps its own hover. */
:where(html[data-theme="dark"]) a:hover,
:where(html[data-theme="dark"]) .type-link:hover { color: var(--ink-soft); }
a:focus-visible, .type-link:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

code, .type-code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

sub, .type-sub {
  font-size: 0.7em;
  font-weight: 500;
  vertical-align: -0.25em;
  line-height: 0;
}

sup, .type-sup {
  font-size: 0.7em;
  font-weight: 500;
  vertical-align: 0.5em;
  line-height: 0;
}

/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). Struck-through text is
   still content — a superseded price, a corrected claim — so it has to clear
   4.5:1. */
s, del, .type-strike {
  text-decoration: line-through;
  color: var(--ink-soft);
}

/* --- Block-level (9) --- */

.type-blockquote, blockquote {
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}
.type-blockquote cite, blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
}

.type-pullquote {
  /* Section marker — 2.5em above to mark the visual break, 1em below baseline. */
  margin: 2.5em 0 1em;
  padding: 1em 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-align: left;
}
.type-pullquote::before {
  content: "\201C"; /* Left double curly quote */
  color: var(--ink);
  font-size: 1.1em;
  margin-right: 0.05em;
}

.type-list-ol, ol {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  padding-left: 1.5em;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
.type-list-ol li::marker, ol li::marker { color: var(--ink); font-weight: 600; }

.type-list-ul, ul {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  padding-left: 1.5em;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
.type-list-ul li::marker, ul li::marker { color: var(--ink); }

.type-dl, dl {
  font-family: var(--body);
  font-size: 16px;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
/* Internal dl rhythm — each term sits 1em below the previous definition.
   First-child dt has its margin-top collapsed by the parent's flow. */
.type-dl dt, dl dt { font-weight: 600; color: var(--ink); margin-top: 1em; }
.type-dl dt:first-child, dl dt:first-child { margin-top: 0; }
.type-dl dd, dl dd { margin: 0; color: var(--ink-soft); font-weight: 400; }

.type-figure, figure {
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
  padding: 0;
}
/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). A caption describes
   the figure — content, not decoration, so it has to clear 4.5:1. */
.type-figure figcaption, figure figcaption {
  margin-top: 0.5em;
  font-family: var(--body);
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-soft);
}

.type-code-block, pre {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--ink);
  color: var(--rule);
  padding: 1em 1.25em;
  border-radius: var(--radius-md);
  overflow-x: auto;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
.type-code-block code, pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.type-table, table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--body);
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
.type-table th, table th {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  text-align: left;
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--rule);
}
.type-table td, table td {
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.type-table th:last-child, .type-table td:last-child,
table th:last-child, table td:last-child { text-align: right; }
/* A caption names the table and starts on the cell text. Browsers center it by default. */
.type-table caption, table caption { padding-inline: 0.75em; text-align: start; }

.type-divider, hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  /* Section marker — 2.5em above to mark the visual break, 1em below baseline. */
  margin: 2.5em 0 1em;
}

/* --- Supporting (1) --- */

/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). A footnote is
   content, not a quiet mark, so it has to clear 4.5:1. */
.type-footnote {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.type-footnote sup, .type-footnote .ref {
  color: var(--ink);
  font-weight: 600;
}

/* -- 5. Layout helpers (not tokens — utilities) -------------- */

.site-frame,
.container {
  width: 100%;
  max-width: 1244px;
  margin: 0 auto;
  padding-inline: 32px;
}

/* The page opening. Small bottom padding on purpose: the first section below
   brings the one section spacing. */
.container {
  padding-block: clamp(56px, 9vw, 112px) clamp(8px, 1.5vw, 16px);
}

/* A reading page (the content screens: About, privacy, terms, an article, a list
   of posts). The frame keeps its left edge, and each block stops at the reading
   line. The side zone to the right of the line stays free for a side column,
   and the footer site map uses the same line. */
.container--reading > * {
  max-width: var(--measure-body);
}

/* The page's own block. It lets the contents list take the full height of
   the page content in the side zone. */
.container--reading {
  position: relative;
}

/* "On this page" (v7.4.0): a disclosure of the page's main sections. Below
   1280px it is one folded line under the page opening. At 1280px and wider it
   sits in the side zone, open, and stays in view. It needs no script. The
   toggle and the title hold the same words; each width shows one of them, so
   a screen reader never hears "collapsed" beside an open list. */
.agustos-contents {
  margin: var(--space-xl) 0 var(--space-2xl);
  border-block: 1px solid var(--rule);
  font-size: var(--size-body-compact);
}
.agustos-contents__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-min);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.agustos-contents__toggle::-webkit-details-marker { display: none; }
.agustos-contents__toggle::after { content: "+"; color: var(--ink-soft); font-weight: 400; }
.agustos-contents[open] > .agustos-contents__toggle::after { content: "\2212"; }
.agustos-contents__toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.agustos-contents__title {
  display: none;
  margin: 0 0 var(--space-xs);
  color: var(--ink);
  font-family: var(--display);
  font-size: inherit;
  font-weight: 600;
}
.agustos-contents__list {
  margin: 0 0 var(--space-md);
  padding: 0;
  font-size: inherit;
  list-style: none;
  border-inline-start: 1px solid var(--rule);
}
.agustos-contents__link {
  display: flex;
  align-items: center;
  min-height: var(--control-min);
  padding-inline-start: var(--space-md);
  color: var(--ink-soft);
  font-weight: 400;
  text-decoration: none;
}
.agustos-contents__link:hover,
.agustos-contents__link:focus-visible { color: var(--ink); }
.agustos-contents__link:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
@media (min-width: 1280px) {
  .agustos-contents {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--measure-gutter) + var(--measure-body) + var(--space-xl));
    inset-inline-end: var(--measure-gutter);
    max-width: none;
    margin: 0;
    padding-block-start: clamp(56px, 9vw, 112px);
    border-block: 0;
  }
  .agustos-contents__list { margin-block-end: 0; }
  /* Browsers without ::details-content (Safari before 18.4) keep the folded
     line here; one tap opens the list. */
  @supports selector(::details-content) {
    .agustos-contents::details-content {
      display: block;
      content-visibility: visible;
      position: sticky;
      inset-block-start: calc(var(--site-header-height) + var(--space-xl));
      max-block-size: calc(100vh - var(--site-header-height) - 2 * var(--space-xl));
      overflow-y: auto;
    }
    .agustos-contents__toggle { display: none; }
    .agustos-contents__title { display: block; }
  }
}

/* Two buttons: one primary, one secondary. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-2xl);
}

.agustos-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.agustos-button:hover {
  text-decoration: none;
}

.agustos-button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* Buttons are black: identity is red, action is black. */
.agustos-button--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.agustos-button--primary:hover {
  border-color: var(--ink-soft);
  background: var(--ink-soft);
  color: var(--paper);
}

/* A quiet outline, derived from the ink; hover firms it up. */
.agustos-button--secondary {
  border-color: color-mix(in srgb, var(--ink) 22%, var(--paper));
  background: transparent;
  color: var(--ink);
}

.agustos-button--secondary:hover {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). Trust signals state
   real proof — year range, client count — so they have to clear 4.5:1. */
.hero-trust {
  margin: var(--space-2xl) 0 0;
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero-visual {
  width: 100%;
  margin-top: var(--space-5xl);
}

/* `.agustos-button` above is the same control under its product-surface name.
   Do not fork it; extend the shared blocks. */

/* v3 composition recipes. These are deliberately structural: adapters may
   wrap them in framework components without changing the visual grammar. */
/* One rhythm: every section carries the same spacing and no dividing line.
   Two sections in a row share one gap, not two. */
.agustos-section {
  padding-block: var(--section-space);
}
.agustos-section + .agustos-section {
  padding-top: 0;
}
/* A reading page is one article, not a set of bands. A section in it takes
   the H2 break of the vertical rhythm: 40px. It is a margin, so it collapses
   with the last margin above it (the larger wins). */
.container--reading .agustos-section {
  padding-block: 0;
  margin-top: var(--space-3xl);
}

.agustos-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-xl);
  margin-bottom: 12px;
}
.agustos-section__head :is(h2, .type-h2) {
  margin: 0;
}
.agustos-section__head .type-link {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 500;
  white-space: nowrap;
}
/* The intro under a section heading: soft ink, then room before the grid. */
.agustos-section > .prose {
  margin: 0 0 var(--space-3xl);
  color: var(--ink-soft);
}

.agustos-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.agustos-card-grid > * {
  flex: 1 1 220px;
  min-width: 0;
}

.agustos-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: border-color var(--dur) var(--ease);
}
.agustos-card:hover {
  border-color: color-mix(in srgb, var(--ink) 30%, var(--paper));
}
/* The card gap spaces its children; their own margins would double it. */
.agustos-card > * {
  margin-block: 0;
}
.agustos-card .type-body {
  color: var(--ink-soft);
}
/* The whole card is the link (hard rule 5), so its title carries no underline. */
.agustos-card :is(h2, h3, h4) > a {
  color: var(--ink);
  font-weight: inherit;
  text-decoration: none;
}

.agustos-card--marked {
  border-left: 2px solid var(--ink);
}

/* Flex items and padded boxes never collapse margins. A heading's
   section-break margin would stack on the card gap or the section padding
   and leave an empty band above the title. The container owns that space. */
.agustos-card > *,
:is(.agustos-card, .agustos-section, .band) :is(h1, h2, h3, h4, .type-h1, .type-h2, .type-h3, .type-h4):first-child {
  margin-top: 0;
}
/* A <section> inside a section is a subsection in the text flow, so its
   heading keeps the break of its level (v7.3.5). */
.agustos-section section > :is(h2, .type-h2):first-child {
  margin-top: var(--space-3xl);
}
.agustos-section section > :is(h3, h4, .type-h3, .type-h4):first-child {
  margin-top: var(--space-2xl);
}

/* Hard rule 5: a card whose heading holds a link is the target. The link
   stretches over the card, so keyboard and screen-reader users still meet one
   link. Other links in the card sit above the stretch and stay clickable. */
.agustos-card :is(h2, h3, h4) > a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.agustos-card a:not(:is(h2, h3, h4) > a) {
  position: relative;
  z-index: 1;
}
/* The whole card is the target, so the focus ring goes around the card.
   Without :has() the link keeps its own ring. */
@supports selector(:has(a)) {
  .agustos-card:has(:is(h2, h3, h4) > a:focus-visible) {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
  }
  .agustos-card :is(h2, h3, h4) > a:focus-visible {
    outline: none;
  }
}

.agustos-chrome-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: var(--size-body-compact);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Hover darkens the ink over a 1px gray rule; the 2px red rule marks the
   current page, or the section that holds it (aria-current "page" or "true").
   The 1px border plus 1px padding keeps the box size. */
.agustos-chrome-link:hover {
  color: var(--ink);
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-color: var(--ink-faint);
  padding-bottom: calc(2px + 1px);
}
.agustos-chrome-link:is([aria-current="page"], [aria-current="true"]) {
  color: var(--ink);
  text-decoration: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--signal);
  padding-bottom: 2px;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  z-index: 999;
}
.skip-link:focus { left: 1rem; }

/* -- 5b. Site chrome ----------------------------------------- */

/* Two chromes ship, and the screen family picks one: every website uses the
   top menu and the footer; product UI uses the sidebar. JavaScript only when
   it is the logical choice: drawers are native popovers with a close button,
   groups and More are <details>, and ui/agustos-chrome.js only closes More on
   Escape, an outside click or focus leaving. Search and language are slots
   that adapters fill. */

/* Lockup: the exact symbol plus a lowercase wordmark. currentColor carries
   the registered identity ink. Dark theme lifts house brands to white;
   Ağustos stays red. Hover swaps the ink: Ağustos red to ink, every other
   house brand ink to red. */
.site-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--control-min);
  color: var(--brand);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: lowercase;
}
.site-lockup__symbol { flex: none; width: 1em; height: 1em; }
.site-lockup__name { color: inherit; }
.site-lockup { transition: color var(--dur) var(--ease); }
.site-lockup:hover { color: var(--signal); text-decoration: none; }
.brand-agustos .site-lockup:hover { color: var(--ink); }
.site-lockup:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
/* `:where` keeps the dark rest colours below the hover rules above, so the
   hover swap works in both themes: house brands turn red, Ağustos turns to
   the ink (white on dark paper, off-black in the light footer). */
html[data-theme="dark"] :where(.site-lockup) { color: var(--ink); }
html[data-theme="dark"] :where(.brand-agustos .site-lockup) { color: var(--brand); }

/* Burgers and drawer close buttons: one shape, both drawers. The icon is
   inline SVG in the markup. Both show below 1024px only. */
.site-sidebar-burger,
.site-header__burger,
.site-sidebar__close,
.site-header__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-min);
  height: var(--control-min);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.site-sidebar-burger:hover,
.site-header__burger:hover,
.site-sidebar__close:hover,
.site-header__close:hover { background: var(--rule); }
.site-sidebar-burger:focus-visible,
.site-header__burger:focus-visible,
.site-sidebar__close:focus-visible,
.site-header__close:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* --- Sidebar family --- */
.site-sidebar-layout { padding-inline-start: var(--sidebar-width); }
.site-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline: 0 auto;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  box-sizing: border-box;
  width: var(--sidebar-width);
  height: 100dvh;
  margin: 0;
  padding: 10px var(--space-lg);
  overflow-y: auto;
  border: 0;
  border-inline-end: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.site-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.site-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-min);
  padding-inline-start: var(--space-sm);
  border-inline-start: 2px solid transparent;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: var(--size-body-compact);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Hover darkens the ink over a 1px gray rule; the 2px red rule marks the
   current page, or the section that holds it (aria-current "page" or "true").
   The 1px border plus 1px padding keeps the text still. */
.site-sidebar__link:hover {
  color: var(--ink);
  border-inline-start-width: 1px;
  border-inline-start-color: var(--ink-faint);
  padding-inline-start: calc(var(--space-sm) + 1px);
  text-decoration: none;
}
.site-sidebar__link:is([aria-current="page"], [aria-current="true"]) {
  color: var(--ink);
  border-inline-start-width: 2px;
  border-inline-start-color: var(--signal);
  padding-inline-start: var(--space-sm);
  text-decoration: none;
}
.site-sidebar__link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.site-sidebar__group { margin: 0; padding: 0; border: 0; }
.site-sidebar__group > summary {
  display: flex;
  align-items: center;
  min-height: var(--control-min);
  padding-inline-start: var(--space-sm);
  border-inline-start: 2px solid transparent;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: var(--size-body-compact);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.site-sidebar__group > summary::-webkit-details-marker { display: none; }
.site-sidebar__group > summary::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-inline-start: 0.55em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.site-sidebar__group[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.site-sidebar__group > summary:hover { color: var(--ink); }
/* A closed group that holds the current page or section carries the red rule for it. */
.site-sidebar__group:has([aria-current="page"], [aria-current="true"]) > summary { color: var(--ink); }
.site-sidebar__group:not([open]):has([aria-current="page"], [aria-current="true"]) > summary { border-inline-start-color: var(--signal); }
.site-sidebar__group > summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.site-sidebar__group > .site-sidebar__link {
  padding-inline-start: var(--space-xl);
  font-size: 15.5px;
}
.site-sidebar__group > .site-sidebar__link:hover:not([aria-current="page"], [aria-current="true"]) {
  padding-inline-start: calc(var(--space-xl) + 1px);
}
.site-sidebar__cta { align-self: flex-start; }
.site-sidebar__utility { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: auto; }
.site-sidebar__note { margin: 0; color: var(--ink-soft); font-size: 13px; }
.site-sidebar-bar { display: none; }

/* --- Topbar family --- */
/* An in-page anchor or a focused element lands below the sticky top menu,
   not under it (WCAG 2.2 SC 2.4.11). */
html:has(.site-header) { scroll-padding-top: calc(var(--site-header-height) + var(--anchor-snap)); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--site-header-height);
  border-block-end: 1px solid var(--rule);
  background: var(--paper);
}
.site-header__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xl);
  padding-block: 10px;
}
.site-header__panel { display: contents; color: inherit; }
/* At most five items. The rest go in one site-header__more. */
.site-header__nav { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 28px; }
.site-header__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  border-block-end: 2px solid transparent;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: var(--size-body-compact);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Hover darkens the ink over a 1px gray rule; the 2px red rule marks the
   current page, or the section that holds it (aria-current "page" or "true").
   The 1px border plus 1px padding keeps the text still. */
.site-header__link:hover {
  color: var(--ink);
  border-block-end-width: 1px;
  border-block-end-color: var(--ink-faint);
  padding-block-end: 1px;
  text-decoration: none;
}
.site-header__link:is([aria-current="page"], [aria-current="true"]),
.site-header__more:has([aria-current="page"], [aria-current="true"]) > summary {
  color: var(--ink);
  border-block-end-width: 2px;
  border-block-end-color: var(--signal);
  padding-block-end: 0;
  text-decoration: none;
}
.site-header__link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.site-header__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-lg); }
.site-header__cta { margin-inline-start: var(--space-sm); }

/* More: a <details> whose <summary> is a site-header__link. On desktop the menu
   floats under the item; in the drawer it opens inline. ui/agustos-chrome.js
   closes it on Escape, an outside click or focus leaving; without the script
   it still opens and closes on click. When the current page sits in More, the
   More item carries the red rule (above). */
.site-header__more { position: relative; }
.site-header__more > summary { gap: 6px; list-style: none; cursor: pointer; }
.site-header__more > summary::-webkit-details-marker { display: none; }
.site-header__more > summary::after {
  content: "";
  width: 0.38em;
  height: 0.38em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.site-header__more[open] > summary { color: var(--ink); }
.site-header__more[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.site-header__more-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline-start: calc(var(--space-sm) * -1);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  /* The one shadow in the system: a menu that floats above the page. */
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 8%, transparent);
}
.site-header__more-link {
  display: flex;
  align-items: center;
  min-height: var(--control-min);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
}
.site-header__more-link:hover,
.site-header__more-link:is([aria-current="page"], [aria-current="true"]) { background: var(--surface); color: var(--ink); text-decoration: none; }
.site-header__more-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* --- Header search and utility (v7.3.0). One recipe for every adapter: the
   search toggle and panel on desktop, a search row under the bar below
   1024px, the language link and icon buttons. Text uses --ink-soft, never
   --ink-faint, so it clears 4.5:1. The input is 16px, so a phone does not
   zoom on focus. The panel floats on the menu shadow. --- */
.site-header__utility { display: flex; align-items: center; gap: var(--space-2xs); }
.site-header__utility--bar { display: none; }
.site-header__icon-btn,
.site-header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-min);
  height: var(--control-min);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-header__icon-btn:hover,
.site-header__search-toggle:hover,
.site-header__search-toggle[aria-expanded="true"] { background: var(--surface); color: var(--ink); }
.site-header__icon-btn:focus-visible,
.site-header__search-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.site-header__theme-moon,
html[data-theme="dark"] .site-header__theme-sun { display: none; }
html[data-theme="dark"] .site-header__theme-moon { display: inline-block; }
/* The language link reads like the other chrome links: a 1px gray rule on
   hover; red stays with the current page. */
.site-header__lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-min);
  min-height: var(--control-min);
  padding: 0 var(--space-2xs);
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: var(--size-body-compact);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header__lang-link:hover {
  color: var(--ink);
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-color: var(--ink-faint);
  padding-bottom: 1px;
}
.site-header__lang-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.site-header__search { position: relative; }
.site-header__search--desktop { position: static; }
.site-header__search-panel {
  z-index: 30;
  display: flex;
  flex-direction: column;
  max-height: min(60dvh, 32rem);
  padding: var(--space-sm);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 8%, transparent);
}
.site-header__search-panel[hidden] { display: none; }
.site-header__search--desktop .site-header__search-panel {
  position: absolute;
  inset-block-start: calc(100% + 1px);
  inset-inline: var(--space-xl);
}
.site-header__search--responsive .site-header__search-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline: 0;
}
.site-header__search-field {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-min);
  padding: 0 var(--space-sm);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  transition: border-color var(--dur) var(--ease);
}
.site-header__search-field:hover { border-color: var(--ink); }
.site-header__search-field:focus-within { border-color: var(--ink); outline: 2px solid var(--signal); outline-offset: 2px; }
.site-header__search-field svg { flex: none; }
.site-header__search-field input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
}
.site-header__search-field input::placeholder { color: var(--ink-soft); }
.site-header__search-output { min-height: 0; overflow-y: auto; }
.site-header__search-status {
  margin: var(--space-xs) 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}
.site-header__search-status:empty { display: none; }
.site-header__search-results { margin: var(--space-2xs) 0 0; }
.site-header__search-group + .site-header__search-group {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--rule);
}
.site-header__search-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-xs) var(--space-xs) var(--space-2xs);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.site-header__search-heading-count { font-family: var(--body); font-weight: 400; }
.site-header__search-list { margin: 0; padding: 0; list-style: none; }
.site-header__search-result { margin: 0; }
.site-header__search-result a {
  display: block;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  font-weight: 400;
  text-decoration: none;
}
.site-header__search-result a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.site-header__search-result a:focus-visible { background: var(--surface); color: var(--ink); outline: 2px solid var(--signal); outline-offset: -2px; }
.site-header__search-result-title {
  display: block;
  font-family: var(--display);
  font-size: var(--size-body-compact);
  font-weight: 500;
  line-height: 1.3;
}
.site-header__search-result-excerpt {
  display: block;
  max-width: 70ch;
  margin-top: var(--space-2xs);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
}
.site-header__search-result-excerpt mark { padding: 0 0.1em; background: var(--surface); color: var(--ink); }
/* The row fills with --surface on hover and focus. --ink-soft on the dark
   surface is 2.76:1, so the excerpt takes the ink there, and the match mark
   moves to the paper so it stays visible on the fill. */
.site-header__search-result a:is(:hover, :focus-visible) .site-header__search-result-excerpt { color: var(--ink); }
.site-header__search-result a:is(:hover, :focus-visible) .site-header__search-result-excerpt mark { background: var(--paper); }
/* Below 1024px the search moves to a row under the bar: a 44px field, 8px
   above and below, and the rule. --site-header-search-height names it, so the
   anchor offset can add it. */
.site-header__search-row { display: none; border-top: 1px solid var(--rule); }
.site-header__search-shell { padding-block: var(--space-xs); }
.site-header__noscript-search { padding-block: var(--space-xs); }
.site-header__noscript-search form { display: flex; gap: var(--space-xs); }

/* --- Footer. Light: the logo and one line on one side, one row of links on
   the other, and an optional site map above (below). No button: the top menu
   and the closing band carry the action. The footer variables never follow
   the theme flip. --- */
.site-footer {
  border-block-start: 1px solid var(--rule);
  background: var(--footer-paper);
  color: var(--footer-ink);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-2xl);
  padding-block: var(--space-2xl);
}
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-lg); }
.site-footer .type-footnote { margin: 0; color: var(--ink-soft); }
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
/* Hover darkens the ink over a 1px gray rule, as in the top menu: the red rule
   marks the current page alone (v7.1.0), and the footer has none. */
.site-footer__link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-faint); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.site-footer__link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* The optional site map above the bottom row (v7.1.0): the lockup with the
   company's contact block, then at most three short groups of links in one
   nav. The bottom row keeps the footnote and the legal, social and language
   links. Group titles are sentence case, never uppercase labels. */
/* The contact block ends on the reading line, and the groups fill the side
   zone, with the same gap as between the groups. Below 1280px the side zone
   cannot hold three groups, so the groups move under the contact block. */
.site-footer__map {
  display: grid;
  grid-template-columns: minmax(0, var(--measure-body)) minmax(0, 1fr);
  gap: var(--space-2xl) var(--space-xl);
  padding-block: var(--space-4xl) var(--space-xl);
}
.site-footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.site-footer__contact address {
  color: var(--ink-soft);
  font-size: var(--size-body-compact);
  font-style: normal;
  line-height: 1.6;
}
.site-footer__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-xl); }
.site-footer__group { min-width: 0; }
.site-footer__group-title {
  margin: 0 0 var(--space-2xs);
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--size-body-compact);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.site-footer__group-links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* Under a site map the bottom row sits below a hairline, closer to it. The
   rule spans the content, not the frame's gutters. */
.site-footer__map + .site-footer__inner {
  position: relative;
  padding-block: var(--space-md) var(--space-2xl);
}
.site-footer__map + .site-footer__inner::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 32px;
  border-block-start: 1px solid var(--rule);
}
@media (max-width: 1279px) {
  .site-footer__map { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .site-footer__map { padding-block-start: var(--space-3xl); }
}

/* --- Breadcrumb: the small trail above a page title --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
}
.breadcrumb li { display: inline-flex; align-items: center; min-height: var(--control-min); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-xs); color: var(--ink-faint); }
/* The list item is 44px tall; the link fills it, so the target is 44px too. */
.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  color: var(--ink-soft);
  text-decoration: none;
}
.breadcrumb__link:hover { color: var(--ink); text-decoration: none; }
.breadcrumb__link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* Small laptops: the top menu keeps one row with tighter spacing. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header__bar { gap: var(--space-lg); }
  .site-header__nav { gap: var(--space-lg); }
  .site-header__end { gap: var(--space-md); }
  .site-header__cta { margin-inline-start: 0; }
}

/* --- Drawers below 1024px. Native popovers: light dismiss and Escape are free,
   and a visible close button sits where the burger was. --- */
@media (max-width: 1023px) {
  /* An in-page anchor lands below the sticky bar, not under it. */
  html:has(.site-sidebar-bar) { scroll-padding-top: calc(var(--sidebar-bar-height) + var(--anchor-snap)); }
  /* The top menu grows by the search row here, so the anchor offset does too. */
  html:has(.site-header__search-row) { scroll-padding-top: calc(var(--site-header-height) + var(--site-header-search-height) + var(--anchor-snap)); }
  .site-header__search--desktop { display: none; }
  .site-header__search-row { display: block; }
  .site-header__utility--bar { display: flex; justify-self: end; }
  .site-header__utility--drawer { display: none; }
  /* The page behind an open drawer does not scroll. */
  html:has(.site-header__panel:popover-open),
  html:has(.site-sidebar:popover-open) { overflow: hidden; }
  .site-sidebar-layout { padding-inline-start: 0; }
  .site-sidebar-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--sidebar-bar-height);
    padding: 0 var(--space-lg);
    border-block-end: 1px solid var(--rule);
    background: var(--paper);
  }
  .site-sidebar-burger { display: inline-flex; }
  .site-sidebar__close {
    display: inline-flex;
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: var(--space-sm);
  }
  .site-sidebar { width: min(320px, 86vw); }
  .site-sidebar:not(:popover-open) { display: none; }
  .site-sidebar::backdrop { background: color-mix(in srgb, var(--ink) 32%, transparent); }

  .site-header__bar { gap: var(--space-sm); }
  .site-header__burger { display: inline-flex; justify-self: end; grid-column: 3; }
  .site-header__panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    box-sizing: border-box;
    width: min(320px, 86vw);
    height: 100dvh;
    margin: 0;
    padding: var(--space-6xl) var(--space-xl) var(--space-xl);
    overflow-y: auto;
    border: 0;
    border-inline-start: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
  }
  .site-header__panel:popover-open { display: flex; }
  .site-header__close {
    display: inline-flex;
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: var(--space-xl);
  }
  .site-header__panel::backdrop { background: color-mix(in srgb, var(--ink) 32%, transparent); }
  .site-header__nav { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px; }
  .site-header__more-menu { position: static; min-width: 0; padding: 0 0 0 var(--space-sm); border: 0; box-shadow: none; background: none; }
  .site-header__end { flex-direction: column; align-items: stretch; gap: var(--space-md); }
  .site-header__cta { margin-inline-start: 0; justify-content: center; }
}

/* -- 5c. Layout layer ---------------------------------------- */

/* Ten helpers so no page declares its own frame, band, grid, or measure.
   Composition stays in the markup; rhythm comes from the spacing scale. */
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.stack > * { margin-block: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.prose { max-width: var(--measure-body); }
.grid-2,
.grid-3,
.grid-4 { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-aside { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr); gap: var(--space-2xl); align-items: start; }
/* The closing band: one per page, pale red, the same spacing as a section. */
.band { padding-block: var(--section-space); }
.band--cream { background: var(--cream); }
.band .prose { color: var(--ink-soft); }

/* A table wider than its column scrolls inside this wrapper, never the page. */
.table-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 1em; }
.table-scroll > .type-table, .table-scroll > table { margin-bottom: 0; }

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-aside { grid-template-columns: minmax(0, 1fr); }
}

/* -- 6. UI primitives ---------------------------------------- */

/* Product-surface controls. Same grammar as the editorial layer above: hairline
   rules, 4/6px radii, one 2px signal accent per element, 44px targets, no fills
   that the page does not already own.

   This is NOT a component framework. If a pattern is not here, compose it from
   `.agustos-card`, `.agustos-section`, and the `.type-*` classes. Deliberately
   absent, and to stay absent: breadcrumbs, pagination, modals, tooltips,
   dropdowns, toasts, progress bars, accordions, avatars, and grid utilities.
   Breadcrumbs and pagination are chrome — they belong beside
   `.agustos-chrome-link` in the adapter layer, not here. */

/* --- Forms (11) --- */

.agustos-fieldset {
  margin: 0 0 var(--space-xl);
  padding: 0;
  border: 0;  /* kill the default 3D groove */
}

.agustos-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.agustos-label {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink-soft);
}

.agustos-label--required::after {
  content: " *";
  color: var(--ink);
}

.agustos-input,
.agustos-textarea,
.agustos-select {
  width: 100%;
  min-height: var(--control-min);
  padding: 0.6rem 0.75rem;
  background: var(--paper-white);
  /* --ink-faint, not --rule: a field's edge must clear 3:1 (WCAG 1.4.11).
     The hairline rule scores 1.27:1 on white; the faint ink 3.75 and 4.95. */
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--body);
  /* 16px exactly: iOS zooms the viewport on focus below this. */
  font-size: 16px;
  line-height: 1.4;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

/* Placeholder text is text: --ink-soft clears 4.5:1 in both themes, where
   --ink-faint scores 3.75 on white. A visible label still carries the name. */
.agustos-input::placeholder,
.agustos-textarea::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.agustos-input:hover,
.agustos-textarea:hover,
.agustos-select:hover {
  border-color: var(--ink);
}

.agustos-input:focus-visible,
.agustos-textarea:focus-visible,
.agustos-select:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-color: var(--ink);
}

.agustos-input:disabled,
.agustos-textarea:disabled,
.agustos-select:disabled {
  background: color-mix(in srgb, var(--rule) 40%, var(--paper));
  border-color: var(--rule);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.agustos-textarea {
  min-height: 8em;
  line-height: 1.55;
  resize: vertical;
}

/* Native chevron kept on purpose: no SVG asset enters this file, and the
   platform affordance is what users already recognise. */
.agustos-select {
  padding-inline-end: var(--space-xl);
}

/* Invalid state. Works from the class or from `aria-invalid` alone, so
   server-rendered markup needs no extra class plumbing. */
.agustos-field--invalid .agustos-input,
.agustos-field--invalid .agustos-textarea,
.agustos-field--invalid .agustos-select,
.agustos-input[aria-invalid="true"],
.agustos-textarea[aria-invalid="true"],
.agustos-select[aria-invalid="true"] {
  border-color: var(--state-danger);
}

/* Checkbox and radio. `accent-color` gives a brand-correct control in one
   declaration — no replaced-element markup, no pseudo-element drawing. */
.agustos-check {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-min);
  font-family: var(--body);
  font-size: var(--size-body-compact);
  color: var(--ink);
  cursor: pointer;
}

.agustos-check input {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  margin: 0;
  accent-color: var(--ink);
}

/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). A form hint states a
   requirement — it is content, and it has to be readable. Placeholders keep
   --ink-faint because they are a prompt, not information. */
.agustos-hint {
  font-family: var(--body);
  font-size: var(--size-footnote);
  line-height: 1.5;
  color: var(--ink-soft);
}

.agustos-error {
  font-family: var(--display);
  font-size: var(--size-footnote);
  font-weight: 600;
  line-height: 1.5;
  color: var(--state-danger);
}

/* --- Buttons (1 here; primary and secondary live in section 5) --- */

/* Tertiary action. The rank the system lacked, and the reason people invent
   their own bare <button>. */
.agustos-button--quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.agustos-button--quiet:hover {
  border-color: transparent;
  box-shadow: none;
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
:where(html[data-theme="dark"]) .agustos-button--quiet:hover { color: var(--ink-soft); }

/* Pressed: a 1px press on every rank, and the fill returns to full ink (the
   primary) or takes the functional gray (the secondary). No new colour. */
.agustos-button:active:not(:disabled, [aria-disabled="true"]) { transform: translateY(1px); }
.agustos-button--primary:active:not(:disabled, [aria-disabled="true"]) { border-color: var(--ink); background: var(--ink); }
.agustos-button--secondary:active:not(:disabled, [aria-disabled="true"]) { background: var(--surface); }

/* Disabled: the field's disabled look, and no hover or press. Works from the
   attribute on a <button> or from aria-disabled on a link. */
.agustos-button:is(:disabled, [aria-disabled="true"]),
.agustos-button:is(:disabled, [aria-disabled="true"]):hover {
  border-color: var(--rule);
  background: color-mix(in srgb, var(--rule) 40%, var(--paper));
  color: var(--ink-faint);
  text-decoration: none;
  cursor: not-allowed;
}
.agustos-button--quiet:is(:disabled, [aria-disabled="true"]),
.agustos-button--quiet:is(:disabled, [aria-disabled="true"]):hover {
  border-color: transparent;
  background: transparent;
}

/* --- Badges (6) --- */

/* The `.type-h4` and table-header typographic register at badge scale. Bordered
   and transparent, never a filled pill: no new visual idiom enters the system. */
.agustos-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 2px var(--space-xs);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.005em;
  text-transform: none;
  white-space: nowrap;
}

.agustos-badge--success { color: var(--state-success); }
.agustos-badge--warning { color: var(--state-warning); }
.agustos-badge--danger  { color: var(--state-danger); }
.agustos-badge--info    { color: var(--state-info); }
.agustos-badge--signal  { color: var(--ink); }

/* --- Notices (6) --- */

/* Same 2px left-rule grammar as `blockquote` and `.agustos-card--marked`.
   Three components, one idiom. */
.agustos-notice {
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--rule);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  font-family: var(--body);
  font-size: var(--size-body-compact);
  line-height: 1.6;
  color: var(--ink);
}

.agustos-notice__title {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}

.agustos-notice--success {
  border-left-color: var(--state-success);
  background: color-mix(in srgb, var(--state-success) 6%, var(--paper));
}

.agustos-notice--warning {
  border-left-color: var(--state-warning);
  background: color-mix(in srgb, var(--state-warning) 6%, var(--paper));
}

.agustos-notice--danger {
  border-left-color: var(--state-danger);
  background: color-mix(in srgb, var(--state-danger) 6%, var(--paper));
}

.agustos-notice--info {
  border-left-color: var(--state-info);
  background: color-mix(in srgb, var(--state-info) 6%, var(--paper));
}

/* --- Tabs (3) --- */

/* The 2px signal underline on the active item is the house pattern already used
   for current-page markers; this promotes it rather than inventing one. */
.agustos-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  border-bottom: 1px solid var(--rule);
}

.agustos-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: var(--size-body-compact);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.agustos-tab:hover {
  color: var(--ink);
  text-decoration: none;
}

.agustos-tab:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.agustos-tab[aria-selected="true"],
.agustos-tab.is-active {
  border-bottom-color: var(--signal);
  color: var(--ink);
}

.agustos-tabs__panel {
  padding-block: var(--space-xl);
}

/* --- Reduced motion --- */

/* The handoff contract promises this; nothing delivered it before v3.1. */
/* Every transition in the kit runs on --dur, so one value stops them all,
   including the ones added after this rule. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
}

/* --- Print: the page, not the chrome. Menus, drawers and footer links do not
   print; the footer keeps the lockup and its one line. --- */
@media print {
  html { scroll-padding-top: 0; }
  .skip-link,
  .site-header,
  .site-sidebar,
  .site-sidebar-bar,
  .site-footer nav,
  .agustos-contents { display: none; }
  .site-sidebar-layout { padding-inline-start: 0; }
}