/* Fonts are self-hosted: loading them from Google's CDN would send every
   visitor's IP to Google, which EU courts have ruled needs consent. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #FCF9ED;
  --card: #FFFDF7;
  --ink: #212020;
  --muted: #5F5D56;
  --green: #536954;
  --green-deep: #435644;
  --green-wash: rgba(83, 105, 84, 0.09);
  --rule: rgba(33, 32, 32, 0.12);
  --error: #9A3B26;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  accent-color: var(--green);
  scrollbar-color: rgba(33, 32, 32, 0.28) var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Without this, any element given display:grid/flex ignores the hidden attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--green);
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(33, 32, 32, 0.35);
}
a:hover { color: var(--green-deep); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 40px, 680px); margin-inline: auto; }

/* ── header ── */
.top { padding: 22px 0; }
.top .wrap { display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.brand span { font: 500 18px/1 var(--serif); }

/* ── type ── */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(44px, 11vw, 84px); line-height: 1.02; letter-spacing: -0.025em; }
h1 em, h2 em { font-style: italic; color: var(--green); }
h2 { font-size: clamp(30px, 6.4vw, 44px); line-height: 1.12; letter-spacing: -0.015em; }
p { max-width: 62ch; text-wrap: pretty; }
.lead { font-size: 19px; color: var(--muted); }
.small { font-size: 14px; color: var(--muted); }

section { padding: clamp(64px, 12vw, 112px) 0; }
section + section { border-top: 1px solid var(--rule); }
section h2 + p { margin-top: 16px; }

/* ── hero ── */
.hero { padding-top: clamp(40px, 10vw, 96px); }
.hero .lead { margin-top: 24px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  font: 600 16px/1 var(--sans); letter-spacing: 0.005em;
  color: var(--paper); background: var(--green);
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(67, 86, 68, 0.55);
  transition: background 0.2s, box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.button:hover { background: var(--green-deep); color: var(--paper); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(67, 86, 68, 0.6); }
.button:active { transform: none; }
.button[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.button.quiet { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.button.quiet:hover { background: var(--green-wash); color: var(--ink); }

/* ── routine steps ── */
.steps { list-style: none; padding: 0; margin-top: 40px; display: grid; gap: 30px; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 6px 14px; }
.steps .n { font: italic 500 32px/1 var(--serif); color: var(--green); grid-row: span 2; }
.steps h3 { font-size: 25px; line-height: 1.25; }
.steps p { color: var(--muted); }
.note { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); }
.note p + p { margin-top: 6px; }

/* ── finder ── */
.finder { margin-top: 36px; display: grid; gap: 30px; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { font: 500 21px/1.35 var(--serif); margin-bottom: 14px; padding: 0; }
.options { display: grid; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 14px 18px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.option:hover { border-color: rgba(83, 105, 84, 0.5); }
.option input { width: 20px; height: 20px; margin: 0; flex: none; }
.option:has(input:checked) { border-color: var(--green); background: var(--green-wash); }
.option:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.option input:focus-visible { outline: none; }
.form-error { color: var(--error); font-size: 15px; }

/* the routine card — the one thing people print, so it gets the one motion moment */
.card {
  margin-top: 44px; padding: clamp(24px, 6vw, 40px);
  background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: 0 18px 40px -24px rgba(33, 32, 32, 0.35);
}
.card.enter { animation: rise 0.7s var(--ease); }
@keyframes rise { from { transform: translateY(14px); box-shadow: 0 4px 10px -8px rgba(33, 32, 32, 0.2); } }
@media (prefers-reduced-motion: reduce) { .card.enter { animation: none; } .button { transition: none; } }

.card h3 { font-size: clamp(28px, 6vw, 36px); line-height: 1.1; }
.card h3:focus { outline: none; }
.card .for { margin-top: 6px; color: var(--muted); }
.times { display: grid; gap: 22px; margin-top: 28px; }
@media (min-width: 600px) { .times { grid-template-columns: 1fr 1fr; gap: 32px; } }
.card h4 { font: 600 13px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.times ol { padding-left: 1.2em; display: grid; gap: 6px; }
.times li::marker { font-family: var(--serif); font-style: italic; color: var(--green); }
.products { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.products ul { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 15.5px; color: var(--muted); }
.products strong { color: var(--ink); font-weight: 600; }
.card .small { margin-top: 22px; }
.card .actions { margin-top: 26px; }

.bridge { margin-top: 28px; font: italic 500 22px/1.4 var(--serif); }
.bridge a { color: var(--green-deep); }

/* ── waitlist ── */
.join { margin-top: 32px; display: grid; gap: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 8px; }
.field .hint { font-weight: 400; color: var(--muted); }
input[type="email"], textarea {
  width: 100%; padding: 14px 16px;
  font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid rgba(33, 32, 32, 0.22); border-radius: 12px;
  transition: border-color 0.2s;
}
input[type="email"]:focus, textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px var(--green-wash); }
input::placeholder, textarea::placeholder { color: #75736C; }
textarea { min-height: 96px; resize: vertical; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { font-weight: 500; min-height: 1.65em; }
.status.ok { color: var(--green-deep); }
.status.bad { color: var(--error); }
.done { margin-top: 32px; padding: 26px 28px; border-radius: 16px; background: var(--green-wash); }
.done h3 { font-size: 26px; }
.done p { margin-top: 8px; }

/* ── footer ── */
footer { padding: 40px 0 56px; border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--muted); }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer p + .row, footer .row + p { margin-top: 14px; }
footer a { color: var(--muted); }

/* ── privacy page ── */
.doc h1 { font-size: clamp(38px, 8vw, 56px); }
.doc h1 + .lead { margin-top: 16px; }
.doc h2 { font-size: 24px; margin-top: 40px; }
.doc p, .doc ul { margin-top: 12px; }
.doc ul { padding-left: 1.2em; max-width: 62ch; }
.doc li + li { margin-top: 6px; }
.doc .updated { margin-top: 40px; }
.todo { margin-top: 24px; padding: 14px 18px; border-radius: 12px; background: #FBEDE7; color: var(--error); font-size: 15px; }

/* Printing gives just the routine card, ready for the bathroom mirror. */
@media print {
  body { background: #fff; }
  .top, .hero, #routine, #towel, footer, .finder, .bridge, .card .actions, #finder > .wrap > h2, #finder > .wrap > p { display: none !important; }
  #finder { padding: 0; border: 0; }
  .card { margin: 0; box-shadow: none; border: 1px solid #999; }
}