/* The repeated hour, 1 November 2026: dial page (Object Atlas tokens). */
.rh-page main { max-width: none; padding: 0; }
.rh { --ground: var(--oa-ground); --ground-2: var(--oa-ground-2); --paper: var(--oa-paper); --muted: var(--oa-muted); --blue: var(--oa-blue);
  --line: var(--oa-line); --sheet: var(--oa-sheet); --panel: var(--wp-panel); --ink: var(--wp-ink); --ink-muted: var(--wp-muted);
  --hair: var(--wp-hair); --blue-deep: var(--oa-blue-deep); --rust: var(--wp-rust);
  --display: var(--oa-font-display); --text: var(--oa-font-body); --mono: var(--wp-font-mono); --gutter: var(--wp-gutter);
  color: var(--ink); font: 400 1.0625rem/1.6 var(--text); }
.rh .wrap { max-width: 80rem; margin: 0 auto; padding: 0 var(--gutter); }
.rh code { font: 400 .92em var(--mono); }

/* Field: the clock */
.rh .field { background: var(--ground); color: var(--paper); }
.rh .rh-hero { display: grid; grid-template-areas: "head" "fig" "lede"; gap: 1.5rem; padding-top: 2.25rem; padding-bottom: 2.5rem; }
.rh .rh-kicker { margin: 0 0 .75rem; font: 500 .8125rem/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; }
.rh h1 { margin: 0; font: 600 clamp(2.75rem, 6.2vw, 5.25rem)/.95 var(--display); letter-spacing: -.02em; }
.rh .sub { margin: 0; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; max-width: 34em; color: var(--paper); }
.rh .legend { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; font: 400 .875rem/1.35 var(--text); color: var(--muted); }
.rh .legend li { display: flex; align-items: center; gap: .5rem; }
.rh .k { width: 18px; height: 18px; flex: none; }
.rh .sw { width: 18px; height: 18px; flex: none; border-radius: 50%; }
.rh .sw.miss { border: 2px dashed var(--blue); }
.rh .sw.extra { background: var(--blue); }
.rh .head { grid-area: head; } .rh .clock { grid-area: fig; margin: 0; } .rh .rh-lede { grid-area: lede; }
.rh .dial { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.rh .clock figcaption { margin: .75rem auto 0; max-width: 560px; font: 400 .875rem/1.45 var(--text); color: var(--muted); }

/* dial marks */
.rh .dial .rim { stroke: var(--line); stroke-width: 1.5; }
.rh .dial .q { fill: var(--muted); font: 400 14px var(--mono); }
.rh .dial .trk { fill: none; stroke-linecap: round; }
.rh .dial .trk.p1 { stroke: var(--paper); stroke-width: 2; opacity: .55; }
.rh .dial .trk.p2 { stroke: var(--blue); stroke-width: 2; opacity: .55; }
.rh .dial .trk.lead { stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 4; }
.rh .dial .seam { fill: var(--ground); stroke: var(--paper); stroke-width: 1.5; }
.rh .dial .seam.r2 { stroke: var(--blue); }
.rh .dial .read { font: 500 16px var(--mono); fill: var(--paper); paint-order: stroke; stroke: var(--ground); stroke-width: 5px; stroke-linejoin: round; }
.rh .dial .read.r2 { fill: var(--blue); }
.rh .dial .read.sub { fill: var(--muted); font-weight: 400; font-size: 14px; }
.rh .dial .steplab { font: 500 14px var(--mono); fill: var(--blue); }
.rh .dial .ctr.big { font: 600 40px var(--display); fill: var(--paper); letter-spacing: -.02em; }
.rh .dial .ctr.small { font: 500 13px var(--mono); fill: var(--blue); letter-spacing: .12em; text-transform: uppercase; }
.rh .dial .step { fill: none; stroke: var(--blue); stroke-width: 2; }
.rh .dial .ahead { fill: var(--blue); }

/* shared mark styles (dial, strips, keys) */
.rh .hm { stroke-width: 2.5; stroke-linecap: round; }
.rh .sd, .rh .op, .rh .oc { stroke-width: 2; }
.rh .field .hm.ok, .rh .field .sd.ok, .rh .field .op.ok, .rh .field .oc.ok { stroke: var(--paper); fill: var(--paper); }
.rh .hm.miss, .rh .sd.miss { stroke: var(--blue); fill: none; stroke-width: 2; stroke-dasharray: 3 2.5; }
.rh .hm.miss { stroke-dasharray: 2.4 2; }
.rh .field .op.extra, .rh .field .oc.extra { fill: var(--blue); stroke: var(--blue); }

/* Sheet */
.rh .sheet { padding-top: 2.5rem; padding-bottom: 3rem; }
.rh h2 { margin: 0 0 .5rem; font: 600 clamp(1.75rem, 3.2vw, 2.5rem)/1.05 var(--display); letter-spacing: -.01em; }
.rh .intro { margin: 0 0 1.5rem; max-width: 40em; color: var(--ink-muted); }
.rh section + section { margin-top: 3.5rem; }
.rh .grid { display: grid; gap: 1rem; }
.rh .sys { background: var(--panel); border: 1px solid var(--hair); border-top: 2px solid var(--ink); padding: 1.25rem; }
.rh .sys h3 { display: flex; gap: .625rem; align-items: center; margin: 0; font: 600 1.25rem/1.25 var(--text); }
.rh .sys .spec { margin: .25rem 0 1rem; color: var(--ink-muted); }
.rh .sys p { margin: .75rem 0 0; }
.rh .sys .k .ok { stroke: var(--ink); fill: var(--ink); }
.rh .strip { display: block; width: 100%; max-width: 30rem; height: auto; }
.rh .strip .rl2 { fill: var(--blue-deep); }
.rh .strip .bar { stroke: var(--hair); stroke-width: 2; }
.rh .strip .bar.p2 { stroke: var(--blue-deep); stroke-opacity: .35; }
.rh .strip .bt { stroke: var(--hair); stroke-width: 1.5; }
.rh .strip .bl { fill: var(--ink-muted); font: 400 13px var(--mono); }
.rh .strip .ok { stroke: var(--ink); fill: var(--ink); }
.rh .strip .hm.miss, .rh .strip .sd.miss { stroke: var(--blue-deep); fill: none; }
.rh .strip .extra { fill: var(--blue-deep); stroke: var(--blue-deep); }
.rh .passes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .75rem 0 0; }
.rh .passes div { margin: 0; }
.rh .passes dt { font: 500 .8125rem/1.4 var(--mono); color: var(--ink-muted); }
.rh .passes dd { margin: .125rem 0 0; font-weight: 600; line-height: 1.4; }
.rh .passes .second dt { color: var(--blue-deep); }
.rh .sys .fix b { display: block; font: 500 .8125rem/1.4 var(--mono); color: var(--ink-muted); }
.rh .sys .rh-meta { padding-top: .75rem; border-top: 1px solid var(--hair); font-size: .9375rem; color: var(--ink-muted); }
.rh .tw { overflow-x: auto; }
.rh table { width: 100%; min-width: 0; border: 0; border-collapse: collapse; font-size: .9375rem; }
.rh th, .rh td { text-align: left; vertical-align: top; padding: .75rem .75rem .75rem 0; border-bottom: 1px solid var(--hair); }
.rh thead th { font: 500 .8125rem/1.3 var(--mono); color: var(--ink-muted); border-bottom: 2px solid var(--ink); }
.rh tbody th { font-weight: 600; }
.rh td.m { font-family: var(--mono); white-space: nowrap; }
.rh a { color: var(--ink); text-decoration-color: var(--blue-deep); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.rh a:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.rh td a { display: inline-block; padding: .75rem .25rem; margin: -.75rem -.25rem; }
.rh .note { margin: 1rem 0 0; max-width: 46em; }
.rh .how p { max-width: 46em; margin: 0; }
.rh .how p + p { margin-top: 1rem; }
.rh .how .signoff { color: var(--ink-muted); font-size: .9375rem; }
.rh .how a, .rh .note a { display: inline; }

/* weekly email: the site's standard inline form closes the page */
.rh .mq-signup { display: grid; gap: var(--wp-3); max-width: 40rem; margin: 3.5rem 0 0; padding: var(--wp-6); background: var(--wp-panel); border: var(--wp-rule) solid var(--wp-ink); }
.rh .mq-signup p { margin: 0; max-width: 50ch; }
.rh .mq-signup-title { font: 600 1.5rem/1.1 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.rh .mq-signup-label { font-weight: 700; line-height: 1.25; margin-bottom: -.25rem; }
.rh .mq-signup-row { display: flex; flex-wrap: wrap; gap: var(--wp-2); }
.rh .mq-signup-row input { flex: 1 1 14rem; min-width: 0; min-height: var(--wp-tap); padding: 0 .75rem; background: var(--wp-paper); border: 2px solid var(--wp-ink); border-radius: 0; color: var(--wp-ink); font: inherit; }
.rh form.mq-signup .mq-signup-row button { flex: 0 0 auto; min-height: var(--wp-tap); padding: 0 var(--wp-4); background: var(--wp-bio); border: 2px solid var(--wp-bio); border-radius: 0; color: var(--wp-on-bio); cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.rh form.mq-signup .mq-signup-row button:hover { background: var(--wp-cobalt-deep); border-color: var(--wp-cobalt-deep); text-decoration: underline; text-underline-offset: 4px; }
.rh .mq-signup-fine { color: var(--wp-muted); font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.rh .mq-signup-fine a { color: inherit; }

@media (max-width: 30rem) {
  .rh .mq-signup { padding: var(--wp-4); }
  .rh .mq-signup-row input, .rh form.mq-signup .mq-signup-row button { flex-basis: 100%; }
  /* table becomes stacked rows on phones */
  .rh thead { display: none; }
  .rh table, .rh tbody, .rh tr, .rh th, .rh td { display: block; }
  .rh tr { padding: .75rem 0; border-bottom: 1px solid var(--hair); }
  .rh th, .rh td { border: 0; padding: .125rem 0; }
  .rh td.m { display: inline-block; margin-right: .75rem; color: var(--ink-muted); }
  .rh td.m + td.m::before { content: "UTC "; }
}
@media (min-width: 56rem) {
  .rh .rh-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head fig" "lede fig"; grid-template-rows: auto 1fr; align-items: start; gap: 3rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .rh .grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}