/* ---- palette ----------------------------------------------------------
   Cairn OBS is a dark brand and the site was dark-only for its first four
   months, so dark is the default rather than a branch of one: bare :root is
   the dark palette and light applies only under [data-theme="light"], which
   nothing sets but the toggle.

   That means prefers-color-scheme is deliberately not consulted. A visitor on
   a light desktop still gets the dark site, the way they would from any other
   dark-branded page, and light is there for whoever actively wants it. The
   trade is real -- a system preference is normally worth honouring -- and it
   is made once, here, rather than implied by a media query nobody revisits.

   Nothing outside this block names a colour. A hardcoded value is one the
   toggle cannot reach, which is how the header kept its near-black background
   on a light page while it was written as rgba(10,10,11,0.85).

   The accents are not the same orange in both themes. #FF8A00 on white is
   about 2.3:1, so every place the accent is *text* -- the hero emphasis, the
   checklist ticks, the stack table's first column, the query keywords -- would
   have failed WCAG AA if the brand orange were simply carried over. Light
   darkens it to #C25400 (~4.9:1) and flips the primary button to
   white-on-orange via --on-accent, rather than the near-black dark uses. */
:root {
  --bg: #0a0a0b;
  --surface: #14151700;
  --surface-raised: #17181a;
  --border: #2a2c2f;
  --border-strong: #3a3d41;
  --border-warm: #3a2b1f;
  --text: #f0f0f1;
  --text-muted: #9a9da3;
  --text-faint: #6f7279;
  --accent: #FF8A00;
  --accent-2: #FF9D2E;
  --accent-3: #FFB157;
  --accent-deep: #E6690E;
  --blue: #3fb6ff;
  --code-str: #9fd18a;
  --on-accent: #0a0a0b;
  --header-bg: rgba(10,10,11,0.85);
  --radius: 10px;
  --mono: 'JetBrains Mono','Fira Code',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
}

:root[data-theme="light"] {
  --bg: #fbfbfc;
  --surface: #ffffff00;
  --surface-raised: #ffffff;
  --border: #e3e5e9;
  --border-strong: #c8ccd2;
  --border-warm: #e8d7c4;
  --text: #16171a;
  --text-muted: #585c64;
  --text-faint: #82868e;
  --accent: #C25400;
  --accent-2: #A34A05;
  --accent-3: #E6690E;
  --accent-deep: #8F3D00;
  --blue: #0a6ea8;
  --code-str: #2f6f34;
  --on-accent: #ffffff;
  --header-bg: rgba(251,251,252,0.85);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
code, .mono { font-family: var(--mono); }

/* ---- brand ---- */
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img.logo { height: 40px; width: auto; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 7px; font-size: 14.5px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  font-family: var(--sans);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); }

/* background: transparent matters only once .btn is worn by a <button>, which
   until the consent banner it never was: an <a> has no default background, a
   button has the browser's grey one, and without this the banner's two buttons
   rendered as blank light rectangles with their labels invisible. Matches
   ihasmail.org, whose .btn-ghost has carried it all along. */
.btn-ghost { border-color: var(--border); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.btn-soon { border-color: var(--border); color: var(--text-faint); }
.btn-soon:hover { border-color: var(--border-strong); background: var(--surface-raised); color: var(--text-muted); }
.btn-soon .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); display: inline-block; }

/* ---- hero (home) ---- */
.hero { padding: 96px 0 88px; text-align: center; position: relative; overflow: hidden; border-top: none; }
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 520px;
  background: radial-gradient(ellipse at center, rgba(255,138,0,0.14), transparent 65%);
  pointer-events: none;
}
.hero .stones { height: 92px; margin: 0 auto 28px; display: block; position: relative; }
.hero h1 {
  font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 20px; position: relative;
}
.hero h1 .accent { color: var(--accent); }
.hero p.lede {
  max-width: 640px; margin: 0 auto 36px; color: var(--text-muted);
  font-size: 18px; position: relative;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.hero-ctas .btn { padding: 12px 24px; font-size: 15.5px; }

.badges { display: flex; gap: 10px; justify-content: center; margin-top: 28px; flex-wrap: wrap; position: relative; }
.badge {
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 100px; padding: 4px 12px;
}

/* ---- query bar mock ---- */
.query-mock {
  max-width: 760px; margin: 48px auto 0; text-align: left;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; font-family: var(--mono); font-size: 14.5px; position: relative;
  box-shadow: 0 20px 60px -20px rgba(255,138,0,0.15);
}
.query-mock .dot-row { display: flex; gap: 6px; margin-bottom: 12px; }
.query-mock .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.query-mock .kw { color: var(--accent-2); }
.query-mock .str { color: var(--code-str); }
.query-mock .pipe { color: var(--text-faint); }

/* ---- page hero (sub-pages) ---- */
.page-hero { padding: 88px 0 64px; text-align: center; position: relative; overflow: hidden; border-top: none; }
.page-hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 480px;
  background: radial-gradient(ellipse at center, rgba(255,138,0,0.14), transparent 65%);
  pointer-events: none;
}
.page-hero .stones { height: 84px; margin: 0 auto 24px; display: block; position: relative; }
.page-hero .eyebrow {
  font-family: var(--mono); font-size: 12.5px; color: var(--accent-2);
  letter-spacing: 2px; text-transform: uppercase; margin: 0 0 14px; position: relative;
}
.page-hero h1 {
  font-size: clamp(32px, 4.6vw, 50px); font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 18px; position: relative;
}
.page-hero p.lede {
  max-width: 640px; margin: 0 auto; color: var(--text-muted);
  font-size: 18px; position: relative;
}

/* ---- section shell ---- */
section { padding: 90px 0; border-top: 1px solid var(--border); }
.eyebrow {
  font-family: var(--mono); font-size: 12.5px; color: var(--accent-2);
  letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px;
}
h2.section-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px; }
p.section-sub { color: var(--text-muted); max-width: 640px; font-size: 16.5px; margin: 0 0 48px; }
.section-head { text-align: center; margin: 0 auto; max-width: 720px; }
.section-head p.section-sub { margin-left: auto; margin-right: auto; }

/* ---- feature grid ---- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px;
}
.card .icon {
  width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font-size: 18px; margin-bottom: 16px; font-family: var(--mono); font-weight: 700;
}
.card h3 { font-size: 17px; margin: 0 0 8px; }
.card p { color: var(--text-muted); font-size: 14.5px; margin: 0; }
.card.link-card { text-decoration: none; display: block; transition: border-color .15s, transform .15s; }
.card.link-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.card.link-card .go { color: var(--accent-2); font-size: 13px; font-family: var(--mono); margin-top: 14px; display: block; }

/* ---- diagram sections ---- */
.diagram-frame {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; overflow-x: auto;
}
.diagram-frame object { display: block; width: 100%; min-width: 640px; aspect-ratio: 1100 / 620; border: none; }
.diagram-frame object[data*="query-flow"] { aspect-ratio: 1100 / 420; }
.diagram-caption { color: var(--text-faint); font-size: 13px; margin-top: 14px; font-family: var(--mono); }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--text-muted); }
.legend span.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

/* ---- two-col ---- */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.twocol h3 { font-size: 21px; margin: 0 0 12px; }
.twocol p { color: var(--text-muted); font-size: 15.5px; }
ul.checks { list-style: none; padding: 0; margin: 18px 0 0; }
ul.checks li { padding-left: 26px; position: relative; margin-bottom: 10px; color: var(--text-muted); font-size: 15px; }
ul.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ---- stack table ---- */
table.stack { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.stack th { text-align: left; color: var(--text-faint); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
table.stack td { padding: 14px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
table.stack td:first-child { font-family: var(--mono); color: var(--accent-2); white-space: nowrap; padding-right: 24px; }
table.stack td:nth-child(2) { color: var(--text); white-space: nowrap; padding-right: 24px; font-weight: 600; }
table.stack td:last-child { color: var(--text-muted); }

/* ---- license band ---- */
.license-band {
  background: linear-gradient(135deg, rgba(255,138,0,0.10), rgba(255,138,0,0.02));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 40px; display: flex; align-items: center; gap: 32px; justify-content: space-between; flex-wrap: wrap;
}
.license-band h3 { margin: 0 0 8px; font-size: 20px; }
.license-band p { margin: 0; color: var(--text-muted); font-size: 15px; max-width: 520px; }

/* ---- prose (about, license) ---- */
.prose { max-width: 760px; margin: 0 auto; }
.prose .eyebrow { margin: 0 0 12px; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 24px; }
.prose p { color: var(--text-muted); font-size: 16.5px; margin: 0 0 20px; }
.prose p strong { color: var(--text); font-weight: 600; }
.prose blockquote {
  margin: 32px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent);
  color: var(--text); font-size: 18px; font-style: normal;
}
.stone-list { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 14px; }
.stone-list li {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; color: var(--text-muted); font-size: 15px;
}
.stone-list .n {
  font-family: var(--mono); color: var(--accent); font-weight: 700; font-size: 13px;
  flex: none; width: 20px; padding-top: 2px;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; max-width: 980px; margin: 0 auto; }
.split h3 { font-size: 18px; margin: 0 0 10px; color: var(--text); }
.split p { color: var(--text-muted); font-size: 15px; margin: 0; }
.split .col { padding: 24px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); }
.split .col.old { border-color: var(--border-warm); }
.split .col.new { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.split .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; display: block; }
.split .col.old .tag { color: var(--text-faint); }
.split .col.new .tag { color: var(--accent-2); }

/* ---- cta band ---- */
.cta-band {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: linear-gradient(135deg, rgba(255,138,0,0.10), rgba(255,138,0,0.02));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 44px 32px;
}
.cta-band h3 { margin: 0 0 10px; font-size: 22px; }
.cta-band p { margin: 0 0 24px; color: var(--text-muted); font-size: 15.5px; }

/* ---- demo screenshots ---- */
.shot-status {
  max-width: 640px; margin: 0 auto 56px; text-align: center;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 28px;
}
.shot-status .pill {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px;
  color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 100px; padding: 5px 14px; margin-bottom: 14px;
}
.shot-status .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.shot-status p { color: var(--text-muted); font-size: 15px; margin: 0; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.shot { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--border); }
.shot .cap { padding: 14px 18px; }
.shot .cap h4 { margin: 0 0 4px; font-size: 14.5px; }
.shot .cap p { margin: 0; color: var(--text-muted); font-size: 13.5px; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--border); padding: 48px 0; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer img.logo { height: 44px; width: auto; opacity: 0.92; }
footer .links { display: flex; gap: 22px; font-size: 13.5px; color: var(--text-faint); }
footer .links a { text-decoration: none; }
footer .links a:hover { color: var(--text-muted); }
footer .copy { color: var(--text-faint); font-size: 12.5px; margin-top: 10px; }
footer .copy a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }
footer .copy a:hover { color: var(--text-muted); }
footer .built-with { text-align: center; color: var(--text-faint); font-size: 12.5px; margin-top: 28px; padding: 0 24px; }
footer .built-with a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
footer .built-with a:hover { color: var(--accent); }

/* Demo section's credentials box */
.creds {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 24px 28px;
  margin: 0 0 40px;
}
.creds .fields { display: flex; gap: 40px; flex-wrap: wrap; }
.creds .field label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.creds .field code { font-size: 17px; color: var(--text); background: none; }
.creds .note { color: var(--text-muted); font-size: 14px; max-width: 22em; }

/* Single-page anchor sections get a little breathing room and a
   scroll-margin so a jump from the nav/quick-links doesn't land the
   heading flush against the fixed viewport top. */
main > section[id] { scroll-margin-top: 24px; }

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .twocol { grid-template-columns: 1fr; gap: 32px; }
  .split { grid-template-columns: 1fr; gap: 20px; }
  .shots { grid-template-columns: 1fr; }
  .creds { padding: 20px; }
  .creds .fields { gap: 24px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  header.site nav.primary { gap: 14px; }
}

/* ---- theme toggle -------------------------------------------------------
   Two icons in one button, only one ever shown. Which one is a question about
   the theme in force, so it is answered the same three ways the palette is:
   the sun (meaning "switch to light") shows on dark, the moon on light. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
/* Dark is the default, so the sun ("switch to light") is what shows unless an
   explicit light choice says otherwise. One pair of rules, no media query --
   the same simplification the palette above got. */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ---- logo -------------------------------------------------------------
   The wordmark is drawn light-on-transparent, so on a light page it vanished.
   Both variants ship and CSS picks one. <picture> with a media attribute was
   the obvious answer and is the wrong one: it resolves against
   prefers-color-scheme only, so the toggle would move the whole page and
   leave the logo behind. */
.logo-dark { display: block; }
.logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }

/* ---- privacy / 404 prose ----------------------------------------------- */
.page-narrow { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; }
.page-narrow h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; }
.page-narrow h2 { font-size: 19px; margin: 36px 0 10px; }
.page-narrow p, .page-narrow li { color: var(--text-muted); }
.page-narrow a { color: var(--accent); }
.page-narrow .asked {
  font-family: var(--mono); font-size: 13px; color: var(--text-faint);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin: 18px 0 28px;
  overflow-wrap: anywhere;
}

/* ---- consent banner ---- */
/* Fixed to the bottom, over the page rather than in front of it: a visitor who
   never answers must still be able to read every word here. Consent
   conditioned on access is not freely given, so a wall would not just be rude,
   it would fail to be consent at all.

   Ported from ihasmail.org, which runs the same gate. The palette names line
   up between the two sites, so only the box-shadow needed a value of its own:
   there is no --shadow token here. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .45);
  padding: 18px 0;
}
.consent[hidden] { display: none; }
.consent-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 26px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.consent-text { flex: 1 1 460px; min-width: 0; }
.consent-title {
  font-size: 16px; font-weight: 700; margin: 0 0 6px;
  letter-spacing: -0.01em; color: var(--text);
}
.consent p { margin: 0 0 6px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.consent p:last-child { margin-bottom: 0; }
.consent-current { color: var(--text-faint); font-style: italic; }
.consent-more a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}

/* Both buttons are deliberately identical in size, weight and colour. Dressing
   Accept up as the primary action and leaving Decline a quiet outline is the
   dark pattern regulators name first, and equal prominence is the actual
   requirement -- so it is pinned here rather than left to whoever next edits
   the markup. */
.consent-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.consent-actions .btn {
  padding: 11px 24px; font-size: 15px; min-width: 132px; justify-content: center;
}

@media (max-width: 640px) {
  .consent { padding: 16px 0; }
  .consent-inner { gap: 14px; }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1 1 0; min-width: 0; }
}

/* A button that reads as a link. It has to be a button, because it does
   something on this page rather than going anywhere, and it has to look like
   its neighbours in the footer, which are links. */
.linklike {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: none;
}
.linklike:hover { color: var(--accent); text-decoration: underline; }


.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* =========================================================================
   THE SHELL -- the same top bar and sidebar as coffeylabs.org and
   jcoffey.dev and the ihasmail family, in Cairn's colors. The rules below come across from
   there unchanged in shape; these tokens map their names onto this
   palette, so the only colors written here are the tile tints.
   ========================================================================= */
:root {
  --bg-alt: #0f1012; --tint: rgba(255, 138, 0, 0.12); --glow: rgba(255, 138, 0, 0.22); --warm: var(--accent);
  --ground: var(--bg); --ground-alt: var(--bg-alt); --chrome: #0f1012;
  --surface: var(--surface-raised); --surface-2: #1d1f22; --raised: var(--surface-raised);
  --ink: var(--text); --ink-soft: var(--text-muted); --ink-faint: var(--text-faint);
  --line: var(--border); --line-strong: var(--border-strong);
  --accent-ink: var(--on-accent); --accent-hot: var(--accent-2);
  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
  --font-sans: var(--sans); --font-mono: var(--mono); --font-display: var(--sans);
  --radius-sm: 8px; --top-h: 62px; --side-w: 16.5rem;
  --tone-teal: #3fb6ff; --tone-orange: #FF8A00; --tone-sky: #3fb6ff; --tone-violet: #b79cf6;
  --tone-amber: #FFB157; --tone-emerald: #9fd18a; --tone-slate: #9a9da3;
  --tone-mix: 16%;
}
:root[data-theme="light"] {
  --bg-alt: #f3f4f6; --tint: rgba(194, 84, 0, 0.09); --glow: rgba(194, 84, 0, 0.14);
  --chrome: #ffffff; --surface-2: #f1f2f4;
  --shadow-lg: 0 30px 60px -30px rgba(22, 23, 26, 0.3);
  --tone-teal: #0a6ea8; --tone-orange: #C25400; --tone-sky: #0a6ea8; --tone-violet: #6a48b8;
  --tone-amber: #8F5A00; --tone-emerald: #2f6f34; --tone-slate: #585c64;
  --tone-mix: 12%;
}
html { color-scheme: dark; scroll-padding-top: calc(var(--top-h) + 12px); }
:root[data-theme="light"] { color-scheme: light; }
.tone-teal { --t: var(--tone-teal); } .tone-orange { --t: var(--tone-orange); }
.tone-sky { --t: var(--tone-sky); } .tone-violet { --t: var(--tone-violet); }
.tone-amber { --t: var(--tone-amber); } .tone-emerald { --t: var(--tone-emerald); }
.tone-slate { --t: var(--tone-slate); }
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 90; background: var(--accent); color: var(--on-accent); padding: 10px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { left: 0; }
.side-item-note .side-text { display: flex; flex-direction: column; line-height: 1.25; }
.side-item-note .side-text small { font-size: 11.5px; color: var(--text-faint); font-weight: 400; }
.side-item-note b.inbuxa { color: var(--warm); }
/* The offset under the top bar is html's scroll-padding-top alone. The older
   per-element scroll-margins added to it and landed every jump 144px down. */
main > section[id], .companions, .legal h2[id] { scroll-margin-top: 0; }

.itile {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  color: var(--t, var(--accent));
  background: color-mix(in oklab, var(--t, var(--accent)) var(--tone-mix), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t, var(--accent)) 18%, transparent);
}
.itile-sm { width: 1.5rem; height: 1.5rem; border-radius: 6px; font-size: 0.85rem; }
.itile-md { width: 1.85rem; height: 1.85rem; border-radius: 8px; font-size: 1rem; }
.itile-lg { width: 3rem; height: 3rem; border-radius: 12px; font-size: 1.45rem; }
.itile-letter { font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; }
.itile-md.itile-letter { font-size: 0.85rem; }
.itile-lg.itile-letter { font-size: 1.3rem; }


.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 9px;
  background: transparent; border: 0; color: var(--ink-soft); font-size: 1.1rem;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn-sm { width: 1.85rem; height: 1.85rem; font-size: 0.98rem; }


/* =========================================================================
   SHELL
   The body is the grid. Every page's markup is header, aside, main, footer
   in that order (from the nav and footer partials), and the grid places them, so
   no page needed a wrapper element to get a sidebar. Fixed and absolute
   children (the skip link, scrim, dialog, consent banner) and <script>s take
   no cell.
   ========================================================================= */
body {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  grid-template-rows: auto var(--top-h) 1fr auto;
  min-height: 100vh;
  transition: grid-template-columns .2s ease;
}
html.rail { --side-w: 4.5rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.8rem;
  padding: 0.6rem 1rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---- top bar ---- */
.topbar {
  grid-column: 1 / -1; grid-row: 2;
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  height: var(--top-h); padding: 0 1rem 0 1.1rem;
  background: color-mix(in oklab, var(--chrome) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* The brand keeps its own mark and wordmark (see ---- nav ---- above);
   only its size changes to fit the bar. */
.topbar .brand .mark { height: 34px; }
.topbar .brand .wordmark { font-size: 19px; }
.topbar .btn-sm { padding: 7px 14px; font-size: 13.5px; }
/* Sponsor: a ghost button like its neighbors, with the heart in GitHub
   Sponsors' pink as the only accent. It is the first header button to go
   when space runs short; the footer link stays at every width. */
.btn-sponsor { gap: 6px; }
.btn-sponsor .i { width: 15px; height: 15px; fill: none; stroke: #db61a2; stroke-width: 2; }
.btn-sponsor:hover .i { fill: #db61a2; }
@media (max-width: 1180px) { .topbar .btn-sponsor { display: none; } }

/* The jump box: the console's search field, centred in the bar. */
.jump {
  flex: 1 1 auto; max-width: 30rem; margin: 0 auto;
  display: flex; align-items: center; gap: 0.6rem;
  height: 2.35rem; padding: 0 0.5rem 0 0.8rem;
  background: var(--ground); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-faint); font-size: 0.88rem; text-align: left;
  transition: border-color .15s, background .15s;
}
.jump[hidden] { display: none; }
.jump:hover { border-color: var(--line-strong); background: var(--surface); }
.jump .i { font-size: 1rem; }
.jump-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 0.05rem 0.4rem;
}
.topbar-end { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; flex: none; }
.jump:not([hidden]) + .topbar-end { margin-left: 0; }

/* The segmented theme control: the console's section switcher. */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--line); }
.seg button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 1.75rem; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-faint); font-size: 0.95rem;
  transition: background .15s, color .15s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
:root[data-theme="light"] .seg button[aria-pressed="true"] { background: var(--ground); }

.nav-toggle { display: none; }
.nav-toggle .ex { display: none; }
.nav-toggle[aria-expanded="true"] .bars { display: none; }
.nav-toggle[aria-expanded="true"] .ex { display: block; }

/* ---- sidebar ---- */
.sidebar {
  grid-column: 1; grid-row: 3 / 5;
  position: sticky; top: var(--top-h); align-self: start;
  height: calc(100vh - var(--top-h)); height: calc(100dvh - var(--top-h));
  display: flex; flex-direction: column; gap: 0.35rem;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  padding: 0.6rem 0.6rem 0.9rem;
  background: var(--chrome); border-right: 1px solid var(--line);
  z-index: 30;
}
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem 0.25rem; min-height: 2.2rem; }
.side-label {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item {
  display: flex; align-items: center; gap: 0.7rem;
  min-height: 2.6rem; padding: 0.3rem 0.45rem; border-radius: 10px;
  text-decoration: none; color: var(--ink-soft); font-size: 0.92rem; font-weight: 500;
  transition: background .12s, color .12s;
}
.side-item:hover { background: var(--surface-2); color: var(--ink); }
.side-item.here { background: var(--tint); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.side-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .out { font-size: 0.85rem; color: var(--ink-faint); }

.side-group, .side-group-static { margin-top: 0.6rem; }
.side-group-static > .side-label { display: block; padding: 0.35rem 0.5rem 0.4rem; }
.side-group summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none; cursor: pointer; padding: 0.35rem 0.5rem 0.4rem; border-radius: 8px;
}
.side-group summary::-webkit-details-marker { display: none; }
.side-group summary:hover .side-label { color: var(--ink-soft); }
.side-group .chev { font-size: 0.85rem; color: var(--ink-faint); transition: transform .2s; }
.side-group:not([open]) .chev { transform: rotate(-90deg); }
.side-sub { display: flex; flex-direction: column; gap: 1px; margin: 0 0 0 1.35rem; padding-left: 0.55rem; border-left: 1px solid var(--line); }
.side-subitem {
  display: flex; align-items: center; gap: 0.55rem;
  min-height: 2.1rem; padding: 0.2rem 0.45rem; border-radius: 8px;
  text-decoration: none; color: var(--ink-soft); font-size: 0.86rem;
  transition: background .12s, color .12s;
}
.side-subitem:hover { background: var(--surface-2); color: var(--ink); }
.side-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ink-faint); opacity: 0.7; }
.side-dot.live { background: var(--live); opacity: 1; box-shadow: 0 0 0 3px color-mix(in oklab, var(--live) 18%, transparent); }

.side-foot { margin-top: auto; display: flex; gap: 1rem; padding: 0.9rem 0.6rem 0.1rem; border-top: 1px solid var(--line); }
.side-foot a { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); text-decoration: none; }
.side-foot a:hover, .side-foot a.here { color: var(--accent); }

/* ---- rail: the sidebar folded to its tiles ---- */
html.rail .sidebar { padding-left: 0.5rem; padding-right: 0.5rem; scrollbar-width: none; }
html.rail .side-text, html.rail .side-item .out, html.rail .side-dot,
html.rail .side-label, html.rail .side-foot, html.rail .side-group .chev { display: none; }
html.rail .side-head { justify-content: center; padding: 0.35rem 0; }
html.rail .side-item, html.rail .side-subitem { justify-content: center; padding: 0.3rem; }
html.rail .side-sub { margin: 0; padding: 0; border: 0; }
html.rail .side-group summary { justify-content: center; padding: 0.2rem; height: 0.6rem; }
html.rail .side-group summary::after { content: ""; width: 1.4rem; height: 1px; background: var(--line); }
html.rail .side-group-static { border-top: 1px solid var(--line); padding-top: 0.5rem; }
html.rail .rail-toggle .i { transform: scaleX(-1); }

.scrim { display: none; }

/* ---- main + footer ---- */
main { grid-column: 2; grid-row: 3; min-width: 0; }
.stack-bar { grid-column: 1 / -1; grid-row: 1; }
body > footer { grid-column: 2; grid-row: 4; min-width: 0; }

/* ---- phones and small tablets: the sidebar becomes a drawer ---- */
@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--top-h) auto 1fr auto; }
  html.rail { --side-w: 16.5rem; }
  .topbar { padding: 0 0.6rem; gap: 0.5rem; }
  .nav-toggle { display: inline-flex; }
  .rail-toggle { display: none !important; }
  .jump { max-width: none; }
  .jump-label, .jump kbd { display: none; }
  .jump { flex: 0 0 auto; width: 2.35rem; padding: 0; justify-content: center; margin: 0 0 0 auto; }
  .topbar .btn-sm { display: none; }

  /* With scripting off the sidebar is simply a block above the page: every
     link reachable, nothing to open. The drawer only exists behind html.js. */
  .sidebar { grid-column: 1; grid-row: 3; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  main { grid-column: 1; grid-row: 4; }
  body > footer { grid-column: 1; grid-row: 5; }

  /* Full height and UNDER the top bar (z 35 against its 40), padded down
     past it, rather than starting at the bar's bottom edge: the bar stays
     on top with the close button in reach whatever the viewport does. */
  html.js .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(18rem, 86vw);
    height: auto; padding-top: calc(var(--top-h) + 0.6rem);
    border-right: 1px solid var(--line); border-bottom: 0;
    transform: translateX(-102%); transition: transform .22s ease, visibility .22s;
    visibility: hidden; z-index: 35; box-shadow: var(--shadow-lg);
  }
  html.js .sidebar[data-open="true"] { transform: none; visibility: visible; }
  html.js .scrim:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(4, 8, 14, 0.55); z-index: 34; }
  .topbar { background: var(--chrome); }
  /* The rail is a wide-screen idea; a phone always gets the full drawer. */
  html.rail .side-text, html.rail .side-item .out, html.rail .side-dot,
  html.rail .side-label, html.rail .side-group .chev { display: revert; }
  html.rail .side-foot { display: flex; }
  html.rail .side-item, html.rail .side-subitem { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body, html.js .sidebar { transition: none; }
}


/* =========================================================================
   JUMP PALETTE
   ========================================================================= */
.palette {
  width: min(36rem, calc(100vw - 2rem)); max-height: min(28rem, 70vh);
  margin: 12vh auto auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--raised); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden;
}
.palette::backdrop { background: rgba(4, 8, 14, 0.6); backdrop-filter: blur(2px); }
.palette-box { display: flex; flex-direction: column; max-height: inherit; }
.palette-input { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-faint); }
.palette-input .i { font-size: 1.1rem; }
.palette-input input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1rem; color: var(--ink);
}
.palette-list { list-style: none; margin: 0; padding: 0.4rem; overflow-y: auto; }
.palette-list li {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem; border-radius: 9px; cursor: pointer;
}
.palette-list li[aria-selected="true"] { background: var(--tint); }
.palette-list .pl-name { font-weight: 600; font-size: 0.92rem; }
.palette-list .pl-note { color: var(--ink-faint); font-size: 0.8rem; margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.palette-list .pl-empty { color: var(--ink-faint); cursor: default; justify-content: center; padding: 1.2rem; }



.topbar .brand img.logo { height: 34px; }

/* =========================================================================
   PAGE -- the split hero and the sections, in the card style of the sibling
   sites. The hero rules are ihasmail.org's, unchanged.
   ========================================================================= */
/* The hero, split: words left, the inbox right, a faint grid behind. */
.hero-split { text-align: left; padding: 72px 0 80px; }
.hero-split::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 30% 25%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 70% at 30% 25%, #000 25%, transparent 75%);
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (max-width: 1200px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-split h1 { font-size: clamp(38px, 5.2vw, 64px); margin-bottom: 18px; }
.hero-split p.lede { margin: 0 0 30px; max-width: 560px; }
.hero-split .hero-ctas, .hero-split .badges { justify-content: flex-start; }
.hero-split .hero-note { margin-left: 0; }
.release-note {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font-family: var(--mono); font-size: 12px; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 14px 5px 6px;
}
.release-note a { color: var(--accent); text-decoration: none; }
.release-mark { height: 22px; width: auto; }

.hero-shot { position: relative; }
.window {
  border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.02);
  transform: perspective(1600px) rotateY(-4deg); transform-origin: left center;
}
@media (max-width: 1200px) { .window { transform: none; } }
@media (prefers-reduced-motion: reduce) { .window { transform: none; } }
.window-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-raised); }
.window-bar .lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.window-bar .lamp.on { background: var(--accent); }
.window-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--text-faint); margin-left: 6px; }
.window img { display: block; width: 100%; height: auto; }
.window .shot-light { display: none; }
:root[data-theme="light"] .window .shot-light { display: block; }
:root[data-theme="light"] .window .shot-dark { display: none; }
/* The cat, peeking over the window's corner. */
.hero-cat {
  position: absolute; width: auto; height: 86px; right: -10px; top: -58px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
@media (max-width: 560px) { .hero-cat { height: 64px; top: -42px; right: 4px; } }
.hero-shot-note { margin: 14px 0 0; font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.hero-shot-note a { color: var(--accent); }
.hero-split .stones { display: none; }
.hero-split .query-mock { margin: 26px 0 0; max-width: 560px; }
.hero-cat { height: 78px; top: -52px; right: 4px; }

/* Heads to the left and cards lifted, like every sibling site. */
.section-head { text-align: left; margin-left: 0; margin-right: 0; }
.section-head .section-sub, .section-head p.section-sub { margin-left: 0; margin-right: 0; }
.page-hero { text-align: left; padding: 64px 0 36px; }
.page-hero .stones { height: 56px; margin: 0 0 18px; }
.page-hero p.lede { margin-left: 0; margin-right: 0; }
.card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px -14px rgba(0, 0, 0, 0.6); }
:root[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(22, 23, 26, 0.05), 0 8px 22px -12px rgba(22, 23, 26, 0.16); }

/* The split hero's heading, tightened for a half-width column. */
.hero-split h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.03em; }
.topbar .brand img.logo { height: 38px; }

/* ---- HotDog CMS port ----------------------------------------------------------
   The PHP pages set these with style="" attributes. Classes instead, so the
   site can ship a Content-Security-Policy that forbids inline styles. */
section.flush { border-top: none; }
.legend .sw-edge { background: #E6690E; }
.legend .sw-consumer { background: #FFB157; }
.legend .sw-query { background: #3fb6ff; }
.split code { font-family: var(--mono); }
/* Markdown puts a quote's text in a <p>; the PHP page put it straight in the
   <blockquote>. Let the paragraph take the quote's own type and spacing. */
.prose blockquote p { color: inherit; font-size: inherit; margin: 0; }