/* =============================================================================
   MUDMAGI — LANTERNS — page styles
   -----------------------------------------------------------------------------
   EVERY rule in this file is scoped under #mudmagi-lanterns, or under a class
   beginning .mml-. Nothing here can reach the Dodus page, the Squarespace
   header, footer, navigation, or any other page on mudmagi.com.

   Colours and fonts come from config.js. lanterns.js turns them into the
   custom properties below — declared on #mudmagi-lanterns, NOT on :root, so
   they cannot leak into a host page either.

   -----------------------------------------------------------------------------
   THE ARC
   -----------------------------------------------------------------------------
     daylight → warm ceramic → dusk → night and glow → warmth again

   Sections carry a tone class; the semantic tokens below are redefined by it
   and everything inside re-colours itself. Components never name a colour.

       (default)        warm parchment, brown ink      — hero, story, markets
       .mml-t-sand      toastier clay ground           — gallery, types, close
       .mml-t-night     warm near-black, bone text     — day/night, the glow

   .mml-band is the gradient between a light and a dark neighbour. Text never
   sits on it, because mid-tones give neither light nor dark type enough
   contrast to be readable.

   Mobile first. Two breakpoints: 700px and 1040px.
   ========================================================================== */


/* =============================================================================
   1 · RAW PALETTE + SEMANTIC TOKENS
   ========================================================================== */
#mudmagi-lanterns {
  /* --- raw palette. lanterns.js overwrites these from config.js on load --- */
  --mml-parchment:  #F6EFE1;
  --mml-sand:       #EBDFC9;
  --mml-clay-light: #E0CDB1;
  --mml-ink:        #33281F;
  --mml-ink-soft:   #635345;
  --mml-ember:      #9E4818;
  --mml-clay:       #9C4B33;
  --mml-moss:       #6E7F5B;

  --mml-night:      #1A1410;
  --mml-dusk:       #2A211A;
  --mml-bone:       #F2E8D8;
  --mml-bone-soft:  #B9A88F;
  --mml-glow:       #F6CE84;
  --mml-ember-glow: #E08B4C;

  --mml-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mml-font-body: 'Nunito', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  /* --- semantic tokens. Default tone: DAYLIGHT. --------------------------- */
  --mml-bg: var(--mml-parchment);
  --mml-fg: var(--mml-ink);
  --mml-fg-soft: var(--mml-ink-soft);
  --mml-accent: var(--mml-ember);
  --mml-frame: var(--mml-clay-light);
  --mml-accent-deep: #8F4218;
  --mml-line: rgba(51, 40, 31, 0.18);
  --mml-scrim: var(--mml-parchment);

  /* Photographs are softened rather than cut square — the work is hand-formed
     and round, and hard 90° corners read colder than it is. Restrained: a
     radius you notice only if you look for it, never a card or a pill. */
  --mml-radius: 14px;
  --mml-radius-lg: 18px;
  /* Just enough lift to separate a pale photograph from the cream. Warm-toned,
     not grey, and deliberately almost invisible. */
  --mml-lift:
    0 1px 1px rgba(51, 40, 31, 0.04),
    0 10px 26px -14px rgba(51, 40, 31, 0.22);

  /* section rhythm — one scale, used everywhere */
  --mml-gap: clamp(0.85rem, 2vw, 1.5rem);
  --mml-section-y: clamp(4.5rem, 11vw, 8rem);

  /* The height of the window the visitor is actually looking through.
     On its own that is this window. Inside the Squarespace iframe, which is as
     tall as the whole page, lanterns.js overwrites this with the real browser
     window height that the parent page reports. */
  --mml-vh: 100svh;

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--mml-bg);
  color: var(--mml-fg);
  font-family: var(--mml-font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* --- TONES --------------------------------------------------------------- */
#mudmagi-lanterns .mml-t-sand {
  --mml-bg: var(--mml-sand);
  --mml-frame: var(--mml-clay-light);
  --mml-scrim: var(--mml-sand);
}

#mudmagi-lanterns .mml-t-night {
  --mml-bg: var(--mml-night);
  --mml-fg: var(--mml-bone);
  --mml-fg-soft: var(--mml-bone-soft);
  --mml-accent: var(--mml-ember-glow);
  --mml-frame: var(--mml-dusk);
  --mml-accent-deep: var(--mml-ember-glow);
  --mml-line: rgba(242, 232, 216, 0.16);
  --mml-scrim: var(--mml-night);
  /* on dark ground a drop shadow does nothing but muddy the edge */
  --mml-lift: none;
}

#mudmagi-lanterns .mml-t-sand,
#mudmagi-lanterns .mml-t-night {
  background: var(--mml-bg);
  color: var(--mml-fg);
}

/* --- the two turns ------------------------------------------------------- */
#mudmagi-lanterns .mml-band {
  height: clamp(100px, 16vw, 220px);
}
#mudmagi-lanterns .mml-band--down {           /* daylight settling into night */
  background: linear-gradient(to bottom,
    var(--mml-from, var(--mml-sand)) 0%,
    #C9A87E 34%,
    #6E5238 64%,
    var(--mml-night) 100%);
}
#mudmagi-lanterns .mml-band--up {             /* night coming back to daylight */
  background: linear-gradient(to bottom,
    var(--mml-night) 0%,
    #6E5238 34%,
    #C9A87E 64%,
    var(--mml-to, var(--mml-parchment)) 100%);
}
/* Straight sRGB interpolation from near-black to cream runs through a band of
   dead grey in the middle, which looked like a rendering fault rather than
   dusk. The two warm stops keep the turn the colour of low sun on clay. */


/* =============================================================================
   2 · RESET
   ========================================================================== */
#mudmagi-lanterns *,
#mudmagi-lanterns *::before,
#mudmagi-lanterns *::after { box-sizing: border-box; }

#mudmagi-lanterns h1,
#mudmagi-lanterns h2,
#mudmagi-lanterns h3,
#mudmagi-lanterns p,
#mudmagi-lanterns figure,
#mudmagi-lanterns figcaption { margin: 0; }

#mudmagi-lanterns img,
#mudmagi-lanterns video,
#mudmagi-lanterns svg { display: block; max-width: 100%; }

#mudmagi-lanterns a { color: inherit; }

#mudmagi-lanterns :focus-visible {
  outline: 2px solid var(--mml-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.mml-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: #33281F; color: #F6EFE1;
  padding: 0.7rem 1.1rem; font: 700 0.9rem/1 system-ui, sans-serif;
  text-decoration: none; border-radius: 0 0 4px 0;
}
.mml-skip:focus { left: 0; }


/* =============================================================================
   3 · PAPER GRAIN
   ========================================================================== */
#mudmagi-lanterns .mml-grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: 0.24; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}


/* =============================================================================
   4 · LAYOUT
   ========================================================================== */
#mudmagi-lanterns .mml-wrap {
  width: min(100% - 2.5rem, 1140px);
  margin-inline: auto;
}
#mudmagi-lanterns .mml-section { padding-block: var(--mml-section-y); position: relative; }
#mudmagi-lanterns .mml-sechead { margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
#mudmagi-lanterns .mml-sechead--centred { text-align: center; }
#mudmagi-lanterns .mml-sechead--centred .mml-sub { margin-inline: auto; }


/* =============================================================================
   5 · TYPE
   ========================================================================== */
#mudmagi-lanterns .mml-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mml-accent);
  margin-bottom: 1rem;
}
#mudmagi-lanterns .mml-h2 {
  font-family: var(--mml-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.6vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mml-fg);
}
/* the quieter heading, for the close */
#mudmagi-lanterns .mml-h3 {
  font-family: var(--mml-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--mml-fg);
}
#mudmagi-lanterns .mml-sub {
  color: var(--mml-fg-soft);
  max-width: 46ch;
  margin-top: 1.1rem;
  font-size: 1rem;
}


/* =============================================================================
   6 · MEDIA FRAMES
   -----------------------------------------------------------------------------
   aspect-ratio is written inline from config.js, so the box is the right shape
   before the file arrives. Nothing on this page shifts while loading.
   ========================================================================== */
#mudmagi-lanterns .mml-frame {
  position: relative;
  overflow: hidden;
  background: var(--mml-frame);
  border-radius: var(--mml-radius);
  box-shadow: var(--mml-lift);
}
#mudmagi-lanterns .mml-frame > img,
#mudmagi-lanterns .mml-frame > video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* the big ones get a touch more curve so the radius reads the same by eye */
#mudmagi-lanterns .mml-span-wide > .mml-frame,
#mudmagi-lanterns .mml-span-full > .mml-frame,
#mudmagi-lanterns .mml-dn__pair .mml-frame,
#mudmagi-lanterns .mml-story__media .mml-frame,
#mudmagi-lanterns .mml-closing__media .mml-frame { border-radius: var(--mml-radius-lg); }

/* full-bleed backgrounds stay square to the edge of the screen */
#mudmagi-lanterns .mml-hero__media .mml-frame {
  border-radius: 0;
  box-shadow: none;
}

#mudmagi-lanterns .mml-cap {
  margin-top: 0.65rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mml-fg-soft);
}

#mudmagi-lanterns .mml-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.45rem; text-align: center; padding: 1.2rem;
  background: var(--mml-frame);
  border: 1px dashed var(--mml-line);
  border-radius: inherit;
  color: var(--mml-fg-soft);
}
#mudmagi-lanterns .mml-ph__dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--mml-accent);
  opacity: .6;
}
#mudmagi-lanterns .mml-t-night .mml-ph__dot { box-shadow: 0 0 22px -4px var(--mml-ember-glow); }
#mudmagi-lanterns .mml-ph__name {
  font-family: var(--mml-font-display);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  font-weight: 400; color: var(--mml-fg);
  line-height: 1.25;
}
#mudmagi-lanterns .mml-ph__meta {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mml-accent-deep);
}


/* =============================================================================
   7 · HERO
   -----------------------------------------------------------------------------
   The veil is two layers, not one flat wash: a short vertical scrim along the
   bottom edge where the type sits, and a soft horizontal one from the left.
   That keeps the headline readable while leaving the coastline, the glaze and
   the lantern itself far more present than a single overall haze would.
   ========================================================================== */
#mudmagi-lanterns .mml-hero {
  position: relative;
  min-height: min(calc(var(--mml-vh) * 0.9), 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(2rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
  background: var(--mml-bg);
}
#mudmagi-lanterns .mml-hero__media { position: absolute; inset: 0; z-index: 0; }
#mudmagi-lanterns .mml-hero__media .mml-frame {
  position: absolute; inset: 0; aspect-ratio: auto !important;
}
#mudmagi-lanterns .mml-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Deliberately light. An earlier version used a big pool of cream to carry
     the type, which washed the pale lanterns on the left almost out of the
     picture. The type now carries itself (see the halo below), so this only
     has to settle the photograph into the parchment along the bottom edge and
     take the faintest edge off the lower left. */
  background:
    radial-gradient(78% 52% at 0% 100%,
      rgba(246, 239, 225, 0.52) 0%,
      rgba(246, 239, 225, 0.26) 40%,
      rgba(246, 239, 225, 0.00) 70%),
    linear-gradient(to top,
      var(--mml-scrim) 0%,
      rgba(246, 239, 225, 0.50) 8%,
      rgba(246, 239, 225, 0.22) 22%,
      rgba(246, 239, 225, 0.06) 34%,
      rgba(246, 239, 225, 0.00) 48%);
}

/* The type carries its own legibility: a soft cream halo tight around each
   glyph. Invisible as a shape, but it lifts the contrast exactly where the
   letters are instead of bleaching the whole photograph to do it. */
#mudmagi-lanterns .mml-hero__in > *,
#mudmagi-lanterns .mml-hero__cue {
  text-shadow:
    0 0 10px rgba(246, 239, 225, 0.95),
    0 0 26px rgba(246, 239, 225, 0.85),
    0 0 52px rgba(246, 239, 225, 0.65);
}

/* The eyebrow is small, thin and uppercase. A wide soft halo does almost
   nothing for glyphs this fine — it needs a tight dense one, drawn close.
   Deeper orange too: small text needs 4.5:1 where the headline needs 3. */
#mudmagi-lanterns .mml-hero .mml-eyebrow {
  color: var(--mml-accent-deep);
  text-shadow:
    0 0 3px rgba(246, 239, 225, 1),
    0 0 6px rgba(246, 239, 225, 1),
    0 0 11px rgba(246, 239, 225, 0.98),
    0 0 20px rgba(246, 239, 225, 0.9);
}

#mudmagi-lanterns .mml-hero__in {
  position: relative; z-index: 2;
  width: min(100% - 2.5rem, 1140px);
  margin-inline: auto;
}
#mudmagi-lanterns .mml-hero__title {
  font-family: var(--mml-font-display);
  font-weight: 300;
  /* eased down so the picture keeps its share of the frame */
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--mml-fg);
  text-wrap: balance;
}
#mudmagi-lanterns .mml-hero__tagline {
  font-family: var(--mml-font-display);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--mml-clay);
  margin-top: 0.8rem;
}
#mudmagi-lanterns .mml-hero__cue {
  position: relative; z-index: 2;
  width: min(100% - 2.5rem, 1140px);
  margin: clamp(1.8rem, 5vw, 2.8rem) auto 0;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--mml-fg-soft);
  display: flex; align-items: center; gap: 0.7rem;
}
#mudmagi-lanterns .mml-hero__cue::after {
  content: ""; width: 44px; height: 1px; background: currentColor; opacity: .5;
  animation: mml-cue 3.4s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes mml-cue {
  0%, 100% { transform: scaleX(.4); opacity: .3; }
  50%      { transform: scaleX(1);  opacity: .7; }
}


/* =============================================================================
   8 · GALLERIES
   ========================================================================== */
#mudmagi-lanterns .mml-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--mml-gap);
}
#mudmagi-lanterns .mml-grid figure { min-width: 0; }

@media (min-width: 700px) {
  #mudmagi-lanterns .mml-grid { grid-template-columns: repeat(6, 1fr); }
  #mudmagi-lanterns .mml-grid > .mml-span-normal { grid-column: span 3; }
  #mudmagi-lanterns .mml-grid > .mml-span-tall   { grid-column: span 3; }
  #mudmagi-lanterns .mml-grid > .mml-span-wide   { grid-column: span 6; }
  #mudmagi-lanterns .mml-grid > .mml-span-full   { grid-column: span 6; }
}
@media (min-width: 1040px) {
  #mudmagi-lanterns .mml-grid > .mml-span-normal { grid-column: span 3; }
  #mudmagi-lanterns .mml-grid > .mml-span-tall   { grid-column: span 2; }
  #mudmagi-lanterns .mml-grid > .mml-span-wide   { grid-column: span 4; }
  #mudmagi-lanterns .mml-grid > .mml-span-full   { grid-column: span 6; }
  /* a tall picture next to a wide one sits better nudged down a little */
  #mudmagi-lanterns .mml-grid > .mml-span-tall { align-self: end; }
}


/* =============================================================================
   9 · STORY — words on one side, the making on the other
   ========================================================================== */
#mudmagi-lanterns .mml-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 820px) {
  #mudmagi-lanterns .mml-story__grid { grid-template-columns: 1fr 1fr; }
}
#mudmagi-lanterns .mml-story__in { max-width: 34rem; }
#mudmagi-lanterns .mml-story__lines p {
  font-family: var(--mml-font-display);
  font-weight: 300;
  font-size: clamp(1.2rem, 3.1vw, 1.65rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--mml-fg);
  text-wrap: pretty;
}
#mudmagi-lanterns .mml-story__lines p + p {
  margin-top: 1.4rem;
  font-family: var(--mml-font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--mml-fg-soft);
}
#mudmagi-lanterns .mml-story__media { min-width: 0; }


/* =============================================================================
   10 · DAY → NIGHT
   -----------------------------------------------------------------------------
   Two states, not a slider and not a sustained blend. Scrolling into the
   section turns the light on; the two labels are also buttons, so it can be
   switched back and forth deliberately. The crossfade is quick enough that the
   half-way point reads as a dissolve rather than as two photographs
   accidentally stacked on top of each other.
   ========================================================================== */
#mudmagi-lanterns .mml-dn__stage { display: grid; gap: var(--mml-gap); }

#mudmagi-lanterns .mml-dn__pair {
  position: relative;
  width: min(100%, 880px);
  margin-inline: auto;
}
#mudmagi-lanterns .mml-dn__layer { position: absolute; inset: 0; }
#mudmagi-lanterns .mml-dn__layer--day { position: relative; }
#mudmagi-lanterns .mml-dn__layer--night {
  opacity: 0;
  transition: opacity .55s cubic-bezier(.4,0,.2,1);
}
#mudmagi-lanterns .mml-dn__pair[data-state="night"] .mml-dn__layer--night { opacity: 1; }

/* the warmth that arrives with the light */
#mudmagi-lanterns .mml-dn__pair::after {
  content: ""; position: absolute; inset: -10%;
  pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, var(--mml-ember-glow), transparent 70%);
  opacity: 0; filter: blur(40px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1);
}
#mudmagi-lanterns .mml-dn__pair[data-state="night"]::after { opacity: .5; }

/* the two labels are the control */
#mudmagi-lanterns .mml-dn__switch {
  display: flex; justify-content: center; gap: 0.5rem;
  margin-top: 1.5rem;
}
#mudmagi-lanterns .mml-dn__btn {
  appearance: none; background: transparent; cursor: pointer;
  font-family: var(--mml-font-body);
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700;
  color: var(--mml-fg-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  transition: color .3s ease, border-color .3s ease;
}
#mudmagi-lanterns .mml-dn__btn[aria-pressed="true"] {
  color: var(--mml-glow);
  border-color: var(--mml-line);
}
#mudmagi-lanterns .mml-dn__btn:hover { color: var(--mml-glow); }

/* reduced motion / no script: both frames side by side, each labelled */
#mudmagi-lanterns .mml-dn__stage.mml-dn--static { max-width: 1000px; margin-inline: auto; }
@media (min-width: 700px) {
  #mudmagi-lanterns .mml-dn__stage.mml-dn--static { grid-template-columns: 1fr 1fr; }
}
#mudmagi-lanterns .mml-dn--static .mml-dn__pair { width: 100%; }
#mudmagi-lanterns .mml-dn--static .mml-dn__layer,
#mudmagi-lanterns .mml-dn--static .mml-dn__layer--night {
  position: relative; inset: auto; opacity: 1;
}


/* =============================================================================
   11 · TYPES — a matched pair
   ========================================================================== */
#mudmagi-lanterns .mml-types__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}
@media (min-width: 700px) {
  #mudmagi-lanterns .mml-types__grid { grid-template-columns: 1fr 1fr; }
}
#mudmagi-lanterns .mml-type { display: flex; flex-direction: column; min-width: 0; }
#mudmagi-lanterns .mml-type__name {
  font-family: var(--mml-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  letter-spacing: -0.018em;
  margin-top: 1.3rem;
  color: var(--mml-fg);
}
#mudmagi-lanterns .mml-type__blurb {
  color: var(--mml-fg-soft);
  margin-top: 0.55rem;
  max-width: 36ch;
  font-size: 0.97rem;
}


/* =============================================================================
   12 · AVAILABILITY — back in the warm
   ========================================================================== */
#mudmagi-lanterns .mml-avail__in { max-width: 36rem; }
#mudmagi-lanterns .mml-avail__media {
  display: grid; grid-template-columns: 1fr; gap: var(--mml-gap);
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
}
@media (min-width: 700px) {
  #mudmagi-lanterns .mml-avail__media { grid-template-columns: repeat(6, 1fr); }
  #mudmagi-lanterns .mml-avail__media > .mml-span-wide   { grid-column: span 4; }
  #mudmagi-lanterns .mml-avail__media > .mml-span-normal { grid-column: span 2; }
  #mudmagi-lanterns .mml-avail__media > .mml-span-tall   { grid-column: span 2; }
  #mudmagi-lanterns .mml-avail__media > .mml-span-full   { grid-column: span 6; }
}

#mudmagi-lanterns .mml-btn {
  display: inline-block;
  margin-top: 1.8rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--mml-font-body);
  font-weight: 700; font-size: 0.84rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  color: var(--mml-accent);
  border: 1px solid var(--mml-accent);
  border-radius: 999px;
  background: transparent;
  transition: background-color .25s ease, color .25s ease;
}
#mudmagi-lanterns .mml-btn:hover { background: var(--mml-accent); color: var(--mml-bg); }


/* =============================================================================
   13 · CLOSING — a gentle ending, not a second hero
   ========================================================================== */
#mudmagi-lanterns .mml-closing { padding-block: clamp(4rem, 9vw, 6.5rem); }
#mudmagi-lanterns .mml-closing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 820px) {
  #mudmagi-lanterns .mml-closing__grid { grid-template-columns: 1.15fr 1fr; }
}
#mudmagi-lanterns .mml-closing__media { min-width: 0; }
#mudmagi-lanterns .mml-closing__in .mml-sub { margin-top: 0.8rem; }
#mudmagi-lanterns .mml-social {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem;
}
#mudmagi-lanterns .mml-social a {
  text-decoration: none;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--mml-line);
  border-radius: 999px;
  color: var(--mml-fg);
  transition: border-color .25s ease, color .25s ease;
}
#mudmagi-lanterns .mml-social a:hover {
  border-color: var(--mml-accent);
  color: var(--mml-accent);
}


/* =============================================================================
   14 · MOTION
   ========================================================================== */
#mudmagi-lanterns .mml-rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1),
              transform .85s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
#mudmagi-lanterns .mml-rise.mml-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #mudmagi-lanterns *,
  #mudmagi-lanterns *::before,
  #mudmagi-lanterns *::after {
    animation: none !important;
    transition: none !important;
  }
  #mudmagi-lanterns .mml-rise { opacity: 1 !important; transform: none !important; }
}