/* What every page shares: the palette in both themes, the night-mode switch,
 * the footer, and the nav bar and title block of the pages around the home
 * page. Each page links this before its own <style>, so a page's own rules
 * win where the two meet. theme.js applies the saved theme and runs the switch.
 */

/* ── Palette ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --parchment: #f6efe3;
  --cream: #fbf6ec;
  --sand: #d9cbb5;
  --taupe: #baaf9e;
  --clay: #cbb99d;
  --charcoal: #201c17;
  --terracotta: #304550;
  --terracotta-dark: #21343d;
  --forest: #304550;
  --moss: #2b7898;
  --saffron: #e1b651;
  --walnut: #5e4630;
  --slate: #2b7898;
  --line: rgba(94,70,48,.18);
}
/* Night: deeper cocoa page, lighter cocoa cards, cream text, blue accent. */
html[data-theme="night"] {
  color-scheme: dark;
  --parchment: #251f1c;
  --cream: #42362f;
  --sand: #715f54;
  --taupe: #bdac99;
  --clay: #55463d;
  --charcoal: #f4ebde;
  --terracotta: #5aaee0;
  --terracotta-dark: #86c8ed;
  --forest: #5aaee0;
  --moss: #5aaee0;
  --walnut: #bdac99;
  --slate: #bdac99;
  --line: rgba(244,235,222,.18);
}

/* ── The night-mode switch ───────────────────────────────────────────── */
/* <button class="theme-switch"><span class="theme-switch-thumb"></span></button>
   The sun and moon are drawn as masks, so the button needs no icon markup. */
.theme-switch {
  --thumb-shift: 22px; --icon: 12px;
  --sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 0 1 9.8 3.5 8.5 8.5 0 1 0 20.5 14.2Z'/%3E%3C/svg%3E");
  position: relative; flex: 0 0 auto; width: 48px; height: 26px;
  padding: 0; border: 1px solid var(--charcoal); border-radius: 999px;
  background: var(--charcoal); cursor: pointer;
  transition: background .25s, border-color .25s, box-shadow .2s;
}
.theme-switch:hover { box-shadow: 0 0 0 2px rgba(43,120,152,.25); }
.theme-switch-thumb {
  position: absolute; top: 50%; left: 3px; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cream); color: var(--charcoal);
  transform: translate(0, -50%);
  transition: transform .25s ease, background .25s, color .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.theme-switch-thumb::before {
  content: ""; width: var(--icon); height: var(--icon); background: currentColor;
  -webkit-mask: var(--sun) center / contain no-repeat; mask: var(--sun) center / contain no-repeat;
}
html[data-theme="night"] .theme-switch { background: var(--charcoal); border-color: var(--charcoal); }
html[data-theme="night"] .theme-switch:hover { box-shadow: 0 0 0 2px rgba(90,174,224,.35); }
html[data-theme="night"] .theme-switch-thumb {
  background: var(--parchment); color: var(--charcoal);
  transform: translate(var(--thumb-shift), -50%);
}
html[data-theme="night"] .theme-switch-thumb::before { -webkit-mask-image: var(--moon); mask-image: var(--moon); }
@media (max-width: 700px) {
  .theme-switch { --thumb-shift: 20px; --icon: 11px; width: 44px; height: 24px; }
  .theme-switch-thumb { width: 18px; height: 18px; }
}
@media (max-width: 340px) {
  .theme-switch { --thumb-shift: 18px; --icon: 10px; width: 40px; height: 22px; }
  .theme-switch-thumb { width: 16px; height: 16px; }
}

/* ── Nav bar of the pages around the home page ───────────────────────── */
/* Wordmark on the left; a link back and the switch on the right. It stays at
   the top as the page scrolls, and theme.js gives it a shadow once it has.
   The home page has its own, fuller nav. */
.page-nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(246,239,227,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.page-nav.scrolled { box-shadow: 0 8px 28px rgba(94,70,48,.1); }
.page-nav .nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 66px; max-width: 1140px; margin: 0 auto; padding: 0 24px;
}
.page-nav .lockup img { height: 34px; width: auto; display: block; }
.page-nav .back { color: var(--charcoal); text-decoration: none; font-size: .92rem; font-weight: 500; }
.page-nav .back:hover { color: var(--saffron); }
.nav-right { display: flex; align-items: center; gap: 18px; }
@media (max-width: 480px) {
  .nav-right { gap: 10px; }
  .page-nav .lockup img { height: 26px; }
  .page-nav .back { font-size: .82rem; line-height: 1.25; text-align: right; }
}

/* ── Title block ─────────────────────────────────────────────────────── */
/* A page's title set like the home page's headline: large, centred, on the
   page itself, with the phrase in <em> picked out in the accent. */
.page-head { text-align: center; padding: 64px 24px 46px; }
.page-head .ornament { width: 40px; height: auto; opacity: .45; mix-blend-mode: multiply; margin-bottom: 20px; }
.page-head h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  font-weight: 560; letter-spacing: -.015em; line-height: 1.12;
  margin: 0; color: var(--charcoal); text-wrap: balance;
}
.page-head h1 em { font-style: italic; color: var(--terracotta); font-weight: 600; }
.page-head p { max-width: 560px; margin: 16px auto 0; font-size: 1.05rem; color: var(--walnut); }
@media (max-width: 640px) { .page-head { padding: 44px 24px 34px; } }

/* Saffron and blue-gray light theme. Keep the established blue night palette separate. */
html:not([data-theme="night"]) body { color: var(--walnut); }
html:not([data-theme="night"]) h1,
html:not([data-theme="night"]) h2,
html:not([data-theme="night"]) h3 { color: var(--forest); }
html:not([data-theme="night"]) h1 em,
html:not([data-theme="night"]) h2 em { color: var(--forest); }
html:not([data-theme="night"]) .page-head h1 em { color: var(--forest); }
html:not([data-theme="night"]) .btn { background: var(--saffron); color: var(--charcoal); }
html:not([data-theme="night"]) .btn:hover { background: #c99d36; }

/* ── Partner credit ──────────────────────────────────────────────────── */
.partner { margin: 20px 0 18px; }
.partner-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--walnut); margin-bottom: 9px;
}
.partner-logo { height: 34px; width: auto; display: block; }
.partner-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }

/* ── Footer ──────────────────────────────────────────────────────────── */
footer {
  position: relative; background: var(--parchment); padding: 70px 0 180px;
  overflow: hidden;
}
.foot-flex {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center;
  position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 0 24px;
}
footer img.lockup-img { height: 40px; width: auto; }
footer p { margin: 0; font-size: .85rem; color: var(--walnut); }
footer a { color: var(--walnut); text-decoration: none; font-weight: 500; }
footer a:hover { color: var(--saffron); }
/* Footer links, one row under another. */
.foot-nav { text-align: right; }
.foot-nav p + p { margin-top: 8px; }
.foot-nav a { white-space: nowrap; }
/* Below this width the two halves crowd each other or no longer fit, so
   they stack, and a stack reads better centred than hugging the left edge. */
@media (max-width: 720px) {
  .foot-flex { flex-direction: column; align-items: center; text-align: center; }
  footer img.lockup-img { margin: 0 auto; }
  footer .partner-logos { justify-content: center; }
  .foot-nav { text-align: center; }
}
@media (max-width: 340px) { footer .foot-nav p { font-size: .78rem; } }
.foot-cloud { position: absolute; bottom: -8px; left: 0; right: 0; pointer-events: none; }
.foot-cloud img {
  width: 100%; display: block; mix-blend-mode: multiply; opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0,0,0,.45) 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, rgba(0,0,0,.45) 94%, transparent 100%); object-fit: cover; object-position: right bottom; }

/* ── Night: what the palette alone does not reach ────────────────────── */
html[data-theme="night"] nav { background: rgba(37,31,28,.94); }
html[data-theme="night"] .page-nav.scrolled { box-shadow: 0 8px 28px rgba(0,0,0,.35); }
/* Black artwork turns white. */
html[data-theme="night"] .lockup img,
html[data-theme="night"] footer img.lockup-img,
html[data-theme="night"] .partner-logo { filter: brightness(0) invert(1); }
html[data-theme="night"] .ornament img,
html[data-theme="night"] img.ornament { filter: invert(1); mix-blend-mode: normal; }
html[data-theme="night"] .foot-cloud img { filter: invert(1); mix-blend-mode: screen; opacity: .14; }
/* Filled controls: the accent is too light at night to carry cream text, so
   they take a deeper blue. */
html[data-theme="night"] .btn,
html[data-theme="night"] .pill[aria-pressed="true"],
html[data-theme="night"] .steps li::before,
html[data-theme="night"] .thf-btn { background: #376f8b; border-color: #376f8b; color: #f4ebde; }
html[data-theme="night"] .btn:hover,
html[data-theme="night"] .thf-btn:hover { background: #4a82a0; border-color: #4a82a0; }
html[data-theme="night"] .btn.ghost,
html[data-theme="night"] .thf-btn.ghost { background: none; color: var(--saffron); border-color: rgba(90,174,224,.5); }
html[data-theme="night"] .btn.ghost:hover,
html[data-theme="night"] .thf-btn.ghost:hover { background: rgba(90,174,224,.12); }
/* The profile-frame tool (frame.js) writes its own colours in as it mounts. */
html[data-theme="night"] .thf-row input { background: var(--parchment); color: var(--charcoal); border-color: var(--line); }
html[data-theme="night"] .thf-row input:focus-visible { outline-color: var(--terracotta); }
html[data-theme="night"] .thf-btn[aria-pressed="true"] { background: #f4ebde; border-color: #f4ebde; color: #251f1c; }
html[data-theme="night"] .thf-or,
html[data-theme="night"] .thf-status,
html[data-theme="night"] .thf-fine { color: var(--walnut); }
html[data-theme="night"] .thf-or label,
html[data-theme="night"] .thf-status.err { color: var(--saffron); }
/* Keep text accents yellow in night mode while blue controls stay blue. */
html[data-theme="night"] .page-head h1 em,
html[data-theme="night"] main h1 em,
html[data-theme="night"] main h2 em,
html[data-theme="night"] .panel h2 em,
html[data-theme="night"] li::marker { color: var(--saffron); }