/* Meanwhile — two places keeping one diary.
   Palette comes from the two places themselves: a London bus, a harbour at night,
   pine and lamplight. Type carries the split: the machine speaks in mono,
   the story speaks in serif. */

:root {
  --night:   #0E1621;   /* clear night sky */
  --deep:    #131E2B;
  --dusk:    #22303F;
  --slate:   #708294;   /* secondary text — must stay legible on --night */
  --haze:    #8497A8;
  --day:     #DCE4E8;   /* cool daylight, deliberately not cream */
  --bright:  #F3F6F7;

  --london:  #C4443A;   /* the buses — accents and rules */
  --london-ink: #E87C6D; /* the same red, legible as small text */
  --harbour: #5E8C93;   /* Lac Saint-Louis */
  --lamp:    #E9B44C;   /* sodium light */

  --display: "Fraunces", Georgia, serif;
  --prose:   "Newsreader", Georgia, serif;
  --data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --measure: 34rem;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --rule: 1px solid color-mix(in srgb, var(--haze) 22%, transparent);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: clip;          /* nothing should ever scroll sideways */
  background: var(--night);
  color: var(--day);
  font-family: var(--prose);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.075rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  /* a very slight vertical lift, like a sky */
  background-image: linear-gradient(180deg, var(--deep) 0%, var(--night) 55%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------------------- masthead */

.masthead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--gap);
  padding: clamp(1.5rem, 4vw, 3rem) var(--gap) 1.5rem;
  border-bottom: var(--rule);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 100;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bright);
}

.tagline {
  margin: 0.4rem 0 0;
  font-family: var(--prose);
  font-style: italic;
  color: var(--haze);
  font-size: 1.05rem;
}

.masthead__clock { display: flex; gap: clamp(1rem, 3vw, 2.25rem); margin: 0; }
.masthead__clock div { margin: 0; }
.masthead__clock dt {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate);
}
.masthead__clock dd {
  margin: 0.25rem 0 0; font-family: var(--data); font-size: 0.95rem; color: var(--haze);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- the story */

.story {
  padding: clamp(2rem, 5vw, 3.75rem) var(--gap);
  border-bottom: var(--rule);
  background:
    radial-gradient(120% 140% at 50% 0%,
      color-mix(in srgb, var(--lamp) 7%, transparent) 0%, transparent 62%);
}

.story__eyebrow {
  margin: 0 0 1rem; overflow-wrap: anywhere;
  font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--slate); display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center;
}

.tag {
  border: 1px solid color-mix(in srgb, var(--lamp) 45%, transparent);
  color: var(--lamp);
  padding: 0.2rem 0.55rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.64rem;
}

.story__title {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 144;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--bright);
  max-width: 22ch;
  text-wrap: balance;
}

.story__body { max-width: min(var(--measure), 100%); }
.story__body p { margin: 0 0 1.1rem; font-size: 1.12em; line-height: 1.68; }
.story__body p:first-of-type::first-letter {
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  float: left; font-size: 3.4em; line-height: 0.82;
  padding: 0.06em 0.12em 0 0; color: var(--lamp);
}
.story__foot {
  margin: 1.5rem 0 0; font-family: var(--data); font-size: 0.7rem;
  letter-spacing: 0.08em; color: var(--slate); text-transform: uppercase;
}

/* ---------------------------------------------------------- diaries */

.diaries {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
.diaries > .diary + .diary { border-left: var(--rule); }

.diary {
  /* --lum (0..1) is the light actually measured at this camera just now */
  --tint: color-mix(in srgb, var(--accent) calc(4% + var(--lum) * 9%), transparent);
  background: linear-gradient(180deg, var(--tint) 0%, transparent 32rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gap) 3rem;
  min-width: 0;
}
.diary--busy { --accent: var(--london); --accent-ink: var(--london-ink); }
.diary--calm { --accent: var(--harbour); --accent-ink: var(--harbour); }

.diary__eyebrow {
  margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate);
}
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.diary__title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 72;
  font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.05;
  color: var(--bright); letter-spacing: -0.01em;
}
.diary__place { margin: 0.3rem 0 1rem; color: var(--haze); font-size: 0.98rem; }

.diary__now { display: flex; align-items: baseline; gap: 0.6rem; }
.diary__time {
  font-family: var(--data); font-size: 1.6rem; color: var(--bright);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.diary__date {
  font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate);
}

/* the 24-hour strip: where this place sits in its own day */
.daystrip {
  position: relative; height: 4px; margin: 0.75rem 0 1.25rem;
  border-radius: 999px; overflow: visible;
  background: linear-gradient(90deg,
    var(--night) 0%, var(--dusk) 18%, var(--haze) 34%,
    var(--day) 50%, var(--haze) 66%, var(--dusk) 82%, var(--night) 100%);
}
.daystrip__marker {
  position: absolute; top: 50%; left: var(--pos);
  width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  border: 2px solid var(--night);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

.diary__view { margin: 0 0 0.9rem; position: relative; }
.diary__view img {
  display: block; width: 100%; height: auto; border-radius: 3px;
  max-height: 22rem; object-fit: cover;
  border: var(--rule);
  filter: saturate(0.92) contrast(1.03);
}
.diary__night {
  position: absolute; left: 0.6rem; bottom: 0.6rem;
  font-family: var(--data); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--day);
  background: color-mix(in srgb, var(--night) 72%, transparent);
  padding: 0.2rem 0.5rem; border-radius: 2px; backdrop-filter: blur(3px);
}

.diary__blurb {
  margin: 0 0 1.75rem; color: var(--haze); font-style: italic; font-size: 1rem;
  padding-bottom: 1.25rem; border-bottom: var(--rule);
}

/* ---------------------------------------------------------- entries */

.entries { list-style: none; margin: 0; padding: 0; }

.entry { padding: 0.95rem 0; border-bottom: var(--rule); }
.entry[data-kind="quiet"] { opacity: 0.62; }
.entry[data-kind="first-light"] .entry__line,
.entry[data-kind="nightfall"] .entry__line { color: var(--lamp); font-style: italic; }

.entry__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  margin-bottom: 0.35rem;
}
.entry__meta time {
  font-family: var(--data); font-size: 0.82rem; color: var(--accent-ink, var(--accent));
  font-variant-numeric: tabular-nums; font-weight: 500;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.05em;
  color: var(--haze);
  border: 1px solid color-mix(in srgb, var(--haze) 26%, transparent);
  border-radius: 2px; padding: 0.08rem 0.36rem;
  white-space: nowrap;
}
.chips--empty {
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.1em;
  color: var(--slate); text-transform: uppercase;
}

.entry__line { margin: 0; color: var(--day); }

/* the close-read line: a different voice, so a different face */
.entry__detail {
  margin: 0.5rem 0 0;
  padding-left: 0.85rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font-family: var(--prose); font-style: italic;
  font-size: 0.97em; color: var(--haze); line-height: 1.55;
}

.entry--waiting .entry__line { color: var(--slate); font-style: italic; }

.diary__credit {
  margin-top: 1.5rem; overflow-wrap: anywhere; font-family: var(--data); font-size: 0.68rem;
  letter-spacing: 0.04em; color: var(--slate); line-height: 1.7;
}

/* ---------------------------------------------------------- colophon */

.colophon {
  padding: clamp(2rem, 5vw, 3.5rem) var(--gap);
  border-top: var(--rule); color: var(--slate);
  display: grid; gap: 0.9rem; max-width: min(62rem, 100%);
}
.colophon p { margin: 0; font-size: 0.95rem; }
.colophon__sources { overflow-wrap: anywhere; font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.04em; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .diaries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .diaries { grid-template-columns: minmax(0, 1fr); }
  .diaries > .diary + .diary { border-left: 0; border-top: var(--rule); }
  .masthead { align-items: flex-start; }
  .story__body p:first-of-type::first-letter { font-size: 3em; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------- story rail */

.story__grid {
  display: grid;
  grid-template-columns: minmax(0, min(var(--measure), 100%)) minmax(0, 15rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.rail { border-top: 2px solid color-mix(in srgb, var(--lamp) 50%, transparent); padding-top: 0.9rem; }
.rail__head {
  margin: 0 0 1.1rem; font-family: var(--data); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); font-weight: 400;
}
.rail__item { margin-bottom: 1.4rem; padding-left: 0.8rem; border-left: 2px solid var(--edge); }
.rail__item--busy { --edge: var(--london); --edge-ink: var(--london-ink); }
.rail__item--calm { --edge: var(--harbour); --edge-ink: var(--harbour); }
.rail__place {
  margin: 0 0 0.25rem; font-family: var(--data); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--edge-ink, var(--edge));
}
.rail__fullest { margin: 0; color: var(--day); font-size: 1rem; line-height: 1.45; }
.rail__note {
  margin: 0.3rem 0 0; font-family: var(--data); font-size: 0.66rem;
  letter-spacing: 0.05em; color: var(--slate);
}

@media (max-width: 900px) {
  .story__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---------------------------------------------------------- behind the scenes */

.masthead__nav { display: flex; gap: 1.25rem; align-items: baseline; }
.masthead__nav a, .masthead__nav span {
  font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--slate); text-decoration: none;
}
.masthead__nav a:hover { color: var(--haze); }
.masthead__nav [aria-current] { color: var(--lamp); }
.plain { text-decoration: none; }

.prose-page { padding-bottom: 4rem; }

.lede { padding: clamp(2rem, 5vw, 3.5rem) var(--gap) 1rem; }
.page-title {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 144;
  font-weight: 400; font-size: clamp(1.8rem, 4.4vw, 2.9rem); line-height: 1.08;
  letter-spacing: -0.015em; color: var(--bright); max-width: 20ch; text-wrap: balance;
}
.lede__text { max-width: min(var(--measure), 100%); font-size: 1.12em; margin: 0 0 1.1rem; }
.lede__text:last-child { margin-bottom: 0; }

.band { padding: clamp(1.75rem, 4vw, 2.75rem) var(--gap); border-top: var(--rule); }
.band--limits { background: color-mix(in srgb, var(--london) 4%, transparent); }
.band__head {
  margin: 0 0 1.5rem; font-family: var(--data); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); font-weight: 400;
}
.band p { max-width: min(var(--measure), 100%); }

/* the pipeline */
.pipe { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.pipe__step {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.75rem; padding: 1.1rem 0; border-bottom: var(--rule);
}
.pipe__step:last-child { border-bottom: 0; }
.pipe__n {
  margin: 0; font-family: var(--data); font-size: 0.78rem; color: var(--slate);
  font-variant-numeric: tabular-nums; padding-top: 0.15rem;
}
.pipe__step h4 {
  margin: 0 0 0.35rem; font-family: var(--prose); font-weight: 500;
  font-size: 1.12rem; color: var(--bright);
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline;
}
.pipe__step p { margin: 0; color: var(--haze); max-width: min(var(--measure), 100%); }
.pipe__step--model .pipe__n { color: var(--lamp); }

.pill {
  font-family: var(--data); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0.16rem 0.45rem; border-radius: 999px;
  color: var(--lamp); border: 1px solid color-mix(in srgb, var(--lamp) 45%, transparent);
}
.pill--rules { color: var(--harbour); border-color: color-mix(in srgb, var(--harbour) 50%, transparent); }

.two-up {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.two-up p { margin: 0 0 1rem; }
.mini {
  margin: 0 0 0.7rem; font-family: var(--data); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); font-weight: 400;
}
.checks { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--day); }
.checks li { margin-bottom: 0.4rem; }

.aside {
  margin: 1.25rem 0 0; color: var(--haze); font-size: 0.95rem; font-style: italic;
  max-width: min(var(--measure), 100%);
}
.aside a { color: var(--lamp); }

/* tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tools { border-collapse: collapse; width: 100%; min-width: 34rem; }
.tools th {
  text-align: left; font-family: var(--data); font-size: 0.64rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
  padding: 0 0.9rem 0.6rem 0; border-bottom: var(--rule);
}
.tools td {
  padding: 0.85rem 0.9rem 0.85rem 0; border-bottom: var(--rule);
  vertical-align: top; color: var(--day);
}
.tools tr:last-child td { border-bottom: 0; }
.tools b { font-weight: 500; }
.tools .sub {
  display: block; font-family: var(--data); font-size: 0.66rem;
  letter-spacing: 0.04em; color: var(--slate); margin-top: 0.25rem;
}
.tools__rules b { color: var(--harbour); }
.yes, .no {
  font-family: var(--data); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
}
.yes { color: var(--harbour); }
.no  { color: var(--slate); }

.limits { list-style: none; margin: 0; padding: 0; }
.limits li {
  padding: 0.85rem 0 0.85rem 1rem; border-left: 2px solid color-mix(in srgb, var(--london) 45%, transparent);
  margin-bottom: 0.9rem; color: var(--haze); max-width: min(46rem, 100%);
}
.limits b { color: var(--day); font-weight: 500; }

.tally { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); margin: 0; }
.tally div { margin: 0; }
.tally dt {
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate);
}
.tally dd {
  margin: 0.3rem 0 0; font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 72;
  font-size: 2rem; color: var(--bright); font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--data); font-size: 0.86em;
  background: color-mix(in srgb, var(--haze) 12%, transparent);
  padding: 0.1em 0.34em; border-radius: 2px;
}

@media (max-width: 860px) {
  .two-up { grid-template-columns: minmax(0, 1fr); }
  .pipe__step { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

.masthead__nav--front { flex-basis: 100%; justify-content: flex-start; padding-top: 0.5rem; }
.colophon__link { color: var(--lamp); font-family: var(--data); font-size: 0.78rem;
  letter-spacing: 0.06em; text-decoration: none; }
.colophon__link:hover { text-decoration: underline; }

/* ---------------------------------------------------------- twelve places */

.band__note {
  max-width: min(46rem, 100%); color: var(--haze); margin: -0.6rem 0 1.6rem;
  font-size: 1rem;
}

.places {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  background: color-mix(in srgb, var(--haze) 16%, transparent);
  border: var(--rule);
}
.place {
  --tint: color-mix(in srgb, var(--accent) calc(3% + var(--lum) * 8%), transparent);
  background: linear-gradient(180deg, var(--tint), var(--night) 70%);
  padding: 0.9rem 1rem 1rem;
  min-width: 0;
}
.place--busy { --accent: var(--london); --accent-ink: var(--london-ink); }
.place--calm { --accent: var(--harbour); --accent-ink: var(--harbour); }

.place__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.place__title {
  margin: 0; font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 48;
  font-weight: 500; font-size: 1.12rem; color: var(--bright);
}
.place__time {
  margin: 0; font-family: var(--data); font-size: 0.9rem; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.place__where {
  margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--slate);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.place .daystrip { margin: 0.6rem 0 0.7rem; }
.place__view { margin: 0 0 0.6rem; position: relative; }
.place__view img {
  display: block; width: 100%; height: 8.5rem; object-fit: cover;
  border-radius: 2px; border: var(--rule); filter: saturate(0.9) contrast(1.03);
}
.place__night {
  position: absolute; left: 0.4rem; bottom: 0.4rem;
  font-family: var(--data); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--day);
  background: color-mix(in srgb, var(--night) 74%, transparent);
  padding: 0.12rem 0.36rem; border-radius: 2px;
}

/* ---------------------------------------------------------- the cast */

.cast {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.cast__card {
  border: var(--rule); border-left: 2px solid var(--edge);
  border-radius: 2px; padding: 0.75rem 0.85rem;
  background: color-mix(in srgb, var(--edge) 4%, transparent);
  min-width: 0;
}
.cast__card--person { --edge: var(--lamp); }
.cast__card--thing  { --edge: var(--harbour); }
.cast__name {
  margin: 0; font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 48;
  font-weight: 500; font-size: 1.1rem; color: var(--bright);
  overflow-wrap: anywhere;
}
.cast__sig {
  margin: 0.15rem 0 0.4rem; font-family: var(--data); font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--edge);
}
.cast__count, .cast__traits, .cast__met {
  margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--haze); line-height: 1.4;
}
.cast__traits { font-style: italic; }
.cast__met { color: var(--slate); font-family: var(--data); font-size: 0.68rem; }

/* ---------------------------------------------------------- merged diary */

.entry--busy { --accent: var(--london); --accent-ink: var(--london-ink); }
.entry--calm { --accent: var(--harbour); --accent-ink: var(--harbour); }
.entry__place {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink, var(--haze));
  border: 1px solid color-mix(in srgb, var(--accent, var(--haze)) 40%, transparent);
  border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap;
}
.band .entries { max-width: min(52rem, 100%); }

@media (max-width: 620px) {
  .places { grid-template-columns: minmax(0, 1fr); }
  .cast   { grid-template-columns: minmax(0, 1fr); }
}

.tally--small { gap: 1.25rem; margin-top: 1.25rem; }
.tally--small dd { font-size: 1.35rem; }
.two-up .aside { margin-top: 0.8rem; }

/* ---------------------------------------------------------- the mark */

.masthead__id { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.masthead__id .wordmark { flex: 0 0 auto; }
.masthead__id .tagline { flex-basis: 100%; }

.mark {
  width: clamp(3rem, 5.5vw, 4rem); height: auto; flex: 0 0 auto;
  overflow: visible;
}
.mark__day    { fill: color-mix(in srgb, var(--day) 62%, var(--lamp)); }
.mark__night  { fill: var(--deep); }
.mark__rim    { fill: none; stroke: var(--haze); stroke-width: 2; opacity: 0.55; }
.mark__horizon{ stroke: var(--haze); stroke-width: 1; opacity: 0.35; }
.mark__dot {
  fill: var(--london); stroke: var(--night); stroke-width: 1.2;
  fill-opacity: 0.92;
}
.mark__dot--dark { fill: var(--harbour); opacity: 0.85; }

@media (prefers-reduced-motion: no-preference) {
  .mark__dot { transition: cx 1.2s linear, cy 1.2s linear; }
}

/* ---------------------------------------------------------- full size */

.place__zoom { display: block; position: relative; text-decoration: none; }
.place__zoom img { transition: filter 0.2s ease; }
.place__zoom:hover img,
.place__zoom:focus-visible img { filter: saturate(1) contrast(1.06) brightness(1.06); }

.place__expand {
  position: absolute; right: 0.4rem; bottom: 0.4rem;
  font-family: var(--data); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--day);
  background: color-mix(in srgb, var(--night) 78%, transparent);
  padding: 0.16rem 0.42rem; border-radius: 2px;
  opacity: 0; transition: opacity 0.18s ease;
}
.place__zoom:hover .place__expand,
.place__zoom:focus-visible .place__expand { opacity: 1; }

.lightbox {
  border: 0; padding: 0; max-width: 96vw; max-height: 96vh;
  background: transparent; color: var(--day); overflow: visible;
}
.lightbox::backdrop { background: rgba(6, 10, 16, 0.92); }
.lightbox__img {
  display: block; max-width: 96vw; max-height: 86vh; width: auto; height: auto;
  border: var(--rule); border-radius: 3px; background: var(--deep);
}
.lightbox__caption {
  margin: 0.7rem 0 0; font-family: var(--data); font-size: 0.74rem;
  letter-spacing: 0.06em; color: var(--haze); text-align: center;
}
.lightbox__close {
  position: absolute; top: -2rem; right: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--haze);
}
.lightbox__close:hover { color: var(--bright); }

/* ---------------------------------------------------------- sun and moon */

.place__time { display: inline-flex; align-items: center; gap: 0.35rem; }
.phase { width: 0.95em; height: 0.95em; flex: 0 0 auto; }
.phase--day      { fill: var(--lamp); stroke: var(--lamp); }
.phase--twilight { fill: none; stroke: var(--lamp); }
.phase--night    { fill: var(--haze); stroke: none; }
.phase path      { stroke-linecap: round; }
.phase--day .phase__rays,
.phase--twilight .phase__rays,
.phase--twilight > path { fill: none; stroke-width: 1.5; }
.phase--day circle { stroke: none; }

.lightbox__links {
  margin: 0.5rem 0 0; text-align: center;
  font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.05em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
}
.lightbox__links a { color: var(--lamp); text-decoration: none; }
.lightbox__links a:hover { text-decoration: underline; }
.lightbox__sep { color: var(--slate); }

/* ---------------------------------------------------------- the archive */

.past { padding: clamp(1.75rem, 4vw, 2.5rem) var(--gap); border-top: var(--rule); }
.past:target { background: color-mix(in srgb, var(--lamp) 5%, transparent); }
.past__meta {
  margin: 0 0 0.9rem; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center;
  font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--slate);
}
.past__day { color: var(--haze); }
.past__title {
  margin: 0 0 1rem; font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 96;
  font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.1;
  letter-spacing: -0.012em; max-width: 24ch; text-wrap: balance;
}
.past__title a { color: var(--bright); text-decoration: none; }
.past__title a:hover { text-decoration: underline; text-decoration-color: var(--slate); }
.past__body { max-width: min(var(--measure), 100%); }
.past__body p { margin: 0 0 1rem; line-height: 1.65; }
.past__foot {
  margin: 1.1rem 0 0; font-family: var(--data); font-size: 0.68rem;
  letter-spacing: 0.06em; color: var(--slate); line-height: 1.8;
}
.past__cast { color: var(--haze); }

/* ---------------------------------------------------------- portraits */

.cast__face {
  display: block; width: 100%; height: 5.5rem; object-fit: cover;
  border-radius: 2px; margin-bottom: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--edge) 40%, transparent);
  filter: saturate(0.95) contrast(1.04);
}

.faces { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.6rem; padding: 0; }
.faces__item { width: 3.4rem; }
.faces__item img {
  display: block; width: 3.4rem; height: 4.2rem; object-fit: cover;
  border-radius: 2px; border: var(--rule);
}
.faces__item span {
  display: block; margin-top: 0.25rem; font-family: var(--data);
  font-size: 0.58rem; letter-spacing: 0.04em; color: var(--haze);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.faces__note {
  margin: 0 0 1.2rem; font-family: var(--data); font-size: 0.62rem;
  letter-spacing: 0.04em; color: var(--slate); line-height: 1.6;
}

/* ---------------------------------------------------------- listening */

.listen {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin: 0 0 1.4rem; max-width: min(var(--measure), 100%);
}
.listen__player {
  height: 2.1rem; flex: 1 1 18rem; min-width: 0;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.2);
}
.listen__len {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate); white-space: nowrap;
}

/* ---------------------------------------------------------- hear the twelve */

.listen-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--haze) 30%, transparent);
  border-radius: 999px; padding: 0.34rem 0.85rem 0.34rem 0.7rem;
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--haze);
}
.listen-toggle:hover { color: var(--bright); border-color: var(--haze); }
.listen-toggle[aria-pressed="true"] { color: var(--lamp); border-color: var(--lamp); }

.listen-toggle__wave { display: flex; align-items: flex-end; gap: 2px; height: 0.8rem; }
.listen-toggle__wave i {
  display: block; width: 2px; height: 30%; background: currentColor; border-radius: 1px;
}
.listen-toggle[aria-pressed="true"] .listen-toggle__wave i {
  animation: hear 1.5s ease-in-out infinite;
}
.listen-toggle__wave i:nth-child(2) { animation-delay: 0.18s; }
.listen-toggle__wave i:nth-child(3) { animation-delay: 0.36s; }
.listen-toggle__wave i:nth-child(4) { animation-delay: 0.54s; }
@keyframes hear { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .listen-toggle__wave i { animation: none !important; height: 55%; }
}

/* ---------------------------------------------------------- the good thing */

.good {
  margin: 2.2rem 0 1.6rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--haze); border-left: 3px solid var(--lamp);
  background: rgba(255, 255, 255, 0.014);
  max-width: min(var(--measure), 100%);
}
.good__head {
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--lamp); margin: 0 0 0.6rem; font-weight: 500;
}
.good__what { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.55; }
.good__source {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.05em;
  color: var(--slate); margin: 0;
}
.good__source a { color: var(--slate); text-decoration-color: var(--haze); }
.good__source a:hover { color: var(--bright); }
.good__note {
  font-size: 0.74rem; line-height: 1.5; color: var(--slate);
  margin: 0.7rem 0 0; font-style: italic;
}
.good--past { margin: 1.4rem 0 0; }

.remembered {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  counter-reset: remembered;
}
.remembered li {
  margin: 0 0 0.75rem; padding: 0 0 0 1.4rem; position: relative;
  font-size: 0.76rem; line-height: 1.5; color: var(--slate);
}
.remembered li::before {
  counter-increment: remembered; content: counter(remembered);
  position: absolute; left: 0; top: 0.05rem;
  font-family: var(--data); font-size: 0.6rem; color: var(--haze);
}
.remembered a {
  display: block; color: var(--bright); text-decoration: none;
  font-family: var(--data); font-size: 0.62rem; letter-spacing: 0.09em;
  text-transform: uppercase; margin-bottom: 0.2rem;
}
.remembered a:hover { color: var(--lamp); }
.good__mission {
  margin: 0 0 0.6rem; font-size: 0.8rem; line-height: 1.55; color: var(--slate);
}
.good__mission span {
  font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--haze); display: block; margin-bottom: 0.15rem;
}
.thread {
  list-style: none; margin: 0.9rem 0 0.8rem; padding: 0 0 0 0.9rem;
  border-left: 1px solid var(--haze);
}
.thread li {
  font-size: 0.78rem; line-height: 1.5; color: var(--slate); margin: 0 0 0.5rem;
}
.thread--now { color: var(--bright); }
.thread__when {
  font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--haze); display: block;
}

/* ---------------------------------------------------------- languages */

.langs {
  display: inline-flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.11em;
  text-transform: uppercase;
  padding-left: 0.9rem; margin-left: 0.2rem;
  border-left: 1px solid var(--haze);
}
/* the current language is a label, not a link */
.langs__now { color: var(--lamp); }
@media (max-width: 34rem) {
  .langs { border-left: 0; padding-left: 0; margin-left: 0; width: 100%; }
}
.langs a {
  color: var(--slate); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.langs a:hover { color: var(--bright); border-bottom-color: var(--lamp); }
.listen__feed {
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate); white-space: nowrap;
  text-decoration: none; border-bottom: 1px solid var(--haze); padding-bottom: 1px;
}
.listen__feed:hover { color: var(--lamp); border-bottom-color: var(--lamp); }