/* ==========================================================================
   SUMMIT STYLE STUDIO - styles.css (v2, built on the owner's template)

   The owner's template is the source of truth: colours, Georgia + Arial,
   spacing, section order and the dark enquiry section are taken from it as
   they are. Differences, all deliberate:
   - font sizes are in rem (template px / 16), so text enlargement works;
     at the default text size they are identical. Layout spacing stays in px;
   - per-language type tokens (below) for Chinese and Japanese;
   - additions: language switcher, mobile menu, header light variant over
     the dark section, anchor offset, focus styles, reduced motion, and the
     no-JavaScript fallbacks.
   Breakpoints: the template's 800px and 500px, written as 50em and 31.25em.
   At the default text size (16px) they are the same; when a visitor enlarges
   the browser's text size, the stacked layout and the menu button take over
   earlier instead of the desktop header overflowing.
   ========================================================================== */

:root {
  --ivory: #f4f1ea;
  --paper: #faf8f3;
  --ink: #22211e;
  --muted: #6f6a61;
  --stone: #b6a897;
  --green: #68705d;
  --line: rgba(34, 33, 30, .16);
  --dark: #24231f;
  --dark-muted: #a8a397;

  /* Set by main.js to the measured header height (used for the anchor offset). */
  --header-h: 67px;
}

/* ---------- Type tokens per language ----------
   Each element matches exactly one of :lang(en) / :lang(zh-Hans) / :lang(ja),
   so a project name marked lang="en" on a Chinese page keeps the English values.
   Georgia and Arial have no CJK glyphs, so they stay first (Latin text and
   numerals keep the template faces) and the CJK faces fill in the rest. */

:root,
:lang(en) {
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --track: 1;         /* multiplier for the wide letter-spacing of small labels */
  --small: 1;         /* multiplier for the 10-11px label sizes */
  --body-lh: 1.55;
  --display-ls: normal;

  --hero-h1: clamp(min(3rem, 15vw), 8vw, 7rem);
  --hero-h1-lh: .95;
  --hero-p: clamp(1.125rem, 2vw, 1.625rem);
  --hero-p-lh: 1.55;
  --intro-h2: clamp(min(2.125rem, 10.625vw), 4vw, 3.875rem);
  --intro-h2-lh: 1.02;
  --intro-p: clamp(1.3125rem, 2.4vw, 2.125rem);
  --intro-p-lh: 1.3;
  --research-h2: clamp(min(2.375rem, 11.875vw), 5vw, 4.5rem);
  --research-h2-lh: 1;
  --research-strong: 1.5625rem;
  --research-strong-lh: 1.55;
  --method-h3: 1.625rem;
  --step-h3: 1.5rem;
  --commissions-h2: clamp(min(2.5rem, 12.5vw), 5vw, 4.75rem);
  --commissions-h2-lh: .95;
  --enquiry-h2: clamp(min(3rem, 15vw), 8vw, 6.875rem);
  --enquiry-h2-lh: .92;
  --enquiry-p: 1.125rem;
}

:lang(zh-Hans) {
  --serif: Georgia, "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

:lang(ja) {
  --serif: Georgia, "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
}

/* CJK: smaller display sizes with open line-height (the template's 0.92-0.95
   is for Latin capitals and descenders; CJK glyphs fill the whole em box),
   slight positive tracking, labels without the wide Latin tracking. */
:lang(zh-Hans),
:lang(ja) {
  --track: .4;
  --small: 1.15;
  --body-lh: 1.8;
  --display-ls: .04em;

  --hero-h1: clamp(min(2.125rem, 10.625vw), 5.2vw, 4.5rem);
  --hero-h1-lh: 1.32;
  --hero-p: clamp(1rem, 1.45vw, 1.25rem);
  --hero-p-lh: 1.85;
  --intro-h2: clamp(1.625rem, 2.8vw, 2.625rem);
  --intro-h2-lh: 1.4;
  --intro-p: clamp(1.125rem, 1.55vw, 1.5rem);
  --intro-p-lh: 1.75;
  --research-h2: clamp(1.75rem, 3.3vw, 3rem);
  --research-h2-lh: 1.38;
  --research-strong: 1.25rem;
  --research-strong-lh: 1.5;
  --method-h3: 1.375rem;
  --step-h3: 1.25rem;
  --commissions-h2: clamp(1.75rem, 3.3vw, 3rem);
  --commissions-h2-lh: 1.4;
  --enquiry-h2: clamp(min(2rem, 10vw), 5vw, 4.25rem);
  --enquiry-h2-lh: 1.32;
  --enquiry-p: 1rem;
}

/* ---------- Base (template) ---------- */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Template: html { scroll-behavior: smooth }, now only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  line-height: var(--body-lh);
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hidden only while main.js applies the visitor's language. The inline script
   in index.html and this animation each reveal the page on their own if main.js
   never finishes, so a failed script never leaves a blank page. */
.i18n-pending body {
  visibility: hidden;
  animation: ss-show-page 0s linear 2s forwards;
}

@keyframes ss-show-page {
  to {
    visibility: visible;
  }
}

:lang(zh-Hans),
:lang(ja) {
  line-break: strict;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

main:focus {
  outline: none;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--ivory);
  font-size: calc(.625rem * var(--small));
  letter-spacing: calc(.16em * var(--track));
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Header (template + language switcher + mobile menu) ----------
   Without JavaScript (and on the script-free 404 page) the header stays in the
   page flow above the content, so it can never cover text or sit unreadably over
   the dark section; main.js makes it fixed and transparent over the hero, as in
   the template, once it can also switch it to the light variant (.is-on-dark)
   and measure its height for the hero and anchor offsets. */

.site-header {
  position: relative;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  padding: 24px 4vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 28px;
  color: var(--ink);
  mix-blend-mode: multiply;
  --h-muted: var(--muted);
  --h-line: var(--line);
}

.header-ready .site-header {
  position: fixed;
}

/* Light variant over the dark enquiry section (multiply would make dark text vanish). */
.site-header.is-on-dark {
  mix-blend-mode: normal;
  color: var(--ivory);
  --h-muted: var(--dark-muted);
  --h-line: rgba(244, 241, 234, .3);
}

/* flex: 1 1 0 + max-width: max-content: the logo keeps its one-line width when
   there is room, and wraps its own text (instead of pushing the controls off
   screen) when the text is enlarged on a narrow screen. */
.logo {
  flex: 1 1 0;
  max-width: max-content;
  font-size: .75rem;
  letter-spacing: .22em;
  font-weight: 600;
}

.header-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px clamp(16px, 2vw, 28px);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(16px, 2vw, 28px);
  font-size: calc(.625rem * var(--small));
  letter-spacing: calc(.16em * var(--track));
}

/* Larger hit area without changing the template's layout box. */
.site-nav a {
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
}

.menu-toggle {
  display: none;
}

.lang-switch {
  display: none;
}

.lang-ready .lang-switch {
  display: flex;
  align-items: center;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--h-line);
}

.lang-switch button {
  margin: -6px 0;
  padding: 6px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--h-muted);
  font-family: var(--sans);
  font-size: calc(.625rem * var(--small));
  line-height: 1.55;
  letter-spacing: calc(.16em * var(--track));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lang-switch button:first-child {
  padding-left: 0;
}

.lang-switch button:last-child {
  padding-right: 0;
}

.lang-switch button:hover,
.lang-switch button[aria-pressed="true"] {
  color: inherit;
}

.lang-switch button[aria-pressed="true"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.lang-sep {
  color: var(--h-muted);
  font-size: .625rem;
}

@media (max-width: 50em) {
  .site-header {
    padding: 18px 5vw;
  }

  .menu-ready .menu-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: -10px -8px -10px auto;
    padding: 10px 8px;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: var(--sans);
    font-size: calc(.625rem * var(--small));
    line-height: 1.55;
    letter-spacing: calc(.16em * var(--track));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-icon path {
    transform-box: view-box;
    transform-origin: 7px 7px;
  }

  .menu-toggle[aria-expanded="true"] .menu-line-1 {
    transform: translateY(2.5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-line-2 {
    transform: translateY(-2.5px) rotate(-45deg);
  }

  /* While the menu is open the header is a solid sheet (multiply would let the
     page show through the panel), whatever section is underneath. */
  .site-header.is-menu-open {
    mix-blend-mode: normal;
    background: var(--ivory);
    color: var(--ink);
    --h-muted: var(--muted);
    --h-line: var(--line);
  }

  /* The panel: below the header, never taller than the space left on screen,
     scrolling inside on short (e.g. landscape phone) viewports. */
  .menu-ready .header-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 5vw 16px;
    background: var(--ivory);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -24px rgba(34, 33, 30, .35);
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .menu-ready .is-menu-open .header-menu {
    display: block;
  }

  .menu-ready .site-nav {
    display: block;
    font-size: calc(.6875rem * var(--small));
  }

  .menu-ready .site-nav a {
    display: block;
    margin: 0;
    padding: 15px 0;
  }

  .menu-ready .site-nav a + a {
    border-top: 1px solid var(--line);
  }

  .menu-ready .lang-switch {
    padding: 4px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .menu-ready .lang-switch button {
    min-height: 44px;
    margin: 0;
    padding: 10px 10px;
    font-size: calc(.6875rem * var(--small));
  }

  .menu-ready .lang-switch button:first-child {
    padding-left: 0;
  }
}

/* ---------- Anchor offset ----------
   The header is transparent and the sections start with 130px (mobile 90px) of
   padding, so a jump to #works etc. normally lands with the section top at the
   top of the screen, as in the template. Only when the header is taller than that
   padding (very large text) is the target pushed down by the difference. */
section[id] {
  scroll-margin-top: max(0px, calc(var(--header-h) + 12px - 130px));
}

@media (max-width: 50em) {
  section[id] {
    scroll-margin-top: max(0px, calc(var(--header-h) + 12px - 90px));
  }
}

/* ---------- Hero (template) ---------- */

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 100px 8vw;
  /* Template 100px, more only if the fixed header is taller (very large text). */
  padding-top: max(100px, calc(var(--header-h) + 24px));
  background:
    linear-gradient(120deg, rgba(34, 33, 30, .05), rgba(104, 112, 93, .10)),
    radial-gradient(circle at 72% 42%, #d8d2c5 0, transparent 35%),
    var(--ivory);
}

.hero-inner {
  max-width: 1100px;
  width: 100%;
}

.kicker {
  font-size: calc(.625rem * var(--small));
  letter-spacing: calc(.28em * var(--track));
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 34px;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--hero-h1);
  line-height: var(--hero-h1-lh);
  letter-spacing: var(--display-ls);
  max-width: 950px;
}

.hero p {
  margin-top: 38px;
  max-width: 620px;
  font-family: var(--serif);
  font-size: var(--hero-p);
  line-height: var(--hero-p-lh);
  color: #49463f;
}

.hero-meta {
  margin-top: 60px;
  font-size: calc(.625rem * var(--small));
  letter-spacing: calc(.18em * var(--track));
  color: var(--muted);
}

/* ---------- Sections (template) ---------- */

section {
  padding: 130px 8vw;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: 70px;
}

.section-no,
.section-label {
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 400;
  line-height: var(--body-lh);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-label {
  font-size: calc(.625rem * var(--small));
  letter-spacing: calc(.2em * var(--track));
}

.intro {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 8vw;
}

.intro h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--intro-h2);
  line-height: var(--intro-h2-lh);
  letter-spacing: var(--display-ls);
}

.intro p {
  font-family: var(--serif);
  font-size: var(--intro-p);
  line-height: var(--intro-p-lh);
}

.statement {
  margin-top: 50px;
  color: var(--muted);
  font-size: .875rem;
  max-width: 650px;
}

.projects {
  background: var(--paper);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 70px 28px;
}

/* Template had .card { cursor: pointer }: removed, the cards do not link anywhere. */

/* Grid children may shrink below their longest word or (Japanese) phrase, so very
   large text wraps inside the screen instead of widening the page. At normal text
   sizes nothing is that long, so the template layout is unchanged. (The two-column
   intro / research / commissions grids get this only when stacked, below: on desktop
   the template lets a long heading word widen its column, and that is kept.) */
.hero-inner,
.enquiry > div,
.card {
  min-width: 0;
}

.image {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #cbc5b8, #777b70);
  position: relative;
  overflow: hidden;
}

.card:nth-child(2) .image {
  background: linear-gradient(145deg, #dad6cc, #9d9486);
}

.card:nth-child(3) .image {
  background: linear-gradient(135deg, #7b8171, #cfc5b5);
}

.card:nth-child(4) .image {
  background: linear-gradient(145deg, #b9b1a3, #555a52);
}

.image::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 255, 255, .35);
}

.card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;
  margin-top: 18px;
}

.card p {
  font-size: calc(.6875rem * var(--small));
  letter-spacing: calc(.12em * var(--track));
  color: var(--muted);
  margin-top: 8px;
  text-transform: uppercase;
}

.research {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 8vw;
}

.research h2 {
  font-family: var(--serif);
  font-size: var(--research-h2);
  font-weight: 400;
  line-height: var(--research-h2-lh);
  letter-spacing: var(--display-ls);
}

.research-list {
  border-top: 1px solid var(--line);
}

.research-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.research-item strong {
  font-family: var(--serif);
  font-size: var(--research-strong);
  line-height: var(--research-strong-lh);
  font-weight: 400;
}

.research-item span {
  font-size: calc(.6875rem * var(--small));
  color: var(--muted);
  max-width: 330px;
  text-align: right;
}

.method {
  background: #e9e5dc;
  /* Muted text on this darker background: the template's #6f6a61 is 4.27:1 here.
     Same hue and chroma, 4 steps darker per channel: 4.53:1 (WCAG AA needs 4.5). */
  --muted: #6b665d;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
}

.method-item {
  background: #e9e5dc;
  padding: 30px 22px;
  min-height: 190px;
}

.method-item b {
  font-size: calc(.625rem * var(--small));
  letter-spacing: calc(.18em * var(--track));
  color: var(--muted);
}

.method-item h3 {
  font-family: var(--serif);
  font-size: var(--method-h3);
  font-weight: 400;
  letter-spacing: var(--display-ls);
  margin: 34px 0 12px;
}

.method-item p {
  font-size: .8125rem;
  color: #555149;
}

.commissions {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 8vw;
}

.commissions h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--commissions-h2);
  line-height: var(--commissions-h2-lh);
  letter-spacing: var(--display-ls);
}

.steps {
  border-top: 1px solid var(--line);
}

.step {
  display: grid;
  grid-template-columns: 60px 1fr 1.5fr;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.step .n {
  font-size: .625rem;
  color: var(--muted);
  letter-spacing: .15em;
}

.step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-h3);
  letter-spacing: var(--display-ls);
}

.step p {
  font-size: .8125rem;
  color: #5f5a52;
}

.enquiry {
  background: var(--dark);
  color: var(--ivory);
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.enquiry .kicker {
  color: var(--dark-muted);
}

.enquiry h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--enquiry-h2);
  line-height: var(--enquiry-h2-lh);
  letter-spacing: var(--display-ls);
}

/* Template: "Let the project<br>begin with a conversation." as two translatable lines. */
.enquiry h2 span {
  display: block;
}

.enquiry p {
  max-width: 550px;
  margin: 35px auto;
  color: #bcb7ad;
  font-family: var(--serif);
  font-size: var(--enquiry-p);
}

/* While the enquiry button is removed, the paragraph is last: no trailing margin,
   so the text sits centred in the dark section. Restoring the button restores it. */
.enquiry p:last-child {
  margin-bottom: 0;
}

/* Template button style, kept for when the enquiry button returns (see index.html). */
.button {
  display: inline-block;
  border: 1px solid rgba(244, 241, 234, .5);
  padding: 14px 25px;
  font-size: calc(.625rem * var(--small));
  letter-spacing: calc(.2em * var(--track));
  text-transform: uppercase;
}

.site-footer {
  padding: 30px 4vw;
  display: flex;
  justify-content: space-between;
  font-size: .625rem;
  letter-spacing: .14em;
  color: var(--muted);
}

.site-footer span:lang(zh-Hans),
.site-footer span:lang(ja) {
  font-size: calc(.625rem * var(--small));
  letter-spacing: calc(.14em * var(--track));
}

/* ---------- CJK details ---------- */

/* English text inside a Chinese or Japanese page (brand, project names) keeps the
   template's line height instead of inheriting the taller CJK body line height. */
.logo,
.card h3,
.site-footer span:lang(en) {
  line-height: var(--body-lh);
}

/* CJK research titles are short but can shrink to one character per line in the
   template's flex row (CJK can break between any two characters): keep them whole
   and give the note the remaining width. */
.research-item strong:lang(zh-Hans),
.research-item strong:lang(ja) {
  flex-shrink: 0;
  max-width: 55%;
}

.hero h1:lang(zh-Hans),
.hero h1:lang(ja),
.enquiry h2:lang(zh-Hans),
.enquiry h2:lang(ja),
.intro h2:lang(zh-Hans),
.intro h2:lang(ja),
.research h2:lang(zh-Hans),
.research h2:lang(ja),
.commissions h2:lang(zh-Hans),
.commissions h2:lang(ja) {
  text-wrap: balance;
}

.intro p:lang(zh-Hans),
.intro p:lang(ja),
.hero p:lang(zh-Hans),
.hero p:lang(ja),
.statement:lang(zh-Hans),
.statement:lang(ja),
.research-item span:lang(zh-Hans),
.research-item span:lang(ja),
.method-item p:lang(zh-Hans),
.method-item p:lang(ja),
.step p:lang(zh-Hans),
.step p:lang(ja),
.enquiry p:lang(zh-Hans),
.enquiry p:lang(ja),
.site-footer span:lang(zh-Hans),
.site-footer span:lang(ja) {
  text-wrap: pretty;
}

/* A "\n" in a Chinese or Japanese heading value (i18n.js) is the preferred line
   break. Only CJK headings honour it; their text always comes from the dictionary. */
.hero h1:lang(zh-Hans),
.hero h1:lang(ja),
.intro h2:lang(zh-Hans),
.intro h2:lang(ja),
.research h2:lang(zh-Hans),
.research h2:lang(ja),
.commissions h2:lang(zh-Hans),
.commissions h2:lang(ja) {
  white-space: pre-line;
}

/* Japanese: proportional kana in headings, and line breaks between phrases where supported. */
.hero h1:lang(ja),
.intro h2:lang(ja),
.research h2:lang(ja),
.commissions h2:lang(ja),
.enquiry h2:lang(ja) {
  font-feature-settings: "palt";
}

@supports (word-break: auto-phrase) {
  .hero h1:lang(ja),
  .hero p:lang(ja),
  .intro h2:lang(ja),
  .intro p:lang(ja),
  .research h2:lang(ja),
  .commissions h2:lang(ja),
  .enquiry h2:lang(ja),
  .enquiry p:lang(ja),
  .statement:lang(ja),
  .research-item strong:lang(ja),
  .research-item span:lang(ja),
  .method-item p:lang(ja),
  .step p:lang(ja),
  .site-footer span:lang(ja) {
    word-break: auto-phrase;
  }
}

/* ---------- Template breakpoints ---------- */

@media (max-width: 50em) {
  section {
    padding: 90px 7vw;
  }

  .intro,
  .research,
  .commissions {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  /* Stacked layout only (this is also where very large text lands, as the
     breakpoint is in em): cells may shrink below their longest word, so text
     wraps inside the screen. On desktop the template's column sizing is kept. */
  .intro > *,
  .research > *,
  .commissions > *,
  .method-item,
  .step h3,
  .step p {
    min-width: 0;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .method-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Two columns and five items: the template left the sixth slot empty, which
     showed the grid's line colour as a grey block. The last item spans the row. */
  .method-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .step {
    grid-template-columns: 40px 1fr;
  }

  .step p {
    grid-column: 2;
  }
}

@media (max-width: 31.25em) {
  .method-grid {
    grid-template-columns: 1fr;
  }
}

/* Below 320px at the default text size (or on small phones with enlarged text) the
   research title and its note no longer fit side by side: stack them. */
@media (max-width: 19.9375em) {
  .research-item {
    flex-direction: column;
    gap: 8px;
  }

  .research-item span {
    max-width: none;
    text-align: left;
  }

  .site-footer {
    flex-wrap: wrap;
    gap: 6px 24px;
  }
}

/* ---------- 404 page (reuses the header, hero and kicker styles) ---------- */

/* The header is in the page flow here (no script): header plus message fill one screen. */
.notfound-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.notfound {
  flex: 1 0 auto;
  min-height: 0;
}

.notfound h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.35;
  max-width: 950px;
}

.notfound h1 span {
  display: block;
  font-family: var(--serif);
  letter-spacing: var(--display-ls);
}

.notfound h1 span + span {
  margin-top: .4em;
}

.notfound h1 span:lang(zh-Hans),
.notfound h1 span:lang(ja) {
  text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
  .notfound h1 span:lang(ja) {
    word-break: auto-phrase;
  }
}

.notfound-home {
  margin-top: 56px;
  color: var(--ink);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.notfound-home a {
  display: inline-block;
  padding: 14px 25px;
  border: 1px solid rgba(34, 33, 30, .4);
}

/* Each language stays on one line; the link wraps only between languages. */
.notfound-home span {
  white-space: nowrap;
  font-family: var(--sans);
  font-size: calc(.625rem * var(--small));
  letter-spacing: calc(.2em * var(--track));
}

/* ---------- Print ---------- */

@media print {
  .site-header,
  .header-ready .site-header {
    position: static;
    mix-blend-mode: normal;
  }

  .skip-link,
  .menu-toggle,
  .lang-switch {
    display: none !important;
  }
}