/* ==========================================================================
   Ryan Retro — shared styles (Focus cards on the purple grid from the videos)
   ========================================================================== */

:root {
  /* Legacy names used by Tailwind classes on every page */
  --c-bg-rgb: 244 242 250;
  --c-alt-rgb: 242 239 249;
  --c-card-rgb: 255 255 255;
  --c-well-rgb: 236 232 246;
  --c-line-rgb: 226 220 241;
  --c-cardline-rgb: 226 220 241;
  --c-muted-rgb: 108 102 132;
  --c-ink-rgb: 36 31 56;
  --c-accent-rgb: 98 84 164;
  --c-mint-rgb: 22 163 74;
  --c-amber-rgb: 196 120 0;
  --c-rose-rgb: 220 75 75;

  --page: rgb(var(--c-bg-rgb)); --dot: #d6d0e8;
  --card: #ffffff; --card-2: #f2eff9; --line: #e2dcf1;
  --ink: #241f38; --ink-soft: #6c6684; --ink-faint: #a49ebe;
  --acc: #6254a4; --acc-soft: rgba(98,84,164,.11);
  --glass: rgba(255,255,255,.78); --glass-line: rgba(120,105,180,.16);
  --ok: #16a34a; --warn: #e8b93c; --danger: #dc4b4b;
  --sh-sm: 0 1px 2px rgba(50,40,100,.06), 0 4px 14px -6px rgba(50,40,100,.14);
  --sh-md: 0 2px 4px rgba(50,40,100,.08), 0 14px 34px -12px rgba(50,40,100,.26);
  --sh-lg: 0 6px 12px rgba(50,40,100,.10), 0 30px 60px -18px rgba(50,40,100,.38);
  --soft: var(--sh-sm); --soft-hover: var(--sh-md);
  --grid-line: rgba(98,84,164,0.09);
  --sans: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --header-h: 60px;
}
html.dark {
  --c-bg-rgb: 26 27 30;
  --c-alt-rgb: 33 35 39;
  --c-card-rgb: 38 40 45;
  --c-well-rgb: 44 46 51;
  --c-line-rgb: 58 61 68;
  --c-cardline-rgb: 58 61 68;
  --c-muted-rgb: 182 185 194;
  --c-ink-rgb: 236 238 242;
  --c-accent-rgb: 160 148 236;
  --c-mint-rgb: 85 201 142;
  --c-amber-rgb: 255 196 84;
  --c-rose-rgb: 240 117 117;

  --dot: #2c2e33;
  --card: #26282d; --card-2: #212327; --line: #3a3d44;
  --ink: #eceef2; --ink-soft: #b6b9c2; --ink-faint: #83868f;
  --acc: #a094ec; --acc-soft: rgba(155,140,235,.16);
  --glass: rgba(33,35,40,.8); --glass-line: rgba(255,255,255,.08);
  --ok: #55c98e; --danger: #f07575;
  --sh-sm: 0 1px 2px rgba(0,0,0,.3), 0 5px 14px -6px rgba(0,0,0,.4);
  --sh-md: 0 2px 4px rgba(0,0,0,.34), 0 14px 34px -12px rgba(0,0,0,.5);
  --sh-lg: 0 6px 14px rgba(0,0,0,.38), 0 30px 60px -18px rgba(0,0,0,.6);
  --grid-line: rgba(255,255,255,0.05);
}
/* ---------- the purple grid (#6254A4, 2px white lines at 8%, as in the videos) ----------
   /static/grid/grid.js (loaded by rr.js) sets --cell, --C and --ox for the screen:
   a whole-pixel cell and a whole number of columns centred on it. The values
   here are what the page uses for the instant before it runs. */
:root { --grid-bg: #6254a4; --grid-line: rgba(255,255,255,.08); --cell: 34px; --C: 10; --ox: 12px; --gut: 5px; }
@media (min-width: 600px) { :root { --cell: 38px; --C: 16; --ox: calc((100vw - 16 * 38px) / 2); } }
@media (min-width: 760px) { :root { --cell: 40px; --C: 20; --ox: calc((100vw - 20 * 40px) / 2); } }
@media (min-width: 1100px) { :root { --cell: 46px; --C: 28; --ox: calc((100vw - 28 * 46px) / 2); } }
html.dark { --grid-bg: #241d45; --grid-line: rgba(255,255,255,.06); }
html { color-scheme: light; -webkit-text-size-adjust: 100%; background: var(--grid-bg); overflow-y: scroll; }
html.dark { color-scheme: dark; }

body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.4; overflow-x: clip;
  /* lines centred on the cell edges, so a block that starts on an edge sits square on the grid */
  background-color: transparent;
  background-image: linear-gradient(var(--grid-line) 2px, transparent 2px), linear-gradient(90deg, var(--grid-line) 2px, transparent 2px);
  background-size: var(--cell) var(--cell);
  background-position: calc(var(--ox) - 1px) -1px;
}
/* the slow orbiting light from the video background */
body::before {
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.1), rgba(255,255,255,0) 40%);
  animation: rr-orbit 60s linear infinite;
}
@keyframes rr-orbit {
  0% { transform: translate(14%, 0); } 25% { transform: translate(0, 14%); }
  50% { transform: translate(-14%, 0); } 75% { transform: translate(0, -14%); } 100% { transform: translate(14%, 0); }
}
body > * { position: relative; z-index: 1; }
/* older pages paint their own page colour (Tailwind bg-bg / bg-night, or an inline body rule with
   !important); the grid wins on every page */
html body {
  background-color: transparent !important;
  background-image: linear-gradient(var(--grid-line) 2px, transparent 2px), linear-gradient(90deg, var(--grid-line) 2px, transparent 2px) !important;
  background-size: var(--cell) var(--cell) !important;
  background-position: calc(var(--ox) - 1px) -1px !important;
}
::selection { background: var(--acc-soft); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }

.rr-container { width: 100%; max-width: calc(var(--C) * var(--cell)); margin-inline: auto; padding-inline: var(--gut); }
/* older pages use Tailwind's .container: pin it to the same width as the header bar */
.container { max-width: calc(var(--C) * var(--cell)) !important; padding-left: var(--gut) !important; padding-right: var(--gut) !important; }
.page-title { text-align: center; }
.page-title .rr-lead { margin-inline: auto; max-width: 720px; }
.page-title .toolbar { justify-content: center; }
.rr-section { padding-block: 32px 40px; }
.rr-h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #fff; text-align: center; }
.rr-h1 + .rr-lead { text-align: center; margin-inline: auto; max-width: 720px; }
.rr-h2 { font-size: clamp(19px, calc(var(--cell) * .48), 23px); font-weight: 800; letter-spacing: -.4px; color: #fff; }
.rr-lead { font-size: 15px; color: rgba(255,255,255,.78); font-weight: 600; }
.rr-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.rr-section-head .sub { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.62); }
.rr-section-head .rr-more { margin-left: auto; }
/* words that sit straight on the purple grid (older pages mark their title blocks with .on-grid) */
.on-grid, .on-grid .text-ink, .on-grid .text-white, html:not(.dark) .on-grid .text-white { color: #fff !important; }
.on-grid .text-muted { color: rgba(255,255,255,.78) !important; }
.on-grid .text-muted\/70 { color: rgba(255,255,255,.6) !important; }
.on-grid .text-accent { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.on-grid [class*="bg-emerald-500"] { background: rgba(255,255,255,.92) !important; color: #0f7a43 !important; border-color: transparent !important; }
/* written articles and guides: the title block and the contents rail sit on the purple */
body .post-header { border-bottom-color: rgba(255,255,255,.16); }
body .post-header .post-title { color: #fff; }
body .post-header .post-meta, body .post-header .post-meta strong { color: rgba(255,255,255,.72); }
body .post-header .post-tag { background: rgba(255,255,255,.92); }
body .toc:not(:hover):not(.open) .toc-tick { background: #fff; opacity: .55; }
.rr-more { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); text-decoration: none; padding: 4px 10px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-sm); white-space: nowrap; }
.rr-more:hover { color: var(--acc); background: #fff; border-color: #fff; }

/* Buttons */
.rr-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 14px; padding: 12px 18px; font-size: 14px; font-weight: 800; color: #fff; background: var(--acc); box-shadow: var(--sh-md); text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s; }
.rr-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.rr-btn svg, .rr-btn i { width: 16px; height: 16px; }
.rr-btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.rr-btn-ghost:hover { color: var(--acc); background: #fff; border-color: #fff; }
.rr-btn-sm { padding: 8px 12px; font-size: 12.5px; border-radius: 11px; }
.rr-btn-yt { background: #ff0033; }

/* Chips */
.rr-chip { border: 0; border-radius: 99px; padding: 6px 12px; font-size: 12px; font-weight: 800; background: var(--card); color: var(--ink-soft); border: 1px solid var(--line); cursor: pointer; }
/* these sit on the purple grid: hover goes solid white, a see-through purple vanished into the page */
.rr-chip:hover { color: var(--acc); background: #fff; border-color: #fff; }
.rr-chip.on { background: var(--acc); color: #fff; border-color: var(--acc); }
.rr-input-wrap { position: relative; }
.rr-input-wrap > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
.rr-input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; outline: none; }
.rr-input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }

/* ---------- Header: floating glass bar ---------- */
.rr-header { position: sticky; top: 0; z-index: 60; height: calc(var(--cell) * 2); padding: max(0px, calc(var(--cell) - var(--header-h) / 2)) 0 0; pointer-events: none; }
.rr-header-inner { pointer-events: auto; height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 10px 0 12px; border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--glass-line); box-shadow: var(--sh-md); }
.rr-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.rr-logo img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.rr-logo span { font-weight: 800; font-size: 15px; letter-spacing: -.2px; }
.rr-nav { display: none; gap: 2px; padding: 3px; border-radius: 12px; background: var(--acc-soft); justify-self: center; }
@media (min-width: 900px) { .rr-nav { display: flex; } }
.rr-nav a { padding: 6px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); text-decoration: none; transition: background .15s, color .15s; }
.rr-nav a:hover { color: var(--acc); }
.rr-nav a[aria-current="page"] { background: var(--card); color: var(--acc); box-shadow: var(--sh-sm); }
.rr-header-actions { display: flex; align-items: center; gap: 4px; justify-self: end; grid-column: 3; }
.rr-iconbtn { width: 34px; height: 34px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s, transform .15s; text-decoration: none; }
.rr-iconbtn:hover { background: var(--acc-soft); color: var(--acc); transform: scale(1.06); }
.rr-iconbtn svg { width: 18px; height: 18px; }
.rr-header .rr-sub { display: none; }
@media (min-width: 640px) { .rr-header .rr-sub { display: inline-flex; } }
.rr-header .rr-social { display: none; }
@media (min-width: 1100px) { .rr-header .rr-social { display: inline-flex; } }
.rr-menu-btn { display: inline-flex; }
@media (min-width: 900px) { .rr-menu-btn { display: none; } }
.rr-mobile-menu { display: none; pointer-events: auto; margin-top: 8px; border-radius: 18px; background: var(--glass); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--glass-line); box-shadow: var(--sh-md); padding: 10px; }
.rr-mobile-menu.open { display: block; }
.rr-mobile-menu nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.rr-mobile-menu nav a { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-weight: 800; font-size: 13px; color: var(--ink); text-decoration: none; }
.rr-mobile-menu nav a svg { width: 16px; height: 16px; color: var(--acc); }
.rr-mobile-menu nav a[aria-current="page"] { background: var(--acc-soft); color: var(--acc); border-color: transparent; }
.rr-mobile-menu .rr-mobile-social { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 8px; }

/* ---------- Footer ---------- */
.rr-footer { margin-top: auto; padding: var(--cell) 0 calc(var(--cell) * .6); color: var(--ink-soft); font-size: 13px; }
/* one glass strip, the same as the bar across the top */
.rr-footbar { min-height: var(--header-h); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 10px 8px 12px; border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--glass-line); box-shadow: var(--sh-md); }
@media (min-width: 1000px) { .rr-footbar { display: grid; grid-template-columns: 1fr auto 1fr; } .rr-footsoc { justify-self: end; } }
.rr-footnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--acc-soft); }
.rr-footnav a { padding: 6px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); text-decoration: none; transition: background .15s, color .15s; }
.rr-footnav a:hover { color: var(--acc); background: var(--card); box-shadow: var(--sh-sm); }
.rr-footsoc { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.rr-footer > .rr-container { padding-inline: 0; }   /* the strip runs as wide as the bar */
.rr-footer .rr-footnav { flex-direction: row; }       /* the old footer stacked its link lists */
.rr-footfine { margin: 10px 6px 0; text-align: center; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.62); }
.rr-footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .rr-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.rr-footer-brand { grid-column: span 2; }
@media (min-width: 768px) { .rr-footer-brand { grid-column: auto; } }
.rr-footer-brand p { margin-top: 10px; max-width: 300px; font-weight: 600; }
.rr-footer h4 { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.rr-footer nav { display: flex; flex-direction: column; gap: 7px; }
.rr-footer nav a { color: var(--ink-soft); text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.rr-footer nav a:hover { color: var(--acc); }
.rr-footer nav a svg { width: 14px; height: 14px; }
.rr-footer-social { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.rr-footer-social a { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); }
.rr-footer-social a:hover { color: var(--acc); background: var(--acc-soft); }
.rr-footer-social a svg { width: 15px; height: 15px; }
.rr-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-top: 16px; font-size: 12px; font-weight: 600; color: var(--ink-faint); }

/* ---------- Amiibo cards (from /focus) ---------- */
/* as many a row as the homepage: 2 on phones, 4 on small tablets, 5 on tablets, 7 on desktop */
.am-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--gut) * 2); }
@media (min-width: 600px) { .am-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .am-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1100px) { .am-grid { grid-template-columns: repeat(7, 1fr); } }

.am-slot { position: relative; aspect-ratio: 5/7; container-type: inline-size; border-radius: 6.5cqw; perspective: 1600px;
  animation: deal .55s cubic-bezier(.2,.8,.3,1.1) backwards; animation-delay: var(--d, 0s); }
.am-slot.hidden-item { display: none; }
@keyframes deal { from { transform: translateY(60px) scale(.6); opacity: 0; } }
.am-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,.05,.2,1); }
.am-slot.flipped .am-flip { transform: rotateY(180deg); }

.am { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 6.5cqw; overflow: hidden; color: #fff; cursor: pointer; text-decoration: none;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, white) 0%, var(--c) 62%, color-mix(in srgb, var(--c) 82%, black) 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, var(--sh-md); user-select: none; -webkit-user-select: none;
  transition: transform .18s cubic-bezier(.3,.9,.35,1.2), box-shadow .2s; }
.am::before { content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='white'%3E%3Ccircle cx='18' cy='18' r='7'/%3E%3Crect x='46' y='10' width='14' height='14' rx='3'/%3E%3Cpath d='M18 46l4 8h-8z'/%3E%3Cpath d='M53 44l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E");
  background-size: 34cqw 34cqw; }
.am-slot:not(.flipped) .am.front:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, var(--sh-lg); }
.am .num { position: absolute; top: 5cqw; right: 5cqw; width: 16cqw; height: 16cqw; border-radius: 50%; background: #fff; color: var(--c); font-weight: 800; font-size: 7cqw; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.18); z-index: 3; transition: transform .15s, box-shadow .15s; }
.am .num:hover { transform: scale(1.14); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.am .num svg { width: 8cqw; height: 8cqw; }
.am .pin { position: absolute; top: 5cqw; left: 5cqw; height: 12cqw; padding: 0 4cqw; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--c); font-weight: 800; font-size: 5.5cqw; display: flex; align-items: center; gap: 1.5cqw; box-shadow: 0 2px 6px rgba(0,0,0,.18); z-index: 2; white-space: nowrap; }
.am .art { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 20cqw 8cqw 6cqw; }
.am .art img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 5cqw; box-shadow: 0 8px 20px -6px rgba(0,0,0,.45), 0 0 0 2.5cqw rgba(255,255,255,.55); background: #fff; }
.am .art.png { z-index: 2; padding: 0; }
.am .art.png img { position: absolute; left: 3cqw; right: 3cqw; top: 15cqw; bottom: -4cqw; width: auto; height: auto; max-width: calc(100% - 6cqw); max-height: calc(100% - 11cqw); margin: auto auto 0; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; background: transparent; filter: drop-shadow(0 5cqw 7cqw rgba(0,0,0,.35)); }
.am .band { position: relative; background: color-mix(in srgb, var(--c) 60%, #1b1230); padding: 5cqw 6cqw 6cqw; min-height: 34cqw; display: flex; flex-direction: column; justify-content: center; gap: 1.5cqw; }
.am .band::before { content: ''; position: absolute; left: 0; right: 0; top: -7cqw; height: 8cqw; background: inherit; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.am .ttl { font-size: 7.6cqw; font-weight: 800; line-height: 1.15; letter-spacing: -.1px; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.25); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.am .meta { font-size: 5cqw; font-weight: 700; text-align: center; opacity: .85; display: flex; justify-content: center; gap: 3cqw; align-items: center; flex-wrap: wrap; }
.am .meta .dt { background: rgba(255,255,255,.18); border-radius: 99px; padding: .6cqw 3cqw; }
.am .meta .fee { background: #ffd54a; color: #4a3400; border-radius: 99px; padding: .6cqw 3.2cqw; font-size: 5.4cqw; box-shadow: 0 1px 3px rgba(0,0,0,.25); opacity: 1; }

/* landscape devices sit centred in the art area instead of standing on the band */
.am .art.png.wide img { top: 10cqw; bottom: 6cqw; margin: auto; max-height: calc(100% - 16cqw); }

/* code deals on a card: before, after, and the code that gets you there (copies on tap) */
.am .deal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.2cqw 2.4cqw; margin-top: .6cqw; font-weight: 800; }
.am .deal s { font-size: 5.4cqw; opacity: .72; }
.am .deal b { font-size: 7.2cqw; letter-spacing: -.2px; }
.rr-code { display: inline-flex; align-items: center; font-size: 4.7cqw; font-weight: 800; padding: .9cqw 2.8cqw; border-radius: 99px; border: 1.5px dashed rgba(255,255,255,.85); background: rgba(255,255,255,.14); color: #fff; cursor: copy; white-space: nowrap; transition: background .15s, color .15s; }
.rr-code:hover { background: rgba(255,255,255,.3); }
.rr-code.copied { background: #fff; color: var(--c); border-style: solid; }

/* ---------- Wide card (hero, post header) ---------- */
.am-wide { position: relative; overflow: hidden; border-radius: 24px; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, white) 0%, var(--c) 62%, color-mix(in srgb, var(--c) 82%, black) 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, var(--sh-md); }
.am-wide::before { content: ''; position: absolute; inset: 0; opacity: .14; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='white'%3E%3Ccircle cx='18' cy='18' r='7'/%3E%3Crect x='46' y='10' width='14' height='14' rx='3'/%3E%3Cpath d='M18 46l4 8h-8z'/%3E%3Cpath d='M53 44l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E");
  background-size: 110px 110px; }
.am-wide > * { position: relative; }
.am-wide .pin { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--c); font-weight: 800; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.18); white-space: nowrap; text-decoration: none; }
.am-wide .pin.fee { background: #ffd54a; color: #4a3400; }

/* Hero: latest video + section tiles */
.hero-wide { display: grid; gap: 18px; padding: 18px; margin-top: 18px; animation: deal .55s cubic-bezier(.2,.8,.3,1.1) backwards; }
@media (min-width: 820px) { .hero-wide { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 22px; padding: 22px; align-items: stretch; } }
.hw-video { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hw-video .frame { position: relative; display: block; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 8px 20px -6px rgba(0,0,0,.45), 0 0 0 5px rgba(255,255,255,.55); }
.hw-video .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.hw-video .frame:hover img { transform: scale(1.03); }
.hw-video .frame .play { position: absolute; inset: 0; display: grid; place-items: center; }
.hw-video .frame .play svg { width: 64px; height: 64px; padding: 17px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--c); box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); transition: transform .15s; }
.hw-video .frame:hover .play svg { transform: scale(1.08); }
.hw-video .cap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hw-video .cap a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; flex: 1; min-width: 0; }
.hw-video .row { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-video .row a { flex: 1 1 0; justify-content: center; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 12.5px; font-weight: 800; text-decoration: none; transition: background .15s, transform .15s; }
.hw-video .row a:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.hw-video .row a svg { width: 16px; height: 16px; }
.hw-video .row a.yt { background: #ff0033; border-color: #ff0033; }
.hw-video .row a.tt { background: #000; border-color: #000; }
.hw-video .row a.ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); border-color: transparent; }
.hw-video .cap a { color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,.25); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hw-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 820px) { .hw-tiles { grid-template-rows: repeat(3, 1fr); align-self: stretch; } }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 8px 10px; border-radius: 16px; color: #fff; font-weight: 800; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.5px; text-decoration: none; text-align: center;
  border: 2px solid rgba(255,255,255,.65);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, white) 0%, var(--c) 62%, color-mix(in srgb, var(--c) 82%, black) 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, var(--sh-sm); transition: transform .18s cubic-bezier(.3,.9,.35,1.2), box-shadow .2s; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tile::before { content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-size: 60px 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='white'%3E%3Ccircle cx='18' cy='18' r='7'/%3E%3Crect x='46' y='10' width='14' height='14' rx='3'/%3E%3Cpath d='M18 46l4 8h-8z'/%3E%3Cpath d='M53 44l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E"); }
.tile:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, var(--sh-md); }
.tile span { position: relative; text-align: center; line-height: 1.1; }
.tile img { position: relative; flex: 1 1 0; min-height: 0; width: 100%; max-height: 62%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }

/* Post page */
.post { padding: 18px 0 40px; }
.post-head { display: grid; gap: 18px; padding: 24px; }
@media (min-width: 720px) { .post-head { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; padding: 28px; } }
.post-head h1 { margin: 12px 0 0; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.post-head p { margin: 10px 0 0; font-weight: 600; opacity: .9; font-size: 15px; }
.post-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.post-cover { aspect-ratio: 4/3; border-radius: 16px; background: rgba(255,255,255,.14); display: grid; place-items: center; padding: 14px; }
.post-cover img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); border-radius: 8px; }
.post-body > .rr-prose, .post-body.rr-prose > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.post-body { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 4vw, 36px); box-shadow: var(--sh-sm); }

/* Legacy article pages (articles/*.html, guides/*.html) */
.post-wrap { max-width: 1200px !important; padding-left: 24px !important; padding-right: 24px !important; }
.post-wrap .post-header, .post-wrap .post-body, .post-wrap .post-footer, .post-wrap .post-hero { max-width: 860px; margin-left: auto; margin-right: auto; }

/* Prose (markdown output) */
.rr-prose { font-size: 16px; line-height: 1.7; color: var(--ink); }
.rr-prose > :first-child { margin-top: 0; }
.rr-prose h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 36px 0 12px; line-height: 1.2; }
.rr-prose h3 { font-size: 18px; font-weight: 800; margin: 26px 0 8px; }
.rr-prose p { margin: 0 0 16px; }
.rr-prose a { color: var(--acc); font-weight: 700; }
.rr-prose ul, .rr-prose ol { margin: 0 0 16px; padding-left: 22px; }
.rr-prose ul { list-style: disc; }
.rr-prose ol { list-style: decimal; }
.rr-prose li { margin: 4px 0; }
.rr-prose img { display: block; max-width: 100%; height: auto; border-radius: 14px; margin: 18px auto; box-shadow: var(--sh-md); }
.rr-prose blockquote { margin: 18px 0; padding: 12px 16px; border-left: 4px solid var(--acc); background: var(--acc-soft); border-radius: 0 12px 12px 0; font-weight: 600; }
.rr-prose blockquote p { margin: 0; }
.rr-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--card-2); padding: 2px 6px; border-radius: 6px; }
.rr-prose pre { background: #1b1230; color: #f3f1fc; padding: 14px 16px; border-radius: 14px; overflow: auto; margin: 0 0 18px; }
.rr-prose pre code { background: transparent; padding: 0; color: inherit; }
.rr-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.rr-prose th, .rr-prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.rr-prose th { font-weight: 800; color: var(--ink-soft); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.rr-prose hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.rr-embed { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; margin: 18px 0; box-shadow: var(--sh-md); background: #000; }
.rr-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.am-hero { width: min(300px, 70vw); }

/* ---------- Lift & flip overlay (a card picked up and turned over) ---------- */
#rr-flip { position: fixed; inset: 0; z-index: 90; display: none; perspective: 2400px; }
#rr-flip.show { display: block; touch-action: none; }
html.rr-flip-open, html.rr-flip-open body { overflow: hidden; }
#rr-flip .scrim { position: absolute; inset: 0; background: rgba(14,10,36,.5); opacity: 0; transition: opacity .45s; }
#rr-flip.in .scrim { opacity: 1; }
#rr-flip .card { position: absolute; transform-style: preserve-3d; border-radius: 24px; box-shadow: var(--sh-lg);
  transition: top .5s cubic-bezier(.4,.05,.2,1), left .5s cubic-bezier(.4,.05,.2,1), width .5s cubic-bezier(.4,.05,.2,1), height .5s cubic-bezier(.4,.05,.2,1), transform .5s cubic-bezier(.4,.05,.2,1); }
#rr-flip .card.open { transform: rotateY(180deg); }
#rr-flip .face { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, white) 0%, var(--c) 62%, color-mix(in srgb, var(--c) 82%, black) 100%); }
#rr-flip .face.front { container-type: inline-size; pointer-events: none; }
#rr-flip .face.front .am { position: absolute; inset: 0; cursor: default; box-shadow: none; }
#rr-flip .face.front .am:hover { transform: none; }
#rr-flip .face.back { transform: rotateY(180deg); display: flex; flex-direction: column; background: var(--card); color: var(--ink); }
.fb-head { flex: none; background: color-mix(in srgb, var(--c) 60%, #1b1230); color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 6px 24px -10px rgba(0,0,0,.5); z-index: 2; }
.fb-head .num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--c); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .15s; border: 0; }
.fb-head .num:hover { transform: scale(1.1) rotate(-8deg); }
.fb-head .num svg { width: 20px; height: 20px; }
.fb-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.fb-head .pill { flex: none; background: rgba(255,255,255,.18); border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
.fb-head .pill.fee { background: #ffd54a; color: #4a3400; }
.fb-body { flex: 1; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 18px 18px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 640px) { .fb-body { grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 16px; padding: 20px 22px 22px; } }
.fb-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fb-box { background: var(--card-2); border-radius: 16px; padding: 12px 14px; }
.fb-box h4 { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.fb-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 900px) { .fb-specs { grid-template-columns: repeat(3, 1fr); } }
.fb-specs div { background: var(--card); border-radius: 12px; padding: 9px 11px; min-width: 0; }
.fb-specs small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.fb-specs b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-top: 2px; line-height: 1.25; }
.fb-buy { display: flex; flex-direction: column; gap: 6px; }
.fb-buy a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--c); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; box-shadow: var(--sh-sm); transition: transform .15s, filter .15s; }
.fb-buy a:hover { transform: translateY(-1px); filter: brightness(1.08); }
.fb-buy a .price { background: #ffd54a; color: #4a3400; border-radius: 99px; padding: 2px 9px; font-size: 12px; }
.fb-links { display: flex; flex-direction: column; gap: 6px; }
.fb-links a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.fb-links a:hover { color: var(--acc); background: var(--acc-soft); }
.fb-links a svg { width: 16px; height: 16px; color: var(--acc); flex: none; }
.fb-art { position: relative; aspect-ratio: 16/9; border-radius: 14px; background: var(--card-2); overflow: hidden; }
.fb-art img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.25)); }
.fb-video { position: relative; padding: 0; display: block; text-decoration: none; }
.fb-video img { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.fb-video .play { position: absolute; inset: 0; display: grid; place-items: center; }
.fb-video .play svg { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--c); box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); transition: transform .15s; }
.fb-video:hover .play svg { transform: scale(1.08); }
@media (max-width: 640px) { #rr-flip .card { border-radius: 18px; } .fb-head h3 { font-size: 17px; } }

@media (prefers-reduced-motion: reduce) {
  .am-slot { animation: none; }
  .am-flip { transition: none; }
  .am { transition: none; }
  #rr-flip .card, #rr-flip .scrim { transition: none; }
}

/* legacy helpers some pages still use */
.rr-skeleton { background: linear-gradient(90deg, var(--card-2) 25%, var(--line) 50%, var(--card-2) 75%); background-size: 800px 100%; animation: rr-shimmer 1.4s linear infinite; border-radius: 10px; }
@keyframes rr-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.rr-reveal, .reveal { opacity: 1; transform: none; }
.rr-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }