/* 체인지페인트 v3 — Site Swatch Book. See ../ART-DIRECTION.md, ../MOTION-SPEC.md */
:root {
  --paper: #f1ece5;
  --paper-2: #e7dfd4;
  --card: #fbf8f4;
  --ink: #2c2c2c;
  --ink-2: #55504a;
  --taupe: #a28d74;
  --taupe-d: #7d6a55;
  --sage: #859285;
  --red: #c2452d;
  --line: rgba(44, 44, 44, .16);
  --serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", serif;
  --sans: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1320px;
  --head-h: 68px;
  --ease-roll: cubic-bezier(.65, 0, .25, 1);
  --ease-settle: cubic-bezier(.2, .8, .2, 1);
  --t-quick: 180ms;
  --t-hover: 420ms;
  --t-roll: 900ms;
  --t-route: 560ms;
  --lift-1: 0 1px 2px rgba(44, 36, 26, .08), 0 6px 18px -8px rgba(44, 36, 26, .22);
  --lift-2: 0 2px 4px rgba(44, 36, 26, .08), 0 14px 34px -12px rgba(44, 36, 26, .34);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.75 var(--sans); word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
main:focus { outline: none; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; transition: top var(--t-quick); }
.skip:focus { top: 12px; }
.draft-flag { background: var(--ink); color: #d9d1c5; font-size: .75rem; letter-spacing: .04em; text-align: center; padding: 5px 16px; line-height: 1.5; }

/* ---------- type roles ---------- */
.kicker { font-size: .8125rem; font-weight: 500; letter-spacing: .08em; color: var(--taupe-d); margin-bottom: 14px; }
.kicker--light { color: #c8b8a4; }
.sec-title, .page-title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; line-height: 1.22;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); text-wrap: balance; position: relative; padding-bottom: 20px;
}
.page-title { font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); line-height: 1.12; }
.sec-title--light { color: var(--paper); }
.sec-note { color: var(--ink-2); max-width: 36em; margin-top: 18px; font-size: 1rem; }
[data-rule]::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 2px; background: var(--red);
  transform-origin: left; transition: transform var(--t-roll) var(--ease-roll);
}
html.js [data-rule]:not(.is-in)::after { transform: scaleX(0); }
.sec-title--light[data-rule]::after { background: var(--taupe); }
.swatch-no { font-feature-settings: "tnum"; font-size: .75rem; letter-spacing: .1em; font-weight: 600; color: var(--taupe-d); }

/* ---------- buttons & links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px;
  border: 1.5px solid var(--ink); border-radius: 2px; text-decoration: none; font-weight: 500; font-size: 1rem;
  overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: color var(--t-hover) var(--ease-settle), transform var(--t-quick);
}
.btn-fill { position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease-roll); }
.btn-arrow { display: inline-block; transition: transform var(--t-hover) var(--ease-settle); }
.btn:hover, .btn:focus-visible { color: var(--paper); }
.btn:hover .btn-fill, .btn:focus-visible .btn-fill { transform: scaleX(1); }
.btn:hover .btn-arrow, .btn:focus-visible .btn-arrow { transform: translateX(4px); }
.btn:active { transform: translateY(2px); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid .btn-fill { background: var(--red); }
.btn--solid:hover, .btn--solid:focus-visible { border-color: var(--red); }
.link-btn {
  background: none; border: 0; padding: 6px 0; cursor: pointer; font-size: .9375rem; font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
}
.link-btn:hover, .link-btn:focus-visible { animation: underline-roll var(--t-hover) var(--ease-roll); }
@keyframes underline-roll { 0% { background-size: 100% 1px; background-position: 100% 100%; } 49% { background-size: 0 1px; background-position: 100% 100%; } 50% { background-size: 0 1px; background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 40; view-transition-name: site-head; background: transparent; transition: background-color var(--t-hover), box-shadow var(--t-hover); }
.site-head.is-stuck { background: rgba(241, 236, 229, .94); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(8px); }
.head-row { display: flex; align-items: center; gap: 28px; height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-mark { display: inline-flex; gap: 2px; height: 24px; }
.brand-mark i { width: 6px; background: var(--taupe); transform-origin: bottom; transition: transform var(--t-hover) var(--ease-settle); }
.brand-mark i:nth-child(2) { background: var(--sage); }
.brand-mark i:nth-child(3) { background: var(--red); }
.brand:hover .brand-mark i, .brand:focus-visible .brand-mark i { transform: scaleY(.55); }
.brand:hover .brand-mark i:nth-child(2), .brand:focus-visible .brand-mark i:nth-child(2) { transform: scaleY(.8); transition-delay: 60ms; }
.brand:hover .brand-mark i:nth-child(3), .brand:focus-visible .brand-mark i:nth-child(3) { transform: scaleY(1); }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.3125rem; letter-spacing: -.02em; }
.brand-meta { font-size: .75rem; color: var(--ink-2); border-left: 1px solid var(--line); padding-left: 10px; }
.nav { display: flex; gap: 26px; }
.nav a, .head-tel { position: relative; text-decoration: none; font-size: .9375rem; padding: 6px 0; }
.nav a::after, .head-tel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease-roll); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after, .head-tel:hover::after, .head-tel:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { background: var(--red); }
.head-tel { font-weight: 600; font-feature-settings: "tnum"; }
.menu-btn { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 4px 0 12px; background: none; border: 0; cursor: pointer; }
.menu-icon { position: relative; width: 22px; height: 12px; }
.menu-icon i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--t-hover) var(--ease-settle), top var(--t-hover) var(--ease-settle); }
.menu-icon i:first-child { top: 0; }
.menu-icon i:last-child { top: 10px; }
html.menu-open .menu-icon i:first-child { top: 5px; transform: rotate(45deg); }
html.menu-open .menu-icon i:last-child { top: 5px; transform: rotate(-45deg); }
.menu-label { font-size: .875rem; font-weight: 500; }

.menu {
  position: fixed; inset: 0; z-index: 30; background: var(--paper); padding-top: calc(var(--head-h) + 40px);
  clip-path: inset(0 100% 0 0); visibility: hidden;
  transition: clip-path var(--t-roll) var(--ease-roll), visibility 0s linear var(--t-roll);
}
html.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--t-roll) var(--ease-roll), visibility 0s; }
html.menu-closing .menu { clip-path: inset(0 0 0 100%); }
.menu-inner { display: flex; flex-direction: column; }
.menu-inner a {
  display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-weight: 600; font-size: 1.75rem; text-decoration: none;
  opacity: 0; transform: translateX(-16px); transition: opacity 300ms, transform 500ms var(--ease-settle);
}
html.menu-open .menu-inner a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms + 200ms); }
.menu-chip { width: 14px; height: 28px; background: var(--c); transform-origin: bottom; transition: transform var(--t-hover) var(--ease-settle); }
.menu-inner a:hover .menu-chip, .menu-inner a:focus-visible .menu-chip { transform: scaleX(2.2); }
.menu-inner .menu-tel { font-family: var(--sans); font-size: 1.125rem; border: 0; margin-top: 18px; color: var(--red); }

@media (max-width: 960px) {
  .nav, .head-tel { display: none; }
  .menu-btn { display: inline-flex; }
  .site-head { background: rgba(241, 236, 229, .94); }
}
@media (min-width: 961px) { .menu { display: none; } }

/* ---------- photo reveal ("primer roll") ---------- */
.ph { position: relative; display: block; overflow: hidden; background: var(--taupe); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph::after {
  content: ""; position: absolute; inset: 0 0 0 -24%; pointer-events: none;
  background: linear-gradient(90deg, rgba(162, 141, 116, 0) 0, var(--taupe) 20%);
  background-color: transparent;
  transform: translateX(101%); transition: transform var(--t-roll) var(--ease-roll);
}
html.js .ph[data-reveal]:not(.is-in)::after { transform: translateX(0); transition: none; }
.ph--before { background: var(--paper-2); }

/* ---------- swatch card (shared by hero deck, preview, archive) ---------- */
.swatch-frame { position: relative; display: block; overflow: hidden; background: var(--taupe); }
.swatch-frame .ph { aspect-ratio: 561 / 756; }
.chip {
  position: absolute; inset: 0 0 auto 0; height: 100%; background: var(--c); pointer-events: none;
  transform: scaleY(.075); transform-origin: top; transition: transform var(--t-hover) var(--ease-settle);
  display: flex; flex-direction: column; justify-content: flex-start; padding: 7px 12px;
  font-size: .75rem; line-height: 1.4; font-feature-settings: "tnum";
}
.chip--light { color: #f6f2ec; }
.chip--dark { color: #222; }
.chip-hex, .chip-name { opacity: 0; transform: translateY(6px); transition: opacity var(--t-quick), transform var(--t-hover) var(--ease-settle); }
.chip-hex { font-weight: 600; letter-spacing: .06em; }
/* Rest states use :where() so hover/focus/active morphs always win. */
:where(html.js .swatch-frame:not(.is-in)) .chip { transform: scaleY(0); }
:where(html.js .swatch-frame.is-in) .chip { transition-delay: calc(var(--i, 0) * 70ms + 280ms); }

.swatch { position: relative; }
.swatch-link { display: block; text-decoration: none; background: var(--card); padding: 10px 10px 0; box-shadow: var(--lift-1); transition: box-shadow var(--t-hover) var(--ease-settle), transform var(--t-hover) var(--ease-settle); -webkit-tap-highlight-color: transparent; }
.swatch-link .ph img { transform: translateX(0) scale(1.06); transition: transform 700ms var(--ease-settle); }
.swatch-label { display: grid; gap: 2px; padding: 14px 4px 16px; }
.swatch-title { font-family: var(--serif); font-weight: 600; font-size: 1.1875rem; letter-spacing: -.02em; line-height: 1.35; }
.swatch-meta { font-size: .8125rem; color: var(--ink-2); }
.hex { font-feature-settings: "tnum"; letter-spacing: .04em; }
@media (hover: hover) {
  .swatch-link:hover { transform: translateY(-6px); box-shadow: var(--lift-2); }
  .swatch-link:hover .chip { transform: scaleY(.46); transition-delay: 0ms; }
  .swatch-link:hover .chip-hex, .swatch-link:hover .chip-name { opacity: 1; transform: none; transition-delay: 120ms; }
  .swatch-link:hover .ph img { transform: translateX(-12px) scale(1.06); }
}
.swatch-link:focus-visible { transform: translateY(-6px); box-shadow: var(--lift-2); outline-offset: 4px; }
.swatch-link:focus-visible .chip { transform: scaleY(.46); transition-delay: 0ms; }
.swatch-link:focus-visible .chip-hex, .swatch-link:focus-visible .chip-name { opacity: 1; transform: none; }
.swatch-link:focus-visible .ph img { transform: translateX(-12px) scale(1.06); }
.swatch-link:active { transform: translateY(-2px) scale(.99); }
.swatch-link:active .chip { transform: scaleY(.46); }
.swatch-link:active .chip-hex, .swatch-link:active .chip-name { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(56px, 8vw, 112px); }
.hero-copy { grid-column: 1 / span 6; }
.hero-visual { grid-column: 7 / span 6; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; color: var(--ink-2); margin-bottom: 22px; }
.eyebrow .dot { width: 10px; height: 10px; background: var(--red); }
.hero-title { font-family: var(--serif); font-weight: 600; letter-spacing: -.035em; }
.hero-name { display: block; font-size: clamp(2.75rem, 1rem + 5.5vw, 6rem); line-height: 1.04; white-space: nowrap; }
.hero-line { display: block; margin-top: 22px; font-size: clamp(1.5rem, 1rem + 1.7vw, 2.375rem); line-height: 1.36; color: var(--ink-2); letter-spacing: -.03em; }
.hero-lede { margin-top: 26px; max-width: 30em; color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.deck { position: relative; height: clamp(440px, 46vw, 620px); }
.deck-card {
  --w: clamp(220px, 23vw, 330px);
  position: absolute; left: 50%; top: 4%; width: var(--w); margin-left: calc(var(--w) / -2);
  transform-origin: 50% 110%;
  transform: translateX(var(--x, 0)) rotate(var(--r, 0deg)) translateY(var(--y, 0));
  transition: transform 900ms var(--ease-settle);
}
.deck-card:nth-child(1) { --x: -38%; --r: -9deg; --y: 18px; }
.deck-card:nth-child(2) { --x: 34%; --r: 7deg; --y: 8px; }
.deck-card:nth-child(3) { --x: 0%; --r: -1deg; }
html.js .deck:not(.is-dealt) .deck-card { --x: 0%; --r: 0deg; --y: 0px; }
.deck-card a { display: block; background: var(--card); padding: 10px 10px 0; box-shadow: var(--lift-2); text-decoration: none; transition: transform var(--t-hover) var(--ease-settle); }
.deck-label { display: block; padding: 12px 4px 14px; font-family: var(--serif); font-weight: 600; font-size: 1rem; }
.deck-label .swatch-no { font-family: var(--sans); margin-right: 6px; }
@media (hover: hover) {
  .deck.is-dealt:hover .deck-card:nth-child(1) { --x: -50%; --r: -12deg; }
  .deck.is-dealt:hover .deck-card:nth-child(2) { --x: 46%; --r: 10deg; }
  .deck-card a:hover { transform: translateY(-16px); }
  .deck-card a:hover .chip { transform: scaleY(.46); transition-delay: 0ms; }
  .deck-card a:hover .chip-hex, .deck-card a:hover .chip-name { opacity: 1; transform: none; transition-delay: 120ms; }
}
.deck-card:has(a:focus-visible) { z-index: 3; }
.deck-card a:focus-visible { transform: translateY(-16px); }
.deck-card a:focus-visible .chip { transform: scaleY(.46); }
.deck-card a:focus-visible .chip-hex, .deck-card a:focus-visible .chip-name { opacity: 1; transform: none; }
.deck-card a:active { transform: translateY(-6px) scale(.99); }

.measured { margin-top: 18px; }
.measured-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.measured-row li { display: grid; gap: 2px; font-size: .75rem; color: var(--ink-2); }
.m-chip { display: block; height: 30px; background: var(--c); transform-origin: bottom; transition: transform 700ms var(--ease-roll); }
html.js .measured:not(.is-in) .m-chip { transform: scaleY(0); }
.measured.is-in .m-chip { transition-delay: calc(var(--i) * 90ms + 500ms); }
.m-hex { font-weight: 600; color: var(--ink); font-feature-settings: "tnum"; letter-spacing: .04em; margin-top: 6px; }
.measured figcaption { margin-top: 14px; font-size: .8125rem; line-height: 1.6; color: var(--ink-2); max-width: 46em; }

/* ---------- approach (coat layers) ---------- */
.approach { background: var(--paper-2); padding-block: clamp(72px, 10vw, 140px); }
.approach-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.approach .sec-head { grid-column: 1 / span 5; }
.layers { grid-column: 7 / span 6; display: grid; gap: 0; }
.layers li { display: grid; grid-template-columns: 56px 44px 1fr; grid-template-rows: auto auto; column-gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.layers li:last-child { border-bottom: 1px solid var(--line); }
.layer-bar { grid-row: 1 / span 2; background: var(--c); height: 100%; min-height: 64px; transform-origin: left; }
.layer-no { grid-row: 1; font-size: .8125rem; font-weight: 600; color: var(--taupe-d); padding-top: 6px; font-feature-settings: "tnum"; }
.layers h3 { grid-row: 1; font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; }
.layers p { grid-column: 3; color: var(--ink-2); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .layer-bar { animation: coat linear both; animation-timeline: view(); animation-range: entry 10% cover 38%; }
  }
}
@keyframes coat { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- scope ---------- */
.scope { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; padding-block: clamp(72px, 10vw, 140px); }
.scope .sec-head { grid-column: 1 / span 5; }
.scope-list { grid-column: 6 / span 7; border-top: 1px solid var(--ink); }
.scope-row > a, .scope-row:not(.scope-row--link) { display: grid; grid-template-columns: 12px 1fr auto; grid-template-rows: auto auto; column-gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.scope-row--link > a { position: relative; isolation: isolate; }
.scope-chip { grid-row: 1 / span 2; align-self: stretch; background: var(--c, var(--paper-2)); border: 1px solid var(--line); transform-origin: left; transition: transform var(--t-hover) var(--ease-settle); }
.scope-name { font-family: var(--serif); font-weight: 600; font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); letter-spacing: -.02em; transition: transform var(--t-hover) var(--ease-settle); }
.scope-src { grid-column: 2; font-size: .8125rem; color: var(--ink-2); }
.scope-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: .9375rem; font-weight: 500; }
.scope-go.is-muted { color: var(--ink-2); font-weight: 400; font-size: .8125rem; }
.scope-go span { display: inline-block; transition: transform var(--t-hover) var(--ease-settle); }
.scope-row--link > a:hover .scope-chip, .scope-row--link > a:focus-visible .scope-chip { transform: scaleX(2.4); }
.scope-row--link > a:hover .scope-name, .scope-row--link > a:focus-visible .scope-name { transform: translateX(16px); }
.scope-row--link > a:hover .scope-go span, .scope-row--link > a:focus-visible .scope-go span { transform: translateX(5px); }

/* ---------- feature ---------- */
.feature { padding-block: clamp(40px, 6vw, 80px) clamp(72px, 10vw, 140px); }
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: end; }
.feature-media { grid-column: 1 / span 8; display: block; box-shadow: var(--lift-2); }
.feature-media .ph { aspect-ratio: 1014 / 414; }
.feature-media .ph img { transition: transform 900ms var(--ease-settle); }
.feature-media:hover .ph img, .feature-media:focus-visible .ph img { transform: scale(1.03) translateX(-10px); }
.feature-copy { grid-column: 9 / span 4; }
.feature-sub { font-size: 1.125rem; color: var(--ink-2); margin-top: 14px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 26px 0 30px; border-top: 1px solid var(--line); }
.facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: .75rem; color: var(--taupe-d); font-weight: 500; letter-spacing: .04em; }
.facts dd { font-weight: 500; font-size: .9375rem; line-height: 1.5; }
.facts small, .contact-facts small { display: block; font-size: .75rem; color: var(--ink-2); font-weight: 400; }

/* ---------- preview & grids ---------- */
.preview { padding-bottom: clamp(72px, 10vw, 140px); }
.sec-head--row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: 48px; }
.sec-head--row > div { grid-column: 1 / span 6; }
.sec-head--row > .sec-note { grid-column: 8 / span 5; }
.swatch-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.swatch-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preview-more { margin-top: 44px; }

/* ---------- contact ---------- */
.contact { background: var(--ink); color: var(--paper); padding-block: clamp(72px, 10vw, 140px); }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: end; }
.contact-grid > div { grid-column: 1 / span 7; }
.contact-tel {
  display: inline-block; margin-top: 34px; font-family: var(--serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(2.1rem, 1rem + 4.6vw, 4.6rem); text-decoration: none; line-height: 1.1; font-feature-settings: "tnum";
  background-image: linear-gradient(var(--red), var(--red)); background-size: 0 3px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--t-roll) var(--ease-roll); padding-bottom: 6px;
}
.contact-tel:hover, .contact-tel:focus-visible { background-size: 100% 3px; }
.contact-facts { grid-column: 9 / span 4; border-top: 1px solid rgba(241, 236, 229, .22); }
.contact-facts div { padding: 14px 0; border-bottom: 1px solid rgba(241, 236, 229, .22); }
.contact-facts dt { font-size: .75rem; color: #c8b8a4; letter-spacing: .04em; }
.contact-facts dd { font-size: .9375rem; }
.contact-facts small { color: #b7ab9d; }
.contact :focus-visible { outline-color: #f0b49f; }

/* ---------- footer ---------- */
.site-foot { background: #232323; color: #c9c0b4; font-size: .8125rem; line-height: 1.7; padding-block: 44px 56px; }
.foot-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.foot-name { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; color: var(--paper); margin-bottom: 6px; }
.foot-note p + p { margin-top: 8px; }
.site-foot a { color: #efe7dc; }
.site-foot :focus-visible { outline-color: #f0b49f; }

/* ---------- works ---------- */
.page-head { padding-block: clamp(32px, 6vw, 80px) clamp(32px, 4vw, 52px); }
.page-lede { max-width: 38em; color: var(--ink-2); margin-top: 22px; }
.page-lede a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.filter-bar { position: sticky; top: var(--head-h); z-index: 20; background: rgba(241, 236, 229, .95); border-block: 1px solid var(--line); backdrop-filter: blur(8px); }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.filters { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.filter { position: relative; background: none; border: 0; padding: 14px 14px; cursor: pointer; font-weight: 500; font-size: .9375rem; white-space: nowrap; color: var(--ink-2); transition: color var(--t-quick); -webkit-tap-highlight-color: transparent; }
.filter:hover, .filter[aria-pressed="true"] { color: var(--ink); }
.filter-count { font-size: .6875rem; margin-left: 5px; color: var(--taupe-d); font-feature-settings: "tnum"; vertical-align: 1px; }
.filter-ink { position: absolute; left: 0; bottom: 6px; height: 2px; width: var(--w, 0); background: var(--red); transform: translateX(var(--x, 0)); transition: transform var(--t-hover) var(--ease-settle), width var(--t-hover) var(--ease-settle); }
.filter-status { font-size: .8125rem; color: var(--ink-2); white-space: nowrap; }
.works { padding-block: 40px clamp(72px, 10vw, 140px); }
.swatch[hidden] { display: none; }
.next-site { margin-top: 56px; padding: 28px; border: 1px dashed rgba(44, 44, 44, .32); max-width: 720px; color: var(--ink-2); font-size: .9375rem; }

/* ---------- case ---------- */
.crumbs { font-size: .8125rem; color: var(--ink-2); padding-top: 24px; }
.crumbs a { text-underline-offset: 3px; }
.case-hero { padding-bottom: 40px; }
.case-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: end; padding-top: clamp(24px, 4vw, 56px); }
.case-hero-copy { grid-column: 1 / span 4; }
.case-hero-media { grid-column: 5 / span 8; box-shadow: var(--lift-2); }
.case-hero-media .ph { aspect-ratio: 1014 / 414; }
.facts--row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 44px 0 0; }
.case-note { margin-top: 22px; font-size: .875rem; color: var(--ink-2); max-width: 54em; }
.case-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-block: 48px 40px; }
.rail { grid-column: 1 / span 3; position: sticky; top: calc(var(--head-h) + 28px); align-self: start; }
.rail-title { font-size: .75rem; letter-spacing: .08em; color: var(--taupe-d); font-weight: 500; margin-bottom: 12px; }
.rail a { display: flex; align-items: center; gap: 10px; padding: 9px 0; text-decoration: none; font-size: .9375rem; color: var(--ink-2); transition: color var(--t-quick); }
.rail-chip { width: 10px; height: 22px; flex: none; background: var(--c); transform: scaleY(.3); transform-origin: bottom; transition: transform var(--t-hover) var(--ease-settle), width var(--t-hover) var(--ease-settle); }
.rail-no { font-size: .6875rem; font-weight: 600; color: var(--taupe-d); font-feature-settings: "tnum"; width: 1.4em; }
.rail a:hover, .rail a:focus-visible, .rail a[aria-current="true"] { color: var(--ink); }
.rail a:hover .rail-chip, .rail a:focus-visible .rail-chip { transform: scaleY(.7); }
.rail a[aria-current="true"] .rail-chip { transform: scaleY(1); width: 16px; }
.records { grid-column: 4 / span 9; display: grid; gap: clamp(72px, 8vw, 120px); }
.record-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 22px; }
.record-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); letter-spacing: -.025em; }
.record-parts { font-size: .8125rem; color: var(--ink-2); margin-left: auto; }
.record-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 28px; align-items: start; }
.after .swatch-frame { background: var(--card); padding: 10px; box-shadow: var(--lift-1); }
.after .ph { aspect-ratio: 1014 / 414; }
.after .chip { inset: 10px 10px auto 10px; height: calc(100% - 20px); }
.after figcaption, .before figcaption { font-size: .75rem; color: var(--ink-2); margin-top: 10px; }
.before .ph { aspect-ratio: 402 / 261; }
.record-text { margin-top: 18px; font-size: 1rem; }
.record-chip { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; font-size: .8125rem; color: var(--ink-2); }
.record-chip .m-chip { width: 34px; height: 22px; }
.record .m-hex { margin: 0; }

.prep { padding-block: clamp(56px, 8vw, 100px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.prep .sec-head { grid-column: 1 / span 5; }
.prep-grid { grid-column: 6 / span 7; display: grid; gap: 28px; }
.checklist { border-top: 1px solid var(--ink); }
.checklist label { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.checklist input { appearance: none; flex: none; width: 22px; height: 22px; margin: 3px 0 0; border: 1.5px solid var(--ink); border-radius: 2px; display: grid; place-content: center; cursor: pointer; background: var(--card); }
.checklist input::before { content: ""; width: 22px; height: 22px; background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease-roll); }
.checklist input:checked::before { transform: scaleX(1); }
.checklist input:checked + span { color: var(--ink-2); }
.prep-call p { margin-bottom: 14px; color: var(--ink-2); }
.case-end { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: clamp(72px, 10vw, 120px); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero-visual { grid-column: 8 / span 5; }
  .feature-media { grid-column: 1 / -1; }
  .feature-copy { grid-column: 1 / span 8; }
  .rail { grid-column: 1 / span 3; }
  .record-body { grid-template-columns: 1fr; }
  .record-side { display: grid; grid-template-columns: minmax(0, 260px) 1fr; column-gap: 24px; align-items: start; }
  .record-side .before { grid-row: span 4; }
}
@media (max-width: 860px) {
  .hero, .approach-grid, .scope, .feature-grid, .contact-grid, .prep, .case-hero-grid, .case-body, .sec-head--row { grid-template-columns: minmax(0, 1fr); }
  .hero-copy, .hero-visual, .approach .sec-head, .layers, .scope .sec-head, .scope-list, .feature-media, .feature-copy,
  .contact-grid > div, .contact-facts, .prep .sec-head, .prep-grid, .case-hero-copy, .case-hero-media, .sec-head--row > div, .sec-head--row > .sec-note,
  .rail, .records { grid-column: 1 / -1; }
  .hero-visual { margin-top: 44px; }
  .deck { height: clamp(380px, 108vw, 520px); }
  .deck-card { --w: min(56vw, 300px); }
  .swatch-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); }
  .facts--row { grid-template-columns: 1fr 1fr; }
  .rail { position: sticky; top: var(--head-h); z-index: 15; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter); background: rgba(241, 236, 229, .95); border-block: 1px solid var(--line); backdrop-filter: blur(8px); margin-bottom: 32px; }
  .rail-title { display: none; }
  .rail ol { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .rail a { white-space: nowrap; padding: 12px 0; font-size: .875rem; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .after .ph { aspect-ratio: 561 / 756; }
  .record-side { display: block; }
  .record-side .before { max-width: 72%; margin-top: 18px; }
  .measured-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .filter { padding: 14px 10px; }
  .filter-status { display: none; }
  .brand-meta { display: none; }
  .scope-row > a, .scope-row:not(.scope-row--link) { grid-template-columns: 10px 1fr; }
  .scope-go { grid-column: 2; grid-row: 3; margin-top: 6px; }
  .btn { width: 100%; justify-content: space-between; }
  .case-end .btn { width: auto; }
}

/* ---------- route transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: var(--t-route); animation-timing-function: var(--ease-roll); }
/* New page rolls in left→right behind a soft primer edge; the old page dims to nothing
   underneath so no outgoing content is left showing once the roll completes. */
::view-transition-new(root) {
  animation: route-in var(--t-route) var(--ease-roll) both;
  -webkit-mask-image: linear-gradient(90deg, #000 0 46%, transparent 54%); mask-image: linear-gradient(90deg, #000 0 46%, transparent 54%);
  -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
::view-transition-old(root) { animation: route-out var(--t-route) var(--ease-roll) both; }
@keyframes route-in { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes route-out { 0% { opacity: 1; } 40% { opacity: .55; } 100% { opacity: 0; } }
::view-transition-old(vt-photo), ::view-transition-new(vt-photo) { height: 100%; object-fit: cover; overflow: clip; }
::view-transition-old(vt-chip), ::view-transition-new(vt-chip) { height: 100%; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  html.js .ph[data-reveal]:not(.is-in)::after { transform: translateX(101%); }
  :where(html.js .swatch-frame:not(.is-in)) .chip { transform: scaleY(.075); }
  html.js .measured:not(.is-in) .m-chip, html.js [data-rule]:not(.is-in)::after { transform: none; }
}

/* ---------- additions: record layouts, archive palette index ---------- */
.record--tall .record-body { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.record--tall .after .ph { aspect-ratio: 561 / 756; }
.record--tall .record-side { padding-top: 8px; }
.record--tall .before { max-width: 340px; }
.page-head--works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.page-head--works > .kicker, .page-head--works > .page-title, .page-head--works > .page-lede { grid-column: 1 / span 6; }
.page-head--works > .kicker { grid-row: 1; }
.page-head--works > .page-title { grid-row: 2; }
.page-head--works > .page-lede { grid-row: 3; }
.palette { grid-column: 8 / span 5; grid-row: 1 / span 3; align-self: end; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.palette li { display: grid; gap: 4px; font-size: .6875rem; color: var(--ink-2); font-feature-settings: "tnum"; }
.p-chip { height: clamp(120px, 14vw, 200px); background: var(--c); transform-origin: bottom; animation: chip-rise 800ms var(--ease-roll) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
.p-no { font-weight: 600; color: var(--taupe-d); margin-top: 4px; }
.p-hex { letter-spacing: .02em; }
@keyframes chip-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 1100px) {
  .record--tall .record-body { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .record--tall .record-side { display: block; }
}
@media (max-width: 860px) {
  .page-head--works { grid-template-columns: minmax(0, 1fr); }
  .page-head--works > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .palette { order: 3; margin-top: 28px; }
  .p-chip { height: 56px; }
  .p-hex { display: none; }
}
@media (max-width: 700px) {
  .record--tall .record-body { grid-template-columns: minmax(0, 1fr); }
}
.hero { overflow-x: clip; overflow-y: visible; }
@media (max-width: 860px) {
  .hero { padding-bottom: 72px; }
  .layers li { grid-template-columns: 28px 36px 1fr; column-gap: 14px; }
}

/* ---------- scope peek (hover/focus preview, pointer devices only) ---------- */
.scope-peek { display: none; }
@media (hover: hover) and (min-width: 861px) {
  .scope-peek {
    display: block; position: absolute; right: 150px; top: 50%; width: 132px; height: 86px; margin-top: -43px; overflow: hidden;
    background: var(--taupe); box-shadow: var(--lift-1); pointer-events: none; z-index: -1;
    clip-path: inset(0 100% 0 0); transition: clip-path var(--t-hover) var(--ease-roll);
  }
  .scope-peek img { width: 100%; height: 100%; object-fit: cover; transform: translateX(10px); transition: transform 700ms var(--ease-settle); }
  .scope-row--link > a:hover .scope-peek, .scope-row--link > a:focus-visible .scope-peek { clip-path: inset(0 0 0 0); }
  .scope-row--link > a:hover .scope-peek img, .scope-row--link > a:focus-visible .scope-peek img { transform: none; }
}

/* ---------- original posts gallery + lightbox ---------- */
.originals { background: var(--paper-2); padding-block: clamp(64px, 9vw, 120px); }
.orig-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.orig-thumb { display: block; width: 100%; padding: 8px 8px 0; border: 0; background: var(--card); text-align: left; cursor: zoom-in; box-shadow: var(--lift-1); transition: transform var(--t-hover) var(--ease-settle), box-shadow var(--t-hover) var(--ease-settle); -webkit-tap-highlight-color: transparent; }
.orig-thumb .ph { aspect-ratio: 1; }
.orig-thumb img { transition: transform 700ms var(--ease-settle); }
.orig-cap { display: block; padding: 10px 2px 12px; font-size: .875rem; font-weight: 500; line-height: 1.4; }
.orig-cap .swatch-no { margin-right: 4px; }
@media (hover: hover) { .orig-thumb:hover { transform: translateY(-5px); box-shadow: var(--lift-2); } .orig-thumb:hover img { transform: scale(1.04); } }
.orig-thumb:focus-visible { transform: translateY(-5px); box-shadow: var(--lift-2); }
.orig-thumb:active { transform: translateY(-1px) scale(.99); }
.lightbox { width: min(94vw, 1180px); max-width: none; max-height: 94dvh; padding: 0; border: 0; background: var(--card); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.lightbox::backdrop { background: rgba(30, 28, 26, .8); }
.lb-inner { padding: clamp(14px, 2vw, 24px); }
.lb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lb-count { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; color: var(--taupe-d); font-feature-settings: "tnum"; }
.lb-close { min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; font-size: .9375rem; font-weight: 500; }
.lb-close span { font-size: 1.4em; vertical-align: -2px; margin-left: 4px; }
.lb-figure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.lb-stage { background: var(--taupe); aspect-ratio: 1; max-height: 74dvh; touch-action: pan-y; user-select: none; }
.lb-stage img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.lb-figure figcaption { display: grid; gap: 10px; align-content: start; }
.lb-title { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; letter-spacing: -.02em; }
.lb-cap { font-size: .9375rem; color: var(--ink-2); }
.lb-rec { font-size: .9375rem; font-weight: 500; text-underline-offset: 4px; }
.lb-rec[hidden] { display: none; }
.lb-nav { display: flex; gap: 10px; margin-top: 16px; }
.lb-note { font-size: .75rem; color: var(--ink-2); margin-top: 12px; }
::view-transition-group(lb-photo) { animation-duration: 480ms; animation-timing-function: var(--ease-settle); z-index: 80; }
::view-transition-old(lb-photo), ::view-transition-new(lb-photo) { height: 100%; object-fit: contain; }
@media (max-width: 860px) {
  .orig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-figure { grid-template-columns: minmax(0, 1fr); }
  .lb-nav .btn { width: auto; flex: 1; justify-content: center; }
}

/* ---------- contact page ---------- */
.contact-head { padding-bottom: clamp(24px, 4vw, 48px); }
.contact-tel--ink { color: var(--ink); margin-top: 24px; }
.memo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; padding-bottom: clamp(64px, 9vw, 120px); align-items: start; }
.memo-form { grid-column: 1 / span 7; display: grid; gap: 28px; }
.memo-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; border-top: 1px solid var(--ink); padding-top: 16px; }
.memo-form legend { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; letter-spacing: -.02em; padding: 0; margin-bottom: 14px; float: left; width: 100%; }
.memo-form legend small, .field small { font-family: var(--sans); font-weight: 400; font-size: .8125rem; color: var(--ink-2); margin-left: 6px; }
.memo-form legend .layer-no, .field .layer-no { font-family: var(--sans); margin-right: 8px; vertical-align: 3px; }
.pick { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip { position: relative; cursor: pointer; }
.pick-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick-chip > span {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); background: var(--card);
  font-size: .9375rem; font-weight: 500; overflow: hidden; isolation: isolate; transition: color var(--t-hover) var(--ease-settle), border-color var(--t-quick);
}
.pick-chip > span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease-roll); }
.pick-chip input:checked + span { color: var(--paper); border-color: var(--ink); }
.pick-chip input:checked + span::before { transform: scaleX(1); }
.pick-chip:hover > span { border-color: var(--ink); }
.pick-chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 3px; }
.pick-chip--swatch i { width: 10px; height: 20px; background: var(--c); transform: scaleY(.45); transform-origin: bottom; transition: transform var(--t-hover) var(--ease-settle); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.pick-chip--swatch input:checked + span i { transform: scaleY(1); }
.memo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--ink); padding-top: 16px; }
.field { display: grid; gap: 8px; font-family: var(--serif); font-weight: 600; font-size: 1.125rem; }
.field input { font: 400 1rem var(--sans); min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: 2px; width: 100%; }
.field input:focus-visible { border-color: var(--ink); }
.memo-out { grid-column: 9 / span 4; position: sticky; top: calc(var(--head-h) + 24px); }
.memo-card { background: var(--card); padding: 22px; box-shadow: var(--lift-2); border-top: 6px solid var(--red); }
.memo-title { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin-bottom: 12px; }
.memo-lines { counter-reset: m; display: grid; gap: 0; border-top: 1px solid var(--line); }
.memo-lines li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.memo-lines li.is-new { animation: memo-line 520ms var(--ease-roll) both; }
@keyframes memo-line { from { clip-path: inset(0 100% 0 0); background: rgba(194, 69, 45, .08); } to { clip-path: inset(0 0 0 0); background: transparent; } }
.memo-actions { display: grid; gap: 10px; margin-top: 18px; }
.memo-actions .btn { justify-content: space-between; }
.memo-status { min-height: 1.6em; margin-top: 10px; font-size: .8125rem; color: var(--ink-2); }
.ask { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; padding-block: clamp(56px, 8vw, 110px); border-top: 1px solid var(--line); }
.ask .sec-head { grid-column: 1 / span 5; }
.ask-list { grid-column: 6 / span 7; border-top: 1px solid var(--ink); }
.ask-list li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ask-list h3 { font-family: var(--serif); font-weight: 600; font-size: 1.1875rem; letter-spacing: -.02em; }
.ask-list p { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 860px) {
  .memo, .ask { grid-template-columns: minmax(0, 1fr); }
  .memo-form, .memo-out, .ask .sec-head, .ask-list { grid-column: 1 / -1; }
  .memo-out { position: static; }
  .ask-list li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) { .memo-fields { grid-template-columns: 1fr; } .pick-chip > span { padding: 0 13px; } }

/* ---------- sources page ---------- */
.src-sec { padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line); }
.src-sec--last { padding-bottom: clamp(72px, 10vw, 140px); }
.src-h { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); letter-spacing: -.025em; margin-bottom: 22px; }
.src-p { max-width: 46em; color: var(--ink-2); }
.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline-offset: 4px; }
.src-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 640px; }
.src-table th, .src-table td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.src-table thead th { font-size: .75rem; font-weight: 500; letter-spacing: .06em; color: var(--taupe-d); border-bottom: 1px solid var(--ink); }
.src-table tbody th { font-weight: 500; width: 42%; }
.src-table td:last-child { color: var(--ink-2); font-size: .875rem; }
.ask-list--compact { grid-column: auto; max-width: 980px; }
.src-origs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.src-origs a { display: grid; gap: 6px; text-decoration: none; font-size: .75rem; color: var(--ink-2); }
.src-origs img { aspect-ratio: 1; object-fit: cover; background: var(--taupe); transition: transform var(--t-hover) var(--ease-settle); }
.src-origs a:hover img, .src-origs a:focus-visible img { transform: translateY(-4px); }
.palette--inline { margin-top: 24px; max-width: 760px; }
.palette--inline .p-chip { height: 72px; }
.palette--inline .p-hex { display: block; }
@media (max-width: 860px) { .src-origs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- fallback shared-element ghost ---------- */
.vt-ghost { box-shadow: var(--lift-2); }
@media (prefers-reduced-motion: reduce) { .vt-ghost { display: none; } }

/* ---------- returning visits (Back/Forward/reload) and arriving shared photo: no intro replay ---------- */
html.is-return .ph[data-reveal]::after, .ph.is-set::after { transform: translateX(101%) !important; transition: none !important; }
:where(html.is-return .swatch-frame) .chip, :where(.swatch-frame.is-set) .chip { transform: scaleY(.075); transition-delay: 0ms; }
html.is-return .p-chip { animation: none; }
html.is-return .measured .m-chip, html.is-return [data-rule]::after { transform: none !important; transition: none !important; }
html.is-return .deck-card { transition: none; }