@import url('assets/fonts/fonts.css');

:root {
  --dawn: #F4F0F4;
  --dawn-deep: #E9E2EA;
  --ink: #26202E;
  --ink-soft: #5A5262;
  --ink-mute: #8A8290;
  --lamp: #E38B2E;
  --lamp-hi: #F2A64F;
  --ember: #B5621C;
  --night: #2C2640;
  --night-deep: #1F1A2E;
  --sage: #7E9B84;
  --sage-deep: #4F6B56;
  --sage-bg: #E8EFE9;
  --marker: #FFE38A;
  --rose: #C96C6C;
  --paper: #FFFFFF;
  --line: rgba(38,32,46,0.14);

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Figtree', system-ui, -apple-system, sans-serif;
  --hand: 'Caveat', cursive;

  --w: 1120px;
  --gutter: 16px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--dawn);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72;
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
}
h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: 1.35rem; font-weight: 550; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--w), 100% - 2 * var(--gutter)); margin-inline: auto; }
.hand { font-family: var(--hand); font-size: 1.45em; color: var(--ember); line-height: 1.1; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: 600 1rem var(--sans);
  padding: 0.85em 1.35em;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  transition: background-color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-lamp { background: var(--lamp); color: var(--ink); }
.btn-lamp:hover { background: var(--lamp-hi); }
.btn-ink { background: var(--ink); color: var(--dawn); }
.btn-ink:hover { background: #3a3244; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: rgba(38,32,46,0.06); }
.btn-sage { background: var(--sage-deep); color: #fff; }
.btn-sage:hover { background: #5f7d66; }
.btn .price { font-weight: 500; opacity: 0.85; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244,240,244,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.wordmark { font-family: var(--serif); font-size: 1.35rem; text-decoration: none; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.wordmark em { font-style: italic; font-weight: 300; }
.nav-links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: 0.95rem; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }
.nav .btn { padding: 0.65em 1.1em; font-size: 0.92rem; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* Hero */
.hero { padding: clamp(2.5rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { max-width: 12ch; }
.hero .mark {
  background: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .mark { background-size: 0% 100%; animation: draw 900ms cubic-bezier(.2,.7,.2,1) 500ms forwards; }
}
@keyframes draw { to { background-size: 100% 100%; } }
.hero .sub { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 44ch; margin: 1.4rem 0 1.8rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.hero .fine { font-size: 0.9rem; color: var(--ink-mute); margin-top: 1rem; }
.cover-wrap { position: relative; justify-self: center; width: min(100%, 360px); }
.cover-wrap img {
  border-radius: 6px;
  transform: rotate(2.5deg);
  box-shadow: 0 30px 60px -20px rgba(44,38,64,0.45), 0 10px 20px -10px rgba(44,38,64,0.3);
}
.cover-wrap .note {
  position: absolute; right: -8px; bottom: -22px;
  font-family: var(--hand); font-size: 1.5rem; color: var(--ember);
  transform: rotate(-4deg);
  background: var(--dawn); padding: 0.1em 0.4em; border-radius: 4px;
}
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .cover-wrap { width: min(70%, 300px); margin-top: 1rem; }
}

/* 2am section: the one bold moment */
.night {
  background: var(--night);
  color: var(--dawn);
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 7rem) 0;
}
.night::before {
  content: '';
  position: absolute;
  width: 70vmax; height: 70vmax;
  right: -30vmax; top: -20vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,139,46,0.45) 0%, rgba(227,139,46,0.14) 40%, rgba(44,38,64,0) 70%);
  pointer-events: none;
}
.night .wrap { position: relative; display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.night h2 { color: var(--dawn); }
.night .lead { color: rgba(244,240,244,0.82); font-size: 1.1rem; max-width: 40ch; margin-top: 1rem; }
.night .stat { font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: var(--lamp); margin: 1.5rem 0 0.2rem; font-variation-settings: 'SOFT' 100, 'opsz' 96; }
.night .stat-src { font-size: 0.85rem; color: rgba(244,240,244,0.55); }
.night .stat-src a { color: inherit; }
.thoughts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.thoughts li {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; align-items: baseline;
  padding: 0.9rem 1.1rem;
  background: rgba(244,240,244,0.06);
  border: 1px solid rgba(244,240,244,0.1);
  border-radius: 14px 14px 14px 4px;
  font-size: 1.05rem;
}
.thoughts time { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 300; color: rgba(244,240,244,0.6); font-size: 0.95rem; }
.thoughts li:nth-child(odd) { margin-right: 2rem; }
.thoughts li:nth-child(even) { margin-left: 2rem; }
.thoughts li.reply {
  background: var(--lamp); color: var(--ink); border-color: transparent;
  border-radius: 14px 14px 4px 14px; margin-left: 3rem; margin-right: 0;
}
.thoughts li.reply time { color: rgba(38,32,46,0.6); }
@media (max-width: 860px) {
  .night .wrap { grid-template-columns: 1fr; }
  .thoughts li:nth-child(odd), .thoughts li:nth-child(even) { margin: 0; }
  .thoughts li.reply { margin-left: 1.5rem; }
}

/* Sections */
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section-head { max-width: 60ch; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; margin-top: 1rem; }

/* Contents (a real sequence, so it is numbered) */
.toc { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.toc li {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: baseline;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.toc .n { font-family: var(--serif); color: var(--ember); font-size: 1.3rem; }
.toc .t { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.toc .d { color: var(--ink-soft); font-size: 0.98rem; margin: 0.2rem 0 0; }
.toc .pg { font-variant-numeric: tabular-nums; color: var(--ink-mute); font-size: 0.95rem; white-space: nowrap; }
.toc li.partner { background: linear-gradient(90deg, var(--sage-bg), transparent 70%); margin: 0 -0.75rem; padding-inline: 0.75rem; border-radius: 6px; }
.toc li.partner .n { color: var(--sage-deep); }
@media (max-width: 600px) { .toc li { grid-template-columns: 2.2rem 1fr; } .toc .pg { grid-column: 2; } }

/* Partner */
.partner { background: var(--sage-bg); }
.partner .wrap { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.partner h2 { color: var(--sage-deep); max-width: 16ch; }
.partner .lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 46ch; margin-top: 1rem; }
.saynot { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1.5rem 0; }
.saynot > div { background: var(--paper); border-radius: var(--radius); padding: 1rem 1.1rem; font-size: 0.95rem; }
.saynot h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.saynot .say h3 { color: var(--sage-deep); }
.saynot .not h3 { color: #9B3F3F; }
.saynot ul { margin: 0; padding-left: 1.1em; }
.saynot li { margin-bottom: 0.35em; }
.saynot .say li::marker { color: var(--sage-deep); }
.saynot .not li::marker { color: var(--rose); }
.partner-cover { justify-self: center; width: min(100%, 320px); }
.partner-cover img { border-radius: 6px; transform: rotate(-2deg); box-shadow: 0 30px 60px -20px rgba(44,38,64,0.4); }
@media (max-width: 860px) { .partner .wrap { grid-template-columns: 1fr; } .partner-cover { width: min(60%, 260px); } }
@media (max-width: 520px) { .saynot { grid-template-columns: 1fr; } }

/* Look inside */
.spreads {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px);
  gap: 1.25rem; overflow-x: auto; padding: 0.5rem 0 1.5rem;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
}
.spreads figure { margin: 0; scroll-snap-align: start; }
.spreads img { border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(44,38,64,0.4); background: #fff; }
.spreads figcaption { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.6rem; }

/* Why */
.why .wrap { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.portrait {
  aspect-ratio: 4 / 5; border-radius: 160px 160px 12px 12px;
  background: linear-gradient(160deg, var(--dawn-deep), #D9CFDC);
  display: grid; place-items: center; position: relative; overflow: hidden;
  max-width: 340px;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .ph { font-family: var(--hand); font-size: 1.4rem; color: var(--ink-soft); text-align: center; padding: 1rem; }
.why p { font-size: 1.08rem; }
.why .sig { font-family: var(--hand); font-size: 2rem; color: var(--ember); margin-top: 0.5rem; }
@media (max-width: 760px) { .why .wrap { grid-template-columns: 1fr; } .portrait { max-width: 240px; } }

/* Testimonials (hidden until real) */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.quotes blockquote { margin: 0; background: var(--paper); border-radius: var(--radius); padding: 1.4rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; }
.quotes footer { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.9rem; }

/* Pricing */
.pricing { background: var(--paper); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.tier {
  border: 1.5px solid var(--line); border-radius: 16px; padding: 1.6rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.9rem; background: var(--paper);
}
.tier.featured { border-color: var(--ink); background: var(--dawn); position: relative; }
.tier.featured::after {
  content: 'Most complete'; position: absolute; top: -0.8rem; left: 1.4rem;
  background: var(--lamp); color: var(--ink); font-size: 0.8rem; font-weight: 600;
  padding: 0.3em 0.75em; border-radius: 999px;
}
.tier h3 { font-size: 1.5rem; }
.tier .amount { font-family: var(--serif); font-size: 2.6rem; line-height: 1; font-variation-settings: 'SOFT' 100, 'opsz' 96; }
.tier .amount small { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); font-weight: 400; margin-left: 0.4rem; }
.tier ul { margin: 0; padding-left: 1.15em; color: var(--ink-soft); font-size: 0.98rem; flex: 1; }
.tier li { margin-bottom: 0.45em; }
.tier li strong { color: var(--ink); }
.tier .btn { justify-content: center; width: 100%; }
.guarantee { text-align: center; color: var(--ink-soft); margin-top: 2rem; font-size: 0.98rem; max-width: 60ch; margin-inline: auto; }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .tier.featured { order: -1; } }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
.faq details:first-of-type { border-top: 2px solid var(--ink); }
.faq summary {
  cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.25rem; padding: 0.9rem 2.2rem 0.9rem 0;
  position: relative; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-weight: 300; font-size: 1.6rem; color: var(--ember);
}
.faq details[open] summary::after { content: '\2013'; }
.faq details p { color: var(--ink-soft); max-width: 65ch; padding-bottom: 0.6rem; }
.faq .wrap { max-width: 800px; }

/* Email capture */
.freebie { background: var(--night); color: var(--dawn); }
.freebie .wrap { display: grid; grid-template-columns: 6fr 4fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.freebie h2 { color: var(--dawn); }
.freebie .lead { color: rgba(244,240,244,0.8); margin-top: 1rem; max-width: 44ch; }
.freebie form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.freebie input[type=email] {
  flex: 1 1 240px; font: 1rem var(--sans); padding: 0.85em 1.1em; border-radius: 999px;
  border: 2px solid rgba(244,240,244,0.25); background: rgba(244,240,244,0.08); color: var(--dawn);
}
.freebie input::placeholder { color: rgba(244,240,244,0.5); }
.freebie .fine { font-size: 0.85rem; color: rgba(244,240,244,0.55); margin-top: 0.8rem; }
.freebie .msg { margin-top: 0.8rem; font-size: 0.95rem; color: var(--lamp-hi); min-height: 1.4em; }
.checklist-img { justify-self: center; width: min(100%, 300px); }
.checklist-img img { border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
@media (max-width: 860px) { .freebie .wrap { grid-template-columns: 1fr; } .checklist-img { width: min(60%, 240px); } }

/* Footer */
.foot { background: var(--night-deep); color: rgba(244,240,244,0.7); padding: 2.5rem 0 3rem; font-size: 0.9rem; }
.foot .wrap { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; }
.foot .wordmark { color: var(--dawn); }
.foot p { max-width: 70ch; }
.foot nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot a { color: rgba(244,240,244,0.85); }
@media (max-width: 700px) { .foot .wrap { grid-template-columns: 1fr; } }

/* Toast for unconnected checkout in dev */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--ink); color: var(--dawn); padding: 0.9rem 1.2rem; border-radius: 12px;
  font-size: 0.95rem; max-width: min(92vw, 520px); z-index: 50; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4);
}
.toast[hidden] { display: none; }

/* Simple inner pages */
.inner { padding: clamp(3rem, 7vw, 6rem) 0; }
.inner .wrap { max-width: 720px; }
.inner h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1.2rem; }
.inner h2 { font-size: 1.5rem; margin: 2rem 0 0.6rem; }
.inner p, .inner li { color: var(--ink-soft); }

@media (max-width: 420px) { .btn { white-space: normal; text-align: center; } }

/* Region selector */
.region select {
  font: 500 0.9rem var(--sans); color: var(--ink); background: transparent;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 0.45em 2em 0.45em 0.9em;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2326202E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8em center;
}
.nav .region { margin-left: auto; }
@media (max-width: 760px) { .nav .region select { padding-right: 1.8em; font-size: 0.85rem; } }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.pills button {
  font: 500 0.92rem var(--sans); color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 0.5em 1em; cursor: pointer;
}
.pills button[aria-pressed="true"] { background: var(--ink); color: var(--dawn); border-color: var(--ink); }