/* ==========================================================================
   ORRERY — inner pages. Loaded after base.css and site.css.
   ========================================================================== */

/* `overflow: clip` rather than `hidden`: the decorative arc below sits at
   right:-13%, which is 177px past the right edge at 1360 and made every inner
   page report scrollWidth 1537 against innerWidth 1360. `clip` contains it
   without creating a scroll container, so `position: sticky` on the header
   still works. The arc is meant to run off the edge; it just must not drag
   the document with it. */
.page-hero {
  padding: clamp(52px, 8vw, 96px) 0 clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: clip;
}
/* The instrument's arc, once, very faint, behind the page title. Ties every
   inner page to the hero without repeating the canvas. */
.page-hero::after {
  content: '';
  position: absolute;
  right: -13%; top: -34%;
  width: 62%; aspect-ratio: 1.35;
  border: 1px solid var(--line);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { margin-top: 1rem; max-width: 68ch; }
.page-hero .hero-cta { margin-top: 1.6rem; }

.sr-head {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Why-the-word aside
   ========================================================================== */

.why {
  margin-top: clamp(28px, 3.5vw, 44px);
  border-left: 2px solid var(--line-3);
  padding: .2rem 0 .2rem 1.15rem;
  max-width: 72ch;
}
.why p:last-child { color: var(--ink-3); font-size: .95rem; }

/* ==========================================================================
   Callouts
   ========================================================================== */

.callout {
  margin-top: clamp(24px, 3vw, 38px);
  background: var(--plate);
  border: 1px solid var(--line);
  border-left: 2px solid var(--hot);
  border-radius: var(--r-sm);
  padding: clamp(18px, 2.2vw, 26px);
  max-width: 84ch;
}
.callout.warn { border-left-color: var(--cool); }
.callout p:last-child { margin-bottom: 0; }
.callout p { font-size: .93rem; color: var(--ink-3); }
.callout .plate-title { color: var(--ink-2); }

/* ==========================================================================
   The NAV identity
   ========================================================================== */

.identity-plate { padding: clamp(24px, 3vw, 38px); }
.identity {
  font-family: var(--mono);
  font-size: clamp(.86rem, 1.7vw, 1.05rem);
  color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.7rem;
  line-height: 1.4;
}
.frac { display: inline-flex; flex-direction: column; align-items: center; min-width: 0; }
.frac span { padding: .32rem .1rem; text-align: center; }
.frac span:first-child { border-bottom: 1px solid var(--line-3); }
.identity-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 860px) { .identity-notes { grid-template-columns: minmax(0, 1fr); } }
.identity-notes b { display: block; color: var(--ink); font-size: .93rem; margin-bottom: .3rem; }
.identity-notes p { font-size: .87rem; color: var(--ink-3); margin: 0; }

/* ==========================================================================
   Stage list, wide variant (inner pages have the full width)
   ========================================================================== */

.stages.wide { grid-template-columns: minmax(0, 1fr); }
.stages.wide li { grid-template-columns: auto minmax(0, 1fr); }

/* ==========================================================================
   Numbered lists
   ========================================================================== */

.numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.numbered li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 .9rem;
  background: var(--plate);
  border: 1px solid var(--line);
  padding: 1.05rem 1.15rem;
}
.numbered li:first-child { border-radius: var(--r) var(--r) 0 0; }
.numbered li:last-child  { border-radius: 0 0 var(--r) var(--r); }
.numbered li.mark { border-left: 2px solid var(--cool); }
.numbered .n { font-family: var(--mono); font-size: .78rem; color: var(--faint); }
.numbered b { color: var(--ink); font-size: .98rem; display: block; margin-bottom: .2rem; }
.numbered p { font-size: .88rem; color: var(--ink-3); margin: 0; }

/* ==========================================================================
   Figures generated by main.js
   ========================================================================== */

.batch-fig svg, .clock-fig svg { width: 100%; height: auto; display: block; }
.batch-fig { max-width: 760px; }
/* The three numbers the paragraph under it depends on rendered at 4-6px in a
   350px column, because a 760-unit viewBox scales everything by 0.46 there.
   It scrolls below that width instead — the same pattern every wide table on
   this site already uses — so the labels never fall below about 10px. */
.batch-fig svg { min-width: 620px; }
.clock-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
@media (max-width: 860px) { .clock-grid { grid-template-columns: minmax(0, 1fr); } }
.clock-fig { max-width: 520px; }

/* ==========================================================================
   Parameters
   ========================================================================== */

.params { display: grid; gap: clamp(22px, 3vw, 38px); }
.param-group h3 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); font-weight: 400;
  margin-bottom: .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line-2);
}
.param-group code { font-family: var(--mono); font-size: .88em; color: var(--ink); }

/* One column geometry across all four groups. Left to auto layout, each table
   sized to its own content and the five headers landed at four different x
   positions — so seventeen rows that are meant to read as one instrument read
   as four tables that happen to be stacked. */
.param-group .tbl { table-layout: fixed; min-width: 34rem; }
.param-group .tbl col.c-key   { width: 22%; }
.param-group .tbl col.c-gov   { width: 30%; }
.param-group .tbl col.c-val   { width: 14%; }
.param-group .tbl col.c-bound { width: 20%; }
.param-group .tbl col.c-by    { width: 14%; }
.param-group .tbl td, .param-group .tbl th { overflow-wrap: anywhere; }

/* ==========================================================================
   Open problems
   ========================================================================== */

.problems { display: grid; gap: 2px; }
.problem {
  background: var(--plate);
  border: 1px solid var(--line);
  padding: clamp(18px, 2.2vw, 26px);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.problem:first-child { border-radius: var(--r) var(--r) 0 0; }
.problem:last-child  { border-radius: 0 0 var(--r) var(--r); }
.problem-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: baseline; margin-bottom: .55rem; }
.problem-head h3 { margin: 0; flex: 1 1 22ch; min-width: 0; }
.problem p { font-size: .92rem; color: var(--ink-3); margin: 0; max-width: 82ch; }

.status {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; padding: .16rem .5rem; border-radius: 3px;
  border: 1px solid var(--line-2); color: var(--faint); flex: none; white-space: nowrap;
}
.status.s-unsolved { color: var(--cool); border-color: color-mix(in srgb, var(--cool) 45%, transparent); }
.status.s-unset    { color: var(--ink-3); border-style: dashed; }
.status.s-stated   { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 45%, transparent); }

/* ==========================================================================
   Roadmap
   ========================================================================== */

.phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.phase { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 clamp(16px, 2.4vw, 30px); position: relative; }
.phase-mark { display: flex; flex-direction: column; align-items: center; }
.phase-mark span {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  font-family: var(--display); font-variation-settings: 'opsz' 24, 'SOFT' 0, 'WONK' 0;
  font-size: .95rem; color: var(--ink-3);
  background: var(--sky);
}
/* The connector, drawn on the mark column rather than as a border on the row,
   so the last phase does not trail a line into the footer. */
.phase:not(:last-child) .phase-mark::after {
  content: ''; flex: 1 1 auto; width: 1px; background: var(--line-2); margin: 6px 0 0;
}
.phase-body { padding: 0 0 clamp(28px, 3.6vw, 46px); }
.phase h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; margin-bottom: .35rem; }
.phase .state {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--line-2); border-radius: 3px; padding: .1rem .45rem;
}
.phase.p-done .phase-mark span { border-color: var(--hot); color: var(--hot); }
.phase.p-done .state { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 45%, transparent); }
.phase.p-next .phase-mark span { border-color: var(--line-3); color: var(--ink-2); }
.phase p { font-size: .93rem; color: var(--ink-3); max-width: 76ch; }
.phase ul { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.phase ul li {
  font-size: .8rem; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 3px;
  padding: .22rem .55rem; background: var(--plate);
}

/* ==========================================================================
   Security
   ========================================================================== */

.status-band {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--line);
}
@media (max-width: 800px) { .status-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .status-band { grid-template-columns: minmax(0, 1fr); } }
.status-band > div { background: var(--plate); padding: clamp(18px, 2.2vw, 26px); }
.status-band .v {
  display: block;
  font-family: var(--display); font-variation-settings: 'opsz' 90, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(2.2rem, 4.6vw, 3rem); line-height: 1; color: var(--cool-fill);
  font-variant-numeric: tabular-nums;
}
.status-band .l {
  display: block; margin: .55rem 0 .3rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint);
}
.status-band p { font-size: .85rem; color: var(--ink-3); margin: 0; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ticks li { padding-left: 1.5rem; position: relative; font-size: .92rem; color: var(--ink-3); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 9px; height: 1px; background: var(--cool);
}
.ticks.on li::before {
  width: 9px; height: 5px; top: .38em;
  background: none; border-left: 1px solid var(--hot); border-bottom: 1px solid var(--hot);
  transform: rotate(-45deg);
}

.limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: lim; }
.limits li {
  counter-increment: lim;
  padding: 1rem 0 1rem 3rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--ink-2);
  font-size: .96rem;
}
.limits li:last-child { border-bottom: 0; }
.limits li::before {
  content: counter(lim, decimal-leading-zero);
  position: absolute; left: 0; top: 1rem;
  font-family: var(--mono); font-size: .78rem; color: var(--faint);
}

/* ==========================================================================
   Almanac odds and ends
   ========================================================================== */

.big-stat { margin: .4rem 0 1.2rem; }
.big-stat .v {
  display: block;
  font-family: var(--display); font-variation-settings: 'opsz' 90, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(2.6rem, 5.4vw, 3.6rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.big-stat .l {
  display: block; margin-top: .5rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint);
}

.swatch {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  margin-right: .45rem; vertical-align: -1px;
  border: 1px solid rgba(0, 0, 0, .35);
}

/* ==========================================================================
   404
   ========================================================================== */

a.linkplate { display: block; color: inherit; transition: border-color .16s, background .16s; }
a.linkplate:hover { border-color: var(--line-3); background: var(--plate-2); }
a.linkplate b { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: .25rem; }
a.linkplate span { font-size: .88rem; color: var(--ink-3); }