:root {
  /* Keep the late-scroll chapters in the homepage's existing warm atelier
     family. The earlier neutral-gray override made About look like a separate
     site and exposed every pinned-section boundary as a colour band. */
  --ink: #2b1f14;
  --ink-soft: #38281c;
  --paper: #f4eadb;
  --paper-light: #faf4e8;
  --paper-dark: #d7c4a8;
  --white: #faf4e8;
  --muted: #a88f75;
  --line: rgba(43, 31, 20, 0.22);
  --line-light: rgba(250, 244, 232, 0.23);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --pad: clamp(1.125rem, 2.4vw, 2.75rem);
  --header-h: 4.75rem;
  --display: "Arial Narrow", "Aptos Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --utility: "Courier New", Courier, monospace;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  transform: translateY(-180%);
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--white);
}
.skip-link:focus { transform: none; }

.grain {
  position: fixed;
  inset: -45%;
  z-index: 180;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  /* Static material, so the About/Contact sequence only moves when the
     visitor scrolls. */
  animation: none;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -3%); }
  50% { transform: translate(-3%, 2%); }
  75% { transform: translate(3%, 3%); }
  100% { transform: translate(-2%, -2%); }
}

/* These sections are scroll *ranges* for a sticky stage, nothing else. The
   global `section { padding: clamp(80px, 12vh, 150px) 0 }` was landing on them
   too, which put 108px of empty ink above each stage before it could arrive and
   another 108px below after it released — a ~216px dead band between every pair
   of chapters where nothing is choreographed and the film reads as separate
   phases rather than one scrub. The stages carry their own spacing. */
.scroll-scene { position: relative; padding-block: 0; }
.sticky-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* The chapter bar is fixed over the bottom of the viewport while every About
   stage centres its copy in a full 100vh, so on a short window the copy sat
   under the bar. Shrinking the stage while the bar is up centres everything in
   the space that is actually free; the strip the bar occupies is the same ink
   as the section behind it, so the seam does not read. */
body[data-active-room="about"]:not(.project-open) .about-editorial .sticky-stage {
  height: calc(100vh - var(--about-chapter-clearance, 4.6rem));
}

/* The About film keeps its authored full-viewport scenes, but it no longer
   traps fast readers inside them. This compact chapter strip appears only
   while About owns the viewport and offers both direct chapter access and one
   contextual next action. */
.about-chapter-controls {
  position: fixed;
  z-index: 49;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(46rem, calc(100vw - (var(--pad) * 2)));
  min-height: 3.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  color: var(--white);
  background: rgba(31, 22, 15, .96);
  border: 1px solid rgba(250, 244, 232, .22);
  box-shadow: .55rem .65rem 0 rgba(7, 7, 6, .28), 0 1rem 2.5rem rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, .75rem, 0);
  transition:
    opacity .24s ease,
    transform .42s var(--ease-out),
    visibility 0s linear .42s;
}

body[data-active-room="about"]:not(.project-open) .about-chapter-controls {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
  transition:
    opacity .24s ease,
    transform .42s var(--ease-out),
    visibility 0s linear;
}

.about-chapter-controls__steps {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-chapter-controls a {
  min-width: 0;
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .45rem .7rem;
  color: rgba(250, 244, 232, .58);
  text-decoration: none;
  font-family: var(--utility);
  transition: color .2s ease, background-color .2s ease;
}

.about-chapter-controls__steps a + a {
  border-left: 1px solid rgba(250, 244, 232, .12);
}

.about-chapter-controls a span {
  color: rgba(233, 180, 92, .68);
  font-size: .6875rem;
  letter-spacing: .06em;
}

.about-chapter-controls a b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .035em;
  white-space: nowrap;
}

.about-chapter-controls__steps a[aria-current="step"] {
  color: var(--white);
  background: rgba(196, 106, 43, .2);
}

.about-chapter-controls__steps a[aria-current="step"] span {
  color: var(--gold);
}

.about-chapter-controls__next {
  border-left: 1px solid rgba(233, 180, 92, .42);
  color: var(--gold) !important;
  background: rgba(196, 106, 43, .1);
  white-space: nowrap;
}

.about-chapter-controls__next:hover,
.about-chapter-controls__next:focus-visible {
  color: var(--ink) !important;
  background: var(--gold);
}

.about-chapter-controls__next i {
  font-style: normal;
  transition: transform .24s var(--ease-out);
}

.about-chapter-controls__next:hover i,
.about-chapter-controls__next:focus-visible i {
  transform: translateY(.18rem);
}
.label, .hero__utility, .hero__scroll, .identity__topline, .contact__topline {
  font: .66rem/1.2 var(--utility);
  letter-spacing: .075em;
  text-transform: uppercase;
}

.about-editorial > .hero { z-index: 4; height: max(240vh, 1850px); background: var(--ink); color: var(--ink); }
.hero__stage { background: var(--ink); }
.hero__field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 62% 38%, rgba(255,255,255,.08), transparent 37%),
    linear-gradient(90deg, rgba(0,0,0,.15), transparent 35%, rgba(255,255,255,.03));
}
.hero__utility { position: absolute; z-index: 8; margin: 0; color: rgba(244,241,234,.7); }
.hero__utility--left { left: var(--pad); top: 26%; }
.hero__utility--right { right: var(--pad); top: 26%; text-align: right; }
.hero__scroll { position: absolute; z-index: 8; left: var(--pad); bottom: 1.5rem; margin: 0; color: rgba(244,241,234,.5); }
/* The portrait is opaque and starts at 100% - 7vw - min(64vw, 57rem), so at
   27vw this word had its last two letters buried under the photograph and
   printed a large, confident "ABO" — which reads as "ABC" and says nothing.
   Sized to the column that is actually clear, it says ABOUT. The alpha comes
   up with it: a word that is legible is deliberate, whereas .04 across a
   quarter of the screen is a smudge. */
.hero__word {
  position: absolute;
  left: .8vw;
  top: 50%;
  transform: translateY(-50%);
  /* The clear column beside the portrait is 100vw - 7vw - min(64vw, 57rem), so
     29vw below 1425px. This face sets ABOUT at ~2.36x its size, which puts the
     word at 27.9vw — inside the column with room for the parallax drift. */
  font: 700 11.8vw/.7 var(--display);
  letter-spacing: -.11em;
  color: rgba(244,241,234,.075);
  white-space: nowrap;
}
.hero__portrait {
  position: absolute;
  inset: 0 7vw 0 auto;
  width: min(64vw, 57rem);
  margin: 0;
  overflow: hidden;
  background: #111;
  will-change: transform, clip-path, opacity;
}
.hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.035);
  will-change: transform;
}
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, transparent 14%, transparent 87%, var(--ink) 100%);
}
.hero-card {
  position: absolute;
  z-index: 10;
  left: 8.5vw;
  top: 15vh;
  width: min(31vw, 27rem);
  min-height: min(51vh, 29rem);
  padding: 1.45rem 1.55rem;
  display: flex;
  flex-direction: column;
  color: var(--white);
  background: #20170f;
  border-top: 1px solid rgba(233, 180, 92, .62);
  box-shadow: 1.6rem 2.2rem 4rem rgba(0,0,0,.19);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.hero-card__eyebrow { margin: 0; font: .65rem/1 var(--utility); letter-spacing: .06em; }
.hero-card h1,
.hero-card h2 {
  margin: 3.5rem 0 0;
  font: 700 clamp(3.5rem, 6.6vw, 6.4rem)/.78 var(--display);
  letter-spacing: -.04em;
}
.hero-card h1 span,
.hero-card h2 span { display: block; overflow: hidden; }
.hero-card__foot { margin-top: auto; display: flex; align-items: end; justify-content: space-between; font: .65rem/1 var(--utility); }
.hero-card__foot strong { font: 700 4.6rem/.72 var(--display); letter-spacing: -.04em; }
.hero__statement {
  position: absolute;
  z-index: 12;
  left: clamp(1.25rem, 5.5vw, 6.5rem);
  right: var(--pad);
  top: 50%;
  width: auto;
  display: grid;
  grid-template-columns: minmax(6rem, 9vw) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
  opacity: 0;
  transform: translateY(calc(-50% + 4rem));
  will-change: transform, opacity;
}
.hero__statement::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8vh -4vw -8vh -8vw;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(170,166,157,.98) 0%, rgba(170,166,157,.92) 52%, rgba(170,166,157,.42) 77%, transparent 100%);
  opacity: .86;
}
.hero__statement-meta {
  padding-top: .45rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 7rem;
  font: .65rem/1 var(--utility);
  letter-spacing: .08em;
}
.hero__statement-meta span:last-child { color: rgba(18,18,16,.56); }
.hero__statement-copy {
  margin: 0;
  max-width: 21ch;
  font: 700 clamp(2.9rem, 5.7vw, 6.15rem)/.89 var(--display);
  letter-spacing: -.04em;
  text-wrap: balance;
  color: var(--ink);
}
.statement-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  clip-path: inset(0 0 105% 0);
  opacity: 0;
  transform: translateY(1.05em);
  will-change: transform, clip-path, opacity;
}
.statement-line:nth-child(3) { margin-left: clamp(1.5rem, 7.5vw, 8rem); }
.statement-line em { font-weight: 400; }
.hero__statement-rule {
  grid-column: 2;
  height: 1px;
  margin-top: clamp(1.4rem, 3.2vh, 2.5rem);
  overflow: hidden;
  background: rgba(18,18,16,.18);
}
.hero__statement-rule i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__exit,
.identity__exit {
  position: absolute;
  z-index: 40;
  inset: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  will-change: transform;
}
.hero__exit { background: var(--ink); }

.about-editorial > .identity { z-index: 3; height: max(290vh, 2300px); background: var(--ink); }
.identity__stage { color: var(--white); background: var(--ink); }
.identity__topline {
  position: absolute;
  z-index: 14;
  top: calc(var(--header-h) + .9rem);
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
}
.identity__photo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 51%;
  width: 34vw;
  height: 70vh;
  margin: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  clip-path: inset(0 49% 0 49%);
  background: #090909;
  contain: layout paint;
  will-change: transform, clip-path, opacity;
}
.identity__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale(1) contrast(1.04) brightness(.94);
  transform: scale(1.08);
  will-change: transform;
}
.identity__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent 48%, rgba(0,0,0,.54));
}
.identity__photo figcaption {
  position: absolute;
  z-index: 2;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  font: .62rem/1 var(--utility);
  letter-spacing: .06em;
}
.identity__title {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  font: 700 clamp(4rem, 10vw, 10rem)/.78 var(--display);
  letter-spacing: -.04em;
}
.identity__title span { position: absolute; white-space: nowrap; will-change: transform, opacity; }
.identity__title-a { left: -40vw; top: 30%; }
.identity__title-b { right: -50vw; bottom: 21%; }
.identity__intro {
  position: absolute;
  z-index: 9;
  left: 7vw;
  right: 7vw;
  bottom: clamp(3rem, 7vh, 6rem);
  display: grid;
  grid-template-columns: minmax(7rem, 10vw) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: start;
  opacity: 0;
  transform: translateY(4rem);
  will-change: transform, opacity;
}
.identity__intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -7vh -7vw -4vh;
  background: linear-gradient(180deg, transparent 0%, rgba(18,18,16,.35) 22%, rgba(18,18,16,.94) 72%);
  pointer-events: none;
}
.identity__intro > span {
  padding-top: .58rem;
  font: .64rem/1 var(--utility);
  letter-spacing: .075em;
}
.identity__intro p {
  margin: 0;
  max-width: 22ch;
  font: 500 clamp(2.6rem, 4.25vw, 4.75rem)/.94 var(--display);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.identity__intro p span { display: block; }
.identity__intro p span + span { margin-left: clamp(1.5rem, 6vw, 7rem); }
.identity__profile {
  position: absolute;
  z-index: 11;
  top: calc(var(--header-h) + 3.5rem);
  right: 5.5vw;
  bottom: 5.25rem;
  width: min(47vw, 47rem);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(7vh);
  will-change: transform, opacity;
}
.identity__profile-head {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-light);
  font: .63rem/1.35 var(--utility);
  letter-spacing: .07em;
}
.identity__profile-head strong { max-width: 34ch; text-align: right; font-weight: 400; }
.identity__profile h2 {
  margin: clamp(1.75rem, 4.5vh, 3rem) 0 1.5rem;
  max-width: 12ch;
  font: 600 clamp(3rem, 5.15vw, 5.6rem)/.88 var(--display);
  letter-spacing: -.04em;
}
.identity__profile h2 em { font-weight: 400; }
.identity__profile-copy {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-light);
}
.identity__profile-copy .label { margin: 0 0 1rem; color: rgba(247,244,235,.62); }
.identity__profile-copy p:last-child { margin: 0; max-width: 48ch; font-size: .9rem; line-height: 1.55; }
.identity__ledger {
  margin: auto 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-light);
}
.identity__ledger div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line-light); }
.identity__ledger div:nth-child(odd) { border-right: 1px solid var(--line-light); }
.identity__ledger div:nth-child(even) { padding-left: 1rem; }
.identity__ledger dt { margin-bottom: .55rem; font: .6rem/1 var(--utility); letter-spacing: .07em; text-transform: uppercase; color: rgba(247,244,235,.6); }
.identity__ledger dd { margin: 0; font-size: clamp(.95rem, 1.35vw, 1.25rem); letter-spacing: -.025em; }
.identity__cross {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  transform: translate(-50%, -50%);
  opacity: .4;
}
.identity__cross i { position: absolute; background: var(--white); }
.identity__cross i:first-child { left: 0; right: 0; top: 50%; height: 1px; }
.identity__cross i:last-child { top: 0; bottom: 0; left: 50%; width: 1px; }
.identity__exit { background: var(--ink); }

.contact {
  position: relative;
  z-index: 12;
  height: 100svh;
  min-height: 44rem;
  padding: calc(var(--header-h) + .35rem) var(--pad) .9rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--white);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

/* Every pinned editorial chapter now hands off when the preceding sticky stage
   begins to unpin. Without this overlap, each scene spent one full viewport
   sliding an already-faded stage away before the next chapter arrived, which
   produced long apparently broken dark intervals. */
#about > .identity,
#about > .contact {
  margin-top: -100vh;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 10%, rgba(233, 180, 92, 0.08), transparent 28rem),
    radial-gradient(circle at 12% 92%, rgba(196, 106, 43, 0.06), transparent 32rem);
}
.contact::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 46%;
  top: var(--header-h);
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(247,244,235,.12) 15%, rgba(247,244,235,.12) 85%, transparent);
}
.contact > * { position: relative; z-index: 1; }
.contact__topline {
  min-height: 2.15rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(247,244,235,.12);
  font: .6rem/1 var(--utility);
  letter-spacing: .08em;
  color: rgba(247,244,235,.6);
}
.contact__topline > span:nth-child(2) { text-align: center; }
.contact__status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-align: right;
  color: var(--white);
}
.contact__status i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 .3rem rgba(52, 211, 153, 0.18);
}

.contact__screen {
  min-height: 0;
  padding: clamp(1.15rem, 2.5vh, 1.85rem) 0 clamp(.9rem, 1.8vh, 1.35rem);
  display: grid;
  grid-template-columns: minmax(18rem, .88fr) minmax(31rem, 1.12fr);
  gap: clamp(2rem, 4.4vw, 5rem);
  align-items: stretch;
}
.contact__screen > * { min-width: 0; }
.contact__intro {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vh, 2.4rem);
  padding: clamp(.45rem, 1.1vh, .9rem) 0 .25rem;
}
.contact__headline-block { min-width: 0; }
.contact__eyebrow {
  margin: 0 0 clamp(1rem, 2vh, 1.5rem);
  font: .62rem/1 var(--utility);
  letter-spacing: .1em;
  color: var(--amber);
}
.contact__headline-block h2 {
  margin: 0;
  max-width: none;
  font: 600 clamp(3.45rem, 4.25vw, 4.8rem)/.88 var(--display);
  letter-spacing: -.035em;
  color: var(--white);
}
.contact__headline-block h2 span {
  display: block;
  width: max-content;
  max-width: 100%;
  transform-origin: left bottom;
  will-change: transform, opacity;
}
@media (min-width: 1280px) {
  .contact__headline-block h2 span { white-space: nowrap; }
}
.contact__headline-block h2 span:first-child {
  font-weight: 300;
  font-style: italic;
  color: rgba(250, 244, 232, 0.7);
}
.contact__lead {
  max-width: 44ch;
  margin: clamp(1.2rem, 2.5vh, 1.8rem) 0 0;
  font-size: clamp(.92rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: rgba(250, 244, 232, 0.8);
}

.contact__direct-block {
  padding: clamp(1rem, 2vh, 1.45rem) 0 0;
  border-top: 1px solid rgba(247,244,235,.12);
}
.contact__direct-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
}
.contact__direct-head .label {
  margin: 0 0 .5rem;
  font: .58rem/1 var(--utility);
  letter-spacing: .08em;
  color: rgba(250, 244, 232, 0.5);
}
.contact__email {
  display: inline-block;
  max-width: 100%;
  font: 400 clamp(1.45rem, 2.4vw, 2.4rem)/1 var(--display);
  letter-spacing: -.03em;
  color: var(--gold);
  text-decoration: none;
  transition: color .3s ease;
}
.contact__email:hover {
  color: var(--white);
}
.copy-button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.1rem;
  border: 1px solid rgba(247,244,235,.2);
  border-radius: 999px;
  background: rgba(247,244,235,.06);
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
  font: 500 .75rem/1 var(--utility);
  letter-spacing: .04em;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.copy-button i { font-style: normal; transition: transform .35s ease; }
.copy-button:hover {
  border-color: var(--gold);
  background: rgba(233, 180, 92, 0.15);
  color: var(--gold);
}
.copy-button:hover i { transform: translate(.15rem, -.15rem); }
.copy-status {
  min-height: 1.2rem;
  margin: .4rem 0 0;
  font: .68rem/1 var(--utility);
  letter-spacing: .04em;
  color: var(--gold);
}

.contact__links-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(.75rem, 1.6vh, 1.1rem);
}
.contact__links { display: flex; gap: .8rem; }
.contact__links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  border: 1px solid rgba(247,244,235,.15);
  border-radius: 999px;
  background: rgba(247,244,235,.04);
  color: rgba(250, 244, 232, 0.85);
  font: .74rem/1 var(--utility);
  letter-spacing: .03em;
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.contact__links a:hover {
  border-color: var(--amber);
  color: var(--white);
  background: rgba(196, 106, 43, 0.15);
}
.contact__focus-brief {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .9rem;
  border: 1px solid var(--amber);
  border-radius: 999px;
  background: rgba(196, 106, 43, 0.12);
  color: var(--gold);
  cursor: pointer;
  font: 500 .74rem/1 var(--utility);
  letter-spacing: .04em;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.contact__focus-brief i { font-style: normal; transition: transform .35s ease; }
.contact__focus-brief:hover {
  background: var(--amber);
  color: var(--white);
}
.contact__focus-brief:hover i { transform: translateX(.25rem); }

.contact-form {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 100%;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto minmax(6.6rem, 1fr) auto;
  gap: 0 1.35rem;
  padding: clamp(1.25rem, 2.2vw, 2.2rem);
  border: 1px solid rgba(196, 106, 43, 0.22);
  border-radius: 12px;
  background: #181512;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + .5rem);
  transform-origin: right center;
  transition: border-color .45s ease, box-shadow .45s ease;
}
.contact-form.is-attention {
  border-color: var(--gold);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gold);
}
.contact-form > * { position: relative; z-index: 1; }
.contact-form__head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1.5rem;
  padding-bottom: clamp(1.2rem, 2.4vh, 1.8rem);
  border-bottom: 1px solid rgba(247,244,235,.1);
}
.contact-form__head .label {
  margin: 0 0 .4rem;
  font: .58rem/1 var(--utility);
  letter-spacing: .08em;
  color: var(--amber);
}
.contact-form__head h3 {
  margin: 0;
  max-width: 14ch;
  font: 500 clamp(1.8rem, 2.8vw, 3.2rem)/.95 var(--display);
  letter-spacing: -.03em;
  color: var(--white);
}
.contact-form__head > span {
  flex: none;
  font: .6rem/1.4 var(--utility);
  letter-spacing: .06em;
  color: rgba(250, 244, 232, 0.5);
  text-align: right;
}
.contact-form__toggle {
  display: none;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(43, 31, 20, .34);
  border-radius: .25rem;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: 600 .7rem/1 var(--utility);
  letter-spacing: .04em;
}
.contact-form__toggle i { font: normal 1rem/1 var(--body); }
.contact-form__body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(6.6rem, 1fr) auto;
  gap: 0 1.35rem;
}
.field {
  position: relative;
  min-width: 0;
  padding: clamp(.75rem, 1.35vh, 1rem) 0 clamp(.65rem, 1.15vh, .9rem) 2.2rem;
  border-top: 1px solid rgba(247,244,235,.1);
  transition: border-color .3s ease;
}
.field::before {
  content: attr(data-index);
  position: absolute;
  left: 0;
  top: clamp(.9rem, 1.5vh, 1.12rem);
  font: 600 .55rem/1 var(--utility);
  letter-spacing: .06em;
  color: rgba(250, 244, 232, 0.4);
  transition: color .3s ease;
}
.field--full { grid-column: 1 / -1; }
.field label {
  display: block;
  margin-bottom: .3rem;
  font: .58rem/1 var(--utility);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(250, 244, 232, 0.55);
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: .35rem 0 .15rem;
  border: 0;
  border-radius: 0;
  outline: 2px solid transparent;
  outline-offset: 4px;
  color: var(--white);
  background: transparent;
  font-size: clamp(.92rem, 1.08vw, 1.1rem);
  line-height: 1.35;
  font-family: inherit;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline-color: var(--gold);
}
.field textarea {
  height: 100%;
  min-height: 5.2rem;
  resize: none;
}
.field--subject textarea {
  min-height: 3.1rem;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(250, 244, 232, 0.35); opacity: 1; }
.field:focus-within { border-top-color: var(--gold); }
.field:focus-within::before { color: var(--gold); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  color: #fca5a5;
  outline-color: #fca5a5;
}
.field-error {
  display: none;
  margin: .3rem 0 0;
  color: #fca5a5;
  font: 600 .7rem/1.35 var(--utility);
  letter-spacing: .01em;
}
.field input[aria-invalid="true"] + .field-error,
.field textarea[aria-invalid="true"] + .field-error { display: block; }
.form-submit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(14rem, .8fr) 1fr;
  align-items: center;
  gap: 1.4rem;
  padding-top: clamp(.9rem, 1.6vh, 1.25rem);
  border-top: 1px solid rgba(247,244,235,.1);
}
.form-submit::before { display: none; }
.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: 3rem;
  padding: .4rem 1.2rem;
  border: 1px solid var(--amber);
  border-radius: 999px;
  background: var(--amber);
  color: var(--white);
  cursor: pointer;
  font: 600 .84rem/1 var(--utility);
  letter-spacing: .04em;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.submit-button i {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-style: normal;
  transition: transform .35s ease, background .35s ease;
}
.submit-button:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.submit-button:hover i {
  background: var(--ink);
  color: var(--gold);
  transform: translate(.15rem, -.15rem);
}
#formStatus {
  margin: 0;
  max-width: 34ch;
  font: .8rem/1.45 var(--utility);
  letter-spacing: .03em;
  color: rgba(250, 244, 232, 0.78);
  transition: opacity .35s ease, transform .35s ease;
}

.footer {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
  grid-template-areas: "location brand support top";
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 3rem);
  min-height: 2rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line-light);
  font: .6rem/1 var(--utility);
  letter-spacing: .05em;
}
.footer-location { grid-area: location; }
.footer > a { position: relative; }
.footer-top { grid-area: top; justify-self: end; }

.footer-brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.footer-brand i {
  width: 1.15rem;
  height: 1.25rem;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .52;
  -webkit-mask: url('/assets/img/ry-monogram.svg') center / contain no-repeat;
  mask: url('/assets/img/ry-monogram.svg') center / contain no-repeat;
}

/* Support routes belong to the same semantic footer. Keeping the group
   borderless and transparent prevents it from reading as a duplicate bar. */
.support-links-footer {
  grid-area: support;
  min-width: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  font: .6rem/1.6 var(--utility);
  letter-spacing: .05em;
}
.support-links-footer > span { white-space: nowrap; }
.support-links-footer nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(.9rem, 1.4vw, 1.5rem);
  min-width: 0;
}
.support-links-footer a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
}
.support-links-footer a:hover { color: var(--white); }

/* The complete footer fits as one line from 1280px upward. Only compact
   tablet widths need a second grid row, and it remains inside the same surface. */
@media (max-width: 1279px) and (min-width: 761px) {
  .footer {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "location brand top"
      "support support support";
    column-gap: 2rem;
    row-gap: .15rem;
  }

  .support-links-footer nav { justify-content: flex-end; }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .contact { min-height: 42rem; }
  .contact__screen {
    grid-template-columns: minmax(16rem, .72fr) minmax(29rem, 1.28fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .contact__headline-block h2 { max-width: 10ch; font-size: clamp(3.15rem, 5vw, 4.15rem); }
  .contact__lead { max-width: 34ch; font-size: .9rem; }
  .contact__email { font-size: clamp(1.25rem, 2.25vw, 1.7rem); white-space: nowrap; }
  .contact__links-row { align-items: flex-end; }
  .contact__links { flex-direction: column; gap: .55rem; }
  .contact-form { padding: 1.1rem; gap: 0 .95rem; }
  .contact-form__head { padding-bottom: 1.1rem; }
  .contact-form__head h3 { font-size: clamp(2rem, 3.3vw, 2.85rem); }
  .field { padding-left: 1.7rem; }
  .form-submit { grid-template-columns: 1fr; gap: .45rem; }
}

@media (max-width: 760px) {
  .contact {
    height: auto;
    min-height: 100svh;
    padding: calc(var(--header-h) + .45rem) var(--pad) 1.2rem;
    overflow: clip;
  }
  .contact::after { display: none; }
  .contact__topline { grid-template-columns: 1fr auto; }
  .contact__topline > span:nth-child(2) { display: none; }
  .contact__status { font-size: .6875rem; }
  .contact__screen {
    padding: 1.5rem 0 1rem;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .contact__intro { gap: 2.2rem; }
  .contact__headline-block h2 {
    max-width: 100%;
    font-size: clamp(2.4rem, 9.5vw, 3.8rem);
    line-height: .92;
  }
  .contact__lead { max-width: 34ch; font-size: .95rem; }
  .contact__direct-head { grid-template-columns: 1fr; align-items: start; }
  .contact__email { font-size: clamp(1.75rem, 9vw, 2.55rem); white-space: normal; }
  .copy-button { justify-self: start; }
  .contact__links-row { align-items: flex-end; }
  .contact__links { flex-direction: column; gap: .7rem; }
  .contact-form {
    width: 100%;
    max-width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 1.15rem;
    overflow: visible;
  }
  .contact-form__head { padding-bottom: 2rem; }
  .contact-form__head h3 { font-size: clamp(2.35rem, 11vw, 3.3rem); }
  .contact-form__head > span { display: none; }
  .field { grid-column: 1 / -1; padding: 1rem 0 .9rem 1.9rem; }
  .field textarea { min-height: 7.5rem; }
  .field--subject textarea { min-height: 3.75rem; }
  .form-submit { grid-template-columns: 1fr; gap: .75rem; }
  .footer {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "location top"
      "support support";
    gap: .25rem 1rem;
  }
  .footer-brand { display: none; }
  .support-links-footer {
    grid-template-columns: 1fr;
    gap: .1rem;
  }
  .support-links-footer nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
  }
  .support-links-footer a { justify-self: start; white-space: normal; }
}

@media (max-width: 420px) {
  .support-links-footer nav { grid-template-columns: 1fr; }
}

@media (max-height: 760px) and (min-width: 761px) {
  .contact {
    min-height: 39rem;
    padding-top: calc(var(--header-h) + .15rem);
    padding-bottom: .55rem;
  }
  .contact__topline { min-height: 1.75rem; padding-bottom: .45rem; }
  .contact__screen { padding: .75rem 0 .65rem; }
  .contact__intro { gap: 1rem; padding-top: .15rem; }
  .contact__eyebrow { margin-bottom: .75rem; }
  .contact__headline-block h2 { font-size: clamp(3.55rem, 5.7vw, 5rem); }
  .contact__lead { margin-top: .8rem; font-size: .82rem; line-height: 1.42; }
  .contact__direct-block { padding-top: .7rem; }
  .contact__direct-head .label { margin-bottom: .35rem; }
  .contact__links-row { padding-top: .5rem; }
  .contact-form { padding: .9rem 1rem; }
  .contact-form__head { padding-bottom: .75rem; }
  .contact-form__head .label { margin-bottom: .4rem; }
  .contact-form__head h3 { font-size: clamp(1.85rem, 2.9vw, 2.65rem); }
  .field { padding-top: .55rem; padding-bottom: .48rem; }
  .field::before { top: .72rem; }
  .field textarea { min-height: 4.4rem; }
  .form-submit { padding-top: .55rem; }
  .submit-button { min-height: 2.65rem; }
  .footer { min-height: 1.55rem; padding-top: .45rem; }
}

/* The Method panel is a fixed box (top: header + 3.5rem, bottom: 5.25rem) with
   variable content, and the chapter bar takes another 4.6rem off the stage. On
   anything under a tall desktop the ledger overran the box by ~120px, so the
   last two rows — Practice and Based — were clipped by the stage and read as
   "covered by the bottom tab". Reclaim that height from the panel's own
   margins, which are the loosest thing in it. */
@media (max-height: 900px) {
  .identity__profile { top: calc(var(--header-h) + 1.5rem); bottom: 3rem; }
  .identity__profile h2 { margin: clamp(1rem, 2.4vh, 2rem) 0 1rem; }
  .identity__profile-copy { padding-top: .8rem; }
  .identity__ledger div { padding: .62rem 1rem .62rem 0; }
  .identity__ledger dt { margin-bottom: .38rem; }
}

@media (max-width: 900px) {
  .hero { height: max(240vh, 1750px); }
  .hero__utility--left { top: 18%; }
  .hero__utility--right { display: none; }
  .hero__portrait { inset: 0 0 0 auto; width: 86vw; }
  /* An 86vw portrait leaves 14vw — no column to set a word in. Below this
     breakpoint the ghost goes back to being texture behind the photograph
     rather than type competing with it. */
  .hero__word { font-size: 30vw; left: -8vw; color: rgba(244,241,234,.05); }
  .hero__portrait::after { background: linear-gradient(90deg, var(--paper-dark) 0%, transparent 18%, transparent 94%); }
  .hero-card { left: var(--pad); top: 18vh; width: min(72vw, 23rem); min-height: 42vh; }
  .hero-card h1 { margin-top: 3rem; }
  .hero__statement { left: var(--pad); right: var(--pad); top: 52%; grid-template-columns: 6rem minmax(0, 1fr); }
  .hero__statement-copy { font-size: clamp(2.65rem, 6.5vw, 4.7rem); }
  .identity { height: max(295vh, 2200px); }
  .identity__photo { width: 56vw; height: 68vh; }
  .identity__intro { left: 5vw; right: 5vw; grid-template-columns: 7rem 1fr; }
  .identity__intro p { font-size: clamp(2.5rem, 5.7vw, 4.25rem); }
  .identity__profile { right: 4vw; width: 52vw; }
  .identity__profile h2 { font-size: clamp(2.8rem, 5.5vw, 4.8rem); }
}

@media (max-width: 620px) {
  body[data-active-room="about"] .site-mode-toggle-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .about-chapter-controls {
    bottom: max(.75rem, env(safe-area-inset-bottom));
    width: calc(100vw - 1.25rem);
    min-height: 3rem;
    grid-template-columns: minmax(0, 1fr) auto;
    box-shadow: .35rem .45rem 0 rgba(7, 7, 6, .26), 0 .8rem 2rem rgba(0, 0, 0, .2);
  }

  .about-chapter-controls a {
    min-height: 3rem;
    gap: .25rem;
    padding: .35rem .42rem;
  }

  .about-chapter-controls__steps a span {
    display: none;
  }

  .about-chapter-controls a b {
    font-size: .7rem;
    letter-spacing: 0;
  }

  .about-chapter-controls__next {
    padding-inline: .65rem !important;
  }

  .about-chapter-controls__next span {
    display: none;
  }

  .about-chapter-controls__next::before {
    content: "Next";
    font: 600 .7rem/1 var(--utility);
    letter-spacing: .03em;
  }

  .hero { height: max(235vh, 1600px); }
  .hero__word { font-size: 39vw; left: -10vw; }
  .hero__utility--left { top: 15%; }
  .hero__portrait { top: 10vh; width: 100vw; height: 90vh; }
  .hero__portrait img { object-position: 48% 18%; }
  .hero-card { top: 18vh; width: 76vw; min-height: 38vh; padding: 1.15rem; }
  .hero-card h1 { margin-top: 2.6rem; font-size: clamp(3.25rem, 17vw, 5.1rem); }
  .hero-card__foot strong { font-size: 3.5rem; }
  .hero__statement { left: var(--pad); right: var(--pad); top: 53%; grid-template-columns: 1fr; gap: 1rem; }
  .hero__statement::before { inset: -5vh -1rem -5vh -1rem; background: rgba(170,166,157,.94); }
  .hero__statement-meta { min-height: 0; flex-direction: row; }
  .hero__statement-copy { max-width: none; font-size: clamp(2.15rem, 10.2vw, 3.25rem); line-height: .91; }
  .statement-line:nth-child(3) { margin-left: 0; }
  .hero__statement-rule { grid-column: 1; margin-top: .8rem; }
  .identity { height: max(315vh, 2100px); }
  .identity__topline span:last-child { display: none; }
  .identity__photo { width: 82vw; height: 67vh; }
  .identity__photo figcaption { flex-direction: column; gap: .35rem; }
  .identity__title { font-size: clamp(3.4rem, 18vw, 6rem); }
  .identity__title-a { top: 26%; }
  .identity__title-b { bottom: 25%; }
  .identity__intro {
    left: var(--pad);
    right: var(--pad);
    bottom: 2rem;
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  .identity__intro::before { inset: -10vh -1rem -3vh; }
  .identity__intro p { max-width: none; font-size: clamp(2.25rem, 10.9vw, 3.25rem); line-height: .96; }
  .identity__intro p span + span { margin-left: 0; }
  .identity__profile {
    top: calc(var(--header-h) + 2.2rem);
    right: var(--pad);
    bottom: 5.25rem;
    left: var(--pad);
    width: auto;
  }
  .identity__profile-head { gap: 1rem; font-size: .6875rem; }
  .identity__profile-head strong { max-width: 22ch; }
  .identity__profile h2 { margin: 2.3rem 0 1.25rem; font-size: clamp(2.55rem, 12.5vw, 3.65rem); }
  .identity__profile-copy { grid-template-columns: 1fr; gap: .9rem; padding-top: .9rem; }
  .identity__profile-copy .label { margin-bottom: .45rem; }
  .identity__profile-copy p:last-child { font-size: .79rem; line-height: 1.44; }
  .identity__profile-copy > div:last-child p:last-child { max-width: 42ch; }
  .identity__ledger { grid-template-columns: 1fr 1fr; }
  .identity__ledger div { padding: .65rem .65rem .65rem 0; }
  .identity__ledger div:nth-child(even) { padding-left: .65rem; }
  .identity__ledger dt { margin-bottom: .35rem; font-size: .6875rem; }
  .identity__ledger dd { font-size: .78rem; }
}

@media (min-width: 621px) and (max-height: 820px) {
  .identity__profile {
    top: calc(var(--header-h) + 2rem);
  }

  .identity__profile h2 {
    margin: 1.5rem 0 1rem;
    font-size: clamp(2.75rem, 4.8vw, 4.6rem);
  }

  .identity__profile-copy {
    padding-top: .9rem;
  }

  .identity__profile-copy .label {
    margin-bottom: .55rem;
  }

  .identity__ledger div {
    padding-block: .72rem;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .identity__profile {
    top: calc(var(--header-h) + 2.2rem);
  }

  .identity__profile h2 {
    margin: 1.1rem 0 .6rem;
    font-size: clamp(2.05rem, 10.3vw, 2.7rem);
  }

  .identity__profile-copy {
    gap: .5rem;
    padding-top: .65rem;
  }

  .identity__profile-copy .label {
    margin-bottom: .25rem;
  }

  .identity__profile-copy p:last-child {
    font-size: .7rem;
    line-height: 1.32;
  }

  .identity__ledger div {
    padding-block: .32rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-chapter-controls,
  .about-chapter-controls a,
  .about-chapter-controls__next i {
    transition: none;
  }

  .hero__statement { opacity: 1; transform: translateY(-50%); }
  .identity__intro, .identity__profile { opacity: 1; transform: none; }
  .statement-line { opacity: 1; clip-path: none; transform: none; }
  .identity__photo { clip-path: none; }
}

/* ==========================================================================
   Contact / open dispatch
   Awwwards contact references consistently make one route unmistakable and let
   motion carry personality around it. Here that pattern becomes an atelier
   dispatch desk: an oversized direct line beside a warm paper project docket.
   ========================================================================== */

.contact[data-contact-style="dispatch"] {
  height: auto;
  min-height: max(100svh, 52rem);
  padding: calc(var(--header-h) + clamp(.7rem, 1.5vw, 1.2rem)) var(--pad) 0;
  grid-template-rows: auto 1fr auto auto;
  overflow: clip;
  background:
    radial-gradient(circle at 16% 18%, rgba(233, 180, 92, .09), transparent 31rem),
    var(--ink);
}

.contact[data-contact-style="dispatch"]::after {
  display: none;
}

.contact[data-contact-style="dispatch"] .contact__topline {
  min-height: 2.65rem;
  padding-bottom: .9rem;
  border-color: rgba(250, 244, 232, .2);
  color: rgba(250, 244, 232, .7);
}

.contact[data-contact-style="dispatch"] .contact__screen {
  min-height: 43rem;
  padding: clamp(2.2rem, 5vh, 4.6rem) 0 clamp(2.8rem, 6vh, 5rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(31rem, .92fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}

.contact[data-contact-style="dispatch"] .contact__intro {
  position: relative;
  min-height: 38rem;
  padding: 0;
  justify-content: space-between;
  gap: clamp(3rem, 7vh, 6rem);
}

.contact[data-contact-style="dispatch"] .contact__headline-block {
  position: relative;
  isolation: isolate;
}

.contact[data-contact-style="dispatch"] .contact__eyebrow {
  max-width: 30ch;
  margin-bottom: clamp(1.2rem, 2.4vh, 2rem);
  color: var(--gold);
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact[data-contact-style="dispatch"] .contact__headline-block h2 {
  position: relative;
  z-index: 2;
  max-width: 10.5ch;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 6.8vw, 6rem);
  font-weight: 500;
  line-height: .91;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.contact[data-contact-style="dispatch"] .contact__headline-block h2 span {
  width: auto;
  max-width: none;
}

.contact[data-contact-style="dispatch"] .contact__headline-block h2 span:first-child {
  font-style: normal;
  font-weight: 400;
  color: rgba(250, 244, 232, .7);
}

.contact[data-contact-style="dispatch"] .contact__headline-block h2 span:last-child {
  color: var(--ivory);
}

.contact[data-contact-style="dispatch"] .contact__lead {
  position: relative;
  z-index: 2;
  max-width: 52ch;
  margin-top: clamp(1.8rem, 4vh, 3rem);
  color: rgba(250, 244, 232, .74);
  font-size: 1rem;
  line-height: 1.65;
}

.contact__registration {
  position: absolute;
  z-index: 1;
  right: clamp(-1rem, -1vw, 0rem);
  top: clamp(5.5rem, 10vh, 8.5rem);
  width: clamp(8.5rem, 12vw, 11.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--gold);
  opacity: .82;
  transform: rotate(-9deg);
  will-change: transform;
}

.contact__registration::before,
.contact__registration::after {
  content: "";
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.contact__registration::before {
  inset: 8%;
  opacity: .6;
}

.contact__registration::after {
  inset: 19%;
  opacity: .35;
}

.contact__registration-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  font: 600 7.3px/1 var(--mono);
  letter-spacing: 1.1px;
}

.contact__registration strong {
  display: block;
  width: clamp(2.8rem, 4.4vw, 4.25rem);
  height: clamp(3.1rem, 4.8vw, 4.65rem);
  background: currentColor;
  -webkit-mask: url('/assets/img/ry-monogram.svg') center / contain no-repeat;
  mask: url('/assets/img/ry-monogram.svg') center / contain no-repeat;
}

.contact__registration i {
  position: absolute;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 .3rem rgba(233, 180, 92, .12);
}

.contact[data-contact-style="dispatch"] .contact__direct-block {
  position: relative;
  z-index: 3;
  padding-top: 1.15rem;
  border-color: rgba(250, 244, 232, .22);
}

.contact[data-contact-style="dispatch"] .contact__direct-head {
  align-items: end;
}

.contact[data-contact-style="dispatch"] .contact__direct-head .label {
  margin-bottom: .7rem;
  color: rgba(250, 244, 232, .55);
  text-transform: uppercase;
}

.contact[data-contact-style="dispatch"] .contact__email {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--gold);
}

.contact[data-contact-style="dispatch"] .copy-button,
.contact[data-contact-style="dispatch"] .contact__focus-brief {
  border-radius: .25rem;
  background: transparent;
}

.contact[data-contact-style="dispatch"] .copy-button {
  min-height: 2.75rem;
  padding: .78rem 1rem;
  border-color: rgba(250, 244, 232, .28);
}

.contact[data-contact-style="dispatch"] .contact__links-row {
  padding-top: 1rem;
}

.contact[data-contact-style="dispatch"] .contact__links {
  gap: 1.2rem;
}

.contact[data-contact-style="dispatch"] .contact__links a {
  min-height: 2.75rem;
  padding: .3rem 0 .45rem;
  border: 0;
  border-bottom: 1px solid rgba(250, 244, 232, .28);
  border-radius: 0;
  background: transparent;
}

.contact[data-contact-style="dispatch"] .contact__links a:hover {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold);
}

.contact[data-contact-style="dispatch"] .contact__focus-brief {
  min-height: 2.75rem;
  padding: .5rem 1rem;
}
.contact[data-contact-style="dispatch"] .contact__focus-brief[hidden] {
  display: none;
}

.contact[data-contact-style="dispatch"] .contact-form {
  height: auto;
  min-height: 41rem;
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  border: 0;
  border-radius: .35rem;
  color: var(--ink);
  background:
    linear-gradient(rgba(43, 31, 20, .045) 1px, transparent 1px) 0 5.7rem / 100% 2.9rem,
    var(--ivory);
  box-shadow: 1.35rem 1.5rem 0 rgba(7, 7, 6, .34), 0 2.5rem 5rem rgba(0, 0, 0, .24);
  transform: rotate(.7deg);
}

/* Collapsed, the docket is ~220px of card in a row the left column stretches to
   ~600px. Centring it hung the card in mid-air with a third of the row empty
   above it and another third below — the blank space reads as a layout fault
   rather than a rag. Aligned to the start it shares a top line with the
   headline, and the only remaining space is the ordinary bottom of a shorter
   column. */
.contact[data-contact-style="dispatch"] .contact-form.is-brief-collapsible {
  min-height: 0;
  align-self: start;
  display: block;
  overflow: hidden;
  transition:
    box-shadow .45s ease,
    transform .45s var(--ease-out);
}

.contact-form.is-brief-collapsible .contact-form__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem 1.5rem;
}

.contact-form.is-brief-collapsible .contact-form__head > div {
  grid-row: 1 / span 2;
}

.contact-form.is-brief-collapsible .contact-form__head > span {
  align-self: end;
}

.contact-form.is-brief-collapsible .contact-form__toggle {
  display: inline-flex;
}

.contact-form.is-brief-collapsible .contact-form__body {
  max-height: 52rem;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    max-height .75s var(--ease-out),
    opacity .35s ease .1s,
    transform .55s var(--ease-out),
    visibility 0s linear;
}

.contact-form.is-brief-collapsible[data-expanded="false"] .contact-form__head {
  padding-bottom: 0;
  border-bottom-color: transparent;
}

.contact-form.is-brief-collapsible[data-expanded="false"] .contact-form__body {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(1.25rem);
  transition:
    max-height .55s var(--ease-in-out),
    opacity .22s ease,
    transform .35s ease,
    visibility 0s linear .55s;
}

.contact[data-contact-style="dispatch"] .contact-form::before {
  content: "RY / INCOMING";
  position: absolute;
  right: 1.35rem;
  bottom: 1.2rem;
  padding: .42rem .55rem;
  border: 1px solid rgba(196, 106, 43, .55);
  color: rgba(196, 106, 43, .72);
  font: 600 .55rem/1 var(--mono);
  letter-spacing: .12em;
  transform: rotate(-4deg);
}

.contact[data-contact-style="dispatch"] .contact-form.is-attention {
  box-shadow: 1.35rem 1.5rem 0 rgba(196, 106, 43, .55), 0 2.5rem 5rem rgba(0, 0, 0, .28);
}

.contact[data-contact-style="dispatch"] .contact-form__head {
  border-color: rgba(43, 31, 20, .2);
}

.contact[data-contact-style="dispatch"] .contact-form__head .label {
  color: var(--amber);
}

.contact[data-contact-style="dispatch"] .contact-form__head h3 {
  max-width: 12ch;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.25rem, 3.2vw, 3.55rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.025em;
}

.contact[data-contact-style="dispatch"] .contact-form__head > span {
  color: rgba(43, 31, 20, .58);
}

.contact[data-contact-style="dispatch"] .field,
.contact[data-contact-style="dispatch"] .form-submit {
  border-color: rgba(43, 31, 20, .22);
}

.contact[data-contact-style="dispatch"] .field::before {
  color: rgba(43, 31, 20, .46);
}

.contact[data-contact-style="dispatch"] .field label {
  color: rgba(43, 31, 20, .62);
}

.contact[data-contact-style="dispatch"] .field input,
.contact[data-contact-style="dispatch"] .field textarea {
  color: var(--ink);
}

.contact[data-contact-style="dispatch"] .field input::placeholder,
.contact[data-contact-style="dispatch"] .field textarea::placeholder {
  color: rgba(43, 31, 20, .52);
}

.contact[data-contact-style="dispatch"] .field:focus-within {
  border-color: var(--amber);
}

.contact[data-contact-style="dispatch"] .submit-button {
  border-radius: .3rem;
  color: var(--ivory);
}

.contact[data-contact-style="dispatch"] #formStatus {
  color: rgba(43, 31, 20, .68);
}

.contact[data-contact-style="dispatch"] .footer {
  min-height: 3rem;
  padding: .9rem 0;
  border-color: rgba(250, 244, 232, .2);
}

.contact[data-contact-style="dispatch"] .support-links-footer {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(250, 244, 232, .58);
}

.contact[data-contact-style="dispatch"] .support-links-footer a {
  color: rgba(250, 244, 232, .7);
}

@media (max-width: 1180px) and (min-width: 761px) {
  .contact[data-contact-style="dispatch"] .contact__screen {
    grid-template-columns: minmax(16rem, .78fr) minmax(29rem, 1.22fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .contact__registration {
    right: -1rem;
    width: 8rem;
    opacity: .48;
  }

  .contact[data-contact-style="dispatch"] .contact__headline-block h2 {
    font-size: clamp(3.25rem, 5.4vw, 4.7rem);
  }

  .contact[data-contact-style="dispatch"] .contact-form {
    transform: rotate(.35deg);
  }
}

@media (max-width: 760px) {
  .contact[data-contact-style="dispatch"] {
    min-height: 100svh;
  }

  .contact[data-contact-style="dispatch"] .contact__screen {
    min-height: 0;
    padding: 2.6rem 0 4rem;
    grid-template-columns: 1fr;
    gap: 4.5rem;
  }

  .contact[data-contact-style="dispatch"] .contact__intro {
    min-height: 0;
  }

  .contact[data-contact-style="dispatch"] .contact__headline-block h2 {
    max-width: 10ch;
    font-size: clamp(3.35rem, 15vw, 5.2rem);
  }

  .contact__registration {
    right: -.8rem;
    top: 10rem;
    width: 7.5rem;
    opacity: .34;
  }

  .contact[data-contact-style="dispatch"] .contact__lead {
    max-width: 36ch;
    padding-right: 2rem;
  }

  .contact[data-contact-style="dispatch"] .contact__direct-head {
    align-items: start;
  }

  .contact[data-contact-style="dispatch"] .contact__email {
    font-size: clamp(1.75rem, 8vw, 2.6rem);
  }

  .contact[data-contact-style="dispatch"] .contact__links-row {
    align-items: start;
    flex-direction: column;
  }

  .contact[data-contact-style="dispatch"] .contact__links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contact[data-contact-style="dispatch"] .contact-form {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 1.3rem;
    transform: none;
    box-shadow: .65rem .8rem 0 rgba(7, 7, 6, .34), 0 1.8rem 3.5rem rgba(0, 0, 0, .22);
  }

  .contact[data-contact-style="dispatch"] .contact-form__head h3 {
    font-size: clamp(2.4rem, 11.5vw, 3.4rem);
  }

  .contact-form.is-brief-collapsible .contact-form__head {
    grid-template-columns: 1fr;
  }

  .contact-form.is-brief-collapsible .contact-form__head > div {
    grid-row: auto;
  }

  .contact-form.is-brief-collapsible .contact-form__head > span {
    display: block;
    text-align: left;
  }

  .contact-form.is-brief-collapsible .contact-form__toggle {
    width: 100%;
  }

  .contact-form__body {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  .contact__registration {
    transform: none;
  }

  .contact-form.is-brief-collapsible .contact-form__body,
  .contact[data-contact-style="dispatch"] .contact-form.is-brief-collapsible {
    transition: none;
  }
}