/*
 * Everforest re-skin for Bulma 1.0.4.
 * Loaded after bulma.min.css. No Sass build step: Bulma 1.0 already exposes
 * its whole palette as --bulma-*-h/-s/-l custom properties, so re-theming is
 * just overriding those, split into a light and a dark block toggled via
 * html[data-theme]. See static/js/base.js for the toggle.
 *
 * Palette source: sainnhe/everforest (Dark Medium / Light Soft), as already
 * used in util/sass/bulma-everforest/bulma-everforest*.sass.
 */

/* ---------------------------------------------------------------------- */
/* Raw palette                                                            */
/* ---------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Everforest Light Soft */
  --mseu-bg-dim-h:  49deg; --mseu-bg-dim-s:  38%; --mseu-bg-dim-l:  84%;
  --mseu-bg0-h:     43deg; --mseu-bg0-s:     57%; --mseu-bg0-l:     89%;
  --mseu-bg1-h:     49deg; --mseu-bg1-s:     43%; --mseu-bg1-l:     86%;
  --mseu-bg2-h:     49deg; --mseu-bg2-s:     38%; --mseu-bg2-l:     84%;
  --mseu-bg3-h:     50deg; --mseu-bg3-s:     31%; --mseu-bg3-l:     81%;
  --mseu-bg4-h:     50deg; --mseu-bg4-s:     28%; --mseu-bg4-l:     79%;
  --mseu-bg5-h:     80deg; --mseu-bg5-s:     14%; --mseu-bg5-l:     71%;
  --mseu-grey0-h:   98deg; --mseu-grey0-s:    9%; --mseu-grey0-l:   66%;
  --mseu-grey1-h:  111deg; --mseu-grey1-s:    7%; --mseu-grey1-l:   60%;
  --mseu-grey2-h:  116deg; --mseu-grey2-s:    7%; --mseu-grey2-l:   54%;
  --mseu-fg-h:     202deg; --mseu-fg-s:      11%; --mseu-fg-l:      40%;
  --mseu-red-h:      1deg; --mseu-red-s:     92%; --mseu-red-l:     65%;
  --mseu-orange-h:  25deg; --mseu-orange-s:  91%; --mseu-orange-l:  56%;
  --mseu-yellow-h:  43deg; --mseu-yellow-s: 100%; --mseu-yellow-l:  44%;
  --mseu-green-h:   68deg; --mseu-green-s:   99%; --mseu-green-l:   32%;
  --mseu-aqua-h:   157deg; --mseu-aqua-s:    52%; --mseu-aqua-l:    43%;
  --mseu-blue-h:   201deg; --mseu-blue-s:    55%; --mseu-blue-l:    50%;
  --mseu-purple-h: 319deg; --mseu-purple-s:  65%; --mseu-purple-l:  64%;

  /* black/dark share a background (bg-dim) that's pale in this theme, so
     their contrast text needs to go well past --mseu-fg-l for a safe
     margin; light's background (bg5) is in the same boat */
  --bulma-black-invert-l: 15%;
  --bulma-dark-invert-l: 15%;
  --bulma-light-invert-l: 15%;
  --bulma-light-light-invert-l: 15%;
  /* link's baked contrast-text default (near-white) doesn't suit this
     softer, saturated purple; a same-hue lightness swap needs to go much
     further than a flat lightness gap would suggest */
  --bulma-link-invert-l: 10%;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Everforest Dark Medium */
  --mseu-bg-dim-h: 202deg; --mseu-bg-dim-s:  14%; --mseu-bg-dim-l:  16%;
  --mseu-bg0-h:    206deg; --mseu-bg0-s:     13%; --mseu-bg0-l:     20%;
  --mseu-bg1-h:    199deg; --mseu-bg1-s:     13%; --mseu-bg1-l:     24%;
  --mseu-bg2-h:    199deg; --mseu-bg2-s:     12%; --mseu-bg2-l:     27%;
  --mseu-bg3-h:    201deg; --mseu-bg3-s:     11%; --mseu-bg3-l:     31%;
  --mseu-bg4-h:    204deg; --mseu-bg4-s:      9%; --mseu-bg4-l:     34%;
  --mseu-bg5-h:    162deg; --mseu-bg5-s:      7%; --mseu-bg5-l:     36%;
  --mseu-grey0-h:  110deg; --mseu-grey0-s:    5%; --mseu-grey0-l:   50%;
  --mseu-grey1-h:  138deg; --mseu-grey1-s:    6%; --mseu-grey1-l:   55%;
  --mseu-grey2-h:  135deg; --mseu-grey2-s:    7%; --mseu-grey2-l:   64%;
  --mseu-fg-h:      41deg; --mseu-fg-s:      32%; --mseu-fg-l:      75%;
  --mseu-red-h:    359deg; --mseu-red-s:     68%; --mseu-red-l:     70%;
  --mseu-orange-h:  19deg; --mseu-orange-s:  70%; --mseu-orange-l:  68%;
  --mseu-yellow-h:  40deg; --mseu-yellow-s:  56%; --mseu-yellow-l:  68%;
  --mseu-green-h:   83deg; --mseu-green-s:   34%; --mseu-green-l:   63%;
  --mseu-aqua-h:   135deg; --mseu-aqua-s:    33%; --mseu-aqua-l:    63%;
  --mseu-blue-h:   172deg; --mseu-blue-s:    31%; --mseu-blue-l:    62%;
  --mseu-purple-h: 332deg; --mseu-purple-s:  43%; --mseu-purple-l:  72%;

  /* black/dark/light backgrounds are all dark-ish here, so light text is
     needed; --mseu-fg-l already works well for black/dark, but light
     also needs the .tag.is-light.is-light Bulma quirk plugged (see the
     comment further down where --bulma-light-invert-l is defined) */
  --bulma-black-invert-l: var(--mseu-fg-l);
  --bulma-dark-invert-l: var(--mseu-fg-l);
  /* light's background (bg5) isn't as dark as black/dark's (bg-dim), so
     --mseu-fg-l isn't a big enough gap here; go most of the way to white */
  --bulma-light-invert-l: 92%;
  --bulma-light-light-invert-l: 92%;
  /* this purple is light/pastel in dark mode too, so it still wants dark
     text rather than Bulma's baked-default white */
  --bulma-link-invert-l: var(--mseu-bg0-l);
}

/* Composed hsl() values, built from the h/s/l triplets above so both
   themes share one definition. Also what glightbox and the theme-color
   swatches consume. */
:root {
  --mseu-bg-dim: hsl(var(--mseu-bg-dim-h), var(--mseu-bg-dim-s), var(--mseu-bg-dim-l));
  --mseu-bg0: hsl(var(--mseu-bg0-h), var(--mseu-bg0-s), var(--mseu-bg0-l));
  --mseu-bg1: hsl(var(--mseu-bg1-h), var(--mseu-bg1-s), var(--mseu-bg1-l));
  --mseu-bg2: hsl(var(--mseu-bg2-h), var(--mseu-bg2-s), var(--mseu-bg2-l));
  --mseu-bg3: hsl(var(--mseu-bg3-h), var(--mseu-bg3-s), var(--mseu-bg3-l));
  --mseu-bg4: hsl(var(--mseu-bg4-h), var(--mseu-bg4-s), var(--mseu-bg4-l));
  --mseu-bg5: hsl(var(--mseu-bg5-h), var(--mseu-bg5-s), var(--mseu-bg5-l));
  --mseu-grey0: hsl(var(--mseu-grey0-h), var(--mseu-grey0-s), var(--mseu-grey0-l));
  --mseu-grey1: hsl(var(--mseu-grey1-h), var(--mseu-grey1-s), var(--mseu-grey1-l));
  --mseu-grey2: hsl(var(--mseu-grey2-h), var(--mseu-grey2-s), var(--mseu-grey2-l));
  --mseu-fg: hsl(var(--mseu-fg-h), var(--mseu-fg-s), var(--mseu-fg-l));
  --mseu-red: hsl(var(--mseu-red-h), var(--mseu-red-s), var(--mseu-red-l));
  --mseu-orange: hsl(var(--mseu-orange-h), var(--mseu-orange-s), var(--mseu-orange-l));
  --mseu-yellow: hsl(var(--mseu-yellow-h), var(--mseu-yellow-s), var(--mseu-yellow-l));
  --mseu-green: hsl(var(--mseu-green-h), var(--mseu-green-s), var(--mseu-green-l));
  --mseu-aqua: hsl(var(--mseu-aqua-h), var(--mseu-aqua-s), var(--mseu-aqua-l));
  --mseu-blue: hsl(var(--mseu-blue-h), var(--mseu-blue-s), var(--mseu-blue-l));
  --mseu-purple: hsl(var(--mseu-purple-h), var(--mseu-purple-s), var(--mseu-purple-l));

  /* semantic aliases, used by the Bulma mapping below and free for any
     other stylesheet (e.g. glightbox) to consume */
  --mseu-accent: var(--mseu-green);
  --mseu-link: var(--mseu-purple);
}

/* ---------------------------------------------------------------------- */
/* Bulma variable mapping (theme-agnostic: reads --mseu-* above, so it     */
/* only has to be written once for both themes)                           */
/* ---------------------------------------------------------------------- */

:root {
  /* neutral scheme (backgrounds / borders), single hue+sat family */
  --bulma-scheme-h: var(--mseu-bg0-h);
  --bulma-scheme-s: var(--mseu-bg0-s);
  --bulma-scheme-main-l: var(--mseu-bg0-l);
  --bulma-scheme-main-bis-l: var(--mseu-bg-dim-l);
  --bulma-scheme-main-ter-l: var(--mseu-bg-dim-l);
  --bulma-background-l: var(--mseu-bg1-l);
  --bulma-border-weak-l: var(--mseu-bg2-l);
  --bulma-border-l: var(--mseu-bg3-l);
  --bulma-scheme-invert-l: var(--mseu-fg-l);
  --bulma-scheme-invert-bis-l: var(--mseu-grey2-l);
  --bulma-scheme-invert-ter-l: var(--mseu-grey1-l);

  /* text, independent hue from the scheme so fg can be a different tone
     than the backgrounds (Everforest's fg is warm, bg is cool-grey) */
  --bulma-text-h: var(--mseu-fg-h);
  --bulma-text-s: var(--mseu-fg-s);
  --bulma-text-weak-l: var(--mseu-grey1-l);
  --bulma-text-l: var(--mseu-fg-l);
  --bulma-text-strong-l: var(--mseu-fg-l);
  --bulma-text-title-l: var(--mseu-fg-l);

  /* semantic colors */
  --bulma-primary-h: var(--mseu-green-h);
  --bulma-primary-s: var(--mseu-green-s);
  --bulma-primary-l: var(--mseu-green-l);

  --bulma-link-h: var(--mseu-purple-h);
  --bulma-link-s: var(--mseu-purple-s);
  --bulma-link-l: var(--mseu-purple-l);

  --bulma-info-h: var(--mseu-blue-h);
  --bulma-info-s: var(--mseu-blue-s);
  --bulma-info-l: var(--mseu-blue-l);

  --bulma-success-h: var(--mseu-aqua-h);
  --bulma-success-s: var(--mseu-aqua-s);
  --bulma-success-l: var(--mseu-aqua-l);

  --bulma-warning-h: var(--mseu-yellow-h);
  --bulma-warning-s: var(--mseu-yellow-s);
  --bulma-warning-l: var(--mseu-yellow-l);

  --bulma-danger-h: var(--mseu-red-h);
  --bulma-danger-s: var(--mseu-red-s);
  --bulma-danger-l: var(--mseu-red-l);

  --bulma-light-h: var(--mseu-bg5-h);
  --bulma-light-s: var(--mseu-bg5-s);
  --bulma-light-l: var(--mseu-bg5-l);

  --bulma-dark-h: var(--mseu-bg-dim-h);
  --bulma-dark-s: var(--mseu-bg-dim-s);
  --bulma-dark-l: var(--mseu-bg-dim-l);

  --bulma-white-h: var(--mseu-fg-h);
  --bulma-white-s: var(--mseu-fg-s);
  --bulma-white-l: var(--mseu-fg-l);

  --bulma-black-h: var(--mseu-bg-dim-h);
  --bulma-black-s: var(--mseu-bg-dim-s);
  --bulma-black-l: var(--mseu-bg-dim-l);

  /* Bulma bakes the "contrast text" lightness for white/black/light/dark
     as fixed numbers computed for its own default palette (near-white or
     near-black); it doesn't recompute them from the h/s/l overrides above.
     Everforest's stand-ins for these roles aren't true white/black, so
     that baked value is often wrong here (e.g. is-dark had ~1.2:1 contrast
     in the light theme) and has to be pointed at real theme tones instead. */
  --bulma-white-invert-l: var(--mseu-bg0-l);
  /* black/dark/light/link need per-theme tuning below: their backgrounds
     aren't symmetric extremes, so a flat var(--mseu-fg-l) reference either
     under-shoots the contrast margin or (for saturated hues like link)
     actively loses contrast despite a large HSL-lightness gap */

  --bulma-family-primary: "Ubuntu", sans-serif;
  --bulma-family-secondary: "Ubuntu", sans-serif;
  --bulma-family-code: "MesloLGS NF", monospace;
}

/* ---------------------------------------------------------------------- */
/* Component-level overrides Bulma doesn't drive off the vars above       */
/* ---------------------------------------------------------------------- */

.title,
.title strong,
.subtitle strong {
  color: var(--mseu-accent);
}

.navbar {
  --bulma-navbar-h: var(--mseu-bg-dim-h);
  --bulma-navbar-s: var(--mseu-bg-dim-s);
  --bulma-navbar-l: var(--mseu-bg-dim-l);
  --bulma-navbar-background-color: var(--mseu-bg-dim);
  /* nav-item hover/active shading is computed as this +/- a %, so it
     needs to start from the navbar's own background lightness too -
     left at Bulma's default (the page's, not the navbar's, background
     lightness) the item hover color has nothing to do with what it's
     actually shading against; in light mode the two even happened to
     land on the exact same value, making hover invisible. */
  --bulma-navbar-item-background-l: var(--mseu-bg-dim-l);
}

.footer {
  --bulma-footer-color: var(--mseu-bg5);
}

/* Bulma's .box defaults to the same background as the page itself
   (--bulma-scheme-main); give it the "next surface" tier instead so a
   boxed section actually reads as a step up/down from its surroundings
   (one step lighter in dark mode, one step darker in light mode). Drop
   the default drop-shadow too - the background contrast alone is enough
   to read as a distinct panel, no floating-above-the-page look needed. */
.box {
  --bulma-box-background-color: var(--bulma-background);
  --bulma-box-shadow: none;
}

/* same "no floating drop-shadow, one-step-off background" treatment for
   .panel (nav#post-from-tags in wgam-plst) as .box already gets above.
   Unlike .box, Bulma's .panel has no background-color of its own to
   override, so it's set outright here; and since panel-block's hover
   background defaults to that same --bulma-background tier, it has to
   move one step further (--bulma-border-weak) or hovering a row would
   no longer look different from its resting state. */
.panel {
  --bulma-panel-shadow: none;
  --bulma-panel-block-hover-background-color: var(--bulma-border-weak);
  background-color: var(--bulma-background);
}

/* smaller buttons for the "View content by" nav on wgam-home only, not
   .button sitewide */
.wgam-cnav .button {
  --bulma-button-padding-vertical: 0.25em;
  --bulma-button-padding-horizontal: 0.5em;
}

/* .panel-block's default align-items:center is fine for its usual row
   layout (it centers vertically), but with is-flex-direction-column the
   cross-axis flips to horizontal, so it ends up centering the button and
   its description instead of a left-aligned stack. */
.wgam-cnav .panel-block {
  align-items: flex-start;
}

/* a <button> given .tag (e.g. the "More Posts" trigger in wgam-post) needs
   native button chrome stripped so it reads as a pill, not a form control.
   font-family only, not the `font` shorthand: that resets font-size too,
   and button.tag's element+class specificity beats .tag's own font-size,
   silently growing the button back to the body's 16px instead of the
   tag's 12px (24px vs 32px tall, breaking alignment with sibling tags). */
button.tag {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* the <form> wrapping that button is a plain block box with no sizing of
   its own, so its inherited font/line-height adds a "strut" taller than
   the button.tag inside it (32px vs the tag's 24px), making the pill look
   short next to its siblings. It only exists to hold hidden inputs, so
   take it out of the box model entirely rather than fight its sizing. */
.mseu-post-form-link-form {
  display: contents;
}

/* wgam-post's References box used to list its links as .tag pills, which
   never wrap - long post/project titles just ran off the edge of the box.
   Plain links in a bare (no bullet, no indent) list wrap normally, one
   entry per line, with a small gap between rows. */
.mseu-refs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mseu-refs-list li:not(:last-child) {
  margin-bottom: 0.4rem;
}

/* proj_link's .button.is-ghost sits among plain <a> links in the same list
   - Bulma buttons default to white-space:nowrap and centered text, which
   stops a long project title from wrapping onto a second line the way its
   <a> siblings do. */
.mseu-refs-list .button {
  white-space: normal;
  justify-content: flex-start;
  text-align: left;
}

/* Each .mseu-refs-list entry is a flex row (date, then title) with no
   fixed width on either side, so the browser's line-breaking algorithm
   is free to wrap *within* the date span too once the row gets tight -
   e.g. splitting "2023-06-18" mid-string. Titles should still wrap
   normally when they're the one running out of room; only the date
   itself needs to always stay on one line. */
.mseu-nowrap {
  white-space: nowrap;
}

/* .eteled ("deleted" spelled backwards) is wgam-plst's "add this tag"
   control, the inverse of Bulma's own .delete ("remove this tag") sitting
   right next to it. It's custom (not a Bulma class), so it never got a
   ported definition and rendered as an invisible 0-size button. Rebuilt
   here using the exact same before/after-pseudo-element mechanism as
   .delete, just rotated 90deg instead of 45deg to draw a "+" instead of
   an "x", so it stays theme-consistent with .delete automatically. */
.eteled {
  --bulma-delete-dimensions: 1.25rem;
  --bulma-delete-background-l: 0%;
  --bulma-delete-background-alpha: 0.5;
  --bulma-delete-color: var(--bulma-white);
  appearance: none;
  background-color: hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-delete-background-l), var(--bulma-delete-background-alpha));
  border: none;
  border-radius: var(--bulma-radius-rounded);
  cursor: pointer;
  pointer-events: auto;
  display: inline-flex;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 1em;
  height: var(--bulma-delete-dimensions);
  max-height: var(--bulma-delete-dimensions);
  max-width: var(--bulma-delete-dimensions);
  min-height: var(--bulma-delete-dimensions);
  min-width: var(--bulma-delete-dimensions);
  outline: none;
  position: relative;
  vertical-align: top;
  width: var(--bulma-delete-dimensions);
}
.eteled::before,
.eteled::after {
  background-color: var(--bulma-delete-color);
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform-origin: center center;
}
.eteled::before {
  height: 2px;
  width: 50%;
}
.eteled::after {
  height: 50%;
  width: 2px;
}

/* Bulma sizes .pagination-previous/-next with the same small min-width as
   numbered .pagination-link items (meant for "1", "2", ...); as flex items
   with flex-shrink:1 that lets them shrink narrower than "Previous"/"Next"
   and the label overflows the box. Give them room instead of letting them
   compress. */
.pagination-previous,
.pagination-next {
  flex-shrink: 0;
  min-width: 6.5em;
}

/* .pagination-link's own top/bottom margin collapses through its <li>
   wrapper (li has no padding/border of its own), so wrapped rows touch
   vertically even though the left/right margins give a visible gap
   horizontally. Restore it explicitly to match. */
.pagination-list {
  row-gap: 0.5rem;
}

/* ---------------------------------------------------------------------- */
/* Layout: cap page content at 960px without boxing in full-bleed chrome  */
/* ---------------------------------------------------------------------- */

body.is-grid {
  grid-template-columns: 1fr min(960px, 100%) 1fr;
}

/* header (navbar) and footer already center their own content via a
   Bulma .container, and their background should span edge-to-edge */
body.is-grid > header,
body.is-grid > footer {
  grid-column: 1 / -1;
}

/* main has no full-bleed background of its own, so it's the one region
   the grid itself constrains to 960px */
body.is-grid > main {
  grid-column: 2;
}

/* ---------------------------------------------------------------------- */
/* Palette preview strip (#theme-colors in base.html.j2)                  */
/* ---------------------------------------------------------------------- */

#theme-colors {
  --bulma-level-item-spacing: 0px;
  max-width: 960px;
  /* template applies Bulma's .m-0 helper (margin:0 !important); it has
     to be beaten with !important to actually center this element */
  margin-inline: auto !important;
}
#theme-colors .evrf-0001 { background-color: var(--mseu-grey2); }
#theme-colors .evrf-0002 { background-color: var(--mseu-grey1); }
#theme-colors .evrf-0003 { background-color: var(--mseu-grey0); }
#theme-colors .evrf-0004 { background-color: var(--mseu-bg5); }
#theme-colors .evrf-0005 { background-color: var(--mseu-bg4); }
#theme-colors .evrf-0006 { background-color: var(--mseu-bg3); }
#theme-colors .evrf-0007 { background-color: var(--mseu-bg2); }
#theme-colors .evrf-0008 { background-color: var(--mseu-bg1); }
#theme-colors .evrf-0009 { background-color: var(--mseu-bg0); }
#theme-colors .evrf-0010 { background-color: var(--mseu-bg-dim); }
#theme-colors .evrf-0011 { background-color: var(--mseu-fg); }
#theme-colors .evrf-0012 { background-color: var(--mseu-red); }
#theme-colors .evrf-0013 { background-color: var(--mseu-orange); }
#theme-colors .evrf-0014 { background-color: var(--mseu-yellow); }
#theme-colors .evrf-0015 { background-color: var(--mseu-green); }
#theme-colors .evrf-0016 { background-color: var(--mseu-aqua); }
#theme-colors .evrf-0017 { background-color: var(--mseu-blue); }
#theme-colors .evrf-0018 { background-color: var(--mseu-purple); }
#theme-colors > * {
  height: 2px;
  overflow: hidden;
}

/* Post-list teaser image: always a 72px square, top-aligned against the
   row's date/title/teaser-text block rather than Bulma's default vertical
   centering (or stretching to the row's full, variable height). Raster
   teasers are cropped square server-side, so `cover` fills the box; SVG
   teasers (untouched, own intrinsic aspect ratio - e.g. wide logos) use
   `contain` so they aren't cropped to a sliver. */
.mseu-post-list-pctr {
  width: 72px;
  max-width: 72px;
  aspect-ratio: 1 / 1;
  align-self: flex-start;
  object-fit: cover;
  border-radius: var(--bulma-radius);
}
.mseu-post-list-pctr.is-svg {
  object-fit: contain;
}

/* Bulma's --bulma-section-padding(-desktop) is a single "vertical
   horizontal" shorthand, so left/right can't be split apart just by
   overriding it - these override the resolved padding-left/-right
   properties directly instead.
   The first/outer .section on a page (a direct child of the page
   .container in base.html.j2) gets no horizontal padding at all; any
   .section nested inside it (e.g. the wargaming teaser inside the
   homepage's own section) keeps the left padding but drops the right.
   Vertically, a nested .section's own top padding still reads as a
   natural gap below whatever precedes it, but its bottom padding just
   stacks with every enclosing .section's bottom padding once posts
   nest sections several levels deep (e.g. a headline section containing
   a sub-headline section containing an army-list section) - dropped
   here so only the outermost section's bottom padding remains; a
   specific nested section can still opt back into some bottom padding
   via Bulma's own pb-* helper classes (higher specificity, wins). */
/* Bulma's own .is-hidden{display:none!important} loses to its own
   .is-flex{display:flex!important} whenever both land on the same
   element (equal specificity, both !important - .is-flex is simply
   defined later in bulma.min.css, so it wins the tie) - exactly the
   case for a collapsed heading's image-gallery siblings, which need
   is-flex for their own layout. A dedicated class here, loaded after
   bulma.min.css, reliably wins that tie regardless of what other
   classes (is-flex, is-grouped, ...) a hidden element also carries -
   used by the collapsible-headline toggle (base.js) instead of
   Bulma's own is-hidden. */
.mseu-titl-clps-hidn {
  display: none !important;
}

/* Same specificity issue as .mseu-titl-clps-hidn above, and a dedicated,
   independent class rather than reusing that one - a page's own content
   may itself contain a collapsed :mseu_clps: subsection, and switching
   pages must never touch that subsection's own hidden/shown state.
   Used by the same-page-pagination toggle (base.js). */
.mseu-page-hidn {
  display: none !important;
}

/* A pagination-link's label is a headline's own text, which can run long
   - truncated here so the pager itself doesn't blow out; the full text
   is still available via the link's title= tooltip (set in base.js). */
.mseu-page-pgnt .pagination-link {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Paint-recipe color swatch (GAL import, set-up-locl-0005.org) - a small
   fixed-size box, its actual color set inline per-swatch via style=
   background-color (updl.inje_colr, resolved once at export time from
   locl/data-colr.json). Unlike the unsized #theme-colors preview boxes
   this is a real, explicitly-sized element so it reads correctly next
   to inline text regardless of context. */
.mseu-paint-swatch {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.3em;
  border-radius: 2px;
  vertical-align: middle;
  border: 1px solid var(--mseu-grey1);
}

/* Rule post logo (locl/set-up-locl-0006.org) - shown centered in place
   of the usual <h1> on a Rule post's own page, and again in the
   auto-link box on any aars/scen/camp post that references it. Capped
   in both dimensions rather than a flat width so an unusually tall
   logo can't dominate the page. */
.mseu-rule-logo {
  max-width: 80%;
  max-height: 250px;
}

/* Rules panel page (/post/rule) - Bulma's own .panel-icon is a fixed
   1em x 1em square, far too small for an actual logo image and forcing
   a crop that mostly hides wide banner-shaped logos. This replaces it
   with a wider 4:3 box; the image itself uses the uncropped, aspect-
   ratio-preserving w960 size (not the square-cropped teas thumbnail)
   so a wide logo shows across the box's full width instead of being
   squeezed into a square. */
.mseu-rule-icon {
  display: inline-block;
  width: 4rem;
  height: 3rem;
  margin-inline-end: 0.75em;
}
.mseu-rule-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 'eavy Pigment panel page (/post/evyp) - the image is each post's own
   cropped-to-fill teas thumbnail, displayed at the same 72px size/crop
   already used for it on the main post-list page (post-defs.j2's
   mseu-post-list-pctr) rather than Bulma's tiny 1em .panel-icon default,
   so it actually reads as a picture instead of a small icon glyph -
   unlike .mseu-rule-icon above, which stays at its own wider 4:3 box for
   a rule system's own (uncropped, non-square) logo. */
.mseu-evyp-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  margin-inline-end: 1em;
  border-radius: var(--bulma-radius);
  overflow: hidden;
}
.mseu-evyp-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mseu-evyp-icon img.is-svg {
  object-fit: contain;
}

/* Side-by-side rulesets (a post can carry more than one lbls-rule, see
   pblc/post/rout.py's show_read_rule) rarely share the same logo
   dimensions. Stacking the logo link and the "Read about ..." text as a
   column flexbox, with the logo link taking all the growable space, pins
   the text link to the same bottom edge across columns regardless of how
   tall any one logo is. */
.mseu-post-rule {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mseu-post-rule > a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}
.mseu-post-rule > p {
  flex-grow: 0;
}

.container > .section {
  padding-left: 0;
  padding-right: 0;
}
.section .section {
  padding-right: 0;
  padding-bottom: 0;
}

/* The top nav's category links (Boardgames/Wargames/.../All Posts) are
   <button> elements (wrapped in a POST form, since /wgam/plst only
   accepts POST) rather than <a> tags, so they should still hint
   "clickable" like every other nav link. Bulma's own background-color
   rule is written as `a.navbar-item`, element-restricted to <a>, so it
   never applies to these buttons at all - this carries over the exact
   same formula/custom properties so a plain (non-hover) button looks
   identical to a plain link too. */
.navbar-start button.navbar-item {
  cursor: pointer;
  background-color: hsla(var(--bulma-navbar-h), var(--bulma-navbar-s), calc(var(--bulma-navbar-item-background-l) + var(--bulma-navbar-item-background-l-delta)), var(--bulma-navbar-item-background-a));
}
/* Bulma's own hover-highlight rule (a subtle background shift, no color
   change) only targets `a.navbar-item:hover` - these <button>-based nav
   items get none of it by default. Rather than approximate the look,
   this sets the same custom properties Bulma's own rule sets, so the
   result is driven by the exact same mechanism as "Home"'s hover. */
.navbar-start button.navbar-item:hover,
.navbar-start button.navbar-item:focus-within {
  --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta);
  --bulma-navbar-item-background-a: 1;
}

/* description-list term: left-aligned while the columns are stacked
   (mobile, term above its definition), right-aligned against the
   definition once both sit side by side - Bulma's own breakpoint, the
   same as its has-text-left-mobile / has-text-right-tablet helpers. Done
   here rather than with those classes, since the dl markup is baked into
   every post's stored HTML at upload time (classes would need a
   re-upload of every post with a description list). */
.mseu-list-term {
  font-weight: bold;
  color: hsl(var(--mseu-green-h), var(--mseu-green-s), var(--mseu-green-l));
}

@media print, screen and (min-width: 769px) {
  .mseu-list-term {
    text-align: right;
  }
}

/* stacked (mobile): the army-list cost column (Bulma's has-text-right,
   baked into the stored HTML - see updl_html.xsl's list-term template)
   follows the plain term to the left, and every definition is indented
   below its term so the term stands out. */
@media screen and (max-width: 768px) {
  .mseu-list-vrbl > .column.has-text-right {
    text-align: left !important;
  }

  .mseu-list-vitem {
    padding-left: 2rem;
  }
}

/* ---------------------------------------------------------------------- */
/* Post Uploader's "look" - a per-post cosmetic ruleset flourish, ported  */
/* from the legacy site (set-up-locl-0005.org, 2026-07-31). The XSLT     */
/* side (updl_hxml.xsl/updl_html.xsl) already assigns every class below  */
/* unconditionally - this was the only missing piece.                    */
/* ---------------------------------------------------------------------- */

@font-face {
  font-family: 'OldNewspaperTypes';
  src: url('../font/OldNewspaperTypes.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caslon Antique Regular';
  src: url('../font/caslon-antique.regular.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IM FELL English PRO';
  src: url('../font/IM_FELL_English_PRO_Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IM FELL English PRO';
  src: url('../font/IM_FELL_English_PRO_Roman.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Crusades';
  src: url('../font/Crusades.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Oathfork look: every in-body headline (h2-h6 - the post's own outer
   title bar is chrome from wgam-post.html.j2, not part of this pipeline,
   and "look" isn't persisted to the DB for it to know about) gets the
   Crusades display font in oath's own primary red, with a 1px stroke
   around each glyph - the closest CSS equivalent to an Inkscape path
   border. -webkit-text-stroke is vendor-prefixed but has shipped in
   every major engine (Chromium, WebKit, and Firefox since 49) for years,
   so it's safe to rely on directly rather than falling back to a drop
   shadow. */
.mseu-titl-look-oath {
  font-family: 'Crusades';
  color: hsl(358deg, 100%, 31%);
  -webkit-text-stroke: 0.25px hsl(20deg, 5%, 22%);
}

/* Crusades is a dense blackletter-style display face - hard to read at a
   normal title's own size, so every h-tag doubles regardless of its own
   tier. Can't do that with a single percentage-based rule on
   .mseu-titl-look-oath alone: Bulma's own .title.is-N{font-size:...}
   (two classes) outranks a lone .mseu-titl-look-oath (one class)
   regardless of source order, and even winning that fight, a percentage
   is relative to the *inherited* size, not to whatever Bulma's own
   now-overridden rule would have set - it would collapse every tier to
   the same size rather than doubling each proportionally. Matching
   Bulma's own two-class selector shape (and just doubling its six fixed
   rem values directly) is the only way to actually double each tier. */
.title.is-1.mseu-titl-look-oath { font-size: 6rem; }
.title.is-2.mseu-titl-look-oath { font-size: 5rem; }
.title.is-3.mseu-titl-look-oath { font-size: 4rem; }
.title.is-4.mseu-titl-look-oath { font-size: 3rem; }
.title.is-5.mseu-titl-look-oath { font-size: 2.5rem; }
.title.is-6.mseu-titl-look-oath { font-size: 2rem; }

@font-face {
  font-family: 'AdineKirnberg';
  src: url('../font/AdineKirnberg.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Fork of Drums and Shakos look: same idea as oath above (headline font/
   color, sized per-tier for the same specificity reason - see the
   comment above oath's own six rules), but bold, at 150% rather than
   200%, and its own primary red. Unlike oath, no text-stroke: even at
   0.1px it still swallowed AdineKirnberg's thin strokes (a script face,
   and only a Regular cut - no real bold to give a stroke more fill to
   sit on), so this falls back to a plain offset drop shadow instead -
   sits outside the glyph rather than competing with it for the same
   thin stroke width. */
.mseu-titl-look-fods {
  font-family: 'AdineKirnberg';
  font-weight: bold;
  color: hsl(358deg, 100%, 31%);
  text-shadow: 1px 1px 0 hsl(0deg, 0%, 16%);
}
.title.is-1.mseu-titl-look-fods { font-size: 4.5rem; }
.title.is-2.mseu-titl-look-fods { font-size: 3.75rem; }
.title.is-3.mseu-titl-look-fods { font-size: 3rem; }
.title.is-4.mseu-titl-look-fods { font-size: 2.25rem; }
.title.is-5.mseu-titl-look-fods { font-size: 1.875rem; }
.title.is-6.mseu-titl-look-fods { font-size: 1.5rem; }

@font-face {
  font-family: 'Oxanium';
  src: url('../font/Oxanium-VariableFont_wght.woff2') format('woff2-variations'),
       url('../font/Oxanium-VariableFont_wght.woff2') format('woff2');
  font-weight: 200 800;  /* variable font: every weight in between */
  font-style: normal;
  font-display: swap;
}

/* Nemesis look (nmms): Oxanium (variable font, weights 200-800, OFL - see
   font/Oxanium-OFL.txt), Light by default, uppercase, letter-spaced, on
   every headline - kept clean, so it stays readable. Like the NEMESIS logo:
   near-white with a faint blue glow on the dark theme; on the light theme
   a dark slate blue without glow (a glow halo on cream just looks blurry).
   Only the post's own title (h1) also gets the logo's "damaged" lettering. */
.mseu-titl-look-nmms {
  font-family: 'Oxanium', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(205deg, 35%, 24%);
}

:root[data-theme="dark"] .mseu-titl-look-nmms {
  color: hsl(205deg, 45%, 93%);
  filter: drop-shadow(0 0 0.12em hsla(205deg, 100%, 70%, 0.6))
          drop-shadow(0 0 0.3em hsla(205deg, 100%, 70%, 0.35));
}

/* per tier, same two-class shape as oath/fods above: the big tiers light
   and widely tracked (the logo itself is very widely spaced), the smaller
   ones a little heavier and tighter, so they stay readable */
.title.is-1.mseu-titl-look-nmms { font-weight: 500; letter-spacing: 0.24em; }
.title.is-2.mseu-titl-look-nmms { font-weight: 400; letter-spacing: 0.14em; }
.title.is-3.mseu-titl-look-nmms,
.title.is-4.mseu-titl-look-nmms,
.title.is-5.mseu-titl-look-nmms,
.title.is-6.mseu-titl-look-nmms { font-weight: 500; letter-spacing: 0.07em; }

/* The "damaged" headlines: a CSS mask punches small slivers out of the real
   glyphs - the logo's missing pieces - instead of painting background-
   coloured bars over them, so it works on either theme. A mask cuts
   everything its element draws, its own text-shadow included - so the
   mask sits on every headline's inner <span class="mseu-titl-text">
   (show.html.j2 for the title, updl_html.xsl for the body headlines) and
   cuts the letters only, while the glow is drawn by the heading around it
   as a filter: drop-shadow (above), applied to the already-cut letters
   and on top of them, so it stays continuous across the cuts.
   Each cut layer is one column, W% wide at x%, tiled once per text line
   (1lh tall, repeat-y) and opaque only in a thin band within that line -
   where the capitals' strokes are - so every line of a long, wrapped
   headline gets damaged, not the gaps between lines. mask-composite exclude
   (-webkit- xor) subtracts the bands from the full bottom layer; bands
   must not overlap each other, or they cancel out. inline-block keeps the
   span (and so the x% positions) around the text. */
.mseu-titl-look-nmms > .mseu-titl-text {
  display: inline-block;
  --nmms-mask:
    linear-gradient(transparent 34%, #000 34% 40%, transparent 40%) 5% 0 / 3% 1lh repeat-y content-box,
    linear-gradient(transparent 58%, #000 58% 63%, transparent 63%) 11% 0 / 2% 1lh repeat-y content-box,
    linear-gradient(transparent 43%, #000 43% 47%, transparent 47%) 17% 0 / 4% 1lh repeat-y content-box,
    linear-gradient(transparent 68%, #000 68% 74%, transparent 74%) 24% 0 / 2.5% 1lh repeat-y content-box,
    linear-gradient(transparent 30%, #000 30% 35%, transparent 35%) 30% 0 / 3% 1lh repeat-y content-box,
    linear-gradient(transparent 52%, #000 52% 59%, transparent 59%) 37% 0 / 1.5% 1lh repeat-y content-box,
    linear-gradient(transparent 39%, #000 39% 43%, transparent 43%) 43% 0 / 3.5% 1lh repeat-y content-box,
    linear-gradient(transparent 64%, #000 64% 69%, transparent 69%) 50% 0 / 2% 1lh repeat-y content-box,
    linear-gradient(transparent 33%, #000 33% 39%, transparent 39%) 57% 0 / 3% 1lh repeat-y content-box,
    linear-gradient(transparent 56%, #000 56% 60%, transparent 60%) 63% 0 / 2.5% 1lh repeat-y content-box,
    linear-gradient(transparent 45%, #000 45% 50%, transparent 50%) 70% 0 / 3% 1lh repeat-y content-box,
    linear-gradient(transparent 70%, #000 70% 76%, transparent 76%) 76% 0 / 2% 1lh repeat-y content-box,
    linear-gradient(transparent 36%, #000 36% 41%, transparent 41%) 83% 0 / 3.5% 1lh repeat-y content-box,
    linear-gradient(transparent 60%, #000 60% 64%, transparent 64%) 90% 0 / 2.5% 1lh repeat-y content-box,
    linear-gradient(transparent 48%, #000 48% 54%, transparent 54%) 96% 0 / 2% 1lh repeat-y content-box,
    linear-gradient(#000 0 0) border-box;
  -webkit-mask: var(--nmms-mask);
  -webkit-mask-composite: xor;
  mask: var(--nmms-mask);
  mask-composite: exclude;
}

/* blockquotes: updl_html.xsl renders every blockquote as a .box, adding
   .quote-{look} alongside it when a look is set. Static (non-theme-
   reactive) colors are deliberate here, same as legacy - these two are
   meant to look like aged parchment/newsprint regardless of the site's
   own light/dark toggle. */
.box.quote-1666 {
  font-family: 'IM FELL English PRO';
  background-image: url('../look/1666/back-quot-bottom-right.png'),
                    url('../look/1666/back-quot-tile.png');
  background-position: right bottom,
                       right top;
  background-repeat: no-repeat,
                     repeat;
  color: hsl( 25.71deg,  33.33%,   4.12%);
  padding-bottom: 60px !important;
}
.box.quote-aoff {
  font-family: 'OldNewspaperTypes';
}
.box.quote-wffb {
  color: hsl(221deg, 14%, 7%);
  background-color: hsl(221deg, 14%, 98%);
  font-family: 'Caslon Antique Regular';
  font-size: 1.5rem;
  border-color: var(--mseu-red);
  border-style: solid;
  border-width: 2px;
}

/* BattleTech look: a bevelled/cut-corner frame on images (both a direct
   <img> and, in the gallery view, its wrapping <div>)... */
img.mseu-pctr-look-btch {
  clip-path: polygon(0% 0%, 80% 0%, 100% 20%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%);
}
div.mseu-pctr-look-btch {
  background-color: var(--mseu-grey1);
}

/* ...and a decorative SVG border frame around lists/tables. */
.mseu-list-look-btch-brdr {
  display: grid;
  grid-template-columns: 35px auto 35px;
  margin: 20px;
}
.mseu-list-look-btch-brdr-tole {
  grid-column: 1 / 2;
  height: 35px;
  background-image: url('../look/btch/border-top-left.svg');
  background-position: right top;
  background-repeat: no-repeat;
}
.mseu-list-look-btch-brdr-toce {
  grid-column: 2 / 3;
  height: 35px;
  background-image: url('../look/btch/border-top-center.svg');
  background-position: left top;
  background-repeat: repeat-x;
}
.mseu-list-look-btch-brdr-tori {
  grid-column: 3 / 4;
  height: 35px;
  background-image: url('../look/btch/border-top-right.svg');
  background-position: right top;
  background-repeat: no-repeat;
}
.mseu-list-look-btch-brdr-mile {
  grid-column: 1 / 2;
  background-image: url('../look/btch/border-middle-left.svg');
  background-position: left top;
  background-repeat: repeat-y;
}
.mseu-list-look-btch-brdr-mice {
  grid-column: 2 / 3;
  /* a grid item's min-width defaults to auto (its own max-content
     size), so a wide table (many columns, long headers like "Employed
     since") would otherwise force this whole frame past the page's
     own width instead of being contained - min-width: 0 lets the track
     actually shrink to its assigned space, and overflow-x gives the
     table its own scrollbar if it still doesn't fit, same as any other
     wide content on the site. */
  min-width: 0;
  overflow-x: auto;
  background-color: var(--mseu-grey1);
  background-image: url('../look/btch/border-middle-center.svg');
  background-position: left top;
  background-repeat: repeat;
}
.mseu-list-look-btch-brdr-mice table {
  font-size: 0.85em;
}
.mseu-list-look-btch-brdr .columns {
  /* Bulma's .columns uses negative side margins to offset its own
     children's padding - inside this frame's already-tight grid track
     that pushes it just wide enough to trigger the frame's own
     overflow-x scrollbar even when nothing actually needs to scroll.
     Confirmed in the inspector: constraining it back in removes that
     spurious scrollbar. */
  max-width: 95%;
  margin: 0 auto;
}
.mseu-list-look-btch-brdr-miri {
  grid-column: 3 / 4;
  background-image: url('../look/btch/border-middle-right.svg');
  background-position: right top;
  background-repeat: repeat-y;
}
.mseu-list-look-btch-brdr-bole {
  grid-column: 1 / 2;
  height: 35px;
  background-image: url('../look/btch/border-bottom-left.svg');
  background-position: left bottom;
  background-repeat: no-repeat;
}
.mseu-list-look-btch-brdr-boce {
  grid-column: 2 / 3;
  height: 35px;
  background-image: url('../look/btch/border-bottom-center.svg');
  background-position: left bottom;
  background-repeat: repeat-x;
}
.mseu-list-look-btch-brdr-bore {
  grid-column: 3 / 4;
  height: 35px;
  background-image: url('../look/btch/border-bottom-right.svg');
  background-position: right bottom;
  background-repeat: no-repeat;
}


table.table {
  /* the shared accent used for the header background and the hline-group
     border/bold below, and the header text color - a look (e.g.
     .mseu-tabl-look-oath) only ever needs to redefine these two custom
     properties, not repeat the rules that use them. */
  --mseu-tabl-accnt: hsl(var(--mseu-green-h), var(--mseu-green-s), var(--mseu-green-l));
  --mseu-tabl-head-clr: var(--bulma-dark);
  margin-left: auto;
  margin-right: auto;
  thead {
    tr {
      th {
        color: var(--mseu-tabl-head-clr);
        background-color: var(--mseu-tabl-accnt);
      }
    }
  }
  /* An hline inside a table's body (not the one separating header from
     body) makes org's own export start a new <tbody> - see
     locl/docu/org-syntax.org's "Table column alignment and width"
     section. Marking every such later group (a summary/totals row is the
     common case, but any hline-separated group qualifies, not just a
     trailing one) with a stronger top border and bold text is the only
     generic way to give it *any* visual weight, since it's otherwise
     rendered identically to an ordinary data row. */
  tbody:not(:first-of-type) {
    td, th {
      border-top: 3px solid var(--mseu-tabl-accnt);
      font-weight: bold;
    }
  }
}

/* Bulma zeroes the bottom border on a table's last row so the table
   doesn't end up with a double border against whatever follows it. A
   stat-block unit's rowspan-2 name cell still shows its own bottom
   border there when it's the table's last row, though (its box spans
   into that row) - so the zeroed border makes the row's other cell (the
   colspan equipment/description text) look cut off next to it. Restore
   it whenever the last row's cell carries a colspan - the shape unique
   to this rowspan/colspan unit-row pattern, so no other last-row case is
   affected. */
table.table tbody tr:last-child td[colspan] {
  border-bottom-width: 1px;
}

table.mseu-tabl-look-oath {
  --mseu-tabl-accnt: hsl(358deg, 100%, 31%);
  --mseu-tabl-head-clr: hsl(183deg, 33%, 40%);
}

/* nmms image frame (look/nmms/*.svg, cut from nmms-pctr-crnr.svg): every
   image in a nmms post body gets a sci-fi frame - along the bottom the
   right corner (crnr-r), the mirrored left corner (crnr-l) and the
   connector lines (cnct, stretched) between them; along the top the same
   strip, flipped vertically. ::before = bottom strip, ::after = top.

   Hosts: gallery thumbnails (.mseu-glry-boxx-item - the square box, so all
   thumbnails get the same frame, portrait or landscape), large images
   (.container.has-text-centered, shrunk to the image) and the campaign
   logo (.mseu-camp-logo, a large image too); also the lightbox's image
   (see below). The rule logo/link box at the top is not a host. --nmms-crnr = corner width as a fraction of the
   frame's width: 1/phi^3 = 0.236 on large images (corners 47%, connector
   53%), 0.5 on thumbnails (the corners meet, no connector).

   All other sizes follow from the drawing (80 x 40 corner): the corner
   reaches 3.654 (4.57% of its width) beyond the image's side and 4.657
   (11.64% of its height) below it; its inner 45-degree diagonal starts
   12.67 (15.84% of its width) from the image corner. Behind the corner,
   a triangle in the box's background colour hides the image's corner up
   to that diagonal (a clip-path on the image can't cut 45 degrees on
   images of any aspect ratio) and shows through the gaps between the
   frame's bands, as in the drawing. */
.mseu-post-look-nmms .mseu-glry-boxx-item,
.mseu-post-look-nmms .container.has-text-centered,
body:has(.mseu-post-look-nmms) .gslide-media.gslide-image {
  --nmms-crnr: 0.236;
  --nmms-f: calc(var(--nmms-crnr) / (1 + 0.091352 * var(--nmms-crnr)));  /* corner width / strip width */
  --nmms-l: url('../look/nmms/crnr-l-lt.svg');
  --nmms-r: url('../look/nmms/crnr-r-lt.svg');
  --nmms-c: url('../look/nmms/cnct-lt.svg');
  /* triangle colour: the background behind the frame, tinted with the glow
     colour by --nmms-tint (dark theme) - the opaque triangle hides its own
     glow, and the gaps between the frame's bands around it are glow-lit
     (measured ~40% #66bfff), so a plain background wedge reads as a dark
     hole between them */
  --nmms-tri: color-mix(in srgb, var(--nmms-bg, var(--bulma-background)), #66bfff var(--nmms-tint, 0%));
  position: relative;
}

.mseu-post-look-nmms .mseu-glry-boxx-item {
  --nmms-crnr: 0.5;
}

.mseu-post-look-nmms .mseu-glry-boxx-item img {
  display: block;  /* no inline baseline gap below the thumbnail */
}

.mseu-post-look-nmms .container.has-text-centered {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.mseu-post-look-nmms .container.has-text-centered > img {
  display: block;
}

:root[data-theme="dark"] .mseu-post-look-nmms .mseu-glry-boxx-item,
:root[data-theme="dark"] .mseu-post-look-nmms .container.has-text-centered,
:root[data-theme="dark"] body:has(.mseu-post-look-nmms) .gslide-media.gslide-image {
  --nmms-tint: 40%;
  --nmms-l: url('../look/nmms/crnr-l.svg');
  --nmms-r: url('../look/nmms/crnr-r.svg');
  --nmms-c: url('../look/nmms/cnct.svg');
}

.mseu-post-look-nmms .mseu-glry-boxx-item::before,
.mseu-post-look-nmms .mseu-glry-boxx-item::after,
.mseu-post-look-nmms .container.has-text-centered::before,
.mseu-post-look-nmms .container.has-text-centered::after,
body:has(.mseu-post-look-nmms) .gslide-media.gslide-image::before,
body:has(.mseu-post-look-nmms) .gslide-media.gslide-image::after {
  content: "";
  display: var(--nmms-frme, block);
  position: absolute;
  z-index: 1;  /* above the image even when it's transformed (lightbox animation) */
  left: calc(var(--nmms-crnr) * -4.5676%);
  right: calc(var(--nmms-crnr) * -4.5676%);
  aspect-ratio: calc(2 / var(--nmms-f));
  pointer-events: none;
  background:
    var(--nmms-l) left bottom / auto 100% no-repeat,
    var(--nmms-r) right bottom / auto 100% no-repeat,
    var(--nmms-c) center bottom / calc(100% - 200% * var(--nmms-f) + 2px) 100% no-repeat,
    linear-gradient(to top left, var(--nmms-tri) 50%, transparent 0)
      calc((1 - 0.045676 / (1 / var(--nmms-f) - 0.15838)) * 100%) 82.96%
      / calc(15.838% * var(--nmms-f)) 31.675% no-repeat,
    linear-gradient(to top right, var(--nmms-tri) 50%, transparent 0)
      calc(0.045676 / (1 / var(--nmms-f) - 0.15838) * 100%) 82.96%
      / calc(15.838% * var(--nmms-f)) 31.675% no-repeat;
}

.mseu-post-look-nmms .mseu-glry-boxx-item::before,
.mseu-post-look-nmms .container.has-text-centered::before,
body:has(.mseu-post-look-nmms) .gslide-media.gslide-image::before {
  bottom: 0;
  transform: translateY(11.6425%);
}

.mseu-post-look-nmms .mseu-glry-boxx-item::after,
.mseu-post-look-nmms .container.has-text-centered::after,
body:has(.mseu-post-look-nmms) .gslide-media.gslide-image::after {
  top: 0;
  transform: translateY(-11.6425%) scaleY(-1);
}

:root[data-theme="dark"] .mseu-post-look-nmms .mseu-glry-boxx-item::before,
:root[data-theme="dark"] .mseu-post-look-nmms .mseu-glry-boxx-item::after,
:root[data-theme="dark"] .mseu-post-look-nmms .container.has-text-centered::before,
:root[data-theme="dark"] .mseu-post-look-nmms .container.has-text-centered::after,
:root[data-theme="dark"] body:has(.mseu-post-look-nmms) .gslide-media.gslide-image::before,
:root[data-theme="dark"] body:has(.mseu-post-look-nmms) .gslide-media.gslide-image::after {
  filter: drop-shadow(0 0 0.12em hsla(205deg, 100%, 70%, 0.6))
          drop-shadow(0 0 0.3em hsla(205deg, 100%, 70%, 0.35));
}

/* lightbox (GLightbox, appended to <body> on click - outside the post
   body, hence the :has() scope): the image's own .gslide-media box is the
   host; its triangles take the overlay's colour (.goverlay, bg2 at 92%)
   instead of the post box's, and the image leaves room for the frame and
   glow around it */
body:has(.mseu-post-look-nmms) .gslide-media.gslide-image {
  --nmms-bg: hsl(var(--mseu-bg2-h), var(--mseu-bg2-s), var(--mseu-bg2-l));
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

:root[data-theme="dark"] body:has(.mseu-post-look-nmms) .gslide-media.gslide-image {
  --nmms-tint: 0%;  /* plain overlay colour - matches the caption bar below */
}

body:has(.mseu-post-look-nmms) .gslide-media.gslide-image img {
  max-height: 88vh;
  max-width: 92vw;
}

/* campaign logo: framed like any large image - to exclude it, uncomment: */
/* .mseu-post-look-nmms .mseu-camp-logo { --nmms-frme: none; } */

table.mseu-tabl-look-nmms {
  --mseu-tabl-accnt: hsl(205deg, 60%, 45%);
  --mseu-tabl-head-clr: hsl(205deg, 30%, 96%);
}

table.mseu-tabl-look-fods {
  --mseu-tabl-accnt: hsl(358deg, 100%, 31%);
  --mseu-tabl-head-clr: hsl(46deg, 67%, 84%);
}