/* Hallmark - macrostructure: Posting chart / mooring signs; genre: atmospheric; theme: locked Night Sea; type: Anybody + Newsreader + Azeret Mono; pre-emit critique: P4 H4 E4 S5 R4 V4. Scope: hero; shared chrome retained. */
/* Hallmark · macrostructure: Posting chart over Ecosystem Index (real Caribbean, checked notices) · genre: atmospheric · tone: Caribbean noticeboard, geographic sign rail
 * theme: REFERENCE-LOCK-V2 "Posting chart" (paper abyss #02070d, one warm accent gold #ffcf5c, island colours only on actual notices and island marks) · type: Bricolage Grotesque display, Schibsted Grotesk body, Martian Mono data
 * nav/footer: shell, untouched · pre-emit critique: P4 H4 E4 S5 R4 V4 · rejected default: centred title over equal classifieds cards
 * round-2 presentation gates: In progress; see unit audit. Eyebrows: one per page. */

:root {
  --wf-abyss: #02070d;
  --wf-deep: #06202c;
  --wf-ink: #e8f6f3;
  --wf-muted: #9db3ae;
  --wf-rule: color-mix(in srgb, var(--wf-ink) 16%, transparent);
  --wf-scrim: var(--wf-abyss);
  --wf-gold: #ffcf5c;
  --wf-coral: #ff6b57;
  --wf-sand: #f4e8cf;
  --wf-display: "Wharf Display", "Bricolage Metric Fallback", ui-sans-serif, system-ui, sans-serif;
  --wf-pad: max(clamp(16px, 3vw, 40px), calc(50% - 680px));
  --wf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --isl: var(--wf-gold);
  /* island colours: used by the stalls, the filter lanterns and the hero lanterns (the scene reads these) */
  --wf-isl-cayman: #ff6b57;
  --wf-isl-jamaica: #ffcf5c;
  --wf-isl-barbados: #19e6d4;
  --wf-isl-trinidad-tobago: #8ff5c0;
  --wf-isl-guyana: #a6e35a;
  --wf-isl-bahamas: #5cc8ff;
  --wf-isl-aruba: #ffa24d;
  --wf-isl-honduras: #e56b9b;
  --wf-isl-cuba: #f4e8cf;
  --wf-isl-bermuda: #9db7ff;
}

/* Fonts: the same files as the release css under new family names. The release declares its own faces for the old names (so a redeclare of
   those does not win reliably), and its fallback was system-ui, which re-wrapped the /wharf/rules/ heading when the face arrived. Here the
   fallback is size-matched to the real face (measured: Schibsted Grotesk is 4.5 percent wider than Arial) and the headings are sized in em. */
@font-face { font-family: "Wharf Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext-wght-normal-5.3.0.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Wharf Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-wght-normal-5.3.0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2192, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Wharf Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/fonts/martian-mono-latin-wght-normal-5.3.0.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 104.5%; }
/* Same shared Bricolage bytes, isolated family: preserve the round-1 no-late-swap
   protection even when the shared TYPE3 face changes its display policy. */
@font-face { font-family: "Wharf Display"; src: url("/assets/units/type/bricolage-grotesque-latin-wdth-normal.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: optional; }
html[data-glowmap] {
  --n4-display: var(--wf-display);
  --glow-font: "Wharf Grotesk", "Schibsted Fallback", system-ui, sans-serif;
  --glow-mono: "Wharf Mono", "Martian Mono Fallback", ui-monospace, monospace;
}

.wf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wf-glyph { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* The chart is the place; the notices are its instrument. */
html, body { overflow-x: clip; }
.collective-body .wharf-hero {
  position: relative; isolation: isolate; overflow: clip; min-height: 740px;
  padding: 0 var(--wf-pad); background: var(--wf-abyss); color: var(--wf-ink);
  border-bottom: 1px solid var(--wf-rule);
}
.wharf-hero > .eco-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.wharf-hero > *:not(.eco-canvas) { position: relative; z-index: 2; }
.wharf-hero[data-eco="off"] > .eco-canvas, .wharf-hero[data-eco="error"] > .eco-canvas { display: none; }
.collective-body .wharf-chart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); }
.wharf-chart .wh-copy { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
.wh-map { grid-column: 2; padding-top: 24px; margin-bottom: 16px; min-width: 0; }
.wharf-chart > .wh-map { z-index: auto; }
.wh-map-surface { position: relative; z-index: 0; height: clamp(176px, 19vw, 256px); }
.wh-chart-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.wharf-chart::before { content: ""; position: absolute; z-index: 1; inset: 0 52% 0 0; background: var(--wf-abyss); opacity: .88; pointer-events: none; }
.wh-copy { width: 48%; max-width: 46rem; padding-block: 96px 48px; }
.wh-eyebrow { margin: 0 0 32px; font: 500 12px/1.5 var(--board-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--wf-gold); }
html[data-glowmap] .wharf-hero h1 {
  margin: 0; min-width: 0; overflow-wrap: anywhere; font-family: var(--n4-display, var(--glow-font)); font-style: normal;
  font-weight: 700; font-stretch: 85%; font-variation-settings: "wdth" 85, "wght" 700;
  font-size: clamp(96px, 13vw, 188px); line-height: 1; letter-spacing: -.065em; color: var(--wf-ink);
}
.wharf-chart h1 > span { display: block; font-size: .48em; letter-spacing: -.045em; line-height: 1; }
.wh-lede { margin: 24px 0 0; max-width: 36rem; font: 400 20px/1.5 var(--glow-font); color: var(--wf-ink); }
.wh-actions { display: grid; grid-template-columns: max-content max-content; justify-content: start; align-items: center; gap: 8px 24px; margin: 32px 0 0; }
.wh-post { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; white-space: nowrap; border-radius: 2px; background: var(--wf-gold); color: var(--wf-abyss); text-decoration: none; font: 600 15px/1 var(--glow-font); transition: transform .18s var(--wf-ease); }
.collective-body .wh-post { color: var(--wf-abyss); }
.wh-post:hover { transform: translateY(-2px); }
.wh-post:active { transform: translateY(0); }
.collective-body .wharf-hero a:focus-visible { outline: 2px solid var(--wf-ink); outline-offset: 4px; }
.wh-doorway { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; font: 12px/1.5 var(--board-mono); color: var(--wf-ink); }
.wh-doorway:hover { text-decoration-thickness: 2px; }
.wh-doorway:active { opacity: .75; }
.wharf-chart > .wh-instrument { display: grid; grid-template-rows: minmax(48px, auto) minmax(112px, auto) 288px; grid-column: 2; grid-row: 2; min-width: 0; }
.wh-instrument-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--wf-muted); font: 11px/1.5 var(--board-mono); color: var(--wf-ink); }
.wh-instrument-head a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; white-space: nowrap; color: var(--wf-ink); }
.wh-notice-window { height: 288px; min-height: 288px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--wf-muted) var(--wf-deep); scrollbar-width: thin; background: var(--wf-abyss); }
.wh-notice-window:focus-visible { outline: 2px solid var(--wf-ink); outline-offset: 3px; }
.wh-empty { margin: 0; min-height: 288px; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 24px; border-inline: 1px solid var(--wf-rule); color: var(--wf-ink); }
.wh-empty strong { display: block; max-width: 8em; font: 700 44px/1.05 var(--n4-display, var(--glow-font)); font-variation-settings: "wdth" 75, "wght" 700; letter-spacing: -.035em; }
.wh-empty span { max-width: 24em; font: 14px/1.5 var(--glow-font); color: var(--wf-muted); }
.wh-sign-list { list-style: none; padding: 0; margin: 0; }
.wh-sign { --sign: var(--wf-gold); margin: 0; border-bottom: 1px solid var(--wf-rule); }
.wh-sign[data-notice-island="cayman"] { --sign: var(--wf-coral); }
.wh-sign-link { display: block; min-height: 128px; padding: 16px 20px; color: var(--wf-ink); text-decoration: none; }
.collective-body .wh-sign-link { color: var(--wf-ink); }
.wh-sign-link:hover { background: var(--wf-deep); }
.wh-sign-link:active { opacity: .8; }
.wh-sign-meta { display: flex; gap: 12px; justify-content: space-between; font: 12px/1.5 var(--board-mono); color: var(--sign); }
.wh-sign-link strong { display: block; margin-block: 12px; font: 700 24px/1.12 var(--n4-display, var(--glow-font)); font-variation-settings: "wdth" 75, "wght" 700; overflow-wrap: anywhere; }
.wh-sign-end { display: block; font: 12px/1.5 var(--board-mono); color: var(--wf-muted); }
.wh-pinned-sign { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; background: var(--wf-gold); color: var(--wf-abyss); text-decoration: none; min-height: 112px; }
.collective-body .wh-pinned-sign { color: var(--wf-abyss); }
.wh-pinned-sign > span { display: flex; justify-content: space-between; font: 11px/1.5 var(--board-mono); }
.wh-pinned-sign strong { font: 700 clamp(20px, 1.8vw, 26px)/1.15 var(--n4-display, var(--glow-font)); font-variation-settings: "wdth" 75, "wght" 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.wh-pinned-sign:hover { text-decoration: underline; text-underline-offset: 4px; }
.wh-pinned-sign:active { opacity: .8; }
.wharf-chart > .wh-bottom { grid-column: 1 / -1; display: flex; gap: 24px; justify-content: space-between; margin-top: 24px; border-top: 1px solid var(--wf-rule); padding-block: 20px; }
.mday { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
.mday li { display: flex; align-items: baseline; gap: 12px; min-height: 44px; font: 11px/1.5 var(--board-mono); color: var(--wf-muted); }
.mday b { min-width: 1.5em; font: 700 40px/1 var(--n4-display, var(--glow-font)); font-variation-settings: "wdth" 75, "wght" 700; color: var(--wf-ink); font-variant-numeric: tabular-nums; }
.mday [data-mday-soon] { color: var(--wf-gold); }
.wh-chart-key { margin: 0; padding-inline-end: 64px; font: 11px/1.7 var(--board-mono); color: var(--wf-muted); }
.collective-body .wharf-hero--lite { min-height: clamp(320px, 42svh, 420px); background: var(--wf-abyss) url('/assets/units/wharf3/chart.svg') 70% 40% / cover no-repeat; }
.wharf-hero--lite .wh-copy { width: 100%; max-width: 60rem; padding-block: clamp(96px, 15vh, 140px) clamp(24px, 4vw, 40px); }
html[data-glowmap] .wharf-hero--lite h1 { font-size: clamp(36px, 5.6vw, 76px); line-height: 1.02; max-width: 17em; text-wrap: balance; letter-spacing: -.035em; font-weight: 700; font-variation-settings: "wdth" 75, "wght" 700; }
.wharf-hero--lite .wh-lede { max-width: 37rem; font-size: 16px; }
.wharf-hero--lite::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--wf-abyss) 88%, transparent); }
@media (max-width: 1000px) and (min-width: 701px) {
  .wh-chart-key { display: none; }
  .wharf-chart .wh-lede { max-width: 18rem; font-size: 18px; }
}
/* Set CTA rows before font loading; text width never decides the row count. */
@media (max-width: 384px), (min-width: 701px) and (max-width: 1000px) {
  .wharf-chart .wh-actions { grid-template-columns: max-content; }
}
@media (max-width: 700px) {
  .collective-body .wharf-chart { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: 0; }
  .wharf-chart::before { display: none; }
  .wharf-chart .wh-copy { grid-row: 1; padding: 48px 0 24px; }
  .wh-map { grid-column: 1; grid-row: 2; padding-top: 0; }
  .wh-map-surface { height: clamp(136px, 43vw, 224px); }
  .wharf-chart .wh-eyebrow { margin-bottom: 16px; }
  html[data-glowmap] .wharf-chart h1 { font-size: clamp(60px, 20vw, 136px); line-height: 1; letter-spacing: -.06em; white-space: nowrap; }
  .wharf-chart h1 > span { display: inline; font-size: 1em; }
  .wharf-chart .wh-lede { font-size: 17px; margin-top: 20px; }
  .wharf-chart .wh-actions { gap: 8px 16px; margin-top: 24px; }
  .wharf-chart > .wh-instrument { grid-column: 1; grid-row: 3; }
  .wh-empty { padding: 16px 20px; gap: 12px; }
  .wh-empty strong { font-size: 36px; max-width: 10em; }
  .wh-pinned-sign strong { font-size: 26px; }
  .wharf-chart > .wh-bottom { padding-block: 16px; }
  .wh-chart-key { display: none; }
  .mday { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 12px; }
  .mday li { display: block; min-height: 72px; font-size: 12px; }
  .mday b { display: block; font-size: 36px; margin-bottom: 8px; }
  .collective-body .wharf-hero--lite { min-height: 360px; }
  html[data-glowmap] .wharf-hero--lite h1 { font-size: clamp(32px, 9vw, 44px); }
  .wharf-hero--lite .wh-copy { width: 100%; }
}


/* ---------- the board below the hero ---------- */
.collective-body .collective-layout.canvas { padding-top: 36px; }
.island-rail .island-options button, .category-nav button, .collab-tags button { transition: background-color 0.18s var(--wf-ease), border-color 0.18s var(--wf-ease); }
.collective-body [data-island="cayman"], .collective-body [data-stall-island="cayman"] { --isl: var(--wf-isl-cayman); }
.collective-body [data-island="jamaica"], .collective-body [data-stall-island="jamaica"] { --isl: var(--wf-isl-jamaica); }
.collective-body [data-island="barbados"], .collective-body [data-stall-island="barbados"] { --isl: var(--wf-isl-barbados); }
.collective-body [data-island="trinidad-tobago"], .collective-body [data-stall-island="trinidad-tobago"] { --isl: var(--wf-isl-trinidad-tobago); }
.collective-body [data-island="guyana"], .collective-body [data-stall-island="guyana"] { --isl: var(--wf-isl-guyana); }
.collective-body [data-island="bahamas"], .collective-body [data-stall-island="bahamas"] { --isl: var(--wf-isl-bahamas); }
.collective-body [data-island="aruba"], .collective-body [data-stall-island="aruba"] { --isl: var(--wf-isl-aruba); }
.collective-body [data-island="honduras"], .collective-body [data-stall-island="honduras"] { --isl: var(--wf-isl-honduras); }
.collective-body [data-island="cuba"], .collective-body [data-stall-island="cuba"] { --isl: var(--wf-isl-cuba); }
.collective-body [data-island="bermuda"], .collective-body [data-stall-island="bermuda"] { --isl: var(--wf-isl-bermuda); }

/* filters as lanterns: a dot that lights when the filter is on */
.collective-body .island-options button, .collective-body .category-nav button, .collective-body .collab-tags button {
  gap: 10px; color: var(--wf-muted); border-radius: 999px; border: 1px solid var(--wf-rule); background: transparent;
}
.collective-body .island-options button { border-color: transparent; }
.island-options button::before, .category-nav button::before, .collab-tags button::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--isl); opacity: 0.4;
}
.collab-tags .clear-tag::before { display: none; }
.collective-body .island-options button[aria-pressed="true"], .collective-body .category-nav button[aria-pressed="true"], .collective-body .collab-tags button[aria-pressed="true"] {
  color: var(--wf-ink); background: color-mix(in oklab, var(--isl) 16%, transparent); border-color: var(--isl);
}
.island-options button[aria-pressed="true"]::before, .category-nav button[aria-pressed="true"]::before, .collab-tags button[aria-pressed="true"]::before {
  opacity: 1; box-shadow: 0 0 10px 3px var(--isl);
}
.collective-body .island-options button:hover:not(:disabled), .collective-body .category-nav button:hover:not(:disabled), .collective-body .collab-tags button:hover:not(:disabled) { border-color: var(--isl); color: var(--wf-ink); }
.collective-body .island-options button:active:not(:disabled), .collective-body .category-nav button:active:not(:disabled) { background: color-mix(in oklab, var(--isl) 26%, transparent); }
.category-nav button[data-n="0"]:not([aria-pressed="true"])::before { opacity: 0.2; }
.category-nav .lane-glyph { width: 18px; height: 18px; }
.lane-n { min-width: 2ch; margin-inline-start: 2px; font: 500 12px/1 var(--board-mono); color: var(--wf-muted); text-align: end; }
.category-nav button[aria-pressed="true"] .lane-n { color: var(--wf-ink); }
.collective-body .category-nav { gap: 8px; }
@media (min-width: 700px) { .collective-body #board-main .category-nav { flex-wrap: wrap; overflow: visible; } }
.board-bar { border-top: 0; padding-top: 4px; }

/* the stalls */
.collective-body .board-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 30px 20px; align-items: start;
  border-top: 0; padding-top: 14px;
}
.board-list > .board-empty { grid-column: 1 / -1; }
.collective-body .board-row {
  --awn: color-mix(in oklab, var(--isl) 42%, var(--wf-abyss));
  position: relative; border: 1px solid var(--wf-rule); border-top: 0; border-radius: 0 0 12px 12px; background: var(--board-surface);
  transition: transform 0.18s var(--wf-ease);
}
.board-row:hover { transform: translateY(-3px); }
.board-row[open] { border-color: var(--isl); background: var(--board-surface); }
.collective-body .board-row > summary {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: start; padding: 0 16px 14px;
  grid-template-areas: "awn awn awn" "glyph island age" "glyph category age" "title title title" "pay pay pay" "date date close" "source source marker";
}
.collective-body .board-row > summary:hover, .collective-body .board-row[open], .collective-body .board-row > summary:active { background: transparent; }
.collective-body .board-row > summary:focus-visible { outline: 2px solid var(--wf-ink); outline-offset: 3px; border-radius: 12px; }
.board-row > summary::before {
  content: ""; grid-area: awn; display: block; height: 18px; margin: -1px -17px 14px;
  background: repeating-linear-gradient(90deg, var(--isl) 0 14px, var(--awn) 14px 28px);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 11px no-repeat, conic-gradient(from 135deg at 50% 0, #0000, #000 1deg 89deg, #0000 90deg) 0 100% / 14px 7px repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% 11px no-repeat, conic-gradient(from 135deg at 50% 0, #0000, #000 1deg 89deg, #0000 90deg) 0 100% / 14px 7px repeat-x;
}
.board-row .row-meta small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.board-row .row-glyph { grid-area: glyph; width: 44px; height: 44px; padding: 10px; color: var(--isl); border: 1px solid var(--isl); border-radius: 50%; }
.board-row .row-island { align-self: end; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--isl); }
.board-row .row-category { align-self: start; font-size: 12px; color: var(--wf-muted); }
.board-row .row-age {
  grid-area: age; align-self: start; padding: 4px 10px; font: 500 12px/1.4 var(--board-mono); color: var(--isl);
  border: 1px solid var(--isl); border-radius: 999px; white-space: nowrap;
}
.board-row .row-age:empty { visibility: hidden; }
.board-row .row-title { margin-top: 14px; font: 600 20px/1.2 var(--glow-font); letter-spacing: -0.01em; color: var(--wf-ink); overflow-wrap: anywhere; }
.board-row .row-pay { margin-top: 8px; font-size: 13px; color: var(--wf-sand); }
.board-row .row-date { margin-top: 14px; font-size: 12px; }
.board-row .row-close { grid-area: close; margin-top: 14px; justify-self: end; font: 12px/1.65 var(--board-mono); color: var(--wf-muted); text-align: end; }
.board-row .row-close[data-soon="true"] { color: var(--wf-coral); }
.board-row .row-source { margin-top: 2px; grid-template-columns: minmax(0, 1fr); font-size: 12px; }
.board-row .row-marker { grid-area: marker; align-self: end; justify-self: end; width: 28px; height: 28px; display: grid; place-items: center; color: var(--isl); border: 1px solid var(--wf-rule); border-radius: 50%; font: 16px/1 var(--board-mono); }
.board-row__body { padding: 0 16px 20px; border-top: 1px solid var(--wf-rule); }
.board-row__copy { margin: 16px 0; font-size: 15px; }
.collective-body .row-actions { gap: 0 20px; }
.board-state { margin-top: 4px; }

/* the one pill, again at the foot of the board */
.collective-body .submit-button {
  background: var(--wf-gold); color: var(--wf-abyss); border-color: var(--wf-gold); font-weight: 600; font-family: var(--glow-font); font-size: 15px;
  min-height: 48px; padding-inline: 26px; transition: transform 0.18s var(--wf-ease);
}
.collective-body .submit-button:hover { color: var(--wf-abyss); transform: translateY(-2px); }
.collective-body .submit-button:active { transform: translateY(0); }

/* rules and post pages under the lite hero. The status line and the listing card keep their height before and after the script runs (CLS). */
.collective-body .detail-state { min-height: 3.4em; }
html.wf-has-id .collective-body [data-post-card] { min-height: 22rem; }
html.wf-has-id .collective-body [data-post-card][hidden] { display: block !important; visibility: hidden; }
.collective-body [data-post-card] > .detail-card { margin: 0; padding: 0; border: 0; }
.collective-body .rules-page.canvas, .collective-body .detail-page.canvas { padding-top: 40px; }

/* measures in rem: release css uses ch, which changes when the face arrives and re-wraps the text (CLS). Values are the ch widths with the real face. */
.collective-body :is(.board-pinned > p, .board-row__copy, .source-method) { max-width: 46rem; }
.collective-body :is(.board-footnote, .no-script-note, .rules-lead, .detail-state) { max-width: 40.5rem; }
.collective-body :is(.submit-strip, .rules-submit) p:not(.section-code) { max-width: 37rem; }
.collective-body .board-empty { max-width: 41rem; }
.collective-body .detail-card > p { max-width: 43rem; }

@media (max-width: 67.99rem) { .collective-body .island-options button { border-color: var(--wf-rule); } }

@media (prefers-reduced-motion: reduce) {
  .wh-post, .submit-button, .board-row, .island-options button, .category-nav button, .collab-tags button { transition: none; }
  .wh-post:hover, .submit-button:hover, .board-row:hover { transform: none; }
}

.wh-map-label { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; padding: 8px; background: var(--wf-abyss); text-decoration: none; color: var(--wf-ink); }
.wh-map-label strong { font: 600 18px/1.2 var(--glow-font); }
.wh-map-label span { font: 10px/1.6 var(--board-mono); color: var(--wf-muted); }
.wh-map-label:hover { text-decoration: underline; text-underline-offset: 4px; }
.wh-map-label:active { opacity: .75; }
.wharf-chart { --wh-night-display: var(--n4-face-roar); --wh-night-prose: var(--n4-reading); --wh-night-mono: var(--n4-mono); }
html[data-glowmap] .wharf-chart h1 { font-family: var(--wh-night-display); }
.wharf-chart .wh-lede { font-family: var(--wh-night-prose); }
.wharf-chart :is(.wh-eyebrow,.wh-instrument-head,.wh-sign-meta,.wh-sign-end,.wh-map-label span,.wh-chart-key) { font-family: var(--wh-night-mono); }
.wharf-chart[data-eco='live'] .wh-chart-image, .wharf-chart[data-eco='still'] .wh-chart-image { opacity: .12; }
.wharf-chart[data-eco='live']::before, .wharf-chart[data-eco='still']::before { background: none; }
.wharf-chart[data-wh-drag], .wharf-chart[data-wh-drag] * { user-select: none; -webkit-user-select: none; }
.wharf-chart .wh-map-label { background: transparent; }
.collective-body .wharf-chart :is(.wh-pinned-sign,.wh-post):is(:hover,:focus-visible,:active) { color: var(--wf-abyss); }
.wharf-chart > .wh-map-signs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.wh-map-signs .wh-map-sign { position: absolute; display: flex; align-items: center; width: 144px; min-height: 44px; padding: 4px 8px; pointer-events: auto; background: var(--wf-abyss); color: var(--wf-gold); border-bottom: 1px solid var(--wf-gold); text-decoration: none; font: 500 10px/1.4 var(--wh-night-mono); }
.wh-map-sign span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-map-signs .wh-map-sign:hover { color: var(--wf-ink); }
.wh-map-signs .wh-map-sign:active { opacity: .85; }
.wh-map-signs .wh-map-sign:focus-visible { outline: 2px solid var(--wf-ink); outline-offset: 3px; }
.collective-body:has(.wharf-chart) .eco-pause { background: var(--wf-abyss); color: var(--wf-ink); border-color: var(--wf-muted); }
.wharf-chart .wh-map-label strong { flex: 0 0 144px; white-space: nowrap; }
.collective-body:has(.wharf-chart) .topline span { white-space: nowrap; }
.wharf-chart[data-chart-camera="basin"] .wh-map-label { visibility: hidden; }
@media (max-width: 700px) {
  .collective-body .detail-state { min-height: 5.1em; }
  html.wf-has-id .collective-body [data-post-card] { min-height: 30rem; }
}