/* =============================================================
   COMPONENTS — every value transcribed from the Golden Master.
   Mobile artboard (390) is the base; the desktop artboard (1440)
   is applied in responsive.css at the composition switch.
   ============================================================= */

/* -----------------------------------------------------------------
   HEADER
   GM mobile: padding 0 20px · height 64px · plaque 6px 10px · logo 26px
   GM desktop: padding 0 64px · height 96px · plaque 9px 14px · logo 38px
   Solid ivory, 1px #E2DCCD rule beneath. No blur, no translucency.
   ----------------------------------------------------------------- */
.fkn-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fkn-ivory);
  border-bottom: var(--fkn-rule) solid var(--fkn-border);
}

.fkn-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fkn-space-5);
  height: var(--fkn-header-h);
  transition: height var(--fkn-duration-fast) var(--fkn-ease);
}

.fkn-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: var(--fkn-plaque-pad);
  background: var(--fkn-plaque);
}

.fkn-brand img {
  height: var(--fkn-logo-h);
  width: auto;
  transition: height var(--fkn-duration-fast) var(--fkn-ease);
}

/* ---------- Desktop navigation ----------
   GM: gap 36px · 600 15px Schibsted Grotesk · letter-spacing 0.01em */
.fkn-nav {
  display: none;
}

.fkn-header .fkn-header__cta {
  display: none;
}

.fkn-nav__list {
  display: flex;
  align-items: center;
  gap: var(--fkn-nav-gap, 36px);
}

.fkn-nav__link {
  line-height: normal;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  font-family: var(--fkn-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fkn-ink);
  transition: color var(--fkn-duration-fast) var(--fkn-ease);
}

/* Hairline grows from the left — state, not decoration. */
.fkn-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--fkn-rule);
  background: var(--fkn-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fkn-duration-fast) var(--fkn-ease);
}

.fkn-nav__link:hover,
.fkn-nav__link:focus-visible {
  color: var(--fkn-gold-deep);
}

.fkn-nav__link:hover::after,
.fkn-nav__link:focus-visible::after,
.fkn-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ---------- Hamburger ----------
   GM: 44×44 target, bars 22×1.5 and 15×1.5, gap 6, right aligned. */
.fkn-burger {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
}

.fkn-burger span[aria-hidden] {
  display: block;
  height: 1.5px;
  background: var(--fkn-ink);
}

.fkn-burger span[aria-hidden]:nth-of-type(1) { width: 22px; }
.fkn-burger span[aria-hidden]:nth-of-type(2) { width: 15px; }

/* ---------- Mobile navigation overlay ----------
   Not in the Golden Master artboards (they show the closed header);
   specified by docs/design-freeze.md: full-surface night, 260 ms,
   focus trap, Escape and an explicit close control. */
.fkn-navpanel {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: var(--fkn-pad-x);
  background: var(--fkn-night);
  box-shadow: var(--fkn-shadow-overlay);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--fkn-duration-base) var(--fkn-ease),
    visibility 0s linear var(--fkn-duration-base);
}

.fkn-navpanel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--fkn-duration-base) var(--fkn-ease),
    visibility 0s;
}

.fkn-navpanel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fkn-space-5);
  min-height: 44px;
}

.fkn-navpanel__close {
  display: inline-flex;
  align-items: center;
  gap: var(--fkn-space-3);
  min-height: 44px;
  padding-inline: var(--fkn-space-2);
  font-family: var(--fkn-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fkn-text-dark);
}

.fkn-navpanel__close span[aria-hidden] {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--fkn-gold-light);
}

.fkn-navpanel__list {
  display: grid;
  gap: var(--fkn-space-2);
  margin-top: var(--fkn-space-9);
}

.fkn-navpanel__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-family: var(--fkn-font-display);
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fkn-text-dark-hi);
}

.fkn-navpanel__foot {
  margin-top: auto;
  display: grid;
  gap: var(--fkn-space-4);
  padding-top: var(--fkn-space-7);
}

body[data-nav-open="true"] {
  overflow: hidden;
}

/* -----------------------------------------------------------------
   CTA SYSTEM
   GM primary light: height 52 · padding 0 28 · #1C1812 on #F4F0E6
   GM primary night: height 52 · padding 0 28 · #F4F0E6 on #1C1812
   GM header CTA:    height 44 · padding 0 22 · 14.5px
   Mobile primary is full width at height 48 (hero) / 52 (section 09).
   Radius 0 throughout — no pill buttons.
   ----------------------------------------------------------------- */
.fkn-cta {
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding: 0 28px;
  background: var(--fkn-ink);
  color: var(--fkn-ivory);
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-cta);
  font-weight: 600;
  border-radius: var(--fkn-radius-0);
  transition: background var(--fkn-duration-fast) var(--fkn-ease);
}

.fkn-cta:hover,
.fkn-cta:focus-visible {
  background: var(--fkn-night);
  color: var(--fkn-ivory);
}

/* On night the primary CTA inverts — ivory ground, ink label. */
.register-night .fkn-cta {
  height: 52px;
  background: var(--fkn-ivory);
  color: var(--fkn-ink);
}

.register-night .fkn-cta:hover,
.register-night .fkn-cta:focus-visible {
  background: var(--fkn-paper);
  color: var(--fkn-ink);
}

.fkn-cta--compact {
  height: 44px;
  padding: 0 22px;
  font-size: 14.5px;
}

.fkn-cta__arrow {
  transition: transform var(--fkn-duration-fast) var(--fkn-ease);
}

.fkn-cta:hover .fkn-cta__arrow,
.fkn-cta:focus-visible .fkn-cta__arrow,
.fkn-cta:active .fkn-cta__arrow,
.fkn-link:hover .fkn-cta__arrow,
.fkn-link:focus-visible .fkn-cta__arrow,
.fkn-link:active .fkn-cta__arrow {
  transform: translateX(4px);
}

/* Secondary — outlined rectangle, transparent fill.
   GM section 09 mobile: 48px box plus its 1px rule on each edge, so the
   rendered button is 50 — the rule sits outside the 48 on the artboard. */
.fkn-cta--outline {
  height: calc(48px + 2 * var(--fkn-rule));
  background: transparent;
  color: var(--fkn-gold-deep);
  border: var(--fkn-rule) solid var(--fkn-gold-deep);
}

.register-night .fkn-cta--outline {
  height: calc(48px + 2 * var(--fkn-rule));
  background: transparent;
  color: var(--fkn-gold-light);
  border: var(--fkn-rule) solid var(--fkn-border-gold-soft);
}

.register-night .fkn-cta--outline:hover,
.register-night .fkn-cta--outline:focus-visible {
  background: transparent;
  color: var(--fkn-gold-light);
  border-color: var(--fkn-gold-light);
}

/* Text CTA — GM: 600 15px Schibsted, 1.5px gold underline, pad 6px 0 3px */
.fkn-link {
  line-height: normal;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--fkn-gold-deep);
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-cta);
  font-weight: 600;
  padding: 6px 0 3px;
  border-bottom: var(--fkn-rule-underline) solid var(--fkn-gold);
  transition: color var(--fkn-duration-fast) var(--fkn-ease);
}

.fkn-link:hover,
.fkn-link:focus-visible {
  color: var(--fkn-gold);
}

.register-night .fkn-link {
  color: var(--fkn-gold-light);
  border-bottom-color: var(--fkn-gold-light);
}

/* -----------------------------------------------------------------
   GOLD THREAD · Signature A — seven approved roles only.
   1 hero tick · 2 run-of-show axis · 3 network connector ·
   4 dimming marker · 5 moments ticks · 6 process line · 7 signature.
   ----------------------------------------------------------------- */
.fkn-thread {
  display: flex;
  align-items: center;
  flex: none;
}

.fkn-thread__line {
  height: var(--fkn-rule-thread);
  flex: 1;
  background: var(--fkn-ink);
}

.fkn-thread__tick {
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--fkn-gold);
}

/* Drawn once on entry — scaled, never re-laid-out. */
.fkn-draw {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--fkn-duration-draw) var(--fkn-ease);
}

.fkn-draw[data-drawn="true"] {
  transform: scaleY(1);
}

.fkn-signature__stroke {
  stroke: var(--fkn-gold-light);
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset var(--fkn-duration-draw) var(--fkn-ease);
}

[data-drawn="true"] .fkn-signature__stroke {
  stroke-dashoffset: 0;
}

/* -----------------------------------------------------------------
   PRODUCTION PAPER
   GM registration mark: 16×16, 1px rgba(28,24,18,0.4) cross.
   GM crate label:       1px #1C1812, padding 5px 12px (desktop)
                                      padding 4px 10px (mobile)
   ----------------------------------------------------------------- */
.fkn-passmark {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.fkn-passmark::before,
.fkn-passmark::after {
  content: "";
  position: absolute;
  background: var(--fkn-passmark);
}

.fkn-passmark::before {
  left: 0;
  right: 0;
  top: 7.5px;
  height: 1px;
}

.fkn-passmark::after {
  top: 0;
  bottom: 0;
  left: 7.5px;
  width: 1px;
}

.fkn-stamp {
  line-height: normal;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 10px;
  border: var(--fkn-rule) solid var(--fkn-ink);
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-stamp-label);
  font-weight: 600;
  letter-spacing: var(--fkn-ls-stamp-label);
  text-transform: uppercase;
}

/* Production note — a document excerpt on paper stock, never an FAQ
   panel. <details> carries the semantics; the browser's disclosure
   triangle is suppressed and no chevron replaces it.
   GM mobile: padding 16px 18px · GM desktop: padding 20px 24px */
.fkn-note {
  margin-top: var(--fkn-note-gap, 14px);
  background: var(--fkn-paper);
  border: var(--fkn-rule) solid var(--fkn-border);
}

.fkn-note > summary {
  line-height: normal;
  display: flex;
  /* GM leaves the row at its default stretch, so when the label wraps at the
     narrow endpoint the date stays on the first line rather than centring
     against two. */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fkn-note-head-gap, 10px);
  /* Box padding on three sides; the gap down to the rule is its own step in
     the Golden Master and is smaller than the padding. */
  padding: var(--fkn-note-pad-y, 16px) var(--fkn-note-pad-x, 18px)
           var(--fkn-note-rule-gap-top, 10px);
  cursor: pointer;
  list-style: none;
  transition: color var(--fkn-duration-fast) var(--fkn-ease);
  font-family: var(--fkn-font-mono);
  font-size: var(--fkn-fs-stamp);
  font-weight: 500;
  letter-spacing: var(--fkn-ls-stamp);
  text-transform: uppercase;
  color: var(--fkn-stone);
}

.fkn-note > summary::-webkit-details-marker {
  display: none;
}

/* No chevron and no disclosure glyph — the Golden Master's note header
   carries neither. The header itself is the control: it takes focus,
   shows a focus ring, and shifts to gold on hover. */
.fkn-note > summary:hover,
.fkn-note > summary:focus-visible {
  color: var(--fkn-gold-deep);
}

.fkn-note > summary > span:first-child {
  min-width: 0;
}

.fkn-note__when {
  flex: none;
}

.fkn-note__body {
  display: grid;
  gap: var(--fkn-note-row-gap, 7px);
  margin: 0 var(--fkn-note-pad-x, 18px) var(--fkn-note-pad-y, 16px);
  padding-top: var(--fkn-note-rule-gap, 12px);
  border-top: var(--fkn-rule) solid var(--fkn-border);
  font-size: var(--fkn-fs-note-body);
  line-height: 1.55;
  color: var(--fkn-text-3);
}

/* Grid, not flex: the second track is minmax(0,1fr) so long German
   compounds wrap instead of forcing the note wider than its column. */
.fkn-note__body li {
  display: flex;
  gap: var(--fkn-note-dash-gap, 10px);
}

.fkn-note__body li::before {
  content: "—";
  flex: none;
  color: var(--fkn-gold-deep);
}

.fkn-note__body li > span {
  min-width: 0;
}

/* Bare text after the dash is an anonymous flex item, which would
   otherwise refuse to shrink below its longest German compound. */
.fkn-note__body li {
  overflow-wrap: break-word;
  min-width: 0;
}

/* -----------------------------------------------------------------
   IMAGE SLOT · development placeholder
   Reserves the Golden Master's explicit slot height (never an aspect
   ratio — the Golden Master sizes every slot in pixels) and carries
   the shoot brief from docs/design-freeze.md. Replaced 1:1 by an
   <img srcset> inside __inner with no layout change.
   ----------------------------------------------------------------- */
.fkn-photo {
  position: relative;
}

.fkn-photo__frame {
  position: relative;
  width: 100%;
  height: var(--fkn-photo-h, 292px);
  overflow: hidden;
  background: var(--fkn-bg-subtle);
  border: var(--fkn-rule) solid var(--fkn-border-strong);
}

/* Final photography fills the approved slot. The frame's fixed height is
   the Golden Master geometry, so the picture is cropped to the frame and
   never the other way round. */
.fkn-photo__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.register-night .fkn-photo__frame {
  background: var(--fkn-coal);
  border-color: var(--fkn-border-dark);
}

/* Passive drift — hero and the Moments opening image only. The picture is
   oversized so the shift never uncovers an edge of the frame. */
.fkn-drift .fkn-photo__frame img {
  top: -4%;
  height: 108%;
  transform: translate3d(0, var(--fkn-drift, 0px), 0);
  will-change: transform;
}

/* -----------------------------------------------------------------
   PARTNER CHIP · passe-partout frame, monochrome by default.
   GM mobile:  height 64 · padding 10 · CC max-h 40 · ISSwat max-h 32
   GM desktop: height 92 · padding 14 · CC max-h 52 · ISSwat max-h 40
   ----------------------------------------------------------------- */
.fkn-partner__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--fkn-partner-h, 64px);
  padding: var(--fkn-partner-pad, 10px);
  background: var(--fkn-passepartout);
  border: var(--fkn-rule) solid var(--fkn-border);
}

.fkn-partner__frame img {
  max-height: var(--fkn-partner-logo-h, 40px);
  max-width: 100%;
  width: auto;
  filter: grayscale(1);
  opacity: 0.85;
}

.fkn-partner__frame img[data-partner="isswat"] {
  max-height: var(--fkn-partner-logo-h-isswat, 32px);
}

/* CocktailChef shows in its own brand colour — no desaturation, no
   dimming. The mark is theirs, not ours to tint. */
.fkn-partner__frame img[data-partner="cocktailchef"] {
  filter: none;
  opacity: 1;
}

/* -----------------------------------------------------------------
   FORM · inquiry page. Not present in the Golden Master artboards;
   built from the same tokens so it reads as one system.
   ----------------------------------------------------------------- */
.fkn-field {
  display: grid;
  gap: var(--fkn-space-2);
}

.fkn-field > label {
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-note-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fkn-stone-deep);
}

.fkn-field__req {
  color: var(--fkn-gold-deep);
}

.fkn-field__hint {
  font-size: var(--fkn-fs-note-body);
  color: var(--fkn-stone-deep);
}

.fkn-input,
.fkn-select,
.fkn-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--fkn-space-3) var(--fkn-space-4);
  background: var(--fkn-paper);
  /* --fkn-stone rather than --fkn-border-strong: a field boundary is a
     UI component and needs 3:1 against the surrounding ivory. */
  border: var(--fkn-rule) solid var(--fkn-stone);
  border-radius: var(--fkn-radius-xs);
  color: var(--fkn-ink);
  font-family: var(--fkn-font-body);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--fkn-duration-fast) var(--fkn-ease);
}

.fkn-textarea {
  min-height: 168px;
  resize: vertical;
}

.fkn-select {
  appearance: none;
  /* Chevron-free: a production-paper arrow drawn as a background rule. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fkn-gold-deep) 50%),
    linear-gradient(135deg, var(--fkn-gold-deep) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--fkn-space-9);
}

.fkn-input:hover,
.fkn-select:hover,
.fkn-textarea:hover {
  border-color: var(--fkn-ink);
}

.fkn-input:focus-visible,
.fkn-select:focus-visible,
.fkn-textarea:focus-visible {
  border-color: var(--fkn-gold-deep);
}

/* Colour is never the only signal — the field also gets a message. */
.fkn-input[aria-invalid="true"],
.fkn-select[aria-invalid="true"],
.fkn-textarea[aria-invalid="true"] {
  border-color: var(--fkn-error-border);
  border-width: 2px;
}

.fkn-error {
  display: none;
  font-size: var(--fkn-fs-note-body);
  font-weight: 600;
  color: var(--fkn-error);
}

.fkn-error[data-visible="true"] {
  display: block;
}

.fkn-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fkn-space-4);
  align-items: start;
  min-height: 44px;
  padding-top: var(--fkn-space-1);
}

.fkn-check input {
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--fkn-gold-deep);
}

.fkn-check label {
  font-size: var(--fkn-fs-foot-note);
  line-height: 1.55;
  color: var(--fkn-text-3);
}

.fkn-check .fkn-error {
  grid-column: 1 / -1;
}

/* Prototype disclosure — must never read as a delivery confirmation. */
.fkn-devnote {
  display: grid;
  gap: var(--fkn-space-2);
  padding: var(--fkn-space-5);
  background: var(--fkn-paper);
  border: var(--fkn-rule) solid var(--fkn-border);
  border-left: 3px solid var(--fkn-gold);
}

.fkn-devnote__label {
  font-family: var(--fkn-font-mono);
  font-size: var(--fkn-fs-stamp);
  letter-spacing: var(--fkn-ls-stamp);
  text-transform: uppercase;
  color: var(--fkn-gold-deep);
}

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

.fkn-formstatus {
  display: none;
  padding: var(--fkn-space-4) var(--fkn-space-5);
  background: var(--fkn-paper);
  border: var(--fkn-rule) solid var(--fkn-gold-deep);
  font-size: var(--fkn-fs-foot-note);
  line-height: 1.6;
  color: var(--fkn-ink);
}

.fkn-formstatus[data-visible="true"] {
  display: block;
}

/* -----------------------------------------------------------------
   FOOTER
   GM mobile: vertical hierarchy, hairline dividers, padding 44 20 36
   GM desktop: 1.4fr 1fr 1fr 1fr, gap 48, padding 56 64 40
   Body colour is #B7AE9C; only the navigation column is #F0EBDD.
   ----------------------------------------------------------------- */
.fkn-footer {
  border-top: var(--fkn-rule) solid var(--fkn-border-dark);
  color: var(--fkn-text-dark-2);
}

.fkn-footer__inner {
  padding-block: var(--fkn-pad-ftr-top) var(--fkn-pad-ftr-bottom);
}

.fkn-brand--footer {
  border: var(--fkn-rule) solid var(--fkn-plaque-border);
  padding: 7px 11px;
}

.fkn-brand--footer img {
  height: var(--fkn-logo-ftr-h);
}

.fkn-footer__brand {
  order: 0;
}

.fkn-footer__brandline {
  margin-top: 14px;
  font-size: var(--fkn-fs-footer-brandline);
  line-height: 1.6;
  max-width: 280px;
  color: var(--fkn-text-dark-2);
}

.fkn-footer__block {
  margin-top: var(--fkn-space-6);
  padding-top: 20px;
  border-top: var(--fkn-rule) solid var(--fkn-border-dark);
}

/* GM opens the stack under the brand at 32px and sets every following
   block at 24px. */
.fkn-footer__block + .fkn-footer__block {
  margin-top: var(--fkn-space-5);
}

.fkn-footer__title {
  margin-bottom: 12px;
  font-family: var(--fkn-font-body);
  /* GM sets this title with the `font:` shorthand, which resets leading to
     normal; without this it would inherit the document's 1.6 and push the
     whole column down. */
  line-height: normal;
  font-size: var(--fkn-fs-footer-title);
  font-weight: 600;
  letter-spacing: var(--fkn-ls-footer-title);
  text-transform: uppercase;
  color: var(--fkn-meta-dark);
}

.fkn-footer__list {
  display: grid;
  gap: 10px;
}

/* Navigation column — Schibsted Grotesk 500, ivory, default leading. */
.fkn-footer__list--nav a {
  display: block;
  padding: 4px 0;
  font-family: var(--fkn-font-display);
  font-size: var(--fkn-fs-footer-nav);
  font-weight: 500;
  line-height: normal;
  color: var(--fkn-text-dark);
  transition: color var(--fkn-duration-fast) var(--fkn-ease);
}

/* Contact and legal columns — Figtree 400, inherited #B7AE9C.
   GM leads the contact column at 1.5 and the legal column at normal. */
.fkn-footer__list--items a,
.fkn-footer__list--items span {
  display: block;
  padding: 4px 0;
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-footer-item);
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
  transition: color var(--fkn-duration-fast) var(--fkn-ease);
}

.fkn-footer__list--legal a,
.fkn-footer__list--legal span {
  line-height: normal;
}

/* The address is not a target, and GM sets it without the tap padding the
   two contact placeholders above it carry. */
.fkn-footer__list--items li:last-child span {
  padding-block: 0;
}

/* GM mobile carries the legal links without a visible column title;
   the heading stays in the accessibility tree. */
.fkn-footer__block--legal .fkn-footer__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fkn-footer__list a:hover,
.fkn-footer__list a:focus-visible {
  color: var(--fkn-gold-light);
}

.fkn-footer__meta {
  order: 4;
  margin-top: 28px;
  padding-top: 16px;
  border-top: var(--fkn-rule) solid var(--fkn-border-dark);
  display: grid;
  gap: 6px;
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-footer-meta);
  line-height: normal;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fkn-meta-dark);
}