/* ============================================================================
   VIDEO GAME SOURCES — DESIGN LAYER
   Direction C, "EXPLODED VIEW": a repair manual for video games.
   Companion file: sc-vgs-design.php (mu-plugin). Both must be deployed together.
   ----------------------------------------------------------------------------

   THE NON-NEGOTIABLES

   Every rule below is downstream of these six. Any ONE of them eroding in later
   maintenance does not "soften" the design — it flips it into a generic blog,
   because the whole identity is the tension between a technical drawing surface
   and warm printed prose.

   1. THE GRAPH PAPER IS ALWAYS VISIBLE.
      The 24px grid on #E8E3D8 is the page, not a texture behind a page. Nothing
      may cover it edge-to-edge. Content sits on it as discrete paper sheets and
      navy panels with visible board showing between them. If you ever find
      yourself giving a full-width section the board colour "to simplify", the
      design is already gone.

   2. 2px BORDER-RADIUS IS THE MAXIMUM, ANYWHERE.
      Cards, buttons, tags, images, ad frames. A drafting board has cut edges.
      Images get radius 0. Pills, rounded avatars and 8px cards are all wrong.

   3. NOTHING FLOATS. NOTHING HAS A DROP SHADOW.
      Depth is expressed with 1px #C9C2B3 rules and flat colour, never with
      box-shadow, blur, glow, or a translucent "glass" layer. GeneratePress ships
      a shadow on .inside-article; it is explicitly killed below and must stay
      killed. Hover states change colour and a 1px rule — never elevation.

   4. MONO IS NEVER BODY COPY.
      IBM Plex Mono is for part numbers, labels, spec stamps, captions, meta and
      nav only. The moment a paragraph, a standfirst or a card description is set
      in mono, the page reads as a terminal instead of a manual. Body prose is
      Source Serif 4; headings are Space Grotesk.

   5. AMBER (#E8B33E) ONLY EVER APPEARS ON NAVY.
      It is the ink used on the blueprint panels. On the tan board or on paper it
      turns into a highlighter and cheapens everything near it. Oxide red
      (#B03A1A) is the annotation ink on paper; amber is the annotation ink on
      navy. They do not swap.

   6. THE SERIF PROSE IS THE WARMTH LEVER.
      This layout is deliberately cold — grids, rules, part numbers. The only
      thing keeping it from feeling like a datasheet is that the actual reading
      is a generous 18px/1.70 serif on #F2EEE6. Never shrink body copy to fit
      more furniture on screen; drop the furniture instead.

   ----------------------------------------------------------------------------
   NOTE ON ADS: this file deliberately contains NO ad container styling and the
   mu-plugin emits no ad markup. AdSense Auto ads is on for this account and is
   left to place units in the reserved whitespace. Do not hand-build an "Ad slot"
   box here — an empty decorative ad box rendered to visitors is an AdSense
   policy problem, not a layout placeholder.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  --vgs-board:      #E8E3D8;  /* drafting-board page */
  --vgs-paper:      #F2EEE6;  /* reading surface */
  --vgs-body:       #1C1F26;
  --vgs-head:       #12151B;
  --vgs-muted:      #5A6070;
  --vgs-oxide:      #B03A1A;  /* annotation ink on paper */
  --vgs-navy:       #0F3D5C;
  --vgs-navy-panel: #14304A;
  --vgs-amber:      #E8B33E;  /* annotation ink on navy ONLY */
  --vgs-orange:     #E07A3C;
  --vgs-rule:       #C9C2B3;
  --vgs-grid:       #D9D3C6;
  --vgs-zebra:      #EAE5DB;

  --vgs-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --vgs-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --vgs-grot:  'Space Grotesk', system-ui, -apple-system, sans-serif;

  --vgs-max: 1180px;
  --vgs-col: 700px;   /* article reading column */
  --vgs-rail: 160px;  /* left margin rail */
}

/* ------------------------------------------------------------ 2. THE BOARD */

body {
  background-color: var(--vgs-board);
  background-image:
    linear-gradient(to right,  var(--vgs-grid) .5px, transparent .5px),
    linear-gradient(to bottom, var(--vgs-grid) .5px, transparent .5px);
  background-size: 24px 24px;
  background-position: 0 0;
  background-attachment: scroll;
  color: var(--vgs-body);
  font-family: var(--vgs-serif);
  font-size: 18px;
  line-height: 1.70;
  overflow-x: hidden;               /* leader lines + breakouts may reach past the wrap */
  -webkit-font-smoothing: antialiased;
}

/* GeneratePress paints its own container backgrounds. Kill them so the board
   shows through; individual sheets re-introduce paper where reading happens. */
.site.grid-container,
.site-content,
.content-area,
.site-main { background: transparent; }

h1, h2, h3, h4,
.entry-title, .page-title {
  font-family: var(--vgs-grot);
  color: var(--vgs-head);
  letter-spacing: -.015em;
}
h1, .entry-title { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 500; letter-spacing: -.01em; }

a { color: var(--vgs-oxide); }

img { border-radius: 0; }

/* NON-NEGOTIABLE 3 — no elevation, anywhere, on anything GP or a plugin adds. */
.inside-article,
.site-header,
.main-navigation,
.vgs-card,
.vgs-qa__card,
.vgs-notes,
.vgs-tag { box-shadow: none !important; }

/* -------------------------------------------------- 3. SHARED TYPE HELPERS */

.vgs-wrap { max-width: var(--vgs-max); margin: 0 auto; padding: 0 24px; }

.vgs-kick {
  font-family: var(--vgs-mono); font-size: 14px; line-height: 1.35;
  text-transform: uppercase; font-weight: 600; letter-spacing: .10em;
}
.vgs-pn {
  font-family: var(--vgs-mono); font-size: 12px; line-height: 1.2;
  text-transform: uppercase; font-weight: 500; letter-spacing: .14em;
}
.vgs-cap {
  font-family: var(--vgs-mono); font-size: 13px; line-height: 1.55;
  letter-spacing: .02em; color: var(--vgs-muted);
}

/* A 1px rule with a mono label sitting on it — the section head of the manual. */
.vgs-rulehead { position: relative; height: 1px; background: var(--vgs-rule); margin-bottom: 34px; }
.vgs-rulehead span {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  background: var(--vgs-board); padding: 0 14px 0 0;
  font-family: var(--vgs-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vgs-head);
}
.vgs-rulehead span.r {
  left: auto; right: 0; padding: 0 0 0 14px;
  color: var(--vgs-muted); font-weight: 400;
}
@media (max-width: 640px) { .vgs-rulehead span.r { display: none; } }

.vgs-section { padding-top: 72px; }
@media (max-width: 820px) { .vgs-section { padding-top: 48px; } }

/* ------------------------------------------- 4. SITE CHROME (GeneratePress) */

/* Utility strip — hooked to generate_before_header, so it sits above the
   masthead and spans the full viewport. */
.vgs-util { background: var(--vgs-navy-panel); }
.vgs-util .vgs-wrap {
  min-height: 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.vgs-util span {
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--vgs-amber);   /* amber on navy = correct */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vgs-util span.r { color: #C9D6E0; flex: 0 0 auto; }
@media (max-width: 820px) {
  .vgs-util .vgs-wrap { justify-content: flex-end; }
  .vgs-util span.l { display: none; }
}

.site-header {
  background: var(--vgs-paper);
  border-bottom: 1px solid var(--vgs-rule);
  padding: 18px 0;
}
.site-header .inside-header { max-width: var(--vgs-max); padding-left: 24px; padding-right: 24px; }

/* IMPORTANT: the GeneratePress site title element is .main-title, NOT .site-title.
   Rules written against .site-title are silently dead on this theme. */
.main-title {
  font-family: var(--vgs-grot); font-weight: 700; font-size: 20px;
  letter-spacing: -.01em; line-height: 1.2; margin: 0; text-transform: uppercase;
}
.main-title a { color: var(--vgs-head); text-decoration: none; }
.main-title a:hover { color: var(--vgs-oxide); }
/* The oxide square that stands in for the wordmark glyph in the mockup. */
.main-title a::before {
  content: "\25A3"; color: var(--vgs-oxide); font-size: 15px;
  margin-right: 9px; line-height: 1;
}
.site-description {
  font-family: var(--vgs-mono); font-size: 12px; line-height: 1.5;
  letter-spacing: .08em; text-transform: uppercase; color: var(--vgs-muted);
  margin: 6px 0 0;
}

/* Primary navigation. GP ships this as a dark bar with white text; on this light
   design every one of those defaults has to be re-stated, including the mobile
   toggle (see below) which is otherwise white-on-paper and invisible. */
.main-navigation,
.main-navigation .main-nav ul,
.main-navigation.toggled .main-nav > ul {
  background: var(--vgs-paper);
}
.main-navigation { border-bottom: 1px solid var(--vgs-rule); }
.main-navigation .inside-navigation { max-width: var(--vgs-max); padding-left: 24px; padding-right: 24px; }
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  font-family: var(--vgs-mono); font-size: 13px; line-height: 1;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 500;
  color: var(--vgs-body);
}
.main-navigation .main-nav ul li a {
  padding: 16px 0; margin-right: 26px;
  text-decoration: none; border-bottom: 1px solid transparent;
}
.main-navigation .main-nav ul li:last-child a { margin-right: 0; }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--vgs-oxide); background: transparent; border-bottom-color: var(--vgs-oxide);
}
/* Sub-menus: flat paper panels, 2px radius max, no shadow. */
.main-navigation ul ul {
  border: 1px solid var(--vgs-rule); border-radius: 2px; width: 250px;
}
.main-navigation ul ul li a { padding: 12px 16px; margin: 0; }

/* MOBILE NAV TOGGLE — must never regress. GP colours this white on the
   assumption of a dark nav bar; on paper that is an invisible button. */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation .mobile-bar-items a,
.sidebar-nav-mobile:not(#sticky-placeholder) .menu-toggle {
  color: var(--vgs-head);
  background-color: var(--vgs-paper);
}
.main-navigation .menu-toggle { padding: 14px 0; }
.main-navigation .menu-toggle:hover { color: var(--vgs-oxide); }
.main-navigation .menu-toggle .mobile-menu { letter-spacing: .12em; }
.main-navigation .menu-toggle::before { color: inherit; }   /* the hamburger glyph is a pseudo-element */
.main-navigation.toggled .main-nav ul li a {
  border-bottom: 1px solid var(--vgs-rule); padding: 14px 0; margin-right: 0;
}

/* Breadcrumb / spec line under the nav (generate_after_header, priority 20). */
.vgs-crumbs { padding: 22px 0 0; }
.vgs-crumbs .vgs-wrap {
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--vgs-muted);
}
.vgs-crumbs a { color: var(--vgs-muted); text-decoration: none; }
.vgs-crumbs a:hover { color: var(--vgs-oxide); }

/* ------------------------------------------------------ 5. FRONT-PAGE SHELL */

/* The homepage is a static page whose content is a stack of shortcodes. Strip
   GP's article chrome there so the sections sit directly on the board and the
   graph paper stays visible between them (NON-NEGOTIABLE 1). */
.vgs-front .site-content { padding: 0; }
.vgs-front .site.grid-container { max-width: 100%; padding: 0; }
.vgs-front .inside-article,
.vgs-front .entry-content {
  background: transparent; border: 0; padding: 0; margin: 0;
}
.vgs-front .entry-content > *:first-child { margin-top: 0; }
.vgs-front .entry-header,
.vgs-front .entry-meta,
.vgs-front .featured-image { display: none; }

/* ------------------------------------------------------------- 6. THE HERO */

.vgs-hero { position: relative; min-height: 640px; padding: 44px 0 0; overflow: hidden; }
.vgs-hero__wrap { position: relative; min-height: 596px; max-width: var(--vgs-max); margin: 0 auto; padding: 0 24px; }
.vgs-hero__copy { position: relative; z-index: 3; max-width: 520px; }
.vgs-hero__stamp { color: var(--vgs-oxide); display: block; margin-bottom: 14px; }
.vgs-hero__copy h1 {
  font-size: 42px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 18px;
}
.vgs-hero__deck { font-size: 21px; line-height: 1.60; color: var(--vgs-body); max-width: 470px; margin: 0; }

.vgs-hero__plate { position: absolute; inset: 0; z-index: 1; }
.vgs-hero__img {
  position: absolute; right: -24px; top: 6%; width: 74%; height: 94%;
  object-fit: contain; object-position: center 40%;
  mix-blend-mode: multiply;
}
/* A photographic hero (option-supplied) gets the drafting-tape mask so it never
   reads as a stock photo dropped on the board. The inline SVG fallback does not
   need it — it is already line art on transparency. */
.vgs-hero__img--photo {
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(100deg, transparent 0, #000 17%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 82%, transparent 100%);
          mask-image:
    linear-gradient(100deg, transparent 0, #000 17%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  filter: contrast(1.04) saturate(.94);
}

.vgs-tags { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.vgs-parts-legend { display: none; }

.vgs-tag {
  position: absolute; left: var(--x); top: var(--y); width: 190px;
  display: block; pointer-events: auto; text-decoration: none;
  background: rgba(242, 238, 230, .93);
  border: 1px solid var(--vgs-rule); border-radius: 2px;
  padding: 7px 9px 8px;
  transition: background .15s, border-color .15s, color .15s;
}
.vgs-tag .num {
  font-family: var(--vgs-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; color: var(--vgs-oxide); transition: color .15s;
}
.vgs-tag .part {
  font-family: var(--vgs-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; color: var(--vgs-head); text-transform: uppercase;
}
.vgs-tag .cat {
  display: block; font-family: var(--vgs-mono); font-size: 11px; line-height: 1.35;
  letter-spacing: .06em; text-transform: uppercase; color: var(--vgs-muted);
  margin-top: 3px; transition: color .15s;
}
/* leader line + anchor square: 1px oxide, the annotation ink of a paper manual */
.vgs-tag::before {
  content: ""; position: absolute; top: 50%; height: 1px; width: var(--len, 90px);
  background: var(--vgs-oxide); opacity: .55; transition: opacity .15s, height .15s;
}
.vgs-tag::after {
  content: ""; position: absolute; top: calc(50% - 2px);
  width: 5px; height: 5px; background: var(--vgs-oxide);
}
.vgs-tag--l::before { left: 100%; transform-origin: 0 50%;   transform: rotate(var(--ang, 0deg)); }
.vgs-tag--l::after  { left: 100%; margin-left: -2px; }
.vgs-tag--r::before { right: 100%; transform-origin: 100% 50%; transform: rotate(var(--ang, 0deg)); }
.vgs-tag--r::after  { right: 100%; margin-right: -2px; }

a.vgs-tag:hover { background: var(--vgs-oxide); border-color: var(--vgs-oxide); }
a.vgs-tag:hover .num  { color: var(--vgs-amber); }  /* amber on oxide-filled tag, never on the board */
a.vgs-tag:hover .part { color: var(--vgs-paper); }
a.vgs-tag:hover .cat  { color: rgba(242, 238, 230, .82); }
a.vgs-tag:hover::before { opacity: 1; height: 2px; }

/* Admin-only: a section whose category has not been created yet. Visitors never
   see this — the mu-plugin only renders it for manage_options users, so the
   hero never carries a dead link. */
.vgs-tag--pending { opacity: .55; border-style: dashed; }
.vgs-tag--pending .num, .vgs-tag--pending .part { color: var(--vgs-muted); }
.vgs-tag--pending .cat::after {
  content: " \00b7 not created"; color: var(--vgs-oxide);
}

.vgs-hero__foot { position: absolute; left: 24px; bottom: -4px; z-index: 5; }
.vgs-hero__foot a {
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--vgs-oxide); text-decoration: none;
  border-bottom: 1px solid var(--vgs-oxide); padding-bottom: 2px;
}

/* HERO ON A NARROW PAGE — this is how a real manual prints when the sheet is
   too narrow for callouts: the drawing first, then a numbered parts list with
   the numbers in the left gutter and no leader lines. */
@media (max-width: 820px) {
  .vgs-hero { min-height: 0; padding: 32px 0 0; }
  .vgs-hero__wrap { min-height: 0; }
  .vgs-hero__copy { max-width: none; }
  .vgs-hero__copy h1 { font-size: 32px; line-height: 1.18; }
  .vgs-hero__deck { font-size: 18px; }
  .vgs-hero__plate { position: static; margin-top: 26px; }
  .vgs-hero__img {
    position: static; width: 100%; height: auto; right: auto; top: auto;
    border: 1px solid var(--vgs-rule);
  }
  .vgs-hero__img--photo {
    -webkit-mask-image: none; mask-image: none;
  }
  .vgs-tags {
    position: static; pointer-events: auto; display: block;
    margin-top: 26px; border-top: 1px solid var(--vgs-rule);
  }
  .vgs-parts-legend {
    display: block; font-family: var(--vgs-mono); font-size: 12px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--vgs-muted);
    padding: 10px 0 6px;
  }
  .vgs-tag {
    position: relative; left: auto; top: auto; width: auto;
    background: none; border: 0; border-bottom: 1px solid var(--vgs-rule);
    border-radius: 0; padding: 11px 0 11px 46px;
  }
  .vgs-tag::before, .vgs-tag::after { display: none; }
  .vgs-tag .num { position: absolute; left: 0; top: 11px; color: var(--vgs-oxide); }
  a.vgs-tag:hover { background: none; }
  a.vgs-tag:hover .part { color: var(--vgs-oxide); }
  a.vgs-tag:hover .cat  { color: var(--vgs-muted); }
  .vgs-hero__foot { position: static; margin: 22px 0 0; padding: 0; }
}

/* --------------------------------------------------- 7. CURRENT TEARDOWN */

.vgs-teardown {
  background: var(--vgs-navy-panel);
  border-top: 8px solid var(--vgs-oxide);
  position: relative; overflow: hidden;
}
.vgs-teardown__in {
  display: grid;
  grid-template-columns: minmax(min(340px, 100%), 1.5fr) minmax(min(260px, 100%), 1fr);
  gap: 0;
}
.vgs-teardown__copy { padding: 44px 44px 0; color: var(--vgs-paper); }
.vgs-teardown__k { color: var(--vgs-amber); margin: 0 0 18px; }
.vgs-teardown__copy h2 { color: var(--vgs-paper); font-size: 32px; line-height: 1.18; margin: 0 0 16px; }
.vgs-teardown__copy p { color: #DFE6EC; font-size: 18px; line-height: 1.65; max-width: 44ch; }
.vgs-teardown__open {
  display: inline-block; margin-top: 8px;
  font-family: var(--vgs-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vgs-paper); text-decoration: none;
  border: 1px solid var(--vgs-oxide); border-radius: 2px; padding: 11px 18px;
  transition: background .15s;
}
.vgs-teardown__open:hover { background: var(--vgs-oxide); color: var(--vgs-paper); }
.vgs-teardown__img { position: relative; min-height: 280px; }
.vgs-teardown__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: luminosity; opacity: .85; filter: contrast(1.1);
}
.vgs-teardown__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--vgs-navy-panel) 0, rgba(20,48,74,.25) 34%, rgba(20,48,74,.15) 100%);
}
.vgs-teardown__strip {
  grid-column: 1 / -1; border-top: 1px solid rgba(232,179,62,.35);
  margin-top: 36px; padding: 12px 44px;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vgs-amber);
}
@media (max-width: 820px) {
  .vgs-teardown__in { grid-template-columns: 1fr; }
  .vgs-teardown__copy { padding: 30px 22px 0; order: 2; }
  .vgs-teardown__copy h2 { font-size: 26px; }
  .vgs-teardown__img { order: 1; min-height: 210px; }
  .vgs-teardown__strip { order: 3; padding: 12px 22px; font-size: 11px; letter-spacing: .08em; margin-top: 26px; }
}

/* ------------------------------------------------------ 8. SHORT ANSWERS */

.vgs-qa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}
.vgs-qa__card {
  background: var(--vgs-paper); border: 1px solid var(--vgs-rule); border-radius: 2px;
  padding: 24px 22px 20px; display: flex; flex-direction: column;
}
.vgs-qa__card h3 { font-size: 21px; line-height: 1.3; font-weight: 700; margin: 0 0 16px; }
.vgs-qa__card h3 a { color: inherit; text-decoration: none; }
.vgs-qa__card h3 a:hover { color: var(--vgs-oxide); }
.vgs-qa__more {
  margin-top: auto; padding-top: 16px;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vgs-oxide); text-decoration: none;
}
.vgs-qa__more:hover { text-decoration: underline; }

/* The short-answer box: used on the homepage strip AND on every article. */
.vgs-sa {
  border: 1px solid var(--vgs-oxide); border-radius: 2px;
  padding: 13px 14px 14px; background: rgba(176, 58, 26, .03);
}
.vgs-sa__lbl {
  display: block; font-family: var(--vgs-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vgs-oxide); margin-bottom: 7px;
}
.vgs-sa p { font-size: 16px; line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------- 9. PARTS BIN */

.vgs-bin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 24px;
}
.vgs-card {
  position: relative; background: var(--vgs-paper);
  border: 1px solid var(--vgs-rule); border-radius: 2px;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: border-color .15s;
}
.vgs-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--vgs-oxide); transform: scaleX(0); transform-origin: left center;
  transition: transform .15s ease;
}
.vgs-card:hover { border-color: var(--vgs-oxide); }
.vgs-card:hover::before { transform: scaleX(1); }
.vgs-card:hover .vgs-card__pn { color: var(--vgs-oxide); }
.vgs-card__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--vgs-grid); }
.vgs-card__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.vgs-card__fig {
  aspect-ratio: 16 / 9; background: var(--vgs-navy-panel);
  display: flex; align-items: center; justify-content: center;
}
.vgs-card__fig b {
  font-family: var(--vgs-grot); font-weight: 700; font-size: 48px;
  letter-spacing: -.02em; color: var(--vgs-amber); line-height: 1;  /* amber on navy = correct */
}
.vgs-card__body { padding: 14px 18px 16px; display: flex; flex-direction: column; flex: 1; }
.vgs-card__meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; margin-bottom: 10px;
}
.vgs-card__pn { color: var(--vgs-muted); transition: color .15s; }
.vgs-card__cat { color: var(--vgs-oxide); text-align: right; }
.vgs-card h3 {
  font-family: var(--vgs-grot); font-weight: 700; font-size: 21px; line-height: 1.3;
  margin: 0 0 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vgs-card__dek {
  font-size: 16px; line-height: 1.6; color: var(--vgs-muted); margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vgs-card__foot {
  margin-top: auto; border-top: 1px solid var(--vgs-rule); padding-top: 10px;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--vgs-muted);
}

/* ------------------------------------------------------- 10. ARCHIVE WALL */

.vgs-archive {
  background: var(--vgs-navy-panel); color: var(--vgs-paper);
  border-top: 8px solid var(--vgs-oxide);
  padding: 52px 34px 46px;
}
.vgs-archive__k { color: var(--vgs-amber); margin: 0 0 10px; }
.vgs-archive h2 { color: var(--vgs-paper); margin: 0 0 6px; font-size: 28px; line-height: 1.25; }
.vgs-archive__sub { color: #C4D2DC; font-size: 17px; max-width: 56ch; }

/* Pure-CSS timeline: a 2px amber rule with 2px tick marks drawn as pseudo
   elements. No images, no SVG, nothing to go missing. */
.vgs-timeline { position: relative; margin: 52px 0 40px; height: 2px; background: var(--vgs-amber); }
.vgs-tl__row { display: flex; justify-content: space-between; gap: 6px; position: absolute; top: 0; left: 0; right: 0; }
.vgs-tl__item {
  position: relative; text-decoration: none; color: var(--vgs-paper);
  flex: 0 0 auto; text-align: center; padding-top: 22px; max-width: 16%;
}
.vgs-tl__item::before {
  content: ""; position: absolute; top: -9px; left: 50%;
  width: 2px; height: 20px; background: var(--vgs-amber); transform: translateX(-50%);
}
.vgs-tl__item .y {
  display: block; font-family: var(--vgs-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .10em; color: var(--vgs-amber);
}
.vgs-tl__item .lb {
  display: block; font-family: var(--vgs-mono); font-size: 11px; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase; color: #C4D2DC; margin-top: 4px;
}
a.vgs-tl__item:hover .lb { color: var(--vgs-orange); }
a.vgs-tl__item:hover::before { background: var(--vgs-orange); }
span.vgs-tl__item { opacity: .72; }        /* no article for that year yet — label only, no dead link */

.vgs-arch-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 22px; border-top: 1px solid rgba(201,194,179,.28); padding-top: 26px;
}
.vgs-arch-links a { text-decoration: none; color: var(--vgs-paper); display: block; }
.vgs-arch-links .n {
  font-family: var(--vgs-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--vgs-amber); text-transform: uppercase;
}
.vgs-arch-links .t {
  font-family: var(--vgs-serif); font-size: 19px; line-height: 1.45; margin-top: 7px; display: block;
}
.vgs-arch-links a:hover .t { color: var(--vgs-amber); }
@media (max-width: 820px) {
  .vgs-archive { padding: 40px 22px 36px; }
  .vgs-timeline { margin: 44px 0 34px; }
  .vgs-tl__row { flex-wrap: wrap; position: static; gap: 18px 12px; padding-top: 18px; }
  .vgs-tl__item { max-width: none; flex: 1 1 40%; text-align: left; padding-top: 0; }
  .vgs-tl__item::before { display: none; }
}

/* -------------------------------------------------- 11. WORKBENCH NOTES */

.vgs-notes {
  background: var(--vgs-paper); border: 1px solid var(--vgs-oxide); border-radius: 2px;
  padding: 30px 32px;
  display: grid;
  grid-template-columns: minmax(min(200px, 100%), 1fr) minmax(min(320px, 100%), 2.1fr);
  gap: 26px;
}
.vgs-notes__k { color: var(--vgs-oxide); margin: 0; }
.vgs-notes h3 { margin: 6px 0 0; font-size: 21px; }
.vgs-notes p { margin: 0 0 .9em; font-size: 18px; line-height: 1.7; }
.vgs-notes p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .vgs-notes { padding: 24px 20px; grid-template-columns: 1fr; gap: 14px; } }

/* =========================================================================
   12. THE ARTICLE SHEET
   700px reading column on paper, 1px rule, no shadow, with a 160px mono margin
   rail to its left at >=1100px. Below 1100px the rail's contents move inline,
   full width, above the thing they annotate.
   ========================================================================= */

.single .site-main,
.page:not(.vgs-front) .site-main { padding-top: 20px; }

@media (min-width: 1100px) {
  /* Rail column + reading column, centred as a pair. Everything GP puts in
     .site-main (article, post navigation, comments) sits in column 2; the rail
     is drawn INTO column 1 by the negative offsets below. */
  .single .site-main,
  .page:not(.vgs-front) .site-main {
    display: grid;
    grid-template-columns: var(--vgs-rail) minmax(0, var(--vgs-col));
    gap: 40px;
    justify-content: center;
  }
  .single .site-main > *,
  .page:not(.vgs-front) .site-main > * { grid-column: 2; min-width: 0; }
}
@media (max-width: 1099px) {
  .single .site-main,
  .page:not(.vgs-front) .site-main { max-width: var(--vgs-col); margin-left: auto; margin-right: auto; }
}

.single .inside-article,
.page:not(.vgs-front) .inside-article {
  background: var(--vgs-paper);
  border: 1px solid var(--vgs-rule);
  border-radius: 2px;
  padding: 44px 40px 52px;
}
@media (max-width: 640px) {
  .single .inside-article,
  .page:not(.vgs-front) .inside-article { padding: 30px 20px 40px; }
}

/* Featured image sits flush inside the sheet, above the header, square-cornered. */
.single .featured-image.page-header-image-single {
  margin: -44px -40px 26px; padding: 0;
}
/* CAPPED ON PURPOSE. At the 700px column a 16:9 featured image is ~394px tall and pushes
   the headline, the spec stamp and the short answer below the fold on a laptop — the
   reader arrives at a photograph instead of the answer they searched for. 21:9 keeps the
   plate and still gets the title on screen. */
.single .featured-image.page-header-image-single img {
  width: 100%; height: auto; aspect-ratio: 21 / 9; max-height: 300px; object-fit: cover;
  border-bottom: 1px solid var(--vgs-rule); border-radius: 0;
}
@media (max-width: 640px) {
  .single .featured-image.page-header-image-single { margin: -30px -20px 22px; }
}

/* --- article header furniture --- */

.vgs-chip {
  display: inline-block; background: var(--vgs-oxide); color: var(--vgs-paper);
  font-family: var(--vgs-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 2px; text-decoration: none;
}
a.vgs-chip:hover { background: var(--vgs-head); color: var(--vgs-paper); }

.single .entry-header { margin-bottom: 0; }
.single .entry-title { font-size: 42px; line-height: 1.12; letter-spacing: -.02em; margin: 18px 0 16px; }

/* The spec stamp — mono, ruled top and bottom, exactly like a drawing's title block. */
.vgs-spec {
  border-top: 1px solid var(--vgs-rule); border-bottom: 1px solid var(--vgs-rule);
  padding: 10px 0; margin: 0;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vgs-muted);
}
/* Only the HEADER meta is suppressed — the spec stamp already carries the date
   and the revision. The footer .entry-meta must survive: GeneratePress puts the
   category links AND the next/prev post navigation inside it. */
.single .entry-header .entry-meta { display: none; }
.single footer.entry-meta {
  margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--vgs-rule);
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--vgs-muted);
}
.single footer.entry-meta a { color: var(--vgs-oxide); text-decoration: none; }

/* Comments sit on their own paper sheet rather than floating on the board. */
.comments-area {
  background: var(--vgs-paper); border: 1px solid var(--vgs-rule); border-radius: 2px;
  padding: 30px 32px; margin-top: 24px;
}
.comments-area .comment-reply-title,
.comments-area .comments-title { font-family: var(--vgs-grot); font-size: 21px; margin: 0 0 16px; }
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
  background: #fff; border: 1px solid var(--vgs-rule); border-radius: 2px;
  font-family: var(--vgs-serif); font-size: 16px;
}
.comments-area input[type="submit"],
.comments-area .submit {
  background: var(--vgs-oxide); color: var(--vgs-paper); border: 0; border-radius: 2px;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 18px;
}
.comments-area input[type="submit"]:hover { background: var(--vgs-head); }
@media (max-width: 640px) { .comments-area { padding: 22px 18px; } }

@media (max-width: 640px) {
  .single .entry-title { font-size: 32px; line-height: 1.18; }
  .vgs-spec { font-size: 11px; letter-spacing: .06em; line-height: 1.7; }
}

/* --- the short-answer box at the top of every article --- */

.vgs-shortans {
  background: var(--vgs-board); border-left: 2px solid var(--vgs-oxide);
  padding: 20px 22px; margin: 30px 0 34px;
}
.vgs-shortans .vgs-sa__lbl { margin-bottom: 9px; }
.vgs-shortans p { margin: 0; font-size: 18px; line-height: 1.65; }

/* --- the margin rail --- */

.vgs-rail {
  font-family: var(--vgs-mono); font-size: 12px; line-height: 1.45;
  letter-spacing: .12em; text-transform: uppercase; color: var(--vgs-muted); font-weight: 500;
}
.vgs-rail b { display: block; color: var(--vgs-oxide); font-weight: 600; letter-spacing: .14em; }

@media (min-width: 1100px) {
  /* -240px = 40px of sheet padding + 40px gutter + 160px rail. */
  .entry-content > h2 > .vgs-rail {
    position: absolute; left: -240px; top: 6px; width: var(--vgs-rail); text-align: right;
  }
  .vgs-railwrap { position: relative; height: 0; }
  .vgs-railwrap .vgs-rail {
    position: absolute; left: -240px; top: 4px; width: var(--vgs-rail); text-align: right;
  }
}
@media (max-width: 1099px) {
  /* Off the wide sheet the rail is not a margin note any more — it becomes a
     full-width mono tag sitting directly above what it annotates. */
  .vgs-railwrap { margin: 26px 0 14px; }
  .vgs-rail {
    display: block; border-top: 1px solid var(--vgs-rule); border-bottom: 1px solid var(--vgs-rule);
    padding: 8px 0; text-align: left;
  }
  .entry-content > h2 > .vgs-rail { margin-bottom: 14px; border-top: 0; padding-top: 0; }
  .entry-content > h2 { padding-top: 14px; }
  .vgs-railwrap .vgs-rail { border-top: 1px solid var(--vgs-oxide); border-bottom: 1px solid var(--vgs-oxide); }
}

/* =====================================================================
   13. BODY COPY — everything the autoblog actually emits
   ---------------------------------------------------------------------
   SCOPING NOTE, AND IT MATTERS: these rules use `.entry-content > element`
   (child), not `.entry-content element` (descendant). The homepage's shortcode
   sections render INSIDE .entry-content too, and a descendant rule here beats
   the component rules above it on equal specificity purely by source order —
   which silently repainted the navy panel's <h2> with a body rule, turned the
   teardown button's paper text oxide, and put a 48px article margin inside a
   card. wpautop makes real body copy a DIRECT child of .entry-content, so the
   child combinator selects exactly the prose and nothing else. Two deliberate
   exceptions below: tables (wrapped in .vgs-tablewrap) and the .vgs-related
   block, both of which nest one level deeper and are named explicitly.
   ===================================================================== */

.entry-content { font-size: 18px; line-height: 1.70; }
@media (max-width: 640px) { .single .entry-content { font-size: 17px; line-height: 1.68; } }

.entry-content > h2 {
  font-size: 28px; line-height: 1.25; margin: 48px 0 16px; padding-top: 16px;
  border-top: 1px solid var(--vgs-rule); position: relative;
}
.entry-content > h3 { font-size: 21px; margin: 32px 0 10px; }
.entry-content > h4 { font-family: var(--vgs-grot); font-size: 18px; margin: 26px 0 8px; }
.entry-content > p { margin: 0 0 1.15em; }
.entry-content > p:last-child { margin-bottom: 0; }

/* Links in prose: oxide, underlined with a 1px rule rather than text-decoration
   so the underline sits clear of the serif descenders. Scoped to the elements
   prose actually lives in — a bare `.entry-content a` would also recolour every
   card, tag and button in the homepage sections. */
.entry-content > p a,
.entry-content li a,
.entry-content td a,
.entry-content figcaption a,
.entry-content blockquote a {
  color: var(--vgs-oxide); text-decoration: none;
  border-bottom: 1px solid rgba(176, 58, 26, .4);
}
.entry-content > p a:hover,
.entry-content li a:hover,
.entry-content td a:hover { border-bottom-color: var(--vgs-oxide); }
.entry-content > p strong,
.entry-content li strong { font-weight: 600; color: var(--vgs-head); }

/* Lists. Markers are oxide squares / mono tabular numerals and both align to
   the TEXT column, not hanging outside it. */
.entry-content > ul,
.vgs-related ul { list-style: none; margin: 0 0 1.3em; padding: 0; }
.entry-content > ul li,
.vgs-related ul li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.entry-content > ul li::before,
.vgs-related ul li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 7px; height: 7px; background: var(--vgs-oxide);
}
.entry-content > ul ul { margin: 10px 0 0; }
.entry-content > ol { list-style: none; margin: 0 0 1.3em; padding: 0; counter-reset: vgs-step; }
.entry-content > ol li {
  position: relative; padding-left: 38px; margin-bottom: 10px; counter-increment: vgs-step;
}
.entry-content > ol li::before {
  content: counter(vgs-step, decimal-leading-zero);
  position: absolute; left: 0; top: .24em;
  font-family: var(--vgs-mono); font-size: 13px; font-weight: 600; letter-spacing: .08em;
  color: var(--vgs-oxide); font-variant-numeric: tabular-nums;
}

.entry-content > blockquote {
  margin: 32px 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--vgs-oxide);
  background: transparent; font-style: normal;
}
.entry-content > blockquote p {
  font-family: var(--vgs-serif); font-style: italic; font-size: 20px; line-height: 1.6; margin: 0 0 .6em;
}
.entry-content > blockquote p:last-child { margin-bottom: 0; }
.entry-content > blockquote cite {
  display: block; margin-top: 12px; font-family: var(--vgs-mono); font-style: normal;
  font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: var(--vgs-muted);
}

/* Figures. Captions are mono (a caption is a label, not prose) with an oxide
   figure number added by the mu-plugin. */
.entry-content > figure { margin: 40px 0; }
.entry-content > figure img { width: 100%; height: auto; border: 1px solid var(--vgs-rule); border-radius: 0; }
.entry-content > figure figcaption {
  margin-top: 10px; font-family: var(--vgs-mono); font-size: 13px; line-height: 1.55;
  letter-spacing: .02em; color: var(--vgs-muted); text-align: left;
}
.entry-content > figure figcaption b { color: var(--vgs-oxide); font-weight: 600; letter-spacing: .10em; }

/* A wide figure may break out of the 700px column on a big screen only. */
@media (min-width: 1100px) {
  .entry-content > figure.vgs-breakout {
    width: 760px; position: relative; left: 50%; transform: translateX(-50%);
  }
}

/* Comparison tables. Paper body, navy header, zebra rows, mono tabular figures,
   and ALWAYS inside an overflow-x wrapper so a 5-column table cannot break a
   375px screen. The table is a descendant, not a child, because the mu-plugin
   wraps it in .vgs-tablewrap. */
.vgs-tablewrap { overflow-x: auto; margin: 30px 0 34px; border: 1px solid var(--vgs-rule); }
.vgs-tablewrap table {
  border-collapse: collapse; width: 100%; min-width: 560px;
  background: var(--vgs-paper); margin: 0; border: 0;
}
.vgs-tablewrap caption {
  caption-side: bottom; text-align: left; padding: 10px 12px;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--vgs-muted); background: var(--vgs-paper); border-top: 1px solid var(--vgs-rule);
}
.vgs-tablewrap th {
  background: var(--vgs-navy-panel); color: var(--vgs-paper);
  font-family: var(--vgs-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; text-align: left; padding: 12px;
  border: 0; border-right: 1px solid rgba(201,194,179,.25);
}
.vgs-tablewrap th:last-child { border-right: 0; }
.vgs-tablewrap td {
  padding: 12px; border: 0;
  border-top: 1px solid var(--vgs-rule); border-right: 1px solid var(--vgs-rule);
  font-family: var(--vgs-serif); font-size: 17px; line-height: 1.5; vertical-align: top;
}
.vgs-tablewrap td:last-child { border-right: 0; }
.vgs-tablewrap tbody tr:nth-child(even) { background: var(--vgs-zebra); }
/* Numeric cells: mono, tabular, so a column of figures lines up. */
.vgs-tablewrap td.vgs-num,
.vgs-tablewrap td[data-num] {
  font-family: var(--vgs-mono); font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums;
}

/* The "Related reading" block the blog agent appends at the end of a post. */
.vgs-related {
  margin: 48px 0 0; padding-top: 20px; border-top: 2px solid var(--vgs-oxide);
}
.vgs-related > :is(h2, h3, h4) {
  font-family: var(--vgs-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vgs-oxide);
  margin: 0 0 14px; padding: 0; border: 0;
}
.vgs-related ul li { margin-bottom: 8px; }
.vgs-related ul li::before { top: .78em; }
.vgs-related a { border-bottom-color: rgba(176, 58, 26, .35); }

/* ------------------------------------------------- 14. ARCHIVES & INDEXES */

.blog .site-main,
.archive .site-main,
.search .site-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 24px;
  align-items: stretch;
}
.blog .site-main > .page-header,
.archive .site-main > .page-header,
.search .site-main > .page-header,
.blog .site-main > .paging-navigation,
.archive .site-main > .paging-navigation,
.search .site-main > .paging-navigation,
.blog .site-main > .no-results,
.archive .site-main > .no-results,
.search .site-main > .no-results { grid-column: 1 / -1; }

.page-header {
  background: transparent; border: 0; padding: 0 0 4px; margin: 0;
}
.page-header .page-title {
  font-size: 30px; line-height: 1.2;
  padding-bottom: 14px; border-bottom: 1px solid var(--vgs-rule);
}
.page-header .taxonomy-description { font-size: 17px; color: var(--vgs-muted); max-width: 62ch; }

/* Each archive entry becomes the parts-bin card. GP hooks the thumbnail AFTER
   the entry header, so the card is a flex column and the image is re-ordered
   to the top — it stays a direct child of .inside-article that way and can sit
   flush to the card edge instead of inheriting the body padding. */
.blog .inside-article,
.archive .inside-article,
.search .inside-article {
  position: relative; background: var(--vgs-paper);
  border: 1px solid var(--vgs-rule); border-radius: 2px;
  padding: 0 0 16px; height: 100%;
  display: flex; flex-direction: column; transition: border-color .15s;
}
.blog .inside-article::before,
.archive .inside-article::before,
.search .inside-article::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--vgs-oxide); transform: scaleX(0); transform-origin: left center;
  transition: transform .15s ease; z-index: 2;
}
.blog .inside-article:hover,
.archive .inside-article:hover,
.search .inside-article:hover { border-color: var(--vgs-oxide); }
.blog .inside-article:hover::before,
.archive .inside-article:hover::before,
.search .inside-article:hover::before { transform: scaleX(1); }

.blog .post-image,
.archive .post-image,
.search .post-image { order: -1; margin: 0 0 14px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vgs-grid); }
.blog .post-image img,
.archive .post-image img,
.search .post-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.blog .inside-article > *:not(.post-image),
.archive .inside-article > *:not(.post-image),
.search .inside-article > *:not(.post-image) { padding-left: 18px; padding-right: 18px; }

.blog .entry-title,
.archive .entry-title,
.search .entry-title { font-size: 21px; line-height: 1.3; margin: 0 0 9px; }
.blog .entry-title a,
.archive .entry-title a,
.search .entry-title a { color: var(--vgs-head); text-decoration: none; }
.blog .entry-title a:hover,
.archive .entry-title a:hover,
.search .entry-title a:hover { color: var(--vgs-oxide); }

.blog .entry-meta,
.archive .entry-meta,
.search .entry-meta {
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--vgs-muted); margin: 0;
}
.blog .entry-meta a,
.archive .entry-meta a,
.search .entry-meta a { color: var(--vgs-muted); text-decoration: none; }
.blog .entry-summary,
.archive .entry-summary,
.search .entry-summary {
  font-size: 16px; line-height: 1.6; color: var(--vgs-muted); margin: 10px 0 0;
}
.blog .entry-summary p,
.archive .entry-summary p,
.search .entry-summary p { margin: 0; }
.blog .read-more-container,
.archive .read-more-container,
.search .read-more-container {
  margin-top: auto; padding-top: 12px;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em; text-transform: uppercase;
}
.blog .read-more-container a,
.archive .read-more-container a,
.search .read-more-container a { color: var(--vgs-oxide); text-decoration: none; }

/* Pagination */
.paging-navigation .nav-links a,
.paging-navigation .nav-links span {
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em; text-transform: uppercase;
  border: 1px solid var(--vgs-rule); border-radius: 2px; padding: 8px 12px;
  background: var(--vgs-paper); color: var(--vgs-body); text-decoration: none;
}
.paging-navigation .nav-links .current,
.paging-navigation .nav-links a:hover { background: var(--vgs-oxide); border-color: var(--vgs-oxide); color: var(--vgs-paper); }

/* Single-post next/prev */
.post-navigation .nav-links a {
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--vgs-oxide); text-decoration: none;
}
.post-navigation { margin-top: 24px; }

/* --------------------------------------------------------- 15. THE FOOTER */

.site-footer,
.site-footer .footer-widgets-container,
.site-footer .inside-site-info {
  background: var(--vgs-navy-panel); color: var(--vgs-paper);
}
/* The mu-plugin's parts-list footer (.vgs-foot) renders immediately before GP's own
   .site-footer and carries the oxide top rule for both. GP's block must not draw a
   second one, or the page ends with two 8px oxide bars a few hundred pixels apart. */
.site-footer { border-top: 0; margin-top: 0; }
.site-footer .footer-widgets-container { padding-top: 46px; padding-bottom: 10px; }
.site-footer .widget-title,
.site-footer .wp-block-heading {
  font-family: var(--vgs-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vgs-amber); margin: 0 0 12px;
}
.site-footer .footer-widgets a,
.site-footer li a {
  color: #DFE6EC; font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; line-height: 1.4;
}
.site-footer .footer-widgets a:hover,
.site-footer li a:hover { color: var(--vgs-amber); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { border-bottom: 1px dotted rgba(201,194,179,.25); }
.site-footer li a { display: block; padding: 8px 0; }
.site-footer .site-info,
.site-footer .copyright-bar {
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; color: #98A7B4;
  border-top: 1px solid rgba(201,194,179,.28);
}
.site-footer .site-info a { color: #98A7B4; }

/* The footer parts list rendered by the mu-plugin (generate_before_footer). */
.vgs-foot {
  background: var(--vgs-navy-panel); color: var(--vgs-paper);
  padding: 46px 0 0; margin-top: 72px; border-top: 8px solid var(--vgs-oxide);
}
.vgs-foot__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  border-bottom: 1px solid rgba(201,194,179,.28); padding-bottom: 14px; margin-bottom: 26px;
}
.vgs-foot__head b { font-family: var(--vgs-grot); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.vgs-foot__head span {
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vgs-amber);
}
.vgs-fcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 26px; }
.vgs-fcol h4 {
  font-family: var(--vgs-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vgs-amber); margin: 0 0 12px;
}
.vgs-fcol ul { list-style: none; margin: 0; padding: 0; }
.vgs-fcol li { border-bottom: 1px dotted rgba(201,194,179,.25); }
.vgs-fcol a {
  display: flex; gap: 10px; padding: 8px 0; text-decoration: none; color: #DFE6EC;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.4;
}
.vgs-fcol a i { font-style: normal; color: var(--vgs-orange); flex: 0 0 60px; }
.vgs-fcol a:hover { color: var(--vgs-amber); }
.vgs-foot__bottom {
  border-top: 1px solid rgba(201,194,179,.28); margin-top: 34px; padding: 14px 0 20px;
  font-family: var(--vgs-mono); font-size: 12px; letter-spacing: .10em; text-transform: uppercase;
  color: #98A7B4; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* ------------------------------------------------------------ 16. MOBILE */

@media (max-width: 820px) {
  body { font-size: 17px; }
  .vgs-hero__copy h1 { font-size: 32px; }
  .site-header { padding: 14px 0; }
  .main-title { font-size: 16px; }
  .site-description { font-size: 11px; letter-spacing: .06em; }
  .vgs-teardown__copy h2, .vgs-archive h2 { font-size: 26px; }
}
@media (max-width: 560px) {
  .vgs-wrap, .vgs-hero__wrap { padding-left: 16px; padding-right: 16px; }
  .main-title { font-size: 15px; letter-spacing: -.02em; }
  .vgs-card h3 { font-size: 19px; }
  .vgs-notes h3 { font-size: 19px; }
}

/* Print: the design is already a printed manual, so this is nearly free. */
@media print {
  body { background: #fff; }
  .vgs-util, .main-navigation, .vgs-foot, .site-footer, .vgs-tags { display: none; }
  .single .inside-article { border: 0; padding: 0; }
}