/* My Unclaimed Estate — myunclaimedestate.com
   Filename-versioned: nginx serves css/js immutable, so a change ships as
   mue.v2.css, never as a query string. */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans3-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* Sampled from the brand mark: the logo carries exactly two inks. */
  --ink: #00241B;
  --ink-soft: #0B3A2C;
  --body: #253029;
  --muted: #5A6B62;
  --gold: #C08830;
  --gold-deep: #8A5E18;      /* gold dark enough for text on paper */
  --gold-wash: #F3E6D0;
  --paper: #F4F7F2;          /* faint green cast, not a warm cream */
  --paper-lift: #FBFCFA;
  --rule: #DCE4DA;
  --rule-strong: #C2CFBF;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ui: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --measure: 34rem;          /* ~68 characters at the body size */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --band: clamp(3.5rem, 9vw, 7rem);   /* vertical rhythm between sections */
}

/* ---------------------------------------------------------------- base */
*, *::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;
  background: var(--paper);
  color: var(--body);
  font-family: var(--display);
  font-variation-settings: 'opsz' 14, 'SOFT' 0, 'WONK' 0;
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-variation-settings: 'opsz' 90, 'SOFT' 0, 'WONK' 0; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-variation-settings: 'opsz' 60, 'SOFT' 0, 'WONK' 0; }
h3 { font-size: 1.28rem; font-variation-settings: 'opsz' 30, 'SOFT' 0, 'WONK' 0; letter-spacing: -0.005em; }
h4 { font-size: 1.06rem; font-variation-settings: 'opsz' 20, 'SOFT' 0, 'WONK' 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 0.18em; }
a:hover { color: var(--gold-deep); }

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

img, svg { max-width: 100%; }

strong { font-weight: 650; color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; z-index: 99; font-family: var(--ui);
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- layout */
.wrap {
  width: min(72rem, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure { max-width: var(--measure); }
/* A full-width container whose children are held to the reading measure, so a
   narrow column still lines up with the wide ones. Setting both classes on one
   element instead would centre the narrow column and break that alignment. */
.wrap--measure > * { max-width: var(--measure); }

.section { padding-block: var(--band); }
.section--tight { padding-block: calc(var(--band) * 0.6); }
.section--dark {
  background: var(--ink);
  color: #CBD8CE;
}
.section--dark h2, .section--dark h3, .section--dark strong { color: var(--paper); }
/* .lede sets its own colour for the light ground; without this it stays dark
   green on dark green in the band. */
.section--dark .lede { color: #B6C6BA; }
.section--dark a { color: var(--paper); text-decoration-color: var(--gold); }

.lede {
  font-size: clamp(1.13rem, 2.2vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}

/* ---------------------------------------------------------------- header */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.5rem;
}
.masthead__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.masthead__brand img { width: 2.4rem; height: 2.4rem; }
.masthead__name {
  font-family: var(--display);
  font-variation-settings: 'opsz' 20, 'SOFT' 0, 'WONK' 0;
  font-size: 1.02rem; font-weight: 650; color: var(--ink);
  line-height: 1.15; letter-spacing: -0.01em;
}
.masthead__nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 1.35rem;
  font-family: var(--ui); font-size: 0.94rem;
}
.masthead__call {
  font-family: var(--ui); font-weight: 700; font-size: 1rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  margin-left: 1.5rem;
}
.masthead__call:hover { text-decoration: underline; }
.masthead__nav a { text-decoration: none; color: var(--body); }
.masthead__nav a:hover, .masthead__nav a[aria-current] { color: var(--ink); text-decoration: underline; }
/* Narrow screens scroll the nav rather than hiding it: this is a ten-page
   site and the footer is a long way down when you are looking for the FAQ. */
@media (max-width: 52rem) {
  .masthead__inner { flex-wrap: wrap; min-height: 0; padding-block: 0.7rem; row-gap: 0.15rem; }
  .masthead__nav {
    order: 3; width: 100%; margin-left: 0;
    gap: 1.1rem; overflow-x: auto; padding-bottom: 0.45rem;
    scrollbar-width: none;
  }
  .masthead__nav::-webkit-scrollbar { display: none; }
  .masthead__nav a { white-space: nowrap; }
  /* the number stays on the first row, where it cannot be scrolled out of view */
  .masthead__call { order: 2; margin-left: auto; font-size: 0.97rem; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  font-family: var(--ui); font-size: 1rem; font-weight: 600;
  padding: 0.82rem 1.45rem;
  border-radius: 3px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-soft); color: var(--paper); }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-lift); }
.section--dark .btn--primary { background: var(--gold); color: #1A1204; }
.section--dark .btn--primary:hover { background: #D9A24E; color: #1A1204; }
.section--dark .btn--ghost { border-color: #4A5F53; color: var(--paper); }
.section--dark .btn--ghost:hover { border-color: var(--paper); background: rgba(255,255,255,.06); }

/* ---------------------------------------------------------------- receipts */
/* Citation chips: these are the page's evidence, so they read as references
   rather than decoration. Sans, so they sit apart from the argument. */
.cites { font-family: var(--ui); font-size: 0.84rem; line-height: 1.5; }
.cite {
  display: inline-block;
  padding: 0.18em 0.5em 0.2em;
  margin: 0 0.25em 0.35em 0;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--paper-lift);
}
.cite:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.section--dark .cite {
  border-color: #3C5147; background: transparent; color: #B6C6BA;
}
.section--dark .cite:hover { border-color: var(--gold); color: var(--gold); }

/* ---------------------------------------------------------------- footer */
.foot {
  background: var(--ink); color: #A9BBAE;
  font-family: var(--ui); font-size: 0.92rem;
  padding-block: 3rem 2.5rem;
}
.foot a { color: #CBD8CE; }
.foot a:hover { color: var(--gold); }
.foot__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.foot__brand img { width: 9rem; }
.foot__h {
  color: var(--paper); font-family: var(--ui); font-size: 0.88rem;
  font-weight: 700; margin-bottom: 0.7rem; line-height: 1.3; letter-spacing: 0;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.42rem; }
.foot__legal {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid #234438;
  font-size: 0.84rem; color: #8FA396;
}
.foot__legal p { margin-bottom: 0.5rem; max-width: 46rem; }

/* ------------------------------------------------------- the clock section */
/* The one piece of non-user-triggered motion on the site. As each clock
   scrolls in, its claim is drawn onto the house, so the reader watches the
   property get papered over. Everything else on the page stays still. */
.clock { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) {
  .clock { grid-template-columns: 1fr 26rem; }
  .clock__stage { position: sticky; top: 5.5rem; order: 2; }
}

.clock__stage svg { width: 100%; height: auto; display: block; }
.clock__caption {
  font-family: var(--ui); font-size: 0.84rem; color: #8FA396;
  margin-top: 0.9rem;
}

.clock__step {
  padding: 1.35rem 0 1.5rem;
  border-top: 1px solid #234438;
}
.clock__step:first-child { border-top: 0; }
.clock__when {
  font-family: var(--ui); font-weight: 700; font-size: 0.86rem;
  color: var(--gold); margin-bottom: 0.35rem;
}
.clock__step h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.clock__step p { color: #BACABD; }

/* annotation layers inside the stage */
.mark { opacity: 0; transition: opacity .55s ease; }
.mark.is-on { opacity: 1; }
.mark__lead { stroke: var(--gold); stroke-width: 1.2; fill: none; }
.mark__tag { fill: var(--gold); }
.mark__label {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; fill: #1A1204;
}
.house__line { stroke: #CBD8CE; }
.house__fill { fill: #CBD8CE; }
.house__glass { fill: #1E3A2E; transition: fill .55s ease; }
.is-vacant .house__glass { fill: #0A1A12; }

@media (prefers-reduced-motion: reduce) {
  .mark { opacity: 1; transition: none; }
  .house__glass { transition: none; }
}
/* Nothing here depends on JS having run: without IntersectionObserver the
   script turns every mark on at load, so the diagram is complete rather than
   blank. */

/* ---------------------------------------------------------------- prose */
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9em; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.5em; }
.prose blockquote {
  margin: 1.6em 0; padding: 0.2em 0 0.2em 1.3rem;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  font-size: 1.1rem; line-height: 1.55;
}

/* a plain definition row — used where content genuinely pairs a term with a
   consequence, instead of chopping everything into identical cards */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: 0.3rem 2rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46rem) { .row { grid-template-columns: 13rem 1fr; } }
.row__term {
  font-family: var(--ui); font-weight: 650; color: var(--ink); font-size: 0.97rem;
}
.row p { color: var(--body); }

/* ---------------------------------------------------------------- people */
.people { display: grid; gap: 1.6rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.person img, .person__ph {
  width: 100%; aspect-ratio: 1; border-radius: 2px; object-fit: cover;
  display: block;
}
/* Monogram tiles rather than photographs. Only one of these five has a
   headshot on file, and a page whose whole argument is "we are real, go and
   check" is the last place to put four invented faces. Swap these for real
   photographs when they exist -- the markup takes an <img> in the same slot. */
.person__ph {
  background: var(--ink);
  display: grid; place-items: center;
}
.person__ph span {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 500; color: var(--gold);
  letter-spacing: 0.06em; line-height: 1;
}
.person__name { font-weight: 650; color: var(--ink); margin: 0.6rem 0 0.1rem; }
.person__role { font-family: var(--ui); font-size: 0.87rem; color: var(--muted); }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: 1.15rem; }
.field label, .legend {
  display: block; font-family: var(--ui); font-weight: 600;
  font-size: 0.94rem; color: var(--ink); margin-bottom: 0.32rem;
}
.field .hint { font-family: var(--ui); font-weight: 400; font-size: 0.86rem; color: var(--muted); }
input[type=text], input[type=tel], input[type=email], textarea, select {
  width: 100%; font-family: var(--ui); font-size: 1rem;
  padding: 0.68rem 0.75rem;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--paper-lift); color: var(--body);
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); }
textarea { min-height: 7rem; resize: vertical; }
.field-pair { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .field-pair { grid-template-columns: 1fr 1fr; } }

.consent { margin: 1.5rem 0; }
.consent__item { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.6rem; margin-bottom: 0.9rem; }
.consent__item input { margin-top: 0.28rem; align-self: start; }
.consent__item label {
  font-family: var(--ui); font-size: 0.83rem; line-height: 1.5;
  color: var(--muted); font-weight: 400; margin: 0;
}
.form-note { font-family: var(--ui); font-size: 0.83rem; color: var(--muted); }
.form-status { font-family: var(--ui); font-size: 0.95rem; margin-top: 1rem; }
.form-status[data-state=error] { color: #8C2F1D; }
.form-status[data-state=ok] { color: var(--ink); }
.ref-input { font-family: var(--ui); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------------------------------------------------------------- opener */
.opener {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding-top: clamp(2rem, 4vw, 2.6rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 54rem) { .opener { grid-template-columns: 1.15fr 1fr; } }

.opener__ref label {
  display: block; font-family: var(--ui); font-weight: 650;
  font-size: 0.95rem; color: var(--ink); margin-bottom: 0.45rem;
}
.opener__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.opener__row input { flex: 1 1 12rem; min-width: 0; }
.opener__ref .form-note { margin-top: 0.7rem; max-width: 28rem; }

.opener__call h2 { font-size: 1.42rem; }
.opener__number {
  font-family: var(--ui); font-size: clamp(1.35rem, 3.4vw, 1.7rem);
  font-weight: 700; margin-top: 0.6rem;
}
.opener__number a { text-decoration: none; color: var(--ink); }
.opener__number a:hover { text-decoration: underline; }
.section--dark .opener__number a { color: var(--gold); }

/* two closing routes, side by side — not cards, just two columns of prose */
.ends { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: 2.4rem; }
@media (min-width: 50rem) { .ends { grid-template-columns: 1fr 1fr; } }
.end h3 { font-size: 1.22rem; }
.section--dark .rows, .section--dark .row { border-color: #234438; }
.section--dark .row p { color: #BACABD; }
.section--dark .row__term { color: var(--paper); }

/* ---------------------------------------------------------------- hero */
.hero { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 56rem) {
  .hero { grid-template-columns: 1fr 17rem; }
  .hero__mark { justify-self: end; max-width: 17rem; }
}
.hero__mark { margin: 0; max-width: 13rem; }
.hero__mark img { width: 100%; height: auto; }
.hero__mark figcaption {
  font-family: var(--ui); font-size: 0.83rem; line-height: 1.45;
  color: var(--muted); margin-top: 0.9rem;
}

/* ---------------------------------------------------------------- intake */
.intake { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 2.4rem; align-items: start; }
/* Grid children default to min-width:auto, so one long unbreakable token sets
   the column width for everything. contact@myunclaimedestate.com is 270px of
   unbreakable text and was forcing the whole contact form off a 320px screen.
   `anywhere` (not `break-word`) is the one that changes intrinsic sizing. */
.intake > * { min-width: 0; }
.intake__aside a, .foot a, .prose a { overflow-wrap: anywhere; }
@media (min-width: 60rem) { .intake { grid-template-columns: minmax(0,1fr) 20rem; } }
.intake form { max-width: 34rem; }
.intake__aside {
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.4rem 1.5rem 1.6rem;
}
.intake__aside h2 { font-size: 1.12rem; }
.intake__aside .rows { border-top: 0; }
.intake__aside .row { grid-template-columns: 1fr; padding: 0.9rem 0; gap: 0.2rem; }
.intake__aside .row:last-child { border-bottom: 0; padding-bottom: 0; }
.intake__aside .row p { margin-bottom: 0; }
.intake__aside .row p + p { margin-top: 0.35rem; }

.form-success {
  border-left: 3px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1.3rem;
}
.form-success h2, .form-success h3 { margin-bottom: 0.4em; }

.callout {
  background: var(--gold-wash);
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  margin: 1.6em 0;
}
.callout p:last-child { margin-bottom: 0; }