/* Wrap Your Words — one page, no build step. */

:root {
  --cream: #F8F0E5;     /* page ground */
  --beige: #E8D9C5;     /* second field */
  --wine: #7A0B26;      /* the logo's crimson: the action */
  --wine-deep: #3B0D18; /* ink, and the dark field */
  --wine-mid: #521425;  /* a step up from the dark field */
  --rose: #F0C9BD;      /* accent on dark */
  --paper: #FFFCF5;     /* the letter */
  --ink-soft: #6E3A45;  /* secondary notes only */
  --kraft-1: #D9BF9C;
  --kraft-2: #E8D3B4;
  --kraft-3: #DEC6A3;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Cormorant Garamond", Georgia, serif;   /* set italic: the letter's own hand */
  --script: "Cormorant Garamond", Georgia, serif;
  --typed: "Special Elite", "Courier New", monospace;

  --margin: clamp(16px, 4vw, 56px);
  --gap-section: clamp(96px, 14vw, 200px);
  --t-display: clamp(40px, 5.3vw, 84px);
  --t-head: clamp(34px, 4.4vw, 64px);
  --t-sub: clamp(24px, 2.2vw, 32px);
  --t-body: 18px;
  --t-small: 15px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; cursor: url("../images/quill.svg") 2 30, auto; }
a, button, summary, label, select, .choice input, input[type="date"] { cursor: url("../images/quill-active.svg") 2 30, pointer; }
input[type="text"], input[type="tel"], textarea { cursor: url("../images/quill.svg") 2 30, text; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--wine-deep);
  font: 400 var(--t-body)/1.55 var(--sans);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; }
.hero :focus-visible, .how :focus-visible, .insta :focus-visible, .bar.on-dark :focus-visible { outline-color: var(--rose); }
::selection { background: var(--wine); color: var(--cream); }

.skip {
  position: absolute; left: var(--margin); top: -60px;
  background: var(--wine-deep); color: var(--cream); padding: 10px 16px; z-index: 30;
}
.skip:focus { top: 12px; }

/* Buttons: one shape, fully round, flat fill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 999px;
  background: var(--wine); color: var(--cream);
  font: 700 17px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .35s var(--ease-out);
}
.btn:hover { background: var(--wine-deep); }
.btn:active { transform: scale(.96); }
.btn-small { min-height: 42px; padding: 0 20px; font-size: 15px; }
.btn-light { background: var(--cream); color: var(--wine-deep); }
.btn-light:hover { background: var(--rose); }
.textlink {
  font-weight: 700; text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 2px; transition: color .2s var(--ease);
}
.textlink:hover { color: var(--wine); }
.hero .textlink:hover, .insta .textlink:hover { color: var(--rose); }

/* Bar: dark over the hero, cream after it */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 10px var(--margin);
  background: var(--cream); color: var(--wine-deep);
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.bar.scrolled { box-shadow: 0 10px 24px -8px rgba(59, 13, 24, .28); }
.bar.scrolled.on-dark { box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); }
.wordmark { margin-right: auto; display: grid; }
.wordmark img { grid-area: 1 / 1; height: 64px; width: auto; transition: opacity .4s var(--ease); }
.logo-cream { opacity: 0; }
.bar.on-dark { background: var(--wine-deep); color: var(--cream); }
.bar.on-dark .logo-cream { opacity: 1; }
.bar.on-dark .logo-wine { opacity: 0; }
.bar.on-dark .btn { background: var(--cream); color: var(--wine-deep); }
.bar.on-dark .btn:hover { background: var(--rose); }
.bar ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.bar nav a { text-decoration: none; font-size: 16px; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ------------------------------------------------------------------ */
/* Envelope parts, shared by the hero and the how-it-works scene       */
/* ------------------------------------------------------------------ */
.env { position: relative; width: 100%; aspect-ratio: 3 / 2; transform-style: preserve-3d; container-type: inline-size; }
.env-back { position: absolute; inset: 0; background: var(--kraft-1); border-radius: 3px; }
.env-front {
  position: absolute; inset: 0; z-index: 3; background: var(--kraft-2); border-radius: 3px;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.flap {
  position: absolute; left: 0; right: 0; top: 0; height: 62%; z-index: 4;
  transform-origin: 50% 0; transform-style: preserve-3d;
}
.flap-face { position: absolute; inset: 0; background: var(--kraft-3); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env-seal {
  position: absolute; left: 50%; top: 100%; width: 19%; height: auto;
  transform: translate(-50%, -62%); backface-visibility: hidden;
}
.w {
  font-family: var(--hand); font-style: italic; color: var(--wine-deep);
  font-size: 4.9cqw; font-weight: 500; line-height: 1.35; white-space: nowrap;
}
.w.sign { text-align: right; margin-top: .3em; }
.pol { position: absolute; background: #FFFEFA; padding: 3.2% 3.2% 11%; }
.pol img { width: 100%; aspect-ratio: 1; }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding: clamp(24px, 3vw, 48px) var(--margin) clamp(56px, 6vw, 96px);
  min-height: min(calc(100svh - 74px), 900px);
  background: var(--wine-deep); color: var(--cream);
}
.petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { font-size: var(--t-display); line-height: .96; max-width: 13.5em; }
.lede { margin-top: 32px; font-size: 21px; max-width: 30em; }
.hero-price { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.hero-price span { font: 600 var(--t-sub)/1.1 var(--serif); }
.hero-price strong { font: 600 var(--t-head)/1 var(--serif); color: var(--rose); }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

.stage { position: relative; z-index: 1; perspective: 1400px; padding: 0 12%; }
.rig {
  padding-top: 40%;
  transform-style: preserve-3d;
  animation: rig-in 1s var(--ease-out) .1s both, float 7s ease-in-out 2.6s infinite alternate;
}
.hero .env { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--ease-out); }
.hero .letter-card {
  position: absolute; left: 6%; right: 6%; top: 5%; height: 92%; z-index: 2;
  background: var(--paper); padding: 6% 7%;
  transform: translateY(-62%);
  animation: rise 1.1s var(--ease-out) 1.7s both;
}
.hero .flap { transform: rotateX(180deg); z-index: 1; animation: open 1s var(--ease) 1s both; }
.hero .w { clip-path: inset(0 0 0 0); animation: write .7s linear both; }
.hero .w:nth-child(1) { animation-delay: 2.5s; }
.hero .w:nth-child(2) { animation-delay: 2.85s; }
.hero .w:nth-child(3) { animation-delay: 3.2s; }
.hero .w:nth-child(4) { animation-delay: 3.55s; }
.hero .w:nth-child(5) { animation-delay: 3.95s; }
.hero .pol { width: 25%; left: 37.5%; top: 18%; z-index: 6; animation: fly 1s var(--ease-out) both; }
.hero .pol-1 { transform: translate(-205%, -55%) rotate(-11deg); animation-delay: 2.35s; }
.hero .pol-2 { transform: translate(158%, -168%) rotate(9deg); animation-delay: 2.5s; }
.hero .pol-3 { transform: translate(178%, -10%) rotate(-5deg); animation-delay: 2.65s; }

@keyframes rig-in { from { opacity: 0; transform: translateY(60px) rotateX(18deg); } }
@keyframes float { to { translate: 0 -10px; } }
@keyframes open {
  0% { transform: rotateX(0deg); z-index: 4; }
  49% { z-index: 4; }
  50% { z-index: 1; }
  100% { transform: rotateX(180deg); z-index: 1; }
}
@keyframes rise { from { transform: translateY(0); } }
@keyframes write { from { clip-path: inset(0 100% 0 0); } }
@keyframes fly {
  from { transform: translate(0, 40%) rotate(0deg) scale(.5); opacity: 0; z-index: 1; }
  30% { opacity: 1; }
}

/* What's inside */
.inside {
  background: var(--beige);
  padding: clamp(72px, 9vw, 140px) var(--margin);
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px);
}
.inside-intro { position: sticky; top: 110px; align-self: start; }
.inside h2 { font-size: var(--t-head); }
.inside-intro p { margin-top: 24px; max-width: 28em; }
.inside-intro .price-line { margin-top: 28px; font: 600 var(--t-sub)/1.2 var(--serif); }
.inside-intro .btn { margin-top: 28px; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 5vw, 64px); perspective: 1000px; }
.item { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.item img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--cream);
  transition: transform .9s var(--ease-out);
}
.item:hover img { transform: rotateY(-8deg) rotateX(4deg) scale(1.03); }
.item h3 { font-size: var(--t-sub); line-height: 1.1; }
.item p { margin-top: 10px; }

/* How it works: one letter goes through the four steps as you scroll */
.how { position: relative; background: var(--wine-deep); color: var(--cream); }
.how-pin {
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(72px, 9vw, 140px) var(--margin);
}
.how h2 { font-size: var(--t-head); max-width: 12em; }
.how-sub { margin-top: 16px; font-size: 19px; max-width: 30em; }
.steps { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: 22px; }
.steps li { transition: opacity .5s var(--ease), transform .5s var(--ease-out); }
.steps h3 { font-size: var(--t-sub); line-height: 1.1; }
.steps p { margin-top: 6px; max-width: 28em; }
.how-progress { margin-top: 36px; height: 6px; background: var(--wine-mid); border-radius: 3px; overflow: hidden; display: none; }
.how-progress span { display: block; height: 100%; width: 100%; background: var(--rose); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }

.how-stage { position: relative; width: 100%; max-width: 620px; justify-self: center; aspect-ratio: 1.05; }
.hs-box {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(.92); transition: opacity .8s var(--ease), transform 1s var(--ease-out);
}
.hs-env {
  position: absolute; left: 15%; width: 70%; bottom: 8%;
  aspect-ratio: 3 / 2; container-type: inline-size; transform-style: preserve-3d; perspective: 1200px;
  transition: transform 1.1s var(--ease-out);
}
.hs-env .env-back, .hs-env .env-front { transition: opacity .6s var(--ease); }
.hs-letter {
  position: absolute; left: 6%; right: 6%; top: 5%; height: 92%; z-index: 2;
  background: var(--paper); padding: 6% 7%;
  transition: transform 1s var(--ease-out);
}
.hs-letter .w { clip-path: inset(0 100% 0 0); transition: clip-path .7s linear; }
.how.written .hs-letter .w { clip-path: inset(0 0 0 0); }
.how.written .hs-letter .w:nth-child(2) { transition-delay: .35s; }
.how.written .hs-letter .w:nth-child(3) { transition-delay: .7s; }
.how.written .hs-letter .w:nth-child(4) { transition-delay: 1.05s; }
.how.written .hs-letter .w:nth-child(5) { transition-delay: 1.45s; }
.hs-letter .pol { width: 30%; opacity: 0; transition: transform .9s var(--ease-out), opacity .5s var(--ease); }
.hs-pol-1 { right: -12%; top: -14%; transform: translate(120%, -60%) rotate(30deg); }
.hs-pol-2 { left: -14%; bottom: -10%; transform: translate(-120%, 60%) rotate(-30deg); }
.hs-pol-3 { right: -8%; bottom: -16%; transform: translate(120%, 80%) rotate(20deg); }
.hs-env .flap { transition: transform .9s var(--ease); }
.hs-env .env-seal { transition: transform .5s var(--ease-out), opacity .3s var(--ease); }

/* Step 1: the letter, out of its envelope */
.how[data-step="0"] .hs-env .env-back,
.how[data-step="0"] .hs-env .env-front,
.how[data-step="0"] .hs-env .flap,
.how[data-step="1"] .hs-env .env-back,
.how[data-step="1"] .hs-env .env-front,
.how[data-step="1"] .hs-env .flap { opacity: 0; }
.how[data-step="0"] .hs-letter,
.how[data-step="1"] .hs-letter { transform: translateY(-52%) scale(1.12); }
/* Step 2: the photos join it */
.how[data-step="1"] .hs-letter .pol { opacity: 1; }
.how[data-step="1"] .hs-pol-1 { transform: rotate(8deg); }
.how[data-step="1"] .hs-pol-2 { transform: rotate(-7deg); }
.how[data-step="1"] .hs-pol-3 { transform: rotate(4deg); }
/* Step 3: into the envelope, flap closed, sealed */
.how[data-step="0"] .hs-env .flap,
.how[data-step="1"] .hs-env .flap { transform: rotateX(180deg); z-index: 1; }
.how[data-step="0"] .env-seal,
.how[data-step="1"] .env-seal { opacity: 0; transform: translate(-50%, -62%) scale(1.8); }
/* Step 4: packed into the box */
.how[data-step="3"] .hs-box { opacity: 1; transform: none; }
.how[data-step="3"] .hs-env { transform: translate(29%, 13%) scale(.42) rotate(7deg); }

/* The scroll scene itself: only when the script runs and motion is welcome */
.how.scene-on { height: 380vh; }
.how.scene-on .hs-env, .how.scene-on .hs-letter, .how.scene-on .hs-letter .pol, .how.scene-on .hs-env .flap,
.how.scene-on .hs-env .env-seal, .how.scene-on .hs-env .env-back, .how.scene-on .hs-env .env-front, .how.scene-on .hs-box {
  transition: none; will-change: transform, opacity;
}
.how.scene-on .how-progress span { transition: none; }
.how.scene-on .how-pin { position: sticky; top: 0; height: 100svh; padding-top: 88px; padding-bottom: 48px; }
.how.scene-on .steps li { opacity: .32; }
.how.scene-on .steps li.active { opacity: 1; transform: translateX(10px); }
.how.scene-on .how-progress { display: block; }

/* Your words or ours */
.words { padding: var(--gap-section) var(--margin) 0; }
.words h2 { font-size: var(--t-head); max-width: 16em; }
.words-intro { margin-top: 20px; max-width: 36em; font-size: 20px; }
.options { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: 1fr 1fr; perspective: 1400px; }
.option { padding: clamp(32px, 4vw, 56px); transition: transform .8s var(--ease-out); }
.option:first-child { background: var(--paper); }
.option:last-child { background: var(--beige); }
.option:hover { transform: translateZ(24px); }
.option h3 { font-size: clamp(30px, 3.2vw, 46px); }
.option p { margin-top: 16px; max-width: 30em; }
.option .sample { margin-top: 24px; font-size: 26px; line-height: 1.35; }
.option:first-child .sample { font-family: var(--typed); font-size: 19px; line-height: 1.6; }
.option:last-child .sample { font-family: var(--hand); font-style: italic; font-size: 28px; }
.styles-note { margin-top: 28px; font: 600 var(--t-sub)/1.2 var(--serif); }

/* Order: the form and the letter it writes */
.order { padding: var(--gap-section) var(--margin) 0; }
.order h2 { font-size: var(--t-head); max-width: 14em; }
.order-intro { margin-top: 20px; max-width: 36em; font-size: 20px; }
.order-grid { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }

/* The form is a sheet of aged writing paper: folded, foxed, burnt at the edges. */
.aged {
  background-color: #EEDCB5;
  background-image:
    radial-gradient(ellipse 40% 26% at 14% 12%, rgba(150, 98, 40, .20), transparent 70%),
    radial-gradient(ellipse 34% 22% at 88% 64%, rgba(140, 88, 36, .17), transparent 70%),
    radial-gradient(circle at 74% 9%, rgba(120, 76, 28, .14), transparent 7%),
    radial-gradient(circle at 22% 83%, rgba(120, 76, 28, .12), transparent 6%),
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(110, 75, 35, .16) 50%, rgba(255, 248, 230, .5) calc(50% + 1px), transparent calc(50% + 3px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 26px rgba(105, 58, 12, .42), inset 0 0 110px rgba(130, 80, 25, .38);
  clip-path: polygon(0.0% 4.4px, 2.1% 5.2px, 4.2% 5.6px, 6.2% 6.6px, 8.3% 5.2px, 10.4% 6.5px, 12.5% 0.2px, 14.6% 3.3px, 16.7% 6.6px, 18.8% 4.5px, 20.8% 6.3px, 22.9% 0.8px, 25.0% 3.3px, 27.1% 1.7px, 29.2% 3.8px, 31.2% 4.0px, 33.3% 0.1px, 35.4% 1.5px, 37.5% 2.0px, 39.6% 6.4px, 41.7% 5.4px, 43.8% 1.1px, 45.8% 5.6px, 47.9% 1.0px, 50.0% 4.3px, 52.1% 0.9px, 54.2% 0.0px, 56.2% 6.1px, 58.3% 1.5px, 60.4% 1.5px, 62.5% 6.9px, 64.6% 6.1px, 66.7% 2.0px, 68.8% 6.7px, 70.8% 3.8px, 72.9% 4.7px, 75.0% 1.4px, 77.1% 6.6px, 79.2% 4.8px, 81.2% 6.8px, 83.3% 6.3px, 85.4% 2.1px, 87.5% 2.5px, 89.6% 1.2px, 91.7% 1.0px, 93.8% 0.5px, 95.8% 2.1px, 97.9% 4.2px, 100.0% 0.0px, calc(100% - 4.7px) 0.0%, calc(100% - 2.4px) 1.4%, calc(100% - 2.2px) 2.9%, calc(100% - 5.7px) 4.3%, calc(100% - 3.4px) 5.7%, calc(100% - 2.2px) 7.1%, calc(100% - 3.4px) 8.6%, calc(100% - 4.9px) 10.0%, calc(100% - 0.4px) 11.4%, calc(100% - 6.8px) 12.9%, calc(100% - 0.2px) 14.3%, calc(100% - 5.2px) 15.7%, calc(100% - 5.9px) 17.1%, calc(100% - 0.1px) 18.6%, calc(100% - 5.5px) 20.0%, calc(100% - 2.6px) 21.4%, calc(100% - 4.0px) 22.9%, calc(100% - 0.1px) 24.3%, calc(100% - 0.3px) 25.7%, calc(100% - 1.3px) 27.1%, calc(100% - 6.7px) 28.6%, calc(100% - 1.4px) 30.0%, calc(100% - 5.3px) 31.4%, calc(100% - 6.5px) 32.9%, calc(100% - 6.6px) 34.3%, calc(100% - 2.4px) 35.7%, calc(100% - 2.5px) 37.1%, calc(100% - 3.7px) 38.6%, calc(100% - 5.4px) 40.0%, calc(100% - 0.8px) 41.4%, calc(100% - 5.2px) 42.9%, calc(100% - 5.6px) 44.3%, calc(100% - 6.0px) 45.7%, calc(100% - 0.3px) 47.1%, calc(100% - 6.6px) 48.6%, calc(100% - 0.6px) 50.0%, calc(100% - 2.4px) 51.4%, calc(100% - 4.3px) 52.9%, calc(100% - 6.4px) 54.3%, calc(100% - 2.4px) 55.7%, calc(100% - 6.5px) 57.1%, calc(100% - 3.8px) 58.6%, calc(100% - 2.2px) 60.0%, calc(100% - 2.2px) 61.4%, calc(100% - 1.2px) 62.9%, calc(100% - 0.5px) 64.3%, calc(100% - 1.0px) 65.7%, calc(100% - 4.8px) 67.1%, calc(100% - 7.0px) 68.6%, calc(100% - 1.1px) 70.0%, calc(100% - 0.3px) 71.4%, calc(100% - 6.9px) 72.9%, calc(100% - 3.7px) 74.3%, calc(100% - 2.8px) 75.7%, calc(100% - 1.7px) 77.1%, calc(100% - 4.2px) 78.6%, calc(100% - 5.8px) 80.0%, calc(100% - 3.2px) 81.4%, calc(100% - 3.0px) 82.9%, calc(100% - 0.4px) 84.3%, calc(100% - 6.4px) 85.7%, calc(100% - 0.2px) 87.1%, calc(100% - 3.5px) 88.6%, calc(100% - 5.9px) 90.0%, calc(100% - 0.9px) 91.4%, calc(100% - 5.1px) 92.9%, calc(100% - 6.6px) 94.3%, calc(100% - 4.4px) 95.7%, calc(100% - 5.5px) 97.1%, calc(100% - 0.7px) 98.6%, calc(100% - 3.0px) 100.0%, 100.0% calc(100% - 1.0px), 97.9% calc(100% - 5.9px), 95.8% calc(100% - 2.1px), 93.8% calc(100% - 3.2px), 91.7% calc(100% - 7.0px), 89.6% calc(100% - 6.0px), 87.5% calc(100% - 6.8px), 85.4% calc(100% - 3.2px), 83.3% calc(100% - 3.4px), 81.2% calc(100% - 5.1px), 79.2% calc(100% - 3.4px), 77.1% calc(100% - 2.0px), 75.0% calc(100% - 2.8px), 72.9% calc(100% - 1.0px), 70.8% calc(100% - 2.6px), 68.8% calc(100% - 6.9px), 66.7% calc(100% - 6.7px), 64.6% calc(100% - 4.4px), 62.5% calc(100% - 3.5px), 60.4% calc(100% - 2.4px), 58.3% calc(100% - 0.6px), 56.2% calc(100% - 1.9px), 54.2% calc(100% - 5.5px), 52.1% calc(100% - 6.1px), 50.0% calc(100% - 2.5px), 47.9% calc(100% - 5.5px), 45.8% calc(100% - 5.4px), 43.8% calc(100% - 4.9px), 41.7% calc(100% - 4.6px), 39.6% calc(100% - 5.3px), 37.5% calc(100% - 2.5px), 35.4% calc(100% - 4.9px), 33.3% calc(100% - 2.0px), 31.2% calc(100% - 3.4px), 29.2% calc(100% - 5.4px), 27.1% calc(100% - 4.8px), 25.0% calc(100% - 2.1px), 22.9% calc(100% - 6.6px), 20.8% calc(100% - 4.5px), 18.8% calc(100% - 4.1px), 16.7% calc(100% - 0.1px), 14.6% calc(100% - 3.8px), 12.5% calc(100% - 1.8px), 10.4% calc(100% - 4.7px), 8.3% calc(100% - 3.2px), 6.2% calc(100% - 5.7px), 4.2% calc(100% - 4.5px), 2.1% calc(100% - 5.6px), 0.0% calc(100% - 2.4px), 4.5px 100.0%, 5.2px 98.6%, 5.8px 97.1%, 2.5px 95.7%, 5.9px 94.3%, 6.1px 92.9%, 4.8px 91.4%, 6.8px 90.0%, 6.7px 88.6%, 3.6px 87.1%, 3.7px 85.7%, 1.2px 84.3%, 5.9px 82.9%, 6.6px 81.4%, 3.3px 80.0%, 4.8px 78.6%, 5.0px 77.1%, 5.1px 75.7%, 1.2px 74.3%, 5.5px 72.9%, 4.1px 71.4%, 4.7px 70.0%, 2.9px 68.6%, 4.4px 67.1%, 5.4px 65.7%, 4.5px 64.3%, 5.0px 62.9%, 0.2px 61.4%, 1.1px 60.0%, 3.1px 58.6%, 4.6px 57.1%, 1.5px 55.7%, 4.8px 54.3%, 4.4px 52.9%, 0.3px 51.4%, 3.3px 50.0%, 1.6px 48.6%, 0.4px 47.1%, 0.9px 45.7%, 2.2px 44.3%, 1.3px 42.9%, 1.4px 41.4%, 0.2px 40.0%, 3.3px 38.6%, 2.7px 37.1%, 4.3px 35.7%, 4.1px 34.3%, 1.7px 32.9%, 6.3px 31.4%, 0.0px 30.0%, 2.8px 28.6%, 1.9px 27.1%, 2.9px 25.7%, 0.8px 24.3%, 5.8px 22.9%, 2.6px 21.4%, 0.3px 20.0%, 4.3px 18.6%, 0.7px 17.1%, 3.8px 15.7%, 2.4px 14.3%, 4.1px 12.9%, 6.7px 11.4%, 5.7px 10.0%, 2.9px 8.6%, 5.7px 7.1%, 4.5px 5.7%, 2.6px 4.3%, 1.0px 2.9%, 4.2px 1.4%, 3.9px 0.0%);
}
.paper {
  position: relative;
  display: grid; gap: 34px;
  padding: clamp(40px, 5vw, 68px) clamp(24px, 5vw, 68px) clamp(40px, 5vw, 60px) clamp(44px, 7vw, 96px);
  font-family: var(--serif);
}
.paper::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(clamp(44px, 7vw, 96px) - 20px); width: 2px;
  background: rgba(150, 40, 55, .30); pointer-events: none;
}
.paper-dear, .paper-sign { font: italic 600 clamp(30px, 3vw, 38px)/1.2 var(--script); color: var(--wine); }
.paper-sign { margin-bottom: 4px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 24px; min-width: 0; }
legend { font: 600 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); padding: 0; margin-bottom: 6px; }
.field { display: grid; gap: 2px; position: relative; align-content: start; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
label, .label { font: 600 21px/1.2 var(--serif); }
.opt { font: italic 500 17px/1 var(--serif); color: var(--ink-soft); }
.hint { font: italic 500 17px/1.35 var(--serif); color: var(--ink-soft); }
.paper input[type="text"], .paper input[type="tel"], .paper input[type="date"], .paper select, .paper textarea {
  width: 100%; min-height: 48px; padding: 4px 2px;
  font: italic 500 25px/1.3 var(--serif); color: var(--wine-deep);
  background: transparent; border: 0; border-bottom: 2px dashed rgba(59, 13, 24, .38); border-radius: 0;
  transition: border-color .25s var(--ease);
}
.paper input[type="date"] { font-size: 21px; }
.paper select { appearance: none; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233B0D18' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 6px center; }
.paper textarea {
  min-height: 200px; resize: vertical; padding: 0 2px; border-bottom: 0;
  line-height: 40px;
  background-image: repeating-linear-gradient(transparent 0 38px, rgba(59, 13, 24, .24) 38px 40px);
  background-attachment: local;
}
.paper textarea[rows="3"] { min-height: 120px; }
.paper ::placeholder { color: rgba(110, 58, 69, .6); }
.paper input:hover, .paper select:hover { border-bottom-color: rgba(59, 13, 24, .65); }
.paper input:focus, .paper select:focus, .paper textarea:focus { outline: none; border-bottom: 2px solid var(--wine); }
.paper textarea:focus { background-image: repeating-linear-gradient(transparent 0 38px, rgba(122, 11, 38, .45) 38px 40px); }
.paper [aria-invalid="true"] { border-bottom-color: #9B1C2C; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.choice span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px 0 15px;
  border: 2px solid rgba(59, 13, 24, .32); border-radius: 999px; font: 600 19px/1.15 var(--serif);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .3s var(--ease-out);
}
.choice span::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; flex: none;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.choice:hover span { border-color: var(--wine); }
.choice input:checked + span { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.choice input:checked + span::before { background: var(--cream); box-shadow: inset 0 0 0 3px var(--wine); }
.choice input:active + span { transform: scale(.96); }
.choice input:focus-visible + span { outline: 3px solid var(--wine); outline-offset: 3px; }
.error { color: #9B1C2C; font: 700 17px/1.3 var(--serif); }
.photos-note { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.ps-stack { position: relative; width: 104px; height: 88px; }
.ps-stack img {
  position: absolute; width: 58px; height: 58px; background: #FFFDF6; padding: 4px 4px 12px; box-sizing: content-box;
  box-shadow: 0 6px 12px -6px rgba(59, 13, 24, .55);
}
.ps-stack img:nth-child(1) { left: 0; top: 10px; transform: rotate(-12deg); }
.ps-stack img:nth-child(2) { left: 22px; top: 0; transform: rotate(4deg); }
.ps-stack img:nth-child(3) { left: 40px; top: 14px; transform: rotate(14deg); }
.photos-note strong { display: block; font: italic 600 28px/1.15 var(--script); color: var(--wine); }
.photos-note p { margin-top: 4px; font: italic 500 20px/1.4 var(--serif); }
.send { display: grid; gap: 14px; justify-items: start; }
.send p:last-child { font: italic 500 17px/1.4 var(--serif); color: var(--ink-soft); max-width: 34em; }
.quill-pin {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; pointer-events: none; z-index: 2;
  opacity: 0; transform-origin: 4.7% 96.9%;
  transition: opacity .3s var(--ease), translate .18s var(--ease-out);
}
.quill-pin.on { opacity: 1; }
/* While writing, the quill on the page is the only feather; the pointer returns on mouse move. */
html.quill-writing, html.quill-writing * { cursor: none !important; }
.quill-pin.writing { animation: scribble .3s ease-in-out infinite alternate; }
@keyframes scribble { from { transform: rotate(-6deg); } to { transform: rotate(5deg) translate(2px, -1px); } }

/* The live letter */
.preview { position: sticky; top: 100px; }
.letter {
  position: relative;
  --rule: 44px;
  padding: 48px clamp(26px, 3.5vw, 52px) 124px;
  min-height: 520px;
  font: italic 500 27px/var(--rule) var(--hand); color: var(--wine-deep);
}
.letter.aged {
  background-image:
    repeating-linear-gradient(transparent 0 calc(var(--rule) - 6px), rgba(59, 13, 24, .17) calc(var(--rule) - 6px) calc(var(--rule) - 5px), transparent calc(var(--rule) - 5px) var(--rule)),
    radial-gradient(ellipse 40% 26% at 14% 12%, rgba(150, 98, 40, .20), transparent 70%),
    radial-gradient(ellipse 34% 22% at 88% 64%, rgba(140, 88, 36, .17), transparent 70%),
    radial-gradient(circle at 74% 9%, rgba(120, 76, 28, .14), transparent 7%),
    radial-gradient(circle at 22% 83%, rgba(120, 76, 28, .12), transparent 6%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% var(--rule), auto, auto, auto, auto, auto;
  background-position: 0 48px, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat-y, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
.letter[data-style="typed"] { font: 400 18px/var(--rule) var(--typed); }
.letter .dear { font-weight: 600; color: var(--wine); }
.letter .body { white-space: pre-line; overflow-wrap: anywhere; }
.letter .body.placeholder { color: var(--ink-soft); }
.letter .body:not(.placeholder)::after {
  content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.1em;
  background: var(--wine); animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.letter .signoff { margin-top: var(--rule); text-align: right; }
.seal { position: absolute; right: 30px; bottom: 26px; width: 84px; height: 84px; }
.seal.stamp { animation: stamp .55s var(--ease); }
@keyframes stamp {
  0% { transform: translateY(-40px) scale(1.25) rotate(-12deg); opacity: 0; }
  60% { transform: translateY(0) scale(.94) rotate(0); opacity: 1; }
  100% { transform: scale(1); }
}
.preview-title { font-size: var(--t-sub); line-height: 1.1; margin-bottom: 18px; }
.preview-caption { margin-top: 20px; font-size: var(--t-small); color: var(--ink-soft); max-width: 30em; }

/* FAQ */
.faq {
  padding: var(--gap-section) var(--margin) 0;
  display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 6vw, 96px);
}
.faq-head { position: sticky; top: 110px; align-self: start; }
.faq h2 { font-size: var(--t-head); }
.faq-head p { margin-top: 20px; max-width: 22em; }
.faq-head .textlink { display: inline-block; margin-top: 16px; }
.faq-list { display: grid; gap: 8px; }
details { background: var(--beige); }
details[open] { background: var(--paper); }
summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 22px 24px; font: 600 24px/1.2 var(--serif);
  transition: color .2s var(--ease);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 30px/1 var(--sans); transition: transform .3s var(--ease-out); flex: none; }
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--wine); }
summary:focus:not(:focus-visible) { outline: none; }
summary:focus-visible { outline-offset: -3px; }
details[open] summary { color: var(--wine); padding-bottom: 12px; }
details { border-left: 0 solid var(--wine); transition: background-color .3s var(--ease), border-left-width .3s var(--ease-out); }
details[open] { border-left-width: 6px; }
details .answer { padding: 0 24px 24px; max-width: 40em; }
details[open] .answer { animation: open-answer .45s var(--ease-out); }
@keyframes open-answer { from { opacity: 0; transform: translateY(-8px); } }
details .answer p + p, details .answer ul { margin-top: 10px; }
details ul { padding-left: 20px; margin: 10px 0 0; }

/* Instagram */
.insta {
  margin-top: var(--gap-section);
  background: var(--wine); color: var(--cream);
  padding: clamp(72px, 9vw, 140px) var(--margin);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center;
}
.insta h2 { font-size: var(--t-display); line-height: .95; overflow-wrap: anywhere; }
.insta p { margin-top: 24px; font-size: 20px; max-width: 28em; }
.insta .btn { margin-top: 32px; }
.insta-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.insta-photos a { display: block; background: var(--paper); padding: 10px 10px 34px; transition: transform .5s var(--ease-out); }
.insta-photos a:nth-child(1) { transform: rotate(-3deg); }
.insta-photos a:nth-child(2) { transform: rotate(2deg) translateY(24px); }
.insta-photos a:nth-child(3) { transform: rotate(-1deg); }
.insta-photos a:hover { transform: rotate(0) translateY(-8px) scale(1.04); }
.insta-photos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* Footer */
.foot { background: var(--cream); color: var(--wine); text-align: center; padding: clamp(64px, 8vw, 120px) var(--margin) 40px; }
.foot-logo { width: min(620px, 88%); height: auto; margin: 0 auto; }
.foot-grid { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 56px; }
.foot-grid p { font-size: 16px; }
.foot-grid a { text-underline-offset: 4px; }
.foot small { display: block; margin-top: 48px; font-size: 14px; opacity: .8; }

/* Phone order bar, shown once the hero's button has scrolled away */
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--wine-deep); color: var(--cream);
  transform: translateY(110%); transition: transform .4s var(--ease-out);
}
.order-bar.show { transform: translateY(0); }
.order-bar p { font: 600 19px/1.1 var(--serif); white-space: nowrap; }
.order-bar .btn { min-height: 46px; padding: 0 18px; font-size: 15px; white-space: nowrap; }

/* Entrances: only hidden when the script is running */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js h2.reveal { clip-path: inset(0 0 100% 0); transform: translateY(40px); transition: clip-path 1s var(--ease-out), transform 1s var(--ease-out), opacity .4s var(--ease); }
.js h2.reveal.in { clip-path: inset(-10% -5% -20% -5%); }
.js .item.reveal img { transform: rotateY(-50deg) translateX(-20px); opacity: 0; transition: transform 1.1s var(--ease-out), opacity .8s var(--ease); }
.js .item.reveal.in img { transform: none; opacity: 1; }
.js .item.reveal.in:hover img { transform: rotateY(-8deg) rotateX(4deg) scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js h2.reveal, .js .item.reveal img { opacity: 1; transform: none; clip-path: none; }
}

/* Tablet */
@media (max-width: 1040px) {
  .bar ul { gap: 18px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .stage { max-width: 640px; width: 100%; justify-self: center; }
  .how-pin { grid-template-columns: 1fr; }
  .how.scene-on .how-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 16px; padding-top: 84px; }
  .how.scene-on .how-sub { display: none; }
  .how.scene-on .how-stage { width: min(100%, calc((100svh - 380px) * 1.05)); align-self: center; }
  .how.scene-on .steps { position: relative; min-height: 7.5em; margin-top: 20px; }
  .how.scene-on .steps li { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(12px); }
  .how.scene-on .steps li.active { opacity: 1; transform: none; }
  .how.scene-on .how-progress { margin-top: 0; }
  .order-grid { grid-template-columns: 1fr; }
  .preview { position: static; order: -1; }
  .letter { min-height: 0; }
}

/* Phone */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .bar nav { display: none; }
  .wordmark img { height: 50px; }
  .hero { gap: 20px; padding-top: 8px; }
  .stage { order: -1; padding: 0 14%; }
  .lede { margin-top: 18px; font-size: 18px; }
  .hero-price { margin-top: 20px; }
  .hero-actions { margin-top: 22px; }
  .inside { grid-template-columns: 1fr; }
  .inside-intro { position: static; }
  .item { grid-template-columns: 112px 1fr; align-items: start; }
  .how.scene-on .steps { min-height: 8.5em; }
  .how.scene-on { height: 280vh; }
  .preview { order: 0; }
  .options { grid-template-columns: 1fr; margin-left: calc(var(--margin) * -1); margin-right: calc(var(--margin) * -1); }
  .row { grid-template-columns: 1fr; }
  .paper { margin: 0 calc(var(--margin) * -1 + 6px); padding-left: 40px; }
  .photos-note { grid-template-columns: 1fr; gap: 10px; }
  .letter { font-size: 26px; padding-bottom: 124px; }
  .faq { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  summary { font-size: 21px; padding: 18px 18px; }
  details .answer { padding: 0 18px 20px; }
  .insta { grid-template-columns: 1fr; }
  .insta h2 { font-size: clamp(40px, 12vw, 60px); }
  .foot-grid { flex-direction: column; align-items: center; }
  .order-bar { display: flex; }
  .foot { padding-bottom: 96px; }
}