/* About and Contact: page palettes, editorial layouts, About's rigid studio mark and Contact's optical assembly.
   Brand tokens come from main.css; the two page palettes are defined once here. */
:is(.page-about, .page-contact) {
  --studio-paper: #f0ebdf;
  --studio-ink: #172c29;
  --studio-line: rgba(28, 48, 41, .2);
  --studio-muted: #4f5c55;
  --studio-sage: #688069;
  --studio-wash: #e0e5d3;
}

body.page-about {
  background: var(--studio-paper);
  color: var(--studio-ink);
  --color-ink: var(--studio-ink);
  --color-ink-muted: var(--studio-muted);
  --color-accent: #795638;
  --focus-ring-color: var(--accent-text);
  --nav-active-color: #2a5565;
  --nav-indicator: linear-gradient(90deg, rgba(47, 107, 87, 0.86), rgba(15, 37, 48, 0.8));
}

body.page-contact {
  --studio-ground: #101e1b;
  --studio-ground-raised: #172823;
  --studio-line: rgba(226, 210, 178, .22);
  --studio-muted: #b8c2b8;
  --studio-copper: #d1a783;
  --studio-copper-soft: #c0a387;
  background: var(--studio-ground);
  color: #f2eee3;
  --color-ink: #f2eee3;
  --color-ink-muted: var(--studio-muted);
  --color-line: var(--studio-line);
  --color-accent: #d9ae88;
  --nav-link-color: #c5cfc5;
  --nav-link-hover-color: #fbf5e9;
  --nav-link-hover-bg: rgba(232, 218, 187, .06);
  --nav-link-hover-border: rgba(232, 218, 187, .18);
  --nav-link-hover-shadow: none;
  --nav-active-color: #f2dec4;
  --nav-active-bg: rgba(224, 193, 147, .08);
  --nav-active-border: rgba(224, 193, 147, .3);
  --nav-active-glow: none;
  --nav-indicator: linear-gradient(90deg, rgba(196, 107, 60, 0.94), rgba(176, 140, 82, 0.84));
  --focus-ring-color: #e2b385;
  --accent-text: var(--brass);
}

:is(.page-about, .page-contact)::before,
:is(.page-about, .page-contact) main::before,
:is(.page-about, .page-contact) main::after { content: none; }

:is(.page-about, .page-contact) main { background: transparent; }

.page-about .site-header { background: rgba(240, 235, 223, .95); }
.page-about .site-footer { background: #e6e2d7; }
.page-contact .site-header { background: rgba(16, 30, 27, .96); }
.page-contact .site-footer { background: var(--studio-ground); border-color: var(--studio-line); }
.page-contact .nav-toggle { color: #f2eee3; }
html:not(.js) :is(.page-about, .page-contact) .nav-toggle { display: none; }

:is(.page-about, .page-contact) .container { max-width: 1240px; }
:is(.page-about, .page-contact) :is(h1, h2, h3) { font-weight: var(--heading-weight); }

/* Label tier: kickers, facts and the ledger. */
.studio-kicker {
  margin: 0 0 1.6rem;
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  line-height: 1.5;
  font-weight: 500;
  text-transform: uppercase;
}

/* Links change colour and keep their hairline; the arrow leans the way it goes. */
.studio-inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 48px;
  padding: .7rem 0;
  border-bottom: 1px solid currentColor;
  font-size: .91rem;
  font-weight: 500;
  transition: color var(--motion-quick) var(--ease-standard);
}
.studio-inline-link .icon { transition: transform var(--motion-quick) var(--ease-standard); }
.studio-inline-link:is(:hover, :focus-visible) { color: var(--accent-text); }
.studio-inline-link:is(:hover, :focus-visible) .icon { transform: translate(2px, -2px); }
.studio-inline-link:is(:hover, :focus-visible) .icon--arrow-down { transform: translateY(2px); }
.studio-inline-link:active { opacity: .72; transition-duration: var(--motion-instant); }

/* About */
.studio-about-hero {
  position: relative;
  padding: clamp(4rem, 7vw, 7.5rem) 0 0;
  background: radial-gradient(ellipse at 78% 32%, var(--studio-wash) 0%, transparent 48%);
}
.studio-about-hero__grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  align-items: center;
  gap: clamp(1rem, 4vw, 5rem);
}
.studio-about-hero h1 {
  font-size: clamp(3.2rem, 5.7vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: var(--track-display);
  margin-bottom: 2rem;
}
.studio-about-hero h1 em { font-style: normal; color: var(--studio-sage); }
.studio-about-hero__intro {
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.65;
  max-width: 36ch;
  margin-bottom: 1.8rem;
}
.studio-about-origin {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  margin-top: clamp(3rem, 6vw, 6rem);
  padding-block: 1.3rem;
  border-top: 1px solid var(--studio-line);
  color: var(--studio-muted);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* The rigid mark: one machined brass band (a seamless conic face over filled wall slices, so it keeps its
   thickness under tilt) and stones that always face the viewer, as spheres do. Pieces never move relative to
   each other; only the object turns. The rest pose is --rx/--ry/--rz; studio-pages.js writes them under the
   pointer spring. The stones sit proud of the band (their depth exceeds the band's reach at full tilt), so
   they never cut into it. */
.studio-orbit {
  min-width: 0;
  --orbit-metal-light: #f1dc9b;
  --orbit-metal-mid: #b89a54;
  --orbit-metal-dark: #735d32;
  --orbit-node-light: #626951;
  --orbit-node-mid: #28322b;
  --orbit-node-dark: #0d1714;
  --orbit-node-z: 32px;
  --orbit-centre-z: 48px;
}
.studio-orbit__field {
  position: relative;
  height: clamp(320px, 36vw, 495px);
  width: 100%;
  overflow: clip;
  contain: paint;
  isolation: isolate;
  perspective: 950px;
  touch-action: pan-y pinch-zoom;
}
.studio-orbit__object {
  --rx: -17deg;
  --ry: -23deg;
  --rz: -9deg;
  --band: clamp(5px, .65vw, 9px);
  position: absolute;
  width: 86%;
  aspect-ratio: 1;
  left: 7%;
  top: 50%;
  margin-top: -43%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
}
.studio-orbit__ground {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 5%;
  height: 16%;
  background: radial-gradient(ellipse, rgba(28, 48, 30, .16), transparent 68%);
  transform: rotate(-10deg);
}
.studio-orbit__rim {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--band) - .5px), #000 calc(100% - var(--band) + .5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--band) - .5px), #000 calc(100% - var(--band) + .5px));
}
.studio-orbit__rim--face {
  transform: translateZ(6px);
  background: conic-gradient(from 200deg, #7a6233, var(--orbit-metal-mid) 12%, #e9cf8b 24%, #fff3c4 30%, #e3c67f 36%, var(--orbit-metal-mid) 50%, #8a7038 64%, var(--orbit-metal-dark) 76%, #9c8243 88%, #7a6233);
}
.studio-orbit__rim--wall { background: #6f5a31; }
.studio-orbit__rim--w1 { transform: translateZ(3px); }
.studio-orbit__rim--w2 { transform: translateZ(0); }
.studio-orbit__rim--w3 { transform: translateZ(-3px); }
.studio-orbit__rim--w4 { transform: translateZ(-6px); }
.studio-orbit__rim--rear { transform: translateZ(-9px); background: #5f4d2a; }
.studio-orbit__spoke {
  position: absolute;
  left: 50%;
  top: 49.35%;
  width: 40%;
  height: 1.5%;
  border-radius: 2px;
  background: linear-gradient(#fff0b9, var(--orbit-metal-light) 22%, var(--orbit-metal-mid) 42%, var(--orbit-metal-dark) 92%);
  box-shadow: 0 2px 0 rgba(61, 53, 29, .6);
  transform-origin: 0 50%;
}
.studio-orbit__spoke--one { transform: translateZ(8px) rotate(-154deg); }
.studio-orbit__spoke--two { transform: translateZ(8px) rotate(-38deg); }
.studio-orbit__spoke--three { transform: translateZ(8px) rotate(42deg); }
.studio-orbit__node {
  --node-z: var(--orbit-node-z);
  position: absolute;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 22%, rgba(247, 237, 196, .75) 0, rgba(170, 174, 139, .28) 7%, transparent 17%), radial-gradient(circle at 35% 28%, var(--orbit-node-light), var(--orbit-node-mid) 40%, var(--orbit-node-dark) 73%);
  box-shadow: inset -2px -2px 2px rgba(0, 0, 0, .5), inset 1px 1px 1px rgba(211, 191, 136, .7), 0 2px 0 rgba(140, 119, 69, .6);
  transform: translate(-50%, -50%) translateZ(var(--node-z)) rotateZ(calc(-1 * var(--rz))) rotateY(calc(-1 * var(--ry))) rotateX(calc(-1 * var(--rx)));
}
.studio-orbit__node--one { left: 14%; top: 32.5%; }
.studio-orbit__node--two { left: 81.5%; top: 25.4%; }
.studio-orbit__node--three { left: 79.7%; top: 76.8%; }
.studio-orbit__node--centre { --node-z: var(--orbit-centre-z); width: 23%; left: 50%; top: 50%; }
.studio-orbit__footer {
  padding: .8rem .5rem 0;
  color: var(--studio-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.studio-orbit__footer p { margin: 0; }

.studio-method { padding: clamp(4.5rem, 9vw, 9rem) 0; }
/* "How we work" lands where the sticky intro rests, so nothing moves a second time. */
#studio-method { scroll-margin-top: 101px; }
.studio-method__layout { display: grid; grid-template-columns: .86fr 1.2fr; gap: clamp(3rem, 7vw, 8rem); }
.studio-method__intro { max-width: 37ch; }
.studio-method__intro h2 { font-size: clamp(2.7rem, 4.5vw, 4.2rem); line-height: 1.06; margin-bottom: 1.6rem; letter-spacing: var(--track-title); }
.studio-method__intro > p:last-child { color: var(--studio-muted); }
.studio-method__steps { list-style: none; padding: 0; margin: 0; }
.studio-method__steps li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1.25rem; padding: 2.2rem 0; border-top: 1px solid var(--studio-line); }
.studio-method__steps li:first-child { padding-top: .4rem; border-top: 0; }
.studio-method__steps li:last-child { padding-bottom: 0; }
.studio-method__number { color: var(--studio-sage); font-family: var(--font-display); font-size: 2rem; line-height: 1.2; font-variant-numeric: lining-nums; }
.studio-method__steps h3 { font-size: clamp(1.7rem, 2.3vw, 2.2rem); letter-spacing: var(--track-title); margin-bottom: .8rem; }
.studio-method__steps p { color: var(--studio-muted); max-width: 43ch; margin-bottom: 0; }

.studio-about-end { padding: clamp(3rem, 6vw, 6rem) 0; background: #dfe3d5; }
.studio-about-end__layout { display: grid; grid-template-columns: 1.25fr .8fr; gap: 2rem 5rem; align-items: end; }
.studio-about-end h2 { font-size: clamp(2.4rem, 4vw, 3.5rem); margin: 0; line-height: 1.08; letter-spacing: var(--track-title); }
.studio-about-end p { max-width: 34ch; color: #4b5f50; }
/* The body of work so far, counted from the site's data. */
.studio-about-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}
.studio-about-ledger a {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  min-height: 44px;
  padding-top: .35rem;
  color: #4b5f50;
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  transition: color var(--motion-quick) var(--ease-standard);
}
.studio-about-ledger__count {
  color: var(--studio-ink);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: lining-nums;
}
.studio-about-ledger a:is(:hover, :focus-visible) { color: var(--accent-text); }
.studio-about-ledger a:active { opacity: .72; transition-duration: var(--motion-instant); }

/* Contact */
.studio-contact-hero { padding: clamp(3.5rem, 5vw, 5rem) 0 0; background: radial-gradient(ellipse at 83% 15%, rgba(135, 88, 53, .16), transparent 47%); }
.studio-contact-hero__grid { display: grid; grid-template-columns: 1.18fr .8fr; align-items: center; column-gap: 4rem; }
.studio-contact-hero__copy { grid-column: 1; grid-row: 1; min-width: 0; }
.studio-contact-hero__grid > .contact-optic { grid-column: 2; grid-row: 1; }
.studio-contact-hero h1 { font-size: clamp(3.7rem, 7vw, 6.4rem); line-height: 1.01; letter-spacing: var(--track-display); word-spacing: .1em; margin: 0 0 1.8rem; }
.studio-contact-hero h1 em { font-style: normal; color: var(--studio-copper); }
.studio-contact-hero__copy > p:last-child { font-size: 1.05rem; max-width: 35ch; color: var(--studio-muted); }

/* The optic: a still poster, then the 120-pose canvas. The studio logo is the fallback for no-JS, still
   preferences, failure and context loss; capable visits keep the field empty (is-pending) until the poster
   arrives, then draw the object in once (is-revealed). */
.contact-optic { min-width: 0; width: 100%; }
.contact-optic__field {
  position: relative;
  --contact-field-height: clamp(310px, 32vw, 430px);
  height: var(--contact-field-height);
  width: 100%;
  overflow: clip;
  contain: paint;
  isolation: isolate;
  perspective: 1000px;
  touch-action: pan-y pinch-zoom;
}
.contact-optic__object {
  position: absolute;
  width: min(112%, 480px, calc(var(--contact-field-height) * 1.1));
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  transform-origin: center;
}
.contact-optic__object > :is(img, canvas, svg) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.contact-optic__fallback { padding: 14%; }
.contact-optic__poster, .contact-optic__canvas { visibility: hidden; }
.contact-optic.is-pending .contact-optic__fallback,
.contact-optic.has-poster .contact-optic__fallback,
.contact-optic.is-ready .contact-optic__fallback { visibility: hidden; }
.contact-optic.has-poster .contact-optic__poster { visibility: visible; }
.contact-optic.is-ready .contact-optic__canvas { visibility: visible; }
.contact-optic.is-ready .contact-optic__poster { visibility: hidden; }
/* From the first paint, before any script: a capable visit holds the logo back for 900ms, the time the poster
   usually needs; a slower visit then sees the logo. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .contact-optic__fallback { animation: contact-fallback-hold 900ms step-end; }
}
@keyframes contact-fallback-hold {
  from { visibility: hidden; }
}
.contact-optic.is-revealed .contact-optic__object { animation: contact-optic-reveal var(--motion-settle) var(--ease-standard) both; }
@keyframes contact-optic-reveal {
  from { opacity: 0; scale: .965; }
}
.contact-optic__caption { margin: .4rem 0 0; text-align: center; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--studio-muted); }

.studio-contact-address { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin-top: clamp(3rem, 5vw, 5rem); padding-top: 2rem; padding-bottom: 3.2rem; border-top: 1px solid var(--studio-line); }
.studio-contact-address .studio-kicker { margin-bottom: .9rem; color: var(--studio-copper-soft); }
.studio-contact-email {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  column-gap: clamp(1rem, 4vw, 4rem);
  font-size: clamp(1.55rem, 3.85vw, 3.5rem);
  line-height: 1.3;
  letter-spacing: var(--track-title);
  padding: .25rem 0 .9rem;
  font-family: var(--font-display);
  border-bottom: 1px solid rgba(226, 210, 178, .45);
  transition: color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard);
}
.studio-contact-email__text { min-width: 0; }
/* The address must read and transcribe cleanly: the @ gets room from its neighbours (tracking, not margins, so a
   selection of the address highlights as one run). */
.studio-contact-email__at { letter-spacing: .02em; }
.studio-contact-email__arrow { flex-shrink: 0; font-family: var(--font-text); font-size: .75em; color: var(--studio-copper); transition: transform var(--motion-quick) var(--ease-standard); }
.studio-contact-email:is(:hover, :focus-visible) { color: var(--brass-hi); border-color: var(--studio-copper); }
.studio-contact-email:is(:hover, :focus-visible) .studio-contact-email__arrow { transform: translate(3px, -3px); }
.studio-contact-email:active { opacity: .72; transition-duration: var(--motion-instant); }
.studio-contact-address__details { display: flex; flex-wrap: wrap; gap: .7rem 3rem; align-items: start; justify-content: space-between; margin-top: 1.3rem; }
.studio-contact-address__details p { margin: 0; color: var(--studio-muted); font-size: var(--text-caption); line-height: var(--leading-caption); }

/* Copy address: the button is its own feedback. Its labels share one grid cell, so its width is the longest
   label's and it never moves; the sentence for assistive technology goes to a live region. */
.studio-contact-copy { position: relative; display: flex; align-items: center; }
.studio-copy-button {
  display: inline-grid;
  font: inherit;
  font-size: var(--text-caption);
  color: var(--studio-copper);
  border: 1px solid var(--studio-line);
  border-radius: 2px;
  background: transparent;
  padding: .5rem .9rem;
  min-height: 44px;
  cursor: pointer;
  transition: background-color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard), color var(--motion-quick) var(--ease-standard), scale var(--motion-instant) var(--ease-standard);
}
.studio-copy-button__label {
  grid-area: 1 / 1;
  text-align: center;
  transition: opacity var(--motion-quick) var(--ease-standard), translate var(--motion-medium) var(--ease-standard);
}
/* The state labels leave the rendering once faded; "Copy address" stays in the tree as the button's name. */
.studio-copy-button__label:not(:first-child) {
  opacity: 0;
  visibility: hidden;
  translate: 0 .35em;
  transition-property: opacity, translate, visibility;
  transition-duration: var(--motion-quick), var(--motion-medium), 0s;
  transition-delay: 0s, 0s, var(--motion-quick);
}
.studio-copy-button[data-copy-state] .studio-copy-button__label:first-child { opacity: 0; translate: 0 -.35em; }
.studio-copy-button[data-copy-state="copied"] .studio-copy-button__label--copied,
.studio-copy-button[data-copy-state="selected"] .studio-copy-button__label--selected { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.studio-copy-button[data-copy-state] { color: var(--brass-hi); border-color: var(--studio-copper); }
.studio-copy-button:is(:hover, :focus-visible) { background-color: rgba(230, 207, 173, .08); border-color: var(--studio-copper); }
.studio-copy-button:active { scale: .985; background-color: rgba(230, 207, 173, .14); }
.studio-copy-hint {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  width: max-content;
  max-width: min(32ch, 80vw);
  color: var(--studio-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  text-align: right;
  opacity: 0;
  transition: opacity var(--motion-quick) var(--ease-standard);
}
.studio-copy-button[data-copy-state="selected"] + .studio-copy-hint { opacity: 1; }

.studio-contact-brief { background: var(--studio-ground-raised); padding: clamp(3.5rem, 6.5vw, 6.5rem) 0; }
.studio-contact-brief__head { display: grid; grid-template-columns: .55fr 1.2fr 1fr; gap: 1rem 3rem; align-items: start; }
.studio-contact-brief__head .studio-kicker { color: var(--studio-copper-soft); padding-top: .5rem; }
.studio-contact-brief__head h2 { font-size: clamp(2.2rem, 3.5vw, 3.4rem); line-height: 1.08; letter-spacing: var(--track-title); }
.studio-contact-brief__head > p:last-child { color: var(--studio-muted); max-width: 30ch; padding-top: .3rem; }
.studio-contact-prompts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 4rem; padding: 0; margin: 3rem 0 2.4rem; }
.studio-contact-prompts li { padding-top: 1.3rem; border-top: 1px solid var(--studio-line); }
.studio-contact-prompts li > span { color: var(--studio-copper-soft); font-size: var(--text-label); letter-spacing: var(--track-label); display: block; margin-bottom: 1.6rem; font-variant-numeric: tabular-nums; }
.studio-contact-prompts h3 { font-size: 1.65rem; letter-spacing: var(--track-heading); margin-bottom: .85rem; }
.studio-contact-prompts p { max-width: 27ch; color: var(--studio-muted); }
/* The brief ends where the reader is ready to write: a native mailto carrying the three prompts. */
.studio-contact-brief__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 3rem; }
.studio-contact-brief__actions .studio-inline-link:first-child { color: var(--studio-copper); }
.studio-contact-brief__actions .studio-inline-link:first-child:is(:hover, :focus-visible) { color: var(--brass-hi); }
.studio-inline-link--quiet { color: var(--studio-muted); border-bottom-color: var(--studio-line); }
.page-contact .studio-inline-link:is(:hover, :focus-visible) { color: var(--brass-hi); }

@media (min-width: 1000px) {
  .studio-method__intro { position: sticky; top: 125px; align-self: start; }
  #studio-method { scroll-margin-top: 125px; }
}
@media (max-width: 1000px) {
  .studio-about-hero__grid { grid-template-columns: 1.15fr 1fr; gap: 1rem; }
  .studio-about-hero h1 { font-size: clamp(3.05rem, 6.4vw, 4.5rem); }
  .studio-orbit__field { height: 340px; }
  .studio-contact-hero__grid { grid-template-columns: 1.1fr .85fr; gap: 1rem; }
  .studio-contact-hero h1 { font-size: clamp(3.4rem, 7vw, 5.5rem); }
  .studio-contact-brief__head { grid-template-columns: 1fr 1fr; }
  .studio-contact-brief__head .studio-kicker { grid-column: 1 / -1; margin-bottom: .4rem; }
  .studio-contact-prompts { gap: 2rem; }
}
/* Keep the primary contact action in view on shorter desktop screens. */
@media (min-width: 761px) and (max-height: 800px) {
  .studio-contact-hero { padding-top: 2rem; }
  .contact-optic__field { --contact-field-height: 320px; }
  .studio-contact-address { margin-top: 2rem; padding-top: 1.3rem; padding-bottom: 2rem; }
  .studio-contact-address__details { margin-top: 1rem; }
}
@media (max-width: 760px) {
  .page-contact .site-nav { background: #182a24; border-color: var(--studio-line); }
  .studio-about-hero { padding-top: 3rem; }
  .studio-about-hero__grid { grid-template-columns: 1fr; }
  .studio-about-hero h1 { font-size: clamp(3.1rem, 10.7vw, 5.5rem); margin-bottom: 1.6rem; }
  .studio-about-hero__intro { max-width: 40ch; }
  .studio-orbit { width: min(100%, 480px); margin: .4rem auto 0; --orbit-node-z: 24px; --orbit-centre-z: 36px; }
  .studio-orbit__field { height: clamp(290px, 85vw, 410px); }
  .studio-orbit__object { width: 78%; left: 11%; margin-top: -39%; }
  .studio-orbit__footer { padding: 0 .6rem; }
  .studio-about-origin { margin-top: 2.4rem; }
  .studio-method__layout { grid-template-columns: 1fr; gap: 2.7rem; }
  .studio-method__intro { max-width: 42ch; }
  .studio-method__steps li { grid-template-columns: 2.5rem 1fr; gap: .9rem; }
  .studio-method__number { font-size: 1.65rem; }
  .studio-about-end__layout { grid-template-columns: 1fr; }
  .studio-about-end p { margin-top: .4rem; }
  .studio-contact-hero { padding-top: 3rem; }
  .studio-contact-hero__grid { grid-template-columns: 1fr; gap: 1rem; }
  .studio-contact-hero__grid > .contact-optic { grid-column: 1; grid-row: 3; margin-bottom: 2rem; }
  .studio-contact-hero h1 { font-size: clamp(3.3rem, 10.8vw, 5.8rem); }
  .studio-contact-hero__copy > p:last-child { max-width: 33ch; }
  .contact-optic { width: min(100%, 410px); margin: 0 auto; }
  .contact-optic__field { --contact-field-height: clamp(280px, 86vw, 360px); }
  .studio-contact-address { margin-top: 2.3rem; padding-top: 1.4rem; }
  .studio-contact-email { font-size: clamp(1.45rem, 5.8vw, 2.6rem); gap: .65rem; letter-spacing: var(--track-heading); }
  .studio-contact-address__details { gap: .7rem; }
  .studio-copy-hint { right: auto; left: 0; text-align: left; }
  .studio-contact-brief__head { grid-template-columns: 1fr; gap: .5rem; }
  .studio-contact-brief__head > p:last-child { max-width: 39ch; }
  .studio-contact-prompts { grid-template-columns: 1fr; gap: 1.6rem; margin: 2.2rem 0; }
  .studio-contact-prompts li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .75rem; padding-top: 1.5rem; }
  .studio-contact-prompts li > span { margin: .3rem 0 0; }
  .studio-contact-prompts h3 { margin-bottom: .7rem; }
  .studio-contact-prompts p { grid-column: 2; max-width: 31ch; }
  .studio-contact-brief__actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 360px) {
  .studio-contact-hero h1 { font-size: 3.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.studio-inline-link, .studio-contact-email) .icon { transition: none; transform: none !important; }
  .studio-copy-button, .studio-copy-button__label, .studio-copy-hint { transition: none; }
  .studio-copy-button__label { translate: none !important; }
  .contact-optic.is-revealed .contact-optic__object { animation: none; }
}
@media (forced-colors: active) {
  :is(.page-about, .page-contact),
  :is(.page-about, .page-contact) :is(.site-header, .site-footer, main, section) { background: Canvas; color: CanvasText; }
  :is(.page-about, .page-contact) :is(p, h1, h2, h3, em, a, button, span, svg) { color: CanvasText; }
  /* The decoration goes; the caption stays. */
  .studio-orbit__field, .contact-optic { display: none; }
  .studio-orbit__footer { padding-top: 0; }
  .studio-contact-email, .studio-inline-link, .studio-method__steps li, .studio-contact-prompts li, .studio-about-origin, .studio-contact-address, .studio-copy-button { border-color: CanvasText; }
  :is(.page-about, .page-contact) :focus-visible { outline-color: Highlight; }
}