/* Spitfire Cowboy — v0.3 (round 2 design fixes) */

:root {
  --fire: #9a3f1f;
  --fire-light: rgb(196 90 44 / 10%);
  --fire-bg: rgb(196 90 44 / 5%);
  --steel: #1c2836;
  --steel-soft: #5f646b;
  --novel: #1f6a5d;
  --novel-light: rgb(46 139 122 / 12%);
  --novel-bg: rgb(46 139 122 / 6%);
  --buckle: #8a6527;
  --buckle-light: rgb(212 168 83 / 12%);
  --buckle-bg: rgb(212 168 83 / 6%);
  --parchment: #faf7f2;
  --dust: #6a6a6a;
  --olive: #4b5320;
  --olive-light: rgb(75 83 32 / 10%);
  --ink: #0b1118;
  --paper: var(--parchment);
  --border: rgb(28 40 54 / 14%);
  --shadow: rgb(28 40 54 / 8%);
  --roundel-sheen: rgb(196 90 44 / 6%);
  --roundel-sheen-alt: rgb(212 168 83 / 5%);
  --roundel-core: rgb(28 40 54 / 7%);

  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1080px;

  /* Spacing scale */
  --sp-xs: 8px;
  --sp-sm: 14px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 56px;
  --sp-2xl: 72px;
}

/* blueprint-ish background (subtle) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image:
    radial-gradient(circle 420px at 6% 14%, var(--roundel-sheen) 0% 32%, transparent 33%),
    radial-gradient(circle 360px at 94% 8%, var(--roundel-sheen-alt) 0% 27%, transparent 28%),
    radial-gradient(circle 290px at 74% 92%, var(--roundel-core) 0% 29%, transparent 30%),
    linear-gradient(to right, rgb(28 40 54 / 50%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(28 40 54 / 50%) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ── Inline comment (persona voice over post body) ─── */
.inline-comment {
  margin: var(--sp-md) 0;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--border);
  border-left: 5px solid var(--fire);
  border-radius: var(--radius-sm);
  background: var(--fire-bg);
  position: relative;
  overflow: hidden;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 99px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.comment-author a {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.comment-name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.comment-name:hover { opacity: 0.8; }

/* Persona name colors */
.inline-comment--john .comment-name    { color: var(--fire); }
.inline-comment--rowan .comment-name,
.comment--rowan .comment-name { color: var(--fire); }
.inline-comment--campion .comment-name,
.comment--campion .comment-name { color: var(--steel); }
.inline-comment--da .comment-name,
.comment--da .comment-name      { color: var(--buckle); }
.inline-comment--seton .comment-name,
.comment--seton .comment-name { color: var(--buckle); }

/* Agent dot badge on comment names */
.inline-comment--rowan .comment-name::before,
.inline-comment--campion .comment-name::before,
.inline-comment--seton .comment-name::before,
.inline-comment--da .comment-name::before,
.comment--rowan .comment-name::before,
.comment--campion .comment-name::before,
.comment--seton .comment-name::before,
.comment--da .comment-name::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.inline-comment--rowan .comment-name::before,
.comment--rowan .comment-name::before { background: var(--fire); }
.inline-comment--campion .comment-name::before,
.comment--campion .comment-name::before { background: var(--steel); }
.inline-comment--seton .comment-name::before,
.comment--seton .comment-name::before { background: var(--buckle); }
.inline-comment--da .comment-name::before,
.comment--da .comment-name::before { background: var(--buckle); }

/* Persona variants for inline comments (border and background) */
.inline-comment--john { border-left-color: var(--fire); background: var(--fire-bg); }

.inline-comment--rowan,
.comment--rowan { border-left-color: var(--fire); background: var(--fire-bg); }

.inline-comment--campion,
.comment--campion { border-left-color: var(--steel); background: rgb(28 40 54 / 5%); }

.inline-comment--da,
.comment--da { border-left-color: var(--buckle); background: var(--buckle-bg); }

.inline-comment--seton,
.comment--seton { border-left-color: var(--buckle); background: var(--buckle-bg); }

.page--workshop .inline-comment {
  margin: var(--sp-md) 0;
  padding: var(--sp-sm);
  border-left-width: 4px;
  box-shadow: none;
}

.page--workshop .inline-comment + .inline-comment,
.page--workshop .inline-comment + details.inline-comment {
  margin-top: 10px;
}

/* Human Voice pill (marks human-authored comments) */
.human-voice-pill {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--fire-light);
  color: var(--steel);
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Collapsible persona comments (details/summary) */
details.inline-comment { cursor: default; }
details.inline-comment summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.inline-comment summary::-webkit-details-marker { display: none; }
details.inline-comment summary::marker { display: none; content: ""; }
details.inline-comment .comment-toggle {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--steel-soft);
  opacity: 1;
  margin-left: auto;
  white-space: nowrap;
}
details.inline-comment[open] .comment-toggle { opacity: 0.85; }
details.inline-comment .comment-body { margin-top: 8px; }

/* Emoji avatar for non-GitHub personas */
.comment-avatar-emoji {
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Workshop: persona bylines */
.byline {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
}
.byline--john    { color: var(--fire);   background: var(--fire-light); }
.byline--rowan   { color: var(--steel);  background: rgb(28 40 54 / 10%); }
.byline--campion { color: var(--olive);  background: var(--olive-light); }
.byline--da      { color: var(--buckle); background: var(--buckle-light); }
.byline--seton   { color: var(--dust);   background: rgb(115 115 115 / 10%); }

/* ── Persona header ─────────────────────────────────── */
.persona-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 12px var(--sp-md);
  border: 1px solid var(--border);
  border-left: 5px solid var(--fire);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 80%);
  margin-bottom: var(--sp-md);
}
.persona-header .persona-avatar {
  width: 48px;
  height: 48px;
  border-radius: 99px;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.persona-header .persona-name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.persona-header .persona-role {
  font-size: 13px;
  color: var(--steel-soft);
}

.page--workshop .persona-header {
  padding: 0;
  border: 0;
  background: transparent;
  margin-bottom: var(--sp-sm);
  gap: 10px;
}

.page--workshop .persona-header .persona-avatar {
  width: 32px;
  height: 32px;
  border-width: 1px;
}

.page--workshop .persona-header .persona-name {
  letter-spacing: 0.06em;
}

.page--workshop .persona-header .persona-role {
  font-size: 12px;
}

.persona-header--john    { border-left-color: var(--fire); }
.persona-header--john    .persona-name { color: var(--fire); }

.persona-header--rowan   { border-left-color: var(--steel); }
.persona-header--rowan   .persona-name { color: var(--steel); }

.persona-header--campion { border-left-color: var(--olive); }
.persona-header--campion .persona-name { color: var(--olive); }

.persona-header--da      { border-left-color: var(--buckle); }
.persona-header--da      .persona-name { color: var(--buckle); }

.persona-header--seton   { border-left-color: var(--dust); }
.persona-header--seton   .persona-name { color: var(--dust); }

/* ── Tag pills ──────────────────────────────────────── */
.tag {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--steel-soft);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.tag:hover {
  color: var(--fire);
  border-color: var(--fire);
}

/* ── Pullquote ──────────────────────────────────────── */
.pullquote {
  margin: var(--sp-lg) 0;
  padding: var(--sp-md) var(--sp-lg);
  border-left: 4px solid var(--buckle);
  font-family: Bitter, Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--steel);
}

.page--workshop .pullquote {
  margin: var(--sp-md) 0;
  padding: var(--sp-sm) var(--sp-md);
  border-left: 4px solid var(--buckle);
  border-radius: 0;
  background: rgb(255 255 255 / 78%);
}

.page--workshop .read-toggle {
  margin-bottom: var(--sp-sm);
}

.page--workshop .read-mode-note {
  margin: 0 0 10px;
}

.page--workshop .notes {
  margin-top: var(--sp-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 82%);
  padding: var(--sp-sm) var(--sp-md);
}

.page--workshop .reader-prompt summary {
  margin: var(--sp-sm) 0 0;
}

.page--workshop .reader-prompt pre {
  font-size: 12px;
}

/* ===================================================================
   CAROUSEL (redesigned — auto-height, bottom controls, styled text slides)
   =================================================================== */
.carousel {
  position: relative;
  margin-top: var(--sp-lg);
}

.carousel-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: rgb(255 255 255 / 85%);
  border-radius: var(--radius);
  box-shadow: 0 2px 16px var(--shadow);
  overflow: hidden;
}

/* --- Slides --- */
.carousel-slide {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  animation: carouselFadeIn 0.3s ease-out;
}

@keyframes carouselFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.carousel-slide[hidden] {
  display: none;
}

.carousel-slide h2 {
  font-family: Bitter, Georgia, serif;
  font-size: clamp(22px, 3vw, 28px);
  margin: var(--sp-sm) 0 var(--sp-xs);
  color: var(--steel);
}

.carousel-slide p {
  margin: var(--sp-xs) 0;
}

/* Hero image slide media */
.carousel-media {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgb(28 40 54 / 10%), rgb(161 79 45 / 14%)),
    rgb(28 40 54 / 5%);
  margin-top: var(--sp-sm);
  margin-inline: auto;
}

.carousel-media::before {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background-image: var(--carousel-backdrop-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(42px) saturate(1.12);
  opacity: 0.92;
  transform: scale(1.08);
}

.carousel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, rgb(17 26 35 / 26%) 0%, transparent 16%, transparent 84%, rgb(17 26 35 / 22%) 100%),
    linear-gradient(180deg, rgb(17 26 35 / 4%) 0%, rgb(17 26 35 / 12%) 100%);
}

.carousel-media picture {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.carousel-media img {
  width: auto;
  height: 100%;
  max-width: calc(100% - clamp(36px, 7vw, 88px));
  max-height: none;
  object-fit: contain;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgb(17 26 35 / 18%);
  display: block;
}

/* --- Text-only slide accents --- */
.carousel-slide--fire {
  border-left: 6px solid var(--fire);
  background:
    linear-gradient(135deg, var(--fire-light) 0%, var(--fire-bg) 40%, transparent 80%);
  padding: var(--sp-sm) var(--sp-md) var(--sp-lg);
  min-height: 200px;
  justify-content: center;
}

.carousel-slide--buckle {
  border-left: 6px solid var(--buckle);
  background:
    linear-gradient(135deg, var(--buckle-light) 0%, var(--buckle-bg) 40%, transparent 80%);
  padding: var(--sp-sm) var(--sp-md) var(--sp-lg);
  min-height: 200px;
  justify-content: center;
}

.carousel-slide--steel {
  border-left: 6px solid var(--steel);
  background:
    linear-gradient(135deg, rgb(28 40 54 / 10%) 0%, rgb(28 40 54 / 5%) 40%, transparent 80%);
  padding: var(--sp-sm) var(--sp-md) var(--sp-lg);
  min-height: 200px;
  justify-content: center;
}

.carousel-slide--fire h2,
.carousel-slide--buckle h2,
.carousel-slide--steel h2 {
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: var(--sp-xs);
}

.carousel-slide--fire .small,
.carousel-slide--buckle .small {
  font-size: 16px;
  line-height: 1.6;
  max-width: 55ch;
  color: var(--steel-soft);
}

.carousel-slide--fire a,
.carousel-slide--buckle a {
  font-weight: 600;
}

/* --- Bottom control bar (prev · dots · next) --- */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  border-top: 1px solid var(--border);
  background: rgb(28 40 54 / 3%);
}

.carousel-btn {
  border: 1px solid var(--border);
  background: rgb(255 255 255 / 80%);
  color: var(--steel);
  border-radius: var(--radius-sm);
  padding: 6px 16px;
  min-height: 44px;
  min-width: 72px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.carousel-btn:hover {
  background: var(--steel);
  color: #fff;
  border-color: var(--steel);
}

.carousel-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.carousel-btn[disabled]:hover {
  background: rgb(255 255 255 / 80%);
  color: var(--steel);
  border-color: var(--border);
}

.carousel-dots {
  display: flex;
  gap: 10px;
}

.carousel-dot {
  width: 44px;
  height: 44px;
  border-radius: 99px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform 0.2s;
}
.carousel-dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: rgb(28 40 54 / 12%);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.carousel-dot:hover::after {
  background: rgb(28 40 54 / 25%);
  transform: scale(1.15);
}

.carousel-dot[aria-current="true"]::after {
  background: var(--fire);
  border-color: var(--fire);
  transform: scale(1.15);
}

.hero-placeholder {
  min-height: 220px;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 18px;
  background:
    radial-gradient(1200px 420px at 20% 10%, rgb(212 168 83 / 25%), transparent 60%),
    radial-gradient(900px 360px at 80% 30%, rgb(196 90 44 / 22%), transparent 55%),
    linear-gradient(180deg, rgb(28 40 54 / 8%), rgb(28 40 54 / 3%));
}

/* --- Motto tag --- */
.motto {
  display: inline-block;
  margin-top: var(--sp-sm);
  padding: var(--sp-xs) 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgb(255 255 255 / 60%);
  font-size: 14px;
}

/* --- Sub (intro text) --- */
.sub {
  font-size: 18px;
  line-height: 1.72;
  color: var(--steel-soft);
  max-width: 68ch;
  margin: 6px 0 0;
}

/* ===================================================================
   GRID + CARDS
   =================================================================== */
.grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: calc(var(--sp-md) + 8px);
}

.card {
  border: 1px solid var(--border);
  background: rgb(255 255 255 / 85%);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 4px 20px rgb(28 40 54 / 12%);
}

.card .pad { padding: calc(var(--sp-md) + 4px); }

/* "On the runway" cards — dashed, muted, olive accent */
.card--runway {
  border-style: dashed;
  border-color: rgb(28 40 54 / 18%);
  background:
    linear-gradient(135deg, var(--olive-light) 0%, transparent 50%),
    rgb(255 255 255 / 70%);
  box-shadow: none;
}

.card--runway:hover {
  border-color: var(--olive);
  box-shadow: 0 2px 12px rgb(75 83 32 / 10%);
}

.card--runway .badge .dot {
  background: var(--olive);
}

.card--runway .status {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dust);
  margin-top: 4px;
}

.team-mark {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgb(28 40 54 / 12%);
  color: var(--steel);
  background: rgb(255 255 255 / 82%);
}

.team-mark-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-block;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid rgb(28 40 54 / 12%);
  box-shadow: 0 2px 10px rgb(28 40 54 / 8%);
}

.team-mark--emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0;
}

.team-mark--john {
  color: var(--fire);
  background: linear-gradient(135deg, var(--fire-light) 0%, rgb(255 255 255 / 92%) 100%);
}

.team-mark--rowan {
  color: var(--steel);
  background: linear-gradient(135deg, rgb(28 40 54 / 10%) 0%, rgb(255 255 255 / 92%) 100%);
}

.team-mark--campion {
  color: var(--olive);
  background: linear-gradient(135deg, var(--olive-light) 0%, rgb(255 255 255 / 92%) 100%);
}

.team-mark--seton {
  color: var(--dust);
  background: linear-gradient(135deg, rgb(115 115 115 / 10%) 0%, rgb(255 255 255 / 92%) 100%);
}

.team-mark--da {
  color: var(--buckle);
  background: linear-gradient(135deg, var(--buckle-light) 0%, rgb(255 255 255 / 92%) 100%);
}

.team-profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
}

.team-profile-mark {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgb(28 40 54 / 12%);
  color: var(--steel);
  background: rgb(255 255 255 / 85%);
  box-shadow: 0 2px 10px rgb(28 40 54 / 8%);
}

.team-profile-mark--emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 52px;
  font-weight: 400;
  letter-spacing: 0;
}

.team-profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
  border: 1px solid rgb(28 40 54 / 12%);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 2px 10px rgb(28 40 54 / 8%);
}

.team-profile-mark--john {
  color: var(--fire);
  background: linear-gradient(135deg, var(--fire-light) 0%, rgb(255 255 255 / 94%) 100%);
}

.team-profile-mark--rowan {
  color: var(--steel);
  background: linear-gradient(135deg, rgb(28 40 54 / 10%) 0%, rgb(255 255 255 / 94%) 100%);
}

.team-profile-mark--campion {
  color: var(--olive);
  background: linear-gradient(135deg, var(--olive-light) 0%, rgb(255 255 255 / 94%) 100%);
}

.team-profile-mark--seton {
  color: var(--dust);
  background: linear-gradient(135deg, rgb(115 115 115 / 10%) 0%, rgb(255 255 255 / 94%) 100%);
}

.team-profile-mark--da {
  color: var(--buckle);
  background: linear-gradient(135deg, var(--buckle-light) 0%, rgb(255 255 255 / 94%) 100%);
}

.team-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.team-profile-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--steel-soft);
  background: rgb(255 255 255 / 78%);
}

.team-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

.team-profile-grid .card {
  height: 100%;
}

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  background: rgb(255 255 255 / 50%);
}

.badge .dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--fire);
  flex-shrink: 0;
}

/* --- List --- */
.list {
  margin: var(--sp-sm) 0 0;
  padding-left: 18px;
}
.list li + li {
  margin-top: 6px;
}
.list a {
  -webkit-tap-highlight-color: rgb(214 69 44 / 25%);
}
.list a:active {
  opacity: 0.72;
}

/* ===================================================================
   SECTIONS
   =================================================================== */
.section {
  padding: calc(var(--sp-lg) + 8px) 0 0;
  position: relative;
  overflow: hidden;
}

.section + .section {
  padding-top: calc(var(--sp-md) + 8px);
}

.section h2 {
  font-family: Bitter, Georgia, serif;
  margin: 0 0 var(--sp-xs);
  color: var(--steel);
}

.section > .small {
  margin-bottom: var(--sp-md);
}

.section > p,
.section > ul,
.section > ol,
.section > blockquote {
  max-width: 72ch;
  line-height: 1.78;
}

.section > p + p,
.section > p + ul,
.section > p + ol,
.section > ul + p,
.section > ol + p,
.section > blockquote + p,
.section > figure + p,
.section > p + figure {
  margin-top: 1.1rem;
}

/* --- Columns --- */
.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
}

/* --- Pill (upgraded) --- */
.pill {
  border: 1px solid var(--border);
  border-left: 4px solid var(--fire);
  background: rgb(255 255 255 / 80%);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.pill--buckle { border-left-color: var(--buckle); }
.pill--steel  { border-left-color: var(--steel); }
.pill--fire   { border-left-color: var(--fire); }

.pill:hover {
  box-shadow: 0 2px 12px var(--shadow);
}

.pill strong {
  display: block;
  font-family: Bitter, Georgia, serif;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--steel);
}

/* ===================================================================
   PATTERN + ANTIPATTERN CARDS
   =================================================================== */
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-md);
}

.pattern-card {
  border: 1px solid var(--border);
  background: rgb(255 255 255 / 85%);
  border-radius: var(--radius);
  padding: calc(var(--sp-md) + 4px);
  box-shadow: 0 2px 12px var(--shadow);
  transition: box-shadow 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.pattern-card:hover {
  box-shadow: 0 4px 20px rgb(28 40 54 / 12%);
}

.pattern-card h3 {
  font-family: Bitter, Georgia, serif;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--steel);
}

.pattern-card p {
  margin: 0;
  font-size: 15px;
  color: var(--steel-soft);
  line-height: 1.6;
}

.pattern-card--fire {
  border-left: 4px solid var(--fire);
}

.pattern-card--buckle {
  border-left: 4px solid var(--buckle);
}

.pattern-card--steel {
  border-left: 4px solid var(--steel);
}

.pattern-card--novel {
  border-left: 4px solid var(--novel);
}

/* Anti-pattern cards */
.antipattern-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--fire);
  background: rgb(255 255 255 / 85%);
  border-radius: var(--radius);
  padding: calc(var(--sp-md) + 4px);
  box-shadow: 0 2px 12px var(--shadow);
  transition: box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.antipattern-card:hover {
  box-shadow: 0 4px 20px rgb(28 40 54 / 12%);
}

.antipattern-card h3 {
  font-family: Bitter, Georgia, serif;
  font-size: 16px;
  margin: 0 0 var(--sp-sm);
  color: var(--steel);
}

.antipattern-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--sp-sm);
  font-size: 14px;
  line-height: 1.55;
}

.antipattern-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--dust);
  padding-top: 2px;
}

.antipattern-value {
  color: var(--steel-soft);
}

/* Failure callout */
.failure-callout {
  margin-top: var(--sp-md);
  padding: calc(var(--sp-md) + 4px);
  border: 1px solid var(--border);
  border-left: 5px solid var(--buckle);
  border-radius: var(--radius-sm);
  background: var(--buckle-light);
  font-size: 15px;
  color: var(--steel-soft);
  position: relative;
  overflow: hidden;
}

.failure-callout strong {
  color: var(--steel);
}

.anti-intro-grid {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.anti-intro-card {
  margin: 0;
}

.anti-clusters {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.failure-cluster {
  display: grid;
  gap: calc(var(--sp-md) + 8px);
}

.failure-cluster-head {
  max-width: 56rem;
}

.failure-cluster-head h2 {
  margin-bottom: 0.45rem;
}

.hero::before,
.section::before,
.card::before,
.pill::before,
.pattern-card::before,
.antipattern-card::before,
.cta-card::before,
.inline-comment::before,
.failure-callout::before,
.page--workshop .workshop-index::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 16%, var(--roundel-sheen) 0 13%, transparent 14%),
    radial-gradient(circle at 16% 86%, var(--roundel-sheen-alt) 0 11%, transparent 12%);
  z-index: 0;
}

.hero > *,
.section > *,
.card > *,
.pill > *,
.pattern-card > *,
.antipattern-card > *,
.cta-card > *,
.inline-comment > *,
.failure-callout > *,
.page--workshop .workshop-index > * {
  position: relative;
  z-index: 1;
}

/* ===================================================================
   SMALL / CAPTION
   =================================================================== */
.small {
  color: var(--steel-soft);
  font-size: 13px;
}

/* ===================================================================
   CTA (expanded — email + intake prompt)
   =================================================================== */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-md);
}

.cta-buttons {
  display: flex;
  gap: var(--sp-sm);
  flex-shrink: 0;
}

.cta-card {
  border: 1px solid var(--border);
  border-left: 5px solid var(--fire);
  background:
    linear-gradient(135deg, var(--fire-bg) 0%, var(--buckle-bg) 100%),
    rgb(255 255 255 / 90%);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgb(28 40 54 / 10%);
  overflow: hidden;
  transition: box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.cta-card:hover {
  box-shadow: 0 6px 32px rgb(28 40 54 / 14%);
}

/* CTA stacked layout (for email + intake dual option) */
.cta-stack {
  padding: var(--sp-md);
}

.cta-stack h2 {
  font-family: Bitter, Georgia, serif;
  margin: 0 0 var(--sp-xs);
  color: var(--steel);
}

.cta-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}

.cta-option {
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 70%);
}

.cta-option strong {
  display: block;
  font-family: Bitter, Georgia, serif;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--steel);
}

.cta-option .small {
  margin-bottom: var(--sp-sm);
}

/* Copyable URL display */
.copy-url {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  padding: 4px 8px;
  background: rgb(28 40 54 / 6%);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--steel);
  word-break: break-all;
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  min-height: 44px;
  border: none;
  background: var(--fire);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.button:hover {
  background: #a94b24;
  text-decoration: none;
  color: #fff;
  transform: translateY(-1px);
}
.button:active {
  transform: translateY(0);
}

.button--secondary {
  background: var(--steel);
}
.button--secondary:hover {
  background: #14202e;
}

.button--outline {
  background: transparent;
  color: var(--fire);
  border: 2px solid var(--fire);
  padding: 10px 20px;
}
.button--outline:hover {
  background: var(--fire);
  color: #fff;
}

.button--buckle {
  background: var(--buckle);
  color: #fff;
}
.button--buckle:hover {
  background: #795920;
  color: #fff;
}

.button--outline-fire {
  background: transparent;
  color: var(--fire);
  border: 2px solid var(--fire);
  padding: 10px 20px;
}
.button--outline-fire:hover {
  background: var(--fire);
  color: #fff;
}

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer {
  background: var(--steel);
  margin-top: var(--sp-xl);
}
.site-footer .wrap {
  padding-top: 22px;
  padding-bottom: 22px;
}
.site-footer-inner {
  color: rgb(255 255 255 / 72%);
  font-size: 13px;
}
.site-footer-inner a {
  color: rgb(255 255 255 / 80%);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer-inner a:hover {
  color: #fff;
  text-decoration: none;
}

/* ===================================================================
   CODE
   =================================================================== */
code, pre {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Inline code chips in article prose for better command readability */
.section code {
  padding: 0.08em 0.4em;
  border-radius: 6px;
  background: rgb(28 40 54 / 7%);
  border: 1px solid rgb(28 40 54 / 16%);
  color: var(--steel);
  font-size: 0.93em;
}

.section pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ===================================================================
   PAGE ACCENT KICKERS + HERO DIFFERENTIATION
   =================================================================== */
.page--patterns .kicker { color: var(--buckle); }
.page--anti-patterns .kicker { color: var(--fire); }
.page--novel .kicker { color: var(--novel); }
.page--projects .kicker { color: var(--fire); }
.page--workshop .kicker { color: var(--fire); }

/* --- Roundel (CSS-only RAF-inspired, palette-shifted) --- */
.roundel {
  --roundel-size: 180px;
  width: var(--roundel-size);
  height: var(--roundel-size);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      var(--steel) 22%,
      var(--parchment) 22% 44%,
      var(--fire) 44% 100%
    );
  opacity: 0.08;
  position: absolute;
  pointer-events: none;
  flex-shrink: 0;
}

/* Patterns hero — buckle/gold accent + roundel watermark */
.page--patterns .hero {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--buckle);
  padding-bottom: var(--sp-md);
  background:
    radial-gradient(
      circle 140px at 92% 50%,
      rgb(212 168 83 / 7%) 22%,
      rgb(250 247 242 / 5%) 22% 44%,
      rgb(28 40 54 / 4%) 44%,
      transparent 100%
    ),
    linear-gradient(135deg, var(--buckle-light) 0%, var(--buckle-bg) 30%, transparent 70%);
  border-radius: var(--radius);
  padding-left: var(--sp-md);
  padding-right: var(--sp-md);
  margin-left: calc(-1 * var(--sp-md));
  margin-right: calc(-1 * var(--sp-md));
}

.page--patterns .hero h1::before {
  content: "\2714 ";  /* checkmark — no emoji variant, renders in text color */
  color: var(--steel);
}

/* Hero with icon layout */
.hero--with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}

.hero-content {
  flex: 1;
  min-width: 0;
}

.hero-icon {
  width: 140px;
  height: 140px;
  border-radius: var(--radius);
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgb(28 40 54 / 15%));
}

/* Full-width hero banner image */
.hero + .hero-img,
.hero + picture.hero-picture .hero-img {
  margin-top: var(--sp-sm);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
  max-height: none;
  object-fit: contain;
  display: block;
  box-shadow: 0 4px 20px var(--shadow);
}

/* Anti-patterns hero — fire/red warning accent + roundel watermark */
.page--anti-patterns .hero {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--fire);
  padding-bottom: var(--sp-md);
  background:
    radial-gradient(
      circle 140px at 92% 50%,
      rgb(196 90 44 / 7%) 22%,
      rgb(250 247 242 / 5%) 22% 44%,
      rgb(28 40 54 / 4%) 44%,
      transparent 100%
    ),
    linear-gradient(135deg, var(--fire-light) 0%, var(--fire-bg) 30%, transparent 70%);
  border-radius: var(--radius);
  padding-left: var(--sp-md);
  padding-right: var(--sp-md);
  margin-left: calc(-1 * var(--sp-md));
  margin-right: calc(-1 * var(--sp-md));
}

.page--anti-patterns .hero h1::before {
  content: "\26A0\FE0F ";  /* warning sign */
}

.page--404 .hero {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--steel);
  background:
    radial-gradient(circle 180px at 88% 28%, rgb(28 40 54 / 8%) 0 18%, transparent 19%),
    linear-gradient(135deg, rgb(28 40 54 / 5%) 0%, rgb(169 114 43 / 8%) 42%, transparent 72%);
}

.page--404 .hero h1 {
  max-width: 14ch;
}

.route-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: var(--sp-md);
}

.route-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgb(255 255 255 / 78%);
  color: var(--steel);
  text-decoration: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.route-pill:hover,
.route-pill:focus-visible {
  border-color: var(--steel);
  background: rgb(255 255 255 / 92%);
}

.page-404-grid {
  align-items: stretch;
}

/* Novel page hero — teal accent */
.page--novel .hero {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--novel);
  padding-bottom: var(--sp-md);
  background:
    radial-gradient(
      circle 140px at 92% 50%,
      rgb(46 139 122 / 7%) 22%,
      rgb(250 247 242 / 5%) 22% 44%,
      rgb(46 139 122 / 4%) 44%,
      transparent 100%
    ),
    linear-gradient(135deg, var(--novel-light) 0%, var(--novel-bg) 30%, transparent 70%);
  border-radius: var(--radius);
  padding-left: var(--sp-md);
  padding-right: var(--sp-md);
  margin-left: calc(-1 * var(--sp-md));
  margin-right: calc(-1 * var(--sp-md));
}

.page--novel .hero h1::before {
  content: "\26A1 ";  /* lightning bolt */
  color: var(--novel);
}

/* Workshop hero — fire/brand accent */
.page--workshop .hero {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--fire);
  padding-bottom: var(--sp-md);
  background:
    radial-gradient(
      circle 140px at 92% 50%,
      rgb(196 90 44 / 7%) 22%,
      rgb(250 247 242 / 5%) 22% 44%,
      rgb(28 40 54 / 4%) 44%,
      transparent 100%
    ),
    linear-gradient(135deg, var(--fire-light) 0%, var(--fire-bg) 30%, transparent 70%);
  border-radius: var(--radius);
  padding-left: var(--sp-md);
  padding-right: var(--sp-md);
  margin-left: calc(-1 * var(--sp-md));
  margin-right: calc(-1 * var(--sp-md));
}

.page--workshop .hero h1::before {
  content: "\1F527 ";  /* wrench */
}

.page--workshop .section h2::after {
  display: none;
}

.page--workshop .card {
  border-left: 2px solid rgb(154 63 31 / 40%);
  background: rgb(255 255 255 / 94%);
  box-shadow: none;
}

.page--workshop .card:hover {
  box-shadow: none;
}

.page--workshop .workshop-index {
  display: grid;
  gap: 14px;
  padding-top: var(--sp-md);
  position: relative;
  overflow: hidden;
}

.page--workshop .workshop-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.8fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-bottom: clamp(0.5rem, 1.4vw, 0.9rem);
}

.page--workshop .workshop-ledger-main .pad,
.page--workshop .workshop-ledger-side .pad {
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
}

.page--workshop .workshop-ledger-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dust);
}

.page--workshop .workshop-ledger-main h2,
.page--workshop .workshop-archive-head h2 {
  margin: 0.35rem 0 0;
}

.page--workshop .workshop-ledger-main h2 a {
  color: var(--steel);
  text-decoration: none;
}

.page--workshop .workshop-ledger-main h2 a:hover,
.page--workshop .workshop-ledger-main h2 a:focus-visible {
  color: var(--fire);
}

.page--workshop .workshop-ledger-meta {
  margin: 0.55rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dust);
}

.page--workshop .workshop-ledger-main p:not(.workshop-ledger-meta) {
  max-width: 62ch;
}

.page--workshop .workshop-ledger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.page--workshop .workshop-ledger-stats {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.page--workshop .workshop-ledger-stats strong {
  display: block;
  font-family: Bitter, Georgia, serif;
  font-size: 1rem;
  color: var(--steel);
}

.page--workshop .workshop-ledger-stats span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.86rem;
  color: var(--steel-soft);
}

.page--workshop .workshop-archive-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0 0.2rem;
}

.page--workshop .workshop-archive-head .small {
  max-width: 62ch;
  margin: 0.45rem 0 0;
}

.page--workshop .workshop-card {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.page--workshop .card .pad {
  padding: 14px 16px;
}

.page--workshop .workshop-card-pad {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.page--workshop .workshop-card-emoji {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}

.page--workshop .workshop-card-meta {
  min-width: 0;
}

.page--workshop .workshop-card-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  opacity: 0.94;
}

.page--workshop .workshop-card-label--fire { color: var(--fire); }
.page--workshop .workshop-card-label--novel { color: var(--novel); }
.page--workshop .workshop-card-label--steel { color: var(--steel); }
.page--workshop .workshop-card-label--buckle { color: var(--buckle); }

.page--workshop .workshop-card-date {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--dust);
  margin-bottom: 4px;
}

.page--workshop .workshop-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.page--workshop .workshop-card-tag {
  font-size: 10px;
  padding: 2px 8px;
}

.page--workshop .workshop-card-title {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
}

.page--workshop .workshop-card-desc {
  margin-top: 6px;
  opacity: 1;
  color: var(--steel-soft);
}

.page--workshop .workshop-card-title,
.page--workshop .workshop-card-desc {
  max-width: 70ch;
}

.tag-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}

.tag-directory-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.tag-directory-card .pad {
  height: 100%;
}

.tag-directory-card-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--dust);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

.tag-directory-preview {
  margin-top: 10px;
  color: var(--steel-soft);
}

.tag-directory-preview li + li {
  margin-top: 4px;
}

.page--workshop .card--workshop-meta,
.page--workshop .team-workshop-posts,
.page--workshop .workshop-crosslinks {
  border-left-color: var(--steel);
}

.page--workshop .workshop-article-lede {
  margin-top: 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgb(28 40 54 / 12%);
}

.page--workshop .workshop-lede-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.page--workshop .workshop-series-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.page--workshop .workshop-series-link {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgb(28 40 54 / 10%);
  border-radius: 12px;
  background: rgb(255 255 255 / 76%);
  text-decoration: none;
  color: inherit;
}

.page--workshop .workshop-series-link:hover,
.page--workshop .workshop-series-link:focus-visible {
  border-color: rgb(154 63 31 / 28%);
  background: rgb(255 255 255 / 92%);
}

.page--workshop .workshop-series-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dust);
}

.page--workshop .workshop-series-title {
  color: var(--steel);
  line-height: 1.35;
}

.page--workshop .workshop-lede-pill {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dust);
  text-decoration: none;
}

.page--workshop .workshop-lede-pill--link:hover,
.page--workshop .workshop-lede-pill--link:focus-visible {
  color: var(--fire);
}

.page--workshop .workshop-lede-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 8px;
}

.page--workshop .workshop-crosslinks-list {
  list-style: none;
  margin: 8px 0 0;
  padding-left: 0;
  display: grid;
  gap: 6px;
}

.page--workshop .workshop-crosslinks-list li {
  margin: 0;
  padding: 6px 0;
  border-top: 1px solid rgb(28 40 54 / 10%);
}

.page--workshop .workshop-crosslinks-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.page--workshop .workshop-crosslinks-list strong {
  display: inline-block;
  margin-right: 6px;
}

.page--workshop .workshop-crosslinks {
  margin-top: var(--sp-lg);
  padding-top: 10px;
  border-top: 1px solid rgb(28 40 54 / 12%);
}

.page--workshop .workshop-crosslinks-heading {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dust);
}

.page--workshop .workshop-meta-card {
  max-width: min(74ch, 100%);
}

.page--workshop .workshop-byline {
  margin: 10px 0 0;
  color: var(--dust);
}

.page--workshop .workshop-byline strong {
  color: var(--steel);
}

.page--workshop .workshop-byline a {
  color: inherit;
}

.page--workshop .workshop-byline a:hover,
.page--workshop .workshop-byline a:focus-visible {
  color: var(--fire);
}

.page--workshop .author-bio--compact p,
.page--workshop .workshop-byline {
  margin: 0;
}

.page--workshop .section > p {
  margin: 0;
}

.page--workshop .section > p + p {
  margin-top: 1.55rem;
}

.page--workshop .section > p + h2,
.page--workshop .section > p + figure,
.page--workshop .section > p + blockquote,
.page--workshop .section > p + .pullquote,
.page--workshop .section > p + details.inline-comment,
.page--workshop .section > p + .inline-comment,
.page--workshop .section > p + .card,
.page--workshop .section > p + .workshop-crosslinks,
.page--workshop .section > p + .workshop-metadata {
  margin-top: 1.75rem;
}

.page--brief .hero {
  margin-bottom: calc(var(--sp-lg) + 4px);
}

.page--brief .hero .sub {
  max-width: 42rem;
}

.brief-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.85fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}

.brief-main,
.brief-sidebar {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.brief-sidebar {
  position: sticky;
  top: calc(72px + var(--sp-sm));
}

.brief-card .pad {
  padding: clamp(1.15rem, 2.4vw, 1.7rem);
}

.brief-card--questions .pad {
  padding: clamp(1.35rem, 2.7vw, 2rem);
}

.brief-intro,
.brief-sidebar-copy {
  max-width: 40ch;
  margin: 0.75rem 0 0;
  color: var(--steel-soft);
}

.brief-question-list {
  display: grid;
  gap: 0.95rem;
  margin-top: 1.1rem;
}

.brief-question-list li,
.brief-next-list li,
.brief-checklist li {
  margin: 0;
}

.brief-question-list li + li,
.brief-next-list li + li,
.brief-checklist li + li {
  margin-top: 0;
}

.brief-question-list strong {
  color: var(--steel);
}

.brief-next-list,
.brief-checklist {
  display: grid;
  gap: 0.72rem;
  margin-top: 0.95rem;
}

.brief-actions {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.1rem;
}

.brief-actions .button {
  width: 100%;
}

.brief-note {
  padding: 1rem 1.1rem;
}

.brief-note strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--steel);
}

.brief-note p {
  margin: 0;
  max-width: 42ch;
}

/* Collapsible metadata cards (Workshop) */
.page--workshop .workshop-metadata {
  display: block;
}

.page--workshop .workshop-metadata-summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0;
  padding: 9px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--steel);
  background:
    radial-gradient(circle at 17% 32%, var(--roundel-sheen) 0 24%, transparent 25%),
    radial-gradient(circle at 82% 74%, var(--roundel-sheen-alt) 0 19%, transparent 20%),
    rgb(250 247 242 / 80%);
}

.page--workshop .workshop-metadata summary::-webkit-details-marker,
.page--workshop .workshop-metadata summary::marker {
  display: none;
}

.page--workshop .workshop-metadata-summary::before {
  content: "▸";
  color: var(--fire);
  font-size: 11px;
}

.page--workshop .workshop-metadata[open] .workshop-metadata-summary::before {
  content: "▾";
}

.page--workshop .workshop-metadata[open] .workshop-metadata-summary {
  border-bottom: 0;
}

.page--workshop .workshop-metadata-summary:focus-visible {
  outline: 3px solid var(--fire);
  outline-offset: 3px;
  border-color: var(--fire);
}

.page--workshop .workshop-metadata > .card {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Per-card accent overrides for workshop index */
.page--workshop .card--fire   { border-left-color: var(--fire); }
.page--workshop .card--novel  { border-left-color: var(--novel); }
.page--workshop .card--steel  { border-left-color: var(--steel); }
.page--workshop .card--buckle { border-left-color: var(--buckle); }

.page--workshop .badge .dot {
  background: currentcolor;
  width: 5px;
  height: 5px;
  opacity: 0.6;
}

/* Per-dot accent colors */
.page--workshop .dot--fire   { background: var(--fire); }
.page--workshop .dot--novel  { background: var(--novel); }
.page--workshop .dot--steel  { background: var(--steel); }
.page--workshop .dot--buckle { background: var(--buckle); }

.page--novel .section h2::after {
  background:
    radial-gradient(
      circle,
      var(--steel) 22%,
      var(--parchment) 22% 44%,
      var(--novel) 44% 100%
    );
}

.page--novel .antipattern-card {
  border-left-color: var(--novel);
}

/* Roundel accent on section dividers */
.section h2::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 10px;
  vertical-align: middle;
  background:
    radial-gradient(
      circle,
      var(--steel) 22%,
      var(--parchment) 22% 44%,
      var(--buckle) 44% 100%
    );
  opacity: 0.35;
}

.page--anti-patterns .section h2::after {
  background:
    radial-gradient(
      circle,
      var(--steel) 22%,
      var(--parchment) 22% 44%,
      var(--fire) 44% 100%
    );
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (width <= 880px) {
  .grid { grid-template-columns: 1fr; }
  .columns { grid-template-columns: 1fr; }
  .pattern-grid { grid-template-columns: 1fr; }
  .cta-options { grid-template-columns: 1fr; }
  .brief-shell { grid-template-columns: 1fr; }
  .brief-sidebar { position: static; }
  .page--workshop .workshop-ledger { grid-template-columns: 1fr; }
  .page--workshop .workshop-ledger-actions { flex-direction: column; }
  .page--workshop .workshop-ledger-actions .button { width: 100%; }
  .page--workshop .workshop-crosslinks-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .page--workshop .workshop-series-nav {
    grid-template-columns: 1fr;
  }
}

@media (width >= 881px) {
  .page--workshop .workshop-crosslinks-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }
}

@media (width <= 720px) {
  .cta {
    flex-direction: column;
    text-align: center;
  }
  .cta-buttons {
    width: 100%;
    flex-direction: column;
  }
  .cta-buttons .button {
    width: 100%;
  }
  .pill {
    border-radius: var(--radius);
  }
  .antipattern-meta {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .antipattern-label {
    margin-top: var(--sp-xs);
  }
  .brand-mark {
    width: auto;
    height: 42px;
  }
  .brand-title strong {
    font-size: 18px;
  }
  .brand-title span {
    font-size: 12px;
  }
  .section {
    padding-top: var(--sp-md);
  }
  .section + .section {
    padding-top: var(--sp-sm);
  }
  .sub {
    font-size: 16px;
    line-height: 1.6;
  }
  .carousel {
    margin-top: var(--sp-md);
  }
  .carousel-slide {
    padding: var(--sp-sm);
  }
  .carousel-slide--fire,
  .carousel-slide--buckle,
  .carousel-slide--steel {
    min-height: 0;
    border-left-width: 4px;
    padding: var(--sp-sm) var(--sp-sm) var(--sp-md);
  }
  .carousel-slide--fire h2,
  .carousel-slide--buckle h2,
  .carousel-slide--steel h2 {
    font-size: clamp(22px, 7vw, 28px);
  }
  .carousel-media img {
    max-width: calc(100% - 24px);
    max-height: 250px;
  }
  .page--workshop .workshop-card-pad {
    align-items: flex-start;
    gap: 12px;
  }
  .page--workshop .workshop-card-emoji {
    font-size: 34px;
  }
  .hero-icon {
    width: 90px;
    height: 90px;
  }
  .hero + .hero-img,
  .hero + picture.hero-picture .hero-img {
    max-height: 240px;
    object-fit: cover;
  }
}

@media (width <= 480px) {
  .wrap {
    padding: var(--sp-sm);
  }
  .page--patterns .hero,
  .page--anti-patterns .hero,
  .page--novel .hero,
  .page--workshop .hero {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
    margin-left: calc(-1 * var(--sp-sm));
    margin-right: calc(-1 * var(--sp-sm));
  }
  .hero {
    padding-top: var(--sp-lg);
  }
  .hero h1 {
    font-size: clamp(28px, 10vw, 34px);
  }
  .kicker {
    letter-spacing: 1px;
    font-size: 11px;
  }
  .card .pad {
    padding: var(--sp-sm);
  }
  .pattern-card,
  .antipattern-card {
    padding: var(--sp-sm);
  }
  .anti-intro-grid {
    grid-template-columns: 1fr;
  }
  .pullquote {
    margin: var(--sp-md) 0;
    padding: var(--sp-sm) var(--sp-md);
    font-size: 18px;
  }
  .persona-header {
    align-items: flex-start;
    padding: 10px var(--sp-sm);
  }
  .persona-header .persona-role {
    display: block;
    margin-top: 2px;
  }
  .read-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: 12px;
  }
  .read-toggle button {
    padding: 10px 0;
  }
  .cta {
    padding: var(--sp-md) var(--sp-sm);
  }
  .cta-stack {
    padding: var(--sp-sm);
  }
  .cta-option {
    padding: var(--sp-sm);
  }
  .page--workshop .workshop-card-pad {
    flex-direction: column;
    gap: 10px;
  }
  .page--workshop .workshop-card-emoji {
    font-size: 28px;
  }
  .reader-prompt summary {
    padding: 10px var(--sp-sm);
    font-size: 12px;
  }
  .reader-prompt pre {
    padding: 36px var(--sp-sm) var(--sp-sm);
    font-size: 11px;
  }
  .reader-prompt .copy-btn {
    top: 6px;
    right: 6px;
  }
  .carousel-controls {
    gap: 8px;
    padding: var(--sp-xs) var(--sp-sm) var(--sp-sm);
  }
  .carousel-btn {
    min-width: 64px;
    padding: 8px 12px;
  }
  .carousel-media {
    aspect-ratio: 3 / 2;
  }
  .carousel-media::before {
    inset: 0;
    filter: blur(28px) saturate(1.05);
    opacity: 0.5;
  }
  .carousel-media::after {
    background: linear-gradient(180deg, rgb(17 26 35 / 6%) 0%, rgb(17 26 35 / 14%) 100%);
  }
  .carousel-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
  }
  .hero + .hero-img,
  .hero + picture.hero-picture .hero-img {
    max-height: 200px;
  }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .carousel-slide { animation: none; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===================================================================
   WALD SURVIVORSHIP BIAS FIGURE
   =================================================================== */
.wald-section {
  padding-bottom: 0;
}

.wald-figure {
  margin: 0;
  text-align: center;
}

.wald-img {
  width: 100%;
  max-width: 720px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px var(--shadow);
}

.wald-figure figcaption {
  margin-top: var(--sp-sm);
  font-size: 0.85rem;
  color: var(--dust);
  font-style: italic;
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.5;
}

/* ── Read-mode toggle ───────────────────────────────── */
.read-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--sp-md);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.read-toggle button {
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: var(--steel-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font: inherit;
  letter-spacing: inherit;
}
.read-toggle button.active {
  background: var(--steel);
  color: var(--parchment);
}
.read-toggle button:not(.active):hover {
  background: rgb(28 40 54 / 6%);
}
.read-toggle button.mode-flash {
  animation: read-mode-button-flash 0.85s ease-out;
}

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

.read-mode-note {
  margin: calc(var(--sp-xs) * -1) 0 var(--sp-md);
  color: var(--steel-soft);
  font-size: 0.88rem;
  padding: 6px 10px;
  border-left: 3px solid rgb(28 40 54 / 24%);
  background: rgb(28 40 54 / 4%);
  border-radius: 8px;
}

.read-mode-note[data-tooltip] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 0 var(--sp-md) var(--sp-xs);
  padding: 0;
  border: 1px solid rgb(28 40 54 / 24%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 28%, var(--roundel-sheen) 0 18%, transparent 19%),
    radial-gradient(circle at 74% 76%, var(--roundel-sheen-alt) 0 16%, transparent 17%),
    rgb(28 40 54 / 4%);
  color: var(--steel-soft);
  position: relative;
  cursor: help;
  vertical-align: top;
  box-shadow: inset 0 0 0 1px rgb(250 247 242 / 70%), inset 0 0 16px rgb(196 90 44 / 12%);
}

.read-mode-note[data-tooltip]:focus-visible {
  outline: 3px solid var(--fire);
  outline-offset: 2px;
}

.read-mode-note[data-tooltip]:focus-visible::after {
  outline: 2px solid var(--fire);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .read-mode-note[data-tooltip] {
    border-color: CanvasText;
    box-shadow: none;
    background: Canvas;
    color: CanvasText;
  }

  .read-mode-note[data-tooltip]::after {
    color: CanvasText;
    background: none;
    border: 1px solid CanvasText;
  }

  .read-mode-note[data-tooltip]::before {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}
.read-mode-note[data-tooltip]::after {
  content: "ⓘ";
  font-family: "IBM Plex Mono", monospace;
  font-size: 18px;
  line-height: 1;
  color: var(--steel);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 35%, var(--parchment) 0 42%, transparent 43%),
    radial-gradient(circle at 70% 70%, var(--roundel-sheen) 0 52%, var(--steel-soft) 53%);
}
.read-mode-note[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(-2px, -50%);
  z-index: 10;
  width: min(460px, 70vw);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  border: 1px solid rgb(28 40 54 / 16%);
  background:
    radial-gradient(circle at 16% 14%, var(--roundel-sheen) 0 24%, transparent 25%),
    radial-gradient(circle at 85% 86%, var(--roundel-sheen-alt) 0 22%, transparent 23%),
    #fff;
  color: var(--steel);
  font-size: 0.82rem;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgb(11 17 24 / 12%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.read-mode-note[data-tooltip]:hover::before,
.read-mode-note[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (max-width: 720px) {
  .read-mode-note[data-tooltip]::before {
    left: 0;
    top: calc(100% + 10px);
    transform: translate(0, -2px);
    width: min(300px, calc(100vw - 48px));
  }

  .read-mode-note[data-tooltip]:hover::before,
  .read-mode-note[data-tooltip]:focus-visible::before {
    transform: translate(0, 0);
  }
}

.read-mode-note.mode-changed {
  animation: read-mode-note-flash 0.9s ease-out;
  border-color: var(--fire);
  background: rgb(154 63 31 / 9%);
}

@keyframes read-mode-button-flash {
  0% {
    box-shadow: 0 0 0 0 rgb(154 63 31 / 0%);
  }
  35% {
    box-shadow: 0 0 0 5px rgb(154 63 31 / 22%);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(154 63 31 / 0%);
  }
}

@keyframes read-mode-note-flash {
  0% {
    transform: translateY(0);
    opacity: 0.84;
  }
  35% {
    transform: translateY(-1px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* When in brief mode, hide extended content */
article.read-brief .read-full { display: none; }

/* ── Mechanism code block (workshop post pattern) ──── */
.code-receipt {
  margin: var(--sp-md) 0;
}

.code-receipt figcaption {
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--steel-soft);
}

.code-receipt pre {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgb(255 255 255 / 12%);
  background:
    linear-gradient(180deg, rgb(11 17 24 / 92%) 0%, rgb(17 26 35 / 96%) 100%);
  color: #e9edf2;
  line-height: 1.65;
  overflow-x: auto;
}

.code-receipt .code-label {
  color: #8cc8ff;
  font-weight: 600;
}

.code-receipt .code-op {
  color: #f6ce78;
  font-weight: 600;
}

.code-receipt .code-danger {
  color: #ff9f84;
  font-weight: 600;
}

.code-receipt .code-token {
  color: #9ee7c2;
  font-weight: 600;
}

/* ── Reader prompt ──────────────────────────────────── */
.reader-prompt summary {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--steel-soft);
  cursor: pointer;
  padding: 12px var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  list-style: none;
  transition: color 0.15s, border-color 0.15s;
}
.reader-prompt summary::-webkit-details-marker { display: none; }
.reader-prompt summary::before {
  content: "▸ ";
}
.reader-prompt[open] summary::before {
  content: "▾ ";
}
.reader-prompt summary:hover {
  color: var(--fire);
  border-color: var(--fire);
}
.reader-prompt .prompt-block {
  position: relative;
  margin-top: var(--sp-sm);
}
.reader-prompt pre {
  margin: 0;
  padding: 40px var(--sp-md) var(--sp-md);
  background:
    linear-gradient(180deg, rgb(11 17 24 / 90%) 0%, rgb(17 26 35 / 96%) 100%);
  color: #ecf1f6;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius-sm);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}
.reader-prompt .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgb(255 255 255 / 70%);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.reader-prompt .copy-btn:hover {
  color: #fff;
  background: rgb(255 255 255 / 15%);
  border-color: rgb(255 255 255 / 30%);
}
.reader-prompt .copy-btn.copied {
  color: #6fcf97;
  border-color: rgb(111 207 151 / 40%);
  background: rgb(111 207 151 / 10%);
}

/* ── Notes (footnotes) ──────────────────────────────── */
.notes {
  margin-top: var(--sp-lg);
}
.notes h2 {
  margin-bottom: var(--sp-sm);
}
.notes ol {
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--steel-soft);
}
.notes li {
  margin-bottom: 12px;
}
.notes a {
  color: var(--buckle);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-color: currentColor;
  transition: text-decoration-thickness 0.15s;
}
.notes a:hover,
.notes a:focus-visible {
  text-decoration-thickness: 2px;
}
sup a {
  color: var(--buckle);
  text-decoration: none;
  font-size: 12px;
}

/* ── SEO trust signals ─────────────────────────────── */
.page-freshness {
  margin-top: 8px;
  color: var(--steel-soft);
}

.author-bio .small {
  margin-bottom: 8px;
}

/* --- Patterns page interaction + scanability additions --- */
.pattern-card {
  color: inherit;
  text-decoration: none;
  display: block;
}

.pattern-card h3,
.pattern-card .h3-like {
  font-family: Bitter, Georgia, serif;
}

.pattern-card:focus-visible,
.pattern-chip:focus-visible {
  outline: 3px solid var(--fire);
  outline-offset: 3px;
}

.pattern-card.pattern-item-hidden,
.pattern-detail.pattern-item-hidden {
  display: none;
}

.pattern-tools .pattern-filter-bar {
  display: grid;
  gap: var(--sp-sm);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.pattern-search-label {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.pattern-search-label span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--steel-soft);
}

.pattern-search-label input {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
}

.pattern-filter-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px 12px;
  margin: 0;
}

.pattern-filter-legend {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--steel-soft);
  padding: 0 4px;
}

.pattern-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pattern-filter-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.pattern-filter-option input {
  margin: 0;
  accent-color: var(--fire);
}

.pattern-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 var(--sp-md);
}

.pattern-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 999px;
  padding: 8px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--steel);
  background: rgb(255 255 255 / 86%);
}

.pattern-chip--buckle { border-left-color: var(--buckle); }
.pattern-chip--fire { border-left-color: var(--fire); }
.pattern-chip--novel { border-left-color: var(--novel); }
.pattern-chip--steel { border-left-color: var(--steel); }

.pattern-chip:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.pattern-domain-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--buckle-bg);
}

.pattern-domain-chip--system,
.pattern-domain-chip--human,
.pattern-domain-chip--llm,
.pattern-domain-chip--steel {
  color: var(--steel);
}

.pattern-domain-chip--system { color: var(--buckle); }
.pattern-domain-chip--human { color: var(--fire); }
.pattern-domain-chip--llm { color: var(--novel); }
.pattern-domain-chip--steel { color: var(--steel); }

.pattern-no-results {
  margin: 4px 0 0;
  color: var(--fire);
  font-weight: 600;
}

.pattern-detail {
  margin-bottom: var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px var(--shadow);
  overflow: hidden;
  background: rgb(255 255 255 / 85%);
}

.pattern-detail summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-sm) var(--sp-md);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  position: relative;
}

.pattern-detail summary::-webkit-details-marker,
.pattern-detail summary::marker {
  display: none;
}

.pattern-detail summary::before {
  content: "▸";
  color: var(--steel-soft);
  font-size: 12px;
}

.pattern-detail[open] summary::before {
  content: "▾";
}

.pattern-detail summary:focus-visible {
  outline: 3px solid var(--fire);
  outline-offset: 3px;
}

.pattern-detail-body {
  padding: 0 var(--sp-md) var(--sp-md);
  border-top: 1px solid var(--border);
}

.pattern-detail-body h3 {
  margin: 12px 0 6px;
  font-size: 16px;
}

.pattern-detail[data-domain="system"] {
  border-left-color: var(--buckle);
}

.pattern-detail[data-domain="human"] {
  border-left-color: var(--fire);
}

.pattern-detail[data-domain="llm"] {
  border-left-color: var(--novel);
}

@media (max-width: 880px) {
  .pattern-tools .pattern-filter-bar {
    grid-template-columns: 1fr;
  }

  .pattern-tools .button--outline-fire {
    width: fit-content;
  }
}