/* sections.css: the homepage below the flight. Loaded after home.css, which keeps every hero
   and flight rule; this file owns Join the Patriot Club, Latest, Become a member, About, The
   Patriot Store, Fuel the fight, Where to watch and follow, the sign-off wordmark and the
   homepage footer.

   Third pass, 2026-10-07 (Brandon: "really basic and not at all good ... no good animations, no
   good font text, no premiumness, simple, bland"). The two earlier passes went quiet; this one is
   deliberately rich. Art direction "Brass and walnut": the rooms the flight walked through,
   continued as a page. Type is a two-voice lockup (a heavy Gloock line, then a Newsreader
   italic line in gold) over Libre Franklin; objects are objects (a struck coin with a rim,
   membership cards in three materials, a felt tray, cream price tags); every section has its
   own composition and its own motion idea (motion.js). Still binding from the earlier reviews:
   no chapter numbers, no eyebrows, no rules; the coin right beside the Join title; one clean
   email control; nothing invented.

   Everything here is the finished, static page: with scripts off, under reduced motion or with
   the footer toggle on, this is what shows. motion.js adds html.lower-motion while it runs and
   writes transforms, opacity and clip-path only. Tokens are from experience.css; the foil,
   walnut and felt shades below are tints of the locked gold, espresso and forest. */

/* 0. Faces (SIL OFL, self-hosted; licence texts beside the files). Declared here, not in
   assets/fonts/fonts.css, because only these sections use them. Latin-1 subsets built with
   fontTools: Gloock Regular; Newsreader Italic instanced at wght 600, opsz 72 (the display cut);
   Libre Franklin with its weight axis cut to 400-700. Fallbacks are metric-matched so the swap
   moves nothing: size-adjust = webfont average [a-z, space] advance / fallback average; ascent
   and descent are the webfont's hhea values divided by size-adjust. Gloock avg 0.5142 em
   (Georgia Bold 0.5721), Newsreader Italic 0.4995 (Georgia Italic 0.5020), Libre Franklin
   0.5176 (Arial 0.4817). */
@font-face {
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/gloock-400.v1.woff2) format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/newsreader-600-italic.v1.woff2) format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/libre-franklin-var.v1.woff2) format("woff2");
}
@font-face {
  font-family: "Gloock Fallback";
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 89.88%;
  ascent-override: 108.48%;
  descent-override: 25.03%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Newsreader Italic Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 99.5%;
  ascent-override: 73.87%;
  descent-override: 26.63%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Libre Franklin Fallback";
  src: local("Arial");
  size-adjust: 107.45%;
  ascent-override: 89.9%;
  descent-override: 22.89%;
  line-gap-override: 0%;
}

/* 1. Tokens for the lower page */
:root {
  --f-poster: "Gloock", "Gloock Fallback", Georgia, serif;          /* titles, prices, 36px and up */
  --f-accent: "Newsreader", "Newsreader Italic Fallback", Georgia, serif; /* with italic 600 */
  --f-serif: var(--font-display);                                   /* decks: Newsreader 400 */
  --f-text: "Libre Franklin", "Libre Franklin Fallback", Arial, sans-serif;

  --poster-xl: clamp(60px, 11.6vw, 188px);
  --poster-l: clamp(46px, 8.4vw, 136px);
  --deck: clamp(20px, 1.75vw, 27px);

  --pad-xl: clamp(96px, 12vw, 192px);
  --pad-l: clamp(80px, 9.5vw, 152px);
  --pad-m: clamp(64px, 7.5vw, 120px);

  --gold-hi: #F4D48A;     /* gold, lit */
  --gold-lo: #B5822B;     /* gold, in shade */
  --walnut-hi: #4A3523;   /* panel, lit */
  --walnut-lo: #20170F;
  --forest-hi: #2A7049;   /* forest, lit (cream on it 5.3:1) */
  --forest-lo: #153F2A;
  --grain: url(assets/grain.png);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Shared pieces */
:is(.club, .latest, .membership, .store, .follow) {
  position: relative;
  --font-body: var(--f-text); /* the shared .button-primary and .text-link pick it up */
  font-family: var(--f-text);
}
:is(.club, .latest, .membership, .store, .follow) .text-link { font-size: 16px; font-weight: 500; letter-spacing: 0.005em; }

/* The poster title: one heavy line, one italic line. Each line sits in a mask (.pl) so
   motion.js can raise it into place; the padding gives descenders and the italic's overhang
   room inside the clip, the negative margin gives the space back. */
.poster {
  margin: 0;
  font: 400 var(--poster-l) / 0.94 var(--f-poster);
  letter-spacing: -0.022em;
  color: var(--ink);
}
.pl { display: block; overflow: clip; padding: 0.05em 0.1em 0.17em; margin: -0.05em -0.1em -0.17em; }
.pl__in { display: block; }
.accent {
  font-family: var(--f-accent); font-style: italic; font-weight: 600;
  font-size: 1.06em; letter-spacing: -0.035em;
  color: var(--gold);
}
.deck {
  margin: 0;
  font: 400 var(--deck) / 1.38 var(--f-serif);
  letter-spacing: -0.012em;
  color: var(--ink-85);
  max-width: 34ch;
  text-wrap: pretty;
}

/* The large gold button: 64px, a light band that crosses it once when it arrives (.is-lit,
   motion.js) and again under a pointer; a fine pointer pulls it a few px (data-magnetic). */
.btn-lg {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 64px; padding: 0 var(--s-6);
  font: 600 17px / 1 var(--f-text); letter-spacing: 0.005em;
  white-space: nowrap;
}
.btn-lg__label { position: relative; z-index: 1; }
.btn-lg::before, .club__submit::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 32%, rgba(255,252,240,.6) 50%, rgba(255,255,255,0) 68%);
  transform: translateX(-130%);
}

/* Nav anchors land with the title about 40px under the nav, not at the top of the padding. */
#latest { scroll-margin-top: calc(var(--s-7) - var(--pad-xl)); }
#membership, #follow { scroll-margin-top: calc(var(--s-7) - var(--pad-l)); }

/* 3. Join the Patriot Club. The lounge render fills the screen; the scrim is dark only where
   the words are (left and foot), so the map, the coin shelves and the lamp stay lit. Title
   bottom-left at the poster size; the 1-year coin sits in the title's row, right beside it,
   sized from the title (1.34em) so the pair scales as one. motion.js pushes the room in with
   the scroll, turns the coin and moves its glint. */
.club {
  isolation: isolate; overflow: clip;
  display: grid; align-items: end;
  min-height: 100vh; min-height: 100svh;
  background: var(--bg-deep); color: var(--ink);
}
.club__room { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.club__bg {
  position: absolute; left: 0; top: -6%;
  width: 100%; height: 112%; max-width: none;
  object-fit: cover; object-position: 30% 44%;
}
.club::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(22,16,11,.94) 0%, rgba(22,16,11,.7) 28%, rgba(22,16,11,.42) 56%, rgba(22,16,11,0) 80%),
    linear-gradient(90deg, rgba(22,16,11,.88) 0%, rgba(22,16,11,.66) 38%, rgba(22,16,11,.12) 72%, rgba(22,16,11,0) 100%),
    linear-gradient(180deg, rgba(22,16,11,.7) 0%, rgba(22,16,11,0) 22%);
}
.club__inner { width: 100%; padding-block: clamp(120px, 18vh, 220px) clamp(64px, 9vh, 112px); }
.club__masthead {
  position: relative;
  display: flex; align-items: center; gap: 0.24em;
  font-size: var(--poster-xl);
}
.club__title { flex: 0 1 auto; min-width: 0; font-size: 1em; line-height: 0.9; }
.club__emblem { position: relative; flex: none; display: block; width: 1.34em; height: 1.34em; }
.club__lead { margin-top: clamp(20px, 2.4vw, 36px); color: var(--ink); }

/* The coin: a shadow on the floor, then a 3D group (turn > tilt) holding four rim discs 3px
   apart and the face. The rim discs follow the coin's own circle inside its square image
   (inset 2.8%); the wings reach past it, as on the real badge. The glint is a soft light bar
   masked to the coin's alpha: at rest it lies off the face. */
.coin3d, .coin3d__turn, .coin3d__tilt, .coin3d__face { position: absolute; inset: 0; display: block; }
.coin3d { perspective: 900px; }
.coin3d__turn, .coin3d__tilt { transform-style: preserve-3d; }
.coin3d__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -13%; height: 24%; display: block;
  background: radial-gradient(closest-side, rgba(8,5,3,.62), rgba(8,5,3,.28) 55%, rgba(8,5,3,0));
}
.coin3d__rim {
  position: absolute; inset: 2.8%; border-radius: 50%; display: block;
  background: linear-gradient(90deg, #7A5618 0%, var(--gold-hi) 28%, var(--gold-lo) 56%, #5E4212 100%);
}
.coin3d__rim:nth-of-type(1) { transform: translateZ(-3px); }
.coin3d__rim:nth-of-type(2) { transform: translateZ(-6px); }
.coin3d__rim:nth-of-type(3) { transform: translateZ(-9px); }
.coin3d__rim:nth-of-type(4) { transform: translateZ(-12px); }
.coin3d__face img { display: block; width: 100%; height: 100%; }
.coin3d__shine {
  position: absolute; inset: 0; display: block; overflow: hidden;
  -webkit-mask: url(assets/badges/w560/04-1-year.webp) center / 100% 100% no-repeat;
  mask: url(assets/badges/w560/04-1-year.webp) center / 100% 100% no-repeat;
}
.coin3d__glint {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; display: block;
  background: linear-gradient(100deg, rgba(255,247,222,0) 0%, rgba(255,247,222,.78) 50%, rgba(255,247,222,0) 100%);
  transform: translateX(-140%) rotate(14deg);
}

/* The form: one control. A dark glass bar over the room (the blur keeps the placeholder
   readable on any frame), the address on the left, the gold button inside its right end.
   Focus lights the whole bar: a gold ring and a brighter fill. The status line is reserved. */
.club__form { margin-top: clamp(24px, 3vw, 40px); max-width: 660px; }
.club__control {
  position: relative;
  display: flex; align-items: center; gap: var(--s-2);
  height: 76px; padding: 0 var(--s-2) 0 var(--s-5);
  border-radius: var(--r-input);
  background: rgba(22,16,11,.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(246,240,230,.2), 0 30px 50px -28px rgba(8,5,3,.8);
  transition: background-color var(--t-state) var(--ease-out), box-shadow var(--t-state) var(--ease-out);
}
.club__control:focus-within { background: rgba(22,16,11,.78); box-shadow: inset 0 0 0 2px var(--gold), 0 30px 50px -28px rgba(8,5,3,.8); }
.club__control input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0; background: transparent; color: var(--ink);
  font: 400 19px / 1.4 var(--f-text); letter-spacing: 0.005em;
}
.club__control input::placeholder { color: var(--ink); opacity: 0.78; }
/* The bar's ring is the focus mark (transparent, not none: forced-colours modes still draw it). */
.club__control input:focus-visible { outline: 2px solid transparent; }
.club__control input[aria-invalid="true"] { color: var(--gold-hi); }
.club__submit {
  position: relative; isolation: isolate; overflow: clip; flex: none;
  gap: var(--s-3); min-height: 60px; height: 60px; padding: 0 var(--s-5);
  font: 600 16px / 1 var(--f-text); letter-spacing: 0.005em;
}
.club__submit-label, .club__submit-short, .club__arrow { position: relative; z-index: 1; }
.club__submit-short { display: none; } /* phones: block 15 */
.club__arrow { display: block; transition: translate var(--t-state) var(--ease-out); }
.club__status { min-height: 1.55em; margin-top: var(--s-3); font: 400 16px / 1.55 var(--f-text); color: var(--ink); }

/* 4. Latest: the deck on a lit stage. The title is set on two staggered lines (the second
   starts a seventh of the way in); motion.js drifts them apart with the scroll. A warm pool
   of light sits behind the centre card (episodes.css draws the deck itself). */
.latest {
  overflow: clip;
  padding-block: var(--pad-xl) clamp(72px, 8vw, 128px);
  background:
    var(--grain) 0 0 / 64px 64px repeat,
    radial-gradient(60% 46% at 50% 58%, #33241A 0%, rgba(51,36,26,0) 100%),
    var(--bg-deep);
}
.latest__title { font-size: var(--poster-l); }
.latest__title .pl + .pl { padding-left: calc(14% + 0.1em); }
.latest__aside {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3) var(--s-6);
  margin-top: clamp(24px, 3vw, 44px);
}
.latest .episodes { margin-top: clamp(32px, 4vw, 56px); }

/* 5. Become a member. Title left, deck and the one action right; then three cards, each a
   different material (walnut, forest enamel, gold), set at a slight fan; then the loyalty
   coins on a forest tray. A card is an object, not a link: the action is the button. Under a
   fine pointer a card tilts and a glare follows the pointer (motion.js writes --mx / --my and
   the transform); on touch the glare crosses each card with the scroll. */
.membership {
  padding-block: var(--pad-l) var(--pad-l);
  background: var(--grain) 0 0 / 64px 64px repeat, var(--bg);
}
.membership__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-6); align-items: end; }
.membership__title { grid-column: 1 / 8; }
.membership__intro { grid-column: 8 / -1; padding-bottom: 0.6em; }
.membership__intro .deck { max-width: 38ch; }
.membership__action { display: grid; gap: var(--s-3); justify-items: start; margin-top: var(--s-6); }
.membership__existing { color: var(--ink); }

.tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(56px, 7vw, 104px);
  perspective: 1400px;
}
.tier {
  --mx: 28%; --my: 6%; --glare: 0.5;
  position: relative; isolation: isolate;
  display: block; min-height: clamp(340px, 31vw, 452px);
  border-radius: 14px;
  color: var(--ink);
  background: var(--grain) 0 0 / 64px 64px repeat, linear-gradient(155deg, var(--walnut-hi) 0%, #2E2116 48%, var(--walnut-lo) 100%);
  box-shadow: 0 44px 60px -36px rgba(8,5,3,.9), 0 16px 28px -18px rgba(8,5,3,.7);
  --foil-1: #6A4A22; --foil-2: #E7C27A; --foil-3: #8A6230;
}
/* The fan is written as a transform, not as rotate/translate: GSAP animates these cards and
   folds individual transform properties into its own inline transform. */
.tier:nth-child(1) { transform: translateY(12px) rotate(-2deg); }
.tier:nth-child(3) { transform: translateY(12px) rotate(2deg); }
.tier--super {
  background: var(--grain) 0 0 / 64px 64px repeat, linear-gradient(155deg, var(--forest-hi) 0%, var(--forest) 46%, var(--forest-lo) 100%);
  --foil-1: #8A6420; --foil-2: var(--gold-hi); --foil-3: var(--gold-lo);
}
.tier--cabinet {
  color: var(--gold-ink);
  background: linear-gradient(155deg, var(--gold-hi) 0%, var(--gold) 42%, var(--gold-lo) 100%);
  --foil-1: #FFF3CF; --foil-2: #FFFFFF; --foil-3: #C99A3F;
}
/* The foil edge: a 2px ring whose light turns with the pointer (--foil, degrees). */
.tier::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: 2px; border-radius: inherit;
  background: conic-gradient(from calc(var(--foil, 0) * 1deg + 200deg), var(--foil-1), var(--foil-2) 12%, var(--foil-3) 28%, var(--foil-1) 46%, var(--foil-2) 62%, var(--foil-3) 80%, var(--foil-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tier__sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block;
  border-radius: inherit;
  background: radial-gradient(70% 70% at var(--mx) var(--my), rgba(255,246,222,.3) 0%, rgba(255,246,222,.08) 42%, rgba(255,246,222,0) 68%);
  opacity: var(--glare);
}
.tier--cabinet .tier__sheen { background: radial-gradient(70% 70% at var(--mx) var(--my), rgba(255,255,255,.7) 0%, rgba(255,255,255,.18) 42%, rgba(255,255,255,0) 68%); }
.tier__body { position: relative; z-index: 3; display: grid; grid-template-rows: auto 1fr auto; box-sizing: border-box; height: 100%; min-height: inherit; padding: clamp(22px, 2.4vw, 36px); }
.tier__name { display: block; max-width: min(6.2em, calc(100% - 58px)); font: 400 clamp(36px, 3.3vw, 50px) / 1 var(--f-poster); letter-spacing: -0.018em; } /* clear of the flag mark */
.tier__perks { display: block; align-self: end; max-width: 16em; margin-bottom: var(--s-5); font: 500 17px / 1.45 var(--f-text); }
.tier__price { display: block; font: 400 clamp(64px, 7.4vw, 118px) / 0.86 var(--f-poster); letter-spacing: -0.035em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.tier__per { margin-left: 0.6em; font: 500 16px / 1 var(--f-text); letter-spacing: 0.01em; font-variant-numeric: normal; }
.tier__mark { position: absolute; z-index: 3; top: clamp(24px, 2.6vw, 40px); right: clamp(22px, 2.4vw, 36px); width: 46px; height: auto; border-radius: 2px; box-shadow: 0 4px 10px -4px rgba(8,5,3,.6); }

/* The tray: forest felt, lit from above, the seven loyalty coins in a row with their names.
   Each coin has its own shadow on the felt (the li's ::before), so the coin can flip in
   (motion.js, rotationY) and lift under a pointer without dragging the shadow with it. */
.vault {
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(24px, 3vw, 44px) clamp(16px, 3vw, 48px) clamp(24px, 2.8vw, 40px);
  border-radius: 14px;
  background:
    var(--grain) 0 0 / 64px 64px repeat,
    radial-gradient(120% 150% at 50% -10%, var(--forest-hi) 0%, var(--forest) 42%, var(--forest-lo) 100%);
  box-shadow: inset 0 26px 40px -30px rgba(8,5,3,.75), inset 0 -2px 0 rgba(255,255,255,.05), 0 30px 50px -36px rgba(8,5,3,.9);
}
.vault__label { margin: 0; font: italic 600 clamp(22px, 2.1vw, 32px) / 1.15 var(--f-accent); letter-spacing: -0.02em; color: var(--ink); }
.coins { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-3); margin-top: clamp(20px, 2.4vw, 32px); perspective: 1200px; }
.coins li { position: relative; display: grid; justify-items: center; gap: var(--s-4); text-align: center; }
.coins li::before {
  content: ""; position: absolute; top: calc(clamp(60px, 8.4vw, 124px) * 0.86); left: 50%;
  width: calc(clamp(60px, 8.4vw, 124px) * 0.9); height: calc(clamp(60px, 8.4vw, 124px) * 0.26);
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(8,5,3,.6), rgba(8,5,3,0));
}
.coin { position: relative; display: block; width: clamp(60px, 8.4vw, 124px); aspect-ratio: 1; }
.coin img { display: block; width: 100%; height: 100%; }
.coin__label { font: 500 15px / 1.3 var(--f-text); letter-spacing: 0.005em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 7. The Patriot Store. Here, the plain form: the store room behind, then a row that scrolls
   sideways (the title panel, three tall tiles, the link panel) with scroll-snap; phones and
   motion-off keep this. On wide screens with motion on, motion.js adds html.lower-motion and
   the section becomes a pinned rail (block 12): the frame sticks for one screen while the row
   travels sideways with the scroll. A tile is one link: the picture (116% wide, so it can
   drift inside its frame), the name set large across its foot, the price on a cream tag. */
.store {
  --tile-w: min(74vw, 400px);
  --rail-gap: clamp(20px, 2.6vw, 44px);
  --rail-pad: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
  isolation: isolate; overflow: clip;
  background: var(--bg-deep);
}
.store__pin { position: relative; padding-block: var(--pad-l) var(--pad-m); }
.store__room { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.store__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; }
.store__room::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg-deep) 0%, rgba(22,16,11,.3) 22%, rgba(22,16,11,.3) 72%, var(--bg-deep) 100%),
    linear-gradient(90deg, rgba(22,16,11,.86) 0%, rgba(22,16,11,.56) 44%, rgba(22,16,11,.3) 100%);
}
.store__rail {
  display: flex; align-items: center; gap: var(--rail-gap);
  padding-inline: var(--rail-pad);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad);
  scrollbar-width: none;
}
.store__rail::-webkit-scrollbar { display: none; }
.store__intro { flex: none; width: min(78vw, 640px); scroll-snap-align: start; }
.store__title { font-size: var(--poster-l); }
.store__lead { margin-top: clamp(20px, 2.4vw, 36px); color: var(--ink); }
.tile { position: relative; flex: none; display: block; width: var(--tile-w); color: var(--ink); scroll-snap-align: center; }
.tile__media {
  position: relative; display: block; overflow: clip;
  aspect-ratio: 4 / 5; border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 50px 70px -44px rgba(8,5,3,.95), 0 18px 30px -20px rgba(8,5,3,.7);
}
.tile__img { position: absolute; top: 0; left: -8%; width: 116%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; }
.tile__img--alt { opacity: 0; }
.tile__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(22,16,11,.9) 0%, rgba(22,16,11,.5) 22%, rgba(22,16,11,0) 46%);
}
.tile__caption { position: absolute; left: clamp(16px, 1.8vw, 26px); right: clamp(16px, 1.8vw, 26px); bottom: clamp(16px, 1.8vw, 24px); z-index: 1; display: grid; gap: 6px; }
.tile__name { font: 400 clamp(32px, 3.2vw, 48px) / 0.98 var(--f-poster); letter-spacing: -0.018em; text-wrap: balance; }
.tile__collection { font: 500 15px / 1.4 var(--f-text); letter-spacing: 0.005em; color: var(--ink); }
/* The tag: cream, a pointed end with a punched hole, hung at a slight angle from the corner. */
.tile__tag {
  position: absolute; top: clamp(14px, 1.6vw, 22px); right: -8px; z-index: 2;
  transform: rotate(5deg); transform-origin: 100% 50%;
  filter: drop-shadow(0 10px 10px rgba(8,5,3,.5));
}
.tile__price {
  display: block; padding: 9px 16px 10px 34px;
  background: radial-gradient(circle at 17px 50%, var(--bg-deep) 0 3.5px, rgba(22,16,11,0) 4.5px), var(--ink);
  -webkit-clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
  color: var(--gold-ink);
  font: 400 clamp(26px, 2.2vw, 34px) / 1 var(--f-poster); letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums;
}
/* The last panel: the link at the headline size beside a gold disc, the disclosure under it,
   on dark glass so the small print reads over the lit side of the room. */
.store__foot {
  flex: none; width: min(80vw, 460px); display: grid; gap: var(--s-5); justify-items: start; scroll-snap-align: end;
  padding: clamp(20px, 2.4vw, 36px); border-radius: 10px;
  background: rgba(22,16,11,.66);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 40px 60px -40px rgba(8,5,3,.9);
}
.store__link { display: inline-flex; align-items: center; gap: var(--s-5); min-height: 76px; color: var(--ink); }
.store__link-label { max-width: 6.4em; font: 400 clamp(40px, 4.4vw, 68px) / 0.98 var(--f-poster); letter-spacing: -0.02em; }
.store__link-go {
  flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  transition: background-color var(--t-state) var(--ease-out), translate var(--t-layout) var(--ease-out);
}
.store__disclosure { max-width: 40ch; font: 400 14px / 1.5 var(--f-text); letter-spacing: 0.005em; color: var(--ink-85); }

/* 9. Where to watch and follow. Six rows, each one link: mark, name, handle, then the action
   as a pill. The names sit at list size (Brandon, 2026-10-08: the rows a little smaller). Under a pointer or focus the row
   fills with cream from the left and the pill turns gold; the other rows step back. */
.follow {
  padding-block: var(--pad-l) var(--pad-m);
  background: var(--grain) 0 0 / 64px 64px repeat, var(--bg-deep);
}
.follow__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-5); align-items: end; }
.follow__title { grid-column: 1 / 9; }
.follow__lead { grid-column: 9 / -1; padding-bottom: 0.6em; }
.follow__list { --row-pad: clamp(12px, 1.6vw, 22px); display: grid; margin-top: clamp(32px, 4vw, 56px); }
.follow__row {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: clamp(16px, 2.4vw, 40px);
  margin-inline: calc(-1 * var(--row-pad)); padding: clamp(12px, 1.1vw, 16px) var(--row-pad);
  border-radius: 6px;
  color: var(--ink);
  transition: color var(--t-state) var(--ease-out), opacity var(--t-state) var(--ease-out);
}
.follow__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
}
.follow__icon { width: clamp(22px, 2vw, 28px); height: clamp(22px, 2vw, 28px); }
.follow__name { font: 400 clamp(30px, 3.9vw, 58px) / 1.05 var(--f-poster); letter-spacing: -0.018em; white-space: nowrap; }
.follow__handle { font: 400 clamp(16px, 1.3vw, 19px) / 1.3 var(--f-serif); letter-spacing: -0.005em; color: var(--ink-85); white-space: nowrap; transition: color var(--t-state) var(--ease-out); }
.follow__go {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 104px; height: 46px; padding: 0 var(--s-5); border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font: 600 16px / 1 var(--f-text); letter-spacing: 0.005em;
  transition: background-color var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out), box-shadow var(--t-state) var(--ease-out);
}
.follow__row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 11. Hover and focus, only where a pointer can hover. Colour and light change for everyone;
   movement is opt-in below. */
@media (hover: hover) {
  .club__control:hover { box-shadow: inset 0 0 0 1px rgba(246,240,230,.42), 0 30px 50px -28px rgba(8,5,3,.8); }
  .club__control:focus-within:hover { box-shadow: inset 0 0 0 2px var(--gold), 0 30px 50px -28px rgba(8,5,3,.8); }
  .follow__row:hover, .follow__row:focus-visible { color: var(--gold-ink); }
  .follow__row:hover::before, .follow__row:focus-visible::before { transform: scaleX(1); }
  .follow__row:hover .follow__handle, .follow__row:focus-visible .follow__handle { color: var(--gold-ink); }
  .follow__row:hover .follow__go, .follow__row:focus-visible .follow__go { background: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-ink); }
  .follow__list:hover .follow__row:not(:hover) { opacity: 0.45; }
  .store__link:hover .store__link-go { background: var(--ink); }
  .tile:hover .tile__img--alt, .tile:focus-visible .tile__img--alt { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .tile__img--alt { transition: opacity var(--t-crossfade) var(--ease-out); }
}
/* Without a hovering pointer the second frame is never shown, so it is never laid out and its
   lazy image is never fetched (the full galleries are on the store pages). */
@media not ((hover: hover) and (pointer: fine)) {
  .tile__img--alt { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .follow__row::before { transition: transform 520ms var(--ease-expo); }
  html:not(.motion-paused) .follow__name { transition: translate 520ms var(--ease-expo); }
  html:not(.motion-paused) :is(.btn-lg, .club__submit).is-lit::before { animation: band-pass 900ms 200ms var(--ease-in-out) both; }
  @keyframes band-pass { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .follow__row:hover .follow__name { translate: 0.12em 0; }
  html:not(.motion-paused) .club__submit:hover .club__arrow { translate: 4px 0; }
  html:not(.motion-paused) .store__link:hover .store__link-go { translate: 6px 0; }
  html:not(.motion-paused) :is(.btn-lg, .club__submit):hover::before { animation: band-pass 700ms var(--ease-in-out) both; }
  html:not(.motion-paused) .coin { transition: transform var(--t-layout) var(--ease-out); }
  html:not(.motion-paused) .coins li::before { transition: opacity var(--t-layout) var(--ease-out), scale var(--t-layout) var(--ease-out); }
  html:not(.motion-paused) .coins li:hover .coin { transform: translateY(-8px); }
  html:not(.motion-paused) .coins li:hover::before { opacity: 0.6; scale: 0.86; }
  html:not(.motion-paused) .tile__tag { transition: transform var(--t-layout) var(--ease-out); }
  html:not(.motion-paused) .tile:hover .tile__tag { transform: rotate(-3deg); }
}

/* 12. The pinned rail (wide screens, motion on; motion.js adds html.lower-motion once GSAP is
   in and sets --rail-travel to the row's overflow). The section is one screen plus that
   distance tall; the frame sticks; the row is laid out at its full width and moved with a
   transform. The tiles take their height from the screen. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.lower-motion:not(.motion-paused) .store { --tile-w: calc(min(66vh, 640px) * 0.8); height: calc(100vh + var(--rail-travel, 0px)); }
  html.lower-motion:not(.motion-paused) .store__pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; padding-block: 0; overflow: clip; }
  html.lower-motion:not(.motion-paused) .store__rail { width: max-content; overflow: visible; scroll-snap-type: none; padding-right: calc(var(--rail-pad) + 4vw); }
  html.lower-motion:not(.motion-paused) .store__intro { width: min(44vw, 620px); }
  html.lower-motion:not(.motion-paused) .store__foot { width: min(40vw, 560px); margin-left: 2vw; }
  @supports (height: 1svh) {
    html.lower-motion:not(.motion-paused) .store { --tile-w: calc(min(66svh, 640px) * 0.8); height: calc(100svh + var(--rail-travel, 0px)); }
    html.lower-motion:not(.motion-paused) .store__pin { height: 100svh; }
  }
}
/* Phones without the pinned rail (motion.js not in yet, or a phone on its side) swipe the row;
   where the platform has scroll-driven animations the pictures drift inside their frames as
   the row moves, with no script. With motion.js in, phones get the pinned rail too
   (html.phone-rail, block 15), and it then owns the pictures. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    html:not(.motion-paused):not(.phone-rail) .store .tile__img {
      animation: tile-drift linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% exit 100%;
    }
  }
  @keyframes tile-drift { from { transform: translateX(6%); } to { transform: translateX(-6%); } }
}

/* 13. Tablets and phones. */
@media (max-width: 1100px) {
  .tier__price { font-size: clamp(56px, 6.6vw, 96px); }
}
@media (max-width: 900px) {
  .membership__title, .membership__intro, .follow__title, .follow__lead { grid-column: 1 / -1; }
  .membership__intro, .follow__lead { padding-bottom: 0; }
  .tiers { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); max-width: 560px; }
  .tier { min-height: 0; aspect-ratio: 1.6 / 1; }
  .tier:nth-child(1) { transform: rotate(-1.2deg); }
  .tier:nth-child(2) { transform: rotate(0.8deg); }
  .tier:nth-child(3) { transform: rotate(-0.8deg); }
  .tier__body { min-height: 0; grid-template-rows: auto auto 1fr; }
  .tier__perks { align-self: start; margin: var(--s-2) 0 0; }
  .tier__price { align-self: end; font-size: clamp(56px, 15vw, 88px); }
  .coins { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-5); }
  .coins li::before, .coin { --c: clamp(60px, 17vw, 96px); }
  .coin { width: var(--c); }
  .coins li::before { top: calc(var(--c) * 0.86); width: calc(var(--c) * 0.9); height: calc(var(--c) * 0.26); }
  .store__intro { width: min(68vw, 520px); } /* the first tile shows a good third of itself: the row reads as a row */
  .latest__title .pl + .pl { padding-left: calc(8% + 0.1em); }
  .follow__row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; }
  .follow__icon { grid-row: 1 / span 2; align-self: center; }
  .follow__name { grid-column: 2; }
  .follow__handle { grid-column: 2; grid-row: 2; }
  .follow__go { grid-column: 3; grid-row: 1 / span 2; min-width: 96px; }
}
@media (max-width: 600px) {
  :root { --poster-l: clamp(44px, 13.4vw, 64px); }
  /* The title two lines at the phone size; the coin sits on the first line, right beside
     "Join the" (never above the title, never under it). */
  .club__masthead { display: block; font-size: clamp(46px, 15vw, 68px); }
  .club__emblem { position: absolute; top: -0.26em; left: 3.66em; width: 1.5em; height: 1.5em; }
  .club__inner { padding-bottom: var(--s-8); }
  .club__bg { object-position: 36% 50%; }
  .club::before {
    background:
      linear-gradient(0deg, rgba(22,16,11,.96) 0%, rgba(22,16,11,.88) 40%, rgba(22,16,11,.62) 60%, rgba(22,16,11,0) 84%),
      linear-gradient(180deg, rgba(22,16,11,.7) 0%, rgba(22,16,11,0) 20%);
  }
  .club__control { height: 68px; padding-left: var(--s-4); }
  .club__control input { font-size: 18px; }
  .club__submit { width: 56px; min-height: 56px; height: 56px; padding: 0; }
  .club__submit-label { display: none; }
  .btn-lg { width: 100%; padding-inline: var(--s-4); }
  .tier__name { font-size: clamp(30px, 8.6vw, 36px); max-width: calc(100% - 52px); }
  .btn-lg { white-space: normal; text-align: center; line-height: 1.2; }
  .tier__perks { font-size: 16px; }
  .tier__mark { width: 38px; }
  .follow__name { font-size: clamp(22px, 6.4vw, 30px); }
  .follow__handle { font-size: 16px; }
  .follow__go { min-width: 80px; height: 44px; padding: 0 var(--s-4); font-size: 15px; }
  .store__foot { width: min(84vw, 460px); }
  .store__link { gap: var(--s-4); }
  .store__link-label { font-size: clamp(30px, 8.6vw, 36px); }
  .store__link-go { width: 64px; height: 64px; }
}

/* 14. The footer (homepage): one row on the deepest tone, set in the text face. Full-bleed,
   its content on the page width. experience.css keeps the hairline footer for the other
   pages; the markup is the shared shell and is not changed here. */
.footer {
  position: relative;
  max-width: none;
  padding: var(--s-6) max(var(--gutter), calc((100% - var(--page-max)) / 2)) max(var(--s-7), env(safe-area-inset-bottom));
  border-top: 0;
  background: var(--grain) 0 0 / 64px 64px repeat, var(--bg-deep);
  font: 500 14px / 1.4 var(--f-text); letter-spacing: 0.01em;
  color: var(--ink-85);
}
.footer a, .footer button { color: var(--ink-85); }

/* 15. Phones and touch (2026-10-08; Brandon: "the motion design is not at all optimized and
   not at all crisp and clear for mobile ... everything needs to be working for the mobile
   version too"). The desktop page is frozen: nothing in this block applies at 901px and up
   with a mouse. A phone has no pointer, so every pointer effect of blocks 3 to 11 is given
   again as something the scroll drives or something a finger can hold (motion.js):

     15.1  any touch screen: the Join coin can be spun, the loyalty coins turn over on a tap,
           and every control has a pressed state of its own (the tap highlight is off);
     15.2  900px and under: thumb sizes, the membership cards as a swipe carousel, the
           pinned store rail, larger rows;
     15.3  600px and under: the phone compositions.

   Still only transform, opacity and clip-path move. Large glass surfaces lose their backdrop
   blur on phones (it re-blurs every frame something moves beneath it). Heights are svh. */

/* 15.1 Touch. */
@media (hover: none), (pointer: coarse) {
  /* The coin is an object: a sideways drag turns it (motion.js), vertical pans stay with
     the page. Its target is the coin plus 14px all round. */
  .coin3d { touch-action: pan-y; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .coin3d::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
  .coin3d img { pointer-events: none; -webkit-user-drag: none; }
  /* Its reverse (motion.js adds it with the spin): the same strike, facing the other way,
     behind the four rim discs. */
  .coin3d.has-back .coin3d__face, .coin3d__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .coin3d__back { position: absolute; inset: 0; display: block; transform: translateZ(-15px) rotateY(180deg); }
  .coin3d__back img { display: block; width: 100%; height: 100%; }
  /* Its edge: a 15px band standing across the coin's thickness, so the coin is still there
     when it is edge-on to the reader (the rim discs alone are then four hairlines). */
  .coin3d__edge {
    position: absolute; top: 2.8%; bottom: 2.8%; left: 50%; width: 15px; margin-left: -7.5px; display: block;
    border-radius: 2px;
    background: linear-gradient(180deg, #7A5618 0%, var(--gold-hi) 20%, var(--gold) 46%, var(--gold-lo) 74%, #5E4212 100%);
    transform: translateZ(-7.5px) rotateY(90deg);
  }
  .coin3d__glint--spin { opacity: 0; }
  .coins li { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }

  /* Pressed states. A tap is about 80ms, shorter than a wipe or a light band, so motion.js
     holds .is-pressed for the length of the animation (rows wait 70ms first, as native
     lists do, so a scroll that starts on a row does not light it). With motion off the
     same states are :active, at once. */
  .follow__row.is-pressed { color: var(--gold-ink); }
  .follow__row.is-pressed::before { transform: scaleX(1); }
  .follow__row.is-pressed .follow__handle { color: var(--gold-ink); }
  .follow__row.is-pressed .follow__go { background: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-ink); }
  .store__link.is-pressed .store__link-go, .store__link:active .store__link-go { background: var(--ink); }
  .episodes__button:not([aria-disabled="true"]):active { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }
  :is(.club, .latest, .membership, .store, .follow) .text-link:active { text-decoration-color: currentColor; }
  .footer a:active, .footer button:not([aria-disabled="true"]):active { color: var(--ink); }
  :is(.btn-lg, .club__submit).is-pressed { scale: 0.97; }
  .motion-paused :is(.btn-lg, .club__submit).is-pressed { scale: 1; }
  .motion-paused .follow__row:active { color: var(--gold-ink); }
  .motion-paused .follow__row:active::before { transform: scaleX(1); }
  .motion-paused .follow__row:active .follow__handle { color: var(--gold-ink); }
  .motion-paused .follow__row:active .follow__go { background: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-ink); }
}
@media (hover: none) and (prefers-reduced-motion: reduce), (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .follow__row:active { color: var(--gold-ink); }
  .follow__row:active::before { transform: scaleX(1); }
  .follow__row:active .follow__handle { color: var(--gold-ink); }
  .follow__row:active .follow__go { background: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-ink); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference), (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  /* The light band on a press and on arrival (.is-shine, held by motion.js for one pass; a
     keyframe name of its own, so it starts whatever ran before). */
  html:not(.motion-paused) :is(.btn-lg, .club__submit).is-shine::before { animation: band-press 720ms var(--ease-in-out) both; }
  @keyframes band-press { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
  html:not(.motion-paused) .follow__row::before { transition-duration: 380ms; }
  html:not(.motion-paused) .follow__row.is-pressed .follow__name { translate: 0.12em 0; }
  html:not(.motion-paused) .store__link.is-pressed .store__link-go { translate: 6px 0; }
  html:not(.motion-paused) .tile__tag { transition: transform var(--t-layout) var(--ease-out); }
  html:not(.motion-paused) .tile.is-pressed .tile__tag { transform: rotate(-3deg); }
  html:not(.motion-paused) .tile__media { transition: scale var(--t-layout) var(--ease-out); }
  html:not(.motion-paused) .tile.is-pressed .tile__media { scale: 0.985; }
  /* Sending: the arrow leaves to the right and a new one arrives from the left, once. */
  html:not(.motion-paused) .club__submit.is-sent .club__arrow { animation: arrow-send 620ms var(--ease-in-out) both; }
  @keyframes arrow-send {
    0% { transform: translateX(0); opacity: 1; }
    44% { transform: translateX(26px); opacity: 0; }
    45% { transform: translateX(-26px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
  }
}

/* 15.2 Tablets in portrait and phones. */
@media (max-width: 900px) {
  /* The notch in landscape: the gutters never sit under it. */
  :is(.club, .latest, .membership, .follow) .page-width {
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }
  .store { --rail-pad: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); }
  .footer { padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
  /* Reading sizes and thumb sizes. */
  :is(.club, .latest, .membership, .store, .follow) .text-link { min-height: 48px; padding-block: 12px; font-size: 17px; }
  .tier__perks { font-size: 17px; }
  .coin__label { font-size: 16.5px; }
  .tile__collection { font-size: 16.5px; }
  .store__disclosure { font-size: 15px; }
  .footer { font-size: 16.5px; }
  .footer a, .footer button { min-width: 48px; min-height: 48px; }
  .footer a[href^="https://x.com/"] { margin-inline: -19px; }

  /* No backdrop blur on the two large glass surfaces: solid espresso instead. */
  .club__control { background: rgba(22,16,11,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .club__control:focus-within { background: rgba(22,16,11,.96); }
  .store__foot { background: rgba(22,16,11,.88); -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Membership on a touch screen: the three cards as a swipe carousel (a narrow desktop window
     with a mouse keeps the stacked cards of block 13: a mouse cannot swipe a row). One tall
     card in the middle of the screen, its neighbours peeking; the browser's own scroll-snap
     does the tracking, the momentum and the settling, so it feels like the phone and never
     traps the page. motion.js reads the row's scrollLeft and turns each card toward the centre
     as it arrives, sweeps the glare across it (a fixed gradient on an oversized layer, moved
     with a transform) and cross-fades its foil edge to a second ring; a page scroll moves the
     glare up the card. Without script: the same row, flat. */
  @media (hover: none), (pointer: coarse) {
    .tiers {
      --tier-w: min(78vw, 340px);
      --tier-gap: 14px;
      position: relative; /* the cards' offsetParent: motion.js measures their centres in the row's own coordinates */
      display: flex; gap: var(--tier-gap);
      max-width: none; perspective: none;
      margin: clamp(28px, 6vw, 48px) calc(-1 * var(--gutter)) 0;
      /* the padding centres the first and the last card and leaves room for the tilt and the cast shadow */
      padding: 22px calc((100vw - var(--tier-w)) / 2) 64px;
      overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-tap-highlight-color: transparent;
    }
    .tiers::-webkit-scrollbar { display: none; }
    .tier, .tier:nth-child(1), .tier:nth-child(2), .tier:nth-child(3) { transform: none; }
    .tier {
      flex: none; width: var(--tier-w); min-height: 0; aspect-ratio: 4 / 5;
      overflow: hidden; /* the glare layer is larger than the card */
      scroll-snap-align: center; scroll-snap-stop: always;
      border-radius: 16px;
    }
    .tier__body { grid-template-rows: auto 1fr auto auto; min-height: 0; padding: 24px 22px 24px; }
    .tier__name { font-size: clamp(34px, 9.6vw, 42px); max-width: calc(100% - 56px); }
    .tier__perks { align-self: end; max-width: 15em; margin: 0 0 var(--s-4); }
    .tier__price { align-self: end; font-size: clamp(64px, 20vw, 88px); }
    .tier__per { display: block; margin: 12px 0 0; font-size: 17px; }
    .tier__mark { top: 28px; right: 22px; width: 42px; }
    .tier__sheen {
      inset: -30% -70%; border-radius: 0; opacity: 1;
      background: linear-gradient(108deg, rgba(255,246,222,0) 40%, rgba(255,246,222,.24) 50%, rgba(255,246,222,0) 60%);
      transform: translate3d(-12%, 0, 0);
    }
    .tier--cabinet .tier__sheen { background: linear-gradient(108deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 62%); }
    /* The second foil ring (motion.js adds the element and fades it in as the card leaves the centre). */
    .tier__foil {
      position: absolute; inset: 0; z-index: 2; pointer-events: none; display: block;
      padding: 2px; border-radius: inherit; opacity: 0;
      background: conic-gradient(from 20deg, var(--foil-2), var(--foil-3) 14%, var(--foil-1) 30%, var(--foil-2) 48%, var(--foil-3) 64%, var(--foil-1) 82%, var(--foil-2));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }
    /* Where the row stands: three marks under it (motion.js builds them; decoration, hidden from
       assistive tech). The box has no height of its own and gives back the margin it takes, so
       adding it moves nothing below it. */
    .tiers__pips { display: flex; justify-content: center; gap: 10px; height: 0; margin: -36px 0 36px; }
    .tiers__pip { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: 0.28; transition: opacity var(--t-state) var(--ease-out), background-color var(--t-state) var(--ease-out), scale var(--t-layout) var(--ease-out); }
    .tiers__pip.is-on { background: var(--gold); opacity: 1; scale: 1.3; }
    /* Tablets in portrait: two cards and the edge of the third; the row starts at the gutter. */
    @media (min-width: 601px) {
      .tiers { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
      .tier { scroll-snap-align: start; }
      .tiers__pips { display: none; }
    }
    .vault { margin-top: var(--s-3); } /* the row's own foot (64px, with the marks in it) is the gap */
    /* A phone on its side: a landscape card that fits the short screen, the price and its
       "a month" on one line. */
    @media (max-height: 500px) {
      .tiers { --tier-w: min(60vw, 380px); }
      .tier { aspect-ratio: 1.5 / 1; }
      .tier__name { font-size: 34px; }
      .tier__price { font-size: 64px; }
      .tier__per { display: inline; margin: 0 0 0 0.6em; }
    }
  }
  .coins li::before, .coin { --c: clamp(60px, 18.6vw, 96px); }
  /* A phone on its side: the swipe row's tiles fit the short screen. */
  @media (max-height: 500px) { .store { --tile-w: min(74vw, 400px, 62vh); } }

  /* Follow: rows a thumb can press (76px), the pill 48px. */
  .follow__row { min-height: 76px; padding-block: 10px; }
  .follow__go { min-width: 96px; height: 48px; font-size: 16.5px; }
  .follow__handle { font-size: 16.5px; }
}

/* The pinned rail on phones and tablets in portrait (motion on, motion.js in: it decides, and
   says so with html.phone-rail, so this layout and its script always agree; it needs
   overflow: clip, or the rail would widen the page on an old Safari, which keeps the swipe
   row; a phone on its side, under 500px tall, keeps the swipe row too). The idea of block 12,
   composed for a tall screen: the title stays at the top of the pinned screen (it is lifted
   out of the row and motion.js holds it still against the row's travel) and the three tiles
   and the link panel pass beneath it, carried sideways by the page scroll. The tiles are as
   tall as the screen allows (4:5 on a short phone, up to 2:3 on a tall one), never wider than
   78vw, so the next one always shows at the edge. A sideways swipe on the rail moves it too
   (motion.js scrolls the page by the same distance), so pan-y: vertical pans stay native. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (overflow: clip) {
    html.phone-rail:not(.motion-paused) .store {
      --intro-h: calc(1.88 * var(--poster-l) + clamp(20px, 2.4vw, 36px) + 1.38 * var(--deck));
      --tile-h: min(calc(100vh - var(--intro-h) - 96px), 117vw, 600px);
      --tile-w: min(78vw, 400px, calc(var(--tile-h) * 0.8));
      height: calc(100vh + var(--rail-travel, 0px));
    }
    html.phone-rail:not(.motion-paused) .store__pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; padding-block: 0; overflow: clip; touch-action: pan-y; }
    html.phone-rail:not(.motion-paused) .store__rail {
      position: relative; width: max-content; overflow: visible; scroll-snap-type: none;
      margin-top: calc(var(--intro-h) + 24px); padding-right: calc(var(--rail-pad) + 4vw);
    }
    html.phone-rail:not(.motion-paused) .store__intro { position: absolute; left: var(--rail-pad); bottom: calc(100% + 24px); width: calc(100vw - 2 * var(--rail-pad)); }
    html.phone-rail:not(.motion-paused) .tile__media { aspect-ratio: auto; height: var(--tile-h); }
    html.phone-rail:not(.motion-paused) .store__foot { width: min(84vw, 460px); }
    @supports (height: 1svh) {
      html.phone-rail:not(.motion-paused) .store { --tile-h: min(calc(100svh - var(--intro-h) - 96px), 117vw, 600px); height: calc(100svh + var(--rail-travel, 0px)); }
      html.phone-rail:not(.motion-paused) .store__pin { height: 100svh; }
    }
  }
}

/* 15.3 Phones. */
@media (max-width: 600px) {
  /* A phone screen is short: the sections sit a little closer (96 / 80 / 64 on the desktop scale). */
  :root { --pad-xl: 80px; --pad-l: 68px; --pad-m: 56px; }

  /* Join: the room is a wide picture in a tall frame, so it has slack to travel: the frame is
     half as wide again as the screen and motion.js slides it across as well as pushing in.
     The coin is a fifth larger (a better thing to hold) and still sits beside "Join the", raised so its foot
     clears the capitals of "Patriot Club." (2026-10-08: at -0.58em it sat on the C and l of "Club").
     The button inside the email bar says "Join" (a bare arrow asked too much of a 55+ reader). */
  .club__bg { left: -28%; width: 156%; object-position: 34% 50%; }
  .club__emblem { top: -0.9em; left: 3.62em; width: 1.8em; height: 1.8em; }
  .club__control { height: 68px; padding: 0 6px 0 var(--s-4); }
  .club__submit { width: auto; min-width: 104px; min-height: 56px; height: 56px; padding: 0 var(--s-4); gap: 10px; font-size: 17px; }
  .club__submit-short { display: inline; }
  .club__status { font-size: 16.5px; }

  /* Become a member: the button a full thumb wide, then the carousel. */
  .membership__action { margin-top: var(--s-5); justify-items: stretch; }
  .membership__existing { justify-self: start; }

  /* The footer: three columns of 48px links, the motion toggle on a row of its own. */
  .footer { row-gap: var(--s-3); }
  .footer__links { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--s-6); row-gap: 0; }
  .footer a, .footer button { justify-content: flex-start; }
  .footer a[href^="https://x.com/"] { margin-inline: 0; }
  .footer button { grid-column: 1 / -1; justify-self: start; }

  /* Follow: larger names; the title keeps "Where to watch" on one line down to 360px. */
  .follow__title { font-size: min(var(--poster-l), 12.6vw); }
  .follow__name { font-size: clamp(25px, 7.2vw, 32px); }
  .follow__handle { font-size: 16.5px; }
  .follow__go { min-width: 92px; height: 48px; padding: 0 var(--s-4); font-size: 16.5px; }
  .follow__row { column-gap: 14px; }

  /* The pinned rail: the last panel's link a little larger than in the swipe row. */
  .store__link { min-height: 64px; }
}