/* My Words · mywords.chat
 *
 * The entire stylesheet. Implements the Civic Cadence design system from the
 * My Words brand kit v1.0.2 (05-documentation/DESIGN.md).
 *
 *   Colour   every value below is an approved token from DESIGN.md 5.1. There
 *            are no other hex values in this file, and tools/check.mjs fails
 *            the build if one appears.
 *   Ground   the site ground is warm paper, so :root carries the light-mode
 *            token set. A navy or olive field re-declares the same token names
 *            with its own surface-correct values, so a component written once
 *            stays accessible in every field it is dropped into.
 *   Type     Noto Sans only, at the scale in DESIGN.md 5.2.
 *   Rhythm   the 8px scale in DESIGN.md 5.3; the 4px half-step inside controls.
 *   Shape    6px controls, 8px planes, 12px sheets, 0-2px held scenes.
 *   Motion   100ms feedback, 220ms arrival, 320ms expansion, and nothing that
 *            loops, pulses or floats.
 */

/* ---- font ------------------------------------------------------------- */

/* Latin and Latin Extended subset supplied in the brand kit. It covers the
 * Polish and Spanish samples used on this site. Any language outside that
 * coverage needs its own Noto subset added here before it is shown. */
@font-face {
  font-family: "Noto Sans";
  src: url("/site-assets/fonts/NotoSans-Brand-Latin.woff2?v=2026-08-17.3") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens ------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* surfaces and text: DESIGN.md 5.1 light mode */
  --bg-deep: #F4F0E7;
  --bg-warm: #ECE6DA;
  --bg-surface: #E3DDCF;
  --bg-elevated: #FBF8F1;
  --text-primary: #0B1B2F;
  --text-secondary: #3F4C5B;
  --text-muted: #59636D;
  --text-whisper: #6C747B;
  --border: #9A9488;
  --border-strong: #6F6A61;
  --brand-active: #7E5106;
  --brand-continuity: #596244;
  --success: #1F6744;
  --warning: #704700;
  --error: #94342F;
  --info: #1E607D;

  /* type */
  --font-sans: "Noto Sans", system-ui, sans-serif;
  --t-display: clamp(40px, 5vw, 64px);
  --t-h1: 40px;
  --t-h2: 30px;
  --t-h3: 22px;
  --t-conversation: 24px;
  --t-body: 17px;
  --t-small: 15px;
  --t-label: 13px;

  /* spacing: DESIGN.md 5.3 */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --s8: 96px;

  /* shape */
  --r-control: 6px;
  --r-plane: 8px;
  --r-sheet: 12px;
  --r-scene: 2px;

  /* content widths: DESIGN.md 5.3 and 5.5 */
  --w-conversation: 760px;
  --w-prose: 720px;
  --w-wide: 1200px;
  --w-frame: 1120px;
}

/* A navy field. Re-declares the token names with the dark-mode values so that
 * anything placed inside stays on an approved foreground/background pair. */
.field-navy {
  color-scheme: dark;
  --bg-deep: #0B1B2F;
  --bg-warm: #13263A;
  --bg-surface: #1A3045;
  --bg-elevated: #243B50;
  --text-primary: #F4F0E7;
  --text-secondary: #C7CDD2;
  --text-muted: #AAB3B8;
  --text-whisper: #78848C;
  --border: #4A5A6A;
  --border-strong: #71808D;
  --brand-active: #D5942D;
  --brand-continuity: #A6AE87;
  --success: #73C69C;
  --warning: #F0B85A;
  --error: #F08A83;
  --info: #76BDD7;
  background: var(--bg-deep);
  color: var(--text-primary);
}

/* The olive closing field. DESIGN.md 5.1: labels on the olive surface are
 * navy. Ochre is illegible here at any weight, so the active role becomes
 * navy too and the field carries no ochre at all. */
.field-olive {
  --bg-deep: #A6AE87;
  --bg-warm: #A6AE87;
  --bg-surface: #A6AE87;
  --bg-elevated: #A6AE87;
  --text-primary: #0B1B2F;
  --text-secondary: #0B1B2F;
  --text-muted: #0B1B2F;
  --border: #0B1B2F;
  --border-strong: #0B1B2F;
  --brand-active: #0B1B2F;
  --brand-continuity: #0B1B2F;
  background: var(--bg-deep);
  color: var(--text-primary);
}

/* ---- base -------------------------------------------------------------- */

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

/* The canvas colour is set on html so the iOS status-bar area paints with the
 * page rather than white. DESIGN.md 7.1: no overflow or scroll rules here. */
html {
  background: #F4F0E7;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0 0 var(--s3); font-weight: 500; }
h1 { font-size: var(--t-h1); line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; }
h4 { font-size: var(--t-small); line-height: 1.4; font-weight: 600; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Loud on purpose. DESIGN.md 7.1. */
:focus-visible {
  outline: 3px solid var(--brand-active);
  outline-offset: 3px;
}

img, svg { max-width: 100%; }

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

.skip {
  position: fixed;
  z-index: 99;
  inset-inline-start: var(--s3);
  inset-block-start: var(--s2);
  transform: translateY(-200%);
  padding: 12px 20px;
  background: #F4F0E7;
  color: #0B1B2F;
  font-weight: 600;
  border-radius: var(--r-control);
  text-decoration: none;
}
.skip:focus { transform: none; }

/* ---- labels ------------------------------------------------------------ */

/* DESIGN.md 5.2: 13px, 600, 0.04em. Uppercase is used only on these short
 * standing labels, never on a sentence and never on a language name. */
.label,
.eyebrow {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--brand-active);
  margin-bottom: var(--s2);
}

/* ---- chrome: primary nav ----------------------------------------------- */

.nav { position: relative; z-index: 10; }
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Tight across the bar, roomier between the stacked rows the bar breaks into
   * once it collapses. The bar is close to full at 1440 with eight sections
   * and the two account controls, so every column gap is width the section
   * links do not have. */
  column-gap: var(--s2);
  row-gap: var(--s3);
  min-height: 78px;
  padding-block: 12px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 208px; height: auto; display: block; }

/* The auto start margin collects the spare width between the brand and the
 * rest, so the sections and the account controls stay together at the
 * right-hand end however wide the viewport gets. */
.links { display: flex; gap: var(--s1); flex-wrap: wrap; margin-inline-start: auto; }
.links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 12px;
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--text-secondary);
  border-radius: var(--r-control);
}
.links a:hover { color: var(--text-primary); text-decoration: underline; }
.links a.active {
  color: var(--text-primary);
  box-shadow: inset 0 -3px 0 var(--brand-active);
}

/* Register and Sign in leave the marketing site for the product, so they read
 * as controls rather than as two more sections. The rule keeps them last in
 * the bar and the divider stops the eye running the section list straight on
 * into them. */
.auth {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding-inline-start: var(--s2);
  border-inline-start: 1px solid var(--border);
}
.auth .login {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--s3);
  font-size: var(--t-small);
  /* A control that breaks across two lines stops reading as a control. */
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  color: var(--text-primary);
  font-weight: 600;
}
.auth .login:hover { border-color: var(--text-primary); text-decoration: none; }
.auth .login--primary {
  background: var(--brand-active);
  border-color: var(--brand-active);
  color: var(--bg-deep);
}
.auth .login--primary:hover { opacity: .9; border-color: var(--brand-active); }

/* CSS-only mobile menu: navigation never depends on scripting. */
.navcb, .navtoggle { display: none; }

/* ---- chrome: section navigation ---------------------------------------- */

/* Sits under the primary nav on a section's parent and on every child, so a
 * reader arriving on a sub-page can see the rest of the section. */
.subnav { border-block-start: 1px solid var(--border); }
.subnav .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding-block: var(--s2);
}
.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  font-size: var(--t-small);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--r-control);
}
.subnav a:hover { color: var(--text-primary); text-decoration: underline; }
.subnav a.active {
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--brand-continuity);
}

/* ---- buttons ----------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--r-control);
  font: 600 16px/1.4 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 100ms ease-out, opacity 100ms ease-out;
}
.button--primary { background: var(--brand-active); color: var(--bg-deep); }
.button--primary:hover { opacity: .9; }
.button--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.button--secondary:hover { border-color: var(--text-primary); }
.button:disabled { opacity: .55; cursor: not-allowed; }

/* The public hero is the one place the campaign may lead with continuity
 * rather than the product action token. DESIGN.md 6.3. */
.button--campaign { background: #A6AE87; color: #0B1B2F; }
.button--campaign:hover { opacity: .9; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---- conversational turn ----------------------------------------------- */

/* A structured plane, not a speech bubble. Speaker and language come before
 * the text; the edge colour is paired with that text so colour never carries
 * the state alone. DESIGN.md 6.1. */
.mw-turn {
  position: relative;
  padding: var(--s4) var(--s4) var(--s4) 28px;
  background: var(--bg-warm);
  border-radius: var(--r-plane);
}
.mw-turn::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  border-radius: var(--r-plane) 0 0 var(--r-plane);
  background: var(--brand-continuity);
}
.mw-turn[aria-current="true"]::before { background: var(--brand-active); }
.mw-turn__meta {
  margin: 0 0 var(--s2);
  color: var(--text-muted);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.mw-turn__text {
  margin: 0;
  font-size: var(--t-conversation);
  line-height: 1.55;
  color: var(--text-primary);
}
.mw-turn__note {
  margin: var(--s2) 0 0;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-muted);
}

.exchange {
  display: grid;
  gap: var(--s3);
  max-width: var(--w-conversation);
}
/* A change of task, rather than the next turn. DESIGN.md 5.3. */
.exchange .break { height: var(--s2); }

/* ---- active handoff ---------------------------------------------------- */

/* A square and a text label, never a pulsing orb. DESIGN.md 6.2. */
.handoff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  font-size: var(--t-small);
  color: var(--text-secondary);
}
.handoff .marker {
  width: 12px;
  height: 12px;
  border-radius: var(--r-control);
  background: var(--brand-active);
}
.thread {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s2);
  max-width: 520px;
  margin: var(--s6) auto var(--s3);
}
.thread i { height: 2px; background: var(--brand-continuity); }
.thread i:first-child { background: var(--brand-active); }
.thread b { width: 14px; height: 14px; border-radius: var(--r-control); background: var(--brand-active); }

/* ---- boundary notice --------------------------------------------------- */

/* Full-width structured notice with a heading, an explanation and a next
 * action. Never a tooltip. DESIGN.md 6.5. */
.mw-boundary {
  padding: 20px var(--s4);
  background: var(--bg-warm);
  border-inline-start: 4px solid var(--warning);
  border-radius: var(--r-plane);
}
.mw-boundary h3 { font-size: var(--t-h3); margin-bottom: var(--s2); }
.mw-boundary p { font-size: var(--t-small); color: var(--text-secondary); }
.mw-boundary p:last-child { margin-bottom: 0; }

/* ---- page sections ----------------------------------------------------- */

.sec { padding-block: var(--s7); }
.sec--tight { padding-block: var(--s6); }

.pagehead { padding-block: var(--s7) var(--s7); }
.pagehead h1 { font-size: var(--t-display); line-height: 1.08; max-width: 20ch; }
.pagehead .lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 62ch;
  margin-top: var(--s4);
}
/* One rail, running down the start margin of the page header, aligned to the
 * content edge rather than the viewport edge. It marks where the sequence
 * begins; it is not a border around a card. */
.pagehead .wrap { position: relative; }
.pagehead .wrap::before {
  content: "";
  position: absolute;
  inset-block: 0 45%;
  inset-inline-start: 0;
  width: 3px;
  background: var(--brand-active);
}

.shead { max-width: 62ch; margin-bottom: var(--s6); }
.shead p { color: var(--text-secondary); }

.prose { max-width: var(--w-prose); }
.prose h2 { margin-top: var(--s6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s5); }
.prose ul, .prose ol { margin: 0 0 var(--s3); padding-inline-start: var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose dt { font-weight: 600; margin-top: var(--s4); }
.prose dd { margin: var(--s2) 0 0; color: var(--text-secondary); }
.docdate {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
  color: var(--text-muted);
}

.two {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: start;
}

.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3);
}
.plane {
  padding: var(--s4);
  background: var(--bg-warm);
  border-radius: var(--r-plane);
  border-top: 4px solid var(--brand-continuity);
}
.plane h3 { margin-bottom: var(--s2); }
.plane p { font-size: var(--t-small); color: var(--text-secondary); margin-bottom: 0; }
.plane .n {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-active);
  margin-bottom: var(--s2);
}

.panel {
  padding: var(--s5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-plane);
}
.panel p { font-size: var(--t-small); color: var(--text-secondary); }

/* A visible sequence: the numbers are content, not decoration. */
.steps { counter-reset: step; display: grid; gap: var(--s5); }
.step { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-active);
  padding-top: 6px;
}
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--text-secondary); margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.chips li {
  padding: 10px var(--s3);
  background: var(--bg-surface);
  border-radius: var(--r-control);
  font-size: var(--t-small);
}

.langs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s2) var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--w-wide);
}
.langs li {
  padding-block: 6px;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-small);
}

.limits { counter-reset: limit; list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.limits li {
  padding: var(--s4);
  background: var(--bg-warm);
  border-inline-start: 4px solid var(--error);
  border-radius: var(--r-plane);
}
.limits b { display: block; margin-bottom: var(--s1); }
.limits b::before {
  counter-increment: limit;
  content: counter(limit, decimal-leading-zero) "  ";
  color: var(--error);
  font-variant-numeric: tabular-nums;
}
.limits span { font-size: var(--t-small); color: var(--text-secondary); }

.partners { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }
.partners a { font-size: var(--t-h3); font-weight: 500; }

/* ---- the interrupted frame (landing page only) ------------------------- */

/* DESIGN.md 5.5. Held scenes in a content field with exterior rails. The rails
 * are outside the scene and each state has different geometry: interrupted,
 * suspended, resumed, released. */

.hero {
  position: relative;
  min-height: min(770px, calc(100vh - 78px));
  display: flex;
  align-items: center;
  background: var(--bg-deep) url("/site-assets/images/face-to-face-hero.webp?v=2026-08-17.3") center / cover no-repeat;
  overflow: hidden;
}
/* The artwork already carries a quiet navy field at its centre, which is where
 * the live headline sits and where it keeps its 15.23:1. This leaves that
 * centre untouched and deepens the outer field so the two profiles frame the
 * words instead of competing with them. Every stop is #0B1B2F with alpha; no
 * new colour is introduced. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%,
    rgb(11 27 47 / 0) 0 24%,
    rgb(11 27 47 / .55) 62%,
    rgb(11 27 47 / .78) 100%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: min(700px, 56vw);
  margin-inline: auto;
  text-align: center;
  padding-block: var(--s8);
}
.hero h1 {
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-block: var(--s2) var(--s3);
}
.hero .lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 34ch;
  margin-inline: auto;
}
.hero .actions { justify-content: center; }
/* The plain statement of what the product physically is, under the campaign
 * line. Deliberately quieter than the lead above it and louder than a caption. */
.hero .lead--plain {
  margin-top: var(--s3);
  font-size: var(--t-body);
  color: var(--text-muted);
}
.hero .boundary-note {
  max-width: 46ch;
  margin: var(--s5) auto 0;
  font-size: var(--t-small);
  color: var(--text-secondary);
}

.cuts { padding-block: var(--s8); }
.cut {
  display: grid;
  grid-template-columns: 80px minmax(0, var(--w-frame)) 80px;
  justify-content: center;
}
.cut + .cut { margin-top: 28px; }

.rail { position: relative; }
.rail::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: var(--brand-active);
}
/* Interrupted: the rail stops on one side and picks up on the other. */
.cut--interrupted .rail:first-child::before { top: 0; height: 42%; }
.cut--interrupted .rail:last-child::before { top: 42%; bottom: 0; }
/* Suspended: held clear of both ends. */
.cut--suspended .rail::before { top: 28%; bottom: 28%; }
/* Resumed: the mirror of interrupted. */
.cut--resumed .rail:first-child::before { top: 24%; bottom: 0; }
.cut--resumed .rail:last-child::before { top: 0; height: 24%; }
/* Released: a short mark at the close, and nothing else. */
.cut--released .rail::before { top: 0; height: 18%; }

.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
  padding: clamp(58px, 6vw, 92px) clamp(34px, 6vw, 90px);
  border-radius: var(--r-scene);
  /* A held scene is a field, not a card. On the paper ground that means the
   * raised surface rather than the canvas, so the scene has an edge without
   * needing a border drawn around it. */
  background: var(--bg-elevated);
}
/* A navy or olive scene is the field itself and takes the canvas, not the
 * raised surface. Without this the navy scenes render as #243B50, which is
 * the hover state and not a field colour. */
.scene.field-navy,
.scene.field-olive { background: var(--bg-deep); }
.scene h2 {
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 18ch;
  margin-block: var(--s2) var(--s4);
  overflow-wrap: anywhere;
}
.scene p { font-size: 19px; line-height: 1.6; max-width: 62ch; }
.scene .actions { margin-top: var(--s4); }

/* Supplementary compositional cue. DESIGN.md 5.2 permits 700-750 at 10-11px
 * here and nowhere else. It carries no instruction. */
.frame-label {
  position: absolute;
  top: 18px;
  inset-inline-start: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-active);
}

.pair { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s5); max-width: var(--w-conversation); }

/* ---- tables ------------------------------------------------------------ */

/* Wide content scrolls inside its own container; the page body never scrolls
 * sideways. */
.table-scroll { overflow-x: auto; }
.langtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.langtable caption {
  text-align: start;
  padding-bottom: var(--s3);
  color: var(--text-muted);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.langtable th,
.langtable td {
  text-align: start;
  padding: 12px var(--s3) 12px 0;
  border-bottom: 1px solid var(--border);
}
.langtable th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
}
.langtable td code {
  font-family: ui-monospace, monospace;
  color: var(--text-muted);
}

/* ---- footer ------------------------------------------------------------ */

.site-footer { padding-block: var(--s7) var(--s4); }
.site-footer .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s5);
}
.site-footer img { width: 180px; height: auto; }
.site-footer h4 { color: var(--text-muted); letter-spacing: 0.04em; font-size: var(--t-label); }
.site-footer .col a { display: block; margin-bottom: var(--s2); font-size: var(--t-small); color: var(--text-secondary); text-decoration: none; }
.site-footer .col a:hover { color: var(--text-primary); text-decoration: underline; }
.site-footer .lab { font-size: var(--t-small); color: var(--text-secondary); margin-top: var(--s3); max-width: 40ch; }
.site-footer .legal {
  grid-column: 1 / -1;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
  color: var(--text-muted);
}

/* ---- contact form ------------------------------------------------------ */

.form { display: grid; gap: var(--s2); max-width: var(--w-prose); }
.form label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.04em; margin-top: var(--s3); }
.form input, .form select, .form textarea {
  min-height: 48px;
  padding: 12px var(--s3);
  font: 400 var(--t-body)/1.5 var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
}
.form textarea { min-height: 160px; resize: vertical; }
.form .button { margin-top: var(--s4); justify-self: start; }
.form .note { font-size: var(--t-small); color: var(--text-muted); }
.big { font-size: var(--t-h3); font-weight: 600; }

/* ---- 404 --------------------------------------------------------------- */

.notfound { text-align: center; padding-block: var(--s8); }
.notfound .actions { justify-content: center; }

/* ---- responsive -------------------------------------------------------- */

/* Breakpoints from DESIGN.md 7.1. Tested at 320, 390, 768, 1024 and 1440. */

@media (min-width: 768px) {
  .two { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .two--wide { grid-template-columns: 1.3fr 1fr; }
  .pair { grid-template-columns: 1fr 1.15fr; }
}

@media (max-width: 900px) {
  .nav .wrap { flex-wrap: wrap; min-height: 68px; }
  .brand img { width: 176px; }
  .navtoggle {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding-inline: var(--s3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-control);
    font-size: var(--t-small);
    font-weight: 600;
    cursor: pointer;
  }
  .links { display: none; width: 100%; flex-direction: column; gap: 0; margin-inline-start: 0; padding-bottom: var(--s2); }
  .navcb:checked ~ .links { display: flex; }
  .links a { width: 100%; border-bottom: 1px solid var(--border); border-radius: 0; }
  .links a.active { box-shadow: inset 3px 0 0 var(--brand-active); }
  /* Two full-width controls will not fit beside the brand and the menu button
   * at this width, so the account group collapses with the sections rather
   * than staying in the top bar, and keeps its full tap target when open. */
  .auth {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: var(--s2);
    padding-inline-start: 0;
    padding-bottom: var(--s2);
    border-inline-start: 0;
  }
  .navcb:checked ~ .auth { display: flex; }
  .auth .login { width: 100%; justify-content: center; }
}

@media (max-width: 800px) {
  .hero {
    min-height: auto;
    background-image: url("/site-assets/images/face-to-face-hero-mobile.webp?v=2026-08-17.3");
    background-size: 100% auto;
    background-position: center top;
    align-items: flex-start;
  }
  /* Both profiles stay visible at the top and the lower hero resolves into
   * navy, so the copy reads against the field rather than the artwork.
   * DESIGN.md 5.5, signature device 2. */
  /* The artwork is served at full viewport width, so its 820x583 frame ends at
   * 71vw. The stops are in vw for that reason: as a percentage they would be
   * measured against the whole hero, which is several times taller than the
   * image, and the scrim would still be fully transparent where the copy
   * starts. Both profiles stay lit down to the jaw; below that the field
   * resolves to navy and the copy reads against navy, not against a face. */
  .hero::after {
    background: linear-gradient(to bottom,
      rgb(11 27 47 / 0) 0 34vw,
      rgb(11 27 47 / .95) 56vw,
      #0B1B2F 64vw);
  }
  .hero-copy { width: min(86vw, 520px); padding-block: 62vw var(--s7); }
  .hero h1 { font-size: clamp(40px, 12vw, 56px); }
  .cuts { padding-block: var(--s6); }
  .cut { grid-template-columns: 26px minmax(0, 1fr) 26px; }
  .cut + .cut { margin-top: 20px; }
  .scene { min-height: auto; padding: 70px var(--s4) 62px; }
  .scene h2 { font-size: clamp(34px, 10vw, 52px); }
  .scene p { font-size: var(--t-body); }
  .rail::before { width: 2px; }
  .frame-label { inset-inline-start: var(--s3); }
  .sec { padding-block: var(--s6); }
  .pagehead { padding-block: var(--s6); }
  .pagehead h1 { font-size: clamp(32px, 9vw, 48px); }
}

@media (max-width: 430px) {
  .wrap { padding-inline: var(--s3); }
  .hero .actions .button { width: 100%; }
  .step { grid-template-columns: 32px 1fr; }
}

/* ---- reduced motion ---------------------------------------------------- */

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

/* ---- print ------------------------------------------------------------- */

/* /safeguards/ is meant to be handed to staff, so it has to print. */
@media print {
  .nav, .site-footer, .skip { display: none; }
  body { background: #FBF8F1; color: #0B1B2F; font-size: 12pt; }
  .sec, .pagehead { padding-block: 12pt; }
  a { text-decoration: underline; }
}

/* ---- language machinery ------------------------------------------------- */

/* The fallback notice: shown when a translation is missing and the English
 * is standing in. States its point once, in the page's own language. */
.lang-fallback {
  margin-block-start: var(--s4);
  padding: var(--s3) var(--s4);
  border-inline-start: 3px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--t-small);
}

/* The chooser: every language as a plain link, native name first. */
.langlist {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 220px;
  column-gap: var(--s6);
}
.langlist li { break-inside: avoid; padding-block: var(--s2); }
.langlist a { font-size: var(--t-h3); text-decoration: none; }
.langlist a[aria-current="true"] { color: var(--brand-active); }
.langlist__en { color: var(--text-muted); font-size: var(--t-small); margin-inline-start: var(--s2); }
/* The language strip: one slim line under the bar, on every page. */
.langbar { border-block-start: 1px solid var(--border); }
.langbar .wrap { padding-block: var(--s2); text-align: center; }
.langbar a { font-size: var(--t-label); color: var(--text-secondary); }

/* ---- news listing ------------------------------------------------------- */

.newslist { display: grid; gap: var(--s4); max-width: var(--w-prose); }
.newsitem {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s4); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--r-plane);
  text-decoration: none;
}
.newsitem img { width: 128px; height: auto; border-radius: var(--r-scene); flex-shrink: 0; }
.newsitem__text { display: grid; gap: var(--s1); }
.newsitem__title { font-size: var(--t-h3); font-weight: 600; }
.newsitem time { color: var(--text-muted); font-size: var(--t-small); }
.newsitem__desc { color: var(--text-secondary); }
.newsitem:hover .newsitem__title { text-decoration: underline; }

/* Wide screens: the bar grows, in type and in presence. Type steps to the
 * next token on the scale (--t-body), never an invented size; the rest is
 * spacing. KEPT IN SYNC with the app bar: the same block lives in
 * app/public_html/site_assets/css/appbar.css, because the two hosts are one
 * product and the chrome must not announce the boundary. If one changes,
 * the other has to. */
@media (min-width: 1440px) {
  /* The bar's own container widens with the type, or the extra size just
   * wraps the menu: eight sections at 17px do not fit in 1200px. Only the
   * bar widens; page content keeps --w-wide. */
  .nav .wrap { min-height: 88px; max-width: 1400px; }
  .links { gap: var(--s2); }
  .links a { font-size: var(--t-body); padding-inline: var(--s3); }
  .auth .login { font-size: var(--t-body); padding-inline: 20px; }
}