/* ============================================================================
   The public site: one header, one footer, the page hero, the section rows
   and the closing band, shared by the home page, How it works, About,
   Sign in and the page-not-found page.

   The header sits over the night hero, clear until the hero scrolls away,
   then paper (public/js/site.js adds .solid). A page with no hero gets the
   paper header at once. The logo always goes home. The current page carries
   the brand's square plum bar.

   One type scale for the inner pages: section headings clamp(28px, 3vw,
   36px), body text 16px, and every section is a ledger row (a label on the
   left, the substance on the right). The home page makes its own headings a
   little larger in public/css/landing.css.
   ========================================================================== */

:root {
  --night: #1b0e15;
  --night-2: #2c1523;
  --night-3: #150a10;
  --head-h: 72px;
  --site-max: 1056px;
  --gutter: 32px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.site { background: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; }
.site [id] { scroll-margin-top: calc(var(--head-h) + 16px); }
.site-wrap { max-width: calc(var(--site-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 3px; }
.on-night :focus-visible, .site-head:not(.solid):not(.open) :focus-visible { outline-color: var(--primary-200); }

/* The first thing a keyboard reaches: straight past the header. */
.skip-link {
  position: fixed; top: 10px; left: 12px; z-index: 200; transform: translateY(-200%);
  padding: 10px 16px; border-radius: var(--radius); background: var(--bg-card); color: var(--primary-700);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid var(--primary-500); outline-offset: 2px; box-shadow: 0 8px 24px -8px rgba(33, 21, 25, 0.4); }
main:focus { outline: none; }

/* ---- Header --------------------------------------------------------------- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--head-h);
  color: #fff; background: transparent;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.site-head-inner { height: 100%; display: flex; align-items: center; gap: 24px; max-width: calc(var(--site-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.site-brand { display: flex; align-items: center; flex: none; margin-right: auto; border-radius: 6px; }
.site-brand .brand-logo { height: 32px; width: auto; }
.site-brand .logo-light { display: none; }
.site-head.solid { background: rgba(250, 247, 248, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text-primary); box-shadow: 0 1px 0 var(--border-color); }
.site-head.solid .logo-dark { display: none; }
.site-head.solid .logo-light { display: block; }

.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a { position: relative; color: inherit; text-decoration: none; }
.site-nav ul a {
  display: block; padding: 10px 13px; border-radius: var(--radius);
  font-size: 14.5px; font-weight: 500; opacity: .8;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.site-nav ul a:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.site-head.solid .site-nav ul a:hover { background: var(--primary-50); color: var(--primary-700); }
/* The current page: full strength, with the plum bar from the logo under it. */
.site-nav a[aria-current="page"] { opacity: 1; font-weight: 600; }
.site-nav ul a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; bottom: 3px; width: 1.13em; height: 0.226em; background: var(--primary-300);
}
.site-head.solid .site-nav a[aria-current="page"] { color: var(--primary-700); }
.site-head.solid .site-nav ul a[aria-current="page"]::after { background: var(--primary-500); }
/* Sign in: a quiet link over the hero, a thin outline once the bar is paper. */
.site-signin {
  display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: var(--radius);
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.site-signin:hover { background: rgba(255, 255, 255, 0.1); }
.site-head.solid .site-signin { border-color: var(--border-color); color: var(--primary-700); background: var(--bg-card); }
.site-head.solid .site-signin:hover { border-color: var(--primary-300); background: var(--primary-50); }

.site-menu-btn { display: none; flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: inherit; border-radius: var(--radius); cursor: pointer; align-items: center; justify-content: center; }
.site-menu-btn svg { width: 22px; height: 22px; }
.site-menu-btn .i-close { display: none; }
.site-head.open .site-menu-btn .i-open { display: none; }
.site-head.open .site-menu-btn .i-close { display: block; }

/* ---- Page hero (How it works, About, page not found) ----------------------- */
.page-hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(760px 520px at 82% 40%, rgba(148, 72, 114, 0.42), transparent 64%),
              linear-gradient(165deg, var(--night-2) 0%, var(--night) 62%, var(--night-3) 100%);
  padding: calc(var(--head-h) + 84px) 0 84px;
}
.page-hero .site-wrap { position: relative; }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5.4vw, 60px);
  line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 22px; max-width: 18ch; text-wrap: balance;
}
.page-hero h1::before { content: ""; display: block; width: 1.13em; height: 0.226em; margin-bottom: 0.34em; background: var(--primary-300); } /* the brand overline */
.page-hero .lead { font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, 0.8); max-width: 58ch; margin: 0; }
.page-hero .lead + .lead { margin-top: 12px; }
.page-hero .lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.45); }
.page-hero .note { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); margin: 20px 0 0; }
/* The arc sits inside the hero below the header bar, and ends inside the content column. */
.page-hero .hero-arc {
  position: absolute; top: var(--head-h); bottom: 0; height: calc(100% - var(--head-h)); width: auto; pointer-events: none;
  right: max(var(--gutter), calc((100% - var(--site-max)) / 2));
}

/* ---- Section rows, the one pattern on every inner page ----------------------- */
.info-main { padding-bottom: 72px; }
.ledger { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px 48px; padding: 72px 0; border-top: 1px solid var(--border-color); }
.ledger:first-child { border-top: none; }
.ledger .lab { font-size: 14px; font-weight: 600; color: var(--primary-500); padding-top: 9px; }
.ledger h2 {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.16; margin: 0 0 18px; max-width: 26ch; text-wrap: balance;
}
.ledger h2::before { content: ""; display: block; width: 1.13em; height: 0.226em; margin-bottom: 0.34em; background: var(--primary-500); } /* the brand overline */
.ledger h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.005em; margin: 34px 0 12px; }
.ledger .body { min-width: 0; }
.ledger .body p { font-size: 16px; line-height: 1.75; color: var(--text-secondary); max-width: 64ch; margin: 0 0 16px; }
.ledger .body p:last-child { margin-bottom: 0; }
.ledger .body p b { color: var(--text-primary); font-weight: 600; }
.ledger .body a:not(.btn):not(.credit):not(.org-site):not(.more-link) { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--primary-300); }
.ledger .body a:not(.btn):not(.credit):not(.org-site):not(.more-link):hover { color: var(--primary-500); text-decoration-color: currentColor; }

/* A plain text link that leads to the detail on another page. */
.more-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.ledger .body a.more-link { text-decoration: none; color: var(--primary-700); border-bottom: 1px solid var(--primary-300); padding-bottom: 2px; }
.ledger .body a.more-link:hover { color: var(--primary-500); border-bottom-color: currentColor; }
.more-link .arw { transition: transform .18s ease; }
.more-link:hover .arw { transform: translateX(3px); }

/* ---- Closing band: the page's one call to action ---------------------------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff; padding: 76px 0 80px;
  background: radial-gradient(640px 420px at 12% 20%, rgba(148, 72, 114, 0.34), transparent 62%),
              linear-gradient(160deg, var(--night-2), var(--night));
}
.cta-band .site-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 56px; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.14; margin: 0 0 14px; }
.cta-band h2::before { content: ""; display: block; width: 1.13em; height: 0.226em; margin-bottom: 0.34em; background: var(--primary-300); }
.cta-band p { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); max-width: 58ch; margin: 0; }
.cta-band p + p { margin-top: 12px; }
.cta-band p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.45); }
.cta-band .btn { justify-content: center; white-space: nowrap; }
.btn-light { background: #fff; color: var(--primary-700); padding: 14px 28px; font-weight: 600; }
.btn-light:hover { background: var(--primary-100); color: var(--primary-700); }

/* ---- Footer ----------------------------------------------------------------- */
.site-foot { background: var(--night-3); color: rgba(255, 255, 255, 0.72); padding: 64px 0 28px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); gap: 40px 64px; }
.foot-brand .brand-logo { height: 30px; width: auto; }
.foot-brand > a { display: inline-block; border-radius: 6px; }
.foot-brand p { font-size: 14px; line-height: 1.6; margin: 16px 0 24px; max-width: 34ch; }
.foot-credits { margin-top: 48px; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.foot-cols h2 { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #fff; margin: 4px 0 16px; letter-spacing: 0; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-cols a, .foot-bottom a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 14px; border-radius: 4px; }
.foot-cols a:hover, .foot-bottom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.09); font-size: 13px; }
.foot-bottom p { margin: 0; color: rgba(255, 255, 255, 0.56); }
.foot-bottom a { font-size: 13px; }
.foot-bottom .foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot.slim { padding-top: 0; }
.site-foot.slim .foot-bottom { margin-top: 0; border-top: 0; }
.site-foot :focus-visible { outline-color: var(--primary-200); }

/* ---- The sign-in page and the page-not-found page ----------------------------- */
.signin-main .auth-card h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 6px; }
.page-hero-tall { min-height: min(72vh, 640px); display: flex; align-items: center; }
.page-hero-tall .site-wrap { width: 100%; }
.page-plain { padding: calc(var(--head-h) + 64px) 0 88px; min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); }
.signin-main .auth-card { max-width: 460px; margin: 0 auto; box-shadow: 0 18px 44px rgba(66, 31, 51, 0.09); }
.signin-main .signed-in { display: grid; gap: 8px; justify-items: center; }
.signin-main .signed-in .btn-block { width: 100%; }
.signin-main .signed-in .btn-ghost { font-size: 13px; padding: 6px 10px; }
.signin-aside { max-width: 460px; margin: 18px auto 0; text-align: center; font-size: 13.5px; color: var(--text-secondary); }
.signin-aside a { color: var(--primary-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--primary-300); }

/* ---- Responsive --------------------------------------------------------------- */
@media (max-width: 1000px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  :root { --head-h: 64px; --gutter: 20px; }
  .site-brand .brand-logo { height: 28px; }
  .site-menu-btn { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: calc(var(--head-h) - 4px); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 8px; padding: 10px;
    background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px -12px rgba(33, 21, 25, 0.35), 0 0 0 1px var(--border-color);
  }
  .site-head.open .site-nav { display: flex; }
  .site-head.open { background: rgba(250, 247, 248, 0.97); color: var(--text-primary); box-shadow: 0 1px 0 var(--border-color); }
  .site-head.open .logo-dark { display: none; }
  .site-head.open .logo-light { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav ul a { padding: 14px 14px 14px 18px; font-size: 16px; opacity: 1; }
  .site-nav ul a:hover { background: var(--primary-50); color: var(--primary-700); }
  /* In the menu the current page is bold, with the plum bar down its left edge. */
  .site-nav ul a[aria-current="page"] { color: var(--primary-700); background: var(--primary-50); }
  .site-nav ul a[aria-current="page"]::after { left: 0; top: 10px; bottom: 10px; width: 3px; height: auto; border-radius: 0 2px 2px 0; background: var(--primary-500); }
  .site-nav .site-signin { justify-content: center; height: 48px; font-size: 15px; border-color: var(--primary-700); background: var(--primary-700); color: #fff; }
  .site-nav .site-signin:hover { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }
  .site-head.solid .site-nav .site-signin { border-color: var(--primary-700); background: var(--primary-700); color: #fff; }
  .site-head .site-nav :focus-visible { outline-color: var(--primary-500); }
  .page-hero { padding: calc(var(--head-h) + 52px) 0 56px; }
  .page-hero .lead { font-size: 16.5px; }
  .page-hero .hero-arc { display: none; }
  .cta-band { padding: 56px 0 60px; }
  .cta-band .site-wrap { grid-template-columns: minmax(0, 1fr); }
  .cta-band .btn { justify-self: start; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .site-foot { padding-top: 52px; }
  .page-plain { padding: calc(var(--head-h) + 36px) 0 56px; }
}
@media (max-width: 760px) {
  .ledger { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 52px 0; }
  .ledger .lab { padding-top: 0; }
  .ledger .body p { font-size: 15.5px; }
  .info-main { padding-bottom: 48px; }
}