/* ==========================================================================
   Waterman Made prototype
   styles.css — v6. IBM Plex Mono for spec-sheet labels. Journal no-wash with
                    hover fill. Wider footer. Note page. Pricing reordered.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core colors. Cooler, more refined palette. */
  --c-cream: #F2F0EB;
  --c-ink: #1A1A1A;
  --c-paper: #FFFFFF;

  /* Section washes. Desaturated, chiller. */
  --c-wash-service:     #E8DED5;
  --c-wash-collaborate: #D7DEDD;
  --c-wash-lab:         #DCDDCE;

  /* Tag inks. Deeper versions in the same family. */
  --c-ink-service:      #6E4437;
  --c-ink-collaborate:  #3E5864;
  --c-ink-lab:          #4E5A2C;

  /* Muted ink, default for cream pages */
  --c-ink-muted: rgba(55, 48, 40, 0.74);
  --c-ink-faint: rgba(55, 48, 40, 0.34);
  --c-rule: rgba(55, 48, 40, 0.16);

  --c-bg: var(--c-cream);
  --c-fg: var(--c-ink);

  /* Typography. Three fonts. */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-hero-home: clamp(54px, 9vw, 128px);
  --fs-hero: clamp(38px, 5.2vw, 68px);
  --fs-section: clamp(26px, 2.9vw, 42px);
  --fs-sub: clamp(19px, 1.5vw, 24px);
  --fs-body: clamp(17px, 1.05vw, 19px);
  --fs-small: 14.5px;
  --fs-caption: 13px;
  --fs-nav: 13.5px;
  --fs-eyebrow: 12.5px;
  --fs-mono: 13px;

  --lh-hero: 1.02;
  --lh-section: 1.08;
  --lh-sub: 1.3;
  --lh-body: 1.5;
  --lh-caption: 1.4;

  --tracking-hero: -0.028em;
  --tracking-tight: -0.015em;
  --tracking-eyebrow: 0.02em; /* tighter since mono already feels spaced */
  --tracking-mono: 0;

  /* Layout */
  --max-content: 1320px;
  --gutter: clamp(20px, 5.5vw, 96px);
  --section-rhythm: clamp(56px, 8.5vw, 104px);
  --outro-rhythm: clamp(88px, 14vw, 180px);
  --measure: 62ch;

  /* Chrome */
  --nav-h: 72px;
  --nav-h-scrolled: 52px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 150ms;
  --t-nav: 200ms;
  --t-reveal: 300ms;
}

@property --page-bg {
  syntax: '<color>';
  inherits: true;
  initial-value: #F2F0EB;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:where(img, video, svg) { display: block; max-width: 100%; height: auto; }

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--c-fg);
}
:where(p) { margin: 0; }
:where(a) {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--t-fast) var(--ease);
}
:where(a:hover) { opacity: 0.62; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(button) { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }

::selection { background: var(--c-ink); color: var(--c-bg); }
em, i { font-style: italic; }

[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* --------------------------------------------------------------------------
   3. Page surfaces and per-page muted text
   -------------------------------------------------------------------------- */
body.page-service     { --c-bg: var(--c-wash-service);
                        --c-ink-muted: rgba(110, 68, 55, 0.80);
                        --c-rule: rgba(110, 68, 55, 0.22); }

body.page-collaborate { --c-bg: var(--c-wash-collaborate);
                        --c-ink-muted: rgba(55, 78, 86, 0.80);
                        --c-rule: rgba(55, 78, 86, 0.22); }

body.page-lab         { --c-bg: var(--c-wash-lab);
                        --c-ink-muted: rgba(78, 88, 50, 0.82);
                        --c-rule: rgba(78, 88, 50, 0.24); }

/* Note page picks up the wash of its tag */
body.page-note.note--service     { --c-bg: var(--c-wash-service);
                                   --c-ink-muted: rgba(110, 68, 55, 0.80);
                                   --c-rule: rgba(110, 68, 55, 0.22);
                                   --tag-color: var(--c-ink-service); }
body.page-note.note--collaborate { --c-bg: var(--c-wash-collaborate);
                                   --c-ink-muted: rgba(55, 78, 86, 0.80);
                                   --c-rule: rgba(55, 78, 86, 0.22);
                                   --tag-color: var(--c-ink-collaborate); }
body.page-note.note--lab         { --c-bg: var(--c-wash-lab);
                                   --c-ink-muted: rgba(78, 88, 50, 0.82);
                                   --c-rule: rgba(78, 88, 50, 0.24);
                                   --tag-color: var(--c-ink-lab); }

@keyframes bg-drift {
  0%   { --page-bg: #F2F0EB; }
  25%  { --page-bg: #E8DED5; }
  50%  { --page-bg: #D7DEDD; }
  75%  { --page-bg: #DCDDCE; }
  100% { --page-bg: #F2F0EB; }
}
body.page-home {
  --c-bg: var(--page-bg);
  animation: bg-drift 180s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-rhythm); }
.section + .section { padding-top: 0; }
.section-tight { padding-block: calc(var(--section-rhythm) * 0.6); }

.ed-row { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 32px); }
@media (min-width: 840px) { .ed-row { grid-template-columns: 3fr 8fr; gap: clamp(32px, 6vw, 96px); } }

.measure      { max-width: var(--measure); }
.measure-wide { max-width: 68ch; }

/* Section outro: distinct white band with generous breathing room. */
.section-outro {
  background: var(--c-paper);
  padding-block: var(--outro-rhythm);
  --c-rule: rgba(26, 26, 26, 0.12);
  --c-ink-muted: rgba(46, 40, 34, 0.68);
  color: var(--c-ink);
}
.section + .section-outro { padding-top: var(--outro-rhythm); }

/* --------------------------------------------------------------------------
   5. Type utilities
   -------------------------------------------------------------------------- */
.t-hero { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--tracking-hero); }
.t-section { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: var(--tracking-tight); }
.t-sub { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-sub); line-height: var(--lh-sub); }
.t-body   { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small  { font-size: var(--fs-small); line-height: 1.5; }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-ink-muted); }

/* Eyebrow is the spec-sheet voice. Mono, modest tracking. */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  color: var(--c-ink-muted);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
}
.t-lede { font-family: var(--font-sans); font-size: clamp(18px, 1.3vw, 21px); line-height: 1.5; font-weight: 400; }

.prose > * + * { margin-top: 1em; }
.prose em, .prose i { font-style: italic; }

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  transition: height var(--t-nav) var(--ease), background var(--t-nav) var(--ease);
}
.site-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-nav__mark {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.02em;
  border-bottom: 0;
  transition: font-size var(--t-nav) var(--ease), color var(--t-nav) var(--ease);
}

.site-nav__links {
  display: none;
  gap: clamp(14px, 1.8vw, 26px);
  align-items: center;
}
.site-nav__links > a,
.site-nav__item > .site-nav__link {
  font-size: var(--fs-nav);
  font-weight: 400;
  border-bottom: 0;
  color: var(--c-fg);
  padding: 10px 0;
}
.site-nav__links a:hover,
.site-nav__item > .site-nav__link:hover { opacity: 0.62; }
.site-nav__links a[aria-current="page"],
.site-nav__item > .site-nav__link[aria-current="page"] { border-bottom: 1px solid currentColor; }

.site-nav__item--parent:has(.site-nav__drop-item[aria-current="page"]) > .site-nav__link {
  border-bottom: 1px solid currentColor;
}

@media (min-width: 900px) { .site-nav__links { display: flex; } }

.site-nav.is-scrolled { height: var(--nav-h-scrolled); }
.site-nav.is-scrolled .site-nav__mark { font-size: 17px; }
.site-nav.is-scrolled .site-nav__links > a,
.site-nav.is-scrolled .site-nav__item > .site-nav__link { font-size: 13px; }

/* Dropdown */
.site-nav__item { position: relative; display: inline-block; }
.site-nav__item--parent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 14px;
}
.site-nav__drop {
  position: absolute;
  top: calc(100% + 4px);
  left: -4px;
  min-width: 320px;
  padding: 0;
  background: var(--c-paper);
  border: 1px solid rgba(26,26,26,0.14);
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  z-index: 40;
}
.site-nav__item--parent:hover .site-nav__drop,
.site-nav__item--parent:focus-within .site-nav__drop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.site-nav__drop-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(26,26,26,0.08);
  text-decoration: none;
  color: var(--c-ink);
  background: transparent;
  transition: background var(--t-fast) var(--ease);
  border-left: 3px solid transparent;
}
.site-nav__drop-item:last-child { border-bottom: 0; }
.site-nav__drop-item:hover { background: var(--swatch, var(--c-cream)); opacity: 1; }
.site-nav__drop-item[aria-current="page"] {
  background: var(--swatch);
  border-left-color: var(--c-ink);
}
.site-nav__drop-item[aria-current="page"] .site-nav__drop-label { font-weight: 500; }
.site-nav__drop-sep {
  border: 0;
  border-top: 1px solid rgba(26,26,26,0.12);
  margin: 0;
}
.site-nav__drop-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.1;
}
.site-nav__drop-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(26,26,26,0.55);
  line-height: 1.35;
}

/* Menu button */
.site-nav__toggle {
  --tilt: 0deg;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
  border: 0;
  color: var(--c-fg);
  line-height: 0;
}
.site-nav__toggle-bars {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 26px;
  height: 16px;
  transform: rotate(var(--tilt));
  transition: transform 120ms linear;
}
.site-nav__toggle-bars > span {
  display: block;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 200ms var(--ease);
}
.site-nav__toggle-bars > span:nth-child(1),
.site-nav__toggle-bars > span:nth-child(3) { width: 20px; height: 2px; }
.site-nav__toggle-bars > span:nth-child(2) { width: 30px; height: 3px; }

@keyframes barwave {
  0%   { transform: translateY(0) scaleX(1); }
  25%  { transform: translateY(-2px) scaleX(1); }
  50%  { transform: translateY(0) scaleX(0.82); }
  75%  { transform: translateY(2px) scaleX(1); }
  100% { transform: translateY(0) scaleX(1); }
}
.site-nav__toggle:hover .site-nav__toggle-bars > span:nth-child(1) { animation: barwave 900ms var(--ease) infinite; }
.site-nav__toggle:hover .site-nav__toggle-bars > span:nth-child(2) { animation: barwave 900ms var(--ease) 120ms infinite; }
.site-nav__toggle:hover .site-nav__toggle-bars > span:nth-child(3) { animation: barwave 900ms var(--ease) 240ms infinite; }

/* --------------------------------------------------------------------------
   7. Menu overlay
   -------------------------------------------------------------------------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  padding: 0 0 clamp(24px, 4vw, 48px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity 260ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 220ms var(--ease), transform 280ms var(--ease), visibility 0s linear 0s;
}

.menu-overlay__header {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--c-rule);
  flex-shrink: 0;
}
.menu-overlay__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
}
.menu-overlay__close {
  width: 26px;
  height: 16px;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-fg);
  cursor: pointer;
}
.menu-overlay__close::before,
.menu-overlay__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
}
.menu-overlay__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.menu-overlay__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.menu-overlay__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(12px, 2vw, 20px) var(--gutter) 0;
  flex: 1;
}

.menu-overlay__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--c-rule);
  transition: background-color var(--t-fast) var(--ease), opacity 320ms var(--ease), transform 320ms var(--ease);
  opacity: 0;
  transform: translateY(8px);
}
.menu-overlay__row:hover {
  background-color: color-mix(in srgb, var(--c-ink) 4%, transparent);
}
.menu-overlay__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 0;
}
.menu-overlay__num,
.menu-overlay__main,
.menu-overlay__sub { position: relative; z-index: 1; pointer-events: none; }
.menu-overlay__main a,
.menu-overlay__main .menu-overlay__subnav a { pointer-events: auto; }
.menu-overlay__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
}
.menu-overlay__main { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 14px); min-width: 0; }
.menu-overlay__link {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.02;
  letter-spacing: var(--tracking-hero);
  border-bottom: 0;
  color: var(--c-fg);
  text-decoration: none;
  align-self: flex-start;
}
.menu-overlay__sub {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-ink-muted);
  max-width: 36ch;
  line-height: 1.45;
}
@media (min-width: 680px) {
  .menu-overlay__row { grid-template-columns: 56px 1fr 1fr; }
  .menu-overlay__sub { display: block; text-align: left; }
}
@media (min-width: 1000px) {
  .menu-overlay__row { grid-template-columns: 80px 1.4fr 1fr; }
}

.menu-overlay__subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 8px;
}
.menu-overlay__sublink {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--c-fg);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  line-height: 1.2;
}
.menu-overlay__sublink:hover {
  border-bottom-color: var(--sublink-color, var(--c-ink));
}
.menu-overlay__sublink[aria-current="page"] {
  border-bottom-color: var(--sublink-color, var(--c-ink));
  font-weight: 500;
}
.menu-overlay__sublink--special {
  margin-left: clamp(6px, 1vw, 12px);
  padding-left: clamp(10px, 1.2vw, 16px);
  border-left: 1px solid var(--c-rule);
}

.menu-overlay.is-open .menu-overlay__row { opacity: 1; transform: translateY(0); }
.menu-overlay.is-open .menu-overlay__row:nth-child(1) { transition-delay: 80ms; }
.menu-overlay.is-open .menu-overlay__row:nth-child(2) { transition-delay: 140ms; }
.menu-overlay.is-open .menu-overlay__row:nth-child(3) { transition-delay: 190ms; }
.menu-overlay.is-open .menu-overlay__row:nth-child(4) { transition-delay: 230ms; }
.menu-overlay.is-open .menu-overlay__row:nth-child(5) { transition-delay: 260ms; }

.menu-overlay__foot {
  margin-top: clamp(24px, 4vw, 48px);
  padding: clamp(20px, 3vw, 28px) var(--gutter) 0;
  border-top: 1px solid var(--c-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  align-items: baseline;
  justify-content: space-between;
}
.menu-overlay__foot-group { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.menu-overlay__foot a, .menu-overlay__foot span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-fg);
  border-bottom: 0;
}
.menu-overlay__foot a:hover { opacity: 0.6; }
.menu-overlay__foot-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
}

body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Homepage ticker and hero
   -------------------------------------------------------------------------- */
.hero-ticker {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(10px, 1.6vw, 20px));
  padding-bottom: clamp(6px, 1vw, 12px);
}
.hero-ticker__track {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  width: max-content;
  animation: ticker-scroll 90s linear infinite;
}
.hero-ticker figure {
  flex: 0 0 auto;
  width: clamp(160px, 18vw, 240px);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
}
.hero-ticker img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hero-quiet {
  padding-top: clamp(28px, 5vw, 72px);
  padding-bottom: clamp(24px, 4vw, 56px);
}
/* First section after hero-quiet is intentionally flush */
.hero-quiet + .section { padding-top: clamp(40px, 6vw, 72px); }
.hero-quiet__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
  margin-bottom: clamp(18px, 2.6vw, 32px);
}
.hero-quiet__hook {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  color: var(--c-ink-muted);
  margin-bottom: clamp(14px, 2vw, 20px);
}
.hero-quiet__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-hero-home);
  line-height: 0.98;
  letter-spacing: var(--tracking-hero);
  max-width: 18ch;
}
.hero-quiet__headline .roman { font-style: normal; }
.hero-quiet__sub {
  margin-top: clamp(36px, 5vw, 64px);
  max-width: 56ch;
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.45;
  color: var(--c-fg);
}

.process-video {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-ink);
  position: relative;
  border: 1px solid var(--c-rule);
}
.process-video video { width: 100%; height: 100%; object-fit: cover; }
.process-video__cap {
  margin-top: 12px;
  font-size: var(--fs-caption);
  color: var(--c-ink-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. Figures
   -------------------------------------------------------------------------- */
figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
figure img { width: 100%; height: auto; display: block; }
figcaption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-ink-muted);
  max-width: 56ch;
}
.fig-tall   { aspect-ratio: 4 / 5; }
.fig-wide   { aspect-ratio: 3 / 2; }
.fig-square { aspect-ratio: 1 / 1; }
.fig-tall img, .fig-wide img, .fig-square img { width: 100%; height: 100%; object-fit: cover; }

.fig-placeholder {
  background: color-mix(in srgb, var(--c-ink) 6%, var(--c-bg));
  color: var(--c-ink-muted);
  display: grid;
  place-items: center;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  font-weight: 500;
  border: 1px solid var(--c-rule);
  aspect-ratio: 4 / 5;
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   10. Homepage cards / on-surface / teaser
   -------------------------------------------------------------------------- */
.ways { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 840px) { .ways { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 56px); } }
.way { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--c-rule); }
.way__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.way__body  { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 42ch; }

.on-surface { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (min-width: 840px) { .on-surface { grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 96px); } }
.on-surface figure img { aspect-ratio: 4 / 5; object-fit: cover; }

.teaser { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); align-items: end; }
@media (min-width: 840px) { .teaser { grid-template-columns: 7fr 5fr; } }
.teaser__copy { max-width: 54ch; }
.teaser__cta { margin-top: 18px; display: inline-block; font-weight: 500; border-bottom: 1px solid currentColor; }
.teaser figure img { aspect-ratio: 3 / 4; object-fit: cover; }

.contact-strip {
  border-top: 1px solid var(--c-rule);
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 28px);
  align-items: baseline;
  font-size: clamp(17px, 1.3vw, 20px);
}
.contact-strip span, .contact-strip a { line-height: 1.4; }

/* --------------------------------------------------------------------------
   11. Section heads
   -------------------------------------------------------------------------- */
.section-head {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(10px, 2vw, 28px);
  margin-bottom: clamp(20px, 3vw, 40px);
}
@media (min-width: 840px) { .section-head { grid-template-columns: 3fr 8fr; } }
.section-head__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
  padding-top: 8px;
}

/* --------------------------------------------------------------------------
   12. Service/Finishing components
   -------------------------------------------------------------------------- */
.feature-pair { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 840px) { .feature-pair { grid-template-columns: 1fr 1fr; } }
.feature { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.feature figure img { aspect-ratio: 4 / 5; object-fit: cover; }
.feature__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; }
.feature__body { max-width: 46ch; }

.price-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--c-rule); }
.price-list li {
  display: flex; justify-content: space-between; gap: 24px;
  align-items: baseline; padding: 13px 0;
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-body);
}
.price-list li .label { max-width: 48ch; }
.price-list li .price {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-size: 14.5px;
  color: var(--c-fg);
  font-weight: 500;
}
.price-list__note { margin-top: 16px; font-size: var(--fs-caption); color: var(--c-ink-muted); max-width: 56ch; }

.trust-fall { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 840px) { .trust-fall { grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 80px); } }
.trust-fall__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1.1; letter-spacing: var(--tracking-tight); }
.trust-fall figure img { aspect-ratio: 4 / 5; object-fit: cover; }

.steps { counter-reset: step; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--c-rule); }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 44px 1fr;
  gap: 18px; padding: 16px 0;
  border-bottom: 1px solid var(--c-rule);
  align-items: baseline;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
}
.steps li p { max-width: 60ch; }

.cta-block {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 28px);
  padding-top: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--c-rule);
}
@media (min-width: 840px) { .cta-block { grid-template-columns: 3fr 8fr; } }
.cta-block__body { max-width: 56ch; }

.section-outro .cta-block { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------------------
   13. Made page
   -------------------------------------------------------------------------- */
.work-index { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 6vw, 96px); }
@media (min-width: 840px) { .work-index { grid-template-columns: repeat(12, 1fr); row-gap: clamp(56px, 8vw, 128px); } }
.work-item { display: flex; flex-direction: column; gap: clamp(10px, 1.3vw, 16px); grid-column: 1 / -1; }
.work-item img { width: 100%; height: auto; object-fit: cover; }
.work-item__caption { font-size: var(--fs-caption); color: var(--c-ink-muted); max-width: 52ch; }
@media (min-width: 840px) {
  .work-item--a { grid-column: 2 / span 7; }
  .work-item--b { grid-column: 7 / span 5; }
  .work-item--c { grid-column: 1 / span 6; }
  .work-item--d { grid-column: 8 / span 4; }
  .work-item--e { grid-column: 3 / span 8; }
}
.work-item--a img { aspect-ratio: 4 / 3; }
.work-item--b img { aspect-ratio: 4 / 5; }
.work-item--c img { aspect-ratio: 3 / 2; }
.work-item--d img { aspect-ratio: 4 / 5; }
.work-item--e img { aspect-ratio: 16 / 10; }
.work-item__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }
.work-item:hover img { filter: brightness(0.95); transition: filter var(--t-fast) var(--ease); }

/* --------------------------------------------------------------------------
   14. Journal. Cream base, colored meta per tag, row fills on hover.
   -------------------------------------------------------------------------- */
.journal-list { display: flex; flex-direction: column; gap: 0; }
.journal-entry {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: transparent;
  transition: background-color 260ms var(--ease);
}
.journal-entry + .journal-entry { border-top: 1px solid var(--c-rule); }
.journal-entry__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 0;
}
.journal-entry:hover { background: var(--wash, transparent); }

.journal-entry--service {
  --wash: var(--c-wash-service);
  --tag-color: var(--c-ink-service);
  --c-rule: rgba(110, 68, 55, 0.22);
}
.journal-entry--collab {
  --wash: var(--c-wash-collaborate);
  --tag-color: var(--c-ink-collaborate);
  --c-rule: rgba(55, 78, 86, 0.22);
}
.journal-entry--lab {
  --wash: var(--c-wash-lab);
  --tag-color: var(--c-ink-lab);
  --c-rule: rgba(78, 88, 50, 0.24);
}

.journal-entry__inner {
  position: relative;
  z-index: 1;
  pointer-events: none;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 32px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
.journal-entry__inner a { pointer-events: auto; }
@media (min-width: 720px) {
  .journal-entry__inner {
    grid-template-columns: 150px 120px 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
  }
}
.journal-entry__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--tag-color, var(--c-ink-muted));
  font-weight: 500;
  padding-top: 4px;
}
.journal-entry__tagline {
  font-size: 11.5px;
  color: var(--tag-color, var(--c-ink-muted));
  letter-spacing: 0.04em;
  font-weight: 500;
  font-family: var(--font-mono);
  text-transform: none;
}
.journal-entry__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
  background: color-mix(in srgb, var(--c-ink) 4%, var(--c-paper));
}
.journal-entry__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease); }
.journal-entry:hover .journal-entry__thumb img { transform: scale(1.03); }
.journal-entry__body { min-width: 0; }
.journal-entry__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.14;
  letter-spacing: var(--tracking-tight);
  max-width: 32ch;
  color: var(--c-ink);
  display: block;
}
.journal-entry__excerpt {
  margin-top: 10px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  color: var(--c-ink);
  max-width: 60ch;
}
.journal-entry__more {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-ink);
  border-bottom: 0;
  letter-spacing: var(--tracking-mono);
}
.journal-entry__more::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.journal-entry:hover .journal-entry__more::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   15. Note page. Editorial long-form reading.
   -------------------------------------------------------------------------- */
.note-masthead {
  padding-top: calc(var(--nav-h) + clamp(32px, 6vw, 80px));
  padding-bottom: clamp(32px, 5vw, 56px);
}
.note-masthead__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--tag-color, var(--c-ink-muted));
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  padding-bottom: clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--c-rule);
}
.note-masthead__title {
  margin-top: clamp(28px, 4vw, 48px);
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: var(--tracking-hero);
  max-width: 22ch;
}
.note-masthead__lede {
  margin-top: clamp(22px, 3vw, 32px);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  max-width: 54ch;
  color: var(--c-fg);
}
.note-masthead__byline {
  margin-top: clamp(28px, 4vw, 44px);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
}

/* Hero image for a note */
.note-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-ink) 4%, var(--c-paper));
}
.note-hero img { width: 100%; height: 100%; object-fit: cover; }
.note-hero__cap {
  max-width: var(--max-content);
  margin: 10px auto 0;
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
}

/* Body column */
.note-body {
  max-width: 68ch;
  margin: 0 auto;
  padding-block: clamp(28px, 4vw, 48px);
  font-size: clamp(17px, 1.1vw, 19px);
  line-height: 1.6;
}
.note-body > * + * { margin-top: 1.1em; }
.note-body p { max-width: 66ch; }
.note-body em, .note-body i { font-style: italic; }
.note-body a { border-bottom: 1px solid currentColor; }

/* Inline single image, narrower than body. */
.note-image {
  margin: clamp(36px, 5vw, 64px) auto;
  max-width: 980px;
}
.note-image figure { margin: 0; }
.note-image img { width: 100%; height: auto; }
.note-image figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
}

/* Full-bleed image */
.note-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-block: clamp(40px, 6vw, 80px);
}
.note-bleed img { width: 100%; height: auto; display: block; }
.note-bleed figcaption {
  max-width: var(--max-content);
  margin: 10px auto 0;
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
}

/* 2-up image group. Alternating heights for a touch of movement. */
.note-duo {
  max-width: 1180px;
  margin: clamp(40px, 5vw, 72px) auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 20px);
}
@media (min-width: 760px) {
  .note-duo { grid-template-columns: 5fr 6fr; gap: clamp(16px, 2vw, 28px); align-items: end; }
  .note-duo > figure:first-child { margin-top: clamp(24px, 4vw, 56px); }
}
.note-duo figure { margin: 0; }
.note-duo figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.note-duo figure:nth-child(2) img { aspect-ratio: 1 / 1; }
.note-duo figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-ink-muted);
}

/* 3-up image group. Asymmetric. */
.note-trio {
  max-width: 1180px;
  margin: clamp(40px, 5vw, 72px) auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 760px) {
  .note-trio { grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.6vw, 20px); }
  .note-trio > figure:nth-child(1) { grid-column: 1 / span 7; }
  .note-trio > figure:nth-child(2) { grid-column: 8 / span 5; margin-top: clamp(32px, 5vw, 72px); }
  .note-trio > figure:nth-child(3) { grid-column: 3 / span 8; margin-top: clamp(16px, 2.4vw, 32px); }
}
.note-trio figure { margin: 0; }
.note-trio figure img { width: 100%; height: auto; }
.note-trio > figure:nth-child(1) img { aspect-ratio: 4 / 3; object-fit: cover; }
.note-trio > figure:nth-child(2) img { aspect-ratio: 4 / 5; object-fit: cover; }
.note-trio > figure:nth-child(3) img { aspect-ratio: 16 / 9; object-fit: cover; }
.note-trio figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-ink-muted);
}

/* Pull quote */
.note-pullquote {
  max-width: 40ch;
  margin: clamp(40px, 6vw, 80px) auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: var(--tracking-hero);
  text-align: center;
  color: var(--c-fg);
}

/* Note footer navigation */
.note-end {
  padding-block: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--c-rule);
  margin-top: clamp(32px, 4vw, 48px);
}
.note-end__back {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: var(--tracking-mono);
}
.note-end__back::before { content: "←"; }
.note-end__next {
  margin-top: clamp(24px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--c-rule);
}
@media (min-width: 760px) { .note-end__next { grid-template-columns: 1fr 1fr; } }
.note-end__nextcard {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--c-ink);
  border-bottom: 0;
}
.note-end__nextcard-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
}
.note-end__nextcard-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   16. Shop
   -------------------------------------------------------------------------- */
.products { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 700px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .products { grid-template-columns: repeat(3, 1fr); } }

.product { display: flex; flex-direction: column; gap: 14px; }
.product figure { aspect-ratio: 4 / 5; margin: 0; }
.product__meta { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-top: 4px; }
.product__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; }
.product__price { font-family: var(--font-mono); font-size: 14.5px; font-weight: 500; letter-spacing: var(--tracking-mono); }
.product__body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 42ch; color: var(--c-fg); }

/* --------------------------------------------------------------------------
   17. Studio contact form
   -------------------------------------------------------------------------- */
.contact-wrap { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 96px); }
@media (min-width: 840px) { .contact-wrap { grid-template-columns: 5fr 6fr; } }

.contact-details { font-size: var(--fs-body); line-height: var(--lh-body); }
.contact-details dl { display: flex; flex-direction: column; gap: 14px; }
.contact-details dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
}
.contact-details dd { margin: 2px 0 0; max-width: 40ch; }

.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
}
.field input, .field textarea {
  font: inherit;
  color: var(--c-fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  padding: 10px 0;
  font-size: var(--fs-body);
  border-radius: 0;
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--c-ink); }
.form__submit {
  margin-top: 8px;
  align-self: flex-start;
  border: 1px solid var(--c-ink);
  padding: 12px 20px;
  font-size: var(--fs-small);
  font-weight: 500;
  background: transparent;
  color: var(--c-ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.form__submit:hover { background: var(--c-ink); color: var(--c-paper); }

/* --------------------------------------------------------------------------
   18. WM mark and footer
   -------------------------------------------------------------------------- */
.wm-mark {
  display: grid; place-items: center;
  padding: clamp(56px, 8vw, 112px) 0 clamp(28px, 4vw, 48px);
  font-family: var(--font-serif);
  font-weight: 500; font-style: italic;
  font-size: 30px; letter-spacing: 0.06em;
  color: var(--c-ink-muted);
}

.site-footer {
  border-top: 1px solid var(--c-rule);
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
}
@media (min-width: 1040px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.site-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 40ch; }
.site-footer__mark {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1;
  border-bottom: 0;
  color: var(--c-fg);
}
.site-footer__tag {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-ink-muted);
  max-width: 32ch;
}
.site-footer__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
  margin-top: 4px;
}

.site-footer__col { display: flex; flex-direction: column; gap: 14px; }
.site-footer__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-rule);
}
.site-footer__list { display: flex; flex-direction: column; gap: 10px; }
.site-footer__list a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-fg);
  border-bottom: 0;
  letter-spacing: var(--tracking-mono);
  line-height: 1.4;
}
.site-footer__list a:hover { opacity: 0.6; }

.site-footer__bottom {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--c-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
}
.site-footer__bottom a { color: inherit; border-bottom: 0; }
.site-footer__bottom a:hover { opacity: 0.6; }

/* --------------------------------------------------------------------------
   19. Motion
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  body.page-home { animation: none !important; }
  .hero-ticker__track { animation: none !important; }
}

/* --------------------------------------------------------------------------
   20. Focus
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   21. Masthead kicker with animated wavy rule. 10s drift.
   -------------------------------------------------------------------------- */
.masthead-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(20px, 3.5vw, 48px));
  padding-bottom: clamp(12px, 2vw, 20px);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
}
.masthead-kicker .rule {
  flex: 1 1 80px;
  min-width: 80px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0,5 Q8,0.5 16,5 T32,5' fill='none' stroke='%23000' stroke-opacity='0.28' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: 32px 10px;
  animation: wave-drift 10s linear infinite;
}
@keyframes wave-drift {
  from { background-position-x: 0; }
  to   { background-position-x: 32px; }
}

/* --------------------------------------------------------------------------
   22. Masthead variants
   -------------------------------------------------------------------------- */

.mast-hook {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  color: var(--c-ink-muted);
  margin-bottom: clamp(12px, 1.6vw, 18px);
  max-width: 36ch;
}

.mast-offset {
  padding-top: clamp(24px, 3.5vw, 40px);
  padding-bottom: clamp(48px, 6vw, 80px);
  position: relative;
}
.mast-offset__band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(260px, 40vw, 480px);
  overflow: hidden;
  position: relative;
}
.mast-offset__band img { width: 100%; height: 100%; object-fit: cover; }
.mast-offset__band::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(242, 240, 235, 0) 0%, var(--c-bg) 92%);
  pointer-events: none;
}
.mast-offset__head {
  position: relative;
  margin-top: clamp(-44px, -4.5vw, -28px);
  max-width: var(--max-content);
  padding: 0 var(--gutter);
  z-index: 2;
}
.mast-offset__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: var(--tracking-hero);
  max-width: 18ch;
  color: var(--c-fg);
}
.mast-offset__headline em { font-style: italic; }
.mast-offset__sub {
  margin-top: clamp(18px, 2vw, 28px);
  max-width: 54ch;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  padding-right: clamp(0px, 4vw, 120px);
  color: var(--c-fg);
}

.mast-typemass { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(32px, 4vw, 56px); }
.mast-typemass__hook {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  color: var(--c-ink-muted);
  margin-bottom: clamp(10px, 1.5vw, 14px);
}
.mast-typemass__word {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(120px, 26vw, 320px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  padding: clamp(8px, 1.5vw, 20px) 0 clamp(16px, 2.4vw, 32px);
}
.mast-typemass__meta {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 32px);
  padding-top: clamp(18px, 2.5vw, 32px);
  border-top: 1px solid var(--c-rule);
}
@media (min-width: 840px) { .mast-typemass__meta { grid-template-columns: 4fr 7fr; } }
.mast-typemass__lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; max-width: 26ch; }
.mast-typemass__body { max-width: 56ch; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; }

.thumb-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(6px, 0.8vw, 12px); margin-top: clamp(28px, 4vw, 48px); }
.thumb-strip figure { margin: 0; aspect-ratio: 4 / 5; }
.thumb-strip img { width: 100%; height: 100%; object-fit: cover; }

.mast-immediate {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
}
@media (min-width: 840px) { .mast-immediate { grid-template-columns: 4fr 8fr; align-items: end; } }
.mast-immediate__title { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(44px, 6vw, 92px); line-height: 0.95; letter-spacing: var(--tracking-hero); }
.mast-immediate__body { max-width: 48ch; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; }

.rollup-hero {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.rollup-hero__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: var(--tracking-hero);
  max-width: 20ch;
}
.rollup-hero__headline em { font-style: italic; }
.rollup-hero__lede {
  margin-top: clamp(22px, 3vw, 36px);
  max-width: 60ch;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   23. Work Together: door grid
   -------------------------------------------------------------------------- */
.doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  padding-top: clamp(24px, 4vw, 48px);
}
@media (min-width: 860px) { .doors { grid-template-columns: repeat(3, 1fr); } }

.door {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--c-fg);
  border-bottom: 0;
  background: var(--c-paper);
  border: 1px solid rgba(26,26,26,0.10);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-nav) var(--ease);
  opacity: 1;
}
.door:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(26,26,26,0.08);
  background: var(--door-hover, var(--c-cream));
  opacity: 1;
}
.door figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.door figure img { width: 100%; height: 100%; object-fit: cover; }
.door__body { padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 14px); }
.door__eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); color: rgba(26,26,26,0.55); font-weight: 500; }
.door__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: var(--tracking-hero);
}
.door__copy { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: var(--c-ink); max-width: 40ch; }
.door__cta {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-ink);
}
.door__cta::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
.door:hover .door__cta::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   24. On Surface pullquote (homepage)
   -------------------------------------------------------------------------- */
.on-surface-pull {
  padding-block: clamp(72px, 11vw, 140px);
  text-align: left;
}
.on-surface-pull__inner {
  max-width: 32ch;
  margin: 0 auto;
}
.on-surface-pull__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
  font-weight: 500;
  margin-bottom: clamp(20px, 3vw, 32px);
  display: block;
}
.on-surface-pull__quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.04;
  letter-spacing: var(--tracking-hero);
  color: var(--c-fg);
}
.on-surface-pull__quote em { font-style: normal; }
.on-surface-pull__post {
  margin-top: clamp(28px, 4vw, 48px);
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--c-ink-muted);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   25. Trust Fall block. Paper-white card, signed typographic moment.
   -------------------------------------------------------------------------- */
.trust-fall-block {
  position: relative;
  background: var(--c-paper);
  border: 1px solid rgba(26,26,26,0.12);
  padding: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 64px);
  max-width: 920px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.5vw, 28px);
}
.trust-fall-block__label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(26,26,26,0.55);
  font-weight: 500;
}
.trust-fall-block__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: var(--tracking-hero);
  max-width: 22ch;
  color: var(--c-ink);
}
.trust-fall-block__title em { font-style: normal; }
.trust-fall-block__body {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  max-width: 52ch;
  color: var(--c-ink);
}
.trust-fall-block__cta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.trust-fall-block__cta::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.trust-fall-block__cta:hover::after { transform: translateX(4px); }
.trust-fall-block__mark {
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  right: clamp(18px, 2.5vw, 28px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(26,26,26,0.42);
  text-transform: lowercase;
}
.trust-fall-block__corner {
  position: absolute;
  bottom: clamp(14px, 2vw, 22px);
  left: clamp(18px, 2.5vw, 28px);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 1.1vw, 16px);
  color: rgba(26,26,26,0.42);
}

/* --------------------------------------------------------------------------
   26. Homepage Work Together, image-led three-up with staggered starts.
   -------------------------------------------------------------------------- */
.work-together-mini {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 860px) {
  .work-together-mini {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }
}

.wt-card {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 16px);
  color: var(--c-fg);
  text-decoration: none;
  border-bottom: 0;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.wt-card:hover { transform: translateY(-2px); opacity: 1; }
.wt-card figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.wt-card img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-fast) var(--ease); }
.wt-card:hover img { filter: brightness(0.96); }
.wt-card__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
  font-weight: 500;
  margin-top: 6px;
}
.wt-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.05;
  letter-spacing: var(--tracking-hero);
}
.wt-card__body {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.45;
  max-width: 34ch;
}
.wt-card__cta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  align-self: flex-start;
}
.wt-card__cta::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.wt-card:hover .wt-card__cta::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   27. Signoff image. Full-bleed still, quiet goodbye.
   -------------------------------------------------------------------------- */
.signoff {
  padding-block: clamp(40px, 6vw, 80px) 0;
}
.signoff-image {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(320px, 52vh, 580px);
  overflow: hidden;
  position: relative;
}
.signoff-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.signoff-image__cap {
  max-width: var(--max-content);
  margin: 12px auto clamp(32px, 5vw, 64px);
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
}

/* Inline carousel used on interior pages. Same drift as hero-ticker. */
.hero-ticker--inline {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 56px);
}

/* --------------------------------------------------------------------------
   28. Homepage outro. On Surface whimsy + contact, white band.
   -------------------------------------------------------------------------- */
.homepage-outro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 840px) {
  .homepage-outro__grid { grid-template-columns: 7fr 5fr; gap: clamp(48px, 7vw, 96px); }
}
.on-surface-closer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 48ch;
}
.on-surface-closer__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
  font-weight: 500;
}
.on-surface-closer__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.18;
  letter-spacing: var(--tracking-tight);
  max-width: 28ch;
  color: var(--c-ink);
}
.on-surface-closer__aside {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
}
.homepage-outro__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink);
  letter-spacing: var(--tracking-mono);
}
.homepage-outro__contact-label {
  color: var(--c-ink-muted);
  font-weight: 500;
}
.homepage-outro__contact a { color: var(--c-ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.homepage-outro__contact a:hover { opacity: 0.6; }

/* --------------------------------------------------------------------------
   29. Trust Fall funky. Staircase of type + sidelined image + steps.
   -------------------------------------------------------------------------- */
/* Trust Fall: paper-white band with wiggly top and bottom borders, so the
   staircase title and the 01/02/03 steps below read as one sealed unit. */
.trust-fall-funky {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-block: clamp(48px, 8vw, 104px);
  background: var(--c-paper);
  padding-block: clamp(64px, 10vw, 120px);
  color: var(--c-ink);
  --c-rule: rgba(26, 26, 26, 0.14);
  --c-ink-muted: rgba(46, 40, 34, 0.70);
}
.trust-fall-funky::before,
.trust-fall-funky::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0,5 Q8,0.5 16,5 T32,5' fill='none' stroke='%23000' stroke-opacity='0.35' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: 32px 10px;
  animation: wave-drift 10s linear infinite;
  pointer-events: none;
}
.trust-fall-funky::before { top: 0; }
.trust-fall-funky::after { bottom: 0; animation-direction: reverse; }

.trust-fall-funky__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.trust-fall-drop {
  display: flex;
  flex-direction: column;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(36px, 6vw, 96px);
  line-height: 1.0;
  letter-spacing: var(--tracking-hero);
  color: var(--c-fg);
  margin-bottom: clamp(36px, 5vw, 72px);
}
.trust-fall-drop__line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 580ms var(--ease);
}
.trust-fall-drop__line:nth-child(1) { padding-left: 0; }
.trust-fall-drop__line:nth-child(2) { padding-left: clamp(28px, 6vw, 100px); }
.trust-fall-drop__line:nth-child(3) { padding-left: clamp(60px, 12vw, 210px); }
.trust-fall-drop__line:nth-child(4) { padding-left: clamp(100px, 18vw, 310px); }
.trust-fall-drop__line:nth-child(5) { padding-left: clamp(140px, 24vw, 420px); }

.reveal.is-in .trust-fall-drop__line { opacity: 1; transform: none; }
.reveal.is-in .trust-fall-drop__line:nth-child(1) { transition-delay: 0ms; }
.reveal.is-in .trust-fall-drop__line:nth-child(2) { transition-delay: 90ms; }
.reveal.is-in .trust-fall-drop__line:nth-child(3) { transition-delay: 180ms; }
.reveal.is-in .trust-fall-drop__line:nth-child(4) { transition-delay: 280ms; }
.reveal.is-in .trust-fall-drop__line:nth-child(5) { transition-delay: 400ms; }

.trust-fall-meat {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 860px) {
  .trust-fall-meat { grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px); }
}
.trust-fall-img { margin: 0; }
.trust-fall-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.trust-fall-img figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
}
.trust-fall-prose { max-width: 60ch; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55; }
.trust-fall-prose > * + * { margin-top: 1em; }

.trust-fall-steps {
  margin-top: clamp(36px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.5vw, 24px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--c-rule);
}
@media (min-width: 720px) {
  .trust-fall-steps { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
}
.trust-fall-steps li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trust-fall-steps__n {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink-muted);
  font-weight: 500;
}
.trust-fall-steps__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  color: var(--c-fg);
}

/* --------------------------------------------------------------------------
   30. Trust Fall teaser. Paper-white tile used on Finishing + Work Together.
   -------------------------------------------------------------------------- */
.trust-fall-teaser {
  position: relative;
  background: var(--c-paper);
  padding: clamp(36px, 5.5vw, 64px) clamp(28px, 4vw, 48px);
  max-width: 780px;
  margin-inline: auto;
  border: 1px solid rgba(26,26,26,0.12);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 20px);
  text-align: center;
  align-items: center;
  color: var(--c-ink);
}
.trust-fall-teaser::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0,5 Q8,0.5 16,5 T32,5' fill='none' stroke='%23000' stroke-opacity='0.30' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: 32px 10px;
  animation: wave-drift 10s linear infinite;
  pointer-events: none;
}
.trust-fall-teaser__label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: var(--tracking-mono);
  color: rgba(26,26,26,0.55);
  font-weight: 500;
}
.trust-fall-teaser__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: var(--tracking-hero);
  max-width: 22ch;
}
.trust-fall-teaser__title em { font-style: italic; }
.trust-fall-teaser__body {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  max-width: 54ch;
  color: var(--c-ink);
}
.trust-fall-teaser__cta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust-fall-teaser__cta::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.trust-fall-teaser__cta:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   31. Product hover swap (Shop). Two images, fade on hover.
   -------------------------------------------------------------------------- */
.product__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  background: color-mix(in srgb, var(--c-ink) 4%, var(--c-bg));
}
.product__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 600ms var(--ease), transform 800ms var(--ease);
}
.product__img--hover { opacity: 0; }
.product:hover .product__img--primary { opacity: 0; }
.product:hover .product__img--hover { opacity: 1; transform: scale(1.02); }

/* --------------------------------------------------------------------------
   32. Gallery elsewhere block. Two big italic links to Instagram + Journal.
   -------------------------------------------------------------------------- */
.gallery-elsewhere {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding-block: clamp(36px, 6vw, 72px);
  border-top: 1px solid var(--c-rule);
}
@media (min-width: 720px) {
  .gallery-elsewhere { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
}
.gallery-elsewhere__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  border-bottom: 0;
  color: var(--c-fg);
}
.gallery-elsewhere__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
  font-weight: 500;
}
.gallery-elsewhere__link {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: var(--tracking-hero);
  color: var(--c-fg);
  align-self: flex-start;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--t-fast) var(--ease);
}
.gallery-elsewhere__item:hover .gallery-elsewhere__link { opacity: 0.62; }
.gallery-elsewhere__desc {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  max-width: 40ch;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   33. Studio elsewhere link. Inline under the hero, points to external site.
   -------------------------------------------------------------------------- */
.studio-elsewhere {
  margin-top: clamp(24px, 4vw, 40px);
  padding-top: clamp(18px, 2.5vw, 28px);
  border-top: 1px solid var(--c-rule);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink-muted);
}
.studio-elsewhere a {
  color: var(--c-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.studio-elsewhere a::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.studio-elsewhere a:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   34. Footer note (pricing column aside).
   -------------------------------------------------------------------------- */
.site-footer__note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-ink-muted);
  letter-spacing: var(--tracking-mono);
  max-width: 32ch;
}