/* Night gold layer. Loaded last from _layouts/default.html.
   The `html body` prefix wins over page-level <style> blocks inside the body. */

html body h1,
html body h2,
html body h3,
html body .post-headline,
html body .card-title,
html body .page-hero-title { font-weight: 700; letter-spacing: -0.02em; }

html body .page-hero-subtitle { font-style: normal; font-family: var(--font-sans); }
html body .page-content h1 { font-weight: 700; }

/* Gold fills always carry dark text, including on the transparent hero header */
html body .site-header--overlay .main-nav a.nav-cta,
html body .main-nav a.nav-cta { color: var(--on-accent); }

html body .btn { font-weight: 600; letter-spacing: 0; }

/* Tags: small solid gold labels, as in the mock */
html body .rank-tag,
html body .post-cat-pill,
html body .post-tag-item,
html body .at-fiction { border-radius: 6px; }

/* ─────────────────────────────────────────────────────────────
   Craft layer: motion, materials and type details.
   Springs are critically damped (no overshoot) because nothing here carries
   gesture momentum. Only transform, opacity and translate animate.
   ───────────────────────────────────────────────────────────── */
:root {
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --glass: rgba(11, 16, 32, 0.72);
    --glass-edge: rgba(255, 255, 255, 0.07);
    --lift-sm: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.3);
    --lift-lg: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 48px -16px rgba(0, 0, 0, 0.55), 0 8px 16px -8px rgba(0, 0, 0, 0.4);
}
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        /* Critically damped spring, response 0.45s, sampled over 0.9s */
        --ease-spring: linear(0, 0.0974, 0.2816, 0.4656, 0.6189, 0.7361, 0.821, 0.8806, 0.9213, 0.9487, 0.9668, 0.9787, 0.9864, 0.9914, 0.9945, 0.9966, 0.9978, 0.9987, 0.9992, 0.9995, 0.9997, 0.9998, 0.9999, 0.9999, 1);
    }
}

/* Type: tracking tightens as size grows, leading tightens with it */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
html body {
    font-optical-sizing: auto;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}
html body h1 { letter-spacing: -0.032em; line-height: 1.06; text-wrap: balance; }
html body h2 { letter-spacing: -0.024em; line-height: 1.14; text-wrap: balance; }
html body h3 { letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
html body h4 { letter-spacing: -0.008em; }
html body p, html body li { text-wrap: pretty; }
html body small, html body .rank-tag, html body .br-tag, html body .mag-meta { letter-spacing: 0.01em; }
html body table, html body .rank-card, html body time, html body .ideas-table { font-variant-numeric: tabular-nums; }
::selection { background: rgba(197, 165, 114, 0.34); color: var(--ink); }
html body :focus-visible { outline-offset: 3px; }

/* Header: a translucent material over scrolling content, with a soft scroll
   edge in place of a hard divider */
html body .site-header {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: inset 0 -1px 0 var(--glass-edge);
    transition: box-shadow 0.35s ease, background-color 0.35s ease;
}
html body .site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 32px;
    background: linear-gradient(180deg, rgba(11, 16, 32, 0.45), rgba(11, 16, 32, 0));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
html body .site-header.is-scrolled::after { opacity: 1; }
html body .site-header--overlay { background: linear-gradient(180deg, rgba(7, 12, 26, 0.72) 0%, rgba(7, 12, 26, 0.38) 60%, rgba(7, 12, 26, 0) 100%); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
html body .site-header--overlay.is-solid { background: rgba(19, 26, 46, 0.72); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: inset 0 -1px 0 var(--glass-edge); }
html body .main-nav a { font-weight: 500; letter-spacing: 0.003em; }
@media (max-width: 1000px) {
    html body .main-nav.active { animation: tye-nav-in 0.4s var(--ease-spring) both; transform-origin: top right; }
}
@keyframes tye-nav-in { from { opacity: 0; transform: translateY(-8px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Reveal blocks without their own transition list (proof, headings, statement)
   fade and rise too; keep above the card rule so cards keep their longer list */
html body .rv { transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-spring); }

/* Press feedback is instant; release springs back */
html body .btn,
html body .founder-card, html body .rank-card, html body .article-card,
html body .br-founder, html body .br-feature, html body .mag-card {
    transition: transform 0.55s var(--ease-spring), background-color 0.2s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.35s ease, opacity 0.7s var(--ease-out), translate 0.9s var(--ease-spring);
}
html body .btn:active,
html body .founder-card:active, html body .rank-card:active, html body .article-card:active,
html body .br-founder:active, html body .br-feature:active, html body .mag-card:active {
    transform: scale(0.97);
    transition-duration: 0.1s, 0.2s, 0.25s, 0.2s, 0.35s, 0.7s, 0.9s;
}
html body .btn-gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 2px rgba(0, 0, 0, 0.3); }
@media (hover: hover) {
    html body .btn:hover { transform: translateY(-1px); }
    html body .founder-card:hover, html body .rank-card:hover, html body .article-card:hover { transform: translateY(-3px); box-shadow: var(--lift-lg); }
    html body .br-founder:hover { transform: translateY(-5px); box-shadow: var(--lift-lg); }
}

/* Surfaces: a bright top edge reads as light catching the material; larger
   surfaces sit deeper */
html body .founder-card, html body .rank-card, html body .article-card, html body .br-founder { box-shadow: var(--lift-sm); }
html body .br-feature { box-shadow: var(--lift-lg); }
.br-hero .btn-outline-light {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
}
.br-hero .btn-outline-light:hover { background: var(--gold); border-color: var(--gold); }
.br-hero h1 { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35); }

/* Hero: the photo settles in, the words rise one after another */
.br-hero-img { animation: tye-settle 1.8s var(--ease-out) both; }
.br-hero-inner > * { animation: tye-rise 0.95s var(--ease-spring) both; animation-delay: calc(0.12s + var(--d, 0) * 0.09s); }
.br-hero-inner > :nth-child(1) { --d: 0; }
.br-hero-inner > :nth-child(2) { --d: 1; }
.br-hero-inner > :nth-child(3) { --d: 2; }
.br-hero-inner > :nth-child(4) { --d: 3; }
@keyframes tye-settle { from { scale: 1.07; } to { scale: 1; } }
@keyframes tye-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes tye-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tye-drift { to { translate: 0 7%; } }
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .br-hero-img { animation: tye-settle 1.8s var(--ease-out) both, tye-drift linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0 90svh; }
    }
}

/* Scroll reveal for the home sections. Individual `translate` keeps it apart
   from the hover transform. Hidden only when JS is running. */
html.js .rv { opacity: 0; translate: 0 26px; }
html.js .rv.is-visible { opacity: 1; translate: 0 0; transition-delay: 0s, 0s, 0s, 0s, 0s, calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms); }
html body .reveal { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-spring); }

/* Accessibility: reduced motion keeps opacity changes and drops movement;
   reduced transparency and more contrast firm up the glass */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .br-hero-img { animation: none; }
    .br-hero-inner > * { animation: tye-fade 0.5s ease both; animation-delay: 0s; }
    html.js .rv { translate: none; transition: opacity 0.4s ease; }
    html body .btn:hover, html body .btn:active,
    html body .founder-card:hover, html body .rank-card:hover, html body .article-card:hover,
    html body .br-founder:hover, html body .br-founder:active, html body .br-feature:active,
    html body .mag-card:active, html body .founder-card:active, html body .rank-card:active, html body .article-card:active { transform: none; }
    html body .main-nav.active { animation: tye-fade 0.25s ease both; }
}
@media (prefers-reduced-transparency: reduce) {
    html body .site-header, html body .site-header--overlay.is-solid { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .br-hero .btn-outline-light { background: rgba(11, 16, 32, 0.7); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    :root { --glass-edge: rgba(255, 255, 255, 0.28); }
    html body .founder-card, html body .rank-card, html body .article-card, html body .br-founder, html body .br-feature { border-color: var(--text-muted); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body .site-header, html body .site-header--overlay.is-solid { background: var(--bg); }
}