/* The front door and the Map — page layout only. The front door is one navy screen: the promise and where to start on
   the left, the site as it is now on the right (on a phone: the promise, where to start, then the site). The Map is
   paper: every page by group, its Preview states folded under it. */
@layer page {
  .fd-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--s8); }

  /* ── Front door ── */
  body[data-route="atlas"] { background: var(--navy-990); }
  .fd { min-height: 100dvh; display: flex; flex-direction: column; }
  .fd > .fd-wrap { flex: 1 0 auto; }
  .fd-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-block: var(--s6); }
  .fd-brand { display: inline-grid; justify-items: start; gap: 6px; color: inherit; text-decoration: none; }
  .fd-brand img { height: auto; }
  .fd-brand__word { font-family: var(--font-brand); font-weight: 600; font-size: 13px; letter-spacing: .3em; }
  .fd-toplinks { display: flex; gap: var(--s1); }
  .fd-toplinks a { display: inline-flex; align-items: center; gap: var(--s2); min-height: max(40px, var(--target-min)); padding: 0 var(--s3); border-radius: var(--pill); color: var(--text-2); font-size: var(--t-small); font-weight: 600; text-decoration: none; }
  .fd-toplinks a:hover { background: var(--hover); color: var(--text); }

  .fd-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "head site" "start site"; column-gap: var(--s16); row-gap: var(--s10); padding-block: var(--s8) var(--s12); align-items: start; }
  .fd-head { grid-area: head; display: grid; gap: var(--s3); }
  .fd-title { display: flex; align-items: flex-start; gap: var(--s3); }
  .fd-about { flex: none; padding-top: .9em; }
  .fd-h1 { margin: 0; font-family: var(--font-brand); font-weight: 400; font-size: clamp(40px, 5.2vw, 68px); line-height: 1; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
  .fd-sub { margin: 0; font-size: var(--t-lead); color: var(--text-2); font-variant-numeric: tabular-nums; }

  .fd-k { margin: 0 0 var(--s2); font-size: var(--t-small); font-weight: 650; color: var(--text-3); }
  .fd-start { grid-area: start; align-self: start; display: grid; gap: var(--s4); }
  .fd-start__t { margin: 0; font-family: var(--font-brand); font-weight: 450; font-size: var(--t-title); letter-spacing: -.015em; color: var(--text); }
  .fd-start__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
  .fd-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
  .fd-list > li { border-bottom: 1px solid var(--line); }
  .fd-go { display: flex; align-items: center; gap: var(--s3); min-height: 60px; padding: var(--s2) var(--s2) var(--s2) 0; color: var(--text); text-decoration: none; border-radius: var(--r2); transition: background var(--m-state), padding var(--m-state); }
  .fd-go:hover { background: var(--hover); padding-inline: var(--s2); }
  .fd-go__lead { flex: none; display: grid; place-items: center; }
  .fd-go__t { flex: 1 1 auto; display: grid; min-width: 0; }
  .fd-go__n { font-size: var(--t-body); font-weight: 650; }
  .fd-go__s { font-size: var(--t-small); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fd-go__arrow { flex: none; color: var(--text-3); transition: transform var(--m-state), color var(--m-state); }
  .fd-go:hover .fd-go__arrow { color: var(--accent-text); transform: translateX(3px); }

  .fd-site { grid-area: site; display: grid; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-hero); background: var(--sheet-sunk); }
  .fd-racks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
  .fd-rack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r3); color: var(--text); text-decoration: none; }
  .fd-rack:hover { background: var(--hover); }
  .fd-rack__g { display: block; min-width: 0; }
  .fd-rack__t { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); align-items: baseline; }
  .fd-rack__n { font-size: var(--t-data); font-weight: 600; }
  .fd-rack__s { display: inline-flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; font-size: var(--t-small); color: var(--text-2); }
  .fd-now { list-style: none; margin: 0; padding: var(--s3) 0 0; display: grid; gap: var(--s1); border-top: 1px solid var(--line); }
  .fd-now a { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); border-radius: var(--r3); color: var(--text-2); font-size: var(--t-data); text-decoration: none; }
  .fd-now a > span:last-of-type { flex: 1 1 auto; }
  .fd-now a:hover { background: var(--hover); color: var(--text); }

  .fd-foot { border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--text-3); }
  .fd-foot .fd-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-block: var(--s5); }
  .fd-foot a { display: inline-flex; align-items: center; min-height: max(24px, var(--target-min)); color: var(--text-2); }

  @media (max-width: 1000px) {
    .fd-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "start" "site"; row-gap: var(--s8); }
  }
  @media (max-width: 600px) {
    .fd-wrap { padding: 0 var(--s4); }
    .fd-top { padding-block: var(--s3); }
    .fd-grid { padding-block: var(--s2) var(--s8); row-gap: var(--s5); }
    .fd-h1 { font-size: 34px; }
    .fd-sub { font-size: var(--t-data); }
    .fd-start { gap: var(--s2); }
    .fd-start__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .fd-start__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
    .fd-k { margin-bottom: var(--s1); }
    .fd-go { min-height: 52px; padding-block: var(--s1); }
    .fd-site { padding: var(--s3); }
  }

  /* ── Map ── */
  .mp { min-height: 100dvh; background: var(--bg); }
  .mp-top { background: var(--sheet); border-bottom: 1px solid var(--line); }
  .mp-top .fd-top { padding-block: var(--s4); }
  .mp-body { display: grid; gap: var(--s10); padding-block: var(--s10) var(--s16); }
  .mp-head { display: grid; gap: var(--s2); }
  .mp-h1 { margin: 0; font-family: var(--font-brand); font-weight: 500; font-size: var(--t-page); letter-spacing: -.02em; line-height: 1.08; }
  .mp-sub { margin: 0; font-size: var(--t-lead); color: var(--text-2); }
  .mp-group { display: grid; gap: var(--s4); }
  .mp-group__t { margin: 0; font-family: var(--font-brand); font-weight: 450; font-size: var(--t-title); letter-spacing: -.015em; padding-bottom: var(--s2); border-bottom: 2px solid var(--text); }
  .mp-states { display: grid; gap: var(--s3); padding-top: var(--s2); }
  .mp-k { margin: 0; font-size: var(--t-cap); font-weight: 600; color: var(--text-2); }
  .mp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
  .mp-chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--sheet); color: var(--text); font-size: var(--t-small); font-weight: 600; text-decoration: none; }
  .mp-chips a:hover { background: var(--hover); }
  .mp-chips a[aria-current] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .mp-later { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
  .mp-list { list-style: none; margin: 0; padding: 0; display: grid; }
  .mp-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); align-items: center; min-height: 36px; }
  .mp-list li + li { border-top: 1px solid var(--line-soft); }
  .mp-list a { font-weight: 600; font-size: var(--t-data); }
  .mp-src { font-size: var(--t-cap); color: var(--text-3); }
  .mp-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
  .mp-principle__t { margin: 0 0 var(--s1); font-size: var(--t-data); font-weight: 650; }
  .mp-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
  .mp-findings li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-data); color: var(--text-2); }
  .mp-findings b { color: var(--text); }
  @media (max-width: 900px) { .mp-principles { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 600px) { .mp-body { gap: var(--s8); padding-block: var(--s6) var(--s12); } }
}