/* Korkunova footer (mockup footer-slim-05.png, 2048x1152; built from the upper gold hairline at y615 down).
   Palette: docs/korkunova-footer/PALETTE.md; fonts: docs/korkunova-footer/FONTS.md. Self-contained: every rule
   is scoped under .ft so the footer can be dropped onto other pages. Desktop (>=1100) is the mockup composition
   in mockup px times the shared --u (100cqw / 2048, from style.css). .ft is NOT a size container, so cqw resolves
   against body exactly as it does for the hero and band: the footer fills the page width at every desktop size,
   nothing is capped. Section px = mockup px - (0, 615). Text-run numbers were fitted to the mockup ink boxes at
   2048 (scratch tooling pipeline/work/footer-build/, gitignored; see REPORT-T3). */

.ft {
  --ft-cream: #F6EEE7;
  --ft-hair: #A97E3B;
  --ft-rule: #C4A278;
  --ft-ink: #3D3B3B;
  --ft-ink-name: #3A3838;
  --ft-ink-legal: #413F3D;
  --ft-ink-sub: #333231;
  --ft-rose: #B17C73;
  --ft-ph: #747372;
  --ft-field: #CBB79E;
  --ft-button: #414140;
  --ft-gold-label: #F3D7A3;
  --ft-eb: "EB Garamond", Garamond, "Times New Roman", serif;
  position: relative;
  background: var(--ft-cream);
  color: var(--ft-ink);
  font-family: var(--serif);
  line-height: 1;
}
/* The footer ends the page: on a viewport taller than the page the canvas below it continues the footer cream
   (body is a size container, so its own background does not reach the canvas; style.css paints html the wall). */
html:has(> body > footer.ft) { background: #F6EEE7; }
.ft :where(button, input) { font: inherit; color: inherit; margin: 0; }
/* The field and SUBSCRIBE rules are written .ft .ft-email / .ft .ft-subscribe (0,2,0) so that a host page's own form reset
   (contact.css body.contact button/input and pdp.css body.pdp button: font and color inherit, specificity 0,1,2) cannot
   override their face, size and ink. On the homepage the cascade outcome is unchanged. */
.ft a:focus-visible, .ft button:focus-visible, .ft input:focus-visible { outline: 2px solid var(--ft-ink); outline-offset: 3px; }

/* ================= Base (all widths): a centred, wrapping stack. The desktop block overrides the geometry and
   relies on these declarations (faces, rule pseudo-elements), so the narrow design lives in its own block below
   rather than here. The width bands use range syntax ((width < 1100px) / (width >= 1100px)) so no fractional
   width (zoom) falls between them. ================= */
.ft { border-top: 2px solid var(--ft-hair); border-bottom: 2px solid var(--ft-hair); padding: 40px 20px 28px; }
.ft::after { content: ""; display: block; height: 0; }
.ft-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.ft-glyph { width: 72px; height: auto; }
.ft-brand { display: flex; flex-direction: column; align-items: center; margin-top: -12px; color: var(--ft-ink-name); }
.ft-name { font-weight: 400; font-size: 34px; letter-spacing: 0.094em; margin-right: -0.094em; }
.ft-sub { margin-top: 10px; font-weight: 500; font-size: 12px; letter-spacing: 0.72em; margin-right: -0.72em; color: var(--ft-ink-sub); }
.ft-links { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 14px; max-width: 900px; }
.ft-links li, .ft-legal li { position: relative; padding: 0 16px; }
.ft-links li + li::before, .ft-legal li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 1.6em; transform: translateY(-50%); background: var(--ft-rule);
}
.ft-links a { font-family: var(--ft-eb); font-size: 15px; letter-spacing: 0.17em; white-space: nowrap; }
.ft-util { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.ft-news { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; max-width: 520px; }
.ft-join { flex: 1 0 100%; font-family: var(--sans); font-size: 14px; letter-spacing: 0.25em; color: var(--ft-rose); }
.ft .ft-email {
  flex: 1 1 240px; min-height: 52px; padding: 0 16px; border: 1px solid var(--ft-field); border-radius: 3px; background: transparent;
  font-weight: 500; font-size: 18px; letter-spacing: 0.06em; color: var(--ft-ink);
}
.ft .ft-email::placeholder { color: var(--ft-ph); opacity: 1; }
.ft .ft-subscribe {
  flex: 0 0 auto; min-height: 52px; padding: 0 24px 0 calc(24px + 0.15em); border: 0; border-radius: 3px; cursor: pointer;
  background: var(--ft-button); color: var(--ft-gold-label); font-weight: 500; font-size: 18px; letter-spacing: 0.15em;
}
.ft .ft-subscribe:hover { background: #2f2e2d; }
.ft-status { flex: 1 0 100%; font-family: var(--ft-eb); font-size: 16px; line-height: 1.4; color: var(--ft-ink-legal); }
.ft-status:empty { position: absolute; margin: 0; } /* collapsed, paints nothing, stays in the accessibility tree */
.ft-legal { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 10px; font-family: var(--ft-eb); font-size: 14px; letter-spacing: 0.08em; color: var(--ft-ink-legal); }

/* ================= Below 1100: one centred stack on the site gutter (20px; 40px from 600) =================
   Order as the mockup reads: ornament, wordmark, PERFUMES, links, utility (icons, a short gold rule, JOIN, field
   + button), legal. Full-bleed cream with both 1px gold hairlines. The brand block is the desktop brand scaled as
   a unit from the wordmark size --ft-nm (every ratio below is mockup u over the wordmark's 53.04u), so F01 keeps
   its mockup ink offset: its centre sits 13.6/374.5 of the wordmark width (0.256 --ft-nm) LEFT of the axis.
   Links and legal wrap into centred rows. The gold rules between items are drawn only when footer.js has tagged
   each row's first item (.ft-rows on the list, .ft-row-start on the item): a rule is never drawn at a row start,
   and with no JS the lists show no rules at all. Rows are steered by a max-width in em (font-scale stable). */
@media (width < 1100px) {
  .ft { --ft-nm: 30px; --ft-gut: 20px; border-top-width: 1px; border-bottom-width: 1px; padding: 44px var(--ft-gut) 30px; }
  .ft-inner { gap: 0; }

  .ft-glyph { position: relative; left: calc(-0.256 * var(--ft-nm)); width: calc(1.931 * var(--ft-nm)); }
  .ft-brand { margin-top: calc(0.318 * var(--ft-nm)); }
  .ft-name { font-size: var(--ft-nm); line-height: 1; letter-spacing: 0.115em; margin-right: -0.115em; }
  .ft-sub { margin-top: calc(0.121 * var(--ft-nm)); font-size: calc(0.378 * var(--ft-nm)); line-height: 1; letter-spacing: 0.7133em; margin-right: -0.7133em; }

  .ft-links { margin-top: 30px; row-gap: 2px; max-width: 25em; font-size: 13px; }
  .ft-links li, .ft-legal li { padding: 0 14px; }
  .ft-links a {
    display: flex; align-items: center; min-height: 34px;
    font-size: inherit; letter-spacing: 0.15em; margin-right: -0.15em; line-height: 1.2;
  }
  .ft-links li + li::before, .ft-legal li + li::before { content: none; }
  .ft-links.ft-rows li:not(.ft-row-start)::before, .ft-legal.ft-rows li:not(.ft-row-start)::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 16px; margin-top: -8px; transform: none;
    background: none; border-left: 1px solid var(--ft-rule);
  }

  .ft-util { margin-top: 30px; gap: 0; }
  .ft-news { max-width: 520px; gap: 12px; }
  .ft-join { margin-bottom: 4px; padding-left: 0.3em; font-size: 13px; letter-spacing: 0.3em; line-height: 1.3; }
  .ft .ft-email { flex: 1 0 100%; min-height: 52px; font-size: 18px; }
  .ft .ft-subscribe { flex: 1 0 100%; min-height: 52px; font-size: 17px; letter-spacing: 0.18em; padding: 0 20px 0 calc(20px + 0.18em); }
  .ft-status { margin-top: 2px; }

  .ft-legal { margin-top: 34px; row-gap: 2px; max-width: 22em; font-size: 14px; letter-spacing: 0.06em; }
  .ft-legal li { display: flex; align-items: center; min-height: 30px; white-space: nowrap; }
  .ft-legal a { display: flex; align-items: center; min-height: 30px; }
}
@media (600px <= width < 1100px) {
  .ft { --ft-nm: 34px; --ft-gut: 40px; padding-top: 56px; padding-bottom: 36px; }
  .ft-links { margin-top: 36px; max-width: 25em; font-size: 14px; }
  .ft-links li, .ft-legal li { padding: 0 16px; }
  .ft-util { margin-top: 32px; }
  .ft-news { max-width: 640px; }
  .ft .ft-email { flex: 1 1 0; min-width: 0; }
  .ft .ft-subscribe { flex: 0 0 auto; padding: 0 30px 0 calc(30px + 0.18em); }
  .ft-legal { margin-top: 38px; max-width: none; }
}
@media (900px <= width < 1100px) {
  .ft-links { max-width: 50.5em; }
}
/* Rows by band (item widths measured in em, both engines within 0.15em): under 900 the four links sit two over two
   (FRAGRANCES | VANILLA DREAM, OUR STORY | CONTACT) and under 600 the copyright sits alone above Privacy | Terms;
   900-1099 one row of four. Under 360 the links tighten so FRAGRANCES | VANILLA DREAM still share the first row. */
@media (width < 360px) {
  .ft-links { font-size: 12px; }
  .ft-links li { padding: 0 11px; }
  .ft-links a { letter-spacing: 0.12em; margin-right: -0.12em; }
}

/* ================= Desktop (>=1100): the mockup composition, mockup px x --u ================= */
@media (width >= 1100px) {
  /* The frame is mockup y615-1152 (537u). Upper hairline mockup y615-617, lower y1123.4-1125.4: drawn as the
     footer's own borders (full-bleed by construction), 2u, at least 1 CSS px. */
  .ft { height: calc(537 * var(--u)); padding: 0; border-top-width: max(1px, calc(2 * var(--u))); border-bottom: 0; }
  .ft::after {
    position: absolute; left: 0; right: 0; top: calc(509.0 * var(--u) - max(1px, calc(2 * var(--u)))); height: 0;
    border-top: max(1px, calc(2 * var(--u))) solid var(--ft-hair);
  }
  .ft-inner { position: absolute; left: 0; right: 0; top: calc(-1 * max(1px, calc(2 * var(--u)))); height: calc(537 * var(--u)); display: block; text-align: left; }
  .ft-inner > *, .ft-util > *, .ft-news > * { position: absolute; margin: 0; }
  .ft-util, .ft-news { position: static; display: block; }
  /* Every desktop coordinate is relative to the 2048u frame centred on the page axis (= the page at full width). */
  .ft-inner { width: calc(2048 * var(--u)); left: 50%; right: auto; margin-left: calc(-1024 * var(--u)); }

  /* F01 butterfly (F1's asset), drawn on the mockup ornament's ink box x963-1064, y655.5-708. */
  .ft-glyph { left: calc(961.774 * var(--u)); top: calc(41.18 * var(--u)); width: calc(102.438 * var(--u)); max-width: none; }

  /* The home link is the wordmark's own box (KORKUNOVA's layout box down to PERFUMES's bottom; right edge 2u past the
     KORKUNOVA ink, as the left edge is 2u before it), so its focus ring surrounds the wordmark. It is the frame's one
     in-flow block, placed by its margins, so it is NOT the spans' containing block: they stay absolute in the frame
     at exactly the coordinates they had (one rounding path, so the glyphs land on the same pixels). */
  .ft-brand { position: static; display: block; width: calc(377.4 * var(--u)); height: calc((170.022 - 110.551 + 20.067) * var(--u)); margin: calc(110.551 * var(--u)) 0 0 calc(838.314 * var(--u)); }
  .ft-name, .ft-sub { position: absolute; white-space: nowrap; margin: 0; }
  .ft-name { left: calc(838.314 * var(--u)); top: calc(110.551 * var(--u)); font-size: calc(53.037 * var(--u)); letter-spacing: 0.115em; }
  .ft-sub { left: calc(927.912 * var(--u)); top: calc(170.022 * var(--u)); font-size: calc(20.067 * var(--u)); letter-spacing: 0.7133em; }

  /* Links: the four links to real pages, one centred row on the page axis at the mockup's link band (ink y860-876).
     Each keeps the letter-spacing fitted to its mockup ink; items are 66u apart (the mockup's text-to-text gap) with
     the gold rule at the gap's centre, y852-882 (1 CSS px: see PALETTE.md). */
  .ft-nav { left: 0; top: 0; width: 100%; height: 0; }
  .ft-links {
    display: flex; justify-content: center; flex-wrap: nowrap; max-width: none; row-gap: 0;
    position: absolute; left: 0; top: calc(243.197 * var(--u)); width: 100%;
  }
  .ft-links li { position: relative; padding: 0 calc(33 * var(--u)); white-space: nowrap; }
  .ft-links a { display: block; font-size: calc(20.939 * var(--u)); line-height: 1; }
  /* Rules as borders, not fills: borders floor to whole device px in both engines, so every rule draws the same
     1 px up to 3080 wide (a 1.33u fill rounded to 1 or 2 px depending on its position). */
  .ft-links li + li::before, .ft-legal li + li::before {
    top: auto; height: auto; transform: none; width: 0; background: none; border-left: max(1px, calc(1.33 * var(--u))) solid var(--ft-rule);
  }
  .ft-links li + li::before { left: 0; top: calc(-6.197 * var(--u)); height: calc(30 * var(--u)); }
  .ft-links li:nth-child(1) a { letter-spacing: 0.0864em; margin-right: -0.0864em; }
  .ft-links li:nth-child(2) a { letter-spacing: 0.1151em; margin-right: -0.1151em; }
  .ft-links li:nth-child(3) a { letter-spacing: 0.0881em; margin-right: -0.0881em; }
  .ft-links li:nth-child(4) a { letter-spacing: 0.0514em; margin-right: -0.0514em; }

  .ft-join { left: calc(506.906 * var(--u)); top: calc(347.815 * var(--u)); font-size: calc(20.155 * var(--u)); letter-spacing: 0.2964em; white-space: nowrap; }
  /* Field: border box from the mockup's border edges x1017-1402, y933-1011. With the social icons and their gold rule
     removed, JOIN + field + button move left 128.907u as one group so the row centres on the page axis (1024u). */
  .ft .ft-email {
    left: calc(888.093 * var(--u)); top: calc(318 * var(--u)); width: calc(385 * var(--u)); height: calc(78 * var(--u));
    min-height: 0; border-width: max(1px, calc(1.5 * var(--u))); border-radius: calc(3 * var(--u));
    padding: calc(3.722 * var(--u)) 0 calc(0.000 * var(--u)) calc(25.9 * var(--u)); font-size: calc(23.167 * var(--u)); letter-spacing: 0.0964em; line-height: 1.2;
  }
  /* Button: x1417-1670, y932.5-1011. */
  .ft .ft-subscribe {
    left: calc(1288.093 * var(--u)); top: calc(317.5 * var(--u)); width: calc(253 * var(--u)); height: calc(78.5 * var(--u));
    min-height: 0; border-radius: calc(3 * var(--u)); padding: calc(2.860 * var(--u)) calc(0.000 * var(--u)) calc(0.000 * var(--u)) calc(2.442 * var(--u) + 0.1816em);
    font-size: calc(25.864 * var(--u)); letter-spacing: 0.1816em; line-height: 1; text-align: center; white-space: nowrap;
  }
  /* Thank-you line (no mockup counterpart): the legal face and ink, centred under the field + button. */
  .ft-status {
    left: calc(888.093 * var(--u)); top: calc(404 * var(--u)); width: calc(653 * var(--u));
    font-size: calc(21 * var(--u)); line-height: calc(30 * var(--u)); text-align: center; white-space: nowrap;
  }

  .ft-legal { display: block; left: 0; top: 0; width: 100%; height: 0; row-gap: 0; }
  .ft-legal li { position: absolute; top: calc(458.669 * var(--u)); padding: 0; white-space: nowrap; font-size: calc(20.875 * var(--u)); line-height: 1; }
  .ft-legal li + li::before { top: calc(-3.669 * var(--u)); height: calc(26 * var(--u)); }
  .ft-legal li:nth-child(1) { left: calc(675.921 * var(--u)); letter-spacing: 0.074em; }
  .ft-legal li:nth-child(2) { left: calc(1014.923 * var(--u)); letter-spacing: 0.0546em; }
  .ft-legal li:nth-child(2)::before { left: calc(-36.923 * var(--u)); }
  .ft-legal li:nth-child(3) { left: calc(1209.892 * var(--u)); letter-spacing: 0.0768em; }
  .ft-legal li:nth-child(3)::before { left: calc(-36.392 * var(--u)); }
}

/* The 2u hairlines floor to 1 CSS px below 2048 wide and draw 2 px from 2048: one colour
   cannot match the mockup's line darkness in both bands, so each band has its own (PALETTE.md, "Strokes"). */
@media (min-width: 2048px) {
  .ft { --ft-hair: #C1A170; }
}