/* macrostructure: editorial split hero, statement, handoff flow diagram, service index rows, bench split, role rows, engagement bento, letter-close footer
   nav: edge-aligned wordmark with three text links, menu disclosure under 640px
   footer: letter close on Ink
   theme: light Paper with Ink and one Handoff Green accent, dark mode on Ink with Signal Mint
   built 2026-09-28 by Claude Code (cc), brand status PROPOSED */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--text-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; font-style: normal; margin: 0; text-wrap: balance; letter-spacing: -0.015em; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 0.2em; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img, svg { display: block; max-width: 100%; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }
@media (min-width: 768px) { .wrap { padding-inline: var(--space-6); } }
.muted { color: var(--fg-2); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-1); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* skip link: opacity and translate, not off-screen */
.skip { position: fixed; left: var(--space-2); top: var(--space-2); z-index: 20; padding: var(--space-1) var(--space-2); background: var(--fg); color: var(--bg);
  border-radius: var(--radius-button); opacity: 0; transform: translateY(-150%); transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.skip:focus { opacity: 1; transform: none; }

/* nav */
.nav { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }
.nav .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.logo { display: block; width: 132px; color: inherit; }
.logo svg { width: 100%; height: auto; }
.nav-links { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--fg); text-decoration: none; font-size: var(--text-label); font-family: var(--font-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding-block: var(--space-1); border-bottom: 2px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--line); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--accent); }
.menu-btn { display: none; }
@media (max-width: 639px) {
  .menu-btn { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 1px solid var(--line); color: var(--fg); border-radius: var(--radius-button);
    padding: var(--space-1) var(--space-2); font: 500 var(--text-label) var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; min-height: 44px; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--space-1) var(--space-3) var(--space-2); }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding-block: var(--space-2); }
}

/* buttons */
.btn { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--accent); color: var(--on-accent); text-decoration: none; white-space: nowrap;
  font: 600 var(--text-body)/1 var(--font-body); padding: var(--space-2) var(--space-3); border-radius: var(--radius-button); min-height: 48px;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.btn:hover { background: var(--fg); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; }

/* sections */
section { padding-block: var(--space-6); }
@media (min-width: 1024px) { section { padding-block: var(--space-8); } }
.rule-top { border-top: 1px solid var(--line); }
.h2 { font-size: var(--text-section); line-height: 1.15; }
.lede { font-size: var(--text-body); color: var(--fg-2); margin-top: var(--space-2); }

/* hero: asymmetric split, content height */
.hero { padding-block: var(--space-6) var(--space-7); }
.hero .wrap { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 768px) { .hero .wrap { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: var(--space-5); } }
.hero h1 { font-size: var(--text-hero); line-height: 1.1; padding-bottom: 0.08em; }
.hero p { margin-top: var(--space-3); font-size: var(--text-body); color: var(--fg-2); max-width: 36ch; }
.hero .btn { margin-top: var(--space-4); }
.hero-mark { width: min(100%, 320px); justify-self: end; }
@media (max-width: 767px) { .hero-mark { width: 160px; justify-self: start; order: -1; } }
.hero-mark .a { fill: var(--mark-a); } .hero-mark .b { fill: var(--mark-b); }
/* signature moment: the two halves hand off into place once, on load */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark .a { animation: handoff-a var(--dur-signature) var(--ease-out) both; }
  .hero-mark .b { animation: handoff-b var(--dur-signature) var(--ease-out) 120ms both; }
  @keyframes handoff-a { from { transform: translate(-14px, 10px); opacity: 0; } }
  @keyframes handoff-b { from { transform: translate(14px, -10px); opacity: 0; } }
}
.page-hero { padding-block: var(--space-6); }
.page-hero h1 { font-size: var(--text-close); line-height: 1.1; max-width: 18ch; }
.page-hero p { margin-top: var(--space-3); color: var(--fg-2); }

/* statement */
.statement p.big { font-family: var(--font-display); font-weight: 600; font-size: var(--text-section); line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; }
.statement p.big + p.big { color: var(--accent); margin-top: var(--space-3); }

/* flow diagram */
.flow-head { display: grid; gap: var(--space-2); max-width: 60ch; }
.bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-1); margin-top: var(--space-6); }
.bar { height: var(--space-5); border-radius: var(--radius-button); display: flex; align-items: center; padding-inline: var(--space-2);
  font: 500 var(--text-label) var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; }
.bar.mkt { grid-column: 1 / 4; grid-row: 1; background: var(--fg); color: var(--bg); }
.bar.sales { grid-column: 3 / 5; grid-row: 2; background: var(--accent); color: var(--on-accent); }
.stages { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stages li { border-left: 1px solid var(--line); padding: var(--space-2) var(--space-3) 0 var(--space-2); }
.stages .stage { font: 500 var(--text-label) var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); }
.stages p { margin-top: var(--space-1); color: var(--fg-2); font-size: var(--text-body); }
.stages li.handoff .stage { color: var(--accent); }
@media (max-width: 767px) {
  .stages { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .bar { padding-inline: var(--space-1); }
}

/* service index rows */
.index { list-style: none; margin: var(--space-5) 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.index a { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding: var(--space-4) var(--space-2); border-top: 1px solid var(--line);
  color: var(--fg); text-decoration: none; transition: background-color var(--dur-ui) var(--ease-out); }
@media (min-width: 768px) { .index a { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 32px; gap: var(--space-4); align-items: baseline; } }
.index h3 { font-size: var(--text-h2); line-height: 1.2; }
.index p { color: var(--fg-2); }
.index .go { color: var(--accent); transition: transform var(--dur-ui) var(--ease-out); }
.index a:hover { background: var(--bg-2); }
.index a:hover .go { transform: translateX(4px); }

/* bench split */
.split { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); } }
.split p { margin-top: var(--space-3); }
.disciplines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
.disciplines li { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: 1.25; padding-block: var(--space-2); border-bottom: 1px solid var(--line); }
@media (max-width: 479px) { .disciplines li { font-size: var(--text-body); } }
.caption { font: 500 var(--text-label) var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); margin-bottom: var(--space-2); }

/* role rows */
.roles { margin: var(--space-5) 0 0; }
.roles div { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-top: 1px solid var(--line); }
@media (min-width: 768px) { .roles div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-4); } }
.roles dt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: 1.2; }
.roles dd { margin: 0; color: var(--fg-2); }

/* engagement bento: 4 cells for 4 pieces of content */
.bento { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bento { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); grid-template-rows: auto auto; }
  .bento .first { grid-row: 1 / 3; } .bento .wide { grid-column: 2 / 4; } }
.cell { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); display: grid; align-content: start; gap: var(--space-2); }
.cell.first { background: var(--bg-2); border-color: transparent; align-content: space-between; min-height: 280px; }
.cell h3 { font-size: var(--text-h2); line-height: 1.2; }
.cell.first h3 { font-size: var(--text-section); line-height: 1.12; }
.cell p { color: var(--fg-2); }
.cell svg { width: 28px; height: 28px; color: var(--fg); }

/* page body blocks */
.two-col { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 0 var(--space-5); }
@media (min-width: 768px) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.two-col li { padding-block: var(--space-2); border-top: 1px solid var(--line); }
.two-col li strong { display: block; font-family: var(--font-display); font-weight: 600; }
.two-col li span { color: var(--fg-2); }
.prose p + p { margin-top: var(--space-2); }
.prose h2 { margin-bottom: var(--space-2); }
.person { font-family: var(--font-display); font-weight: 600; font-size: var(--text-section); line-height: 1.12; }
.email-line { font: 500 var(--text-body) var(--font-label); overflow-wrap: anywhere; }
.note { border-left: 3px solid var(--line); padding-left: var(--space-2); color: var(--fg-2); }

/* footer: letter close */
.close { background: var(--bg); color: var(--fg); padding-block: var(--space-7) var(--space-4); }
.close h2 { font-size: var(--text-close); line-height: 1.08; max-width: 16ch; }
.close .reach { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
.close .reach p { color: var(--fg-2); }
.close .reach a { font: 500 var(--text-body) var(--font-label); overflow-wrap: anywhere; }
.colophon { margin-top: var(--space-7); padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
.colophon .logo { width: 132px; }
.colophon ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.colophon a, .colophon small { color: var(--fg-2); font-size: var(--text-label); }
.colophon a { text-decoration: none; } .colophon a:hover { color: var(--fg); text-decoration: underline; }
.logo .a { fill: var(--mark-a); } .logo .b { fill: var(--mark-b); } .logo .t { fill: var(--mark-a); }

/* browser surfaces (after scroll-craft taste.md 245-251) */
html { caret-color: var(--accent); accent-color: var(--accent); scrollbar-color: var(--line) var(--bg); }
a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
table, .sw-val, .ph-k { font-variant-numeric: tabular-nums; }
.inverse { color: var(--fg); background: var(--bg); }
@media (hover: none) { .index a:hover { background: none; } .index a:hover .go { transform: none; } }
.btn:active { transform: scale(0.98); }

/* internal banner */
.banner { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.banner .wrap { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); justify-content: space-between; align-items: center; padding-block: var(--space-1); }
.banner p { font-size: var(--text-label); color: var(--fg-2); max-width: none; }
.banner a { font-size: var(--text-label); font-weight: 600; }

/* no-JS: menu links stay visible; JS adds html.js and collapses them under 640px */
@media (max-width: 639px) { html:not(.js) .menu-btn { display: none; } html:not(.js) .nav-links { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; }
  html:not(.js) .nav .wrap { height: auto; flex-wrap: wrap; padding-block: var(--space-2); } }

/* stacked section: heading over body, never a split header */
.stack { display: grid; gap: var(--space-3); }
.stack .prose { max-width: var(--measure); }

/* the page's one peak: the handoff diagram draws as it scrolls into view */
.peak { padding-block: var(--space-8); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .peak .bar { transform-origin: left center; animation: draw linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    .peak .bar.sales { animation-range: entry 55% cover 55%; }
    .peak .stages li { animation: arrive linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
    .peak .stages li.handoff { animation-range: entry 60% cover 55%; }
    @keyframes draw { from { transform: scaleX(0.04); } }
    @keyframes arrive { from { opacity: 0; transform: translateY(14px); } }
  }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; } }


/* brand review hub */
.hub-nav { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 72px; z-index: 9; }
.hub-nav ul { list-style: none; margin: 0; padding: var(--space-1) 0; display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.hub-nav a { display: inline-block; white-space: nowrap; padding: var(--space-1) var(--space-2); border-radius: var(--radius-label); color: var(--fg); text-decoration: none;
  font: 500 var(--text-label) var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; }
.hub-nav a:hover { border-color: var(--line); }
.hub-nav a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.hub-hero h1 { max-width: 20ch; }
.sub-h { font-size: var(--text-h2); margin: var(--space-5) 0 var(--space-2); }
.status { font: 500 var(--text-label) var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.rec .status { color: var(--accent); }

.decisions { list-style: none; counter-reset: d; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.decisions a { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding: var(--space-2) var(--space-1); border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; }
@media (min-width: 768px) { .decisions a { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-3); } }
.decisions a:hover { background: var(--bg-2); }
.dec-t { font-family: var(--font-display); font-weight: 600; }
.dec-d { color: var(--fg-2); }

.phases { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.phases li { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-3); display: grid; gap: var(--space-1); align-content: start; }
.phases li.done { background: var(--bg-2); border-color: transparent; }
.ph-k { font: 500 var(--text-label) var(--font-label); letter-spacing: 0.08em; color: var(--fg-2); }
.ph-t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: 1.2; }
.ph-d { color: var(--fg-2); }
.ph-s { font: 500 var(--text-label) var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; }
.phases li.done .ph-s { color: var(--accent); }

.downloads { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.downloads a { font-weight: 600; }

.light-card { --bg: var(--orc-paper); --fg: var(--orc-ink); --fg-2: var(--orc-slate); background: var(--orc-paper); color: var(--orc-ink); border: 1px solid var(--orc-hairline); }
.dark-card { --bg: var(--orc-ink); --fg: var(--orc-paper); --fg-2: var(--orc-hairline); background: var(--orc-ink); color: var(--orc-paper); border: 1px solid var(--orc-ink); }
.concepts { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 1024px) { .concepts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .concept.rec { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.concept { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.concept.rec { border-color: var(--accent); }
.concept-art { border: 0; border-bottom: 1px solid var(--orc-hairline); padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-4); justify-items: center; align-content: center; min-height: 240px; }
.concept.rec .concept-art { border-bottom: 0; border-right: 1px solid var(--orc-hairline); }
.concept-art img { width: min(100%, 360px); height: auto; }
.concept-art .concept-sym { width: 64px; }
.concept-body { padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: var(--space-1); align-content: start; }
.concept-body h3 { font-size: var(--text-h2); }
.scores { margin-top: var(--space-2); }
.scores th { white-space: normal; letter-spacing: 0.02em; }
.scores th, .scores td { padding: var(--space-1); }

.variants { display: grid; gap: var(--space-2); margin: var(--space-4) 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.variants figure { margin: 0; border-radius: var(--radius-card); padding: var(--space-4) var(--space-3) var(--space-2); display: grid; gap: var(--space-3); justify-items: center; }
.variants img { width: min(100%, 240px); height: auto; max-height: 96px; object-fit: contain; }
.variants figcaption { font-size: var(--text-label); color: var(--fg-2); justify-self: start; }
.sheet { margin: var(--space-4) 0 0; border-radius: var(--radius-card); overflow: hidden; }
.sheet img { width: 100%; height: auto; }

.table-scroll { overflow-x: auto; margin: var(--space-3) 0; border: 1px solid var(--line); border-radius: var(--radius-card); }
table { border-collapse: collapse; width: 100%; font-size: var(--text-label); line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--line); }
th { font: 500 var(--text-label) var(--font-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2); background: var(--bg-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

.swatches { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.swatch { display: grid; gap: 2px; align-content: start; }
.chip { height: 96px; border-radius: var(--radius-card); border: 1px solid var(--line); margin-bottom: var(--space-1); }
.sw-name { font-family: var(--font-display); font-weight: 600; }
.sw-val { font: 500 var(--text-label) var(--font-label); color: var(--fg-2); }
.sw-role { font-size: var(--text-label); color: var(--fg-2); margin-top: var(--space-1); }
.pair-demo { display: inline-flex; align-items: center; width: 56px; height: 28px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line); }
.pair-demo span { display: block; width: 100%; height: 6px; border-radius: 3px; background: currentColor; }
.pair { display: inline-block; padding: 2px var(--space-1); border-radius: 4px; font-family: var(--font-display); font-weight: 600; border: 1px solid var(--line); }
.type-specs { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.spec { border-top: 1px solid var(--line); padding-top: var(--space-2); }
.spec-display { font-family: var(--font-display); font-weight: 600; font-size: var(--text-hero); line-height: 1.1; letter-spacing: -0.02em; max-width: none; }
.spec-body { font-size: var(--text-h2); line-height: 1.5; max-width: 40ch; }
.spec-label { font: 500 var(--text-h2) var(--font-label); letter-spacing: 0.04em; text-transform: uppercase; max-width: none; }
.space-scale { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-1); }
.space-scale li { display: flex; align-items: center; gap: var(--space-2); }
.sp-bar { height: var(--space-2); background: var(--fg); border-radius: 2px; }

.md { max-width: none; }
.md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 80ch; }
.md h2 { font-size: var(--text-h2); margin: var(--space-5) 0 var(--space-2); }
.md h3 { font-size: var(--text-body); margin: var(--space-4) 0 var(--space-1); }
.md p, .md li { color: var(--fg); }
.md p + p { margin-top: var(--space-2); }
.md ul, .md ol { padding-left: var(--space-3); display: grid; gap: var(--space-1); }
.md .table-scroll { max-width: none; }
.md-links { margin-bottom: var(--space-4); }
.md-links a[href] { font-weight: 600; }
.md-src { margin-top: var(--space-5); font-size: var(--text-label); }

.pieces { display: grid; gap: var(--space-6); }
.piece { display: grid; gap: var(--space-3); }
@media (min-width: 1024px) { .piece { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } }
.piece-art { display: grid; gap: var(--space-2); background: var(--orc-mist); border-radius: var(--radius-card); padding: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); align-items: start; }
.piece-art.n1 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.piece-art.n1 img { max-width: 520px; }
.piece-art img { width: 100%; height: auto; box-shadow: 0 2px 10px color-mix(in srgb, var(--orc-ink) 16%, transparent); background: var(--orc-paper); }
.piece-body h3 { font-size: var(--text-h2); }
.social { display: grid; gap: var(--space-3); margin-top: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.social figure { margin: 0; display: grid; gap: var(--space-1); }
.social img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.social figcaption { font-size: var(--text-label); color: var(--fg-2); }
.shots { display: grid; gap: var(--space-3); margin-top: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (min-width: 1024px) { .shots { grid-template-columns: 3fr 3fr 1fr 1fr; } }
.shots figure { margin: 0; display: grid; gap: var(--space-1); }
.shots img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.shots figcaption { font-size: var(--text-label); color: var(--fg-2); }
.sw-ink { background: var(--orc-ink); }
.sw-slate { background: var(--orc-slate); }
.sw-hairline { background: var(--orc-hairline); }
.sw-mist { background: var(--orc-mist); }
.sw-paper { background: var(--orc-paper); }
.sw-green { background: var(--orc-green); }
.sw-mint { background: var(--orc-mint); }
.sw-amber { background: var(--orc-amber); }
.sw-red { background: var(--orc-red); }
.pair-ink-paper { color: var(--orc-ink); background: var(--orc-paper); }
.pair-ink-mist { color: var(--orc-ink); background: var(--orc-mist); }
.pair-slate-paper { color: var(--orc-slate); background: var(--orc-paper); }
.pair-slate-mist { color: var(--orc-slate); background: var(--orc-mist); }
.pair-green-paper { color: var(--orc-green); background: var(--orc-paper); }
.pair-green-mist { color: var(--orc-green); background: var(--orc-mist); }
.pair-paper-green { color: var(--orc-paper); background: var(--orc-green); }
.pair-paper-ink { color: var(--orc-paper); background: var(--orc-ink); }
.pair-hairline-ink { color: var(--orc-hairline); background: var(--orc-ink); }
.pair-mint-ink { color: var(--orc-mint); background: var(--orc-ink); }
.pair-ink-amber { color: var(--orc-ink); background: var(--orc-amber); }
.pair-red-paper { color: var(--orc-red); background: var(--orc-paper); }
.pair-slate-ink { color: var(--orc-slate); background: var(--orc-ink); }
.pair-amber-paper { color: var(--orc-amber); background: var(--orc-paper); }
.sp-1 { width: var(--space-1); }
.sp-2 { width: var(--space-2); }
.sp-3 { width: var(--space-3); }
.sp-4 { width: var(--space-4); }
.sp-5 { width: var(--space-5); }
.sp-6 { width: var(--space-6); }
.sp-7 { width: var(--space-7); }
.sp-8 { width: var(--space-8); }