/* ==========================================================================
   Stochumberg — shared page chrome
   Nav, shell, cards and footer for landing, legal and updates.

   All colour, radius and type comes from tokens.css (shadcn zinc). This file
   only does layout and component shape. The --br-* names still resolve —
   they are aliases defined in tokens.css — so any inline style in a template
   keeps working.
   ========================================================================== */

/* ---------- Base ---------- */

.br-page *,
.br-page *::before,
.br-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html:has(.br-page) {
    background: var(--background);
    scroll-behavior: smooth;
}

.br-page {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Anchors land below the sticky nav instead of under it */
.br-page [id] {
    scroll-margin-top: calc(var(--br-nav-h) + 20px);
}

:root {
    --br-nav-h: 56px;
    --br-container: 1120px;
    --br-gutter: clamp(16px, 4vw, 32px);
}

@media (min-width: 1500px) {
    :root { --br-container: 1280px; }
}

/* ---------- Backdrop ----------
   Was an aurora + grid, then flat. Now a dot grid with a soft lift behind the
   top of the page — enough to stop the flatness, faint enough that it never
   competes with text.

   Deliberately neutral: both layers are --foreground at single-digit alpha, so
   this stays inside the rule that hue is reserved for status and focus, and
   works in light mode without a second definition.

   Anchored to the top of the document, not the viewport: `fixed` pinned the
   fade to the screen, which left the same band of dots hanging above every
   section as you scrolled. */

.br-aurora {
    position: absolute;
    inset: 0 0 auto;
    height: clamp(620px, 95vh, 940px);
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(70% 45% at 50% -10%,
            color-mix(in srgb, var(--foreground) 5%, transparent), transparent 70%),
        radial-gradient(circle at 1px 1px,
            color-mix(in srgb, var(--foreground) 9%, transparent) 1px, transparent 0)
            0 0 / 30px 30px,
        var(--background);
}

/* The grid is a texture, not a pattern to read: it fades out before the first
   band so the long editorial sections stay quiet. */
.br-aurora::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--background) 55%, transparent) 55%,
        var(--background) 92%);
}

/* ---------- Nav ---------- */

.br-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--br-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-inline: max(var(--br-gutter), calc((100% - var(--br-container)) / 2 + var(--br-gutter)));
    background: color-mix(in srgb, var(--background) 80%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.br-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
    color: var(--foreground);
    text-decoration: none;
    flex: none;
}

.br-brand-mark {
    width: 22px;
    height: 22px;
    flex: none;
    background: url('favicon.svg') center / contain no-repeat;
}

.br-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.2vw, 8px);
    list-style: none;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.br-nav-links::-webkit-scrollbar { display: none; }
.br-nav-links li { flex: none; }

.br-nav-links a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.br-nav-links a:hover {
    color: var(--foreground);
    background: var(--accent);
}

/* ---------- Buttons (shadcn: default / outline) ---------- */

.br-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease),
                color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.br-btn:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.br-btn-primary {
    background: var(--primary);
    border-color: transparent;
    color: var(--primary-foreground);
    font-weight: 500;
    box-shadow: var(--shadow-xs);
}

.br-btn-primary:hover {
    background: color-mix(in srgb, var(--primary) 90%, var(--background));
    color: var(--primary-foreground);
}

/* ---------- Page shell ---------- */

.br-shell {
    position: relative;
    z-index: 1;
    max-width: var(--br-container);
    margin: 0 auto;
    padding: clamp(40px, 7vw, 72px) var(--br-gutter) 88px;
}

.br-shell-narrow { max-width: 768px; }

/* Badge */
.br-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 20px;
}

.br-h1 {
    font-family: var(--font-sans);
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--foreground);
    margin-bottom: 12px;
    text-wrap: balance;
}

.br-lead {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 65ch;
    text-wrap: pretty;
}

.br-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted-foreground);
    margin-top: 14px;
}

.br-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    color: var(--card-foreground);
}

.br-rule {
    height: 1px;
    border: 0;
    background: var(--border);
    margin: clamp(40px, 6vw, 64px) 0;
}

/* ---------- Footer ---------- */

.br-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--border);
    background: var(--background);
}

.br-footer-in {
    max-width: var(--br-container);
    margin: 0 auto;
    padding: 24px var(--br-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
}

.br-footer-copy {
    font-size: 13px;
    color: var(--muted-foreground);
}

.br-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.br-footer-links a {
    font-size: 13px;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.br-footer-links a:hover {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- A11y ---------- */

.br-page a:focus-visible,
.br-page button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
    border-radius: var(--radius-md);
}

.br-skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    background: var(--popover);
    border: 1px solid var(--border);
    color: var(--popover-foreground);
    font-size: 14px;
    text-decoration: none;
}

.br-skip:focus { left: 16px; }

/* ---------- Reveal on scroll (armed by JS, so no-JS shows everything) ---------- */

.br-reveal-armed {
    opacity: 0;
    translate: 0 8px;
    transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
}

.br-reveal-armed.br-in {
    opacity: 1;
    translate: none;
}

@media (prefers-reduced-motion: reduce) {
    html:has(.br-page),
    .br-page {
        scroll-behavior: auto;
    }

    .br-page *,
    .br-page *::before,
    .br-page *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 640px) {
    .br-nav { gap: 8px; }
    /* Mark only, so the header keeps its brand. Must exclude the mark itself —
       it is a <span> too, and hiding it left the nav with no brand at all. */
    .br-brand span:not(.br-brand-mark) { display: none; }

    /* The link row cannot fit beside the CTA at this width: it scrolled
       horizontally and clipped mid-word under the button. Drop it — the
       footer carries the same destinations. */
    .br-nav-links { display: none; }
    .br-footer-in { justify-content: center; text-align: center; }
}