/* ============================================================================
   a77.ch — design code v5 "FIELD NOTES"
   Monochrome, neutral (no warm/cool tint), inversion instead of colour.
   No cards, no shadows, no rounded corners — typography, whitespace, hairlines.
   One expressive moment per section (a single line-art mark); everything
   else stays quiet. Static by default: motion is limited to hover/theme.
   01 tokens · 02 reset · 03 chrome · 04 hero · 05 sections · 06 rows
   07 contact · 08 footer · 09 brand guide
   ========================================================================= */

/* ---- 00 · FONT ----------------------------------------------------------
   Self-hosted, not Google Fonts: a visitor's first request should not tell
   a third party they exist. Archivo ships as one variable file — the same
   bytes serve every weight from 400 to 700, so there is exactly one font
   request on the whole site, ever.                                        */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-400-700.woff2") format("woff2");
}

/* ---- 01 · TOKENS -------------------------------------------------------
   Every value is a true neutral grey (R=G=B) — no warm or cool bias at all.
   The palette has exactly two colours, black and white; dark/light themes
   are the same system with the roles swapped.                             */
:root {
  --bg: #101010;   /* soft black, not pure #000 */
  --fg: #f4f4f4;   /* soft white, not pure #fff */

  --line:        color-mix(in srgb, var(--fg) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--fg) 30%, transparent);
  --muted:       color-mix(in srgb, var(--fg) 56%, transparent);
  --wash:        color-mix(in srgb, var(--fg) 6%, transparent);

  --pad: clamp(20px, 4vw, 64px);
  --maxw: 1240px;
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

html[data-theme="light"] {
  --bg: #f4f4f4;
  --fg: #101010;
}

/* ---- 02 · RESET --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--ease) .25s, color var(--ease) .25s;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1; text-transform: lowercase; }
p { margin: 0; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--fg); color: var(--bg); padding: 12px 18px; font-weight: 600; }
.skip:focus { left: 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.rule { border-top: 1px solid var(--line-strong); }
.muted { color: var(--muted); }

.idx {
  display: block; margin-bottom: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
/* a77 is always lowercase, even inside an uppercase label. */
.keep-case { text-transform: lowercase; }

/* Decorative line-art mark — one per section, quiet by default. */
.motif { color: var(--fg); opacity: .5; }
.motif svg { width: 100%; height: 100%; }

/* ---- 03 · CHROME -------------------------------------------------------- */
.head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(16px, 2vw, 22px) var(--pad);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.head-mark {
  font-weight: 700; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -0.03em;
  text-decoration: none; text-transform: lowercase;
}
.head-right { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.head-link {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.head-link:hover, .head-link:focus-visible { border-bottom-color: var(--fg); }
@media (max-width: 620px) { .head-link.opt { display: none; } }
.theme-btn {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  padding: 0; background: transparent; color: inherit; cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.theme-btn:hover, .theme-btn:focus-visible { background: var(--fg); color: var(--bg); }
.theme-btn .moon { display: none; }
html[data-theme="light"] .theme-btn .sun { display: none; }
html[data-theme="light"] .theme-btn .moon { display: block; }

/* Status strip — a genuine ticker. The one thing on the page that moves on
   its own, because it is the one thing that is genuinely live. The track is
   duplicated in the markup so the loop has no seam; reduced motion just
   freezes it on the first copy. */
.status {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted);
}
.status-track {
  display: flex; align-items: center; width: max-content;
  padding: 12px var(--pad);
  animation: ticker 34s linear infinite;
}
.status:hover .status-track, .status:focus-within .status-track { animation-play-state: paused; }
.status-track span { white-space: nowrap; }
.status-track span + span::before { content: "·"; margin-inline: 16px; opacity: .6; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .status-track { animation: none; } }

/* ---- 04 · HERO ------------------------------------------------------------
   The wordmark is live text, not an image: real Archivo glyphs are the whole
   point. Topographic contour lines sit behind it as a barely-there texture.
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(56px, 9vw, 120px) var(--pad) clamp(40px, 5vw, 64px); overflow: clip; }
.hero-topo {
  position: absolute; inset: -10% -5% auto -5%; height: 620px; z-index: 0;
  color: var(--fg); opacity: .16; pointer-events: none;
}
.hero-rings {
  position: absolute; right: -6%; top: 4%; width: min(46vw, 520px); aspect-ratio: 1;
  z-index: 0; color: var(--fg); opacity: .22; pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 {
  font-weight: 700; font-size: clamp(4rem, 15vw, 11rem); letter-spacing: -0.05em; line-height: 0.85;
}
.hero-claim {
  margin-top: clamp(20px, 3vw, 34px);
  font-weight: 600; font-size: clamp(1.4rem, 3.2vw, 2.3rem); letter-spacing: -0.03em;
  line-height: 1.15; max-width: 20ch; text-transform: lowercase;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(20px, 3.5vw, 56px); align-items: end;
  margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line-strong);
}
.hero-note { color: var(--muted); max-width: 44ch; }
.hero-note b { color: var(--fg); font-weight: 700; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } }

/* ---- 05 · SECTIONS -------------------------------------------------------- */
.sec { padding: clamp(48px, 6vw, 96px) var(--pad); border-top: 1px solid var(--line-strong); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.sec-head-text { max-width: 44ch; }
.sec-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.sec-head p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.sec-motif { width: clamp(48px, 6vw, 72px); height: clamp(48px, 6vw, 72px); flex: none; }

/* Umbrella */
.units { border-top: 1px solid var(--line-strong); }
.unit {
  display: grid; grid-template-columns: minmax(0, 18ch) minmax(0, 1fr) auto;
  gap: clamp(10px, 2.5vw, 40px); align-items: start;
  padding-block: clamp(20px, 2.6vw, 30px); border-bottom: 1px solid var(--line);
}
.unit h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }
.unit h3 a { text-decoration: none; border-bottom: 1px solid var(--fg); }
.unit h3 a:hover { opacity: .6; }
.unit p { color: var(--muted); max-width: 56ch; }
.state {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; white-space: nowrap; border: 1px solid var(--line-strong); color: var(--muted);
}
.state-live { background: var(--fg); border-color: var(--fg); color: var(--bg); }
@media (max-width: 800px) {
  .unit { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .unit p { grid-column: 1 / -1; }
}

/* Affiliate — countdown + results chart */
.count-grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line-strong); }
.count-cell { flex: 1 1 110px; min-width: 90px; padding: 18px 16px 20px; background: var(--bg); }
.count-cell b { display: block; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.count-cell span { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.count-note { margin-top: clamp(20px, 2.6vw, 30px); color: var(--muted); max-width: 52ch; }
.count-done { display: none; }
.count[data-state="done"] .count-grid, .count[data-state="done"] .count-note { display: none; }
.count[data-state="done"] .count-done { display: block; }

.results { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--line-strong); }
.results-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(24px, 4vw, 56px); align-items: start; }
.results h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600; margin-bottom: 12px; }
.results p { color: var(--muted); max-width: 46ch; }
.chart { width: 100%; height: auto; }
.chart .bar { fill: var(--fg); }
.chart .bar.dim { fill: var(--muted); }
.chart text { fill: var(--fg); font-family: var(--font); }
.chart .lbl { fill: var(--muted); }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .bar-projected { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .trend { fill: none; stroke: var(--muted); stroke-width: 1; }
.chart-note { margin-top: 12px; font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .results-grid { grid-template-columns: 1fr; } }

/* Engineering reuses .units/.unit/.state from the umbrella — no styles of its own. */

/* Founder */
.founder { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.founder p + p { margin-top: 16px; }
.founder p { color: var(--muted); max-width: 56ch; }
.founder .sign { margin-top: 20px; font-size: 1.1rem; font-weight: 700; color: var(--fg); text-transform: lowercase; }
.founder .sign span { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.founder-contacts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line-strong); }
.founder-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; background: var(--bg); text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.founder-contact:hover, .founder-contact:focus-visible { background: var(--fg); color: var(--bg); }
.founder-contact b { font-size: 1.05rem; font-weight: 700; }
.founder-contact span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.founder-contact:hover span { color: color-mix(in srgb, var(--bg) 55%, var(--fg)); }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } }

/* ---- 07 · CONTACT ----------------------------------------------------------- */
.contact { padding: clamp(48px, 6vw, 96px) var(--pad); border-top: 1px solid var(--line-strong); }
.contact h2 { font-size: clamp(2.2rem, 6.5vw, 4.2rem); line-height: 0.94; letter-spacing: -0.04em; margin-bottom: clamp(14px, 1.8vw, 20px); }
.contact .lede { color: var(--muted); max-width: 48ch; margin-bottom: clamp(22px, 2.8vw, 32px); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; padding: 13px 20px;
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; text-transform: lowercase;
  text-decoration: none; cursor: pointer; background: transparent; color: inherit;
  border: 1px solid var(--line-strong);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-solid { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-solid:hover, .btn-solid:focus-visible { background: transparent; color: var(--fg); }
.reply { margin-top: clamp(18px, 2.2vw, 26px); font-size: 13.5px; color: var(--muted); max-width: 54ch; }

/* ---- 08 · FOOTER ----------------------------------------------------------- */
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--line-strong); }
.foot div { padding: clamp(15px, 1.8vw, 20px) var(--pad); border-right: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.foot div:last-child { border-right: 0; }
.foot b { display: block; margin-top: 3px; color: var(--fg); font-weight: 700; }
.foot a { text-decoration: none; border-bottom: 1px solid var(--line); }
.foot a:hover { border-bottom-color: var(--fg); }

#toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 14px);
  background: var(--fg); color: var(--bg); padding: 10px 18px; font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---- 09 · BRAND GUIDE ------------------------------------------------------ */
.title { padding: clamp(48px, 7vw, 96px) var(--pad) clamp(28px, 4vw, 46px); }
.title h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: 0.92; letter-spacing: -0.04em; }
.title p { margin-top: clamp(24px, 3vw, 34px); padding-top: clamp(16px, 2vw, 26px); border-top: 1px solid var(--line-strong); max-width: 62ch; color: var(--muted); }
.guide > h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: clamp(18px, 2.4vw, 30px); }
.guide h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); letter-spacing: -0.01em; margin: clamp(28px, 3vw, 40px) 0 12px; font-weight: 600; text-transform: lowercase; }
.note { color: var(--muted); max-width: 68ch; }

.specimens { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(14px, 2.2vw, 26px); margin-top: clamp(22px, 3vw, 34px); }
.spec { display: flex; flex-direction: column; gap: 10px; }
.tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--fg); color: var(--bg); }
.tile.tile-outline { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); }
.tile b { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; text-transform: lowercase; }
.caption { font-size: 12.5px; color: var(--muted); }
.caption b { color: var(--fg); font-weight: 700; }

.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line-strong); margin-top: clamp(22px, 3vw, 34px); }
.sw { background: var(--bg); }
.sw-chip { height: clamp(66px, 8vw, 100px); }
.sw-body { padding: 11px 13px 15px; }
.sw-body b { display: block; font-weight: 700; font-size: 13.5px; }
.sw-body span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.scale { border-top: 1px solid var(--line-strong); margin-top: clamp(22px, 3vw, 34px); }
.scale-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19ch); gap: clamp(12px, 3vw, 36px); align-items: baseline; padding-block: clamp(14px, 2vw, 22px); border-bottom: 1px solid var(--line); }
.scale-row > div:last-child { font-size: 12.5px; color: var(--muted); }
.s-display { font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 0.9; letter-spacing: -0.045em; text-transform: lowercase; }
.s-head { font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; letter-spacing: -0.03em; text-transform: lowercase; }
.s-sub { font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.15; letter-spacing: -0.02em; text-transform: lowercase; }
.s-body { font-size: 16px; }
.s-meta { font-weight: 600; font-size: 13px; color: var(--muted); letter-spacing: .02em; }

.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 2.2vw, 26px); margin-top: clamp(20px, 2.6vw, 30px); }
.pair { border: 1px solid var(--line-strong); display: flex; flex-direction: column; }
.pair-demo { min-height: 118px; padding: 20px; display: flex; align-items: center; background: var(--wash); overflow: hidden; }
.pair-demo > * { max-width: 100%; }
.pair-tag { padding: 11px 15px; font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--line-strong); }
.pair-tag b { font-weight: 700; }
.no b { color: var(--muted); }
.demo-lower { font-weight: 700; font-size: 1.8rem; line-height: 1; letter-spacing: -0.04em; text-transform: lowercase; }
.demo-caps { font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; }
.demo-block { width: 100%; background: var(--fg); color: var(--bg); padding: 16px; font-weight: 700; font-size: 1.3rem; line-height: 1; letter-spacing: -0.03em; text-transform: lowercase; }
.demo-shadow { width: 100%; background: var(--wash); padding: 16px; font-weight: 700; font-size: 1.3rem; line-height: 1; box-shadow: 8px 8px 0 var(--muted); border-radius: 14px; text-transform: lowercase; }
.demo-cols { width: 100%; }
.demo-cols span { display: block; height: 9px; background: var(--line-strong); margin-bottom: 8px; }
.demo-cols span:nth-child(1) { width: 90%; }
.demo-cols span:nth-child(2) { width: 66%; }
.demo-cols span:nth-child(3) { width: 78%; }
.demo-cols.centre { text-align: center; }
.demo-cols.centre span { margin-inline: auto; }

.rules { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.rules li { list-style: none; display: grid; grid-template-columns: 1.6ch minmax(0, 1fr); gap: 12px; padding-block: clamp(11px, 1.5vw, 17px); border-bottom: 1px solid var(--line); }
.rules li::before { content: "—"; font-weight: 700; color: var(--muted); }
.rules b { font-weight: 700; }

pre { margin: 0; padding: clamp(16px, 2.2vw, 24px); background: var(--wash); border: 1px solid var(--line-strong); overflow-x: auto; font-size: 13px; line-height: 1.7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.copy-btn { margin-top: 13px; padding: 10px 16px; font: inherit; font-size: 12.5px; font-weight: 600; text-transform: lowercase; background: transparent; color: inherit; border: 1px solid var(--line-strong); cursor: pointer; }
.copy-btn:hover { background: var(--fg); color: var(--bg); }

.foot-simple { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; justify-content: space-between; padding: clamp(18px, 2.4vw, 26px) var(--pad); font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line-strong); }
.foot-simple a { text-decoration: none; border-bottom: 1px solid var(--line); }
.foot-simple a:hover { border-bottom-color: var(--fg); }

@media print {
  html, body { background: #fff; color: #000; }
  .head, .status, .theme-btn, .actions, .skip, #toast, .hero-topo, .hero-rings { display: none !important; }
}