@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/inter-latin-wght.e0d3088e57.woff2") format("woff2-variations");
  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: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/inter-ro-wght.15d45c1b1a.woff2") format("woff2-variations");
  unicode-range: U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B, U+0326-0327;
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-display: optional;
  font-weight: 400 500;
  src: url("/assets/inter-display.465638aa11.woff2") format("woff2-variations");
}

:root {
  --paper: oklch(0.975 0.0026 85);
  --sheet: oklch(0.99 0.0024 85);
  --ink: oklch(0.19 0.003 85);
  --said: oklch(0.19 0.003 85 / 0.85);
  --quiet: oklch(0.46 0.004 85);
  --rule: oklch(0.895 0.003 85);
  --edge: oklch(0.19 0.003 85 / 0.18);
  --pale: oklch(0.915 0.0035 85);
  --t-ok: var(--denar-status-success-solid);
  --t-warn: var(--denar-status-warning-solid);
  --t-down: var(--denar-status-danger-solid);
  --t-maint: var(--denar-status-info-solid);
  --t-none: var(--pale);
  --w-ok: var(--denar-status-success-text);
  --w-warn: var(--denar-status-warning-text);
  --w-down: var(--denar-status-danger-text);
  --w-maint: var(--denar-status-info-text);
  --w-none: var(--quiet);
  --display: "Inter Display", "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --margin: clamp(1.25rem, 4.45vw, 4rem);
  --gutter: clamp(1rem, 0.857rem + 0.571vw, 1.5rem);
  --xl: clamp(2.875rem, 1.807rem + 4.381vw, 5.75rem);
  --xl-lead: clamp(3rem, 1.932rem + 4.381vw, 5.875rem);
  --l: clamp(2.375rem, 1.818rem + 2.286vw, 3.875rem);
  --l-lead: clamp(2.625rem, 2.114rem + 2.095vw, 4rem);
  --title: clamp(2rem, 1.536rem + 1.905vw, 3.25rem);
  --title-lead: clamp(2.25rem, 1.786rem + 1.905vw, 3.5rem);
  --mid: clamp(1.5rem, 1.361rem + 0.571vw, 1.875rem);
  --mid-lead: clamp(1.875rem, 1.736rem + 0.571vw, 2.25rem);
  --lead: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
  --lead-lead: clamp(1.6875rem, 1.618rem + 0.286vw, 1.875rem);
  --room-s: clamp(4rem, 3.286rem + 2.93vw, 6rem);
  --room-m: clamp(6rem, 4.929rem + 4.39vw, 9rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--denar-font-sans);
  font-size: 1rem;
  line-height: 1.625rem;
  font-feature-settings: "cv11";
}
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--denar-focus-ring-width) solid var(--denar-focus-ring); outline-offset: var(--denar-focus-ring-offset); }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
time { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: var(--margin); top: -4rem; padding: 0.5rem 1rem; background: var(--ink); color: var(--paper); border-radius: var(--denar-radius-full); z-index: 3; }
.skip:focus { top: 0.75rem; }
.wrap { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--margin); }

/* The bar: the lockup and "Stare", the way back, the one action. */
.bar { border-bottom: 1px solid var(--rule); background: var(--paper); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-size: 1.375rem; line-height: 1; white-space: nowrap; }
.brand svg { width: 2rem; height: 2rem; fill: var(--denar-brand-mark); flex-shrink: 0; }
.brand b { font-weight: 600; letter-spacing: -0.04em; }
.brand span { margin-inline-start: 0.08em; color: var(--quiet); font-weight: 500; }
.brand:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; }
.nav a { text-decoration: none; }
.nav a:not(.pill):hover { text-decoration: underline; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.25rem;
  border: 0; border-radius: var(--denar-radius-full); background: var(--ink); color: var(--paper);
  font: inherit; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pill:hover { background: oklch(0.19 0.003 85 / 0.86); }
.pill.lg { min-height: 3rem; padding: 0 1.5rem; }
.pill.hollow { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.pill.hollow:hover { background: var(--denar-brand-ink-tint); }

/* The words every page shares. */
.eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.01em; color: var(--quiet); }
.eyebrow::before { content: ""; width: 0.375rem; height: 0.375rem; background: var(--ink); flex-shrink: 0; }
.xl { font-family: var(--display); font-weight: 400; font-size: var(--xl); line-height: var(--xl-lead); letter-spacing: -0.034em; text-wrap: balance; }
.l { font-family: var(--display); font-weight: 400; font-size: var(--l); line-height: var(--l-lead); letter-spacing: -0.028em; text-wrap: balance; }
.title { font-family: var(--display); font-weight: 400; font-size: var(--title); line-height: var(--title-lead); letter-spacing: -0.028em; }
.mid { font-family: var(--display); font-weight: 400; font-size: var(--mid); line-height: var(--mid-lead); letter-spacing: -0.022em; }
.lead { font-size: var(--lead); line-height: var(--lead-lead); color: var(--said); text-wrap: pretty; }
.note { font-size: 0.875rem; line-height: 1.25rem; color: var(--quiet); }
.mid a, .rec-title a { text-decoration: none; }
.mid a:hover, .rec-title a:hover { text-decoration: underline; }

/* A state's dot and word: the only colour on the page. */
.dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--t-none); flex-shrink: 0; }
.success .dot, .dot.success { background: var(--t-ok); }
.warning .dot, .dot.warning { background: var(--t-warn); }
.danger .dot, .dot.danger { background: var(--t-down); }
.info .dot, .dot.info { background: var(--t-maint); }
.word { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap; color: var(--w-none); }
.word.success { color: var(--w-ok); }
.word.warning { color: var(--w-warn); }
.word.danger { color: var(--w-down); }
.word.info { color: var(--w-maint); }

/* The first screen: the state line, the largest paint, and its lead. */
.hero { padding-block: 4.5rem 4rem; }
.hero .xl { display: flex; align-items: baseline; gap: 0.32em; max-width: 20ch; }
.hero .xl .dot { width: 0.24em; height: 0.24em; transform: translateY(-0.14em); }
.hero .lead { margin-top: 1.5rem; max-width: 40rem; }
.stale { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding: 0.5rem 0.875rem; border-radius: var(--denar-radius-full); background: var(--denar-status-warning-tint); color: var(--w-warn); font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; }
.stale[hidden] { display: none; }
.alone { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 2.5rem; font-size: 0.9375rem; line-height: 1.25rem; color: var(--said); }
.alone .dot { background: var(--quiet); }

/* Incidents and maintenance now: each on a sheet. */
.now { display: grid; gap: 1.5rem; margin-bottom: var(--room-s); }
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--denar-radius-sheet); padding: clamp(1.25rem, 2.5vw, 2rem); }
.sheet .mid { margin-top: 0.75rem; }
.impact { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.imp { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.window { margin-top: 0.5rem; color: var(--said); }
.updates { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.upd { display: grid; gap: 0.25rem 2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
.upd:last-child { border-bottom: 0; padding-bottom: 0; }
.upd b { font-weight: 500; }
.upd .body { white-space: pre-line; text-wrap: pretty; max-width: 46rem; }
.upd .note { grid-column: 1 / -1; }
.sheet-more { margin-top: 1.25rem; font-size: 0.9375rem; font-weight: 500; }
@media (min-width: 768px) {
  .upd { grid-template-columns: 11rem minmax(0, 1fr); }
  .upd .note { grid-column: 2; }
}

/* A section's head: a hairline across, the eyebrow, the head, the sentence. */
.section { padding-bottom: var(--room-s); }
.shead { border-top: 1px solid var(--rule); padding-top: 2rem; margin-bottom: 1.5rem; display: grid; gap: 1rem var(--gutter); }
.shead .title { margin-top: 1.25rem; }
.shead .lead { max-width: 34rem; }
@media (min-width: 1024px) {
  .shead { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .shead > .eyebrow { grid-column: 1 / -1; justify-self: start; }
  .shead .title { grid-column: 1 / span 7; }
  .shead .lead { grid-column: 9 / span 4; }
}

/* The components: hairline rows, never cards. */
.rows { border-top: 0; }
.row { padding-block: 1.75rem; border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; padding-top: 1rem; }
.row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.row-head .mid { font-size: clamp(1.25rem, 1.15rem + 0.42vw, 1.5rem); line-height: clamp(1.75rem, 1.65rem + 0.42vw, 2rem); letter-spacing: -0.012em; }
.row-head .note { margin-top: 0.25rem; max-width: 40rem; }
.row-head .word { margin-top: 0.375rem; }
.bars { display: flex; gap: 3px; height: 2.25rem; margin-top: 1.25rem; }
.bars button {
  flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 2px;
  background: var(--t-none); cursor: pointer; font: inherit;
}
.bars .success { background: var(--t-ok); }
.bars .warning { background: var(--t-warn); }
.bars .danger { background: var(--t-down); }
.bars .info { background: var(--t-maint); }
.bars button:hover, .bars button[aria-expanded="true"] { filter: brightness(0.82); }
.bars button:focus-visible { outline-offset: 2px; }
.axis { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--quiet); }
.axis .up { color: var(--ink); font-variant-numeric: tabular-nums; }
.axis .d30, .axis .u30 { display: none; }
@media (max-width: 639px) {
  .bars button:nth-child(-n+60) { display: none; }
  .bars { gap: 2px; }
  .axis .d90, .axis .u90 { display: none; }
  .axis .d30, .axis .u30 { display: inline; }
  .row-head { flex-direction: column; gap: 0.25rem; }
  .row-head .word { margin-top: 0.5rem; }
}

/* A day's details: a popover, which a tap opens with no script. */
.pop {
  width: min(20rem, calc(100vw - 2.5rem)); max-height: calc(100vh - 2.5rem); overflow: auto;
  margin: auto; padding: 1rem 1.125rem; border: 1px solid var(--rule); border-radius: var(--denar-radius-frame);
  background: var(--sheet); color: var(--ink); box-shadow: 0 0.75rem 2rem oklch(0.19 0.003 85 / 0.12), 0 1px 2px oklch(0.19 0.003 85 / 0.08);
  font-size: 0.875rem; line-height: 1.25rem;
}
.pop::backdrop { background: transparent; }
.js .pop { position: fixed; inset: auto; margin: 0; }
.pop-day { font-size: 0.9375rem; font-weight: 500; }
.pop-facts { margin-top: 0.375rem; color: var(--said); }
.pop-facts li { display: flex; align-items: center; gap: 0.5rem; }
.pop-inc { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); display: grid; gap: 0.5rem; }
.pop-inc a { font-weight: 500; }
.pop-inc .note { display: block; }

/* Recent incidents and the history: by day or month, on hairlines. */
.days { display: grid; }
.day { display: grid; gap: 0.75rem var(--gutter); padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.day:first-child { border-top: 0; padding-top: 0.5rem; }
.day > h3 { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; color: var(--quiet); }
.recs { display: grid; gap: 1.5rem; }
.rec-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; letter-spacing: -0.01em; }
.rec-facts { margin-top: 0.375rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--quiet); }
.rec-last { margin-top: 0.5rem; color: var(--said); max-width: 46rem; text-wrap: pretty; }
.none { color: var(--said); }
.more { margin-top: 1.5rem; font-weight: 500; }
@media (min-width: 1024px) {
  .day { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .day > h3 { grid-column: 1 / span 3; padding-top: 0.25rem; }
  .day > .recs, .day > .none { grid-column: 4 / -1; }
}

/* An incident's own page and the history's. */
.back { display: flex; width: fit-content; margin-bottom: 2rem; font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.back:hover { text-decoration: underline; }
.actions .back { margin: 0; }
.page-head { padding-block: 4.5rem 3rem; }
.page-head .l, .page-head .xl { margin-top: 1.25rem; max-width: 24ch; }
.page-head .lead { margin-top: 1.25rem; max-width: 40rem; }
.facts { display: grid; border-top: 1px solid var(--rule); margin-bottom: var(--room-s); }
.facts > div { display: grid; gap: 0.25rem var(--gutter); padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 0.875rem; line-height: 1.25rem; color: var(--quiet); }
.facts dd { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
@media (min-width: 768px) {
  .facts > div { grid-template-columns: 12rem minmax(0, 1fr); }
}
.timeline .upd:first-child { padding-top: 1.25rem; }
.pager { display: flex; justify-content: space-between; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--rule); font-weight: 500; }
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; }

/* The forms: one sheet, one field, one action. */
.form-wrap { display: grid; gap: var(--room-s) var(--gutter); padding-bottom: var(--room-s); }
@media (min-width: 1024px) {
  .form-wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .form-wrap > .sheet { grid-column: 1 / span 7; }
  .form-wrap > .aside { grid-column: 9 / span 4; }
}
.field { display: grid; gap: 0.5rem; }
.field label, .legend { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; }
.input {
  width: 100%; min-height: 3rem; padding: 0 1rem; border: 1px solid var(--denar-border-control); border-radius: var(--denar-radius-container);
  background: var(--sheet); color: var(--ink); font: inherit; font-size: 1rem;
}
.input:focus-visible { outline-offset: 1px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.some { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.some summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; cursor: pointer; font-weight: 500; list-style: none; }
.some summary::-webkit-details-marker { display: none; }
.some summary::after { content: "+"; font-size: 1.5rem; font-weight: 300; color: var(--quiet); }
.some[open] summary::after { content: "\2212"; }
.checks { display: grid; gap: 1.25rem; padding-bottom: 1rem; }
.checks fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.25rem; }
.checks legend { padding: 0; margin-bottom: 0.5rem; color: var(--quiet); font-size: 0.875rem; }
.check { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.kept { margin-top: 1.25rem; }
.aside { display: grid; gap: 1.5rem; align-content: start; }
.aside h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; letter-spacing: -0.01em; }
.feeds { border-top: 1px solid var(--rule); }
.feeds li { display: grid; gap: 0.125rem; padding-block: 0.875rem; border-bottom: 1px solid var(--rule); }
.feeds a { font-weight: 500; }
.one { padding-bottom: var(--room-m); }
.one .actions { margin-top: 2rem; }

/* The footer: short, on the paper. */
.foot { border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--quiet); }
.foot .wrap { display: grid; gap: 1rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; color: var(--ink); font-weight: 500; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .foot .wrap { grid-template-columns: 1fr auto; align-items: start; }
  .foot nav { grid-row: 1 / span 2; grid-column: 2; justify-content: flex-end; }
}
@media (max-width: 639px) {
  .bar .wrap { min-height: 3.75rem; }
  .brand { font-size: 1.25rem; }
  .brand svg { width: 1.75rem; height: 1.75rem; }
  .nav .home { display: none; }
  .hero, .page-head { padding-top: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}