/**
 * WellCore editorial theme.
 *
 * Every value resolves through a token in tokens.css. Change design decisions
 * there, not here.
 */

/* ===================================================================== *
 * Base
 * ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--wc-surface-canvas);
  color: var(--wc-text-primary);
  font-family: var(--wc-font-body);
  font-size: var(--wc-text-base);
  line-height: var(--wc-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Belt and braces: no composition may push the page sideways. */
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wc-font-display);
  font-weight: var(--wc-weight-bold);
  line-height: var(--wc-leading-snug);
  letter-spacing: var(--wc-tracking-tight);
  color: var(--wc-text-primary);
  margin: 0;
  /* Long single-word headlines (URLs, compound terms) must not overflow. */
  overflow-wrap: break-word;
}

p, ul, ol, blockquote, figure, pre, table {
  margin: 0;
}

a {
  color: var(--wc-brand-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--wc-duration-fast) var(--wc-easing);
}

a:hover {
  color: var(--wc-text-primary);
}

/* Focus is never removed — only replaced with a measured ring. */
:focus-visible {
  outline: var(--wc-focus-width) solid var(--wc-focus-ring);
  outline-offset: var(--wc-focus-offset);
  border-radius: var(--wc-radius-sm);
}

.wc-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Keyboard-only escape hatch to the content. */
.wc-skip-link {
  position: absolute;
  left: var(--wc-space-4);
  top: var(--wc-space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--wc-bg-base);
  color: var(--wc-brand-primary-dark);
  padding: var(--wc-space-3) var(--wc-space-4);
  border-radius: var(--wc-radius-lg);
  box-shadow: var(--wc-shadow-card);
  font-weight: var(--wc-weight-medium);
  text-decoration: none;
}

.wc-skip-link:focus {
  transform: translateY(0);
}

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

/* ===================================================================== *
 * Layout
 * ===================================================================== */

.wc-container {
  width: 100%;
  max-width: var(--wc-max-page);
  margin-inline: auto;
  padding-inline: var(--wc-gutter);
}

.wc-container--content {
  max-width: var(--wc-max-content);
}

.wc-container--prose {
  max-width: calc(var(--wc-max-prose) + var(--wc-gutter) * 2);
}

.wc-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wc-main {
  flex: 1;
  padding-bottom: var(--wc-space-24);
}

/* ===================================================================== *
 * Header
 * ===================================================================== */

.wc-header {
  background: color-mix(in srgb, var(--wc-bg-base) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: var(--wc-border-width) solid var(--wc-border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--wc-z-nav);
}

.wc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wc-space-4);
  min-height: 4.5rem;
}

/* The lockup is the official vector asset; never typeset or recoloured. */
.wc-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Style Guide 1.1: clear space of 0.25 of the symbol height. */
  padding: var(--wc-space-2);
  margin-inline-start: calc(var(--wc-space-2) * -1);
  border-radius: var(--wc-radius-md);
}

.wc-logo__image {
  height: 1.875rem;
  width: auto;
}

/* Compact navigation uses the symbol; the lockup returns above 30rem. */
.wc-logo__image--mark {
  display: none;
}

.wc-header__actions {
  display: flex;
  align-items: center;
  gap: var(--wc-space-2);
}

.wc-header__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--wc-border-width) solid transparent;
  border-radius: var(--wc-radius-lg);
  background: none;
  color: var(--wc-text-secondary);
  cursor: pointer;
  transition: background var(--wc-duration-fast) var(--wc-easing),
              color var(--wc-duration-fast) var(--wc-easing);
}

.wc-header__search:hover {
  background: var(--wc-bg-subtle);
  color: var(--wc-text-primary);
}

/* ===================================================================== *
 * Buttons — mapped from the frontend Button primitive
 * ===================================================================== */

.wc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wc-control-gap);
  height: var(--wc-control-h-md);
  padding-inline: var(--wc-control-px-md);
  border: var(--wc-border-width) solid transparent;
  border-radius: var(--wc-control-radius);
  font-family: var(--wc-font-body);
  font-size: var(--wc-text-sm);
  font-weight: var(--wc-weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--wc-duration-base) var(--wc-easing),
              border-color var(--wc-duration-base) var(--wc-easing),
              color var(--wc-duration-base) var(--wc-easing);
}

.wc-button:disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* The primitive paints primary with the raw brand orange, which is 2.77:1
   behind white text. Style Guide 1.1 supersedes that: the proportions, radius
   and brand lift are inherited, the accessible functional orange is not
   traded away. Hover mirrors the primitive's color-mix darkening. */
.wc-button--primary {
  background: var(--wc-brand-primary-dark);
  color: var(--wc-text-on-brand);
  box-shadow: var(--wc-shadow-brand);
}

.wc-button--primary:hover {
  background: color-mix(in srgb, var(--wc-brand-primary-dark) 88%, black);
}

/* Secondary sits on the subtle canvas and resolves to brand on hover, exactly
   as the primitive does. */
.wc-button--secondary {
  background: var(--wc-bg-subtle);
  border-color: var(--wc-border-subtle);
  color: var(--wc-text-primary);
}

.wc-button--secondary:hover {
  border-color: var(--wc-brand-primary-dark);
  color: var(--wc-brand-primary-dark);
}

.wc-button--ghost {
  background: transparent;
  color: var(--wc-text-primary);
}

.wc-button--ghost:hover {
  background: var(--wc-bg-subtle);
}

/* ===================================================================== *
 * Eyebrow / rule / topics
 * ===================================================================== */

.wc-eyebrow {
  display: inline-block;
  font-family: var(--wc-font-body);
  font-size: var(--wc-text-xs);
  font-weight: var(--wc-weight-medium);
  letter-spacing: var(--wc-tracking-wide);
  text-transform: uppercase;
  color: var(--wc-text-secondary);
  margin: 0;
}

.wc-eyebrow--accent { color: var(--wc-brand-primary-dark); }
.wc-eyebrow--onDark { color: rgb(255 255 255 / 70%); }

.wc-rule {
  width: 3.5rem;
  height: 3px;
  border: 0;
  border-radius: var(--wc-radius-pill);
  background: var(--wc-gradient);
  margin: 0 0 var(--wc-space-6);
}

/* Two distinct components, which p28 separates explicitly:
   "Badges usam fundo suave e texto contrastante; não sugerem clique quando
   apenas informam."

   .wc-topic  — interactive navigation control (topic strip, tag pages).
                Outlined, control height, control radius: it is a link.
   .wc-badge  — informational metadata (inside cards and the post header).
                Soft tinted surface, contrasted text, no border, subordinate to
                the title, and deliberately not pill-shaped so it cannot be
                mistaken for a button. */

.wc-topic {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: var(--wc-control-h-md);
  padding-inline: var(--wc-space-5);
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-control-radius);
  background: var(--wc-bg-base);
  color: var(--wc-text-primary);
  font-size: var(--wc-text-sm);
  font-weight: var(--wc-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--wc-shadow-soft);
  transition: border-color var(--wc-duration-base) var(--wc-easing),
              color var(--wc-duration-base) var(--wc-easing);
}

.wc-topic:hover {
  border-color: var(--wc-brand-primary-dark);
  color: var(--wc-brand-primary-dark);
}

/* Current topic. Not signalled by colour alone: the control also carries
   aria-current="page", and the surface plus weight change together. */
.wc-topic[aria-current='page'] {
  background: var(--wc-brand-primary-dark);
  border-color: var(--wc-brand-primary-dark);
  color: var(--wc-text-on-brand);
  box-shadow: none;
}

.wc-topic[aria-current='page']:hover {
  color: var(--wc-text-on-brand);
}

/* Informational badge — soft surface, contrasted text, no interactive border.
   Radius 8 (the smallest in the p25 set) keeps it visually subordinate. */
.wc-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.25rem var(--wc-space-3);
  border: 0;
  border-radius: var(--wc-radius-sm);
  background: color-mix(in srgb, var(--wc-brand-primary) 12%, transparent);
  color: var(--wc-brand-primary-dark);
  font-size: var(--wc-text-xs);
  font-weight: var(--wc-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}

/* Where the badge is a link (card topic), it must still not read as a button:
   no border, no lift, only a text-colour shift on hover. */
a.wc-badge:hover {
  color: var(--wc-text-primary);
  text-decoration: none;
}

/* ===================================================================== *
 * Hero — two columns on desktop, stacked below
 * ===================================================================== */

.wc-hero {
  padding-block: var(--wc-space-20) var(--wc-space-12);
}

.wc-hero__grid {
  display: grid;
  gap: var(--wc-space-10);
  /* Both columns begin on the same top axis. Centring the search against the
     copy detached it from the headline it belongs to. */
  align-items: start;
}

@media (min-width: 64rem) {
  .wc-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--wc-space-16);
  }
}

.wc-hero__title {
  /* display-lg territory from the Typography primitive, tuned for editorial. */
  font-size: clamp(2rem, 1.3rem + 3.1vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: var(--wc-tracking-tight);
  max-width: 20ch;
}

.wc-hero__text {
  margin-top: var(--wc-space-5);
  max-width: 56ch;
  font-size: var(--wc-text-lg);
  line-height: var(--wc-leading-relaxed);
  color: var(--wc-text-secondary);
}

.wc-hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-3);
}

/* ===================================================================== *
 * Search
 * ===================================================================== */

/* A button, not an input: the real query field lives inside Ghost's search
   modal, so a decorative <input> here would be a dead end for keyboard users.
   Styled on the Input primitive's grammar because that is what it opens. */
.wc-search {
  display: flex;
  align-items: center;
  gap: var(--wc-space-3);
  width: 100%;
  min-height: var(--wc-control-h-lg);
  padding: var(--wc-input-py) var(--wc-input-px);
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-control-radius);
  background: var(--wc-bg-base);
  color: var(--wc-text-secondary);
  font-family: var(--wc-font-body);
  font-size: var(--wc-text-base);
  text-align: start;
  cursor: pointer;
  box-shadow: var(--wc-shadow-card);
  transition: border-color var(--wc-duration-base) var(--wc-easing),
              box-shadow var(--wc-duration-base) var(--wc-easing);
}

.wc-search:hover {
  border-color: var(--wc-brand-primary-dark);
  box-shadow: var(--wc-shadow-brand);
}

.wc-search__icon { display: inline-flex; color: var(--wc-text-secondary); }

.wc-search__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-search__kbd {
  flex-shrink: 0;
  padding: var(--wc-space-1) var(--wc-space-2);
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-bg-subtle);
  color: var(--wc-text-secondary);
  font-family: var(--wc-font-body);
  font-size: var(--wc-text-xs);
  line-height: 1.4;
}

/* ===================================================================== *
 * Topic strip
 * ===================================================================== */

.wc-topics {
  padding-bottom: var(--wc-space-12);
  text-align: center;
}

.wc-topics__eyebrow {
  margin: 0 0 var(--wc-space-4);
  font-size: var(--wc-text-xs);
  font-weight: var(--wc-weight-medium);
  letter-spacing: var(--wc-tracking-wide);
  text-transform: uppercase;
  color: var(--wc-text-secondary);
}

.wc-topics__scroller {
  /* Horizontal scroll beats a ragged multi-row pile on narrow screens; the
     padding keeps focus rings from being clipped by the scroll container. */
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--wc-space-1);
  padding-inline: var(--wc-gutter);
  scroll-padding-inline: var(--wc-gutter);
}

.wc-topics__scroller::-webkit-scrollbar { display: none; }

.wc-topics__list {
  display: flex;
  justify-content: center;
  gap: var(--wc-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
  margin-inline: auto;
}

/* ===================================================================== *
 * Media — real image or deterministic placeholder
 * ===================================================================== */

.wc-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wc-bg-subtle);
  background-size: cover;
  background-position: center;
}

.wc-media__img {
  width: 100%;
  height: 100%;
  /* Intentional crop: the ratio is fixed, so images are never distorted. */
  object-fit: cover;
}

/* Deterministic fallback. The post id is emitted in data-ph and the variant is
   chosen by its last hex character, so a post keeps the same placeholder for
   ever and no JavaScript is involved. 16 hex values over 10 variants. */
/* The bare rule is the safety net for an id that is not hex; every one of the
   16 hex suffixes is then mapped explicitly, so the distribution is auditable
   rather than partly implicit. */
.wc-media--ph { background-image: url('../images/placeholders/editorial-01-agenda.svg'); }
.wc-media--ph[data-ph$="0"], .wc-media--ph[data-ph$="a"] { background-image: url('../images/placeholders/editorial-01-agenda.svg'); }
.wc-media--ph[data-ph$="1"], .wc-media--ph[data-ph$="b"] { background-image: url('../images/placeholders/editorial-02-comercial.svg'); }
.wc-media--ph[data-ph$="2"], .wc-media--ph[data-ph$="c"] { background-image: url('../images/placeholders/editorial-03-financeiro.svg'); }
.wc-media--ph[data-ph$="3"], .wc-media--ph[data-ph$="d"] { background-image: url('../images/placeholders/editorial-04-gestao.svg'); }
.wc-media--ph[data-ph$="4"], .wc-media--ph[data-ph$="e"] { background-image: url('../images/placeholders/editorial-05-indicadores.svg'); }
.wc-media--ph[data-ph$="5"], .wc-media--ph[data-ph$="f"] { background-image: url('../images/placeholders/editorial-06-processos.svg'); }
.wc-media--ph[data-ph$="6"] { background-image: url('../images/placeholders/editorial-07-equipe.svg'); }
.wc-media--ph[data-ph$="7"] { background-image: url('../images/placeholders/editorial-08-automacao.svg'); }
.wc-media--ph[data-ph$="8"] { background-image: url('../images/placeholders/editorial-09-crescimento.svg'); }
.wc-media--ph[data-ph$="9"] { background-image: url('../images/placeholders/editorial-10-organizacao.svg'); }

/* ===================================================================== *
 * Cards — mapped from the frontend Card primitive
 * ===================================================================== */

.wc-feed {
  display: grid;
  gap: var(--wc-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.wc-feed--related {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* Card = rounded-xl + border-subtle + bg-base + p-6. The surface is white
   rather than the canvas, which the primitive's own comment calls out as the
   difference between a surface and a hollow rectangle. */
.wc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--wc-bg-base);
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-card-radius);
  overflow: hidden;
  transition: border-color var(--wc-duration-base) var(--wc-easing),
              box-shadow var(--wc-duration-base) var(--wc-easing),
              transform var(--wc-duration-base) var(--wc-easing);
}

.wc-card:hover {
  border-color: var(--wc-border-muted);
  box-shadow: var(--wc-shadow-card);
  transform: translateY(-2px);
}

/* The whole card is a target, but the ring is drawn on the card, not on the
   invisible stretched link — otherwise focus would be a hairline at the edge. */
.wc-card:focus-within {
  border-color: var(--wc-brand-primary-dark);
  box-shadow: var(--wc-shadow-card);
}

.wc-card:focus-within .wc-card__title a:focus-visible {
  outline: none;
}

.wc-card:focus-within::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  outline: var(--wc-focus-width) solid var(--wc-focus-ring);
  outline-offset: var(--wc-focus-offset);
  pointer-events: none;
}

.wc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  gap: var(--wc-space-3);
  padding: var(--wc-card-padding);
}

.wc-card__title {
  font-size: var(--wc-text-lg);
  line-height: var(--wc-leading-snug);
}

.wc-card__title a {
  color: inherit;
  text-decoration: none;
}

.wc-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.wc-card__excerpt {
  color: var(--wc-text-secondary);
  font-size: var(--wc-text-sm);
  line-height: var(--wc-leading-relaxed);
}

.wc-card__footer {
  margin-top: auto;
  padding-top: var(--wc-space-1);
}

/* ===================================================================== *
 * Lead area
 * ===================================================================== */

.wc-lead {
  margin-bottom: var(--wc-space-20);
}

.wc-lead__grid {
  display: grid;
  gap: var(--wc-space-6);
}

@media (min-width: 64rem) {
  .wc-lead__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
  }

  .wc-lead__main {
    grid-row: span 3;
  }
}

.wc-lead__main {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--wc-bg-base);
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-card-radius);
  overflow: hidden;
  transition: border-color var(--wc-duration-base) var(--wc-easing),
              box-shadow var(--wc-duration-base) var(--wc-easing);
}

.wc-lead__main:hover { box-shadow: var(--wc-shadow-card); }

.wc-lead__main:focus-within::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  outline: var(--wc-focus-width) solid var(--wc-focus-ring);
  outline-offset: var(--wc-focus-offset);
  pointer-events: none;
}

.wc-lead__main .wc-media { aspect-ratio: 16 / 9; }

.wc-lead__main-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wc-space-4);
  padding: var(--wc-space-8);
}

.wc-lead__main-title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.15;
}

.wc-lead__main-title a { color: inherit; text-decoration: none; }
.wc-lead__main-title a::after { content: ''; position: absolute; inset: 0; }

.wc-lead__main-deck {
  color: var(--wc-text-secondary);
  font-size: var(--wc-text-lg);
  line-height: var(--wc-leading-relaxed);
  max-width: 52ch;
}

/* Secondary stories: same card grammar, horizontal, smaller. */
.wc-lead__side {
  position: relative;
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--wc-card-padding);
  align-items: stretch;
  background: var(--wc-bg-base);
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-card-radius);
  /* No padding on the card itself: the media runs to the card edge and only
     the content area is inset, so the image is not a floating tile. */
  overflow: hidden;
  transition: border-color var(--wc-duration-base) var(--wc-easing),
              box-shadow var(--wc-duration-base) var(--wc-easing);
}

.wc-lead__side:hover {
  border-color: var(--wc-border-muted);
  box-shadow: var(--wc-shadow-card);
}

.wc-lead__side:focus-within::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  outline: var(--wc-focus-width) solid var(--wc-focus-ring);
  outline-offset: var(--wc-focus-offset);
  pointer-events: none;
}

/* 4:3 rather than square: the covers and placeholders are 16:9 compositions,
   and cropping them to a square threw away the part that carries the idea. */
/* Full-bleed: square corners here, because the card's own overflow:hidden
   clips them to the outer radius on the leading edge. The grid column sets the
   width, so the base 16:9 ratio is released — keeping it would derive width
   from the stretched height and overflow the column. */
.wc-lead__side .wc-media {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  min-height: 6.5rem;
}

.wc-lead__side-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wc-space-2);
  min-width: 0;
  /* p25: 24px is the card content padding. */
  padding: var(--wc-card-padding) var(--wc-card-padding) var(--wc-card-padding) 0;
}

.wc-lead__side-title {
  font-size: var(--wc-text-base);
  line-height: var(--wc-leading-snug);
}

.wc-lead__side-title a { color: inherit; text-decoration: none; }
.wc-lead__side-title a::after { content: ''; position: absolute; inset: 0; }

/* Topic chips must stay clickable above the card-wide stretched link. */
.wc-card .wc-topic,
.wc-lead__main .wc-topic,
.wc-lead__side .wc-topic {
  position: relative;
  z-index: 1;
}

/* ===================================================================== *
 * Meta / byline
 * ===================================================================== */

.wc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wc-space-2);
  font-size: var(--wc-text-xs);
  color: var(--wc-text-secondary);
}

.wc-meta__sep { opacity: 0.6; }

.wc-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wc-space-2);
  font-size: var(--wc-text-xs);
  color: var(--wc-text-secondary);
}

.wc-byline__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--wc-radius-pill);
  object-fit: cover;
  background: var(--wc-bg-subtle);
}

.wc-byline__name {
  color: var(--wc-text-primary);
  font-weight: var(--wc-weight-medium);
  text-decoration: none;
}

.wc-byline__name:hover { text-decoration: underline; }

/* ===================================================================== *
 * Archive headers
 * ===================================================================== */

.wc-archive-head { padding-block: var(--wc-space-16) var(--wc-space-10); }

.wc-archive-head__title {
  margin-top: var(--wc-space-3);
  font-size: var(--wc-text-3xl);
  line-height: var(--wc-leading-tight);
}

.wc-archive-head__description {
  margin-top: var(--wc-space-4);
  max-width: 54ch;
  font-size: var(--wc-text-lg);
  line-height: var(--wc-leading-relaxed);
  color: var(--wc-text-secondary);
}

.wc-archive-head__count {
  margin-top: var(--wc-space-4);
  font-size: var(--wc-text-sm);
  color: var(--wc-text-secondary);
}

.wc-archive-head__author {
  display: flex;
  align-items: center;
  gap: var(--wc-space-5);
}

.wc-archive-head__avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--wc-radius-pill);
  object-fit: cover;
  background: var(--wc-bg-subtle);
  flex-shrink: 0;
}

/* ===================================================================== *
 * Article
 * ===================================================================== */

.wc-article__head { padding-block: var(--wc-space-16) var(--wc-space-8); }

/* The body holds the 576px reading measure, but a display-scale headline set
   to that width stacks into four cramped lines. The header gets its own,
   wider measure; the deck and byline stay with the prose so the column edge
   below the title is not ragged. */
@media (min-width: 48rem) {
  .wc-article__head > .wc-container--prose {
    max-width: calc(44rem + var(--wc-gutter) * 2);
  }

  .wc-article__deck,
  .wc-article__byline {
    max-width: var(--wc-max-prose);
  }
}

.wc-article__title {
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3rem);
  line-height: 1.1;
  margin-top: var(--wc-space-4);
}

.wc-article__deck {
  margin-top: var(--wc-space-5);
  font-size: var(--wc-text-lg);
  line-height: var(--wc-leading-relaxed);
  color: var(--wc-text-secondary);
}

.wc-article__byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wc-space-4);
  margin-top: var(--wc-space-6);
  padding-top: var(--wc-space-6);
  border-top: var(--wc-border-width) solid var(--wc-border-subtle);
}

.wc-share {
  height: var(--wc-control-h-sm);
  padding-inline: var(--wc-space-4);
}

.wc-share .wc-icon { width: 1rem; height: 1rem; }

.wc-share[data-share-state='done'] {
  border-color: var(--wc-brand-primary-dark);
  color: var(--wc-brand-primary-dark);
}

.wc-article__hero { margin-bottom: var(--wc-space-12); }

.wc-article__hero .wc-media {
  border-radius: var(--wc-card-radius);
  max-height: 32rem;
  aspect-ratio: 16 / 7;
}

.wc-article__figure { margin-block: var(--wc-space-10); }
.wc-article__figure img { width: 100%; border-radius: var(--wc-card-radius); }

.wc-article__figcaption,
.wc-content figcaption {
  margin-top: var(--wc-space-3);
  font-size: var(--wc-text-sm);
  color: var(--wc-text-secondary);
  text-align: center;
}

.wc-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wc-space-2);
  margin-top: var(--wc-space-12);
}

/* ===================================================================== *
 * Long-form content
 * ===================================================================== */

.wc-content {
  font-size: var(--wc-article-size);
  line-height: var(--wc-leading-relaxed);
}

.wc-content > * + * { margin-top: var(--wc-space-6); }

.wc-content h2 { font-size: var(--wc-text-2xl); margin-top: var(--wc-space-12); }
.wc-content h3 { font-size: var(--wc-text-xl); margin-top: var(--wc-space-10); }
.wc-content h4 { font-size: var(--wc-text-lg); margin-top: var(--wc-space-8); }

.wc-content ul,
.wc-content ol { padding-inline-start: var(--wc-space-6); }

.wc-content li + li { margin-top: var(--wc-space-2); }

.wc-content blockquote {
  padding-inline-start: var(--wc-space-6);
  border-inline-start: 3px solid var(--wc-brand-primary);
  color: var(--wc-text-secondary);
  font-size: var(--wc-text-xl);
  line-height: var(--wc-leading-normal);
  font-style: normal;
}

.wc-content img { border-radius: var(--wc-radius-lg); }

.wc-content hr {
  border: 0;
  border-top: var(--wc-border-width) solid var(--wc-border-subtle);
  margin-block: var(--wc-space-12);
}

.wc-content code {
  font-family: var(--wc-font-mono);
  font-size: 0.875em;
  background: var(--wc-bg-subtle);
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-radius-sm);
  padding: 0.15em 0.4em;
}

.wc-content pre {
  background: var(--wc-bg-strong);
  color: var(--wc-text-inverse);
  border-radius: var(--wc-radius-lg);
  padding: var(--wc-space-5);
  overflow-x: auto;
  font-size: var(--wc-text-sm);
  line-height: var(--wc-leading-normal);
}

.wc-content pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.wc-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--wc-text-sm);
}

.wc-content th,
.wc-content td {
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  padding: var(--wc-space-3);
  text-align: start;
}

.wc-content th { background: var(--wc-bg-subtle); font-weight: var(--wc-weight-medium); }

/* --- Ghost Koenig cards ---------------------------------------------- */

.kg-card { margin-block: var(--wc-space-10); }

/* Ghost's wide/full cards deliberately break the reading measure. */
.kg-width-wide {
  width: min(var(--wc-max-content), 100vw - var(--wc-gutter) * 2);
  max-width: none;
  margin-inline: calc(50% - min(var(--wc-max-content), 100vw - var(--wc-gutter) * 2) / 2);
}

.kg-width-full {
  width: calc(100vw - var(--wc-gutter) * 2);
  max-width: none;
  margin-inline: calc(50% - (100vw - var(--wc-gutter) * 2) / 2);
}

.kg-image { margin-inline: auto; }

.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.kg-embed-card iframe { max-width: 100%; }

.kg-bookmark-card a.kg-bookmark-container {
  display: flex;
  flex-direction: column;
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-card-radius);
  background: var(--wc-bg-base);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.kg-bookmark-content { padding: var(--wc-space-5); }

.kg-bookmark-title {
  font-family: var(--wc-font-display);
  font-weight: var(--wc-weight-medium);
  color: var(--wc-text-primary);
}

.kg-bookmark-description,
.kg-bookmark-metadata {
  margin-top: var(--wc-space-2);
  font-size: var(--wc-text-sm);
  color: var(--wc-text-secondary);
}

.kg-bookmark-thumbnail img { width: 100%; object-fit: cover; }

.kg-button-card a {
  display: inline-flex;
  align-items: center;
  height: var(--wc-control-h-md);
  padding-inline: var(--wc-control-px-md);
  border-radius: var(--wc-control-radius);
  background: var(--wc-brand-primary-dark);
  color: var(--wc-text-on-brand);
  font-weight: var(--wc-weight-medium);
  text-decoration: none;
}

.kg-callout-card {
  display: flex;
  gap: var(--wc-space-3);
  padding: var(--wc-space-5);
  border-radius: var(--wc-radius-lg);
  background: var(--wc-bg-subtle);
  border: var(--wc-border-width) solid var(--wc-border-subtle);
}

.kg-toggle-card {
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-radius-lg);
  padding: var(--wc-space-5);
}

/* ===================================================================== *
 * Author block
 * ===================================================================== */

.wc-author {
  display: flex;
  align-items: flex-start;
  gap: var(--wc-space-4);
  margin-top: var(--wc-space-10);
  padding-top: var(--wc-space-8);
  border-top: var(--wc-border-width) solid var(--wc-border-subtle);
}

.wc-author__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--wc-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--wc-bg-subtle);
}

.wc-author__name {
  font-family: var(--wc-font-display);
  font-weight: var(--wc-weight-medium);
  color: var(--wc-text-primary);
  text-decoration: none;
}

.wc-author__bio {
  margin-top: var(--wc-space-1);
  font-size: var(--wc-text-sm);
  color: var(--wc-text-secondary);
  line-height: var(--wc-leading-relaxed);
}

/* ===================================================================== *
 * Related — editorial navigation
 * ===================================================================== */

/* Follows the newsletter panel, so it sits on the canvas and keeps white
   cards — the same card family as every other feed, per the rule against a
   separate card language for related posts. */
.wc-related {
  margin-top: var(--wc-space-16);
  padding-bottom: var(--wc-space-8);
}

.wc-section__title {
  font-size: var(--wc-text-xl);
  margin-bottom: var(--wc-space-8);
}

.wc-feed-section { margin-bottom: var(--wc-space-20); }

/* ===================================================================== *
 * Newsletter — the single conversion CTA
 * ===================================================================== */

.wc-newsletter {
  margin-top: var(--wc-space-16);
  border-radius: var(--wc-card-radius);
  background: var(--wc-bg-strong);
  color: var(--wc-text-inverse);
  overflow: hidden;
}

.wc-newsletter__inner { padding: var(--wc-space-12); }

.wc-newsletter__title {
  margin-top: var(--wc-space-3);
  color: var(--wc-text-inverse);
  font-size: var(--wc-text-2xl);
  line-height: var(--wc-leading-snug);
  max-width: 22ch;
}

.wc-newsletter__text {
  margin-top: var(--wc-space-3);
  max-width: 54ch;
  color: rgb(255 255 255 / 82%);
  line-height: var(--wc-leading-relaxed);
}

.wc-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--wc-space-3);
  margin-top: var(--wc-space-8);
}

/* Field follows the Input primitive: persistent label (ui.md — a placeholder
   never replaces one), rounded-lg, white surface, subtle border. */
.wc-field {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-2);
  flex: 1 1 20rem;
  min-width: 0;
}

.wc-field__label {
  font-size: var(--wc-text-xs);
  font-weight: var(--wc-weight-medium);
  letter-spacing: var(--wc-tracking-wide);
  text-transform: uppercase;
  color: rgb(255 255 255 / 82%);
}

.wc-field__input {
  display: block;
  width: 100%;
  height: var(--wc-control-h-md);
  padding: var(--wc-input-py) var(--wc-input-px);
  border: var(--wc-border-width) solid var(--wc-border-subtle);
  border-radius: var(--wc-control-radius);
  background: var(--wc-bg-base);
  color: var(--wc-text-primary);
  font-family: var(--wc-font-body);
  font-size: var(--wc-text-sm);
  transition: border-color var(--wc-duration-base) var(--wc-easing),
              box-shadow var(--wc-duration-base) var(--wc-easing);
}

.wc-field__input::placeholder { color: var(--wc-text-secondary); }

/* The primitive uses a 2px brand ring on focus. */
.wc-field__input:focus {
  outline: none;
  border-color: var(--wc-brand-primary-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc-brand-primary-dark) 30%, transparent);
}

/* Ghost marks the form, so the invalid state mirrors the primitive's. */
.wc-newsletter__form.error .wc-field__input {
  border-color: var(--wc-accent-red);
}

.wc-newsletter__submit { flex: 0 0 auto; }

.wc-newsletter .wc-button--primary {
  background: var(--wc-bg-base);
  color: var(--wc-brand-primary-dark);
  box-shadow: none;
}

.wc-newsletter .wc-button--primary:hover {
  background: var(--wc-bg-subtle);
  color: var(--wc-brand-primary-dark);
}

.wc-newsletter :focus-visible { outline-color: var(--wc-bg-base); }

.wc-newsletter__busy,
.wc-newsletter__success { display: none; }

.wc-newsletter__form.loading .wc-newsletter__idle { display: none; }
.wc-newsletter__form.loading .wc-newsletter__busy { display: inline; }
.wc-newsletter__form.success .wc-newsletter__success { display: inline; color: var(--wc-text-inverse); }
.wc-newsletter__form.success .wc-field,
.wc-newsletter__form.success .wc-newsletter__submit { display: none; }

.wc-newsletter__status {
  flex: 1 1 100%;
  margin: 0;
  min-height: 1.25rem;
  font-size: var(--wc-text-sm);
}

.wc-newsletter__error { color: #ffd2c4; }
.wc-newsletter__error:empty { display: none; }

.wc-newsletter__legal {
  margin-top: var(--wc-space-5);
  font-size: var(--wc-text-xs);
  color: rgb(255 255 255 / 70%);
}

.wc-newsletter__legal a { color: var(--wc-text-inverse); }

/* ===================================================================== *
 * Infinite scroll
 * ===================================================================== */

.wc-more {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wc-space-3);
  margin-top: var(--wc-space-12);
  min-height: 3.5rem;
}

.wc-more__spinner {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--wc-border-muted);
  border-top-color: var(--wc-brand-primary-dark);
  border-radius: var(--wc-radius-pill);
  animation: wc-spin 700ms linear infinite;
}

@keyframes wc-spin { to { transform: rotate(360deg); } }

.wc-more__error {
  display: none;
  margin: 0;
  font-size: var(--wc-text-sm);
  color: var(--wc-text-secondary);
  text-align: center;
}

[data-state='loading'] .wc-more__link { visibility: hidden; }
[data-state='loading'] .wc-more__spinner { display: block; position: absolute; }
[data-state='error'] .wc-more__error { display: block; }

.wc-pagination-status {
  margin-top: var(--wc-space-6);
  font-size: var(--wc-text-sm);
  color: var(--wc-text-secondary);
  text-align: center;
}

[data-state='idle'] .wc-pagination-status,
[data-state='loading'] .wc-pagination-status { display: none; }

/* ===================================================================== *
 * Empty and error states
 * ===================================================================== */

.wc-empty {
  padding: var(--wc-space-16) 0;
  text-align: center;
  color: var(--wc-text-secondary);
}

.wc-empty__title { font-size: var(--wc-text-xl); margin-bottom: var(--wc-space-3); }

.wc-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--wc-space-24);
}

.wc-error__code {
  font-family: var(--wc-font-display);
  font-size: var(--wc-text-4xl);
  font-weight: var(--wc-weight-bold);
  /* Measured text-safe gradient, not the decorative one. */
  background: var(--wc-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: var(--wc-leading-tight);
}

.wc-error__message {
  margin-block: var(--wc-space-4) var(--wc-space-8);
  font-size: var(--wc-text-lg);
  color: var(--wc-text-secondary);
  max-width: var(--wc-max-prose);
}

.wc-error__stack {
  margin-top: var(--wc-space-8);
  max-width: var(--wc-max-content);
  text-align: start;
}

/* ===================================================================== *
 * Footer — mapped from the landing Footer
 * ===================================================================== */

.wc-footer {
  background: var(--wc-bg-strong);
  color: var(--wc-text-inverse);
  padding-block: var(--wc-space-16);
  margin-top: auto;
}

.wc-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wc-space-10);
}

@media (min-width: 48rem) {
  .wc-footer__grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

.wc-footer__logo-link {
  display: inline-flex;
  border-radius: var(--wc-radius-md);
}

.wc-footer__logo { height: 1.875rem; width: auto; }

.wc-footer__tagline {
  margin-top: var(--wc-space-3);
  max-width: 28ch;
  font-size: var(--wc-text-sm);
  color: rgb(255 255 255 / 70%);
  line-height: var(--wc-leading-relaxed);
}

.wc-footer__heading {
  margin: 0 0 var(--wc-space-3);
  font-family: var(--wc-font-body);
  font-size: var(--wc-text-xs);
  font-weight: var(--wc-weight-medium);
  letter-spacing: var(--wc-tracking-wide);
  text-transform: uppercase;
  color: rgb(255 255 255 / 60%);
}

.wc-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-2);
}

.wc-footer a {
  color: rgb(255 255 255 / 80%);
  font-size: var(--wc-text-sm);
  text-decoration: none;
  transition: color var(--wc-duration-base) var(--wc-easing);
}

.wc-footer a:hover { color: var(--wc-brand-primary); }

.wc-footer__divider {
  border: 0;
  border-top: var(--wc-border-width) solid rgb(255 255 255 / 10%);
  margin-block: var(--wc-space-10);
}

.wc-footer__note {
  margin: 0;
  font-size: var(--wc-text-xs);
  color: rgb(255 255 255 / 50%);
}

.wc-footer :focus-visible { outline-color: var(--wc-bg-base); }

/* ===================================================================== *
 * Responsive
 * ===================================================================== */

/* Review targets: 1440, 1024, 768, 390, 360. */
@media (max-width: 63.99rem) {
  /* Hero stacks: headline, support copy, then search immediately after — the
     search never falls below an unrelated full-width block. */
  .wc-hero { padding-block: var(--wc-space-12) var(--wc-space-8); }
  .wc-hero__title { max-width: 24ch; }
}

@media (max-width: 47.99rem) {
  .wc-main { padding-bottom: var(--wc-space-16); }

  .wc-hero { padding-block: var(--wc-space-10) var(--wc-space-6); }

  .wc-header__inner { min-height: 3.75rem; }
  .wc-logo__image { height: 1.625rem; }

  /* The keyboard hint is meaningless on touch, and the label would crowd the
     bar; the full search field is still in the hero. */
  .wc-search__kbd { display: none; }

  /* Both product actions stay reachable at every width — login is never
     dropped. The space comes from the compact logo instead. */
  .wc-header__actions { gap: var(--wc-space-1); }

  /* Topic strip scrolls horizontally rather than piling into ragged rows.
     Left-aligned so the first chip is flush and the next one peeks in as a
     scroll affordance. */
  .wc-topics { padding-bottom: var(--wc-space-8); }
  .wc-topics__list { justify-content: flex-start; }

  .wc-lead { margin-bottom: var(--wc-space-12); }
  .wc-lead__main-body { padding: var(--wc-space-6); }

  /* Secondary stories keep the thumbnail but tighten to stay legible. */
  .wc-lead__side { grid-template-columns: 6.5rem minmax(0, 1fr); }

  .wc-newsletter__inner { padding: var(--wc-space-6); }
  .wc-newsletter__form .wc-button,
  .wc-newsletter__submit { width: 100%; }

  .wc-article__head { padding-block: var(--wc-space-10) var(--wc-space-6); }
  .wc-article__hero { margin-bottom: var(--wc-space-8); }
  .wc-article__hero .wc-media { aspect-ratio: 16 / 9; }

  .wc-related { margin-top: var(--wc-space-12); padding-block: var(--wc-space-10); }

  .wc-archive-head { padding-block: var(--wc-space-10) var(--wc-space-8); }
  .wc-archive-head__author { gap: var(--wc-space-4); }
  .wc-archive-head__avatar { width: 3.25rem; height: 3.25rem; }

  .wc-footer { padding-block: var(--wc-space-12); }
  .wc-footer__divider { margin-block: var(--wc-space-8); }
}

@media (max-width: 29.99rem) {
  /* Compact navigation uses the symbol — Style Guide 1.1 sanctions the
     isolated symbol exactly for this, which is what keeps both product
     actions on screen at 360px. */
  .wc-logo__image--full { display: none; }
  .wc-logo__image--mark { display: block; height: 1.75rem; }

  .wc-button { padding-inline: var(--wc-space-4); }
  .wc-button--ghost { padding-inline: var(--wc-space-2); }

  .wc-lead__side { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--wc-space-3); }
  .wc-lead__main-body { padding: var(--wc-space-5); }
  .wc-newsletter__inner { padding: var(--wc-space-5); }
}

/* ===================================================================== *
 * Motion preference
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Movement is removed; nothing that carries meaning is hidden. The spinner
     keeps its shape and the status region still announces progress. */
  .wc-card:hover {
    transform: none;
  }

  .wc-more__spinner {
    animation: none;
  }
}

/* ===================================================================== *
 * Print
 * ===================================================================== */

@media print {
  .wc-header,
  .wc-footer,
  .wc-newsletter,
  .wc-more,
  .wc-related,
  .wc-pagination-status {
    display: none;
  }

  body {
    background: #fff;
  }
}