:root {
    --paper:   #EFF2F0;
    --card:    #FFFFFF;
    --ink:     #131A1D;
    --soft:    #4C5A5D;
    --faint:   #7B8A8C;
    --rule:    #D9E0DD;
    --rule-2:  #C4CFCB;
    --accent:  #0C6B74;
    --wash:    #E2EDED;
    --warn:    #A24B0D;
    --warn-w:  #F6E7D9;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper:   #0E1315;
      --card:    #161E21;
      --ink:     #E7EDEA;
      --soft:    #A1AFB0;
      --faint:   #758486;
      --rule:    #232E31;
      --rule-2:  #33403F;
      --accent:  #57C1C6;
      --wash:    #132A2C;
      --warn:    #E9A362;
      --warn-w:  #2E2015;
    }
  }
  :root[data-theme="dark"] {
    --paper:   #0E1315;
    --card:    #161E21;
    --ink:     #E7EDEA;
    --soft:    #A1AFB0;
    --faint:   #758486;
    --rule:    #232E31;
    --rule-2:  #33403F;
    --accent:  #57C1C6;
    --wash:    #132A2C;
    --warn:    #E9A362;
    --warn-w:  #2E2015;
  }

  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
  }

  .page {
    max-width: 46rem;
    margin: 0 auto;
    padding: 3rem 1.25rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 3.25rem;
  }

  /* ---- masthead ---- */
  .masthead { display: flex; flex-direction: column; gap: .85rem; }
  .eyebrow {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
  }
  h1 {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(1.9rem, 6.5vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
  }
  .lede { margin: 0; color: var(--soft); max-width: 34rem; }

  /* ---- route strips ---- */
  .routes { display: grid; gap: .9rem; grid-template-columns: 1fr; }
  @media (min-width: 34rem) { .routes { grid-template-columns: 1fr 1fr; } }
  .route {
    background: var(--card);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    padding: 1.1rem 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
  }
  .route-tag {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--faint);
  }
  .leg { display: flex; align-items: baseline; gap: .6rem; }
  .code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em;
  }
  .arrow { color: var(--accent); font-size: 1.1rem; }
  .clock {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem; color: var(--soft);
    display: flex; gap: .6rem; align-items: baseline;
  }
  .route dl {
    margin: 0; display: grid; grid-template-columns: auto 1fr;
    gap: .18rem .8rem; font-size: .84rem;
    border-top: 1px solid var(--rule); padding-top: .7rem;
  }
  .route dt { color: var(--faint); }
  .route dd {
    margin: 0; color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums; font-size: .82rem;
  }

  /* ---- sections ---- */
  section { display: flex; flex-direction: column; gap: 1.1rem; }
  .sec-head { display: flex; flex-direction: column; gap: .3rem; border-bottom: 1px solid var(--rule-2); padding-bottom: .55rem; }
  h2 {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; margin: 0;
  }
  .sec-note { margin: 0; font-size: .82rem; color: var(--faint); }

  /* ---- timetable ---- */
  .tt { display: flex; flex-direction: column; }
  .row {
    display: grid;
    grid-template-columns: 4.1rem 1fr;
    gap: 0 .95rem;
    padding: .68rem 0;
    border-bottom: 1px solid var(--rule);
    align-items: start;
  }
  .row:last-child { border-bottom: 0; }
  .t {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .95rem; font-weight: 600; color: var(--ink);
    padding-top: .05rem; white-space: nowrap;
  }
  .what { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
  .what b { font-weight: 600; }
  .what span { color: var(--soft); font-size: .875rem; }
  .row.fixed .t { color: var(--warn); }
  .row.fixed { background: var(--warn-w); }
  .row.fixed { padding-left: .8rem; padding-right: .8rem; margin-left: calc(-.8rem - 3px); margin-right: -.8rem;
               border-left: 3px solid var(--warn); }
  .what .pill {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--warn); border: 1px solid var(--warn);
    padding: .05rem .35rem; margin-left: .45rem; vertical-align: .1em;
  }
  .zone-break {
    display: flex; align-items: center; gap: .7rem;
    padding: .9rem 0 .35rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  }
  .zone-break::after { content: ""; flex: 1; height: 1px; background: var(--rule-2); }

  /* ---- plain lists ---- */
  .checks { display: flex; flex-direction: column; gap: .1rem; margin: 0; padding: 0; list-style: none; }
  .checks li {
    display: grid; grid-template-columns: auto 1fr; gap: .7rem;
    padding: .6rem 0; border-bottom: 1px solid var(--rule);
    align-items: start;
  }
  .checks li:last-child { border-bottom: 0; }
  .checks li::before {
    content: ""; width: .62rem; height: .62rem; margin-top: .42rem;
    border: 1.5px solid var(--accent); border-radius: 1px;
  }
  .checks b { font-weight: 600; }
  .checks span { color: var(--soft); font-size: .875rem; display: block; }
  .checks .when {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); display: block; margin-bottom: .1rem;
  }

  /* ---- watch-outs ---- */
  .watch { display: flex; flex-direction: column; gap: .8rem; }
  .watch article {
    background: var(--card); border: 1px solid var(--rule);
    border-left: 3px solid var(--warn);
    padding: .85rem 1rem;
  }
  .watch h3 { margin: 0 0 .2rem; font-size: .95rem; font-weight: 600; }
  .watch p { margin: 0; color: var(--soft); font-size: .88rem; }

  footer {
    border-top: 1px solid var(--rule-2); padding-top: 1rem;
    font-size: .78rem; color: var(--faint);
  }
  footer p { margin: 0 0 .35rem; }
  footer a { color: var(--accent); }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }