/* Design tokens. */

/* Self-hosted fonts, subset and served as WOFF2. */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('assets/fonts/Lora.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('assets/fonts/Lora-it.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/Lato-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/Lato-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --color-red:           #EA0000;
  --color-red-dark:      #BB0000;
  --color-red-tint:      #FFE5E5;

  /* Neutrals */
  --color-black:         #111111;
  --color-gray-900:      #1A1A1A;
  --color-gray-700:      #3D3D3D;
  --color-gray-500:      #5C5C5C;
  --color-gray-400:      #888888;
  --color-gray-300:      #B0B0B0;
  --color-gray-200:      #D8D8D8;
  --color-gray-100:      #F0F0F0;
  --color-gray-50:       #F7F7F7;
  --color-white:         #FFFFFF;

  /* Semantic */
  --color-bg:            var(--color-white);
  --color-bg-subtle:     var(--color-gray-50);
  --color-bg-muted:      var(--color-gray-100);
  --color-border:        var(--color-gray-200);
  --color-border-strong: var(--color-gray-400);
  --color-fg:            var(--color-gray-900);
  --color-fg-muted:      var(--color-gray-500);
  --color-accent:        var(--color-red);
  --color-accent-hover:  var(--color-red-dark);

  /* Type families */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-ui:      'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;

  /* Scale */
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-md: 1.125rem; --text-lg: 1.25rem;  --text-xl: 1.5rem;
  --text-2xl: 2rem;    --text-3xl: 2.5rem;  --text-4xl: 3rem; --text-5xl: 3.75rem;

  /* Leading + tracking */
  --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6;
  --tracking-tight: -0.02em; --tracking-wide: 0.06em; --tracking-wider: 0.12em;

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* Radius — brand rule: <= 4px or none */
  --radius-sm: 2px; --radius-md: 4px;

  /* Layout */
  --max-width-content: 800px;
  --max-width-wide:    1200px;

  --transition-fast: 150ms ease;
}

/* ============================================================
   RGO site styles. Tokens live in tokens.css - never hard-code
   a colour or size here that the design system already names.

   Brand rules honoured: no gradients, no pill buttons, radius
   <= 4px, red is the only non-neutral, no animation beyond a
   150ms hover colour change, no icon sets, no sidebars.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-fg); margin: 0 0 var(--space-4); text-wrap: balance; }
/* Fluid scale. The design system's fixed rem sizes overflow narrow viewports at h1/h2,
   so each clamps between a mobile floor and the design-system value as the ceiling. */
h1 { font-size: clamp(2rem, 1.2rem + 4vw, var(--text-4xl)); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2.5vw, var(--text-3xl)); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h3 { font-size: clamp(1.3rem, 1rem + 1.5vw, var(--text-2xl)); font-weight: 600; line-height: var(--leading-snug); }
h4 { font-size: var(--text-xl);  font-weight: 600; line-height: var(--leading-snug); }
p  { margin: 0 0 var(--space-5); }

a { color: var(--color-red-dark); text-decoration: none; transition: color var(--transition-fast); }
a:hover, a:focus-visible { color: var(--color-black); text-decoration: underline; }
main p a:not(.btn), main li a, main td a, main th a, main blockquote a, main figcaption a, main dd a, main h5 a, main h6 a, .footer-col__note a, .site-footer__legal a, .pagination a { text-decoration: underline; text-underline-offset: 0.12em; }
.cards a, .copy-page a, .link-arrow, .btn { text-decoration: none; }
.prose h2 a, .prose h3 a, .prose h4 a { text-decoration: underline; text-underline-offset: 0.12em; }
.prose figure { margin: var(--space-6) 0; }
.prose figcaption { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-fg-muted); margin-top: var(--space-2); }
.prose .with-badge { display: flow-root; }
.prose .badge { float: left; margin: 0.3em var(--space-4) var(--space-2) 0; }
@media (max-width: 30em) { .prose .badge { float: none; display: block; margin: 0 0 var(--space-2); } }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--max-width-wide); margin-inline: auto; padding-inline: var(--space-5); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); z-index: 10; background: var(--color-white); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Header and nav --------------------------------------- */
.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-white); position: sticky; top: 0; z-index: 5; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-4); flex-wrap: wrap; }
.brand { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-3); align-items: center; color: var(--color-fg); }
.brand:hover { text-decoration: none; color: var(--color-fg); }
.brand__mark { grid-row: 1 / 3; width: 40px; height: auto; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.1; }
.brand__role { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-fg-muted); }

.nav__list, .nav__sub { list-style: none; margin: 0; padding: 0; }
.nav__list { display: flex; gap: var(--space-6); align-items: center; }
.nav__item { position: relative; }
.nav__item > a { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--color-fg); letter-spacing: var(--tracking-wide); }
.nav__item > a:hover { color: var(--color-accent); text-decoration: none; }
.nav__sub { position: absolute; top: 100%; left: 0; min-width: 15rem; background: var(--color-white); border: 1px solid var(--color-border); padding: var(--space-2) 0; display: none; }
.nav__sub a { display: block; padding: var(--space-2) var(--space-4); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-fg); }
.nav__sub a:hover { color: var(--color-accent); text-decoration: none; background: var(--color-bg-subtle); }
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub,
.nav__item.is-open .nav__sub { display: block; }
.nav__item--has-sub.is-dismissed .nav__sub { display: none; }
.nav-toggle { display: none; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); background: none; border: 1px solid var(--color-border); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .nav__item--has-sub > a::after { content: " \25BE"; }
  .nav__item.is-open > a::after { content: " \25B4"; }
  .nav { flex-basis: 100%; display: none; }
  .nav.nav--open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-top: 1px solid var(--color-border); }
  .nav__item > a { display: block; padding: var(--space-3) 0; }
  .nav__sub { position: static; border: 0; padding: 0 0 var(--space-2) var(--space-4); }
}
@media (max-width: 860px) and (scripting: none) {
  .nav-toggle { display: none; }
  .nav { display: block; }
  .nav__item--has-sub > a::after { content: none; }
  .nav__sub { display: block; }
}

/* --- Sections --------------------------------------------- */
.section { padding-block: var(--space-16); }
.section--subtle { background: var(--color-bg-subtle); border-block: 1px solid var(--color-border); }
.section__title { margin-bottom: var(--space-8); }

/* --- Hero ------------------------------------------------- */
.hero { padding-block: var(--space-20) var(--space-12); }
.hero h1 { max-width: 24ch; }
.hero__lead { font-size: var(--text-md); max-width: 48ch; }
.status {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-fg-muted);
  border-left: 3px solid var(--color-accent); padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin: 0 0 var(--space-8); max-width: 54ch;
}
.status strong { color: var(--color-fg); font-weight: 700; }
.status--after { margin: var(--space-6) 0 0; }

/* Split hero: copy on the left, a "where to look" rail on the right (Work). */
.hero--split { display: grid; grid-template-columns: fit-content(54ch) minmax(16rem, 24rem); justify-content: start; gap: var(--space-12) var(--space-16); align-items: start; }
.hero__aside { border-left: 3px solid var(--color-accent); padding: var(--space-2) 0 var(--space-2) var(--space-5); font-family: var(--font-ui); }
.hero__aside h2 { font-size: var(--text-md); margin: 0 0 var(--space-3); }
.hero__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.hero__aside li { font-size: var(--text-sm); color: var(--color-fg-muted); }
.hero__aside a { font-weight: 700; }
@media (max-width: 860px) {
  .hero--split { grid-template-columns: 1fr; gap: var(--space-8); }
}
.text-center { text-align: center; }

/* Homepage hero: full-bleed desk photo; the copy sits over the plain left half,
   a white gradient keeps it readable where the photo's objects fall under it. */
.hero--home {
  background-color: var(--color-gray-100);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.45) 100%),
    url('assets/img/hero-notebook.jpg');
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.45) 100%),
    image-set(url('assets/img/hero-notebook.webp') type('image/webp'), url('assets/img/hero-notebook.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-24) var(--space-20);
}
.hero--home h1 { max-width: 24ch; font-size: clamp(2.2rem, 1.2rem + 4.5vw, var(--text-5xl)); }
.hero--home .hero__lead { max-width: 62ch; font-size: var(--text-lg); }
.hero--home .status { max-width: 62ch; }
@media (max-width: 860px) {
  .hero--home {
    background-image:
      linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
      url('assets/img/hero-notebook.jpg');
    background-image:
      linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
      image-set(url('assets/img/hero-notebook.webp') type('image/webp'), url('assets/img/hero-notebook.jpg') type('image/jpeg'));
    background-position: center top;
    padding-block: var(--space-16) var(--space-12);
  }
}

/* --- Proof rail ------------------------------------------- */
.proof { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.proof__item { border-top: 2px solid var(--color-fg); padding-top: var(--space-3); }
.proof__co { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); display: block; }
.proof__role { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); color: var(--color-red-dark); display: block; margin-block: var(--space-1); }
.proof__note { font-size: var(--text-sm); color: var(--color-fg-muted); margin: 0; }

/* --- Prose ------------------------------------------------ */
.prose { max-width: var(--max-width-content); overflow-wrap: break-word; }
.prose > :last-child { margin-bottom: 0; }
/* Embedded frames scale to the column; the ratio comes from the frame's own width/height. */
main iframe { display: block; max-width: 100%; border: 0; }
main iframe[width="960"][height="569"] { width: 100%; height: auto; aspect-ratio: 960 / 569; }
main iframe[width="500"][height="281"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.joan-link { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 2px; margin-left: var(--space-1); vertical-align: middle; border-radius: 4px; opacity: 0.7; }
.joan-link:hover, .joan-link:focus-visible { opacity: 1; }
.joan-link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.joan-link img, .joan-portrait { display: block; image-rendering: pixelated; }
.joan-portrait { width: 128px; height: 128px; margin: 0 0 var(--space-5); }
@media (prefers-reduced-motion: no-preference) {
  body.joan-found { opacity: 0; transition: opacity 0.6s ease; }
}
.embed-gate { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); background: var(--color-bg-subtle); }
.embed-gate__note { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.embed-gate__note a { text-decoration: underline; text-underline-offset: 0.12em; }

/* --- Card grid (blog roll) -------------------------------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.card { display: flex; flex-direction: column; }
.card__img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: var(--color-bg-muted); }
.card__meta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-fg-muted); margin: var(--space-3) 0 var(--space-2); }
.card__title { font-size: var(--text-md); font-weight: 700; line-height: var(--leading-snug); margin: 0 0 var(--space-2); font-family: var(--font-display); }
.card__title a { color: var(--color-fg); }
.card__title a:hover { color: var(--color-accent); text-decoration: none; }
.card__excerpt { font-size: var(--text-sm); color: var(--color-fg-muted); margin: 0; }

/* --- Buttons and forms ------------------------------------ */
.btn {
  display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); color: var(--color-white); background: var(--color-accent);
  border: 0; border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); cursor: pointer;
  transition: background var(--transition-fast);
}
.btn:hover { background: var(--color-accent-hover); color: var(--color-white); text-decoration: none; }
.btn--ghost { background: none; color: var(--color-accent); border: 1px solid var(--color-accent); }
.btn--ghost:hover { background: var(--color-accent); color: var(--color-white); }
.section--subtle .btn--ghost, .embed-gate .btn--ghost, .site-footer .btn--ghost { color: var(--color-red-dark); border-color: var(--color-red-dark); }
.section--subtle .btn--ghost:hover, .embed-gate .btn--ghost:hover, .site-footer .btn--ghost:hover { background: var(--color-red-dark); color: var(--color-white); }
.btn--icon { padding-inline: var(--space-3); line-height: 0; }
.btn--icon svg { display: block; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.link-arrow { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); letter-spacing: var(--tracking-wide); }

.signup__label { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-1); }
.signup__input { width: 100%; font-family: var(--font-ui); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); margin-bottom: var(--space-3); background: var(--color-white); }
.signup__input:focus { border-color: var(--color-accent); }
.signup__note { margin: var(--space-3) 0 0; font-size: var(--text-xs); line-height: 1.5; }
.signup__note a { text-decoration: underline; text-underline-offset: 0.12em; }

/* --- Footer ----------------------------------------------- */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); margin-top: var(--space-20); }
.site-footer__grid { display: grid; gap: var(--space-10); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); padding-block: var(--space-16) var(--space-10); }
.footer-col__title { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-4); }
.footer-col__title--stacked { margin-top: var(--space-8); }
.footer-col__note { font-size: var(--text-sm); color: var(--color-fg-muted); }
.footer-col__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-col__list a { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-fg); }
.footer-col__list a:hover { color: var(--color-accent); }
.site-footer__legal { border-top: 1px solid var(--color-border); padding-block: var(--space-5); }
.site-footer__legal p { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-fg-muted); margin: 0; }
.site-footer__legal a { color: var(--color-fg-muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.card__more { margin: var(--space-3) 0 0; }
.card__more a { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; }

/* --- Embedded published Google Docs (pricing) ---------------- */
.doc-embed { width: 100%; max-width: var(--max-width-wide); margin-bottom: var(--space-5); }
.doc-embed iframe {
  display: block; width: 100%; height: min(80vh, 900px); min-height: 600px;
  border: 1px solid var(--color-border); background: var(--color-white);
}

/* --- Utility classes (the CSP allows no inline styles) ---------- */
.hp { position: absolute; left: -5000px; }

/* Featured post badge on archive cards. */
.card { position: relative; }
.card__badge {
  align-self: flex-start;
  margin: 0 0 var(--space-2);
  background: var(--color-red);
  color: #fff;
  font-size: var(--text-sm);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 400;
}

/* --- Post breadcrumb + Filed Under footer -------------------- */
.breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-wide);
}
.breadcrumb a { color: var(--color-fg-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current="page"] { color: var(--color-fg); }

.filed-under {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.filed-under a { color: var(--color-accent); }
.related-posts { margin: var(--space-6) 0 0; font-family: var(--font-ui); }
.related-posts h2 { font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin: 0 0 var(--space-2); }
.related-posts ul { margin: 0; padding-left: 1.2em; }
.related-posts li { margin: 0 0 var(--space-1); }
.signup__hint { margin: 0 0 var(--space-2); font-size: var(--text-xs); }

/* --- Copy page / View as Markdown widget ------------------- */
.copy-page {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  margin: 0 0 var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: visible;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  background: var(--color-white);
}
.copy-page__primary,
.copy-page__toggle {
  background: none;
  border: 0;
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg);
  cursor: pointer;
}
.copy-page__toggle {
  border-left: 1px solid var(--color-border-strong);
  padding-inline: var(--space-3);
}
.copy-page__primary:hover, .copy-page__toggle:hover { color: var(--color-accent); }
.copy-page__caret { display: inline-block; font-size: var(--text-sm); }
.copy-page__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-1);
  background: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  min-width: 20rem;
  padding: var(--space-2);
  z-index: 3;
}
.copy-page__item {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-fg);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.copy-page__item:hover { background: var(--color-bg-subtle); text-decoration: none; }
.copy-page__item strong { display: block; font-family: var(--font-ui); font-weight: 700; }
.copy-page__item span   { display: block; font-size: var(--text-xs); color: var(--color-fg-muted); margin-top: 2px; }
.copy-page__status { align-self: center; padding: 0 var(--space-3); color: var(--color-fg-muted); font-family: var(--font-ui); font-size: var(--text-xs); }

/* --- Site search (/search/) ------------------------------------------- */
.search-results { list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.search-result { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.search-result:last-child { border-bottom: 0; }
.search-result__title { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.search-result__snippet { margin: 0; color: var(--color-fg-muted); font-size: var(--text-sm); }
.search-result__snippet mark { background: var(--color-bg-subtle); color: inherit; font-weight: 700; padding: 0 2px; }

/* --- Cookie consent banner (consent.js) -------------------------------- */
/* Styles live here, not injected: the enforced style-src 'self' CSP blocks
   script-created <style> elements. */
.rgo-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2147483000;
  max-width: 560px; margin: 0 auto;
  background: var(--color-bg); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px);
  box-shadow: 0 12px 32px rgba(20, 20, 20, .16);
  padding: var(--space-4) var(--space-5);
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.rgo-consent__body a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 0.12em; }
.rgo-consent__title { margin: 0 0 var(--space-1); font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); }
.rgo-consent__body { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-fg-muted); line-height: 1.5; }
.rgo-consent__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rgo-consent__btn {
  font: inherit; font-size: var(--text-sm); font-weight: 700; line-height: 1;
  cursor: pointer; border-radius: var(--radius-sm, 6px); padding: 10px 18px;
  border: 1px solid transparent;
}
.rgo-consent__btn--accept { background: var(--color-accent); color: var(--color-white); }
.rgo-consent__btn--accept:hover { background: var(--color-accent-hover); }
.rgo-consent__btn--reject { background: transparent; color: var(--color-fg); border-color: var(--color-fg); }
.rgo-consent__btn--reject:hover { background: var(--color-bg-subtle); }
.rgo-consent__btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 480px) {
  .rgo-consent { left: 10px; right: 10px; bottom: 10px; }
  .rgo-consent__btn { flex: 1 1 auto; text-align: center; }
}
.rgo-cookie-settings { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.rgo-cookie-settings:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- Newsletter slide-in (site.js) ------------------------------------- */
.slidein {
  position: fixed; right: 24px; bottom: 24px; z-index: 2147482000;
  width: min(380px, calc(100vw - 32px));
  background: var(--color-bg); color: var(--color-fg);
  border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 12px 32px rgba(20, 20, 20, .18);
  padding: var(--space-5) var(--space-5) var(--space-4);
  max-height: calc(100vh - 48px); overflow-y: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .slidein { animation: slidein-in .35s ease-out; }
  @keyframes slidein-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.slidein__close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--color-fg-muted); border-radius: var(--radius-md);
}
.slidein__close:hover { color: var(--color-fg); background: var(--color-bg-subtle); }
.slidein__close:focus-visible, .slidein .btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.slidein__title { margin: 0 var(--space-8) var(--space-2) 0; font-size: var(--text-xl); }
.slidein__text { margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: 1.5; }
.slidein .signup__input { margin-bottom: var(--space-3); }
.slidein .btn { width: 100%; }
.slidein__small { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-fg-muted); text-align: center; line-height: 1.5; }
.slidein__small + .slidein__small { margin-top: var(--space-1); }
@media (max-width: 480px) {
  .slidein { right: 0; left: 0; bottom: 0; width: auto; border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0; padding: var(--space-4); }
  .slidein__text { margin-bottom: var(--space-3); }
}