@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

/* ============================================================
   The Obsolescence Brief, "Industry" theme
   Steel-blue wireframe: Barlow Condensed over Barlow, blueprint
   objects (square, hairline, registration-cross corners), a single
   steel accent, and a red/gold/green lifecycle-status layer.
   ============================================================ */

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-300: #b5d9fd;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-900: #1d2d3d;

  /* lifecycle-status palette */
  --st-red-bg: #9e2b2b;   --st-red-ink: #8a2b2b;   --st-red-tint: #f6dede;
  --st-gold-bg: #efd694;  --st-gold-ink: #5c440d;
  --st-green-bg: #dbe9d9; --st-green-ink: #2e5a34;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
  --wrap: 1180px;
  --edge: clamp(20px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55; font-weight: 400;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.ob-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--edge); }
.ob-shell { max-width: 820px; margin: 0 auto; padding: 0 var(--edge); }
.mono { font-family: var(--mono); }
.text-muted { color: var(--color-neutral-700); }
.rule { flex: 1; height: 1px; background: var(--color-divider); }
.sec-label { font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

/* ---- blueprint frame ---- */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.corner.tl { top: -6px; left: -6px; } .corner.tr { top: -6px; right: -6px; }
.corner.bl { bottom: -6px; left: -6px; } .corner.br { bottom: -6px; right: -6px; }
.blueprint.duotone { overflow: visible; }
.duotone { position: relative; }
.duotone > img { display: block; width: 100%; filter: grayscale(1) contrast(1.05); }
.duotone::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--color-accent); mix-blend-mode: color; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider); border-radius: 0; padding: 9px 15px; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-block { width: 100%; }

/* ---- inputs ---- */
.input { width: 100%; min-height: 44px; padding: 6px 12px; font: inherit; font-size: 15px; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0; }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.signup-row { display: flex; border: 1px solid var(--color-divider); max-width: 460px; }
.signup-row .input { border: 0; background: transparent; }

/* ---- tags / status chips ---- */
.tag { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; }
.st { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; }
.st-eol, .st-obsolete { background: var(--st-red-bg); color: #fff; }
.st-nrnd { background: var(--st-gold-bg); color: var(--st-gold-ink); }
.st-active, .st-method { background: var(--st-green-bg); color: var(--st-green-ink); }
.st-outline { border: 1px solid var(--color-accent-700); color: var(--color-accent-700); }

/* ---- table ---- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); padding: 8px; border-bottom: 1px solid var(--color-divider); font-weight: 600; }
.table td { padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table-scroll { overflow-x: auto; }

/* ---- site header ---- */
.site-head { display: flex; align-items: center; gap: 20px; max-width: var(--wrap); margin: 0 auto; padding: 14px var(--edge); border-bottom: 1px solid var(--color-divider); }
.site-brand { font-family: var(--font-heading); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--color-text); margin-right: auto; }
.site-nav { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.site-nav a { font-size: 14px; color: var(--color-text); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent); }
.site-head .signin { color: var(--color-neutral-700); border-color: transparent; }
@media (max-width: 760px) { .site-nav { display: none; } }

/* ---- manifesto (home header) ---- */
.manifesto { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; padding: clamp(32px,5vw,48px) 0 32px; border-bottom: 1px solid var(--color-divider); }
.manifesto-title { font-size: clamp(34px,5vw,46px); line-height: 1; max-width: 15ch; }
.manifesto-sub { font-size: 15px; line-height: 1.5; color: var(--color-neutral-800); margin: 0 0 12px; }
.manifesto-mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--color-accent-700); margin: 0; }

/* ---- category header (tag/page) ---- */
.cat-head { padding: clamp(32px,5vw,52px) 0 clamp(24px,3vw,36px); border-bottom: 1px solid var(--color-divider); }
.cat-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cat-kicker { font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); }
.cat-dot { width: 3px; height: 3px; background: var(--color-neutral-500); border-radius: 50%; }
.cat-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--color-neutral-700); }
.cat-title { font-size: clamp(38px,6vw,60px); line-height: 0.96; margin: 0 0 20px; }
.cat-desc { font-size: 17px; line-height: 1.55; color: var(--color-neutral-800); margin: 0; max-width: 64ch; }

/* ---- featured ---- */
.featured { padding: clamp(28px,4vw,40px) 0 clamp(24px,3vw,36px); }
.featured-kicker { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 14px; }
.feature { display: grid; grid-template-columns: 1.35fr 1fr; color: inherit; }
.feature-l { padding: clamp(24px,3vw,32px); border-right: 1px solid var(--color-divider); }
.feature-r { padding: clamp(20px,3vw,28px); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.feature-badges { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.feature-title { font-size: clamp(30px,4vw,36px); line-height: 0.98; margin: 0 0 14px; }
.feature:hover .feature-title { color: var(--color-accent-700); }
.feature-dek { font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); margin: 0 0 18px; max-width: 46ch; }
.feature-r-label { font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 14px; }

/* ---- post grid + cards ---- */
.latest { padding: 0 0 clamp(36px,5vw,56px); }
.ob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.post-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; color: inherit; height: 100%; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-kicker { display: inline-flex; align-self: flex-start; background: var(--color-accent-900); color: var(--color-accent-300); font-family: var(--font-heading); font-weight: 600; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; }
.card-title { font-size: 24px; line-height: 1; margin: 0; }
.post-card:hover .card-title { color: var(--color-accent-700); }
.card-excerpt { font-size: 13px; line-height: 1.5; color: var(--color-neutral-800); margin: 0; flex: 1; }
.card-cross { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--color-accent-700); }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-neutral-700); }

/* newsletter tile inside grid */
.grid-cta { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px; background: var(--color-accent-900); color: var(--color-bg); }
.grid-cta .kicker { font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-300); }
.grid-cta .h { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.grid-cta .signup-row { border-color: color-mix(in srgb, #fff 30%, transparent); max-width: none; }
.grid-cta .input { color: var(--color-bg); }

/* ---- status board (home: newest per status) ---- */
.status-board { padding: 0 0 clamp(28px,4vw,44px); }
.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.board-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; color: inherit; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-card .card-kicker { align-self: flex-start; }
.board-title { font-family: var(--font-heading); font-weight: 600; font-size: 21px; line-height: 1.05; text-transform: uppercase; margin: 0; }
.board-card:hover .board-title { color: var(--color-accent-700); }

/* ---- archive ledger ---- */
.archive { padding-bottom: clamp(36px,5vw,56px); }
.arch-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.arch-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.arch-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 13px; background: transparent; color: var(--color-neutral-800); border: 1px solid var(--color-divider); cursor: pointer; }
.arch-chip:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.arch-chip.is-on { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.arch-n { font-family: var(--mono); font-size: 11px; font-weight: 600; opacity: 0.7; }
.arch-chip.is-on .arch-n { opacity: 0.9; }
.arch-date { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); }
.arch-date .input { min-width: 140px; }
.ledger { font-family: var(--mono); }
.ledger thead th { font-family: var(--font-heading); }
.ledger .lg-row.lg-alt { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.ledger .lg-row:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.ledger .lg-date { color: var(--color-neutral-700); white-space: nowrap; }
.ledger .lg-title a { font-family: var(--font-body); font-weight: 500; color: var(--color-text); }
.ledger .lg-title a:hover { color: var(--color-accent-700); }
.ledger .lg-cat { color: var(--color-neutral-800); }
.ledger .lg-status .st { cursor: pointer; border: 0; }
.ledger .lg-status button.st:hover { filter: brightness(1.08); }
.arch-empty { text-align: center; padding: 32px; color: var(--color-neutral-700); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 820px) { .board-grid { grid-template-columns: 1fr; } }

/* ---- post (single article) ---- */
.post { max-width: calc(860px + 2 * var(--edge)); margin: 0 auto; padding: 0 var(--edge); }
.post-header { padding: clamp(28px,4vw,44px) 0 clamp(24px,3vw,32px); }
.post-crumb { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.post-crumb a { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); }
.post-title { font-size: clamp(32px,5.2vw,52px); line-height: 0.98; margin: 0 0 20px; max-width: 20ch; }
.post-dek { font-size: 18px; line-height: 1.5; color: var(--color-neutral-800); margin: 0 0 26px; max-width: 60ch; }
.post-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding: 16px 0; }
.post-author { display: flex; align-items: center; gap: 14px; }
.avatar { width: 40px; height: 40px; border: 1px solid var(--color-divider); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--color-accent-700); }
.post-feature { margin: 0 0 clamp(24px,3vw,36px); aspect-ratio: 16/9; }
.prose { max-width: 860px; }
.prose p { font-size: 16.5px; line-height: 1.68; color: var(--color-neutral-900); margin: 0 0 1.1rem; }
.prose h2 { font-size: 26px; margin: 2.2rem 0 1rem; }
.prose h3 { font-size: 19px; margin: 1.6rem 0 0.6rem; }
.prose img { margin: 1.4rem 0; }
.prose blockquote { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 1.2; text-transform: none; margin: 1.6rem 0; padding-left: 20px; border-left: 3px solid var(--color-accent); max-width: 34ch; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
/* Koenig editor wide / full-width cards + images (break out of the prose column) */
.prose .kg-width-wide { position: relative; width: min(90vw, 1024px); margin-left: 50%; transform: translateX(-50%); max-width: 90vw; }
.prose .kg-width-full { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: 100vw; }
.prose .kg-width-full img { width: 100%; }
.prose figure { margin: 1.4rem 0; }
.prose .kg-card { margin: 1.6rem 0; }
.post-note { max-width: 860px; margin: clamp(28px,4vw,40px) 0 0; padding: 16px 20px; border: 1px solid var(--color-divider); font-size: 13px; line-height: 1.55; color: var(--color-neutral-700); }
.author-card { max-width: calc(860px + 2 * var(--edge)); margin: clamp(32px,4vw,48px) auto; padding: 24px var(--edge); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); display: flex; gap: 18px; align-items: flex-start; }

/* ---- subscribe CTA ---- */
.cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; padding: clamp(28px,4vw,40px); background: var(--color-accent-900); color: var(--color-bg); }
.cta-kicker { font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-300); margin-bottom: 12px; }
.cta h2 { font-size: clamp(24px,3vw,30px); line-height: 1.04; }
.cta .signup-row { border-color: color-mix(in srgb, #fff 30%, transparent); }
.cta .input { color: var(--color-bg); }
.cta-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--edge) clamp(40px,5vw,64px); }

/* ---- footer ---- */
.site-foot { border-top: 1px solid var(--color-divider); margin-top: clamp(24px,4vw,40px); }
.foot-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; padding-bottom: 22px; font-size: 12px; color: var(--color-neutral-700); }
.foot-inner a { color: var(--color-neutral-700); }
.foot-inner a:hover { color: var(--color-accent); }

/* ---- pagination ---- */
.pagination { max-width: var(--wrap); margin: 0 auto; padding: 8px var(--edge) clamp(32px,4vw,48px); display: flex; justify-content: center; gap: 16px; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; font-size: 14px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ob-grid { grid-template-columns: repeat(2, 1fr); }
  .manifesto { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .feature, .cta { grid-template-columns: 1fr; }
  .feature-l { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .post-meta { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 560px) { .ob-grid { grid-template-columns: 1fr; } }