/* ==========================================================================
   muddermis — "Facade" homepage
   css/facade.css

   Used by home-facade.html only. Like departures.css this file is deliberately
   SELF-CONTAINED (its own font-face, reset and tokens) so it shares nothing
   with style.css — any design can be published without disturbing the others.
   Every class is prefixed .fac- for the same reason.

   Single theme by design: warm paper, charcoal ink, one terracotta accent.
   There is no dark variant and no theme toggle here.

   The whole design is hairlines and right angles — 1px rules, no radius, no
   shadow anywhere except the two the picture needs: the buildings' cast
   shadows on the pavement, and the switcher chip's hard offset block (that one
   lives in css/design-chip.css).
   ========================================================================== */

/* ---------- Self-hosted display font (Archivo, variable 100–900) ----------
   Same faces as style.css — self-hosted so visitors' IPs are never sent to a
   third party. Duplicated rather than shared so this file stands alone. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Which design this page is wearing — read by js/design.js for the chip. */
  --design-name: "facade";

  /* ===== Facade ===== */
  --paper:       #f2ede4;   /* page */
  --paper-card:  #faf7f1;   /* raised surfaces */
  --paper-hover: #e9e2d6;   /* register row hover */
  --ink:         #16130f;   /* text, every 1px rule, footer field */
  --ink-muted:   #57504a;   /* body copy */
  --ink-meta:    #8d8479;   /* mono meta */
  --on-ink:      #d8d3c7;   /* text on the ink field */
  --terra:       #c9482c;   /* accent: kicker, lit roof, "Soon" */
  --terra-deep:  #ab3b23;   /* Door of the Day field (paper text clears AA) */
  --terra-lift:  #e07f5f;   /* footer link hover — the sky's last band */
  --concrete:    #cfc6ba;   /* pavement strip */
  --green:       #2f6b45;   /* "Live" status dot (GRDN's colour, reused) */

  --hair:        rgba(22, 19, 15, .22);   /* hairlines on paper */
  --hair-soft:   rgba(22, 19, 15, .16);   /* register row separators */
  --win-dark:    rgba(242, 237, 228, .13);/* an unlit window */
  --win-lit:     rgba(22, 19, 15, .14);   /* a lit window that is not coloured */

  --gutter: 26px;           /* page gutter, matches .container's 24px closely */
  --measure: 1180px;        /* the frame the whole page is set in */

  --font-stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.fac {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-stack);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Links take their colour from whatever field they sit in. :where() keeps this
   at zero specificity so any component rule below still wins. */
body.fac a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
:where(body.fac a) { color: inherit; }

img { max-width: 100%; }

/* One focus ring for the page: terracotta, the only accent in the design. */
body.fac :focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

/* Every section is set in the same 1180px frame with the same 26px gutter, so
   the nav mark, the hero, the buildings and the register all line up on one
   left edge. Backgrounds still bleed the full width — the frame is for content
   only, which is what makes the street read as a band across the page. */
.fac-in {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Shared mono meta voice: 9.5–10.5px, uppercase, widely tracked. */
.fac-kicker, .fac-nav-links, .fac-est, .fac-ro-meta, .fac-chip, .fac-ro-soon,
.fac-street-head, .fac-bldg-num, .fac-stat-l, .fac-door-kicker, .fac-reg-count,
.fac-c-num, .fac-c-status, .fac-footer-links, .fac-footer-copy {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* ==========================================================================
   1. Nav
   ========================================================================== */

/* Paper, not translucent, and no backdrop-filter: this design has no glass in
   it anywhere. The 1px ink rule below is the top edge of the whole page. */
.fac-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}

.fac-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
}

/* The lockup: a 2×2 grid of 5px squares, three ink and the top-right one
   terracotta, shipped as a data-URI so there is no extra request and no SVG
   in the markup. */
.fac-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.fac-brand::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Crect width='5' height='5' fill='%2316130f'/%3E%3Crect x='8' width='5' height='5' fill='%23c9482c'/%3E%3Crect y='8' width='5' height='5' fill='%2316130f'/%3E%3Crect x='8' y='8' width='5' height='5' fill='%2316130f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.fac-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 10.5px;
  letter-spacing: .18em;
}
.fac-nav-links a { color: var(--ink-muted); }
.fac-nav-links a:hover { color: var(--terra); }
.fac-est { color: var(--ink-meta); }

/* ==========================================================================
   2. Hero
   ========================================================================== */

.fac-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 34px;
  align-items: end;
  padding-top: 52px;
  padding-bottom: 40px;
}

.fac-kicker {
  font-size: 10.5px;
  letter-spacing: .22em;
  color: var(--terra);
  margin: 0 0 20px;
}

/* Weight 200 against 800 is the typographic idea of the design; nothing in
   between is used at display size. */
.fac-h1 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(40px, 6.4vw, 78px);
  line-height: .95;
  letter-spacing: -.045em;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.fac-h1-strong { font-weight: 800; }

.fac-lead {
  max-width: 44ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  text-wrap: pretty;
}

/* ---------- The readout ---------- */

.fac-readout {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}

.fac-ro-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-meta);
  margin-bottom: 16px;
}

.fac-ro-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.fac-ro-icon {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: block;
  border: 1px solid var(--ink);
}
.fac-ro-text { min-width: 0; }
.fac-ro-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0;
}
.fac-ro-tag {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 6px 0 0;
  text-wrap: pretty;
}

.fac-ro-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.fac-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: .16em;
  border: 1px solid var(--ink);
  padding: 6px 9px;
}
.fac-chip-dot { width: 6px; height: 6px; flex: 0 0 auto; }
.fac-chip-dot.is-live { background: var(--green); }
.fac-chip-dot.is-soon { background: var(--terra); }

/* One CTA element carries both endings — the store badge and the "in build"
   line — and the class on it says which one shows. That way js/facade.js
   swaps a class rather than building markup, and the page is correct for
   whichever app is server-rendered with JS off. */
.fac-ro-cta { display: inline-flex; align-items: center; }
.fac-ro-badge { display: none; width: 112px; height: auto; }
.fac-ro-cta.is-live .fac-ro-badge { display: block; }
.fac-ro-soon {
  display: none;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--terra);
}
.fac-ro-cta.is-soon .fac-ro-soon { display: inline; }

/* ==========================================================================
   3. The street
   ========================================================================== */

/* The handoff drew the street as a horizontal scroller — fifteen buildings at
   fixed pixel sizes, ten of them on screen and the rest behind a swipe. The
   developer asked for the whole block instead, so the elevation is SCALED to
   the width it is given rather than cropped by it.

   One length does that: --u, the design unit. Every street length below is a
   multiple of it, and the buildings' own geometry (--w/--h, written on each
   column by tools/build-apps.mjs) is unitless for the same reason. At full
   size --u is 1px and the block is exactly as the prototype drew it; narrower
   than that it shrinks proportionally, so the picture never changes, only its
   scale. The three --street-* numbers on .fac-block are the design size the
   scale divides by; the generator derives them from data/apps.json. */
.fac-street {
  position: relative;
  border-top: 1px solid var(--ink);
  container-type: inline-size;   /* --u is measured in cqw of this band */
}

/* Sky: five hard vertical bands, warm to warmer, with a faint 46px ruling over
   them, and the pavement painted at the foot of the line. All three are
   backgrounds — there is no image here, and no pavement element either: as a
   background it can be repeated at every line's foot when the row wraps. */
.fac-block {
  position: relative;
  overflow: hidden;              /* the raked shadows overhang the first column */

  /* The block's own constants, in design units. --gap is the row's column gap
     and tools/build-apps.mjs's FACADE_GAP must carry the same number — it
     measures the block with it, this lays the block out with it. --line is a
     column: the tallest building plus its parapet, that gap, and the shadow,
     so every column is the same height and wrapped lines are uniform. */
  --gap: 10;
  --roof: 7;
  --roof-gap: 2;
  --shadow: 38;
  --pave: 44;
  --row-gap: 30;
  --line: calc(var(--street-max) + var(--roof) + var(--roof-gap) + var(--shadow));

  --u: .5px;                     /* fallback where container units are unsupported */

  /* Top layer first: the pavement at the foot of the (only) line, the ruling,
     the sky. The concrete runs from the block's bottom edge to the building
     bases, with the ink hairline of the kerb on top of it. */
  background:
    linear-gradient(to top, var(--concrete) 0 calc(var(--pave) * var(--u)), var(--ink) calc(var(--pave) * var(--u)) calc(var(--pave) * var(--u) + 1px), transparent calc(var(--pave) * var(--u) + 1px)) left bottom / 100% calc(var(--pave) * var(--u) + 1px) no-repeat,
    repeating-linear-gradient(90deg, rgba(22, 19, 15, .05) 0 1px, transparent 1px 46px),
    linear-gradient(90deg, #c9482c 0 34%, #d1583a 34% 52%, #da6b4b 52% 68%, #e07f5f 68% 82%, #e79475 82% 100%);
}

/* One line: the block fills the band, capped at design size (u = 1px).
   1814 = 1762 + 2×26 gutters, and the +2 in the divisor is two units of slack
   so float rounding never wraps the last building onto a line of its own. */
@supports (width: 1cqw) {
  .fac-block { --u: min(1px, calc((min(100cqw, 1814px) - 2 * var(--gutter)) / (var(--street-total) + 2))); }
}

/* The street's own frame: wider than --measure, because the frame here is the
   block's design width, not the page's text measure. The header and the row
   share it, so the label and the count land on the row's own edges. */
.fac-street-in {
  width: 100%;
  max-width: 1814px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.fac-street-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(242, 237, 228, .9);
}

/* nowrap is the one-line case; the phone block below turns wrapping on. The
   6u of bottom padding is the strip of pavement in front of the shadows' feet,
   and it makes the row's bottom edge the block's bottom edge, which is what
   the pavement background is positioned against. */
.fac-street-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  align-content: flex-start;
  column-gap: calc(var(--gap) * var(--u));
  row-gap: calc(var(--row-gap) * var(--u));
  padding: 26px 0 calc(6 * var(--u));
}

/* Every column is one --line tall with the building sitting on its floor, so
   two wrapped lines stand at the same height and their pavements line up. */
.fac-bldg {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 0 0 auto;
  height: calc(var(--line) * var(--u));
}

.fac-bldg-btn {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .25s ease;
}
.fac-bldg-btn:hover { transform: translateY(-4px); }

/* Parapet bar. Ink normally, terracotta when the building is lit. The gap
   under it never rounds away to nothing, or the parapet reads as part of the
   wall at phone scale. */
.fac-roof {
  display: block;
  height: calc(var(--roof) * var(--u));
  margin-bottom: max(1px, calc(var(--roof-gap) * var(--u)));
  background: var(--ink);
  transition: background .3s ease;
}
.fac-bldg.is-on .fac-roof { background: var(--terra); }

/* The 1px border stays 1px at every scale — this design is hairlines, and a
   scaled hairline is a smudge. */
.fac-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  padding: calc(12 * var(--u)) calc(10 * var(--u));
  background: var(--ink);
  border: 1px solid var(--ink);
  transition: background .3s ease;
}
.fac-bldg.is-on .fac-body { background: var(--paper); }

.fac-windows {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: calc(6 * var(--u));
}
.fac-win {
  display: block;
  height: calc(13 * var(--u));
  background: var(--win-dark);
}
/* Lit: every third window takes the app's own colour and the rest go dark on
   paper. This is the only place a per-app colour appears at size. */
.fac-bldg.is-on .fac-win { background: var(--win-lit); }
.fac-bldg.is-on .fac-win:nth-child(3n + 1) { background: var(--c); }

.fac-foot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* The icon and the door number are the two things in the picture that are read
   rather than seen, so they stop scaling before they stop being legible. */
.fac-bldg-icon {
  display: none;
  width: max(18px, calc(34 * var(--u)));
  height: max(18px, calc(34 * var(--u)));
  border: 1px solid var(--ink);
}
.fac-bldg-num {
  font-size: max(8px, calc(9 * var(--u)));
  letter-spacing: .14em;
  color: rgba(242, 237, 228, .5);
}
.fac-bldg.is-on .fac-bldg-icon { display: block; }
.fac-bldg.is-on .fac-bldg-num { display: none; }

/* Long afternoon shadow, raked off the base of the building. It lands on the
   concrete by construction now: the pavement is a background of the block, and
   a background paints below every child, so nothing needs a z-index. */
.fac-shadow {
  display: block;
  height: calc(var(--shadow) * var(--u));
  background: linear-gradient(180deg, rgba(22, 19, 15, .55), rgba(22, 19, 15, .14));
  transform: skewX(-58deg);
  transform-origin: top left;
}

/* ---------- The phone block: one street, two lines ----------
   Fifteen buildings across a phone would be four millimetres wide, so under
   720px the row wraps once and the block reads as two, each standing on its
   own pavement. The second pavement is the same gradient again, lifted by one
   column plus the row gap — the exact distance between the two lines' feet.

   The arithmetic, from the block's bottom edge up: the row's 6u of bottom
   padding, then the lower line's shadows to 44u where the pavement's ink kerb
   sits at the building bases; the upper line's feet are (line + row-gap)u
   higher, which is where the second layer is pinned. Sky shows between them. */
@media (max-width: 719px) {
  .fac-block {
    background:
      linear-gradient(to top, var(--concrete) 0 calc(var(--pave) * var(--u)), var(--ink) calc(var(--pave) * var(--u)) calc(var(--pave) * var(--u) + 1px), transparent calc(var(--pave) * var(--u) + 1px)) left bottom / 100% calc(var(--pave) * var(--u) + 1px) no-repeat,
      linear-gradient(to top, var(--concrete) 0 calc(var(--pave) * var(--u)), var(--ink) calc(var(--pave) * var(--u)) calc(var(--pave) * var(--u) + 1px), transparent calc(var(--pave) * var(--u) + 1px)) left 0 bottom calc((var(--line) + var(--row-gap)) * var(--u)) / 100% calc(var(--pave) * var(--u) + 1px) no-repeat,
      repeating-linear-gradient(90deg, rgba(22, 19, 15, .05) 0 1px, transparent 1px 46px),
      linear-gradient(90deg, #c9482c 0 34%, #d1583a 34% 52%, #da6b4b 52% 68%, #e07f5f 68% 82%, #e79475 82% 100%);
  }
  /* Now the half-block is what has to fit, and 1px is too big to be worth
     capping at — .7px keeps the two lines from stretching apart on a tablet. */
  @supports (width: 1cqw) {
    .fac-block { --u: min(.7px, calc((100cqw - 2 * var(--gutter)) / (var(--street-half) + 2))); }
  }
  .fac-street-row { flex-wrap: wrap; }
}

/* ==========================================================================
   4. Stat band
   ========================================================================== */

.fac-stats { border-bottom: 1px solid var(--ink); }

/* The cells carry the gutter themselves, so the first numeral lands on the
   same left edge as the headline above it. */
.fac-stats-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
}
.fac-stat {
  padding: 22px var(--gutter);
  border-right: 1px solid var(--hair);
}
.fac-stat:last-child { border-right: 0; }

.fac-stat-n {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.04em;
}
.fac-stat-n.is-live { color: var(--terra); }
.fac-stat-l {
  display: block;
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--ink-meta);
  margin-top: 8px;
}

/* ==========================================================================
   5. Door of the Day
   ========================================================================== */

.fac-door {
  background: var(--terra-deep);
  color: #f7f2e9;
  padding: 30px 0;
  border-bottom: 1px solid var(--ink);
}
.fac-door-kicker {
  font-size: 10px;
  letter-spacing: .22em;
  opacity: .85;
  margin: 0 0 16px;
}
.fac-door-card {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: #f7f2e9;
}
.fac-door-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: block;
  border: 1px solid rgba(247, 242, 233, .6);
}
.fac-door-text {
  display: block;
  min-width: 0;
  flex: 1 1 220px;
}
.fac-door-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.fac-door-tag {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  opacity: .92;
  margin-top: 5px;
}
/* The badge is drawn for light fields; on the terracotta one it is inverted. */
.fac-door-badge {
  flex: 0 0 auto;
  display: block;
  width: 120px;
  height: auto;
  filter: invert(1);
}

/* ==========================================================================
   6. The register
   ========================================================================== */

.fac-register {
  padding: 40px 0 8px;
  scroll-margin-top: 20px;
}

.fac-reg-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
}
.fac-reg-head h2 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(30px, 4.6vw, 36px);
  letter-spacing: -.04em;
  margin: 0;
}
.fac-reg-rule { flex: 1; min-width: 20px; height: 1px; background: rgba(22, 19, 15, .3); }
.fac-reg-count {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-meta);
  white-space: nowrap;
}

.fac-rows { display: flex; flex-direction: column; }

/* The directory as a table rather than cards: fifteen apps read faster in a
   column of rules than in a grid of boxes. */
.fac-row {
  display: grid;
  grid-template-columns: 34px 40px minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--hair-soft);
  color: var(--ink);
  transition: background .2s ease, padding-left .2s ease;
}
.fac-row:hover { background: var(--paper-hover); padding-left: 10px; }

.fac-c-num { font-size: 10px; letter-spacing: .1em; color: var(--ink-meta); }
.fac-c-icon {
  width: 30px;
  height: 30px;
  display: block;
  border: 1px solid rgba(22, 19, 15, .35);
}
.fac-c-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -.02em;
}
.fac-c-swatch { flex: 0 0 auto; width: 4px; height: 20px; background: var(--c); }
.fac-c-tag {
  min-width: 0;
  font-size: 13.5px;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.fac-c-status {
  font-size: 9.5px;
  letter-spacing: .16em;
  white-space: nowrap;
}
.fac-c-status.is-live { color: var(--ink-muted); }
.fac-c-status.is-soon { color: var(--terra); }

/* ==========================================================================
   7. Studio note
   ========================================================================== */

.fac-note-in {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 30px;
  padding-top: 44px;
  padding-bottom: 44px;
}
.fac-note h2 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 32px;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 0;
}
.fac-note p {
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.fac-note p:last-child { margin-bottom: 0; }

/* ==========================================================================
   8. Footer
   ========================================================================== */

/* 74px of bottom room, and 160px of right padding on the row, so the fixed
   switcher chip in the corner never lands on the copyright line. */
.fac-footer {
  background: var(--ink);
  color: var(--on-ink);
  padding: 28px 0 74px;
}
.fac-footer-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-right: 160px;
}
.fac-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: .18em;
}
.fac-footer-links a { color: var(--on-ink); }
.fac-footer-links a:hover { color: var(--terra-lift); }
.fac-footer-copy {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-meta);
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/* The hero stacks: headline first, then the readout under it. The street is
   not touched here — it scales itself to whatever width it is handed, and the
   one width that changes its shape (719px, where it wraps into two lines) is
   in section 3 with the pavement arithmetic that depends on it. */
@media (max-width: 820px) {
  .fac-hero-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-top: 40px;
  }
  .fac-note-in { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* The tagline column is the one that stops fitting first; the name, status and
   icon are what the row is for. */
@media (max-width: 720px) {
  .fac-row { grid-template-columns: 30px 40px minmax(0, 1fr) auto; gap: 12px; }
  .fac-c-tag { display: none; }
}

@media (max-width: 620px) {
  .fac-stats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fac-stat { border-right: 1px solid var(--hair); }
  .fac-stat:nth-child(2n) { border-right: 0; }
  .fac-stat:nth-child(-n + 2) { border-bottom: 1px solid var(--hair); }
}

/* Under 560px the chip shrinks to a dot in the corner, so the footer row can
   have its full width back. */
@media (max-width: 560px) {
  .fac-nav-links { gap: 14px; font-size: 10px; }
  .fac-footer-in { padding-right: 0; }
  .fac-door-name { font-size: 28px; }
  /* Two tracked mono lines stacked read better than one line wrapping in the
     middle of both halves, which is what space-between does at this width. */
  .fac-street-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

/* Selection still works — it just arrives instead of easing in. */
@media (prefers-reduced-motion: reduce) {
  .fac-bldg-btn, .fac-roof, .fac-body, .fac-row { transition: none; }
  .fac-bldg-btn:hover { transform: none; }
}