/* Courtelier — single stylesheet
   Plain CSS, mobile-first, custom properties, no framework. */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --color-ink:        #1A1A1A;
  --color-ink-soft:   #4A4A47;
  --color-ink-mute:   #8A8A85;
  --color-line:       #E8E2D6;
  --color-bg:         #FFFFFF;
  --color-bg-sunken:  #F7F4EE;
  --color-accent:     #C8923A;
  --color-accent-ink: #FFFFFF;
  --color-focus:      #0066CC;

  --font-display: 'Red Hat Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --text-xs:   clamp(0.75rem,  1.2vw + 0.4rem, 0.8125rem);
  --text-sm:   clamp(0.875rem, 1.4vw + 0.5rem, 0.9375rem);
  --text-base: clamp(1rem,     1vw + 0.75rem,  1.125rem);
  --text-lg:   clamp(1.125rem, 1.4vw + 0.85rem, 1.375rem);
  --text-h4:   clamp(1.25rem,  1.5vw + 0.85rem, 1.5rem);
  --text-h3:   clamp(1.5rem,   2vw + 1rem,     2rem);
  --text-h2:   clamp(1.75rem,  2.5vw + 1rem,   2.5rem);
  --text-h1:   clamp(2rem,     3vw + 1.4rem,   3.5rem);

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-body:   1.7;

  --tracking-tight: -0.025em;
  --tracking-wide:  0.12em;

  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem; --s-9: 6rem;

  --container:    min(100% - 2rem, 1280px);
  --container-md: min(100% - 2rem, 1024px);
  --container-sm: min(100% - 2rem,  720px);

  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(26,26,26,0.04), 0 8px 24px rgba(26,26,26,0.04);
  --transition: 200ms cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ink:        #F2EEE4;
    --color-ink-soft:   #C8C3B5;
    --color-ink-mute:   #8A8A85;
    --color-line:       #2A2823;
    --color-bg:         #15140F;
    --color-bg-sunken:  #1F1D17;
    --color-accent:     #D4A24A;
    --color-accent-ink: #15140F;
    --color-focus:      #4D9FFF;
  }
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
input, button, textarea, select {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }
ol, ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.container    { width: var(--container);    margin-inline: auto; }
.container--md{ width: var(--container-md); margin-inline: auto; }
.container--sm{ width: var(--container-sm); margin-inline: auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-ink); color: var(--color-bg);
  padding: var(--s-3) var(--s-5);
  font-weight: 500;
  z-index: 1000;
}
.skip-link:focus { left: var(--s-3); top: var(--s-3); outline: 2px solid var(--color-accent); outline-offset: 2px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.eyebrow__cat { color: var(--color-accent); transition: color var(--transition); }
.eyebrow__cat:hover, .eyebrow__cat:focus-visible { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }
.eyebrow__sep { color: var(--color-line); }

/* ─── Masthead ───────────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(150%) blur(8px);
}
.masthead__inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
}
.masthead__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.masthead__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.masthead__tagline {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
}
.masthead__nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
}
.masthead__nav a {
  position: relative;
  padding: var(--s-2) 0;
  transition: color var(--transition);
}
.masthead__nav a:hover, .masthead__nav a:focus-visible { color: var(--color-accent); }
.masthead__menu-trigger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-ink);
  cursor: pointer;
}
.masthead__menu-icon {
  position: relative;
  width: 22px; height: 14px;
  display: inline-block;
}
.masthead__menu-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.masthead__menu-icon span:nth-child(1) { top: 0; }
.masthead__menu-icon span:nth-child(2) { top: 6px; }
.masthead__menu-icon span:nth-child(3) { top: 12px; }
.masthead__menu-trigger[aria-expanded="true"] .masthead__menu-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.masthead__menu-trigger[aria-expanded="true"] .masthead__menu-icon span:nth-child(2) { opacity: 0; }
.masthead__menu-trigger[aria-expanded="true"] .masthead__menu-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 768px) {
  .masthead__nav { display: none; }
  .masthead__menu-trigger { display: inline-flex; }
}

/* ─── Drawer (mobile slide-out) ──────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--transition);
}
.drawer-backdrop:not([hidden]) { opacity: 1; }
.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(85vw, 380px);
  background: var(--color-bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.15);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer:not([hidden]) {
  transform: translateX(0);
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--color-line);
  position: sticky; top: 0;
  background: var(--color-bg);
  z-index: 1;
}
.drawer__brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}
.drawer__close {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  cursor: pointer;
}
.drawer__close:hover, .drawer__close:focus-visible { color: var(--color-accent); }
.drawer__nav {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.drawer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--s-5);
}
.drawer__nav li + li { border-top: 1px solid var(--color-line); }
.drawer__nav a {
  display: block;
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  transition: color var(--transition);
}
.drawer__nav a:hover, .drawer__nav a:focus-visible { color: var(--color-accent); }
.drawer__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
  margin-block: var(--s-3) var(--s-2);
}
body.drawer-open {
  overflow: hidden;
}

/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */
.breadcrumbs {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
}
.breadcrumbs__item { display: inline-flex; gap: var(--s-2); align-items: center; }
.breadcrumbs__item a { transition: color var(--transition); }
.breadcrumbs__item a:hover, .breadcrumbs__item a:focus-visible { color: var(--color-accent); }
.breadcrumbs__sep { color: var(--color-line); }
.breadcrumbs__item [aria-current="page"] {
  color: var(--color-ink);
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  padding-block: var(--s-7) var(--s-6);
  border-bottom: 1px solid var(--color-line);
}
.hero__inner {
  display: grid;
  gap: var(--s-6);
}
.hero__media {
  display: block;
  overflow: hidden;
  background: var(--color-bg-sunken);
  aspect-ratio: 21 / 9;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease, filter var(--transition);
}
.hero__media:hover img, .hero__media:focus-visible img {
  transform: scale(1.02);
  filter: saturate(1.05);
}
.hero__copy { max-width: 880px; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--s-2) var(--s-4);
}
.hero__title a { transition: color var(--transition); }
.hero__title a:hover, .hero__title a:focus-visible { color: var(--color-accent); }
.hero__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin-bottom: var(--s-5);
}
.hero__byline {
  font-size: var(--text-sm);
  color: var(--color-ink-mute);
}
.hero__byline a { color: var(--color-ink); }
.hero__byline a:hover, .hero__byline a:focus-visible { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .hero__media { aspect-ratio: 4 / 3; }
}

/* ─── Category strip ─────────────────────────────────────────────────────── */
.catstrip {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}
.catstrip__inner { padding-block: var(--s-3); }
.catstrip__list {
  display: flex;
  gap: var(--s-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.catstrip__list::-webkit-scrollbar { display: none; }
.catstrip__item {
  scroll-snap-align: start;
  flex-shrink: 0;
}
.catstrip__item a {
  display: inline-block;
  padding: var(--s-3) 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-top: 2px solid transparent;
  margin-top: -2px;
  transition: border-color var(--transition), color var(--transition);
}
.catstrip__item a:hover,
.catstrip__item a:focus-visible {
  color: var(--color-accent);
  border-top-color: var(--color-accent);
}

/* ─── Sections ───────────────────────────────────────────────────────────── */
.section { padding-block: var(--s-8); }
.section--related { padding-block: var(--s-7); border-top: 1px solid var(--color-line); }
.section__header { margin-bottom: var(--s-6); max-width: 60ch; }
.section__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.section__sub {
  margin-top: var(--s-2);
  color: var(--color-ink-soft);
  font-size: var(--text-base);
}

/* ─── Grids ──────────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--s-6);
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--s-7);
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.card__media {
  display: block;
  overflow: hidden;
  background: var(--color-bg-sunken);
  aspect-ratio: 16 / 10;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease, filter var(--transition);
}
.card:hover .card__media img,
.card:focus-within .card__media img {
  transform: scale(1.03);
  filter: saturate(1.05);
}
.card__body { display: flex; flex-direction: column; gap: var(--s-3); }
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.card__title--feature { font-size: var(--text-h3); font-weight: 700; }
.card__title a { transition: color var(--transition); }
.card__title a:hover, .card__title a:focus-visible { color: var(--color-accent); }
.card__lede {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__byline {
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: auto;
}

/* ─── Article ────────────────────────────────────────────────────────────── */
.article__hero { padding-block: var(--s-6) var(--s-5); }
.article__cover {
  margin-bottom: var(--s-6);
  aspect-ratio: 21 / 9;
  background: var(--color-bg-sunken);
  overflow: hidden;
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) {
  .article__cover { aspect-ratio: 4 / 3; }
}
.article__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  margin-block: var(--s-2) var(--s-5);
}
.article__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin-bottom: var(--s-6);
}
.article__byline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--color-ink-mute);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--s-4);
  max-width: 720px;
}
.article__byline a { color: var(--color-ink); }
.article__byline a:hover, .article__byline a:focus-visible { color: var(--color-accent); }
.article__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-sunken);
}

.article__body {
  padding-block: var(--s-7);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}
.article__body > * + * { margin-top: var(--s-5); }
.article__body p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.article__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--s-7) !important;
  margin-bottom: var(--s-4);
}
.article__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  margin-top: var(--s-6) !important;
}
.article__body ul, .article__body ol {
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li { padding-left: var(--s-2); }
.article__body a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}
.article__body a:hover, .article__body a:focus-visible { color: var(--color-accent); }
.article__body blockquote {
  border-left: 2px solid var(--color-accent);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  margin-block: var(--s-7);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
.article__body img {
  margin-block: var(--s-6);
  width: 100%;
  background: var(--color-bg-sunken);
}
.article__body strong { font-weight: 700; }
.article__body em { font-style: italic; }

/* ─── Author card ────────────────────────────────────────────────────────── */
.author-card {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg-sunken);
  padding-block: var(--s-7);
  margin-top: var(--s-6);
}
.author-card__inner {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
}
.author-card__avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--color-bg);
}
.author-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  margin-block: var(--s-1) var(--s-3);
}
.author-card__name a:hover, .author-card__name a:focus-visible { color: var(--color-accent); }
.author-card__bio {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-width: 60ch;
}
@media (max-width: 540px) {
  .author-card__inner { flex-direction: column; }
}

/* ─── Ad zones ───────────────────────────────────────────────────────────── */
.ad-zone {
  display: flex;
  justify-content: center;
  padding-block: var(--s-5);
  background: var(--color-bg);
}
.ad-zone__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
  width: var(--container);
  max-width: 970px;
  padding: var(--s-5) var(--s-6);
  border: 1px dashed var(--color-line);
  background: var(--color-bg-sunken);
  color: var(--color-ink);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.ad-zone__cta:hover, .ad-zone__cta:focus-visible {
  background: var(--color-bg);
  border-color: var(--color-accent);
}
.ad-zone__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
}
.ad-zone__pitch {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw + 0.6rem, 1.25rem);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  max-width: 50ch;
}
.ad-zone__action {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
}
.ad-zone--in-article {
  margin-block: var(--s-7);
}
.ad-zone--in-article .ad-zone__placeholder {
  max-width: 680px;
}

/* ─── Newsletter ─────────────────────────────────────────────────────────── */
.newsletter {
  background: var(--color-bg-sunken);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--s-8);
}
.newsletter__inner {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 880px) {
  .newsletter__inner { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}
.newsletter__copy { max-width: 50ch; }
.newsletter__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--s-2) var(--s-3);
}
.newsletter__lede {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
}
.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 540px) {
  .newsletter__form { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .newsletter__field { flex: 1 1 240px; }
}
.newsletter__honeypot {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.newsletter__field input {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-base);
  min-height: 48px;
}
.newsletter__field input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.newsletter__flash { width: 100%; min-height: 1.5rem; margin-top: var(--s-2); }
.flash {
  font-size: var(--text-sm);
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--color-accent);
}
.flash--error { border-left-color: #B23A3A; color: #6B1F1F; }
.flash--success { border-left-color: var(--color-accent); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  min-height: 48px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: 1px solid var(--color-ink);
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn:hover, .btn:focus-visible {
  background: var(--color-ink);
  color: var(--color-bg);
}
.btn--primary {
  background: var(--color-ink);
  color: var(--color-bg);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn--ghost { border-color: var(--color-line); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  background: var(--color-ink);
  color: var(--color-bg);
  padding-block: var(--s-8) var(--s-5);
}
.footer__inner {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer__col--brand { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .footer__col--brand { grid-column: auto; }
}
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
}
.footer__tagline { color: rgba(247,244,238,0.6); margin-top: var(--s-2); font-size: var(--text-sm); }
.footer__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: rgba(247,244,238,0.6);
  margin-bottom: var(--s-3);
}
.footer__list { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__list a {
  color: var(--color-bg);
  font-size: var(--text-sm);
  transition: color var(--transition);
  display: inline-block;
  padding: 4px 0;
}
.footer__list a:hover, .footer__list a:focus-visible { color: var(--color-accent); }
.footer__bottom {
  border-top: 1px solid rgba(247,244,238,0.12);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  font-size: var(--text-xs);
  color: rgba(247,244,238,0.6);
}
.footer__bottom a { color: var(--color-bg); border-bottom: 1px solid var(--color-accent); }

/* ─── Back to top + cookie consent ───────────────────────────────────────── */
.back-to-top {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  width: 44px; height: 44px;
  border: 1px solid var(--color-ink);
  background: var(--color-bg);
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  z-index: 40;
  transition: opacity var(--transition);
  box-shadow: var(--shadow-soft);
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover, .back-to-top:focus-visible {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* Cookie banner is locked to a dark theme regardless of prefers-color-scheme
   so button contrast stays predictable. All values are hard-coded hex. */
.cookie-consent {
  position: fixed;
  left: var(--s-5);
  right: var(--s-5);
  bottom: var(--s-5);
  max-width: 520px;
  background: #1A1A1A;
  color: #F7F4EE;
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  z-index: 50;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  font-size: var(--text-sm);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent a { color: #C8923A; text-decoration: underline; }
.cookie-consent a:hover, .cookie-consent a:focus-visible { color: #F7F4EE; }
.cookie-consent__copy { line-height: var(--leading-normal); flex: 1 1 220px; margin: 0; }
.cookie-consent__actions {
  display: flex;
  gap: var(--s-2);
  flex-shrink: 0;
}
.cookie-consent .btn {
  flex-shrink: 0;
  min-height: 38px;
  padding: var(--s-2) var(--s-4);
  font-size: var(--text-xs);
  border-width: 1px;
  border-style: solid;
}
.cookie-consent .btn--ghost {
  border-color: rgba(247,244,238,0.5);
  color: #F7F4EE;
  background: transparent;
}
.cookie-consent .btn--ghost:hover, .cookie-consent .btn--ghost:focus-visible {
  border-color: #F7F4EE;
  background: transparent;
  color: #F7F4EE;
}
.cookie-consent .btn--primary {
  background: #F7F4EE;
  color: #1A1A1A;
  border-color: #F7F4EE;
}
.cookie-consent .btn--primary:hover, .cookie-consent .btn--primary:focus-visible {
  background: #C8923A;
  border-color: #C8923A;
  color: #FFFFFF;
}

/* ─── Error pages ────────────────────────────────────────────────────────── */
.errorpage__inner {
  text-align: center;
  padding-block: var(--s-9);
}
.errorpage__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 7rem);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--s-4);
}
.errorpage__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  margin-bottom: var(--s-4);
}
.errorpage__lede {
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  margin-inline: auto;
  margin-bottom: var(--s-6);
  max-width: 50ch;
}

/* ─── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding-block: var(--s-8);
  color: var(--color-ink-soft);
}
.empty-state h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  color: var(--color-ink);
  margin-bottom: var(--s-3);
}

/* ─── Archive (category / author / search) ───────────────────────────────── */
.archive-hero {
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--s-7) var(--s-6);
  background: var(--color-bg);
}
.archive-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--s-2) var(--s-4);
}
.archive-hero__lede {
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  max-width: 60ch;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.pagination__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  padding: var(--s-3) 0;
  transition: color var(--transition);
}
.pagination__link:hover, .pagination__link:focus-visible {
  color: var(--color-accent);
}
.pagination__link--disabled {
  pointer-events: none;
  opacity: 0;
}
.pagination__current {
  color: var(--color-ink-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
}

/* ─── Content-page extensions (about / advertise / legal) ────────────────── */
.article__body dl {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: var(--s-2) var(--s-5);
  margin-block: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--color-bg-sunken);
  border-left: 2px solid var(--color-accent);
}
.article__body dt {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
  padding-top: 3px;
}
.article__body dd {
  color: var(--color-ink);
  margin: 0;
}
.article__body code {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: 1px 6px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
}
.ad-package {
  border-top: 1px solid var(--color-line);
  padding-top: var(--s-6);
  margin-top: var(--s-6) !important;
}
.ad-package h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--s-2) var(--s-3) !important;
}
.ad-package__rate {
  color: var(--color-ink-mute);
  font-weight: 400;
  font-size: var(--text-sm);
  margin-left: var(--s-2);
}
.article__cta {
  margin-top: var(--s-7) !important;
  padding-top: var(--s-6);
  border-top: 1px solid var(--color-line);
}

/* ─── Admin shell + pages (adm = admin) ──────────────────────────────────── */
.page--admin .masthead, .page--admin .catstrip, .page--admin .breadcrumbs,
.page--admin .newsletter, .page--admin .footer, .page--admin .cookie-consent,
.page--admin .back-to-top { display: none !important; }
.page--admin { background: var(--color-bg-sunken); }
.page--admin .main { padding: 0; }

.adm {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
@media (max-width: 880px) {
  .adm { grid-template-columns: 1fr; }
}

/* Sidebar */
.adm__sidebar {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  position: sticky;
  top: 0;
  height: 100vh;
}
@media (max-width: 880px) {
  .adm__sidebar {
    position: relative;
    height: auto;
    padding: var(--s-4) var(--s-5);
    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
    overflow-x: auto;
  }
}
.adm__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-bg);
  text-decoration: none;
  border-bottom: 1px solid rgba(247,244,238,0.1);
  padding-bottom: var(--s-5);
}
.adm__brand-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  line-height: 1;
}
.adm__brand-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  font-weight: 500;
}
@media (max-width: 880px) {
  .adm__brand { border: 0; padding: 0; flex-shrink: 0; }
}

.adm__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
@media (max-width: 880px) {
  .adm__nav { flex-direction: row; gap: var(--s-2); }
}
.adm__nav-link {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(247,244,238,0.7);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.adm__nav-link:hover {
  color: var(--color-bg);
  background: rgba(247,244,238,0.04);
}
.adm__nav-link.is-active {
  color: var(--color-bg);
  background: rgba(200,146,58,0.15);
  border-left: 3px solid var(--color-accent);
  padding-left: calc(var(--s-4) - 3px);
}
@media (max-width: 880px) {
  .adm__nav-link.is-active { border-left: 0; border-bottom: 2px solid var(--color-accent); padding-left: var(--s-4); padding-bottom: calc(var(--s-3) - 2px); }
}

.adm__sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(247,244,238,0.1);
}
@media (max-width: 880px) {
  .adm__sidebar-foot { flex-direction: row; border-top: 0; padding-top: 0; margin-left: auto; }
}
.adm__sidebar-link {
  font-size: var(--text-sm);
  color: rgba(247,244,238,0.6);
  text-decoration: none;
  padding: var(--s-2) 0;
  transition: color var(--transition);
}
.adm__sidebar-link:hover { color: var(--color-accent); }

/* Main area */
.adm__main {
  background: var(--color-bg);
  padding: var(--s-7) var(--s-7);
  min-width: 0;
}
@media (max-width: 720px) {
  .adm__main { padding: var(--s-5) var(--s-5); }
}

.adm__head {
  margin-bottom: var(--s-7);
}
.adm__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
  margin-bottom: var(--s-3);
}
.adm__crumbs a { color: var(--color-ink-mute); text-decoration: none; }
.adm__crumbs a:hover { color: var(--color-accent); }
.adm__head-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--color-line);
}
.adm__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0;
}
.adm__subtitle {
  font-size: var(--text-sm);
  color: var(--color-ink-mute);
  margin-top: var(--s-2);
}
.adm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.adm__action-form { margin: 0; }
.adm__actions .btn {
  font-size: var(--text-xs);
  min-height: 36px;
  padding: var(--s-2) var(--s-4);
}
.adm__flash {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--color-bg-sunken);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-sm);
}
.adm__flash--error { border-left-color: #B23A3A; color: #6B1F1F; }
.adm__body { display: flex; flex-direction: column; gap: var(--s-7); }

/* Overview cards */
.adm-card-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.adm-card {
  display: block;
  padding: var(--s-5);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition);
}
.adm-card:hover, .adm-card:focus-visible {
  border-color: var(--color-ink);
}
.adm-card__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
  margin-bottom: var(--s-3);
}
.adm-card__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-3);
}
.adm-card__delta {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.adm-intent-row {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.adm-intent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition);
}
.adm-intent:hover { border-color: var(--color-ink); }
.adm-intent__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
}
.adm-intent__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}

/* Section blocks */
.adm-section { display: flex; flex-direction: column; gap: var(--s-4); }
.adm-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}
.adm-section__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  letter-spacing: -0.02em;
  margin: 0;
}
.adm-section__link {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  text-decoration: none;
  font-weight: 500;
}
.adm-section__link:hover { color: var(--color-accent); }

.adm-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
}
.adm-list-row {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--color-line);
}
.adm-list-row:last-child { border-bottom: 0; }
.adm-list-row__time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums;
}
.adm-list-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--color-ink);
}
.adm-list-row__main:hover { color: var(--color-accent); }
.adm-list-row__primary { font-weight: 500; font-size: var(--text-sm); }
.adm-list-row__meta { font-size: var(--text-xs); color: var(--color-ink-mute); }

/* Stats bar */
.adm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.adm-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  text-decoration: none;
  color: var(--color-ink);
  min-width: 100px;
  transition: border-color var(--transition), background var(--transition);
}
.adm-stat:hover { border-color: var(--color-ink); }
.adm-stat--active {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}
.adm-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  opacity: 0.7;
}
.adm-stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
}

/* Search bar */
.adm-search {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--color-line);
}
.adm-search__input {
  flex: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: var(--s-2) var(--s-3);
  min-height: 40px;
  font-size: var(--text-sm);
  font-family: var(--font-body);
}
.adm-search__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-ink); }
.adm-search__clear { font-size: var(--text-sm); color: var(--color-ink-mute); text-decoration: none; padding: var(--s-2); }
.adm-search__clear:hover { color: var(--color-accent); }

/* Table */
.adm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
}
.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.adm-table thead { background: var(--color-bg-sunken); border-bottom: 1px solid var(--color-line); }
.adm-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--color-ink-mute);
  padding: var(--s-3) var(--s-4);
  white-space: nowrap;
}
.adm-table td { padding: var(--s-3) var(--s-4); vertical-align: middle; border-bottom: 1px solid var(--color-line); }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover { background: var(--color-bg-sunken); }
.adm-table a { color: var(--color-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.adm-table a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.adm-table__time { white-space: nowrap; }
.adm-row-link { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: var(--color-ink-mute) !important; }
.adm-row-link:hover { color: var(--color-accent) !important; }

.adm-actions-cell {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.adm-inline-form { margin: 0; }
.adm-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--color-ink-mute);
  cursor: pointer;
  font-family: inherit;
}
.adm-link-btn:hover { color: var(--color-accent); text-decoration: underline; }
.adm-link-btn--danger:hover { color: #B23A3A; }

/* Tags */
.adm-tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 2px 8px;
  border: 1px solid currentColor;
}
.adm-tag--read         { color: #2a5d8f; }
.adm-tag--advertise    { color: #8c5a1a; }
.adm-tag--contribute   { color: #2f6c3a; }
.adm-tag--other        { color: var(--color-ink-mute); }
.adm-tag--new          { color: #2a5d8f; }
.adm-tag--reviewing    { color: #8c5a1a; }
.adm-tag--accepted     { color: #2f6c3a; }
.adm-tag--declined     { color: #8b2a2a; }
.adm-tag--published    { color: #2f6c3a; background: rgba(47,108,58,0.08); }
.adm-tag--confirmed    { color: #2f6c3a; }
.adm-tag--pending      { color: #8c5a1a; }
.adm-tag--unsubscribed { color: var(--color-ink-mute); }

/* Detail / pane */
.adm-detail {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .adm-detail { grid-template-columns: 1fr 280px; }
}
.adm-detail__main { display: flex; flex-direction: column; gap: var(--s-6); }
.adm-detail__side { display: flex; flex-direction: column; gap: var(--s-5); }

.adm-pane, .adm-side-pane {
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: var(--s-5) var(--s-5) var(--s-6);
}
.adm-pane__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
}
.adm-pane__sub-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink-mute);
  font-weight: 500;
  margin-block: var(--s-4) var(--s-2);
}
.adm-pane__intro {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin-bottom: var(--s-5);
  line-height: var(--leading-normal);
}
.adm-pane__intro code { background: var(--color-bg-sunken); padding: 1px 4px; font-size: 0.9em; }
.adm-side__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--color-ink-mute);
  margin-bottom: var(--s-3);
}

.adm-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-5);
  font-size: var(--text-sm);
}
.adm-dl--narrow { gap: var(--s-2) var(--s-3); }
.adm-dl dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--color-ink-mute);
  padding-top: 3px;
}
.adm-dl dd { margin: 0; color: var(--color-ink); }
.adm-dl dd a { color: var(--color-ink); border-bottom: 1px solid var(--color-line); text-decoration: none; }
.adm-dl dd a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.adm-warn { color: #B23A3A; }

.adm-content {
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  white-space: pre-wrap;
}
.adm-content--body { padding-top: var(--s-3); }
.adm-body-wrap > summary {
  cursor: pointer;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-mute);
  margin-bottom: var(--s-2);
}
.adm-body-wrap[open] > summary { color: var(--color-accent); }
.adm-empty { color: var(--color-ink-mute); font-style: italic; padding: var(--s-4) 0; }
.adm-muted { color: var(--color-ink-mute); font-style: italic; }
.adm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.adm-mono--small { font-size: var(--text-xs); }

.adm-credits {
  background: var(--color-bg-sunken);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  border-left: 2px solid var(--color-line);
}
.adm-credits__h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink-mute);
  margin-bottom: var(--s-2);
  font-weight: 500;
}

.adm-files { display: flex; flex-direction: column; gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
.adm-files li { display: flex; flex-direction: column; gap: var(--s-2); }
.adm-files__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.adm-files__link:hover { border-color: var(--color-accent); color: var(--color-accent); }
.adm-files__num { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: var(--color-ink-mute); }
.adm-files__name { font-weight: 500; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; }
.adm-files__meta { font-size: 11px; color: var(--color-ink-mute); text-transform: uppercase; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-files__caption {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
  padding: var(--s-3) var(--s-4);
  background: var(--color-bg-sunken);
  border-left: 2px solid var(--color-line);
  white-space: pre-wrap;
  margin: 0;
}

.adm-notes { display: flex; flex-direction: column; gap: var(--s-3); }
.adm-notes textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-normal);
  resize: vertical;
}
.adm-notes textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-ink); }

.adm-status-form { display: flex; gap: var(--s-2); align-items: center; }
.adm-select {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  min-height: 36px;
  flex: 1;
}

/* Settings flags */
.adm-flag-list { display: flex; flex-direction: column; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.adm-flag {
  padding: var(--s-4) var(--s-5);
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-line);
}
.adm-flag__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-2);
}
.adm-flag__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
}
.adm-flag__state {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  padding: 2px 8px;
}
.adm-flag__state--on  { background: var(--color-ink); color: var(--color-bg); }
.adm-flag__state--off { background: var(--color-bg); color: var(--color-ink-mute); border: 1px solid var(--color-line); }
.adm-flag__desc { font-size: var(--text-sm); color: var(--color-ink-soft); line-height: var(--leading-normal); margin-bottom: var(--s-2); }
.adm-flag__const { font-size: var(--text-xs); color: var(--color-ink-mute); }
.adm-flag__const code { background: var(--color-bg); padding: 1px 4px; font-size: 0.9em; }
.adm-pane--flush { padding: var(--s-4) var(--s-5); }
.adm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--color-line);
}
.adm-pagination__current {
  font-size: var(--text-sm);
  color: var(--color-ink-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.adm-snippet {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--s-4) var(--s-5);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-x: auto;
}

/* Login form already styled by .admin-login from earlier; keep it */

/* ─── Old admin panel (overview/login etc — most superseded by adm- above) ── */
.admin {
  padding-block: var(--s-7);
}
.admin__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--color-line);
}
.admin__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  margin-top: var(--s-2);
}
.admin__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.admin-stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-ink);
  min-width: 110px;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.admin-stat:hover, .admin-stat:focus-visible {
  border-color: var(--color-ink);
}
.admin-stat--active {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}
.admin-stat--meta {
  margin-left: auto;
  background: var(--color-bg-sunken);
  border-color: var(--color-line);
  pointer-events: none;
}
.admin-stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  opacity: 0.7;
}
.admin-stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
}
.admin-stat__value small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.7rem;
  opacity: 0.7;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.admin-table thead {
  background: var(--color-bg-sunken);
  border-bottom: 1px solid var(--color-line);
}
.admin-table th {
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
  padding: var(--s-3) var(--s-4);
  white-space: nowrap;
}
.admin-table td {
  padding: var(--s-3) var(--s-4);
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--color-bg-sunken); }
.admin-table__time { white-space: nowrap; color: var(--color-ink-mute); font-variant-numeric: tabular-nums; }
.admin-table__source { color: var(--color-ink-mute); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8em; }
.admin-table__message { max-width: 300px; }
.admin-table__message summary {
  cursor: pointer;
  color: var(--color-ink);
}
.admin-table__message details[open] summary {
  color: var(--color-accent);
  font-weight: 500;
}
.admin-table__message details p {
  margin-top: var(--s-2);
  color: var(--color-ink-soft);
  white-space: pre-wrap;
  font-size: var(--text-sm);
}
.admin-table a { color: var(--color-ink); border-bottom: 1px solid var(--color-line); }
.admin-table a:hover, .admin-table a:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }

.admin-tag {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  padding: 2px 8px;
  border: 1px solid currentColor;
}
.admin-tag--read       { color: #2a5d8f; }
.admin-tag--advertise  { color: #8c5a1a; }
.admin-tag--contribute { color: #2f6c3a; }
.admin-tag--other      { color: var(--color-ink-mute); }

.admin-login {
  padding-block: var(--s-8);
  max-width: 420px;
}
.admin-login__lede {
  color: var(--color-ink-soft);
  margin-block: var(--s-3) var(--s-5);
}
.admin-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.admin-login__form .contact-form__field input {
  /* match contact form styling, reused */
}

/* ─── Submit a story (sf = submit form) ──────────────────────────────────── */
.submit {
  padding-block: var(--s-8) var(--s-9);
}
.submit__inner > * + * { margin-top: var(--s-7); }

.submit__hero {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: var(--s-7);
}
.submit__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  margin-block: var(--s-3) var(--s-4);
}
.submit__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
  max-width: 56ch;
}

.submit__success {
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-left-width: 3px;
  padding: var(--s-7) var(--s-6);
}
.submit__success-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  margin-block: var(--s-2) var(--s-4);
}
.submit__success p { color: var(--color-ink); font-size: var(--text-base); line-height: var(--leading-normal); }
.submit__success-action { margin-top: var(--s-5) !important; }

/* ── Form skeleton ──────────────────────────────────────────────────────── */
.sf {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.sf__honeypot {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Section headers ────────────────────────────────────────────────────── */
.sf__section {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.sf__section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--color-line);
}
.sf__step {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: 1;
  color: var(--color-ink-mute);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sf__section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
}
.sf__section-hint {
  grid-column: 2;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  max-width: 56ch;
  margin: 0;
}

/* ── Fields ────────────────────────────────────────────────────────────── */
.sf__row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
.sf__row--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .sf__row--2 { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

.sf__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.sf__field label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.005em;
}
.sf__req,
.sf__opt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.sf__req { color: var(--color-accent); }
.sf__opt { color: var(--color-ink-mute); }

.sf__field input[type="text"],
.sf__field input[type="email"],
.sf__field textarea,
.sf__select {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 0;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition);
}
.sf__field input:hover,
.sf__field textarea:hover,
.sf__select:hover { border-color: var(--color-ink-mute); }

.sf__field input:focus-visible,
.sf__field textarea:focus-visible,
.sf__select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-ink);
}
.sf__field input::placeholder,
.sf__field textarea::placeholder {
  color: var(--color-ink-mute);
  opacity: 1;
}
.sf__field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: var(--leading-normal);
}

.sf__select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9"><path fill="%231A1A1A" d="M1 1l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

/* ── Images section ─────────────────────────────────────────────────────── */
.sf__images {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.sf__image {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-line);
}
.sf__image--has-file {
  border-color: var(--color-ink-mute);
}
.sf__image-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.sf__image-num {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--color-ink-mute);
}
.sf__image-remove {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-mute);
  cursor: pointer;
  transition: color var(--transition);
}
.sf__image-remove:hover,
.sf__image-remove:focus-visible {
  color: #B23A3A;
  text-decoration: underline;
}

/* Native file input hidden but keyboard accessible */
.sf__file input[type="file"] {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
}
.sf__file input[type="file"]:focus-visible + .sf__file-label {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.sf__file-label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px dashed var(--color-line);
  cursor: pointer;
  min-height: 48px;
  transition: border-color var(--transition), color var(--transition);
}
.sf__file-label:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.sf__image--has-file .sf__file-label {
  border-style: solid;
  border-color: var(--color-ink);
}
.sf__file-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-ink-mute);
}
.sf__image--has-file .sf__file-icon { color: var(--color-accent); }
.sf__file-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.sf__file-meta {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums;
}

.sf__add-image {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--color-ink);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  min-height: 44px;
  transition: background var(--transition), color var(--transition);
}
.sf__add-image span { font-weight: 700; margin-right: 4px; }
.sf__add-image:hover,
.sf__add-image:focus-visible {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* ── Rights section ─────────────────────────────────────────────────────── */
.sf__section--rights .sf__section-head {
  border-bottom-color: var(--color-accent);
}
.sf__check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--color-bg-sunken);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  cursor: pointer;
}
.sf__check input[type="checkbox"] {
  margin-top: 3px;
  width: 18px; height: 18px;
  accent-color: var(--color-ink);
  flex-shrink: 0;
}
.sf__check-text { color: var(--color-ink-soft); }
.sf__check-text strong { color: var(--color-ink); font-weight: 600; }
.sf__check:has(input:checked) {
  border-left-color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.sf__gdpr {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-ink-mute);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--color-line);
}
.sf__gdpr a {
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-line);
}
.sf__gdpr a:hover, .sf__gdpr a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.sf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
  padding-top: var(--s-2);
}
.sf__actions .btn--primary { min-height: 52px; padding-inline: var(--s-6); }
.sf__note {
  color: var(--color-ink-mute);
  font-size: var(--text-sm);
  margin: 0;
}
.sf__note a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}
.sf__note a:hover, .sf__note a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Admin submission detail */
.admin-sub-grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .admin-sub-grid { grid-template-columns: 280px 1fr; }
}
.admin-sub-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  margin-block: var(--s-5) var(--s-3);
}
.admin-sub-h2:first-child { margin-top: 0; }
.admin-sub-content {
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  white-space: pre-wrap;
}
.admin-sub-empty { color: var(--color-ink-mute); font-style: italic; }
.admin-sub-body summary {
  cursor: pointer;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
  padding-block: var(--s-2);
}
.admin-sub-body details[open] summary { color: var(--color-accent); }
.admin-sub-credits {
  background: var(--color-bg-sunken);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
  border-left: 2px solid var(--color-line);
}
.admin-sub-credits__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
  margin-bottom: var(--s-2);
}
.admin-sub-files {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.admin-sub-files li {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.admin-sub-files__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  transition: border-color var(--transition), color var(--transition);
  text-decoration: none;
}
.admin-sub-files__link:hover, .admin-sub-files__link:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.admin-sub-files__num {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
}
.admin-sub-files__name { font-weight: 500; }
.admin-sub-files__meta { font-size: var(--text-xs); color: var(--color-ink-mute); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-variant-numeric: tabular-nums; }
.admin-sub-files__caption {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
  padding: var(--s-3) var(--s-4);
  background: var(--color-bg-sunken);
  border-left: 2px solid var(--color-line);
  white-space: pre-wrap;
}
.admin-sub-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--color-line);
}
.admin-sub-status label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
  font-weight: 500;
}
.admin-sub-status select {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-sm);
}
.admin-tag--new        { color: #2a5d8f; }
.admin-tag--reviewing  { color: #8c5a1a; }
.admin-tag--accepted   { color: #2f6c3a; }
.admin-tag--declined   { color: #8b2a2a; }
.admin-tag--published  { color: #2f6c3a; background: rgba(47,108,58,0.08); }

/* ─── Launch page (LAUNCH_MODE) ──────────────────────────────────────────── */
.masthead__status {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
  font-weight: 500;
}
.launch {
  padding-block: var(--s-8) var(--s-9);
  border-bottom: 1px solid var(--color-line);
}
.launch__inner {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .launch__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
  }
}
.launch__copy { max-width: 50ch; }
.launch__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  margin-block: var(--s-3) var(--s-5);
}
.launch__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}
.launch__lede--two { margin-top: var(--s-4); }

.launch__form-wrap {
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-line);
  padding: var(--s-6) var(--s-6) var(--s-7);
}
@media (min-width: 720px) {
  .launch__form-wrap { padding: var(--s-7); }
}

.launch-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.launch-form__honeypot {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.launch-form__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block: 0 var(--s-1);
}

.launch-form__intent {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border: 0;
  padding: 0;
  margin: 0;
}
.launch-form__intent legend {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
  margin-bottom: var(--s-2);
}
.launch-form__intent-option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.launch-form__intent-option:hover {
  border-color: var(--color-ink);
}
.launch-form__intent-option input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--color-ink);
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.launch-form__intent-option:has(input:checked) {
  border-color: var(--color-ink);
  background: var(--color-bg);
}
.launch-form__intent-text { display: flex; flex-direction: column; gap: 2px; line-height: var(--leading-normal); }
.launch-form__intent-text strong {
  font-weight: 500;
  color: var(--color-ink);
}
.launch-form__intent-text span {
  font-size: var(--text-sm);
  color: var(--color-ink-mute);
}

.launch-form__row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .launch-form__row { grid-template-columns: 1fr 1fr; }
}
.launch-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.launch-form__field label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
}
.launch-form__field input,
.launch-form__field textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  min-height: 48px;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.launch-form__field textarea {
  min-height: 120px;
  resize: vertical;
}
.launch-form__field input:focus-visible,
.launch-form__field textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.launch-form__required { color: var(--color-accent); }
.launch-form__optional { color: var(--color-ink-mute); text-transform: none; letter-spacing: normal; font-weight: 400; }

.launch-form__gdpr {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-ink-mute);
  padding-top: var(--s-2);
  border-top: 1px solid var(--color-line);
}
.launch-form__gdpr a {
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-line);
}
.launch-form__gdpr a:hover, .launch-form__gdpr a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.launch-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}
.launch-form__note {
  color: var(--color-ink-mute);
  font-size: var(--text-sm);
  margin: 0;
}
.launch-form__note a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}

.launch__success {
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-left-width: 4px;
  padding: var(--s-6) var(--s-6);
}
.launch__success-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  margin-block: var(--s-2) var(--s-3);
}
.launch__success p { color: var(--color-ink); font-size: var(--text-base); line-height: var(--leading-normal); }
.launch__success-action { margin-top: var(--s-5); }

.launch__about {
  padding-block: var(--s-7) var(--s-8);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.launch__about p {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-width: 60ch;
  margin-top: var(--s-3);
}
.launch__about-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--color-ink-mute);
  margin-top: var(--s-5) !important;
}
.launch__about-links a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}
.launch__about-links a:hover, .launch__about-links a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.footer__inner--launch {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .footer__inner--launch { grid-template-columns: 2fr 1fr 1fr; }
}

/* ─── Contact form ───────────────────────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-block: var(--s-6) var(--s-7);
  border-bottom: 1px solid var(--color-line);
}
.contact-form__honeypot {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.contact-form__field label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink-mute);
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.contact-form__field textarea {
  min-height: 200px;
  resize: vertical;
}
.contact-form__field select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9"><path fill="%231A1A1A" d="M1 1l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-7);
  cursor: pointer;
}
.contact-form__field input:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__field textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--color-ink-mute);
}
.contact-form__gdpr {
  background: var(--color-bg-sunken);
  border-left: 2px solid var(--color-line);
  padding: var(--s-4) var(--s-5);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}
.contact-form__gdpr-heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--s-2);
}
.contact-form__gdpr p + p {
  margin-top: var(--s-3);
}
.contact-form__gdpr a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}
.contact-form__gdpr a:hover, .contact-form__gdpr a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-2);
}
.contact-form__note {
  color: var(--color-ink-mute);
  font-size: var(--text-sm);
  margin: 0;
}
.contact-form__note a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}
.contact-form__note a:hover, .contact-form__note a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.form-flash {
  background: var(--color-bg-sunken);
  border-left: 2px solid var(--color-accent);
  padding: var(--s-3) var(--s-5);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-block: var(--s-5);
}
.form-flash--error {
  border-left-color: #B23A3A;
  color: #6B1F1F;
}
.contact-aside {
  padding-block: var(--s-6) var(--s-7);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.contact-aside p + p {
  margin-top: var(--s-3);
}
.contact-aside a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}
.contact-aside a:hover, .contact-aside a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ─── Newsletter popup ───────────────────────────────────────────────────── */
.popup[hidden] { display: none; }
.popup {
  position: fixed; inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  animation: popup-fade 240ms ease-out;
}
.popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1;
}
.popup__panel {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  width: 100%;
  max-width: 480px;
  padding: var(--s-7) var(--s-6) var(--s-6);
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  animation: popup-rise 320ms cubic-bezier(.2,.8,.2,1);
}
.popup__close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-mute);
  cursor: pointer;
  transition: color var(--transition);
}
.popup__close:hover, .popup__close:focus-visible { color: var(--color-ink); }
.popup__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  margin-block: var(--s-2) var(--s-3);
}
.popup__lede {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin-bottom: var(--s-5);
}
.popup__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 480px) {
  .popup__form { flex-direction: row; }
  .popup__field { flex: 1; }
}
.popup__honeypot {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.popup__field input {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-base);
  min-height: 48px;
}
.popup__field input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.popup__legal {
  margin-top: var(--s-4);
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
  line-height: var(--leading-normal);
}
.popup__legal a { color: var(--color-ink); border-bottom: 1px solid var(--color-line); }
.popup__legal a:hover, .popup__legal a:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }
@keyframes popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popup-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
body.popup-open { overflow: hidden; }

/* ─── Brand guide ────────────────────────────────────────────────────────── */
.brand-section {
  padding-block: var(--s-8);
  border-top: 1px solid var(--color-line);
}
.brand-section--alt {
  background: var(--color-bg-sunken);
}
.brand-section__head {
  max-width: 60ch;
  margin-bottom: var(--s-7);
}
.brand-section__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--s-2) var(--s-4);
}
.brand-section__head p {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.brand-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  margin-block: var(--s-6) var(--s-3);
}
.brand-section code {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: 1px 6px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
}
.brand-section--alt code {
  background: var(--color-bg);
}

/* Logo display */
.logo-display {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-7);
}
@media (min-width: 880px) {
  .logo-display { grid-template-columns: 2fr 1fr; }
}
.logo-display__primary {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .logo-display__primary { grid-template-columns: 1fr 1fr; }
}
.logo-display__lockup,
.logo-display__inverse {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-7) var(--s-5);
  border: 1px solid var(--color-line);
  min-height: 180px;
}
.logo-display__lockup { background: var(--color-bg); color: var(--color-ink); }
.logo-display__inverse { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.logo-display__svg {
  width: 80%;
  max-width: 260px;
  height: auto;
  pointer-events: none;
}
.logo-display__details dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-5);
}
.logo-display__details dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
  font-weight: 500;
  padding-top: 3px;
}
.logo-display__details dd { margin: 0; }
.brand-downloads { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.brand-donts {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  color: var(--color-ink-soft);
  padding-left: var(--s-5);
  list-style: disc;
}

/* Swatches */
.swatch-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.swatch {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
}
.swatch__chip {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-bottom: 1px solid var(--color-line);
}
.swatch__body { padding: var(--s-4) var(--s-5); }
.swatch__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  margin: 0 0 var(--s-1);
}
.swatch__hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--color-ink);
  font-size: var(--text-base);
  margin: 0 0 var(--s-1);
}
.swatch__var { color: var(--color-ink-mute); font-size: var(--text-xs); margin: 0 0 var(--s-3); }
.swatch__var code {
  background: transparent;
  border: 0;
  padding: 0;
  text-transform: none;
}
.swatch__usage { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.5; margin: 0; }

/* Type specimens */
.type-specimens {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.type-specimen {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  padding-block: var(--s-5);
  border-top: 1px solid var(--color-line);
}
@media (min-width: 880px) {
  .type-specimen { grid-template-columns: 240px 1fr; gap: var(--s-7); }
}
.type-specimen__name {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.type-specimen__meta dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-1) var(--s-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.type-specimen__meta dt {
  font-weight: 500;
  color: var(--color-ink);
}
.type-specimen__meta dd { margin: 0; }
.type-specimen__sample {
  line-height: 1.15;
  color: var(--color-ink);
  word-break: break-word;
}

/* Voice list */
.voice-list {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.voice-list h3 {
  margin-top: 0;
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-tight);
}
.voice-list p {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin-top: var(--s-3);
}

/* Spacing scale */
.space-scale {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.space-scale__item {
  display: grid;
  align-items: center;
  gap: var(--s-4);
  grid-template-columns: minmax(96px, 1fr) max-content max-content;
}
.space-scale__bar {
  background: var(--color-accent);
  height: 16px;
  max-width: 100%;
}
.space-scale__name code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--text-sm);
}
.space-scale__value {
  color: var(--color-ink-mute);
  font-size: var(--text-sm);
}
.space-scale__value span { opacity: 0.5; margin-inline: var(--s-1); }

/* Asset list */
.brand-asset-list {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.brand-asset-list li {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: var(--s-5);
}
.brand-asset-list h3 { margin-top: 0; }
.brand-asset-list p { color: var(--color-ink-soft); font-size: var(--text-sm); margin-block: var(--s-2); }

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Print ──────────────────────────────────────────────────────────────── */
@media print {
  body { background: white; color: black; }
  .masthead, .breadcrumbs, .catstrip, .ad-zone, .newsletter, .footer,
  .back-to-top, .cookie-consent, .section--related, .author-card { display: none !important; }
  .article__cover { display: none; }
  .article__title { font-size: 24pt; }
  .article__body { font-size: 12pt; line-height: 1.5; max-width: none; }
  .article__body a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }
  a { color: black; text-decoration: underline; }
}