html {
    visibility: visible;
    scrollbar-gutter: stable;
}

/* Core theme tokens. Dark mode overrides these near the end of the file. */
:root {
    --bg: #e9edf3;
    --bg-glow: rgba(201, 106, 38, 0.1);
    --card: #f9fbfe;
    --ink: #151b26;
    --muted: #5f697a;
    --accent: #c96a26;
    --accent-soft: #f1dfce;
    --accent-ink: #4b250b;
    --accent-deep: #8f4314;
    --cool: #4ca8d8;
    --border: #ccd4df;
    --panel-border: rgba(15, 23, 42, 0.1);
    --shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    --panel-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
    --panel-shadow-strong: 0 22px 42px rgba(15, 23, 42, 0.2);
    --panel-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.16) 34%, rgba(255, 255, 255, 0) 72%);
    --panel-ember-wash: radial-gradient(120% 110% at 100% 0%, rgba(201, 106, 38, 0.1) 0%, rgba(201, 106, 38, 0) 56%);
    --panel-rail: linear-gradient(90deg, rgba(201, 106, 38, 0.72) 0%, rgba(201, 106, 38, 0.36) 38%, rgba(201, 106, 38, 0) 100%);
    --surface-soft: #eef2f7;
    --surface-soft-strong: #e8edf4;
    --bg-stripe: rgba(15, 23, 42, 0.03);
    --heading-ink: #0f1728;
    --focus-ring: rgba(201, 106, 38, 0.36);
    --fire-grad-start: #f5d7a8;
    --fire-grad-mid: #dd8440;
    --fire-grad-end: #c14c1d;
    --fire-ring: rgba(201, 106, 38, 0.3);
    --link: #a04a16;
    --link-hover: #7d3811;
    --link-bg: rgba(201, 106, 38, 0.14);
    --link-bg-hover: rgba(201, 106, 38, 0.22);
    --sidebar-col: 280px;
    --dialog-shell-width: min(900px, 97vw);
    --dialog-shell-gap: 0.9rem;
    --dialog-shell-radius: 16px;
    --dialog-shell-padding: 0.92rem;
    --dialog-shell-shadow: var(--panel-shadow-strong);
}

* {
    box-sizing: border-box;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

[hidden] {
    display: none !important;
}

h1,
h2,
p {
    margin: 0;
}

body {
    margin: 0;
    font-family: "Segoe UI Variable Text", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    line-height: 1.45;
    color: var(--ink);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1300px 860px at 50% -260px, var(--bg-glow) 0%, rgba(0, 0, 0, 0) 78%),
        repeating-linear-gradient(
            120deg,
            var(--bg-stripe) 0 1px,
            rgba(0, 0, 0, 0) 1px 38px
        ),
        var(--bg);
}

h1,
h2,
h3,
.modal-title,
.section-header h2,
.section-header .section-title,
.feed-header h2,
.rant-link {
    font-family: "Segoe UI Variable Display", "Segoe UI Variable Text", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    letter-spacing: -0.015em;
}

@media (min-width: 901px) {
    body {
        overflow-y: scroll;
    }
}

.top-bar {
    position: relative;
    z-index: 80;
    padding: 0.45rem 0.9rem 0.45rem;
}

.top-bar-inner {
    --top-bar-radius: 16px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    isolation: isolate;
    /* Allow live search suggestions to extend beyond the header card. */
    overflow: visible;
    background:
        var(--panel-rail) top / calc(100% - 2px) 2px no-repeat,
        var(--panel-sheen),
        var(--panel-ember-wash),
        var(--card);
    border-radius: var(--top-bar-radius);
    padding: 0.55rem 0.75rem;
    box-shadow: var(--panel-shadow);
    border: 1px solid var(--panel-border);
    display: grid;
    gap: 0.5rem 0.7rem;
    align-items: center;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "brand actions"
        "search search";
}

.brand {
    grid-area: brand;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.brand-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
}


.logo {
    max-width: clamp(150px, 22vw, 220px);
    height: auto;
}

.tagline {
    margin: 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--muted);
}

.container {
    max-width: 1200px;
    margin: 0.6rem auto 3.2rem;
    padding: 0 1.25rem;
    display: grid;
    gap: 1.7rem;
    flex: 1 0 auto;
}