/* The 28px reserve at the top used to hold the proposal switcher. Layout 12 is the site now,
   so the bar is gone and the reserve with it - leaving it in left a black strip across the top. */



/* ============================================================
   12 — HOLODECK : a copy of 11, reskinned Star Trek / LCARS.
   Warm-black bridge chrome, elbow-pill controls in the classic
   LCARS palette, a holographic grid ghosting the globe like a
   still-materialising holodeck program, sliding panels, and an
   optional computer-chirp on every control (12/fx.js, synthesised,
   no audio files — off by default, toggle bottom-left).
   ============================================================ */
:root{
  --rail:300px; --read:392px; --scrub-h:150px;
  --lc-black:#000000; --lc-void:#05050a;
  --lc-orange:#ff9c33; --lc-orange2:#cc7a29; --lc-gold:#ffcc66; --lc-lavender:#cc99cc;
  --lc-periwinkle:#9999ff; --lc-blue:#6699ff; --lc-salmon:#ff6666; --lc-cream:#ffe0b3;
  --holo:#4dffee; --holo-dim:rgba(77,255,238,.35); --holo-faint:rgba(77,255,238,.12);
  --text:#e8e8ff; --mut:#9aa0c8;
  --panel:#05050a; --sheet:#05050a; --line:var(--lc-orange2); --fg:var(--text); --acc:var(--holo);
}
body{font-family:'Arial Narrow','Oswald','Helvetica Neue Condensed','Helvetica Neue',Arial,sans-serif;
  background:var(--lc-black);color:var(--text)}
#globe{left:var(--rail);right:var(--read);top:52px;background:#000}

/* ---- HOLODECK GRID OVERLAY : sits over the globe, never blocks input ---- */
#holo{position:fixed;left:var(--rail);right:var(--read);top:52px;bottom:0;z-index:2;
  pointer-events:none;overflow:hidden}
.holo-grid{position:absolute;inset:-2px;
  background-image:
    repeating-linear-gradient(0deg,var(--holo-faint) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,var(--holo-faint) 0 1px,transparent 1px 46px);
  mix-blend-mode:screen;opacity:.55;animation:holoFlicker 7s ease-in-out infinite}
.holo-sweep{position:absolute;left:0;right:0;height:140px;top:-140px;
  background:linear-gradient(180deg,transparent,var(--holo-dim) 45%,transparent);
  mix-blend-mode:screen;opacity:.4;animation:holoSweep 9s linear infinite}
.holo-arch{position:absolute;width:64px;height:64px;border:2px solid var(--holo-dim);opacity:.5}
.holo-arch.tl{top:8px;left:8px;border-right:none;border-bottom:none;border-radius:16px 0 0 0}
.holo-arch.tr{top:8px;right:8px;border-left:none;border-bottom:none;border-radius:0 16px 0 0}
.holo-arch.bl{bottom:8px;left:8px;border-right:none;border-top:none;border-radius:0 0 0 16px}
.holo-arch.br{bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 16px 0}
@keyframes holoFlicker{0%,100%{opacity:.55}42%{opacity:.4}45%{opacity:.62}68%{opacity:.5}71%{opacity:.35}}
@keyframes holoSweep{0%{top:-140px}100%{top:100%}}
@media (prefers-reduced-motion:reduce){.holo-grid,.holo-sweep{animation:none}}

/* ---- slim top bar : LCARS elbow ---- */
#bar{left:var(--rail);right:var(--read);top:0;height:52px;z-index:7;
  background:var(--lc-void);border-bottom:3px solid var(--lc-orange);
  border-radius:0 0 26px 0;align-items:center;gap:12px;padding:0 22px;pointer-events:auto}
.brand{color:var(--lc-orange);font-weight:900;letter-spacing:.28em;font-size:16px;text-transform:uppercase}
.sub{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.count{color:var(--holo);font-size:12px;font-weight:700}

/* ---- LEFT RAIL : controls, LCARS console ---- */
#controls{left:0;right:auto;top:0;width:var(--rail);height:100vh;
  background:var(--lc-void);border-right:3px solid var(--lc-orange);
  box-shadow:6px 0 24px rgba(0,0,0,.6),inset -18px 0 30px -28px var(--holo-dim);
  padding:16px 12px calc(16px + var(--safe-b));display:flex;flex-direction:column;overflow:visible;
  transition:width .32s cubic-bezier(.22,.94,.24,1)}
#deck{flex-direction:column;align-items:stretch;gap:10px;padding:0;transition:opacity .18s}
#globe,#holo,#bar,#scrubwrap{transition:left .32s cubic-bezier(.22,.94,.24,1)}
/* OLY-23: slide the globe into the visible band when the panel is open (centerGlobe() in app.js). */
#globe{transition:left .32s cubic-bezier(.22,.94,.24,1),transform .34s cubic-bezier(.22,.94,.24,1);will-change:transform}
@media (prefers-reduced-motion: reduce){ #globe{transition:left .32s cubic-bezier(.22,.94,.24,1)} }

/* ---- rail collapse : TrekWarp-style vertical elbow handle. Sets --rail small on <body>,
   which every left-anchored rule above already keys off, so the globe/bar/scrubwrap all
   reflow to reclaim the space with no extra rules needed. #deck itself is only faded, never
   removed from layout, so re-expanding doesn't need to rebuild anything. */
body.rail-collapsed{--rail:40px}
body.rail-collapsed #deck{opacity:0;pointer-events:none}
#railToggle{position:fixed;left:var(--rail);top:50%;transform:translate(-50%,-50%);z-index:8;
  width:22px;height:64px;border:2px solid var(--lc-orange);border-left:none;background:var(--lc-void);
  border-radius:0 14px 14px 0;color:var(--lc-orange);cursor:pointer;display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 14px var(--holo-dim);transition:left .32s cubic-bezier(.22,.94,.24,1)}
#railToggle:hover{color:var(--holo);border-color:var(--holo);box-shadow:0 0 18px var(--holo-dim)}
#railToggle svg{transition:transform .32s cubic-bezier(.22,.94,.24,1)}
body.rail-collapsed #railToggle svg{transform:rotate(180deg)}

/* generic LCARS pill button, one very rounded end */
#deck #searchBtn,#deck .ghost{border-radius:6px 999px 999px 6px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;font-size:13px;border:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;transition:transform .15s,box-shadow .2s,background .2s}
#deck #searchBtn:hover,#deck .ghost:hover{transform:translateX(3px)}
#deck #searchBtn:active,#deck .ghost:active{transform:translateX(1px) scale(.98)}

#deck #searchBtn{order:0;justify-content:flex-start;background:var(--lc-periwinkle);
  color:#0a0a14;min-height:44px;padding:0 18px}
#deck #searchBtn:hover{background:#b3b3ff;box-shadow:0 0 18px var(--holo-dim)}
#deck #searchBtn .lbl{display:inline}

#deck .master{order:1;width:100%;border:none;border-radius:6px 999px 999px 6px;background:var(--lc-orange2);
  overflow:hidden;padding:3px;gap:3px;display:flex}
/* the inactive pill's white text sat directly on --lc-orange2 (transparent bg over
   the .master container) - measured contrast only 3.29:1, below WCAG AA's 4.5:1 for
   normal-size text. Dark text (matching the .on state's own #000) reads far better
   against this orange, confirmed by contrast calculation: ~10:1. */
#deck .master .pill{flex:1;color:#1a0d00;min-height:38px;border-radius:999px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;font-size:12px;background:transparent}
#deck .master .pill.on{background:var(--lc-orange);color:#000;box-shadow:0 0 14px var(--holo-dim)}

#deck #legendBtn{order:3;background:var(--lc-lavender);color:#1a0a1e}
#deck #legendBtn:hover{background:#dcb3dc;box-shadow:0 0 18px var(--holo-dim)}
#deck #drawerBtn{background:var(--lc-gold);color:#1a1200}
#deck #drawerBtn:hover{background:#ffe0a3;box-shadow:0 0 18px var(--holo-dim)}
#deck #langBtn{order:4;min-width:0}
#deck #langBtn:hover{background:#ff9999;box-shadow:0 0 18px var(--holo-dim)}
/* Accent colours are for chrome - borders, rings, active states - never for text sitting on a
   coloured fill. These two broke that rule and were the worst contrast on the page: the layer
   tally was mint #4dffee on gold #ffcc66 at 1.20:1, and the language code mint on salmon at 2.29:1
   (AA wants 4.5). Both now inherit their button's own dark ink; the size and weight already carry
   the hierarchy that the colour was trying to. Measured with tools/contrast-audit.js. */
#deck .tally,
#deck #langNow{color:inherit;opacity:.8}

/* compass: LCARS targeting ring */
.globebtn{position:fixed;left:auto;right:calc(var(--read) + 16px);top:auto;
  bottom:calc(var(--scrub-h) + 16px + 154px + 8px);z-index:5;
  width:46px;height:46px;border-radius:50%;background:var(--lc-void);
  border:2px solid var(--holo-dim);color:var(--holo);box-shadow:0 0 16px var(--holo-dim)}
.globebtn:hover{border-color:var(--holo);box-shadow:0 0 26px var(--holo-dim);color:#fff}
.globebtn .n{color:var(--lc-gold)}

/* readout: LCARS status block, bottom of rail */
#readout{order:8;margin:auto 0 0;flex-direction:column;align-items:flex-start;gap:6px;
  padding:12px 14px;border-radius:6px 999px 999px 6px;background:rgba(255,156,51,.08);
  border-left:4px solid var(--lc-orange);color:var(--text);font-variant-numeric:tabular-nums}
#yearOut{font-size:22px;font-weight:900;color:var(--lc-gold);letter-spacing:.04em}
#epochNow{color:var(--holo)}
.sea{color:var(--mut)}
.sea a,.epoch a{color:var(--lc-blue);border-bottom-color:var(--lc-blue)}

/* ---- BOTTOM : the scrubber, LCARS console bar ---- */
#scrubwrap{position:fixed;left:var(--rail);right:var(--read);bottom:0;height:150px;z-index:6;
  background:var(--lc-void);border-top:3px solid var(--lc-orange);
  box-shadow:0 -6px 24px rgba(0,0,0,.6)}

/* ---- RIGHT : the story panel, "biobed" display ---- */
#panel{width:var(--read);top:0;background:var(--lc-void);color:var(--text);
  border-left:3px solid var(--lc-orange);box-shadow:-6px 0 24px rgba(0,0,0,.6),
  inset 18px 0 30px -28px var(--holo-dim);animation:none;padding:24px 26px 40px}
#panel.hidden{display:block}
#panel.hidden #close{display:none}
#panel.hidden #readAloud{display:none}
/* the stale-content-after-close fix (site-review 2026-07-22): this rule was documented in
   panel-fx.js's own header comment as already living here, but never actually landed - real
   children stayed display:block after close, so the old text kept showing behind the
   AWAITING-TARGET placeholder below. Landing it now, in the same file/session as the
   read-aloud button, no app.js touched. */
#panel.hidden #panel-body > *{display:none}
#panel.hidden #panel-body::after{content:"AWAITING TARGET — select a marker on the globe, or search the console on the left.";
  display:block;color:var(--mut);font-size:13px;line-height:1.8;padding:44px 6px;text-align:center;
  text-transform:uppercase;letter-spacing:.05em}
#close{color:var(--lc-salmon);font-weight:900}
#close:hover{color:#fff}
#readAloud{position:absolute;top:10px;right:56px;background:none;border:none;color:var(--holo);
  font-size:18px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:6px}
#readAloud:hover{color:#fff;background:var(--holo-faint)}
#readAloud[aria-pressed="true"]{color:var(--lc-gold);text-shadow:0 0 8px var(--holo-dim);animation:readpulse 1.4s ease-in-out infinite}
@keyframes readpulse{0%,100%{opacity:1}50%{opacity:.55}}
#panel-body h1{color:var(--lc-gold);text-transform:uppercase;letter-spacing:.03em}
#panel-body h2{color:var(--holo);text-transform:uppercase;font-size:13px;letter-spacing:.08em}
#panel-body a{color:var(--lc-blue)}
#panel-body .sum{color:var(--mut)}
#panel-body code{background:rgba(255,255,255,.06);color:var(--lc-cream)}
#panel-body ul.dates li{background:rgba(255,255,255,.04);border-color:var(--lc-orange2)}
#panel-body ul.dates li.lit{border-color:var(--holo);background:rgba(77,255,238,.1)}

/* ---- popups: search / legend / drawer / tip — genuine SLIDING DOORS, not popups ----
   These retract fully off-panel when hidden and slide as a solid unit into place when
   opened - a single decisive translate, no fade-in/scale "popup" motion - like a bridge
   door panel sliding out of its wall pocket. A brief energised edge-glow marks the seal. */
#search,#legend{left:12px;right:auto;width:calc(var(--rail) - 24px);background:var(--lc-void);
  border:2px solid var(--lc-orange);border-radius:4px 22px 22px 4px;
  box-shadow:0 10px 34px rgba(0,0,0,.7),0 0 24px var(--holo-dim);color:var(--text)}
  /* NOT overflow:hidden here - that shorthand would clobber the base style.css
     #legend{overflow-y:auto} (loaded before this file) and silently kill its own
     internal scrollbar. The seam-glow ::after below sits fully inside the box anyway,
     so no clipping is actually needed. */
#q{background:rgba(255,255,255,.06);border-color:var(--lc-orange2);color:var(--text)}
#q::placeholder{color:var(--mut)}
#qres li:hover,#qres li:focus{background:rgba(77,255,238,.12)}
#qres li em{color:var(--holo)}
#legend,.lgsec li,.lghead{color:var(--text)}
.lgsec h4{color:var(--lc-gold);text-transform:uppercase;letter-spacing:.06em}
.lgnote{color:var(--mut)}

#legend[hidden],#search[hidden]{display:block!important;pointer-events:none;transform:translateX(-115%)}
#legend:not([hidden]),#search:not([hidden]){transform:translateX(0);
  transition:transform .3s cubic-bezier(.22,.94,.24,1)}
#legend:not([hidden])::after,#search:not([hidden])::after{content:"";position:absolute;
  top:0;bottom:0;right:0;width:3px;background:var(--holo);box-shadow:0 0 14px 2px var(--holo);
  animation:doorSeal .5s ease-out}
@keyframes doorSeal{from{opacity:1}to{opacity:0}}

#drawer{background:var(--lc-void);border:2px solid var(--lc-orange);border-radius:22px 4px 0 0;
  color:var(--text);box-shadow:0 -8px 34px rgba(0,0,0,.7),0 0 24px var(--holo-dim);
  left:12px;bottom:calc(150px + 8px)}
  /* NOT overflow:hidden - the base style.css #drawer relies on its own overflow-y for
     the long checkbox list; clobbering it here silently kills that scroll (found live). */
/* translateY(115%) here would be 115% of the DRAWER'S OWN (content-dependent) height, which
   is not enough to clear a short viewport when the drawer's content is tall relative to the
   window - confirmed in a headless-browser check: at 650px viewport height a bottom-anchored
   ~455px drawer still had ~90px poking on-screen while "hidden", overlapping #soundToggle.
   120vh always exceeds any real viewport, regardless of the drawer's own height. */
#drawer[hidden]{display:block!important;pointer-events:none;transform:translateY(120vh)}
#drawer:not([hidden]){transform:translateY(0);
  transition:transform .3s cubic-bezier(.22,.94,.24,1)}
#drawer:not([hidden])::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--holo);box-shadow:0 0 14px 2px var(--holo);animation:doorSeal .5s ease-out}
@media (prefers-reduced-motion:reduce){
  #legend:not([hidden]),#search:not([hidden]),#drawer:not([hidden]){transition:none}
  #legend:not([hidden])::after,#search:not([hidden])::after,#drawer:not([hidden])::after{animation:none;display:none}
}
.dsub{color:var(--lc-blue);text-transform:uppercase;letter-spacing:.07em;font-size:11px;font-weight:800}
.dlab{color:var(--mut);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.lrow:hover{background:rgba(77,255,238,.08)}
.lrow .lt em{color:var(--mut)}
#tip{background:var(--lc-void);border:2px solid var(--holo);color:var(--text);
  box-shadow:0 8px 28px rgba(0,0,0,.6),0 0 20px var(--holo-dim)}
/* The band name was already in the tooltip but styled as a 10.5px eyebrow, so hovering three
   stacked strips gave three popups that all looked alike and none of them said WHICH strip you
   were on. It is the title now: bold, gold, with a rule under it, and the period name reads as the
   value beneath. Same information, different weight. */
#tip .band{color:var(--lc-gold);text-transform:uppercase;font-size:12px;font-weight:900;
  letter-spacing:.14em;padding-bottom:5px;border-bottom:1px solid rgba(255,204,102,.28);
  margin-bottom:1px}
#tip b{font-size:15px;line-height:1.25}
#tip .sum{color:var(--mut)}
#tip a,.idot{color:var(--mut);border-color:var(--lc-orange2)}
.idot:hover{color:var(--holo);border-color:var(--holo)}
#bordercap{background:var(--lc-void);border-color:var(--lc-orange);color:var(--mut)}
#bordercap b{color:var(--lc-gold)}
.wbox{background:var(--lc-void);color:var(--text);border:2px solid var(--lc-orange);border-radius:6px 26px 26px 6px}
.wbox h2{color:var(--lc-gold);text-transform:uppercase}
.wbox li{color:var(--text)}
.wok{background:var(--lc-orange);border:none;color:#000;font-weight:900;border-radius:999px;
  text-transform:uppercase;letter-spacing:.05em}
.wx{color:var(--lc-salmon)}
#welcome{background:rgba(0,0,0,.72)}

/* ---- audio toggle: floating LCARS chip, bottom-left, off by default (see fx.js) ---- */
#soundToggle{position:fixed;left:12px;bottom:12px;z-index:20;display:flex;align-items:center;gap:6px;
  padding:6px 12px 6px 8px;border-radius:4px 999px 999px 4px;border:2px solid var(--lc-orange2);
  background:var(--lc-void);color:var(--mut);font:800 11px/1 'Arial Narrow',sans-serif;
  text-transform:uppercase;letter-spacing:.08em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.5)}
#soundToggle:hover{border-color:var(--lc-orange);color:var(--text)}
#soundToggle[aria-pressed="true"]{border-color:var(--holo);color:var(--holo);box-shadow:0 0 14px var(--holo-dim)}
#soundToggle .sicon{font-size:14px}

/* mobile: rail + panel would crush the globe, so fall back to the stock stacked chrome */
@media (max-width:900px){
  :root{--rail:0px;--read:0px}
  #globe{left:0;right:0;top:52px}
  #holo{left:0;right:0;top:52px}
  #bar{left:0;right:0;border-radius:0}
  #controls{position:absolute;top:auto;bottom:0;width:100%;height:auto;flex-direction:column;
    border-right:none;border-top:3px solid var(--lc-orange);padding:8px 10px calc(8px + var(--safe-b))}
  /* MOBILE: the control deck was eating half the phone. Measured at 390x844 it stood 424px tall
     against a 792px globe - #deck alone wrapped to 285px over four rows, with the readout taking
     another 109. The globe is the point of the page, so the deck becomes ONE swipeable row and the
     readout ONE line; everything that used to wrap is still reachable, just sideways instead of
     downwards. Layer toggles were already a bottom sheet (#drawer) and stay on-demand. */
  #deck{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:8px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px}
  #deck::-webkit-scrollbar{display:none}
  #deck > *{flex:0 0 auto}
  #deck .master,#deck .ghost{width:auto}
  #deck #searchBtn{padding:0 14px}
  #deck #searchBtn .lbl{display:none}
  #deck .ghost span[data-i18n]{display:none}      /* icons carry these on a phone; titles stay */
  /* app.js lifts #readout out of #deck on a phone (a width:100% child inside a nowrap row shoves
     every button off-screen), so it is styled here as a direct child of #controls */
  #controls > #readout{order:-1;display:flex;flex-direction:row;align-items:baseline;width:100%;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:10px;
    border-top:none;border-left:none;padding:0;margin:0 0 6px}
  #controls > #readout::-webkit-scrollbar{display:none}
  #controls > #readout > *{flex:0 0 auto}
  #yearOut{font-size:18px}
  #scrubwrap{position:static;width:auto;height:100px;left:0;right:0}
  .globebtn{right:14px;bottom:auto;top:64px}
  #panel{width:100%;top:0;border-left:none}
  #panel.hidden{display:none}
  #search,#legend{left:10px;right:10px;width:auto}
  #drawer{left:0;right:0;width:100%}
  #soundToggle{left:8px;bottom:8px}
  /* rail collapse is a desktop-only affordance - mobile already stacks the rail at the
     bottom with its own compact row layout, there's no side space to reclaim */
  #railToggle{display:none}
  body.rail-collapsed #deck{opacity:1;pointer-events:auto}
}

/* ============================================================
   ON-SCREEN NAVIGATION (Macel: "zoals Google Earth")
   Sits under the compass, same LCARS ring language. Built by app.js, so the markup stays out of
   index.html and out of Atlas' way.
   ============================================================ */
/* Stacked ABOVE the scrubber, not over it. First placement put the pad at bottom:44px, which
   overlapped the compass by 46x44px (its centre picked the zoom button instead) and parked the tilt
   button on the scrubber's own drag surface. Neither shows up as overflow or a scrollbar - measured
   with tools/overlap-check.js. --scrub-h keeps the two numbers tied to the scrubber's real height. */
#navpad{position:fixed;right:calc(var(--read) + 16px);bottom:calc(var(--scrub-h) + 16px);z-index:5;
  display:flex;flex-direction:column;gap:8px}
.navbtn{width:46px;height:46px;border-radius:50%;background:var(--lc-void);
  border:2px solid var(--lc-orange);color:var(--lc-cream);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font:900 20px/1 'Arial Narrow',Arial,sans-serif;
  transition:border-color .15s,box-shadow .15s,color .15s}
.navbtn:hover{border-color:var(--holo);box-shadow:0 0 26px var(--holo-dim);color:#fff}
.navbtn:active{transform:translateY(1px)}
.navbtn.tilt{font-size:17px}
@media (max-width:900px){
  /* the reading panel collapses on a phone, so anchor to the viewport edge instead of past it,
     and stack the pad under the compass rather than beside the globe */
  #navpad{right:14px;bottom:auto;top:118px;gap:6px}
  .navbtn{width:40px;height:40px;font-size:18px}
}

/* Pinned band popup: hover is a preview, a click makes it stay so the source link can be reached.
   The unpinned state keeps pointer-events off the tooltip rectangle - that rectangle sits directly
   above the strips, and letting it swallow the pointer was half of why the neighbouring band kept
   stealing the hover. */
#tip{pointer-events:none}
#tip.pinned{pointer-events:auto;border-color:var(--lc-gold);
  box-shadow:0 12px 34px rgba(0,0,0,.6),0 0 0 1px var(--holo-dim)}
#tip.pinned a{pointer-events:auto}
.tipclose{position:absolute;top:4px;right:6px;width:26px;height:26px;line-height:1;
  background:none;border:none;color:var(--lc-salmon);font:900 20px/1 Arial,sans-serif;
  cursor:pointer;border-radius:50%}
.tipclose:hover{color:#fff;background:rgba(255,102,102,.18)}
#tip.pinned{padding-right:30px}

/* Entry photo in the reading panel. Fixed aspect box so a lazily-loaded image cannot shove the text
   you are already reading when it finally arrives; object-fit crops rather than distorts. The
   caption is the CC attribution, not decoration - it stays legible, hence muted rather than faint. */
.entryimg{margin:0 0 14px;position:relative}
.entryimg img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border:1px solid var(--lc-orange2);border-radius:10px;background:#0b0b12}
.entryimg figcaption{margin-top:5px;font-size:11px;line-height:1.4;color:var(--mut);
  letter-spacing:.02em}
.entryimg figcaption a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.entryimg figcaption a:hover{color:var(--lc-gold)}