/* ═══════════════════════════════════════════════════════════════════════════
   DNS Panopticon — Shared Page Template
   Shared layout primitives and landing variants.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --landing-max-width: 520px;
  --landing-pad-top: 40px;
  --landing-pad-x: 16px;
  --landing-pad-bottom: 60px;
  --landing-hero-rail-top: clamp(36px, 7vh, 72px);
  --landing-hero-size: 96px;
  --landing-hero-gap: 28px;
  --landing-title-size: 32px;
  --landing-title-weight: 800;
  --landing-title-track: -0.5px;
  --landing-sub-size: 15px;
  --landing-sub-line: 1.5;
  --landing-sub-gap: 48px;
}

/* Base page template shell */
.page-main-template {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.landing-zone {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--landing-hero-rail-top) var(--landing-pad-x) var(--landing-pad-bottom);
}

@media (min-width: 769px) {
  :root {
    --landing-hero-rail-top: clamp(56px, 8vh, 96px);
  }
}

@media (min-width: 769px) {
  .landing-zone {
    align-items: flex-start;
    padding-top: var(--landing-hero-rail-top);
  }
}

.landing-inner-shared {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--landing-max-width);
  margin: 0 auto;
  text-align: center;
}

.landing-hero-wrap {
  width: var(--landing-hero-size);
  height: var(--landing-hero-size);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--landing-hero-gap);
}

.landing-hero-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.landing-title-shared {
  font-size: var(--landing-title-size);
  font-weight: var(--landing-title-weight);
  letter-spacing: var(--landing-title-track);
  color: var(--txt);
  margin: 0 0 8px;
}

.landing-subtitle-shared {
  font-size: var(--landing-sub-size);
  color: var(--txt-3);
  margin: 0 0 var(--landing-sub-gap);
  line-height: var(--landing-sub-line);
}

/* Variant tokens */
body.page-variant-tool {
  --landing-max-width: 520px;
  --landing-pad-top: 40px;
  --landing-pad-x: 16px;
  --landing-pad-bottom: 60px;
  --landing-hero-size: 96px;
  --landing-hero-gap: 28px;
}

body.page-variant-article {
  --landing-max-width: 760px;
  --landing-pad-top: 36px;
  --landing-pad-x: 16px;
  --landing-pad-bottom: 48px;
  --landing-hero-size: 72px;
  --landing-hero-gap: 20px;
}

@media (max-width: 480px) {
  .landing-title-shared  { font-size: 26px; }
  .landing-subtitle-shared { margin-bottom: 32px; }
}