/* Heure Lente – site styles. Mobile first.
   Mood: light editorial – warm paper, greige band, near-monochrome; big script
   set against tiny tracked caps; high-contrast serif headings; hairline rules;
   desaturated, grainy photography; lace framing (heirloom handcraft). */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-400-normal.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("/fonts/pinyon-script-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand palette */
  --cream: #F3EDE2;
  --ivory: #FBF8F2;
  --espresso: #3B2A22;
  --espresso-deep: #2E211B;
  --oxblood: #6E1F24;
  --rose: #D4A5A1;
  --cognac: #A0612F;
  --saffron: #C9962E;
  --indigo: #2E2A5C;
  --sand: #CDBFAE;
  --line: #DCCFBE;
  --espresso-soft: #6B5A4E;

  /* light editorial surfaces */
  --paper: #F6F2EB;        /* page */
  --band: #DED7CC;         /* greige band (top bar, buttons) */
  --lace: #FDFBF7;         /* lace card */
  --ink: var(--espresso-deep);
  --ink-soft: #6F6157;     /* 5.6:1 on paper */
  --hair: rgba(46, 33, 27, 0.28);

  /* semantic tokens (also used by /admin) */
  --fg: var(--ink);
  --fg-muted: var(--ink-soft);
  --label-color: var(--ink);
  --rule: var(--hair);
  --link: var(--ink);
  --link-hover: var(--oxblood);
  --btn-bg: var(--band);
  --btn-fg: var(--ink);
  --btn-hover-bg: var(--ink);
  --btn-hover-fg: var(--ivory);
  --error: var(--oxblood);
  --focus: var(--ink);

  --f-wordmark: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --f-display: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --f-italic: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Jost", Futura, "Century Gothic", "Trebuchet MS", Helvetica, Arial, sans-serif;
  --f-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --wide: 72rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Film grain over the whole page – like analogue photographs. */
body:not(.admin)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 1.3 -0.15'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--link);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink); color: var(--ivory);
  padding: 0.5rem 1rem; z-index: 200;
  font-size: 0.875rem;
}
.skip-link:focus { top: 1rem; color: var(--ivory); }

/* ---- shared type -------------------------------------------------------- */

.label {
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--label-color);
  margin-top: 0;
}

.script {
  font-family: var(--f-script);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.small { font-size: 0.8125rem; color: var(--fg-muted); }

/* ---- top bar (greige band) ------------------------------------------------ */

.topbar {
  background: var(--band);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem var(--gutter);
}
.topbar__side {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.topbar__side:last-child { justify-self: end; }
a.topbar__side:hover { color: var(--oxblood); }

.wordmark {
  font-family: var(--f-wordmark);
  font-weight: 400;
  font-size: clamp(1.05rem, 3.6vw, 1.45rem);
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
a.wordmark:hover { color: var(--ink); opacity: 0.75; }

@media (max-width: 30rem) {
  .topbar { grid-template-columns: 1fr; justify-items: center; padding-block: 1.1rem; }
  .topbar__side { display: none; }
}

main { flex: 1; }

/* ---- hero: full-bleed mohair photo with script over it -------------------- */
/* Photo: public/images/hero-mohair(-small).webp – original in design/.
   Dark espresso lettering on the light mohair; a soft paper-coloured wash in
   the centre keeps the script legible over the fibres. */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(82vh, 46rem);
  padding: 5rem var(--gutter);
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(246, 242, 235, 0.55), rgba(246, 242, 235, 0) 75%),
    linear-gradient(180deg, rgba(46, 33, 27, 0.06), rgba(46, 33, 27, 0) 30%, rgba(46, 33, 27, 0.10)),
    url("/images/hero-mohair-small.webp") center / cover no-repeat,
    #D9CDB9;
}
@media (min-width: 48rem) {
  .hero {
    background:
      radial-gradient(ellipse 45% 45% at 50% 50%, rgba(246, 242, 235, 0.55), rgba(246, 242, 235, 0) 75%),
      linear-gradient(180deg, rgba(46, 33, 27, 0.06), rgba(46, 33, 27, 0) 30%, rgba(46, 33, 27, 0.10)),
      url("/images/hero-mohair.webp") center / cover no-repeat,
      #D9CDB9;
  }
}
.hero__title { margin: 0; font-weight: 400; }
.hero__title .script {
  display: block;
  font-size: clamp(4.25rem, 17vw, 10.5rem);
  line-height: 1;
  text-shadow: 0 0 30px rgba(246, 242, 235, 0.6);
}
.hero__title .caps {
  display: block;
  margin-top: clamp(0.75rem, 2.5vw, 1.5rem);
  font-family: var(--f-body);
  font-size: clamp(0.75rem, 2.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  margin-right: -0.34em;
  text-transform: uppercase;
}

/* ---- editorial split: lace card + waitlist ------------------------------- */

.intro {
  display: grid;
  gap: clamp(3.5rem, 8vw, 6rem);
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(4rem, 12vw, 8rem) var(--gutter);
  align-items: center;
}
@media (min-width: 56rem) {
  .intro { grid-template-columns: 5fr 6fr; }
}

/* Lace photo (transparent background) lying on the paper, with a soft shadow
   that follows the lace outline. */
.lace-photo {
  margin: 0 auto;
  width: min(100%, 25rem);
}
.lace-photo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 22px rgba(46, 33, 27, 0.16)) drop-shadow(0 2px 3px rgba(46, 33, 27, 0.10));
}

/* ---- waitlist form -------------------------------------------------------- */

.signup {
  max-width: 30rem;
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid var(--rule);   /* GAEA-style hairline above the text block */
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 56rem) {
  .signup { margin: 0; justify-self: end; }
}

.signup h2,
.done h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0.9rem 0 2.25rem;
}

.field { margin-bottom: 1.5rem; }
.field label,
.field .field-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.35rem;
}

input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.75rem 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
input[type="email"]::placeholder { color: var(--fg-muted); opacity: 0.7; }
input[type="email"]:hover { border-bottom-color: var(--fg-muted); }
input[type="email"]:focus { outline: none; border-bottom-color: var(--fg); }
input[type="email"]:focus-visible { outline: 1px solid var(--focus); outline-offset: 6px; }
input[aria-invalid="true"] { border-bottom-color: var(--error); }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 1.75rem 0;
}
/* hairline checkbox: thin square, ink fill with a light tick when checked */
.consent input {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0.2rem 0 0;
  border: 1px solid var(--fg-muted);
  border-radius: 0;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.consent input::before {
  content: "";
  width: 0.55rem;
  height: 0.3rem;
  border-left: 1.5px solid var(--ivory);
  border-bottom: 1.5px solid var(--ivory);
  transform: translateY(-0.08rem) rotate(-45deg);
  opacity: 0;
}
.consent input:checked { background: var(--ink); border-color: var(--ink); }
.consent input:checked::before { opacity: 1; }
.consent input:focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; }

.turnstile-slot { margin: 0 0 1.5rem; }

/* small greige button, as in the references ("ADD TO BASKET") */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 0;
  padding: 1rem 2.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.button:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); }
.button[disabled] { opacity: 0.7; cursor: progress; }
.button--ghost { background: transparent; color: var(--fg); border-color: var(--rule); }
.button--ghost:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* loading indicator: three slow dots – a stitch in progress */
.dots { display: none; gap: 0.3rem; }
.dots i {
  width: 0.28rem; height: 0.28rem; border-radius: 50%;
  background: currentColor; opacity: 0.3;
  animation: stitch 1.4s infinite ease-in-out;
}
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
[aria-busy="true"] .dots { display: inline-flex; }
@keyframes stitch { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .dots i { animation: none; opacity: 0.8; }
  * { transition: none !important; }
}

.form-status {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  min-height: 1.5em;
  color: var(--fg-muted);
}
.form-status--error { color: var(--error); }

.done { padding-top: 0.25rem; }
.done p { color: var(--fg-muted); margin: 0 0 1rem; }

/* Visible marker for text that still needs to be provided / legally reviewed. */
.placeholder {
  color: var(--cognac);
  outline: 1px dashed var(--cognac);
  outline-offset: 1px;
  padding: 0 0.25em;
  font-style: normal;
}

/* ---- optional triptych (GAEA-style collection row) ----------------------- */

.triptych {
  display: grid;
  gap: 2.5rem 1.5rem;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 10vw, 7rem);
}
@media (min-width: 48rem) { .triptych { grid-template-columns: repeat(3, 1fr); } }
.triptych figure { margin: 0; }
.triptych img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(0.3); }
.triptych figcaption {
  margin-top: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---- message pages (confirmed, unsubscribed, errors) ------------------- */

.message {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(4.5rem, 14vh, 8rem) var(--gutter) clamp(4rem, 10vh, 6rem);
  text-align: center;
}
.message h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 3.25rem);
  line-height: 1.1;
  margin: 1rem 0 1.5rem;
}
.message h1.script { font-family: var(--f-script); font-size: clamp(4.5rem, 16vw, 7rem); line-height: 1; margin: 0.5rem 0 1.75rem; }
.message p { color: var(--fg-muted); margin: 0 0 1rem; font-size: 0.9375rem; }
.message .actions { margin-top: 2.75rem; }

/* ---- legal pages ------------------------------------------------------- */

.legal {
  max-width: 42rem;
  width: 100%;
  margin: 0 auto;
  padding: clamp(3.5rem, 10vh, 5.5rem) var(--gutter) clamp(4rem, 10vh, 6rem);
}
.legal h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  line-height: 1.1;
  text-align: center;
  margin: 0 0 3rem;
}
.legal h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.legal h3 {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 1.75rem 0 0.5rem;
}
.legal p, .legal li, .legal dd { font-size: 0.9375rem; }
.legal dl { display: grid; grid-template-columns: 1fr; gap: 0.25rem 1.5rem; }
.legal dt {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 0.9rem;
}
.legal dd { margin: 0; }
.legal ul,
.legal ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal ol li::marker { font-size: 0.8125rem; color: var(--fg-muted); }
.legal li { margin-bottom: 0.4rem; }
.legal__date { margin-top: 3rem; font-size: 0.8125rem !important; color: var(--fg-muted); }
.legal code { font-size: 0.85em; }
@media (min-width: 40rem) {
  .legal dl { grid-template-columns: 15rem 1fr; }
  .legal dt { margin-top: 0.3rem; }
}

.todo-note {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--cognac);
  background: var(--lace);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
  margin: 0 0 2rem;
}

/* ---- footer (editorial columns, as in "the act") -------------------------- */

.site-footer {
  max-width: var(--wide);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 2.25rem;
}
.site-footer__cols p { margin: 0 0 0.75rem; }
.site-footer__cols a,
.site-footer__cols span {
  display: block;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  text-decoration: none;
  margin-bottom: 0.2rem;
}
.site-footer__cols a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__tagline {
  margin: 3rem 0 0;
  text-align: center;
  font-family: var(--f-script);
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--fg-muted);
}