/* laurenvitek.com — one stylesheet for both pages. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: "Corinthia";
  src: url("/fonts/corinthia-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Corinthia";
  src: url("/fonts/corinthia-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dmsans-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-display: swap;
}

:root {
  --peach: #fdeee4;        /* page */
  --peach-deep: #f9dfcf;   /* soft wash behind the card */
  --card: #fff8f3;
  --ink: #3d2a22;          /* warm near-black */
  --ink-soft: #6f5448;
  --accent: #c8674c;       /* terracotta, for focus and the button (Martin's pick over the darker #b0553c) */
  --accent-ink: #fffaf6;
  --line: #efd3c3;
  --error: #a33b2b;
  --ok: #3f6b4f;
  --radius: 14px;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Corinthia", "Snell Roundhand", "Apple Chancery", cursive;
  --sig: clamp(3.6rem, 19vw, 8.5rem);  /* 19vw from 390px up (74px there), smaller only on the narrowest phones */  /* the name's size; the tagline's gap follows it */
  --green-pale: #e4eedd;   /* the thank-you box */
  --green-ink: #2f5a3f;    /* its text and border (6.6:1 on the pale green) */
  --gutter: max(clamp(1.75rem, 7vw, 2.5rem), env(safe-area-inset-left), env(safe-area-inset-right)); /* side margin: 28px on phones, up to 40px */
  --section: #f3d3c3;      /* the contact band: a deeper apricot under the hero */
}

html { scroll-behavior: smooth; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, #fff6f0 0%, var(--peach) 55%, var(--peach-deep) 100%);
  background-color: var(--peach);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

main {
  flex: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 12vh, 7rem) var(--gutter) 3rem;
}

/* ---- home: hero ---- */
.home {
  display: block;
  background: linear-gradient(to bottom, #ffffff 50%, var(--section) 50%);
  background-color: #ffffff;
}

.hero {
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem var(--gutter);
  text-align: center;
  background: #ffffff;
}

.signature {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: var(--sig); /* phones +10% (was 4.2rem floor) */
  line-height: 1;
  letter-spacing: 0.005em;
  padding: 0.05em 0.18em;          /* the script's swashes draw outside the letters */
  color: rgba(61, 42, 34, 0.92);   /* was opacity: 0.92, which made iOS Safari crop the k */
}

.hero .soon {
  /* The phone spacing (-0.15rem at the 4.62rem name) is the one that looks right.
     As the name grows, its empty line space under the script grows too, so pull the
     tagline up in step: 0 extra on phones, about 0.7rem (11px) extra at the desktop size.
     Tune the 0.18: bigger pulls it closer on desktop, phones never move. */
  margin-top: calc(-0.15rem - max(0rem, var(--sig) - 4.62rem) * 0.18);
  font-size: clamp(0.72rem, 0.45rem + 1.1vw, 0.96rem);
}

.cta {
  margin-top: 3.2rem;
  padding: 0.85rem 1.9rem;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 22px -12px rgba(160, 70, 45, 0.6);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cta:hover { filter: brightness(1.05); }
.cta:active { transform: translateY(1px); }

.quiet {
  margin-top: 1.4rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-underline-offset: 3px;
}

/* ---- home: contact band ---- */
.contact {
  background: var(--section);
  padding: clamp(3.5rem, 10vh, 6rem) var(--gutter) 2.5rem;
  scroll-margin-top: 0;
}
.contact-inner { max-width: 34rem; margin: 0 auto; }
.contact { padding-bottom: 1.25rem; }

/* ---- the wordmark (privacy, 404) ---- */
.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 380;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: clamp(2.9rem, 11vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-align: center;
}

.soon {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rule {
  width: 3rem;
  height: 1px;
  margin: 2.6rem auto;
  border: 0;
  background: var(--accent);
  opacity: 0.55;
}

/* ---- contact ---- */
.contact h2 {
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-weight: 420;
  font-variation-settings: "SOFT" 100, "opsz" 36;
  font-size: 1.5rem;
  text-align: center;
}
.contact .lede {
  margin: 0 0 1.6rem;
  text-align: center;
  color: var(--ink-soft);
}

form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 5vw, 1.75rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -18px rgba(120, 60, 40, 0.35);
}

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 500;
}

input, textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font: inherit;
  font-size: 1rem; /* 16px: no zoom-on-focus on iOS */
  color: var(--ink);
  background: #fffdfb;
  border: 1px solid var(--line);
  border-radius: 10px;
}
textarea { min-height: 8.5rem; resize: vertical; }

input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* the honeypot: real people never see it */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cf-turnstile { min-height: 65px; }

button {
  justify-self: start;
  padding: 0.8rem 1.6rem;
  font: inherit;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
button:hover { filter: brightness(1.05); }
button:active { transform: translateY(1px); }
button[disabled] { opacity: 0.6; cursor: progress; }
/* Send sits on the deeper apricot, so its shadow is a touch darker than Get in touch's */
.contact button { box-shadow: 0 8px 22px -12px rgba(130, 50, 30, 0.75); }

.status { margin: 0; min-height: 1.6em; font-size: 0.95rem; }
.status.ok { color: var(--ok); }
/* the thank-you after sending: a pale sage box under Send */
.contact .status.ok {
  margin-top: 0.8rem;
  padding: 1.2rem 1.4rem;
  display: grid;
  gap: 0.35rem;
  text-align: center;
  text-wrap: balance;   /* no lone word on the last line */
  color: var(--green-ink);
  background: var(--green-pale);
  border: 1.5px solid var(--green-ink);
  border-radius: var(--radius);
}
.thanks-head {
  font-family: var(--serif);
  font-weight: 420;
  font-variation-settings: "SOFT" 100, "opsz" 36;
  font-size: 1.5rem;
  line-height: 1.3;
}
.thanks-sub { font-size: 1rem; }
.status.err { color: var(--error); }

/* ---- footer: the same on every page, links first, © below ---- */
.site-foot {
  padding: calc(2.5rem + 15px) var(--gutter) 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.site-foot .links { margin: 0; }
.site-foot a { color: inherit; text-underline-offset: 3px; }
.site-foot .sep { margin: 0 0.6em; opacity: 0.6; }
.site-foot .copy { margin: 1rem 0 0; }

/* ---- home: the form sits straight on the apricot band ---- */
.contact form {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.contact input, .contact textarea {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid #ffffff;
}
.contact input::placeholder, .contact textarea::placeholder { color: var(--ink-soft); opacity: 1; } /* 4.9:1 */
.contact input:focus-visible, .contact textarea:focus-visible { background: rgba(255, 255, 255, 0.35); }
.contact .cf-turnstile { min-height: 0; }

/* visible to screen readers only */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- privacy page ---- */
.doc { max-width: 42rem; padding-top: clamp(2.5rem, 8vh, 4.5rem); }
.doc .back { font-size: 0.9rem; color: var(--ink-soft); text-underline-offset: 3px; }
.doc h1 {
  margin: 1.2rem 0 0.2rem;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.1;
}
.doc .updated { margin: 0 0 2rem; color: var(--ink-soft); font-size: 0.9rem; }
.doc h2 {
  margin: 2.2rem 0 0.5rem;
  font-family: var(--serif);
  font-weight: 450;
  font-variation-settings: "SOFT" 100, "opsz" 24;
  font-size: 1.5rem; /* +20% */
}
.doc p, .doc li { color: var(--ink); }
.doc ul { padding-left: 1.2rem; }
.doc li + li { margin-top: 0.35rem; }
.doc a { color: var(--accent); text-underline-offset: 3px; }
.doc .summary {
  padding: 1rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.poem {
  margin: 2.4rem 0 0; /* a full blank line more after the lead-in */
  padding: 1.2rem 1.4rem;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "opsz" 18;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.7;
}
.poem p { margin: 0; }
.poem footer {
  padding: 0.8rem 0 0;
  text-align: left;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.poem footer::before { content: "— "; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}