/* TIM Brand Chrome — aMember port of TIM CMS TimHeader (chrome.css header block).
   Scoped [data-template="tim-amember"]. Heights locked: masthead 58px, gold nav 30px.
   Active tritab: white label + red border (RED-USAGE-POLICY).
   Font URLs rewritten at inject time (__ASSET_BASE__). */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/members/misc/tim-brand-chrome/asset?f=barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/members/misc/tim-brand-chrome/asset?f=barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/members/misc/tim-brand-chrome/asset?f=barlow-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/members/misc/tim-brand-chrome/asset?f=barlow-900.woff2') format('woff2');
}

[data-template='tim-amember'] {
  --tim-red: #ae110f;
  --tim-red-dark: #8c0d0b;
  --tim-gold: #c97c2a;
  --tim-white: #fdfdfd;
  --tim-grey-light: #ccc;
  --tim-dark: #1a1a1a;
  --font-body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Hide legacy aMember / timglobal chrome whenever this stylesheet is loaded. */
header.header-membersites,
.am-tabs-wrapper,
a.am-tabs-narrow-dashboard,
a.am-tabs-narrow-switch,
.am-account-toolbar {
  display: none !important;
}

/* Sticky chrome wrapper */
[data-template='tim-amember'].tim-amember-chrome {
  display: block;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0f0f0f;
}

/* TIM Original — CHROME (header, tri-tab nav, gold nav, homepage hero/banner/sections, footer).
   OWNER: Agent A (Chrome & Home). Every selector MUST be scoped [data-template="tim-amember"].
   Classes here: .to-header, .to-brandblock, .to-tritab, .to-nav, .to-hero-slider,
   .to-banner, .to-home*, .to-footer, .to-footcol, .to-social.
   Reuses the global palette/fonts from styles.css :root (--tim-red, --tim-gold, --font-display…). */

/* ============================================================
   HEADER — three stacked rows (brand block · tri-tab · gold nav)
   Transparent chrome — site atmosphere (styles.css body wash) shows through.
   ============================================================ */
[data-template='tim-amember'] .to-header {
  background: transparent;
  border-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  /* Return (scroll up) — slightly snappier ease-out. Hide duration is on the pinned rule. */
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  padding-top: env(safe-area-inset-top, 0px);
}
@media (prefers-reduced-motion: reduce) {
  [data-template='tim-amember'] .to-header {
    transition: none;
    will-change: auto;
  }
}

/* Row 1 wrapper — subtle divider under the masthead row.
   Scroll-down collapses this row (see `is-masthead-collapsed` + TimMastheadCollapse);
   the gold `.to-nav` submenu stays sticky alone. */
[data-template='tim-amember'] .to-header__top {
  border-bottom: 0;
  overflow: hidden;
  max-height: 200px; /* roomy enough for the wrapped mobile masthead */
  opacity: 1;
  transform: translateY(0);
  /* Light separation only — no black band over the atmosphere. */
  box-shadow: none;
  transition:
    max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
html.is-masthead-collapsed [data-template='tim-amember'] .to-header__top {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-template='tim-amember'] .to-header__top {
    transition: none;
  }
}
[data-template='tim-amember'] .to-header__top-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Locked masthead height — heavier Paul Morris weight must not grow the bar. */
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  box-sizing: border-box;
}

/* ---- Skull tile (absolute left edge — live measures the logo at x:0) ------ */
/* Transparent chrome (matches other cells); red only on hover.
   Mark is a tight transparent PNG — sized to the 58px row, no vertical pad. */
[data-template='tim-amember'] .to-skull {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px 0 6px;
  background: transparent;
  transition:
    background 140ms ease,
    box-shadow 140ms ease;
}
[data-template='tim-amember'] .to-skull:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tim-red) 92%, #fff) 0%,
    var(--tim-red) 38%,
    var(--tim-red-dark) 100%
  );
  box-shadow: none;
}
@media (prefers-reduced-transparency: reduce) {
  [data-template='tim-amember'] .to-skull:hover {
    background: var(--tim-red-dark);
    box-shadow: none;
  }
}
/* Stacked skull + eyes — eyes pulse TIM red. */
[data-template='tim-amember'] .to-skull__mark {
  position: relative;
  display: block;
  /* Match masthead row (tritab min-height); do NOT exceed or the bar grows. */
  height: 58px;
  width: auto;
  aspect-ratio: 531 / 396;
  overflow: visible;
}
[data-template='tim-amember'] .to-skull__img,
[data-template='tim-amember'] .to-skull__eyes {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
[data-template='tim-amember'] .to-skull__eyes {
  animation: to-eye-pulse 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(174, 17, 15, 0.85));
}
@keyframes to-eye-pulse {
  0%,
  100% {
    opacity: 0.55;
    filter: drop-shadow(0 0 2px rgba(174, 17, 15, 0.55)) brightness(0.9);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(174, 17, 15, 1)) brightness(1.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-template='tim-amember'] .to-skull__eyes {
    animation: none;
    opacity: 1;
    filter: none;
  }
}

/* ---- Brand block (right of the skull) ------------------------------------ */
/* Slimmer wordmark zone so Downloads / Members / Toys get more width.
   Full-height tile; type sized to kiss the 58px masthead (same idea as the skull). */
[data-template='tim-amember'] .to-brandblock {
  display: flex;
  align-items: stretch;
  justify-content: center;
  align-self: stretch;
  padding: 0 12px;
  flex: 0 0 22%;
  min-width: 168px;
  max-width: 280px;
  box-sizing: border-box;
}
[data-template='tim-amember'] .to-brandblock__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Pack toward the vertical center-bottom — less air above the main label. */
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 1px 0 2px;
  box-sizing: border-box;
  line-height: 1;
  gap: 0;
}

/* apex masthead — heaviest optical weight for "PAUL MORRIS" (Barlow 900 + stroke). */
[data-template='tim-amember'] .to-brandblock--apex .to-brandblock__label {
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0.005em;
  color: var(--tim-white);
  text-transform: uppercase;
  /* Past font-weight 900 — slight stroke fattens glyphs without growing the 58px bar. */
  -webkit-text-stroke: 0.6px currentColor;
  paint-order: stroke fill;
}
[data-template='tim-amember'] .to-brandblock--apex .to-brandblock__sub {
  font-family: var(--font-body);
  text-transform: uppercase;
  color: var(--tim-grey-light);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-top: 1px;
}

/* Red wordmark tile — vertical brand-red gradient so the button pops. */
[data-template='tim-amember'] .to-brandblock--red {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tim-red) 88%, #fff) 0%,
    var(--tim-red) 42%,
    var(--tim-red-dark) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
@media (prefers-reduced-transparency: reduce) {
  [data-template='tim-amember'] .to-brandblock--red {
    background: var(--tim-red-dark);
    box-shadow: none;
  }
}
[data-template='tim-amember'] .to-brandblock--red .to-brandblock__label {
  font-family: var(--font-body);
  text-transform: uppercase;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0.005em;
  -webkit-text-stroke: 0.6px currentColor;
  paint-order: stroke fill;
}
[data-template='tim-amember'] .to-brandblock--red .to-brandblock__sub {
  font-family: var(--font-body);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-top: 1px;
}

/* ---- Tri-tab network nav — discrete button chips (not edge-to-edge cells) ------ */
[data-template='tim-amember'] .to-tritab {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 8px;
  box-sizing: border-box;
}
[data-template='tim-amember'] .to-tritab__link {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px;
  /* Inset chips inside the locked 58px masthead — reads as real buttons. */
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--tim-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  /* Solid dark chips — no soft highlight haze. */
  background: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  transition:
    background 140ms ease,
    color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}
[data-template='tim-amember'] .to-tritab__link:hover {
  background: var(--tim-red);
  border-color: color-mix(in srgb, var(--tim-red) 70%, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  color: #fff;
}
[data-template='tim-amember'] .to-tritab__link:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Members (this site) — selected = WHITE label on a red-outlined chip.
   Changed 2026-07-29 (Matt: "improve contrast on both sites").

   It was red text on the #1a1a1a chip: 2.39:1, below the 3:1 this needs even
   with the large-text allowance (20px/700). That is not tunable — brand red
   #ae110f has luminance 0.0932 and 3:1 here demands 0.1309, so NEITHER approved
   red clears it at any size, and the only reds that would are #ff0000-bright,
   which `docs/brand/RED-USAGE-POLICY.md` forbids outright. Red as *text* on dark
   is arithmetically unavailable; it has to become a fill.

   So this follows the brand guide's own prescription for exactly this case:
   "Archive / jump tabs: active = red underline or red fill chip with white
   label — not red text alone on dark." The chip is already a bordered button,
   so the red moves to the border (a fill) and the label goes white: 17.11:1,
   and red still carries the "you are here" signal against two white-bordered
   siblings. */
[data-template='tim-amember'] .to-tritab__link.is-current {
  background: #1a1a1a;
  color: var(--tim-white);
  border-color: var(--tim-red);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px var(--tim-red);
}
[data-template='tim-amember'] .to-tritab__link.is-current:hover {
  background: var(--tim-red);
  border-color: color-mix(in srgb, var(--tim-red) 70%, #fff);
  color: #fff;
  filter: none;
}
/* ---- Row 2: gold content nav — JUSTIFIED across the full width ----------- */
/* Live is a Bootstrap nav-justified menu: 7 equal cells spanning edge-to-edge
   (item centers measured at ~1/14, 3/14 … 13/14 of the viewport). */
[data-template='tim-amember'] .to-nav {
  /* Charcoal band restored — only the masthead row stays clear for the atmosphere. */
  background: linear-gradient(180deg, #2c2c2c 0%, #1e1e1e 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-template='tim-amember'] .to-nav__inner {
  display: flex;
  align-items: stretch;
  /* Lock row height — larger labels must not grow the bar. */
  height: 30px;
  min-height: 30px;
  max-height: 30px;
}
/* Gold submenu — Helvetica bold, gold #c97c2a (NOT the typewriter face).
   At page top the gold is muted; brightens when masthead collapses on scroll. */
[data-template='tim-amember'] .to-nav__link {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: color-mix(in srgb, var(--tim-gold) 58%, #6a6a6a);
  padding: 0 8px;
  height: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  transition:
    color 0.35s ease,
    background 140ms ease;
}
[data-template='tim-amember'] .to-nav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}
html.is-masthead-collapsed [data-template='tim-amember'] .to-nav__link {
  color: var(--tim-gold);
}
html.is-masthead-collapsed [data-template='tim-amember'] .to-nav__link:hover {
  color: #fff;
}
/* Account CTA (Join / Login / Join Now / Re-Join / Dashboard) — slight emphasis. */
[data-template='tim-amember'] .to-nav__link--account.is-join,
[data-template='tim-amember'] .to-nav__link--account.is-join-now,
[data-template='tim-amember'] .to-nav__link--account.is-rejoin {
  color: #fff;
  text-shadow: 0 0 12px rgba(174, 17, 15, 0.45);
}
[data-template='tim-amember'] .to-nav__link--account.is-join:hover,
[data-template='tim-amember'] .to-nav__link--account.is-join-now:hover,
[data-template='tim-amember'] .to-nav__link--account.is-rejoin:hover {
  color: #fff;
}
/* ---- Masthead middle band: 721–900px (Matt 2026-07-27, "sideways looks strange")
   Below 720px the tri-tab wraps to its own row. Above 900px there is room for the
   desktop masthead. Between them nothing handled it, so the DESKTOP layout was in
   force without the width for it — and that band is every phone in landscape
   (812 · 844 · 926), tablet portrait (768), and any narrow desktop window.

   Measured at 812×375 before the fix: `.to-brandblock` got `flex: 0 0 22%` = 179px,
   but "Paul Morris" at a fixed 34px needs ~230px, so it wrapped to two lines (56px);
   with the 28px sub-line that is 84px of content inside `.to-header__top-inner`,
   which is locked to 58px, and `.to-header__top` is `overflow: hidden` — so the top
   of the type was sliced off. The tri-tab's fixed 20px wrapped "Downloads & DVD'S"
   to two lines at the same time.

   Fluid type + content-sized chips keep everything on the one 58px row.
   Deliberately range-scoped: a plain `max-width: 900px` would also apply below
   720px and shrink the portrait masthead that is already signed off. */
@media (min-width: 721px) and (max-width: 1100px) {
  /* Type scales; the flex structure does NOT. Keeping `flex: 0 0 22%` on the
     brandblock and `flex: 1 1 0` on the chips means the masthead keeps its desktop
     proportions all the way down the band — only the type shrinks to fit. Both
     clamps reach their 34px/20px desktop values at ~1000px, so there is no visible
     step at the 1100px boundary. `min-width: 0` lets the brandblock give ground
     rather than force an overflow if a brand name is ever longer than "Paul Morris". */
  [data-template='tim-amember'] .to-brandblock {
    min-width: 0;
  }
  [data-template='tim-amember'] .to-brandblock--red .to-brandblock__label,
  [data-template='tim-amember'] .to-brandblock--apex .to-brandblock__label {
    font-size: clamp(19px, 3.3vw, 34px);
    white-space: nowrap;
  }
  [data-template='tim-amember'] .to-brandblock--red .to-brandblock__sub,
  [data-template='tim-amember'] .to-brandblock--apex .to-brandblock__sub {
    font-size: clamp(8px, 1.35vw, 14px);
    white-space: nowrap;
  }
  /* Same lesson as the ≤720px chips, milder: equal thirds cannot fit unequal
     labels at a fixed 20px. Scale the type, keep the thirds. */
  [data-template='tim-amember'] .to-tritab__link {
    font-size: clamp(11px, 1.85vw, 20px);
    padding: 0 8px;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  /* Masthead wraps: skull + brand stay on row 1, the tri-tab drops to its own full-width
     row; the gold nav switches from justified cells to a horizontal scroll. */
  [data-template='tim-amember'] .to-header__top-inner {
    flex-wrap: wrap;
    height: auto;
    max-height: none;
    min-height: 58px;
  }
  [data-template='tim-amember'] .to-brandblock {
    flex: 1 1 auto;
  }
  [data-template='tim-amember'] .to-tritab {
    flex: 1 1 100%;
    border-top: 0;
    gap: 6px;
    padding: 6px 8px 8px;
  }
  /* Chips size to their own label instead of the base `flex: 1 1 0` equal thirds.
     At 375px equal thirds gave every chip ~95px of text room, which wrapped
     "Downloads & DVD'S" onto two lines and grew the masthead (Matt 2026-07-27).
     Fluid size + nowrap keeps all three on one row down to 320px. */
  [data-template='tim-amember'] .to-tritab__link {
    flex: 0 1 auto;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    font-size: clamp(11px, 3.4vw, 15px);
    padding: 0 6px;
    white-space: nowrap;
  }
  /* #9 Edge fades + › peek — more gold-nav items off-screen (Jeremy 2026-07-24).
     Classes stamped by TimNavScroll: .is-overflow / .is-at-start / .is-at-end. */
  [data-template='tim-amember'] .to-nav {
    position: relative;
  }
  [data-template='tim-amember'] .to-nav.is-overflow:not(.is-at-start)::before,
  [data-template='tim-amember'] .to-nav.is-overflow:not(.is-at-end)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    z-index: 2;
  }
  [data-template='tim-amember'] .to-nav.is-overflow:not(.is-at-start)::before {
    left: 0;
    background: linear-gradient(to right, #0b0b0b 10%, transparent);
  }
  [data-template='tim-amember'] .to-nav.is-overflow:not(.is-at-end)::after {
    right: 0;
    background: linear-gradient(to left, #0b0b0b 18%, transparent);
  }
  /* Always show a soft right cue on narrow screens even before JS hydrates. */
  [data-template='tim-amember'] .to-nav:not(.is-overflow):not(.is-at-end)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(to left, #0b0b0b 30%, transparent);
  }
  [data-template='tim-amember'] .to-nav__more {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    color: var(--tim-gold);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 8px var(--tim-dark), 0 0 4px var(--tim-dark);
    animation: to-nav-more-pulse 1.6s ease-in-out infinite;
  }
  @keyframes to-nav-more-pulse {
    0%,
    100% {
      opacity: 0.55;
      transform: translateY(-50%) translateX(0);
    }
    50% {
      opacity: 1;
      transform: translateY(-50%) translateX(2px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-template='tim-amember'] .to-nav__more {
      animation: none;
      opacity: 0.9;
    }
  }
  /* The gold submenu must pan horizontally ONLY (Matt 2026-07-27: "wobbly … moving
     up and down when it should only move left to right").
     Root cause: the base rule locks .to-nav__inner to height:30px while the mobile
     .to-nav__link below claims min-height:36px — a 36px child inside a 30px scroll
     container makes the strip 6px vertically scrollable, so a horizontal swipe
     drifts up/down. Matching the container to the child removes the overflow at
     source; overflow-y + touch-action + overscroll-behavior are belt-and-braces so
     the gesture can neither scroll vertically nor chain to the page. */
  [data-template='tim-amember'] .to-nav__inner {
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 28px;
    scroll-padding-inline: 12px;
  }
  [data-template='tim-amember'] .to-nav__inner::-webkit-scrollbar {
    display: none;
  }
  /* min-height was 36px inside a container the base rule locks to 30px — that
     mismatch is what made the strip 6px vertically scrollable (measured
     clientHeight 30 vs scrollHeight 36). Matching the link to the row removes the
     overflow without growing the gold bar, so the sticky header stays 143px and
     nothing moves visually. 30px still clears WCAG 2.5.8 (24px minimum). */
  [data-template='tim-amember'] .to-nav__link {
    flex: 0 0 auto;
    min-height: 0;
    height: 100%;
    padding: 8px 16px;
    white-space: nowrap;
  }
  [data-template='tim-amember'] .to-home-grid--landscape:not(.to-home-grid--slider) {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  [data-template='tim-amember'] .to-home-grid--portrait:not(.to-home-grid--slider),
  [data-template='tim-amember'] .to-home-grid--square:not(.to-home-grid--slider) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  /* ---- Layouts → "On phones" (section.mobileLayout) ------------------------
     Both modifiers exist ONLY inside this 767px block, so a phone choice can
     never reach desktop. 'inherit' emits no class at all, which is why the
     default is a true no-op.
     Placed after the two rules above so `display` resolves in our favour at
     equal specificity — their `grid-template-columns` is inert under flex. */

  /* Swipe rail on a phone while desktop stays a grid. Same gesture discipline as
     the gold submenu: pan-x only, no scroll chaining, no vertical drift. */
  [data-template='tim-amember'] .to-home-grid--m-slider {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--to-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  [data-template='tim-amember'] .to-home-grid--m-slider::-webkit-scrollbar {
    display: none;
  }
  [data-template='tim-amember'] .to-home-grid--m-slider > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  /* Card widths mirror the existing --slider variants so a phone rail and a
     desktop-slider rail look identical rather than subtly different. */
  [data-template='tim-amember'] .to-home-grid--m-slider.to-home-grid--landscape > * {
    width: min(320px, 78vw);
  }
  [data-template='tim-amember'] .to-home-grid--m-slider.to-home-grid--portrait > * {
    width: min(200px, 42vw);
  }
  [data-template='tim-amember'] .to-home-grid--m-slider.to-home-grid--square > * {
    width: min(180px, 38vw);
  }

  /* Force 1-up on a phone even when the row sliders on desktop. */
  [data-template='tim-amember'] .to-home-grid--m-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
  }
  [data-template='tim-amember'] .to-home-grid--m-stack > * {
    width: auto;
    flex: none;
  }

  [data-template='tim-amember'] .to-home-grid > .to-flip,
  [data-template='tim-amember'] .to-home-grid > .to-card {
    min-width: 0;
    max-width: 100%;
  }
  /* #8 Footer: roomier tap targets + column gap */
  [data-template='tim-amember'] .to-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
  }

  /* ---- Footer accordion (Matt 2026-07-27, direction A) ----------------------
     Measured: the footer was 1,459px on a 375px phone — 1.8 full screens — with
     the five link columns alone accounting for 911px. Collapsing them to tappable
     rows brings it to ~550px with nothing removed and nothing reworded.

     Only applies once TimFooterAccordion has stamped data-accordion="on"; until
     then (and forever, if JS never runs) the columns stay open and render exactly
     as they did before. That is why every rule here is scoped to that attribute. */
  [data-template='tim-amember'] .to-footer__cols[data-accordion='on'] {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  [data-template='tim-amember'] .to-footer__cols[data-accordion='on'] .to-footcol {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  [data-template='tim-amember'] .to-footer__cols[data-accordion='on'] .to-footcol__sum {
    /* Re-enable the affordance the desktop rule above deliberately removes. */
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Comfortable target without a separate min-height: 14+14 + the h2's line box. */
    padding: 14px 2px;
    -webkit-tap-highlight-color: transparent;
  }
  [data-template='tim-amember'] .to-footer__cols[data-accordion='on'] .to-footcol__h {
    margin-bottom: 0;
    color: var(--tim-gold);
  }
  [data-template='tim-amember'] .to-footer__cols[data-accordion='on'] .to-footcol__sum::after {
    content: '+';
    color: var(--tim-gold);
    font-size: 20px;
    line-height: 1;
    flex: none;
  }
  [data-template='tim-amember']
    .to-footer__cols[data-accordion='on']
    .to-footcol[open]
    .to-footcol__sum::after {
    content: '\2013';
  }
  [data-template='tim-amember'] .to-footer__cols[data-accordion='on'] .to-footcol__list {
    padding: 0 2px 10px;
  }
  [data-template='tim-amember']
    .to-footer__cols[data-accordion='on']
    .to-footcol__sum:focus-visible {
    outline: 2px solid var(--tim-gold);
    outline-offset: -2px;
  }
  [data-template='tim-amember'] .to-footcol__list a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 0;
    line-height: 1.3;
  }
  [data-template='tim-amember'] .to-footer__social {
    grid-template-columns: repeat(3, 44px);
    gap: 8px;
  }
  [data-template='tim-amember'] .to-social {
    width: 44px;
    height: 44px;
  }
}

/* ---- Portrait phones: pull the account CTA forward in the gold submenu -----
   Matt 2026-07-27: "on mobile there's no apparent join button because the
   scroller has it at the end." Source order is Scenes · Movies · Men · Classics ·
   Video Vault · Favorites · Join, and a 375px phone only shows the first four —
   so the one conversion CTA sat off-screen behind a horizontal scroll.

   Flex `order` moves it to 4th (where Classics sits) leaving the first three put:
     Scenes · Movies · Men · JOIN · Classics · Video Vault · Favorites

   Deliberately `(orientation: portrait)` as well as `max-width: 720px` — Matt
   asked for this "not sideways", and width alone would not honour that: a small
   phone in landscape (e.g. iPhone SE, 667×375) is still under 720px. Landscape
   and desktop show the full row anyway, so nothing needs moving there.

   Targets only the conversion variants (`is-join` / `is-join-now` / `is-rejoin`,
   the same trio grouped in the styling above), so a signed-in member's account
   link keeps its normal position.

   Caveat, recorded on purpose: `order` changes VISUAL order only — DOM and tab
   order are unchanged, so a keyboard user still reaches the CTA last. Acceptable
   here because this applies solely to portrait touch devices, but it is the
   reason not to reach for `order` on desktop nav. */
@media (max-width: 720px) and (orientation: portrait) {
  [data-template='tim-amember'] .to-nav__inner > * {
    order: 3;
  }
  /* Keep Scenes · Movies · Men leading. If the Navigation global is reordered,
     this still reads as "the CTA goes fourth". */
  [data-template='tim-amember'] .to-nav__inner > *:nth-child(-n + 3) {
    order: 1;
  }
}

/* ---- Gold nav dropdowns (aMember User Menu children) -------------------- */
[data-template='tim-amember'] .to-nav__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
  height: 100%;
}
[data-template='tim-amember'] .to-nav__item > .to-nav__link {
  flex: 1 1 auto;
  width: 100%;
}
[data-template='tim-amember'] .to-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  z-index: 60;
  padding: 4px 0;
}
[data-template='tim-amember'] .to-nav__item:hover > .to-nav__dropdown,
[data-template='tim-amember'] .to-nav__item:focus-within > .to-nav__dropdown {
  display: block;
}
[data-template='tim-amember'] .to-nav__dropdown a {
  display: block;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--tim-gold) 70%, #fff);
  white-space: nowrap;
  text-decoration: none;
}
[data-template='tim-amember'] .to-nav__dropdown a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
[data-template='tim-amember'] .to-nav__link.has-children::after {
  content: ' ▾';
  font-size: 0.75em;
  opacity: 0.75;
}

/* Utility strip under gold nav (logout) — NOT inside sticky chrome (keeps 58+30 = 88px). */
.tim-chrome-util[data-template='tim-amember'],
[data-template='tim-amember'] + .tim-chrome-util {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 2px 12px 4px;
  background: #0f0f0f;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}
.tim-chrome-util a {
  color: #c97c2a;
  text-decoration: none;
  text-transform: uppercase;
}
.tim-chrome-util a:hover {
  color: #fff;
}
.tim-chrome-util__user {
  color: #ccc;
  text-transform: none;
  font-weight: 500;
}