/* ==========================================================================
   Verdot Security — Coming soon
   Calm, centered, pen on paper.
   ========================================================================== */

:root {
  --ivory: #F4F1E9;
  --paper: #FBF9F4;
  --burgundy: #421021;
  --ink: #4A1530;
  --purple: #713D78;
  --purple-deep: #5C2E63;
  --violet: #9C6BA4;
  --sage: #657548;
  --charcoal: #29252B;
  --red: #B2473E;

  --ink-soft: rgba(41, 37, 43, .72);
  --ink-mute: rgba(41, 37, 43, .5);
  --hairline: rgba(41, 37, 43, .16);

  --hand: "Playwrite US Trad", "Segoe Script", "Bradley Hand", cursive;       /* the headline */
  --hand-print: "Playwrite GB S", "Segoe Print", "Bradley Hand", cursive;   /* readable handwriting */
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: max(clamp(20px, 5vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  --art-h: clamp(150px, 40svh, 520px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ivory);
}

@media (min-width: 1800px) { html { font-size: 112.5%; } }
@media (min-width: 2600px) { html { font-size: 125%; } }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ivory) url("/assets/paper.png");
  color: var(--charcoal);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: rgba(113, 61, 120, .2); color: var(--burgundy); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */

.top {
  padding: max(clamp(18px, 3.6vh, 40px), env(safe-area-inset-top)) var(--gutter) 0;
}

.lockup {
  display: inline-flex;
  align-items: baseline;
  gap: .7rem;
  color: var(--burgundy);
  text-decoration: none;
  border-radius: 4px;
}

.lockup:focus-visible { outline: 2px solid var(--purple); outline-offset: 6px; }

.wordmark {
  font-family: var(--hand-print);
  font-weight: 300;
  font-size: clamp(1.3rem, 1.1rem + .5vw, 1.6rem);
  line-height: 1.6;
}

/* The wordmark's period: the bottom grape from the drawing, same pen */
.hex-dot {
  display: inline-block;
  width: .4em;
  height: .43em;
  margin-left: .08em;
  overflow: visible;
}

.dot-wash { fill: var(--purple); opacity: .78; }

.dot-ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lockup-sub {
  font: 500 .6rem/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   Centre column
   -------------------------------------------------------------------------- */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro {
  width: 100%;
  max-width: 46rem;
  padding: clamp(20px, 9vh, 128px) var(--gutter) clamp(20px, 4vh, 48px);
  text-align: center;
}

.headline {
  margin: 0;
  font-family: var(--hand);
  font-weight: 300;
  font-size: clamp(2.3rem, .6rem + 9vw, 5.4rem);
  line-height: 1.45;
  color: var(--burgundy);
}

.lede {
  max-width: 32ch;
  margin: clamp(14px, 2.4vh, 26px) auto 0;
  font-family: var(--hand-print);
  font-weight: 300;
  font-size: clamp(1rem, .94rem + .25vw, 1.15rem);
  line-height: 1.85;
  color: rgba(41, 37, 43, .84);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Email bar
   -------------------------------------------------------------------------- */

.signup-wrap {
  width: min(100%, 28rem);
  margin: clamp(24px, 4.4vh, 44px) auto 0;
}

.signup-stage { min-width: 0; }

.signup {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 3.5rem;          /* fixed: the bar can never be stretched by its surroundings */
  margin: 0;
  padding: 5px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.signup:hover { border-color: rgba(41, 37, 43, .26); }

.signup:focus-within {
  border-color: rgba(113, 61, 120, .7);
  box-shadow: 0 0 0 4px rgba(113, 61, 120, .1);
}

.signup.is-invalid { border-color: var(--red); box-shadow: 0 0 0 4px rgba(178, 71, 62, .1); }

.signup input {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: .72rem .5rem .72rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  font: 400 1rem/1.2 var(--sans); /* 16px keeps iOS from zooming in */
  outline: none;
}

.signup input::placeholder { color: rgba(41, 37, 43, .4); }

.signup button {
  flex: 0 0 auto;
  margin: 0;
  padding: .74rem clamp(.95rem, 3.4vw, 1.25rem);
  border: 0;
  border-radius: 999px;
  background: var(--purple);
  color: var(--paper);
  font: 500 clamp(.875rem, .82rem + .3vw, .95rem)/1.2 var(--sans);
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, transform .2s ease;
}

.signup button:hover { background: var(--purple-deep); }
.signup button:active { transform: translateY(1px); }
.signup button:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.signup.is-busy button { cursor: progress; opacity: .85; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.signup-done {
  margin: 0;
  display: none;           /* swapped in for the form after signing up */
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 3.5rem;          /* same height as the email bar, so nothing jumps */
  color: var(--burgundy);
  font-family: var(--hand-print);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.6;
  outline: none;
}

.done-mark { width: .9em; height: .97em; margin: 0; flex: none; }

.signup-wrap.is-done .signup { display: none; }
.signup-wrap.is-done .signup-done { display: flex; }

.form-msg {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: .85rem;
  color: var(--red);
}

/* --------------------------------------------------------------------------
   The vine (inline SVG, pen on paper)
   -------------------------------------------------------------------------- */

.art {
  width: 100%;
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: clamp(8px, 2vh, 24px);
  overflow: hidden;
  pointer-events: none;
}

.vine {
  display: block;
  flex: none;
  height: var(--art-h);
  width: auto;
  aspect-ratio: 2400 / 560;
  overflow: visible;
}

.vine path.ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vine path.ink--light { stroke-width: 1.6; stroke-opacity: .8; }

.wash--grape { fill: var(--violet); transition: opacity 1.6s ease, fill 1.6s ease; }
.wash--a { opacity: .3; }
.wash--b { opacity: .42; }
.wash--c { opacity: .55; fill: var(--purple); }
.wash--light { opacity: .18; }
.wash--leaf { fill: var(--sage); opacity: .22; }

/* After signing up the bunch ripens */
.is-ripe .wash--grape { opacity: .62; fill: var(--purple); }

/* Tall tablets: let the vine take more of the page */
@media (orientation: portrait) and (min-width: 600px) {
  :root { --art-h: min(48svh, 66vw); }
}

/* Thin screens show the drawing smaller, so give the pen a little more weight */
@media (max-width: 600px) {
  .intro { padding-top: clamp(16px, 6vh, 64px); }
  .signup input { padding-left: .9rem; }
  .art { padding-bottom: clamp(4px, 1.4vh, 16px); }
  .headline { line-height: 1.3; }
  .lede { margin-top: 10px; line-height: 1.7; }
  .vine path.ink { stroke-width: 3; }
  .vine path.ink--light { stroke-width: 2; }
}

/* Short landscape screens */
@media (max-height: 520px) {
  .intro { padding-top: 12px; }
  .signup-wrap { margin-top: 18px; }
}

/* --------------------------------------------------------------------------
   Motion — the page writes itself once, then rests
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .top { animation: fade-in 1.2s ease both; }
  .dot-ink { stroke-dasharray: 1 2; animation: draw .9s cubic-bezier(.45, 0, .25, 1) .5s both; }
  .dot-wash { animation: fade-in 1s ease 1.3s both; }
  .headline { animation: rise 1.1s var(--ease) .1s both; }
  .lede { animation: rise 1.1s var(--ease) .25s both; }
  .signup-wrap { animation: rise 1.1s var(--ease) .4s both; }

  .vine-ink path {
    stroke-dasharray: 1 2; /* the gap keeps round caps from leaving dots before a line starts */
    animation: draw var(--t, 1s) cubic-bezier(.45, 0, .25, 1) both;
    animation-delay: calc(var(--d, 0s) + var(--dd, 0s));
  }

  .ink-cane { --d: .45s; --t: 1.7s; }
  .ink-cane .cane-left { --t: 1s; }
  .ink-cane .cane-right { --d: 2.1s; --t: 1s; }
  .ink-cane .ink--light { --dd: .9s; --t: .9s; }

  .ink-stem { --d: 1.25s; --t: .7s; }

  .ink-grapes { --t: .6s; }
  .ink-grapes .ink--light { --dd: .45s; --t: .5s; }
  .grape:nth-child(1)  { --d: 1.6s; }
  .grape:nth-child(2)  { --d: 1.68s; }
  .grape:nth-child(3)  { --d: 1.76s; }
  .grape:nth-child(4)  { --d: 1.86s; }
  .grape:nth-child(5)  { --d: 1.94s; }
  .grape:nth-child(6)  { --d: 2.04s; }
  .grape:nth-child(7)  { --d: 2.12s; }
  .grape:nth-child(8)  { --d: 2.2s; }
  .grape:nth-child(9)  { --d: 2.3s; }
  .grape:nth-child(10) { --d: 2.38s; }
  .grape:nth-child(11) { --d: 2.5s; }

  .ink-leaf { --t: 1.2s; }
  .ink-leaf .ink--light { --dd: .5s; --t: .7s; }
  .leaf:nth-child(1) { --d: 1.5s; }
  .leaf:nth-child(2) { --d: 1.75s; }
  .leaf:nth-child(3) { --d: 2.05s; }
  .leaf:nth-child(4) { --d: 1.4s; }
  .leaf:nth-child(5) { --d: 2.6s; }

  .ink-tendril { --d: 2.6s; --t: 1s; }

  .vine-wash { animation: fade-in 1.6s ease 3s both; }

  /* One slow breath, composited only: costs nothing while resting */
  .vine { animation: breathe 10s ease-in-out 4.5s infinite alternate; will-change: transform; }

  .signup.is-shake { animation: shake .4s ease; }
  .signup-wrap.is-done .signup-done { animation: rise .8s var(--ease) both; }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes draw { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }
@keyframes breathe { to { transform: translateY(-6px) rotate(-.4deg); } }

@keyframes shake {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}