/* =============================================================
   SECTIONS — Golden Master MOBILE artboard (390), transcribed.
   responsive.css applies the desktop artboard (1440) at the
   composition switch. Section order and register order are fixed by
   the Golden Master and must not be rearranged.
   ============================================================= */

/* -----------------------------------------------------------------
   01 — ANKUNFT / HERO
   GM: padding 44px 20px 0 · image full-bleed below the CTAs
   ----------------------------------------------------------------- */
.s-hero__inner {
  padding-top: var(--fkn-pad-hero-top);
}

.s-hero__region {
  margin-top: 6px;
}

.s-hero__title {
  margin-top: 24px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-display);
  font-weight: 800;
  line-height: var(--fkn-lh-display);
  letter-spacing: var(--fkn-ls-display);
  color: var(--fkn-ink);
}

/* H1 reveal — once, on load, 700 ms.
   clip-path, not overflow:hidden, so long German lines are never
   clipped horizontally. The Golden Master sets the headline as one
   flowing block on mobile and as two explicit lines on desktop, so
   the reveal follows: one clip line here, two staggered on desktop. */
.s-hero__line,
.s-hero__line > span {
  display: inline;
}

.s-hero__title {
  clip-path: inset(-0.06em -0.6em 100% -0.6em);
}

.js .s-hero__title {
  animation: fkn-reveal-clip var(--fkn-duration-reveal) var(--fkn-ease) forwards;
}

@keyframes fkn-reveal-clip {
  to { clip-path: inset(-0.06em -0.6em -0.14em -0.6em); }
}

@keyframes fkn-reveal-rise {
  from { transform: translateY(0.32em); }
  to { transform: translateY(0); }
}

.s-hero__lead {
  margin-top: 20px;
}

/* Gold Thread role 1 — the hero tick. GM mobile: 110px rule. */
.s-hero__thread {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.s-hero__thread .fkn-thread {
  width: 110px;
}

.s-hero__actions {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}

.s-hero__actions .fkn-link {
  justify-self: start;
}

/* GM pads the coordinate line itself rather than inheriting the shell,
   so its box spans the full artboard width. */
.s-hero__coords {
  margin-inline: calc(var(--fkn-pad-x) * -1);
}

/* GM: the hero image sits outside the padded column, full width. */
.s-hero__media {
  margin-top: 36px;
  margin-inline: calc(var(--fkn-pad-x) * -1);
}

.s-hero__figure .fkn-photo__frame {
  --fkn-photo-h: var(--fkn-h-hero);
}

.s-hero__coords {
  padding: 16px var(--fkn-pad-x) 44px;
}

/* Production stamp along the image edge — desktop only in the GM. */
.s-hero__stamp {
  display: none;
}

/* -----------------------------------------------------------------
   02 — DAS VERSPRECHEN
   GM: border-top · padding 72px 20px 64px
   ----------------------------------------------------------------- */
/* The promise reads as a sheet laid on the page rather than a run of body
   copy: one step lighter than the surrounding ivory, held between its own
   rule and the next section's, with the registration mark in the margin.
   Same daylight register,
   same components — only the ground changes. */
.s-promise {
  position: relative;
  background: var(--fkn-paper);
  border-top: var(--fkn-rule) solid var(--fkn-border);
  padding-block: var(--fkn-pad-s02-top) var(--fkn-pad-s02-bottom);
}

.s-promise__title {
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-promise);
  font-weight: 700;
  line-height: var(--fkn-lh-promise);
  letter-spacing: -0.02em;
  color: var(--fkn-ink);
}

/* The approved desktop headline breaks after "deinem"; on mobile the
   line flows and the break is suppressed. */
.s-promise__break {
  display: none;
}

/* Hand-drawn circle around "Gast" — an irregular SVG path, never a
   CSS ellipse. Stroke colour lives in CSS so the token layer stays
   the only source of colour. GM mobile: padding 1px 13px 4px. */
.s-promise__circled {
  position: relative;
  display: inline-block;
  padding: 1px 13px 4px;
}

.s-promise__circled svg {
  position: absolute;
  left: -5px;
  top: -3px;
  width: calc(100% + 10px);
  height: calc(100% + 7px);
  /* The Golden Master lets the mark overhang the word it circles. The
     document-wide `max-width: 100%` would trim exactly that overhang and
     pull the ellipse left of the word — it must not apply here. */
  max-width: none;
  overflow: visible;
  transform: rotate(-2deg);
}

.s-promise__circled path {
  stroke: var(--fkn-gold-deep);
  stroke-width: 3.2;
}

.s-promise__pair {
  margin-top: 36px;
  display: grid;
  gap: 22px;
}

.s-promise__item {
  border-left: var(--fkn-rule) solid var(--fkn-border-strong);
  padding-left: 16px;
}

.s-promise__item dt {
  line-height: normal;
  margin-bottom: 6px;
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-promise-label);
  font-weight: 600;
  letter-spacing: var(--fkn-ls-promise-label);
  text-transform: uppercase;
  color: var(--fkn-stone-deep);
}

.s-promise__item dd {
  margin: 0;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-promise-quote);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fkn-ink);
}

.s-promise__passmark {
  position: absolute;
  left: var(--fkn-pad-x);
  top: 28px;
}

/* -----------------------------------------------------------------
   03 — DER ABLAUFPLAN · Signature B
   GM mobile: vertical production timeline, 86px time column,
   axis at left 26px, bar macro breaking to the right edge.
   Never cards, never an FAQ pattern, never chevrons.
   ----------------------------------------------------------------- */
.s-runofshow {
  border-top: var(--fkn-rule) solid var(--fkn-border);
  padding-block: var(--fkn-pad-s03-top) var(--fkn-pad-s03-bottom);
}

.s-runofshow__title {
  margin-top: 16px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-h2-section);
  font-weight: 700;
  line-height: var(--fkn-lh-h2-section);
  letter-spacing: -0.02em;
  color: var(--fkn-ink);
}

.s-runofshow__intro {
  margin-top: 12px;
  font-size: var(--fkn-fs-intro);
  line-height: var(--fkn-lh-intro);
  color: var(--fkn-text-2);
}

.s-runofshow__schedule {
  margin-top: 40px;
}

.s-runofshow__track {
  position: relative;
}

/* Gold Thread role 2 — the run-of-show axis, drawn once on entry. */
.s-runofshow__axis {
  position: absolute;
  /* 6px in from the time column, so the thread runs through the dots
     (dot left 2.5px + half its 8px width). The track is already inside the
     page padding — measuring 26px from here put it 20px right of them. */
  left: 6px;
  top: 12px;
  bottom: 8px;
  width: var(--fkn-rule-thread);
  background: var(--fkn-gold);
}

.s-runofshow__entry {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  column-gap: 14px;
  padding-bottom: 36px;
}

.s-runofshow__entry--note {
  padding-bottom: 20px;
}

/* GM gives the 20:00 entry extra breathing room after the image. */
/* The 18:00 entry closes with the image interruption, whose own 20px
   bottom margin is the whole distance to the next entry on the artboard —
   the row's usual bottom padding would double it. */
.s-runofshow__entry--note {
  padding-bottom: 0;
}

.s-runofshow__entry--after-break {
  padding: 16px 0 36px;
}

.s-runofshow__entry:last-of-type {
  padding-bottom: 0;
}

.s-runofshow__timecol {
  position: relative;
}

.s-runofshow__dot {
  position: absolute;
  left: 2.5px;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--fkn-gold);
  border-radius: 50%;
}

.s-runofshow__entry--after-break .s-runofshow__dot { top: 24px; }
.s-runofshow__entry--after-break .fkn-time { padding-top: 16px; }
.s-runofshow__entry--after-break .s-runofshow__body { padding-top: 16px; }

/* Times are protagonists and always real text. */
.fkn-time {
  line-height: normal;
  display: block;
  padding-left: 22px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-time);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fkn-gold-deep);
}

.s-runofshow__station {
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-station);
  font-weight: 700;
  line-height: var(--fkn-lh-station);
  letter-spacing: -0.015em;
  color: var(--fkn-ink);
}

.s-runofshow__stationline {
  /* GM mobile omits the pen note, so the station heading is a plain
     block filling its column; desktop turns this into the flex row. */
  display: block;
}

/* The "Eis nicht vergessen!" pen note is desktop-only in the Golden
   Master — mobile omits it to keep the handwriting budget. */
.s-runofshow__stationline .fkn-hand {
  display: none;
  font-size: var(--fkn-fs-hand-note);
  transform: rotate(-2deg);
}

.s-runofshow__entry p {
  margin-top: 8px;
  font-size: var(--fkn-fs-entry);
  line-height: 1.6;
  color: var(--fkn-text-3);
}

/* Image interruption: the bar macro breaks the axis to the right edge
   instead of sitting in a side column (approved mobile break). */
.s-runofshow__figure {
  grid-column: 1 / -1;
  margin: 20px calc(var(--fkn-pad-x) * -1) 20px 120px;
}

.s-runofshow__figure .fkn-photo__frame {
  --fkn-photo-h: var(--fkn-h-ros-bar);
}

.s-runofshow__figure figcaption {
  margin-top: 7px;
}

/* 03b pass macro is desktop-only by design (Golden Master). */
.s-runofshow__figure--pass {
  display: none;
}

.s-runofshow__foot {
  margin: 44px var(--fkn-pad-x) 0;
  padding-inline: 0;
  padding-top: 16px;
  border-top: var(--fkn-rule) solid var(--fkn-border-strong);
  display: grid;
  gap: 12px;
  justify-items: start;
}

.s-runofshow__foot p {
  font-size: var(--fkn-fs-foot-note);
  line-height: 1.5;
  color: var(--fkn-text-3);
}

/* -----------------------------------------------------------------
   04 — DAS NETZWERK
   GM mobile: Fackiner circle first and dominant, thread down to two
   monochrome partner rows. Never a logo strip, never equal columns.
   ----------------------------------------------------------------- */
.s-network {
  border-top: var(--fkn-rule) solid var(--fkn-border);
  padding-block: var(--fkn-pad-s04-y);
}

.s-network__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.s-network__head h2 {
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-h2-network);
  font-weight: 700;
  line-height: var(--fkn-lh-h2-network);
  letter-spacing: -0.02em;
  color: var(--fkn-ink);
}

.s-network__diagram {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The single gold-framed actor on the page. GM mobile: 180×180. */
.s-network__centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: var(--fkn-centre-size, 180px);
  height: var(--fkn-centre-size, 180px);
  padding: 14px;
  background: var(--fkn-paper);
  border: var(--fkn-rule-centre) solid var(--fkn-gold);
  border-radius: 50%;
  text-align: center;
  flex: none;
}

.s-network__centre b {
  font-family: var(--fkn-font-display);
  text-transform: uppercase;
  font-size: var(--fkn-fs-centre-name);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  color: var(--fkn-ink);
}

.s-network__centre span {
  line-height: normal;
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-centre-meta);
  font-weight: 500;
  letter-spacing: var(--fkn-ls-centre-meta);
  text-transform: uppercase;
  color: var(--fkn-gold-deep);
}

/* Gold Thread role 3 — the network connector. */
.s-network__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-network__connector i {
  width: var(--fkn-rule-thread);
  height: 36px;
  background: var(--fkn-gold);
}

.s-network__connector b {
  width: 5px;
  height: 5px;
  background: var(--fkn-gold);
}

.s-network__partner {
  width: 100%;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-top: var(--fkn-rule) solid var(--fkn-border);
  margin-top: 18px;
  padding-top: 18px;
}

.s-network__partner--cocktailchef {
  margin-top: 14px;
}

.s-network__partner p {
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-partner-caption);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--fkn-ls-partner-caption);
  color: var(--fkn-text-3);
}

.s-network__specialists span {
  line-height: normal;
  display: block;
}

.s-network__specialists {
  width: 100%;
  border-top: var(--fkn-rule) solid var(--fkn-border);
  margin-top: 18px;
  padding-top: 16px;
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-specialists);
  font-weight: 500;
  letter-spacing: var(--fkn-ls-specialists);
  text-transform: uppercase;
  color: var(--fkn-stone);
}

/* Mobile order: Fackiner first and dominant, supports below. */
.s-network__centre { order: 1; }
.s-network__connector--a { order: 2; }
.s-network__partner--cocktailchef { order: 3; }
.s-network__partner--isswat { order: 4; }
.s-network__specialists { order: 5; }
.s-network__connector--b { display: none; }

/* -----------------------------------------------------------------
   05 — JEDER ANLASS
   GM mobile: staggered vertical typographic composition.
   Never chips, pills, cards or icons.
   ----------------------------------------------------------------- */
.s-occasions {
  position: relative;
  border-top: var(--fkn-rule) solid var(--fkn-border);
  padding-block: var(--fkn-pad-s05-top) var(--fkn-pad-s05-bottom);
  overflow: hidden;
}

/* Oversized cropped edge typography — the one grid break here. */
.s-occasions__werk {
  position: absolute;
  right: -18px;
  top: 20px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-werk);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fkn-werk);
  white-space: nowrap;
  pointer-events: none;
}

.s-occasions__inner {
  position: relative;
}

.s-occasions__list {
  margin-top: 28px;
  display: grid;
  gap: 14px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-occasion);
  font-weight: 700;
  line-height: var(--fkn-lh-occasion);
  letter-spacing: -0.02em;
  color: var(--fkn-ink);
}

.s-occasions__list li:nth-child(2) { padding-left: 28px; }
.s-occasions__list li:nth-child(4) { padding-left: 48px; }
.s-occasions__list li:nth-child(6) { padding-left: 28px; }

/* "private Veranstaltungen" stays the quiet one in the column, set back
   to the second indent so the last line can return flush left. */
.s-occasions__list li:nth-child(7) {
  padding-left: 48px;
  font-weight: 400;
  font-style: italic;
}

.s-occasions__list li:last-child {
  justify-self: start;
  color: var(--fkn-gold-deep);
}

.s-occasions__own {
  position: relative;
  display: inline-block;
}

.s-occasions__own svg {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 10px;
  max-width: none;
}

.s-occasions__own path {
  stroke: var(--fkn-gold);
  stroke-width: 2;
}

.s-occasions__turn {
  margin-top: 72px;
  margin-left: 56px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-turn);
  font-weight: 500;
  line-height: var(--fkn-lh-turn);
  letter-spacing: -0.01em;
  color: var(--fkn-ink);
}

/* -----------------------------------------------------------------
   06 — DER ÜBERGANG / DIMMING MOMENT · Signature C
   Occurs exactly once, after 05. GM mobile band: 440px.
   The veil carries the approved colour run; JS crossfades it over the
   section height. Its static default IS the approved frame, so no-JS
   and reduced-motion land on the same picture.
   ----------------------------------------------------------------- */
.s-dimming {
  position: relative;
  height: var(--fkn-dim-distance);
  isolation: isolate;
  background: var(--fkn-ivory);
}

.s-dimming__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--fkn-dim);
  background: var(--fkn-dim-run);
}

.s-dimming__inner {
  position: absolute;
  left: var(--fkn-pad-x);
  right: var(--fkn-pad-x);
  top: 58%;
  transform: translateY(-50%);
}

/* Gold Thread role 4 — the dimming marker. */
.s-dimming__mark {
  display: flex;
  align-items: center;
  gap: 14px;
}

.s-dimming__mark i {
  width: 40px;
  height: var(--fkn-rule-thread);
  background: var(--fkn-gold-light);
}

.s-dimming__mark b {
  width: 4px;
  height: 4px;
  background: var(--fkn-gold-light);
}

.s-dimming__marker {
  margin-top: 16px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-dim-marker);
  font-weight: 700;
  line-height: var(--fkn-lh-dim-marker);
  letter-spacing: -0.015em;
  /* Hard state switch at the 50 % point — text colour is never
     interpolated through inaccessible contrast (freeze risk 1). */
  color: var(--fkn-text-dark);
}

.s-dimming__time {
  font-variant-numeric: tabular-nums;
  color: var(--fkn-gold-light);
}

.s-dimming__note {
  margin-top: 10px;
  font-size: var(--fkn-fs-dim-note);
  line-height: 1.6;
  color: var(--fkn-text-dark-2);
}

.s-dimming[data-dim-state="light"] .s-dimming__marker { color: var(--fkn-ink); }
.s-dimming[data-dim-state="light"] .s-dimming__time { color: var(--fkn-gold-deep); }
.s-dimming[data-dim-state="light"] .s-dimming__note { color: var(--fkn-text-3); }
.s-dimming[data-dim-state="light"] .s-dimming__mark i,
.s-dimming[data-dim-state="light"] .s-dimming__mark b { background: var(--fkn-gold); }

/* -----------------------------------------------------------------
   07 — MOMENTE, DIE BLEIBEN
   GM mobile: three chapters stacked, crops alternating sides.
   Never masonry, gallery, slider, carousel or rating cards.
   ----------------------------------------------------------------- */
.s-moments {
  padding-bottom: var(--fkn-pad-s07-bottom);
}

.s-moments__opening .fkn-photo__frame {
  --fkn-photo-h: var(--fkn-h-moment-wide);
  border: 0;
}

.s-moments__head {
  padding: 22px var(--fkn-pad-x) 0;
}

.s-moments__place {
  line-height: normal;
  margin-top: 8px;
  font-family: var(--fkn-font-mono);
  font-size: var(--fkn-fs-place);
  font-weight: 500;
  letter-spacing: var(--fkn-ls-place);
  text-transform: uppercase;
  color: var(--fkn-meta-dark);
}

.s-moments__chapter {
  margin-top: 64px;
}

/* Portrait chapter is bound left with air on the right. */
.s-moments__portrait {
  width: calc(100% - 36px);
  margin-right: 36px;
}

.s-moments__portrait .fkn-photo__frame {
  --fkn-photo-h: var(--fkn-h-moment-portrait);
  border-left: 0;
}

.s-moments__voice {
  padding: 26px var(--fkn-pad-x) 0;
}

/* Gold Thread role 5 — moments ticks. */
.s-moments__tick {
  display: flex;
  align-items: center;
  gap: 12px;
}

.s-moments__tick i {
  width: 32px;
  height: var(--fkn-rule-thread);
  background: var(--fkn-gold-light);
}

.s-moments__tick b {
  width: 4px;
  height: 4px;
  background: var(--fkn-gold-light);
}

.s-moments__quote {
  margin-top: 18px;
}

.s-moments__quote p {
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-quote);
  font-weight: 600;
  line-height: var(--fkn-lh-quote);
  letter-spacing: -0.015em;
  color: var(--fkn-text-dark-hi);
}

/* The voice is unmistakably marked as placeholder copy until a real,
   approved customer statement exists. Never presented as genuine. */
.s-moments__voice-flag {
  line-height: normal;
  margin-top: 12px;
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-voice-flag);
  font-weight: 500;
  letter-spacing: var(--fkn-ls-voice-flag);
  text-transform: uppercase;
  color: var(--fkn-meta-dark);
}

/* Detail chapter runs off the right edge. */
.s-moments__detail {
  width: calc(100% - 56px);
  margin-left: 56px;
}

.s-moments__detail .fkn-photo__frame {
  --fkn-photo-h: var(--fkn-h-moment-detail);
  border-right: 0;
}

.s-moments__gesture {
  padding: 22px var(--fkn-pad-x) 0;
  font-size: var(--fkn-fs-gesture);
  line-height: 1.65;
  color: var(--fkn-text-dark-2);
}

/* -----------------------------------------------------------------
   08 — DER WEG DORTHIN
   GM mobile: quiet vertical process line on the gold thread.
   No cards, no icons, no numbered tiles.
   ----------------------------------------------------------------- */
.s-process {
  padding-block: var(--fkn-pad-s08-top) var(--fkn-pad-s08-bottom);
}

.s-process__title {
  margin-top: 16px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-h2-section);
  font-weight: 700;
  line-height: var(--fkn-lh-h2-section);
  letter-spacing: -0.02em;
  color: var(--fkn-ink);
}

.s-process__steps {
  position: relative;
  margin-top: 40px;
}

/* Each principle opens on its own rule with a short gold head — the
   production-paper mark of the rest of the page. Deliberately not one
   continuous line: a thread running through all four would read as a
   sequence, and the run of show already owns that idea. */
.s-process__step {
  position: relative;
  padding-top: 18px;
  padding-bottom: 28px;
  border-top: var(--fkn-rule) solid var(--fkn-border);
}

.s-process__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--fkn-rule) * -1);
  width: 28px;
  height: var(--fkn-rule);
  background: var(--fkn-gold);
}

.s-process__step:last-child {
  padding-bottom: 0;
}

.s-process__index {
  line-height: normal;
  display: block;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-step-index);
  font-weight: 800;
  color: var(--fkn-gold-deep);
}

.s-process__step h3 {
  line-height: normal;
  margin-top: 6px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-step-title);
  font-weight: 700;
  color: var(--fkn-ink);
}

.s-process__step p {
  margin-top: 6px;
  font-size: var(--fkn-fs-step-body);
  line-height: 1.6;
  color: var(--fkn-text-3);
}

.s-process__region {
  margin-top: 48px;
  padding-top: 18px;
  border-top: var(--fkn-rule) solid var(--fkn-border);
}

.s-process__region-text {
  font-size: var(--fkn-fs-region);
  line-height: 1.6;
  color: var(--fkn-text-3);
}

/* -----------------------------------------------------------------
   09 — DIE EINLADUNG
   GM mobile: stacked touch targets, signature closing the thread.
   No gradient CTA banner.
   ----------------------------------------------------------------- */
.s-invitation {
  position: relative;
  padding-block: var(--fkn-pad-s09-top) var(--fkn-pad-s09-bottom);
}

/* Gold Thread role 7 (part 1) — the closing vertical thread. */
.s-invitation__thread {
  position: absolute;
  left: 26px;
  top: 0;
  height: 52px;
  width: var(--fkn-rule-thread);
  background: linear-gradient(
    180deg,
    var(--fkn-gold-light-0) 0%,
    var(--fkn-gold-light) 100%
  );
}

.s-invitation__body h2 {
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-h2-invitation);
  font-weight: 700;
  line-height: var(--fkn-lh-h2-invitation);
  letter-spacing: -0.02em;
  color: var(--fkn-text-dark-hi);
}

.s-invitation__lead {
  margin-top: 16px;
  font-size: var(--fkn-fs-invitation-lead);
  line-height: 1.6;
  color: var(--fkn-text-dark-2);
}

.s-invitation__actions {
  margin-top: 32px;
  display: grid;
  gap: 14px;
}

/* Gold Thread role 7 (part 2) — the handwritten closing signature. */
.s-invitation__signature {
  margin-top: 52px;
  display: flex;
  justify-content: flex-end;
}

.s-invitation__signature > span {
  display: block;
  transform: rotate(-3deg);
}

.s-invitation__signature-name {
  display: block;
  font-family: var(--fkn-font-hand);
  font-size: var(--fkn-fs-signature);
  font-weight: 600;
  line-height: 1.1;
  color: var(--fkn-gold-light);
}

.s-invitation__signature svg {
  margin-top: 2px;
  max-width: none;
}

.s-invitation__rule--wide {
  display: none;
}

/* -----------------------------------------------------------------
   CONTACT / INQUIRY PAGE — same system, calm and functional.
   Not part of the Golden Master artboards.
   ----------------------------------------------------------------- */
.s-inquiry {
  padding-block: var(--fkn-pad-s08-top) var(--fkn-pad-s08-bottom);
}

.s-inquiry__back {
  display: inline-flex;
  align-items: center;
  gap: var(--fkn-space-3);
  min-height: 44px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-foot-note);
  font-weight: 600;
  color: var(--fkn-gold-deep);
}

.s-inquiry__back:hover,
.s-inquiry__back:focus-visible {
  color: var(--fkn-ink);
}

.s-inquiry__title {
  margin-top: 16px;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-h2-section);
  font-weight: 700;
  line-height: var(--fkn-lh-h2-section);
  letter-spacing: -0.02em;
  color: var(--fkn-ink);
}

.s-inquiry__lead {
  margin-top: 16px;
}

.s-inquiry__thread {
  margin-top: 32px;
  width: 110px;
}

.s-inquiry__layout {
  margin-top: 48px;
  display: grid;
  gap: 48px;
  align-items: start;
}

.s-inquiry__form {
  display: grid;
  gap: var(--fkn-space-5);
  max-width: 40rem;
}

.s-inquiry__legend {
  padding: 0;
  margin-bottom: var(--fkn-space-5);
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--fkn-ls-eyebrow);
  text-transform: uppercase;
  color: var(--fkn-gold-deep);
}

.s-inquiry__set {
  padding: 0;
  margin: 0;
  border: 0;
  display: grid;
  gap: var(--fkn-space-5);
}

.s-inquiry__set + .s-inquiry__set {
  padding-top: var(--fkn-space-6);
  border-top: var(--fkn-rule) solid var(--fkn-border);
}

.s-inquiry__row {
  display: grid;
  gap: var(--fkn-space-5);
}

.s-inquiry__submit {
  display: grid;
  gap: var(--fkn-space-4);
  justify-items: start;
}

.s-inquiry__aside {
  display: grid;
  gap: var(--fkn-space-6);
  align-content: start;
  padding-top: var(--fkn-space-5);
  border-top: var(--fkn-rule) solid var(--fkn-border-strong);
}

.s-inquiry__aside h2 {
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-step-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fkn-ink);
}

.s-inquiry__contact {
  display: grid;
  gap: var(--fkn-space-2);
  font-size: var(--fkn-fs-foot-note);
  color: var(--fkn-text-3);
}

/* -----------------------------------------------------------------
   Endpoint-specific strings and breaks.
   The Golden Master labels a few elements differently at 390 and at
   1440. Both strings are its own; each endpoint shows exactly one.
   ----------------------------------------------------------------- */
.fkn-note__label--wide,
.fkn-note__when--wide {
  display: none;
}

/* The run of show is written twice in the Golden Master: the 1440
   artboard carries the full sentences, the 390 artboard a condensed
   rewrite, and 390 drops the second production-note line altogether.
   Each endpoint renders exactly one version — the other is display:none
   and so is absent from the accessibility tree too, never read twice. */
.fkn-wide-only {
  display: none;
}

/* The note lines are flex rows (`.fkn-note__body li`), which outranks the
   utility above, so the desktop-only line needs the same specificity. */
.fkn-note__body li.fkn-wide-only {
  display: none;
}

.s-dimming__break {
  display: inline;
}