/* ===========================================================================
   Wam's D&D Hub: design layer
   ---------------------------------------------------------------------------
   The hub's own palette, drawn from its theme: near black panels, the cyan
   header, blue resource tiles, the campaign's red, gold for the call to
   action, purple for the archive. Every rule is scoped to a wam- class, so
   pages that have not been redesigned yet are untouched. The header and
   footer are shared by every page, so their rules apply everywhere.
   =========================================================================== */

:root {
  --wam-surface: #121217;
  --wam-surface-2: #1d1d22;
  --wam-surface-3: #26262d;
  --wam-ink: #0b0b0f;
  --wam-blue: var(--wp--preset--color--vivid-cyan-blue, #0693e3);
  --wam-blue-deep: #0474b4;
  --wam-teal: var(--wp--preset--color--tertiary, #00a79c);
  --wam-red: var(--wp--preset--color--custom-color-8, #630000);
  --wam-gold: var(--wp--preset--color--luminous-vivid-amber, #fcb900);
  --wam-purple: var(--wp--preset--color--vivid-purple, #9b51e0);
  --wam-purple-deep: #6c33a6;
  --wam-grey: var(--wp--preset--color--cyan-bluish-gray, #abb8c3);
  --wam-white: #ffffff;
  --wam-faded: rgba(255, 255, 255, 0.78);
  --wam-line: rgba(255, 255, 255, 0.1);
  --wam-grid: rgba(255, 255, 255, 0.07);
  --wam-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wam-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wam-font: var(--wp--preset--font-family--poppins, "Poppins", "Helvetica Neue", Arial, sans-serif);
}

/* ------------------------------------------------------------ page frame -- */

/* A redesigned page owns the whole frame: no strips of theme colour between
   its sections. */
.wp-site-blocks:has(> .wam-page) { background: var(--wam-surface); }
.wp-site-blocks:has(> .wam-page) > * { margin-block-start: 0; }

.wam-page {
  font-family: var(--wam-font);
  color: var(--wam-white);
  line-height: 1.55;
  overflow-x: clip;
}
.wam-page a { color: inherit; }
.wam-page :focus-visible { outline: 2px solid var(--wam-gold); outline-offset: 3px; border-radius: 6px; }

/* The theme spaces every flow child with its own block gap; inside these
   components the layout owns the spacing instead. */
.wam-page :where(.wam-section, .wam-wrap, .wam-hero-head, .wam-sec-head, .wam-tiles, .wam-tile,
  .wam-chronicles, .wam-chron, .wam-chron-art, .wam-chron-body, .wam-dm) > * { margin-block: 0; }
.wam-page :where(.wam-tile, .wam-chron-art, .wam-dm) .wp-block-image { margin: 0; }

.wam-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 104px);
}
.wam-wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  gap: 40px;
}

.wam-eyebrow {
  color: var(--wam-teal);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wam-sec-head { display: grid; gap: 8px; }
.wam-sec-head .wp-block-heading {
  color: var(--wam-white);
  font-family: var(--wam-font);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* ------------------------------------------------------------------ hero -- */

.wam-hero {
  background:
    radial-gradient(1100px 480px at 50% -10%, rgba(6, 147, 227, 0.3), transparent 70%),
    var(--wam-surface);
}
/* The header's grid, carried down into the hero and drifting slowly. */
.wam-hero::before {
  content: "";
  position: absolute;
  inset: -50px;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--wam-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wam-grid) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 22%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 22%, #000 35%, transparent 85%);
  animation: wam-drift 22s linear infinite;
}
/* And a soft light that breathes behind the headline. */
.wam-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -300px;
  width: 720px;
  height: 720px;
  translate: -50% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 147, 227, 0.32), transparent 62%);
  animation: wam-breathe 9s ease-in-out infinite alternate;
  pointer-events: none;
}

.wam-hero-head {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.wam-hero-head > * { animation: wam-rise 0.9s var(--wam-ease) both; }
.wam-hero-head > :nth-child(2) { animation-delay: 0.08s; }
.wam-hero-head > :nth-child(3) { animation-delay: 0.16s; }

.wam-hero-title.wp-block-heading {
  font-family: var(--wam-font);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--wam-white);
  background: linear-gradient(180deg, #ffffff 35%, #bfe5ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wam-hero-tag { max-width: 46ch; color: var(--wam-faded); font-size: 1.05rem; }

/* ----------------------------------------------------------------- tiles -- */

.wam-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 84px 24px;
  /* Room above the first row for the icons that break out of the tiles. */
  padding-top: 84px;
}

.wam-tile {
  --wam-rx: 0deg;
  --wam-ry: 0deg;
  --wam-lift: 0px;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 100px 20px 24px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, var(--wam-blue), var(--wam-blue-deep));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: perspective(900px) rotateX(var(--wam-rx)) rotateY(var(--wam-ry)) translateY(var(--wam-lift));
  transition: transform 0.35s var(--wam-ease), box-shadow 0.35s var(--wam-ease);
  animation: wam-rise 0.8s var(--wam-ease) both;
}
.wam-tile:nth-child(1) { animation-delay: 0.22s; }
.wam-tile:nth-child(2) { animation-delay: 0.3s; }
.wam-tile:nth-child(3) { animation-delay: 0.38s; }
.wam-tile:nth-child(4) { animation-delay: 0.46s; }

.wam-tile:hover,
.wam-tile:focus-within {
  --wam-lift: -6px;
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* A sheen that sweeps across on hover. */
.wam-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  transition: background-position 0.9s var(--wam-ease);
  pointer-events: none;
}
.wam-tile:hover::before { background-position: -30% 0; }

/* The pixel icon breaks out of the top, and floats. */
.wam-tile .wam-tile-icon {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 136px;
  translate: -50% 0;
  pointer-events: none;
}
.wam-tile .wam-tile-icon img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.45));
  animation: wam-float 6s ease-in-out infinite;
  transition: scale 0.4s var(--wam-spring), rotate 0.4s var(--wam-spring);
}
.wam-tile:nth-child(2) .wam-tile-icon img { animation-delay: -1.5s; }
.wam-tile:nth-child(3) .wam-tile-icon img { animation-delay: -3s; }
.wam-tile:nth-child(4) .wam-tile-icon img { animation-delay: -4.5s; }
.wam-tile:hover .wam-tile-icon img { scale: 1.08; rotate: -3deg; }

.wam-tile-title { font-size: 1.22rem; font-weight: 700; line-height: 1.2; }
.wam-tile-title a { text-decoration: none; color: var(--wam-white); }
/* The whole tile is the link, through one real link stretched over it. */
.wam-tile-title a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; z-index: 1; }
.wam-tile-title a:focus-visible { outline: none; }
.wam-tile:focus-within { outline: 2px solid var(--wam-gold); outline-offset: 4px; }
.wam-tile-note { color: var(--wam-faded); font-size: 0.9rem; line-height: 1.45; }
.wam-tile::after {
  content: "Open \2192";
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.78;
  transition: opacity 0.25s ease, letter-spacing 0.35s var(--wam-ease);
}
.wam-tile:hover::after { opacity: 1; letter-spacing: 0.17em; }

/* ------------------------------------------------------------- community -- */

.wam-page .wam-community {
  justify-content: center;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
}
.wam-page .wam-community .wp-social-link {
  background: var(--wam-surface-3) !important;
  color: var(--wam-white) !important;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--wam-line);
  transition: transform 0.25s var(--wam-ease), background-color 0.25s ease;
}
.wam-page .wam-community .wp-social-link:hover { transform: translateY(-3px); background: #33333c !important; }
.wam-page .wam-community .wp-social-link-discord { background: #5865f2 !important; }
.wam-page .wam-community .wp-social-link-discord:hover { background: #6d78f5 !important; }
.wam-page .wam-community .wp-block-social-link-anchor {
  padding: 12px 18px !important;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
}
.wam-page .wam-community .wp-social-link svg { width: 20px; height: 20px; }
/* The X link shows its icon only; its label stays for screen readers. */
.wam-page .wam-community .wp-social-link-x .wp-block-social-link-anchor { padding: 12px 14px !important; }
.wam-page .wam-community .wp-social-link-x .wp-block-social-link-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ----------------------------------------------------------- now playing -- */

.wam-playing { background: linear-gradient(180deg, var(--wam-surface), var(--wam-surface-2)); }
.wam-playing::before {
  content: "";
  position: absolute;
  right: -10%;
  top: 30%;
  width: 60%;
  height: 70%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(150, 0, 0, 0.22), transparent);
  pointer-events: none;
}
/* With nothing published, the section steps aside. */
.wam-section:has(.wam-tt-empty) { display: none; }

.wam-features { display: grid; gap: 40px; }

.wam-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 26px;
  overflow: hidden;
  background: var(--wam-panel, var(--wam-red));
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.wam-feature:nth-child(even) .wam-feature-art { order: 2; }

.wam-feature-art {
  position: relative;
  isolation: isolate;
  min-height: 460px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.wam-feature-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: wam-kenburns 24s ease-in-out infinite alternate;
}
.wam-feature-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), color-mix(in srgb, var(--wam-panel, #630000) 86%, transparent));
}
.wam-feature:nth-child(even) .wam-feature-art::after {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.12), color-mix(in srgb, var(--wam-panel, #630000) 86%, transparent));
}
.wam-feature-logo { display: block; transition: transform 0.45s var(--wam-spring); }
.wam-feature-logo:hover { transform: scale(1.07) rotate(-1.5deg); }
.wam-feature-mark {
  display: block;
  width: 230px;
  max-width: 60vw;
  height: auto;
  border-radius: 16px;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.6));
}

.wam-feature-body {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 44px 44px 40px;
}
.wam-feature-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
          mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.wam-feature-body > * { margin: 0; }
.wam-feature-system { color: var(--wam-accent, var(--wam-gold)); font-size: 0.92rem; font-weight: 700; font-style: italic; }
.wam-feature-title {
  font-family: var(--wam-font);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--wam-white);
}
.wam-feature-title a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size 0.4s var(--wam-ease);
}
.wam-feature-title a:hover { background-size: 100% 2px; }
.wam-feature-blurb { color: var(--wam-faded); font-weight: 300; }

.wam-feature-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.wam-fact {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.78rem;
  font-weight: 600;
}
.wam-fact.is-attention {
  background: rgba(252, 185, 0, 0.16);
  color: var(--wam-gold);
  box-shadow: inset 0 0 0 1px rgba(252, 185, 0, 0.45);
}

.wam-label {
  margin-top: 4px;
  color: var(--wam-accent, var(--wam-gold));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wam-party {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wam-member {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.26);
  transition: background-color 0.25s ease, translate 0.25s var(--wam-ease);
}
.wam-member:hover { background: rgba(0, 0, 0, 0.42); translate: 3px 0; }
.wam-member.is-gm { grid-column: 1 / -1; background: rgba(0, 0, 0, 0.4); }
.wam-member img {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.wam-member.is-gm img { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--wam-accent, var(--wam-gold)); }
.wam-member span { min-width: 0; }
.wam-member b { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.22; overflow-wrap: anywhere; }
.wam-member small { display: block; color: var(--wam-grey); font-size: 0.76rem; line-height: 1.3; overflow-wrap: anywhere; }
.wam-member.is-gm small { color: var(--wam-accent, var(--wam-gold)); }

.wam-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.wam-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s var(--wam-ease), box-shadow 0.25s ease, background-color 0.25s ease;
}
.wam-btn:hover { transform: translateY(-2px); }
.wam-btn:active { transform: translateY(0) scale(0.98); }
.wam-page .wam-btn.is-gold { background: var(--wam-gold); color: #1a1200; box-shadow: 0 8px 22px rgba(252, 185, 0, 0.28); }
.wam-page .wam-btn.is-gold:hover { box-shadow: 0 12px 30px rgba(252, 185, 0, 0.45); }
.wam-page .wam-btn.is-ghost { color: var(--wam-white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.wam-page .wam-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.wam-arrow { display: inline-block; transition: translate 0.25s var(--wam-ease); }
.wam-btn:hover .wam-arrow { translate: 3px 0; }

/* --------------------------------------------------------------- archive -- */

.wam-archive { background: linear-gradient(160deg, var(--wam-purple), var(--wam-purple-deep)); }
.wam-archive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%);
          mask-image: linear-gradient(180deg, #000, transparent 60%);
}
.wam-archive .wam-eyebrow { color: #f1e6ff; }

.wam-chronicles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.wam-chron {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 20px;
  overflow: hidden;
  background: var(--wam-surface);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--wam-ease), box-shadow 0.35s ease;
}
.wam-chron:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(0, 0, 0, 0.48); }

.wam-chron-art {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--wam-surface-3), var(--wam-surface-2));
}
.wam-chron-art .wp-block-image { position: absolute; inset: 0; }
.wam-chron-art .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s var(--wam-ease);
}
.wam-chron-art .wp-block-image.is-contain img { object-fit: contain; padding: 16%; image-rendering: pixelated; }
.wam-chron:hover .wam-chron-art .wp-block-image img { scale: 1.06; }
.wam-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wam-chron-body { display: grid; align-content: start; gap: 10px; padding: 18px 18px 20px; }
.wam-chron-body .wp-block-heading {
  color: var(--wam-white);
  font-family: var(--wam-font);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.2;
}
.wam-dm {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}
.wam-dm .wp-block-image { grid-row: span 2; }
.wam-dm .wp-block-image img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.wam-dm-name { font-size: 0.88rem; font-weight: 600; line-height: 1.2; }
.wam-dm-role { color: var(--wam-grey); font-size: 0.74rem; line-height: 1.2; }
.wam-story { color: var(--wam-faded); font-size: 0.88rem; line-height: 1.55; }
.wam-story.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wam-more {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wam-gold);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.wam-more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header -- */

header.wp-block-template-part:has(.wam-header) {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  margin-block-start: 0;
}
.wam-header {
  position: relative;
  isolation: isolate;
  background: var(--wam-blue);
  color: var(--wam-white);
  font-family: var(--wam-font);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.wam-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}
.wam-header.is-scrolled {
  background: color-mix(in srgb, var(--wam-blue) 90%, #000);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.wam-header .wam-header-in {
  max-width: 1240px;
  margin-inline: auto;
  padding: 12px 24px;
  gap: 18px;
  transition: padding 0.3s var(--wam-ease);
}
.wam-header.is-scrolled .wam-header-in { padding-block: 6px; }
.wam-header .wp-block-site-logo { flex: none; }
.wam-header .wp-block-site-logo img { width: 46px; height: auto; transition: width 0.3s var(--wam-ease); }
.wam-header.is-scrolled .wp-block-site-logo img { width: 38px; }

.wam-header .wp-block-navigation {
  margin-left: auto;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wam-white);
}
.wam-header .wp-block-navigation .wp-block-navigation-item__content {
  padding: 8px 12px;
  border-radius: 9px;
  transition: background-color 0.2s ease;
}
.wam-header .wp-block-navigation .wp-block-navigation-item__content:hover { background: rgba(255, 255, 255, 0.18); }
.wam-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { background: var(--wam-surface); }
.wam-header .wp-block-navigation .wp-block-navigation__submenu-icon { margin-left: -6px; margin-right: 6px; }

/* Submenus: a dark panel that eases in. */
.wam-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--wam-surface) !important;
  color: var(--wam-white) !important;
  border: 1px solid var(--wam-line) !important;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  translate: 0 6px;
  transition: opacity 0.2s ease, translate 0.25s var(--wam-ease);
}
.wam-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.wam-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
  translate: 0 0;
}
.wam-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 9px 12px; border-radius: 8px; }
.wam-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wam-surface-3); }

/* The phone menu: a full screen dark panel. */
.wam-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wam-surface) !important;
  color: var(--wam-white) !important;
  padding: 28px 24px !important;
}
.wam-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.15rem; padding: 10px 8px; }
.wam-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
  padding: 0 0 0 14px;
  translate: none;
}
.wam-header .wp-block-navigation__responsive-container-open,
.wam-header .wp-block-navigation__responsive-container-close { color: var(--wam-white); }

/* Open Tabletop: the header's call to action, with a live dot. */
.wam-header .wam-header-cta { flex: none; margin: 0; }
.wam-header .wam-btn-tabletop .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  background: var(--wam-surface);
  color: var(--wam-white);
  font-family: var(--wam-font);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.25s var(--wam-ease), box-shadow 0.25s ease;
}
/* Tabletop's own mark, on a gold disc that pulses like a live light. The
   mark is dark greens and browns, which would vanish on the button itself. */
.wam-header .wam-btn-tabletop .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wam-gold) url("tabletop-icon.svg") center / 82% no-repeat;
  animation: wam-pulse 2.4s ease-out infinite;
}
.wam-header .wam-btn-tabletop .wp-block-button__link::after {
  content: "\2197";
  display: inline-block;
  transition: translate 0.25s var(--wam-ease);
}
.wam-header .wam-btn-tabletop .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(252, 185, 0, 0.65);
}
.wam-header .wam-btn-tabletop .wp-block-button__link:hover::after { translate: 2px -2px; }


/* ------------------------------------------------------- tabs: one line -- */
/* The tabs never wrap onto a second line, whatever the width, zoom or label
   length. They stay on one row, and when that row would not fit, hub.js folds
   them into the menu button instead (.wam-nav-collapsed). */

.wam-header .wp-block-navigation { min-width: 0; flex-wrap: nowrap; }
.wam-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
  flex-wrap: nowrap !important;
}
.wam-header .wp-block-navigation__container > .wp-block-navigation-item { flex: none; }
.wam-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { white-space: nowrap; }

.wam-header.wam-nav-collapsed .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
.wam-header.wam-nav-collapsed .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
.wam-header.wam-nav-collapsed .wam-header-cta { margin-left: auto; order: 2; }
.wam-header.wam-nav-collapsed .wp-block-navigation { margin-left: 0; order: 3; }

/* ------------------------------------------------------ tabs: roll in ---- */
/* When the tabs were not on screen a moment ago (arriving from the home page,
   which has none, or from outside the hub), they roll down out of the header
   one after another. The decision is made in the page head before anything
   paints; see wam-hub-design.php. */

.wam-nav-enter .wam-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item,
.wam-nav-enter .wam-header .wp-block-navigation__responsive-container-open {
  transform-origin: 50% 0;
  animation: wam-roll 0.75s var(--wam-spring) backwards;
  animation-delay: 0.12s;
}
.wam-nav-enter .wam-header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.19s; }
.wam-nav-enter .wam-header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.26s; }
.wam-nav-enter .wam-header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.33s; }
.wam-nav-enter .wam-header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.4s; }
.wam-nav-enter .wam-header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.47s; }
.wam-nav-enter .wam-header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(7) { animation-delay: 0.54s; }
.wam-nav-enter .wam-header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+8) { animation-delay: 0.6s; }

@keyframes wam-roll {
  from { opacity: 0; transform: perspective(520px) rotateX(-100deg) translateY(-6px); }
  55% { opacity: 1; }
  to { opacity: 1; transform: perspective(520px) rotateX(0deg) translateY(0); }
}

/* ---------------------------------------------------------------- footer -- */

.wam-footer {
  background: var(--wam-ink);
  color: var(--wam-white);
  font-family: var(--wam-font);
}
.wam-footer .wam-footer-in {
  max-width: 1180px;
  margin-inline: auto;
  padding: 36px 24px;
  gap: 18px;
  align-items: center;
}
.wam-footer .wam-footer-in > * { margin: 0; }
.wam-footer .wam-footer-logo img { width: 80px; height: auto; }
.wam-footer-note { color: var(--wam-faded); font-size: 0.9rem; }
.wam-footer-note a { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.wam-footer-note a:hover { color: var(--wam-white); }
.wam-footer .wp-block-social-links { gap: 10px; margin: 0; }
.wam-footer .wp-social-link {
  background: var(--wam-surface-3) !important;
  color: var(--wam-white) !important;
  transition: transform 0.25s var(--wam-ease), background-color 0.25s ease;
}
.wam-footer .wp-social-link:hover { transform: translateY(-2px); background: var(--wam-blue) !important; }

/* ---------------------------------------------------------------- reveal -- */
/* hub.js adds .wam-reveal only to things still below the fold when the page
   loads, so nothing on screen at load ever blinks out and back in, and with
   the script off everything simply shows. */

.wam-reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.8s var(--wam-ease), translate 0.8s var(--wam-ease);
  transition-delay: calc(var(--wam-i, 0) * 70ms);
}
.wam-reveal.is-in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------- keyframes -- */

@keyframes wam-rise {
  from { opacity: 0; translate: 0 22px; filter: blur(4px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes wam-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes wam-drift {
  to { transform: translate3d(50px, 50px, 0); }
}
@keyframes wam-breathe {
  from { opacity: 0.55; scale: 0.92; }
  to { opacity: 1; scale: 1.06; }
}
@keyframes wam-kenburns {
  from { scale: 1.02; translate: 0 0; }
  to { scale: 1.12; translate: -2% -1%; }
}
@keyframes wam-pulse {
  0% { box-shadow: 0 0 0 0 rgba(252, 185, 0, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(252, 185, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(252, 185, 0, 0); }
}

/* ------------------------------------------------------------ responsive -- */

/* The navigation folds into its menu button well before the theme's 600px:
   six links and a button do not fit a tablet. */
@media (max-width: 1100px) {
  .wam-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .wam-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
  .wam-header .wam-header-cta { margin-left: auto; order: 2; }
  .wam-header .wp-block-navigation { margin-left: 0; order: 3; }
}

@media (max-width: 1020px) {
  .wam-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wam-chronicles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wam-feature { grid-template-columns: minmax(0, 1fr); }
  .wam-feature:nth-child(even) .wam-feature-art { order: 0; }
  .wam-feature-art { min-height: 320px; }
  .wam-feature-art::after,
  .wam-feature:nth-child(even) .wam-feature-art::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), color-mix(in srgb, var(--wam-panel, #630000) 90%, transparent));
  }
}

@media (max-width: 640px) {
  .wam-wrap { padding-inline: 16px; gap: 32px; }
  .wam-header .wam-header-in { padding-inline: 16px; gap: 12px; }
  .wam-header .wam-btn-tabletop .wp-block-button__link { padding: 5px 14px 5px 5px; font-size: 0.74rem; }
  .wam-header .wam-btn-tabletop .wp-block-button__link::before { width: 24px; height: 24px; }
  .wam-tiles { grid-template-columns: minmax(0, 1fr); row-gap: 80px; padding-top: 76px; }
  .wam-chronicles { grid-template-columns: minmax(0, 1fr); }
  .wam-feature-body { padding: 28px 20px; }
  .wam-party { grid-template-columns: minmax(0, 1fr); }
  .wam-footer .wam-footer-in { justify-content: center; text-align: center; }
}

@media (max-width: 380px) {
  .wam-header .wam-btn-tabletop .wp-block-button__link::after { display: none; }
}

/* Anyone who has asked for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .wam-page *, .wam-page *::before, .wam-page *::after,
  .wam-page, .wam-header, .wam-header *, .wam-header *::before, .wam-header *::after,
  .wam-section::before, .wam-section::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .wam-reveal { opacity: 1; translate: none; }
}