/* =============================================================================
   FIELD STATION: DIGITAL SOVEREIGNTY UNCONFERENCE
   /sovereignty/. Chrome, spec strip and footer come from css/policies.css.
   Uses the site's blue accent (AA in both themes).
   ============================================================================= */

:root { --sov-accent: var(--panel-accent); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.sov-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
  padding: 64px 28px 56px;
  border-bottom: 1px solid var(--panel-border);
}

.sov-hero-figure { margin: 0; }
.sov-hero-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--panel-border);
}
.sov-hero-figure figcaption {
  margin-top: 12px;
  font: 500 10px/1.5 var(--fs-font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--panel-muted);
}
.sov-hero-figure figcaption span { color: var(--sov-accent); }

.sov-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--fs-font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sov-accent);
}
.sov-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.sov-title {
  margin-top: 28px;
  font: 600 clamp(2.5rem, 1rem + 4.5vw, 5.25rem)/0.95 var(--fs-font-mono);
  letter-spacing: -0.04em; color: var(--panel-ink);
}
.sov-title span { display: block; color: var(--sov-accent); }

.sov-lede {
  margin-top: 32px; max-width: 46ch;
  font: 400 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.45 var(--fs-font-sans); color: var(--panel-muted);
}
.sov-lede strong { font-weight: 600; color: var(--panel-ink); }

.sov-hero .sov-cta-btn { margin-top: 40px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.sov-cta-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px;
  font: 600 12px/1 var(--fs-font-mono); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--panel-bg); background: var(--panel-ink);
  border: 1px solid var(--panel-ink);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sov-cta-btn:hover, .sov-cta-btn:focus-visible {
  background: var(--sov-accent); border-color: var(--sov-accent); color: var(--panel-bg);
}
.sov-cta-btn:focus-visible { outline: 2px solid var(--sov-accent); outline-offset: 3px; }

/* ── Quote ──────────────────────────────────────────────────────────────── */

.sov-quote {
  padding: 72px 28px; background: var(--panel-shade);
  border-bottom: 1px solid var(--panel-border);
}
.sov-quote figure { max-width: 60rem; margin: 24px 0 0; }
.sov-quote blockquote {
  margin: 0; padding-left: 28px; border-left: 3px solid var(--sov-accent);
  font: 400 clamp(1.25rem, 1rem + 1.1vw, 1.875rem)/1.45 var(--fs-font-serif);
  color: var(--panel-ink);
}
.sov-quote blockquote p + p { margin-top: 1em; }
.sov-quote figcaption {
  margin-top: 28px; padding-left: 31px;
  font: 500 11px/1.6 var(--fs-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--panel-muted);
}
.sov-quote figcaption a { color: var(--sov-accent); text-underline-offset: .2em; }

/* ── Body sections ──────────────────────────────────────────────────────── */

.sov-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--panel-border);
}
.sov-block { padding: 56px 28px 64px; }
.sov-block + .sov-block { border-left: 1px solid var(--panel-border); }

.sov-block h2, .sov-cta h2 {
  margin-top: 16px;
  font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1.1 var(--fs-font-mono);
  letter-spacing: -0.02em; color: var(--panel-ink);
}
.sov-block p {
  margin-top: 20px; max-width: 58ch;
  font: 400 1rem/1.7 var(--fs-font-sans); color: var(--panel-ink);
}
.sov-block a { color: var(--sov-accent); text-underline-offset: .15em; }

.sov-questions { list-style: none; padding: 0; margin-top: 24px; max-width: 58ch; }
.sov-questions li {
  position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--panel-border);
  font: 400 15px/1.5 var(--fs-font-sans); color: var(--panel-ink);
}
.sov-questions li:last-child { border-bottom: 1px solid var(--panel-border); }
.sov-questions li::before {
  content: "?"; position: absolute; left: 2px; top: 10px;
  font: 600 15px/1.5 var(--fs-font-mono); color: var(--sov-accent);
}

.sov-lenses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; list-style: none; padding: 0; }
.sov-lenses li {
  padding: 6px 10px; border: 1px solid var(--panel-border);
  font: 500 10px/1 var(--fs-font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--panel-muted);
}
.sov-lenses li.is-lit { border-color: var(--sov-accent); color: var(--sov-accent); }

/* ── Format ─────────────────────────────────────────────────────────────── */

.sov-format { padding: 56px 28px 64px; border-bottom: 1px solid var(--panel-border); }
.sov-format h2 {
  margin-top: 16px;
  font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1.1 var(--fs-font-mono);
  letter-spacing: -0.02em; color: var(--panel-ink);
}
.sov-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px; padding: 0; list-style: none; counter-reset: step;
  border: 1px solid var(--panel-border);
}
.sov-steps li {
  counter-increment: step; padding: 24px 24px 28px;
  font: 400 15px/1.55 var(--fs-font-sans); color: var(--panel-ink);
}
.sov-steps li + li { border-left: 1px solid var(--panel-border); }
.sov-steps li::before {
  content: "0" counter(step); display: block; margin-bottom: 16px;
  font: 500 11px/1 var(--fs-font-mono); letter-spacing: .1em; color: var(--sov-accent);
}
.sov-steps strong { display: block; margin-bottom: 6px; font-weight: 600; }

.sov-format-figure { margin: 40px 0 0; }
.sov-format-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 1; object-fit: cover; object-position: center 60%;
  border: 1px solid var(--panel-border);
}
.sov-format-figure figcaption {
  margin-top: 12px;
  font: 500 10px/1.5 var(--fs-font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--panel-muted);
}
.sov-format-figure figcaption span { color: var(--sov-accent); }

/* ── Closing CTA ────────────────────────────────────────────────────────── */

.sov-cta {
  padding: 72px 28px 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end;
  box-shadow: inset 0 3px 0 var(--sov-accent);
}
.sov-cta p {
  margin-top: 16px; max-width: 52ch;
  font: 400 1rem/1.7 var(--fs-font-sans); color: var(--panel-muted);
}
.sov-cta p a { color: var(--sov-accent); }

/* ── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .sov-format-figure img { aspect-ratio: 4 / 3; }
  .sov-hero { grid-template-columns: 1fr; }
  .sov-title { font-size: clamp(2.5rem, 1.2rem + 6vw, 4.5rem); }
  .sov-grid { grid-template-columns: 1fr; }
  .sov-block + .sov-block { border-left: none; border-top: 1px solid var(--panel-border); }
  .sov-steps { grid-template-columns: 1fr; }
  .sov-steps li + li { border-left: none; border-top: 1px solid var(--panel-border); }
  .sov-cta { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 768px) {
  .sov-hero { padding: 44px 20px 56px; }
  .sov-quote, .sov-format, .sov-cta { padding-inline: 20px; }
  .sov-quote { padding-block: 56px; }
  .sov-quote blockquote { padding-left: 18px; }
  .sov-quote figcaption { padding-left: 21px; }
  .sov-block { padding: 44px 20px 48px; }
  .sov-cta { padding-block: 56px 64px; }
}

.sov-format-intro {
  margin-top: 20px; max-width: 58ch;
  font: 400 1rem/1.7 var(--fs-font-sans); color: var(--panel-ink);
}