:root {
  --paper:        #f4f1ea;
  --paper-deep:   #ece7dc;
  --ink:          #1a1a1a;
  --ink-soft:     #3a3833;
  --rule:         #2a2825;
  --muted:        #6b6760;
  --accent:       #a8281e;
  --accent-deep:  #7f1d15;
  --hero-bg:      #1a1a1a;
  --hero-fg:      #f4f1ea;
  --serif:        'Fraunces', Georgia, serif;
  --sans:         'Inter Tight', -apple-system, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--ink); text-decoration: none; }

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.018) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.015) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  pointer-events: none;
  z-index: 1;
}

/* ============ Masthead ============ */
.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 18px 5vw;
  position: relative;
  z-index: 10;
  background: var(--paper);
}
.masthead-inner {
  display: flex; justify-content: space-between; align-items: baseline;
  max-width: 1400px; margin: 0 auto;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1;
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: block;
  color: var(--ink);
  flex-shrink: 0;
}
.mark-name {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav {
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.18s ease;
}
.nav a + a::before {
  content: '·';
  color: var(--muted);
  margin-right: 18px;
  opacity: 0.55;
}
.nav a:hover { color: var(--accent); }
.nav a.current,
.nav a.current:hover { color: var(--ink); cursor: default; }

/* ============ Hero (home only) ============ */
.hero {
  background: var(--hero-bg);
  color: var(--hero-fg);
  padding: 14vh 5vw 12vh;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.hero-inner { max-width: 1400px; margin: 0 auto; position: relative; }
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
}
.hero-eyebrow::after {
  content: ''; flex: 1; max-width: 80px; height: 1px;
  background: var(--accent); opacity: 0.5;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin-bottom: 36px;
  font-variation-settings: "opsz" 144;
}
.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: rgba(244, 241, 234, 0.7);
}
.hero-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.45;
  max-width: 720px;
  color: rgba(244, 241, 234, 0.85);
  margin-bottom: 56px;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(244, 241, 234, 0.15);
  border: 1px solid rgba(244, 241, 234, 0.15);
  max-width: 900px;
}
.hero-stat {
  background: var(--hero-bg);
  padding: 22px 24px;
}
.hero-stat .n {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 6px;
}
.hero-stat .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
}

/* ============ Currently Developing (home only) ============ */
.developing {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 8vh 5vw 10vh;
  position: relative;
  z-index: 2;
}
.developing-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
}
.developing-left  { grid-column: span 4; }
.developing-right { grid-column: span 8; max-width: 640px; }
.developing-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.developing-label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.developing-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  font-variation-settings: "opsz" 144;
  color: var(--ink);
}
.developing-subhead {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 600px;
}
.developing-body {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 600px;
}
.developing-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 30px;
}
.developing-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.developing-link::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s;
}
.developing-link:hover { color: var(--accent); border-color: var(--accent); }
.developing-link:hover::after { transform: translateX(4px); }

/* ============ Filterbar (home only) ============ */
.filterbar {
  position: sticky; top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 16px 5vw;
  z-index: 20;
  backdrop-filter: blur(8px);
}
.filterbar-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px 6px;
  align-items: center;
}
.filter-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 14px;
}
.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 7px 13px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-weight: 500;
}
.chip:hover { background: var(--ink); color: var(--paper); }
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.chip .count {
  margin-left: 6px;
  opacity: 0.6;
  font-size: 10px;
}

/* ============ Grid (home only) ============ */
.grid-wrap {
  padding: 60px 5vw 120px;
  position: relative; z-index: 2;
}
.section-head {
  max-width: 1400px; margin: 0 auto 36px;
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.015em;
}
.section-head .tally {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.grid {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.card {
  grid-column: span 4;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 26px 26px;
  background: var(--paper);
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
  display: flex; flex-direction: column;
  min-height: 240px;
}
.card:hover { background: var(--paper-deep); }
.card.hero-card { grid-column: span 6; min-height: 320px; }
.card.hero-card .card-title { font-size: 32px; }
.card.hero-card .card-blurb { font-size: 16px; }

.card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px;
}
.card-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.card-tier { display: none; }
.card-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.card-domain {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  word-break: break-all;
}
.card-blurb {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  flex: 1;
}
.card-foot {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-foot .read-more::after {
  content: ' →';
  transition: transform 0.2s;
  display: inline-block;
}
.card:hover .card-foot .read-more::after { transform: translateX(3px); }

.detail {
  grid-column: 1 / -1;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
  padding: 48px 5vw;
  display: none;
  position: relative;
}
.detail.open { display: block; animation: slideIn 0.28s ease; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.detail-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  max-width: 1400px; margin: 0 auto;
}
.detail-close {
  position: absolute; top: 20px; right: 5vw;
  background: transparent; border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink);
}
.detail-close:hover { background: var(--ink); color: var(--paper); }
.detail-sidebar h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.detail-sidebar .domain-link {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 24px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.detail-sidebar .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 24px;
}
.detail-sidebar .tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
}
.detail-sidebar .strength-row {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.detail-sidebar .strength-row span {
  color: var(--ink);
  font-weight: 600;
}

.detail-body dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px 28px;
}
.detail-body dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}
.detail-body dd {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.detail-body dd em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}
.detail-beef {
  margin-top: 36px;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
}
.detail-beef::before {
  content: 'Where it could grow';
  position: absolute; top: -10px; left: 16px;
  background: var(--paper-deep);
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-beef p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.empty {
  max-width: 1400px; margin: 60px auto; text-align: center;
  padding: 80px 20px;
  border: 1px dashed var(--rule);
  display: none;
}
.empty.visible { display: block; }
.empty p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--muted);
}

/* ============ Editorial page (about / deacs / contact) ============ */
.page {
  position: relative;
  z-index: 2;
  padding: 14vh 5vw 18vh;
  background: var(--paper);
}
.page-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.page-inner--narrow { max-width: 680px; }

.page-badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}
.page-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 8vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
  font-variation-settings: "opsz" 144;
  color: var(--ink);
}
.page-subhead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.35;
  color: var(--ink-soft);
  margin-bottom: 56px;
  letter-spacing: -0.005em;
}

.page-section {
  border-top: 1px solid var(--rule);
  padding-top: 36px;
  margin-top: 48px;
}
.page-section:first-of-type { margin-top: 0; }
.page-section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  display: block;
}
.page-section p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 18px;
}
.page-section p:last-child { margin-bottom: 0; }

.pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4;
  color: var(--ink);
  margin: 56px 0;
  letter-spacing: -0.005em;
  padding: 8px 0;
}
.pull strong {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.page-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.page-link:hover { color: var(--accent); border-color: var(--accent); }
.page-link::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s;
}
.page-link:hover::after { transform: translateX(4px); }

/* DEACS bottom link block */
.page-tail {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Contact page */
.contact-form {
  margin-top: 28px;
  margin-bottom: 56px;
}
.contact-form .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
}
.contact-form label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fbf9f3;
}
.contact-form textarea { resize: vertical; min-height: 160px; line-height: 1.55; }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-form .submit {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 14px 22px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.contact-form .submit:hover { background: var(--accent); border-color: var(--accent); }
.contact-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
  min-height: 16px;
}
.contact-status.ok    { color: var(--ink); }
.contact-status.err   { color: var(--accent); }

.contact-rows {
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  display: grid;
  grid-template-columns: 100px 1fr;
  row-gap: 14px;
  column-gap: 24px;
  align-items: baseline;
}
.contact-rows dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-rows dd a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 0.18s ease;
}
.contact-rows dd a:hover { color: var(--accent); }

.page-watermark {
  position: absolute;
  top: -40px;
  right: -10px;
  width: 160px;
  height: 160px;
  color: var(--ink);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* ============ Footer ============ */
footer {
  border-top: 1px solid var(--rule);
  background: var(--hero-bg);
  color: var(--hero-fg);
  padding: 80px 5vw 40px;
  position: relative; z-index: 2;
}
.foot-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.foot-inner h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.5);
  margin-bottom: 16px;
}
.foot-statement-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.brand-mark--lg {
  width: 88px;
  height: 88px;
  color: var(--paper);
  opacity: 0.95;
}
.foot-statement {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  color: rgba(244,241,234,0.9);
  letter-spacing: -0.01em;
}
.foot-statement strong {
  font-style: normal;
  font-weight: 500;
  color: var(--paper);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.foot-links a {
  display: block;
  color: rgba(244,241,234,0.7);
  margin-bottom: 8px;
  font-size: 14px;
  transition: color 0.2s;
}
.foot-links a:hover { color: var(--accent); }
.foot-base {
  max-width: 1400px; margin: 0 auto;
  border-top: 1px solid rgba(244,241,234,0.15);
  padding-top: 24px;
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.5);
}

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .card, .card.hero-card { grid-column: span 6; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .detail-inner { grid-template-columns: 1fr; gap: 32px; }
  .detail-body dl { grid-template-columns: 1fr; gap: 8px; }
  .detail-body dt { padding-top: 12px; }
  .foot-inner { grid-template-columns: 1fr; gap: 36px; }
  .developing-inner { grid-template-columns: 1fr; gap: 24px; }
  .developing-left, .developing-right { grid-column: span 1; }
  .developing-headline { font-size: 36px; }
}
@media (max-width: 620px) {
  .card, .card.hero-card { grid-column: span 12; }
  .hero { padding: 10vh 5vw 8vh; }
  .filterbar-inner { gap: 6px; }
  .filter-label { display: none; }
  .chip { font-size: 10px; padding: 6px 10px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .foot-base { flex-direction: column; gap: 10px; }
  .mark-name { display: none; }
  .meta { font-size: 9px; }
  .brand-mark { width: 32px; height: 32px; }
  .masthead-inner { flex-wrap: wrap; row-gap: 12px; }
  .nav { font-size: 10px; gap: 12px; }
  .nav a + a::before { margin-right: 12px; }
  .developing { padding: 6vh 5vw 8vh; }
  .developing-headline { font-size: 30px; }
  .developing-subhead { font-size: 19px; }
  .page { padding: 10vh 5vw 14vh; }
  .contact-rows { grid-template-columns: 1fr; row-gap: 6px; }
  .contact-rows dt { margin-top: 12px; }
  .page-watermark { width: 120px; height: 120px; opacity: 0.05; }
}

.card { animation: fadeUp 0.5s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}