/* ------------------------------------------------------------------------
   Is it 5 o'clock somewhere? — set like a nautical chart.
   Cream chart paper, a faint graticule, a title block, an inset map, and a
   weathered signpost. Night mode is the same chart under a red lamp.
   ------------------------------------------------------------------------ */
:root {
  --paper: #efe7d2;
  --paper-deep: #e6dcc2;
  --ink: #1f2a3a;
  --rule: #8a7a5a;
  --muted: #6d6248;
  --sea: #3f7f94;
  --coral: #c8674f;
  --grid: rgba(76, 143, 163, 0.22);
  --grain: 0.5;
  --title-bg: rgba(239, 231, 210, 0.88);
  --post: #5a4030;
  --post-shade: rgba(0, 0, 0, 0.25);
  --map-filter: sepia(0.55) saturate(0.55) contrast(0.92) brightness(1.04);
  --map-bg: #dfe6dc;
  --focus: 0 0 0 3px rgba(200, 103, 79, 0.45);
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --paper: #1b2430; --paper-deep: #151c26; --ink: #e9e0c9; --rule: #9a8a6a; --muted: #b3a58a;
    --sea: #8fc1cf; --coral: #e3836a; --grid: rgba(143, 193, 207, 0.12); --grain: 0.25;
    --title-bg: rgba(27, 36, 48, 0.88); --post: #3a2a1f; --post-shade: rgba(0, 0, 0, 0.45);
    --map-filter: invert(1) hue-rotate(180deg) brightness(0.9) sepia(0.35); --map-bg: #26313d;
  }
}
:root[data-scheme="dark"] {
  --paper: #1b2430; --paper-deep: #151c26; --ink: #e9e0c9; --rule: #9a8a6a; --muted: #b3a58a;
  --sea: #8fc1cf; --coral: #e3836a; --grid: rgba(143, 193, 207, 0.12); --grain: 0.25;
  --title-bg: rgba(27, 36, 48, 0.88); --post: #3a2a1f; --post-shade: rgba(0, 0, 0, 0.45);
  --map-filter: invert(1) hue-rotate(180deg) brightness(0.9) sepia(0.35); --map-bg: #26313d;
}

/* ---------- Paper ---------- */
* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  position: relative;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* The graticule: a 96px grid, deliberately off-register with the page. */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: -37px -23px;
}
/* Paper grain: a tiled turbulence texture, multiplied over everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: var(--grain);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .12 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}
.page { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 24px 40px 44px; }
a { color: var(--sea); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: none; box-shadow: var(--focus); }
code, .tz { font-family: var(--mono); font-size: 0.86em; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--coral); color: var(--paper); }

/* Chart margins: a note running up the left edge, longitude ticks along the bottom. */
.margin-note, .lon-marks {
  position: absolute; z-index: 1; margin: 0; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rule);
}
.margin-note { left: 8px; top: 140px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.lon-marks { left: 40px; right: 40px; bottom: 8px; display: flex; justify-content: space-between; }
@media (max-width: 900px) { .margin-note { display: none; } .lon-marks { left: 20px; right: 20px; } }

/* ---------- Header ---------- */
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1.5px solid var(--ink); padding-bottom: 8px; flex-wrap: wrap; }
.brand { font-family: var(--display); font-style: italic; font-size: 20px; color: var(--ink); text-decoration: none; }
.brand small { font-style: normal; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; margin-left: 14px; color: var(--rule); }
.top-right { display: flex; align-items: baseline; gap: 22px; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--rule); }
.chart-no { color: inherit; text-decoration: none; }
.song::after { content: ' ♫'; opacity: 0; transition: opacity 0.3s; }
.song:hover, .song:focus-visible { color: var(--coral); }
.song:hover::after, .song:focus-visible::after { opacity: 1; }
.scheme-toggle {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 2px 0; cursor: pointer; min-height: 32px;
}
.scheme-toggle .to-day { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .scheme-toggle .to-day { display: inline; }
  :root:not([data-scheme="light"]) .scheme-toggle .to-night { display: none; }
}
:root[data-scheme="dark"] .scheme-toggle .to-day { display: inline; }
:root[data-scheme="dark"] .scheme-toggle .to-night { display: none; }
@media (max-width: 640px) { .brand small { display: none; } .chart-no { display: none; } }

/* The compass rose: sits in the top-right margin, under everything else. */
.compass { position: absolute; right: 48px; top: 110px; width: 150px; color: var(--ink); opacity: 0.75; pointer-events: none; z-index: 0; }
.compass .south { fill: var(--coral); }
.is-sheet .compass { width: 110px; top: 96px; opacity: 0.6; }
@media (max-width: 900px) { .compass { width: 84px; right: 20px; top: 84px; } }
@media (max-width: 640px) { .compass { display: none; } }
.main { position: relative; z-index: 1; }

/* ---------- Home: the title block and the inset ---------- */
.block { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 48px; align-items: start; }
.title {
  position: relative; padding: 28px 32px 26px; background: var(--title-bg);
  border: 1.5px solid var(--ink);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink);
}
.eyebrow { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.35em; text-transform: uppercase; margin: 0 0 10px; color: var(--coral); }
.title h1, .intro h1 {
  font-family: var(--display); font-variation-settings: "opsz" 144; font-weight: 900; line-height: 0.98; margin: 0; letter-spacing: -0.01em;
}
.title h1 { font-size: clamp(42px, 6.2vw, 78px); }
.title h1 em, .intro h1 em { font-style: italic; font-weight: 400; color: var(--sea); }
.sub { margin: 18px 0 0; font-size: 19px; }
.sub b { font-weight: 600; }
.fix-data { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 22px 0 0; font-size: 14px; border-top: 1px dashed var(--rule); padding-top: 14px; }
.fix-data dt { letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px; color: var(--rule); padding-top: 3px; }
.fix-data dd { margin: 0; font-variant-numeric: tabular-nums; }
.again {
  display: inline-block; margin-top: 22px; font-family: var(--display); font-style: italic; font-size: 18px;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--coral); min-height: 32px;
}
.again:hover { color: var(--coral); }

/* ---------- Maps ---------- */
.map { margin: 0; position: relative; }
.map-canvas { width: 100%; background: var(--map-bg); }
.map.inset { margin-top: 38px; }
.map.inset .map-canvas { aspect-ratio: 10 / 9; min-height: 300px; }
/* Side by side with the title block, the inset stretches to the block's foot and
   the title reserves its lines so the pair stays the same size whatever the fix. */
@media (min-width: 901px) {
  .block { align-items: stretch; }
  .title h1 { min-height: 2.94em; }   /* three lines at line-height 0.98 */
  .sub { min-height: 3em; }           /* two lines at line-height 1.5 */
  .map.inset { display: flex; flex-direction: column; margin-bottom: 1.5px; }
  .map.inset .map-canvas { aspect-ratio: auto; flex: 1 1 auto; }
}
.map.wide { margin-top: 28px; }
.map.wide .map-canvas { height: min(60vh, 620px); height: min(60svh, 620px); min-height: 300px; }
.map .map-canvas { border: 1.5px solid var(--ink); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6.5px var(--ink); }
.map figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 500; background: var(--paper); border: 1.5px solid var(--ink); border-left: 0; border-bottom: 0;
  padding: 5px 12px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leaflet-container { font-family: var(--body); background: var(--map-bg); }
.leaflet-tile-pane { filter: var(--map-filter); }
.leaflet-popup-content-wrapper { background: var(--paper); color: var(--ink); border-radius: 0; border: 1.5px solid var(--ink); box-shadow: none; font-size: 14px; }
.leaflet-popup-content { margin: 10px 14px; }
.leaflet-popup-tip { background: var(--paper); border: 1.5px solid var(--ink); border-top: 0; border-left: 0; box-shadow: none; }
.leaflet-popup-close-button { color: var(--rule) !important; }
.leaflet-bar { border-radius: 0; box-shadow: none; border: 1.5px solid var(--ink); }
.leaflet-bar a { background: var(--paper); color: var(--ink); border-bottom-color: var(--rule); border-radius: 0 !important; }
.leaflet-bar a:hover { background: var(--paper-deep); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--paper) 85%, transparent); color: var(--muted); font-size: 10px; }
.leaflet-control-attribution a { color: var(--sea); }
/* A fix: the small ringed circle a navigator marks on a chart. */
.fix { width: 14px; height: 14px; border: 3px solid var(--coral); border-radius: 50%; background: var(--paper); margin: -7px 0 0 -7px; }
.fix::after { content: ""; position: absolute; inset: -14px; border: 1px solid var(--coral); border-radius: 50%; opacity: 0.55; }

/* ---------- The signpost ---------- */
.signpost { margin-top: 64px; max-width: 760px; }
.note-heading { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 24px; margin: 0; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.arrows {
  list-style: none; margin: 30px 0 0; padding: 20px 0 26px; position: relative;
  display: grid; grid-template-columns: 1fr 24px 1fr; grid-auto-rows: minmax(58px, auto); row-gap: 6px; align-items: center;
}
.post {
  grid-column: 2; grid-row: 1 / span var(--rows); align-self: stretch; margin: -36px 0 -40px;
  background: var(--post); box-shadow: inset -6px 0 0 var(--post-shade);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.09) 0 2px, transparent 2px 7px);
}
.arrow {
  grid-row: var(--r); position: relative; z-index: 1; color: #f3e9cf; font-family: var(--display); font-weight: 900; font-size: 21px; line-height: 1.05;
  padding: 9px 18px; box-shadow: 0 4px 0 var(--post-shade); max-width: 100%;
  background: var(--paint);
}
.arrow small { display: block; font-family: var(--body); font-weight: 400; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; margin-top: 3px; }
.arrow.east { grid-column: 3; justify-self: start; padding-right: 38px; margin-left: -4px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); transform-origin: left center; }
.arrow.west { grid-column: 1; justify-self: end; padding-left: 38px; margin-right: -4px; text-align: right; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); transform-origin: right center; }
/* Faded paints, and each board nailed on a little crooked. */
.arrow:nth-child(6n+1) { --paint: #c8674f; }
.arrow:nth-child(6n+2) { --paint: #2f7f86; }
.arrow:nth-child(6n+3) { --paint: #c99a3d; color: #3a2a10; }
.arrow:nth-child(6n+4) { --paint: #4c7a5a; }
.arrow:nth-child(6n+5) { --paint: #8f5a7a; }
.arrow:nth-child(6n+6) { --paint: #3d5a78; }
.arrow:nth-child(4n+1) { transform: rotate(-2.5deg); }
.arrow:nth-child(4n+2) { transform: rotate(1.5deg); }
.arrow:nth-child(4n+3) { transform: rotate(-1deg); }
.arrow:nth-child(4n+4) { transform: rotate(2deg); }
.arrow.west:nth-child(4n+1) { transform: rotate(2.5deg); }
.arrow.west:nth-child(4n+2) { transform: rotate(-1.5deg); }
.arrow.west:nth-child(4n+3) { transform: rotate(1deg); }
.arrow.west:nth-child(4n+4) { transform: rotate(-2deg); }
.signpost-more { margin: 30px 0 0; font-size: 15px; color: var(--muted); font-style: italic; }
.signpost-more a { color: var(--ink); }
/* Ultrawide: room for three columns, so the signpost moves up beside the cards
   (title block, inset, signpost) instead of hanging below them. The compass
   follows the inset, which is no longer at the page's right edge. */
@media (min-width: 1900px) {
  .is-home .page { max-width: 1900px; }
  .is-home .main:has(.signpost) { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 6fr); gap: 0 64px; align-items: start; }
  .is-home .main:has(.signpost) .block { grid-column: 1; grid-row: 1; }
  .is-home .main:has(.signpost) .signpost { grid-column: 2; grid-row: 1; margin-top: 72px; max-width: none; }
  .is-home .page:has(.signpost) .compass { right: calc(112px + (100% - 144px) * 6 / 17); }
}

/* ---------- Sheets 2–5 ---------- */
.intro { margin-top: 56px; max-width: 720px; }
.intro h1 { font-size: clamp(36px, 5vw, 60px); }
.lede { margin: 14px 0 0; font-size: 18px; max-width: 60ch; }
.filter { display: block; margin-top: 18px; }
.filter input {
  width: 100%; max-width: 420px; padding: 10px 12px; border: 1.5px solid var(--ink); background: var(--title-bg); color: var(--ink); font: inherit; font-size: 16px; border-radius: 0;
}
.filter input::placeholder { color: var(--muted); font-style: italic; }
.filter input:focus { border-color: var(--coral); }

/* Everywhere it's five: notes per zone, with dotted leaders. */
.zone-notes { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px 40px; }
.zone-note h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.zone-note .zone-time { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 18px; color: var(--sea); white-space: nowrap; }
.leaders { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.leaders li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.leaders li::after { content: ""; flex: 1; order: 2; border-bottom: 1px dotted var(--rule); margin: 0 2px 4px; }
.leaders .leader-tail { order: 3; color: var(--muted); font-size: 13px; }

/* Hour colours: hue = hour * 15deg around the wheel, toned down to sit on paper. */
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: hsl(calc(var(--h) * 15) 50% 48%); margin-right: 8px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.2); }
.key { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 14px 0 0; }
.key .swatch { margin: 0; width: 14px; height: 14px; border-radius: 2px; }
.key-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rule); margin: 0 10px; }

/* Tables, ruled like a tide table. */
.summary { margin: 22px 0; }
.summary summary, .hour-group summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.summary summary { font-weight: 600; font-size: 15px; }
.data { width: 100%; border-collapse: collapse; font-size: 15px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.data th, .data td { padding: 8px 12px; text-align: left; border-top: 1px dotted var(--rule); vertical-align: top; }
.data thead th { border-top: 0; border-bottom: 1px solid var(--ink); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.data tbody tr:hover { background: color-mix(in srgb, var(--sea) 8%, transparent); }
.data tr.is-five td { background: color-mix(in srgb, var(--coral) 10%, transparent); }
.data.compact { max-width: 420px; margin-top: 10px; }
.hour-group { margin-top: 10px; border-top: 1px solid var(--rule); }
.hour-group:last-of-type { border-bottom: 1px solid var(--rule); }
.hour-group summary { font-family: var(--display); font-size: 20px; font-weight: 600; padding: 10px 4px; gap: 6px; list-style: none; }
.hour-group summary::-webkit-details-marker { display: none; }
.hour-group summary::after { content: '▸'; margin-left: auto; color: var(--rule); transition: transform 0.15s; }
.hour-group[open] summary::after { transform: rotate(90deg); }
.hour-group summary small { font-family: var(--body); color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 8px; }
.hour-group .data { border-top: 0; margin-bottom: 14px; }
.five-badge { display: inline-block; margin-left: 10px; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 14px; color: var(--coral); border: 1px solid var(--coral); padding: 1px 8px; transform: rotate(-2deg); }
@media (max-width: 600px) {
  .hour-group .data th:nth-child(4), .hour-group .data td:nth-child(4) { display: none; }
  .data th, .data td { padding: 8px 8px; }
  .tz { font-size: 0.8em; word-break: break-all; }
}

/* Sortable headers */
.sortable { margin-top: 26px; }
.sortable thead th { padding: 0; }
.sortable thead th button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 9px 12px; cursor: pointer; font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sortable thead th button::after { content: ' ↕'; opacity: 0.4; }
.sortable thead th[aria-sort="ascending"] button::after { content: ' ↑'; opacity: 1; }
.sortable thead th[aria-sort="descending"] button::after { content: ' ↓'; opacity: 1; }
.sortable thead th button:hover { color: var(--ink); }
.sortable thead th button:focus-visible { box-shadow: inset var(--focus); }
.tz-toggle { all: unset; cursor: pointer; font-family: var(--mono); font-size: 0.86em; color: var(--sea); border-bottom: 1px dotted currentColor; }
.tz-toggle[aria-expanded="true"] { border-bottom-style: solid; }
.tz-toggle:focus-visible { box-shadow: var(--focus); }
.places { list-style: none; margin: 6px 0 0; padding: 0; font-family: var(--body); font-size: 14px; color: var(--muted); }
.places li { display: inline; }
.places li:not(:last-child)::after { content: ' · '; }
.places[hidden] { display: none; }
#tz-table td:not(.tz) { white-space: nowrap; }
#tz-table td.tz { width: 100%; }
.zero { color: var(--rule); }

/* By local time */
.time-group { margin-top: 26px; border-top: 1px solid var(--ink); padding-top: 10px; }
.time-group.is-five { border-top: 3px double var(--coral); }
.time-group h2 { margin: 0 0 10px; font-family: var(--display); font-size: 22px; font-weight: 600; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }
.time-group-time { font-variant-numeric: tabular-nums; }
.time-group-date { color: var(--muted); font-weight: 400; font-style: italic; }
.time-group h2 small { font-family: var(--body); color: var(--muted); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.zones { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px 28px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.zone { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px dotted var(--rule); font-size: 15px; }
.zone-places { color: var(--muted); font-size: 14px; }
.no-places { color: var(--rule); font-size: 13px; font-style: italic; }
@media (max-width: 600px) { .zones { grid-template-columns: 1fr; } }

/* ---------- Sheets nav & footer ---------- */
.sheets { margin-top: 64px; font-size: 13px; letter-spacing: 0.08em; display: flex; gap: 6px 28px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 14px; }
.sheets a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; min-height: 32px; display: inline-flex; align-items: center; }
.sheets a:hover { border-color: var(--ink); }
.sheets a[aria-current="page"] { border-color: var(--coral); }
.sheet-no { font-family: var(--display); font-weight: 900; color: var(--coral); margin-right: 6px; }
.foot { margin-top: 22px; padding-bottom: calc(env(safe-area-inset-bottom) + 14px); font-size: 12px; color: var(--rule); font-style: italic; }
.foot p { margin: 0; }
.foot a { color: inherit; }

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  .page { padding: 18px 20px 40px; }
  .block { grid-template-columns: 1fr; margin-top: 56px; }
  .title { padding: 22px 20px 20px; }
  .map.inset .map-canvas { aspect-ratio: auto; height: 50vh; height: 50svh; min-height: 280px; }
  /* Narrow maps: the caption moves to the top edge so it never meets the attribution. */
  .map figcaption { bottom: auto; top: 0; left: auto; right: 0; border: 1.5px solid var(--ink); border-top: 0; border-right: 0; }
  .signpost { margin-top: 50px; }
  .arrow { font-size: 17px; padding: 8px 14px; }
  .arrow.east { padding-right: 32px; } .arrow.west { padding-left: 32px; }
  .intro { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .song::after, .hour-group summary::after { transition: none; }
}