/**
 * The estate index
 *
 * One register for the index wherever it appears: the generated region on
 * the apex, /commons/ (Thåst Commons) and /colophon/. The apex renders the index over its
 * fixed star canvases; the two pages stand on plain black. Both use the
 * apex palette (gold on black, Work Sans 100/300) so the index reads as
 * the same surface from either side.
 *
 * Design: internal/docs/ESTATE-REGISTRY-AND-HUB-2026.md §4.6. No state,
 * no counts, no images; the address does the brand work and the line
 * confirms it.
 */

:root {
  --estate-gold: #e5c81e;
  --estate-gold-strong: #ffd700;
  --estate-fg: #fff;
  --estate-bg: #000;
  --estate-muted: rgba(255, 255, 255, 0.62);
  --estate-lede: rgba(255, 255, 255, 0.74);
  --estate-faint: rgba(255, 255, 255, 0.45);
  --estate-rule: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Fallback faces
   Until Work Sans arrives the page is set in a local sans whose metrics
   are adjusted to match, so the swap changes the glyphs and nothing else:
   no reflow, no jump of the spaced heading. Moved here from the apex page
   on 2026-09-16 so every estate page has them. The maths, from the apex:
   ========================================================================== */

/* Metric-matched local faces so the title paints at first render in a
   box the web font will fill without a shift. 89.9 and 95.1 percent are
   the measured Work Sans advance of the title divided by Arial's; the
   vertical overrides are Work Sans 0.93 and 0.24 em divided by the
   size-adjust, because the engine scales overrides by size-adjust.
   Seven candidates, because a face that matches nothing is no fallback
   at all: an Android phone and a minimal Linux carry none of Arial,
   Liberation Sans or Helvetica Neue, the whole src list then fails,
   and the title falls through to system-ui unadjusted, 7.4 percent
   wider, with its last glyph inside the three o'clock star's glow.
   Arimo and Liberation Sans are metrically identical to Arial,
   Nimbus Sans and Helvetica to Helvetica Neue, and Roboto is within
   three percent of Arial's advance, so one size-adjust holds for all
   of them. */
@font-face {
  font-family: 'Work Sans Fallback';
  font-weight: 100;
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'), local('Nimbus Sans'), local('Arimo'), local('Roboto');
  size-adjust: 89.9%;
  ascent-override: 103.4%;
  descent-override: 26.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Work Sans Fallback';
  font-weight: 300;
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'), local('Nimbus Sans'), local('Arimo'), local('Roboto');
  size-adjust: 95.1%;
  ascent-override: 97.8%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}

/* ==========================================================================
   Standalone pages (/commons/, /colophon/)
   ========================================================================== */

body.estate-page {
  margin: 0;
  background: var(--estate-bg);
  color: var(--estate-fg);
  font-family: 'Work Sans', 'Work Sans Fallback', system-ui, sans-serif;
  font-weight: 300;
  /* No engine fakes a weight from a heavier face; the faces in use are all loaded. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   The column
   ========================================================================== */

.estate {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(100% - 2rem, 47rem);
  margin: 0 auto;
  padding: 10vh 1.5rem 12vh;
  font-weight: 300;
  line-height: 1.55;
}

/* On the apex the index sits over the fixed canvases. The column dims
   the stars behind the text without covering the field, fading in and
   out at its ends so there is no edge. */
#commons {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.78) 5rem,
    rgba(0, 0, 0, 0.78) calc(100% - 5rem),
    rgba(0, 0, 0, 0)
  );
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   Lines
   ========================================================================== */

.estate .lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Groups follow the taxonomy's order but carry no heading: the role
   names are a contract between engineers, never a label for visitors.
   Space is the only separator. */
.estate .lines + .lines {
  margin-top: 3rem;
}

/* Section headings on the colophon. */
.estate .heading {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--estate-gold);
}

.estate .line {
  margin: 0 0 1.15rem;
  font-size: 0.98rem;
}

.estate .line.tool,
.estate .line.was {
  margin-left: 1.75rem;
}

.estate .line.was {
  font-size: 0.9rem;
  color: var(--estate-faint);
}

.estate .name {
  color: var(--estate-fg);
  text-decoration: none;
  padding-bottom: 0.05em;
  border-bottom: 1px solid rgba(229, 200, 30, 0.4);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.estate a.name:hover,
.estate a.name:focus-visible {
  color: var(--estate-gold-strong);
  border-bottom-color: var(--estate-gold-strong);
}

/* A named surface whose address is deliberately not offered: the rule
   under the name is withheld with it. */
.estate span.name {
  border-bottom-color: var(--estate-rule);
}

.estate .story {
  margin-left: 0.35em;
  color: var(--estate-muted);
}

.estate .addr {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  color: rgba(229, 200, 30, 0.72);
}

.estate .addr-inline {
  letter-spacing: 0.06em;
  color: rgba(229, 200, 30, 0.6);
}

/* ==========================================================================
   Head, foot, prose
   ========================================================================== */

.estate-head {
  margin-bottom: 3.5rem;
}

.estate-head .mark {
  display: inline-block;
  margin-bottom: 2.2rem;
}

.estate-head .mark img {
  height: 1.1rem;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

.estate-head .mark:hover img,
.estate-head .mark:focus-visible img {
  opacity: 0.7;
}

.estate-head h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 100;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.estate-head .lede {
  margin: 0;
  color: var(--estate-lede);
}

/* Weight by pixel density (decided 2026-09-16). Thin at this size is a
   one-pixel hairline: a 2x screen renders it as drawn, a 1x screen turns
   it into an uneven stipple (DirectWrite and FreeType alike). Below
   1.5 dppx the heading takes ExtraLight and the lede Regular; the retina
   page is unchanged. Both faces are in the Google Fonts request and are
   only downloaded where this rule applies. */
@media (max-resolution: 1.5dppx) {
  .estate-head h1 { font-weight: 200; }
  .estate-head .lede { font-weight: 400; }
}

.estate .estate-more {
  margin: 3.5rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--estate-faint);
}

.estate-foot {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--estate-rule);
  font-size: 0.8rem;
  color: var(--estate-faint);
}

.estate-foot p {
  margin: 0 0 0.6rem;
}

.estate-foot .ascii {
  color: var(--estate-muted);
}

.estate .estate-more a,
.estate-foot a {
  margin-right: 1.2em;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.estate .estate-more a:hover,
.estate .estate-more a:focus-visible,
.estate-foot a:hover,
.estate-foot a:focus-visible {
  color: var(--estate-gold-strong);
  border-bottom-color: var(--estate-gold-strong);
}

.colophon .prose + .prose {
  margin-top: 2.4rem;
}

.colophon .prose p {
  margin: 0;
  max-width: 40rem;
  color: var(--estate-muted);
}

/* ==========================================================================
   Focus, small screens, reduced motion
   ========================================================================== */

.estate :focus-visible,
.estate-page :focus-visible {
  outline: 2px solid var(--estate-gold);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .estate {
    padding-top: 8vh;
  }

  .estate .line.tool,
  .estate .line.was {
    margin-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .estate *,
  .estate-page * {
    transition: none !important;
  }
}