/* The Clock Change — the look.
 *
 * REFERENT: the Swiss railway station clock. The Mondaine/SBB face designed by
 * Hans Hilfiker in 1944 and still hanging in every Swiss station: white face,
 * heavy black bars, one red hand and nothing else on it.
 *
 * WHY THIS ONE. It is the object this page is about — institutional
 * timekeeping, the thing that decides when your evening starts — and it is a
 * register nothing else on the shelf uses:
 *
 *   fake-deadline-generator   thin serif, mono labels, near-black
 *   november-word-count       WordPerfect 5.1, CGA blue, monospace
 *   halloween-candy-trade     indigo night, chunky rounded display
 *   birthday-sky              light mid-century screen print
 *
 * It also fits what the page has to do, which is put two times side by side
 * and mark the difference. A station clock is exactly a device for showing a
 * time enormously and one thing in red.
 *
 * THE PALETTE IS MEASURED, as it is on every site here since one invented
 * colour shipped at 3.3:1 and had to be pulled:
 *
 *   ink    #16161a   17.27   body
 *   grey   #6e6e73    4.85   secondary text
 *   grey-l #8e8e93    3.12   rules and furniture only, never text
 *   red    #e4002b    4.64   text, and white sits on it at 4.85
 *
 * The red passing as body text at 4.64 is lucky and is the reason it can carry
 * the one sentence that matters rather than only decorate.
 *
 * RULES
 * 1. Red is rationed to two places: the second half of the h1, and the date of
 *    the change. It used to mark the new sunset time and the moved row in the
 *    table as well, and four red things on one screen is not an accent, it is
 *    a colour scheme — the emphasis lands nowhere when everything has it.
 *    Weight and the band carry the emphasis in the answer instead.
 * 2. Nothing is rounded except the one element that is literally a clock hand
 *    end. Hilfiker's face is squares and rectangles.
 * 3. Tabular figures everywhere a number appears. Two times sitting side by
 *    side that do not align are two times you cannot compare at a glance.
 * 4. No gradients, no shadows. A painted enamel face has neither.
 */

:root {
  --paper:  #fafaf8;
  --band:   #ececeb;   /* ink on it is 15.26 */
  --ink:    #16161a;   /* 17.27 */
  --grey:   #6e6e73;   /*  4.85 */
  --grey-l: #8e8e93;   /*  3.12 — furniture only */
  --red:    #e4002b;   /*  4.64, white on it 4.85 */

  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sheet: 46rem;
}

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

body.station {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.wrap {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 3rem 1rem 4rem;
}

/* ------------------------------------------------------------------ head */

.kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(2.25rem, 8vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--red); }

.tagline {
  font-size: 1.1rem;
  color: var(--grey);
  margin: 0 0 2.5rem;
  max-width: 32rem;
  text-wrap: pretty;
}

h2 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ink);
}

/* ----------------------------------------------------------------- where */

.where {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--grey-l);
  margin-bottom: 2rem;
}
/* Three steps in a row on a desk, stacked on a phone: a select narrow enough
   to fit three across at 390px is too narrow to read "Alaska - western
   Aleutians" in. */
.where-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.25rem;
}
.pick {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 13rem;
}
.pick-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-l);
}
.zone-select {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.3rem 0.2rem;
  max-width: 100%;
}
.zone-select:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.where-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.88rem;
  color: var(--grey);
}

/* ---------------------------------------------------------------- answer */

/* The date of the change is the headline. It used to be set as a small
 * uppercase kicker above two enormous times, which put the emphasis on the
 * numbers and left the reader to work out which night they belonged to. The
 * date is the thing being announced; the times are the detail underneath it. */
/* One line, always. A date broken across two lines with the year stranded on
 * the second reads as two facts rather than one, so the size gives way before
 * the line does: the start size here is the largest it is ever drawn, and
 * script.js takes it down until it fits the column. A clamp cannot do this —
 * it knows the viewport but not how long "Wednesday, September 30, 2026" is in
 * the language the page happens to be in. */
.cliff-when {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--red);
  margin: 0 0 0.35rem;
}

/* The clock reading, under the date it belongs to. */
.cliff-at {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--grey);
  margin: 0 0 0.6rem;
}

/* How long to wait. Boxed and tabular because it is a count, and because it
   is the one thing on this page that is different every time it is read. */
.cliff-left {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--band);
  padding: 0.4rem 0.7rem;
  margin: 0 0 1.5rem;
}

/* Bottom-aligned, not centre-aligned. The labels now carry a date, so the two
 * of them can wrap to different numbers of lines — and they will, in the
 * twelve translations still to come. Centring each column would then leave the
 * two times at different heights, which is the one thing a page whose whole
 * job is comparing two times cannot do. Aligning to the bottom makes them line
 * up for any label length. */
.cliff-times {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.t { display: flex; flex-direction: column; gap: 0.3rem; max-width: 13rem; }
/* The label now carries a date, so it is a phrase rather than a tag: wide
 * tracking on uppercase makes a phrase that length hard to read at a glance. */
.t-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--grey);
}
.t-time {
  font-size: clamp(1.9rem, 8vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* The one rounded thing on the page: a clock hand has a blunt end. */
.t-arrow {
  flex: 0 0 3rem;
  /* Raised off the baseline into the middle of the digits it points between.
   * The offset is half the time's own size, so it follows the clamp. */
  margin-bottom: calc(clamp(1.9rem, 8vw, 2.75rem) / 2 - 0.25rem);
  height: 0.5rem;
  background: var(--ink);
  border-radius: 0.25rem;
  position: relative;
}
.t-arrow::after {
  content: "";
  position: absolute;
  right: -0.1rem; top: 50%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-left: 0.85rem solid var(--ink);
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
}

/* On a phone the two columns do not fit side by side any more — the labels
 * carry a date now, so each one is a phrase rather than a tag. Rather than let
 * them wrap into two rows with an arrow pointing sideways at nothing, stack
 * them and turn the arrow to point down the page, which is the direction the
 * reading is going anyway. */
/* Stacked, the arrow points down in every language, so the RTL flip must not
   fight the rotation. */
@media (max-width: 34rem) {
  [dir="rtl"] .t-arrow { transform: rotate(90deg); }
  .cliff-times {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .t { max-width: none; }
  .t-arrow {
    transform: rotate(90deg);
    margin: 0.6rem 0 0.6rem 1.25rem;
  }
}

/* The arrow is drawn with a border triangle, and a border does not know which
 * way the page reads. In Arabic the two times swap sides but the arrowhead
 * stayed on the right, pointing from the later evening back at the earlier
 * one. Flip the whole thing. */
[dir="rtl"] .t-arrow { transform: scaleX(-1); }
[dir="rtl"] .t-time,
[dir="rtl"] .strip-table td { direction: ltr; unicode-bidi: embed; }

.cliff-say {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 2.5rem;
  max-width: 30rem;
  text-wrap: pretty;
}

.still-say {
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 0.75rem;
  max-width: 28rem;
  text-wrap: balance;
}
.still-count { margin: 0 0 2.5rem; color: var(--grey); max-width: 30rem; }

.polar {
  margin: 0 0 2rem;
  padding: 0.85rem 1rem;
  border-inline-start: 4px solid var(--red);
  background: var(--band);
  font-size: 0.95rem;
}

/* ----------------------------------------------------------------- strip */

.strip-box { margin-bottom: 2.5rem; }
.strip { margin-bottom: 0.85rem; }

/* The fortnight either side. A table, because the thing worth seeing is a
   one-hour step between two adjacent numbers, and a bar chart spent all its
   width on the twelve hours nobody was asking about. */
.strip-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.strip-table th,
.strip-table td {
  text-align: start;
  padding: 0.4rem 0.5rem 0.4rem 0;
  border-bottom: 1px solid var(--band);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink);
}
.strip-table td { text-align: end; padding-right: 0; }
.strip-table thead th {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom: 2px solid var(--ink);
}
.strip-table thead th:last-child { text-align: end; }
/* The two evenings the whole page is about, and the rule between them. That
   rule IS the clock change — it is drawn where the hour goes, between the last
   old-clock evening and the first new-clock one, so the table shows the step
   rather than needing a sentence underneath explaining that it is there. */
.strip-table tr.is-before th, .strip-table tr.is-before td,
.strip-table tr.is-after th, .strip-table tr.is-after td {
  font-weight: 700;
}
.strip-table tr.is-before th, .strip-table tr.is-before td {
  border-bottom: 3px solid var(--ink);
}

/* ----------------------------------------------------------------- facts */

.facts { margin-bottom: 2.5rem; }
.facts-more { margin: 1rem 0 0; }
.facts-more a {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.15rem;
}
.facts-more a:hover { color: var(--red); border-color: var(--red); }

/* ----------------------------------------------------- the whole fact list
 *
 * The table on /clock-change/facts/. Same sheet as the tool, so the two pages
 * cannot drift apart. */
.backlink { margin: 0 0 2rem; font-size: 0.85rem; }
.backlink a { color: var(--grey); }
.facts-all table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.5rem;
}
.facts-all caption,
.facts-all h2,
.facts-all h3 {
  text-align: start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ink);
}
.facts-all th, .facts-all td {
  text-align: start;
  vertical-align: baseline;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--band);
  font-weight: 400;
  line-height: 1.5;
}
.facts-all thead th {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom: 2px solid var(--ink);
}
.facts-all .col-n {
  width: 3rem;
  color: var(--grey-l);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--band);
}
.fact-list li:first-child { border-top: 1px solid var(--band); }

/* ------------------------------------------------------------------ deep */

.deep { margin-bottom: 2.5rem; }
.deep-item { border-bottom: 1px solid var(--band); }
.deep-item:first-of-type { border-top: 1px solid var(--band); }
.deep-item summary {
  font-weight: 600;
  padding: 0.85rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.deep-item summary::-webkit-details-marker { display: none; }
.deep-item summary::before { content: "+"; color: var(--red); font-weight: 800; }
.deep-item[open] summary::before { content: "\2212"; }
.deep-item summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.deep-body { padding: 0 0 1rem 1.2rem; max-width: 34rem; }
.deep-body p { margin: 0 0 0.85rem; }

/* ---------------------------------------------------------------- footer */

footer {
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
  font-size: 0.88rem;
  color: var(--grey);
}
.credit {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border-inline-start: 4px solid var(--grey-l);
  background: var(--band);
  color: var(--ink);
  font-size: 0.85rem;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; }
footer a { color: var(--ink); }
.fine-print { font-size: 0.82rem; }

.hidden { display: none !important; }

@media (max-width: 30rem) {
  .cliff-times { gap: 0.75rem; }
  .t-arrow { flex-basis: 2rem; }
}

/* ----------------------------------------------------- put it in a calendar
 *
 * Four controls, two of which do the same thing, because "Apple Calendar" and
 * "an .ics file" are the same mechanism and people look for both names. The
 * note under them says so rather than pretending there are four routes.
 *
 * Square, hairline-ruled, ink on paper: platform buttons are the one place a
 * page like this is tempted into brand colours, and rule 1 says the only red
 * on this page is the hour being taken away. Two of these are anchors and two
 * are buttons; they are made to look identical on purpose, because the
 * difference — leaves the page vs. builds a file here — is not the visitor's
 * problem.
 */
.cal { margin: 3rem 0 3rem; }

.cal h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 0.9rem;
}

.cal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.cal-btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.7rem 1rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cal-btn:hover { background: var(--ink); color: var(--paper); }
.cal-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.cal-note {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--grey);
  margin: 0.9rem 0 0;
}