/* Maveroni — design system.
   Swiss/brutalist editorial: heavy grotesque display type, hairline rules,
   full-bleed colour bands (band / lime / bright / alt), hard-shadow hero
   object. No client JS anywhere; every state is CSS — including the dark
   scheme, which is driven entirely by prefers-color-scheme.

   Colour rules: --orange is graphical only (borders, dots). Text uses
   --accent-text, which is tuned per scheme to clear 4.5:1 on every surface
   it lands on; on a --band ground the pure orange clears 5.97:1 so it is
   used as-is there. Smallest type on the site is 11px.
   tools/qa_check.py re-derives every contrast pair below, both schemes. */

/* ---------- fonts ---------------------------------------------------- */
/* Archivo Black (OFL) replaces the Arial Black fallback chain: identical
   role, stable metrics on every platform. The weight range is declared wide
   so 700/800/900 all map to the one face instead of synthesising a bold. */
@font-face {
  font-family: "Maveroni Display";
  src: url("/assets/fonts/display-latin.f2cd1a1043.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2C60-2C7F, U+A720-A7FF;
}
/* Noto Sans JP Black (OFL), subset to the few Japanese strings that are set
   in the display face (utility/404 headings, status badges). It also carries
   the arrows: Archivo Black has no U+2197, and taking every arrow from one
   face keeps them consistent with each other. The two ranges are disjoint,
   so glyph selection never depends on rule order. */
@font-face {
  font-family: "Maveroni Display";
  src: url("/assets/fonts/display-jp.fdf5274990.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2190-21FF, U+3000-30FF, U+3400-4DBF, U+4E00-9FFF,
    U+F900-FAFF, U+FF00-FFEF;
}

/* ---------- tokens --------------------------------------------------- */
/* Two layers. The palette is absolute: --ink is *the dark colour*, never
   "the foreground". The semantic layer below it says what each colour is
   for, and it is the only layer the dark scheme redefines. Rules must use
   the semantic names — reaching for --ink/--cream directly is what makes a
   sheet impossible to invert, and this one has to invert. */
:root {
  color-scheme: light dark;

  /* palette — identical in both schemes */
  --ink: #171b17;
  --cream: #fffdf6;
  --signal: #c9ff63;          /* lime — the brand accent */
  --orange: #ff6633;          /* graphical accent, and text on a dark band */
  --orange-ink: #b8350a;      /* same accent, legible on light surfaces */
  --muted-on-signal: #4a5147; /* secondary text on lime, either scheme */

  /* surfaces, light scheme */
  --surface: #f2efe6;         /* page base: hero, practice */
  --surface-alt: #e7e2d5;     /* contact band */
  --surface-bright: #fffdf6;  /* notes band — the lightest step */
  --band: #171b17;            /* work band, footer, hero window: the slab */
  --header-bg: #f2efe6f0;

  /* text, light scheme */
  --text: #171b17;
  --muted: #5f665c;
  --band-text: #fffdf6;
  --band-text-soft: #fffdf6c4;   /* .project-summary, .footer-tagline */
  --band-text-softer: #fffdf69e; /* .work-section-intro */
  --band-text-faint: #fffdf6b3;  /* .copyright */
  --accent-text: #b8350a;
  --on-signal: #171b17;          /* text on lime */

  --signal-band: #c9ff63;     /* lime used as a full-bleed ground */
  --line: #171b1747;
  --line-inverse: #fffdf657;
  --focus: var(--accent-text);

  --page: min(1180px, calc(100vw - 64px));
  --font-sans: "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Segoe UI", sans-serif;
  --font-display: "Maveroni Display", "Arial Black", "Helvetica Neue", Arial,
    sans-serif;
}

/* ---------- dark scheme ---------------------------------------------- */
/* Not an inversion. Flipping the sheet would turn the work band and the
   footer into full-bleed cream slabs, which is the single thing dark-mode
   users hate most. Instead the *rhythm* is preserved and the direction of
   contrast is kept: the band stays the darkest step and the page steps up
   away from it, so the page still reads as bands rather than one flat void.

     band #090b09  <  surface #131713  <  surface-alt #1a1f19  <  bright #1e241d

   The lime keeps its job but drops ~18% in luminance: at #c9ff63 a
   full-bleed about band on a dark page glares. Small lime accents (hard
   shadow, brand mark, corner rules) stay at full strength.
   No toggle: the site ships zero client JS, and a toggle without JS cannot
   persist across a page navigation. The OS preference is the whole API. */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #131713;
    --surface-alt: #1a1f19;
    --surface-bright: #1e241d;
    --band: #090b09;
    --header-bg: #131713f0;

    --text: #ece9dd;
    --muted: #9ba296;
    --band-text: #ece9dd;
    --band-text-soft: #ece9ddc4;
    --band-text-softer: #ece9dd9e;
    --band-text-faint: #ece9ddb3;
    --accent-text: #ff8a5c;     /* --orange-ink is unreadable on #131713 */

    --signal-band: #a9dc4a;
    --line: #ece9dd33;
    --line-inverse: #ece9dd4d;
  }
}

/* ---------- reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--band); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--signal); color: var(--on-signal); }
/* anchored sections must clear the 76px sticky header */
section[id] { scroll-margin-top: 92px; }

/* Japanese never wants the -0.068em tracking the Latin display face gets;
   auto-phrase keeps headings from breaking inside a word where it is
   supported, and is ignored everywhere else. */
h1:lang(ja), h2:lang(ja), h3:lang(ja) {
  letter-spacing: -0.02em; line-height: 1.16; word-break: auto-phrase;
}
/* Large-type paragraphs get it too — a break mid-phrase is conspicuous at
   this size. Body copy keeps normal breaking: auto-phrase makes long
   paragraphs ragged. */
.hero-lead:lang(ja), .about-lead:lang(ja), .utility-lead:lang(ja) {
  word-break: auto-phrase;
}

.page-shell { width: var(--page); margin-inline: auto; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  background: var(--signal); color: var(--on-signal);
  padding: 10px 16px; font-weight: 800;
  transform: translateY(-180%); transition: transform 0.16s;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- header --------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30; height: 76px;
  background: var(--header-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 18px; line-height: 1; letter-spacing: 0.08em;
}
/* The page mark is the icon file, not a CSS approximation of it. A letter set
   in the display face lands wherever the line box puts it, so the header
   square and the tab favicon drifted apart by exactly the amount nobody can
   correct by hand. The square stays a token -- the SVG's own ground is baked
   ink, which disappears against the dark header -- and the glyph rides on top. */
.brand-mark {
  width: 34px; height: 34px;
  background: var(--band) url("/assets/img/mark-glyph.fa1c6b0a34.svg") center / 100% 100%
    no-repeat;
}
.site-nav {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 42px);
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.site-nav a { position: relative; }
.site-nav a::after,
.footer-links a::after,
.contact-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: 100%;
  transition: transform 0.18s;
}
.site-nav a:hover::after,
.footer-links a:hover::after,
.contact-links a:hover::after { transform: scaleX(1); transform-origin: 0; }
.lang-switch {
  border: 1px solid var(--line); padding: 5px 9px; letter-spacing: 0.1em;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.lang-switch::after { display: none; }
.lang-switch:hover { background: var(--text); border-color: var(--text); color: var(--surface); }
.lang-switch:lang(ja) { letter-spacing: 0.04em; }

/* ---------- shared type ---------------------------------------------- */
.eyebrow {
  font-family: var(--font-display); font-weight: 900;
  font-size: 11px; line-height: 1.4; letter-spacing: 0.22em;
  text-transform: uppercase; margin-bottom: 24px;
}
.hero h1,
.section-heading h2,
.about-section h2,
.contact-section h2,
.utility-hero h1 {
  font-family: var(--font-display); font-weight: 900;
  line-height: 0.91; letter-spacing: -0.068em;
}
.button {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 52px; padding: 13px 20px; border: 1px solid;
  font-family: var(--font-display); font-weight: 900;
  font-size: 12px; line-height: 1.2; letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.18s, color 0.18s, transform 0.18s;
}
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--text); color: var(--surface); }
.button-primary:hover { background: var(--signal-band); color: var(--on-signal); }
.button-light { background: var(--signal-band); border-color: var(--signal-band); color: var(--on-signal); }
.button-light:hover { background: none; color: var(--band-text); }
.text-link {
  display: inline-flex; align-items: center; gap: 9px; padding-block: 5px;
  border-bottom: 1px solid; font-weight: 800; font-size: 13px;
  letter-spacing: 0.035em; transition: gap 0.18s;
}
.text-link:hover { gap: 14px; }
.text-link-light { color: var(--band-text); }
.link-note { font-weight: 400; letter-spacing: 0; opacity: 0.8; }
.arrow { font-family: var(--font-display); }

/* ---------- hero ----------------------------------------------------- */
.hero { border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(48px, 7vw, 110px);
  min-height: calc(100vh - 140px);
  padding-block: clamp(72px, 9vw, 132px);
}
.hero-copy { animation: rise-in 0.72s cubic-bezier(0.2, 0.75, 0.2, 1) both; }
.hero h1 { max-width: 760px; font-size: clamp(62px, 8.9vw, 138px); }
.hero-lead {
  margin-top: 38px; font-size: clamp(23px, 2.2vw, 32px); font-weight: 700;
  line-height: 1.45; letter-spacing: -0.04em;
}
.hero-description {
  margin-top: 20px; max-width: 650px; color: var(--muted);
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.95;
}
.hero-actions, .project-actions, .utility-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
}
.hero-actions { margin-top: 38px; }

.hero-object { position: relative; animation: rise-in 0.72s cubic-bezier(0.2, 0.75, 0.2, 1) 0.14s both; }
.window-mark {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 0.83; min-height: 500px; padding: clamp(30px, 4vw, 54px);
  overflow: hidden;
  background: var(--band); color: var(--band-text);
  border: 13px solid var(--orange);
  box-shadow: 24px 24px 0 var(--signal);
}
.window-index {
  position: absolute; top: 30px; left: 32px;
  font-family: var(--font-display); font-weight: 900; font-size: 11px; letter-spacing: 0.17em;
}
.window-word {
  position: relative; z-index: 2; margin-left: -0.07em;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(64px, 7vw, 104px); line-height: 0.84; letter-spacing: -0.09em;
}
.window-subword {
  position: relative; z-index: 2; margin-top: 14px;
  font-family: var(--font-display); font-weight: 900; font-size: 12px; letter-spacing: 0.28em;
}
.window-corner { position: absolute; display: block; background: var(--signal); }
.window-corner-one { top: 24%; right: -14%; width: 56%; height: 3px; transform: rotate(-32deg); }
.window-corner-two { top: 12%; right: 19%; width: 3px; height: 39%; transform: rotate(21deg); }
.hero-object-caption {
  margin-top: 36px; text-align: right; color: var(--muted);
  font-family: var(--font-display); font-weight: 900; font-size: 11px; letter-spacing: 0.25em;
}
.discipline-row {
  display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 22px;
  font-family: var(--font-display); font-weight: 900; font-size: 11px; letter-spacing: 0.2em;
}
.discipline-row span:nth-child(2) { text-align: center; }
.discipline-row span:last-child { text-align: right; }

/* ---------- work (ink band) ------------------------------------------ */
.work-section {
  background: var(--band); color: var(--band-text);
  padding-block: clamp(92px, 11vw, 172px);
  --focus: var(--orange);
}
.section-heading { margin-bottom: clamp(48px, 7vw, 92px); }
.section-heading h2, .about-section h2, .contact-section h2 { font-size: clamp(50px, 7.2vw, 108px); }
.work-section-intro { max-width: 620px; margin-top: 30px; color: var(--band-text-softer); line-height: 1.9; }
.projects-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-inverse); border-bottom: 1px solid var(--line-inverse);
}
.project-card { display: flex; flex-direction: column; min-width: 0; }
.project-card + .project-card { border-left: 1px solid var(--line-inverse); }
.project-visual {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #0f140f; border-bottom: 1px solid var(--line-inverse);
}
.project-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.project-card:hover .project-visual img { transform: scale(1.025); }
.project-status {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px;
  background: var(--cream); color: var(--ink);
  font-family: var(--font-display); font-weight: 900; font-size: 11px; letter-spacing: 0.13em;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #2f8f45; }
.project-status-paused .status-dot { background: var(--orange-ink); }
.project-copy {
  display: flex; flex-direction: column; flex: 1; min-height: 410px;
  padding: clamp(34px, 4vw, 56px);
}
.project-kicker, .practice-label, .note-tag, .utility-index {
  font-family: var(--font-display); font-weight: 900;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
/* "iOS" must keep its lowercase i — uppercasing it to IOS reads as a
   mistake, and this site gets read by Apple during enrollment. The labels
   in this slot are authored in the casing they should render. */
.practice-label { text-transform: none; }
.project-copy h3 {
  margin-top: 14px; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(42px, 4.8vw, 72px); line-height: 0.94; letter-spacing: -0.075em;
}
.project-sub {
  min-height: 2.9em; margin-top: 18px;
  font-size: clamp(16px, 1.35vw, 19px); font-weight: 700; line-height: 1.45;
}
.project-summary { margin-top: 22px; color: var(--band-text-soft); line-height: 1.9; }
.project-actions { margin-top: auto; padding-top: 34px; }

/* ---------- studio / practice ---------------------------------------- */
.practice-section { border-bottom: 1px solid var(--line); padding-block: clamp(92px, 12vw, 180px); }
.practice-grid {
  display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(56px, 10vw, 150px);
}
.sticky-heading { position: sticky; top: 130px; align-self: start; margin: 0; }
.section-intro { max-width: 510px; margin-top: 30px; color: var(--muted); }
.practice-list li {
  display: grid; grid-template-columns: 56px 1fr; gap: 24px;
  padding: 44px 0 50px; border-top: 1px solid var(--line);
}
.practice-list li:last-child { border-bottom: 1px solid var(--line); }
.practice-number {
  padding-top: 2px; color: var(--accent-text);
  font-family: var(--font-display); font-weight: 900; font-size: 12px; letter-spacing: 0.08em;
}
.practice-list h3 {
  margin: 12px 0 14px; font-weight: 700;
  font-size: clamp(22px, 2.5vw, 32px); line-height: 1.4; letter-spacing: -0.04em;
}
.practice-list p:last-child { max-width: 570px; color: var(--muted); }

/* ---------- notes (cream band) --------------------------------------- */
.notes-section { background: var(--surface-bright); padding-block: clamp(92px, 11vw, 168px); }
.notes-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.profile-links { display: flex; flex-wrap: wrap; gap: 24px; }
.notes-list { border-top: 1px solid var(--text); }
.note-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 60px; align-items: start;
  gap: 22px; padding-block: 36px; border-bottom: 1px solid var(--line);
  transition: background-color 0.18s, padding 0.18s;
}
.note-row:hover { background: var(--signal-band); color: var(--on-signal); padding-inline: 18px; }
/* the row's secondary text is --muted, which is tuned for the page ground,
   not for lime; on the dark scheme's light --muted it would vanish. */
.note-row:hover .note-index,
.note-row:hover .note-dek { color: var(--muted-on-signal); }
.note-index {
  padding-top: 4px; color: var(--muted);
  font-family: var(--font-display); font-weight: 900; font-size: 11px;
}
.note-copy h3 {
  max-width: 810px; margin: 10px 0 8px; font-weight: 700;
  font-size: clamp(20px, 2.4vw, 31px); line-height: 1.45; letter-spacing: -0.045em;
}
.note-dek { color: var(--muted); font-size: 14px; }
.note-arrow {
  justify-self: end; font-family: var(--font-display); font-weight: 900; font-size: 25px;
  transition: transform 0.18s;
}
.note-row:hover .note-arrow { transform: translate(4px, -4px); }

/* ---------- about (lime band) ---------------------------------------- */
.about-section {
  background: var(--signal-band); color: var(--on-signal);
  padding-block: clamp(92px, 11vw, 164px);
  /* the dark scheme's --accent-text is a light orange: on lime it lands at
     1.4:1. The lime ground is dark-on-light in both schemes, so the ring
     follows the text colour rather than the page accent. */
  --focus: var(--on-signal);
}
.about-grid, .contact-grid {
  display: grid; justify-content: space-between;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 0.7fr);
  gap: clamp(60px, 12vw, 180px);
}
.about-copy { align-self: end; }
.about-copy p { margin-top: 22px; }
.about-copy .about-lead {
  margin-top: 0; font-size: clamp(19px, 2vw, 25px); font-weight: 700;
  line-height: 1.75; letter-spacing: -0.035em;
}
.about-copy p:not(.about-lead) { font-size: 14px; line-height: 2; }

/* ---------- contact -------------------------------------------------- */
.contact-section { background: var(--surface-alt); padding-block: clamp(92px, 12vw, 180px); }
.contact-copy { align-self: end; }
.contact-copy > p { margin-bottom: 34px; color: var(--muted); }
.contact-email {
  display: inline-flex; align-items: center; gap: 14px; padding-bottom: 6px;
  border-bottom: 3px solid; overflow-wrap: anywhere;
  font-family: var(--font-display); font-weight: 900;
  /* capped so the address holds one line in the 440px contact column —
     anywhere-wrapping an email mid-token reads as a rendering fault */
  font-size: clamp(19px, 2.1vw, 30px); line-height: 1.25; letter-spacing: -0.04em;
  transition: color 0.18s;
}
.contact-email:hover { color: var(--accent-text); }
.contact-links { display: flex; gap: 28px; margin-top: 34px; }
.contact-links a, .footer-links a {
  position: relative; font-family: var(--font-display); font-weight: 900;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---------- footer --------------------------------------------------- */
.site-footer {
  background: var(--band); color: var(--band-text); padding-block: 62px;
  --focus: var(--orange);
}
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 70px; }
.footer-tagline { margin-top: 20px; color: var(--band-text-soft); font-size: 12px; }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 34px; }
.copyright {
  text-align: right; color: var(--band-text-faint);
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; line-height: 1.8; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- utility pages (support / privacy / 404) ------------------ */
.utility-main { min-height: 70vh; padding-block: clamp(76px, 10vw, 140px) clamp(110px, 14vw, 190px); }
.utility-shell { max-width: 1040px; }
.utility-hero { max-width: 880px; margin-bottom: clamp(72px, 10vw, 130px); }
.utility-hero h1 { font-size: clamp(54px, 8vw, 112px); }
.utility-lead {
  max-width: 760px; margin-top: 36px; font-size: clamp(19px, 2vw, 25px);
  font-weight: 700; line-height: 1.75; letter-spacing: -0.03em;
}
.updated-date { margin-top: 24px; color: var(--muted); font-size: 12px; }
.utility-content { max-width: 820px; margin-left: auto; }
.utility-content section { padding: 48px 0 56px; border-top: 1px solid var(--line); }
.utility-content section:last-child { border-bottom: 1px solid var(--line); }
.utility-index { color: var(--accent-text); }
.utility-content h2 {
  margin: 12px 0 18px; font-weight: 700;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.4; letter-spacing: -0.045em;
}
.utility-content section > p:not(.utility-index, .utility-note) { color: var(--muted); }
.utility-content section > p + p { margin-top: 18px; }
.utility-actions { margin-top: 30px; }
.utility-email { margin-top: 32px; font-size: clamp(20px, 2.5vw, 31px); }
.plain-list { counter-reset: item; margin-top: 25px; }
.plain-list li {
  position: relative; counter-increment: item;
  padding: 13px 0 13px 48px; border-top: 1px solid var(--line);
}
.plain-list li:last-child { border-bottom: 1px solid var(--line); }
.plain-list li::before {
  content: "0" counter(item); position: absolute; left: 0; top: 15px;
  color: var(--accent-text); font-family: var(--font-display); font-weight: 900; font-size: 11px;
}
.utility-note {
  margin-top: 22px; padding-left: 16px; font-size: 13px;
  border-left: 3px solid var(--accent-text);
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- <=980px -------------------------------------------------- */
@media (width <= 980px) {
  .hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 760px; }
  .hero-object { max-width: 560px; margin-left: auto; }
  .window-mark { min-height: 480px; }
  .practice-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .project-copy { min-height: 440px; }
  .sticky-heading { position: static; }
  .about-copy, .contact-copy { max-width: 680px; margin-left: auto; }
}

/* ---------- <=680px -------------------------------------------------- */
@media (width <= 680px) {
  :root { --page: calc(100vw - 36px); }
  body { font-size: 15px; }
  .site-header { height: 66px; }
  .brand { gap: 9px; font-size: 14px; }
  .brand-mark { width: 30px; height: 30px; }
  .site-nav { gap: 14px; font-size: 11px; letter-spacing: 0.06em; }
  .nav-optional { display: none; }
  .lang-switch { padding: 4px 7px; }
  .hero-grid { gap: 70px; padding-block: 68px 86px; }
  .hero h1 { font-size: clamp(56px, 18.2vw, 78px); }
  .hero-lead { margin-top: 30px; }
  .hero-actions, .project-actions, .utility-actions { flex-direction: column; align-items: flex-start; }
  .hero-object { width: calc(100% - 20px); margin: 0 auto 0 0; }
  .window-mark { min-height: 390px; border-width: 9px; box-shadow: 16px 16px 0 var(--signal); }
  .discipline-row { grid-template-columns: 1fr; gap: 8px; }
  .discipline-row span:nth-child(2), .discipline-row span:last-child { text-align: left; }
  .section-heading h2, .about-section h2, .contact-section h2 { font-size: clamp(48px, 15vw, 68px); }
  .projects-grid { grid-template-columns: 1fr; }
  .project-card + .project-card { border-left: 0; border-top: 1px solid var(--line-inverse); }
  .project-copy { min-height: 0; padding: 38px 22px 44px; }
  .project-copy h3 { font-size: 52px; }
  .project-sub { min-height: 0; }
  .practice-list li { grid-template-columns: 38px 1fr; gap: 12px; }
  .notes-heading { flex-direction: column; align-items: flex-start; }
  .note-row { grid-template-columns: 35px minmax(0, 1fr) 24px; gap: 10px; padding-block: 28px; }
  .note-row:hover { padding-inline: 8px; }
  .note-dek { display: none; }
  .contact-email { font-size: 20px; }
  .footer-grid { grid-template-columns: 1fr; align-items: start; gap: 44px; }
  .copyright { text-align: left; }
  .utility-hero h1 { font-size: clamp(50px, 15vw, 68px); }
  .utility-content { margin-left: 0; }
}

/* ---------- <=480px -------------------------------------------------- */
@media (width <= 480px) {
  /* Header row runs out of width once the language switch is added to
     brand + three nav items. Drop the header wordmark and keep the M
     square: the brand link carries its name in aria-label, so the
     accessible name is unchanged. The footer keeps its wordmark. */
  .site-header .brand-word { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}