:root {
  --paper: #f2eee4;       /* lighter warm off-white (design base was #e8e2d6) */
  --ink: #12190a;         /* PRD dark green ink */

  --serif: "Prata", Georgia, "Times New Roman", serif;
  --caps: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad-x: clamp(20px, 4.5vw, 60px);
  --pad-y: clamp(24px, 3.6vh, 46px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow: hidden;
}

/* Subtle paper grain + fold creases, layered over the base colour. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* The two faint "quarter" lines: a vertical + a horizontal crease through the
   centre, dividing the page into four quadrants (the brand motif). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(18, 25, 10, 0.13) calc(50% - 0.5px), rgba(18, 25, 10, 0.13) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(18, 25, 10, 0.13) calc(50% - 0.5px), rgba(18, 25, 10, 0.13) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* ---------- Decorative arcs ---------- */
.arcs {
  position: fixed;
  bottom: 0;
  z-index: 1;
  /* Big enough to sweep well up the side edges on desktop. The 48vw term is
     under half the viewport, so the left and right groups can NEVER meet at
     the bottom centre; 88vh drives the reach on tall/wide screens; the cap
     keeps very large monitors sane. Mobile is overridden below. */
  width: clamp(140px, min(88vh, 48vw), 1100px);
  aspect-ratio: 1;
  pointer-events: none;
}

/* Arcs are present on load — no draw-on. The entrance lives on the tracer
   segments (they spin in fast, then settle), see .arc--trace. */
.arcs--left { left: 0; }
.arcs--right { right: 0; }

/* On phones keep each arc group small and firmly in its own corner, with a
   wide open gap down the centre — no crossing, no crosshatch. */
@media (max-width: 640px) {
  .arcs { width: 40vw; }
}

.arc {
  fill: none;
  stroke: var(--ink);
  vector-effect: non-scaling-stroke;
}

/* Plain SOLID stroke — no dash math. This guarantees the whole arc is drawn
   edge-to-edge; the earlier dasharray/dashoffset draw-on combined with
   pathLength + non-scaling-stroke miscomputed the dash and dropped the last
   ~20deg at the vertical edge. The draw-on now lives on the .arcs clip-path. */
.arc--base {
  stroke-opacity: 0.2;
  stroke-width: 1.4;
}

.arc--trace {
  stroke-opacity: 0.42;
  stroke-width: 3.15;
  stroke-linecap: round;
  stroke-dasharray: 17 83;
  stroke-dashoffset: var(--phase, 0);
  opacity: 0;
  /* Each segment fades in and sweeps in fast — LESS than one loop, in the
     SAME direction as the steady loop — then decelerates straight into it.
     Under a full loop, the dash never wraps during the fast phase, so the
     quick motion can't strobe/alias into looking like it spins the other way.
     Staggered per --delay. */
  animation:
    traceSpin 1.3s cubic-bezier(0.1, 0.7, 0.35, 0.92) var(--delay, 0s) both,
    trace var(--dur, 9s) linear calc(var(--delay, 0s) + 1.3s) infinite,
    traceIn 0.35s ease-out var(--delay, 0s) forwards;
}

/* Each segment starts at its own --phase, sweeps 0.75 of a loop (no wrap),
   then the steady loop continues seamlessly (one full loop) from there. The
   per-arc --phase means they settle at different points around the circle,
   not clustered at the same progress. */
@keyframes traceSpin { to { stroke-dashoffset: calc(var(--phase, 0) - 75); } }
@keyframes trace {
  from { stroke-dashoffset: calc(var(--phase, 0) - 75); }
  to { stroke-dashoffset: calc(var(--phase, 0) - 175); }
}
@keyframes traceIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Layout ---------- */
.page {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 2.4vh);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Bias the block slightly below dead-centre, as in the design, so the CTA
     lands near ~75% of height rather than a void opening below it. */
  padding-top: clamp(0px, 8vh, 84px);
}

.footer {
  text-align: center;
}

/* ---------- Type ---------- */
.label {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(0.62rem, 0.8vw, 0.78rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.label--link {
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease;
}

.label--link:hover { opacity: 0.6; }

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 7.4vw, 5.85rem);
  line-height: 1;
  letter-spacing: clamp(1.5px, 0.5vw, 7px);
  text-transform: uppercase;
}

.subwordmark {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(1rem, 2.05vw, 1.7rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: clamp(10px, 1.4vw, 20px);
  /* letter-spacing pushes the block right; nudge it back to optical centre */
  text-indent: 0.4em;
}

.status {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(0.6rem, 0.78vw, 0.72rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-indent: 0.28em;
  color: var(--ink);
  border: 1px solid rgba(18, 25, 10, 0.55);
  border-radius: 999px;
  padding: 0.72em 1.5em;
  margin-top: clamp(28px, 4.4vh, 54px);
}

.tagline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.7vw, 2.2rem);
  letter-spacing: 0.005em;
  margin-top: clamp(30px, 5vh, 66px);
}

.cta {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(0.72rem, 0.92vw, 0.9rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-indent: 0.24em;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: clamp(16px, 1.8vw, 22px) clamp(36px, 3.8vw, 58px);
  margin-top: clamp(26px, 4.2vh, 50px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 14px 34px -12px rgba(18, 25, 10, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -12px rgba(18, 25, 10, 0.6);
}

.cta:active { transform: translateY(0); }

/* ---------- Background Polaroid photos ---------- */
/* They "print" up from their bottom edge, hold ~1s, then retract the same way,
   scattered at apparently-random spots. The shadow lives on the OUTER element
   (via filter: drop-shadow) so it reveals with the clip-path'd inner card
   instead of being clipped away. */
.photos {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.photo {
  position: absolute;
  width: clamp(104px, 14vw, 180px);
  filter: drop-shadow(0 9px 20px rgba(18, 25, 10, 0.26));
}

.photo__card {
  --dur: 11s;
  --delay: 0s;
  margin: 0;
  opacity: 0;
  will-change: clip-path, transform, opacity;
  animation: printPop var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay) infinite;
}

.photo__card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

@keyframes printPop {
  0% { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(6px); }
  2% { opacity: 1; }
  8% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); }
  20% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); }
  27% { clip-path: inset(100% 0 0 0); opacity: 1; transform: translateY(6px); }
  29% { opacity: 0; }
  100% { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(6px); }
}

/* placement · size · tilt · timing (staggered so they feel random) */
.photo--1 { top: 13%; left: 5%; width: clamp(116px, 14vw, 182px); }
.photo--1 .photo__card { --dur: 11s; --delay: 0.6s; }

.photo--2 { top: 19%; right: 6%; width: clamp(100px, 12vw, 148px); }
.photo--2 .photo__card { --dur: 13s; --delay: 4.2s; }

.photo--3 { top: 55%; left: 6%; width: clamp(124px, 15vw, 200px); }
.photo--3 .photo__card { --dur: 10s; --delay: 7.6s; }

.photo--4 { top: 60%; right: 6%; width: clamp(100px, 12vw, 146px); }
.photo--4 .photo__card { --dur: 12.5s; --delay: 2.4s; }

.photo--5 { top: 39%; left: 15%; width: clamp(92px, 11vw, 126px); }
.photo--5 .photo__card { --dur: 14s; --delay: 9.3s; }

/* On phones re-scatter the photos into the roomy top band and just below the
   CTA, clear of the centred wordmark/tagline/CTA. (Placed after the base
   .photo--N rules so it actually wins the cascade.) */
@media (max-width: 640px) {
  .photo--1 { top: 7%; left: 5%; width: 140px; }
  .photo--2 { top: 12%; right: 6%; width: 120px; }
  .photo--5 { top: 22%; left: 34%; width: 104px; }
  .photo--3 { top: 75%; left: 5%; width: 128px; }
  .photo--4 { top: 76%; right: 6%; width: 112px; }
}

/* ---------- Waitlist modal ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}

.modal[hidden] { display: none; }

.modal__scrim {
  position: absolute;
  inset: 0;
  /* Alpha + blur tuned so the dark background CTA can't peek out below the card
     on short (~720px) laptop viewports. */
  background: rgba(12, 17, 6, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: modalFade 0.28s ease both;
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90dvh;
  overflow: auto;
  background: var(--paper);
  border: 1px solid rgba(18, 25, 10, 0.14);
  border-radius: 8px;
  padding: clamp(30px, 5vw, 52px) clamp(24px, 4.5vw, 46px) clamp(28px, 4.5vw, 44px);
  text-align: center;
  box-shadow: 0 40px 80px -24px rgba(12, 17, 6, 0.55);
  animation: modalRise 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal__close {
  position: absolute;
  top: clamp(12px, 2vw, 18px);
  right: clamp(12px, 2vw, 18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.55;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.modal__close:hover { opacity: 1; background: rgba(18, 25, 10, 0.06); }

.modal__eyebrow {
  display: block;
  opacity: 0.62;
  margin-bottom: clamp(14px, 2.4vw, 20px);
}

.modal__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.8vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.modal__desc {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 2.4vw, 1.12rem);
  line-height: 1.5;
  color: rgba(18, 25, 10, 0.78);
  margin-top: clamp(10px, 1.8vw, 16px);
  max-width: 34ch;
  margin-inline: auto;
}

.wl-form {
  display: flex;
  flex-direction: column;
  margin-top: clamp(22px, 3.4vw, 30px);
}

/* First + Last name sit side by side, and stack on very narrow modals. */
.wl-names {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.4vw, 12px);
  margin-bottom: clamp(10px, 1.6vw, 13px);
}

.wl-field {
  flex: 1 1 130px;
  min-width: 0;
}

.wl-input {
  width: 100%;
  font-family: var(--caps);
  font-size: 1rem; /* >=16px so iOS Safari doesn't zoom on focus */
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align: left;
  background: #fbf9f4;
  border: 1px solid rgba(18, 25, 10, 0.28);
  border-radius: 999px;
  padding: clamp(14px, 1.8vw, 17px) clamp(22px, 3vw, 28px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hidden iframe that receives the Mailchimp POST response (cross-origin, unread). */
.wl-sink {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  visibility: hidden;
}

.wl-input::placeholder { color: rgba(18, 25, 10, 0.6); }

.wl-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(18, 25, 10, 0.14);
}

.modal .wl-input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.wl-input[aria-invalid="true"] {
  border-color: #8a3b1e;
  box-shadow: 0 0 0 3px rgba(138, 59, 30, 0.14);
}

.wl-submit {
  width: 100%;
  margin-top: clamp(12px, 1.8vw, 16px);
}

.wl-submit[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: 0 14px 34px -12px rgba(18, 25, 10, 0.4);
}

.wl-submit[disabled]:hover { transform: none; }

.wl-msg {
  min-height: 1.2em;
  font-family: var(--caps);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-top: 14px;
  color: rgba(18, 25, 10, 0.7);
}

.wl-msg.is-error { color: #8a3b1e; }
.wl-msg.is-ok { color: var(--ink); }
.wl-msg:empty { margin-top: 0; }

/* Keyboard focus rings (buttons) */
.modal .cta:focus-visible,
.modal__close:focus-visible,
.label--link:focus-visible,
.cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Success view */
.wl-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
  margin-bottom: clamp(16px, 2.6vw, 22px);
}

[data-view="success"] .modal__title:focus { outline: none; }

.wl-done {
  margin-top: clamp(22px, 3.4vw, 30px);
  min-width: 160px;
}

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalRise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .arc--trace { display: none; }
  .photos { display: none; }
  .cta { transition: none; }
  .modal__scrim,
  .modal__dialog { animation: none; }
}