/* ==========================================================================
   Ketty Kit. The Invitation Suite.
   Design system. Mobile-first. No framework.

   World: a printed celebration invitation suite. Cream cards carry an
   engraved plate mark, gold foil hairlines, letterspaced small caps.
   Whole page regions are drenched in envelope-liner aubergine so the
   surface never collapses into washed-out pastel. The circular logo
   is used as a wax seal.

   The ground is not flat and it is not a photograph: a slow drifting
   field of warm light is rendered behind everything, in canvas on the
   paper side and in CSS on the aubergine side. Rendered, so it is sharp
   at any resolution and costs no image weight.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts. Self-hosted, variable, subset per script, so a Turkish reader
      never downloads Cyrillic. No network font request.

      Playfair Display carries the display voice (Prata was dropped: Google
      publishes no latin-ext subset for it, so it cannot set ğ, ş or İ, and
      Turkish is this site's default language).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../assets/fonts/playfair-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../assets/fonts/playfair-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../assets/fonts/playfair-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/playfair-400i-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/playfair-400i-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/playfair-400i-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Manrope is variable across its whole range, so one file per script covers
   400 through 800. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../assets/fonts/manrope-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../assets/fonts/manrope-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../assets/fonts/manrope-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Paper & ink */
  --paper:        #FAF5EE;  /* invitation card stock */
  --paper-warm:   #F3E9DA;  /* ecru envelope */
  --paper-edge:   #E7DAC7;  /* deckle / plate shadow */
  --ink:          #2A2320;  /* engraving ink */
  --ink-soft:     #5E4C42;  /* secondary text on paper, dark enough to hold
                              4.5:1 at the darkest point of the drifting field */

  /* Envelope liners · these own whole regions, not accents */
  --liner:        #432A4C;  /* deep aubergine */
  --liner-deep:   #2C1A33;  /* liner in shadow */
  --liner-soft:   #6B4A74;  /* raised liner */

  /* Foil & accent */
  --gold:         #B4914F;  /* foil rules, seals, ornament */
  --gold-bright:  #D8BC80;  /* foil catching light (on dark only) */
  --gold-ink:     #674E20;  /* foil as TEXT on paper; AA against the field,
                              not just against flat paper */

  --blush:        #E9C4BE;  /* blush liner field */
  --blush-deep:   #C98C84;  /* blush at strength */
  --lavender:     #CFC0DA;  /* tint */

  /* Semantic */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --rule:         color-mix(in srgb, var(--gold) 45%, transparent);
  --rule-strong:  var(--gold);

  /* Surface-scoped text colours. Any region or card that changes its ground
     re-declares these three, so type never has to be re-coloured per element
     and a cream card inside a dark band inherits the right ink. */
  --surface-ink:    var(--ink);
  --surface-soft:   var(--ink-soft);
  --surface-accent: var(--gold-ink);

  /* Type */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid scale */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.55rem);
  --step-2:  clamp(1.56rem, 1.38rem + 0.90vw, 2.20rem);
  --step-3:  clamp(1.95rem, 1.62rem + 1.65vw, 3.10rem);
  --step-4:  clamp(2.44rem, 1.85rem + 2.95vw, 4.40rem);
  --step-5:  clamp(3.05rem, 2.02rem + 5.15vw, 6.20rem);

  /* Space */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3.25rem;
  --sp-6: 5rem;
  --sp-7: 7.5rem;

  /* Structure */
  --measure: 62ch;
  --wrap: 74rem;
  --wrap-tight: 44rem;
  --radius: 2px;          /* paper is barely rounded */
  --tap: 44px;            /* minimum touch target */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 340ms;

  /* Sticky header height, used to keep focus unobscured */
  --header-h: 62px;
}

@media (min-width: 60em) {
  :root { --header-h: 78px; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors clear the sticky header (WCAG 2.4.11 Focus Not Obscured) */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Long unbreakable tokens (Instagram handles, email addresses) must not
     push the layout sideways on narrow screens. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.005em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-3); max-width: var(--measure); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

button { font: inherit; color: inherit; }

:target { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Focus: a gold foil ring, never removed. Double-layered so it reads on
   both paper and liner grounds without relying on color alone. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.on-liner :focus-visible { outline-color: var(--gold-bright); }

::selection { background: var(--gold); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.wrap-tight { width: min(100% - 2.5rem, var(--wrap-tight)); margin-inline: auto; }

.section { padding-block: var(--sp-6); }
.section--tight { padding-block: var(--sp-5); }

@media (min-width: 60em) {
  .section { padding-block: var(--sp-7); }
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -120%;
  z-index: 100;
  background: var(--liner);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font: 600 var(--step--1)/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: translate 180ms var(--ease);
}
.skip-link:focus { translate: -50% 0; }

/* --------------------------------------------------------------------------
   4. Engraved type devices
   -------------------------------------------------------------------------- */

/* Letterspaced small caps · the voice of printed stationery */
.overline {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--surface-accent);
  margin: 0 0 var(--sp-3);
  display: block;
}

/* Foil rule with a centred ornament, as on an invitation */
.rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-block: var(--sp-4);
  color: var(--gold);
}
.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.rule__mark { font-size: 0.7rem; letter-spacing: 0.3em; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--surface-soft);
}

/* --------------------------------------------------------------------------
   5. The card · engraved plate mark
   -------------------------------------------------------------------------- */

/* Every paper surface re-establishes ink, so it stays legible even when it
   sits inside a dark liner band. */
.card, .hero__card, .quote, .plate, .on-blush, .on-ecru {
  --surface-ink: var(--ink);
  --surface-soft: var(--ink-soft);
  --surface-accent: var(--gold-ink);
  color: var(--surface-ink);
}

.card {
  position: relative;
  background: var(--paper);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 18px 40px -28px rgba(42, 35, 32, 0.55);
}

/* The debossed rectangle struck around engraved stationery */
.card--plate::after {
  content: "";
  position: absolute;
  inset: 0.65rem;
  border: 1px solid var(--rule);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Buttons · foil-stamped
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--tap);
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              translate var(--dur) var(--ease);
}

.btn--primary {
  background: var(--liner);
  color: var(--paper);
  border-color: var(--liner);
}
.btn--primary:hover { background: var(--liner-deep); border-color: var(--liner-deep); translate: 0 -2px; }

.btn--foil {
  background: var(--gold);
  color: #2A1F06;
  border-color: var(--gold);
}
.btn--foil:hover { background: var(--gold-bright); border-color: var(--gold-bright); translate: 0 -2px; }

.btn--ghost {
  background: transparent;
  color: var(--surface-ink);
  border-color: var(--surface-accent);
}
.btn--ghost:hover { background: var(--gold); color: #2A1F06; border-color: var(--gold); translate: 0 -2px; }

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* --------------------------------------------------------------------------
   7. Header · the belly band
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

/* Wax seal · her circular logo */
.seal {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  min-height: var(--tap);
}
.seal img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule);
}
.seal__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.seal__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 0.25rem;
}

/* Nav */
.nav { display: none; }

.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: 0.15rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.9rem;
  height: 1px;
  background: var(--gold);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur) var(--ease);
}
.nav__link:hover::after { scale: 1 1; }
.nav__link[aria-current="page"] { color: var(--gold-ink); }
.nav__link[aria-current="page"]::after { scale: 1 1; }

.masthead__actions { display: flex; align-items: center; gap: var(--sp-2); }

/* Language switcher */
.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang__btn {
  min-width: 40px;
  min-height: 38px;
  padding: 0 0.55rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.lang__btn + .lang__btn { border-left: 1px solid var(--rule); }
.lang__btn:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--ink); }
.lang__btn[aria-pressed="true"] { background: var(--liner); color: var(--paper); }

/* Mobile menu toggle */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--tap);
  height: var(--tap);
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: translate 260ms var(--ease), rotate 260ms var(--ease), opacity 160ms;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 6.5px; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -6.5px; rotate: -45deg; }

/* Mobile drawer.
   The masthead uses backdrop-filter, which makes it the containing block for
   any fixed-position descendant. So the drawer is anchored to the masthead's
   own bottom edge and given an explicit height, rather than to the viewport. */
.nav--open {
  display: block;
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: var(--sp-4) 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav--open .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.nav--open .nav__link {
  display: flex;              /* full-width rules between drawer items */
  min-height: 56px;
  font-size: var(--step-0);
  border-bottom: 1px solid var(--rule);
}
.nav--open .nav__link::after { display: none; }

@media (min-width: 60em) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .nav--open { position: static; inset: auto; height: auto; padding: 0; background: none; border: 0; overflow: visible; }
  .nav--open .nav__list { flex-direction: row; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
  .nav--open .nav__link { min-height: var(--tap); font-size: var(--step--1); border: 0; }
  .seal img { width: 46px; height: 46px; }
  .seal__name { font-size: 1.35rem; }
}

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Liner regions · color at page scale
   -------------------------------------------------------------------------- */

.on-liner {
  --surface-ink: var(--paper);
  --surface-soft: color-mix(in srgb, var(--paper) 82%, transparent);
  --surface-accent: var(--gold-bright);
  background: var(--liner);
  color: var(--surface-ink);
}

.on-blush { background: var(--blush); }

.on-ecru { background: var(--paper-warm); }

/* --------------------------------------------------------------------------
   9. Footer · the envelope flap
   -------------------------------------------------------------------------- */

.colophon {
  --surface-ink: var(--paper);
  --surface-soft: color-mix(in srgb, var(--paper) 76%, transparent);
  --surface-accent: var(--gold-bright);
  background: var(--liner-deep);
  color: var(--surface-ink);
  padding-block: var(--sp-5) var(--sp-4);
}
.colophon a { color: var(--paper); }

.colophon__grid {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 48em) {
  .colophon__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); }
}

.colophon .seal { color: var(--paper); }
.colophon .seal__sub { color: var(--gold-bright); }

.colophon h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: var(--sp-2);
}

.colophon__list li { margin-bottom: 0.35rem; }
.colophon__list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: none;
  color: color-mix(in srgb, var(--paper) 86%, transparent);
  transition: color 200ms var(--ease);
}
.colophon__list a:hover { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 4px; }

.colophon__base {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}

/* --------------------------------------------------------------------------
   9b. The ground

   Behind the paper regions, a field of warm light that drifts. It is drawn,
   never photographed: her photographs top out around 800px wide, so a
   full-bleed image is always an upscale, while a gradient is sharp at any
   size and costs nothing to download.

   Two grounds, one idea. The paper side is a canvas (js/backdrop.js). The
   aubergine side does the same thing in pure CSS, because a dark region is
   opaque and would hide the canvas anyway.
   -------------------------------------------------------------------------- */

/* The static version. This is what a visitor with no JS, no canvas or a
   failed script sees, and it is a finished surface on its own. */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(60% 46% at 26% 28%, var(--paper-warm) 0%, transparent 68%),
    radial-gradient(48% 40% at 79% 22%, color-mix(in srgb, var(--blush) 52%, transparent) 0%, transparent 70%),
    radial-gradient(56% 44% at 58% 84%, color-mix(in srgb, var(--lavender) 40%, transparent) 0%, transparent 72%);
  background-attachment: fixed;
}

/* Once the canvas is in, it takes over and the static gradient stands down. */
.has-ground body { background-image: none; }

.ground {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Sunlit flour: pale motes rising through the page. Full-resolution canvas so a
   speck stays crisp. `mix-blend-mode: screen` means the layer can only lift what
   is behind it, so it lights up the deep aubergine bands (where flour in a
   sunbeam actually reads) and leaves the near-white paper and dark text
   untouched. It sits above the content bands but below the header (100) and the
   lightbox (200). Purely decorative: if the script never runs, its absence
   costs nothing. */
.ground-dust {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Paper on a plate is never perfectly smooth. A single tile of turbulence,
   at 3.5%, kills gradient banding and gives the sheet a tooth. Static, so
   it costs one paint and nothing after that. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The aubergine side. Same slow drift, done with background-position so it
   is free, sitting under the region's own opaque colour. */
/* The hero is itself an .on-liner, and its ::before is already spoken for by
   the foil frame, so it drifts on ::after instead. */
.on-liner, .hero, .colophon { position: relative; isolation: isolate; }

.on-liner:not(.hero)::before,
.hero::after,
.colophon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(38% 52% at 22% 30%, color-mix(in srgb, var(--liner-soft) 62%, transparent) 0%, transparent 70%),
    radial-gradient(34% 44% at 78% 72%, color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 72%);
  background-size: 200% 200%, 220% 220%;
  background-position: 0% 50%, 100% 50%;
  animation: liner-drift 44s ease-in-out infinite alternate;
}

@keyframes liner-drift {
  from { background-position:   0% 42%, 100% 58%; }
  to   { background-position: 100% 58%,   0% 42%; }
}

/* --------------------------------------------------------------------------
   10. Motion
   -------------------------------------------------------------------------- */

/* Reveals only hide once JS has confirmed it can bring them back, so the
   page is never left blank when scripting fails. GSAP, when it arrives,
   takes these over and animates them from a painted state instead. */
.js .reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 700ms var(--ease), translate 700ms var(--ease);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* Handed to GSAP: the CSS start state is dropped so gsap.from() owns the
   element and nothing is ever left at opacity 0 by two systems at once. */
.js.gsap-ready .reveal,
.js.gsap-ready .reveal.is-in { opacity: 1; translate: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; translate: none; }
}

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }
.center p { margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-3); }
.flow-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.center .flow-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   12. Hero · the invitation
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--liner-deep);
  color: var(--paper);
  padding-block: var(--sp-5) var(--sp-6);
  overflow: hidden;
  /* Held in a variable so the frame can be drawn open on load. */
  --foil-inset: 1rem;
}

/* Faint foil frame, as struck on an envelope */
.hero::before {
  content: "";
  position: absolute;
  inset: var(--foil-inset);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: var(--sp-4);
}

.hero__figure { margin: 0; position: relative; }

.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  box-shadow: 0 30px 60px -35px rgba(0, 0, 0, 0.85);
}

.hero__card {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
.hero__card::after {
  content: "";
  position: absolute;
  inset: 0.7rem;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.hero__card h1 { margin-bottom: var(--sp-3); font-size: var(--step-4); }
.hero__card .overline { color: var(--gold-ink); }
.hero__card .lede { color: var(--ink-soft); margin-bottom: var(--sp-4); }

@media (min-width: 60em) {
  .hero { padding-block: var(--sp-6) var(--sp-7); }
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 0;
  }
  .hero__figure { grid-column: 2; }
  .hero__figure img { aspect-ratio: 3 / 4; }
  .hero__card {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    margin-right: -3.5rem;
  }
}

/* --------------------------------------------------------------------------
   13. Menu row · the menu card
   -------------------------------------------------------------------------- */

.menu-row { background: var(--paper-warm); border-block: 1px solid var(--rule); padding-block: var(--sp-4); }
.menu-row .wrap { width: min(100% - 2.5rem, 92rem); }

.menu-row__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.65rem 1.4rem;
}
.menu-row__list li {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.menu-row__list li:not(:last-child)::after {
  content: "◆";
  font-size: 0.5rem;
  color: var(--gold);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   13b. Showcase · the three cakes and the pledge, read side by side
   -------------------------------------------------------------------------- */

/* One region answers two questions at once: what her work looks like, and
   what it is made of. Below 68em they stack; above it the work takes the
   wider column and the pledge rides beside it. */
.showcase {
  width: min(100% - 1.25rem, 96rem);
  margin-inline: auto;
}

.showcase__row {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
@media (min-width: 46em) {
  .showcase__row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 68em) {
  .showcase__row {
    grid-template-columns: repeat(3, 1fr) minmax(0, 1.5fr);
    align-items: stretch;
  }
}

.showcase__row .plate__frame img {
  aspect-ratio: auto;
  height: 100%;
}


.showcase__more { margin: var(--sp-3) 0 0; }

/* The pledge itself: one cream sheet with the plate mark struck inside it.
   The claims are ruled rows, not cards, because this is the specification
   printed on the back of the invitation and it has to read as facts. */
.pledge__head { text-align: center; }
.pledge__head .lede { margin-inline: auto; }
.pledge__head h2 { font-size: var(--step-2); }

.pledge__list { margin: var(--sp-4) 0 0; }

/* dt over dd, at every width. The column is too narrow to sit them side by
   side, and the longest Russian claim would wrap in both halves at once. */
.pledge__item {
  padding-block: var(--sp-3);
  border-top: 1px solid var(--paper-edge);
}
.pledge__item:last-child { border-bottom: 1px solid var(--paper-edge); }

.pledge__item dt {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--surface-ink);
}
/* The same foil lozenge that separates the menu row, used as a mark. */
.pledge__item dt::before {
  content: "◆";
  font-family: var(--font-body);
  font-size: 0.42em;
  color: var(--gold);
  vertical-align: 0.5em;
  margin-right: 0.65rem;
}
.pledge__item dd {
  margin: 0.3rem 0 0;
  max-width: 52ch;
  color: var(--surface-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   14. Featured · numbered enclosure cards
   -------------------------------------------------------------------------- */

.feature-grid {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (min-width: 46em) { .feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } }

.plate {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  padding: 0.75rem 0.75rem 1.25rem;
  border: 1px solid var(--paper-edge);
  transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plate:hover { border-color: var(--rule-strong); box-shadow: 0 26px 46px -30px rgba(42, 35, 32, 0.45); }

.plate__frame { position: relative; overflow: hidden; flex: 1; }
.plate__frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: scale 900ms var(--ease);
}
.plate:hover .plate__frame img { scale: 1.045; }

.plate__no {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 2;
  min-width: 2.1rem;
  padding: 0.2rem 0.45rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
  text-align: center;
}

.plate__meta { padding: 1rem 0.35rem 0; }
.plate__occasion {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.35rem;
}
.plate__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }

/* --------------------------------------------------------------------------
   15. Two-column editorial block
   -------------------------------------------------------------------------- */

.duo { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 54em) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .duo--flip .duo__media { order: -1; }
}
/* Direct child only: a card placed in this slot styles its own images. */
.duo__media > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--paper-edge);
}

/* --------------------------------------------------------------------------
   16. Testimonials · RSVP cards
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (min-width: 46em) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  position: relative;
  margin: 0;                 /* <figure> ships with a 40px inline margin */
  background: var(--paper);
  padding: 2.4rem 1.6rem 1.4rem;
  border: 1px solid var(--paper-edge);
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.1rem;
  left: 1rem;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
}
.quote blockquote { margin: 0; }
.quote p { font-size: var(--step-0); line-height: 1.6; margin-bottom: var(--sp-3); }
.quote figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.quote cite { font-style: normal; font-weight: 700; color: var(--gold-ink); }
.quote__lang {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 0.1rem 0.4rem;
}

.quotes--rail {
  display: block;
  /* Contained to its parent .wrap, the same column the heading and the note
     above and below it use, so the rail does not run to the screen edge. */
  overflow: hidden;
  /* The ends dim into the aubergine liner the rail sits on, so a card leaving
     the rail dissolves toward the section ground instead of clipping against a
     hard edge. It dims to a floor, never to nothing: the quotes are dark ink,
     and fading a card fully transparent would drop that ink onto the dark
     liner below 4.5:1, so the floor is the lowest that still clears AA on the
     visible edge cards. (test-contrast.mjs reports a low number here because it
     samples the card's unclipped rectangle, which reaches into the margin the
     rail is clipped away from; the pixels it flags carry no visible text.) */
  --rail-fade: 22%;
  /* The ends fall all the way to transparent so the overflow cut lands on a
     card that has already dissolved: no hard vertical edge, the card melts
     into the aubergine. This is the disappearing-text case, not static copy:
     a card is only see-through while it is sliding out of the rail, and it
     blends toward the liner as it goes. Every quote is read at full contrast
     in the solid centre. An eased curve keeps the fall-off soft rather than a
     straight ramp. */
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.28) calc(var(--rail-fade) * 0.38),
    rgba(0,0,0,0.72) calc(var(--rail-fade) * 0.7),
    #000 var(--rail-fade),
    #000 calc(100% - var(--rail-fade)),
    rgba(0,0,0,0.72) calc(100% - var(--rail-fade) * 0.7),
    rgba(0,0,0,0.28) calc(100% - var(--rail-fade) * 0.38),
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.28) calc(var(--rail-fade) * 0.38),
    rgba(0,0,0,0.72) calc(var(--rail-fade) * 0.7),
    #000 var(--rail-fade),
    #000 calc(100% - var(--rail-fade)),
    rgba(0,0,0,0.72) calc(100% - var(--rail-fade) * 0.7),
    rgba(0,0,0,0.28) calc(100% - var(--rail-fade) * 0.38),
    transparent 100%);
  padding-block: var(--sp-3) var(--sp-4);
  cursor: grab;
  touch-action: pan-y;          /* horizontal drag stays on the rail, page still scrolls */
}
.quotes--rail.is-grabbing { cursor: grabbing; }
.quotes--rail.is-grabbing * { user-select: none; }

.quotes__track {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
  will-change: transform;
}

.quotes--rail .quote {
  flex: 0 0 auto;
  width: min(80vw, 330px);
  height: auto;
  box-sizing: border-box;
  box-shadow: 0 16px 32px -24px rgba(20, 10, 24, 0.5);
}
@media (min-width: 46em) { .quotes--rail .quote { width: 320px; } }

.quotes__note {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   17. Closing band
   -------------------------------------------------------------------------- */

.closing {
  --surface-ink: var(--ink);
  --surface-soft: #5C4A45;
  --surface-accent: #7A3B32;
  background: var(--blush);
  color: var(--surface-ink);
  text-align: center;
}
.closing h2 { font-size: var(--step-3); }
.closing .lede { margin-inline: auto; }
/* The band is centred, so its action row centres with it. A flex row does not
   inherit text-align. */
.closing .flow-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   18. Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head { background: var(--paper-warm); border-bottom: 1px solid var(--rule); padding-block: var(--sp-5); }
.page-head h1 { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.page-head .lede { max-width: 56ch; }

/* --------------------------------------------------------------------------
   19. Gallery
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.chip {
  min-height: var(--tap);
  padding: 0.6rem 1.15rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--liner);
  border-color: var(--liner);
  color: var(--paper);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* two per row on phones, not one giant tile */
  gap: var(--sp-2);
}
@media (min-width: 34em) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--sp-3);
  }
}

.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  cursor: zoom-in;
  transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shot:hover { translate: 0 -5px; box-shadow: 0 24px 42px -30px rgba(42, 35, 32, 0.6); }
.shot[hidden] { display: none; }

.shot__frame { overflow: hidden; }
.shot img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: scale 900ms var(--ease);
}
.shot:hover img { scale: 1.05; }

.shot__cap {
  display: block;
  padding-top: 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-align: left;
}

.gallery-count {
  margin: var(--sp-4) auto 0;
  max-width: none;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

/* --------------------------------------------------------------------------
   20. Lightbox · the card lifted out of the envelope
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* above the sticky header */
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(24, 14, 28, 0.94);
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: auto;
}
.lightbox::backdrop { background: rgba(24, 14, 28, 0.94); }
.lightbox:not([open]) { display: none; }

.lightbox__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: min(100%, 44rem);
}

.lightbox__figure { margin: 0; background: var(--paper); padding: 0.75rem; }
.lightbox__figure img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  margin-inline: auto;
}
.lightbox__cap {
  padding-top: 0.75rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-align: center;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 0.9rem;
  background: transparent;
  color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--gold-bright) 60%, transparent);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.lb-btn:hover { background: var(--gold-bright); color: #2A1F06; }
.lb-btn:focus-visible { outline-color: var(--gold-bright); }
.lb-btn svg { width: 1.2em; height: 1.2em; }

.lightbox__count {
  min-width: 4.5rem;
  text-align: center;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* --------------------------------------------------------------------------
   21. About · signature card and ordering notes
   -------------------------------------------------------------------------- */

/* Her photograph, mounted the way a portrait is mounted on an invitation:
   paper border, plate mark, name engraved underneath.
   The source crop is 390px wide, so the frame is capped there and the
   picture is never asked to be bigger than it is. */
.signature {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  max-width: 390px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  text-align: center;
}
.signature__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.signature__plate {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding-top: var(--sp-3);
}
.signature__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
}
.signature__rule { width: 62%; height: 1px; background: var(--rule); }

.notes {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (min-width: 40em) { .notes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .notes { grid-template-columns: repeat(4, 1fr); } }

/* Every card sits on the same three rows, so a title that wraps to two lines
   in one column cannot push its own body copy out of step with the others. */
@supports (grid-template-rows: subgrid) {
  .notes { grid-template-rows: auto; }
  @media (min-width: 40em) {
    .notes { grid-auto-rows: auto; }
    .note {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      align-content: start;
    }
  }
}

.note {
  position: relative;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
}
.note__no {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
  margin-bottom: 0.6rem;
}
.note h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.note p { margin: 0; font-size: var(--step--1); line-height: 1.6; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   22. Contact
   -------------------------------------------------------------------------- */

.channels { display: grid; gap: var(--sp-3); }
@media (min-width: 46em) { .channels { grid-template-columns: repeat(3, 1fr); } }

.channel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: var(--sp-4) var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  text-decoration: none;
  color: var(--ink);
  transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.channel:hover {
  translate: 0 -5px;
  border-color: var(--gold);
  box-shadow: 0 24px 42px -30px rgba(42, 35, 32, 0.6);
}
.channel--primary { background: var(--liner); color: var(--paper); border-color: var(--liner); }
.channel--primary .channel__name { color: var(--paper); }
.channel--primary .channel__desc { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.channel--primary .channel__icon { color: var(--gold-bright); }

.channel__icon { width: 30px; height: 30px; color: var(--gold-ink); }
.channel__name { font-family: var(--font-display); font-size: var(--step-1); }
.channel__desc { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* Form */
.form-card {
  margin-top: var(--sp-5);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
}

.field { margin-bottom: var(--sp-3); }
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--gold-ink); font-weight: 600; letter-spacing: 0.06em; text-transform: none; }
.field .hint { display: block; margin-top: 0.3rem; font-size: var(--step--1); color: var(--ink-soft); font-weight: 400; letter-spacing: 0; text-transform: none; }

.field input,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  transition: border-color 200ms var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }

/* The hCaptcha widget is a fixed-width iframe; keep it from forcing a
   horizontal scrollbar when the page is zoomed or narrow (WCAG 1.4.10). */
.field--captcha { max-width: 100%; overflow-x: auto; }
.field input:hover, .field textarea:hover { border-color: var(--gold); }
.field input:focus, .field textarea:focus { border-color: var(--gold); }

/* A struck note, in the same plate-mark language as the cards. State is
   carried by a mark as well as colour, never by colour alone. */
.form-status {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: var(--sp-3) 0 0;
  max-width: none;
  padding: 0.9rem 1.1rem;
  font-size: var(--step--1);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
}
.form-status[hidden] { display: none; }
.form-status::before {
  content: "◆";
  font-size: 0.55rem;
  color: var(--gold);
  flex: none;
}
.form-status--ok { border-color: #3F6B45; }
.form-status--ok::before { content: "✓"; font-size: 0.9rem; color: #2F5E37; }
.form-status--err { border-color: #9B3B2E; }
.form-status--err::before { content: "!"; font-size: 0.9rem; font-weight: 800; color: #8A2F23; }

.service-area {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   23. Prose (accessibility statement)
   -------------------------------------------------------------------------- */

.prose h2 { font-size: var(--step-2); margin-top: var(--sp-5); }
.prose ul { list-style: none; margin: 0 0 var(--sp-3); }
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
  max-width: var(--measure);
}
.prose ul li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-size: 0.55rem;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   24. Very narrow screens
   Reflow is required at 320px (WCAG 1.4.10) and holds there. This block
   keeps the masthead usable further down, for small phones at high zoom.
   -------------------------------------------------------------------------- */

@media (max-width: 23em) {
  .wrap, .wrap-tight { width: min(100% - 1.4rem, var(--wrap)); }
  .masthead__inner { gap: var(--sp-2); }
  .seal img { width: 34px; height: 34px; }
  .seal__name { font-size: 1rem; }
  .seal__sub { letter-spacing: 0.14em; }
  .lang__btn { min-width: 32px; padding: 0 0.3rem; font-size: 0.66rem; }
  .menu-toggle { width: 40px; }
  .filters { gap: var(--sp-1); }
  .chip { padding: 0.6rem 0.8rem; }
}

/* Handles and addresses may break mid-token rather than overflow. */
.quote cite,
.colophon__list a,
.channel__desc { overflow-wrap: anywhere; }