@font-face {
  font-family: "My Handwriting";
  src: url("assets/fonts/MyHandwriting-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ivory: #F5F1E8;
  --espresso: #5A4237;
  --espresso-deep: #46332B; /* espresso, a shade deeper, for small words on rose */
  --olive: #656E42;
  --rose: #CFA6A0;
  --champagne: #D9C8B2;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Cormorant Garamond", Garamond, "EB Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --hand: "My Handwriting", "Cormorant Garamond", cursive;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--espresso);
  font: 400 1.125rem/1.4 var(--serif);
}
::selection { background: var(--rose); color: var(--espresso-deep); }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
em { font-style: italic; color: var(--olive); }

.page {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2.5rem;
}

/* hello: photo, greeting, name, a cup of coffee */
.top { display: flex; align-items: center; gap: 0.875rem; }
.stamp {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid var(--champagne);
  background: var(--champagne);
}
.who { flex: 1; min-width: 0; }
.greet {
  margin: 0;
  font-size: 1.875rem;
  line-height: 1.02;
}
.who-name {
  margin: 0.375rem 0 0;
  font: 500 0.625rem/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.mug {
  flex: none;
  width: 2.25rem;
  align-self: flex-start;
  fill: none;
  stroke: var(--espresso);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the big line */
.headline {
  margin: 1.125rem 0 0;
  font-weight: 400;
  font-size: clamp(2.75rem, 14vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.intro { margin: 0.625rem 0 0; max-width: 22rem; font-size: 1.1875rem; line-height: 1.35; }

/* the free checklist on a soft rose ground */
.feature {
  margin-top: 1rem;
  padding: 1.25rem 1.25rem 1.375rem;
  background: var(--rose);
  color: var(--espresso-deep);
}
.feature em { color: inherit; }
.pilltag {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  background: var(--ivory);
  font: 500 0.625rem/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.feature h2 {
  margin: 0;
  font-weight: 500;
  font-size: 1.9375rem;
  line-height: 1.02;
  text-wrap: balance;
}
.sub { margin: 0.375rem 0 1rem; font-size: 1.1875rem; line-height: 1.3; }
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  background: var(--espresso);
  color: var(--ivory);
  font: 500 0.75rem/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.cta:hover { background: var(--espresso-deep); }
.cta:active { transform: scale(0.98); }

/* giveaway and waitlist, side by side */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-top: 0.625rem;
}
.tile {
  display: flex;
  flex-direction: column;
  min-height: 9rem;
  padding: 0.875rem 0.875rem 0.75rem;
  text-decoration: none;
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease);
}
.tile:active { transform: scale(0.98); }
.tile-give { border: 1px solid var(--champagne); }
.tile-give:hover { background: rgba(217, 200, 178, 0.25); }
.tile-wait { background: var(--olive); color: var(--ivory); }
.tile-wait em { color: inherit; }
.tile-big { font-size: 2.25rem; line-height: 1; font-variant-numeric: lining-nums; }
.tile-give .tile-big { font-style: italic; color: var(--olive); }
.tile-title { margin-top: 0.375rem; font-size: 1.25rem; line-height: 1.1; flex: 1; }
.tile-go {
  margin-top: 0.75rem;
  font: 500 0.625rem/1.3 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.when { display: block; margin-top: 0.25rem; opacity: 0.85; }

/* the guide, on espresso */
.guide {
  display: block;
  margin-top: 0.625rem;
  padding: 1.25rem 1.25rem 1.25rem;
  background: var(--espresso);
  color: var(--ivory);
  text-decoration: none;
}
.guide em { color: var(--rose); } /* rose only in big type, where it reads easily */
.guide-tag {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  background: var(--olive);
  font: 500 0.625rem/1.2 var(--sans);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.guide-title {
  display: block;
  margin-top: 0.75rem;
  font-size: 1.75rem;
  line-height: 1.04;
  text-wrap: balance;
}
.guide-buy { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.guide-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  background: var(--rose);
  color: var(--espresso-deep);
  font: 500 0.75rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.guide:hover .guide-btn { background: #d8b3ad; }
.guide:active .guide-btn { transform: scale(0.98); }
.guide-price { font-size: 2.25rem; line-height: 1; color: var(--rose); font-variant-numeric: lining-nums; }

/* the margin audit, quiet and square under the guide */
.audit-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.625rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--champagne);
  text-decoration: none;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.audit-link:hover { background: rgba(217, 200, 178, 0.25); }
.audit-link:active { transform: scale(0.98); }
.audit-text { flex: 1; min-width: 0; }
.audit-tag {
  display: block;
  font: 500 0.625rem/1.3 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.audit-title { display: block; margin-top: 0.375rem; font-size: 1.625rem; line-height: 1.05; }
.audit-sub { display: block; margin-top: 0.25rem; font-size: 1.0625rem; line-height: 1.3; }
.arrow {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: var(--olive);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--ease);
}
.audit-link:hover .arrow { transform: translateX(4px); }

/* sign-off */
.end { margin-top: 2.25rem; text-align: center; }
.sig { margin: 0; font: 2.5rem/1 var(--hand); }
.social { display: flex; justify-content: center; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.social svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--espresso); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.social .dot { fill: var(--espresso); }

/* the greeting settles, the coffee steams a few breaths, then the headline arrives word by word */
@media (prefers-reduced-motion: no-preference) {
  .js .greet { animation: fade 0.9s var(--ease) both; }
  .js .steam { animation: steam 3.2s var(--ease) 4 both; }
  .js .s2 { animation-delay: 0.6s; }
  .js .s3 { animation-delay: 1.2s; }
  .js .headline .w { display: inline-block; animation: word 1.1s var(--ease) both 0.25s; }
  .js .headline .w:nth-child(2) { animation-delay: 0.43s; }
  .js .headline .w:nth-child(3) { animation-delay: 0.67s; }
  .js .intro, .js .feature, .js .more { animation: fade 0.9s var(--ease) both 0.75s; }
}
@keyframes word { from { opacity: 0; filter: blur(4px); } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes steam {
  0% { opacity: 0; transform: translateY(4px); }
  40% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-5px); }
}

@media (max-width: 359px) {
  .top { gap: 0.75rem; }
  .stamp { width: 4.5rem; height: 4.5rem; }
  .greet { font-size: 1.625rem; }
  .who-name { letter-spacing: 0.22em; }
}

@media (min-width: 768px) {
  .page { padding-top: 3.5rem; max-width: 36rem; }
  .stamp { width: 6.5rem; height: 6.5rem; }
  .greet { font-size: 2.375rem; }
  .headline { font-size: 5rem; }
  .tile { min-height: 11rem; padding: 1.125rem 1.125rem 1rem; }
  .guide { padding: 1.5rem; }
}