/* ==========================================================================
   GAMAYUN // ORBITAL SALVAGE ARCHIVE — Faded CRT Protocol
   Core visual system. Pure CSS, zero dependencies, per Rev-4.2 spec.
   ========================================================================== */

/* Colors/fonts below are the official values from Project-Gamayun-Brand-Kit.html
   (Meta-generated brand kit dossier) - not my own improvised palette. */
:root {
  --void: #0A0A0A;
  --void-raised: #10160f;
  --phosphor: #00FF66;
  --phosphor-dim: rgba(0, 255, 102, 0.4);
  --phosphor-faint: rgba(0, 255, 102, 0.15);
  /* Solid (not alpha-blended) muted green for secondary/dim BODY TEXT.
     --phosphor-dim reads fine as a border/divider color, but at 0.4 alpha
     over --void it only hits ~3:1 contrast - well under the 4.5:1 AA floor
     for normal-size text, which is why subtext was hard to read. This hits
     ~5.4:1 while still reading as visually "dimmer" than full phosphor. */
  --phosphor-dim-text: #3C965F;
  --amber: #ff9500;
  --akira: #D32027;           /* use sparingly: accent only, never the full logo treatment */
  --deep-indigo: #1A2333;
  --oxidized-copper: #B87333;
  --antique-silver: #C8D5C0;

  --font-display: 'Eurostile', 'Bank Gothic', 'Arial Black', sans-serif;
  --font-mono: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  --font-body: 'IBM Plex Mono', 'Courier New', monospace;
  --font-jp: 'Noto Sans JP', sans-serif;

  --header-h: 3rem;
  --footer-h: auto;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--phosphor);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--phosphor);
  text-decoration: none;
  border-bottom: 1px solid var(--phosphor-dim);
}
a:hover, a:focus {
  color: var(--void);
  background: var(--phosphor);
  border-bottom-color: var(--phosphor);
}

/* ---- CRT overlay: persistent horizontal scanlines + vignette ---- */
.crt-screen {
  position: relative;
}
.crt-screen::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.08) 50%);
  background-size: 100% 4px;
  z-index: 9999;
  pointer-events: none;
}
.crt-screen::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  box-shadow: inset 0 0 12vw rgba(0,0,0,0.4);
  z-index: 9998;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .crt-screen::before { background-size: 100% 4px; opacity: 0.6; }
}

.phosphor-text {
  color: var(--phosphor);
  text-shadow: 0 0 2px rgba(51, 255, 51, 0.8), 0 0 8px rgba(51, 255, 51, 0.3);
}

/* ---- Header ---- */
.terminal-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid var(--phosphor-dim);
  background: var(--void-raised);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.terminal-header .brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}
.terminal-header .system-status {
  font-size: 0.8rem;
  color: var(--phosphor-dim-text);
}
.terminal-header .system-status .clock { color: var(--phosphor); }

/* ---- Command bridge grid: 3-column desktop deck ---- */
.command-bridge-grid {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 0;
  flex: 1;
  min-height: 0;
}
@media (max-width: 900px) {
  .command-bridge-grid {
    grid-template-columns: 1fr;
  }
  .left-deck, .right-deck { order: 2; }
  .center-viewport { order: 1; }
}

.left-deck, .right-deck {
  border-right: 1px solid var(--phosphor-faint);
  padding: 1rem;
}
.right-deck { border-right: none; border-left: 1px solid var(--phosphor-faint); }
/* The grid's default align-items:stretch was making .left-deck exactly as
   tall as the tallest column (usually center-viewport), so on any page
   longer than one screen it just scrolled away with everything else - the
   nav bar was "connected to the body". align-self:start shrinks it to its
   own content height so position:sticky actually has room to stick. */
@media (min-width: 901px) {
  .left-deck {
    position: sticky;
    top: var(--header-h);
    align-self: start;
  }
}

/* Raven-and-key seal: a faint watermark bled toward the lower-right of
   the whole page (kept off the left corner so it doesn't collide with
   GAMA). The source PNG used to be a fully opaque rectangle (dark
   near-black "background" baked into the pixels, alpha always 255) -
   that's what was actually bleeding through the ad box, not a z-index
   problem. Re-exported with real alpha (background keyed to transparent
   by luminance) so only the linework itself is visible now. Fixed so it
   sits in place while the page scrolls. z-index: 0, not negative - body
   has its own explicit background (see html,body rule above), which
   disqualifies it from the CSS canvas-background propagation trick, so a
   negative z-index here would paint behind that opaque body background
   and never be seen. 0 still sits behind every real (non-positioned) UI
   element painted later in the document. */
.raven-watermark {
  position: fixed;
  right: 2vw;
  bottom: 3vw;
  width: 30vw;
  min-width: 280px;
  max-width: 520px;
  height: auto;
  transform: rotate(-11deg);
  filter: brightness(0.5) saturate(0.8);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .raven-watermark { width: 40vw; right: 1vw; bottom: 1vw; opacity: 0.18; }
}

.terminal-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--phosphor-faint);
  background: var(--void-raised);
  padding: 0.75rem;
}
/* Desktop: the nav now lists every tool grouped by category, which is
   tall enough to run under GAMA's fixed corner spot. Give it its own
   scroll region that stops short of her instead of overlapping. The 24rem
   below was a guessed constant for "GAMA's whole footprint" - same anti-
   pattern as her old hardcoded 13rem bottom-clear - and drifted out of
   sync as soon as her real clearance (ad-leaderboard + footer + ticker)
   grew past what 24rem assumed. gama-core.js now measures her actual
   on-screen top edge and sets --gama-nav-clear directly; 24rem is just the
   pre-JS fallback for the first paint. */
@media (min-width: 901px) {
  .terminal-nav {
    max-height: var(--gama-nav-clear, calc(100vh - var(--header-h) - 2rem - 24rem));
    overflow-y: auto;
    padding-right: 0.25rem;
    /* Fully invisible scrollbar - the nav still scrolls (wheel, drag, arrow
       keys), it just never renders a bar. */
    scrollbar-width: none; /* Firefox */
  }
  .terminal-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
}
.nav-section-label {
  font-size: 0.7rem;
  color: var(--phosphor-dim-text);
  letter-spacing: 0.1em;
  margin: 0.75rem 0 0.25rem;
}
.nav-link {
  display: block;
  padding: 0.25rem 0;
  border-bottom: none;
  font-size: 0.9rem;
}
.nav-link.active { color: var(--amber); }
.nav-link:hover { border-bottom: none; }

.center-viewport {
  padding: 1.5rem;
  min-width: 0;
}

.tool-card {
  border: 1px solid var(--phosphor-dim);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--void-raised);
}
.tool-card h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-top: 0;
}
.tool-workspace {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.tool-workspace input[type="text"],
.tool-workspace textarea {
  flex: 1;
  min-width: 200px;
  background: var(--void);
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-family: var(--font-body);
  padding: 0.6rem;
}
.tool-workspace textarea { width: 100%; min-height: 6rem; }
button, .btn {
  background: transparent;
  border: 1px solid var(--phosphor);
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
button:hover, .btn:hover {
  background: var(--phosphor);
  color: var(--void);
}
.result-block {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px dashed var(--phosphor-dim);
  word-break: break-all;
  min-height: 1.5rem;
  font-size: 0.95rem;
}
.badge-clientside {
  display: inline-block;
  font-size: 0.7rem;
  border: 1px solid var(--phosphor);
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

/* ---- Mascot / log deck (right pane) ---- */
/* No border, no panel - she just sits on the page rather than living in a
   UI box. The radial gradient is only there to keep her dialogue readable
   over whatever's behind her; it fades to nothing at the edges so it never
   reads as a container. */
.gama-mascot-box {
  padding: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}
/* Desktop: GAMA detaches from the right-deck column and floats fixed
   in the bottom-left corner (closer to where eyes actually land than the
   far right edge), so she stays put while the page scrolls. She sits
   above the raven watermark, which shares that corner as a background
   flourish. */
@media (min-width: 901px) {
  .gama-mascot-box {
    position: fixed;
    left: 1.25rem;
    /* Was a hardcoded 13rem guessing at "ad banner + footer" height - broke
       whenever the leaderboard ad wrapped to a second line or the footer
       nav wrapped, pushing her up into the sidebar nav (or overlapping the
       ad unit itself). gama-core.js now measures the real ticker+site-footer
       +ad-leaderboard stack on load/resize and sets this var, so she always
       sits exactly one gap above all three regardless of how any of them
       wrap. 13rem is just the pre-JS fallback for the first paint. */
    bottom: var(--gama-bottom-clear, 13rem);
    width: 200px;
    background: radial-gradient(ellipse at 50% 60%, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.28) 50%, rgba(10,10,10,0) 75%);
    z-index: 500;
    margin-bottom: 0;
    pointer-events: none;
  }
}
.gama-portrait {
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(0,255,102,0.35));
  animation: gama-idle-float 4s ease-in-out infinite;
}
.gama-portrait.impatient { animation: gama-idle-float 4s ease-in-out infinite, gama-impatient-shake 0.5s ease-in-out; }
@keyframes gama-idle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1deg); }
}
@keyframes gama-impatient-shake {
  0%, 100% { transform: translateY(-2px) rotate(0deg); }
  20% { transform: translateY(-2px) rotate(-3deg); }
  40% { transform: translateY(-2px) rotate(3deg); }
  60% { transform: translateY(-2px) rotate(-2deg); }
  80% { transform: translateY(-2px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gama-portrait, .gama-portrait.impatient { animation: none; }
}
.aperture-eye {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor);
}
/* 90s-RPG-style speech bubble: bordered box with a tail pointing down at
   her portrait, instead of bare floating text. The tail is two stacked
   CSS triangles (outer border-colored, inner background-colored, slightly
   smaller/lower) - the classic cheap way to fake a bordered pointer. */
.gama-dialogue {
  position: relative;
  background: var(--void-raised);
  border: 2px solid var(--phosphor);
  padding: 0.6rem 0.7rem;
  margin-bottom: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.4;
  min-height: 3em;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.15);
}
.gama-dialogue::after,
.gama-dialogue::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.gama-dialogue::after { bottom: -11px; border-top: 11px solid var(--phosphor); }
.gama-dialogue::before { bottom: -8px; border-top: 9px solid var(--void-raised); z-index: 1; }

.corporate-debris-billboard {
  border: 1px dashed var(--amber);
  padding: 0.5rem;
}
.wireframe-header {
  font-size: 0.7rem;
  color: var(--amber);
  margin-bottom: 0.5rem;
  text-align: center;
}

/* ---- Site updates / transmission log (right pane, replaces the old
   in-column mascot slot) ---- */
.site-updates-box {
  border: 1px solid var(--phosphor-dim);
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.site-updates-box .wireframe-header {
  color: var(--phosphor);
  text-align: left;
}
.update-entry { margin-bottom: 0.5rem; }
.update-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--phosphor-dim-text);
  margin-bottom: 0.25rem;
}
.update-entry p { margin: 0; line-height: 1.4; color: var(--phosphor-dim-text); }
.updates-link { font-size: 0.8rem; display: inline-block; }
.adsense-slot {
  min-height: 250px;
  border: 1px solid var(--phosphor-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--phosphor-dim-text);
}

/* ---- Ad format variants: leaderboard (wide banner, sitewide above the
   footer) and native (in-content card, homepage between hero and grid).
   Same "corporate debris" ironic framing as the sidebar unit, different
   shapes so there's more than one slot format to actually sell/fill. */
.ad-leaderboard {
  margin: 0 1.5rem 1.5rem;
  border: 1px dashed var(--amber);
  padding: 0.5rem;
}
.ad-leaderboard .adsense-slot { min-height: 90px; }
.ad-native {
  margin: 0 1.5rem 1.5rem;
  border: 1px dashed var(--amber);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ad-native .wireframe-header { margin-bottom: 0; text-align: left; white-space: nowrap; }
.ad-native .adsense-slot { flex: 1; min-height: 60px; }

/* ---- Footer ---- */
.archival-log-footer {
  border-top: 1px solid var(--phosphor-dim);
  background: var(--void-raised);
  overflow: hidden;
}
.log-stream {
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--phosphor-dim-text);
  padding: 0.35rem 0;
  animation: ticker 40s linear infinite;
}
@keyframes ticker {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .log-stream { animation: none; }
}

.site-footer {
  border-top: 1px solid var(--phosphor-dim);
  padding: 1.5rem 1rem;
  font-size: 0.8rem;
  color: var(--phosphor-dim-text);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.site-footer nav a { border-bottom: none; }

/* ---- Landing hero / logo animation ---- */
.hero {
  padding: 0.75rem 0 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--phosphor-dim);
}
.hero-logo {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 10vw, 6rem);
  letter-spacing: 0.08em;
  color: var(--phosphor);
  text-shadow:
    0 0 4px var(--phosphor),
    0 0 20px rgba(51,255,51,0.6),
    0 0 40px rgba(51,255,51,0.3);
  position: relative;
  display: inline-block;
  animation: flicker-in 1.8s steps(2, end) 1, glitch-trail 6s ease-in-out infinite 2s;
}
/* The source art (assets/gama-akira-logo.png) has been keyed to real alpha
   transparency around the letterforms - no rectangular frame or vignette
   baked into the pixels, so it sits directly on the page with no edge to
   see. The filter recolors the original red/white print to the site's
   phosphor-green palette (grayscale first so hue-rotate has something
   uniform to rotate, then sepia+hue-rotate+saturate does the tinting). */
.hero-akira-logo {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(8) brightness(0.95) drop-shadow(0 0 18px rgba(0,255,102,0.45));
  animation: flicker-in 1.8s steps(2, end) 1;
}
/* Glitch pulse is applied/removed by JS on a randomized timer (see
   gama-core.js) rather than looping on a fixed CSS cycle, so it doesn't
   read as a predictable metronome. */
.hero-akira-logo.glitching {
  animation: flicker-in 1.8s steps(2, end) 1, akira-glitch 0.35s steps(2, end) 1;
}
@keyframes akira-glitch {
  0%   { transform: translate(0, 0); filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(8) brightness(0.95) drop-shadow(0 0 18px rgba(0,255,102,0.45)); }
  20%  { transform: translate(-4px, 1px); filter: grayscale(1) sepia(1) hue-rotate(90deg) saturate(14) brightness(1.1) drop-shadow(0 0 18px rgba(0,255,102,0.45)); clip-path: inset(10% 0 60% 0); }
  40%  { transform: translate(3px, -1px); filter: grayscale(1) sepia(1) hue-rotate(45deg) saturate(14) brightness(1.1) drop-shadow(0 0 18px rgba(0,255,102,0.45)); clip-path: inset(55% 0 15% 0); }
  60%  { transform: translate(-2px, 0); filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(11) brightness(1) drop-shadow(0 0 18px rgba(0,255,102,0.45)); clip-path: inset(30% 0 40% 0); }
  80%  { transform: translate(2px, 1px); filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(8) brightness(0.95) drop-shadow(0 0 18px rgba(0,255,102,0.45)); clip-path: inset(0 0 0 0); }
  100% { transform: translate(0, 0); filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(8) brightness(0.95) drop-shadow(0 0 18px rgba(0,255,102,0.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-akira-logo, .hero-akira-logo.glitching { animation: none; }
}
.hero-tagline {
  margin-top: 0.75rem;
  padding: 0 1.5rem;
  color: var(--phosphor-dim-text);
  font-size: 0.95rem;
}
@keyframes flicker-in {
  0% { opacity: 0; text-shadow: none; }
  10% { opacity: 1; }
  12% { opacity: 0.2; }
  20% { opacity: 1; }
  22% { opacity: 0.4; }
  30% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes glitch-trail {
  0%, 96%, 100% { transform: translateX(0); filter: none; }
  97% { transform: translateX(-3px); filter: hue-rotate(20deg); }
  98% { transform: translateX(3px); filter: hue-rotate(-20deg); }
  99% { transform: translateX(0); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; }
}

/* ---- Tool grid on landing, grouped by category ---- */
.tool-grid { padding: 1.5rem; }
.grid-section-label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--phosphor-dim-text);
  border-bottom: 1px solid var(--phosphor-faint);
  padding-bottom: 0.35rem;
  margin: 2rem 0 0.85rem;
}
.grid-section-label:first-child { margin-top: 0; }
.tool-grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.tool-grid-item {
  border: 1px solid var(--phosphor-dim);
  padding: 1rem;
  display: block;
  overflow-wrap: break-word;
  min-width: 0;
}
.tool-grid-item:hover { background: var(--phosphor-faint); color: var(--phosphor); border-bottom: 1px solid var(--phosphor-dim); }
.tool-grid-item .tool-name { font-family: var(--font-mono); font-size: 1.1rem; }
.tool-grid-item .tool-desc { font-size: 0.8rem; color: var(--phosphor-dim-text); margin-top: 0.3rem; }

/* ---- Breadcrumb trail (tool/lore pages, not home) ---- */
.breadcrumb {
  font-size: 0.8rem;
  color: var(--phosphor-dim-text);
  margin-bottom: 1rem;
}
.breadcrumb a { border-bottom: none; color: var(--phosphor-dim-text); }
.breadcrumb a:hover { color: var(--void); background: var(--phosphor-dim-text); }
.breadcrumb-sep { color: var(--phosphor-faint); }

/* ---- Symbol index ---- */
.symbol-cat-label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--phosphor-dim-text);
  border-bottom: 1px solid var(--phosphor-faint);
  padding-bottom: 0.3rem;
  margin: 1.5rem 0 0.75rem;
}
.symbol-cat-label:first-child { margin-top: 1rem; }
.symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}
.symbol-tile {
  background: transparent;
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-family: var(--font-body);
  text-align: left;
  padding: 0.6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.symbol-tile:hover { background: var(--phosphor-faint); }
.symbol-glyph { font-size: 1.5rem; line-height: 1; }
.symbol-meta { font-size: 0.7rem; color: var(--phosphor-dim-text); line-height: 1.3; }
.emoji-glyph { font-size: 2rem; line-height: 1; }

/* ---- Acronym index ---- */
.acronym-list { display: flex; flex-direction: column; gap: 0.5rem; }
.acronym-entry {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--phosphor-dim);
  padding: 0.6rem 0.8rem;
}
.acronym-term {
  background: transparent;
  border: none;
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 7ch;
  text-align: left;
  padding: 0;
}
.acronym-term:hover { text-decoration: underline; }
.acronym-expansion { font-size: 0.9rem; }
.acronym-note { font-size: 0.78rem; color: var(--phosphor-dim-text); margin-top: 0.3rem; line-height: 1.4; }

/* ---- Image salvage (EXIF read/strip, resize, convert) ---- */
.img-dropzone {
  border: 1px dashed var(--phosphor-dim);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  margin-top: 1rem;
}
.img-dropzone:hover, .img-dropzone.dragover {
  background: var(--phosphor-faint);
  border-color: var(--phosphor);
}
.exif-table { border: 1px solid var(--phosphor-dim); }
.exif-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--phosphor-faint);
  font-size: 0.85rem;
}
.exif-row:last-child { border-bottom: none; }
.exif-row-gps { color: var(--amber); }
.exif-key { color: var(--phosphor-dim-text); }
.exif-row-gps .exif-key { color: var(--amber); }
.exif-gps-warning {
  border: 1px dashed var(--amber);
  color: var(--amber);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

/* ---- IIFYM macro calculator result ---- */
.iifym-summary, .iifym-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}
.iifym-stat, .iifym-macro {
  border: 1px solid var(--phosphor-dim);
  padding: 0.6rem;
  text-align: center;
}
.iifym-stat-label, .iifym-macro-label {
  display: block;
  font-size: 0.75rem;
  color: var(--phosphor-dim-text);
  letter-spacing: 0.05em;
}
.iifym-stat-val, .iifym-macro-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  margin-top: 0.2rem;
}
.iifym-macro { border-color: var(--phosphor); }
.iifym-warning {
  border: 1px dashed var(--amber);
  color: var(--amber);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

/* ---- Prose pages (about/legal/wiki) ---- */
.prose { padding: 1.5rem; max-width: 68ch; line-height: 1.7; font-size: 1.05rem; }
.prose h1, .prose h2 { font-family: var(--font-display); }
.prose p { margin: 1em 0; }