/*
  site.css · Avian Technology — multi-page rebuild ("Field Notes")
  Purpose: the ONE shared design system every page links. Pages are compose-only — they use these
           classes and add nothing new. Ported + extended from preview/styles.css (single-page concept)
           to a multi-page shell per D:\Claude\avian\_build\BUILD-BRIEF.md.
  Key contents: tokens (:root + [data-theme="dark"]), reset, paper grain, type utilities, section shell
                + contents-index rail, multi-page nav (.nav__link text links) + mobile sheet, buttons incl.
                .btn--quiet, home hero, mini-list + signpost teasers, ledger, notebook "notes" (the single
                gold tick), work cards (.work-card / .work-cards) for work.html's full grid, the Home
                page's .work-carousel (auto-advancing, one slide at a time — added 2026-07-16, see its
                own section comment), about split, contact section + .form fields, reusable .cta-band,
                footer, contour texture, motion/reveals, responsive rail rules (768px, 1040px).
  Related: site.js (interactions), index.html / services.html / approach.html / work.html / studio.html /
           contact.html (all link this file), capabilities.html + capabilities.css (re-skinned, page-scoped),
           preview/styles.css (design-language source), D:\Claude\avian\AVIAN-DESIGN-REFERENCE.md (brand).
*/

/* =========================================================================
   1. TOKENS — ocean blue owns structure, gold owns action + the one tick.
   Never pure white / pure black. Warm paper light, deep ocean-navy dark.
   ========================================================================= */
:root {
  /* Ocean blues */
  --mist:#f4f9fd; --tint:#e9f2fa; --ocean-soft:#8fc0e0; --ocean:#3f93c9;
  --bold:#0a66c2; --bold-deep:#084d94; --navy:#102a43; --slate:#4a627a;
  --white:#ffffff; --line:#dbe8f3;

  /* Brand accent — Amber/Gold. CTA = gold FILL + navy TEXT. Never gold text on light. */
  --gold:#E8A33D; --gold-deep:#CC8829; --gold-soft:#FBEAD0;

  /* Paper ground & rules — warm off-white, not beige/sepia */
  --paper:#FBF8F3; --paper-2:#F4EFE6; --paper-card:#FFFFFF;
  --rule:#E4DCCE; --rule-ink:#C9BFAE; --line-warm:#EDE6DA;

  /* Texture opacities */
  --grain-opacity:0.045; --contour-opacity:0.15; --contour-stroke:var(--ocean-soft);

  /* Shape & elevation */
  --radius:18px; --radius-lg:28px; --radius-sm:10px; --radius-pill:999px;
  --shadow-sm:0 2px 10px rgba(16,42,67,.06);
  --shadow:0 18px 40px -18px rgba(10,102,194,.28);
  --shadow-lg:0 30px 70px -28px rgba(10,102,194,.40);

  /* Type families */
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Outfit", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Spacing (8px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* Layout & motion */
  --maxw:1140px; --pad-x:24px;
  --rail:clamp(40px, 7vw, 92px);
  --col-gap:clamp(24px, 4vw, 64px);
  --section-y:clamp(64px, 10vw, 120px);
  --note-track:0.04em;
  --ease:cubic-bezier(.22, 1, .36, 1);
  --dur-interact:0.25s; --dur-layout:0.3s;

  /* Semantic aliases */
  --bg:var(--paper); --bg-panel:var(--paper-2); --surface:var(--paper-card);
  --ink:var(--navy); --ink-body:var(--slate); --ink-link:var(--bold); --ink-meta:var(--bold);
  --hairline:var(--rule);
  --focus-ring:0 0 0 4px rgba(10,102,194,.30);
  --cta-ink:#102a43; /* CTA text stays dark navy in BOTH themes */
}

[data-theme="dark"] {
  --paper:#0B1B2B; --paper-2:#10263B; --paper-card:#14304A; --white:#14304A;
  --navy:#EAF2FA; --slate:#A7BED4; --ink:var(--navy); --ink-body:var(--slate);
  --bold:#6FB2E4; --bold-deep:#9CCBEE; --ink-link:var(--bold); --ink-meta:var(--bold);
  --line:#22456A; --rule:#22456A; --rule-ink:#2E5781; --line-warm:#1C3A59;
  --gold:#E8A33D; --gold-deep:#F0B65C; --gold-soft:#3A2F1C;
  --grain-opacity:0.025; --contour-opacity:0.17; --contour-stroke:#3F6E96;
  --shadow-sm:0 2px 10px rgba(0,0,0,.30);
  --shadow:0 18px 40px -18px rgba(0,0,0,.55);
  --shadow-lg:0 30px 70px -28px rgba(0,0,0,.65);
  --focus-ring:0 0 0 4px rgba(111,178,228,.40);
}

/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background var(--dur-layout) var(--ease), color var(--dur-layout) var(--ease);
}

/* Paper grain — pinned, faint, behind everything */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.06  0 0 0 0 0.16  0 0 0 0 0.26  0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--ink-link); text-decoration: none; }
ol, ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--gold-soft); color: var(--navy); }
[data-theme="dark"] ::selection { background: rgba(232,163,61,.32); color: var(--navy); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--navy); color: var(--paper);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em;
  transform: translateY(-150%); transition: transform var(--dur-interact) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--gold); }

:focus-visible { outline: 2px solid var(--bold); outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
@media (forced-colors: active) { :focus-visible { outline: 2px solid Highlight; } }

/* =========================================================================
   3. TYPOGRAPHY UTILITIES
   ========================================================================= */
.display {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.02em; line-height: 1.06;
  color: var(--ink); text-wrap: balance;
}
.h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink); text-wrap: balance;
}
.h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink);
}
.body { font-family: var(--font-body); font-weight: 400; color: var(--ink-body); }
.body strong { font-weight: 600; color: var(--ink); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; }

/* Mono micro-labels — the Field Notes voice. Blue/slate on paper, NEVER gold. */
.eyebrow {
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; line-height: 1; color: var(--ink-meta);
}
.index-num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(.95rem, 1.6vw, 1.15rem); letter-spacing: .06em;
  color: var(--ink-link); font-feature-settings: "tnum" 1;
}
.meta {
  font-family: var(--font-mono); font-weight: 400; font-size: .74rem;
  letter-spacing: var(--note-track); text-transform: uppercase; line-height: 1.5;
  color: var(--ink-body);
}
.meta--soft { text-transform: none; letter-spacing: .01em; font-size: .8rem; line-height: 1.55; }

/* =========================================================================
   4. SECTION SHELL — the contents-index rail + asymmetric grid
   ========================================================================= */
.section { position: relative; padding-block: var(--section-y); z-index: 1; }
.section--band { background: var(--bg-panel); }
.section--band + .section--band { border-top: 1px solid var(--line-warm); }

.section__inner {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x);
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.section__body { min-width: 0; }

/* Index number — inline above content on mobile; moves to the rail at >=768px */
.index-num {
  display: inline-block; margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
}

/* Section header block */
.section-head { margin-bottom: var(--sp-7); }
.section-head .eyebrow { display: block; margin-bottom: var(--sp-3); }
.section-head__intro { margin-top: var(--sp-5); max-width: 46ch; }

/* The index rule that draws in under each heading */
.index-rule {
  display: block; height: 1px; background: var(--rule-ink); margin-top: var(--sp-5);
  transform: scaleX(0); transform-origin: left; opacity: .9;
}
.index-rule--center { transform-origin: center; margin-inline: auto; max-width: 460px; }

/* =========================================================================
   5. PAGE HEADER (NEW) — compact hero for interior pages. Distinct from the
   tall home hero: shorter top padding, no split, no notes column.
   Expected markup:
   <header class="page-header">
     <span class="contour contour--page" aria-hidden="true">…</span>
     <div class="page-header__inner">
       <p class="eyebrow reveal">Services</p>
       <h1 class="display reveal">What we do</h1>
       <span class="index-rule reveal" aria-hidden="true"></span>
       <p class="body lead page-header__intro reveal">…</p>
     </div>
   </header>
   ========================================================================= */
.page-header {
  position: relative; z-index: 1;
  padding-top: clamp(112px, 17vh, 172px);
  padding-bottom: var(--sp-6);
}
.page-header__inner {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x);
}
.page-header .display,
.page-header .h2 { margin-top: var(--sp-4); max-width: 22ch; }
.page-header .index-rule { margin-top: var(--sp-5); max-width: 640px; }
.page-header__intro { margin-top: var(--sp-5); max-width: 58ch; }

/* =========================================================================
   6. NAV — multi-page. Text links (.nav__link), not the single-page rail.
   ========================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background var(--dur-layout) var(--ease), box-shadow var(--dur-layout) var(--ease),
              border-color var(--dur-layout) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm); border-bottom-color: var(--rule);
}
.nav__inner {
  max-width: var(--maxw); margin-inline: auto; padding: var(--sp-3) var(--pad-x);
  display: flex; align-items: center; gap: var(--sp-5);
}
.nav__brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.nav__logo { width: 30px; height: 30px; color: var(--bold); flex: none; }
.nav__logo svg { width: 100%; height: 100%; }
.nav__wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -.01em; }

/* Text nav links — Outfit (not mono; mono is for micro-labels, not reading nav). */
.nav__links { display: none; align-items: center; gap: clamp(13px, 1.7vw, 26px); margin-inline: auto; }
.nav__link {
  position: relative; font-family: var(--font-body); font-weight: 500; font-size: .96rem;
  color: var(--ink-body); padding: 8px 2px; transition: color var(--dur-interact) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; opacity: .55;
  transition: transform var(--dur-interact) var(--ease), opacity var(--dur-interact) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--ink); font-weight: 600; }
.nav__link.is-current::after { transform: scaleX(1); opacity: 1; }

.nav__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); color: var(--ink); transition: background var(--dur-interact) var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, var(--bold) 10%, transparent); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.btn.nav__cta { display: none; }

.nav__menu { display: inline-flex; }
.nav__menu-bars { width: 20px; height: 14px; position: relative; display: block; }
.nav__menu-bars i {
  position: absolute; left: 0; right: 0; height: 1.8px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-interact) var(--ease), opacity var(--dur-interact) var(--ease);
}
.nav__menu-bars i:nth-child(1) { top: 0; }
.nav__menu-bars i:nth-child(2) { top: 6px; }
.nav__menu-bars i:nth-child(3) { top: 12px; }
.nav__menu[aria-expanded="true"] .nav__menu-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-bars i:nth-child(2) { opacity: 0; }
.nav__menu[aria-expanded="true"] .nav__menu-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================================
   7. MOBILE CONTENTS SHEET
   ========================================================================= */
.sheet { position: fixed; inset: 0; z-index: 150; }
.sheet[hidden] { display: none; }
.sheet__backdrop {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--navy) 40%, transparent);
  opacity: 0; transition: opacity var(--dur-layout) var(--ease);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 380px);
  background: var(--paper); border-left: 1px solid var(--rule); box-shadow: var(--shadow-lg);
  padding: calc(var(--sp-8) + 8px) var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-1);
  transform: translateX(100%); transition: transform var(--dur-layout) var(--ease);
  overflow-y: auto;
}
.sheet.is-open .sheet__panel { transform: translateX(0); }
.sheet__eyebrow { margin-bottom: var(--sp-4); }
.sheet__row {
  display: flex; align-items: baseline; gap: var(--sp-4); min-height: 52px;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink);
  border-top: 1px solid var(--line-warm); padding: var(--sp-3) 0;
}
.sheet__row:hover { color: var(--bold); }
.sheet__footer { margin-top: auto; padding-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); }

/* =========================================================================
   8. BUTTONS & ACTIONS
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  padding: 13px 22px; min-height: 46px; border-radius: var(--radius-pill);
  transition: transform var(--dur-interact) var(--ease), background var(--dur-interact) var(--ease),
              box-shadow var(--dur-interact) var(--ease), border-color var(--dur-interact) var(--ease),
              color var(--dur-interact) var(--ease);
}
.btn--gold { background: var(--gold); color: var(--cta-ink); box-shadow: 0 8px 22px -12px rgba(204,136,41,.7); }
.btn--gold:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(204,136,41,.8); }
.btn--lg { font-size: 1.05rem; padding: 16px 30px; min-height: 54px; }
.btn__arrow { transition: transform var(--dur-interact) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Ghost / secondary — hairline border, ink text, no fill (NEW) */
.btn--quiet {
  background: transparent; color: var(--ink); border: 1.5px solid var(--rule-ink); box-shadow: none;
}
.btn--quiet:hover {
  background: color-mix(in srgb, var(--bold) 7%, transparent); border-color: var(--bold);
  transform: translateY(-2px);
}

.link-action {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink-link);
  position: relative; padding: 8px 2px;
}
.link-action::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(.0); transform-origin: left; opacity: .5;
  transition: transform var(--dur-interact) var(--ease);
}
.link-action:hover::after { transform: scaleX(1); }

/* =========================================================================
   9. HOME HERO
   ========================================================================= */
.section--hero { padding-top: clamp(120px, 18vh, 200px); }
.section--hero .display { margin-top: var(--sp-4); max-width: 16ch; }
.display__break { display: inline; }
.hero__split { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); margin-top: var(--sp-7); }
.hero__lead .lead { max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); margin-top: var(--sp-6); }
.hero__notes { display: flex; flex-direction: column; gap: var(--sp-4); }
.hero__notes .meta:first-child { color: var(--ink-link); }

/* =========================================================================
   10. MINI-LIST + SIGNPOST (NEW) — lighter teaser rows on the home page
   Expected mini-list markup:
   <ul class="mini-list" role="list">
     <li class="mini-list__row reveal">
       <span class="mini-list__name h3">Custom internal tools</span>
       <span class="mini-list__desc body">The spreadsheet holding the business together, rebuilt for the job.</span>
       <span class="mini-list__arrow" aria-hidden="true">→</span>
     </li>
   </ul>
   Expected signpost markup:
   <div class="signpost">
     <a class="signpost__card reveal" href="services.html">
       <span class="signpost__num index-num">01</span>
       <span class="signpost__title h3">Services</span>
       <span class="signpost__line body">A few things, done properly.</span>
       <span class="signpost__arrow" aria-hidden="true">→</span>
     </a>
   </div>
   ========================================================================= */
.mini-list { margin-top: var(--sp-2); }
.mini-list__row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2) var(--sp-5); padding: var(--sp-4) 0; border-top: 1px solid var(--rule);
  color: inherit; transition: background var(--dur-interact) var(--ease);
}
.mini-list__row:last-child { border-bottom: 1px solid var(--rule); }
.mini-list__name { flex: 1 1 220px; }
.mini-list__desc { flex: 2 1 320px; color: var(--ink-body); }
.mini-list__arrow {
  font-family: var(--font-mono); color: var(--ink-link); flex: none; align-self: center;
  transition: transform var(--dur-interact) var(--ease);
}
a.mini-list__row:hover .mini-list__name { color: var(--bold); }
a.mini-list__row:hover .mini-list__arrow { transform: translateX(3px); }

.signpost { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
.signpost__card {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface);
  color: inherit; transition: transform var(--dur-interact) var(--ease), border-color var(--dur-interact) var(--ease),
              box-shadow var(--dur-interact) var(--ease);
}
.signpost__card:hover { transform: translateY(-3px); border-color: var(--rule-ink); box-shadow: var(--shadow-sm); }
.signpost__num { display: block; }
.signpost__line { color: var(--ink-body); }
.signpost__arrow { margin-top: auto; padding-top: var(--sp-2); font-family: var(--font-mono); color: var(--ink-link); }

/* =========================================================================
   11. LEDGERS (services + illustrative work)
   ========================================================================= */
.ledger { margin-top: var(--sp-2); }
.ledger__row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-5) 0; border-top: 1px solid var(--rule);
  transition: background var(--dur-interact) var(--ease);
}
.ledger__row:last-child { border-bottom: 1px solid var(--rule); }
.ledger__main { min-width: 0; }
.ledger__main .h3 { margin-bottom: var(--sp-2); }
.ledger__main .body { max-width: 60ch; }
.ledger__meta {
  grid-column: 1 / -1; color: var(--slate); align-self: start;
}
.ledger__caveat { margin-top: var(--sp-5); text-transform: none; letter-spacing: .01em; font-size: .82rem; color: var(--slate); }
/* "How this helps" disclosure — a plain-language benefit explainer per service */
.ledger__explain { display: inline-flex; align-items: center; gap: 9px; margin-top: var(--sp-4); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-link); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.ledger__explain:hover { color: var(--bold-deep); }
.ledger__explain-icon { display: inline-grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--rule-ink); border-radius: 50%; font-size: 1rem; line-height: 1; color: var(--ink-link); transition: transform var(--dur-interact) var(--ease), border-color var(--dur-interact) var(--ease); }
.ledger__explain:hover .ledger__explain-icon { border-color: var(--bold); }
.ledger__explain[aria-expanded="true"] .ledger__explain-icon { transform: rotate(45deg); }
.ledger__help { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-left: 2px solid var(--bold); background: var(--bg-panel); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ledger__help[hidden] { display: none; }
.ledger__help .body { max-width: 60ch; }

.work__type { color: var(--bold); margin-bottom: var(--sp-2); }
.tag-illustrative {
  color: var(--slate); border: 1px solid var(--rule-ink); border-radius: var(--radius-pill);
  padding: 4px 10px; font-size: .66rem; justify-self: start; background: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}
[data-theme="dark"] .tag-illustrative { background: color-mix(in srgb, var(--gold) 12%, transparent); }

/* =========================================================================
   12. NOTES (signature notebook — the single gold tick lives here)
   ========================================================================= */
.notes { margin-top: var(--sp-2); }
.note {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-6) 0; border-top: 1px solid var(--rule);
}
.note:last-child { border-bottom: 1px solid var(--rule); }
.note__main { min-width: 0; }
.note__main .h3 { margin-bottom: var(--sp-3); }
.note__main .body { max-width: 56ch; }
.note__annot { color: var(--slate); text-transform: none; letter-spacing: .01em; font-size: .8rem; padding-top: var(--sp-1); }
/* The one gold moment — a non-text tick under the trust annotation */
.note__annot--gold { position: relative; color: var(--ink); display: inline-block; }
.note__annot--gold::after {
  content: ""; position: absolute; left: 14px; right: 0; bottom: -3px; height: 3px;
  background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.note.is-revealed .note__annot--gold::after { transform: scaleX(1); }
.notes__caveat { margin-top: var(--sp-5); text-transform: none; letter-spacing: .01em; font-size: .82rem; color: var(--slate); max-width: 64ch; }

/* =========================================================================
   13. WORK CARDS (NEW) — editorial cards for the 3 live demos
   Expected markup:
   <div class="work-cards">
     <article class="work-card reveal">
       <a class="work-card__media" href="analytics-dashboard/index.html" target="_blank" rel="noopener"
          aria-label="Open the Pulse analytics dashboard demo">
         <span class="work-card__live">Live · open ↗</span>
         <svg viewBox="0 0 320 180" aria-hidden="true">…</svg>
       </a>
       <div class="work-card__body">
         <p class="meta work-card__cat">Analytics · SaaS</p>
         <h3 class="h3">Pulse — Analytics Dashboard</h3>
         <p class="body"><strong>Problem:</strong> …</p>
         <p class="body"><strong>Solution:</strong> …</p>
         <div class="work-card__tags"><span>KPI cards</span><span>Interactive charts</span></div>
         <a class="link-action" href="analytics-dashboard/index.html" target="_blank" rel="noopener">Open the demo ↗</a>
       </div>
     </article>
   </div>
   ========================================================================= */
.work-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-2); }
.work-card {
  display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); transition: transform var(--dur-interact) var(--ease),
              box-shadow var(--dur-interact) var(--ease), border-color var(--dur-interact) var(--ease);
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--rule-ink); }
.work-card__media {
  position: relative; display: block; aspect-ratio: 320 / 180; overflow: hidden;
  background: var(--paper-2); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.work-card__media svg,
.work-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; transition: transform .4s var(--ease); }
.work-card:hover .work-card__media svg,
.work-card:hover .work-card__media img { transform: scale(1.03); }
.work-card__live {
  position: absolute; top: 12px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cta-ink); background: var(--gold); padding: 5px 10px; border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.4);
}
.work-card__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cta-ink); flex: none; }
.work-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.work-card__cat { color: var(--ink-link); }
.work-card__body .h3 { margin-top: 2px; margin-bottom: 2px; }
.work-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.work-card__tags span {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .03em; color: var(--ink-body);
  border: 1px solid var(--rule-ink); border-radius: var(--radius-pill); padding: 4px 10px;
}
.work-card__body .link-action { margin-top: var(--sp-3); align-self: flex-start; }

/* =========================================================================
   13b. WORK CAROUSEL — Home's compact "Selected work" showcase (2026-07-16,
   replacing the full .work-cards grid there — work.html above keeps that
   grid unchanged). One slide full-width at a time on a horizontal
   scroll-snap track (native touch swipe for free), prev/next arrows, dot
   indicators + a numeric counter (still legible if the project count grows
   well past what a dot row can show cleanly), and a persistent play/pause
   toggle — WCAG 2.2.2 requires a way to stop auto-advancing content that
   isn't just "don't touch it" (hover-pause alone doesn't help keyboard or
   touch-only users). Text sits on a blurred/darkened copy of the project's
   own screenshot, so it's deliberately always light-on-dark regardless of
   the page's own light/dark theme — the same reasoning a photo hero uses.
   Behavior (autoplay, pause, arrow/dot/keyboard nav) lives in site.js.
   ========================================================================= */
.work-carousel { margin-top: var(--sp-2); }
.work-carousel__frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--rule);
}
.work-carousel__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.work-carousel__viewport::-webkit-scrollbar { display: none; }
.work-carousel__track { display: flex; }
.work-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.work-carousel__link {
  /* #fff literal, not var(--white) — that token is remapped to a dark navy card color in
     [data-theme="dark"] (used elsewhere for surfaces, not text), which would make this
     deliberately-always-light photo-overlay text/icons unreadable in dark mode. */
  /* Min bumped 220px→260px alongside the 3-line brief above — otherwise the text panel eats
     nearly the whole slide height on mobile, leaving barely a sliver of photo visible at top. */
  position: relative; display: block; width: 100%; height: clamp(260px, 38vw, 360px); color: #fff;
}
.work-carousel__bg { position: absolute; inset: 0; }
.work-carousel__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  filter: blur(3px) brightness(.55) saturate(1.05);
  transform: scale(1.06); /* covers the blur filter's soft edge */
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.work-carousel__link:hover .work-carousel__bg img,
.work-carousel__link:focus-visible .work-carousel__bg img { transform: scale(1.1); filter: blur(2px) brightness(.5) saturate(1.1); }
.work-carousel__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,42,67,.15) 0%, rgba(16,42,67,.55) 65%, rgba(16,42,67,.82) 100%);
}
.work-carousel__live {
  position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cta-ink); background: var(--gold); padding: 5px 10px; border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.4);
}
.work-carousel__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cta-ink); flex: none; }
.work-carousel__info {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  padding: var(--sp-5) var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: 4px;
}
.work-carousel__cat { color: #CFE3F5; }
.work-carousel__title { color: #fff; margin: 0; }
.work-carousel__brief {
  /* Widened 46ch→60ch and clamp 2→3 lines, 2026-07-16 (owner: briefs read as too terse) — measured
     against the real (longer) copy in data/site.json at 375px mobile width: at 2 lines it was
     clipping roughly half the text, 3 lines comfortably fits it with no clipping. */
  color: rgba(255,255,255,.86); max-width: 60ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.work-carousel :focus-visible { outline-color: var(--gold); }

.work-carousel__arrow {
  /* #fff literal — same reasoning as .work-carousel__link above. */
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); color: #fff;
  background: rgba(16,42,67,.45); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px);
  transition: background var(--dur-interact) var(--ease);
}
.work-carousel__arrow:hover { background: rgba(16,42,67,.7); }
.work-carousel__arrow svg { width: 20px; height: 20px; }
.work-carousel__arrow--prev { left: var(--sp-3); }
.work-carousel__arrow--next { right: var(--sp-3); }

.work-carousel__controls { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap: wrap; }
.work-carousel__dots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.work-carousel__dot { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } /* WCAG 2.2 SC 2.5.8 min target */
.work-carousel__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rule-ink);
  transition: background var(--dur-interact) var(--ease), transform var(--dur-interact) var(--ease);
}
.work-carousel__dot:hover::before { background: var(--ink-link); }
.work-carousel__dot[aria-current="true"]::before { background: var(--ink-link); transform: scale(1.3); }
.work-carousel__count { color: var(--ink-meta); margin-left: auto; }
.work-carousel__playpause {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); color: var(--ink); border: 1px solid var(--rule-ink);
  transition: background var(--dur-interact) var(--ease);
}
.work-carousel__playpause:hover { background: color-mix(in srgb, var(--bold) 10%, transparent); }
.work-carousel__playpause svg { width: 16px; height: 16px; }
.work-carousel__playpause .icon-play { display: none; }
.work-carousel__playpause[aria-pressed="true"] .icon-pause { display: none; }
.work-carousel__playpause[aria-pressed="true"] .icon-play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .work-carousel__viewport { scroll-behavior: auto; }
  .work-carousel__bg img, .work-carousel__arrow { transition: none; }
}

/* =========================================================================
   14. ABOUT
   ========================================================================= */
.about__split { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); }
.about__story { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 60ch; }
.about__facts { display: flex; flex-direction: column; gap: var(--sp-4); }
.about__facts .meta:first-child { color: var(--ink-link); }

/* =========================================================================
   15. CONTACT (centered exception) + FORM (NEW, paper-themed)
   ========================================================================= */
.section--contact { text-align: left; }
.section__body--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section__body--center .eyebrow { margin-bottom: var(--sp-4); }
.contact__h { max-width: 22ch; }
.contact__sub { max-width: 52ch; margin-top: var(--sp-6); }
.next {
  display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-7);
  text-align: left; max-width: 480px; width: 100%;
}
.next__item { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: baseline; }
.contact__cta { margin-top: var(--sp-8); }
.contact__email { margin-top: var(--sp-5); text-transform: none; letter-spacing: .01em; font-size: .82rem; color: var(--slate); }
.contact__email a { color: var(--bold); }
.contact__direct { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-7); }
.contact__or { margin-top: var(--sp-5); text-transform: none; letter-spacing: .02em; color: var(--slate); }
.contact__formhint { margin-top: var(--sp-3); text-transform: none; letter-spacing: .01em; font-size: .8rem; color: var(--slate); }

/* Contact form — ported/paper-themed from the old styles.css field styles */
.form { margin-top: var(--sp-7); width: 100%; max-width: 480px; text-align: left; }
.field { margin-bottom: var(--sp-5); }
.field label {
  display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-meta); margin-bottom: var(--sp-2);
}
.field input, .field textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .98rem; color: var(--ink); background: var(--surface);
  transition: border-color var(--dur-interact) var(--ease), box-shadow var(--dur-interact) var(--ease),
              background var(--dur-interact) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate); opacity: .7; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--bold); box-shadow: var(--focus-ring); background: var(--paper);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--bold); outline-offset: 2px; }
@media (forced-colors: active) { .field input:focus, .field textarea:focus { outline: 2px solid Highlight; } }
/* Focus ring needs a brighter colour to stand out on the dark navy grounds */
.footer :focus-visible, .section--quote :focus-visible { outline-color: var(--gold); }
.field textarea { resize: vertical; min-height: 130px; }
.form__actions { margin-top: var(--sp-2); }
.form__note {
  margin-top: var(--sp-4); font-family: var(--font-mono); font-size: .82rem; letter-spacing: .02em;
  min-height: 1.2em; text-align: left;
}
.form__note.ok { color: #1a7a4a; }
[data-theme="dark"] .form__note.ok { color: #4fd995; }
.form__note.err { color: #c0392b; }
[data-theme="dark"] .form__note.err { color: #ff8f79; }

/* =========================================================================
   16. CTA BAND (NEW) — reusable end-of-page conversion moment. Reuses the
   section-shell rail (index-num + section__inner/__body) so it stays editorial,
   not a loud colored box.
   Expected markup (identical on services/approach/work/studio, §5.7):
   <section class="cta-band">
     <div class="section__inner">
       <span class="index-num" aria-hidden="true">→</span>
       <div class="section__body">
         <p class="eyebrow reveal">Start a conversation</p>
         <h2 class="h2 reveal">Tell us what's slowing you down.</h2>
         <p class="body lead cta-band__sub reveal">We'll tell you, honestly, if we can help — usually within one business day.</p>
         <div class="cta-band__actions reveal">
           <a class="btn btn--gold btn--lg" href="contact.html">Start a conversation <span class="btn__arrow" aria-hidden="true">→</span></a>
         </div>
       </div>
     </div>
   </section>
   ========================================================================= */
.cta-band { position: relative; z-index: 1; padding-block: var(--section-y); border-top: 1px solid var(--line-warm); }
.cta-band .h2 { max-width: 18ch; }
.cta-band__sub { margin-top: var(--sp-4); max-width: 50ch; }
.cta-band__actions { margin-top: var(--sp-6); }

/* ---- Pull-quote band — a deliberate navy punctuation to break the paper rhythm ---- */
.section--quote { background: var(--navy); color: var(--mist); position: relative; z-index: 1; }
[data-theme="dark"] .section--quote { background: #081320; }
.pullquote { max-width: 34ch; }
.pullquote__mark { font-family: var(--font-display); color: var(--gold); font-size: 3rem; line-height: .3; display: block; }
.pullquote__q { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.32; letter-spacing: -.01em; color: var(--mist); margin-top: var(--sp-4); text-wrap: balance; }
.pullquote__cite { color: var(--gold); margin-top: var(--sp-5); }

/* =========================================================================
   17. FOOTER (navy ground)
   ========================================================================= */
.footer { position: relative; z-index: 1; background: var(--navy); color: var(--mist); }
[data-theme="dark"] .footer { background: #081320; border-top: 1px solid var(--rule); }
.footer__inner {
  max-width: var(--maxw); margin-inline: auto; padding: var(--sp-9) var(--pad-x) var(--sp-7);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-7);
}
.footer__brand { min-width: 0; display: flex; flex-direction: column; }
.footer__logo { color: var(--paper); }
[data-theme="dark"] .footer__logo { color: var(--mist); }
.footer__logo .nav__logo { color: var(--ocean-soft); }
.footer__tagline { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; color: var(--ocean-soft); margin-top: var(--sp-4); max-width: 28ch; }
.footer__col { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__h { color: var(--gold); margin-bottom: var(--sp-1); } /* gold text allowed on navy */
.footer__col a { color: var(--mist); width: fit-content; transition: color var(--dur-interact) var(--ease); }
.footer__col a:hover { color: var(--gold); }
.footer__mail { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .02em; word-break: break-all; }
.footer__signoff { font-size: .92rem; color: var(--ocean-soft); line-height: 1.55; }
.footer__base {
  max-width: var(--maxw); margin-inline: auto; padding: var(--sp-5) var(--pad-x) var(--sp-8);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: space-between;
}
.footer__colophon { color: var(--gold); }
.footer__copy { color: var(--ocean-soft); text-transform: none; letter-spacing: .01em; }

/* =========================================================================
   18. TEXTURE — contour layers
   ========================================================================= */
.contour { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: var(--contour-opacity); overflow: hidden; }
.contour svg { width: 100%; height: 100%; }
.contour--hero { left: auto; right: 0; width: 60%; top: 8%; }
.contour--notebook { right: auto; left: 0; width: 28%; opacity: calc(var(--contour-opacity) * .8); }
.contour--contact { inset: 0; opacity: calc(var(--contour-opacity) * .9); }
/* Interior-page variants (NEW) */
.contour--page { left: auto; right: 0; width: 46%; top: 4%; opacity: calc(var(--contour-opacity) * .85); }
.contour--band { inset: 0; opacity: calc(var(--contour-opacity) * .6); }

/* =========================================================================
   19. MOTION — reveals
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-revealed { opacity: 1; transform: none; }
/* No-JS fallback: if scripting is off, reveals never fire — show content anyway */
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }
.index-rule.is-revealed { transition: transform .5s var(--ease) .05s; transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .index-rule { transform: scaleX(1); transition: none; }
  .note__annot--gold::after { transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   20. RESPONSIVE — rail + asymmetric splits engage at >=768px
   ========================================================================= */
/* Desktop nav has 7 links + a CTA — give it room; below 1024px use the hamburger sheet. */
@media (min-width: 1024px) {
  .btn.nav__cta { display: inline-flex; }
  .nav__menu { display: none; }
  .nav__links { display: flex; }
}

@media (min-width: 768px) {
  /* The contents-index rail appears: index number moves into the left margin */
  .section__inner { grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--col-gap); }
  .index-num {
    grid-column: 1; grid-row: 1; justify-self: start; align-self: start;
    margin: 0; padding-top: 6px; position: sticky; top: 96px;
  }
  .section__body { grid-column: 2; grid-row: 1; }

  /* Page header intro sits under a constrained heading, same rail rhythm */
  .page-header__inner { padding-left: var(--pad-x); }

  /* Hero asymmetric 60/40 */
  .hero__split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
  .hero__notes { padding-top: var(--sp-3); border-left: 1px solid var(--rule); padding-left: var(--sp-5); }

  /* Services ledger: number | name+desc | meta (right margin annotation) */
  .ledger__row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
  .ledger__meta { grid-column: auto; justify-self: end; text-align: right; padding-top: 5px; }
  .tag-illustrative { justify-self: end; }
  .ledger__row:hover { background: color-mix(in srgb, var(--bold) 4%, transparent); }

  /* Notebook: rail rule (left border on the main column) + hanging note number + margin annotation */
  .note {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start;
  }
  .note__annot { text-align: left; padding-top: 6px; }

  /* About 60/40 (lead-left) */
  .about__split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
  .about__facts { padding-top: var(--sp-2); border-left: 1px solid var(--rule); padding-left: var(--sp-5); }

  /* Contact centered within the body column */
  .section__body--center { align-items: center; }

  /* Work cards: 2-up */
  .work-cards { grid-template-columns: repeat(2, 1fr); }

  /* Signpost: 2–3 up */
  .signpost { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  /* Footer columns */
  .footer__inner { grid-template-columns: 1.6fr 1fr 1.4fr; gap: var(--col-gap); }
}

@media (min-width: 1040px) {
  .section__inner { column-gap: var(--col-gap); }
  .nav__inner { padding-inline: var(--pad-x); }

  /* Work cards: 3-up */
  .work-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Larger hero break: allow the two-line break only when there's room */
@media (min-width: 600px) {
  .display__break { display: block; height: 0; }
}