@layer cw-base {
/*
! Tailwind CSS Preflight | MIT License | https://tailwindcss.com
*/

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border-color, currentColor);
}

::before,
::after {
  --cw-content: '';
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: var(--border-color, inherit);
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentColor 50%, transparent);
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}
}

@layer cw-base {
/*
! Tailwind CSS Preflight | MIT License | https://tailwindcss.com
*/

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border-color, currentColor);
}

::before,
::after {
  --cw-content: '';
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: var(--border-color, inherit);
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentColor 50%, transparent);
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}
}

@layer cw-base {

:root { 
  --font-masthead: 'UnifrakturMaguntia', 'Playfair Display', Georgia, serif;
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-label: 'Oswald', 'Arial Narrow', ui-sans-serif, sans-serif;
  --font-typewriter: 'Courier New', ui-monospace, monospace;
 }
:root { 
  color-scheme: light;
  background: #f4f0e4;
  --bg: #f4f0e4;
  --panel: #fbf8ef;
  --panel-2: #ece6d6;
  --panel-3: #e2dbc7;
  --line: #cec5ae;
  --ink: #17130f;
  --body: #3a332a;
  --muted: #7b7263;
  --accent: #9c2118;
  --on-accent: #fbf8ef;
 }
html.dark { 
  color-scheme: dark;
  background: #14110d;
  --bg: #14110d;
  --panel: #1d1914;
  --panel-2: #241f19;
  --panel-3: #2d2720;
  --line: #3a332a;
  --ink: #f2ece0;
  --body: #d8d0c0;
  --muted: #9b9284;
  --accent: #d9614f;
  --on-accent: #14110d;
 }
html.marketing { 
  color-scheme: light;
  --bg: #f1ecdd;
  --panel: #f8f4e9;
  --panel-2: #e7e0cd;
  --panel-3: #ddd4bd;
  --line: #c6bca3;
  --ink: #12100c;
  --body: #332d24;
  --muted: #756c5c;
  --accent: #9c2118;
  --on-accent: #f8f4e9;
 }
html.dark body { color: var(--ink); }

}

@layer cw-base {

.dark .bg-blue-50 { background-color: #172554; }
.dark .bg-emerald-50 { background-color: #052e2b; }
.dark .bg-amber-50 { background-color: #3a2a08; }
.dark .bg-red-50 { background-color: #3a1414; }

.dark .bg-zinc-50\/80, .dark .bg-zinc-50\/48 { background-color: #1c1c1f; }
.dark .bg-zinc-50\/40 { background-color: rgba(255, 255, 255, 0.02); }

.dark .border-zinc-200\/80 { border-color: #2a2a2e; }
.dark .border-blue-200 { border-color: #1e3a8a; }
.dark .border-emerald-200 { border-color: #0f766e; }
.dark .border-amber-200 { border-color: #78500a; }
.dark .border-red-200 { border-color: #7f1d1d; }

.dark .text-blue-700, .dark .text-blue-800 { color: #93c5fd; }
.dark .text-emerald-700, .dark .text-emerald-800 { color: #6ee7b7; }
.dark .text-amber-800, .dark .text-amber-700 { color: #fcd34d; }
.dark .text-red-700 { color: #fca5a5; }

.dark .hover\:bg-white:hover { background-color: #26262a; }
.dark .hover\:bg-zinc-50:hover { background-color: #26262a; }
.dark .hover\:bg-zinc-100:hover { background-color: #2f2f34; }
.dark .hover\:text-zinc-900:hover { color: #f4f4f5; }
.dark .hover\:bg-neutral-800:hover { background-color: #d4d4d8; }

.dark .border-zinc-200\/70 { border-color: rgb(63 63 70 / 0.7); }

.dark input, .dark textarea, .dark select { color: #f4f4f5; }
.dark input::placeholder, .dark textarea::placeholder { color: #71717a; }
.dark code { background-color: #26262a; color: #e4e4e7; }

.dark [data-ot-content-shell],
.dark [data-ot-workspace],
.dark [data-ot-sidebar] { background-color: #0a0a0c; }
.dark [data-ot-workspace] {
  border-color: #2a2a2e;
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.4);
}
.dark [data-ot-sidebar] { background-color: rgba(24, 24, 27, 0.5); }
.dark [data-ot-sidebar] > .absolute { opacity: 0.35; }

.dark .bg-\[\#e8e8e6\]\/90 { background-color: rgba(63, 63, 70, 0.6); }
.dark .bg-white\/95 { background-color: rgba(39, 39, 42, 0.95); }
.dark .bg-white\/72 { background-color: rgba(63, 63, 70, 0.72); }
.dark .bg-white\/60 { background-color: rgba(63, 63, 70, 0.6); }
.dark .hover\:bg-white\/38:hover,
.dark .hover\:bg-white\/60:hover,
.dark .hover\:bg-white\/35:hover { background-color: rgba(63, 63, 70, 0.55); }
.dark .bg-white\/48 { background-color: rgba(39, 39, 42, 0.48); }

/* Analytics chart — CSS fill/stroke beat SVG presentation attributes, so the
  chart is not a light island on a dark page. */
.dark [data-analytics-chart] rect[rx="16"] { fill: #101014; }
.dark [data-analytics-chart] line[stroke="#e4e4e7"] { stroke: #2a2a2e; }
.dark [data-analytics-chart] text[fill="#18181b"] { fill: #e4e4e7; }
.dark [data-analytics-chart] rect[fill="#fff"] { fill: #26262a; stroke: #3f3f46; }
.dark [data-analytics-chart] .bg-zinc-100 { background-color: #26262a; }

}

@layer cw-base {

@property --ot-sidebar-width {
  syntax: '<length>';
  inherits: true;
  initial-value: 286px;
}

[data-ot-shell] {
  transition-property: --ot-sidebar-width;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

html.has-native-sidebar,
html.has-native-sidebar body {
  background: transparent !important;
}

html.has-native-sidebar [data-ot-sidebar] {
  background-color: rgba(246, 246, 244, 0.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
  backdrop-filter: blur(24px) saturate(1.08);
}

html.ot-sidebar-collapsed [data-ot-content-shell],
html.has-native-sidebar [data-ot-content-shell],
html.has-native-sidebar [data-ot-workspace] {
  background: #f3f3f1 !important;
}

html.ot-sidebar-collapsed [data-ot-workspace] {
  border-top-left-radius: 0 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

html.ot-sidebar-collapsed [data-ot-sidebar] {
  overflow: visible;
  pointer-events: none;
}

html.ot-sidebar-collapsed [data-shell-controls-row] {
  display: none !important;
}

[data-sidebar-expand-fab] {
  opacity: 0;
  transform: translate3d(-6px, 0, 0) scale(0.94);
  pointer-events: none;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.ot-sidebar-collapsed:not(.has-native-sidebar) [data-sidebar-expand-fab] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

@media (max-width: 1023px) {
  [data-sidebar-expand-fab] { display: none; }

  [data-ot-mobile-nav] {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 28px), transparent);
  }

  [data-ot-mobile-nav]::-webkit-scrollbar { display: none; }
}

[data-ot-app] :is(a, button, [role='button']):focus-visible {
  outline: 2px solid rgb(82 82 91 / 0.6);
  outline-offset: 2px;
}

html.dark.has-native-sidebar [data-ot-content-shell],
html.dark.has-native-sidebar [data-ot-workspace] {
  background: #0a0a0c !important;
}

}

@layer cw-base {

[data-ot-router] { width: 100%; }

[data-ot-page] {
  width: min(100%, 96rem);
  margin-inline: auto;
}

[data-ot-page] > header:first-child {
  min-height: 72px;
  padding: 5px 2px 7px;
}

/*
  Page headings in the workspace are set in the paper's display face, so the
  newsroom is recognisably the same publication as the front page. Body copy and
  controls stay in the UI sans: this surface is read in short bursts at small
  sizes, where a book serif costs legibility for atmosphere.
*/
[data-ot-page] > header:first-child h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Section eyebrows and meta rows across the workspace, matching the front page. */
[data-ot-page] .kicker,
[data-ot-page] .folio,
[data-ot-page] .byline { font-family: var(--font-label); }

[data-ot-page] .rounded-2xl { border-radius: 14px; }
[data-ot-page] .rounded-xl { border-radius: 10px; }
[data-ot-page] .rounded-lg { border-radius: 8px; }

[data-ot-page] .shadow-sm {
  box-shadow: 0 1px 2px rgb(24 24 27 / 0.035), 0 8px 24px rgb(24 24 27 / 0.025);
}

[data-ot-page] :is(a, button, summary) {
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-ot-page] :is(button, summary):active,
[data-ot-page] a:active { transform: translateY(1px); }

[data-ot-page] :is(input, textarea, select) { border-radius: 10px; }

.dark .bg-white { background-color: var(--panel); }
.dark .hover:bg-white:hover { background-color: var(--panel-3); }

@media (max-width: 640px) {
  [data-ot-router] { padding: 12px; }
  [data-ot-page] { gap: 12px; }
  [data-ot-page] > header:first-child { min-height: auto; padding: 2px 1px 5px; }
  [data-ot-page] > header:first-child h1 { font-size: 21px; }
}

}

@layer cw-base {

[data-view-toggle] { color: var(--muted); }
[data-view-toggle][data-active] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

[data-status-pill] { color: var(--muted); background: var(--panel-3); border-color: var(--line); }
[data-status-pill][data-status="published"] { color: rgb(4 120 87); background: rgb(236 253 245); border-color: rgb(167 243 208); }
[data-status-pill][data-status="scheduled"] { color: rgb(29 78 216); background: rgb(239 246 255); border-color: rgb(191 219 254); }
[data-status-pill][data-status="publishing"] { color: rgb(146 64 14); background: rgb(255 251 235); border-color: rgb(253 230 138); }
[data-status-pill][data-status="failed"] { color: rgb(185 28 28); background: rgb(254 242 242); border-color: rgb(254 202 202); }
html.dark [data-status-pill][data-status="published"] { color: rgb(110 231 183); background: rgb(6 78 59 / 0.3); border-color: rgb(6 78 59); }
html.dark [data-status-pill][data-status="scheduled"] { color: rgb(147 197 253); background: rgb(30 58 138 / 0.3); border-color: rgb(30 58 138); }
html.dark [data-status-pill][data-status="publishing"] { color: rgb(252 211 77); background: rgb(120 53 15 / 0.3); border-color: rgb(120 53 15); }
html.dark [data-status-pill][data-status="failed"] { color: rgb(252 165 165); background: rgb(127 29 29 / 0.3); border-color: rgb(127 29 29); }

[data-cal-dot] { background: rgb(161 161 170); }
[data-cal-dot][data-status="published"] { background: rgb(16 185 129); }
[data-cal-dot][data-status="failed"] { background: rgb(239 68 68); }
[data-cal-dot][data-status="scheduled"] { background: rgb(59 130 246); }

[data-cal-cell] { background: var(--panel); }
[data-cal-cell][data-blank] { background: var(--panel-2); }
[data-cal-cell][data-today] { background: rgb(239 246 255 / 0.6); }
html.dark [data-cal-cell][data-today] { background: rgb(30 58 138 / 0.2); }
[data-cal-day] { color: var(--muted); }
[data-cal-cell][data-today] [data-cal-day] { color: rgb(29 78 216); }
html.dark [data-cal-cell][data-today] [data-cal-day] { color: rgb(147 197 253); }

}

@layer cw-base {

[data-theme-option] { color: var(--muted); }
[data-theme-option][data-active] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
[data-bluesky-pill] { border-color: var(--line); color: var(--muted); }
[data-bluesky-pill][data-state="ready"] {
  border-color: rgb(167 243 208); background: rgb(236 253 245); color: rgb(4 120 87);
}
[data-bluesky-pill][data-state="setup"] {
  border-color: rgb(253 230 138); background: rgb(255 251 235); color: rgb(146 64 14);
}
html.dark [data-bluesky-pill][data-state="ready"] {
  border-color: rgb(6 78 59); background: rgb(6 78 59 / 0.3); color: rgb(110 231 183);
}
html.dark [data-bluesky-pill][data-state="setup"] {
  border-color: rgb(120 53 15); background: rgb(120 53 15 / 0.3); color: rgb(252 211 77);
}

}

@layer cw-base {

[data-provider-toggle] { border-color: var(--line); background: var(--panel-2); color: var(--muted); }
[data-provider-toggle]:not([disabled]):hover { background: #ffffff; }
[data-provider-toggle][data-selected] { border-color: #0a0a0a; background: var(--accent); color: var(--on-accent); }
[data-provider-toggle][disabled] { color: #a1a1aa; cursor: not-allowed; }

[data-provider-toggle] [data-provider-dot] { background: #d4d4d8; }
[data-provider-toggle][data-selected] [data-provider-dot] { background: #34d399; }
[data-provider-toggle][data-over] [data-provider-dot] { background: #ef4444; }

html.dark [data-provider-toggle]:not([disabled]):hover { background: #26262a; }
html.dark [data-provider-toggle][disabled] { color: #52525b; }

}

@layer cw-base {

html.marketing {
  font-family: var(--font-body);
  font-size: 17px;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/*
  Every heading on the front page is set in the display face. Done here rather
  than by adding a 'font-display' class to forty headings, and scoped to
  html.marketing so the workspace keeps its own type ramp.
*/
html.marketing :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/*
  The markup labels kickers, indices and section eyebrows with 'font-mono'.
  Rather than rewrite every one of them, the class is redefined as what a
  newspaper puts in that slot: condensed gothic, small, letterspaced. The two
  places that want a genuine typewriter face ask for '.font-typewriter'.
*/
html.marketing .font-mono {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.14em;
}

html.marketing .font-typewriter { font-family: var(--font-typewriter); letter-spacing: 0; }

html.marketing body { background-color: var(--bg); color: var(--ink); }

html.marketing ::selection { background: var(--accent); color: var(--on-accent); }

html.marketing :where(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.marketing .reveal {
      opacity: 0;
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}

/* Providers marquee — track holds two identical halves; -50% loops seamlessly. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.marketing .marquee-track { animation: marquee 32s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  html.marketing { scroll-behavior: auto; }
  html.marketing .marquee-track { animation: none; }
}

}

@layer cw-base {

html.marketing :where(
  .rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl,
  .rounded-2xl, .rounded-3xl, .rounded-full
) { border-radius: 0 !important; }

html.marketing :where(a, button):focus-visible { border-radius: 0; }

/*
  The tooth of the stock. Two offset dot grids at very low alpha read as
  halftone at 100% zoom and as texture when you lean in — enough to stop the
  background being a flat fill, cheap enough to be a gradient rather than an
  image request.
*/
html.marketing body {
  background-image:
    radial-gradient(circle at 1px 1px, rgb(23 19 15 / 0.045) 1px, transparent 0),
    radial-gradient(circle at 3px 4px, rgb(23 19 15 / 0.025) 1px, transparent 0);
  background-size: 6px 6px, 7px 7px;
  background-attachment: fixed;
}

/* The nameplate. Blackletter, tight, and never below 28px — see FACES. */
.masthead {
  font-family: var(--font-masthead);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.94;
}

/*
  The rules. A newspaper separates blocks with printed lines of specific
  weights, not with shadows or panels: a hairline inside a story, a thick rule
  under the nameplate, a double rule around the dateline strip.
*/
.rule-thin { border-top: 1px solid var(--line); }
.rule-thick { border-top: 3px solid var(--ink); }
.rule-double {
  border-top: 1px solid var(--ink);
  box-shadow: 0 3px 0 -1px var(--ink);
}

/*
  The folio strip: volume, date, edition. All-caps condensed at small size,
  which is exactly what it is on a real front page.
*/
.folio {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--body);
}

/* A kicker sits above a headline and names the section. */
.kicker {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The deck is the italic sub-headline under a lede. */
.deck {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--body);
}

/* The byline rule: a hairline above a small-caps attribution line. */
.byline {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/*
  Drop cap on the lede.

  Deliberately the float implementation and NOT 'initial-letter'. The latter is
  the typographically correct property, but inside a multi-column container
  Chrome reserves a line box the full height of the sunk letter and then leaves
  it empty - the lede rendered with roughly 900px of blank between its first and
  second lines. The float sinks the same three lines with no such interaction.
*/
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--ink);
}

/*
  Text columns with a printed gutter rule between them, the way a broadsheet
  sets running copy. Single column below 'md' — two 40-character columns on a
  phone would be unreadable.
*/
.columns-print { column-gap: 2.25rem; column-rule: 1px solid var(--line); }
@media (min-width: 768px) { .columns-print { column-count: 2; } }
@media (min-width: 1280px) { .columns-print-3 { column-count: 3; } }
.columns-print > :first-child { margin-top: 0; }

/*
  Ink-block button: solid, square, letterspaced caps. The hover state lifts the
  ink slightly rather than changing hue, because the palette has exactly one
  chromatic value and it is spoken for.
*/
.ink-button {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  transition: background-color 150ms ease, color 150ms ease;
}
.ink-button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.ink-button--ghost { background: transparent; color: var(--ink); }
.ink-button--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/*
  Links inside running copy get the underline a printed paper cannot have but a
  reader now expects.

  Restricted to links inside a paragraph or list item. A bare '.copy a' scores
  (0,2,1) and so beat '.ink-button' (0,1,0) on specificity — which painted the
  hero's primary button ink-on-ink and underlined its label. Buttons live in
  their own wrapper rather than in running text, so this bound excludes them by
  structure rather than by an :not() list that would need maintaining.
*/
html.marketing .copy :is(p, li) a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
html.marketing .copy :is(p, li) a:hover { color: var(--accent); }

}

@layer cw-base {

html.marketing .menu-item { position: static; }

html.marketing .menu-panel {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.18s;
}

html.marketing .menu-item:hover .menu-panel,
html.marketing .menu-item:focus-within .menu-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

html.marketing .menu-chevron {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

html.marketing .menu-item:hover .menu-chevron,
html.marketing .menu-item:focus-within .menu-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  html.marketing .menu-panel,
  html.marketing .menu-chevron {
    transition: none;
    transform: none;
  }
}

}

.grid {
  display: grid;
}

.place-items-center {
  place-items: center;
}

.min-h-screen {
  min-height: 100vh;
}

.bg-bg {
  background-color: var(--bg);
}

.gap-5 {
  gap: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.max-w-sm {
  max-width: 24rem;
}

.w-full {
  width: 100%;
}

.bg-panel {
  background-color: var(--panel);
}

.border {
  border-width: 1px;
}

.border-line {
  border-color: var(--line);
}

.rounded-2xl {
  border-radius: 1rem;
}

.shadow-sm {
  --cw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --cw-shadow-colored: 0 1px 3px 0 var(--cw-shadow-color), 0 1px 2px -1px var(--cw-shadow-color);
  box-shadow: var(--cw-ring-offset-shadow, 0 0 #0000), var(--cw-ring-shadow, 0 0 #0000), var(--cw-shadow);
}

.gap-2 {
  gap: 0.5rem;
}

.justify-items-center {
  justify-items: center;
}

.text-center {
  text-align: center;
}

.font-bold {
  font-weight: 700;
}

.text-ink {
  color: var(--ink);
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.border-ink {
  border-color: var(--ink);
}

.m-0 {
  margin: 0;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-muted {
  color: var(--muted);
}

.gap-3 {
  gap: 0.75rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.h-10 {
  height: 2.5rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.outline-none {
  outline-style: none;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.focus\:border-blue-500:focus {
  border-color: oklch(62.3% 0.214 259.815);
}

.focus\:ring-2:focus {
  --cw-ring-offset-shadow: var(--cw-ring-inset,) 0 0 0 var(--cw-ring-offset-width, 0px) var(--cw-ring-offset-color, #fff);
  --cw-ring-shadow: var(--cw-ring-inset,) 0 0 0 calc(2px + var(--cw-ring-offset-width, 0px)) var(--cw-ring-color, rgba(59, 130, 246, 0.5));
  box-shadow: var(--cw-ring-offset-shadow), var(--cw-ring-shadow), var(--cw-shadow, 0 0 #0000);
}

.focus\:ring-blue-100:focus {
  --cw-ring-color: oklch(93.2% 0.032 255.585);
}

.text-red-700 {
  color: oklch(50.5% 0.213 27.518);
}

.inline-flex {
  display: inline-flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.text-on-accent {
  color: var(--on-accent);
}

.bg-accent {
  background-color: var(--accent);
}

.hover\:bg-neutral-800:hover {
  background-color: oklch(26.9% 0 0);
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.underline {
  text-decoration-line: underline;
}

.hover\:text-body:hover {
  color: var(--body);
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.border-y-2 {
  border-top-width: 2px;
  border-bottom-width: 2px;
}