/* Anamoria — shared site styles
   v2.0 · 2026-06-24 · restyle to the pilot-site art direction
   Used by anamoria-pilot-site.html, anamoria-our-purpose.html, anamoria-privacy.html
   Copy is locked; this file changes presentation only. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Space+Grotesk:wght@300;400;500&display=swap');

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

:root {
  /* Surfaces */
  --paper:          #F5F0E8;  /* page ground */
  --quiet-surface:  #ECE6DC;  /* founder section bg ONLY (one use on the site) */

  /* Ink */
  --ink:            #2C2A28;  /* structural marks, CTA fill on hover */
  --text-body:      #4F4A42;  /* long-form body copy */

  /* Sage — the brand anchor */
  --sage:           #708A81;  /* logotype, numerals, underlines, marks */
  --sage-deep:      #5E7468;  /* hover / stronger sage */
  --sage-pale:      #AEC0B7;  /* whisper: dividers, input borders, footnote rules */

  /* Spacing — whitespace as material */
  --space-section:  clamp(4rem, 8vw, 12rem);

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { background: var(--paper); scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--text-body);
  background: var(--paper);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─────────────────────────────────────────────
   Shared inner frames (the measure)
   ───────────────────────────────────────────── */
.frame      { max-width: 40rem;  margin: 0 auto; padding: 0 1.5rem; }
.frame-wide { max-width: 64rem;  margin: 0 auto; padding: 0 1.5rem; }
.frame-quiet{ max-width: 50ch;   margin: 0 auto; padding: 0 1.5rem; }

/* ─────────────────────────────────────────────
   Header (logo left + minimal nav). Logotype = the
   strongest application of sage on the page.
   ───────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--sage-pale) 55%, transparent);
}
.header-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.95rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.brand-lockup { display: flex; align-items: flex-start; gap: 0.7rem; text-decoration: none; color: inherit; }
.brand-lockup svg { width: 40px; height: auto; display: block; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: 0.18rem; margin-top: 0.62rem; }  /* nudge wordmark down so it sits between the butterfly wings, not at the head */
.wordmark {
  font-family: var(--serif);   /* the logotype lives in the serif */
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  line-height: 1;
  padding-right: 0.05em;        /* compensate trailing tracking */
}
.tagline {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-body);
  line-height: 1;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-left: auto; align-items: center; }
.site-nav a {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-body);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease, color 0.4s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--ink); border-bottom-color: var(--sage); }

/* ─────────────────────────────────────────────
   Typographic primitives
   ───────────────────────────────────────────── */
main { display: block; }

.chap-num {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--sage);
  margin-bottom: 1rem;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sage);
  margin-bottom: 1.5rem;
}

.lead {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--text-body);
  margin-bottom: 1.25rem;
  max-width: 38rem;
}

p {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 1.15rem;
  max-width: 64ch;
}
p:last-child { margin-bottom: 0; }

.meta {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text-body) 78%, var(--paper));
  margin-bottom: 0;
}

/* CTA — border-only ink, fills ink on hover, text lifts to white */
.cta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 0.95rem 2rem;
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease;
}
.cta:hover,
.cta:focus-visible { background: var(--ink); color: #FFFFFF; }

/* ─────────────────────────────────────────────
   Hero (Treatment A — hero variant)
   ───────────────────────────────────────────── */
.hero { margin-bottom: var(--space-section); }
.hero-media {
  width: 100%;
  height: 72vh;
  min-height: 420px;
  overflow: hidden;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-body {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem 0;
  text-align: left;
}
.hero-rule {
  width: 60px;
  height: 1px;
  background: var(--sage);
  border: 0;
  margin: 2rem auto 2rem 0;   /* sits left under the column; centered feel within measure */
}

/* ─────────────────────────────────────────────
   Chapters + treatments
   ───────────────────────────────────────────── */
.chapter { margin-bottom: var(--space-section); }
.chapter:last-of-type { margin-bottom: var(--space-section); }

/* Treatment A — The Anchor */
.t-anchor .t-media {
  width: 100%;
  height: 80vh;
  min-height: 440px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.t-anchor .t-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-anchor .t-body { max-width: 40rem; margin: 0 auto; padding: 0 1.5rem; }

/* Treatment B — The Spread */
.t-spread .t-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 4rem;
  align-items: start;
}
.t-spread .t-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.t-spread .caption {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--sage-pale) 88%, var(--text-body));
  margin-top: 0.75rem;
}

/* Treatment C — The Quiet Page */
.t-quiet {
  max-width: 50ch;
  margin: 0 auto;
  padding: 0 1.5rem;
  line-height: 1.8;
}
.t-quiet p { line-height: 1.8; }
.quiet-rule {
  width: 30%;
  height: 1px;
  background: var(--sage-pale);
  border: 0;
  margin: 3rem 0 0;   /* left-aligned, the only mark on the page */
}

/* Treatment D — The Founder Moment (the one coloured section) */
.t-founder {
  background: var(--quiet-surface);
  padding: var(--space-section) 0;
}
.t-founder .t-inner { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
.t-founder .founder-media {
  float: right;
  width: 35%;
  margin: 0.4rem 0 1.5rem 2.5rem;
  shape-outside: margin-box;
}
.t-founder .founder-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.t-founder .founder-voice,
.t-founder .founder-voice p {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: none;
}
.t-founder .founder-voice p { margin-bottom: 1.1rem; }
.t-founder .signature {
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--sage);
  margin-top: 1.5rem;
}

/* ─────────────────────────────────────────────
   Editorial list items (no bullets / boxes / icons / bold sans)
   ───────────────────────────────────────────── */
.item { margin: 0 0 2rem; max-width: 40rem; }
.item:last-child { margin-bottom: 0; }
.item .h {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.item p { display: block; margin: 0; max-width: 40rem; }

.privlink {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--sage);
  text-decoration: none;
  border-bottom: 1px solid var(--sage-pale);
  padding-bottom: 1px;
  transition: border-color 0.4s ease;
}
.privlink:hover { border-bottom-color: var(--sage); }

/* ─────────────────────────────────────────────
   FAQ — quiet type list (Treatment C variant)
   ───────────────────────────────────────────── */
.faq { margin-bottom: 2.25rem; max-width: 50ch; }
.faq .q {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

/* ─────────────────────────────────────────────
   Application form (kept wired; restyled)
   ───────────────────────────────────────────── */
.joinform { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.25rem; max-width: 40rem; }
.joinform .field { display: flex; flex-direction: column; gap: 0.5rem; }
.joinform label {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage);
}
.joinform label .opt { text-transform: none; letter-spacing: 0; color: color-mix(in srgb, var(--text-body) 70%, var(--paper)); }
.joinform input,
.joinform select,
.joinform textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 55%, #FFFFFF);
  border: 1px solid var(--sage-pale);
  border-radius: 0;
  padding: 0.85rem 0.9rem;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.joinform textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
.joinform input:focus,
.joinform select:focus,
.joinform textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sage) 28%, transparent);
}
.joinform .field-note {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.4;
  color: #9A5B4F;
  margin: 0.1rem 0 0;
}
.joinform input[aria-invalid="true"] { border-color: #9A5B4F; }
.joinform input[aria-invalid="true"]:focus {
  border-color: #9A5B4F;
  box-shadow: 0 0 0 2px color-mix(in srgb, #9A5B4F 22%, transparent);
}
.joinform select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23708A81' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 12px;
  padding-right: 2.4rem; cursor: pointer;
}
.form-submit {
  align-self: flex-start;
  margin-top: 0.25rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 0.95rem 2rem;
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease;
}
.form-submit:hover,
.form-submit:focus-visible { background: var(--ink); color: #FFFFFF; }
.form-confirm { display: none; font-family: var(--sans); font-size: 1rem; color: var(--sage); margin-top: 1rem; max-width: 40rem; }

/* ─────────────────────────────────────────────
   Footer (sage now only in link underlines)
   ───────────────────────────────────────────── */
.site-footer { margin-top: var(--space-section); padding-bottom: clamp(3rem, 6vw, 6rem); }
.foot-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 1.75rem; margin-bottom: 1.75rem;
}
.foot-nav a {
  font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.03em;
  color: var(--text-body); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 0.4s ease;
}
.foot-nav a:hover { border-bottom-color: var(--sage); }
.footer-note { font-family: var(--sans); font-size: 0.85rem; color: var(--text-body); text-align: center; margin: 0 auto 0.4rem; max-width: none; }
.foot-link { color: var(--text-body); text-decoration: none; border-bottom: 1px solid var(--sage-pale); padding-bottom: 1px; transition: border-color 0.4s ease; }
.foot-link:hover { border-bottom-color: var(--sage); }
.legal-note { font-family: var(--sans); font-size: 0.72rem; color: color-mix(in srgb, var(--text-body) 65%, var(--paper)); text-align: center; margin: 0 auto; max-width: none; }

/* ─────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .t-spread .t-inner { grid-template-columns: 1fr; gap: 2rem; }
  .t-spread .t-media img { aspect-ratio: 4 / 3; }
  .hero-media { height: 60vh; min-height: 340px; }
  .t-anchor .t-media { height: 60vh; min-height: 320px; }
}
@media (max-width: 600px) {
  .header-inner { flex-wrap: wrap; gap: 0.75rem 1rem; padding: 0.8rem 1.25rem; }
  .site-nav { margin-left: 0; flex-basis: 100%; gap: 1rem 1.25rem; }
  .wordmark { font-size: 1.05rem; letter-spacing: 0.28em; }
  .cta, .form-submit { display: block; text-align: center; width: 100%; }
  .t-founder .founder-media { float: none; width: 100%; margin: 0 0 1.5rem; }
}

/* ─────────────────────────────────────────────
   Legacy structural classes
   Used by pages not yet restructured (our-purpose,
   privacy) so they remain coherent under the new
   tokens/type until they are rebuilt to treatments.
   ───────────────────────────────────────────── */
.page { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.5rem 0; }
.brand {
  position: sticky; top: 0; z-index: 20; background: var(--paper);
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 var(--space-section); padding: 0.95rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sage-pale) 55%, transparent);
}
.brand svg { width: 30px; height: auto; display: block; flex: none; }
.brand .brand-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-left: auto; align-items: center; }
.brand .brand-nav a {
  font-family: var(--sans); font-size: 0.82rem; color: var(--text-body);
  text-decoration: none; letter-spacing: 0.04em;
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.4s ease;
}
.brand .brand-nav a:hover { border-bottom-color: var(--sage); }
.section { margin-bottom: var(--space-section); }
.rule { height: 1px; width: 30%; background: var(--sage-pale); border: 0; margin: var(--space-section) 0; }

/* Legacy founder block (our-purpose note) → Treatment D voice */
.section.founder { background: var(--quiet-surface); padding: clamp(2.5rem,5vw,4rem); margin-left: -1.5rem; margin-right: -1.5rem; }
.section.founder p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; color: var(--ink); max-width: none; }
.section.founder h2 { margin-bottom: 1.25rem; }

/* Legacy legal page (privacy) */
.legal { line-height: 1.8; }
.legal h2 { margin-top: 2.5rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.legal ul { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.legal li { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.8; margin-bottom: 0.5rem; color: var(--text-body); max-width: 64ch; }
.legal a { color: var(--sage); text-decoration: none; border-bottom: 1px solid var(--sage-pale); }
.legal a:hover { border-bottom-color: var(--sage); }
.legal .meta { margin-bottom: 1.5rem; }

/* ─── Hero headline tuning (2026-06-24) ───
   Goal: pull "ones close" onto one line on desktop (above the fold),
   while the paragraph keeps its narrower, readable measure.
   Sage stays a line/mark — button hover left as ink per brand rule. */
.hero-body { max-width: 64rem; }
.hero-body .eyebrow,
.hero-body .lead,
.hero-body .meta { max-width: 40rem; }
.hero-body h1 { max-width: none; font-size: clamp(2.25rem, 4.4vw, 4rem); }
@media (min-width: 1024px) {
  .hero-body h1 { white-space: nowrap; }
}

/* ═════════════════════════════════════════════════════════════
   LOCKED refinements — folded in from REFINEMENTS.css (2026-06-24)
   Signed off against live previews. Shared, so they style all
   three pages at once. Placed last to win the cascade.
   ═════════════════════════════════════════════════════════════ */

/* 1. Uniform width — one delta added to every measure; AD proportions preserved.
      "An inch or so" more, the same shift everywhere. Dial via --w-delta only. */
:root { --w-delta: 6rem; }
.lead { max-width: calc(38rem + var(--w-delta)); }
.hero-body .eyebrow, .hero-body .lead, .hero-body .meta { max-width: calc(40rem + var(--w-delta)); }
.t-anchor .t-body { max-width: calc(40rem + var(--w-delta)); }
.item, .item p { max-width: calc(40rem + var(--w-delta)); }
p { max-width: calc(64ch + var(--w-delta)); }
.t-spread .t-inner { max-width: calc(64rem + var(--w-delta)); }
.t-quiet { max-width: calc(50ch + var(--w-delta)); }
.faq { max-width: calc(50ch + var(--w-delta)); }
.joinform { max-width: calc(40rem + var(--w-delta)); }

/* 1a. Exception — the founder block is NOT widened (it read better tight) */
.t-founder .t-inner { max-width: 46rem; }
.t-founder .founder-voice p { max-width: 64ch; }

/* 2. Headings — no awkward wraps */
.t-anchor h2 { max-width: none; }
@media (min-width: 1024px) { .t-anchor h2 { white-space: nowrap; } } /* one line on desktop, e.g. "Your group is where no one grieves alone" */
.t-spread h2 { text-wrap: balance; }   /* OPEN: section-2 break — Sophie reviewing; balanced for now (no orphan "to") */
/* Trust header wraps naturally: "How we keep these memories / safe" — "safe" alone is intentional; leave it. */

/* 3. Imagery — shorter, better-cropped */
.hero-media { height: 54vh; min-height: 340px; }
.hero-media img { object-position: center 25%; } /* drop the ambiguous slippers, keep the doorway perspective */
.t-anchor .t-media { height: 56vh; min-height: 360px; }

/* 4. Founder portrait — PILOT PAGE ONLY. Warm sepia circular cutout, top-aligned, never grows the section.
      Asset: images/founder-sophie.png (transparent corners).
      HTML: add as the FIRST child of the founder .t-inner, BEFORE the <h2>:
      <div class="founder-media"><img src="images/founder-sophie.png" alt="Sophie, Anamoria founder."></div> */
.t-founder .founder-media { float: right; width: 200px; max-width: 38%; aspect-ratio: auto; background: transparent; margin: 0 0 1rem 2.2rem; shape-outside: circle(50%); }
.t-founder .founder-media img { width: 100%; height: auto; border-radius: 50%; object-fit: contain; display: block; }

/* ─── Text-led page openers (Our Purpose / Privacy) ───
   These pages have no hero image, so the first heading would sit tight
   under the sticky header. Give it breathing room. The pilot page's hero
   stays flush by design and is unaffected (it isn't a .page-open). */
.page-open { padding-top: clamp(3rem, 5vw, 5.5rem); }