/* wr_front.css — the front door (M10.7). The Lull under its real sky, and
   the words laid over it on glass so the country always shows through. */
:root {
  --ink: #070a14; --glass: rgba(8, 11, 24, .74); --glass-hi: rgba(14, 19, 40, .82);
  --rule: rgba(120, 140, 200, .22); --gold: #FBBF24; --gold-2: #FDE68A; --parch: #FFF6E0;
  --parch-2: #D6D0E6; --mute: #9aa0c4; --teal: #67E8F9;
  --pixel: 'Silkscreen', ui-monospace, monospace; --book: 'Alegreya', Georgia, serif;
  --mx: 50vw; --my: 45vh; --wrf-flash: 0; --wrf-night: 0;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { background: var(--ink); scroll-behavior: smooth; }
body.wrf { background: var(--ink); color: var(--parch); font-family: var(--book); font-size: 19px; line-height: 1.62; }
a { color: inherit; }

/* ── the sky ─────────────────────────────────────────────────────── */
#wrf-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wrf-map { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; user-select: none; }
#wrf-blur { filter: blur(7px) saturate(.85) brightness(.62); }
#wrf-spot { filter: saturate(1.08) brightness(1.02);
  -webkit-mask-image: radial-gradient(circle 280px at var(--mx) var(--my), #000 0, rgba(0,0,0,.82) 38%, rgba(0,0,0,.35) 66%, transparent 100%);
          mask-image: radial-gradient(circle 280px at var(--mx) var(--my), #000 0, rgba(0,0,0,.82) 38%, rgba(0,0,0,.35) 66%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
#wrf-full { opacity: 0; transition: opacity .9s ease; filter: saturate(1.05); }
body.wrf-lit #wrf-full { opacity: .92; }
#wrf-wx, #wrf-rain, #wrf-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The rain is in the background like everything else behind the words, so it
   is softened with it (Deploy 29, Oliver 30 Sept: "not properly blurred"). */
#wrf-rain { opacity: .85; }  /* soft because it is drawn at half resolution (Deploy 53), not by a blur redone every frame */
/* Deploy 53: the lamp as a small canvas (wr_front.js), the map's own colour lift on it */
#wrf-spot-c { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; filter: saturate(1.08) brightness(1.02); }
#wrf-tint { position: absolute; inset: 0; mix-blend-mode: multiply; background: #fff; }
#wrf-warm { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: 0;
  background: linear-gradient(180deg, rgba(255,150,70,.9), rgba(255,110,90,.6) 60%, rgba(120,60,140,.5)); }
#wrf-vig { position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 45%, rgba(7,10,20,.55) 78%, rgba(7,10,20,.92) 100%); }
#wrf-dim { position: absolute; inset: 0; background: var(--ink); opacity: .12; transition: opacity .2s linear; }

/* ── the nav ─────────────────────────────────────────────────────── */
.wrf-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 14px 26px;
  background: linear-gradient(180deg, rgba(7,10,20,.82), rgba(7,10,20,0)); transition: background .3s, box-shadow .3s; }
.wrf-nav.solid { background: rgba(7,10,20,.9); box-shadow: 0 1px 0 var(--rule); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wrf-mark { font-family: var(--pixel); font-weight: 700; font-size: 20px; letter-spacing: .12em; color: var(--gold);
  text-decoration: none; text-shadow: 0 0 18px rgba(251,191,36,.45); display: flex; flex-direction: column; line-height: 1.05; }
.wrf-mark small { font-size: 9.5px; letter-spacing: .14em; color: var(--mute); font-weight: 400; text-shadow: none; margin-top: 4px; }
.wrf-links { display: flex; align-items: center; gap: 18px; font-family: var(--pixel); font-size: 12px; letter-spacing: .06em; }
.wrf-links a { text-decoration: none; color: var(--parch-2); }
.wrf-links a:hover { color: var(--gold-2); }
.wrf-nav-go { color: #1f1204 !important; background: var(--gold); padding: 8px 14px; border-radius: 10px;
  box-shadow: 0 0 18px rgba(251,191,36,.35); }

/* ── the copper door ─────────────────────────────────────────────── */
.wrf-portal-btn { position: absolute; z-index: 45; top: 78px; right: 26px; display: flex; align-items: center; gap: 12px;
  text-decoration: none; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: radial-gradient(160px 70px at 20% 50%, rgba(245,158,11,.22), transparent), rgba(12,9,6,.6);
  border: 1px solid rgba(245,158,11,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .25s, border-color .25s, box-shadow .25s; }
.wrf-portal-btn:hover { transform: translateY(-2px) scale(1.02); border-color: rgba(251,191,36,.85);
  box-shadow: 0 0 40px rgba(245,158,11,.35); }
.wrf-portal-btn:hover .wr-portal .swirl { animation-duration: 2.4s; }
.wrf-portal-btn .wr-portal { flex: 0 0 64px; width: 64px; height: 64px; }
.wrf-portal-btn .t b { display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.2rem; color: #FFEBC8; }
.wrf-portal-btn .t small { display: block; font-size: .78rem; color: #d9b98c; letter-spacing: .02em; }

/* ── the hero: bottom left, so the country stays in view ─────────── */
.wrf-hero { position: relative; z-index: 10; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 120px 6vw 9vh; max-width: 760px; }
.wrf-live { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-family: var(--pixel);
  font-size: 11.5px; letter-spacing: .06em; color: var(--parch-2); background: rgba(7,10,20,.55); padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--rule); margin-bottom: 16px; }
.wrf-live b { color: var(--teal); font-weight: 400; }
.wrf-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 10px #4ADE80;
  animation: wrf-pulse 2.2s ease-in-out infinite; }
@keyframes wrf-pulse { 50% { opacity: .35; } }
.wrf-hero h1 { font-family: var(--pixel); font-weight: 700; font-size: clamp(46px, 8vw, 104px); line-height: .95;
  letter-spacing: .06em; margin: 0; color: var(--gold);
  text-shadow: 0 0 calc(30px + var(--wrf-flash) * 30px) rgba(251,191,36,.45), 0 4px 0 #7c2d12, 0 10px 40px rgba(0,0,0,.8); }
.wrf-tag { font-size: clamp(22px, 2.6vw, 30px); font-style: italic; color: #fff; margin: 10px 0 8px;
  text-shadow: 0 2px 18px rgba(0,0,0,.9); }
.wrf-sub { max-width: 34em; color: var(--parch-2); margin: 0 0 22px; text-shadow: 0 2px 14px rgba(0,0,0,.95);
  background: linear-gradient(90deg, rgba(7,10,20,.55), rgba(7,10,20,0)); padding: 4px 0; }
.wrf-sub em { color: var(--gold-2); }
.wrf-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.wrf-go { display: inline-block; text-decoration: none; background: linear-gradient(180deg, var(--gold), #D97706);
  color: #2A1A03; border: 2px solid #FDE68A; border-radius: 12px; padding: 14px 26px; font-family: var(--pixel);
  font-weight: 700; font-size: 16px; letter-spacing: .04em;
  box-shadow: 0 6px 0 #92400E, 0 10px 34px rgba(251,191,36,.4); transition: transform .15s, box-shadow .15s; }
.wrf-go:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #92400E, 0 14px 44px rgba(251,191,36,.55); }
.wrf-go:active { transform: translateY(3px); box-shadow: 0 3px 0 #92400E; }
.wrf-ghost { text-decoration: none; font-family: var(--pixel); font-size: 13px; letter-spacing: .05em; color: var(--parch);
  padding: 12px 18px; border-radius: 12px; border: 1.5px solid rgba(255,246,224,.35); background: rgba(7,10,20,.45); }
.wrf-ghost:hover { border-color: var(--gold-2); color: var(--gold-2); }
.wrf-train { font-family: var(--pixel); font-size: 12px; color: var(--teal); margin: 20px 0 0; letter-spacing: .03em;
  text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.wrf-note { font-size: 14px; font-style: italic; color: var(--mute); margin: 6px 0 0; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.wrf-down { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); text-decoration: none; font-size: 22px;
  color: var(--parch-2); opacity: .7; animation: wrf-bob 2.4s ease-in-out infinite; }
@keyframes wrf-bob { 50% { transform: translate(-50%, 6px); } }

/* ── the sections: glass over the country ────────────────────────── */
.wrf-main { position: relative; z-index: 10; max-width: 980px; margin: 0 auto; padding: 0 22px 40px; }
.wrf-sec { position: relative; margin: 0 0 34px; padding: 30px 32px; border-radius: 20px; background: var(--glass);
  border: 1px solid var(--rule); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 calc(var(--wrf-flash) * 60px) rgba(190,210,255, calc(var(--wrf-flash) * .22));
  overflow: hidden; }
.wrf-sec h2 { font-family: var(--book); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; margin: 0 0 14px; color: #fff; }
.wrf-sec h2 .k { display: block; font-family: var(--pixel); font-size: 11.5px; letter-spacing: .16em; color: var(--sec-c, var(--gold)); margin-bottom: 8px; font-weight: 400; }
.wrf-sec p { color: var(--parch-2); margin: 0 0 14px; }
.wrf-sec p b { color: #fff; }
.wrf-sec .lead { font-size: 21px; color: var(--parch); }

/* the ladder, one swing at every rung, worst first so it reads as it climbs */
.wrf-ladder { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wrf-ladder li { display: flex; align-items: baseline; gap: 14px; padding: 9px 14px; border-radius: 10px;
  border-left: 4px solid var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); }
.wrf-ladder li b { font-family: var(--pixel); font-size: 12.5px; letter-spacing: .06em; color: var(--c); min-width: 150px; font-weight: 700; }
.wrf-ladder li span { color: var(--parch-2); font-size: 16px; line-height: 1.45; }
.wrf-ladder li.top { box-shadow: 0 0 26px color-mix(in srgb, var(--c) 30%, transparent); }

/* the four faces */
.wrf-face-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.wrf-face { position: relative; border-radius: 16px; overflow: hidden; min-height: 250px; padding: 150px 20px 18px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: rgba(7,10,20,.7); }
.wrf-face::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 190px; background: var(--img) center/cover;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent);
  transition: transform 6s ease; }
.wrf-face:hover::before { transform: scale(1.08); }
.wrf-face h3 { position: relative; margin: 0 0 6px; font-family: var(--pixel); font-size: 15px; letter-spacing: .08em; color: var(--c);
  display: flex; align-items: center; gap: 10px; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.wrf-face p { position: relative; margin: 0; font-size: 16px; color: var(--parch-2); }

/* region glyphs, drawn in CSS */
.glyph { display: inline-block; width: 22px; height: 18px; flex: none; background: var(--c);
  -webkit-mask: var(--g) center/contain no-repeat; mask: var(--g) center/contain no-repeat; }
.glyph.crown { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M0 18 7 4l4 7 4-9 9 16z'/%3E%3C/svg%3E"); }
.glyph.mesa  { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M0 18 4 7h16l4 11z M9 7V4h6v3z'/%3E%3C/svg%3E"); }
.glyph.pine  { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M6 0l5 8H8l4 6H7v4H5v-4H0l4-6H1zM18 3l4 6h-2.5l3.5 5h-4v4h-2v-4h-4l3.5-5H14z'/%3E%3C/svg%3E"); }
.glyph.wave  { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M0 8c3-3 5-3 8 0s5 3 8 0 5-3 8 0v4c-3 3-5 3-8 0s-5-3-8 0-5 3-8 0z M0 14c3-2 5-2 8 0s5 2 8 0 5-2 8 0v4H0z'/%3E%3C/svg%3E"); }

/* the four mode sections wear their face */
.wrf-mode { padding-top: 150px; }
.wrf-banner { position: absolute; inset: 0 0 auto 0; height: 220px; background: var(--img) center/cover;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 30%, transparent); mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 30%, transparent);
  opacity: .9; }
.wrf-mode h2, .wrf-mode p, .wrf-mode div:not(.wrf-banner) { position: relative; }
.wrf-mode[data-face="crown"]   { --sec-c: #BFD7FF; border-color: rgba(191,215,255,.3); }
.wrf-mode[data-face="shore"]   { --sec-c: #9EE7F0; border-color: rgba(158,231,240,.3); }
.wrf-mode[data-face="shadow"]  { --sec-c: #9BE3A6; border-color: rgba(155,227,166,.3); }
.wrf-mode[data-face="oldface"] { --sec-c: #F2C38B; border-color: rgba(242,195,139,.3); }
.wrf-mode .warn { border-left: 3px solid #FB7185; padding-left: 14px; }
.wrf-mode .warn b { color: #FB7185; }

.wrf-canon-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.wrf-canon-row.six { margin-top: 8px; } /* (65f) every rung's chance */
.wrf-canon-k { margin: 18px 0 0; font-family: var(--pixel); font-size: 12px; letter-spacing: .06em; color: var(--mute); text-transform: uppercase; }
@media (max-width: 760px) { .wrf-canon-row.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wrf-canon-row div { border-radius: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 9%, rgba(7,10,20,.6)); }
.wrf-canon-row b { display: block; font-family: var(--pixel); font-size: 12px; letter-spacing: .05em; color: var(--c); }
.wrf-canon-row span { display: block; font-size: 22px; color: #fff; margin: 4px 0 2px; }
.wrf-canon-row small { color: var(--mute); font-size: 14px; line-height: 1.35; display: block; }
.wrf-examples p { border-left: 2px solid rgba(242,195,139,.45); padding-left: 14px; font-size: 17px; }

.wrf-alive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 26px; }
.wrf-alive-grid p { font-size: 17px; }
.wrf-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.wrf-stats div { flex: 1 1 150px; border-radius: 12px; padding: 12px 14px; background: rgba(7,10,20,.55); border: 1px solid var(--rule); }
.wrf-stats b { display: block; font-family: var(--pixel); font-size: 22px; color: var(--gold); }
.wrf-stats span { font-size: 14px; color: var(--mute); }

.wrf-latest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 20px; }
.wrf-story { display: flex; flex-direction: column; text-decoration: none; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--rule); background: rgba(7,10,20,.6); padding: 0 0 12px; transition: transform .2s, border-color .2s; }
.wrf-story:hover { transform: translateY(-3px); border-color: rgba(103,232,249,.5); }
.wrf-story .c { display: block; aspect-ratio: 16 / 9; background: center/cover; margin-bottom: 10px; }
.wrf-story b { font-family: var(--book); font-weight: 500; font-size: 18px; color: #fff; padding: 10px 14px 0; line-height: 1.25; }
.wrf-story .c + b { padding-top: 0; }
.wrf-story small { color: var(--mute); font-size: 13px; padding: 2px 14px 0; }
.wrf-story .l { color: var(--parch-2); font-size: 14px; padding: 6px 14px 0; line-height: 1.4; }

.wrf-last { text-align: center; padding: 44px 30px; background: radial-gradient(500px 200px at 50% 100%, rgba(251,191,36,.14), transparent), var(--glass); }
.wrf-slow { font-family: var(--pixel); font-size: 12px; letter-spacing: .14em; color: var(--teal) !important; }
.wrf-last .wrf-btns { justify-content: center; }

.wrf-foot { position: relative; z-index: 10; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 26px 28px 40px; font-size: 14px; color: var(--mute); }
.wrf-foot a { color: var(--parch-2); }
.wrf-credit { opacity: .85; }
body.wrf-has-music .wrf-foot { padding-bottom: 78px; }
/* Deploy 40: the front page's quiet player. */
.wrf-music { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 7px; border-radius: 999px; background: rgba(9,13,34,.78); border: 1px solid rgba(251,191,36,.35);
  backdrop-filter: blur(6px); color: var(--parch-1, #FFF6E0); max-width: calc(100vw - 28px); }
.wrf-music[hidden] { display: none; }
.wrf-mbtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(251,191,36,.6); background: transparent;
  color: #FBBF24; font-size: 16px; cursor: pointer; flex: none; }
.wrf-mbtn.on { background: #FBBF24; color: #0C1230; }
.wrf-mtxt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wrf-mtxt b { font: 600 13px Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.wrf-mtxt span { font: 11px ui-monospace, Menlo, monospace; color: #AEB6E0; }
.wrf-mtxt a { color: #FDE68A; }
.wrf-music input[type=range] { width: 90px; accent-color: #FBBF24; }
@media (max-width: 560px) { .wrf-mtxt b { max-width: 120px; } .wrf-music input[type=range] { width: 64px; } }

/* ── phones ──────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.wrf { font-size: 17px; }
  #wrf-vig { background: linear-gradient(180deg, rgba(7,10,20,.25), transparent 18%, transparent 44%, rgba(7,10,20,.7) 62%, rgba(7,10,20,.96) 80%); }
  #wrf-blur { filter: blur(3px) saturate(.9) brightness(.72); }
  .wrf-nav { padding: 10px 14px; }
  .wrf-mark { font-size: 16px; }
  .wrf-links { gap: 10px; font-size: 10.5px; }
  .wrf-hide-sm { display: none; }
  .wrf-nav-go { padding: 7px 10px; }
  .wrf-portal-btn { top: 62px; right: 12px; padding: 5px 12px 5px 5px; gap: 8px; }
  .wrf-portal-btn .wr-portal { flex-basis: 44px; width: 44px; height: 44px; }
  .wrf-portal-btn .t b { font-size: 1rem; }
  .wrf-portal-btn .t small { display: none; }
  .wrf-hero { padding: 110px 18px 8vh; }
  .wrf-sub { font-size: 17px; }
  .wrf-sec { padding: 22px 18px; border-radius: 16px; }
  .wrf-mode { padding-top: 120px; }
  .wrf-banner { height: 170px; }
  .wrf-face-grid, .wrf-alive-grid, .wrf-latest { grid-template-columns: minmax(0, 1fr); }
  .wrf-canon-row { grid-template-columns: minmax(0, 1fr); }
  .wrf-ladder li b { min-width: 118px; font-size: 11px; }
  .wrf-ladder li span { font-size: 14px; }
  .wrf-sec .lead { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wrf-down, .wrf-live .dot { animation: none; }
  #wrf-full { transition: none; }
}

/* Deploy 28: the canon section sits straight under how it plays */
.wrf-canon .wrf-examples { margin-top: 16px; }
.wrf-examples p { border-left-color: rgba(34,211,238,.45); }

/* pricing, in turns */
.wrf-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 12px; }
.wrf-plan { border-radius: 14px; padding: 16px 16px 14px; border: 1px solid var(--rule); background: rgba(7,10,20,.6);
  display: flex; flex-direction: column; gap: 4px; }
.wrf-plan b { font-family: var(--pixel); font-size: 12.5px; letter-spacing: .06em; color: var(--parch-2); }
.wrf-plan .cost { font-size: 30px; color: #fff; line-height: 1.15; }
.wrf-plan .cost small { font-size: 15px; color: var(--mute); }
.wrf-plan .turns { font-size: 17px; color: var(--parch); }
.wrf-plan .turns strong { color: var(--gold-2); font-size: 20px; }
.wrf-plan > small { color: var(--mute); font-size: 14px; line-height: 1.4; }
.wrf-plan a { margin-top: 8px; align-self: flex-start; font-family: var(--pixel); font-size: 11.5px; letter-spacing: .06em;
  color: #1f1204; background: var(--gold); padding: 7px 12px; border-radius: 9px; text-decoration: none; }
.wrf-plan.pro { border-color: rgba(251,191,36,.45); }
.wrf-plan.pro b { color: var(--gold); }
.wrf-plan.max { border-color: rgba(106,166,232,.5); }
.wrf-plan.max b { color: #8FC1F2; }
.wrf-plan.max a { background: #6aa6e8; color: #06101f; }
.wrf-fine { font-size: 15px; color: var(--mute) !important; }
.wrf-fine a { color: var(--parch-2); }
@media (max-width: 760px) { .wrf-plans { grid-template-columns: minmax(0, 1fr); } }

/* Deploy 33: the story of the week, one card, no portal */
.wrf-sotw-label { font-family: var(--pixel); font-size: 11.5px; letter-spacing: .16em; color: var(--gold); margin: 18px 0 8px; text-transform: uppercase; }
.wrf-sotw { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; text-decoration: none; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(251,191,36,.45); background: rgba(7,10,20,.72); box-shadow: 0 0 22px -8px rgba(251,191,36,.45); transition: transform .2s ease, border-color .2s ease; }
.wrf-sotw:hover { transform: translateY(-2px); border-color: rgba(251,191,36,.8); }
.wrf-sotw .c { background: center/cover; min-height: 150px; }
.wrf-sotw .t { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.wrf-sotw:not(:has(.c)) { grid-template-columns: minmax(0, 1fr); }
.wrf-sotw b { font-family: var(--book); font-weight: 500; font-size: 24px; color: #fff; line-height: 1.2; }
.wrf-sotw small { color: var(--mute); font-size: 14px; }
.wrf-sotw .h { color: #FB7185; }
.wrf-sotw .l { color: var(--parch-2); font-size: 16px; line-height: 1.45; }
.wrf-sotw .go { margin-top: 6px; font-family: var(--pixel); font-size: 11.5px; letter-spacing: .08em; color: var(--gold); }
@media (max-width: 760px) { .wrf-sotw { grid-template-columns: minmax(0, 1fr); } .wrf-sotw .c { min-height: 130px; } }

/* Deploy 43: a legend that outlives you */
.wrf-legend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.wrf-legend-grid article { border-radius: 12px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  background: color-mix(in srgb, var(--c) 7%, rgba(7,10,20,.62)); }
.wrf-legend-grid b { display: block; font-family: var(--pixel); font-size: 12px; letter-spacing: .05em; color: var(--c); margin-bottom: 6px; }
.wrf-legend-grid p { font-size: 16px; line-height: 1.5; margin: 0; }
@media (max-width: 980px) { .wrf-legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wrf-legend-grid { grid-template-columns: minmax(0, 1fr); } }

/* Deploy 49: the line under the big button */
.wrf-already { margin: 10px 0 0; font-size: 15px; color: var(--mute); }
.wrf-already a { color: var(--gold); }

/* ── Deploy 54: the music says when it is waiting for a first click ── */
.wrf-mbtn.held { animation: wrfHeld 1.6s ease-in-out infinite; border-color: #FBBF24; color: #FDE68A; }
@keyframes wrfHeld { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.0); } 50% { box-shadow: 0 0 0 6px rgba(251,191,36,.28); } }
@media (prefers-reduced-motion: reduce) { .wrf-mbtn.held { animation: none; box-shadow: 0 0 0 3px rgba(251,191,36,.3); } }

/* ── Deploy 54: every turn is a film ── */
.wrf-film { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; align-items: start; margin: 22px 0 6px;
  padding: 22px 22px 18px; border-radius: 16px; background: rgba(4, 6, 16, .42); border: 1px solid var(--rule); }
.wrf-film .k { font-family: var(--pixel); font-size: 11.5px; letter-spacing: .16em; color: var(--teal); margin-bottom: 8px; text-transform: uppercase; }
.wrf-film h3 { font-family: var(--book); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: #fff; margin: 0 0 18px; }
.wrf-film-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wrf-film-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.wrf-film-steps .n { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold); font-family: var(--pixel);
  font-size: 13px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.wrf-film-steps li > div { color: var(--parch-2); font-size: 17px; line-height: 1.5; }
.wrf-film-steps b { color: #fff; display: block; margin-bottom: 5px; }
.wrf-film-steps q { display: block; quotes: none; font-family: var(--book); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--parch);
  border-left: 3px solid var(--gold); padding: 2px 0 2px 12px; }
.wrf-film-steps q.w { border-left-color: var(--teal); color: var(--parch-2); }
.wrf-film-steps small { display: block; margin-top: 7px; font-family: var(--pixel); font-size: 11px; letter-spacing: .08em; color: var(--gold); }
.wrf-film-reel { margin: 0; }
.wrf-film-reel .ph { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #070a14;
  border: 3px solid #1F2A57; box-shadow: 0 0 0 1px rgba(251,191,36,.35), 0 18px 50px rgba(0,0,0,.55); }
.wrf-film-reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wrf-film-reel .pp { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(251,191,36,.7);
  background: rgba(7,10,20,.78); color: #FDE68A; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.wrf-film-reel .pp:hover { border-color: #FDE68A; }
.wrf-film-reel figcaption { font-size: 14px; color: var(--mute); margin-top: 10px; line-height: 1.45; }
/* (73e, Ali 8 Oct) the film in both shapes. Wide (16:9, the default on a wide screen): under the words, as wide as the box.
   Tall (9:16, the default on a phone): beside them, as before. The 16:9 / 9:16 buttons switch. */
.wrf-film[data-shape="wide"] { grid-template-columns: minmax(0, 1fr); }
.wrf-film[data-shape="wide"] .wrf-film-reel { max-width: 100%; }
.wrf-film[data-shape="wide"] .wrf-film-reel .ph { aspect-ratio: 16 / 9; border-radius: 14px; }
.wrf-film-fmt { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.wrf-film-fmt button { font-family: var(--pixel); font-size: 11px; letter-spacing: .08em; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(251,191,36,.4); background: rgba(7,10,20,.6); color: var(--mute); }
.wrf-film-fmt button[aria-pressed="true"] { color: #FDE68A; border-color: #FDE68A; background: rgba(251,191,36,.14); }
.wrf-film-fmt button:hover { border-color: #FDE68A; }
.wrf-film-fmt button:focus-visible { outline: 2px solid #FDE68A; outline-offset: 2px; }
.wrf-film-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 26px; margin-top: 18px; }
.wrf-film-points p { font-size: 17px; }
@media (max-width: 860px) {
  .wrf-film { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .wrf-film-reel { max-width: 290px; width: 100%; margin: 0 auto; }
  .wrf-film-points { grid-template-columns: minmax(0, 1fr); }
}
/* (65f sweep) the menu fits a phone: at 375px Sign up ran off the screen */
@media (max-width: 480px) { .wrf-links a[href="#pricing"], .wrf-links a[href="/browse/wyrmrail"] { display: none; } .wrf-links { gap: 9px; } }