/* ── Night frame for every page except the homepage, Oct 2026 ────────────
   The homepage is a night scene. Inner pages now open the same way: the
   homepage's dark nav, a dark "sky" behind the page title with the same
   warm-and-steel glow, then the content on warm paper, then the dark footer.

   To give a page the sky, add class="page-sky" to the element that holds its
   title (eyebrow, h1, lead, buttons). Nothing moves: the dark background is
   painted behind that element out to the edges of the window and up under
   the nav. Pages without one simply get the dark nav and the paper.        */

body.theme-night {
  --paper: #F6F4F0;
  --night: #0B0E14;
  --mist: #E9EDF2;
  background: var(--paper);
  overflow-x: clip;                     /* the sky is 100vw wide; never a sideways scroll */
}

/* ── nav: the homepage's, on a dark glass bar ── */
.theme-night .nav-wrap {
  position: sticky; top: 0; padding: 18px 5vw;
  background: rgba(11, 14, 20, .86);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.theme-night .nav-pill { background: transparent; box-shadow: none; border-radius: 0; max-width: none; padding: 0; color: var(--mist); }
.theme-night .brand { color: var(--mist); letter-spacing: .22em; font-weight: 700; font-size: clamp(.95rem, .8rem + .55vw, 1.25rem); }
.theme-night .nav-links { gap: 30px; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.theme-night .nav-links a:not(.btn-dark) { color: rgba(233, 237, 242, .82); transition: color .15s ease; }
.theme-night .nav-links a:not(.btn-dark):hover { color: #fff; }
.theme-night .nav-links .btn-dark {
  background: transparent; border: 1px solid rgba(233, 237, 242, .55); color: var(--mist); box-shadow: none;
  padding: 8px 20px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.theme-night .nav-links .btn-dark:hover { background: rgba(233, 237, 242, .1); transform: none; }
.theme-night .nav-links a:focus-visible, .theme-night .brand:focus-visible { outline: 2px solid #C08A52; outline-offset: 4px; border-radius: 6px; }

@media (max-width: 640px) {
  .theme-night .nav-wrap { padding: 14px 5vw; }
  .theme-night .nav-toggle span { background: var(--mist); }
  .theme-night .nav-links {
    background: rgba(11, 14, 20, .92);
    backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border: 1px solid rgba(233, 237, 242, .16); box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
    border-radius: 22px; padding: 14px; gap: 0;
  }
  .theme-night .nav-links a:not(.btn-dark) { letter-spacing: .1em; font-size: .85rem; border-radius: 0; }
  .theme-night .nav-links a:not(.btn-dark) + a:not(.btn-dark) { border-top: 1px solid rgba(233, 237, 242, .09); }
  .theme-night .nav-links a:not(.btn-dark):hover { background: rgba(233, 237, 242, .08); border-radius: 12px; }
  .theme-night .nav-links .btn-dark { margin-top: 12px; border-color: rgba(233, 237, 242, .4); text-align: center; }
}

/* ── the sky behind a page title ── */
.theme-night .page-sky { position: relative; padding-bottom: 52px; margin-bottom: 44px !important; }
.theme-night .page-sky::before {
  content: ''; position: absolute; z-index: -1;
  top: -900px; bottom: 0; width: 100vw;
  background:
    radial-gradient(640px 320px at 14% 100%, rgba(192, 138, 82, .26), transparent 70%),
    radial-gradient(560px 300px at 86% 72%, rgba(110, 150, 184, .2), transparent 70%),
    var(--night, #0B0E14);
}
/* a faint warm horizon where night meets paper */
.theme-night .page-sky::after {
  content: ''; position: absolute; z-index: -1; bottom: 0; height: 1px;
  width: 100vw;
  background: linear-gradient(90deg, transparent, rgba(192, 138, 82, .45) 30%, rgba(110, 150, 184, .35) 70%, transparent);
}
/* centre the sky on the window even inside an off-centre column */
.theme-night .page-sky::before, .theme-night .page-sky::after { left: 50%; transform: translateX(-50%); }

.theme-night .page-sky, .theme-night .page-sky h1, .theme-night .page-sky .page-h, .theme-night .page-sky .jr-h1, .theme-night .page-sky .g-title, .theme-night .db .page-sky .db-title { color: #F2F4F7; }
.theme-night .page-sky h1, .theme-night .page-sky .page-h, .theme-night .page-sky .jr-h1, .theme-night .page-sky .g-title, .theme-night .db .page-sky .db-title {
  font-family: var(--display); font-weight: 300; letter-spacing: -.03em; line-height: 1.06;
  font-size: clamp(2.3rem, 4.6vw, 3.7rem); text-wrap: balance;
}
.theme-night .page-sky .eyebrow, .theme-night .page-sky .jr-kicker {
  color: rgba(233, 237, 242, .55); font-size: .74rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 18px;
}
.theme-night .page-sky .lead, .theme-night .page-sky .jr-lead, .theme-night .page-sky .g-lead, .theme-night .page-sky .pp-rel, .theme-night .page-sky .db-sub, .theme-night .page-sky .jr-meta, .theme-night .page-sky .jr-by-note { color: rgba(233, 237, 242, .72); }
.theme-night .page-sky .lead, .theme-night .page-sky .jr-lead { margin-top: 18px !important; font-size: 1.12rem; line-height: 1.6; max-width: 56ch; }
.theme-night .page-sky .jr-by-name, .theme-night .page-sky strong { color: #F2F4F7; }
.theme-night .page-sky a:not(.btn-dark):not(.btn-ghost) { color: rgba(233, 237, 242, .86) !important; text-decoration-color: rgba(233, 237, 242, .35) !important; }
.theme-night .page-sky a:not(.btn-dark):not(.btn-ghost):hover { color: #fff !important; text-decoration-color: currentColor !important; }
.theme-night .page-sky .btn-dark { background: #F4F6F8; color: #12161E; box-shadow: 0 10px 30px -12px rgba(233, 237, 242, .35); }
.theme-night .page-sky .btn-dark:hover { background: #fff; }
.theme-night .page-sky .btn-ghost { border: 1px solid rgba(233, 237, 242, .5); color: var(--mist); }
.theme-night .page-sky .btn-ghost:hover { background: rgba(233, 237, 242, .08); }
.theme-night .page-sky .jr-byline { border-bottom: 0; padding-bottom: 0; }
.theme-night .page-sky .jr-ini { box-shadow: 0 0 0 1px rgba(233, 237, 242, .2); }
.theme-night .page-sky .jr-draft { color: #E7B69F; }
.theme-night .page-sky a:focus-visible, .theme-night .page-sky button:focus-visible { outline-color: #C08A52 !important; }

/* things that sit above a title, inside the sky */
.theme-night .jr-back { color: rgba(233, 237, 242, .7) !important; }
.theme-night .jr-back:hover { color: #fff !important; }

/* the column starts right under the nav, so the sky meets it with no paper gap */
.theme-night main > :has(> .page-sky), .theme-night main > :has(> * > .page-sky) { padding-top: 64px; }
@media (max-width: 640px) {
  .theme-night .page-sky { padding-bottom: 36px; margin-bottom: 30px !important; }
  .theme-night main > :has(> .page-sky), .theme-night main > :has(> * > .page-sky) { padding-top: 40px; }
  .theme-night .page-sky h1, .theme-night .page-sky .page-h, .theme-night .page-sky .jr-h1, .theme-night .page-sky .g-title, .theme-night .db .page-sky .db-title { font-size: clamp(2.05rem, 9vw, 2.6rem); }
  .theme-night .page-sky .lead, .theme-night .page-sky .jr-lead { font-size: 1.02rem; }
}

/* ── paper: warmer and quieter than the old blue wash ── */
.theme-night .card, .theme-night .db-card, .theme-night .jr-card, .theme-night .jr-feature, .theme-night .db-empty, .theme-night .jr-cta {
  border: 1px solid rgba(40, 32, 22, .07);
  box-shadow: 0 1px 2px rgba(40, 32, 22, .04), 0 22px 48px -34px rgba(40, 32, 22, .38);
}
.theme-night details.faq { border: 1px solid rgba(40, 32, 22, .07); box-shadow: 0 1px 2px rgba(40, 32, 22, .04); }
.theme-night h2, .theme-night .faq-group { font-family: var(--display); }
.theme-night .eyebrow { letter-spacing: .24em; }

/* ── footer: the homepage's ── */
.theme-night .site-footer { background: #080A0F; color: var(--mist); }
.theme-night .foot-care, .theme-night .foot-cols h2, .theme-night .foot-legal { color: rgba(233, 237, 242, .62); }
.theme-night .foot-care a, .theme-night .foot-legal a, .theme-night .foot-legal button { text-decoration-color: rgba(233, 237, 242, .3); }
.theme-night .foot-cols a { color: rgba(233, 237, 242, .86); }
.theme-night .foot-legal { border-top-color: rgba(233, 237, 242, .1); }
.theme-night .site-footer a:focus-visible, .theme-night .site-footer button:focus-visible { outline-color: #C08A52; }

/* ── trial strip (FAQ, Support), as on the homepage ── */
.theme-night #trial-banner { background: #0B0E14; border-bottom: 1px solid rgba(233, 237, 242, .1); color: rgba(233, 237, 242, .85); }
.theme-night #trial-banner .tb-link { color: #A8C6E8; }
.theme-night #trial-banner .tb-link:hover { color: #CBDFF5; }
.theme-night #trial-banner .tb-close { color: rgba(233, 237, 242, .6); }

/* the journal's heads are narrower than the column; let the band span it, keep the text measure */
.theme-night .jr-head.page-sky, .theme-night .jr-article-head.page-sky { max-width: none; }
.theme-night .jr-head.page-sky > *, .theme-night .jr-article-head.page-sky > * { max-width: 760px; }
.theme-night .page-sky .hint { color: rgba(233, 237, 242, .55); }

/* companion page and guide pages */
.theme-night .pp .page-sky .pp-name { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
.theme-night .pp-avatar { box-shadow: 0 0 0 3px rgba(233, 237, 242, .14), 0 10px 30px -12px rgba(0, 0, 0, .6); }
.theme-night .g-head.page-sky { max-width: none; border-bottom: 0; }
.theme-night .g-head.page-sky > * { max-width: 50rem; }
.theme-night .g-crumbs, .theme-night .g-crumbs a { color: rgba(233, 237, 242, .6); text-decoration-color: rgba(233, 237, 242, .3); }
.theme-night .g-crumbs a:hover { color: #fff; }
@media (max-width: 560px) { .theme-night .page-sky .db-new { white-space: nowrap; padding: 12px 16px; } }