/* Purser — the dark-room cut, served at /redesign.
 *
 * This page loads the SAME ../site.css as the daylight page. It only swaps the
 * brand token layer for the dark-room role set (the one the product desk runs
 * on, per ADR-0046 "one brand, two rooms"). site.css contains zero hardcoded
 * colours — every one of the forty roles it consumes is defined by both layers
 * under identical names — so the room changes and the structure does not.
 *
 * Everything below is what the room genuinely needs, not a recolour:
 *  1. the hero is an anti-hero — the day book itself, no photograph at all
 *  2. photography carries a dark-room treatment instead of being dropped
 *  3. the ledger's rows write themselves in on load, 130ms apart
 */

html {
  color-scheme: dark;
}

/* ── the day book ─────────────────────────────────────────────────────────── */
.hero--dark {
  padding-top: clamp(96px, 13vh, 150px);
  text-align: left;
}
.hero--dark h1 {
  max-width: 18ch;
}
.hero--dark .sub {
  max-width: 60ch;
}

.led {
  margin-top: clamp(38px, 6vh, 72px);
  max-width: 780px;
  background: var(--role-ground-2);
  border: 1px solid var(--role-sky-line);
  border-radius: var(--radius-2, 14px);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}
.led__bar,
.led__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: var(--role-muted);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.led__bar {
  border-bottom: 1px solid var(--role-sky-line);
}
.led__bar b {
  margin-left: auto;
  color: var(--role-teal-deep);
  font-weight: 500;
}
.led__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--role-jade);
  flex: none;
}
.led__foot {
  border-top: 1px solid var(--role-sky-line);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 12.5px;
}
.led__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.led__list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 18px;
}
.led__list li + li {
  border-top: 1px dashed var(--role-sky-line);
}
.led__t {
  flex: none;
  color: var(--role-muted);
  font-variant-numeric: tabular-nums;
}
.led__e {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--role-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.led__list b {
  flex: none;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.led__list b.g { color: var(--role-jade-deep); }
.led__list b.t { color: var(--role-teal-deep); }
.led__list b.p { color: var(--role-pink-deep); }
@media (max-width: 620px) {
  .led__t { display: none; }
  .led__list li { gap: 12px; }
}

/* Rows write in on load. `rise` states both ends, so animation-fill-mode
   cannot resolve the end state to a hidden underlying value. */
@media (prefers-reduced-motion: no-preference) {
  html.js .led__list li,
  html.js .led__foot {
    animation: led-rise 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(560ms + var(--i, 5) * 130ms);
  }
  html.js .led__dot {
    animation: led-pulse 2.2s ease-in-out 1.6s infinite;
  }
}
@keyframes led-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ── photography in a dark room ───────────────────────────────────────────── */
/* The daylight cut's photographs were lit and graded for a warm paper ground.
   Dropped straight onto the dark room they glare. Seating them back a stop and
   warming the edge keeps them part of the page instead of holes cut in it. */
.ph img,
.polaroid img,
.fig img {
  filter: brightness(0.9) contrast(1.04) saturate(0.94);
}
.ph,
.polaroid {
  box-shadow: 0 22px 54px var(--role-shadow-deep);
}

/* ── the daylight link reads as a door, not a nav item ────────────────────── */
.nav .lnk[href="../"] {
  color: var(--role-brass-bright);
}