/* ==========================================================================
   6 FULL-SITE DESIGN LANGUAGE MOCKUPS (Mockups A..F) + SIDE-BY-SIDE GALLERY
   + Unobstructed Video Walkthrough Hero (Text auto-fades on scroll & never covers the room)
   ========================================================================== */

/* Floating Top Mockup Switcher Bar */
.mockup-switcher {
  position: fixed;
  inset-block-start: calc(var(--head-h) + 6px);
  inset-inline: 0.6rem;
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - 1.2rem);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: rgba(16, 16, 15, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32);
  direction: rtl;
  box-sizing: border-box;
}

.mockup-switcher__all {
  appearance: none;
  border: 1px solid #d4b07b;
  background: rgba(212, 176, 123, 0.2);
  color: #f7e6c8;
  font-family: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
.mockup-switcher__all:hover {
  background: #d4b07b;
  color: #141311;
}

.mockup-switcher__btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #f5f3ef;
  font-family: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.34rem 0.68rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.mockup-switcher__btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.mockup-switcher__btn[aria-pressed="true"] {
  background: #f5f3ef;
  color: #141311;
  border-color: #ffffff;
  font-weight: 700;
}

/* Full-Screen "See All 6 Mockups Side-by-Side" Visual Board */
.mockup-board {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(12, 12, 11, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  direction: rtl;
  box-sizing: border-box;
}
.mockup-board[hidden] {
  display: none !important;
}
.mockup-board__inner {
  max-width: 1280px;
  margin-inline: auto;
}
.mockup-board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.5rem;
  color: #f5f2eb;
}
.mockup-board__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  margin: 0;
}
.mockup-board__sub {
  font-size: 0.92rem;
  color: #b8b2a6;
  margin: 0.25rem 0 0;
}
.mockup-board__close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: #f5f2eb;
  font-family: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}
.mockup-board__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.15rem;
}
.mcard {
  border-radius: 22px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  text-align: start;
}
.mcard:hover {
  transform: translateY(-4px);
}
.mcard.is-selected {
  border-color: #d4b07b;
  box-shadow: 0 0 0 3px rgba(212, 176, 123, 0.35);
}
.mcard__swatches {
  display: flex;
  gap: 0.4rem;
}
.mcard__swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.3);
}
.mcard__tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.8;
}
.mcard__name {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}
.mcard__desc {
  font-size: 0.86rem;
  line-height: 1.5;
  opacity: 0.88;
  margin: 0;
}
.mcard__preview {
  border-radius: 14px;
  padding: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  .mockup-switcher {
    inset-block-start: calc(var(--head-h) + 4px);
    border-radius: 0.85rem;
    padding: 0.25rem 0.32rem;
    gap: 0.2rem;
  }
  .mockup-switcher__btn,
  .mockup-switcher__all {
    font-size: 0.68rem;
    padding: 0.26rem 0.48rem;
  }
}

/* ==========================================================================
   HERO VIDEO FIX: Unobstructed Full-Bleed Video + Compact Corner Overlay
   - Eliminates the giant dark box that covered the desktop video
   - Fades the intro card out smoothly as soon as the user scrolls into the house (.is-walking)
   ========================================================================== */

.tour--p2 .tour__stage {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding: calc(var(--head-h) + 1rem) var(--gutter) 1.35rem;
}

.tour--p2 .p2-card {
  width: min(100%, 24rem);
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-card, 22px);
  background: var(--hero-card-bg, rgba(250, 249, 246, 0.88));
  color: var(--hero-card-ink, #181715);
  border: 1px solid var(--hero-card-border, rgba(24, 23, 21, 0.12));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  margin-block-end: 0.65rem;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms ease;
}

.tour--p2.is-walking .p2-card {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.tour--p2 .p2-card__badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-chip, 999px);
  background: var(--hero-badge-bg, rgba(24, 23, 21, 0.08));
  color: var(--hero-badge-ink, #4a4640);
  border: 1px solid var(--hero-card-border, rgba(24, 23, 21, 0.14));
  margin-block-end: 0.45rem;
}

.tour--p2 .chapter__title--hero {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--hero-card-ink, #181715);
}

.tour--p2 .chapter__text {
  font-size: 0.88rem;
  line-height: 1.5;
  margin-block-start: 0.45rem;
  color: var(--hero-card-soft, #45413b);
}

.tour--p2 .p2-specs {
  display: none;
}

.tour--p2 .chapter__actions {
  margin-block-start: 0.75rem;
}

.tour--p2 .chapter__actions .btn {
  min-height: 44px;
  padding-inline: 1.35rem;
  font-size: 0.88rem;
}

.tour--p2 .p2-foot {
  width: fit-content;
  max-width: 100%;
  padding: 0.36rem 0.65rem;
  border-radius: var(--r-chip, 999px);
  background: var(--hero-card-bg, rgba(250, 249, 246, 0.86));
  border: 1px solid var(--hero-card-border, rgba(24, 23, 21, 0.12));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--hero-card-ink, #181715);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.tour--p2 .rooms {
  gap: 0.25rem;
}

.tour--p2 .rooms button {
  min-height: 34px;
  padding: 0.28rem 0.68rem;
  border-radius: var(--r-chip, 999px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--hero-card-soft, #4a4640);
  font-size: 0.78rem;
  font-weight: 600;
}
.tour--p2 .rooms button[aria-current="step"] {
  background: var(--brass);
  color: var(--on-brass);
  border-color: var(--brass);
  font-weight: 700;
}

.tour--p2 .tour__meta {
  margin-block-start: 0;
  gap: 0.65rem;
  font-size: 0.75rem;
}
.tour--p2 .tour__disclosure {
  color: var(--hero-card-soft, #57524b);
  padding-block: 0;
}
.tour--p2 .tour__skip {
  min-height: 32px;
  color: var(--hero-card-ink, #181715);
  font-size: 0.76rem;
}

/* ==========================================================================
   MOCKUP A (ui1 — Default): "Nordic Gallery Alabaster & Espresso"
   Chalk-white (#FAF9F6), warm stone (#F1EFEA), deep espresso buttons (#181715)
   ========================================================================== */
:root,
html[data-ui="ui1"] {
  --ivory: #faf9f6;
  --canvas: #f1efea;
  --slab: #e5e2dc;
  --band: #181715;
  --foot: #11100f;
  --ink: #181715;
  --ink-soft: #4e4a44;
  --brass: #181715;
  --on-brass: #faf9f6;
  --brass-text: #6e5636;
  --brass-line: #8c7048;
  --cream: #faf9f6;
  --cream-soft: #d4cfc7;
  --brass-on-dark: #d8bc90;
  --lit-rest: #76716a;
  --r-card: 22px;
  --r-media: 16px;
  --r-input: 12px;
  --r-btn: 999px;
  --r-chip: 999px;
  --card-bg: #ffffff;
  --card-border: rgba(24, 23, 21, 0.09);
  --card-shadow: 0 18px 44px -16px rgba(24, 23, 21, 0.08);
  --media-shadow: 0 22px 50px -16px rgba(24, 23, 21, 0.14);
  --hero-card-bg: rgba(250, 249, 246, 0.88);
  --hero-card-ink: #181715;
  --hero-card-soft: #4a4640;
  --hero-card-border: rgba(24, 23, 21, 0.12);
  --hero-badge-bg: rgba(24, 23, 21, 0.07);
  --hero-badge-ink: #3d3934;
}

/* ==========================================================================
   MOCKUP B (ui2): "Tel Aviv Sunlit Limestone & Siena Terracotta"
   Warm limestone (#F6EFE4), sand (#EAE0D0), burnt terracotta accent (#A84322)
   ========================================================================== */
html[data-ui="ui2"] {
  --ivory: #f6efe4;
  --canvas: #eae0d0;
  --slab: #dccFbc;
  --band: #241b16;
  --foot: #18120e;
  --ink: #211a15;
  --ink-soft: #54473e;
  --brass: #a84322;
  --on-brass: #fdfaf6;
  --brass-text: #8c3416;
  --brass-line: #a84322;
  --cream: #faf6f0;
  --cream-soft: #d9cfc2;
  --brass-on-dark: #e89b7e;
  --lit-rest: #7a6f65;
  --r-card: 18px;
  --r-media: 12px;
  --r-input: 10px;
  --r-btn: 12px;
  --r-chip: 10px;
  --card-bg: #fcf9f4;
  --card-border: rgba(168, 67, 34, 0.18);
  --card-shadow: 0 18px 42px -14px rgba(36, 27, 22, 0.1);
  --media-shadow: 0 22px 50px -16px rgba(36, 27, 22, 0.15);
  --hero-card-bg: rgba(252, 249, 244, 0.90);
  --hero-card-ink: #211a15;
  --hero-card-soft: #54473e;
  --hero-card-border: rgba(168, 67, 34, 0.25);
  --hero-badge-bg: rgba(168, 67, 34, 0.12);
  --hero-badge-ink: #8c3416;
}

/* ==========================================================================
   MOCKUP C (ui3): "Milanese Dark Espresso & Champagne Brass"
   Deep architectural espresso (#141311), smoked cards (#201D19), warm gold (#C8A97E)
   ========================================================================== */
html[data-ui="ui3"] {
  --ivory: #141311;
  --canvas: #1c1a17;
  --slab: #26231f;
  --band: #0e0d0c;
  --foot: #090807;
  --ink: #f5f2eb;
  --ink-soft: #b8b2a6;
  --brass: #c8a97e;
  --on-brass: #171410;
  --brass-text: #d9bc93;
  --brass-line: #b89668;
  --cream: #f5f2eb;
  --cream-soft: #c7c0b4;
  --brass-on-dark: #d9bc93;
  --lit-rest: #8a847a;
  --r-card: 24px;
  --r-media: 16px;
  --r-input: 14px;
  --r-btn: 999px;
  --r-chip: 999px;
  --card-bg: #201d19;
  --card-border: rgba(200, 169, 126, 0.24);
  --card-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.55);
  --media-shadow: 0 26px 64px -14px rgba(0, 0, 0, 0.65);
  --hero-card-bg: rgba(20, 19, 17, 0.86);
  --hero-card-ink: #f5f2eb;
  --hero-card-soft: #c7c0b4;
  --hero-card-border: rgba(200, 169, 126, 0.32);
  --hero-badge-bg: rgba(200, 169, 126, 0.16);
  --hero-badge-ink: #e6cda8;
}
html[data-ui="ui3"] .brief {
  background: #201d19;
  color: #f5f2eb;
}
html[data-ui="ui3"] .chips input:checked {
  background: rgba(200, 169, 126, 0.24);
}

/* ==========================================================================
   MOCKUP D (ui4): "Botanical Sage, Eucalyptus Stone & Forest Bronze"
   Soft sage-alabaster (#F1F4EF), eucalyptus (#E3E9E0), deep forest ink (#1A261F)
   ========================================================================== */
html[data-ui="ui4"] {
  --ivory: #f1f4ef;
  --canvas: #e3e9e0;
  --slab: #d3ddd0;
  --band: #16211b;
  --foot: #0f1712;
  --ink: #18241d;
  --ink-soft: #43544a;
  --brass: #284234;
  --on-brass: #f4f7f2;
  --brass-text: #284234;
  --brass-line: #3b5c4a;
  --cream: #f2f5f0;
  --cream-soft: #c5d1c8;
  --brass-on-dark: #9ec4ae;
  --lit-rest: #6d7d73;
  --r-card: 26px;
  --r-media: 18px;
  --r-input: 14px;
  --r-btn: 999px;
  --r-chip: 999px;
  --card-bg: #fafcf9;
  --card-border: rgba(40, 66, 52, 0.14);
  --card-shadow: 0 20px 48px -16px rgba(24, 36, 29, 0.09);
  --media-shadow: 0 22px 52px -16px rgba(24, 36, 29, 0.14);
  --hero-card-bg: rgba(22, 33, 27, 0.86);
  --hero-card-ink: #f2f5f0;
  --hero-card-soft: #c5d1c8;
  --hero-card-border: rgba(158, 196, 174, 0.28);
  --hero-badge-bg: rgba(158, 196, 174, 0.16);
  --hero-badge-ink: #b8dec8;
}

/* ==========================================================================
   MOCKUP E (ui5): "Midnight Architectural Navy & Warm Champagne"
   Deep coastal midnight navy (#0E1520), slate-navy cards (#172233), champagne gold (#D6B482)
   ========================================================================== */
html[data-ui="ui5"] {
  --ivory: #0e1520;
  --canvas: #141e2d;
  --slab: #1c293d;
  --band: #090e16;
  --foot: #06090f;
  --ink: #f2f5f9;
  --ink-soft: #a9b5c7;
  --brass: #d6b482;
  --on-brass: #101722;
  --brass-text: #e0c294;
  --brass-line: #c4a270;
  --cream: #f2f5f9;
  --cream-soft: #b8c4d6;
  --brass-on-dark: #e0c294;
  --lit-rest: #788599;
  --r-card: 22px;
  --r-media: 15px;
  --r-input: 12px;
  --r-btn: 999px;
  --r-chip: 999px;
  --card-bg: #182334;
  --card-border: rgba(214, 180, 130, 0.24);
  --card-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.55);
  --media-shadow: 0 26px 64px -14px rgba(0, 0, 0, 0.65);
  --hero-card-bg: rgba(14, 21, 32, 0.86);
  --hero-card-ink: #f2f5f9;
  --hero-card-soft: #b8c4d6;
  --hero-card-border: rgba(214, 180, 130, 0.32);
  --hero-badge-bg: rgba(214, 180, 130, 0.16);
  --hero-badge-ink: #ebd0a7;
}
html[data-ui="ui5"] .brief {
  background: #182334;
  color: #f2f5f9;
}
html[data-ui="ui5"] .chips input:checked {
  background: rgba(214, 180, 130, 0.24);
}

/* ==========================================================================
   MOCKUP F (ui6): "Apple / Teenage Engineering Pure Studio White & Carbon"
   Pure white (#FFFFFF), cool architectural grey (#F3F4F6), carbon black (#111215)
   ========================================================================== */
html[data-ui="ui6"] {
  --ivory: #ffffff;
  --canvas: #f3f4f6;
  --slab: #e5e7eb;
  --band: #111215;
  --foot: #0b0c0e;
  --ink: #111215;
  --ink-soft: #4b5058;
  --brass: #111215;
  --on-brass: #ffffff;
  --brass-text: #272a30;
  --brass-line: #3f444e;
  --cream: #f9fafb;
  --cream-soft: #cfd4dc;
  --brass-on-dark: #e5e7eb;
  --lit-rest: #737982;
  --r-card: 26px;
  --r-media: 18px;
  --r-input: 14px;
  --r-btn: 999px;
  --r-chip: 999px;
  --card-bg: #ffffff;
  --card-border: rgba(17, 18, 21, 0.1);
  --card-shadow: 0 20px 48px -16px rgba(17, 18, 21, 0.08);
  --media-shadow: 0 22px 52px -16px rgba(17, 18, 21, 0.14);
  --hero-card-bg: rgba(255, 255, 255, 0.90);
  --hero-card-ink: #111215;
  --hero-card-soft: #4b5058;
  --hero-card-border: rgba(17, 18, 21, 0.12);
  --hero-badge-bg: rgba(17, 18, 21, 0.07);
  --hero-badge-ink: #111215;
}

/* ==========================================================================
   SHARED COMPONENT POLISH ACROSS ALL 6 MOCKUPS
   ========================================================================== */

.head.is-solid {
  background: color-mix(in oklab, var(--ivory) 86%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 1px 0 var(--card-border), 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.head__cta {
  border-bottom: 0;
  padding: 0.45rem 1.1rem;
  border-radius: var(--r-btn);
  background: var(--brass);
  color: var(--on-brass);
  border: 1px solid var(--brass);
}

.btn {
  border-radius: var(--r-btn);
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.16);
  transition: transform 160ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

.manifesto__grid {
  padding: clamp(2.2rem, 5vw, 4.2rem);
  border-radius: var(--r-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.drawing__frame {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--r-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.drawing__labels li {
  border-radius: var(--r-chip);
  padding: 4px 12px;
  background: var(--ivory);
  border: 1px solid var(--card-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.specimen figure {
  padding: 0;
  border-radius: var(--r-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .specimen figure:hover {
    transform: translateY(-3px);
  }
}
.specimen img {
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.specimen figcaption {
  padding: 20px 22px 24px;
}

.cmp {
  border-radius: var(--r-card);
  box-shadow: var(--media-shadow);
  border: 1px solid var(--card-border);
}
.cmp__tag {
  border-radius: var(--r-chip);
  padding: 6px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.proof__list li {
  padding: 12px 16px;
  border-radius: var(--r-input);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.proof__list li::before {
  border-radius: 50%;
  rotate: 0deg;
  width: 8px;
  height: 8px;
  background: var(--brass-line);
}

.work-card figure {
  padding: 12px;
  border-radius: var(--r-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  box-sizing: border-box;
}
.work-card img {
  border-radius: var(--r-media);
}
.work-card figcaption {
  padding: 14px 8px 6px;
}

.process__figure img {
  border-radius: var(--r-card);
  box-shadow: var(--media-shadow);
  border: 1px solid var(--card-border);
}
.step {
  padding: 18px 22px;
  padding-inline-start: clamp(40px, 4.2vw, 56px);
  border-radius: calc(var(--r-card) * 0.78);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.step::before {
  inset-inline-start: 16px;
  top: 1.45rem;
  border-radius: 50%;
  rotate: 0deg;
  width: 10px;
  height: 10px;
}
.timeline__track {
  inset-inline-start: 20px;
}

.consult__photo img {
  border-radius: var(--r-card);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.owner {
  padding: 16px 20px;
  border-radius: var(--r-input);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-inline-start: 3px solid var(--brass-on-dark);
}
.brief {
  border-radius: var(--r-card);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
  border: 1px solid var(--card-border);
  overflow: hidden;
}
.chips input {
  border-radius: var(--r-chip);
}
.field input,
.field textarea {
  border-radius: var(--r-input);
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  padding: 12px 16px;
  background: color-mix(in oklab, var(--canvas) 55%, transparent);
  box-sizing: border-box;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
.field input:focus,
.field textarea:focus {
  border: 1px solid var(--brass-line);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brass) 25%, transparent);
  padding-block-end: 12px;
}