/* ============================================================
   DC NOMICS — One-Page (no-scroll) variant
   Full-viewport split screen. Everything sized off vh so it
   always fits a single screen, no scrolling.
   ============================================================ */

:root {
  --ink: #111315;
  --ink-soft: #3a3d42;
  --muted: #8a8d93;
  --paper: #faf9f6;
  --line: rgba(255, 255, 255, 0.14);
  --red: #d8232a;
  --white: #ffffff;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.screen {
  height: 100vh;
  height: 100svh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  overflow: hidden;
}

/* ---------- LEFT PANEL ---------- */
.panel--content {
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 clamp(28px, 4vw, 72px);
  overflow: hidden;
}

.bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 3.2vh, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 13px; height: 13px; background: var(--red); position: relative; flex-shrink: 0; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--ink); }
.brand-mark::before { top: 5.5px; left: 2px; right: 2px; height: 2px; }
.brand-mark::after { left: 5.5px; top: 2px; bottom: 2px; width: 2px; }
.brand-word { font-weight: 800; font-size: 14px; letter-spacing: 0.06em; }
.bar-link { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); }
.bar-link:hover { color: var(--red); }

.hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  gap: clamp(14px, 2.4vh, 26px);
}

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); margin: 0;
}
.eyebrow-dot { width: 6px; height: 6px; background: var(--red); flex-shrink: 0; }

h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: clamp(1.6rem, 3.6vw + 1.4vh, 3.2rem);
  max-width: 15ch;
}

.lead {
  margin: 0;
  font-size: clamp(13.5px, 1.15vw + 0.6vh, 16.5px);
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  max-width: 48ch;
}

.statement {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--white);
  font-size: clamp(13.5px, 1.15vw + 0.6vh, 16.5px);
  letter-spacing: 0.01em;
  max-width: 48ch;
  padding-left: 14px;
  border-left: 2px solid var(--red);
}
.statement span { color: var(--red); }

.pillars {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
  list-style: none;
  margin: 0;
  padding: clamp(10px, 1.6vh, 18px) 0 0;
  border-top: 1px solid var(--line);
}
.pillars li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(12.5px, 0.9vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pillar-no {
  font-family: var(--font-serif);
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
}

.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: clamp(4px, 0.8vh, 10px);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.6vh, 15px) clamp(18px, 1.8vw, 26px);
  font-size: clamp(12.5px, 0.85vw, 14px);
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-solid { background: var(--red); color: var(--white); }
.btn-solid:hover { background: var(--white); color: var(--ink); }
.btn-line { border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn-line:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.bar--foot {
  border-bottom: none;
  border-top: 1px solid var(--line);
  padding: clamp(12px, 2.4vh, 22px) 0;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.foot-coords { font-feature-settings: "tnum" 1; letter-spacing: 0.05em; }

/* ---------- RIGHT PANEL ---------- */
.panel--media {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1d22, #26292f);
}
.panel--media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.panel--media.media-fallback img { display: none; }
.media-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0) 30%),
              linear-gradient(0deg, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0) 35%);
}
.media-caption {
  position: absolute;
  left: clamp(20px, 2.4vw, 36px);
  bottom: clamp(20px, 3vh, 32px);
  color: var(--white);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 1.1vw + 0.4vh, 19px);
  letter-spacing: 0.01em;
}

/* ---------- DOC VARIANT — for pages with long-form copy (e.g. Strategy) ---------- */
.screen--doc {
  grid-template-columns: 1.9fr 1fr;
}
.doc-title {
  font-size: clamp(1.3rem, 1.8vw + 1vh, 2rem);
  max-width: 26ch;
}
.doc-intro {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.4vw + 1.4vh, 1.9rem);
  line-height: 1.32;
  color: rgba(255,255,255,0.9);
  max-width: 52ch;
}
.doc-intro strong { color: var(--white); font-weight: 700; }
.doc-text {
  flex: 1 1 auto;
  min-height: 0;
  column-count: 2;
  column-gap: clamp(24px, 2.6vw, 44px);
  font-size: clamp(14px, 0.75vw + 0.9vh, 17px);
  line-height: 1.52;
  color: rgba(255,255,255,0.8);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.doc-text p { margin: 0 0 0.9em; break-inside: avoid-column; }
.doc-text p:last-child { margin-bottom: 0; }
.doc-text strong { color: var(--white); font-weight: 700; }
@media (min-width: 1500px) {
  .doc-text { column-count: 3; }
}
.screen--doc .actions {
  margin-bottom: clamp(16px, 3vh, 32px);
}

/* ---------- LIGHT VARIANT — white background, no image panel ---------- */
.screen--light {
  grid-template-columns: 1fr;
  --line: rgba(17, 19, 21, 0.12);
  background: var(--paper);
}
.screen--light .panel--media { display: none; }
.screen--light .panel--content {
  background: var(--paper);
  color: var(--ink);
  max-width: 1400px;
  width: 100%;
}
.screen--light .bar-link { color: rgba(17, 19, 21, 0.6); }
.screen--light .lead { color: rgba(17, 19, 21, 0.72); }
.screen--light .statement { color: var(--ink); }
.screen--light .btn-solid:hover { background: var(--ink); color: var(--white); }
.screen--light .btn-line { border-color: rgba(17, 19, 21, 0.35); color: var(--ink); }
.screen--light .btn-line:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.screen--light .doc-intro { color: rgba(17, 19, 21, 0.92); }
.screen--light .doc-intro strong { color: var(--ink); }
.screen--light .doc-text { color: rgba(17, 19, 21, 0.78); scrollbar-color: rgba(17, 19, 21, 0.25) transparent; }
.screen--light .doc-text strong { color: var(--ink); }
.screen--light .hero {
  justify-content: flex-start;
  padding-top: clamp(40px, 9vh, 130px);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .screen, .screen--doc { grid-template-columns: 1fr; }
  .panel--media { display: none; }
  .panel--content { padding: 0 clamp(20px, 6vw, 40px); }
  h1 { max-width: 18ch; font-size: clamp(1.7rem, 6vw + 1.2vh, 2.6rem); }
  .lead { max-width: 40ch; }
  .doc-text { column-count: 1; }
  .pillars { flex-wrap: wrap; row-gap: 10px; }
}

@media (max-height: 560px) {
  .lead { display: none; }
  .statement { display: none; }
  .pillars { display: none; }
  .foot-mid { display: none; }
}