/* Bottega Nuda — coming soon.
 *
 * Every number in this file is MEASURED from the client's selected Figma frames,
 * not eyeballed:
 *   desktop  astra/artifacts/bottega-figma-2x/Desktop--Landing Page-1.png  1400x800 logical
 *   mobile   astra/artifacts/bottega-figma-2x/Desktop--Landing Page-3.png   390x800 logical
 *
 * Measured frame coordinates (page-absolute, logical px):
 *                      DESKTOP 1400x800          MOBILE 390x800
 *   border             24px #481311              24px #481311
 *   wordmark           x104-1296  y104-243       x48-342   y104-138
 *   BE THE FIRST       x635-765   y552-567       x130-260  y530-545
 *   support line       x503-897   y594-609       x59-331   y572-606 (2 lines)
 *   Enter Email        x401-461   y630-639       x49-109   y630-639
 *   Get Notified       x933-998   y630-639       x275-340  y630-639
 *   hairline rule      x400-1000  y665-666       x48-342   y665-666
 *   fine print         x644-755   y685-694       x139-250  y685-694
 *
 * Two things fall out of that table and drive the whole layout:
 *   1. ALL the microcopy is the SAME SIZE at both breakpoints, and the input row,
 *      rule and fine print sit at the SAME y. Only the wordmark scales, and only
 *      the support line rewraps.
 *   2. The wordmark is top-anchored (y104) and everything else is bottom-anchored
 *      off the rule. So the design stretches by growing the empty middle — which
 *      is exactly what the pattern field is for.
 */

/* ---------- type -----------------------------------------------------------
 * SELF-HOSTED so a client-facing page makes no third-party request and the
 * microcopy measures identically on every reviewer's machine.
 * Inter stands in for GT America until the licensed files arrive. The DISPLAY
 * type is not a font at all here — it is the client's outlined artwork. */
@font-face {
  font-family: 'Inter var';
  src: url('../assets/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --maroon: #481311;   /* frame border + the 95% multiply over the pattern */
  --cream: #FDFCF5;    /* wordmark, rule, "Get Notified" */
  --cream-60: rgba(253, 252, 245, 0.6); /* placeholder + fine print (fill-opacity .6) */
  --sans: 'Inter var', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--maroon);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- the frame ------------------------------------------------------
 * The Figma frame is: cream ground, the wave raster on top, then #481311 at 95%
 * with multiply, then a 24px #481311 stroke. Reproduced literally — the CSS
 * multiply of an alpha source over an opaque backdrop resolves to
 *   0.95*(backdrop x maroon) + 0.05*backdrop
 * which is the same arithmetic the SVG does.
 *
 * The pattern is NOT viewport-scaled: in the export it is the same absolute size
 * in the 1400 frame and the 390 frame, and the narrow frame simply shows a
 * narrower slice of it. background-position -12px -12px puts the raster's origin
 * at page (12,12) exactly as the SVG's pattern origin sits on the field rect.
 *
 * background-size is the FULL 4096x3277 tile scaled by the frame's own factors
 * (x 0.9828557 desktop / 0.9384648 mobile, y 0.9700003 both), and it REPEATS —
 * the SVG <pattern> is a true repeat (tile = 2.92571 x 4.09625 bbox units, which
 * is exactly the raster), so tiling is the literal export semantics AND it means
 * the field can never run out into flat tint on an ultrawide or very tall
 * viewport. The first tile alone spans 4014x3167 CSS px, so no real display ever
 * reaches the tile boundary. */
.page {
  position: relative;
  height: max(560px, 100svh);
  border: 24px solid var(--maroon);
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(72, 19, 17, 0.95), rgba(72, 19, 17, 0.95)),
    url('../assets/pattern-field.png');
  background-repeat: no-repeat, repeat;
  background-position: 0 0, -12px -12px;
  background-size: 100% 100%, 4025.78px 3178.69px;
  background-blend-mode: multiply, normal;
  background-origin: padding-box;
  background-clip: padding-box;
  overflow: hidden;
}

/* Below the readability floor the page scrolls rather than crushing the type.
 * max(560px, 100svh) above already does the sizing; this just releases the
 * clip so the bottom of the frame stays reachable. */
@media (max-height: 559px) {
  html, body { height: auto; }
  .page { overflow: visible; }
}

/* ---------- wordmark (her outlined artwork) --------------------------------
 * Frame: desktop 1192 wide inset 104; mobile 294 wide inset 48. One expression
 * hits BOTH exactly and stays continuous in between:
 *   min(1192px, 100% - 48px)  ->  1400: min(1192,1304)=1192 | 390: min(1192,294)=294
 * (100% is the padding box = viewport - 48.) Top-anchored at y104 -> 80px in. */
.wordmark {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1192px, calc(100% - 48px));
  margin: 0;
  line-height: 0;
}
.wordmark img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1192 / 138.71;
}

/* ---------- the lower block ------------------------------------------------
 * Bottom edge pinned to the hairline rule (page y666 -> 110px up from the
 * padding box bottom at the 800 frame height, and correct at any height because
 * the block is bottom-anchored). Children then flow DOWN to land on it:
 *   be-first 14.28 + 27.51 + sub 14.53 + 18.62 + row 39 = 113.94  -> top y552.06 OK
 * mobile:
 *   14.28 + 27.51 + sub 33.42 + 21.73 + row 39 = 135.94           -> top y530.06 OK
 * Column width min(600px, 100% - 48px) hits 600 at 1400 and 294 at 390. */
.lower {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, calc(100% - 48px));
}

.be-first { margin: 0 0 27.51px; line-height: 0; }
.be-first img { display: block; margin: 0 auto; width: 130.57px; max-width: 100%; height: auto; }

.sub { margin: 0 0 18.62px; line-height: 0; }
.sub img { display: block; margin: 0 auto; width: 393.88px; max-width: 100%; height: auto; }

/* ---------- the email row --------------------------------------------------
 * Frame: a 39px-tall row (y627-666) with ONE hairline along its bottom edge,
 * "Enter Email" at 60px wide flush left and "Get Notified" at 65px flush right,
 * both with cap-top at y630 / baseline at y639. */
.row {
  position: relative;
  height: 39px;
  border-bottom: 1px solid var(--cream);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#email,
#submit-btn {
  font: 400 12.4px/14px var(--sans);
  letter-spacing: -0.24px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  /* cap-top must land at y630 = 3px below the row top. */
  padding-top: 0.6px;
  height: 14.6px;
}
#email {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
#email::placeholder { color: var(--cream-60); opacity: 1; }
#submit-btn {
  flex: 0 0 auto;
  /* the negative tracking is applied after the last glyph too, so the box is
     1px wider than the ink; pull it back to land the ink on the frame's x998. */
  margin-right: 1px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#submit-btn:disabled { opacity: 0.6; cursor: default; }

/* Chrome paints autofilled inputs with an opaque background that would punch a
 * light rectangle through the pattern field. */
#email:-webkit-autofill,
#email:-webkit-autofill:hover,
#email:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px var(--maroon) inset;
  transition: background-color 9999s ease-out 0s;
}

/* ---------- fine print + status -------------------------------------------
 * Both sit BELOW the rule, so the PAIR is positioned off the block's bottom edge
 * as one container and then flows normally inside it: the fine print's cap-top
 * lands on the frame's y685 (19px under the rule at y666), and the error status
 * — which does not exist in the frames at all — takes its own space UNDER the
 * fine print instead of being absolutely placed on top of it.
 * Absolutely placing BOTH is what overlapped them by 5.4px at 390px wide, where
 * the substituted fine print wraps to two lines and runs past the status's
 * fixed offset. */
.below-rule {
  position: absolute;
  top: calc(100% + 17.4px);
  left: 0;
  width: 100%;
  text-align: center;
}
.consent,
.status {
  margin: 0;
  font: 400 12.4px/14px var(--sans);
  letter-spacing: 0.06px;
  color: var(--cream-60);
}
.status {
  margin-top: 8px;
  color: var(--cream);
}
.status:empty { display: none; }

/* ---------- success state --------------------------------------------------
 * Both the in-place swap (index.html) and the no-JS landing (/thanks/) use this.
 * There is no outlined artwork for these words in the Figma export, so they are
 * set in the fallback sans at the frame's own display measurements — cap-height
 * 15px, the "BE THE FIRST" tracking — rather than faked in a lookalike serif.
 * padding-bottom drops the block's baseline onto the support line's y609, so the
 * confirmation lands where the eye already was. */
.success { text-align: center; }
.thanks-success { padding-bottom: 57px; }
.success-title {
  margin: 0 0 14px;
  font: 400 20.6px/1 var(--sans);
  letter-spacing: 0.12em;
  text-indent: 0.12em; /* balance the trailing track so the line stays centred */
  text-transform: uppercase;
  color: var(--cream);
}
.success-sub {
  margin: 0;
  font: 400 12.4px/14px var(--sans);
  letter-spacing: -0.24px;
  color: var(--cream-60);
}

/* ---------- utility --------------------------------------------------------- */
.visually-hidden,
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[hidden] { display: none !important; }

#email:focus-visible,
#submit-btn:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 4px;
}

/* ---------- mobile ---------------------------------------------------------
 * 499px is the width at which the one-line support cut (394px) stops fitting the
 * column (100vw - 96). Below it the frame's own two-line cut is used, and the
 * pattern switches to the mobile frame's horizontal scale. */
@media (max-width: 499px) {
  .page { background-size: 100% 100%, 3843.95px 3178.69px; }
  .sub { margin-bottom: 21.73px; }
  .sub img { width: 271.79px; }
}