/*
  Origin Media: site styles.
  Every colour, size and timing comes from tokens.css. Sections are either .night (ink) or .day (paper).
  Contents:
    1. Base            6. Home opening and rings     11. Case studies
    2. Type            7. Work list                  12. Forms
    3. Layout          8. Ledger, steps, prices      13. Footer
    4. Header and nav  9. People and placeholders    14. Motion states
    5. Buttons, links 10. FAQ and closing band
*/

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 var(--text-body)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, picture, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
::selection { background: var(--brass); color: var(--ink); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
.day :focus-visible { outline-color: var(--brass-deep); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--brass); color: var(--ink); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 14px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 2. Type ---------- */
.t-hero, .t-title, .t-case, .t-statement {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.t-hero { font-size: var(--text-hero); line-height: 0.98; max-width: 13ch; }
.t-title { font-size: var(--text-title); line-height: 1.02; max-width: 18ch; }
.t-case { font-size: var(--text-case); line-height: 1; }
.t-statement { font-size: var(--text-statement); line-height: 1.18; max-width: 28ch; }
.t-lead { font-size: var(--text-lead); line-height: 1.5; max-width: 40ch; }
.t-h3 { font: 600 clamp(1.125rem, 1rem + 0.4vw, 1.375rem)/1.3 var(--font-sans); letter-spacing: -0.01em; }
.label { font-size: var(--text-label); font-weight: 500; letter-spacing: 0.01em; color: var(--bone-3); }
.muted { color: var(--bone-2); }
.night .brass, .brass { color: var(--brass); }
.prose p + p { margin-top: 1em; }
.prose { max-width: 62ch; }
.prose h2 { font: 600 1.25rem/1.3 var(--font-sans); margin: 2.2em 0 0.6em; }
.prose ul { list-style: disc; padding-left: 1.2em; margin: 0.8em 0; }
.prose li + li { margin-top: 0.3em; }

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.night { background: var(--ink); color: var(--bone); }
.day { background: var(--paper); color: var(--ink); }
.day .label { color: var(--ink-muted); }
.day .muted { color: var(--ink-muted); }
.day .brass { color: var(--brass-deep); }
.section { padding-block: var(--section); }
.section--tight { padding-block: var(--section-tight); }
.section + .section.day, .section.day + .section.day { border-top: 1px solid var(--rule-day); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px clamp(32px, 5vw, 96px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 80px);
}
.section-head .t-lead { justify-self: start; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(32px, 5vw, 96px);
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.page-opening { padding-top: calc(var(--section) + 40px); padding-bottom: var(--section-tight); }
.page-opening .t-lead { margin-top: clamp(20px, 3vw, 32px); color: var(--bone-2); }

/* ---------- 4. Header and nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--ink-raised) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--rule-night);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.mark { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); }
/* Brand mark: the origin point inside its first ring. */
.mark__glyph { width: 20px; height: 20px; border-radius: 50%; border: 1.25px solid var(--bone); display: grid; place-items: center; flex: none; }
.mark__glyph::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.site-nav { display: flex; gap: 28px; font-size: var(--text-ui); }
.site-nav a { text-decoration: none; color: var(--bone-2); padding-block: 6px; transition: color var(--dur-short) ease; }
.site-nav a:hover { color: var(--bone); }
.site-nav a[aria-current="page"] { color: var(--bone); box-shadow: inset 0 -1px 0 var(--brass); }
.menu-toggle { display: none; }

@media (max-width: 860px) {
  .site-header__inner { gap: 12px; min-height: 64px; }
  .js .menu-toggle {
    display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px;
    background: none; color: var(--bone); border: 1px solid var(--rule-night); border-radius: 999px;
    font: 500 var(--text-ui)/1 var(--font-sans); cursor: pointer;
  }
  .js .site-nav {
    position: fixed; inset: 64px 0 0 0; z-index: 49;
    flex-direction: column; gap: 0; padding: 24px var(--gutter);
    background: var(--ink);
    visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .js .site-nav.is-open { visibility: visible; opacity: 1; transition: opacity 200ms ease; }
  .js .site-nav a { font: 300 2rem/1.2 var(--font-serif); color: var(--bone); padding-block: 14px; border-bottom: 1px solid var(--rule-night); }
  .js .site-nav a[aria-current="page"] { box-shadow: none; color: var(--brass); }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .site-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 16px; }
  .site-header .button--small { padding-inline: 14px; }
}
@media (max-width: 380px) { .site-header .button--small { display: none; } }

/* ---------- 5. Buttons and links ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--brass); color: var(--ink);
  font: 600 var(--text-ui)/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) ease, transform 120ms ease;
}
.button:hover { background: color-mix(in srgb, var(--brass) 82%, white); }
.button:active { transform: translateY(1px); }
.button .arrow { transition: transform var(--dur-short) var(--ease-settle); }
.button:hover .arrow { transform: translateX(3px); }
.button[disabled] { opacity: 0.6; cursor: progress; }
.button--small { min-height: 40px; padding: 0 18px; font-size: 0.875rem; }
.day .button { background: var(--ink); color: var(--paper); }
.day .button:hover { background: color-mix(in srgb, var(--ink) 85%, var(--brass)); }

.link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--dur-short) ease;
}
.link:hover { text-decoration-color: currentColor; }
.link-arrow { display: inline-flex; gap: 0.5em; align-items: center; font-weight: 500; text-decoration: none; }
.link-arrow span { box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 40%, transparent); transition: box-shadow var(--dur-short) ease; }
.link-arrow:hover span { box-shadow: inset 0 -1px 0 currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(24px, 3vw, 36px); }

/* ---------- 6. Home opening and rings ---------- */
.opening { position: relative; overflow: hidden; background: var(--ink); }
.stage { position: relative; height: 100vh; height: 100svh; min-height: 600px; }
html:not(.js) .stage {
  background:
    radial-gradient(circle at 60% 47%, var(--brass) 0 4px, transparent 5px),
    repeating-radial-gradient(circle at 60% 47%, transparent 0 44px, rgba(228, 223, 211, 0.16) 44px 45px);
}
.rings { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: pan-y; }
.opening__copy {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter);
  bottom: clamp(36px, 8vh, 88px); max-width: 860px; pointer-events: none;
}
.opening__copy a { pointer-events: auto; }
.opening__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(20px, 3vh, 32px); }
.opening__sub p { max-width: 42ch; color: var(--bone-2); }
.legend {
  position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(36px, 8vh, 88px);
  width: min(280px, 26vw); font-size: 0.8125rem; line-height: 1.5; color: var(--bone-3); display: grid; gap: 10px;
}
.legend__now { display: flex; align-items: baseline; gap: 8px; color: var(--bone-2); }
.legend__now::before { content: ""; flex: none; width: 14px; height: 1.6px; background: var(--brass); transform: translateY(-3px); }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: 11px; color: var(--bone-3); }
@media (max-width: 1000px) { .legend { display: none; } }
/* Range rings run through the copy on phones: fade them out behind the text. */
@media (max-width: 720px) {
  .opening--range .stage::after {
    content: ""; position: absolute; inset: 45% 0 0 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ink) 92%, transparent) 40%);
  }
}

/* The first project, waiting inside the rings */
.reveal { display: block; text-decoration: none; color: inherit; position: absolute; inset: 0; z-index: 1; background: var(--ink); opacity: 0; clip-path: circle(0px at 50% 50%); }
.reveal__frame {
  position: absolute; top: clamp(88px, 12vh, 124px); left: var(--gutter); right: var(--gutter);
  bottom: clamp(170px, 26vh, 240px); overflow: hidden; border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--rule-night);
}
.reveal__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.reveal__caption {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(36px, 8vh, 88px);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; opacity: 0;
}
.reveal__caption .t-case { display: flex; align-items: baseline; gap: 18px; }
.reveal__caption .label { color: var(--brass); font-size: 0.8125rem; }
html:not(.motion) .reveal { position: relative; inset: auto; height: 90svh; opacity: 1; clip-path: none; }
html:not(.motion) .reveal__caption { opacity: 1; }
html:not(.motion) .scroll-cue { display: none; }

/* ---------- 7. Work list ---------- */
.work-list { display: grid; gap: clamp(56px, 7vw, 120px); }
.work-item { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px clamp(24px, 3vw, 48px); align-items: end; text-decoration: none; color: inherit; }
.work-item:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.work-item:nth-child(even) .work-item__media { order: 2; }
.work-item__media { overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule-day); aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.night .work-item__media { box-shadow: 0 0 0 1px var(--rule-night); background: var(--ink-raised); }
.work-item__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 900ms var(--ease-grow); }
.work-item:hover .work-item__media img { transform: scale(1.02); }
.work-item__meta { display: grid; gap: 8px; padding-bottom: 6px; }
.work-item__name { font: 300 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem)/1.05 var(--font-serif); letter-spacing: -0.02em; }
.work-item__line { color: var(--ink-muted); max-width: 34ch; }
.night .work-item__line { color: var(--bone-2); }
.work-item__year { display: flex; gap: 10px; align-items: center; }
.work-item__year .tag { border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; font-size: 0.6875rem; }
.work-item .link-arrow { margin-top: 8px; }
@media (max-width: 860px) {
  .work-item, .work-item:nth-child(even) { grid-template-columns: 1fr; }
  .work-item:nth-child(even) .work-item__media { order: 0; }
}

/* ---------- 8. Ledger, steps, prices ---------- */
.ledger { border-top: 1px solid currentColor; }
.ledger__row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px clamp(32px, 5vw, 96px);
  padding-block: clamp(22px, 2.6vw, 36px); border-bottom: 1px solid var(--rule-day);
}
.night .ledger__row { border-bottom-color: var(--rule-night); }
.ledger__row dt { font: 300 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.15 var(--font-serif); letter-spacing: -0.015em; }
.ledger__row dd { max-width: 54ch; padding-top: 0.35em; color: var(--ink-muted); }
.night .ledger__row dd { color: var(--bone-2); }
@media (max-width: 760px) { .ledger__row { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); counter-reset: step; }
.step { border-top: 1px solid currentColor; padding-top: 20px; counter-increment: step; }
.step__n { font-size: var(--text-label); color: var(--brass-deep); font-weight: 600; }
.night .step__n { color: var(--brass); }
.step__n::before { content: counter(step); }
.step h3 { margin: 12px 0 10px; }
.step p { color: var(--ink-muted); max-width: 34ch; }
.night .step p { color: var(--bone-2); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

.prices { border-top: 1px solid currentColor; }
.price {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 8px clamp(24px, 4vw, 64px);
  align-items: baseline; padding-block: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--rule-day);
}
.night .price { border-bottom-color: var(--rule-night); }
.price__name { font: 300 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.1 var(--font-serif); }
.price__what { color: var(--ink-muted); max-width: 46ch; }
.night .price__what { color: var(--bone-2); }
.price__what small { display: block; margin-top: 6px; font-size: 0.875rem; }
.price__amount { justify-self: end; font-weight: 600; white-space: nowrap; }
.price__amount span { font-weight: 400; color: var(--ink-muted); margin-right: 4px; }
.night .price__amount span { color: var(--bone-3); }
@media (max-width: 760px) {
  .price { grid-template-columns: 1fr auto; }
  .price__what { grid-column: 1 / -1; grid-row: 2; }
}

.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--rule-day); }
.check-list li { padding: 14px 0 14px 26px; border-bottom: 1px solid var(--rule-day); position: relative; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 12px; height: 1.5px; background: var(--brass-deep); }
@media (max-width: 760px) { .check-list { grid-template-columns: 1fr; } }

/* ---------- 9. People and placeholders ---------- */
.people { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 96px); align-items: center; }
.people .actions { margin-top: 28px; }
@media (max-width: 860px) { .people { grid-template-columns: 1fr; } }
.bios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.bio .ph-frame { aspect-ratio: 4 / 5; margin-bottom: 20px; }
.bio h3 { margin-bottom: 4px; }
.bio .label { display: block; margin-bottom: 10px; }
@media (max-width: 700px) { .bios { grid-template-columns: 1fr; } }

/* Photographs in a fixed frame; --ratio sets the shape, --pos keeps the subject in view. */
.photo { aspect-ratio: var(--ratio, 4 / 5); overflow: hidden; border-radius: var(--radius); background: var(--ink-raised); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.photo-credit { margin-top: 10px; font-size: 0.75rem; color: var(--bone-3); }
.day .photo-credit { color: var(--ink-muted); }
.bio .photo { margin-bottom: 20px; }
.story-aside { display: grid; gap: 24px; align-content: start; }
.story-aside .photo { max-width: 320px; }
@media (max-width: 860px) { .story-aside .photo { max-width: 420px; } }

/* Labelled placeholder for photos that haven't been shot yet. */
.ph-frame {
  display: grid; place-items: center; text-align: center; padding: 16px;
  aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(228, 223, 211, 0.05) 12px 13px), var(--ink-raised);
  border: 1px dashed color-mix(in srgb, var(--brass) 45%, transparent);
  color: var(--bone-3); font-size: 0.8125rem; line-height: 1.4;
}
.day .ph-frame {
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(13, 17, 26, 0.05) 12px 13px), color-mix(in srgb, var(--ink) 5%, var(--paper));
  border-color: color-mix(in srgb, var(--brass-deep) 45%, transparent); color: var(--ink-muted);
}

/* ---------- 10. FAQ and closing band ---------- */
.faq { border-top: 1px solid currentColor; max-width: 920px; }
.faq details { border-bottom: 1px solid var(--rule-day); }
.night .faq details { border-bottom-color: var(--rule-night); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-block: 22px; font: 600 clamp(1.0625rem, 1rem + 0.3vw, 1.25rem)/1.35 var(--font-sans);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform var(--dur-short) var(--ease-settle);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 24px; max-width: 62ch; color: var(--ink-muted); }
.night .faq details p { color: var(--bone-2); }

.band { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }
.band p { max-width: 46ch; color: var(--bone-2); margin-top: 16px; }

.close { text-align: center; display: grid; justify-items: center; gap: 22px; }
.close__point { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--rule-night); display: grid; place-items: center; margin-bottom: 12px; position: relative; }
.close__point::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--bone) 8%, transparent); }
.close__point::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 24px 6px color-mix(in srgb, var(--brass) 35%, transparent); }
.close .t-title { max-width: 16ch; }
.close p { color: var(--bone-2); max-width: 44ch; }
.close .actions { justify-content: center; }

/* ---------- 11. Case studies ---------- */
.case-opening { padding-top: calc(var(--section) + 20px); }
.case-opening__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.case-opening__head .t-lead { color: var(--bone-2); }
.case-hero { overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule-night); }
.case-hero img { width: 100%; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); border-top: 1px solid var(--rule-night); padding-top: 24px; margin-top: clamp(40px, 5vw, 72px); }
.facts dt { font-size: var(--text-label); color: var(--bone-3); margin-bottom: 6px; }
.facts dd { color: var(--bone); }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.case-block + .case-block { margin-top: clamp(48px, 6vw, 96px); }
.case-block .label { display: block; padding-top: 0.6em; }
.case-block p { max-width: 58ch; }
.case-block p + p { margin-top: 1em; }

.shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.shot { grid-column: span 12; }
.shot--half { grid-column: span 6; }
.shot--phone { grid-column: span 3; }
.shot--phones { grid-column: span 6; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); align-self: start; }
.shot__img { overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule-day); background: #fff; }
.shot__img img { width: 100%; }
.shot--phones .shot__img { border-radius: 18px; }
.shot figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--ink-muted); }
@media (max-width: 860px) {
  .shot--half, .shot--phones { grid-column: span 12; }
}

.logo-plate { display: grid; place-items: center; padding: clamp(48px, 8vw, 120px) var(--gutter); background: #fff; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule-day); }
.logo-plate img { width: min(520px, 70%); }

.result { border-top: 1px solid currentColor; padding-top: clamp(24px, 3vw, 40px); }

.next-project { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; text-decoration: none; }
.next-project .t-case { transition: color var(--dur-short) ease; }
.next-project:hover .t-case { color: var(--brass); }

/* ---------- 12. Forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.875rem; font-weight: 500; }
.field__opt { color: var(--bone-3); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  font: 400 1rem/1.4 var(--font-sans); color: var(--bone);
  background: var(--ink-raised); border: 1px solid var(--rule-night); border-radius: var(--radius);
  transition: border-color var(--dur-short) ease;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bone-2) 50%), linear-gradient(135deg, var(--bone-2) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
.field select option { background: var(--ink-raised); color: var(--bone); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--bone) 35%, transparent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 0; border-color: transparent; }
.field [aria-invalid="true"] { border-color: #e08b74; }
.field__error { font-size: 0.875rem; color: #f0a48f; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }
.form__status { font-size: 0.9375rem; color: var(--bone-2); max-width: 48ch; }
.form__status.is-ok { color: var(--brass); }
.form__status.is-error { color: #f0a48f; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } .form .button { width: 100%; } }

.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px clamp(32px, 6vw, 120px); }
.contact-aside { display: grid; gap: 28px; align-content: start; font-size: 0.9375rem; color: var(--bone-2); }
.contact-aside strong { display: block; color: var(--bone); font-weight: 500; margin-bottom: 4px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- 13. Footer ---------- */
.site-footer { border-top: 1px solid var(--rule-night); padding-block: clamp(48px, 6vw, 80px) 32px; font-size: 0.875rem; color: var(--bone-2); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
.site-footer__top p { margin-top: 14px; max-width: 30ch; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.site-footer__cols h2 { font: 500 var(--text-label)/1.4 var(--font-sans); color: var(--bone-3); margin-bottom: 12px; }
.site-footer__cols li + li { margin-top: 8px; }
.site-footer__cols a { text-decoration: none; }
.site-footer__cols a:hover { color: var(--bone); }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule-night); color: var(--bone-3); font-size: 0.8125rem; }
@media (max-width: 760px) { .site-footer__top { grid-template-columns: 1fr; } .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 14. Motion states (only when html.motion is set) ---------- */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.word > span { display: inline-block; will-change: transform; }
.motion [data-fade], .motion [data-reveal] { opacity: 0; }
.motion [data-split]:not(.is-split) { visibility: hidden; }
.motion [data-grow] { clip-path: circle(0% at 50% 50%); }

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