/* ============================================================
   fandom.css: the franchise tiles on /worlds/
   Every tile is type + a drawn emblem. No studio logos, no
   posters, no photographs: each lettering style below is a nod
   built out of the fonts already on the machine.
   ============================================================ */

.fandoms { padding-bottom: 4rem; }

/* ───────────── the switch ─────────────
   /worlds/ opens with the two portals that actually ship apps. Everything
   else on the page -- who I am, and every franchise -- lives behind this one
   button, so the page is short until you ask it not to be. Same bar geometry
   as the Travels / Accents buttons at the foot of the page, deliberately: it
   is the third control of the same kind, one row up. */
.fr-vaultbtn {
  display: flex; width: 100%; align-items: center; gap: 0.8rem;
  margin: 0 0 1.6rem; padding: 0.95rem 1.1rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(100deg, rgba(232,197,106,.07), transparent 70%);
  text-align: left; color: inherit; cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.fr-vaultbtn:hover {
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  background: linear-gradient(100deg, rgba(232,197,106,.13), transparent 70%);
}
.fr-vaultbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fr-vaultbtn-i { width: 22px; height: 22px; flex: none; }
.fr-vaultbtn-i svg {
  width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .5s var(--ease);
}
.fr-vaultbtn.is-open .fr-vaultbtn-i svg { transform: rotate(180deg); }
.fr-vaultbtn-t { display: grid; gap: 0.05rem; min-width: 0; }
.fr-vaultbtn-t b {
  font-family: var(--mono); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.1em; color: var(--ink);
}
.fr-vaultbtn-t i {
  font-style: normal; font-family: var(--mono); font-size: 0.48rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute);
}
.fr-vaultbtn-a { margin-left: auto; font-size: 0.8rem; color: var(--gold); }

/* The block itself. `hidden` does the hiding, so there is nothing to animate
   open -- the fade is reveal.js doing its usual job on the tiles inside, which
   is why they were never observed until now (see the rAF in fandom.js). */
.fr-vault[hidden] { display: none; }
.fr-vault > .subsec:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .fr-vaultbtn:hover { transform: none; }
  .fr-vaultbtn-i svg { transition: none; }
}

.fandoms .fr-lede {
  max-width: 70ch; margin: -0.4rem 0 2.4rem;
  color: var(--ink-dim); font-size: 0.98rem; line-height: 1.75;
}
.fandoms .fr-lede b { color: var(--gold); font-weight: 500; }

.subsec--fr { color: var(--gold); }
.subsec--fr .fr-count {
  order: 3; color: var(--mute); letter-spacing: 0.1em;
  border: 1px solid var(--line); border-radius: 100px; padding: 0.15rem 0.6rem;
}

/* ───────────── the grid ─────────────
   THE RANK IS THE LAYOUT. How far down the page a group sits decides how many
   tiles share its row, and therefore how big each one is: three across for the
   two groups that are not fandoms at all and the three I know by heart, then
   two, three, four as you descend. A tile you rank higher is a tile you see
   bigger, without a word of explanation on the page.

   Fixed counts rather than auto-fill: auto-fill sizes by the container and gave
   Primary three, Secondary four and Tertiary five, which read as one
   undifferentiated wall. Each group sets --cols and the step-downs below are
   the only place a breakpoint is written. */
.fr-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(var(--cols, 3), 1fr);
}
.fr-group--identity  .fr-grid { --cols: 3; }
.fr-group--core      .fr-grid { --cols: 3; }
.fr-group--primary   .fr-grid { --cols: 3; }
.fr-group--secondary .fr-grid { --cols: 3; }
.fr-group--tertiary  .fr-grid { --cols: 4; }
.fr-group--parks     .fr-grid { --cols: 3; }

/* Step-downs. Each group loses a column when its tiles would otherwise get too
   narrow to hold a name, so the ranking still reads on a laptop and a phone:
   the order is preserved even once the counts converge. */
@media (max-width: 1180px) {
  .fr-group--tertiary  .fr-grid { --cols: 3; }
}
@media (max-width: 900px) {
  .fr-group--identity  .fr-grid,
  .fr-group--core      .fr-grid,
  .fr-group--primary   .fr-grid,
  .fr-group--secondary .fr-grid,
  .fr-group--parks     .fr-grid { --cols: 2; }
  .fr-group--tertiary  .fr-grid { --cols: 3; }
}
@media (max-width: 620px) {
  .fr-group--identity  .fr-grid,
  .fr-group--core      .fr-grid,
  .fr-group--primary   .fr-grid,
  .fr-group--parks     .fr-grid { --cols: 1; }
  .fr-group--secondary .fr-grid { --cols: 2; }
  .fr-group--tertiary  .fr-grid { --cols: 2; }
}
.fr-group + .fr-group { margin-top: 0.6rem; }

/* fandom.js renders each group as a <section>, and .fandoms is a <section>
   too, so the global `section { padding: 0 var(--gutter); max-width: var(--maxw) }`
   in layout.css landed on both: every group heading and every tile grid sat one
   whole gutter further in than the lede and the bar above them. Unset it here
   rather than in layout.css, because a top-level <section> still wants it. */
.fandoms .fr-group { padding: 0; max-width: none; }

/* ───────────── tile ─────────────
   a.fr-card: the whole plate + blurb is one click target, so anywhere on the
   tile opens the franchise, not just the "Enter ↗" corner. */
.fr-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px;
  background: rgba(8, 8, 12, 0.55);
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
  content-visibility: auto; contain-intrinsic-size: auto 300px;
}
a.fr-card { cursor: pointer; }

/* Row alignment: each tile is a subgrid of its row in .fr-grid (plate, blurb,
   "when" line, meta) so every tile in a row puts each of those on the same
   line however long its blurb runs. fandom.js emits an empty .fr-slot for a
   tile with no `when`, which is what keeps the rows in step. */
@supports (grid-template-rows: subgrid) {
  /* the grid's own row gap would otherwise be inserted between the plate, the
     blurb and the meta line of every tile (see components.css) */
  .fr-grid { --rowgap: clamp(1rem, 2vw, 1.5rem); row-gap: 0; margin-bottom: calc(-1 * var(--rowgap)); }
  .fr-grid > .fr-card {
    margin-bottom: var(--rowgap);
    display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
    /* content-visibility applies size containment while the tile is off-screen,
       and a size-contained item cannot size the rows it shares */
    content-visibility: visible;
  }
  .fr-card > .fr-body {
    grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 0;
  }
  .fr-body > * + * { margin-top: 0.5rem; }   /* was the flex column's gap */
  /* .fr-meta used margin-top:auto to sit at the tile's foot; in a shared row
     that bottom-aligns a one-line meta against a two-line one */
  .fr-grid > .fr-card > .fr-body > .fr-meta { margin-top: 0.5rem; align-self: start; }
  .fr-slot { display: block; height: 0; }
}
.fr-card:hover,
.fr-card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c1) 45%, transparent);
  box-shadow: 0 24px 52px -30px #000, 0 0 44px -26px var(--c1);
}
.fr-card:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }

/* the plate the name sits on */
.fr-plate {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 150px; padding: 1.6rem 1.2rem;
  text-align: center; color: var(--c1);
  background:
    radial-gradient(110% 90% at 50% 0%, color-mix(in srgb, var(--c1) 12%, transparent), transparent 62%),
    linear-gradient(170deg, var(--c2), #06070a 78%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* The plate grows with the tile, and heights are set per group for the same
   reason the columns are: rank. Identity, Core, Primary, Secondary and Parks
   all sit three across, so their plates are separated by height alone and step
   down in that order; Tertiary is four across and shortest. */
.fr-group--core .fr-plate { min-height: 210px; }
.fr-group--primary .fr-plate { min-height: 195px; }
.fr-group--secondary .fr-plate { min-height: 175px; }
.fr-group--parks .fr-plate { min-height: 170px; }
.fr-group--tertiary .fr-plate { min-height: 150px; }
.fr-plate::before {                       /* faint scan texture, keeps it from going flat */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  opacity: .6;
}
.fr-glyph {
  width: 30px; height: 30px; flex: none; opacity: .9;
  transition: transform .5s var(--ease), opacity .4s;
}
.fr-group--core .fr-glyph { width: 42px; height: 42px; }
.fr-card:hover .fr-glyph { transform: translateY(-2px) scale(1.12); opacity: 1; }

.fr-enter {
  position: absolute; right: 0.8rem; bottom: 0.7rem;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c1); opacity: 0;
  transition: opacity .35s;
}
.fr-card:hover .fr-enter,
.fr-card:focus-visible .fr-enter { opacity: .85; }

.fr-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.fr-desc { font-size: 0.84rem; line-height: 1.6; color: var(--ink-dim); }
.fr-card:hover .fr-desc { color: var(--ink); }
/* When I got into it. Sits directly under the description and above the meta
   line, tinted with the tile's own ink so it reads as part of the card. */
.fr-when {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em;
  color: var(--c1); opacity: .85; line-height: 1.5;
}
.fr-when::before {
  content: "▸"; font-size: 0.5rem; opacity: .7; flex: none;
}
.fr-meta {
  margin-top: auto; padding-top: 0.4rem;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute);
}

/* ───────────── lettering ─────────────
   The base: everything is one line of type, then each franchise bends it. */
.fr-name {
  position: relative; z-index: 1; display: block;
  font-family: var(--serif); font-weight: 700; font-size: 1.34rem;
  line-height: 1.15; letter-spacing: -0.01em;
  text-wrap: balance;
}
.fr-group--tertiary .fr-name { font-size: 1.14rem; }
.fr-group--core .fr-name { font-size: 1.7rem; }

/* ── who I am ──
   These three are not franchises and must not look like one. No neon, no
   studio pastiche: the lettering is quiet and the plate is what carries them,
   which is why they get the tallest plate on the page. */
.fr-group--identity .fr-plate { min-height: 240px; }
.fr-group--identity .fr-glyph { width: 50px; height: 50px; }
.fr-group--identity .fr-name { font-size: 2rem; }

/* the eight-point lattice behind the plate: geometry, not imagery, and the
   same figure the Rubʿ al-Ḥizb glyph above it is built from */
.fr-group--identity .fr-plate::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: .16;
  background:
    repeating-linear-gradient(45deg,  color-mix(in srgb, var(--c1) 40%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c1) 40%, transparent) 0 1px, transparent 1px 26px);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 72%);
}

.wm--islam {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; text-shadow: 0 0 30px rgba(63,213,137,.4);
}
.wm--arab {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-variant: small-caps; letter-spacing: 0.16em;
  text-shadow: 0 2px 20px rgba(232,197,106,.35);
}
.wm--egypt {
  font-family: Copperplate, "Copperplate Gothic Light", Georgia, serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  background: linear-gradient(180deg, #f6dfa8, #e8a13f 58%, #a86a1c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* the radio era: warm serif with a valve-amp glow */
.wm--minshawi {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-variant: small-caps; letter-spacing: 0.14em;
  text-shadow: 0 0 26px rgba(217,184,138,.45);
}
/* gold on green, the way a muṣḥaf cover is tooled */
.wm--quran {
  font-family: Georgia, "Times New Roman", serif; font-weight: 600;
  font-variant: small-caps; letter-spacing: 0.2em;
  background: linear-gradient(180deg, #f4e2ac, #e0b84f 58%, #a8801c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* quiet serif with the dome's green behind it */
.wm--sunnah {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-variant: small-caps; letter-spacing: 0.18em;
  text-shadow: 0 0 26px rgba(111,207,164,.4);
}

/* stacks that exist on most machines, with honest fallbacks */
.wm--starwars {
  font-family: var(--serif); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; text-shadow: 0 0 26px rgba(255,232,31,.45);
}
.wm--potter {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  letter-spacing: 0.01em; text-shadow: 0 2px 18px rgba(217,180,95,.4);
}
.wm--avengers {
  font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.wm--minecraft {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; text-shadow: 3px 3px 0 #1d2a12;
}
.wm--pirates {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-variant: small-caps; letter-spacing: 0.09em;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
}
.wm--jurassic {
  font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.03em;
  -webkit-text-stroke: 1px #120a04;
}
.wm--stranger {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  text-shadow: 0 0 6px rgba(232,38,29,.9), 0 0 22px rgba(232,38,29,.7), 0 0 44px rgba(232,38,29,.4);
}
.wm--thrones {
  font-family: Copperplate, "Copperplate Gothic Light", Georgia, serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 1.16rem;
  background: linear-gradient(180deg, #f2f6fa, #8b98a5 55%, #dfe7ee);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm--atla {
  font-family: Papyrus, "Bradley Hand", Georgia, fantasy; font-weight: 400;
  letter-spacing: 0.03em; font-size: 1.2rem;
}
.wm--reddead {
  font-family: "American Typewriter", "Courier New", var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.wm--ninjago {
  font-family: var(--serif); font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.05em; transform: skewX(-7deg);
  background: linear-gradient(180deg, #ffe9a8, #e0b040 60%, #a87a20);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm--simpsons {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em;
  text-shadow: 3px 3px 0 #1a3a80;
}
.wm--office {
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.02em;
}
.wm--office::after { content: "."; color: var(--c1); }
.wm--boys {
  font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em; transform: skewX(-5deg);
}
.wm--batman {
  font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.2em;
  background: linear-gradient(180deg, #eef2f6, #7f8894);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm--spiderman {
  font-family: var(--serif); font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.04em;
  -webkit-text-stroke: 1px #14060a;
}
.wm--pokemon {
  font-family: var(--serif); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; transform: skewX(-6deg);
  -webkit-text-stroke: 1.4px #2b4b9b;
  paint-order: stroke fill;
}
.wm--fnaf {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.02rem;
  animation: fr-flicker 6s steps(1, end) infinite;
}
@keyframes fr-flicker {
  0%, 78%, 100% { opacity: 1; }
  79% { opacity: .35; } 80% { opacity: 1; }
  86% { opacity: .5; }  87% { opacity: 1; }
}
.wm--fortnite {
  font-family: Futura, "Century Gothic", "Trebuchet MS", var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-style: italic;
  background: linear-gradient(120deg, #8fd0ff, #6f7fff 60%, #b06fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm--indiana {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-variant: small-caps; letter-spacing: 0.08em;
}
.wm--parks {
  font-family: "Trebuchet MS", var(--sans); font-weight: 700;
  letter-spacing: 0.01em;
}
.wm--parks::after {
  content: ""; display: block; width: 46px; height: 3px; margin: 0.45rem auto 0;
  background: var(--c1); border-radius: 2px; opacity: .8;
}
.wm--lotr {
  font-family: Copperplate, "Copperplate Gothic Light", Georgia, serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 1.02rem;
}
.wm--kungfu {
  font-family: "Bradley Hand", "Brush Script MT", "Comic Sans MS", cursive; font-weight: 700;
  letter-spacing: 0.01em; font-size: 1.34rem;
}
.wm--avatar {
  font-family: Papyrus, "Bradley Hand", Georgia, fantasy; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 1.2rem;
  text-shadow: 0 0 20px rgba(95,214,224,.5);
}
.wm--invincible {
  font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.03em;
  -webkit-text-stroke: 1.4px #2a3a7a; paint-order: stroke fill;
}
.wm--percy {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-style: italic;
  letter-spacing: 0.01em;
}
.wm--dune {
  font-family: var(--sans); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.42em; font-size: 1.02rem; text-indent: 0.42em;
}

.wm--lego {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 2px 2px 0 #d01012, 4px 4px 0 rgba(0,0,0,.5);
}
.wm--clash {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  text-shadow: 2px 2px 0 #1a2a5a, 4px 4px 0 rgba(0,0,0,.5);
}
.wm--httyd {
  font-family: Copperplate, "Copperplate Gothic Light", Georgia, serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.02rem;
  text-shadow: 0 0 22px rgba(127,208,232,.45);
}
.wm--spongebob {
  font-family: "Chalkboard SE", "Comic Sans MS", "Trebuchet MS", cursive; font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 2px 2px 0 #1a3a4a;
}
/* geometric sans, because the wordmark is: Futura and its descendants. The
   dot under it is the lamp's spotlight, and the only nod to the logo I will
   make -- squashing a letter with a drawn lamp would be copying it. */
.wm--pixar {
  font-family: Futura, "Century Gothic", "Trebuchet MS", var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-shadow: 0 0 26px rgba(79,168,224,.45);
}
.wm--pixar::after {
  content: ""; display: block; width: 7px; height: 7px; border-radius: 50%;
  margin: 0.5rem auto 0; background: var(--c1);
  box-shadow: 0 0 14px var(--c1); opacity: .9;
}
/* chunky and rounded with a dark outline, the way a mobile game logo is */
.wm--angrybirds {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.06rem;
  -webkit-text-stroke: 1.4px #2a0c07; paint-order: stroke fill;
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
/* thin, wide and struck in gold: the Capitol's taste, not the districts' */
.wm--hunger {
  font-family: Copperplate, "Copperplate Gothic Light", Georgia, serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.94rem;
  background: linear-gradient(180deg, #f8ecc0, #e0b040 58%, #9c7418);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* steel with the red bleeding out of it rather than red type: the films are
   colder than their poster, and drop-shadow paints on the clipped text */
.wm--wick {
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 1.2rem;
  background: linear-gradient(180deg, #f4f7fa, #b8bfc8 58%, #7d848d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(216,74,82,.55));
}
/* thin, spaced and upper-case, the way his titles are set on the posters */
.wm--nolan {
  font-family: var(--sans); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.3em; font-size: 0.98rem; text-indent: 0.3em;
  background: linear-gradient(180deg, #f4f7fa, #b8c4d0 58%, #7d8794);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.wm--disney {
  font-family: "Snell Roundhand", "Brush Script MT", "Bradley Hand", cursive;
  font-weight: 700; font-style: italic; font-size: 1.7rem; letter-spacing: 0.01em;
  text-shadow: 0 0 24px rgba(159,208,255,.5);
}
.wm--universal {
  font-family: var(--sans); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 1.02rem;
  background: linear-gradient(180deg, #eaf2ff, #7f9ec4 60%, #dce8f8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.wm--jl {
  font-family: var(--serif); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 1.14rem;
  background: linear-gradient(180deg, #eaf2ff, #5f9fe0 58%, #d8b45f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.wm--knotts {
  font-family: "American Typewriter", Georgia, serif; font-weight: 700;
  font-variant: small-caps; letter-spacing: 0.07em;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
}

/* Breaking Bad writes its own two elements */
.wm--breakingbad {
  font-family: var(--sans); font-weight: 500; text-transform: lowercase;
  letter-spacing: 0.01em; color: var(--ink); font-size: 1.16rem;
}
.bb-tile {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  vertical-align: -0.32em; font-style: normal;
  padding: 0.22rem 0.34rem 0.16rem; margin-right: 0.06em;
  border-radius: 3px; background: var(--c1); color: #08120c;
  line-height: 1;
}
.bb-tile b { font-weight: 700; font-size: 1.05rem; }
.bb-tile em { font-style: normal; font-size: 0.5rem; opacity: .75; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) { .wm--fnaf { animation: none; } }
/* On a phone the counts are already down to one or two from the block above;
   this only shrinks the plates and the lettering to match. It used to reset
   grid-template-columns to auto-fill here, which would now overwrite --cols and
   undo the whole ranking at the one width where the tiles are smallest. */
@media (max-width: 560px) {
  .fr-plate,
  .fr-group--core .fr-plate,
  .fr-group--primary .fr-plate,
  .fr-group--secondary .fr-plate,
  .fr-group--tertiary .fr-plate { min-height: 120px; padding: 1.1rem 0.8rem; }
  .fr-name, .fr-group--core .fr-name, .fr-group--primary .fr-name { font-size: 1.02rem; }
}

/* ── the View Travels button, foot of the page ──
   THESE RULES MUST LIVE HERE. /worlds/ loads fandom.css and not
   fanpages.css; when they were in the wrong file the button rendered raw --
   and an unstyled <svg> path defaults to fill:black, so the globe icon became
   a viewport-sized black disc with a seam down it. Hence the explicit
   fill/stroke below rather than relying on inheritance. */
/* One row, two doors: Travels and Accents are the two pages on this site that
   are about me rather than about somebody else's world, so they read as a pair
   rather than as one control repeated down the page. They drop to a stack only
   when the row would squeeze the labels.

   NO GUTTER AND NO max-width HERE. This now lives inside .fandoms, at the foot
   of the block the "Show the other worlds" bar opens, and .fandoms is already
   a <section> carrying both. Setting them again indented the row a whole gutter
   further in than the bar directly above it, which is exactly the misalignment
   you notice and cannot name. Full width of its parent is what lines it up. */
.fr-travels {
  margin: 2.6rem 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; align-items: stretch;
}
@media (max-width: 720px) { .fr-travels { grid-template-columns: 1fr; } }
/* Each half of the row is a bar, so it reads as a destination rather than a
   footnote. The arrow keeps to the far edge of its own half. */
.fr-travels-btn {
  display: flex; width: 100%; align-items: center; gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line); border-radius: 8px; text-decoration: none;
  background: linear-gradient(100deg, rgba(120,170,220,.07), transparent 70%);
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.fr-travels-a { margin-left: auto; }
.fr-travels-btn:hover {
  border-color: rgba(140,190,240,.5); transform: translateY(-3px);
  background: linear-gradient(100deg, rgba(120,170,220,.13), transparent 70%);
}
.fr-travels-i { width: 22px; height: 22px; flex: none; }
.fr-travels-i svg { width: 100%; height: 100%; fill: none; stroke: #7fb8e8; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; }
.fr-travels-t { display: grid; gap: 0.05rem; min-width: 0; }
.fr-travels-t b { font-family: var(--mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink); }
.fr-travels-t i {
  font-style: normal; font-family: var(--mono); font-size: 0.48rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute);
}
.fr-travels-a { font-size: 0.8rem; color: #7fb8e8; }

/* Accents is gold rather than blue so the two halves of the row read as two
   different rooms, not one control repeated; the colour is set on the wrapper
   so the icon, the arrow and the wash all follow from a single declaration. */
.fr-travels-btn--ac {
  background: linear-gradient(100deg, rgba(245,198,60,.07), transparent 70%);
}

.fr-travels-btn--ac:hover {
  border-color: rgba(245,198,60,.5);
  background: linear-gradient(100deg, rgba(245,198,60,.13), transparent 70%);
}

.fr-travels-btn--ac .fr-travels-i svg { stroke: var(--gold); }

.fr-travels-btn--ac .fr-travels-a { color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .fr-travels-btn:hover { transform: none; } }