:root {
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --paper: #f2ebdf;
    --paper-shadow: #e8dfd0;
    --paper-top: #f8f3eb;
    --paper-radial: rgba(255, 255, 255, 0.6);
    --noise-dot-1: rgba(194, 120, 75, 0.35);
    --noise-dot-2: rgba(68, 53, 39, 0.1);
    --surface: rgba(255, 255, 255, 0.92);
    --surface-solid: #fcfbf7;
    --surface-float: #fffdfa;
    --surface-float-strong: #fffdf8;
    --surface-soft: rgba(255, 255, 255, 0.72);
    --ink: #171717;
    --muted: #37342f;
    --muted-strong: #5b5247;
    --line: #171717;
    --control-line: #342f27;
    --control-line-soft: #5f5a52;
    --surface-press: #f4ead3;
    --surface-press-hover: #f9f2e5;
    --link: #093fd1;
    --accent-red: #c52c1d;
    --accent-blue: #4a6981;
    --accent-green: #556956;
    --menu-pill-bg: color-mix(in srgb, var(--surface-solid) 92%, var(--paper));
    --menu-pill-border: color-mix(in srgb, var(--line) 42%, transparent);
    --menu-pill-hover-bg: color-mix(in srgb, var(--accent-blue) 12%, var(--surface-solid));
    --menu-pill-active-bg: color-mix(in srgb, var(--accent-blue) 18%, var(--surface-solid));
    --menu-pill-text: var(--ink);
    --menu-shadow: 0 0 0 1px rgba(23, 23, 23, 0.08), 0 1rem 2rem rgba(23, 23, 23, 0.08);
    --panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
    --radius-xl: var(--size-radius-xl);
    --radius-lg: var(--size-radius-lg);
    --radius-md: var(--size-radius-panel);
    --radius-sm: var(--size-radius-control);
}

:root[data-theme='dark'] {
    --paper: #121518;
    --paper-shadow: #090b0d;
    --paper-top: #1a1f24;
    --paper-radial: rgba(139, 167, 196, 0.12);
    --noise-dot-1: rgba(125, 146, 170, 0.16);
    --noise-dot-2: rgba(223, 213, 194, 0.06);
    --surface: rgba(26, 30, 34, 0.92);
    --surface-solid: #1a1e22;
    --surface-float: #1f252a;
    --surface-float-strong: #22292f;
    --surface-soft: rgba(38, 46, 53, 0.82);
    --ink: #f2ebdf;
    --muted: #d0c6b8;
    --muted-strong: #c4b8a7;
    --line: #d2c4ab;
    --control-line: #8c7f69;
    --control-line-soft: #978d7c;
    --surface-press: #31404b;
    --surface-press-hover: #28323b;
    --link: #96bbff;
    --menu-pill-bg: #1f2931;
    --menu-pill-border: rgba(180, 203, 224, 0.62);
    --menu-pill-hover-bg: #2a3946;
    --menu-pill-active-bg: #324654;
    --menu-pill-text: #f4efe5;
    --menu-shadow: 0 0 0 1px rgba(210, 196, 171, 0.16), 0 1rem 2rem rgba(0, 0, 0, 0.24);
    --panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.24);
}

:root[data-theme='dark'] body::after {
    opacity: 0.08;
}

* {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

html {
    min-height: 100%;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Source Sans 3', Arial, Helvetica, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 20% 15%, var(--paper-radial), transparent 32%),
        linear-gradient(180deg, var(--paper-top) 0%, var(--paper) 58%, var(--paper-shadow) 100%);
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        radial-gradient(var(--noise-dot-1) 0.55px, transparent 0.8px),
        radial-gradient(var(--noise-dot-2) 0.45px, transparent 0.7px);
    background-position: 0 0, 1.5px 1.5px;
    background-size: 4px 4px, 5px 5px;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image: url('/images/geo-pattern.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

html.has-fixed-drawer,
body.has-fixed-drawer {
    overflow: hidden;
}

a {
    color: var(--link);
}

h1,
h2,
h3,
.home-headline,
.page-headline,
.journal-title,
.back-bar,
.panel-back-link {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
}

.site-shell {
    min-height: 100vh;
    padding: var(--space-6) 0 var(--space-10);
    position: relative;
}

.skip-link {
    position: absolute;
    top: -4rem;
    left: var(--space-3);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--link);
    border-radius: var(--size-radius-control);
    background: var(--surface-solid);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    transition: top 160ms ease;
}

.skip-link:focus-visible {
    top: var(--space-3);
}

main[tabindex='-1']:focus {
    outline: none;
}

.utility-bar-wrap {
    display: none;
}

.utility-menu-shell {
    position: relative;
    z-index: 4;
}

.utility-menu-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 23;
    pointer-events: none;
    background: color-mix(in srgb, var(--paper-shadow) 28%, transparent);
    opacity: 0;
    transition: opacity 260ms ease;
}

.utility-menu-shell.is-open,
.promise-filter.is-open {
    z-index: 30;
}

.utility-menu-shell.is-open::before {
    pointer-events: auto;
    opacity: 1;
}

.utility-menu-shell--inline {
    flex: 0 0 auto;
}

.utility-menu-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-touch);
    height: var(--size-control-touch);
    min-width: var(--size-control-touch);
    min-height: var(--size-control-touch);
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--line) 32%, transparent);
    border-radius: var(--size-radius-pill);
    background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 25;
}

.utility-menu-trigger:active {
    transform: scale(0.86);
}

.utility-menu-trigger:hover,
.utility-menu-trigger[aria-expanded='true'] {
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface-solid));
    border-color: color-mix(in srgb, var(--line) 46%, transparent);
}

.utility-menu-trigger[aria-expanded='true'] {
    color: var(--ink);
}

.utility-menu-trigger-icon {
    position: relative;
    width: var(--size-icon);
    height: var(--size-icon);
    flex-shrink: 0;
}

.utility-menu-trigger-line {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    border-radius: var(--size-radius-pill);
    background: currentColor;
    transform-origin: center center;
    /* base = close snap */
    transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 150ms ease;
}

/* Rest state: spread lines from the shared center point */
.utility-menu-trigger-line:nth-child(1) {
    transform: translateY(calc(0em - var(--space-1-5)));
}

.utility-menu-trigger-line:nth-child(2) {
    width: 0.72rem;
    left: auto;
    right: 0;
    /* sits at center — no translateY */
}

.utility-menu-trigger-line:nth-child(3) {
    transform: translateY(var(--space-1-5));
}

/* Open state: spring morph to × */
.utility-menu-trigger[aria-expanded='true'] .utility-menu-trigger-line {
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms ease;
}

.utility-menu-trigger[aria-expanded='true'] .utility-menu-trigger-line:nth-child(1) {
    transform: rotate(45deg);
}

.utility-menu-trigger[aria-expanded='true'] .utility-menu-trigger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.utility-menu-trigger[aria-expanded='true'] .utility-menu-trigger-line:nth-child(3) {
    transform: rotate(-45deg);
}

.utility-menu-panel {
    right: 0;
    width: min(28rem, calc(100vw - 1rem));
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--line) 32%, transparent) transparent;
}

.utility-menu-panel::-webkit-scrollbar {
    width: 3px;
}

.utility-menu-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--line) 32%, transparent);
    border-radius: var(--size-radius-pill);
}

.utility-menu-panel--toolbar {
    right: 0;
}

.drawer-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100dvh;
    width: min(30rem, calc(100vw - 1rem));
    max-height: none;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5) var(--space-5);
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    background: color-mix(in srgb, var(--surface-solid) 98%, var(--paper-top));
    box-shadow: none;
    z-index: 24;
    opacity: 0;
    transform: translate3d(calc(100% + var(--space-4)), 0, 0);
    /* base = close snap */
    transition: transform 160ms cubic-bezier(0.4, 0, 1, 1), opacity 120ms ease;
    will-change: transform, opacity;
}

.drawer-panel > * {
    opacity: 0;
    transform: translateY(var(--space-3));
    /* base = close snap */
    transition: opacity 100ms ease, transform 130ms cubic-bezier(0.4, 0, 1, 1);
}

.utility-menu-shell.is-open .drawer-panel,
.utility-menu-trigger[aria-expanded='true'] + .drawer-panel,
.promise-filter.is-open .drawer-panel,
.drawer-panel.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    /* open = spring bloom */
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms cubic-bezier(0, 0, 0.2, 1);
}

.utility-menu-shell.is-open .drawer-panel > *,
.promise-filter.is-open .drawer-panel > *,
.drawer-panel.is-open > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1), transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 70ms;
}

.filter-drawer-panel {
    --filter-section-gap: var(--space-6);
    --filter-section-inset: var(--space-3);
    --filter-label-control-gap: var(--space-5);
    --filter-control-gap: var(--space-1-5);
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    bottom: auto;
    height: auto;
    width: auto;
    min-width: 0;
    max-height: min(calc(100dvh - 8rem), 40rem);
    padding: var(--space-4) var(--space-5);
    border: 1px solid color-mix(in srgb, var(--line) 42%, transparent);
    border-radius: var(--radius-md);
    background: var(--surface-solid);
    box-shadow: var(--menu-shadow);
    opacity: 0;
    transform: translateY(calc(0em - var(--space-2))) scale(0.985);
    transform-origin: top center;
    /* base = close snap */
    transition: transform 160ms cubic-bezier(0.4, 0, 1, 1), opacity 120ms ease-in;
}

.promise-filter .filter-drawer-panel > * {
    opacity: 0;
    transform: translateY(var(--space-1-5));
    transition: opacity 100ms ease-in, transform 120ms ease-in;
}

.promise-filter .filter-drawer-panel.is-open {
    opacity: 1;
    transform: none;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
}

.promise-filter .filter-drawer-panel.is-open > * {
    opacity: 1;
    transform: none;
    transition: opacity 220ms ease-out, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.promise-filter .filter-drawer-panel.is-open > :nth-child(1) { transition-delay: 30ms; }
.promise-filter .filter-drawer-panel.is-open > :nth-child(2) { transition-delay: 70ms; }
.promise-filter .filter-drawer-panel.is-open > :nth-child(3) { transition-delay: 110ms; }

.drawer-panel.utility-menu-panel {
    width: min(28rem, calc(100vw - 1rem));
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--size-control-touch);
    margin-bottom: var(--space-4);
}

.drawer-title {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.1;
    letter-spacing: 0;
}

.drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid color-mix(in srgb, var(--line) 34%, transparent);
    border-radius: var(--size-radius-pill);
    background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
    color: var(--ink);
    cursor: pointer;
}

.drawer-close svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.utility-menu-panel .drawer-header {
    justify-content: flex-end;
    min-height: 2rem;
    margin-bottom: var(--space-1);
}

.utility-menu-panel-close {
    flex: 0 0 auto;
    width: var(--size-control-touch);
    height: var(--size-control-touch);
    min-width: var(--size-control-touch);
    min-height: var(--size-control-touch);
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--line) 32%, transparent);
    background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.utility-menu-panel-close:hover {
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface-solid));
    border-color: color-mix(in srgb, var(--line) 46%, transparent);
}

.utility-menu-panel-close:active {
    transform: scale(0.86);
}

.utility-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.utility-menu-intro {
    display: grid;
    gap: var(--space-1-5);
}

.utility-menu-eyebrow {
    margin: 0;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.utility-menu-heading {
    margin: 0;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-md);
    line-height: 1.1;
    color: var(--ink);
}

.utility-menu-section {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.utility-menu-section--wide {
    grid-column: 1 / -1;
}

.utility-menu-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.utility-menu-title::before,
.utility-menu-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--line) 22%, transparent);
}

.utility-menu-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
}

.utility-menu-links--site {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.utility-menu-links--stack {
    display: grid;
    grid-template-columns: 1fr;
}

.utility-menu-links--stack a {
    width: 100%;
}

.utility-menu-links a,
.theme-toggle-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-control-compact);
    padding: var(--space-1-5) var(--space-4);
    border: 1px solid var(--menu-pill-border);
    border-radius: var(--size-radius-pill);
    background: var(--menu-pill-bg);
    color: var(--menu-pill-text);
    text-decoration: none;
    font: inherit;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.utility-menu-links a {
    justify-content: flex-start;
    position: relative;
    padding-right: var(--space-7);
    font-weight: 600;
}

.utility-menu-links--site a::after {
    content: '\2192';
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.62;
    transition: transform 160ms ease, opacity 160ms ease;
}

.theme-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.theme-toggle-button {
    justify-content: center;
    cursor: pointer;
}

.theme-toggle-button.is-active,
.utility-menu-links a:hover,
.theme-toggle-button:hover {
    background: var(--menu-pill-hover-bg);
    border-color: color-mix(in srgb, var(--menu-pill-border) 78%, var(--line));
}

.theme-toggle-button.is-active {
    background: var(--menu-pill-active-bg);
}

.utility-menu-links a:hover::after {
    opacity: 0.95;
    transform: translate(var(--space-0-5), -50%);
}

.utility-menu-links a:focus-visible,
.theme-toggle-button:focus-visible,
.utility-menu-trigger:focus-visible,
.utility-menu-panel-close:focus-visible,
.filter-control:focus-visible,
.filter-search-submit:focus-visible,
.filter-drawer-apply:focus-visible,
.filter-drawer-done:focus-visible,
.filter-drawer-trigger:focus-visible,
.filter-search-clear:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
    box-shadow: none;
}

:root[data-theme='dark'] .utility-menu-panel {
    background: color-mix(in srgb, var(--surface-solid) 96%, #0a0f13);
    border-color: color-mix(in srgb, var(--line) 74%, #ffffff);
}

:root[data-theme='dark'] .utility-menu-title,
:root[data-theme='dark'] .utility-menu-eyebrow {
    color: color-mix(in srgb, var(--ink) 86%, var(--muted));
}

.status-legend-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.status-legend-item {
    --status-accent: var(--accent-blue);
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--status-accent) 34%, rgba(23, 23, 23, 0.18));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--status-accent) 10%, var(--surface-solid));
}

.status-legend-item--made { --status-accent: #d97706; }
.status-legend-item--in_progress { --status-accent: #0f6cbd; }
.status-legend-item--kept { --status-accent: #1c8b4d; }
.status-legend-item--broken { --status-accent: var(--accent-red); }
.status-legend-item--unknown { --status-accent: #5b6472; }

.status-legend-head {
    display: flex;
    align-items: center;
}

.status-legend-badge {
    --status-badge-accent: var(--status-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--size-radius-pill);
    font-size: var(--text-sm);
    font-weight: 700;
}

.status-legend-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    color: var(--status-badge-accent);
}

.status-legend-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.status-legend-item p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.legend-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.legend-panel-title {
    margin: 0;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
}

.legend-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--line) 26%, transparent);
    border-radius: var(--size-radius-pill);
    background: color-mix(in srgb, var(--surface-solid) 90%, transparent);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.legend-panel-toggle:hover {
    background: color-mix(in srgb, var(--accent-blue) 8%, var(--surface-solid));
    border-color: color-mix(in srgb, var(--line) 38%, transparent);
    color: var(--ink);
}

.legend-panel-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    transition: transform 180ms ease;
}

.legend-panel-toggle-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.legend-panel.is-collapsed .legend-panel-toggle-icon {
    transform: rotate(90deg);
}

.legend-panel.is-collapsed .legend-panel-header {
    margin-bottom: 0;
}

.legend-panel.is-collapsed {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.legend-panel-body[hidden] {
    display: none;
}

.wrap {
    width: min(1280px, calc(100vw - 3rem));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.home-layout,
.split-layout {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.split-layout--with-nav {
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr) 2.75rem;
}

.nav-col {
    position: relative;
}

.home-layout {
    min-height: calc(100vh - 7rem);
}

.rail-stack,
.results-stack {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.panel-card {
    background: var(--surface);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--panel-shadow);
    position: relative;
    overflow: visible;
}

.hero-panel,
.title-panel,
.content-panel,
.nav-panel,
.back-bar,
.promise-card {
    background: var(--surface-solid);
}

.panel-back-link {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 20%, transparent);
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 560;
    transition: color 140ms ease;
}

.panel-back-link:hover {
    color: var(--ink);
}

.panel-back-link__icon {
    transition: transform 150ms ease;
    flex-shrink: 0;
}

.panel-back-link:hover .panel-back-link__icon {
    transform: translateX(-3px);
}

.hero-panel,
.title-panel,
.legend-panel,
.content-panel {
    padding: var(--space-5) var(--space-6);
}

.home-headline,
.page-headline {
    margin: 0;
    line-height: 0.96;
    color: var(--ink);
    letter-spacing: -0.05em;
}

.home-headline {
    font-size: clamp(2.9rem, 5vw, 4.15rem);
}

.page-headline {
    font-size: clamp(1.8rem, 3vw, 2rem);
}

.content,
.body,
.summary,
.meta,
.journal-meta,
.journal-excerpt,
.result-count,
.results-empty,
.empty,
.promise-card:not(.promise-card--tracker) p {
    color: var(--muted);
    font-size: var(--text-base);
    line-height: 1.5;
}

.cms-body,
.content {
    margin-top: var(--space-4);
}

.hero-copy {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.5;
}

.evidence-list li,
.related-list li {
    color: var(--muted);
    line-height: 1.5;
}

.admin-link,
.home-link,
.blog-link,
.back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-control-touch);
    padding: var(--space-1-5) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--line) 42%, transparent);
    border-radius: var(--size-radius-pill);
    text-decoration: none;
    background: var(--surface-solid);
    color: var(--ink);
    font-size: var(--text-base);
}

.nav-panel {
    display: flex;
    gap: var(--space-0-5);
    padding: var(--space-1);
    align-items: stretch;
    min-height: var(--size-control-touch);
    justify-content: space-between;
}

.subnav {
    margin: 0;
}

.subnav a {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--size-radius-pill);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--text-sm);
}

.subnav a:hover {
    background: rgba(0, 0, 0, 0.05);
}

.subnav a.is-active,
.subnav a[aria-current='page'] {
    font-weight: 700;
}

[data-filter-panel-sentinel] {
    height: 1px;
    margin-bottom: -1px;
    visibility: hidden;
    pointer-events: none;
}

.filter-panel {
    position: sticky;
    top: var(--space-3);
    z-index: 2;
    display: grid;
    gap: var(--space-1-5);
    padding: var(--space-3) 0;
    transition: background-color 160ms ease;
}

.filter-panel.is-stuck {
    background: transparent;
    padding-top: var(--space-3);
}

.filter-panel.is-stuck::before {
    content: '';
    position: absolute;
    inset: 0 var(--space-3);
    z-index: -1;
    border-radius: var(--size-radius-control);
    background: color-mix(in srgb, var(--paper-top) 94%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}

.promise-filter {
    position: relative;
    display: grid;
    gap: var(--space-2);
}

.promise-filter.is-pending {
    pointer-events: none;
    opacity: 1;
}

.promise-filter.is-pending::after {
    content: attr(data-pending-message);
    position: absolute;
    top: calc(var(--size-control-touch) + var(--space-1));
    left: 50%;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 var(--space-3);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 36%, var(--line));
    border-radius: var(--size-radius-sm);
    background: var(--surface-float-strong);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 700;
    box-shadow: var(--menu-shadow);
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

.geography-drilldown {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.geography-select {
    flex: 1 1 150px;
}

.filter-control {
    min-height: var(--size-control);
    border: 1px solid color-mix(in srgb, var(--line) 24%, transparent);
    border-radius: var(--size-radius-control);
    background-color: var(--surface-float-strong);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0 var(--space-3);
    min-width: 0;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.filter-select {
    color-scheme: light;
}

:root[data-theme='dark'] .filter-select {
    color-scheme: dark;
}

.filter-select {
    flex: 1 1 150px;
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--space-9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5247' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 0.9rem;
    cursor: pointer;
}

:root[data-theme='dark'] .filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c4b8a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.filter-select option {
    background: var(--surface-float-strong);
    color: var(--ink);
}

.filter-sort-select {
    flex: 0 1 190px;
}

.filter-search {
    flex: 1.35 1 220px;
}

.filter-search-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
    height: var(--size-control-touch);
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--line) 24%, transparent);
    border-radius: var(--size-radius-control);
    background: var(--surface-float-strong);
    box-shadow: 0 1px 2px rgba(23, 23, 23, 0.05);
    transition: border-color 140ms ease, box-shadow 140ms ease;
    min-width: 0;
}

.filter-search-control:focus-within {
    border-color: var(--link);
    outline: 3px solid var(--link);
    outline-offset: 2px;
    box-shadow: none;
}

.filter-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.filter-drawer-trigger {
    grid-column: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--size-control-touch);
    min-width: var(--size-control-touch);
    min-height: var(--size-control-touch);
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 1px solid color-mix(in srgb, var(--line) 32%, transparent);
    border-radius: var(--size-radius-sm);
    background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition: background-color 160ms ease, border-color 160ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.filter-drawer-trigger-label {
    font-size: var(--text-sm);
    font-weight: 700;
}

.filter-drawer-trigger:hover,
.filter-drawer-trigger[aria-expanded='true'] {
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface-solid));
    border-color: color-mix(in srgb, var(--line) 46%, transparent);
}

.filter-drawer-trigger:active {
    transform: scale(0.86);
}

.filter-drawer-trigger-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon);
    height: var(--size-icon);
    flex-shrink: 0;
}

.filter-drawer-trigger-line {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    border-radius: var(--size-radius-pill);
    background: currentColor;
    transform-origin: center center;
    /* base = close snap */
    transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 150ms ease;
}

/* Rest state: funnel / inverted pyramid */
.filter-drawer-trigger-line:nth-child(1) {
    transform: translateY(calc(0em - var(--space-1-5)));
}

.filter-drawer-trigger-line:nth-child(2) {
    transform: scaleX(0.6);
}

.filter-drawer-trigger-line:nth-child(3) {
    transform: translateY(var(--space-1-5)) scaleX(0.32);
}

/* Open state: spring morph to × */
.filter-drawer-trigger[aria-expanded='true'] .filter-drawer-trigger-line {
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms ease;
}

.filter-drawer-trigger[aria-expanded='true'] .filter-drawer-trigger-line:nth-child(1) {
    transform: rotate(45deg);
}

.filter-drawer-trigger[aria-expanded='true'] .filter-drawer-trigger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.filter-drawer-trigger[aria-expanded='true'] .filter-drawer-trigger-line:nth-child(3) {
    transform: rotate(-45deg);
}

.filter-drawer-count {
    position: absolute;
    top: calc(0em - var(--space-1));
    right: calc(0em - var(--space-1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    min-height: 1.2rem;
    padding: 0 var(--space-1);
    border-radius: var(--size-radius-pill);
    background: var(--ink);
    color: var(--surface-solid);
    font-size: var(--text-xs);
    font-weight: 700;
    pointer-events: none;
}

.filter-search {
    grid-column: 2;
    min-width: min(18rem, 100%);
}

.filter-toolbar .utility-menu-shell--inline {
    grid-column: 3;
    justify-self: end;
}

.filter-drawer-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-control-compact);
    padding: var(--space-0-5) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 24%, rgba(23, 23, 23, 0.18));
    border-radius: var(--size-radius-pill);
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface-float-strong));
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.filter-drawer-done:hover {
    background: color-mix(in srgb, var(--accent-blue) 14%, var(--surface-float-strong));
    border-color: color-mix(in srgb, var(--accent-blue) 34%, rgba(23, 23, 23, 0.18));
}

.filter-drawer-done:active {
    transform: translateY(1px);
}

.filter-search-submit,
.filter-drawer-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent-blue) 38%, var(--line));
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.filter-search-submit {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: calc(var(--size-radius-control) - 2px);
    background: color-mix(in srgb, var(--accent-blue) 14%, var(--surface-float-strong));
}

.filter-search-submit svg {
    display: block;
    width: 18px;
    height: 18px;
}

.filter-search-submit:hover {
    background: color-mix(in srgb, var(--accent-blue) 22%, var(--surface-float-strong));
    border-color: color-mix(in srgb, var(--accent-blue) 50%, var(--line));
}

.filter-drawer-apply {
    min-height: var(--size-control);
    padding: 0 var(--space-4);
    border-radius: var(--size-radius-pill);
    background: var(--surface-press);
}

.filter-drawer-apply:hover {
    background: var(--surface-press-hover);
    border-color: color-mix(in srgb, var(--accent-blue) 55%, var(--line));
}

.filter-search-submit:active,
.filter-drawer-apply:active {
    transform: translateY(1px);
}


.filter-drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--filter-section-gap);
}

.filter-drawer-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 18%, transparent);
    padding-bottom: var(--space-1);
}

.filter-drawer-group--geography {
    grid-column: 1 / -1;
}

.filter-drawer-group legend {
    display: block;
    float: none;
    width: 100%;
    margin: 0 0 var(--filter-label-control-gap);
    padding: var(--filter-section-inset) 0 0;
    color: var(--muted-strong);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
}

.filter-drawer-fields,
.filter-drawer-grid .geography-drilldown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--filter-control-gap);
}

.filter-drawer-fields > .filter-control,
.filter-drawer-grid .geography-drilldown > .filter-control {
    width: 100%;
    flex: initial;
    min-width: 0;
}

.filter-drawer-grid .geography-select {
    flex: initial;
}

.filter-drawer-sort {
    display: grid;
    flex: 0 1 14rem;
    font-size: var(--text-sm);
    gap: var(--filter-label-control-gap);
    min-width: 0;
    margin-right: auto;
}

.filter-drawer-sort-label {
    color: var(--muted-strong);
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2;
}

.filter-drawer-sort .filter-control {
    width: 100%;
}

.filter-drawer-footer {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--line) 20%, transparent);
}

.filter-drawer-footer .filter-clear-link {
    align-self: center;
    margin-right: 0;
}

.filter-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-search-wrap .filter-control {
    width: 100%;
    padding-right: var(--space-10);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.filter-search-wrap .filter-control:focus-visible {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

.filter-search-clear {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: var(--size-radius-pill);
    background: color-mix(in srgb, var(--line) 14%, transparent);
    color: var(--muted-strong);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease, color 120ms ease;
}

.filter-search-clear svg {
    display: block;
    width: 0.78rem;
    height: 0.78rem;
}

.filter-search-clear:hover {
    background: color-mix(in srgb, var(--line) 26%, transparent);
    color: var(--ink);
}

.filter-search-wrap.has-value .filter-search-clear {
    display: inline-flex;
}

.filter-control[type='search']::-webkit-search-cancel-button {
    appearance: none;
}

.filter-select {
    text-align: left;
    text-align-last: left;
}

.filter-search {
    text-align: left;
}

.filter-control:hover {
    border-color: color-mix(in srgb, var(--accent-blue) 52%, var(--line));
    background-color: var(--surface-float);
}

.filter-sort-select:hover {
    border-color: color-mix(in srgb, var(--line) 58%, transparent);
}

.filter-control:focus-visible {
    border-color: var(--link);
}

.filter-control:disabled {
    border-color: color-mix(in srgb, var(--line) 22%, transparent);
    color: var(--muted);
    opacity: 1;
    cursor: not-allowed;
    -webkit-text-fill-color: var(--muted);
}

.filter-control:disabled:hover {
    border-color: color-mix(in srgb, var(--line) 22%, transparent);
}

@media (forced-colors: active) {
    .filter-select {
        appearance: auto;
        -webkit-appearance: menulist;
        -moz-appearance: menulist;
        background-image: none;
        padding-right: var(--space-3);
    }

    .filter-control:disabled {
        -webkit-text-fill-color: currentColor;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filter-meta {
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.active-filter-chips {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 1.7rem;
    padding: var(--space-0-5) var(--space-2);
    border: 1px solid color-mix(in srgb, var(--line) 42%, transparent);
    border-radius: var(--size-radius-pill);
    background: var(--surface-float);
    color: var(--muted);
    font-size: var(--text-sm);
}

.active-filter-chip-label {
    color: var(--ink);
    font-weight: 700;
}

.filter-note {
    margin: 0;
    font-size: var(--text-sm);
}

.filter-clear-link {
    color: var(--muted);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
}

.status-legend-list--compact {
    margin-top: var(--space-1);
}

.filter-panel.promise-discovery-filters--mobile {
    display: none;
}

.filter-panel.promise-discovery-filters--desktop {
    display: grid;
    padding-top: 0;
}

.filter-clear-link:hover {
    text-decoration: underline;
}

.results-empty,
.empty {
    text-align: center;
    padding: var(--space-3) 0;
}

.list,
.promise-list,
.journal-list {
    margin: 0;
}

.promise-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.promise-card,
.content-panel {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.results-stack {
    min-height: calc(100vh - 9rem);
}

.promise-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}
.promise-card--tracker {
    --promise-status-accent: var(--accent-blue);
    --promise-status-surface: rgba(74, 105, 129, 0.1);
    --promise-status-border: color-mix(in srgb, var(--promise-status-accent) 40%, rgba(23, 23, 23, 0.22));
    --promise-status-ink: var(--ink);
    --promise-status-badge-bg: color-mix(in srgb, var(--promise-status-accent) 18%, var(--surface-float-strong));
    --promise-status-link-bg: color-mix(in srgb, var(--promise-status-accent) 12%, var(--surface-solid));
    --promise-status-link-bg-hover: color-mix(in srgb, var(--promise-status-accent) 20%, var(--surface-solid));
    --promise-status-icon-bg: color-mix(in srgb, var(--promise-status-accent) 12%, var(--surface-float-strong));
    --promise-status-icon-fg: color-mix(in srgb, var(--promise-status-accent) 76%, var(--muted-strong));
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    padding: var(--space-4);
    background: var(--surface-float-strong);
    border: 1px solid color-mix(in srgb, var(--promise-status-accent) 24%, rgba(23, 23, 23, 0.16));
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.promise-card--tracker:hover {
    transform: translateY(-2px);
    background: var(--surface-float);
    border-color: color-mix(in srgb, var(--promise-status-accent) 34%, rgba(23, 23, 23, 0.18));
    box-shadow: var(--panel-shadow);
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes promise-card-enter {
        from {
            opacity: 0;
            translate: 0 14px;
            scale: 0.985;
        }

        to {
            opacity: 1;
            translate: 0 0;
            scale: 1;
        }
    }

    /* Cards stay hidden until the reveal script marks them, then fade in one after another in DOM order. */
    .has-card-reveal .promise-listing .promise-card--tracker:not(.is-revealed) {
        opacity: 0;
    }

    .has-card-reveal .promise-listing .promise-card--tracker.is-revealed {
        animation: promise-card-enter 460ms cubic-bezier(0.22, 0.7, 0.2, 1) var(--reveal-delay, 0ms) both;
    }
}

@media print {
    .has-card-reveal .promise-listing .promise-card--tracker:not(.is-revealed) {
        opacity: 1;
    }
}
.promise-card--status-made {
    --promise-status-accent: #d97706;
    --promise-status-surface: rgba(217, 119, 6, 0.14);
}
.promise-card--status-in_progress {
    --promise-status-accent: #0f6cbd;
    --promise-status-surface: rgba(15, 108, 189, 0.14);
}
.promise-card--status-kept {
    --promise-status-accent: #1c8b4d;
    --promise-status-surface: rgba(28, 139, 77, 0.14);
}
.promise-card--status-broken {
    --promise-status-accent: var(--accent-red);
    --promise-status-surface: rgba(197, 44, 29, 0.14);
}
.promise-card--status-unknown {
    --promise-status-accent: #5b6472;
    --promise-status-surface: rgba(91, 100, 114, 0.14);
}
.promise-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.promise-card-status-group {
    display: grid;
    justify-items: end;
    gap: var(--space-1-5);
    flex: 0 0 auto;
}
.promise-card-title {
    margin: 0;
    flex: 1 1 auto;
    font-size: var(--text-md);
    line-height: 1.14;
}
.promise-card-title a {
    color: var(--ink);
    text-decoration: none;
}
.promise-card-title a:hover {
    color: var(--promise-status-ink);
    text-decoration: underline;
}
.promise-card-category-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
    position: relative;
    z-index: 3;
}
.promise-card-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--promise-status-accent) 18%, rgba(23, 23, 23, 0.18));
    border-radius: var(--size-radius-pill);
    background: var(--promise-status-icon-bg);
    color: var(--promise-status-icon-fg);
    cursor: help;
    position: relative;
    z-index: 3;
}
.promise-card-category-icon:hover {
    background: var(--promise-status-badge-bg);
    color: var(--promise-status-ink);
}
.promise-card-category-icon i {
    font-size: 0.94rem;
    line-height: 1;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

.status-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
}

.status-badge__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.status-badge__label {
    line-height: 1;
}
.promise-card-meta {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-3);
}
.promise-card-meta-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-1-5);
    min-width: 0;
    padding: 0;
}
.promise-card-meta dt,
.promise-card-meta dd {
    margin: 0;
}
.promise-card-meta dt {
    color: var(--muted);
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex: 0 0 auto;
}
.promise-card-meta dd {
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.35;
    min-width: 0;
}

.promise-card-meta-link {
    color: inherit;
    text-decoration: none;
}

.promise-card-meta-link:hover {
    color: var(--promise-status-ink);
    text-decoration: underline;
}

.promise-card-meta-separator {
    color: var(--muted);
}

/* Redesigned tracker card layout */
.promise-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    position: relative;
    z-index: 2;
}

.promise-card-status-badge {
    --status-badge-accent: var(--promise-status-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--size-radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

.status-legend-badge,
.promise-card-status-badge {
    border: 1px solid color-mix(in srgb, var(--status-badge-accent) 42%, rgba(23, 23, 23, 0.16));
    background: color-mix(in srgb, var(--status-badge-accent) 18%, var(--surface-solid));
    color: var(--ink);
}

.promise-card-status-badge .status-badge__icon {
    color: var(--status-badge-accent);
}

/* Stretch link: title <a> covers the whole card */
.promise-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

.promise-card-attribution {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted-strong);
    line-height: 1.35;
    position: relative;
    z-index: 1;
}

.promise-card-attr-sep {
    color: var(--muted);
}

.campaign-phase {
    --campaign-accent: #5b6472;
    display: inline-flex;
    align-items: center;
    padding: var(--space-0-5) var(--space-2);
    border: 1px solid color-mix(in srgb, var(--campaign-accent) 45%, transparent);
    border-radius: var(--size-radius-pill);
    background: color-mix(in srgb, var(--campaign-accent) 14%, var(--surface-solid));
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.campaign-phase--term { --campaign-accent: #1c8b4d; }
.campaign-phase--campaign { --campaign-accent: #0f6cbd; }
.campaign-phase--ended { --campaign-accent: #5b6472; }

.campaign-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--muted-strong);
}

.promise-card-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}
.promise-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.promise-card-status-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 1px solid var(--promise-status-border);
    border-radius: var(--size-radius-pill);
    background: var(--promise-status-badge-bg);
    color: var(--promise-status-ink);
    cursor: help;
}

.promise-card-status-icon-wrap .promise-card-status-icon {
    width: 1rem;
    height: 1rem;
}
.promise-card-status {
    margin-top: 0;
    gap: var(--space-1-5);
    white-space: nowrap;
    border-color: var(--promise-status-border);
    background: var(--promise-status-badge-bg);
    color: var(--promise-status-ink);
    cursor: help;
}
.promise-card-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}
.promise-card-status-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.promise-card--flip {
    min-height: 22rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    perspective: 1400px;
}
.promise-card-flip-shell,
.promise-card-flip-inner {
    height: 100%;
}
.promise-card-flip-shell {
    position: relative;
}
.promise-card-flip-inner {
    position: relative;
    min-height: 22rem;
    transform-style: preserve-3d;
    transition: transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.promise-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-5) var(--space-4) var(--space-4);
    backface-visibility: hidden;
    min-height: 22rem;
    overflow: hidden;
}
.promise-card-face::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 0.42rem;
    pointer-events: none;
}
.promise-card-face--front,
.promise-card-face--back {
    background: var(--surface-float-strong);
}
.promise-card-face--front::before,
.promise-card-face--back::before {
    background: var(--accent-blue);
}
.promise-card-face--back {
    transform: rotateY(180deg);
}
.promise-card-face h3 {
    max-width: none;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: var(--text-lg);
    line-height: 1.1;
}
.promise-card-summary {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
.promise-card-summary--back {
    font-size: 1rem;
    line-height: 1.58;
    -webkit-line-clamp: 8;
    line-clamp: 8;
}
.promise-card-summary--supporting {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    color: var(--muted-strong);
}
.promise-card-highlights {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
.promise-card-highlights div {
    min-width: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--line) 16%, transparent);
    border-radius: var(--size-radius-control);
    background: var(--surface-soft);
}
.promise-card-highlights dt,
.promise-card-highlights dd {
    margin: 0;
}
.promise-card-highlights dt {
    color: var(--muted-strong);
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.promise-card-highlights dd {
    margin-top: var(--space-1);
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.35;
}
.promise-card-front-note {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(23, 23, 23, 0.14);
    color: var(--muted-strong);
    font-size: var(--text-sm);
}
.promise-card-flip-hint {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: var(--space-0-5) var(--space-2);
    border: 1px dashed rgba(74, 105, 129, 0.42);
    border-radius: var(--size-radius-pill);
    color: #44596d;
    background: rgba(74, 105, 129, 0.08);
    font-size: var(--text-xs);
    font-weight: 700;
}
.promise-card-details {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
.promise-card-details div {
    padding: var(--space-3);
    border: 1px solid rgba(23, 23, 23, 0.14);
    border-radius: var(--size-radius-md);
    background: var(--surface-soft);
}
.promise-card-details dt,
.promise-card-details dd {
    margin: 0;
}
.promise-card-details dt {
    color: var(--muted);
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.promise-card-details dd {
    margin-top: var(--space-1);
    color: var(--ink);
    font-size: var(--text-base);
}
.promise-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-control-compact);
    margin-top: auto;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--promise-status-border, var(--line));
    border-radius: var(--size-radius-pill);
    background: var(--promise-status-link-bg, rgba(85, 105, 86, 0.12));
    color: var(--promise-status-ink, var(--ink));
    text-decoration: none;
    font-weight: 700;
    width: fit-content;
}
.promise-card-face--back .promise-card-link {
    margin-top: auto;
}
.promise-card-link:hover {
    background: var(--promise-status-link-bg-hover, rgba(85, 105, 86, 0.2));
}
@media (hover: hover) and (pointer: fine) {
    .promise-card--flip:hover .promise-card-flip-inner,
    .promise-card--flip:focus-within .promise-card-flip-inner {
        transform: rotateY(180deg) translateY(-4px);
    }
}

.promise-card h2,
.promise-card h3 {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.15;
}

.promise-card h2 a,
.promise-card h3 a {
    color: var(--ink);
    text-decoration: none;
}

.promise-sentiment {
    margin: var(--space-1) 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.badge,
.status,
.related-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    margin-top: var(--space-2);
    padding: var(--space-0-5) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--line) 42%, transparent);
    border-radius: var(--size-radius-pill);
    background: color-mix(in srgb, var(--muted-strong) 10%, var(--surface-solid));
    color: var(--muted-strong);
    font-size: var(--text-sm);
    text-decoration: none;
}

/* Color-coded status chip — mirrors the accent system used by promise cards and the legend */
.promise-status-chip.status--made,
.promise-status-chip.status--in_progress,
.promise-status-chip.status--kept,
.promise-status-chip.status--broken,
.promise-status-chip.status--unknown {
    border-color: color-mix(in srgb, var(--status-accent) 34%, rgba(23, 23, 23, 0.16));
    background: color-mix(in srgb, var(--status-accent) 18%, var(--surface-solid));
    color: color-mix(in srgb, var(--status-accent) 55%, var(--ink));
    font-weight: 700;
}

.promise-status-chip.status--made        { --status-accent: #d97706; }
.promise-status-chip.status--in_progress { --status-accent: #0f6cbd; }
.promise-status-chip.status--kept        { --status-accent: #1c8b4d; }
.promise-status-chip.status--broken      { --status-accent: var(--accent-red); }
.promise-status-chip.status--unknown     { --status-accent: #5b6472; }

.thumb,
.hero-media,
.gallery-thumb {
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    background: #f2eee6;
}

.thumb {
    margin-top: var(--space-3);
    width: 100%;
    max-height: 245px;
    object-fit: cover;
}

.content-panel {
    min-height: 13rem;
}

.rich-copy {
    font-size: var(--text-base);
    line-height: 1.6;
}

.rich-copy p:first-child {
    margin-top: 0;
}

.journal-panel {
    padding: var(--space-5) var(--space-6);
}

.journal-list {
    display: grid;
    gap: var(--space-4);
}

.journal-item + .journal-item {
    padding-top: var(--space-1-5);
    border-top: 1px solid rgba(23, 23, 23, 0.18);
}

.journal-title {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: 700;
}

.journal-meta,
.detail-meta {
    margin: 0 0 var(--space-1-5);
}

.journal-excerpt {
    margin: var(--space-1) 0 0;
}

.promise-index-panel,
.promise-content-panel,
.prose-panel {
    padding: var(--space-5);
}

.prose-panel,
.journal-panel {
    justify-self: start;
}

.promise-index-panel {
    width: 100%;
}

.title-panel {
    min-height: 5.4rem;
    display: flex;
    align-items: center;
}

.title-panel:has(.panel-back-link) {
    display: block;
}

.promise-title-panel {
    display: grid;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-4) var(--space-5);
    --promise-status-accent: var(--accent-blue);
    --promise-status-border: color-mix(in srgb, var(--promise-status-accent) 24%, rgba(23, 23, 23, 0.16));
    --promise-status-ink: var(--ink);
    --promise-status-badge-bg: color-mix(in srgb, var(--promise-status-accent) 12%, var(--surface-float-strong));
    --promise-status-link-bg: color-mix(in srgb, var(--promise-status-accent) 9%, var(--surface-float-strong));
    --promise-status-link-bg-hover: color-mix(in srgb, var(--promise-status-accent) 16%, var(--surface-float-strong));
    --promise-status-icon-bg: color-mix(in srgb, var(--promise-status-accent) 6%, var(--surface-float-strong));
    background: linear-gradient(180deg, color-mix(in srgb, var(--promise-status-accent) 7%, var(--surface-solid)) 0%, var(--surface-solid) 26%, var(--surface-solid) 100%);
    border: 1px solid var(--promise-status-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.promise-title-panel .panel-back-link {
    margin-bottom: 0;
    border-bottom-color: color-mix(in srgb, var(--promise-status-accent) 16%, rgba(23, 23, 23, 0.16));
}

.promise-title-panel--status-made {
    --promise-status-accent: #d97706;
}

.promise-title-panel--status-in_progress {
    --promise-status-accent: #0f6cbd;
}

.promise-title-panel--status-kept {
    --promise-status-accent: #1c8b4d;
}

.promise-title-panel--status-broken {
    --promise-status-accent: var(--accent-red);
}

.promise-title-panel--status-unknown {
    --promise-status-accent: #5b6472;
}

.promise-title-header {
    display: grid;
    padding: var(--space-1) 0 0;
}

.promise-title-eyebrow {
    margin: 0;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted-strong);
    line-height: 1.25;
}

.promise-title-eyebrow a {
    color: inherit;
    text-decoration: none;
}

.promise-title-eyebrow a:hover {
    text-decoration: underline;
}

.promise-title-connector {
    display: inline;
    margin-left: var(--space-1);
    font-size: var(--text-sm);
    color: var(--muted);
    font-style: italic;
    line-height: 1;
}

.promise-title-panel .page-headline {
    line-height: 1.02;
    padding: var(--space-1) 0 var(--space-1-5);
}

.promise-title-panel-sections {
    display: grid;
    gap: var(--space-3);
}

.promise-title-panel-section {
    padding-top: var(--space-3);
    border-top: 1px solid color-mix(in srgb, var(--promise-status-accent) 16%, rgba(23, 23, 23, 0.14));
}

.promise-sidebar-meta {
    margin-bottom: var(--space-2);
}

.promise-meta-block {
    margin-bottom: var(--space-2);
}

.promise-meta-row {
    padding: var(--space-2) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--promise-status-accent) 16%, rgba(23, 23, 23, 0.14));
}

.promise-meta-row:first-child {
    padding-top: 0;
}

.promise-meta-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.promise-meta-label {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 var(--space-1);
}

.promise-meta-person a,
.promise-meta-party a,
.promise-meta-location__link,
.timeline-link,
.filter-clear-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
}

.active-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

.promise-meta-person {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.promise-meta-person a {
    color: var(--ink);
    text-decoration: none;
}

.promise-meta-person a:hover {
    text-decoration: underline;
}

.promise-meta-party {
    font-size: var(--text-base);
    color: var(--muted);
}

.promise-meta-party a {
    color: var(--muted);
    text-decoration: none;
}

.promise-meta-party a:hover {
    text-decoration: underline;
}

.promise-meta-dates {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    font-size: var(--text-sm);
    color: var(--muted);
}

.promise-meta-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
}

.promise-meta-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--promise-status-border);
    border-radius: var(--size-radius-pill);
    background: var(--promise-status-icon-bg);
    color: var(--promise-status-ink);
    cursor: help;
    flex-shrink: 0;
}

.promise-meta-category-icon i {
    font-size: 0.98rem;
    line-height: 1;
}

.promise-meta-location {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-sm);
    color: var(--muted);
}

.promise-meta-location__icon {
    width: 0.9rem;
    height: 0.9rem;
    display: block;
    flex-shrink: 0;
}

.promise-meta-location__link {
    color: var(--muted);
    text-decoration: none;
}

.promise-meta-location__link:hover {
    color: var(--ink);
    text-decoration: underline;
}

.promise-status-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    border-color: var(--promise-status-border);
    background: var(--promise-status-badge-bg);
    color: var(--promise-status-ink);
}

.content-panel {
    border-radius: var(--size-radius-content);
}

.hero-media {
    margin-top: var(--space-4);
    overflow: hidden;
    cursor: zoom-in;
}

.hero-media img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    background: #f2eee6;
}

.gallery {
    margin-top: var(--space-3);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
}

.gallery-thumb {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.gallery-thumb img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
}

.section-title {
    margin: var(--space-7) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--line) 24%, transparent);
    font-size: var(--text-lg);
}

.promise-statement {
    font-size: var(--text-md);
    line-height: 1.65;
    margin-top: var(--space-1);
}

.promise-content-panel > .section-title:first-of-type,
.content-panel > .section-title:first-of-type {
    margin-top: var(--space-0-5);
    padding-top: 0;
    border-top: none;
}

.promise-panel-label {
    margin: 0 0 var(--space-2);
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 700;
}

.sentiment-stats {
    display: flex;
    gap: var(--space-1-5);
    flex-wrap: wrap;
    margin: 0 0 var(--space-3);
}

.sentiment-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border: 1px solid color-mix(in srgb, var(--line) 20%, transparent);
    border-radius: var(--radius-sm);
    min-width: var(--size-control-touch);
    background: color-mix(in srgb, var(--surface-press) 40%, var(--surface-solid));
    color: var(--ink);
}

.sentiment-stat__value {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1;
}

.sentiment-stat__label {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: var(--space-0-5);
}

.sentiment-stat-form {
    display: contents;
}

.sentiment-stat--action {
    cursor: pointer;
    background: var(--surface-float);
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
}

.sentiment-stat--action:hover {
    background: var(--surface-press-hover);
    border-color: color-mix(in srgb, var(--line) 50%, transparent);
}

.sentiment-stat--action.is-active {
    border-color: var(--line);
    background: var(--surface-press);
}

.sentiment-stat--action.is-active .sentiment-stat__value,
.sentiment-stat--action.is-active .sentiment-stat__label {
    color: var(--ink);
}

.sentiment-stats.is-pending .sentiment-stat--action {
    pointer-events: none;
    cursor: progress;
}

.public-reaction-actions {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.public-reaction-actions.is-pending {
    pointer-events: none;
}

.reaction-button {
    min-height: 2rem;
    padding: var(--space-0-5) var(--space-3);
    border: 1px solid var(--control-line-soft);
    border-radius: var(--size-radius-pill);
    background: var(--surface-float);
    color: var(--ink);
    font-size: var(--text-sm);
    cursor: pointer;
}

.reaction-button:hover {
    background: var(--surface-press-hover);
}

.reaction-button.is-active {
    border-color: var(--line);
    background: var(--surface-press);
    font-weight: 700;
}

.reaction-button.is-pending {
    border-color: var(--line);
    background: var(--surface-press);
    cursor: progress;
}


.promise-share-header {
    display: grid;
    gap: var(--space-1);
}

.promise-share-copy {
    margin: 0;
}

.promise-share-actions {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.promise-share-actions--icons {
    align-items: center;
}

.share-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-default);
    height: var(--size-control-default);
    border: 1px solid color-mix(in srgb, var(--line) 18%, transparent);
    border-radius: var(--size-radius-md);
    background: color-mix(in srgb, var(--surface) 82%, var(--surface-float-strong));
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

.share-icon-button:hover {
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface-float-strong));
    border-color: color-mix(in srgb, var(--accent-blue) 26%, rgba(23, 23, 23, 0.18));
}

.share-icon-button svg {
    width: 1.12rem;
    height: 1.12rem;
    display: block;
}

.promise-share-feedback {
    min-height: 1.2rem;
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.evidence-list {
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.evidence-list li {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 18%, transparent);
    font-size: var(--text-base);
}

.evidence-list li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.evidence-list__source {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.evidence-list__date {
    color: var(--muted);
    font-size: var(--text-sm);
}

.evidence-list__type {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.evidence-list__excerpt,
.evidence-list__missing {
    margin: var(--space-1-5) 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.evidence-list__missing {
    font-style: italic;
}

.related-list {
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-1);
}

.related-list li {
    padding: var(--space-2) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--line) 18%, transparent);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
}

.evidence-list a,
.related-list a {
    color: var(--link);
    overflow-wrap: anywhere;
}

.evidence-list__source a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    min-width: 0;
}

.timeline-panel {
    padding: 0;
}

.timeline-list {
    list-style: none;
    margin: var(--space-1-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.timeline-item {
    --timeline-dot-size: 1.72rem;
    --timeline-dot-shift: -0.14rem;
    position: relative;
    display: grid;
    grid-template-columns: 1.05rem minmax(0, 1fr);
    gap: var(--space-4);
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc((var(--timeline-dot-size) / 2) + var(--timeline-dot-shift) - 0.5px);
    top: var(--space-4);
    bottom: calc(0em - var(--space-4));
    width: 1px;
    background: rgba(23, 23, 23, 0.14);
}

.timeline-rail {
    position: relative;
}

.timeline-marker {
    --timeline-accent: var(--muted-strong);
    width: var(--timeline-dot-size);
    height: var(--timeline-dot-size);
    margin-top: var(--space-0-5);
    border-radius: var(--size-radius-pill);
    color: color-mix(in srgb, var(--timeline-accent) 80%, var(--ink));
    border: 1.5px solid color-mix(in srgb, var(--timeline-accent) 30%, rgba(23, 23, 23, 0.14));
    background: color-mix(in srgb, var(--timeline-accent) 9%, var(--surface-solid));
    box-sizing: border-box;
    display: grid;
    place-items: center;
    line-height: 0;
    transform: translateX(var(--timeline-dot-shift));
}

.timeline-icon {
    width: 1rem;
    height: 1rem;
    display: block;
}

.timeline-marker--started   { --timeline-accent: #4a6981; }
.timeline-marker--accepted  { --timeline-accent: #3d6b43; }
.timeline-marker--rejected  { --timeline-accent: #9f342b; }
.timeline-marker--updated   { --timeline-accent: #6a5a86; }
.timeline-marker--published { --timeline-accent: #b56a1f; }

.timeline-content {
    min-width: 0;
    padding: 0 0 var(--space-4);
    border-bottom: 1px solid rgba(23, 23, 23, 0.14);
}

.timeline-item:last-child .timeline-content {
    padding-bottom: 0;
    border-bottom: 0;
}

.timeline-meta,
.timeline-body {
    margin: 0;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    color: var(--muted);
    font-size: var(--text-sm);
}

.timeline-eyebrow {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.timeline-date {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
    white-space: nowrap;
    margin-top: var(--space-0-5);
}

.timeline-title {
    margin: var(--space-1) 0 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.3;
}

.timeline-body {
    margin-top: var(--space-2);
}

.timeline-link {
    margin-top: var(--space-2);
    color: var(--link);
}

.backbar-wrap {
    margin-top: var(--space-4);
}

.back-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base);
    color: var(--ink);
    text-decoration: none;
}

/* back-bar responsive overrides kept intact below */

.pager {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid color-mix(in srgb, var(--line) 16%, transparent);
}

.pager-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.pager-info {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.pager-info strong {
    color: var(--ink);
    font-weight: 700;
}

.pager-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: center;
}

.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-control-compact);
    min-height: var(--size-control-compact);
    padding: var(--space-1) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--line) 32%, transparent);
    border-radius: var(--size-radius-pill);
    background: color-mix(in srgb, var(--surface-solid) 92%, var(--paper));
    color: var(--ink);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color 140ms ease, border-color 140ms ease;
}

a.pager-btn:hover {
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface-solid));
    border-color: color-mix(in srgb, var(--line) 48%, transparent);
    color: var(--ink);
    text-decoration: none;
}

.pager-btn--current {
    background: var(--surface-press);
    border-color: color-mix(in srgb, var(--line) 52%, transparent);
    font-weight: 700;
    cursor: default;
}

.pager-btn--disabled {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

.pager-btn--dots {
    border-color: transparent;
    background: transparent;
    min-width: 1.5rem;
    padding: var(--space-1) var(--space-0-5);
    cursor: default;
}

.infinite-scroll-sentinel {
    width: 100%;
    height: 1px;
}

.infinite-scroll-status {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--muted);
    text-align: center;
}

.site-footer {
    display: flex;
    justify-content: flex-end;
    width: min(1280px, calc(100vw - 3rem));
    margin: var(--space-8) auto 0;
}

.site-mascot {
    display: block;
    width: 120px;
}

.site-mascot img {
    display: block;
    width: 100%;
    height: auto;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(12, 12, 12, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: 99;
}

.lightbox img {
    max-width: min(1200px, 96vw);
    max-height: 88vh;
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    background: var(--surface-solid);
}

.lightbox.open {
    display: flex;
}

@media (max-width: 1040px) {
    .filter-panel.promise-discovery-filters--mobile {
        display: block;
    }

    .filter-panel.promise-discovery-filters--desktop {
        display: none;
    }

    .utility-menu-panel {
        width: min(28rem, calc(100vw - 1rem));
    }

    .utility-menu-grid,
    .status-legend-list {
        grid-template-columns: 1fr;
    }

    .utility-menu-links--site {
        grid-template-columns: 1fr;
    }

    .wrap {
        width: calc(100vw - 2rem);
    }

    .home-layout,
    .split-layout {
        grid-template-columns: 1fr;
    }

    .split-layout--with-nav {
        grid-template-columns: 1fr;
    }

    .split-layout--with-nav > .nav-col {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        align-self: start;
        position: static;
    }

    .split-layout--with-nav > .content-panel {
        grid-column: 1;
        grid-row: 3;
    }

    .promise-grid {
        grid-template-columns: 1fr;
    }

    .prose-panel,
    .journal-panel {
        max-width: none;
        width: 100%;
        justify-self: stretch;
    }
    .promise-card--flip,
    .promise-card-flip-inner,
    .promise-card-face {
        min-height: 19rem;
    }

    .promise-card--tracker {
        min-height: auto;
    }
}

@media (max-width: 820px) {
    .filter-toolbar {
        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
        align-items: center;
        gap: var(--space-2);
    }

    .filter-drawer-trigger {
        grid-column: 1;
        grid-row: 1;
    }

    .filter-search {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .utility-menu-shell--inline {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }

    .filter-toolbar .utility-menu-trigger,
    .filter-toolbar .filter-drawer-trigger {
        width: var(--size-control-touch);
        height: var(--size-control-touch);
        min-width: var(--size-control-touch);
        min-height: var(--size-control-touch);
        padding: 0;
    }

    .filter-drawer-trigger-label {
        display: none;
    }

    .filter-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-1);
    }

    .filter-drawer-grid,
    .filter-drawer-fields,
    .filter-drawer-grid .geography-drilldown,
    .status-legend-list--compact {
        grid-template-columns: 1fr;
    }

    .filter-drawer-footer {
        flex-wrap: wrap;
    }

    .filter-drawer-sort {
        flex-basis: 100%;
    }

    .gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .timeline-header {
        display: grid;
    }

    .timeline-date {
        white-space: normal;
    }
    .promise-card-details {
        grid-template-columns: 1fr;
    }

    .promise-card-highlights {
        grid-template-columns: 1fr;
    }

    .promise-card-meta {
        grid-template-columns: 1fr;
    }


    .promise-title-panel {
        padding: var(--space-4);
    }

    .promise-card-top {
        align-items: flex-start;
    }

    .promise-card-category-icons {
        justify-content: flex-start;
    }

    .promise-card-face h3 {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .site-shell {
        padding-top: var(--space-4);
        padding-bottom: var(--space-28);
    }

    .utility-menu-shell--inline {
        order: 0;
    }

    .wrap {
        width: calc(100vw - 2.5rem);
    }

    .hero-panel,
    .title-panel,
    .legend-panel,
    .content-panel {
        padding: var(--space-4);
    }

    .legend-panel {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .home-headline {
        font-size: 2.6rem;
    }

    .page-headline {
        font-size: 2rem;
    }

    .promise-card-status-badge,
    .promise-status-chip {
        font-size: var(--text-sm);
    }

    .status-legend-item {
        padding: var(--space-3) var(--space-4);
    }

    .status-legend-badge {
        font-size: var(--text-sm);
    }

    .share-icon-button {
        width: 2.7rem;
        height: 2.7rem;
    }

    .nav-panel {
        flex-wrap: wrap;
    }

    .subnav a {
        flex-basis: calc(50% - 0.2rem);
    }

    .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (hover: none), (pointer: coarse) {
    .promise-card--flip {
        perspective: none;
        min-height: auto;
    }

    .promise-card-flip-inner {
        display: grid;
        gap: var(--space-3);
        min-height: auto;
        transform: none;
    }

    .promise-card-face {
        position: relative;
        min-height: auto;
    }

    .promise-card-face--back {
        display: flex;
        transform: none;
    }

    .promise-card-flip-hint {
        display: none;
    }
}

/* ─── Desktop menu panel: compact dropdown anchored to the trigger ─── */
@media (min-width: 641px) {
    .utility-menu-panel {
        position: absolute;
        top: calc(100% + var(--space-2));
        right: 0;
        bottom: auto;
        height: auto;
        max-height: min(calc(100dvh - 5rem), 38rem);
        border: 2px solid var(--line);
        border-radius: var(--radius-md);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
        /* bloom from the top-right corner; base = close snap */
        transform: scale(0.86) translateY(calc(0em - var(--space-2)));
        transform-origin: top right;
        transition: transform 160ms cubic-bezier(0.4, 0, 1, 1), opacity 120ms ease;
    }

    .utility-menu-shell.is-open .utility-menu-panel {
        transform: scale(1) translateY(0);
        /* open = spring bloom */
        transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms cubic-bezier(0, 0, 0.2, 1);
    }
}

@media (max-width: 768px) {
    .utility-menu-shell {
        margin-left: auto;
    }

    .promise-filter .filter-drawer-panel {
        transform: translate3d(calc(100% + var(--space-4)), 0, 0);
        transform-origin: center;
    }

    .drawer-panel,
    .utility-menu-panel {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        border: 0;
        border-left: 2px solid var(--line);
        border-radius: 0;
        box-shadow: none;
    }

    .drawer-panel {
        width: auto;
        min-width: min(22rem, 92vw);
        max-height: none;
    }

    .utility-menu-panel {
        inset: 0 0 0 auto;
        width: min(22rem, 92vw);
        height: 100svh;
        min-height: 100svh;
        transform: translate3d(calc(100% + var(--space-4)), 0, 0);
        will-change: transform, opacity;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease;
    }

    .utility-menu-shell.is-open .utility-menu-panel,
    .utility-menu-trigger[aria-expanded='true'] + .utility-menu-panel,
    .utility-menu-panel.is-open {
        transform: translate3d(0, 0, 0);
    }

    .filter-toolbar .utility-menu-trigger[aria-expanded='true']:not(.utility-menu-panel-close) {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .utility-menu-panel .drawer-header {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: calc(0em - var(--space-4)) calc(0em - var(--space-5)) var(--space-2);
        padding: var(--space-3) var(--space-3) var(--space-1-5);
        background: color-mix(in srgb, var(--surface-solid) 98%, var(--paper-top));
    }
}

@media (min-width: 769px) {
    .utility-menu-panel .drawer-header {
        display: none;
    }
}