/* Far Away Daughter. A timetable, not a health blog.
   Space Grotesk runs the board (labels, clocks, stop numbers, headings).
   IBM Plex Serif carries the letter (body copy).
   Deep ink on white. Signal orange is spent only on the route line, the pins
   and the rules that matter. Map teal is the second voice. Light gray for
   panels. No photographs anywhere. */

:root {
  --ink: #14213D;
  --paper: #FFFFFF;
  --signal: #FCA311;
  --panel: #E5E5E5;
  --panel-soft: #F3F3F3;
  --teal: #5C7C8A;
  --ink-soft: #2E3D5F;
  --board-dim: #B7C3CC;
  --measure: 46rem;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Serif", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.72;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(2rem, 5.4vw, 2.9rem); }
h2 { font-size: 1.5rem; margin-top: 2.2rem; }
h3 { font-size: 1.16rem; margin-top: 1.6rem; }
p { margin: 0 0 1.15rem; }
strong { font-weight: 600; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--teal); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--signal); color: var(--ink); padding: 8px 12px;
  font-family: var(--display); text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; z-index: 10; }

/* ---- masthead ------------------------------------------------------------ */
.masthead { border-bottom: 2px solid var(--ink); }
.masthead .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 20px; padding-top: 16px; padding-bottom: 14px;
}
.brand {
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; font-size: .96rem;
  text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: .6em;
}
.brand::before {
  content: ""; width: .68em; height: .68em; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}
.brand:hover { color: var(--ink); }
.masthead nav {
  margin-left: auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 18px; font-family: var(--display);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
}
.masthead nav a { text-decoration: none; color: var(--teal); }
.masthead nav a:hover { color: var(--ink); }
.masthead nav a.call {
  color: var(--ink); border: 2px solid var(--ink); padding: 5px 10px;
}
.masthead nav a.call:hover { background: var(--signal); border-color: var(--signal); }

/* ---- the board: two clocks and a route line, on every page --------------- */
.board { background: var(--ink); color: var(--paper); }
.board .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px 16px; padding-top: 20px; padding-bottom: 16px;
}
.clock { font-family: var(--display); min-width: 0; }
.clock-label {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--board-dim); margin: 0 0 .15rem; white-space: nowrap;
}
.clock-time {
  font-size: clamp(1.7rem, 5.6vw, 2.7rem); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap;
}
.clock-place { font-size: .82rem; color: #DDE3E8; margin: .3rem 0 0; }
.clock.stl { text-align: right; }
.route { position: relative; width: clamp(64px, 16vw, 170px); height: 22px; }
.route::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 50%;
  border-top: 3px dotted var(--signal); transform: translateY(-50%);
}
.route::after, .route i {
  content: ""; position: absolute; top: 50%; width: 12px; height: 12px;
  border-radius: 50%; background: var(--signal); transform: translateY(-50%);
}
.route::after { right: 0; }
.route i { left: 0; }
.board-note {
  grid-column: 1 / -1; margin: 0;
  font-family: var(--display); font-size: .76rem; letter-spacing: .06em;
  color: var(--board-dim);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
}
.pin-next { display: inline-flex; align-items: center; gap: .55em; }
.pin-next::before {
  content: ""; width: 10px; height: 10px; flex: none;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--signal);
}
.pin-next label {
  display: inline; margin: 0; font-size: inherit; letter-spacing: inherit;
  text-transform: uppercase; color: var(--board-dim);
}
.pin-next input {
  font-family: var(--display); font-size: .8rem; letter-spacing: .06em;
  background: transparent; color: var(--paper);
  border: 0; border-bottom: 2px dotted var(--signal); border-radius: 0;
  width: 10em; padding: 2px 0; outline: none;
}
.pin-next input::placeholder { color: #8FA0AB; }
.pin-next input:focus { border-bottom-style: solid; }

/* ---- page rhythm --------------------------------------------------------- */
main { padding: 36px 0 70px; }
.eyebrow {
  font-family: var(--display); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 .55rem;
}
.eyebrow b { color: var(--signal); font-weight: 700; }
.lede { font-size: 1.16rem; line-height: 1.6; color: var(--ink-soft); }
section { padding: 0 0 2.2rem; }
section + section { border-top: 1px solid var(--panel); padding-top: 2rem; }
section.leg + section, section + section.leg { border-top: 2px dotted var(--signal); }
.crumbs {
  font-family: var(--display); font-size: .76rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 1.2rem;
}
.crumbs a { color: var(--teal); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.meta {
  font-family: var(--display); font-size: .78rem; letter-spacing: .04em;
  color: var(--teal); margin: 0 0 1.8rem;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}

/* ---- the timetable: the hub's list of stops ------------------------------- */
.timetable { list-style: none; margin: 0 0 1.4rem; padding: 0; border-top: 2px solid var(--ink); }
.timetable li { border-bottom: 1px solid var(--panel); margin: 0; }
.timetable a {
  display: grid; grid-template-columns: 3.1rem 1fr; gap: 0 14px;
  padding: 15px 0 13px; text-decoration: none; color: var(--ink);
}
.timetable a:hover .stop-title { color: var(--teal); }
.stop-num {
  font-family: var(--display); font-weight: 700; font-size: 1.45rem;
  color: var(--signal); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.stop-title {
  font-family: var(--display); font-weight: 700; font-size: 1.06rem;
  line-height: 1.3; margin: 0 0 .3rem;
}
.stop-query { font-size: .9rem; color: var(--teal); margin: 0; line-height: 1.45; }
.stop-query::before {
  content: "searched as: "; font-family: var(--display); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---- lists that read like stops ------------------------------------------ */
ol.stops, ul.stops { padding: 0; margin: 0 0 1.4rem; list-style: none; counter-reset: stop; }
.stops li { position: relative; padding: 0 0 .95rem 2.6rem; margin: 0; }
ol.stops li::before {
  counter-increment: stop; content: counter(stop, decimal-leading-zero);
  position: absolute; left: 0; top: .12em;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--signal); font-variant-numeric: tabular-nums;
}
ul.stops li::before {
  content: ""; position: absolute; left: .5rem; top: .58em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--signal);
}
.stops li strong { font-family: var(--display); font-weight: 700; }

/* ---- panels ---------------------------------------------------------------- */
.tonight { border: 2px solid var(--signal); padding: 20px 22px 6px; margin: 2rem 0; }
.tonight h2, .clinician h2 { margin-top: 0; font-size: 1.3rem; }
.tonight h2::before, .clinician h2::before {
  content: ""; display: inline-block; width: .55em; height: .55em;
  border-radius: 50%; margin-right: .5em; vertical-align: .08em;
}
.tonight h2::before { background: var(--signal); }
.clinician {
  background: var(--panel-soft); border-left: 6px solid var(--teal);
  padding: 20px 22px 6px; margin: 2rem 0;
}
.clinician h2::before { background: var(--teal); }

.numbers { list-style: none; margin: 0 0 1.4rem; padding: 0; border-top: 2px solid var(--ink); }
.numbers li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px;
  align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--panel); margin: 0;
}
.numbers .who { font-family: var(--display); font-weight: 700; font-size: .98rem; }
.numbers .what { font-size: .9rem; color: var(--teal); grid-column: 1 / -1; margin: 0; line-height: 1.5; }
.numbers .tel {
  font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; text-decoration: none; color: var(--ink);
  border-bottom: 2px solid var(--signal);
}
@media (max-width: 480px) {
  .numbers li { grid-template-columns: 1fr; }
}

.table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--panel); vertical-align: top; }
th {
  font-family: var(--display); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); border-bottom: 2px solid var(--ink);
}

/* ---- featured slot: paid, labelled, outside everything else ---------------- */
.featured {
  border: 2px solid var(--ink); padding: 24px 22px 8px; margin: 2.6rem 0;
  position: relative; background: var(--paper);
}
.featured .tag {
  position: absolute; top: -.85em; left: 16px; margin: 0;
  background: var(--signal); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px;
}
.featured h2 { margin-top: .2rem; font-size: 1.45rem; }
.featured .disclosure {
  font-size: .9rem; color: var(--teal); line-height: 1.55;
  border-top: 1px solid var(--panel); padding-top: 12px;
}
.mention {
  border-top: 2px dotted var(--signal); border-bottom: 2px dotted var(--signal);
  padding: 16px 0 4px; margin: 2rem 0; font-size: .98rem;
}
.mention .tag {
  font-family: var(--display); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 .4rem;
}

/* ---- form ---------------------------------------------------------------- */
.form-block {
  background: var(--panel-soft); border-left: 6px solid var(--signal);
  padding: 18px 20px 22px; margin: 1.2rem 0;
}
label {
  display: block; font-family: var(--display); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
  margin: 14px 0 5px;
}
input, select {
  width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  border-radius: 0;
}
input:focus, select:focus { outline: 3px solid var(--signal); outline-offset: 1px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn {
  font-family: var(--display); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: .88rem;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  padding: 12px 20px; cursor: pointer; margin-top: 18px;
}
.btn:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.call-inline { display: inline-block; margin: 18px 0 0 14px; font-size: .98rem; }
.form-status { font-family: var(--display); font-size: .9rem; min-height: 1.4em; margin: .9rem 0 0; }
.form-note { font-size: .9rem; color: var(--teal); margin: .8rem 0 0; }

/* ---- sister desks -------------------------------------------------------- */
.sisters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 1.2rem; }
@media (max-width: 560px) { .sisters { grid-template-columns: 1fr; } }
.sister { border: 1px solid var(--panel); border-top: 3px solid var(--teal); padding: 14px 16px 6px; }
.sister h3 { margin-top: 0; font-size: 1.05rem; }
.sister p { font-size: .94rem; margin-bottom: .8rem; }

/* ---- next leg ------------------------------------------------------------ */
.next-leg { border-top: 2px solid var(--ink); margin-top: 2.6rem; padding-top: 1.2rem; }
.next-leg p { margin: 0 0 .5rem; }

/* ---- sources ------------------------------------------------------------- */
.source-list { list-style: none; margin: 0 0 1.4rem; padding: 0; border-top: 2px solid var(--ink); }
.source-list li { padding: 12px 0; border-bottom: 1px solid var(--panel); font-size: .95rem; }
.source-list .pub { font-family: var(--display); font-weight: 700; display: block; }
.source-list .url { word-break: break-all; font-size: .88rem; }
.source-list .when { display: block; font-family: var(--display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-top: 4px; }

/* ---- footer -------------------------------------------------------------- */
.sitefoot { background: var(--ink); color: #DDE3E8; padding: 34px 0 48px; font-size: .92rem; line-height: 1.6; }
.sitefoot a { color: var(--paper); text-decoration-color: var(--signal); }
.sitefoot a:hover { color: var(--signal); }
.sitefoot nav {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 1.4rem;
  font-family: var(--display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.sitefoot nav a { text-decoration: none; color: var(--board-dim); }
.sitefoot nav a:hover { color: var(--paper); }
.sitefoot p { margin: 0 0 .9rem; }
.ad-disclosure { border-left: 4px solid var(--signal); padding-left: 12px; }
.sitefoot .fine { color: var(--board-dim); font-size: .84rem; }

/* ---- phones: keep the two clocks and the route inside 390px ---------------- */
@media (max-width: 520px) {
  .board .wrap { gap: 8px 10px; }
  .clock-time { font-size: 1.35rem; }
  .clock-label { font-size: .6rem; letter-spacing: .12em; }
  .clock-place { font-size: .7rem; }
  .route { width: 44px; }
}