/* ============================================================
   INVITING WAYS · waitlist landing
   Two-ink letterpress: ink blue + sealing-wax red on cream stock
   ============================================================ */

:root {
  --paper: #f7f2e8;
  --paper-deep: #efe8d8;
  --paper-deeper: #e7ddc8;
  --ink: #26313a;
  --ink-soft: #5b6770;
  --wax: #8e3038;
  --wax-deep: #6f2229;
  --wax-light: #e8c9c3;
  --keyline: #cfc2a8;
  --hairline: #ddd2bb;
  --env-lining: #6f2229; /* envelope lining; swap seasonally (navy #26313a, gold #b08d57, green #3f4b3a) */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Karla", "Helvetica Neue", sans-serif;
  --emboss: 0 1px 0 rgba(255, 255, 255, 0.55);
  --max: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 255, 255, 0.55), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--wax); color: var(--paper); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 99;
}
.skip-link:focus { left: 0; }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 480; text-wrap: balance; }

h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-shadow: var(--emboss);
}
h1 em { font-style: italic; font-weight: 380; color: var(--wax); }

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  text-shadow: var(--emboss);
  margin-bottom: 1rem;
}

h3 { font-size: 1.25rem; margin-bottom: 0.45rem; }

.center { text-align: center; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wax);
  margin-bottom: 1rem;
}

.lede {
  font-size: clamp(1.1rem, 1.7vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 34em;
  margin: 1.4rem 0 2rem;
}

.amp { font-family: var(--serif); font-style: italic; }

/* ---------- layout ---------- */

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 2.5rem);
}
.section-inner.narrow { max-width: 760px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-wax {
  background: var(--wax);
  color: var(--paper);
  border-radius: 3px;
  box-shadow: 0 2px 0 var(--wax-deep), 0 8px 18px rgba(111, 34, 41, 0.22);
}
.btn-wax:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--wax-deep), 0 12px 22px rgba(111, 34, 41, 0.26); }
.btn-wax:active, .seal-press:active { transform: translateY(2px); box-shadow: 0 0 0 var(--wax-deep), 0 3px 8px rgba(111, 34, 41, 0.3); }

.btn-quiet {
  color: var(--ink);
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--keyline);
}
.btn-quiet:hover { border-color: var(--wax); color: var(--wax); }

.btn-ghost {
  color: var(--wax);
  border: 1.5px solid var(--wax);
  border-radius: 3px;
  padding: 0.6rem 1.2rem;
  font-size: 0.82rem;
}
.btn-ghost:hover { background: var(--wax); color: var(--paper); }

.btn.wide { display: block; width: 100%; text-align: center; }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--hairline); }
.masthead-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mark { display: flex; align-items: center; gap: 0.8rem; }
.seal-mark { width: 44px; height: 44px; }
.seal-mark.sm { width: 36px; height: 36px; }
.seal-text {
  font-family: var(--serif);
  font-size: 20px;
  fill: var(--paper);
  letter-spacing: 0.05em;
}
.seal-text.lg { font-size: 26px; }
.mark-words { display: flex; flex-direction: column; line-height: 1.25; }
.mark-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 550; }
.mark-est {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- hero ---------- */

.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-cta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.hero-note { margin-top: 1.5rem; font-size: 0.98rem; color: var(--ink-soft); }
.hero-note strong { color: var(--wax); font-weight: 800; }

/* hero art: envelope, invite, mini site, seal */

.art-stack { position: relative; min-height: 480px; }

.art-envelope {
  position: absolute;
  top: 8%; left: 2%;
  width: 78%;
  transform: rotate(-2deg);
  filter: drop-shadow(0 14px 24px rgba(38, 49, 58, 0.14));
}
.env-svg { width: 100%; height: auto; display: block; }

.art-invite {
  position: absolute;
  top: 0; left: 12%;
  width: 62%;
  background: #fbf7ee;
  padding: 7%;
  transform: rotate(-5deg);
  box-shadow: 0 18px 34px rgba(38, 49, 58, 0.18);
  transition: transform 0.4s ease;
}
.invite-border {
  border: 1px solid var(--keyline);
  outline: 1px solid var(--keyline);
  outline-offset: 4px;
  padding: 9% 6%;
  text-align: center;
}
.invite-orn { color: var(--wax); font-size: 1.1rem; display: block; }
.invite-orn.flip { transform: scaleX(-1); margin-top: 0.5rem; }
.invite-kicker, .invite-line {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.6rem 0;
}
.invite-names {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 480;
  margin: 0.4rem 0;
}
.invite-names .amp { color: var(--wax); }
.invite-date { font-family: var(--serif); font-style: italic; font-size: 0.85rem; margin: 0.5rem 0 0.2rem; }
.invite-place { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

.art-site {
  position: absolute;
  bottom: -3%; right: -1%;
  width: 54%;
  background: #fbf7ee;
  transform: rotate(3deg);
  box-shadow: 0 20px 38px rgba(38, 49, 58, 0.22);
  border: 1px solid var(--hairline);
  transition: transform 0.4s ease;
}
.art-stack:hover .art-invite { transform: rotate(-6.5deg) translateY(-4px); }
.art-stack:hover .art-site { transform: rotate(4.5deg) translateY(-3px); }

.site-chrome {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-deep);
}
.site-chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--keyline); }
.site-url {
  margin-left: 8px;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: var(--paper);
  border-radius: 20px;
  padding: 2px 10px;
}
.site-body { text-align: center; padding: 1.3rem 1rem 1.5rem; }
.site-kicker { font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wax); }
.site-names { font-family: var(--serif); font-size: 1.45rem; margin: 0.35rem 0 0.1rem; }
.site-names .amp { color: var(--wax); }
.site-date { font-size: 0.62rem; letter-spacing: 0.28em; color: var(--ink-soft); }
.site-nav {
  display: flex; justify-content: center; gap: 0.7rem;
  margin: 0.8rem 0;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-btn {
  display: inline-block;
  background: var(--wax);
  color: var(--paper);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0.45rem 1.3rem;
  border-radius: 2px;
}

.art-seal {
  position: absolute;
  width: 72px;
  top: 52%; left: 4%;
  filter: drop-shadow(0 6px 10px rgba(111, 34, 41, 0.35));
}

.art-caption {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 1.6rem;
  font-size: 1.02rem;
}

/* ---------- perforated divider ---------- */

.perf-divider {
  height: 18px;
  max-width: var(--max);
  margin: 0 auto;
  background-image: radial-gradient(circle at 9px 9px, var(--paper-deeper) 4px, transparent 4.5px);
  background-size: 26px 18px;
  background-position: center;
  opacity: 0.9;
}

/* ---------- how it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
}

.step {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--hairline);
  padding: 2.2rem 1.8rem 2rem;
  position: relative;
  text-align: center;
}
.step::after {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.step-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--wax);
  font-size: 1.05rem;
  display: block;
  margin-bottom: 1rem;
}
.step-icon { width: 64px; height: 64px; color: var(--ink); margin-bottom: 1.1rem; }
.step p { color: var(--ink-soft); font-size: 0.98rem; }

.steps-note {
  margin-top: 2.6rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ---------- included ---------- */

.included-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: 3rem;
}
.included-grid li {
  border-top: 2px solid var(--ink);
  padding-top: 1.1rem;
}
.included-grid h3 { font-size: 1.12rem; }
.included-grid p { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- story ---------- */

.story { background: linear-gradient(180deg, transparent, rgba(231, 221, 200, 0.5) 18%, rgba(231, 221, 200, 0.5) 82%, transparent); }

.story-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.story-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  border: 1px solid var(--keyline);
  outline: 1px solid var(--keyline);
  outline-offset: 6px;
  padding: clamp(2rem, 4vw, 3.5rem) 1rem;
  background: rgba(255, 255, 255, 0.35);
}
.story-year {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 300;
  line-height: 1;
  text-shadow: var(--emboss);
}
.story-rule {
  width: 1px; height: clamp(3rem, 7vw, 5.5rem);
  background: var(--wax);
  position: relative;
}
.story-rule::before, .story-rule::after {
  content: "❦";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--wax);
  font-size: 0.85rem;
}
.story-rule::before { top: -1.1rem; }
.story-rule::after { bottom: -1.1rem; }

.story-copy p + p { margin-top: 1rem; }
.story-copy > div p { color: var(--ink-soft); max-width: 36em; }
.story-sign {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
}

.story-side { display: flex; flex-direction: column; gap: 1.6rem; }

.story-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: start;
}
.story-photos figure {
  background: #fbf7ee;
  border: 1px solid var(--keyline);
  padding: 8px 8px 10px;
  box-shadow: 0 10px 22px rgba(38, 49, 58, 0.14);
  transform: rotate(-1.2deg);
}
.story-photos figure + figure { transform: rotate(1.4deg); margin-top: 0.9rem; }
.story-photos img { width: 100%; height: auto; display: block; }
.story-photos figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 0.5rem;
}

/* ---------- kind words ---------- */

.kind-note {
  color: var(--ink-soft);
  max-width: 36em;
  margin: 0 auto;
  text-align: center;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: 3rem;
}
.quote {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--hairline);
  padding: 1.9rem 1.7rem 1.6rem;
  position: relative;
}
.quote::after {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
}
.quote figcaption {
  margin-top: 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- pricing ---------- */

.price-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
}

.price-card {
  background: #fbf7ee;
  border: 1px solid var(--keyline);
  padding: 2.4rem 2.2rem 2.2rem;
  text-align: center;
  position: relative;
  box-shadow: 0 14px 30px rgba(38, 49, 58, 0.1);
}
.price-card::after {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.price-card.founding { border-color: var(--wax); }
.price-card.founding::after { border-color: var(--wax-light); }

.founding-flag {
  position: absolute;
  top: -0.85rem; left: 50%;
  transform: translateX(-50%);
  background: var(--wax);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  white-space: nowrap;
  z-index: 1;
}

.price-label {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.price-figure {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6vw, 4.6rem);
  font-weight: 380;
  line-height: 1.1;
  text-shadow: var(--emboss);
}
.price-card.founding .price-figure { color: var(--wax); }
.price-terms { font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin-bottom: 1.4rem; }

.price-list {
  list-style: none;
  text-align: left;
  margin: 0 auto 1.5rem;
  max-width: 30em;
}
.price-list li {
  padding: 0.5rem 0 0.5rem 1.6rem;
  border-bottom: 1px dashed var(--hairline);
  font-size: 0.96rem;
  position: relative;
}
.price-list li::before {
  content: "❧";
  position: absolute; left: 0;
  color: var(--wax);
  font-size: 0.85rem;
}
.price-fine { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- faq ---------- */

.faq-item {
  border-bottom: 1px solid var(--hairline);
  padding: 0.35rem 0;
}
.faq-item:first-of-type { border-top: 1px solid var(--hairline); margin-top: 2.5rem; }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 480;
  padding: 1.05rem 2.4rem 1.05rem 0.2rem;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.4rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--wax);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--wax); }
.faq-body { padding: 0 0.2rem 1.3rem; }
.faq-body p { color: var(--ink-soft); max-width: 40em; }

/* ---------- waitlist envelope ---------- */

.waitlist .section-inner { padding-bottom: clamp(5rem, 10vw, 8rem); }

.envelope-wrap { position: relative; padding-top: 70px; }

.envelope-flap {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(640px, 92%);
  height: 130px;
  background: var(--paper-deeper);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-top: 1px solid var(--keyline);
  z-index: 2;
}

.flap-seal {
  position: absolute;
  width: 64px;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  filter: drop-shadow(0 5px 9px rgba(111, 34, 41, 0.35));
}

.envelope-card {
  position: relative;
  z-index: 1;
  background: #fbf7ee;
  border: 1px solid var(--keyline);
  box-shadow: 0 22px 44px rgba(38, 49, 58, 0.16);
  padding: 7.5rem clamp(1.4rem, 4vw, 3rem) clamp(2rem, 4vw, 2.8rem);
}
.envelope-card::after {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.envelope-card > * { position: relative; z-index: 1; }

/* the card slides up out of the envelope and tucks in under the flap,
   then the wax seal presses on */
.envelope-wrap.in .envelope-card {
  animation: card-up 1.1s cubic-bezier(0.22, 0.8, 0.36, 1) 0.3s backwards;
}
.envelope-wrap.in .flap-seal {
  animation: seal-press 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 1.4s backwards;
}

@keyframes card-up {
  0%   { transform: translateY(150px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes seal-press {
  0%   { opacity: 0; transform: translateX(-50%) scale(1.3); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.waitlist-lede { color: var(--ink-soft); margin: 0.6rem auto 2rem; max-width: 32em; }
.waitlist-lede strong { color: var(--wax); }

.waitlist-form { max-width: 520px; margin: 0 auto; }

.hp-field { position: absolute; left: -9999px; }

.field { margin-bottom: 1.2rem; text-align: left; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.field .req, .field .opt {
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-size: 0.68rem;
}
.field .req { color: var(--wax); }

.field input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--keyline);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder { color: #a99f8c; }
.field input:focus {
  outline: none;
  border-color: var(--wax);
  box-shadow: 0 0 0 3px rgba(142, 48, 56, 0.14);
}

.waitlist-form .btn { margin-top: 0.4rem; }
.share-row {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.form-fine {
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 1rem;
}

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--hairline); background: rgba(231, 221, 200, 0.35); }
.footer-seal { width: 50px; filter: drop-shadow(0 4px 9px rgba(111, 34, 41, 0.28)); }
.footer-inner {
  text-align: center;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.footer-name { font-family: var(--serif); font-size: 1.4rem; margin-top: 0.8rem; }
.footer-line {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.4rem 0 1.2rem;
}
.footer-copy { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- reveal animations ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }
.reveal.d4 { transition-delay: 0.48s; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .art-invite, .art-site { transition: none; }
  .envelope-wrap.in .envelope-card, .envelope-wrap.in .flap-seal { animation: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* let the invitation card size the stack so the caption clears the collage */
  .art-stack { min-height: 0; max-width: 480px; margin: 0 auto; }
  /* re-balance the collage for single column: the desktop offsets read right-shifted */
  .art-invite { position: relative; top: auto; left: 6%; }
  .art-site { right: 1%; }
  .art-envelope { left: 0; }
  .art-caption { margin-top: 2.4rem; }
  .steps, .included-grid, .quotes { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .story-inner { grid-template-columns: 1fr; }
  .story-side { max-width: 420px; margin: 0 auto; width: 100%; }
  .story-plate { flex-direction: row; }
  .story-rule { width: clamp(3rem, 12vw, 5.5rem); height: 1px; }
  .story-rule::before { top: 50%; left: -1.2rem; transform: translateY(-50%); }
  .story-rule::after { bottom: auto; top: 50%; left: auto; right: -1.2rem; transform: translateY(-50%); }
  .price-cards { grid-template-columns: minmax(0, 460px); }
  .price-card.founding { margin-top: 0.6rem; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .hero-cta .btn { width: 100%; text-align: center; }
  .hero-cta { gap: 0.8rem; }
}

/* ============================================================
   FULL SITE · masthead nav, subpage heads, story timeline,
   resources, article, contact form, CTA band, footer nav
   ============================================================ */

/* ---------- masthead nav ---------- */

a.mark { text-decoration: none; color: inherit; }

.masthead-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem clamp(1rem, 2.5vw, 1.8rem);
}
.masthead-nav > a:not(.btn) {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.masthead-nav > a:not(.btn):hover { color: var(--wax); }
.masthead-nav > a[aria-current="page"] { color: var(--wax); border-bottom-color: var(--wax); }

@media (max-width: 820px) {
  .masthead-inner { flex-direction: column; gap: 0.9rem; }
}

/* on phones the hero and footer carry the waitlist buttons;
   the masthead one would just double up and eat screen height */
@media (max-width: 560px) {
  .masthead-nav .btn-ghost { display: none; }
}

/* ---------- subpage head ---------- */

.page-head { text-align: center; }
.page-head .section-inner { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.page-head h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.06; text-shadow: var(--emboss); }
.page-head h1 em { font-style: italic; font-weight: 380; color: var(--wax); }
.page-head .lede { margin: 1.2rem auto 0; }

/* ---------- story timeline ---------- */

.timeline { margin: 0 auto; max-width: 780px; }
.tl-entry {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: 2.2rem 0;
  border-bottom: 1px dashed var(--hairline);
}
.tl-entry:last-child { border-bottom: none; }
.tl-entry .tl-year {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 330;
  line-height: 1.15;
  color: var(--ink);
  text-shadow: var(--emboss);
}
.tl-entry h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.tl-entry p { color: var(--ink-soft); max-width: 38em; }
.tl-entry p + p { margin-top: 0.8rem; }

.story-photos.standalone {
  max-width: 640px;
  margin: 2.5rem auto 0;
}

@media (max-width: 640px) {
  .tl-entry { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.8rem 0; }
}

/* ---------- resources ---------- */

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: 3rem;
}
.resource-card {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--hairline);
  padding: 2rem 1.8rem 1.8rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.resource-card::after {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.resource-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wax);
  margin-bottom: 0.9rem;
}
.resource-card h3 { font-size: 1.22rem; }
.resource-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0.5rem 0 1.2rem; }
.resource-card .card-link {
  margin-top: auto;
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wax);
  border-bottom: 2px solid var(--wax-light);
  padding-bottom: 0.15rem;
}
.resource-card .card-link:hover { border-bottom-color: var(--wax); }
.resource-card.soon { opacity: 0.8; }
.resource-card.soon .resource-kicker { color: var(--ink-soft); }
.resource-note { text-align: center; margin-top: 2.2rem; color: var(--ink-soft); font-size: 0.95rem; }
.resource-note a { color: var(--wax); }

@media (max-width: 900px) {
  .resource-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* ---------- article ---------- */

.article { max-width: 680px; margin: 0 auto; }
.article h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 2.6rem 0 0.9rem; }
.article p { color: var(--ink-soft); margin: 0 0 1rem; }
.article ul { margin: 0 0 1.2rem; padding-left: 1.1rem; color: var(--ink-soft); }
.article li { margin-bottom: 0.55rem; padding-left: 0.3rem; }
.article li::marker { color: var(--wax); }
.article strong { color: var(--ink); }

.michelle-note {
  border-left: 2px solid var(--wax);
  background: rgba(255, 255, 255, 0.42);
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
}
.michelle-note .who {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wax);
  display: block;
  margin-bottom: 0.4rem;
}
.michelle-note p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink);
  margin: 0;
}

.article-cta {
  margin-top: 3rem;
  text-align: center;
  border-top: 1px solid var(--hairline);
  padding-top: 2.4rem;
}
.article-cta .btn { margin-top: 1.2rem; }

/* ---------- contact ---------- */

.contact-form { max-width: 560px; margin: 2.5rem auto 0; }
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--keyline);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  min-height: 160px;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea::placeholder { color: #a99f8c; }
.field textarea:focus {
  outline: none;
  border-color: var(--wax);
  box-shadow: 0 0 0 3px rgba(142, 48, 56, 0.14);
}

/* ---------- CTA band ---------- */

.cta-band {
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(231, 221, 200, 0.5) 30%, rgba(231, 221, 200, 0.5) 70%, transparent);
}
.cta-band .hero-cta { justify-content: center; margin-top: 1.8rem; }
.cta-band .hero-note { margin-top: 1.5rem; }
.cta-band .lede { margin-left: auto; margin-right: auto; }

/* ---------- footer nav ---------- */

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-bottom: 1.3rem;
}
.footer-nav a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
.footer-nav a:hover { color: var(--wax); }

/* ---------- waitlist: ink letterpress band (landing page only) ----------
   .waitlist alone stays cream because thanks/thanks-contact/404 share it;
   the dark plate treatment rides on the .waitlist-band modifier. */

.waitlist-band {
  position: relative;
  color: var(--paper);
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 85% 65% at 50% 58%, rgba(247, 242, 232, 0.055), transparent 62%),
    linear-gradient(rgba(0, 0, 0, 0.28), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.28)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* plate frame: a thick-thin double rule pressed into the ink */
.waitlist-band::before,
.waitlist-band::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.waitlist-band::before { inset: 14px; border: 1px solid rgba(247, 242, 232, 0.17); }
.waitlist-band::after { inset: 19px; border: 1px solid rgba(247, 242, 232, 0.06); }

.waitlist-band .section-inner {
  padding-top: clamp(3.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.waitlist-head { text-align: center; }
.waitlist-head .eyebrow { color: var(--wax-light); }
.waitlist-head h2 {
  color: var(--paper);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  margin-bottom: 1rem;
}
.waitlist-head h2 em { font-style: italic; font-weight: 380; color: var(--wax-light); }

.waitlist-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.waitlist-flourish .fl-rule {
  width: 96px; height: 1px;
  background: linear-gradient(to right, rgba(247, 242, 232, 0), rgba(247, 242, 232, 0.34));
}
.waitlist-flourish .fl-rule:last-child {
  background: linear-gradient(to left, rgba(247, 242, 232, 0), rgba(247, 242, 232, 0.34));
}
.waitlist-flourish .fl-gem {
  width: 7px; height: 7px;
  border: 1px solid rgba(247, 242, 232, 0.5);
  transform: rotate(45deg);
}

/* the card is cream stock: give it back its ink text (the band sets cream) */
.waitlist-band .env-card { color: var(--ink); }

/* on the dark plate the envelope and card need real shadows to sit anchored */
.waitlist-band .env-back {
  box-shadow:
    inset 0 8px 18px rgba(38, 49, 58, 0.10),
    0 24px 50px rgba(8, 12, 16, 0.55),
    0 4px 14px rgba(8, 12, 16, 0.4);
}
.waitlist-band .env-card { box-shadow: 0 18px 36px rgba(8, 12, 16, 0.45); }

/* ---------- waitlist envelope animation (animation-handoff spec) ----------
   CSS describes the FINISHED state (card placed on top, flap open, seal halves
   fallen, fields visible) so the form works with no JS and under reduced motion.
   main.js winds everything back to sealed and runs the timeline. */

.env-stage {
  position: relative;
  width: 460px;
  max-width: 100%;
  height: 690px; /* envelope + the full flight corridor: the card's rise peak stays inside this box so it never crosses the headline above */
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
}
/* the demo-canvas geometry reads small on a full page; zoom scales it up losslessly,
   fonts included, without touching the animation's pixel math */
@media (min-width: 641px) {
  .env-stage { zoom: 1.15; }
}
.waitlist .section-inner { padding-top: clamp(2.5rem, 5vw, 4rem); }
.env { position: relative; width: 420px; height: 344px; }

.env-back {
  position: absolute; inset: 0;
  background: var(--paper-deep);
  border: 1px solid var(--keyline);
  box-shadow: inset 0 8px 18px rgba(38, 49, 58, 0.10);
  z-index: 0;
}

.env-front { position: absolute; inset: 0; z-index: 3; }
.env-front-l { background: linear-gradient(120deg, #efe8d8, #e6dcc6); clip-path: polygon(0 0, 50% 50%, 0 100%); }
.env-front-r { background: linear-gradient(240deg, #efe8d8, #e3d9c1); clip-path: polygon(100% 0, 50% 50%, 100% 100%); }
.env-front-b { background: linear-gradient(#e6dcc6, #eee6d4); clip-path: polygon(0 100%, 100% 100%, 50% 50%); }

.env-seams {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), rgba(38, 49, 58, 0.13) 50%, transparent calc(50% + 0.6px)) left bottom / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 0.6px), rgba(38, 49, 58, 0.13) 50%, transparent calc(50% + 0.6px)) right bottom / 50% 100% no-repeat;
}

/* flap: finished = peeled open (scaleY(-1)), lining showing, behind the card */
.env-flap {
  position: absolute; top: 0; left: 0;
  width: 420px; height: 172px;
  transform-origin: center top;
  transform: scaleY(-1);
  z-index: 1;
}
.env-flap-paper {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(#e9e0cc, #ded2b8);
  border-left: 1px solid var(--keyline);
  border-right: 1px solid var(--keyline);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env-flap-liner { position: absolute; inset: 0; opacity: 1; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env-liner-fill { position: absolute; inset: 0; background: var(--env-lining); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 240, 214, 0.5) 50%, rgba(255, 255, 255, 0) 60%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: 0;
  transform: translateX(-60%);
}
@keyframes iw-shimmer {
  0% { opacity: 0; transform: translateX(-70%); }
  50% { opacity: 0.8; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(70%); }
}

/* seal halves: finished = cracked apart, fallen to the bottom edge, lying flat */
.env-seal { position: absolute; width: 30px; height: 60px; overflow: hidden; z-index: 6; }
.env-seal svg { display: block; width: 60px; height: 60px; }
.env-seal-l { left: 180px; top: 142px; filter: drop-shadow(-2px 3px 6px rgba(111, 34, 41, 0.32)); transform: translate(-40px, 158px) rotate(-22deg) scale(0.94, 0.5); }
.env-seal-r { left: 210px; top: 142px; filter: drop-shadow(2px 3px 6px rgba(111, 34, 41, 0.32)); transform: translate(40px, 158px) rotate(22deg) scale(0.94, 0.5); }
.env-seal-r svg { margin-left: -30px; }

/* the card: finished = placed on top, offset down-right so the envelope peeks out */
.env-card {
  position: absolute;
  left: 14px; top: 9px;
  width: 392px; height: 326px;
  padding: 22px 26px;
  overflow: hidden;
  text-align: center;
  background: #fbf7ee;
  border: 1px solid #d8ccb2;
  transform: translate(26px, 23px);
  z-index: 7;
  box-shadow: 0 16px 30px rgba(38, 49, 58, 0.18);
}
.env-card-keyline { position: absolute; inset: 8px; border: 1px solid #e3d9c2; pointer-events: none; }
.env-card-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}
.env-card .env-field, .env-card form { position: relative; }

/* compact card typography (the card must fit inside the envelope) */
.env-card .eyebrow { font-size: 0.58rem; margin-bottom: 0.4rem; line-height: 1.3; }
.env-card h2 { font-size: 1.5rem; line-height: 1.05; margin-bottom: 0.4rem; }
.env-lede { font-size: 0.76rem; line-height: 1.45; color: var(--ink-soft); margin: 0 auto 0.9rem; max-width: 30em; }
.env-lede strong { color: var(--wax); }
.env-was { text-decoration: line-through; opacity: 0.6; }
.env-card .field { margin-bottom: 0.55rem; }
.env-card .field label { font-size: 0.54rem; margin-bottom: 0.22rem; line-height: 1.2; }
.env-card .field input {
  height: 34px;
  padding: 0 0.7rem;
  font-size: 0.8rem;
  background: #f4eede;
  border-radius: 3px;
}
.env-card .field-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
.env-card .field-row .field { flex: 1 1 140px; margin-bottom: 0; }
.env-card .btn { margin-top: 0; padding: 0.72rem; font-size: 0.78rem; }
.env-card .form-fine { font-size: 0.6rem; margin-top: 0.5rem; line-height: 1.3; }

@media (max-width: 640px) {
  .env-stage { width: 300px; height: 620px; }
  .env { width: 300px; height: 380px; }
  .env-flap { width: 300px; height: 150px; }
  .env-card {
    left: 10px; top: 18px;
    width: 280px; height: 356px;
    padding: 16px 18px;
    transform: translate(0, 28px);
  }
  .env-seal-l { left: 120px; top: 120px; transform: translate(-30px, 200px) rotate(-22deg) scale(0.94, 0.5); }
  .env-seal-r { left: 150px; top: 120px; transform: translate(30px, 200px) rotate(22deg) scale(0.94, 0.5); }
}

/* let the envelope grow into wider phones (steps sized to clear the section's side padding) */
@media (min-width: 380px) and (max-width: 640px) {
  .env-stage { zoom: 1.08; }
}
@media (min-width: 412px) and (max-width: 640px) {
  .env-stage { zoom: 1.15; }
}
@media (min-width: 430px) and (max-width: 640px) {
  .env-stage { zoom: 1.25; }
}