/* Baruly Trends reader theme: element and component rules over the tokens in tokens.css, which loads first. */

html[data-theme="dark"] .mark { color: var(--color-2); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .mark { color: var(--color-2); }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { text-wrap: pretty; }

body {
  margin: 0;
  background: var(--cte-canvas);
  color: var(--cte-text);
  font-family: var(--cte-font);
  font-size: var(--cte-size);
  font-weight: var(--cte-weight);
  line-height: var(--cte-line);
  letter-spacing: var(--cte-tracking);
}

h1, h2, .brand {
  font-family: var(--font-brand);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-l);
  line-height: var(--line-l);
}

/* Editorial headings use the display serif. UI chrome keeps the sans. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--size-xl); line-height: var(--line-xl); margin: 0 0 var(--space-m); }
h2 { font-size: var(--size-l); line-height: var(--line-l); margin: var(--space-xl) 0 var(--space-xs); }

p { margin: 0 0 var(--space-m); }

a {
  color: var(--cte-link);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--cte-text); text-decoration-color: var(--role-link-hover-underline); }

:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: 2px;
}

.shell {
  width: 100%;
  margin-inline: auto;
  padding: var(--space-m) var(--space-l);
}

.app-frame {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: var(--space-l);
  align-items: start;
}

main {
  min-width: 0;
}

main[data-slot="sidebar-inset"] {
  width: auto;
  margin: 0;
  background: var(--cte-canvas);
  color: var(--cte-text);
}

.inset-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 3.5rem;
  padding-inline: var(--space-m);
  background: var(--cte-canvas);
  box-shadow: inset 0 calc(-1 * var(--border-s)) 0 var(--cte-border);
}

/* Below the drawer breakpoint the header button is the only nav. icon-sm is 28px; the 3.5rem header can hold a thumb target. */
@media (max-width: 767px) {
  .inset-header [data-sidebar="trigger"] {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* The mark in the header: a 44px target, shown only where the sidebar's own mark is out of sight, so the header beside
   the expanded sidebar is unchanged. Phones get the drawer (use-mobile's 768px), a collapsed desktop sidebar its icons. */
.inset-brand {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-s);
  color: inherit;
}

@media (max-width: 767px) {
  .inset-brand {
    display: inline-flex;
  }
}

[data-slot="sidebar"][data-state="collapsed"] ~ [data-slot="sidebar-inset"] .inset-brand {
  display: inline-flex;
}

.inset-header [data-slot="separator"] {
  width: var(--border-s);
  height: 1rem;
  align-self: center;
  background: var(--cte-border);
}

.inset-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: var(--size-s);
  font-weight: var(--weight-medium);
  line-height: var(--line-s);
  letter-spacing: var(--letter-spacing-s);
}

.inset-body {
  min-width: 0;
  padding: var(--space-l);
}

.inset-body > :not(.stage):not(.funnel-scroll):not(.issue-hero) {
  max-width: 72ch;
  overflow-wrap: break-word;
}

[data-slot="sidebar-inner"],
[data-mobile="true"][data-slot="sidebar"] {
  background: var(--cte-chrome);
  box-shadow: inset calc(-1 * var(--border-s)) 0 0 var(--cte-border);
  color: var(--cte-text);
  font-family: var(--font-ui);
  font-size: var(--size-s);
  line-height: var(--line-s);
  letter-spacing: var(--letter-spacing-s);
}

a[data-sidebar="menu-button"],
a[data-sidebar="menu-sub-button"],
[data-sidebar="menu-button"],
[data-sidebar="menu-sub-button"] {
  color: var(--cte-text);
  text-decoration: none;
}

[data-sidebar="menu-button"]:hover,
[data-sidebar="menu-sub-button"]:hover,
[data-sidebar="menu-button"][data-active="true"],
[data-sidebar="menu-sub-button"][data-active="true"] {
  background: var(--neutral-3);
  color: var(--cte-text);
}

[data-sidebar="menu-button"][data-active="true"],
[data-sidebar="menu-sub-button"][data-active="true"] {
  font-weight: var(--weight-medium);
}

[data-slot="sidebar-group-label"] {
  color: var(--cte-text-muted);
  font-family: var(--font-ui);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--letter-spacing-xs);
}

[data-slot="sidebar-footer"] .btn {
  width: 100%;
  justify-content: flex-start;
  gap: var(--space-xs);
}

[data-collapsible="icon"] [data-slot="sidebar-footer"] .btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  justify-content: center;
  overflow: hidden;
}

[data-collapsible="icon"] .theme-word {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The panel runs the reading column's full height, so its surface never stops part way down the page (the owner's
   walkthrough, 8 November 2026); the ask inside it is what sticks. */
.signup-sidebar {
  align-self: stretch;
  width: 22rem;
  height: auto;
  background: var(--cte-surface);
  color: var(--cte-text);
  box-shadow: inset var(--border-s) 0 0 var(--cte-border);
}

/* On home, where nothing sits above the grid, at least down to the viewport's foot: the 3.5rem header, and the
   page's own gap above and below. */
.stage-grid.rail-after-first > .signup-sidebar { min-height: calc(100vh - 3.5rem - 2 * var(--space-l)); }

.signup-sidebar > [data-slot="sidebar-content"] {
  position: sticky;
  /* The shell header is 3.5rem and sticks to the viewport. Clear it, plus the same gap the card has at rest. */
  top: calc(3.5rem + var(--space-l));
  flex: none;
  max-height: calc(100vh - 3.5rem - var(--space-l) - var(--space-m));
  overflow: auto;
}

.signup-sidebar .signup-rail {
  position: static;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-l);
}

/* A page that is itself the ask (/newsletter, /research) puts it in the rail's panel, drawn as the rail is. */
.signup-sidebar .ask-section { padding: var(--space-l); }
.signup-sidebar .ask-section h1 { margin: 0 0 var(--space-xs); font-size: var(--size-l); line-height: var(--line-l); letter-spacing: -0.01em; text-wrap: balance; }
.signup-sidebar .ask-section form > .btn { width: 100%; }

.stage {
  width: min(100%, 76rem);
  margin-inline: auto;
}

.rail-nav {
  position: sticky;
  top: var(--space-m);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4rem;
  min-height: calc(100vh - 2 * var(--space-m));
}

.stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  column-gap: var(--space-xl);
  align-items: start;
}

.reader {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  min-width: 0;
}

.reader > :is(p, .banner) {
  max-width: 72ch;
  overflow-wrap: break-word;
}

.signup-rail {
  position: sticky;
  top: var(--space-m);
  max-height: calc(100vh - var(--space-xl));
  overflow: auto;
  background: var(--cte-surface);
  border: var(--border-s) solid var(--cte-border);
  border-radius: var(--radius-xl);
  padding: var(--space-l);
}

.signup-rail form > .btn {
  width: 100%;
}

.subscribe-cta .btn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.subscribe-cta .icon {
  flex: none;
}

.signup-rail .subscribe-cta .btn-label {
  white-space: nowrap;
}

/* A confirmed reader's rail: the next rung, the founding waitlist, with a visible heading. */
.rail-next-title { margin: 0 0 var(--space-m); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-l); line-height: var(--line-l); text-wrap: balance; }
.waitlist-join { display: grid; gap: var(--space-xs); }
.waitlist-joined { margin: 0; }
.needs-form { display: grid; gap: var(--space-s); width: 100%; }
.needs-form .field { margin-bottom: 0; }
.needs-form textarea { resize: vertical; }
.needs-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.needs-saved { margin: 0; }
/* An issue page has no rail: one column the article's width, and its one ask at the end of the article (U7). */
.stage-issue { width: min(100%, 44rem); }
.issue-ask { margin-top: var(--space-l); }
.issue-ask-title { margin: 0 0 var(--space-s); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-l); line-height: var(--line-l); text-wrap: balance; }
/* The ladder's one ask (value-ladder U5): its analytics wrapper draws no box, so the ask inside keeps the rail's or the card's layout. */
.ladder-frame { display: contents; }
/* The end-of-page card stays in the reading column, as the page's text does; its one button keeps its own width. */
.ladder-frame > .offer-card.ladder-ask { max-width: 72ch; }
.offer-card .waitlist-join > .btn { justify-self: start; }
.ladder-ask p { margin: 0 0 var(--space-s); }
.ladder-ask p:last-child { margin-bottom: 0; }
.ladder-status { margin: var(--space-l) 0 0; }
.signup-rail .ladder-status { margin: 0; }
.home-headline { margin: 0; font-size: var(--size-l); line-height: var(--line-l); text-wrap: balance; }
/* /newsletter's signed-out main column: what a subscriber gets, as prose in the reading width. */
.newsletter-about { max-width: 72ch; }
.newsletter-about .home-headline { margin-bottom: var(--space-m); }
.newsletter-about p { text-wrap: pretty; }
.newsletter-about p:last-child { margin-bottom: 0; }
.feed-first,
.feed-rest { display: flex; flex-direction: column; gap: var(--space-l); min-width: 0; }

.rail-title {
  font-family: var(--font-display);
  font-size: var(--size-l);
  line-height: var(--line-l);
  letter-spacing: -0.01em;
  font-weight: var(--weight-display);
  margin-top: 0;
}

.feed-item {
  position: relative;
  margin: 0;
  padding: var(--space-xl);
  background: var(--cte-surface);
  border: var(--border-s) solid var(--cte-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-none);
  transition: border-color var(--motion-duration) var(--motion-easing);
}

/* The whole card opens its article: the title's link (the card's only one) stretches over the card, so a tap on the
   summary, the meta line, or the thumbnail lands on it. Anything else clickable inside a card (a sources, company,
   or sponsor link) sits above the overlay and keeps its own tap. Text under the overlay cannot start a selection:
   the accepted price of a card that is one target. */
.feed-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.feed-item :is(a, button, input, select, textarea, summary):not(.feed-link) {
  position: relative;
  z-index: 1;
}
.feed-item:has(.feed-link:hover) { border-color: var(--neutral-5); }
/* The keyboard ring goes round the card the link covers, not round the title's text. */
.feed-link:focus-visible { outline: none; }
.feed-item:has(.feed-link:focus-visible) { outline: var(--focus-ring-outline); outline-offset: 2px; }
.feed-item:has(.feed-link:active) { transform: translateY(var(--motion-press-distance)); }

/* A card's thumbnail: its article's header image on the header's light frame. On a narrow card it runs the
   card's width above the text at its own shape, no taller than 12rem. On a card wide enough for two columns it
   sits beside the text, at the reading end, contained in a fixed 16:10 box, so a wide logo and a photo both fit.
   Its width and height hold its space, so nothing jumps. */
.feed-item-thumb { container-type: inline-size; }
.feed-thumb {
  display: block;
  margin: 0 0 var(--space-m);
  overflow: hidden;
  background: var(--neutral-1);
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 var(--border-s) var(--cte-border);
}
.feed-thumb img { display: block; width: 100%; height: auto; max-height: 12rem; object-fit: cover; }
html[data-theme="dark"] .feed-thumb { background: var(--neutral-10); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .feed-thumb { background: var(--neutral-10); }
}
@container (min-width: 30rem) {
  .feed-thumb { float: inline-end; display: flex; width: 12rem; aspect-ratio: 16 / 10; margin: 0 0 var(--space-s); margin-inline-start: var(--space-l); }
  .feed-thumb img { height: 100%; max-height: none; object-fit: contain; }
  .feed-text { display: flow-root; }
}

.story-source {
  margin: 0 0 var(--space-xs);
  color: var(--cte-text-muted);
  font-family: var(--font-ui);
  font-size: var(--size-s);
  font-weight: var(--weight-medium);
  line-height: var(--line-s);
  letter-spacing: var(--letter-spacing-s);
}

.feed-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-xl);
  line-height: var(--line-xl);
  letter-spacing: var(--letter-spacing-xl);
  margin: 0;
}

.feed-title a,
.issue-title a {
  color: var(--cte-text);
  text-decoration: none;
}

.feed-title a:hover,
.issue-title a:hover { color: var(--color-1); }

.issue + .issue { margin-top: 0; }

.issue {
  max-width: 44rem;
  padding: var(--space-xs) 0 var(--space-xl);
}



.issue-title {
  max-width: 72ch;
  font-family: var(--font-display);
  font-size: var(--size-xxl);
  line-height: var(--line-xxl);
  letter-spacing: -0.02em;
  font-weight: var(--weight-display);
  margin: 0 0 var(--space-xs);
}

.issue > .data { margin: 0 0 var(--space-m); }

.issue-lead,
.issue-body {
  max-width: 68ch;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--size-read);
  line-height: var(--line-read);
}

.issue-body p { margin-bottom: var(--space-read); }

/* The founding page (U9): the letter reads left, as an article does; a draft preview says so above everything. */
.founding-letter { text-align: start; margin-inline: auto; }
.founding-sources { max-width: 68ch; margin: var(--space-l) auto 0; font-size: 14px; text-align: start; }
.draft-banner { border: 2px solid var(--warning); padding: var(--space-s) var(--space-m); font-weight: 600; }

/* The issue's find (U18): a short, sourced curiosity above the article, quieter than the article itself. */
.issue-find {
  max-width: 68ch;
  margin: 0 0 var(--space-xl);
  padding-inline-start: var(--space-m);
  border-inline-start: var(--border-s) solid var(--cte-border);
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  font-style: italic;
  color: var(--cte-text-muted);
}
.issue-find p { margin: 0; }
.issue-find .issue-find-source { font-style: normal; font-size: 12px; line-height: 16px; margin-top: var(--space-xs, 8px); }

/* A correction (U30): a dated note under the article, quiet like the find, its edge on the reading side in both directions. */
.issue-corrections {
  max-width: 68ch;
  margin: var(--space-l) 0;
  padding-inline-start: var(--space-m);
  border-inline-start: var(--border-s) solid var(--cte-border);
  font-size: var(--size-s);
  color: var(--cte-text-muted);
}
.issue-corrections p { margin: 0; }
.issue-corrections p + p { margin-top: var(--space-xs, 8px); }

.issue-lead {
  font-size: var(--size-read-lead);
  line-height: var(--line-read-lead);
  color: var(--cte-text-muted);
  margin-bottom: var(--space-xl);
}



html[data-read="compact"] .issue-lead,
html[data-read="compact"] .issue-body {
  line-height: var(--cte-line);
}

.issue-body h2 {
  max-width: 68ch;
  font-family: var(--font-display);
  font-size: var(--size-l);
  font-weight: var(--weight-display);
  line-height: var(--line-l);
  letter-spacing: -0.01em;
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-m);
}

.evidence-block {
  max-width: 72ch;
  margin-top: var(--space-l);
}

.evidence-block h2 { margin-top: 0; }


.evidence-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.evidence-list li {
  padding-bottom: var(--space-s);
  box-shadow: inset 0 calc(-1 * var(--border-s)) 0 var(--neutral-4);
  overflow-wrap: anywhere;
}

.feed-status { min-height: var(--space-m); }

.skip {
  position: absolute;
  inset-inline-start: var(--space-s);
  top: var(--space-s);
  background: var(--cte-surface);
  color: var(--cte-text);
  padding: var(--space-xs);
}
.skip:not(:focus) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.banner {
  max-width: 72ch;
  background: var(--cte-surface-muted);
  color: var(--cte-text);
  border-radius: var(--radius-s);
  padding: var(--space-s);
  margin-bottom: var(--space-m);
  font-size: var(--size-s);
  line-height: var(--line-s);
  overflow-wrap: break-word;
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  display: var(--icon-bold-display);
  vertical-align: text-bottom;
  flex: none;
  shape-rendering: geometricPrecision;
}

/* Lucide is drawn on a 24 grid. A 1.75 stroke at 18px reads crisp and current
   next to 14px UI type; heavier strokes read dated. */
.icon,
.icon * {
  stroke-width: 1.75;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--role-control-size);
  font-weight: var(--weight-medium);
  line-height: var(--role-control-line);
  letter-spacing: var(--role-control-tracking);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-s);
  border-style: solid;
  border-width: var(--role-control-border-width);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-none);
  transition: background var(--motion-duration) var(--motion-easing), box-shadow var(--motion-duration) var(--motion-easing), color var(--motion-duration) var(--motion-easing), border-color var(--motion-duration) var(--motion-easing);
}
.btn:active:not(:disabled) { transform: translateY(var(--motion-press-distance)); }
.btn:disabled,
.btn[aria-disabled="true"] { cursor: not-allowed; }
.btn:disabled .btn-label,
.btn[aria-disabled="true"] .btn-label { color: var(--neutral-8); }

.btn-primary {
  background: var(--role-primary-fill);
  color: var(--role-primary-text);
  border-color: transparent;
  box-shadow: 0 0 0 var(--role-control-border-width) var(--role-primary-border);
}
/* A link drawn as a button keeps its label colour: `a:hover` outranks a lone class. */
.btn-primary:hover,
.btn-primary:focus-visible { color: var(--role-primary-text); }
/* Hampton signature: a beige offset block behind the main call to action. */
.btn-primary.subscribe-cta,
.btn-primary.btn-offset { box-shadow: var(--shadow-offset); }
.btn-primary.subscribe-cta:hover:not(:disabled):not([aria-disabled="true"]),
.btn-primary.btn-offset:hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--role-offset-hover); transform: translate(-1px, 1px); }
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]):not(:focus-visible) { box-shadow: 0 0 0 var(--role-control-border-width) var(--role-primary-border), var(--shadow-s); }
.btn-primary:focus-visible { box-shadow: 0 0 0 var(--role-control-border-width) var(--role-focus-ring); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: var(--role-primary-fill-disabled);
  color: var(--role-primary-text-disabled);
  box-shadow: 0 0 0 var(--role-control-border-width) var(--role-primary-border-disabled);
}

.btn-secondary {
  background: var(--role-secondary-fill);
  color: var(--neutral-10);
  border-color: var(--cte-border);
  box-shadow: var(--shadow-s);
}
.btn-secondary:hover,
.btn-secondary:focus-visible { color: var(--neutral-10); }
.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]):not(:focus-visible) {
  background: var(--role-secondary-fill-hover);
  border-color: var(--neutral-4-transparent);
}
.btn-secondary:focus-visible { border-color: var(--role-focus-ring); }
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  background: var(--role-secondary-fill-disabled);
  color: var(--neutral-10);
  border-color: var(--neutral-4-transparent);
}

.btn-outline {
  background: transparent;
  color: var(--neutral-10);
  border-color: transparent;
  box-shadow: 0 0 0 var(--border-s) var(--neutral-4);
}
.btn-outline:hover,
.btn-outline:focus-visible { color: var(--neutral-10); }
.btn-outline:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--neutral-3-transparent); }
.btn-outline:focus-visible { box-shadow: 0 0 0 var(--border-s) var(--role-focus-ring); }
.btn-outline:disabled,
.btn-outline[aria-disabled="true"] {
  background: transparent;
  color: var(--neutral-10);
  box-shadow: 0 0 0 var(--border-s) var(--neutral-4-transparent);
}

.btn-ghost {
  background: transparent;
  color: var(--neutral-10);
  border-color: transparent;
  box-shadow: var(--border-shadow-none);
}
.btn-ghost:hover,
.btn-ghost:focus-visible { color: var(--neutral-10); }
.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--neutral-3-transparent); }
.btn-ghost:focus-visible { box-shadow: 0 0 0 var(--role-control-border-width) var(--role-focus-ring); }
.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
  background: transparent;
  color: var(--neutral-10);
  border-color: transparent;
  box-shadow: var(--border-shadow-none);
}

.btn-danger {
  background: var(--error);
  color: var(--neutral-1);
  border-color: transparent;
  box-shadow: 0 0 0 var(--border-s) var(--error-transparent);
}
.btn-danger:hover,
.btn-danger:focus-visible { color: var(--neutral-1); }
.btn-danger:hover:not(:disabled):not([aria-disabled="true"]):not(:focus-visible) { box-shadow: 0 0 0 var(--border-s) var(--error-transparent), var(--shadow-s); }
.btn-danger:focus-visible { box-shadow: 0 0 0 var(--border-s) var(--color-1-transparent); }
.btn-danger:disabled,
.btn-danger[aria-disabled="true"] {
  background: var(--neutral-3);
  color: var(--neutral-8);
  box-shadow: 0 0 0 var(--border-s) var(--neutral-4-transparent);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  position: relative;
  font-family: var(--font-ui);
}
.check-input {
  position: absolute;
  opacity: 0;
  width: var(--space-m);
  height: var(--space-m);
  margin: 0;
}
.check-control {
  width: var(--space-m);
  height: var(--space-m);
  flex: 0 0 var(--space-m);
  background: var(--checkbox-bg);
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 var(--border-s) var(--neutral-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.check-input:hover:not(:disabled) + .check-control { box-shadow: 0 0 0 var(--border-s) var(--neutral-5); }
.check-input:focus-visible + .check-control { box-shadow: 0 0 0 var(--border-s) var(--role-focus-ring); }
.check-input[aria-invalid="true"] + .check-control { box-shadow: 0 0 0 var(--border-s) var(--error); }
.check-input:checked + .check-control,
.check-input:indeterminate + .check-control {
  background: var(--role-check-fill);
  box-shadow: 0 0 0 var(--border-s) var(--role-check-ring);
}
.check-indicator {
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: var(--radius-full);
  background: transparent;
}
.check-input:checked + .check-control .check-indicator,
.check-input:indeterminate + .check-control .check-indicator { background: var(--neutral-1); }
.check-input:disabled:checked + .check-control .check-indicator,
.check-input:disabled:indeterminate + .check-control .check-indicator { background: var(--neutral-6); }
.check-input:disabled + .check-control {
  background: var(--neutral-3);
  box-shadow: 0 0 0 var(--border-s) var(--neutral-4);
}
.check-label {
  color: var(--neutral-10);
  font-weight: var(--weight-regular);
  font-size: var(--role-control-size);
  line-height: var(--role-control-line);
}
.check-input:disabled ~ .check-label { color: var(--neutral-6); }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-m);
}
.field-label {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--role-control-size);
  line-height: var(--role-control-line);
  letter-spacing: var(--role-control-tracking);
  color: var(--neutral-10);
}
.field-description {
  color: var(--neutral-7);
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  font-size: var(--role-control-size);
  line-height: var(--role-control-line);
  letter-spacing: var(--role-control-tracking);
  margin: 0;
}

/* A button opt-in's consent line sits right under the button it describes, clear of its offset shadow. */
.field-description.optin-line { margin: var(--space-m) 0 0; }
.field:has(:disabled) .field-label,
.field:has(:disabled) .field-description,
.field:has(:disabled) .field-error { color: var(--neutral-6); }
.form-suggestion { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xs) 0 0; }
.field-error {
  color: color-mix(in srgb, var(--error) 72%, var(--neutral-10));
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  font-size: var(--role-field-error-size);
  line-height: var(--role-field-error-line);
  letter-spacing: var(--role-control-tracking);
  margin: 0;
}

.text-field {
  width: 100%;
  background: var(--field-bg);
  color: var(--neutral-10);
  border: var(--border-s) solid var(--neutral-4);
  border-radius: var(--radius-s);
  padding: var(--space-xs) var(--space-s);
  font-family: var(--font-ui);
  font-size: var(--role-control-size);
  font-weight: var(--weight-regular);
  line-height: var(--role-control-line);
  letter-spacing: var(--role-control-tracking);
  box-shadow: var(--shadow-none);
}
.text-field:hover { border-color: var(--neutral-5); }
.text-field:focus { border-color: var(--role-focus-ring); }
.text-field[aria-invalid="true"] { border-color: var(--error); }
.text-field[data-valid="true"] { border-color: var(--success); }
.text-field:read-only { background: var(--neutral-2); color: var(--neutral-8); }
.text-field:disabled {
  background-color: var(--neutral-3);
  color: var(--neutral-6);
  border-color: var(--neutral-4-transparent);
}

.separator {
  border: 0;
  border-top: var(--border-s) solid var(--neutral-4);
  box-shadow: var(--shadow-none);
  margin: var(--space-m) 0;
  height: 0;
}

.nav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-link, .nav-trigger {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-s);
  color: var(--neutral-10);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.nav-link { font-weight: var(--weight-regular); }
.nav-trigger { font-weight: var(--weight-medium); list-style: none; }
.nav-link[aria-disabled="true"],
.nav-trigger[aria-disabled="true"] { color: var(--neutral-6); }
.nav-trigger::-webkit-details-marker { display: none; }
.nav-trigger::marker { content: ""; }
.nav-link:hover, .nav-trigger:hover, .nav-menu[open] > .nav-trigger, .nav-link[aria-current="page"] {
  background: var(--neutral-3);
}
.nav-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}
.nav-menu { position: relative; }
.nav-popover, .popover-panel, .preview-popover {
  background: var(--popover-bg);
  color: var(--cte-text);
  border: var(--role-overlay-border-width) solid var(--role-overlay-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  font-family: var(--font-ui);
  font-size: var(--role-control-size);
  font-weight: var(--weight-regular);
  line-height: var(--role-control-line);
  letter-spacing: var(--role-control-tracking);
}
.nav-popover {
  position: absolute;
  top: 0;
  inset-inline-start: calc(100% + var(--space-xs));
  z-index: 3;
  min-width: 11rem;
  padding: var(--space-xs);
}
.popover-panel, .preview-popover { padding: var(--space-m); margin-top: var(--space-xs); }
.preview-card {
  background: var(--popover-bg);
  border: var(--border-s) solid var(--neutral-4-transparent);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  box-shadow: var(--shadow-m);
  margin-bottom: var(--space-l);
}
.preview-trigger {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  color: var(--neutral-10);
  background: transparent;
  border-radius: var(--radius-s);
  padding: var(--space-zero);
  cursor: pointer;
}
.preview-title {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  color: var(--neutral-10);
  margin-top: 0;
}
.preview-description {
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  color: var(--neutral-7);
}

.dialog-popover {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  max-width: min(100% - var(--space-l), 36rem);
  max-height: calc(100dvh - var(--space-l));
  margin: auto;
  overflow: auto;
  background: var(--dialog-bg);
  color: var(--cte-text);
  border: var(--role-overlay-border-width) solid var(--role-overlay-border);
  border-radius: var(--radius-m);
  padding: var(--space-l);
  box-shadow: var(--shadow-l);
  font-family: var(--font-ui);
  font-size: var(--role-control-size);
  font-weight: var(--weight-regular);
  line-height: var(--role-control-line);
  letter-spacing: var(--role-control-tracking);
}
.dialog-popover h2 {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  color: var(--neutral-10);
}
.dialog-popover > p {
  font-weight: var(--weight-regular);
  color: var(--neutral-7);
}
.dialog-popover::backdrop { background: var(--dialog-backdrop); }
.dialog-popover[open] {
  animation: baruly-popup var(--motion-duration-large) var(--motion-easing-large);
}
@keyframes baruly-popup {
  from { transform: scale(var(--motion-popup-scale)); }
  to { transform: scale(1); }
}

.site-header { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-m); width: 100%; }
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--size-m);
  text-decoration: none;
  color: var(--cte-text);
  letter-spacing: var(--tracking-s);
}
.rail-foot { margin-top: auto; padding-top: var(--space-m); }
.rail-foot .btn { position: relative; width: 2.5rem; height: 2.5rem; padding: 0; }
.rail-label,
.rail-foot .btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.brand:hover .rail-label,
.brand:focus-visible .rail-label,
.nav-icon:hover .rail-label,
.nav-icon:focus-visible .rail-label,
.rail-foot .btn:hover .btn-label,
.rail-foot .btn:focus-visible .btn-label {
  inset-inline-start: calc(100% + var(--space-xs));
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  height: auto;
  margin: 0;
  padding: var(--space-xxs) var(--space-xs);
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--popover-bg);
  color: var(--cte-text);
  border: var(--border-s) solid var(--neutral-4-transparent);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-m);
  z-index: 4;
  font-size: var(--size-s);
  line-height: var(--line-s);
  letter-spacing: var(--letter-spacing-s);
}
.nav-menu[open] > .nav-trigger .rail-label {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  background: transparent;
  border: 0;
  box-shadow: var(--shadow-none);
}
.mark { width: 1.5rem; height: 1.5rem; display: block; flex: none; color: var(--cte-accent); }
.rail-nav .mark { width: 1.75rem; height: 1.75rem; }
.mark.section-mark { width: 2rem; height: 2rem; margin-bottom: var(--space-s); }
.brand-logo.section-mark { display: block; width: 2rem; height: 2rem; margin-bottom: var(--space-s); }
.muted { color: var(--cte-text-muted); }
.data { font-family: var(--font-data); font-weight: var(--weight-medium); font-size: var(--size-s); }
.source-list { padding-inline-start: var(--space-m); overflow-wrap: anywhere; }
.source-list a { overflow-wrap: anywhere; }

.funnel-scroll { overflow-x: auto; margin: 0 0 var(--space-m); container-type: inline-size; }
.funnel.is-ledger caption { position: sticky; inset-inline-start: 0; width: 100cqw; max-width: 100cqw; }
.funnel.is-ledger { width: max-content; min-width: 100%; }
.funnel.is-ledger th,
.funnel.is-ledger td { white-space: nowrap; }
.funnel {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: var(--size-s);
  font-weight: var(--weight-medium);
  line-height: var(--line-s);
  letter-spacing: var(--letter-spacing-s);
}
.funnel caption {
  caption-side: bottom;
  text-align: start;
  padding-top: var(--space-xs);
  color: var(--cte-text-muted);
  font-family: var(--font-ui);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-xs);
  letter-spacing: var(--letter-spacing-xs);
}
.funnel th,
.funnel td {
  text-align: start;
  padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
  border: 0;
  vertical-align: baseline;
}
.funnel thead th {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  color: var(--cte-text-muted);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  letter-spacing: var(--letter-spacing-xs);
}
.funnel td,
.funnel tbody th {
  box-shadow: inset 0 calc(-1 * var(--border-s)) 0 var(--neutral-4);
}
.funnel .num { text-align: end; font-variant-numeric: tabular-nums; }
.funnel tr.is-bottleneck th,
.funnel tr.is-bottleneck td,
.funnel thead th.is-active,
.funnel td.is-active { font-weight: var(--weight-heavy); }

.heat {
  width: 100%;
  max-width: 72ch;
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-xs);
  font-variant-numeric: tabular-nums;
}
.heat caption {
  caption-side: bottom;
  text-align: start;
  padding-top: var(--space-xs);
  color: var(--cte-text-muted);
  font-family: var(--font-ui);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-xs);
}
.heat td {
  width: 10%;
  text-align: center;
  padding: var(--space-xs) 0;
  border: 0;
  color: var(--cte-text);
  background: color-mix(in srgb, var(--color-2) calc(var(--heat, 0) * 1%), transparent);
}

.honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 960px) {
  .shell { padding: var(--space-m); }
  .app-frame,
  .stage-grid { grid-template-columns: minmax(0, 1fr); }
  .feed-item,
  .issue,
  .signup-rail { padding: var(--space-l); }
  .feed-title { font-size: var(--size-l); line-height: var(--line-l); letter-spacing: var(--letter-spacing-l); }
  .rail-nav,
  .signup-rail,
  .signup-sidebar > [data-slot="sidebar-content"] { position: static; max-height: none; }
  .signup-sidebar {
    width: 100%;
    height: auto;
    box-shadow: inset 0 var(--border-s) 0 var(--cte-border);
  }
  /* Home on a phone: the ask comes after the first card, not after the whole feed. */
  .stage-grid.rail-after-first { row-gap: var(--space-l); }
  .stage-grid.rail-after-first > .reader { display: contents; }
  .stage-grid.rail-after-first .feed-first { order: 0; }
  .stage-grid.rail-after-first > .signup-sidebar { order: 1; min-height: 0; }
  .stage-grid.rail-after-first .feed-rest { order: 2; }
  /* A page that is itself the ask leads with it on a phone. */
  .stage-grid.rail-first { row-gap: var(--space-l); }
  .stage-grid.rail-first > .signup-sidebar { order: -1; }
  .rail-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "header foot" "nav nav";
    align-items: center;
    width: auto;
    min-height: 0;
    row-gap: var(--space-s);
  }
  .site-header { grid-area: header; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 0; width: auto; }
  .rail-nav > nav { grid-area: nav; }
  .rail-foot { grid-area: foot; margin-top: 0; padding-top: 0; }
  .brand,
  .nav-icon,
  .rail-foot .btn { width: auto; height: auto; }
  .brand { justify-content: flex-start; }
  .nav-icon { padding: var(--space-xs) var(--space-s); }
  .rail-foot .btn { padding: var(--space-xs) var(--space-m); }
  .rail-nav .mark { width: 1.5rem; height: 1.5rem; }
  .rail-label,
  .rail-foot .btn-label,
  .brand:hover .rail-label,
  .brand:focus-visible .rail-label,
  .nav-icon:hover .rail-label,
  .nav-icon:focus-visible .rail-label,
  .rail-foot .btn:hover .btn-label,
  .rail-foot .btn:focus-visible .btn-label,
  .nav-menu[open] > .nav-trigger .rail-label {
    position: static;
    inset-inline-start: auto;
    top: auto;
    transform: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    background: transparent;
    border: 0;
    box-shadow: var(--shadow-none);
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
  .nav-list { flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-l); }
  .nav-popover { position: static; min-width: 0; }
}

@media (max-width: 360px) {
  .shell { padding: var(--space-s); }
  h1 { font-size: var(--size-m); line-height: var(--line-m); }
  .issue-title { font-size: var(--size-l); line-height: var(--line-l); letter-spacing: var(--letter-spacing-l); }
}

/* On a touch screen every control is at least a fingertip tall: buttons, fields, the sidebar's links (32px on their
   own), and the signup bar's close. A mouse keeps the theme's own heights, so desktop is unchanged. */
@media (pointer: coarse) {
  :is(.btn, .text-field, [data-sidebar="menu-button"]) { min-height: var(--tap-target); }
  .optin-close { min-width: var(--tap-target); min-height: var(--tap-target); }
  .optin-decline { min-height: var(--tap-target); }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-popover[open] { animation: none; }
  .btn,
  .feed-item { transition: none; }
}

/* Dark canvas makes --color-1 and --neutral-1 disappear. Keep the same tokens. The checked box's dark fill is its
   role's dark value (tokens.css); these rules only keep that fill on a disabled box, which they outrank. */
html[data-theme="dark"] :is(.feed-title a, .issue-title a) { color: var(--cte-text); }
html[data-theme="dark"] :is(a, .feed-title a, .issue-title a):hover {
  color: var(--color-5);
}
html[data-theme="dark"] .check-input:checked + .check-control,
html[data-theme="dark"] .check-input:indeterminate + .check-control {
  background: var(--role-check-fill);
  box-shadow: 0 0 0 var(--border-s) var(--role-check-ring);
}
html[data-theme="dark"] .check-input:checked + .check-control .check-indicator,
html[data-theme="dark"] .check-input:indeterminate + .check-control .check-indicator {
  background: var(--neutral-1);
}
html[data-theme="dark"] .field-error { color: var(--error); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) :is(.feed-title a, .issue-title a) { color: var(--cte-text); }
  html:not([data-theme="light"]) :is(a, .feed-title a, .issue-title a):hover { color: var(--color-5); }
  html:not([data-theme="light"]) .check-input:checked + .check-control,
  html:not([data-theme="light"]) .check-input:indeterminate + .check-control {
    background: var(--role-check-fill);
    box-shadow: 0 0 0 var(--border-s) var(--role-check-ring);
  }
  html:not([data-theme="light"]) .check-input:checked + .check-control .check-indicator,
  html:not([data-theme="light"]) .check-input:indeterminate + .check-control .check-indicator {
    background: var(--neutral-1);
  }
  html:not([data-theme="light"]) .field-error { color: var(--error); }
}

/* Nav links stay with the text token. Later dark link rules would paint them --color-3. */
html:not([data-theme="light"]) :is(a[data-sidebar="menu-button"], a[data-sidebar="menu-sub-button"]),
html:not([data-theme="light"]) :is(a[data-sidebar="menu-button"], a[data-sidebar="menu-sub-button"]):hover {
  color: var(--cte-text);
}

/* Delivery state sits under the form it describes, in small muted type. */
.delivery-note {
  max-width: 72ch;
  margin-top: var(--space-s);
  color: var(--cte-text-muted);
  font-family: var(--font-ui);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  letter-spacing: var(--letter-spacing-xs);
}
.rail-consent { font-size: var(--size-s); line-height: var(--line-s); }

.feed-summary {
  max-width: 60ch;
  margin: var(--space-s) 0 0;
  color: var(--cte-text-muted);
  font-size: var(--size-m);
  line-height: var(--line-m);
}
.feed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin: var(--space-m) 0 0;
  color: var(--cte-text-muted);
  font-family: var(--font-data);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
}
.feed-item:has(.feed-link:hover) { box-shadow: var(--shadow-m); }

/* Account and settings */
.account { display: grid; gap: var(--space-l); max-width: 40rem; }
.account h1 { margin-bottom: 0; }
.account-card {
  background: var(--cte-surface);
  border: var(--border-s) solid var(--cte-border);
  border-radius: var(--radius-xl);
  padding: var(--space-l);
}
.account-card h2 { margin-top: 0; }
.account-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-m); margin: 0 0 var(--space-l); }
.account-facts dt { color: var(--cte-text-muted); font-size: var(--size-xs); line-height: var(--line-xs); font-family: var(--font-ui); }
.account-facts dd { margin: var(--space-xxs) 0 0; overflow-wrap: anywhere; }
.account-links { display: flex; gap: var(--space-l); }
.setting-group { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.setting-group legend { margin-bottom: var(--space-xs); }
.setting-option {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 var(--border-s) var(--cte-border);
  cursor: pointer;
}
.setting-option:has(input:checked) { box-shadow: 0 0 0 var(--border-l) var(--cte-text); }
.setting-option input { accent-color: var(--cte-accent); margin: 0; }

/* Forms and lists on tool pages: one readable width, room between actions and results. */
.inset-body form:not(.dialog-popover form) { max-width: 40rem; }
.inset-body form + form { margin-top: var(--space-s); }
.inset-body form + :is(p, ul, ol, section),
.inset-body :is(p, ul) + form { margin-top: var(--space-l); }
.inset-body form + p:not([class]) { color: var(--cte-text-muted); }

select.text-field {
  appearance: none;
  padding-inline-end: var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6662' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-s) center;
  cursor: pointer;
}
html[data-theme="dark"] select.text-field {
  background-repeat: no-repeat;
  background-position: right var(--space-s) center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239fb2ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) select.text-field {
    background-repeat: no-repeat;
    background-position: right var(--space-s) center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239fb2ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* Embeds render without the app chrome so they fit an iframe. */
.embed-frame { max-width: 44rem; margin-inline: auto; padding: var(--space-l) var(--space-m); }

.embed-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }

/* The operator's frame (U4, U7): the admin shell draws its own rail; the sign-in page is one narrow form. */
.account-card .setting-group + .setting-group { margin-top: var(--space-l); }

.loop-slowest {
  max-width: 72ch;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  background: var(--cte-surface);
  box-shadow: inset 3px 0 0 var(--color-5), 0 0 0 var(--border-s) var(--cte-border);
}

/* Newsletter opt-ins: the Hampton band, the sticky bar, and the modal. One field, the beige offset button. */
.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; }

.optin-form { display: grid; gap: var(--space-s); }
.optin-fields { display: flex; gap: var(--space-s); align-items: stretch; }
.optin-fields .text-field { flex: 1; min-width: 0; }
.optin-fields .btn { flex: none; }
.optin-form.is-stack .optin-fields { flex-direction: column; }
/* In a row the consent line is one small line under the field and the button, as on a phone. */
.optin-form.is-row .optin-fields { flex-wrap: wrap; }
.optin-form.is-row .optin-consent { flex-basis: 100%; }
.form-sent { display: grid; gap: var(--space-xs); justify-items: start; }
.form-sent p { margin: 0; }
.lead-survey { display: grid; gap: var(--space-s); width: 100%; margin-block: var(--space-s); }
.lead-survey .field { margin-bottom: 0; }
.lead-survey .btn { width: 100%; }
.form-sent-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-l); line-height: var(--line-l); }
.optin-consent { display: flex; gap: var(--space-xs); align-items: flex-start; font-family: var(--font-ui); font-size: var(--size-xs); line-height: var(--line-xs); color: inherit; opacity: 0.85; }
.optin-success { display: grid; gap: var(--space-xs); }
.optin-success p { margin: 0; }
.optin-success-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-l); line-height: var(--line-l); }
.optin-steps { list-style: decimal; margin: var(--space-xs) 0 0; padding-inline-start: var(--space-l); font-size: var(--size-s); line-height: var(--line-s); }
.optin-headline { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-l); line-height: var(--line-l); letter-spacing: -0.01em; text-wrap: balance; }
.optin-body { margin: 0 0 var(--space-m); }

/* The bar always uses the deep-green band, in both themes, like Hampton. */
.optin-bar {
  --band-bg: var(--brand-band, var(--role-band-bg));
  background: var(--band-bg);
  color: var(--role-band-text);
}
.optin-bar :is(.text-field) { background: var(--role-band-field-bg); color: var(--role-band-field-text); }
.optin-bar .btn-primary { background: var(--role-band-primary-fill); color: var(--role-band-primary-text); box-shadow: 0 0 0 var(--border-s) var(--role-band-ring), var(--shadow-offset); }
.optin-bar .field-error { color: var(--role-band-error); }

.optin-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  padding: var(--space-m) var(--space-l);
  box-shadow: var(--role-band-shadow);
  animation: optin-rise var(--motion-duration-large) var(--motion-easing-large);
}
/* Collapsed, only the tab is left: no strip across the page to cover the sidebar's theme switch. */
.optin-bar.is-collapsed { padding: 0; background: transparent; box-shadow: none; animation: none; }
.optin-bar-inner { max-width: 72rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem) auto; gap: var(--space-l); align-items: center; }
.optin-bar .optin-headline { font-size: var(--size-l); color: var(--role-band-headline); margin: 0; }
.optin-bar .optin-body { margin: 0; font-size: var(--size-s); line-height: var(--line-s); }
.optin-bar-toggle {
  position: absolute; top: calc(-1 * var(--space-l)); inset-inline-end: var(--space-xl);
  width: 2rem; height: var(--space-l); border: 0; border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--band-bg); color: var(--role-band-text); cursor: pointer; display: grid; place-items: center;
}
/* Alone on a dark page the band-green tab would vanish; the ring the bar's button uses keeps it visible. */
.optin-bar.is-collapsed .optin-bar-toggle { box-shadow: 0 0 0 var(--border-s) var(--role-band-ring); }
.optin-close { border: 0; background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: var(--space-xs); border-radius: var(--radius-s); }
.optin-close:hover { background: var(--role-optin-close-hover); }

.optin-modal {
  /* Tailwind's reset zeroes margins; a modal dialog needs auto margins to sit in the center. */
  margin: auto;
  width: min(32rem, calc(100vw - 2 * var(--space-m)));
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--cte-surface);
  color: var(--cte-text);
  box-shadow: var(--shadow-l), 0 0 0 var(--border-s) var(--cte-border);
}
.optin-modal::backdrop { background: var(--role-optin-backdrop); }
.optin-modal[open] { animation: baruly-popup var(--motion-duration-large) var(--motion-easing-large); }
.optin-modal-inner { position: relative; padding: var(--space-xl); }
.optin-modal .optin-close { position: absolute; top: var(--space-s); inset-inline-end: var(--space-s); color: var(--cte-text-muted); }
.optin-decline { margin-top: var(--space-m); border: 0; background: none; padding: 0; color: var(--cte-text-muted); font: inherit; font-size: var(--size-s); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

@keyframes optin-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (max-width: 760px) {
  .optin-bar-inner { grid-template-columns: 1fr; gap: var(--space-m); }
  /* The article has no card on a phone: its text uses the page's gutter. */
  .issue { padding-inline: 0; }
  .issue-title { font-size: var(--size-xl); line-height: var(--line-xl); }
  .optin-bar .optin-close { position: absolute; top: var(--space-xs); inset-inline-end: var(--space-xs); }
  /* A column with wrap lays the consent and the button off to the side. Keep one stack, at the field's own height. */
  .optin-form.is-row .optin-fields,
  .optin-form.is-stack .optin-fields { flex-direction: column; flex-wrap: nowrap; }
  .optin-form.is-row .optin-consent { order: 0; flex-basis: auto; }
  .optin-fields .text-field { flex: none; }
  /* On phones the modal is a bottom sheet, never a full-screen interstitial. */
  .optin-modal { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .optin-bar, .optin-modal[open], .magnet-modal[open] { animation: none; }
}

/* The lead-magnet popup, in Hampton's shape: the mark on the band's deep colour, then the title, one line, one button.
   On a phone it is a bottom sheet and the band shrinks to a strip. */
.magnet-modal {
  margin: auto;
  width: min(44rem, calc(100vw - 2 * var(--space-m)));
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--cte-surface);
  color: var(--cte-text);
  box-shadow: var(--shadow-l), 0 0 0 var(--border-s) var(--cte-border);
}
.magnet-modal::backdrop { background: var(--role-optin-backdrop); }
.magnet-modal[open] { animation: baruly-popup var(--motion-duration-large) var(--motion-easing-large); }
.magnet-modal-inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); min-height: 18rem; }
.magnet-modal-brand { display: grid; place-items: center; padding: var(--space-xl); background: var(--brand-band, var(--role-band-bg)); color: var(--role-band-headline); }
.magnet-modal-brand :is(svg, img) { width: 5rem; height: 5rem; }
/* The platform's rays take the page's accent, which is dark in light mode; on the band they take the band's light. */
.magnet-modal .magnet-modal-brand .mark { color: var(--role-band-headline); }
.magnet-modal-body { position: relative; display: grid; align-content: center; justify-items: start; gap: var(--space-m); padding: var(--space-xl); }
.magnet-modal-body .optin-headline { margin: 0; padding-inline-end: var(--space-l); }
.magnet-modal-body .optin-body { margin: 0; }
.magnet-modal-body .optin-decline { margin-top: 0; }
.magnet-modal .optin-close { position: absolute; top: var(--space-s); inset-inline-end: var(--space-s); color: var(--cte-text-muted); }
@media (max-width: 760px) {
  .magnet-modal { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .magnet-modal-inner { grid-template-columns: 1fr; min-height: 0; }
  .magnet-modal-brand { padding: var(--space-s); }
  .magnet-modal-brand :is(svg, img) { width: 2rem; height: 2rem; }
  .magnet-modal-body { padding: var(--space-l) var(--space-m) var(--space-xl); }
  .magnet-modal-body .btn { width: 100%; justify-content: center; }
}

/* Sponsored blocks (U23): set apart by a rule on the inline start side, the label first. */
.sponsor-block {
  max-width: 72ch;
  margin-block: var(--space-l);
  padding-block: var(--space-xs);
  padding-inline: var(--space-m);
  border-inline-start: 3px solid var(--cte-border);
  background: var(--cte-surface);
  font-family: var(--font-ui);
}
.sponsor-block p {
  margin-block: 0 var(--space-xxs);
}
.sponsor-block .sponsor-label {
  color: var(--cte-text-muted);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sponsor-block .sponsor-headline {
  font-weight: 600;
}
.kit-figures {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  gap: var(--space-xs) var(--space-l);
  font-family: var(--font-ui);
}
.kit-figures dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Plain forms (offer requests, sponsor bookings): one field per row, full width up to a reading measure. */
.stack-form {
  display: grid;
  gap: var(--space-s);
  max-width: 60ch;
  margin-block: var(--space-m);
  font-family: var(--font-ui);
}
.stack-form label {
  display: grid;
  gap: var(--space-xxs);
}
.stack-form input:not([type="radio"]):not([type="checkbox"]),
.stack-form select,
.stack-form textarea {
  width: 100%;
  min-height: 40px;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--cte-border);
  border-radius: 8px;
  background: var(--cte-surface);
  color: var(--cte-text);
  font: inherit;
}
.stack-form fieldset {
  display: grid;
  gap: var(--space-xs);
  border: 0;
  margin: 0;
  padding: 0;
}
.stack-form fieldset label {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}
.offer-card {
  padding-block: var(--space-m);
  border-block-end: 1px solid var(--cte-border);
}
.fine-print {
  max-width: 72ch;
  color: var(--cte-text-muted);
  font-family: var(--font-ui);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
}

/* Email-gated issues (U33): the rest of a gated issue is in the page (for search engines, marked in the
   JSON-LD) and collapsed for a visitor the site does not know, until they sign up. */
.email-gated:not(.open) {
  max-height: 5.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
  user-select: none;
}
/* The free opening fades into the opt-in card only while the rest of the issue is still closed. Sending the address opens `.email-gated`, and this fade lifts with it. */
.issue-body:has(> .email-gate):has(> .email-gated:not(.open)) > div:first-child {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 5.5em), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 5.5em), transparent 100%);
}
.email-gate[hidden] {
  display: none;
}
/* The continue-reading opt-in, and the thank-you that replaces its form, is a card.
   Same surface as the signup rail and the feed: white on the paper, a hairline, the large radius. */
.email-gate {
  margin-block: var(--space-l);
  padding: var(--space-l);
  background: var(--cte-surface);
  border: var(--border-s) solid var(--cte-border);
  border-radius: var(--radius-xl);
}
.email-gate > .email-gate-kicker {
  margin: 0;
  color: var(--cte-text-muted);
  font-family: var(--font-ui);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.email-gate > .email-gate-ask {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-l);
  line-height: var(--line-l);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.email-gate > .email-gate-body {
  margin: var(--space-xs) 0 var(--space-m);
}
/* Sources, contrary evidence, and the read buttons stay out until the same signup opens the rest. */
.email-gate-held:not(.open) {
  display: none;
}

/* Member follow pages: the claim's words marked in a source passage, the follow carried through sign-in,
   the Manage fold on /watch, and its quiet delete. */
blockquote mark { background: var(--cte-surface-muted); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.follow-chip { display: inline-block; max-width: 100%; padding: 0.25rem 0.75rem; border: 1px solid var(--cte-border); border-radius: 999px; overflow-wrap: anywhere; }
.manage { margin: 1rem 0; }
.manage > summary { cursor: pointer; color: var(--cte-text-muted); }
.manage > form { margin-block: 0.5rem; }
.link-quiet { background: none; border: 0; padding: 0; color: var(--cte-text-muted); text-decoration: underline; cursor: pointer; font: inherit; }
.link-quiet:hover { color: var(--cte-danger); }

/* Article images (U15, R31, AE16). The header heads the reading column above the H1, the body text's width, at
   its own aspect ratio and no taller than leaves the title and summary on a laptop's first screen; it sits
   centered on a light frame with a hairline edge, so a wide logo on white reads as a contained card, never a
   slab, in either mode. A body figure breaks out of the text column to the reader's full width; a row puts two
   or three side by side. Every image carries its width and height, so nothing jumps as it loads. On a phone
   the header and every body image are the screen's full width; the header keeps its own shape, whole, on the
   light frame, no taller than half the screen. A row stacks. A right-to-left page mirrors a row's order,
   since the row follows the page's direction. */
.issue-hero {
  /* The body text's measure (.issue-body): 68ch of its face, weight, and size. */
  max-width: 68ch;
  margin: 0;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 19px;
}
.issue-hero-image {
  display: block;
  width: min(100%, calc(min(24rem, 42vh) * var(--hero-ratio, 1.6)));
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  background: var(--neutral-1);
  border-radius: var(--radius-l);
  box-shadow: 0 0 0 var(--border-s) var(--cte-border);
}
html[data-theme="dark"] .issue-hero-image { background: var(--neutral-10); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .issue-hero-image { background: var(--neutral-10); }
}
@media (max-width: 760px) {
  /* The pane keeps its --space-l padding on a phone: the header takes it back, to the screen's edges, and shows
     the whole image, contained on the frame when the height cap is reached. */
  .issue-hero { max-width: none; margin: calc(-1 * var(--space-l)) calc(-1 * var(--space-l)) 0; }
  .issue-hero-image { width: 100%; max-height: min(20rem, 50vh); border-radius: 0; box-shadow: none; }
}
.issue-hero-credit {
  font-family: var(--cte-font);
  text-align: center;
}
.issue-hero-credit,
.issue-body figure > figcaption {
  font-size: var(--size-xs, 12px);
  line-height: var(--line-xs, 16px);
  color: var(--cte-text-muted);
  padding: var(--space-xxs, 4px) var(--space-l) 0;
}
.reader { container-type: inline-size; }
.issue-body figure {
  margin: var(--space-xl) 0;
  max-width: none;
}
.issue-body figure img {
  display: block;
  width: 100%;
  height: auto;
}
.issue-body :is(.image-full, .image-row) { width: 100cqw; }
.issue-body .image-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s, 12px);
}
.issue-body .image-row img { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 3; object-fit: cover; }
.issue-body .image-row > figcaption { flex-basis: 100%; padding-inline: 0; }
.issue-body .image-full > figcaption { padding-inline: 0; }
@media (max-width: 760px) {
  /* The pane keeps its --space-l padding on a phone: an image takes it back on both sides, to the screen's edges. */
  .issue-body :is(.image-full, .image-row) { width: calc(100% + 2 * var(--space-l)); margin-inline-start: calc(-1 * var(--space-l)); }
  .issue-body .image-row { flex-direction: column; }
  .issue-body :is(.image-full, .image-row) > figcaption { padding-inline: var(--space-l); }
}

/* A lead magnet's page (plan 2026-11-05-2043): the focus frame with no site navigation (R13), then the marketing page.
   Layout only from the theme's tokens; logical properties, so a right-to-left publication mirrors. */
.magnet-frame { min-height: 100dvh; display: flex; flex-direction: column; }
.magnet-frame-top, .magnet-frame-main, .magnet-frame-foot { width: min(100%, 68rem); margin-inline: auto; padding-inline: var(--space-l); }
.magnet-frame-top { padding-block: var(--space-m); }
.magnet-frame-brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--cte-text); font-weight: 600; text-decoration: none; }
.magnet-frame-main { flex: 1; padding-block-end: var(--space-xxl); }
.magnet-frame-foot { display: flex; gap: var(--space-m); padding-block: var(--space-l); border-block-start: 1px solid var(--cte-border); font-size: var(--size-s); }
.magnet-frame-foot a { color: var(--cte-text-muted); }

.magnet-page { display: flex; flex-direction: column; gap: var(--space-xxl); }
.magnet-page h2 { font-size: var(--size-l); line-height: var(--line-l); margin: 0 0 var(--space-m); }
.magnet-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-xxl); align-items: center; padding-block-start: var(--space-l); }
.magnet-hero-plain { grid-template-columns: minmax(0, 40rem); }
.magnet-hero h1 { font-size: var(--size-xxl); line-height: var(--line-xxl); letter-spacing: var(--letter-spacing-xxl); text-wrap: balance; margin: 0 0 var(--space-m); }
.magnet-lead { font-size: var(--size-m); line-height: var(--line-m); margin: 0 0 var(--space-l); text-wrap: pretty; }
.magnet-note { color: var(--cte-text-muted); font-size: var(--size-s); margin: var(--space-s) 0 0; }
/* Taller than one page (640 by 828) so the tilted cover and the offset page behind it both fit. */
.magnet-stack { position: relative; aspect-ratio: 640 / 900; }
.magnet-stack img { position: absolute; width: 78%; height: auto; border-radius: var(--radius-xs); box-shadow: var(--shadow-l), var(--border-shadow-s); }
.magnet-stack-front { inset-inline-start: 0; inset-block-start: 0; rotate: -2deg; }
.magnet-stack-back { inset-inline-end: 0; inset-block-start: 6%; rotate: 4deg; }
.magnet-ladder p { margin: 0 0 var(--space-xxs); font-size: var(--size-m); line-height: var(--line-m); }
.magnet-ladder .magnet-turn { font-weight: 600; }
.magnet-inside dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-xl); margin: 0; }
.magnet-inside dt { font-weight: 600; margin-block-end: var(--space-xxs); }
.magnet-inside dd { margin: 0; color: var(--cte-text-muted); text-wrap: pretty; }
.magnet-proof { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.magnet-proof-plain { grid-template-columns: minmax(0, 40rem); }
.magnet-proof-page { width: 100%; height: auto; border-radius: var(--radius-xs); box-shadow: var(--shadow-m), var(--border-shadow-s); }
.magnet-proof p, .magnet-for p { font-size: var(--size-m); line-height: var(--line-m); margin: 0 0 var(--space-s); max-width: 40rem; text-wrap: pretty; }
.magnet-check { padding: var(--space-m) var(--space-l); border-radius: var(--radius-s); background: var(--cte-surface-muted); border-inline-start: var(--border-l) solid var(--cte-accent); }
.magnet-close { max-width: 40rem; }
@media (max-width: 52rem) {
  .magnet-hero, .magnet-proof { grid-template-columns: minmax(0, 1fr); }
  .magnet-hero h1 { font-size: var(--size-xl); line-height: var(--line-xl); }
  .magnet-stack { max-width: 22rem; }
  .magnet-inside dl { grid-template-columns: minmax(0, 1fr); }
}