/* 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(--color-5); }

: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;
  }
}

.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;
}

.signup-sidebar {
  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));
  align-self: start;
  width: 22rem;
  height: auto;
  max-height: calc(100vh - 3.5rem - var(--space-l) - var(--space-m));
  overflow: auto;
  background: var(--cte-surface);
  color: var(--cte-text);
  box-shadow: inset var(--border-s) 0 0 var(--cte-border);
}

.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; }
.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 {
  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);
}

.feed-item:has(.feed-title a:hover) { border-color: var(--neutral-5); }

.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: 19px;
  line-height: 30px;
}

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

/* 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); }

.issue-lead {
  font-size: 20px;
  line-height: 32px;
  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);
}

.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(--size-m);
  font-weight: var(--weight-medium);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-s);
  border-style: solid;
  border-width: var(--border-s);
  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(--cte-accent);
  color: var(--cte-accent-text);
  border-color: transparent;
  box-shadow: 0 0 0 var(--border-s) var(--neutral-10-transparent);
}
/* 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(--cte-accent-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: -3px 3px 0 0 var(--color-5); transform: translate(-1px, 1px); }
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]):not(:focus-visible) { box-shadow: 0 0 0 var(--border-s) var(--neutral-10-transparent), var(--shadow-s); }
.btn-primary:focus-visible { box-shadow: 0 0 0 var(--border-s) var(--color-1-transparent); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: var(--neutral-3);
  color: var(--neutral-8);
  box-shadow: 0 0 0 var(--border-s) var(--neutral-4-transparent);
}

.btn-secondary {
  background: var(--cte-surface);
  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(--neutral-4-transparent);
  border-color: var(--neutral-4-transparent);
}
.btn-secondary:focus-visible { border-color: var(--color-1-transparent); }
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  background: var(--neutral-3);
  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(--color-1-transparent); }
.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(--border-s) var(--color-1-transparent); }
.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(--color-1-transparent); }
.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(--color-1);
  box-shadow: 0 0 0 var(--border-s) var(--color-1-transparent);
}
.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(--size-m);
  line-height: var(--line-m);
}
.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(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  color: var(--neutral-10);
}
.field-description {
  color: var(--neutral-7);
  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);
  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(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  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(--size-m);
  font-weight: var(--weight-regular);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  box-shadow: var(--shadow-none);
}
.text-field:hover { border-color: var(--neutral-5); }
.text-field:focus { border-color: var(--color-1-transparent); }
.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(--border-s) solid var(--neutral-4-transparent);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  font-family: var(--font-ui);
  font-size: var(--size-m);
  font-weight: var(--weight-regular);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
}
.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(--border-s) solid var(--neutral-4-transparent);
  border-radius: var(--radius-m);
  padding: var(--space-l);
  box-shadow: var(--shadow-l);
  font-family: var(--font-ui);
  font-size: var(--size-m);
  font-weight: var(--weight-regular);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
}
.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 { 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; }
  .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); }
}

@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. */
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(--neutral-10);
  box-shadow: 0 0 0 var(--border-s) var(--neutral-10-transparent);
}
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(--neutral-10);
    box-shadow: 0 0 0 var(--border-s) var(--neutral-10-transparent);
  }
  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-title a: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 sits above the field and the button; on a phone it falls between them. */
.optin-form.is-row .optin-fields { flex-wrap: wrap; }
.optin-form.is-row .optin-consent { order: -1; 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, #031b1d);
  --band-text: #f1f2ef;
  background: var(--band-bg);
  color: var(--band-text);
}
.optin-bar :is(.text-field) { background: #ffffff; color: #031b1d; }
.optin-bar .btn-primary { background: #0a1414; color: #f1f2ef; box-shadow: 0 0 0 var(--border-s) rgb(241 242 239 / 0.35), var(--shadow-offset); }
.optin-bar .field-error { color: #ffb4bb; }

.optin-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  padding: var(--space-m) var(--space-l);
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.25);
  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: #e9dccf; 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(--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) rgb(241 242 239 / 0.35); }
.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: rgb(255 255 255 / 0.08); }

.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: rgb(3 27 29 / 0.55); }
.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-body { display: none; }
  .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] { animation: none; }
}

/* 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): big, the way the early Hustle posts were. The header runs edge to edge
   across the reading pane above the H1 (16:10); 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 every image is the screen's full width, and a row stacks. A right-to-left
   page mirrors a row's order, since the row follows the page's direction. */
.issue-hero {
  margin: calc(-1 * var(--space-l)) calc(-1 * var(--space-l)) var(--space-l);
}
.issue-hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.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); }
}