/* The House — landing page.
   Values follow the Claude Design file "The House - Landing.dc.html". Colours, type and
   effects come from the House Osborne design system tokens loaded before this file. */

html { scroll-padding-top: 84px; } /* anchor jumps land below the sticky header */

/* ---- Surfaces ----
   Woven cloth, made in Higgsfield for the family tree's world: undyed linen toned to parchment, and navy
   canvas like the ground of the night embroidery. Each tile is drawn at about half its size, so threads stay
   crisp on high-density screens and come out near the embroidery's own thread size. */
body {
  overflow-x: clip;
  background: var(--surface-base) url("/welcome/assets/textiles/linen.webp") 0 0 / 355px 357px repeat;
}

a { color: var(--navy-800); text-decoration: none; }
a:hover { color: var(--gold-700); }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--navy-900); color: var(--parchment-50);
}
.skip-link:focus { top: 12px; color: var(--parchment-50); }

/* ---- Dark sections ----
   base.css colours h1–h5 navy with an element rule, which beats a colour inherited from
   the section. Headings on navy must be coloured directly, or they render navy-on-navy. */
.on-dark { background: var(--navy-950) url("/welcome/assets/textiles/linen-night.webp") 0 0 / 330px repeat; color: var(--parchment-50); }
.on-dark :is(h1, h2, h3, h4, h5) { color: var(--text-on-inverse); }

/* ---- Shared type ---- */
.section-title {
  margin: 0; font-family: var(--font-serif); font-weight: 600; line-height: 1.15;
  color: var(--navy-900); text-wrap: pretty;
}
.section-title--lg { font-size: clamp(30px, 4.4vw, 50px); }
.section-title--md { font-size: clamp(28px, 4vw, 46px); }
.measure-22 { max-width: 22ch; }
.measure-24 { max-width: 24ch; }
.measure-26 { max-width: 26ch; }

.lead { margin: 22px 0 0; font-size: clamp(18px, 2vw, 20px); line-height: 1.6; color: var(--ink-600); }
.on-dark .lead { color: var(--parchment-200); }

/* ---- Buttons (design system Button: primary, and secondary restyled for navy) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 500; line-height: 1;
  letter-spacing: var(--ls-button); text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn--md { min-height: 46px; padding: 12px 24px; font-size: 13px; }
.btn--xl { min-height: 58px; padding: 16px 32px; font-size: 19px; }

.btn--primary, .btn--primary:hover { color: var(--navy-900); }
.btn--primary { background: var(--gold-500); border-color: var(--gold-500); }
.btn--primary:hover { background: var(--gold-600); border-color: var(--gold-600); box-shadow: var(--shadow-gold); }

.btn--outline { color: var(--navy-900); background: transparent; border: 1.5px solid var(--navy-900); }
.btn--outline:hover { color: var(--parchment-50); background: var(--navy-900); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.actions--center { justify-content: center; margin-top: 36px; }

/* ---- Header ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 24px; border-bottom: 1px solid var(--border-hairline);
  background: rgba(248, 244, 236, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nav .btn { flex: none; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 34px; height: 34px; padding: 5px; object-fit: contain; background: var(--navy-900); }
.brand__name { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--navy-900); white-space: nowrap; }
@media (max-width: 420px) { .brand__name { font-size: 19px; } }

/* ---- Hero ----
   Andre's painting of the family tree, with its sky running on behind the words. On phones and tablets the words sit
   on that sky above the painting. On computers the painting's own sky is carried 3000px further left (build.py), and
   the tree stands to the right of the words. --tree is the width of Andre's painting; the wide picture is 2.5 paintings
   wide and runs 0.142 of a painting past the right edge. The words are navy: white on this sky reads under 3:1. */
.hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--navy-900);
  background: var(--hero-sky, rgb(91 159 227)); --tree: clamp(760px, 72vw, 1500px);
}
.hero__art picture, .hero__art img { display: block; width: 100%; height: auto; }
.hero__inner {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(40px, 8vw, 64px) clamp(22px, 5vw, 56px) clamp(4px, 1.5vw, 12px);
}
.hero__copy { max-width: 640px; }
@media (min-width: 1080px) {
  .hero__art { position: absolute; inset: 0; z-index: -1; }
  .hero__art picture { position: absolute; bottom: 0; right: calc(var(--tree) * -0.142); width: calc(var(--tree) * 2.5); }
  .hero__inner {
    display: flex; align-items: center;
    min-height: calc(var(--tree) * 0.5605 + 190px);
    /* The garden along the bottom of the painting stays clear of the words. */
    padding-block: clamp(48px, 5vw, 72px) calc(var(--tree) * 0.085 + 16px);
  }
  .hero__copy { max-width: min(520px, 46vw); }
}
.hero__inner > * { min-width: 0; }
.hero__title {
  margin: 0; font-family: var(--font-serif); font-size: clamp(40px, 6.2vw, 72px);
  font-weight: 600; line-height: 1.05; color: var(--navy-900); text-wrap: pretty;
}
.hero__lede { max-width: 33ch; margin: 24px 0 0; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.55; color: var(--navy-800); }
.hero__note { max-width: 36ch; margin: 22px 0 0; font-size: 17px; line-height: 1.5; color: var(--navy-800); }

/* ---- Why it matters: families of every culture, embroidered, rise out of the page beneath the words ---- */
.why { padding: clamp(60px, 9vw, 120px) 0 0; text-align: center; }
.why__copy { max-width: 820px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 56px); }
.why__weave {
  aspect-ratio: 2000 / 848; max-height: 760px; margin-top: clamp(20px, 3vw, 40px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
}
.why__weave img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (max-width: 759px) {
  .why__weave { aspect-ratio: auto; height: clamp(280px, 80vw, 440px); }
  .why__weave img { object-position: 52% 60%; }
}
.why__quote {
  margin: 0; font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 40px);
  font-style: italic; font-weight: 500; line-height: 1.35; color: var(--navy-900);
}
.why__body { margin: 26px 0 0; font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--ink-600); }

/* ---- Full-width bands ---- */
.band { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(22px, 5vw, 56px); }
.ruled { border-top: 1px solid var(--border-hairline); }
.ruled--both { border-bottom: 1px solid var(--border-hairline); }

/* ---- Two-column sections: truths, privacy ---- */
.split { max-width: 1180px; margin: 0 auto; padding: clamp(60px, 9vw, 112px) clamp(22px, 5vw, 56px); }
.split__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.split__grid > * { min-width: 0; }

/* ---- The archive at a glance: a register, set like the first page of a family bible ---- */
.register { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 6vw, 80px) clamp(22px, 5vw, 56px); }
.register__list { margin: 0; border-top: 1px solid var(--border-default); }
.register__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0 20px; border-bottom: 1px solid var(--border-hairline); }
@media (min-width: 760px) {
  .register__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: baseline; padding: 22px 0 24px; }
}
.register__term { margin: 0; font-family: var(--font-serif); font-size: clamp(26px, 2.8vw, 34px); font-weight: 600; line-height: 1.2; color: var(--navy-900); }
.register__note { margin: 0; font-size: clamp(18px, 1.7vw, 20px); line-height: 1.55; color: var(--ink-600); }

/* ---- Four views: one column, then two, then all four in a row (never three and one) ---- */
.views {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 40px) clamp(22px, 3vw, 32px);
  margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; list-style: none;
}
@media (min-width: 600px) { .views { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1168px) { .views { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.view { min-width: 0; }
.view__picture { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border-on-inverse); }
.view__picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.view__title { margin: 20px 0 0; font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-wrap: wrap; }
.view__copy { margin: 8px 0 0; font-size: 18px; line-height: 1.55; color: var(--parchment-200); }

/* ---- Entries: what the family tree records, and how things are kept private ---- */
.entries { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-default); }
.entry { padding: 20px 0 22px; border-bottom: 1px solid var(--border-hairline); }
.entry__title {
  margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 600;
  line-height: var(--lh-body); letter-spacing: 0; color: var(--navy-900); text-wrap: wrap;
}
.entry__copy { margin: 6px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-600); }

/* The quote hangs its opening mark in the margin, so the words line up with the heading above. */
.quote { margin: clamp(32px, 4vw, 44px) 0 0; }
.quote__text {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); font-style: italic; font-weight: 500;
  line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--navy-800); text-wrap: pretty; text-indent: -0.4em;
}
.quote__text::before { content: "\201C"; color: var(--gold-600); }
.quote__text::after { content: "\201D"; color: var(--gold-600); }
.quote__caption { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--gold-700); } /* gold-700 passes 4.5:1 on parchment */
.quote__caption::before { content: "\2014\00A0"; }

/* ---- What a House holds: the keepsakes, stitched, above the six things a House keeps ---- */
.keepsakes {
  margin: clamp(28px, 4vw, 44px) 0 0; aspect-ratio: 5 / 2; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
.keepsakes img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) { .keepsakes { aspect-ratio: 16 / 9; margin-inline: calc(clamp(22px, 5vw, 56px) * -1); } }
.holds {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 34px) clamp(28px, 4vw, 48px);
  margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none;
}
@media (min-width: 640px) { .holds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .holds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hold { min-width: 0; padding-top: 18px; border-top: 1px solid var(--border-hairline); }
.hold__title { margin: 0; font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--navy-900); text-wrap: wrap; }
.hold__copy { margin: 8px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-600); }

/* ---- Map ---- */
.map {
  max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(22px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(32px, 5vw, 60px); align-items: center;
}
.map > * { min-width: 0; }
/* Each line is marked with a French knot in gold thread. */
.stitched { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.stitched li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.5; color: var(--parchment-100); }
.stitched li::before {
  content: ""; position: absolute; left: 4px; top: calc(0.75em - 5px); width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-300), var(--gold-500) 55%, var(--gold-700));
}
.journeys { margin: 0; }
.journeys img { display: block; width: 100%; height: auto; border: 1px solid var(--gold-700); }
.journeys__caption {
  margin-top: 14px; font-family: var(--font-serif); font-size: 19px; font-style: italic;
  line-height: 1.4; color: var(--parchment-200); text-align: right;
}

/* ---- Built for everyone: each promise as a run-in paragraph, in the large type it promises ---- */
.promises {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 28px) clamp(32px, 5vw, 64px);
  margin: clamp(30px, 4vw, 44px) 0 0; padding: 0; list-style: none;
}
@media (min-width: 760px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promise { min-width: 0; font-size: clamp(19px, 1.9vw, 21px); line-height: 1.6; color: var(--ink-600); }
.promise__title, .promise__copy { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
.promise__title { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; color: var(--navy-900); }
.promise__title::after { content: "."; }

/* ---- Questions families ask: the ones View options asks in the app, written in by scripts/write-welcome-questions.mjs.
   Each opens to its answer beside the phone screen it describes, taken from the made-up sample family; opening one
   closes the other. ---- */
.questions { max-width: 1000px; margin: clamp(30px, 4vw, 44px) 0 0; border-top: 1px solid var(--border-default); }
.question { border-bottom: 1px solid var(--border-hairline); }
.question__ask {
  position: relative; display: block; padding: 22px clamp(40px, 5vw, 52px) 22px 0; list-style: none; cursor: pointer;
  font-family: var(--font-sans); font-size: clamp(19px, 1.9vw, 21px); font-weight: 600; line-height: 1.4;
  color: var(--navy-900); text-wrap: pretty;
}
.question__ask::-webkit-details-marker { display: none; }
/* A chevron in gold, turned over while the answer is open. */
.question__ask::after {
  content: ""; position: absolute; top: 50%; right: clamp(2px, 1vw, 8px); width: 24px; height: 24px; margin-top: -12px;
  background: var(--gold-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}
.question[open] > .question__ask::after { transform: rotate(180deg); }
@media (hover: hover) { .question__ask:hover { color: var(--gold-700); } }
.question__answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 0 34px; }
@media (min-width: 860px) {
  .question__answer { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(36px, 5vw, 72px); align-items: start; }
}
.question[open] > .question__answer { animation: answer-in var(--dur-base) var(--ease-out); }
@keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } }
.question__text { max-width: 58ch; margin: 0; font-size: clamp(18px, 1.8vw, 20px); line-height: 1.6; color: var(--ink-600); }
.question__text strong { font-weight: 600; color: var(--navy-900); }
.question__picture {
  display: block; width: 100%; max-width: 320px; height: auto;
  background: var(--paper); border: 1px solid var(--border-default); box-shadow: 0 10px 28px -18px rgba(10, 34, 64, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .question__ask::after { transition: none; }
  .question[open] > .question__answer { animation: none; }
}

/* ---- Close ----
   The family tree embroidered at night. Its gold blossoms come on in two waves as it scrolls into view, lower
   branches first, then the stars; without scroll-linked animation, or with reduced motion, the gold is simply there.
   The words sit on the plain cloth along the bottom of the embroidery. */
.closing__cloth {
  position: relative; aspect-ratio: 2000 / 848; max-height: 640px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 80%, transparent 100%);
}
.closing__cloth img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 759px) {
  .closing__cloth { aspect-ratio: auto; height: clamp(240px, 74vw, 400px); }
  .closing__cloth img { object-position: 50% 45%; }
}
@keyframes gold-on { from { opacity: 0.04; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .closing__gold { animation: gold-on linear both; animation-timeline: view(); }
    .closing__gold--first { animation-range: entry 35% entry 100%; }
    .closing__gold--then { animation-range: entry 75% contain 25%; }
    .closing__gold--last { animation-range: entry 100% contain 50%; }
  }
}
.close {
  position: relative; max-width: 900px; margin: clamp(-150px, -9vw, -40px) auto 0;
  padding: 0 clamp(22px, 5vw, 56px) clamp(60px, 9vw, 124px); text-align: center;
}
.close__mark { width: 54px; height: 54px; object-fit: contain; opacity: 0.9; }
.close__title {
  margin: 26px 0 0; font-family: var(--font-serif); font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 600; line-height: 1.15; text-wrap: pretty;
}
.close__body { max-width: 42ch; margin: 22px auto 0; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.6; color: var(--parchment-200); }
.motto { margin: 44px 0 0; font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-400); }
.motto-translation { margin: 10px 0 0; font-size: 17px; color: var(--parchment-300); }

/* ---- Footer ---- */
.footer {
  padding: 28px 24px; text-align: center; border-top: 1px solid var(--border-on-inverse);
  background: var(--navy-950) url("/welcome/assets/textiles/linen-night.webp") 0 0 / 330px repeat;
}
.footer span { font-size: 16px; color: var(--parchment-300); }