/* ─── Storm Desk (/storm) ──────────────────────────────────────────────────
   A night-sea page: deep ink water, frosted cards, the site's three hues
   (ocean, seafoam, coral) plus sand gold for "watch". The page's glow
   follows data-level on <body> (quiet / watch / storm), which the server
   derives from real alerts, boats, power and water. No hard accent rails;
   every visual is a real number drawn. */

.sd-page {
  --sd-bg-1: #12323D;
  --sd-bg-2: #0B1F27;
  --sd-glow: rgba(79, 184, 159, 0.16);      /* seafoam: quiet */
  --sd-ink: #EAF3F4;
  --sd-ink-soft: rgba(234, 243, 244, 0.68);
  --sd-ink-faint: rgba(234, 243, 244, 0.42);
  --sd-glass: rgba(255, 255, 255, 0.055);
  --sd-glass-edge: rgba(255, 255, 255, 0.09);
  --sd-ocean: #5BB8DA;
  --sd-seafoam: #6FCDB3;
  --sd-coral: #FF8A6E;
  --sd-gold: #F2B552;
  margin: 0;
  min-height: 100vh;
  color: var(--sd-ink);
  background:
    radial-gradient(120% 70% at 50% -10%, var(--sd-glow), transparent 60%),
    linear-gradient(180deg, var(--sd-bg-1), var(--sd-bg-2) 70%);
  background-attachment: fixed;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sd-page[data-level="watch"] { --sd-glow: rgba(242, 181, 82, 0.20); }
.sd-page[data-level="storm"] {
  --sd-bg-1: #1A2730; --sd-bg-2: #0A1217;
  --sd-glow: rgba(255, 138, 110, 0.24);
}
.sd-page a { color: var(--sd-ocean); text-decoration: none; }
.sd-page a:hover { text-decoration: underline; }

.sd-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  max-width: 1120px; margin: 0 auto; padding: 16px 20px;
  font-size: 14px;
}
.sd-home { color: var(--sd-ink) !important; font-weight: 600; }
.sd-updated { color: var(--sd-ink-faint); font-size: 12.5px; text-align: right; }

/* ── Hero ── */
.sd-hero { max-width: 1120px; margin: 0 auto; padding: clamp(20px, 5vw, 56px) 20px 8px; }
.sd-eyebrow {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sd-ink-soft);
}
.sd-state {
  margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: clamp(38px, 7vw, 68px); line-height: 1.02; letter-spacing: -0.01em;
}
.sd-reasons { margin: 12px 0 0; font-size: 16px; color: var(--sd-ink-soft); min-height: 1.4em; }
.sd-reasons .sd-pill {
  display: inline-block; margin: 0 6px 6px 0; padding: 4px 11px; border-radius: 999px;
  background: var(--sd-glass); border: 1px solid var(--sd-glass-edge); font-size: 13.5px; color: var(--sd-ink);
}

/* ── The buoy ── */
.sd-buoy { max-width: 1120px; margin: 0 auto; padding: 28px 20px 8px; }
.sd-buoy-voice { max-width: 760px; }
.sd-buoy-voice p {
  margin: 0 0 12px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(21px, 3vw, 28px); line-height: 1.35; color: var(--sd-ink);
}
.sd-buoy-voice p + p { font-size: clamp(17px, 2.2vw, 20px); color: var(--sd-ink-soft); }
.sd-buoy-sign { margin: 6px 0 22px; font-size: 13.5px; color: var(--sd-ink-faint); }
.sd-buoy-sign strong { color: var(--sd-ink-soft); font-weight: 600; }

.sd-gauges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sd-gauge {
  padding: 13px 14px 12px; border-radius: 16px;
  background: var(--sd-glass); border: 1px solid var(--sd-glass-edge);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.sd-g-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-ink-faint); }
.sd-g-value { margin-top: 6px; font-family: 'Figures', 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1; display: flex; align-items: center; gap: 7px; }
.sd-g-value small { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--sd-ink-soft); }
.sd-g-sub { margin-top: 6px; font-size: 12px; color: var(--sd-ink-soft); }
.sd-arrow { width: 18px; height: 18px; flex: none; }
.sd-trace { display: block; width: 100%; height: 26px; margin-top: 7px; }

/* ── Cards ── */
.sd-grid {
  max-width: 1120px; margin: 0 auto; padding: 22px 20px 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.sd-card {
  padding: 20px 20px 18px; border-radius: 22px; min-width: 0;
  background: var(--sd-glass); border: 1px solid var(--sd-glass-edge);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.sd-alerts, .sd-power, .sd-water { grid-column: 1 / -1; }
.sd-h {
  margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sd-ink-soft);
}
.sd-big { font-family: 'Fraunces', Georgia, serif; font-size: clamp(26px, 4vw, 36px); line-height: 1.1; margin: 0 0 6px; }
.sd-muted { color: var(--sd-ink-faint); font-size: 14px; margin: 0; }
.sd-note { color: var(--sd-ink-faint); font-size: 12.5px; margin: 12px 0 0; line-height: 1.45; }
.sd-sub-h { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--sd-ink-soft); }

/* Alerts */
.sd-alerts { background: rgba(255, 138, 110, 0.10); border-color: rgba(255, 138, 110, 0.28); }
.sd-alert + .sd-alert { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sd-glass-edge); }
.sd-alert-event { font-family: 'Fraunces', Georgia, serif; font-size: 24px; margin: 0 0 4px; }
.sd-alert-when { font-size: 13.5px; color: var(--sd-ink-soft); margin: 0 0 8px; }
.sd-alert details { font-size: 14.5px; line-height: 1.55; color: var(--sd-ink-soft); }
.sd-alert summary { cursor: pointer; color: var(--sd-ink); font-size: 14px; }
.sd-alert pre { white-space: pre-wrap; font: inherit; margin: 8px 0 0; }

/* Power */
.sd-power-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.sd-villages { display: grid; gap: 7px; margin-top: 4px; }
.sd-vrow { display: grid; grid-template-columns: 150px 1fr 120px; align-items: center; gap: 10px; font-size: 14px; }
.sd-vbar { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
.sd-vbar span { display: block; height: 100%; border-radius: 99px; background: var(--sd-coral); }
.sd-vnum { text-align: right; color: var(--sd-ink-soft); font-variant-numeric: tabular-nums; }
.sd-incidents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sd-inc {
  padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.045);
}
.sd-inc-street { font-weight: 600; font-size: 15px; }
.sd-inc-where { color: var(--sd-ink-soft); font-size: 13px; }
.sd-inc-meta { margin-top: 6px; font-size: 13px; color: var(--sd-ink-soft); line-height: 1.5; }
.sd-inc-meta b { color: var(--sd-ink); font-weight: 500; }
.sd-inc.is-back { background: rgba(111, 205, 179, 0.09); }
.sd-inc.is-back .sd-inc-street::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sd-seafoam); margin: 0 7px 2px 0; }

/* Ferry */
.sd-trips { list-style: none; margin: 0; padding: 0; }
.sd-trip { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; }
.sd-trip:last-child { border-bottom: 0; }
.sd-trip-route { color: var(--sd-ink); }
.sd-trip-status { color: var(--sd-seafoam); font-size: 13px; text-align: right; }
.sd-trip.is-trouble .sd-trip-status { color: var(--sd-coral); }
.sd-trip.is-departed { opacity: 0.45; }
.sd-trip-day { padding: 12px 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sd-ink-faint); }
.sd-notice { margin: 0 0 12px; padding: 10px 13px; border-radius: 12px; background: rgba(255, 138, 110, 0.10); font-size: 14px; line-height: 1.45; }

/* Water + wind charts */
.sd-chart { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.sd-chart text { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--sd-ink-faint); }
.sd-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 8px; }
.sd-stat-v { font-family: 'Figures', 'Fraunces', Georgia, serif; font-size: 28px; line-height: 1.05; }
.sd-stat-l { font-size: 12px; color: var(--sd-ink-soft); }
.sd-highs { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; }
.sd-highs li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sd-highs li:last-child { border-bottom: 0; }
.sd-highs span:last-child { color: var(--sd-ink-soft); text-align: right; }
.sd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--sd-ink-soft); margin-top: 8px; }
.sd-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* Log */
.sd-intro { margin: 0 0 16px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--sd-ink-soft); }
.sd-log-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sd-log-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; }
.sd-log-row span:nth-child(2) { font-family: 'Figures', 'Fraunces', Georgia, serif; font-size: 17px; }
.sd-log-row span:last-child { color: var(--sd-ink-faint); min-width: 92px; text-align: right; }

.sd-foot {
  max-width: 1120px; margin: 0 auto; padding: 18px 20px 44px;
  font-size: 12.5px; line-height: 1.6; color: var(--sd-ink-faint);
}

@media (max-width: 900px) {
  .sd-gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sd-grid { grid-template-columns: 1fr; padding: 18px 16px 10px; gap: 12px; }
  .sd-top, .sd-hero, .sd-buoy, .sd-foot { padding-left: 16px; padding-right: 16px; }
  .sd-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-card { padding: 17px 16px 15px; border-radius: 18px; }
  .sd-vrow { grid-template-columns: 104px 1fr 96px; font-size: 13px; }
  .sd-log-cols { grid-template-columns: 1fr; }
  .sd-updated { display: none; }
}
@media (max-width: 720px) {
  .sd-trip.is-trouble { grid-template-columns: 1fr; }
  .sd-trip.is-trouble .sd-trip-status { text-align: left; }
}

/* ─── Visual pass: one clock, two maps, instruments ─────────────────────── */

/* Maps */
.sd-sound { max-width: 1120px; margin: 0 auto; padding: 22px 20px 0; }
.sd-map { position: relative; width: 100%; border-radius: 22px; overflow: hidden; background: #081820; }
#sd-sound-map { aspect-ratio: 16 / 9; }
.sd-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }



.sd-map-note { margin: 0; font-size: 12.5px; color: var(--sd-ink-faint); flex: 1; min-width: 220px; }

/* Buoy instruments */
.sd-listen {
  margin: 0 0 6px; border: 1px solid var(--sd-glass-edge); background: var(--sd-glass); color: var(--sd-ink);
  border-radius: 999px; padding: 8px 16px; font: 500 13.5px Inter, sans-serif; cursor: pointer;
}
.sd-listen[aria-pressed="true"] { background: rgba(111, 205, 179, 0.16); border-color: rgba(111, 205, 179, 0.4); }
.sd-listen-key { margin: 4px 0 0; font-size: 12.5px; color: var(--sd-ink-faint); }
.sd-buoy-views { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; margin: 18px 0 18px; }
.sd-buoy-views figure { margin: 0; }
.sd-eyes { width: 100%; max-width: 300px; display: block; }
.sd-eyes text { font: 500 11px Inter, sans-serif; fill: var(--sd-ink-faint); }
.sd-eyes-wrap figcaption { font-size: 12.5px; color: var(--sd-ink-faint); margin-top: 6px; line-height: 1.45; }

/* Power map */
.sd-power-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.sd-town { aspect-ratio: 1 / 1; background: #050E13; cursor: crosshair; }
.sd-tip {
  position: absolute; pointer-events: none; max-width: 220px; padding: 8px 10px; border-radius: 10px;
  background: rgba(8, 24, 32, 0.94); border: 1px solid var(--sd-glass-edge); font-size: 12.5px; line-height: 1.4; color: var(--sd-ink);
}
.sd-home-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.sd-home-btn {
  border: 1px solid var(--sd-glass-edge); background: var(--sd-glass); color: var(--sd-ink);
  border-radius: 999px; padding: 6px 13px; font: 500 12.5px Inter, sans-serif; cursor: pointer;
}
.sd-home-btn.is-placing { background: rgba(242, 181, 82, 0.18); border-color: rgba(242, 181, 82, 0.45); }
.sd-home-msg { font-size: 13.5px; color: var(--sd-ink-soft); }
.sd-home-msg b { color: var(--sd-ink); font-weight: 600; }

/* Split-flap departure board */
.sd-board { display: grid; gap: 4px; }
.sd-board-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 3px 0; }
.sd-board-row.is-departed { opacity: 0.4; }
.sd-flaps { display: inline-flex; gap: 2px; }
.sd-flap {
  position: relative; display: inline-block; width: 0.78em; height: 1.45em; line-height: 1.45em; text-align: center;
  font: 600 15px Inter, sans-serif; font-variant-numeric: tabular-nums; text-transform: uppercase; color: #F4EFE3;
  background: linear-gradient(180deg, #1D2A30 0 49%, #0E171B 51% 100%); border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04);
}
.sd-flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.55); }
.sd-flap.is-flip { animation: sd-flip 0.32s ease-in-out; }
@keyframes sd-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); filter: brightness(0.6); } 100% { transform: rotateX(0); } }
.sd-board-route { font-size: 13.5px; color: var(--sd-ink-soft); min-width: 0; }
.sd-board-row.is-trouble .sd-flap { color: var(--sd-coral); }
.sd-board-row.is-ok .sd-status .sd-flap { color: var(--sd-seafoam); }

/* Water tube */
.sd-water-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; }
.sd-tube { width: 100%; display: block; }
.sd-tube text { font: 500 10.5px Inter, sans-serif; fill: var(--sd-ink-soft); }

/* Barograph — the one paper object on the page: a drum chart in ink. */
.sd-baro { grid-column: 1 / -1; }
.sd-paper {
  border-radius: 14px; overflow: hidden;
  background: #EFE8D8;
  background-image: linear-gradient(rgba(60, 70, 120, 0.10) 1px, transparent 1px);
  background-size: 100% 26px;
}
.sd-paper svg { display: block; width: 100%; height: auto; }
.sd-paper text { font: 500 12px Inter, sans-serif; fill: rgba(40, 46, 90, 0.62); }
.sd-storms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sd-storm {
  padding: 10px 10px 8px; border-radius: 12px; background: rgba(239, 232, 216, 0.08); border: 1px solid transparent; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
}
.sd-storm.is-on { border-color: rgba(242, 181, 82, 0.5); }
.sd-storm svg { display: block; width: 100%; height: 54px; }
.sd-storm-date { font-size: 12.5px; color: var(--sd-ink); font-weight: 600; }
.sd-storm-stats { font-size: 11.5px; color: var(--sd-ink-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .sd-buoy-views { grid-template-columns: 1fr; }
  .sd-eyes { margin: 0 auto; }
  .sd-power-layout { grid-template-columns: 1fr; }
  .sd-storms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sd-sound { padding: 12px 16px 0; }
  #sd-sound-map { aspect-ratio: 4 / 5; }
  .sd-water-layout { grid-template-columns: 1fr; }
  .sd-tube { max-width: 200px; margin: 0 auto; }
  .sd-flap { font-size: 13px; }
}

/* ─── Calm pass: a horizon to arrive at, then open sections ───────────────
   The arrival is the real sky (colours set by storm.js from the sun's
   position and the cloud cover) above the Sound chart, which fades up into
   it. Below, sections sit open on the page — no boxes, more air. */
.sd-arrival {
  --sky-top: #07111C; --sky-mid: #0E1E36; --sky-bottom: #1B2C42;
  background: var(--sky-bottom); /* the horizon continues behind the map's soft top edge */
}
.sd-arrival .sd-map-note { max-width: none; margin: 0; padding: 12px 20px 0; background: #0B1F27; }
/* The sky sits behind the words only, ending on the horizon colour; the
   map's water picks up from there (storm.js applySky). */
.sd-sky { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-bottom) 100%); padding-bottom: 56px; }
.sd-arrival .sd-top { padding-top: 18px; }
.sd-arrival-text { max-width: 1120px; margin: 0 auto; padding: clamp(24px, 5vw, 64px) 20px 0; position: relative; z-index: 1; }
.sd-arrival-text, .sd-arrival .sd-top { text-shadow: 0 1px 14px rgba(4, 10, 16, 0.35); }
.sd-arrival .sd-buoy-voice { margin-top: clamp(22px, 4vw, 40px); }
.sd-arrival .sd-buoy-sign { margin-bottom: 0; }
#sd-sound-map.sd-horizon {
  aspect-ratio: auto; height: min(74vh, 780px); min-height: 420px; border-radius: 0; background: transparent;
  margin-top: -56px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.35) 10%, #000 26%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.35) 10%, #000 26%);
}
/* The credit line runs the full width in the water's own colour, so the
   map doesn't end on a strip narrower than the page. */
.sd-arrival .sd-map-note { max-width: none; margin: 0; padding: 4px max(20px, calc((100% - 1120px) / 2 + 20px)) 14px; text-align: center; background: #0B1F27; }
/* Overscroll (Safari/iOS rubber-band) shows the root, not the body. */
html:has(body.sd-page) { background: #0B1F27; }

.sd-flow { max-width: 1080px; margin: 0 auto; padding: 64px 20px 24px; display: grid; gap: clamp(64px, 9vw, 112px); }
.sd-flow .sd-card { background: none; border: 0; padding: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sd-flow .sd-alerts { background: rgba(255, 138, 110, 0.10); border-radius: 20px; padding: 20px; }
.sd-flow .sd-h {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.01em; text-transform: none; color: var(--sd-ink); margin: 0 0 22px;
}
.sd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 72px); }
.sd-readings { display: grid; gap: 18px; justify-items: start; }
.sd-readings .sd-gauges { width: 100%; gap: 6px 28px; }
.sd-readings .sd-gauge { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
.sd-readings .sd-g-value { font-size: 30px; }
.sd-close .sd-buoy-views { margin-top: 0; }
.sd-close #sd-log { margin-top: 40px; }
.sd-town { border-radius: 18px; }

@media (max-width: 900px) {
  .sd-pair { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  #sd-sound-map.sd-horizon { height: 72vh; min-height: 380px; margin-top: -24px; }
  .sd-flow { padding: 48px 16px 16px; }
  .sd-arrival-text { padding-left: 16px; padding-right: 16px; }
  .sd-readings .sd-gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* His log: folded shut by default, the heading is the toggle */
.sd-journal-fold > summary { max-width: 760px; list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; }
.sd-journal-fold > summary::-webkit-details-marker { display: none; }
.sd-journal-fold > summary .sd-h { margin: 0; }
.sd-journal-peek { grid-column: 1; font-size: 14px; color: var(--sd-ink-faint); }
.sd-journal-toggle { grid-column: 2; grid-row: 1 / span 2; border: 1px solid var(--sd-glass-edge); border-radius: 999px; padding: 7px 14px; font: 500 13px Inter, sans-serif; color: var(--sd-ink); white-space: nowrap; }
.sd-journal-toggle::before { content: 'Read the log'; }
.sd-journal-fold[open] .sd-journal-toggle::before { content: 'Close'; }
.sd-journal-fold > summary:hover .sd-journal-toggle { border-color: var(--sd-ink-faint); }
.sd-journal-fold > summary:focus-visible { outline: 2px solid var(--sd-seafoam); outline-offset: 6px; border-radius: 8px; }
.sd-journal-fold[open] > summary { margin-bottom: 22px; }
.sd-journal-fold[open] .sd-journal-peek { display: none; }
.sd-entries { display: grid; gap: 30px; max-width: 760px; }
.sd-entry-day { margin: 0 0 6px; font: 600 12px Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-ink-faint); }
.sd-entry-text { margin: 0; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--sd-ink); }
.sd-entry-stats { margin: 8px 0 0; font-size: 12.5px; color: var(--sd-ink-faint); font-variant-numeric: tabular-nums; }
.sd-entry--gale .sd-entry-day { color: var(--sd-coral); }
.sd-more {
  margin-top: 26px; border: 1px solid var(--sd-glass-edge); background: transparent; color: var(--sd-ink);
  border-radius: 999px; padding: 8px 16px; font: 500 13.5px Inter, sans-serif; cursor: pointer;
}

/* Readability: Twenty's words (his live line, his log, his introduction) are
   set in Newsreader, a text serif made for reading on screens, upright, with
   plain figures and a comfortable line length. Fraunces stays for titles. */
.sd-buoy-voice p,
.sd-entry-text,
.sd-intro {
  font-family: 'Newsreader', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: 0;
}
.sd-buoy-voice { max-width: 700px; }
.sd-buoy-voice p { font-size: clamp(22px, 2.8vw, 28px); line-height: 1.38; }
.sd-buoy-voice p + p { font-size: clamp(18px, 2vw, 21px); }
.sd-entries { max-width: 640px; gap: 34px; }
.sd-entry-text { font-size: 19px; line-height: 1.6; color: #EEF5F6; }
.sd-entry-day { color: rgba(234, 243, 244, 0.6); }
.sd-entry-stats { color: rgba(234, 243, 244, 0.55); font-size: 13px; }
.sd-intro { font-size: 18px; line-height: 1.6; max-width: 640px; }
.sd-entry-week {
  margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(242, 181, 82, 0.07);
  font-family: 'Newsreader', Georgia, serif; font-size: 17px; line-height: 1.55; color: rgba(234, 243, 244, 0.82);
}

/* Plain-language leads and the barometer */
.sd-lead {
  margin: -6px 0 26px; max-width: 680px;
  font-family: 'Newsreader', Georgia, serif; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.45; color: var(--sd-ink);
}
.sd-readline { margin: 0; max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--sd-ink-soft); font-variant-numeric: tabular-nums; }
.sd-baro-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: center; margin-bottom: 30px; }
.sd-dial { width: 100%; max-width: 300px; display: block; }
.sd-dial-num { font: 500 10.5px Inter, sans-serif; fill: rgba(44, 51, 120, 0.7); }
.sd-dial-word { font: italic 400 14px 'Newsreader', Georgia, serif; fill: rgba(44, 51, 120, 0.85); }
.sd-dial-read { font: 600 17px Inter, sans-serif; fill: #2C3378; }
.sd-dial-sub { font: 500 11px Inter, sans-serif; fill: rgba(44, 51, 120, 0.6); }
.sd-baro-explain p { margin: 0 0 12px; max-width: 560px; font-family: 'Newsreader', Georgia, serif; font-size: 17px; line-height: 1.6; color: rgba(234, 243, 244, 0.85); }
.sd-paper .sd-band { font: italic 400 12px 'Newsreader', Georgia, serif; fill: rgba(44, 51, 120, 0.55); }
.sd-paper .sd-dip { font: 600 12px Inter, sans-serif; fill: rgba(44, 51, 120, 0.85); }
@media (max-width: 720px) {
  .sd-baro-top { grid-template-columns: 1fr; gap: 18px; }
  .sd-dial { margin: 0 auto; max-width: 260px; }
}

/* Arrival text: a touch brighter so it holds on any sky. */
.sd-arrival .sd-buoy-sign { color: rgba(234, 243, 244, 0.86); }
.sd-arrival .sd-buoy-sign a { color: #BFE6F3; }
.sd-arrival .sd-reasons .sd-pill { background: rgba(6, 22, 29, 0.28); }