/* timeinusa.net — shared stylesheet
   Design: modern railroad timetable (US zones were created by railroads, 1883).
   Navy ink on cool paper, hairline table rules, tabular numerals,
   signal red reserved for live seconds and DST notices.
   System fonts only: zero font downloads, zero layout shift. */

:root {
  --ink: #16223e;
  --paper: #f7f8f6;
  --panel: #ffffff;
  --rule: #c7cdd8;
  --muted: #4c5670;
  --signal: #b33a2b;
  --focus: #2b4dd4;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--signal); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-head { border-bottom: 2px solid var(--ink); background: var(--panel); }
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.75rem;
  padding-top: .9rem; padding-bottom: .9rem;
}
.brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: -.01em; }
.brand span { color: var(--signal); }
.site-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.site-nav a { text-decoration: none; font-size: .95rem; color: var(--muted); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--signal); }

/* Breadcrumb */
.crumbs { font-size: .85rem; color: var(--muted); padding: .8rem 0 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--rule); }
.crumbs a { color: var(--muted); }

/* Clock hero — the timetable board */
.board { padding: 1.5rem 0 2rem; }
.board h1 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0 0 .25rem; letter-spacing: -.01em; }
.board .zone-line { color: var(--muted); margin: 0 0 1rem; }
.clock {
  font-size: clamp(3.2rem, 13vw, 7.5rem);
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.05;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .5rem 0;
  white-space: nowrap;
}
.clock .sec { color: var(--signal); }
.clock .ampm { font-size: .35em; font-weight: 600; letter-spacing: 0; margin-left: .25em; color: var(--muted); }
.board .today { margin: .6rem 0 0; font-size: 1.1rem; }
.board .dst-note { margin: .35rem 0 0; color: var(--signal); font-size: .95rem; }

/* Content */
main { padding-bottom: 3rem; }
section { margin-top: 2.5rem; }
h2 { font-size: 1.35rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .4rem; }
p, li { max-width: 72ch; }
p { margin: .6rem 0; }
.lede { font-size: 1.05rem; }

/* Timetable-style data tables */
table { border-collapse: collapse; width: 100%; max-width: 46rem; background: var(--panel); }
caption { text-align: left; font-weight: 600; padding-bottom: .5rem; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--rule); font-size: .95rem; }
thead th { border-bottom: 2px solid var(--ink); font-size: .85rem; }
tbody th { font-weight: 600; }
td.num { font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }

/* Zone chips */
.chip {
  display: inline-block; border: 1px solid var(--ink); border-radius: 2px;
  padding: .1rem .5rem; font-size: .8rem; font-weight: 600; background: var(--panel);
}

/* Link directories (states, cities) */
.dir { columns: 3 14rem; column-gap: 2rem; padding: 0; margin: .5rem 0 0; list-style: none; }
.dir li { break-inside: avoid; padding: .2rem 0; border-bottom: 1px solid var(--rule); max-width: none; }
.dir a { text-decoration: none; }
.dir small { color: var(--muted); float: right; }

/* Zone grid on homepage */
.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1rem; }
.zones article { background: var(--panel); padding: 1rem 1.1rem; }
.zones h3 { margin: 0 0 .2rem; }
.zones .zclock { font-size: 2rem; font-weight: 650; letter-spacing: -.02em; }
.zones .zclock .sec { color: var(--signal); }
.zones p { font-size: .9rem; color: var(--muted); margin: .3rem 0 0; }
.zones a { text-decoration: none; }

/* FAQ */
.faq h3 { margin-top: 1.4rem; }

/* Footer */
.site-foot { border-top: 2px solid var(--ink); background: var(--panel); margin-top: 2rem; }
.site-foot .wrap { padding-top: 1.25rem; padding-bottom: 1.5rem; font-size: .9rem; color: var(--muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: .75rem; }
.site-foot a { color: var(--muted); }

@media (max-width: 40rem) {
  .dir { columns: 2 9rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}