/* ============================================================================
   Flat Earth Files — graphics layer
   Loaded after main.css. Adds the visual vocabulary the diagrams and video
   cards need without touching the existing design system: figures, posters,
   print output, and a few ornamental rules.
   All colours resolve through main.css custom properties where they exist and
   fall back to the same ink/parchment palette if a variable is missing.
   ========================================================================= */

:root {
  --gx-ink: var(--ink, #080b14);
  --gx-raised: var(--surface, #0f1526);
  --gx-line: var(--rule, #2a3550);
  --gx-parch: var(--accent, #e8dcc0);
  --gx-muted: var(--muted, #93a0bd);
}

/* ---------------------------------------------------------------- figures */
.figure {
  margin: 2.2rem 0;
  padding: 0;
}

.figure img,
.figure svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gx-line);
  border-radius: 4px;
  background: var(--gx-raised);
}

.figure figcaption {
  margin-top: .7rem;
  padding-left: .85rem;
  border-left: 2px solid var(--gx-parch);
  color: var(--gx-muted);
  font-size: .92rem;
  line-height: 1.55;
}

.figure figcaption strong { color: var(--gx-parch); font-weight: 600; }

/* a figure that is allowed to sit narrower than the prose column */
.figure.narrow { max-width: 640px; margin-inline: auto; }

/* ------------------------------------------------------- ornamental rules */
.horizon-rule {
  position: relative;
  height: 1px;
  margin: 3rem 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gx-line) 18%, var(--gx-parch) 50%, var(--gx-line) 82%, transparent);
}

.horizon-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--gx-parch);
  box-shadow: 0 0 12px 2px rgba(232, 220, 192, .35);
}

/* the instrument-panel strip used on the model page and the home page */
.measure-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 2rem 0;
  background: var(--gx-line);
  border: 1px solid var(--gx-line);
  border-radius: 4px;
  overflow: hidden;
}

.measure-strip > * {
  background: var(--gx-raised);
  padding: 1rem 1.1rem;
}

.measure-strip .value {
  display: block;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--gx-parch);
  line-height: 1.15;
}

.measure-strip .label {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gx-muted);
}

/* ----------------------------------------------------------- video cards */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.3rem;
  margin: 2rem 0;
}

.video {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gx-line);
  border-radius: 4px;
  background: var(--gx-raised);
  overflow: hidden;
}

.video .player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--gx-ink);
}

.video .player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: var(--gx-parch);
  text-decoration: none;
  /* poster drawn from the palette so no thumbnail is ever fetched from YouTube */
  background:
    radial-gradient(circle at 50% 118%, rgba(232, 220, 192, .16), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #0b1020, #131a2e 58%, #1c2440);
}

.video-link::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44%;
  border-top: 1px solid rgba(232, 220, 192, .35);
  background: linear-gradient(180deg, rgba(232, 220, 192, .05), transparent);
}

.video-link .play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid var(--gx-parch);
  border-radius: 999px;
  font-size: .85rem;
  letter-spacing: .03em;
  background: rgba(8, 11, 20, .55);
}

.video-link:hover .play { background: var(--gx-parch); color: var(--gx-ink); }

.video .meta { padding: .9rem 1rem 1.1rem; }
.video .meta h3 { margin: 0 0 .35rem; font-size: 1.02rem; line-height: 1.35; }
.video .meta p { margin: .45rem 0 0; font-size: .9rem; color: var(--gx-muted); }
.video .side { font-size: .78rem; color: var(--gx-muted); }

/* -------------------------------------------------------- print / saving */
@media print {
  :root { --gx-ink: #fff; --gx-raised: #fff; --gx-line: #999; --gx-parch: #000; --gx-muted: #444; }

  body { background: #fff !important; color: #000 !important; }

  .masthead, .site-footer, .skip, nav, .video, .newsletter, form, .no-print { display: none !important; }

  .figure img, .figure svg { border-color: #999; background: #fff; }

  .article, .wrap { max-width: 100% !important; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .78em; color: #444; }

  h1, h2, h3 { page-break-after: avoid; }
  .figure, table { page-break-inside: avoid; }
}

/* --------------------------------------------------------- small screens */
@media (max-width: 620px) {
  .video-grid { grid-template-columns: 1fr; }
  .measure-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure figcaption { font-size: .88rem; }
}

/* ----------------------------------------------------- spacing utilities
   One-line declarations that used to live as inline style attributes on
   index.html, evidence.html and downloads.html. Values are unchanged. */
.pt-hero { padding-top: clamp(3rem, 7vw, 5.5rem); }
.measure-62 { max-width: 62ch; }
.mt-2 { margin-top: 2rem; }
.pt-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.mb-tight { margin-bottom: .35rem; }
.mb-0 { margin-bottom: 0; }