/* Korkunova Contact page (mockup contact-02.png, 2048x1152). Palette: docs/korkunova-contact/PALETTE.md;
   fonts: docs/korkunova-contact/FONTS.md. Every rule is scoped under body.contact so index, our-story and the
   PDP never move. Desktop (>=1100) is the mockup composition in mockup px times the shared --u (100cqw / 2048):
   it fills the page width at every desktop size, nothing is capped. Text-run numbers were fitted to the mockup
   ink boxes at 2048 (scratch tooling pipeline/work/contact-build/, gitignored; see REPORT-T3). */

:root {
  --kc-cream: #F9F1EB;
  --kc-rose-text: #B57F78;
  --kc-ink-h1: #313335;
  --kc-rose-h1: #BA8279;
  --kc-ink-body: #292B2D;
  --kc-ink-ph: #38383A;
  --kc-ink-icon: #3E3C3C;
  --kc-field-border: #B6AFAA;
  --kc-button: #3E3E3D;
  --kc-gold-label: #F0D0AC;
  --kc-swash: #CCAD87;
  --kc-field-fill-narrow: rgba(249, 241, 235, 0.82);
}

/* body is a size container, so its background does not reach the canvas: html carries it too. */
html:has(> body.contact) { background: var(--kc-cream); }
body.contact { background: var(--kc-cream); }
body.contact .site-header, body.contact .nav { background: var(--kc-cream); }
body.contact button, body.contact input, body.contact textarea { font: inherit; color: inherit; }

/* ================= Base (all widths); the desktop block below overrides the geometry ================= */
body.contact .contact-main { position: relative; overflow: hidden; padding: 36px 20px 56px; }
/* Below 1100 the plate keeps its >=1100 scale, anchored bottom-left: only the petal corner shows. */
body.contact .contact-backdrop {
  position: absolute; left: 0; bottom: 0; z-index: 0; width: 1100px; max-width: none; height: auto; pointer-events: none;
}
body.contact .contact-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  max-width: 600px; margin: 0 auto; text-align: center;
}
body.contact .contact-eyebrow {
  display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.24em;
  color: var(--kc-rose-text);
}
body.contact .contact-swash { width: 48px; height: 8px; fill: var(--kc-swash); }
body.contact .contact-glyph { width: 26px; height: auto; }
body.contact .contact-title {
  margin-top: 14px; font-weight: 300; font-size: clamp(40px, 9vw, 64px); line-height: 1.08; color: var(--kc-ink-h1);
}
body.contact .contact-rose { color: var(--kc-rose-h1); }
body.contact .contact-lede { margin-top: 14px; font-weight: 500; font-size: clamp(17px, 4.4vw, 20px); line-height: 1.45; color: var(--kc-ink-body); }
body.contact .contact-form { display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: 26px; text-align: left; }
body.contact .contact-field { position: relative; }
body.contact .contact-input {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--kc-field-border); border-radius: 3px; background: var(--kc-field-fill-narrow);
  font-family: var(--serif); font-weight: 400; font-size: 18px; letter-spacing: 0.1em; line-height: 1.3; color: var(--kc-ink-ph);
}
body.contact textarea.contact-input { height: 160px; resize: vertical; }
body.contact .contact-input::placeholder { color: var(--kc-ink-ph); opacity: 1; }
body.contact .contact-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body.contact .contact-send {
  display: block; width: 100%; min-height: 54px; padding: 0 0 0 0.42em; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--kc-button); color: var(--kc-gold-label);
  font-family: var(--sans); font-size: 16px; letter-spacing: 0.42em; line-height: 1;
}
body.contact .contact-send:hover { background: #2f2e2d; }
body.contact .contact-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body.contact .contact-status {
  min-height: 1.45em; font-weight: 500; font-size: 18px; line-height: 1.45; text-align: center; color: var(--kc-ink-body);
}

/* ================= Below 1100: one centred column on the site gutter (20px; 40px from 600) =================
   Bands as the PDP: < 600 phone, 600-899 tablet (wider column, more air), 900-1099 (desktop-like type).
   The K01 plate is reduced to its petal-and-vanilla corner: drawn at a fixed scale per band, anchored bottom-left,
   masked by an ellipse about that corner so the leaf shadows and the plate's own edges fade into the page cream
   (no seam). The bottom padding reserves the corner (mockup y470-1152 = 0.333 of the plate width) plus 12px, so the
   corner always sits BELOW the form and its status line. */
@media (max-width: 1099.98px) {
  body.contact { --kc-plate-w: 620px; --kc-gutter: 20px; }
  body.contact .contact-main {
    padding: 34px var(--kc-gutter) calc(var(--kc-plate-w) * 0.333 + 12px);
  }
  body.contact .contact-backdrop {
    width: var(--kc-plate-w); height: auto;
    -webkit-mask-image: radial-gradient(ellipse 33% 58% at 0% 100%, #000 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 33% 58% at 0% 100%, #000 70%, transparent 100%);
  }
  body.contact .contact-inner { max-width: 560px; }
  body.contact .contact-eyebrow { flex-wrap: nowrap; white-space: nowrap; }
  body.contact .contact-swash { flex: none; }
  body.contact .contact-glyph { flex: none; }
  body.contact .contact-title { text-wrap: balance; }
  body.contact .contact-lede { text-wrap: balance; }
  body.contact .contact-form { gap: 14px; margin-top: 28px; }
  body.contact .contact-status { margin-top: 2px; }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  body.contact { --kc-plate-w: 760px; --kc-gutter: 40px; }
  body.contact .contact-main { padding-top: 52px; }
  body.contact .contact-eyebrow { font-size: 14px; gap: 10px; }
  body.contact .contact-swash { width: 60px; height: 10px; }
  body.contact .contact-glyph { width: 30px; }
  body.contact .contact-title { margin-top: 16px; font-size: clamp(56px, 9vw, 72px); }
  body.contact .contact-lede { margin-top: 16px; font-size: 20px; }
  body.contact .contact-form { gap: 16px; margin-top: 34px; }
  body.contact .contact-input { min-height: 56px; padding: 14px 20px; font-size: 19px; }
  body.contact textarea.contact-input { height: 180px; }
  body.contact .contact-send { min-height: 60px; font-size: 17px; }
  body.contact .contact-status { font-size: 19px; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  body.contact { --kc-plate-w: 880px; }
  body.contact .contact-main { padding-top: 64px; }
  body.contact .contact-inner { max-width: 680px; }
  body.contact .contact-title { font-size: 76px; }
  body.contact .contact-lede { font-size: 21px; }
}

/* ================= Desktop (>=1100): the mockup composition, mockup px x --u ================= */
@media (min-width: 1100px) {
  /* ---- Header: the shared site header (style.css), transparent over the plate ---- */
  body.contact .site-header, body.contact .nav { background: none; }

  /* ---- Composition below the header: mockup y116-1152. The K01 plate is the whole 2048x1152 frame
     (3840x2160 = 1.875x, no offset), drawn from the top of the header so the header sits over it. ---- */
  body.contact .contact-main { height: calc(1036 * var(--u)); padding: 0; overflow: visible; }
  body.contact .contact-backdrop {
    left: 0; top: calc(-116 * var(--u)); bottom: auto; width: calc(2048 * var(--u)); height: calc(1152 * var(--u));
  }
  /* Viewports taller than the 16:9 frame show cream below the plate: feather the plate's bottom edge into it. The fade
     length follows that cream excess (100vh - 1152u, times 1.5) and is capped at 12% of the plate (138u), so it is 0 at
     16:9 and wider, where the approved composition is drawn exactly as before. */
  body.contact .contact-backdrop {
    --kc-fade: clamp(0px, (100vh - 1152 * var(--u)) * 1.5, 138 * var(--u));
    -webkit-mask-image: linear-gradient(#000 calc(100% - var(--kc-fade)), transparent);
    mask-image: linear-gradient(#000 calc(100% - var(--kc-fade)), transparent);
  }
  body.contact .contact-inner { position: absolute; inset: 0; display: block; max-width: none; margin: 0; text-align: left; }
  /* Children placed in section px = mockup - (0, 116). */
  body.contact .contact-inner > *, body.contact .contact-form > * { position: absolute; margin: 0; }
  body.contact .contact-form { position: static; display: block; margin: 0; }

  /* Eyebrow: text, then the live swash (K02's measured centre line, x1133-1222) and the K02 glyph
     (asset top-left at mockup 1226.5,175.5; the 200 px file drawn 34u wide puts its ink on x1227-1259, y176-204). */
  body.contact .contact-eyebrow { display: block; left: 0; top: 0; width: 100%; height: 0; font-size: calc(23.746 * var(--u)); letter-spacing: 0.1999em; word-spacing: -0.0279em; line-height: 1; }
  body.contact .contact-eyebrow-text { position: absolute; left: calc(932.513 * var(--u)); top: calc(60.298 * var(--u)); white-space: nowrap; }
  body.contact .contact-swash { position: absolute; left: calc(1130 * var(--u)); top: calc(64 * var(--u)); width: calc(96 * var(--u)); height: calc(16 * var(--u)); overflow: visible; }
  body.contact .contact-glyph { position: absolute; left: calc(1226.5 * var(--u)); top: calc(59.5 * var(--u)); width: calc(34 * var(--u)); max-width: none; }

  body.contact .contact-title {
    left: calc(516.289 * var(--u)); top: calc(113.091 * var(--u)); white-space: nowrap;
    font-size: calc(95.96 * var(--u)); letter-spacing: -0.0012em; word-spacing: 0.0017em; line-height: 1;
  }
  body.contact .contact-lede {
    left: calc(573.366 * var(--u)); top: calc(245.135 * var(--u)); white-space: nowrap;
    font-size: calc(25.971 * var(--u)); letter-spacing: 0.0151em; word-spacing: 0.0058em; line-height: 1;
  }

  /* Fields: border boxes from the mockup's border centre lines (x623-1492, four rows); a 1 CSS px hairline. */
  body.contact .contact-field { left: calc(623 * var(--u)); width: calc(869.5 * var(--u)); }
  body.contact .contact-f-name { top: calc(312.3 * var(--u)); height: calc(75.5 * var(--u)); }
  body.contact .contact-f-email { top: calc(409.7 * var(--u)); height: calc(74.8 * var(--u)); }
  body.contact .contact-f-order { top: calc(507.25 * var(--u)); height: calc(74.75 * var(--u)); }
  body.contact .contact-f-message { top: calc(604 * var(--u)); height: calc(196 * var(--u)); }
  body.contact .contact-input {
    height: 100%; min-height: 0; padding: 0 0 0 calc(27.087 * var(--u));
    border-width: max(1px, calc(1 * var(--u))); border-radius: calc(4 * var(--u)); background: transparent;
    font-size: calc(24.886 * var(--u)); word-spacing: 0.0em; line-height: 1.2;
  }
  body.contact .contact-f-name .contact-input { padding-top: calc(0.992 * var(--u)); padding-bottom: calc(0.000 * var(--u)); letter-spacing: 0.0977em; }
  body.contact .contact-f-email .contact-input { padding-top: calc(6.520 * var(--u)); padding-bottom: calc(0.000 * var(--u)); letter-spacing: 0.0873em; }
  body.contact .contact-f-order .contact-input { padding-top: calc(7.650 * var(--u)); padding-bottom: calc(0.000 * var(--u)); letter-spacing: 0.0721em; }
  body.contact .contact-f-message .contact-input { letter-spacing: 0.1172em; }
  body.contact textarea.contact-input { height: 100%; padding-top: calc(24.003 * var(--u)); resize: none; }

  body.contact .contact-send {
    left: calc(623.5 * var(--u)); top: calc(827.2 * var(--u)); width: calc(869 * var(--u)); height: calc(97.2 * var(--u));
    min-height: 0; border-radius: calc(4 * var(--u)); padding: calc(6.118 * var(--u)) calc(0.000 * var(--u)) calc(0.000 * var(--u)) calc(17.674 * var(--u));
    font-size: calc(25.485 * var(--u)); letter-spacing: 0.3996em; word-spacing: 0.1403em; text-align: center; white-space: nowrap;
  }
  /* Confirmation line in the empty band under the button (no mockup counterpart: the body face and ink). */
  body.contact .contact-status {
    left: calc(623 * var(--u)); top: calc(946 * var(--u)); width: calc(869.5 * var(--u)); min-height: 0;
    font-size: calc(26 * var(--u)); line-height: calc(36 * var(--u)); white-space: nowrap;
  }
}