/* ====================================================
   KAAFINAMA — WAITLIST LANDING PAGE
   style.css  ·  v2.4
   ==================================================== */


/* ──────────────────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --parchment:     #f9f6e7;   /* Page background (primary) */
  --ink:           #121004;   /* Near-black headings/body */
  --crimson:       #9f2524;   /* Crimson section background */
  --olive:         #4a522d;   /* Olive section background & footer */
  --sand:          #dec199;   /* Sand secondary accent & inputs background */
  --brick:         #ba3d05;   /* Brick terracotta primary CTA & logo */
  --amber:         #dd9646;   /* Warm amber secondary accent / focus */
  --slate:         #6378a3;   /* Slate blue for links */
  --border:        #ddd5c8;   /* Warm stone border */

  /* Derived opacities */
  --ink-60:  rgba(18, 16, 4, 0.60);
  --ink-40:  rgba(18, 16, 4, 0.40);
  --ink-20:  rgba(18, 16, 4, 0.20);
  --ink-10:  rgba(18, 16, 4, 0.10);
  --ink-06:  rgba(18, 16, 4, 0.06);

  /* Typography */
  --heading-font: 'Josefin Sans', system-ui, sans-serif;
  --body-font:    'Crimson Pro', Georgia, serif;
  --accent-font:  'IM Fell English', Georgia, serif;

  /* Layout */
  --mw:     1200px;           /* max content width */
  --px-sm:  24px;             /* mobile edge padding */
  --px-md:  48px;             /* tablet edge padding */
  --px-lg:  80px;             /* desktop edge padding */

  /* Film grain (reused across sections) */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}


/* ──────────────────────────────────────────────────────
   BASE RESET
   ────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--parchment);
  color: var(--ink);
  font-family: var(--body-font);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
  padding-top: 56px; /* space for fixed top bar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--slate);
  text-decoration: none;
  transition: opacity 0.22s ease;
}

a:hover {
  opacity: 0.72;
}

em {
  font-family: var(--body-font);
  font-style: italic;
}


/* ──────────────────────────────────────────────────────
   GLOBAL FILM GRAIN
   Animated analogue texture over the entire page
   ────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: var(--grain);
  background-size: 200px 200px;
  animation: grain 0.5s steps(1) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0,    0   ); }
  10%       { transform: translate(-2%, -3% ); }
  30%       { transform: translate( 3%,  2% ); }
  50%       { transform: translate(-1%,  4% ); }
  70%       { transform: translate( 4%, -1% ); }
  90%       { transform: translate(-3%,  3% ); }
}


/* ──────────────────────────────────────────────────────
   SCALLOPED DIVIDERS (CSS repeating inline SVGs)
   Updated to match the exact mathematical curve from the Illustrator SVG:
   Width of one wave: 74px, Height: 12px (dx=37.1px, dy=11.8px in the AI export)
   ────────────────────────────────────────────────────── */
.scallop-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background-repeat: repeat-x;
  background-size: 74px 12px;
  z-index: 10;
  pointer-events: none;
}

.scallop-divider--parchment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 12' width='74' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C 18.5 0, 18.5 12, 37 12 C 55.5 12, 55.5 0, 74 0 Z' fill='%23f9f6e7'/%3E%3C/svg%3E");
}

.scallop-divider--ink {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 12' width='74' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C 18.5 0, 18.5 12, 37 12 C 55.5 12, 55.5 0, 74 0 Z' fill='%23121004'/%3E%3C/svg%3E");
}

.scallop-divider--crimson {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 12' width='74' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C 18.5 0, 18.5 12, 37 12 C 55.5 12, 55.5 0, 74 0 Z' fill='%239f2524'/%3E%3C/svg%3E");
}


/* ──────────────────────────────────────────────────────
   SCROLL REVEAL / FADE-IN
   ────────────────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ════════════════════════════════════════════════════════
   TOP BAR BANNER
   ════════════════════════════════════════════════════════ */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--ink);
  color: var(--parchment);
  height: 56px; /* equal height */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  border-bottom: 1px solid rgba(249, 246, 231, 0.04);
}

.top-bar__inner {
  position: relative;
  width: 100%;
  max-width: var(--mw);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--px-sm);
}

.top-bar__tagline {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

.top-bar em {
  font-family: var(--accent-font); /* IM FELL English */
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); /* 31.4px matching st5 from SVG */
  letter-spacing: 0.05em;
  color: var(--parchment);
  white-space: nowrap;
}

.top-bar__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -35%); /* subtle center translation */
  height: 20px; /* logo height centered in 56px header */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.top-bar__logo img {
  height: 100%;
  width: auto;
  display: block;
}

/* Scrolled state */
.top-bar.scrolled .top-bar__tagline {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.top-bar.scrolled .top-bar__logo {
  opacity: 1;
  transform: translate(-50%, -50%); /* perfectly centered */
  pointer-events: auto;
}


/* ════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ════════════════════════════════════════════════════════ */
.hero {
  min-height: 85svh;
  background-color: var(--parchment);
  padding: 40px var(--px-sm) 80px var(--px-sm);
  display: flex;
  align-items: center;
  position: relative;
}

.hero__inner {
  width: 100%;
  max-width: var(--mw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.hero__header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero__logo {
  width: 100%;
  max-width: 480px; /* matches hero CTA button width */
  height: auto;
  object-fit: contain;
}

.hero__content {
  text-align: center;
  max-width: 680px;
}

.hero__headline {
  font-family: var(--heading-font);
  font-weight: 700; /* Bold as in the uploaded webpage and SVG defs */
  font-size: clamp(2.2rem, 8.5vw, 4.4rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 24px;
  text-rendering: optimizeLegibility;
  text-transform: none; /* Title Case as requested by user */

  opacity: 0;
  transform: translateY(12px);
  animation: hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.hero__subheadline {
  font-family: var(--body-font);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1.4;
  color: var(--ink-60);
  margin-bottom: 40px;

  opacity: 0;
  transform: translateY(12px);
  animation: hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

/* Styled as a button matching visual layout and path dimensions (480x64px) */
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--accent-font); /* IM FELL English */
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.75rem, 4.5vw, 1.95rem); /* Scaled responsively to prevent wrapping or screen overflow on very narrow viewports */
  color: var(--brick);
  border: 1px solid var(--brick);
  padding: 12px 24px;
  width: 100%;
  max-width: 480px;
  line-height: 1;
  white-space: nowrap;
  height: clamp(52px, 4.5vw, 72px); /* Standardized button height */
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;

  opacity: 0;
  transform: translateY(12px);
  animation: hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

@media (min-width: 768px) {
  .hero__cta {
    padding: 16px 36px;
  }
}

.hero__cta:hover {
  color: var(--parchment);
  background-color: var(--brick);
  transform: translateY(-2px);
  opacity: 1;
}

@keyframes hero-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .hero {
    padding: 60px var(--px-md) 100px var(--px-md);
  }
}

@media (min-width: 1280px) {
  .hero {
    padding: 80px var(--px-lg) 120px var(--px-lg);
  }
}


/* ════════════════════════════════════════════════════════
   SECTION 2 — PHILOSOPHY (Ink background)
   ════════════════════════════════════════════════════════ */
.philosophy {
  background-color: var(--ink);
  color: var(--parchment);
  padding: 100px var(--px-sm);
  position: relative;
  overflow: hidden;
}

/* Texture overlay */
.philosophy::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.085;
  background-image: var(--grain);
  background-size: 200px 200px;
}

.philosophy__inner {
  position: relative;
  z-index: 2;
  max-width: var(--mw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}

/* Polaroid Visuals */
.philosophy__visual {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.polaroid-stack {
  position: relative;
  width: clamp(270px, 82vw, 320px);
  height: clamp(320px, 95vw, 380px);
  --translate-mult: 1;
}

/* 
 * Polaroid card containers.
 * Padding, borders, and background-color are removed since the PNG images
 * under assets/Images/ already have the white polaroid frames baked in.
 */
.polaroid {
  position: absolute;
  width: clamp(220px, 70vw, 270px);
  cursor: pointer;
  outline: none;
  transition: 
    transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), 
    z-index 0.65s step-end;
}

.polaroid img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: -4px 8px 22px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.3s ease;
}

/* Stack Position Classes managed by JavaScript (Mobile-first scales using translate multiplier) */
.polaroid.pos-0 { transform: rotate(-5deg) translate(calc(-15px * var(--translate-mult)), calc(-12px * var(--translate-mult))); z-index: 1; }
.polaroid.pos-1 { transform: rotate(6deg) translate(calc(22px * var(--translate-mult)), calc(5px * var(--translate-mult))); z-index: 2; }
.polaroid.pos-2 { transform: rotate(-3deg) translate(calc(-10px * var(--translate-mult)), calc(10px * var(--translate-mult))); z-index: 3; }
.polaroid.pos-3 { transform: rotate(4deg) translate(calc(15px * var(--translate-mult)), calc(12px * var(--translate-mult))); z-index: 4; }
.polaroid.pos-4 { transform: rotate(-6deg) translate(calc(-20px * var(--translate-mult)), calc(-8px * var(--translate-mult))); z-index: 5; }
.polaroid.pos-5 { transform: rotate(2deg) translate(calc(8px * var(--translate-mult)), calc(-15px * var(--translate-mult))); z-index: 6; }
.polaroid.pos-6 { transform: rotate(-4deg) translate(calc(-12px * var(--translate-mult)), calc(18px * var(--translate-mult))); z-index: 7; }
.polaroid.pos-7 { transform: rotate(5deg) translate(calc(16px * var(--translate-mult)), calc(10px * var(--translate-mult))); z-index: 8; }
.polaroid.pos-8 { transform: rotate(-1.5deg) translate(0, 0); z-index: 9; }

.polaroid.pos-8 img {
  box-shadow: -8px 16px 38px rgba(0, 0, 0, 0.6);
}

/* Hover Pull-Out Effects to indicate clickability (scaled dynamically) */
.polaroid.pos-0:hover { transform: rotate(-7deg) translate(calc(-20px * var(--translate-mult)), calc(-16px * var(--translate-mult))); }
.polaroid.pos-1:hover { transform: rotate(8deg) translate(calc(30px * var(--translate-mult)), calc(7px * var(--translate-mult))); }
.polaroid.pos-2:hover { transform: rotate(-4deg) translate(calc(-14px * var(--translate-mult)), calc(14px * var(--translate-mult))); }
.polaroid.pos-3:hover { transform: rotate(6deg) translate(calc(21px * var(--translate-mult)), calc(16px * var(--translate-mult))); }
.polaroid.pos-4:hover { transform: rotate(-8deg) translate(calc(-28px * var(--translate-mult)), calc(-11px * var(--translate-mult))); }
.polaroid.pos-5:hover { transform: rotate(3deg) translate(calc(11px * var(--translate-mult)), calc(-21px * var(--translate-mult))); }
.polaroid.pos-6:hover { transform: rotate(-5deg) translate(calc(-16px * var(--translate-mult)), calc(25px * var(--translate-mult))); }
.polaroid.pos-7:hover { transform: rotate(7deg) translate(calc(22px * var(--translate-mult)), calc(14px * var(--translate-mult))); }
.polaroid.pos-8:hover { transform: rotate(-1.5deg) translate(0, calc(-6px * var(--translate-mult))); }

.polaroid.pos-8:hover img {
  box-shadow: -12px 24px 46px rgba(0, 0, 0, 0.7);
}

/* Focus outline styled cleanly */
.polaroid:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

/* Philosophy Text - font size matching SVG (33px) */
.philosophy__content {
  display: flex;
  flex-direction: column;
  gap: 36px; /* spacious editorial spacing */
  font-family: var(--body-font);
  font-size: clamp(1.15rem, 2.2vw, 2.06rem); /* Generous scale to match 33px */
  line-height: 1.4; /* legible line height on mobile, overrides to 1.25 on desktop */
  color: rgba(249, 246, 231, 0.85);
  max-width: 580px;
}

.philosophy__content p {
  margin: 0;
}

.philosophy__content em.accent-text {
  font-family: var(--body-font); /* Crimson Pro matching SVG st13 */
  font-style: italic;
  font-size: 1.1em;
  color: var(--brick); /* orange accent */
  font-weight: 400;
}

/* Philosophy action button/link */
.philosophy__action {
  margin-top: 12px;
}

.philosophy__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--accent-font); /* IM FELL English */
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.9rem, 3.2vw, 1.45rem);
  color: var(--brick);
  border: 1px solid var(--brick);
  padding: 12px 24px;
  line-height: 1;
  white-space: nowrap;
  height: clamp(52px, 4.5vw, 72px); /* Standardized button height matching Hero CTA */
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

@media (min-width: 768px) {
  .philosophy__btn {
    padding: 16px 36px;
  }
}

.philosophy__btn:hover {
  color: var(--parchment);
  background-color: var(--brick);
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .philosophy {
    padding: 120px var(--px-md);
  }

  .philosophy__inner {
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
  }

  .philosophy__content {
    line-height: 1.25; /* Tight leading on desktop matching SVG metrics */
  }

  .polaroid-stack {
    width: 440px;
    height: 520px;
    --translate-mult: 1.58;
  }

  .polaroid {
    width: 370px;
  }
}

@media (min-width: 1280px) {
  .philosophy {
    padding: 140px var(--px-lg);
  }
  .philosophy__inner {
    gap: 120px;
  }
  .polaroid-stack {
    width: 530px;
    height: 620px;
    --translate-mult: 2.16;
  }
  .polaroid {
    width: 450px;
  }
}


/* ════════════════════════════════════════════════════════
   SECTION 3 — DECLARATION (Crimson background)
   ════════════════════════════════════════════════════════ */
.declaration {
  background-color: var(--crimson);
  color: var(--parchment);
  padding: 100px var(--px-sm);
  position: relative;
  overflow: hidden;
}

.declaration::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  background-image: var(--grain);
  background-size: 200px 200px;
}

.declaration__inner {
  position: relative;
  z-index: 2;
  max-width: var(--mw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}

/* Visual layout - scaled up layout to match the SVG elements */
.declaration__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

.declaration__statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* Colored Logo Mask scaled up significantly */
.declaration__logo-mask {
  display: inline-block;
  width: clamp(200px, 75vw, 480px);
  height: clamp(22px, 8.5vw, 56px); /* Scaled mathematically to match 8.84 aspect ratio */
  background-color: var(--sand);
  -webkit-mask-image: url('./assets/kaafinama logo head.png');
  mask-image: url('./assets/kaafinama logo head.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Bold large statement matching the hero headline size 62.3px */
.declaration__text {
  font-family: var(--heading-font);
  font-size: clamp(1.4rem, 5.2vw, 3.8rem); /* Slightly lower min-width to avoid wrap overflow on small phones */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--parchment);
  display: inline-block;
  line-height: 1.15;
}

/* Illustration scaled up to fit 520px/545px proportions */
.declaration__illustration {
  width: 100%;
  max-width: 320px;
  opacity: 0.9;
}

.declaration__illustration img {
  width: 100%;
  height: auto;
  /* Dark outline as shown in visual PNG */
}

/* Detail list - text leading set to exactly 37.92pt (37.92px responsive ratio) */
.declaration__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--body-font);
  font-size: clamp(1.15rem, 2.2vw, 2rem); /* Generous Crimson Pro matching 31.6px SVG */
  line-height: 1.4; /* Legible line height on mobile, overrides to 37.92px on desktop */
  color: rgba(249, 246, 231, 0.85);
  max-width: 580px;
}

.declaration__content p {
  margin: 0;
}

@media (min-width: 768px) {
  .declaration {
    padding: 120px var(--px-md);
  }
  .declaration__inner {
    grid-template-columns: 1.1fr 1fr; /* giving slightly more space to visual column */
    gap: 80px;
  }
  .declaration__visual {
    align-items: flex-start;
  }
  .declaration__statement {
    align-items: flex-start;
    text-align: left;
  }
  .declaration__logo-mask {
    width: 480px;
    height: 56px;
    -webkit-mask-position: left center;
    mask-position: left center;
  }
  .declaration__illustration {
    max-width: 560px; /* Matched to SVG 545px clip boundaries plus breathing room */
  }
  .declaration__content p {
    line-height: 37.92px; /* Exactly 37.92 pt leading in Illustrator (px-equivalent) */
  }
}

@media (min-width: 1280px) {
  .declaration {
    padding: 140px var(--px-lg);
  }
  .declaration__inner {
    gap: 120px;
  }
}


/* ════════════════════════════════════════════════════════
   SECTION 4 — WAITLIST FORM (Olive background)
   ════════════════════════════════════════════════════════ */
.waitlist {
  background-color: var(--olive);
  color: var(--parchment);
  padding: 120px var(--px-sm) 80px var(--px-sm);
  position: relative;
  overflow: hidden;
}

.waitlist::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.075;
  background-image: var(--grain);
  background-size: 200px 200px;
}

.waitlist__inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}

/* Header */
.waitlist__header {
  text-align: center;
  margin-bottom: 56px;
}

.waitlist__heading {
  font-family: var(--heading-font);
  font-weight: 700; /* Bold as in the uploaded webpage & SVG */
  font-size: clamp(1.8rem, 4.5vw, 3.9rem); /* Max size matches 62.3px in SVG */
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--parchment);
  margin-bottom: 16px;
  text-transform: none; /* Sentence Case as requested by user */
}

.waitlist__subtext {
  font-family: var(--body-font);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 2rem); /* Max size matches 31.6px in SVG */
  color: var(--sand);
}

/* Form structure */
.waitlist__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Form labels set to spacious, large font size matching 31.6px in SVG */
.form-field label {
  font-family: var(--body-font); /* Crimson Pro matching SVG st1/st4 */
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 2rem); /* Max size matches 31.6px in SVG */
  letter-spacing: normal;
  text-transform: none; /* Sentence case matching SVG */
  color: rgba(249, 246, 231, 0.75); /* Failsafe legible contrast */
  cursor: pointer;
}

/* Inputs set to matching Crimson Pro scale */
.form-field input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(249, 246, 231, 0.18);
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--body-font);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 2rem); /* matching 31.6px SVG */
  color: var(--parchment);
  outline: none;
  width: 100%;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form-field input::placeholder {
  color: rgba(249, 246, 231, 0.22);
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
}

/* Amber focus state */
.form-field input:focus {
  border-color: var(--amber);
  box-shadow: 0 2px 0 rgba(221, 150, 70, 0.3);
}

/* Error state */
.form-field input.error {
  border-color: var(--brick);
}

/* Form actions */
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  width: 100%;
}

/* Full-width submit button matching the form field width */
.submit-btn {
  background-color: var(--brick);
  color: var(--parchment);
  border: none;
  padding: 12px 24px;
  font-family: var(--accent-font); /* IM FELL English */
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.9rem, 3.5vw, 1.85rem); /* Proportional size for IM Fell English */
  letter-spacing: normal;
  text-transform: none; /* Sentence Case / no uppercase */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  height: clamp(52px, 4.5vw, 72px); /* Standardized button height matching Hero CTA */
  width: 100%;
  max-width: 100%; /* Stretches full width as in SVG */
  position: relative;
  overflow: hidden;
  transition: background-color 0.25s ease, transform 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 768px) {
  .submit-btn {
    padding: 16px 36px;
  }
}

.submit-btn:hover {
  background-color: var(--crimson);
  transform: translateY(-2px);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.submit-btn.success {
  background-color: var(--amber) !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  transform: none !important;
  cursor: default !important;
}

.form-disclaimer {
  font-family: var(--body-font);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(249, 246, 231, 0.35);
  text-align: center;
}

/* Form Success */
.form-success {
  padding: 40px 0;
  text-align: center;
}

.form-success p {
  font-family: var(--body-font);
  font-style: italic;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  line-height: 1.5;
  color: var(--parchment);
}

/* Watermark logo at the bottom - edge-to-edge full screen width */
.waitlist__watermark {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 90px;
  margin-bottom: -80px; /* aligned to bottom of olive section on mobile */
  opacity: 0.3; /* visible watermark matching class st26 in SVG */
  mix-blend-mode: multiply; /* blends beautifully on olive background */
  pointer-events: none;
  user-select: none;
  line-height: 0;
}

.watermark-img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .waitlist {
    padding: 140px var(--px-md) 100px var(--px-md);
  }
  .form-row {
    flex-direction: row;
    gap: 40px;
  }
  .waitlist__watermark {
    margin-bottom: -100px; /* Aligned to desktop padding-bottom */
  }
}

@media (min-width: 1280px) {
  .waitlist {
    padding: 160px var(--px-lg) 120px var(--px-lg);
  }
  .waitlist__watermark {
    margin-bottom: -120px; /* Aligned to wide desktop padding-bottom */
  }
}


/* ──────────────────────────────────────────────────────
   WOODCUT STAMP CLICK EFFECT
   ────────────────────────────────────────────────────── */
.click-stamp {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: scale(1.3) rotate(var(--stamp-rot));
  transition: opacity 0.1s ease-out, transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.click-stamp.stamped {
  transform: scale(1) rotate(var(--stamp-rot));
}

.click-stamp.stamp--dark.stamped {
  opacity: 0.22; /* Dark ink effect on light background */
  mix-blend-mode: multiply;
}

.click-stamp.stamp--light.stamped {
  opacity: 0.28; /* Warm light ink effect on dark background */
  /* Inverts black SVG to a warm sand/parchment tone */
  filter: invert(93%) sepia(12%) saturate(550%) hue-rotate(335deg) brightness(101%) contrast(92%);
  mix-blend-mode: screen;
}

.click-stamp.fading {
  opacity: 0 !important;
  transition: opacity 2.7s ease-in;
}


/* ──────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body::after {
    animation: none;
  }

  .fade-in {
    opacity: 1;
    transform: none;
  }
}