.wrap{width:min(1288px,100% - 2*clamp(24px,7.78vw,112px));margin-inline:auto}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:var(--space-12) var(--space-48);transition:background .2s,box-shadow .2s}
.nav.is-scrolled{background:var(--surface-background);box-shadow:0 1px 0 var(--border-default)}
.nav.theme-dark{color:var(--text-primary)}   /* navTheme: dark variant (partials/nav.njk): text re-resolves in the scoped Dark mode */
.nav__inner{display:flex;align-items:center;gap:var(--space-24);padding:var(--space-24) var(--space-72)}
.nav__logo img{height:32px;width:auto}
.nav__links{display:flex;gap:var(--space-32);list-style:none;margin:0;padding:0}
.nav__link{display:block;padding:var(--space-8);font:var(--text-nav-link);border-radius:var(--radius-sm);white-space:nowrap}
.nav__link[aria-current="page"]{background:var(--accent-default)}
.nav__actions{display:flex;gap:var(--space-12)}

/* Featured */
/* Featured (Figma 15:267): Main card 870 + a 322 column of compact cards (759 tall). The column holds 3 cards (953 tall), so the
   section pins while the column scrolls by the overflow. js/site.js measures that overflow into --hero-shift (0 without JS, so
   nothing is reserved that the content does not fill). */
.featured{--hero-h:758px;--hero-gap:20px;padding:136px 0 0}
.featured__track{height:calc(var(--hero-h) + var(--hero-shift,0px))}
.featured__sticky{position:sticky;top:112px}
.featured__grid{display:grid;grid-template-columns:minmax(0,870fr) minmax(0,322fr);gap:var(--space-24);height:var(--hero-h)}
.featured__latest{height:var(--hero-h);overflow:hidden;border-radius:var(--radius-md)}
.featured__list{display:flex;flex-direction:column;gap:var(--hero-gap);will-change:transform;transform:translate3d(0,calc(var(--hero-p,0)*var(--hero-shift,0px)*-1),0)}
.featured__list>.story-card{flex:none}
.featured__list .story-card__title{font:var(--text-card-title-sm)}
.featured__grid>.story-card--main .story-card__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* Reduced motion on desktop: same Main + right column as Figma 15:252, just no sticky scroll (the list stays put, clipped like the frame) */
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  .featured__track{height:auto}.featured__sticky{position:static}
  .featured__list{transform:none}
}
@media (max-width:1023px){
  .featured__track{height:auto}.featured__sticky{position:static}
  .featured__grid{grid-template-columns:1fr;height:auto}.featured__latest{height:auto;overflow:visible}
  .featured__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));transform:none}
  .featured__grid>.story-card--main{aspect-ratio:870/747;height:auto}
}
.follow-banner{margin-top:var(--space-64)}

/* Follow banner */
.follow-banner{padding:var(--space-32) 0;text-align:center}
.follow-banner__headline{display:flex;align-items:center;justify-content:center;gap:var(--space-12);font:var(--text-headline-large)}
.follow-banner__copy{font:var(--text-body-description);color:var(--text-secondary);margin-top:var(--space-12)}
.follow-banner__actions{display:flex;justify-content:center;gap:var(--space-12);margin-top:var(--space-32)}

/* Generic sections */
.section{padding:var(--space-48) 0}
.section--80{padding:var(--space-80) 0}
.section__body{margin-top:var(--space-40)}

/* Foley's Takes */
.takes{display:grid;grid-template-columns:400px minmax(0,1fr);gap:var(--space-64)}
/* Foley's Takes: author + article stay pinned under the navbar while the events scroll past */
#takes{scroll-margin-top:72px}
.takes{align-items:start}
.takes__author{display:flex;flex-direction:column;gap:var(--space-24);position:sticky;top:112px}
@media (max-width:1023px){.takes{grid-template-columns:minmax(0,1fr)}.takes__author{position:static}.events-grid{grid-template-columns:minmax(0,1fr)}}
.picks__label{font:var(--text-metadata-sm);letter-spacing:.06em;color:var(--text-secondary);margin-bottom:var(--space-16)}
.picks__list{display:flex;flex-direction:column;gap:var(--space-16)}

/* What to watch */
.events-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);margin-top:var(--space-40)}
.events-grid__col{display:flex;flex-direction:column;gap:var(--space-12)}
.worth{margin-top:var(--space-40)}
.worth__label{margin:0;font:var(--text-xl);text-transform:uppercase;color:var(--text-secondary);padding:var(--space-24) 0 var(--space-16)}
.worth__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-24);align-items:start}
.worth__grid .video-card{height:auto}
.worth__grid .video-card__thumb{flex:none;aspect-ratio:278/494;min-height:0}

/* Originals */

.originals__inner{padding-top:var(--space-40)}
.originals__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-24);height:auto;margin-top:var(--space-40)}
.originals__col{display:flex;flex-direction:column;gap:var(--space-24)}
.originals__col>*{flex:none;height:auto}

/* Fresh */
.fresh__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-24);margin-top:var(--space-40)}

/* Newsletter */
.newsletter{background:var(--surface-background);padding:var(--space-64) 0 0;height:508px;overflow:hidden;text-align:center}
.newsletter__title{font:var(--text-headline-large);font-size:var(--fs-5xl);line-height:var(--lh-5xl)}
.newsletter .field{max-width:560px;margin:var(--space-24) auto 0}
.newsletter__issues{display:flex;gap:var(--space-16);justify-content:center;margin-top:var(--space-40);height:428px;overflow:hidden}

/* Footer */

/* ---- round 2 fixes ---- */
.follow-banner__headline{font:var(--text-headline-large);text-transform:uppercase;gap:var(--space-12)}
.originals-wrap{padding:var(--space-40) var(--space-40)}
.originals{background:var(--neutral-900);border-radius:var(--radius-lg);padding:var(--space-80) 0}
.originals__inner{width:min(1128px,100% - 48px);margin-inline:auto;padding:0}
.originals__grid{grid-template-columns:repeat(4,1fr)}
.newsletter{background:var(--badge-neutral-bg);padding:var(--space-64) 0 0;height:508px}   /* neutral/100 in Light; was the primitive, which did not switch in Dark */
.newsletter__title{font:var(--text-headline-large);text-transform:uppercase;max-width:620px;margin-inline:auto}
.newsletter .field{max-width:460px}
.newsletter__issues{gap:var(--space-16);justify-content:space-between}
.newsletter .issue-card{width:auto;flex:1}
.originals__inner{width:min(1192px,100% - 48px)}
.newsletter__title{max-width:780px}
.worth__label{padding-top:var(--space-24)}


.section--elevated{background:var(--surface-elevated)}
.avatar{object-fit:cover;border:1px solid var(--border-default);box-sizing:border-box}

/* ---------- Newsletter ticker: infinite, slow, pauses on hover ---------- */
.newsletter{height:auto}
.newsletter .ticker{margin-top:var(--space-40);height:300px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{--gap:12px;display:flex;gap:var(--gap);width:max-content;margin:0;padding:0 0 0 var(--gap);list-style:none;animation:ticker-x 70s linear infinite;will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{flex:none;width:150px;line-height:0}
.ticker__item img{display:block;width:100%;height:auto;border-radius:var(--radius-md) var(--radius-md) 0 0;border:1px solid var(--border-default);border-bottom:0;box-shadow:var(--shadow-card);background:var(--surface-background)}
@keyframes ticker-x{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none;overflow-x:auto}.ticker{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

/* ---------- Footer (Figma 7:95) ---------- */
/* =====================================================================
   Footer (Figma component set 359:8271, redesign 2026-10-20): border, newsletter band, big links + 4 columns,
   brand area, bottom row. Light by default; .footer--dark swaps the semantic tokens (studios.css).
   ===================================================================== */
.footer{position:relative;overflow:hidden;background:var(--surface-background);display:block;color:var(--text-primary)}
.footer__border{height:16px;margin:0 var(--space-64);background:linear-gradient(var(--border-default),var(--border-default)) 0 7px/100% 2px no-repeat,linear-gradient(var(--border-default),var(--border-default)) 0 11px/100% 1px no-repeat}
.footer a{color:inherit;text-decoration:none}
.footer button{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.footer :is(a,button,input):focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-accent);border-radius:var(--radius-sm)}

/* Newsletter band (Figma 1499:59, Prompt 14 A3): a centred card (surface/elevated, border/subtle, radius md, 24 padding, 64 gap) with the
   "INSIDE STORIED" lockup + text-lg line on the left and the Email Subscription Field (480) on the right. Band padding 24 / 64. */
.footer{--footer-lockup-top:15px/22px var(--font-body);   /* "INSIDE": Mobile/10 text-lg size, not a Figma token at this place yet */
  --footer-lockup-main:700 49.476px/49.476px var(--font-display)}   /* "STORIED": not a Figma token yet */
.footer__news{position:relative;z-index:1;display:flex;justify-content:center;padding:var(--space-24) var(--space-64)}
.footer__news-card{display:flex;align-items:center;gap:var(--space-64);padding:var(--space-24);background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);max-width:100%;box-sizing:border-box}
.footer__news-copy{display:flex;flex-direction:column;gap:var(--space-12);min-width:0}
.footer__lockup{display:flex;flex-direction:column;align-items:center;width:343px;max-width:100%;margin:0;color:var(--text-primary);text-transform:uppercase}
.footer__lockup-top{font:var(--footer-lockup-top)}
.footer__lockup-main{font:var(--footer-lockup-main)}
.footer__group-title{margin:0;font:var(--text-xs);color:var(--text-secondary)}
.footer__news-title{margin:0;font:var(--text-lg);color:var(--text-primary)}
.footer__sub{flex:none;display:flex;flex-direction:column;gap:var(--space-8);width:480px;max-width:100%}
.footer__sub-label{font:var(--text-xs);text-transform:uppercase;color:var(--text-secondary)}
.footer__sub-field{display:flex;align-items:center;height:52px;box-sizing:border-box;padding:0 var(--space-4) 0 var(--space-20);background:var(--surface-default);border:1px solid var(--border-strong);border-radius:var(--radius-full)}
.footer__sub-field:focus-within{border-color:var(--accent-default);box-shadow:0 0 0 1px var(--accent-default)}
.footer__sub-field input{flex:1;min-width:0;border:0;outline:0;background:none;font:var(--text-sm);color:var(--text-primary)}
.footer__sub-field input::placeholder{color:var(--text-placeholder)}
.footer__sub-field input:focus-visible{box-shadow:none}
.footer__sub-btn{flex:none;height:32px;padding:0 var(--space-16)!important;border-radius:var(--radius-md);font:var(--text-xs)!important;color:var(--text-primary)}
.footer__sub-btn:hover{background:var(--button-ghost-bg-hover)}
.footer__sub-hint{margin:0;font:var(--text-xs);color:var(--text-secondary)}
.footer__sub.is-error .footer__sub-field{border-color:var(--feedback-error)}
.footer__sub.is-error .footer__sub-hint{color:var(--feedback-error)}

/* Top: big links (320, Storica 24 tracked, dividers) + 4 columns (text-xs titles, 34px text-sm rows with dividers) */
.footer__top{position:relative;z-index:1;display:flex;gap:var(--space-64);align-items:flex-start;padding:var(--space-56) var(--space-64) var(--space-96)}
.footer__big{flex:none;display:flex;flex-direction:column;width:320px}
.footer__big a{display:flex;align-items:center;justify-content:space-between;padding:var(--space-8) 0;border-bottom:1px solid var(--border-strong);font:var(--text-2xl);letter-spacing:0;text-transform:uppercase;transition:padding-left .3s var(--ease-out)}
.footer__big a:hover{padding-left:var(--space-8)}
.footer__big svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.footer__cols{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-40)}   /* 5 equal columns (Prompt 31 Part 12) */
.footer__group-title{padding-bottom:var(--space-12)}
.footer__group-title button{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:default;letter-spacing:inherit;text-transform:inherit;pointer-events:none}
.footer__pm{display:none}
.footer__links{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-strong)}
.footer__links li{border-bottom:1px solid var(--border-strong)}
.footer__links :is(a,button){display:block;width:100%;padding:var(--nt-space-7) 0;font:var(--text-sm);color:var(--text-primary);transition:padding-left .25s var(--ease-out)}
.footer__links :is(a,button):hover{padding-left:var(--space-6)}
.footer__links--in{display:none}
html.is-signed-in .footer__links--in{display:block}
html.is-signed-in .footer__links--out{display:none}

/* Brand area (unchanged) */
.footer__brand{position:relative;height:321px;margin-top:0}
.footer__ghost{position:absolute;left:232px;top:36px;font:700 390px/321px var(--font-display);color:#D5DDD7;pointer-events:none;user-select:none}
.footer__wordmark{position:absolute;left:64px;top:64px;width:545px;height:auto}
.footer__tagline{position:absolute;left:84px;top:270px;width:505px;margin:0;display:flex;justify-content:space-between;font:700 22px/1 var(--font-display);letter-spacing:.14em}
.footer__tagline i{font-style:normal;font-size:9px;align-self:center}
.footer__bigs{position:absolute;right:-1px;top:-102px;width:478px;height:auto;z-index:0}
.footer__brand{z-index:1}

/* Bottom row: © + legal left, social right (semibold + arrow-up-right) */
.footer__bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);margin:0;padding:var(--space-24) var(--space-64);border-top:1px solid rgba(196,185,166,.3);background:var(--surface-background);font:var(--text-xs);color:var(--text-secondary)}
.footer__left{display:flex;align-items:center;gap:var(--space-32);flex-wrap:wrap}
.footer__copy{margin:0}
.footer__legal{display:flex;gap:var(--space-20);flex-wrap:wrap}
.footer__legal a:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:2px}
.footer__social{display:flex;gap:var(--space-16)}
.footer__social a{display:inline-flex;align-items:center;gap:var(--space-4);font-weight:600;color:var(--text-primary)}
.footer__social a:hover{text-decoration:underline;text-underline-offset:2px}
.footer__social svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 1024–1100: still the desktop Footer (Device=Desktop; desktop starts at 1024), only tighter: big links 240, 32 gaps */
@media (min-width:1024px) and (max-width:1100px){
  .footer__top{gap:var(--space-32)}
  .footer__big{width:240px}
  .footer__wordmark{width:min(545px,52%)}
  .footer__bigs{width:min(478px,34%);top:auto;bottom:0}
  .footer__cols{gap:var(--space-24)}
}
@media (max-width:1023px){
  .footer__news{flex-direction:column;align-items:stretch;gap:var(--space-24)}
  .footer__sub{width:min(100%,480px)}
  .footer__wordmark{width:min(545px,56%)}
  .footer__bigs{width:min(478px,30%);top:auto;bottom:0}
  .footer__top{flex-direction:column;gap:var(--space-48)}
  .footer__big{width:100%;max-width:420px}
  .footer__cols{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-32)}
}
/* Mobile (Figma 343:3093): stacked band, big links, the four columns become accordions (first open). Tablet uses the same
   Footer · Device=Mobile (Figma 1812:74472), so this applies up to 1023px; tablet-only spacing follows below. */
@media (max-width:1023px){
  .footer__border{margin:0 var(--space-16)}
  .footer__news{padding:var(--space-16)}
  .footer__news-card{flex-direction:column;align-items:stretch;gap:var(--space-6);width:100%}   /* Mobile 2255:162157: 6 between copy and field */
  .footer__lockup{align-self:flex-start}
  .footer__sub{width:100%}
  .footer__top{padding:var(--space-32) var(--space-16) var(--space-24);gap:var(--space-32)}
  .footer__big{max-width:none}
  .footer__big a{padding:var(--space-10) 0;font:var(--text-xl)}   /* Mobile Big Link: Desktop/09 text-xl, 10 padding */
  .footer__cols{display:flex;flex-direction:column;gap:0}
  .footer__group{border-bottom:1px solid var(--border-strong)}
  .footer__group-title{padding:0}
  .footer__group-title button{pointer-events:auto;cursor:pointer;min-height:48px;color:var(--text-primary)}   /* accordion header: text-xs, text/primary */
  .footer__pm{display:block;position:relative;width:14px;height:14px}
  .footer__pm::before,.footer__pm::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:currentColor;color:var(--text-primary)}
  .footer__pm::after{transform:rotate(90deg);transition:transform .2s}
  .footer__group.is-open .footer__pm::after{transform:rotate(0)}
  .footer__panel{display:none;padding-bottom:var(--space-12)}
  .footer__group.is-open .footer__panel{display:block}
  .footer__links{border-top:0}
  .footer__links li{border-bottom:0}
  .footer__links :is(a,button){padding:var(--space-8) 0;font:var(--text-base)}
  .footer__brand{height:auto;padding:var(--space-32) var(--space-16) 0;min-height:0;display:flex;flex-direction:column;align-items:center;overflow:hidden}
  .footer__ghost{display:none}
  .footer__wordmark{position:relative;left:auto;top:auto;width:min(100%,360px);z-index:1}
  .footer__tagline{position:relative;left:auto;top:auto;width:min(92%,330px);margin-top:var(--space-8);font-size:14px;z-index:1}
  .footer__bigs{display:none}
  .footer__bottom{flex-direction:column-reverse;align-items:flex-start;margin:var(--space-16) 0 0;padding:var(--space-24) var(--space-16);border-top:0}
  .footer__left{flex-direction:column-reverse;align-items:flex-start;gap:var(--space-16);width:100%}
  .footer__copy{width:100%;padding-top:var(--space-16);border-top:1px solid rgba(196,185,166,.3)}
}
/* Footer · Mobile on tablet (Figma 1812:74472, 744 wide), 600–1023: same blocks, 16px side padding, 14/20 intro line, 42px link rows,
   brand area left-aligned (326 wordmark at 32 with the pale "S" behind it, 216 tall), bottom bar on a 32px margin, 24 padding, 16 gaps. */
@media (min-width:600px) and (max-width:1023px){
  .footer__border{margin:0 var(--space-32)}
  .footer__top{padding-top:var(--space-24)}

  .footer__links :is(a,button){padding:9px 0}
  .footer__top{padding-bottom:var(--space-8)}
  .footer__brand{display:block;height:216px;padding:0;align-items:normal}
  .footer__ghost{display:block;left:128px;top:0;font-size:233px;line-height:192px;z-index:0}
  .footer__wordmark{position:absolute;left:var(--space-32);top:39px;width:326px}
  .footer__tagline{position:absolute;left:44px;top:158px;width:302px;margin:0;font-size:13px}
  .footer__tagline i{font-size:6px}
  .footer__bottom{margin:0;padding:var(--space-24) var(--space-32);gap:var(--space-16)}
  .footer__left{gap:var(--space-16)}
}
@media (prefers-reduced-motion:reduce){.footer__big a,.footer__links :is(a,button),.footer__pm::after{transition:none}}

/* ---- Figma homepage pass (15:252) ---- */
.follow-banner__copy{color:var(--text-primary)}
/* Prompt 33: Foley card image keeps 16:9 (shared rule) */
.worth{margin-top:var(--space-48)}
/* Newsletter: beige rounded container inset 20px, previews run off its bottom edge */
.newsletter{background:transparent;padding:var(--space-40) var(--space-20);height:auto}
.newsletter__box{background:var(--badge-neutral-bg);border-radius:var(--radius-md);padding:var(--space-64) 0 0;height:auto;overflow:hidden;box-sizing:border-box}
.newsletter__box:not(:has(.ticker)){padding-bottom:var(--space-64)}
.newsletter__box .ticker{margin-top:var(--space-32);height:auto}

/* Newsletter ticker: previews top-aligned, bottoms cut off by the box (Figma 554:27533) */
.newsletter__box .ticker{height:230px;overflow:hidden;align-items:flex-start}
.newsletter__box .ticker__track{align-items:flex-start}
.newsletter__box .ticker__item img{height:auto;object-fit:initial}

.worth--head{margin-top:var(--space-64,var(--space-64))}
.worth--head .section-header{margin-bottom:var(--space-24)}

/* ---- Homepage on small screens (no mobile frame for the web page; handoff section 4 + the app components) ----
   Section Header Device=Mobile (163:2208): the title fills and wraps, CTAs=1 keeps a compact button on the right, CTAs=2 puts
   both buttons side by side under the title. Lists are one column; video rails scroll sideways with a peeking edge and use the
   Mobile video sizes (horizontal 240 wide, vertical 132 wide). Phones only (≤600); tablet has its own frame (below). */
@media (max-width:599px){
  .takes{gap:var(--space-32)}
  :is(.worth__grid,.originals__grid){display:flex;align-items:flex-start;gap:var(--space-12);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:var(--space-4)}
  :is(.worth__grid,.originals__grid)::-webkit-scrollbar{display:none}
  .worth__grid{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);scroll-padding-inline:calc(50vw - 50%)}
  .originals__col{display:contents}
  :is(.worth__grid,.originals__grid) .video-card{flex:none;scroll-snap-align:start;height:auto}
  :is(.worth__grid,.originals__grid) .video-card--horizontal{width:240px}
  :is(.worth__grid,.originals__grid) .video-card--vertical{width:132px}
  :is(.worth__grid,.originals__grid) .video-card--vertical .video-card__thumb{flex:none;aspect-ratio:9/16;min-height:0}
  :is(.worth__grid,.originals__grid) .video-card__title{font:var(--text-card-title-sm);-webkit-line-clamp:2}   /* Video Card title standard 2026-10-23 */
  :is(.worth__grid,.originals__grid) .video-card__meta{font:var(--text-xs)}
  .worth__grid .partner-logo{--logo-h:20px;--logo-zone:36px;padding:var(--space-6)}
  .fresh__grid{grid-template-columns:minmax(0,1fr)}
}
/* Follow Topics on phones (Figma Home / App 1530:54577): 20 top/bottom; "WE COVER" over its chip and "WRITTEN BY" over its chip,
   centered, 8 between heading and chip, 28 between the two groups (8 + 12 + 8 around the empty break line); headings Mobile/08 text-2xl
   (18/24); no comma; copy 14/20; the two buttons share the width. Compact chip (36 tall) as on tablet. */
@media (max-width:599px){
  .home .follow-banner{margin-top:0;min-height:0;padding:var(--space-20) 0}
  .home .follow-banner__headline{flex-direction:column;flex-wrap:nowrap;gap:var(--space-8);font:var(--text-2xl);text-transform:uppercase}
  .home .follow-banner__break{display:block;height:var(--space-12)}
  .home .follow-banner__comma{display:none}
  .home .follow-banner .rotator{height:36px}
  .home .follow-banner .follow-item{height:36px;min-width:72px;padding:var(--space-8) var(--space-16) var(--space-8) var(--space-12);gap:var(--space-12)}
  .home .follow-banner .follow-item__img{width:24px;height:24px;margin-right:calc(-1 * var(--space-8))}
  .home .follow-banner .follow-item__label{font:var(--text-xs)}
  .home .follow-banner .follow-btn{height:26px;padding:3px var(--space-16)}   /* 3px: same not-a-token chip padding as tablet */
  .home .follow-banner__copy{margin-top:var(--space-20);font:var(--text-sm);color:var(--text-primary)}
  .home .follow-banner__actions{margin-top:var(--space-20)}
  .home .follow-banner__actions .btn{flex:1 1 0;height:40px;min-height:40px;padding:var(--space-8) var(--space-16);font:var(--text-xs)}
}

/* ---- Homepage, signed in (Figma 1751:71624, desktop only) ----
   "For you" widget (1751:72132): Section Header CTAs=1 + three Feed Posts in a row (story, event, video), 24 apart, 48 top / 64 bottom.
   Signed in hides "We cover" and Members; signed out hides the widget. Tablet / phone signed-in are not designed: same rules, one column. */
.foryou{display:none;padding:var(--space-48) 0 var(--space-64)}
html.is-signed-in .foryou{display:block}
html.is-signed-in .home .follow-banner,html.is-signed-in .home .members{display:none}
/* Panel (Figma 1798:98880): author-card/border fill (var(--neutral-100)), radius md, 32 padding, 32 between header and posts */
.foryou__panel{position:relative;display:flex;flex-direction:column;gap:var(--space-32);padding:var(--space-32);background:var(--border-subtle);border-radius:var(--radius-md)}
/* Posts rail (1751:72146): 389px Feed Posts, 24 apart, clipped and scrolled sideways; the scroll indicator below (Figma
   "Reading Progress" bar, text/muted, 8px, radius md) shows the visible share and position. Hidden when everything fits. */
.foryou__posts{display:flex;gap:var(--space-24);align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.foryou__posts::-webkit-scrollbar{display:none}
.foryou__posts:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring);border-radius:var(--radius-md)}
.foryou__posts>.feed-post{flex:0 0 389px;scroll-snap-align:start}
.foryou__posts .story-card,.foryou__posts .event-card,.foryou__posts .video-card{width:100%;max-width:none}
.foryou__bar{position:absolute;left:var(--space-32);right:var(--space-32);bottom:var(--space-6);height:8px}   /* sits in the bottom padding, 18 under the posts (Figma y 490) */
.foryou__bar[hidden]{display:none}
.foryou__thumb{position:absolute;top:0;left:0;height:100%;border-radius:var(--radius-md);background:var(--text-muted)}

/* Stacked event card (Device=Mobile, Figma 318:4531) in the homepage picks and Events Calendar lists on phones (tablet: home-tablet.css) */
@media (max-width:599px){
  :is(.picks__list,.home .events-grid) .event-card{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-4);align-items:start;padding:var(--space-16)}
  :is(.picks__list,.home .events-grid) .event-card--staff{padding:15px}
  :is(.picks__list,.home .events-grid) :is(.event-card__date,.event-card__divider,.event-card__media){display:none}
  :is(.picks__list,.home .events-grid) .event-card__content{display:contents}
  :is(.picks__list,.home .events-grid) .event-card__title{font:var(--text-row-title);text-transform:none;white-space:nowrap}
  :is(.picks__list,.home .events-grid) .event-card__mmeta{display:block;font:var(--text-xs)}
  :is(.picks__list,.home .events-grid) .event-card__actions{padding-top:var(--space-4)}
  :is(.picks__list,.home .events-grid) .action-strip{gap:var(--space-2);padding:var(--space-4)}
  :is(.picks__list,.home .events-grid) .action-strip__btn{width:32px;height:32px;padding:var(--space-6)}
  :is(.picks__list,.home .events-grid) .action-strip__btn svg{width:20px;height:20px;stroke-width:2}
}

/* ---- Homepage, phone (Figma "Home / App — Signed in" 1812:75746, 390 wide; sections only — the app status bar, header and
   segmented control are not part of the web page) ----
   16px gutter · Featured: Main XS + latest stories in a rail (236 wide, 12 apart) · For you: full-bleed header panel (32/16 padding),
   posts rail (300 wide, 16 apart) · Foley's Takes picks rail and Events Calendar rail (300 wide, 8 apart) · What to Watch rail (posters
   240 wide) · Storied Originals rail with the desktop cards (280 wide, columns of two horizontals + a vertical) · Fresh: two columns.
   Every rail starts at the gutter and bleeds to the right edge of the screen. */
@media (max-width:599px){
  .home .wrap{width:calc(100% - 2 * var(--space-16))}
  :is(.featured__list,.foryou__posts,.picks__list,.home .events-grid,.worth__grid,.originals__grid){display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(-1 * var(--space-16));padding-inline:var(--space-16);scroll-padding-inline:var(--space-16)}
  :is(.featured__list,.foryou__posts,.picks__list,.home .events-grid,.worth__grid,.originals__grid)::-webkit-scrollbar{display:none}
  .featured__latest{overflow:visible}
  .featured__list{gap:var(--space-12);transform:none}
  .featured__list>.story-card{flex:0 0 236px;scroll-snap-align:start}
  .picks__list{gap:var(--space-8)}
  .picks__list>.event-card{flex:0 0 300px;scroll-snap-align:start}
  .home .events-grid{gap:var(--space-8)}
  .home .events-grid__col{display:contents}
  .home .events-grid .event-card{flex:0 0 300px;scroll-snap-align:start}
  .home__mdivider{display:block;margin:var(--space-40) calc(50% - 50vw) 0}
  .worth__grid{gap:var(--space-12)}
  .worth__grid .video-card--vertical{width:240px}
  .originals__grid{gap:var(--space-24);margin-top:var(--space-24)}
  .originals__grid .originals__col{display:flex;flex-direction:column;gap:var(--space-24);flex:0 0 280px}
  .originals__grid>.video-card,.originals__grid .video-card{width:280px}
  .originals__grid .video-card--vertical .video-card__thumb{aspect-ratio:9/16}
  .originals__grid .video-card__title{font:var(--text-card-title-sm)}
  .originals__grid .video-card__meta{font:var(--text-sm)}
  .fresh__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12) var(--space-10)}
  .fresh__grid .story-card__title{-webkit-line-clamp:2}
}
@media (min-width:600px){.home__mdivider{display:none}}   /* phones show it (rule above); was unscoped, so it hid the phone divider too */
@media (max-width:599px){
  .featured__grid{grid-template-columns:minmax(0,1fr)}
  .home .originals-stage{padding:0}
  .home .originals{border-radius:0;padding:var(--space-40) 0}
  .originals__inner{width:calc(100% - 2 * var(--space-16))}
}
/* Dark (Colors mode Dark): the dark logo art (#14120F) disappears on surface/background, so use the light logo file (#FFFDFA, same art) */
:root[data-theme="dark"] :is(.nav__logo img,.footer__wordmark)[src$="border-dark.svg"]{content:url("../assets/logo/border-light.svg")}
/* Footer, desktop (Figma Footer 15:549 in Homepage / Desktop 15:252, 1296 tall): a column with 48 top / 24 bottom padding and 32 between
   Border, Newsletter_Band (210: the card, no divider since the 2026-10-25 redesign), Top Section, Big Brand Area and Bottom Bar; the Bottom Bar is 24 + divider + 16 + row + 24 (81) */
@media (min-width:1024px){
  .footer{padding:var(--space-48) 0 var(--space-24)}
  .footer > * + *{margin-top:var(--space-32)}
  .footer__bottom{padding-top:var(--space-40)}
}
/* Storied Originals cards, desktop homepage (Figma Original Picks 15:301 › Video Card): horizontal = 158 thumb + 12 padding, 14/18 title,
   12/16 meta in a 32 row with the ⋮ (236); vertical = 9:16 poster (280×498) + 8/2 padding, 16/20 title, 32 meta row (590). Columns top-aligned. */
@media (min-width:1024px),(max-width:599px){   /* phones use the same card anatomy (Figma 1530:55430) */
  .home .originals__grid{align-items:start}
  .home .originals .video-card--horizontal .video-card__body{padding:var(--space-12);gap:var(--space-4)}
  .home .originals .video-card--horizontal .video-card__title{font:var(--text-card-title-sm)}
  .home .originals .video-card--vertical{height:auto}
  .home .originals .video-card--vertical .video-card__thumb{flex:none;aspect-ratio:9/16}
  .home .originals .video-card__meta-row{min-height:32px}   /* the ⋮ button (32) sets the row */
  .home .originals .video-card__meta{font:var(--text-xs)}
}
/* Featured, desktop (Figma 15:267): 136 top / 40 bottom padding; Follow Topics (and For you when signed in) start right after it */
@media (min-width:1024px){
  .home .featured{padding-bottom:var(--space-40)}
  .home .follow-banner{margin-top:0}
}
/* For you posts, every width (Prompt 31 Part 1; Figma 1798:98880 desktop, 2409:144983 tablet, 1812:76018 phone). Feed_Post › Story Card:
   190 image, content min 140 with 8/16 padding and 8 gaps, Small badge row 20 (the ⋮ overhangs it), 16/20 title (3 lines), 28px author +
   read time (no date). Event Card: the Compact card with its time / city column at every width, also on phones (the phone frame keeps
   the desktop anatomy here, unlike the phone rails). */
/* Prompt 33: the card image keeps 16:9 (shared rule in story-card.css) */
.home .foryou__posts .story-card .story-card__content{min-height:140px;box-sizing:border-box;justify-content:center;padding:var(--space-8) var(--space-16);gap:var(--space-8)}
.home .foryou__posts .story-card__tags-row{height:20px;align-items:center}
.home .foryou__posts .story-card__title{font:var(--text-card-title);-webkit-line-clamp:3}
.home .foryou__posts .story-card__byline{flex-wrap:nowrap;gap:var(--space-12)}
.home .foryou__posts :is(.author__name,.story-card__meta){font:var(--text-xs)}
.home .foryou__posts .story-card__meta>span:not(:first-child){display:none}
.home .foryou__posts .event-card__time{font:var(--text-xs)}   /* Time row 12/16 (Desktop/13) */
.home .foryou__posts .event-card__title{font:var(--foryou-event-title)}
.home .foryou{--foryou-event-title:600 20px/28px var(--font-display)}   /* not a Figma token yet: the title is a fixed 20/28 in all three frames (the text-xl token drops to 16/20 on phones) */
/* For you, tablet and phone (Figma 2409:144983 at 744, 1812:76018 at 390, both 474 tall): one full-width panel (border/subtle fill and
   1px border, radius md, 16 padding, 20 between header and posts) right after Featured, no section padding. Header 48: 44px member
   photo, 12 gap, 12/16 eyebrow + 22/26 title, Primary "Feed" button (48) at the bottom right. Posts rail 16 inside, 300 posts 16
   apart, clipped at the panel padding. Post header 13/18 (Mobile/12). */
@media (max-width:1023px){
  .home .foryou{padding:0}
  .home .foryou>.wrap{width:100%}
  .home .foryou__panel{gap:var(--space-20);padding:var(--space-16);border:1px solid var(--border-subtle);background:var(--border-subtle);border-radius:var(--radius-md)}
  .home .foryou .section-header{flex-wrap:nowrap;align-items:flex-end;gap:var(--space-12);min-height:48px;margin:0;padding:0;background:none;border-radius:0}
  .home .foryou .section-header__group{gap:var(--space-12)}
  .home .foryou .section-header__photo{width:44px;height:44px}
  .home .foryou .section-header__initials{font:var(--text-lg)}
  .home .foryou .section-header__eyebrow{font:var(--text-mobile-xs)}
  .home .foryou .section-header__title{font:var(--text-mobile-3xl)}
  .home .foryou .section-header__actions{flex:none}
  .home .foryou__posts{gap:var(--space-16);margin-inline:0;padding-inline:var(--space-16);scroll-padding-inline:var(--space-16)}
  .home .foryou__posts>.feed-post{flex:0 0 300px}
  .home .foryou__posts .feed-post__head{font:var(--text-mobile-sm)}
  .home .foryou__bar{display:none}
}
/* Dividers around For you (signed in): tablet frame = divider above, none below; desktop and phone = none above, divider below */
.foryou__divider{display:none}
@media (min-width:600px) and (max-width:1023px){
  .home .foryou__divider{display:block}
  html.is-signed-in .home .home__takes-divider{display:none}
}
@media (max-width:640px){   /* undo the stacked Device=Mobile event card (event-card.css) inside For you */
  .home .foryou__posts .event-card{display:flex;align-items:center}
  .home .foryou__posts :is(.event-card__date,.event-card__divider){display:flex}
  .home .foryou__posts .event-card__divider{display:block}
  .home .foryou__posts .event-card__content{display:flex}
  .home .foryou__posts .event-card__title{white-space:nowrap}
  .home .foryou__posts .event-card__mmeta{display:none}
  .home .foryou__posts .event-card__actions{padding-top:0}
}
/* Members on phones (Figma Home / App 1530:54592, Members Perks · Mobile): same compact layout as tablet (home-tablet.css) with the
   phone sizes: 20 + 16 top / bottom, 358 content, 12 between visual, intro and accordion, 120 faded visual, full-width lead */
@media (max-width:599px){
  .home .members>.divider{display:none}
  .home .members .wrap{width:calc(100% - 2 * var(--space-16))}
  .home .members__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-12);padding:calc(var(--space-20) + var(--space-16)) 0}
  .home .members__col{gap:var(--space-12)}
  .home .members__visual{order:-1;max-width:none;aspect-ratio:auto;height:120px;border-radius:var(--radius-xl);opacity:.3;box-shadow:var(--shadow-card-rest)}
  .home .members__visual img{object-position:50% 18%}   /* member pictures (2026-10-26): show the top of the phone screen in the 120 strip */
  .home .members__head{gap:var(--space-8)}
  .home .members__head .section-header__eyebrow{font:var(--text-xs)}
  .home .members__head .section-header__title{font:var(--text-mobile-4xl)}
  .home .members__lead{margin:0;max-width:200px;font:var(--text-sm)}   /* Figma wraps the lead in two lines */
  .home .members .acc{max-width:none;gap:var(--space-12)}
  .home .members .acc__items{gap:var(--space-4)}
  .home .members .acc-item{padding:var(--space-10) var(--space-16)}
  .home .members .acc-item__head{gap:var(--space-12);min-height:44px}
  .home .members .acc-item__icon{width:32px;height:32px}
  .home .members .acc-item__title{font:var(--text-card-title-sm)}
  .home .members .acc-item__toggle{width:36px;height:36px}
  .home .members .acc-item__body{margin-top:var(--space-8);padding-left:var(--space-56);font:var(--text-mobile-sm)}
  .home .members .acc__footer{flex-direction:column;align-items:stretch;gap:var(--space-16);text-align:center}
  .home .members .acc__footer .btn--primary{width:100%;height:48px;font:var(--text-xs)}
  .home .members .acc__footer .btn--secondary{height:auto;min-height:0;padding:0;border:0;background:none;box-shadow:none;font:var(--text-mobile-sm);color:var(--text-primary)}
}
/* Phones (Figma Home / App 1533:57974 Fresh, 1533:57347 Foley's Takes): Fresh 40 top / bottom, 14/18 titles; Foley's story card
   16:9 image, content 10/12/12 padding and 6 gap, 14/18 title, Author XS (20 avatar, 12/16) and 12/16 meta. Dates stay (standing rule). */
@media (max-width:599px){
  .home .section:has(.fresh__grid){padding-block:var(--space-40)}
  .home .fresh__grid .story-card__title{font:var(--text-card-title-sm)}
  .home .fresh__grid{margin-top:var(--space-16);gap:var(--space-12)}   /* Card Grid (1533:57982): 16 under the header, cards 12 apart both ways (Prompt 28 review) */
  /* Phone cards were stretching to the 340px Small size and centering the text, which left a tall gap under the image */
  .home .fresh__grid .story-card{min-height:0;height:auto}
  .home .fresh__grid .story-card__content{min-height:0;height:auto;flex:none;justify-content:flex-start;padding:var(--space-16) var(--space-12) var(--space-12);gap:var(--space-6)}
  .home .takes .story-card__media{aspect-ratio:16/9;height:auto}
  .home .takes .story-card__media img{height:100%}
  .home .takes .story-card__content{padding:var(--space-10) var(--space-12) var(--space-12);gap:var(--space-6)}
  .home .takes .story-card__title{font:var(--text-card-title-sm)}
  .home .takes .story-card .author__avatar{width:20px;height:20px}
  .home .takes .story-card :is(.author__name,.story-card__meta){font:var(--text-xs)}
}
/* Foley's Takes on phones (Figma 1533:57347): 20 top / bottom, 16 under the header, 16 between profile, story card, label and picks rail */
@media (max-width:599px){
  .home .section:has(.takes){padding-block:var(--space-20)}
  .home .takes{margin-top:var(--space-16);gap:var(--space-16)}
  .home .takes__author{gap:var(--space-16)}
  .home .takes__author .author-profile{gap:var(--space-12)}   /* Prompt 31: Author Profile 1812:75780 is 56 tall: 56px avatar, 12 to the text */
  .home .takes__author .author-profile .avatar{width:56px;height:56px}
}
/* Events Calendar + What to Watch on phones (Figma 1533:57580 / 1802:74365 / 1533:57873): two sections of 20 top / bottom with 16 under
   each header, split by the full-bleed Section Divider */
@media (max-width:599px){
  .home .section:has(.events-grid){padding-block:var(--space-20)}
  .home .events-grid{margin-top:var(--space-16)}
  .home .home__mdivider{width:100vw;margin:var(--space-20) calc(50% - 50vw) 0}
  .home .worth.worth--head{margin-top:var(--space-20)}
  .home .worth > .section-header{margin-bottom:var(--space-16)}
}

/* Prompt 28 review: on narrow video cards (tablet What to Watch 158 wide, phone Originals) the meta line ran under the ⋮ button with a
   hard cut. The length and the dot stay whole, the last part ends in an ellipsis (prompt 26 shows the full text on hover).
   Shared fix also reported for video-card.css. */
.home .video-card__meta{min-width:0;overflow:hidden}
.home .video-card__meta>:not(:last-child){flex:none}
.home .video-card__meta>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}