:root {
    --bg:          #0a0c11;
    --bg-raised:   #11141b;
    --ink:         #e8eaee;
    --ink-2:       #b9bfca;
    --ink-3:       #8a92a1;
    --ink-4:       #555c6b;
    --rule:        #272c37;
    --rule-2:      #1b1f28;

    --accent:      #74a0ff;
    --orange:      #d97a5a;
    --stone:       #7a6f5c;
    --neutral-dim: #3a3f4a;

    --sans:  "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
    --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --serif: "IBM Plex Serif", "Times New Roman", Georgia, serif;

    --measure:         72ch;
    --column:      min(980px, 92vw);
    --breakout:   min(1200px, 95vw);

    --t-step:   clamp(14px, 0.92vw, 16px);
    --t-body:   clamp(16px, 1.05vw, 17.5px);
    --t-lede:   clamp(26px, 3.1vw, 40px);
    --t-h2:     clamp(20px, 2.0vw, 26px);
    --t-k:      10.5px;
    --t-small:  14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11", "calt";
}
body {
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-body);
    line-height: 1.55;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- *
 *  layout primitives
 * -------------------------------------------------------------------------- */
main > section,
.masthead,
footer {
    display: grid;
    grid-template-columns: 1fr min(var(--column), 94vw) 1fr;
    padding-block: clamp(22px, 3vw, 44px);
    border-bottom: 1px solid var(--rule-2);
}
main > section > .col,
.masthead > .col,
footer > .col {
    grid-column: 2;
}
.breakout {
    grid-column: 1 / -1;
    width: min(var(--breakout), 95vw);
    margin: clamp(14px, 1.6vw, 24px) auto 0;
    padding: 0;
}

/* -------------------------------------------------------------------------- *
 *  typography — masthead
 * -------------------------------------------------------------------------- */
.masthead {
    padding-top: clamp(26px, 3.5vw, 48px);
    padding-bottom: clamp(28px, 4vw, 52px);
    border-bottom: 1px solid var(--rule);
}
.kicker {
    font-family: var(--mono);
    font-size: var(--t-k);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 clamp(20px, 3vw, 36px);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    align-items: baseline;
}
.kicker .sep {
    color: var(--ink-4);
}
.lede {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--t-lede);
    line-height: 1.12;
    letter-spacing: -0.012em;
    margin: 0 0 clamp(16px, 2vw, 24px);
    max-width: 34ch;
}
.lede em {
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
}
.sub {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.48;
    color: var(--ink-2);
    max-width: 72ch;
    margin: 0;
}
.sub strong {
    color: var(--ink);
    font-weight: 500;
}
.sub em {
    color: var(--ink);
    font-style: italic;
}
.num {
    font-family: var(--mono);
    font-feature-settings: "tnum", "zero";
    font-weight: 500;
    font-size: 0.92em;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------- *
 *  section kickers, headings, prose
 * -------------------------------------------------------------------------- */
.section-kicker {
    font-family: var(--mono);
    font-size: var(--t-k);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 clamp(14px, 1.6vw, 20px);
}
h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--t-h2);
    line-height: 1.22;
    letter-spacing: -0.008em;
    margin: 0 0 clamp(10px, 1.3vw, 16px);
    max-width: 40ch;
}
.text {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 12px;
    max-width: 72ch;
}
.text em { color: var(--ink); font-style: italic; }
.text-small {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 12px;
    max-width: 60ch;
}
.text-small strong {
    color: var(--ink);
    font-weight: 600;
}
.mono {
    font-family: var(--mono);
    font-size: 0.92em;
    color: var(--ink);
    background: var(--rule-2);
    padding: 1px 5px;
    border-radius: 2px;
}

/* -------------------------------------------------------------------------- *
 *  scatter + charts
 * -------------------------------------------------------------------------- */
#scatter, #outcome-bar, #meeting-strip {
    font-family: var(--sans);
}
figure {
    margin: 0;
}
.caption {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    padding: 14px 4px 0;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    align-items: center;
}
.caption .caption-aside {
    margin-left: auto;
    color: var(--ink-4);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}
.swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: -1px;
    margin-right: 4px;
}

/* Observable Plot overrides */
svg[class^="plot"] {
    background: transparent !important;
}
svg[class^="plot"] text {
    fill: var(--ink-2);
    font-family: var(--sans);
}
svg[class^="plot"] [aria-label="x-axis tick label"] text,
svg[class^="plot"] [aria-label="y-axis tick label"] text {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--ink-3);
}
svg[class^="plot"] [aria-label^="x-axis label"] text,
svg[class^="plot"] [aria-label^="y-axis label"] text {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    fill: var(--ink-3);
    text-transform: uppercase;
}
svg[class^="plot"] [aria-label="x-grid"] line,
svg[class^="plot"] [aria-label="y-grid"] line {
    stroke: var(--rule);
    stroke-opacity: 0.7;
}

/* -------------------------------------------------------------------------- *
 *  top-10 table
 * -------------------------------------------------------------------------- */
.breakout.table-wrap {
    margin-top: clamp(14px, 2.4vw, 30px);
}
#longest-unanimous {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
#longest-unanimous thead th {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: left;
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--rule);
}
#longest-unanimous tbody td {
    padding: 9px 12px 9px 0;
    vertical-align: baseline;
    border-bottom: 1px solid var(--rule-2);
    color: var(--ink-2);
}
#longest-unanimous tbody tr:hover td {
    background: #0e1218;
    color: var(--ink);
}
.c-date { width: 10ch; }
.c-item { width: 8ch; }
.c-dur  { width: 9ch; }
.c-vote { width: 6ch; }
.c-name { }
.c-link { width: 5ch; text-align: right; }
#longest-unanimous .c-date,
#longest-unanimous .c-item,
#longest-unanimous .c-dur,
#longest-unanimous .c-vote {
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--ink);
    font-feature-settings: "tnum", "zero";
    white-space: nowrap;
}
#longest-unanimous .c-dur {
    color: var(--accent);
    font-weight: 500;
}
#longest-unanimous .c-name {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.35;
    padding-right: 18px;
}
#longest-unanimous .nickname-fallback {
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13.5px;
    font-style: italic;
}
.nickname-empty { color: var(--ink-4); }
.ph-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 4px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    vertical-align: 1.5px;
}
p.caption.table-caption {
    margin-top: 18px;
    max-width: 72ch;
}
p.caption.table-caption .ph-tag {
    margin: 0 1px;
    vertical-align: 0;
}
#longest-unanimous .c-link a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    white-space: nowrap;
}
#longest-unanimous .c-link a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* -------------------------------------------------------------------------- *
 *  method section
 * -------------------------------------------------------------------------- */
.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 40px;
    margin-top: 8px;
}
@media (min-width: 760px) {
    .two-col { grid-template-columns: 1fr 1fr; gap: 0 48px; }
}

/* -------------------------------------------------------------------------- *
 *  footer
 * -------------------------------------------------------------------------- */
footer {
    border-bottom: none;
    padding-block: clamp(32px, 4vw, 56px);
    color: var(--ink-3);
}
footer .text-small {
    color: var(--ink-3);
}
footer .colophon {
    color: var(--ink-4);
    font-size: 13px;
    margin-top: 6px;
}
footer code.mono {
    font-size: 12px;
}

/* -------------------------------------------------------------------------- *
 *  loading states
 * -------------------------------------------------------------------------- */
.is-loading {
    opacity: 0.35;
    transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.loaded .is-loading { opacity: 1; }

/* Subtle page-load entrance — serif lede fades in slightly after numbers bind */
.masthead .lede,
.masthead .sub {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.loaded .masthead .lede {
    opacity: 1; transform: none;
    transition-delay: 60ms;
}
.loaded .masthead .sub {
    opacity: 1; transform: none;
    transition-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .masthead .lede, .masthead .sub {
        opacity: 1; transform: none;
    }
}

/* -------------------------------------------------------------------------- *
 *  two-clocks: the stacked-bar pair in § 3
 * -------------------------------------------------------------------------- */
.two-clocks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.clock-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.clock-row p.clock-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
    padding-left: 4px;
}

/* -------------------------------------------------------------------------- *
 *  outcome-bar segment legend
 * -------------------------------------------------------------------------- */
.segment-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
    margin-top: 6px !important;
    padding-top: 10px;
    border-top: 1px solid var(--rule-2);
}
.segment-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.segment-legend .swatch {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 0;
    margin-right: 2px;
}
.segment-legend .legend-name {
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 12.5px;
}
.segment-legend .legend-num {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* -------------------------------------------------------------------------- *
 *  two-chart paired layout (member NO votes)
 * -------------------------------------------------------------------------- */
.chart-pair {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.chart-pair > figure,
.chart-pair > svg {
    flex: 0 0 auto;
    max-width: 100%;
}
#dissent-by-member figcaption.caption {
    margin-top: 10px;
}

/* -------------------------------------------------------------------------- *
 *  selection
 * -------------------------------------------------------------------------- */
::selection {
    background: color-mix(in oklab, var(--accent) 45%, transparent);
    color: var(--ink);
}

/* Narrow-width adjustments */
@media (max-width: 560px) {
    .lede { font-size: clamp(26px, 7vw, 34px); }
    .caption-aside { display: none; }
    /* On mobile the description is the readable content — keep it, reflow as
       block so it wraps below the date/item/duration line. */
    #longest-unanimous tbody tr {
        display: grid;
        grid-template-columns: auto auto 1fr auto auto;
        column-gap: 10px;
        row-gap: 2px;
        padding: 12px 0;
    }
    #longest-unanimous tbody td {
        border-bottom: none;
        padding: 0;
    }
    #longest-unanimous tbody tr + tr {
        border-top: 1px solid var(--rule-2);
    }
    #longest-unanimous .c-name {
        grid-column: 1 / -1;
        padding-top: 4px;
        padding-right: 0;
    }
    #longest-unanimous thead { display: none; }
    #longest-unanimous .c-link a { white-space: nowrap; }
}