/* ===========================================================
   Snail Dating — shared styles (self-hosted recreation)
   =========================================================== */

/* ---------- Self-hosted fonts ---------- */
@font-face{ font-family:"EB Garamond"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/eb-garamond-400.woff2") format("woff2"); }
@font-face{ font-family:"EB Garamond"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/eb-garamond-500.woff2") format("woff2"); }
@font-face{ font-family:"EB Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/eb-garamond-600.woff2") format("woff2"); }
@font-face{ font-family:"EB Garamond"; font-style:italic; font-weight:400; font-display:swap; src:url("/fonts/eb-garamond-400i.woff2") format("woff2"); }
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/cormorant-400.woff2") format("woff2"); }
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/cormorant-500.woff2") format("woff2"); }
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/cormorant-600.woff2") format("woff2"); }
@font-face{ font-family:"Cormorant Garamond"; font-style:italic; font-weight:400; font-display:swap; src:url("/fonts/cormorant-400i.woff2") format("woff2"); }
@font-face{ font-family:"Cormorant Garamond"; font-style:italic; font-weight:500; font-display:swap; src:url("/fonts/cormorant-500i.woff2") format("woff2"); }

:root{
  --navy:#2b4a79;
  --navy-deep:#243f68;
  --sage:#c7d2c1;
  --sage-deep:#b7c4af;
  --cream:#f2e7d3;      /* warm tan — How it works / FAQ body */
  --paper:#fffcf5;      /* near-white cream — ritual / letter steps / TOS */
  --ink:#1e2f49;        /* dark navy text on light bg */
  --ink-soft:#41506a;
  --brick:#bf5e58;      /* dusty red accent (rules / underlines) */
  --line:#c9bfa6;       /* hairline on cream */

  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"EB Garamond", Georgia, "Times New Roman", serif;

  --maxw:1180px;
  --slant:30px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:21px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
figure{ margin:0; }
a{ color:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }

/* ---------- Display headings ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; margin:0; line-height:1.08; }
h1{ font-size:clamp(44px,6.4vw,84px); letter-spacing:.3px; }
h2{ font-size:clamp(34px,4.4vw,60px); }

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  position:relative; z-index:30;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:26px 48px;
}
.nav{ display:flex; align-items:center; gap:34px; font-size:21px; }
.nav a{ text-decoration:none; padding-bottom:2px; opacity:.95; white-space:nowrap; }
.nav a:hover{ opacity:1; }
.nav a.active{ border-bottom:1px solid currentColor; }
.brand{ justify-self:center; }
.brand img{ width:62px; height:auto; }
.header-cta{ justify-self:end; }

/* button (pill) */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body); font-size:20px; line-height:1.15;
  padding:16px 30px; border-radius:999px; text-decoration:none;
  border:none; cursor:pointer; text-align:center;
  transition:transform .15s ease, background .2s ease, opacity .2s ease;
}
.pill:hover{ transform:translateY(-1px); }
.pill-sage{ background:var(--sage); color:var(--ink); }
.pill-sage:hover{ background:var(--sage-deep); }
.pill-dark{ background:#0f1726; color:#fff; }
.pill-dark:hover{ background:#1d2a40; }

/* theme: header over navy section */
.theme-navy{ background:var(--navy); }
.theme-navy .site-header{ color:#f6f3ec; }
.theme-navy .nav a{ color:#f6f3ec; }

/* theme: header over cream section */
.theme-cream{ background:var(--cream); }
.theme-cream .site-header{ color:var(--ink); }

/* mobile nav toggle */
.nav-toggle{ display:none; }

/* ===========================================================
   SECTION SLANTS (Squarespace-style angled dividers)
   =========================================================== */
.slant-down{ /* top edge: left high -> right low */
  margin-top:calc(var(--slant) * -1);
  padding-top:calc(var(--slant) + 24px);
  clip-path:polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
  position:relative; z-index:1;
}
.slant-up{ /* top edge: left low -> right high */
  margin-top:calc(var(--slant) * -1);
  padding-top:calc(var(--slant) + 24px);
  clip-path:polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
  position:relative; z-index:1;
}

.bg-navy{ background:var(--navy); color:#f6f3ec; }
.bg-sage{ background:var(--sage); color:var(--ink); }
.bg-cream{ background:var(--cream); color:var(--ink); }
.bg-paper{ background:var(--paper); color:var(--ink); }

/* ===========================================================
   HOME — HERO
   =========================================================== */
.hero{ padding:18px 0 96px; }
.hero .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero h1{ color:#fbf8f1; margin-bottom:30px; }
.hero p{ font-size:23px; margin:0 0 22px; max-width:33ch; color:#eef1ea; }
.hero p.wide{ max-width:none; letter-spacing:.01em; }
.hero .pill{ margin-top:14px; }
.hero-stamp{ justify-self:end; max-width:420px; }
.hero-stamp img{ box-shadow:0 18px 50px rgba(0,0,0,.28); }

/* ===========================================================
   HOME — WHY LETTERS (accordion)
   =========================================================== */
.section{ padding:84px 0 96px; }
.section-title{ text-align:center; margin-bottom:46px; }

.acc{ border-top:1px solid var(--ink); }
.acc details{ border-bottom:1px solid var(--ink); }
.acc summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:30px 4px 28px;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary h3{ font-family:var(--display); font-weight:500; font-size:clamp(28px,3.2vw,40px); }
.acc .mark{ font-family:var(--display); font-size:34px; line-height:1; flex:0 0 auto; margin-top:6px; }
.acc details[open] .mark .plus{ display:none; }
.acc details:not([open]) .mark .minus{ display:none; }
.acc .body{ padding:0 4px 34px; max-width:62ch; font-size:21px; }

/* ===========================================================
   HOME — THE SNAIL RITUAL
   =========================================================== */
.ritual-head{ margin-bottom:30px; }
.ritual-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; align-items:start; }
.ritual-col .topline{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.ritual-col .topline img{ width:64px; height:64px; flex:0 0 auto; }
.ritual-col .num{
  font-family:var(--display); font-weight:500; font-size:clamp(22px,1.9vw,32px);
  line-height:1.05; white-space:nowrap; padding-bottom:6px;
  background-image:linear-gradient(var(--brick),var(--brick));
  background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%;
}
.ritual-card{ border:2px solid var(--sage-deep); padding:24px 24px 28px; }
.ritual-card.navy{ border-color:var(--navy); }
.ritual-card p{ margin:0 0 20px; font-size:18px; line-height:1.5; }
.ritual-card p:last-child{ margin-bottom:0; }

/* ===========================================================
   HOME — DEAR READER marquee + letter
   =========================================================== */
.marquee{ overflow:hidden; padding:34px 0 18px; white-space:nowrap; }
.marquee .track{ display:inline-block; will-change:transform; animation:scrollx 26s linear infinite; }
.marquee span{ font-family:var(--display); font-size:34px; font-style:italic; margin:0 .35em; }
@keyframes scrollx{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee .track{ animation:none; } }

.letter-wrap{ max-width:980px; margin:0 auto; padding:0 40px 40px; }
.letter-wrap .acc{ border-top:1px solid var(--ink); }
.letter-wrap .acc summary h3{ white-space:nowrap; }
.letter-figure{ float:right; width:280px; margin:6px 0 18px 40px; }
.letter-figure img{ box-shadow:0 12px 30px rgba(0,0,0,.18); }
.letter-body{ text-align:left; }
.letter-body::after{ content:""; display:block; clear:both; }
.letter-body p{ margin:0 0 22px; }
.letter-body .sign{ margin-top:30px; }
.letter-rule{ max-width:840px; margin:18px auto 0; border:none; border-top:1px solid var(--ink); }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{ background:var(--navy); color:#f3f0e8; }
.site-footer .wrap{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding-top:46px; padding-bottom:54px;
}
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; flex:1 1 auto; }
.footer-email{ margin-left:auto; font-size:21px; }
.footer-email a{ text-decoration:none; }

/* ===========================================================
   PAGE HEADER (interior pages over navy)
   =========================================================== */
.page-hero{ padding:6px 0 70px; text-align:center; }
.page-hero h1{ color:#fbf8f1; }

/* ===========================================================
   HOW IT WORKS — tabs + sections
   =========================================================== */
.tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:34px; padding:46px 0 8px; font-size:23px; }
.tabs button{
  font-family:var(--display); font-size:25px; background:none; border:none; cursor:pointer;
  color:var(--ink); padding:4px 2px; opacity:.78;
}
.tabs button:hover{ opacity:1; }
.tabs button.active{ opacity:1; border-bottom:1px solid var(--ink); }
.hiw-panel{ display:none; padding:36px 0 80px; }
.hiw-panel.active{ display:block; }
.hiw-block{ max-width:880px; margin:0 auto 64px; text-align:center; }
.hiw-block:last-child{ margin-bottom:0; }
.hiw-block h2{ text-transform:uppercase; letter-spacing:1px; font-size:clamp(30px,3.4vw,46px); margin-bottom:26px; }
.hiw-block p{ margin:0 auto 20px; max-width:70ch; }
.hiw-block ul{ text-align:left; max-width:60ch; margin:0 auto; padding-left:22px; }
.hiw-block li{ margin:0 0 12px; }

/* ===========================================================
   FAQ
   =========================================================== */
.faq{ max-width:780px; margin:0 auto; padding:54px 0 90px; }
.faq-item{ margin-bottom:54px; }
.faq-item h3{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.6vw,31px); margin-bottom:20px; line-height:1.2; }
.faq-item p{ margin:0 0 16px; }
.faq-item a{ color:inherit; }

/* ===========================================================
   INTRO LETTER
   =========================================================== */
.intro-band{ text-align:center; padding:60px 0 70px; }
.intro-band p{ font-size:24px; margin:0 0 26px; }
.intro-steps{ padding:70px 0 96px; }
.intro-step{ display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; margin-bottom:64px; align-items:start; }
.intro-step:last-child{ margin-bottom:0; }
.step-label{ font-family:var(--display); font-size:clamp(40px,5vw,72px); font-weight:500; }
.step-label .u{
  padding-bottom:8px;
  background-image:linear-gradient(var(--brick),var(--brick));
  background-size:100% 3px; background-repeat:no-repeat; background-position:0 100%;
}
.intro-step .content p{ margin:0 0 18px; }
.intro-step .content ul{ margin:6px 0 18px; padding-left:24px; }
.intro-step .content li{ margin:0 0 14px; }
.address{ text-align:center; }
.address p{ margin:0 0 14px; }
.muted{ color:var(--ink-soft); }

/* ===========================================================
   TERMS / PRIVACY
   =========================================================== */
.legal{ max-width:820px; margin:0 auto; padding:30px 0 90px; }
.legal h1{ font-size:clamp(40px,5vw,64px); margin-bottom:40px; color:var(--ink); }
.legal h2{ font-size:clamp(28px,3.2vw,42px); margin:54px 0 22px; }
.legal h3{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.6vw,32px); margin:32px 0 16px; }
.legal p{ margin:0 0 18px; }
.legal ol,.legal ul{ margin:0 0 18px; padding-left:26px; }
.legal li{ margin:0 0 12px; }
.legal .meta p{ margin:0 0 6px; }
.legal .divider{ border:none; border-top:1px solid var(--line); margin:60px 0; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1080px){
  .site-header{ padding:22px 32px; gap:18px; }
  .nav{ gap:24px; font-size:19px; }
  .header-cta .pill{ padding:14px 22px; font-size:18px; }
  .hero .wrap{ grid-template-columns:1.05fr .95fr; gap:36px; }
  .hero p{ font-size:21px; }
  .hero-stamp{ max-width:360px; }
  .ritual-grid{ grid-template-columns:1fr 1fr; gap:34px 40px; }
  .ritual-col .topline img{ width:72px; height:72px; }
  .ritual-col .num{ font-size:clamp(26px,3vw,34px); }
}
@media (max-width:760px){
  body{ font-size:19px; }
  .site-header{ grid-template-columns:auto 1fr auto; padding:16px 20px; gap:14px; }
  .nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:18px; padding:20px 26px; background:var(--navy); display:none; z-index:40;
    box-shadow:0 16px 30px rgba(0,0,0,.18); }
  .theme-cream .nav{ background:var(--cream); }
  .nav.open{ display:flex; }
  .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:none;
    cursor:pointer; padding:6px; grid-column:1; justify-self:start; }
  .nav-toggle span{ width:26px; height:2px; background:currentColor; display:block; }
  .brand{ grid-column:2; justify-self:center; }
  .brand img{ width:54px; }
  .header-cta{ grid-column:3; justify-self:end; }
  .header-cta .pill{ padding:11px 16px; font-size:15px; }
  .wrap{ padding:0 24px; }
  .section{ padding:60px 0 64px; }
  .section-title{ margin-bottom:32px; }
  .hero{ padding:8px 0 64px; }
  .hero .wrap{ grid-template-columns:1fr; gap:30px; }
  .hero p{ max-width:none; }
  .hero-stamp{ justify-self:center; max-width:280px; }
  .ritual-grid{ grid-template-columns:1fr 1fr; gap:30px 26px; }
  .intro-step{ grid-template-columns:1fr; gap:10px; }
  .intro-steps{ padding:54px 0 70px; }
  .step-label{ font-size:clamp(36px,9vw,56px); }
  .letter-figure{ float:none; width:100%; max-width:320px; margin:0 auto 24px; }
  .letter-body{ max-width:none; }
  .page-hero{ padding:0 0 54px; }
  .tabs{ gap:16px 22px; padding:36px 0 4px; }
  .tabs button{ font-size:21px; }
  .hiw-panel{ padding:30px 0 64px; }
  .legal{ padding:20px 0 70px; }
  .site-footer .wrap{ padding-top:38px; padding-bottom:44px; }
}
@media (max-width:560px){
  body{ font-size:18px; }
  .ritual-grid{ grid-template-columns:1fr; gap:30px; }
  .ritual-col{ max-width:430px; margin:0 auto; width:100%; }
  .footer-email{ margin-left:0; flex-basis:100%; }
  .marquee span{ font-size:28px; }
  .hero-stamp{ max-width:240px; }
  .header-cta .pill{ font-size:14px; padding:10px 13px; }
}