/**
 * SnapSmack Rational Geo Skin - Main Stylesheet
 * An homage to National Geographic magazine design
 *
 * This stylesheet defines the complete visual language for the Rational Geo skin,
 * featuring editorial typography, clean layout, and carefully curated color variables.
 */

/*
 * SNAPSMACK_EOF_HEADER
 * Last non-empty line of this file MUST be the canonical CSS EOF
 * marker: slash-star, space, five equals, space, the literal string
 * 'SNAPSMACK EOF', space, five equals, space, star-slash.
 * (Authoritative byte sequence: tools/check-eof.py EOF_MARKERS['.css'].)
 * Missing or different = truncated/corrupted. Restore before saving.
 */




/* ============================================================================
   ROOT CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Layout Grid */
  --grid-cols: 4;
  --thumb-width: 210px;
  --justified-row-height: 260px;
  --infobox-height: 50px;
  --rg-canvas-width: 1400px;   /* content max-width — overridden by main_canvas_width setting */

  /* Floating gallery wall */
  --wall-bg: #000000;

  /* Border Sizing */
  --rg-hero-border: 20px;
  --rg-hero-inner: 4px;
  --rg-thumb-border: 3px;
  --rg-thumb-inner: 1px;
  --rg-border-color: #FFCC00;

  /* Typography Scale */
  --font-scale-xs: 0.75rem;
  --font-scale-sm: 0.875rem;
  --font-scale-base: 1rem;
  --font-scale-lg: 1.25rem;
  --font-scale-xl: 1.5rem;
  --font-scale-2xl: 2rem;
  --font-scale-3xl: 2.5rem;
  --font-scale-4xl: 3rem;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Z-index Scale */
  --z-content: 2;
  --z-drawer: 10;
  --z-header: 100;
  --z-overlay: 1000;
}

/* ============================================================================
   RESET & BASE STYLES
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow: auto; /* Spacebar scroll prevented by ss-engine-comms.js e.preventDefault() */
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

/* Flex column viewport lock — mirrors New Horizon snapping engine.
   z-index: 1 ensures content sits above body::after (the map pseudo at z:0). */
#page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
}

body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--font-scale-base);
  line-height: 1.7;
  color: var(--rg-text-primary);
  background-color: var(--rg-bg-page);
  position: relative;

  /* Map intensity variable — used by ::after pseudo for the SVG topo overlay */
}

/* Cartographic background — SVG topographic map of western Canada.
   Uses body::after pseudo so the slider (--rg-map-pct) can control opacity
   without affecting body itself. The SVG tiles seamlessly and sits behind
   all content since #page-wrapper establishes its own stacking layer.
   The SVG (assets/topo-map.svg) is original artwork, no copyright. */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: url('assets/topo-map.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: calc(var(--rg-map-pct, 30) / 100);
}

/* ============================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  line-height: 1.2;
  font-weight: 700;
  color: var(--rg-text-primary);
}

h1 {
  font-size: var(--font-scale-4xl);
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: var(--font-scale-3xl);
  margin-bottom: var(--space-md);
}

h3 {
  font-size: var(--font-scale-2xl);
  margin-bottom: var(--space-md);
}

h4 {
  font-size: var(--font-scale-xl);
  margin-bottom: var(--space-md);
}

h5 {
  font-size: var(--font-scale-lg);
  margin-bottom: var(--space-sm);
}

h6 {
  font-size: var(--font-scale-base);
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
  color: var(--rg-text-primary);
}

a {
  color: var(--rg-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--rg-link-hover);
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

small,
.text-small {
  font-size: var(--font-scale-sm);
  color: var(--rg-text-secondary);
}

/* ============================================================================
   HEADER & NAVIGATION
   ========================================================================== */

#rg-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background-color: var(--rg-bg-chrome);
  border-bottom: 1px solid var(--rg-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-header);
  box-shadow: var(--rg-shadow);
}

.rg-header-inside {
  max-width: var(--rg-canvas-width, 1400px);
  width: 100%;
  padding: 0 var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rg-logo-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.rg-logo-link:hover {
  opacity: 0.8;
}

.rg-masthead {
  font-family: 'Marcellus', serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--rg-text-primary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Hide duplicate site name from core/header.php — skin masthead handles it */
.rg-header-nav .logo-area {
  display: none;
}

.rg-header-nav {
  display: flex;
  gap: var(--space-xl);
}

.rg-header-nav .nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 40px;
}

.rg-header-nav .nav-menu li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 40px;
}

.rg-header-nav .nav-menu .sep {
  display: none;
}

.rg-header-nav a,
.rg-header-nav .nav-menu a {
  font-family: Arial, Helvetica, -apple-system, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--rg-nav-color);
  transition: color 0.2s ease;
  text-decoration: none;
  padding: 6px 0;
  display: inline-block;
}

.rg-header-nav a:hover,
.rg-header-nav .nav-menu a:hover {
  color: var(--rg-accent);
  text-decoration: none;
}


/* ============================================================================
   PHOTOBOX (Hero Image Display)
   ========================================================================== */

/* --- Single-view flex column (mirrors New Horizon snapping engine) ---
   scroll-stage.rg-single is a flex column inside #page-wrapper.
   Header is fixed; everything else is in-flow so drawers push naturally. */

.rg-single {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: visible;
  scroll-behavior: smooth;
  align-items: stretch;
  position: relative;
}

/* Hide footer on single image view — only show on archive/static/blogroll */
.rg-single #system-footer,
.rg-single footer {
  display: none;
}

/* Standard footer — same pattern as 50-shades. Shown/hidden by ss-engine-footer.js. */
#footer {
  background: var(--rg-bg-secondary);
  border-top: 1px solid var(--rg-border-light);
  display: none;
  flex-shrink: 0;
}

#rg-photobox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: transparent;
  margin-top: 70px; /* Clear fixed header */
  position: relative;
  /* overflow: hidden clips image to photobox bounds; outline stays visible
     because photo-wrap padding (4vh) comfortably exceeds max outline width (20px) */
  overflow: hidden;
  box-sizing: border-box;
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
  /* Explicit height gives max-height:100% on .rg-image a value to resolve against.
     Formula: 100dvh minus fixed header (70px) minus infobox (var). */
  height: calc(100dvh - 70px - var(--infobox-height, 50px));
  padding: 0 !important; /* override compiled blob until admin re-saves */
}

.rg-photo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* Equal padding on all sides — keeps image dead-center */
  padding: 4vh 4vw;
  box-sizing: border-box;
}

.rg-image.post-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: var(--rg-hero-inner) solid #ffffff;
  outline: var(--rg-hero-border) solid var(--rg-accent);
  box-shadow: var(--rg-shadow);
  display: block;
}

.rg-photo-download-overlay {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  z-index: 2;
}

.rg-photo-download-overlay a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--rg-accent);
  color: #000;
  font-weight: 600;
  font-size: var(--font-scale-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease;
}

.rg-photo-download-overlay a:hover {
  background-color: var(--rg-accent-dark);
  color: #000;
}

/* ============================================================================
   INFOBOX (Navigation Bar)
   ========================================================================== */

/* Single view: infobox in-flow (not fixed), snaps to bottom via flex layout */
.rg-single #infobox {
  height: var(--infobox-height, 50px);
  flex-shrink: 0;
  background-color: var(--rg-bg-chrome);
  border-top: 1px solid var(--rg-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: var(--z-header);
  box-sizing: border-box;
}

/* Archive/static pages: infobox is inline, not fixed */
#infobox {
  z-index: var(--z-content);
  height: var(--infobox-height, 50px);
  background-color: var(--rg-bg-chrome);
  border-top: 1px solid var(--rg-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
}

#infobox .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  height: 100%;
  white-space: nowrap;
  font-family: Arial, Helvetica, -apple-system, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#infobox .nav-links .left,
#infobox .nav-links .center,
#infobox .nav-links .right {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  margin: 0;
}

#infobox .nav-links a {
  color: #999999;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 0;
  display: inline-block;
  transition: color 0.2s ease;
}

#infobox .nav-links a:hover,
#infobox .nav-links a.active {
  color: var(--rg-accent);
}

#infobox .nav-links .sep {
  color: var(--rg-nav-dim);
  font-size: 0.9rem;
}

#infobox .nav-links .dim {
  color: var(--rg-nav-dim);
  font-weight: 600;
  font-size: 0.85rem;
}

/* ============================================================================
   DRAWERS (Comments & Info)
   ========================================================================== */

.rg-drawer {
  position: relative;
  z-index: var(--z-drawer);
  width: 100%;
  overflow: hidden;
  background-color: var(--rg-bg-secondary);
  transition: max-height 0.4s ease;
}

.rg-drawer-top {
  border-bottom: 1px solid var(--rg-border-light);
}

.rg-drawer-bottom {
  border-top: 1px solid var(--rg-border-light);
}

.rg-drawer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
}

/* Info/Caption Drawer Styles */

.rg-photo-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-scale-2xl);
  font-weight: 700;
  color: var(--rg-text-primary);
  margin-bottom: var(--space-lg);
  line-height: 1.3;
  text-align: center;
}

.rg-description {
  font-size: var(--font-scale-base);
  line-height: 1.8;
  color: var(--rg-text-primary);
  margin-bottom: var(--space-xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}

.rg-exif-section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--rg-border-light);
}

.rg-exif-section h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-scale-lg);
  color: var(--rg-text-primary);
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.rg-exif-table {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-scale-sm);
  color: var(--rg-text-secondary);
  line-height: 1.8;
}

.rg-exif-table tbody tr {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.rg-exif-table td {
  padding: 0;
}

.rg-exif-table td:first-child {
  font-weight: 600;
  color: var(--rg-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Comments Drawer Styles */

.rg-comments-header {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-scale-xl);
  font-weight: 700;
  color: var(--rg-text-primary);
  margin-bottom: var(--space-xl);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rg-comment {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rg-border-light);
}

.rg-comment:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.rg-comment-author {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: var(--font-scale-base);
  color: var(--rg-text-primary);
  margin-bottom: var(--space-xs);
}

.rg-comment-date {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-scale-xs);
  color: var(--rg-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.rg-comment-text {
  font-size: var(--font-scale-base);
  line-height: 1.7;
  color: var(--rg-text-primary);
}

.rg-comment-form {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--rg-border-light);
}

.rg-comment-form h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-scale-lg);
  color: var(--rg-text-primary);
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.rg-comment-form-field {
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
}

.rg-comment-form-field label {
  font-weight: 600;
  color: var(--rg-text-primary);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  font-size: var(--font-scale-sm);
  letter-spacing: 0.05em;
}

.rg-comment-form-field input,
.rg-comment-form-field textarea {
  padding: var(--space-md);
  border: 1px solid var(--rg-border);
  background-color: var(--rg-input-bg);
  color: var(--rg-text-primary);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--font-scale-base);
  line-height: 1.6;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rg-comment-form-field input:focus,
.rg-comment-form-field textarea:focus {
  outline: none;
  border-color: var(--rg-accent);
  background-color: var(--rg-input-bg);
}

.rg-comment-form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.rg-comment-form-submit {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  background-color: var(--rg-accent);
  color: #000;
  border: none;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: var(--font-scale-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.rg-comment-form-submit:hover {
  background-color: var(--rg-accent-dark);
}

/* ============================================================================
   ARCHIVE/GRID LAYOUTS
   ========================================================================== */

/* --- Cropped Grid: fixed-size thumbnails centered in the grid.
       Hero frame (20px yellow outline + 4px white border) scaled to ~25%. --- */

.rg-archive-grid {
  flex: 1;
  padding: 30px 60px 40px;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 4), var(--thumb-width, 250px));
  gap: 30px;
  margin: 0 auto;
  max-width: var(--rg-canvas-width, 1400px);
  width: 100%;
  justify-content: center;
  align-content: start;
  align-items: center;
  justify-items: center;
}

.rg-archive-item {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
  width: 100%;
}

/* Portraits: 60% width so they don't dominate the row */
.rg-archive-item:has(.rg-thumb-portrait) {
  width: 70%;
}

.rg-archive-item:hover {
  transform: scale(1.02);
}

/* Miniature hero frame: outline=yellow outer, border=white inner, same as
   .rg-image.post-image but scaled down (20px→5px, 4px→2px). */
.rg-archive-item .rg-thumb {
  border: 2px solid #ffffff;
  outline: 5px solid var(--rg-accent, #FFCC00);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.rg-archive-item .rg-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Title overlay — Galleria's .htbs-archive-title with Marcellus */
.rg-archive-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: 'Marcellus', serif;
  font-size: 12px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(2px);
}

.rg-archive-item:hover .rg-archive-title {
  opacity: 1;
}

/* --- Justified Grid: public-facing.css handles flex layout.
       We only add RG-specific overrides: positioning + yellow/white borders.
       NOTE: public-facing.css resets border/box-shadow with !important on
       .justified-item, so we use outline (not affected by that reset). --- */

#justified-grid {
  max-width: var(--rg-canvas-width, 1400px);
  width: 100%;
  margin: 0 auto;
  padding: 30px 0;
  box-sizing: border-box;
  flex: 1 0 auto;
}

#justified-grid .justified-item {
  outline: var(--masonry-border-width, 0px) solid var(--masonry-border-color, var(--rg-accent));
  outline-offset: calc(var(--masonry-border-width, 0px) * -1);
}

#justified-grid .justified-item img {
  transition: opacity 0.3s ease;
}

#justified-grid .justified-item:hover img {
  opacity: 0.8;
}

/* --- Breadcrumb (when filtering by album/category) --- */

.rg-breadcrumb {
  padding: var(--space-md) 2vw;
  font-size: var(--font-scale-sm);
  color: var(--rg-text-secondary);
}

.rg-breadcrumb a {
  color: var(--rg-accent);
  text-decoration: none;
}

.rg-breadcrumb a:hover {
  text-decoration: underline;
}

.rg-breadcrumb-sep {
  margin: 0 var(--space-sm);
  color: var(--rg-text-secondary);
}

.rg-breadcrumb-current {
  color: var(--rg-text-primary);
}

/* --- Archive page base ---
     archive.php provides: skin-header (#rg-header, fixed 70px), #infobox
     (filter bar, 50px), #scroll-stage. #page-wrapper is a flex column so the
     footer always snaps to bottom. */

body.archive-page #page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  height: auto;
}

/* Show the filter bar and push it below the fixed header.
   Background steps darker than the header (#1a1a1a → #111111) to create
   a clear visual break between header chrome and page content. */
body.archive-page #infobox {
  position: relative;             /* anchor for the docked layout toggle */
  margin-top: 70px;               /* clear the fixed #rg-header (70px) */
  background-color: #111111;      /* --rg-bg-drawer: one step darker than header */
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;                  /* explicit — ensures align-items applies */
  align-items: center;
  justify-content: center;
  height: 54px;                   /* slightly taller for filter controls */
  padding: 2px 0 0 0;            /* nudge contents 2px down */
  box-sizing: border-box;
}

body.archive-page #scroll-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 0;            /* #infobox now handles header clearance */
  position: relative;
}

/* Archive header: remove inner padding so site name aligns flush with the
   edge-to-edge justified grid. The canvas max-width centering provides
   enough breathing room on wider viewports; on narrower ones the grid
   is already flush to the screen edge and the header should match. */
body.archive-page .rg-header-inside {
  padding-left: 0;
  padding-right: 0;
}

/* --- Filter bar content: groups, selects, search --- */

#infobox .filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

#infobox .filter-group form {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

#infobox select,
#infobox .archive-search-input {
  background: var(--rg-bg-chrome);
  color: var(--rg-text-primary);
  border: 1px solid var(--rg-border);
  padding: 4px 6px;
  font-family: Arial, Helvetica, -apple-system, system-ui, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}

#infobox select:focus,
#infobox .archive-search-input:focus {
  outline: none;
  border-color: var(--rg-accent);
}

#infobox .archive-search-input {
  cursor: text;
}


/* ============================================================================
   STATIC PAGES & BLOGROLL
   Adapted from Galleria's editorial blogroll with RG colour palette.
   ========================================================================== */

/* Static pages need scrollable layout — undo the viewport lock applied to
   single-image view. html/body overflow:hidden and #page-wrapper height:100dvh
   are set globally for the snapping engine; static pages need to scroll freely.
   "body.static-transmission html" is an invalid selector (CSS only cascades
   downward, not upward), so html must be unlocked via :has() instead. */
html:has(body.static-transmission),
html:has(body.archive-page) {
  overflow: auto !important;
  height: auto !important;
}
body.static-transmission,
body.archive-page {
  overflow: auto !important;
  height: auto !important;
}

body.static-transmission {
  padding-top: 70px;
  background-color: var(--rg-bg-page);
}

body.static-transmission #page-wrapper {
  height: auto !important;
  min-height: 100dvh;
}

body.static-transmission #scroll-stage {
  display: block !important; /* kill flex layout — photobox must not fill viewport */
  min-height: 100dvh;
  overflow: visible !important;
  position: relative;
}

/* Static content lane — generous whitespace, centered */
.static-content {
  max-width: var(--static-content-width, 720px);
  margin: 60px auto 80px auto;
  padding: 0 40px;
  box-sizing: border-box;
  text-align: left;
}

.static-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Page title — Marcellus editorial style */
.static-page-title {
  font-family: 'Marcellus', serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--rg-accent);
  margin: 0 0 40px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rg-border-light);
}

/* Page body — Playfair Display editorial serif */
.static-content .description {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 1.05rem;
  line-height: 2;
  color: var(--rg-text-secondary);
}

.static-content .description h2,
.static-content .description h3 {
  font-family: 'Marcellus', serif;
  color: var(--rg-text-primary);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 50px 0 20px 0;
}

.static-content .description h2 {
  font-size: 1.3rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rg-border-light);
}

.static-content .description h3 {
  font-size: 1.1rem;
}

.static-content .description p {
  margin-bottom: 1.5em;
}

.static-content .description em {
  color: var(--rg-text-primary);
  font-style: italic;
}

.static-content .description a {
  color: var(--rg-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.static-content .description a:hover {
  color: var(--rg-text-primary);
  border-bottom-color: var(--rg-accent);
}

/* Hero image on static pages — the static template uses #photobox.page-hero
   and .main-photo/.post-image (core generic structure, not #rg-photobox).
   Mirrors Galleria: centered block, constrained width, image fills it naturally. */
.static-transmission #photobox.page-hero {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  max-width: var(--static-content-width, 720px) !important;
  width: 100% !important;
  margin: 40px auto 60px auto !important;  /* top: breathing room below header */
  padding: 30px 40px !important;           /* inner padding so outline has space */
  box-sizing: border-box !important;
  float: none !important;
  background: transparent !important;
  overflow: visible !important;
}

.static-transmission .main-photo {
  height: auto !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
  line-height: 0;  /* collapse space below inline image */
}

/* Apply the RG hero frame to the static page image.
   The core page.php template uses class="post-image" (not "rg-image post-image"),
   so .rg-image.post-image never fires. Target it directly here. */
.static-transmission #photobox.page-hero img.post-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: var(--rg-hero-inner) solid #ffffff;
  outline: var(--rg-hero-border) solid var(--rg-accent);
  box-shadow: var(--rg-shadow);
}

.static-transmission .description .align-left {
  float: left;
  margin: 5px 40px 20px 0;
  border: 3px solid var(--rg-accent);
  max-width: 40%;
  height: auto;
  display: block;
}

/* Kill the manager's ghost break after floated images */
.static-transmission .description img + br {
  display: none;
}

/* Kill paragraph top interference for baseline snap */
.static-transmission .description p:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

/* Blogroll canvas — centered content lane */
.blogroll-canvas {
  max-width: 720px;
  margin: 4vw auto 6vw auto;
  padding: 0 4vw;
  box-sizing: border-box;
  text-align: left;
  flex: 1;
}

/* Category block */
.blogroll-category-block {
  margin-bottom: 4vw;
}

/* Category heading — NatGeo yellow accent, small caps */
.blogroll-category-heading {
  font-family: 'Marcellus', serif;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rg-accent);
  margin: 0 0 2vw 0;
  padding-bottom: 0.8vw;
  border-bottom: 1px solid var(--rg-border-light);
}

/* Peer grid */
.blogroll-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Individual peer — padded, subtle dividers */
.blogroll-peer {
  padding: 2vw 0;
  border-bottom: 1px solid var(--rg-border-light);
  transition: background 0.3s ease;
}

.blogroll-peer:first-child {
  padding-top: 0;
}

.blogroll-peer:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Peer name — prominent, accent-coloured link */
.blogroll-peer-name {
  font-family: 'Marcellus', serif;
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.4em;
  line-height: 1.3;
}

.blogroll-peer-name a {
  color: var(--rg-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blogroll-peer-name a:hover {
  color: var(--rg-text-primary);
}

/* Peer description — serif body text */
.blogroll-peer-desc {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  color: var(--rg-text-secondary);
  line-height: 1.7;
  margin: 0 0 0.5em 0;
  padding: 0;
  max-width: 600px;
}

/* Peer URL — quiet monospace */
.blogroll-peer-url {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  color: var(--rg-text-secondary);
  opacity: 0.5;
}

.dim {
  color: var(--rg-text-secondary);
}

/* ============================================================================
   SYSTEM FOOTER
   ========================================================================== */

#system-footer {
  background-color: var(--rg-bg-chrome);
  border-top: 1px solid var(--rg-border-light);
  padding: 32px 0;
  text-align: center;
  width: 100%;
  margin-top: auto;
}

body.archive-page #system-footer,
body.static-transmission #system-footer {
  display: block;
  position: relative;
  z-index: 100;
}

/* Drawers have no role on static pages — hide them */
body.static-transmission #rg-info-drawer,
body.static-transmission #rg-comments-drawer {
  display: none !important;
}

#system-footer .inside {
  max-width: 95%;
  margin: 0 auto;
  font-family: var(--rg-font-body, 'Inter', sans-serif);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--rg-text-secondary);
}

#system-footer p {
  color: var(--rg-text-secondary);
  font-family: var(--rg-font-body, 'Inter', sans-serif);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.7;
  margin: 0;
}

#system-footer .sep {
  display: inline-block;
  margin: 0 12px;
  color: var(--rg-border-light);
}

#system-footer a,
.footer-link {
  color: var(--rg-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

#system-footer a:hover,
.footer-link:hover {
  color: var(--rg-accent);
}

.rss-tag {
  font-weight: normal;
  letter-spacing: 1px;
}

.reverse-email {
  unicode-bidi: bidi-override;
  direction: rtl;
}

/* ============================================================================
   FORM STYLES
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="number"],
input[type="tel"],
input[type="time"],
input[type="week"],
select,
textarea {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--font-scale-base);
  padding: var(--space-md);
  border: 1px solid var(--rg-border);
  background-color: var(--rg-input-bg);
  color: var(--rg-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--rg-accent);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.1);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  padding: var(--space-md) var(--space-xl);
  border: none;
  background-color: var(--rg-accent);
  color: #000;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: var(--font-scale-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: var(--rg-accent-dark);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  opacity: 0.9;
}

/* ============================================================================
   UTILITIES & HELPERS
   ========================================================================== */

.rg-text-center {
  text-align: center;
}

.rg-text-right {
  text-align: right;
}

.rg-hidden {
  display: none !important;
}

.rg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.rg-container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  :root {
    --grid-cols: 3;
  }

  #rg-header {
    height: 60px;
  }

  .rg-header-inside {
    padding: 0 var(--space-lg);
  }

  .rg-masthead {
    font-size: 1.4rem;
  }

  #rg-photobox {
    margin-top: 60px; /* match smaller header */
    height: calc(100dvh - 110px); /* 60px header + 50px infobox */
  }

  .rg-single #rg-comments-drawer { top: 60px; }
  .rg-single #rg-info-drawer     { bottom: 50px; }

  .rg-photo-wrap {
    padding: 2.5vh 2.5vw;
  }

  .rg-image.post-image {
    border-width: 6px;
  }

  .rg-drawer-inner {
    padding: var(--space-lg) var(--space-lg);
  }

  .rg-archive-grid {
    gap: 24px;
    padding: 20px 30px 30px;
  }

  .rg-photo-title {
    font-size: var(--font-scale-2xl);
  }

  h1 {
    font-size: var(--font-scale-3xl);
  }

  h2 {
    font-size: var(--font-scale-2xl);
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  :root {
    --grid-cols: 2;
  }

  #rg-header {
    height: 50px;
  }

  .rg-header-inside {
    padding: 0 var(--space-md);
  }

  .rg-masthead {
    font-size: 1.2rem;
  }

  .rg-header-nav .nav-menu,
  .rg-header-nav .nav-menu li {
    gap: 20px;
  }

  .rg-header-nav a,
  .rg-header-nav .nav-menu a {
    font-size: 0.75rem;
  }

  #rg-photobox {
    margin-top: 50px;
    height: calc(100dvh - 95px); /* 50px header + 45px infobox */
  }

  .rg-single #rg-comments-drawer { top: 50px; }
  .rg-single #rg-info-drawer     { bottom: 45px; }

  .rg-photo-wrap {
    padding: 2vh 2vw;
  }

  .rg-image.post-image {
    border-width: 4px;
  }

  #infobox {
    height: 45px;
    overflow-x: scroll;
  }

  #infobox .nav-links,
  #infobox .nav-links .left,
  #infobox .nav-links .center,
  #infobox .nav-links .right {
    gap: 20px;
  }

  #infobox .nav-links a {
    font-size: 0.75rem;
  }

  .rg-drawer-inner {
    padding: var(--space-lg) var(--space-md);
  }

  .rg-photo-title {
    font-size: var(--font-scale-xl);
  }

  .rg-description {
    font-size: var(--font-scale-sm);
  }

  .rg-exif-section h4 {
    font-size: var(--font-scale-base);
  }

  .rg-exif-table tbody tr {
    grid-template-columns: 100px 1fr;
    gap: var(--space-sm);
  }

  .rg-archive-grid {
    gap: 20px;
    padding: 15px 20px 20px;
  }

  body.archive-page #scroll-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
  }

  .rg-comment-form-field {
    margin-bottom: var(--space-md);
  }

  h1 {
    font-size: var(--font-scale-2xl);
  }

  h2 {
    font-size: var(--font-scale-xl);
  }

  h3 {
    font-size: var(--font-scale-lg);
  }

  #system-footer {
    padding: 24px 0;
  }

  .rg-comment-form-field input,
  .rg-comment-form-field textarea {
    font-size: 16px;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  :root {
    --grid-cols: 1;
  }

  #rg-header {
    height: 45px;
  }

  .rg-header-nav {
    display: none;
  }

  .rg-masthead {
    font-size: 1rem;
  }

  #rg-photobox {
    margin-top: 45px;
    height: calc(100dvh - 90px); /* 45px header + 45px infobox */
  }

  .rg-single #rg-comments-drawer { top: 45px; }
  .rg-single #rg-info-drawer     { bottom: 40px; }

  .rg-photo-wrap {
    padding: 1.5vh 1.5vw;
  }

  .rg-image.post-image {
    border-width: 2px;
  }

  .rg-photo-download-overlay {
    top: var(--space-md);
    right: var(--space-md);
  }

  .rg-photo-download-overlay a {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-scale-xs);
  }

  #infobox {
    height: 40px;
  }

  #infobox .nav-links,
  #infobox .nav-links .left,
  #infobox .nav-links .center,
  #infobox .nav-links .right {
    gap: 12px;
  }

  #infobox .nav-links a {
    font-size: 0.7rem;
  }

  .rg-drawer-inner {
    padding: var(--space-md) var(--space-sm);
  }

  .rg-photo-title {
    font-size: var(--font-scale-lg);
    margin-bottom: var(--space-md);
  }

  .rg-description {
    font-size: var(--font-scale-sm);
    margin-bottom: var(--space-md);
  }

  .rg-exif-table tbody tr {
    grid-template-columns: 80px 1fr;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
  }

  .rg-exif-table td {
    font-size: var(--font-scale-xs);
  }

  .rg-archive-grid {
    gap: 16px;
    padding: 10px 15px 15px;
  }

  body.archive-page #scroll-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 45px;
  }

  .rg-comment {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .rg-comment-author {
    font-size: var(--font-scale-sm);
  }

  .rg-comment-text {
    font-size: var(--font-scale-sm);
  }

  .rg-comment-form h3 {
    font-size: var(--font-scale-base);
  }

  .rg-comment-form-field {
    margin-bottom: var(--space-md);
  }

  .rg-comment-form-field label {
    font-size: var(--font-scale-xs);
  }

  .rg-comment-form-field input,
  .rg-comment-form-field textarea {
    padding: var(--space-sm);
    font-size: 16px;
  }

  .rg-comment-form-submit {
    width: 100%;
  }

  h1 {
    font-size: var(--font-scale-xl);
  }

  h2 {
    font-size: var(--font-scale-lg);
  }

  h3 {
    font-size: var(--font-scale-base);
  }

  p {
    font-size: var(--font-scale-sm);
  }

  #system-footer {
    padding: 20px 0;
  }

  #system-footer .inside {
    font-size: 0.6rem;
    letter-spacing: 1px;
  }

  #system-footer p {
    font-size: 0.6rem;
  }
}

/* ============================================================================
   LANDING PAGE
   ========================================================================== */

.rg-landing {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.rg-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  background-color: var(--rg-bg-secondary);
  border-bottom: 1px solid var(--rg-border-light);
  margin-top: 70px;
}

.rg-hero-link {
  display: block;
  width: 100%;
  max-width: 800px;
  overflow: hidden;
  transition: transform 0.3s ease;
  margin-bottom: var(--space-lg);
}

.rg-hero-link:hover {
  transform: scale(1.01);
}

.rg-hero-image {
  width: 100%;
  height: auto;
  display: block;
}

.rg-hero-caption {
  text-align: center;
  width: 100%;
  max-width: 800px;
}

.rg-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-scale-2xl);
  font-weight: 700;
  color: var(--rg-text-primary);
  margin: var(--space-md) 0 var(--space-sm) 0;
}

.rg-hero-date {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-scale-sm);
  color: var(--rg-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.rg-recent-section {
  padding: var(--space-3xl) var(--space-xl);
  flex-grow: 1;
  background-color: var(--rg-bg-page);
}

.rg-recent-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-scale-xl);
  font-weight: 700;
  color: var(--rg-text-primary);
  margin: 0 0 var(--space-2xl) 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.rg-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto var(--space-2xl);
}

.rg-recent-item {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  transition: transform 0.2s ease;
}

.rg-recent-item:hover {
  transform: scale(1.02);
}

.rg-recent-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rg-landing-more {
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  border-top: 1px solid var(--rg-border-light);
  background-color: var(--rg-bg-page);
}

.rg-view-all {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  background-color: var(--rg-accent);
  color: #000;
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: var(--font-scale-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease;
}

.rg-view-all:hover {
  background-color: var(--rg-accent-dark);
  color: #000;
}

/* ============================================================================
   BREADCRUMB & MISC
   ========================================================================== */

.rg-breadcrumb {
  font-size: var(--font-scale-sm);
  color: var(--rg-text-secondary);
  margin-top: var(--space-sm);
}

.rg-breadcrumb a {
  color: var(--rg-link);
}

.rg-breadcrumb a:hover {
  color: var(--rg-accent);
}

.rg-breadcrumb-sep {
  margin: 0 var(--space-sm);
  color: var(--rg-text-dim);
}

.rg-breadcrumb-current {
  color: var(--rg-text-primary);
  font-weight: 600;
}

.rg-no-photos {
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  color: var(--rg-text-dim);
  font-size: var(--font-scale-lg);
  grid-column: 1 / -1;
}

.rg-no-comments {
  color: var(--rg-text-dim);
  font-style: italic;
}

.rg-photo-date {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-scale-sm);
  color: var(--rg-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.rg-comment-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.rg-comment-form input,
.rg-comment-form textarea {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--rg-border);
  background-color: var(--rg-input-bg);
  color: var(--rg-text-primary);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--font-scale-base);
}

.rg-comment-form input:focus,
.rg-comment-form textarea:focus {
  outline: none;
  border-color: var(--rg-accent);
}

.rg-comment-form textarea {
  resize: vertical;
  min-height: 100px;
  margin-bottom: var(--space-md);
}


/* ============================================================================
   RESPONSIVE — LANDING
   ========================================================================== */

@media (max-width: 768px) {
  .rg-hero {
    padding: var(--space-2xl) var(--space-md);
    margin-top: 50px;
  }

  .rg-hero-title {
    font-size: var(--font-scale-xl);
  }

  .rg-recent-section {
    padding: var(--space-2xl) var(--space-md);
  }

  .rg-recent-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-md);
  }

  .rg-comment-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .rg-hero {
    padding: var(--space-lg) var(--space-sm);
    margin-top: 45px;
  }

  .rg-recent-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-sm);
  }

  .rg-hero-title {
    font-size: var(--font-scale-lg);
  }
}

/* ============================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  #rg-header,
  .rg-header-nav,
  #infobox,
  .rg-drawer,
  #system-footer,
  .rg-photo-download-overlay {
    display: none !important;
  }

  body {
    margin: 0;
    padding: 0;
  }

  body::after {
    display: none !important;
  }

  #rg-photobox {
    height: auto;
    margin-top: 0;
    page-break-inside: avoid;
  }

  .rg-photo-wrap {
    padding: 0;
  }
}
/* ===== SNAPSMACK EOF ===== */