/* ==========================================================================
   Creative Flow — prototype stylesheet
   Design direction: editorial luxury. Cool paper, high contrast ink,
   plum accent (bronze on dark), generous whitespace, large type scale.
   All visual decisions live in the tokens below — change them here only.

   Brand colours: Paper #F4F5F6 · Ink #1A1A1A · Plum #4F0341 · Bronze #A08060.
   Plum on Ink is 1.2:1 — invisible — so the dark theme accents in Bronze.
   ========================================================================== */

:root {
  /* Palette */
  --paper:        #F4F5F6;
  --paper-sunk:   #E9EBED;
  --ink:          #1A1A1A;
  --ink-muted:    #5F6266;
  --ink-faint:    #65686C;
  --line:         #DADDE0;
  --accent:       #4F0341;
  --accent-soft:  #EDE4EB;

  /* Hero band: Plum ground, both themes. Bronze fails small text here
     (4.1:1), so the eyebrow uses a light plum tint instead. */
  --hero-bg:      #4F0341;
  --hero-ink:     #F4F5F6;
  --hero-muted:   #E6D9E3;
  --hero-faint:   #C9AEC3;
  --hero-accent:  #D8C3D3;
  --hero-line:    color-mix(in srgb, #F4F5F6 24%, #4F0341);
  --hero-mark:    color-mix(in srgb, #F4F5F6 11%, #4F0341);

  /* Ink band: an inverted section, same in both themes like the hero.
     Small text passes 4.5:1 on #1A1A1A (faint 6.3, bronze 4.8). */
  --band-bg:      #1A1A1A;
  --band-ink:     #F4F5F6;
  --band-muted:   #B8BABD;
  --band-faint:   #9A9CA0;
  --band-accent:  #A08060;
  --band-line:    #3A3A3A;

  /* Bronze field (Contact). Only Ink text is legible on it. */
  --bronze-bg:    #A08060;
  --bronze-ink:   #1A1A1A;
  --bronze-line:  color-mix(in srgb, #1A1A1A 45%, #A08060);

  /* Type */
  /* Korean system fonts sit in both stacks: the page must look right before
     (and if) the webfonts arrive. */
  --font-brand:   "Tenor Sans", "Pretendard Variable", Pretendard, sans-serif;
  --font-display: "Pretendard Variable", Pretendard, -apple-system,
                  BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
                  "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-body:    "Pretendard Variable", Pretendard, -apple-system,
                  BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
                  "Malgun Gothic", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --gutter:       24px;
  --measure:      1240px;
  --section-y:    clamp(72px, 10vw, 152px);
  --radius:       2px;
  --col-gap:      clamp(16px, 2.4vw, 32px);
  --rule-heavy:   2px;
}

/* Light is the brand default — the OS dark setting is deliberately ignored.
   Dark exists only when the visitor picks it with the ◐ toggle. */
:root[data-theme="dark"] {
  --paper:       #141414;
  --paper-sunk:  #1A1A1A;
  --ink:         #F4F5F6;
  --ink-muted:   #B8BABD;
  --ink-faint:   #9A9CA0;
  --line:        #2E2E2E;
  --accent:      #A08060;
  --accent-soft: #2A241F;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;      /* Korean: never break inside a word */
  overflow-wrap: anywhere;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 760px; }

.section { padding-block: var(--section-y); }
.section--sunk { background: var(--paper-sunk); }
.section + .section { border-top: 1px solid var(--line); }
.section--sunk + .section, .section + .section--sunk { border-top: 0; }

.grid { display: grid; gap: clamp(28px, 4vw, 56px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }

@media (max-width: 860px) {
  .grid--2, .grid--3, .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) and (min-width: 861px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

/* Role scale. With one family, hierarchy comes from size and weight steps
   that are far enough apart to read without the copy: display ≈ 3.7× body,
   h2 ≈ 2.1× h3, pull quote between the two. */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6.6vw, 5.4rem);
  line-height: 1.12;          /* Hangul needs more room than Latin display */
  letter-spacing: -0.04em;
  margin: 0;
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.24;
  margin: 0 0 0.5em;
}

h2 {
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

/* Heading level and heading look are separate: the outline needs the right
   level, the page keeps the size it was designed with. */
h2.h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.24; letter-spacing: -0.02em; }
h3.h4 { font-size: 1.05rem; }

/* For headings that give the outline a section name the layout does not show. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.66;
  color: var(--ink-muted);
}

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4em;
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 74px;
}

/* Logo lockup: CREATIVE — FLOW. Outlined SVG masters live in assets/brand/;
   this text version follows the theme tokens. The rule is the accent. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.92em;
  font-family: var(--font-brand);
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}

.brand__rule {
  width: 1.23em;
  height: 1.5px;
  background: var(--accent);
}

/* Footer: the same horizontal lockup, a step larger, left-aligned on the
   grid like every other block. */
.site-footer .brand {
  font-size: 0.9rem;
  color: var(--ink);
}
.site-footer .brand:hover { color: var(--ink); }

.nav { display: flex; align-items: center; gap: 28px; }

.nav a {
  text-decoration: none;
  font-size: 0.93rem;
  color: var(--ink-muted);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* The CTA inside the nav is a button, not a nav link — restate its colours at
   matching specificity or `.nav a` wins and the label disappears into the fill. */
.nav a.btn, .nav a.btn:hover { color: var(--paper); border-bottom-color: var(--ink); }
.nav a.btn--ghost, .nav a.btn--ghost:hover { color: var(--ink); }

.nav__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.lang-switch {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-faint);
}
.lang-switch:hover { color: var(--accent); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  padding: 7px 13px;
  cursor: pointer;
}

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: 13px; border-bottom: 1px solid var(--line); }
  .nav__meta { border-left: 0; padding-left: 0; padding-top: 16px; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: opacity .18s ease, transform .18s ease;
}
.btn:hover { opacity: 0.86; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); opacity: 1; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.4em; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.arrow-link:hover { border-bottom-color: var(--accent); }
.arrow-link::after {
  content: "";
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
          mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  transition: transform .18s ease;
}
.arrow-link:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Icons — Phosphor, Light weight (MIT, assets/icons/). Drawn as a mask so
   they take the text colour and the path resolves from this file at any
   page depth: <span class="icon icon--eye" aria-hidden="true"></span>
   -------------------------------------------------------------------------- */

.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.icon--arrow-right    { --icon: url("../icons/arrow-right.svg"); }
.icon--arrow-up-right { --icon: url("../icons/arrow-up-right.svg"); }
.icon--theme          { --icon: url("../icons/circle-half.svg"); }
.icon--mail           { --icon: url("../icons/envelope-simple.svg"); }
/* The working model: Insight, Strategy, Expression, Experience */
.icon--insight        { --icon: url("../icons/eye.svg"); }
.icon--strategy       { --icon: url("../icons/target.svg"); }
.icon--expression     { --icon: url("../icons/pen-nib.svg"); }
.icon--experience     { --icon: url("../icons/footprints.svg"); }
/* Perspectives: Brand & Experience (notes), UX & AI (signals), Editions */
.icon--note           { --icon: url("../icons/sparkle.svg"); }
.icon--signal         { --icon: url("../icons/cursor-click.svg"); }
.icon--edition        { --icon: url("../icons/book-open-text.svg"); }

/* Pictogram: the service or phase mark that replaces a 01/02/03 number. */
.pictogram { display: block; font-size: 1.9rem; color: var(--accent); margin-bottom: 0.35em; }
[data-theme-toggle] .icon { font-size: 1.45em; vertical-align: middle; }
.icon-link { display: inline-flex; align-items: center; gap: 0.45em; }
.btn .icon { margin-left: 0.3em; }
.row__label .pictogram { display: block; font-size: 1.7rem; margin-bottom: 0.5em; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* The hero re-points the base tokens at the hero palette, so everything
   inside — eyebrow, lede, buttons, meta row — inverts without its own rules.
   The primary button becomes a Paper fill with Plum text. */
.hero, .band--plum, .plate {
  --paper:     var(--hero-bg);
  --ink:       var(--hero-ink);
  --ink-muted: var(--hero-muted);
  --ink-faint: var(--hero-faint);
  --accent:    var(--hero-accent);
  --line:      var(--hero-line);
  background: var(--paper);
  color: var(--ink);
}
.hero { padding-block: clamp(80px, 13vw, 180px) clamp(64px, 9vw, 128px); }

/* Other grounds for the hero, one per page concept. `inherit` hands the
   page's own tokens back, so a Paper hero follows the theme toggle. */
.hero.hero--paper {
  --paper: inherit; --ink: inherit; --ink-muted: inherit;
  --ink-faint: inherit; --accent: inherit; --line: inherit;
}
.hero.hero--ink, .band--ink {
  --paper:     var(--band-bg);
  --ink:       var(--band-ink);
  --ink-muted: var(--band-muted);
  --ink-faint: var(--band-faint);
  --accent:    var(--band-accent);
  --line:      var(--band-line);
}
/* Bronze passes small text only in Ink (4.8:1); Paper and Plum fail. */
.hero.hero--bronze {
  --paper:     var(--bronze-bg);
  --ink:       var(--bronze-ink);
  --ink-muted: var(--bronze-ink);
  --ink-faint: var(--bronze-ink);
  --accent:    var(--bronze-ink);
  --line:      var(--bronze-line);
}
/* The inner box keeps the full measure so hero text shares the left edge of
   the header and every section below; only the heading is held narrower. */
.hero__inner { max-width: var(--measure); }
.hero .display { max-width: 960px; }
.hero .lede { max-width: 620px; margin-top: 1.6em; }

/* Home: text beside a portrait image. The meta row spans both columns. */
.hero--split .hero__inner {
  max-width: var(--measure);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.hero--split .display { font-size: clamp(2.4rem, 4.8vw, 4rem); }
.hero--split .hero__meta { grid-column: 1 / -1; margin-top: 0; }
.hero__media { margin: 0; }
.hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 860px) {
  .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__media img { aspect-ratio: 4 / 3; }
}

/* A wide image right after a hero, overlapping the bottom of the plum band.
   The section that follows keeps its own padding. */
.feature { position: relative; margin-top: calc(-1 * clamp(40px, 6vw, 88px)); }
.feature figure { margin: 0; }
.feature img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.hero:has(+ .feature) { padding-bottom: calc(clamp(64px, 9vw, 128px) + clamp(40px, 6vw, 88px)); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 3.4em;
  padding-top: 1.6em;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
@media (max-width: 560px) { .hero__meta { gap: 8px 20px; } }
.hero__meta a { text-decoration: none; }
.hero__meta a:hover { color: var(--ink); }
/* A path such as Research → Visual System → Prototype: the arrows are icons. */
.hero__meta .icon, .work-card .icon { margin-inline: 0.2em; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   Poster layout (home pilot). Swiss typographic poster grammar: a flat
   colour field, a label column on the left, content on the right, heavy
   rules and a large type contrast. Colours stay within the four brand values.
   -------------------------------------------------------------------------- */

/* Twelve columns: the label takes three, content the other nine. Blocks stay
   direct children of .wrap so the entrance motion still reaches them. */
.index {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.index::before {
  content: "";
  grid-column: 1 / -1;
  border-top: var(--rule-heavy) solid var(--ink);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.index > * { grid-column: 4 / -1; min-width: 0; }
.index > .index__label { grid-column: 1 / 4; padding-top: 0.9em; }
.index > .index__wide { grid-column: 1 / -1; }
.index > .section-head { margin-bottom: clamp(32px, 4.4vw, 56px); }
.index .eyebrow { margin-bottom: 0; }
.section + .section:has(> .index, > .wrap > .plate, > .wrap > .columns) { border-top: 0; }
/* The heavy rule already opens the section, so the space above it is halved. */
.section:has(> .index) { padding-top: calc(var(--section-y) * 0.55); }

@media (max-width: 860px) {
  .index > *, .index > .index__label { grid-column: 1 / -1; }
  .index > .index__label { padding-top: 0; margin-bottom: 1em; }
}

/* Hero as poster: one small label at the top, the heading set across the
   full measure, the name huge in tone-on-tone plum and cropped
   by the band. */
.hero--poster { padding-bottom: 0; overflow: hidden; }
.hero--poster .hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.hero--poster .hero__inner > * { grid-column: 1 / -1; min-width: 0; }
.hero--poster .eyebrow { grid-row: 1; margin: 0; }
.hero--poster .display {
  grid-row: 2;
  max-width: none;
  margin-top: clamp(40px, 6vw, 88px);
  font-size: clamp(2.6rem, 9.4vw, 8.4rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
}
.hero--poster .lede { grid-row: 3; grid-column: 1 / 7; }
.hero--poster .btn-row { grid-row: 4; }
.hero__mark {
  grid-row: 5;
  justify-self: end;
  margin-top: clamp(40px, 6vw, 80px);
  margin-bottom: -0.2em;
  font-family: var(--font-display);
  font-size: clamp(7rem, 30vw, 26rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--hero-mark);
  user-select: none;
}

@media (max-width: 860px) {
  .hero--poster .hero__inner > *,
  .hero--poster .eyebrow,
  .hero--poster .lede { grid-column: 1 / -1; grid-row: auto; }
  .hero--poster .eyebrow { padding-top: 0; margin-bottom: 1.4em; }
  .hero--poster .display { margin-top: 0; }
}

/* Colour bands: Plum reuses the hero tokens (see .hero); Ink inverts. */
.band--plum { padding-block: var(--section-y); }
.band--plum, .band--ink { background: var(--paper); color: var(--ink); }
.section + .band--plum, .section + .band--ink { border-top: 0; }
.band--plum .display { font-size: clamp(2.4rem, 6vw, 5rem); }
.band--plum .lede { max-width: 32em; margin-top: 1.4em; }

/* Stacked words: one per line, large, the way a poster lists names. */
.stack {
  margin: 0 0 clamp(32px, 4vw, 48px);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}
.stack > span { display: block; }
.stack .stack__op { color: var(--accent); font-weight: 400; }
.stack + p { max-width: 36em; }
/* Stepped: each line starts one step further in, the words in the accent. */
.stack--steps { color: var(--accent); }
.stack--steps .stack__op { color: var(--ink); }
.stack--steps > span:nth-child(2) { margin-left: 1em; }
.stack--steps > span:nth-child(3) { margin-left: 2em; }
.stack--steps > span:nth-child(4) { margin-left: 3em; }
@media (max-width: 560px) {
  .stack--steps > span:nth-child(2) { margin-left: 0.5em; }
  .stack--steps > span:nth-child(3) { margin-left: 1em; }
  .stack--steps > span:nth-child(4) { margin-left: 1.5em; }
}

/* Index list: a typeset table of rows, the title as large as a heading. */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list a {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: var(--col-gap);
  align-items: baseline;
  padding-block: clamp(20px, 2.6vw, 30px);
  text-decoration: none;
}
.index-list__kind { display: flex; align-items: center; gap: 0.6em; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.index-list__kind .icon { font-size: 1.3rem; }
.index-list__title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  transition: color .18s ease;
}
.index-list__desc { color: var(--ink-muted); font-size: 0.95rem; }
.index-list a:hover .index-list__title { color: var(--accent); }

@media (max-width: 720px) {
  .index-list a { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* The working model as large words. */
.flow--display .flow__step h3 { font-size: clamp(1.35rem, 2.3vw, 2rem); letter-spacing: -0.035em; }

/* The working model as a typeset list: one step per row (About). */
.flow.flow--rows { grid-template-columns: minmax(0, 1fr); border-top: var(--rule-heavy) solid var(--ink); }
.flow.flow--rows .flow__step,
.flow.flow--rows .flow__step + .flow__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--col-gap);
  align-items: baseline;
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-left: 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.flow.flow--rows .flow__head { margin: 0; }
.flow.flow--rows .flow__step .flow__head::after { display: none; }
.flow.flow--rows .flow__step h3 { margin: 0; font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -0.045em; }
.flow.flow--rows .flow__step p { margin: 0; font-size: 1rem; }
@media (max-width: 720px) {
  .flow.flow--rows .flow__step, .flow.flow--rows .flow__step + .flow__step { grid-template-columns: auto minmax(0, 1fr); padding: 20px 0; }
  .flow.flow--rows .flow__step p { grid-column: 1 / -1; }
}

/* Every page anchor clears the sticky header. */
[id] { scroll-margin-top: 96px; }

/* ---- Page concepts. Each page borrows one poster from the cf_homepage
   Savee board; the grid, rules and four colours stay shared. ---- */

/* A hero whose inner box is the twelve-column grid. */
.hero--grid .hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.hero--grid .hero__inner > * { grid-column: 1 / -1; min-width: 0; }
.hero--grid .display, .hero--grid .lede { max-width: none; }

/* Work: the title sits huge at the right under a heavy rule, and the
   programme below is the list itself, each title set as large as a poster line. */
.hero--programme { padding-top: clamp(40px, 6vw, 72px); }
.hero--programme .hero__inner::before { content: ""; grid-column: 1 / -1; margin-bottom: clamp(56px, 9vw, 128px); border-top: var(--rule-heavy) solid var(--ink); }
.hero--programme .display {
  grid-column: 4 / -1;
  justify-self: end;
  text-align: right;
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: 1;
  letter-spacing: -0.055em;
}
.hero--programme .lede { grid-column: 1 / 6; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 860px) {
  .hero--programme .display, .hero--programme .lede { grid-column: 1 / -1; }
}

.worklist { list-style: none; margin: 0; padding: 0; }
.worklist li { border-bottom: 1px solid var(--line); }
.worklist a, .worklist__soon {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
  padding: clamp(28px, 4vw, 56px) 0;
  text-decoration: none;
}
.worklist__title {
  grid-column: 1 / 10;
  margin: 0;
  font-size: clamp(2.4rem, 8.4vw, 7.6rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
  text-wrap: balance;
  transition: color .18s ease;
}
.worklist__meta {
  grid-column: 10 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding-bottom: 0.8em;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.worklist__meta .icon { margin-inline: 0.2em; color: var(--ink-faint); }
.worklist a:hover .worklist__title { color: var(--accent); }
.worklist__soon .worklist__title { color: var(--ink-faint); }
@media (max-width: 860px) {
  .worklist__title, .worklist__meta { grid-column: 1 / -1; }
  .worklist__meta { padding: 1.2em 0 0; }
}

/* Staggered pairs: both columns six wide, the right one drops, as on an
   asymmetric poster. */
.stagger { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(48px, 6vw, 80px); }
.stagger > :nth-child(odd)  { grid-column: 1 / 7; }
.stagger > :nth-child(even) { grid-column: 7 / -1; margin-top: clamp(64px, 12vw, 176px); }
@media (max-width: 860px) {
  .stagger > :nth-child(odd), .stagger > :nth-child(even) { grid-column: 1 / -1; margin-top: 0; }
}

/* Plate: a Plum block set inside the page margins, not full bleed, like a
   printed colour field on a concert poster. */
.plate { padding: clamp(28px, 4.4vw, 64px); border-radius: var(--radius); }

/* Project detail: the title in a plate, meta set above it on paper. The
   image slot follows straight after the plate. */
.hero--plate { padding-block: clamp(32px, 5vw, 64px) 0; }
.plate__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 14px;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.plate__meta .icon { margin-inline: 0.2em; }
.hero--plate .plate { padding-top: clamp(64px, 12vw, 176px); }
.hero--plate .plate .display { max-width: 12em; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.02; }
.hero--plate:has(+ .feature) { padding-bottom: 0; }
.hero--plate + .feature { margin-top: var(--col-gap); }

/* Context, Idea, Outcome as three columns side by side. */
.rows.rows--cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  border-top: 0;
}
.rows--cols .row {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding-block: 20px 0;
  border-top: var(--rule-heavy) solid var(--ink);
  border-bottom: 0;
}
@media (max-width: 860px) { .rows--cols { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } }

/* A next link set as large as a heading. */
.next-big { font-size: clamp(1.8rem, 4.6vw, 3.8rem); line-height: 1.12; letter-spacing: -0.04em; margin: 0; }

/* Perspectives: an Ink poster whose sections are the headline. */
.hero--ink-index .display { grid-column: 1 / 7; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.hero--ink-index .lede { grid-column: 8 / -1; align-self: end; margin: 0; }
.hero--ink-index .eyebrow { margin-bottom: 2.2em; }
.hero-stack {
  grid-column: 1 / -1;
  margin-top: clamp(56px, 8vw, 112px);
  padding-top: 14px;
  border-top: var(--rule-heavy) solid var(--ink);
}
.hero-stack a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-size: clamp(2.2rem, 7.6vw, 6.8rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.05em;
  text-decoration: none;
  transition: color .18s ease;
}
.hero-stack a .icon { font-size: 0.5em; color: var(--accent); }
.hero-stack a:hover { color: var(--accent); }
@media (max-width: 860px) {
  .hero--ink-index .display, .hero--ink-index .lede { grid-column: 1 / -1; }
  .hero--ink-index .lede { margin-top: 1.4em; }
}

/* Two programme columns side by side, split by a rule. */
.columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule-heavy) solid var(--ink);
}
.columns > * { min-width: 0; padding-top: clamp(24px, 3vw, 36px); }
.columns > * + * { padding-left: clamp(20px, 3vw, 48px); border-left: 1px solid var(--line); }
.columns > :first-child { padding-right: clamp(20px, 3vw, 48px); }
.columns h2 { margin-bottom: 0.3em; }
.columns > * > .muted { min-height: 3.5em; margin-bottom: 2em; }
.entries--stack .entry a { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 22px; }
.entries--stack .entry__date { order: -1; }
.entries--stack .entry a > .entry__kind { display: flex; justify-content: space-between; }
@media (max-width: 860px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
  .columns > * + * { padding-left: 0; border-left: 0; margin-top: 56px; border-top: var(--rule-heavy) solid var(--ink); }
  .columns > :first-child { padding-right: 0; }
}

/* A cover drawn as a poster: Plum field, the edition number set huge. */
.book__cover.book__cover--poster {
  --paper: var(--hero-bg);
  --ink: var(--hero-ink);
  background: var(--paper);
  color: var(--ink);
  border: 0;
  place-items: end start;
  text-align: left;
  padding: clamp(20px, 3vw, 36px);
}
.book__cover--poster span { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; }

/* Article: meta in a left margin column that stays in view, the text
   pushed right, as on a programme set flush right of a wide margin. */
.hero--article { padding-block: clamp(56px, 9vw, 128px) clamp(40px, 6vw, 80px); }
.hero--article .eyebrow { grid-column: 1 / 4; padding-top: 0.9em; margin: 0; }
.hero--article .display { grid-column: 4 / -1; font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.14; }
.hero--article .lede { grid-column: 4 / 11; }
/* The heavy rule already parts the hero from the text, so the section adds
   no space of its own above it and the first paragraph shows on arrival. */
.hero--article + .section { padding-top: 0; border-top: 0; }
.article-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.article-layout::before {
  content: "";
  grid-column: 1 / -1;
  border-top: var(--rule-heavy) solid var(--ink);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.article-layout > .article { grid-column: 4 / 11; }
.article-meta {
  grid-column: 1 / 4;
  position: sticky;
  top: 104px;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}
.article-meta dt { color: var(--ink-faint); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.article-meta dd { margin: 0 0 1.1em; }
.article-meta dd:first-of-type { color: var(--accent); font-weight: 600; }
.article-layout .article h2 { padding-top: 0.8em; border-top: 1px solid var(--line); }
.article-layout .article > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-layout .article blockquote {
  margin: 2.2em 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: -0.03em;
}
@media (max-width: 860px) {
  .hero--article .eyebrow, .hero--article .display, .hero--article .lede,
  .article-layout > .article, .article-meta { grid-column: 1 / -1; }
  .hero--article .eyebrow { margin-bottom: 1.4em; padding-top: 0; }
  .article-meta { position: static; display: flex; flex-wrap: wrap; gap: 0 24px; margin-bottom: 2em; }
  .article-meta dd { margin-bottom: 0.6em; }
}

/* About: the heading as a specimen, lines as large as the band allows. */
.hero--specimen .display { font-size: clamp(3rem, 10.4vw, 9.6rem); line-height: 1.02; letter-spacing: -0.06em; }
.hero--specimen .lede { grid-column: 7 / -1; margin-top: clamp(32px, 5vw, 64px); }
@media (max-width: 860px) { .hero--specimen .lede { grid-column: 1 / -1; } }
/* Statement: one large sentence, the key words in the accent. */
.statement {
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 17em;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.4vw, 3.8rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.statement__key { color: var(--accent); }
.statement + p { max-width: 36em; }

/* Founders: two equal halves, each led by an illustrated portrait at the
   same size, then role, name and bio, so neither person leads. */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule-heavy) solid var(--ink);
}
.pair > * { min-width: 0; padding-top: clamp(24px, 3vw, 40px); }
.pair > * + * { padding-left: clamp(20px, 3vw, 48px); border-left: 1px solid var(--line); }
.pair > :first-child { padding-right: clamp(20px, 3vw, 48px); }
.pair h3 { font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.05em; margin: 0 0 0.5em; }
.pair__portrait {
  width: min(100%, 320px);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
}
@media (max-width: 860px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair > * + * { padding-left: 0; border-left: 0; margin-top: 48px; border-top: 1px solid var(--line); }
  .pair > :first-child { padding-right: 0; }
}

/* Contact: a Bronze field with a note set sideways and the word cropped by
   the bottom edge in solid Ink. */
.hero--field { position: relative; padding-bottom: 0; overflow: hidden; }
.hero--field .display { grid-column: 1 / 10; }
.hero--field .lede { grid-column: 1 / 7; }
.hero__side {
  position: absolute;
  top: clamp(40px, 6vw, 80px);
  right: var(--gutter);
  writing-mode: vertical-rl;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.hero--field .hero__mark { justify-self: start; color: var(--ink); font-size: clamp(5rem, 22vw, 19rem); }
@media (max-width: 860px) {
  .hero--field .display, .hero--field .lede { grid-column: 1 / -1; }
  .hero__side { display: none; }
}
.contact-aside h2 { margin-bottom: 0.8em; }

/* --------------------------------------------------------------------------
   Cards & lists
   -------------------------------------------------------------------------- */

.card {
  display: block;
  text-decoration: none;
  padding-top: 26px;
  border-top: 1px solid var(--ink);
}

.card h3 { margin-top: 0.4em; }
.card p { color: var(--ink-muted); font-size: 0.96rem; }
.card:hover h3 { color: var(--accent); }

.card__index {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}

/* Entry list: perspectives */
.entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.entry { border-bottom: 1px solid var(--line); }

.entry a {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding-block: 30px;
  text-decoration: none;
}

.entry a:hover .entry__title { color: var(--accent); }
.entry__kind { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.entry__title { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.35em; }
.entry__excerpt { color: var(--ink-muted); font-size: 0.95rem; margin: 0; max-width: 44em; }
.entry__date { color: var(--ink-faint); font-size: 0.85rem; white-space: nowrap; }

@media (max-width: 720px) {
  .entry a { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 24px; }
  .entry__date { order: 3; }
}

/* Pull line: the typographic peak after a section heading. */
.pull {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 24em;
}
.pull + p { margin-top: 1.4em; }

/* Section head: English label, heading, and the section's way out on the
   right. Stacks on narrow screens. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head h2 { margin: 0; }
.section-head .eyebrow { margin-bottom: 1em; }

/* Working model: four steps in one row, each pointing at the next. On a
   phone the row becomes a column and the arrows turn down. */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.flow__step { padding: 28px clamp(16px, 2.4vw, 32px) 4px 0; }
.flow__step + .flow__step { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line); }
.flow__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9em; }
.flow__head .pictogram { margin: 0; }
.flow__step:not(:last-child) .flow__head::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--ink-faint);
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
          mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}
.flow__step h3 { margin: 0 0 0.35em; }
.flow__step p { color: var(--ink-muted); font-size: 0.96rem; }
.flow__roles { margin-top: 2.2em; color: var(--ink-faint); font-size: 0.85rem; letter-spacing: 0.04em; }

@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__step, .flow__step + .flow__step { padding: 24px 0; border-left: 0; }
  .flow__step + .flow__step { border-top: 1px solid var(--line); }
  .flow__step:not(:last-child) .flow__head::after { transform: rotate(90deg); }
}

/* Image slot. Work is image-led, but no images exist yet: the slot holds
   the frame at its final ratio so the layout reads as it will. */
.slot {
  aspect-ratio: 4 / 3;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color .2s ease;
}
.slot--wide { aspect-ratio: 16 / 9; }
.section--sunk .slot { background: var(--paper); }
.feature .slot { background: var(--paper-sunk); }

/* Work card: image first, then the project's name and path. */
.work-card { display: block; text-decoration: none; }
.work-card .slot { margin-bottom: 20px; }
.work-card:hover .slot { border-color: var(--accent); }
.work-card:hover h3 { color: var(--accent); }
.work-card h3 { margin: 0.3em 0 0.3em; }
.work-card p { color: var(--ink-muted); font-size: 0.95rem; margin: 0; }

/* Definition rows — approach steps, service detail */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  /* Pages set --row-label inline for a narrower label column; the mobile
     rule below still wins because it replaces the whole template. */
  grid-template-columns: var(--row-label, 200px) minmax(0, 1fr);
  gap: 24px;
  padding-block: 34px;
  border-bottom: 1px solid var(--line);
}
.row h3 { margin: 0 0 0.4em; }
.row p { color: var(--ink-muted); max-width: 44em; }
.row__label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 0.45em; }

@media (max-width: 720px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* People. The photo slot is sized for a real portrait, not for filling the
   column: until photos arrive, the bio has to carry the card. */
.person__avatar {
  width: min(100%, 240px);
  aspect-ratio: 3 / 4;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.person__role { color: var(--accent); font-size: 0.85rem; letter-spacing: 0.06em; margin: 0 0 0.6em; }

/* Library / ebook */
.book__cover {
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, var(--accent-soft), var(--paper-sunk));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 20px;
}
.tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;   /* wide tracking pulls Hangul syllables apart */
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 6px 6px 0;
}

/* Article body */
.article { max-width: 720px; }
.article h2 { margin-top: 2em; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.24; letter-spacing: -0.03em; }
.article h3 { margin-top: 1.8em; }
.article blockquote {
  margin: 2em 0;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
}
.article ul, .article ol { color: var(--ink-muted); padding-left: 1.3em; }
.article li { margin-bottom: 0.5em; }

/* Forms */
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.field textarea { min-height: 150px; resize: vertical; }

/* Newsletter strip */
.subscribe {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin-top: 2em;
}
.subscribe input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.subscribe input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.subscribe .btn { cursor: pointer; font-family: inherit; }
.subscribe [data-proto-form-notice] { flex-basis: 100%; margin: 0; }
.subscribe { flex-wrap: wrap; }
@media (max-width: 560px) { .subscribe { flex-direction: column; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 72px 44px;
  background: var(--paper-sunk);
}

.site-footer h2 {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.2em;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { text-decoration: none; color: var(--ink-muted); font-size: 0.93rem; }
.site-footer a:hover { color: var(--accent); }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px var(--col-gap);
}
/* First row: logo and tagline on the left, subscribe on the right. The
   link columns below start on the same lines as the page's label column. */
.site-footer__top {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.site-footer__top .subscribe { flex: 0 1 420px; margin-top: 0; }
.site-footer__tagline { margin: 1.2em 0 0; font-size: 0.93rem; white-space: nowrap; }
.site-footer__grid > :nth-child(2) { grid-column: 1 / 4; }
.site-footer__grid > :nth-child(3) { grid-column: 4 / 7; }
.site-footer__grid > :nth-child(4) { grid-column: 7 / 10; }
@media (max-width: 860px) {
  .site-footer__tagline { white-space: normal; }
  .site-footer__top .subscribe { flex-basis: 100%; }
  .site-footer__grid > :nth-child(2) { grid-column: 1 / 7; }
  .site-footer__grid > :nth-child(3) { grid-column: 7 / -1; }
  .site-footer__grid > :nth-child(4) { grid-column: 1 / -1; }
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.82rem;
}

/* Hand-placed breaks in display and section headings are a desktop
   typesetting choice; on a phone they create ragged two-word lines. Let the
   text wrap naturally. Every such <br> has a space before it, so hiding it
   never joins two words. */
@media (max-width: 560px) {
  .display br, h2 br { display: none; }
}

/* --------------------------------------------------------------------------
   Entrance motion (main.js sets data-motion="4" or "5"). Nothing is hidden
   unless the script runs and the visitor allows motion; the head snippet's
   .motion-pending only covers the hero until main.js takes over, with a
   3-second fallback.
   -------------------------------------------------------------------------- */

:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

@media (prefers-reduced-motion: no-preference) {
  html.motion-pending .hero .wrap > * { opacity: 0; }

  html[data-motion="4"] { --rv-dur: 700ms;  --rv-rise: 14px; --rv-step: 70ms; }
  html[data-motion="5"] { --rv-dur: 1000ms; --rv-rise: 28px; --rv-step: 110ms; }

  /* The transition belongs to the reveal only. If it sat on .rv, hiding an
     element the browser had already painted (a cached page, reached by a
     link) would play as a fade-out whose end was taken for the reveal. */
  html[data-motion] .rv.in {
    transition:
      opacity var(--rv-dur) var(--ease-out),
      transform var(--rv-dur) var(--ease-out),
      clip-path calc(var(--rv-dur) * 1.2) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--rv-step));
  }
  html[data-motion] .rv:not(.in) { opacity: 0; transform: translateY(var(--rv-rise)); }

  /* Level 5: the hero heading and the home pull quote are uncovered from
     the bottom edge. The negative insets leave room for descenders. */
  html[data-motion] .rv--clip { clip-path: inset(-0.1em -0.1em -0.3em -0.1em); }
  html[data-motion] .rv--clip:not(.in) { clip-path: inset(100% -0.1em -0.3em -0.1em); }
}

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

/* Project detail: the next project's name is the link. */
.next-link { text-decoration: none; }
.next-link:hover { color: var(--accent); }