.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__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;color:var(--text-primary)}
.nav__link[aria-current="page"]{background:var(--accent-default)}
.nav__actions{display:flex;gap:var(--space-12)}

/* Featured */
/* Hero: main story + a column of 5 stories, 2 visible at a time. The hero pins while
   scrolling slides the column up to reveal the other 3, then the page continues. */
.featured{--hero-h:747px;--hero-gap:20px;--hero-card:363.5px;--hero-shift:calc(5*var(--hero-card) + 4*var(--hero-gap) - var(--hero-h));padding:136px 0 0}
.featured__track{height:calc(var(--hero-h) + var(--hero-shift))}
.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);overflow:hidden;align-items:stretch}
.featured__grid>.story-card--main{height:100%;max-height:100%;min-height:0}
.featured__latest{height:var(--hero-h);overflow:hidden;border-radius:var(--radius-md)}
.featured__list{display:flex;flex-direction:column;gap:var(--hero-gap);height:100%;min-height:0;will-change:transform;transform:translate3d(0,calc(var(--hero-p,0)*var(--hero-shift)*-1),0)}
.featured__list>.story-card{flex:none;height:var(--hero-card);min-height:0}
.featured__list .story-card--small .story-card__content,.featured__list .story-card--foley .story-card__content{flex:1}
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .featured__track{height:auto}.featured__sticky{position:static}
  .featured__grid{grid-template-columns:1fr;height:auto;overflow:visible}.featured__latest{height:auto;overflow:visible}
  .featured__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;overflow:visible;transform:none}
  .featured__grid>.story-card--main{aspect-ratio:870/747;height:auto;max-height:none}
}
.follow-banner{margin-top:64px}

/* 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__pair{display:contents}
.rail{display:contents}
.rail__pager{display:none}
.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:64px}
/* 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:900px){.takes{grid-template-columns:1fr}.takes__author{position:static}}
.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(--neutral-100);padding:var(--space-64) 0 0;height:508px}
.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{position:relative;overflow:hidden;background:var(--surface-background);display:block}
.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;opacity:.8}
.footer__top{display:grid;grid-template-columns:371px 188px 120px 120px;justify-content:space-between;padding:var(--space-48) var(--space-64) 0;height:400px;box-sizing:border-box;column-gap:var(--space-24)}
.footer__explore{padding-top:var(--space-16)}
.footer__explore a{display:block;width:max-content;font:var(--text-footer-nav-desktop);text-transform:uppercase;letter-spacing:.02em;height:72px;padding:var(--space-12) 0;box-sizing:border-box;border-bottom:1px solid var(--border-strong)}
.footer__explore a:last-child{border-bottom:0}
.footer__col{display:flex;flex-direction:column}
.footer__col h4{font:var(--text-footer-meta);color:var(--text-secondary);text-transform:uppercase;height:28px;margin:0;font-weight:400}
.footer__col h4+a{border-top:1px solid rgba(196,185,166,.3)}
.footer__col a{display:block;font:var(--text-footer-secondary);height:53px;box-sizing:border-box;padding:var(--space-12) 0 0;border-bottom:1px solid rgba(196,185,166,.3)}
.footer__col a:first-of-type{height:53px}
.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__bottom{position:relative;margin:0 var(--space-64);padding:var(--space-40) 0 var(--space-24);border-top:1px solid rgba(196,185,166,.3);font:var(--text-footer-meta);color:var(--text-secondary);margin-top:var(--space-24);z-index:1}
.footer__top,.footer__brand{z-index:1}

@media (max-width:900px){
  .footer__border{margin:0 var(--space-16)}
  .footer__top{grid-template-columns:1fr 1fr;height:auto;padding:var(--space-32) var(--space-16) 0;row-gap:var(--space-32)}
  .footer__explore{grid-column:1/-1;padding-top:0}
  .footer__explore a{font:var(--text-footer-nav-mobile);text-transform:uppercase;height:56px;padding:var(--space-8) 0}
  .footer__col:last-child{grid-column:1/-1}
  .footer__brand{height:auto;padding:var(--space-48) 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{position:relative;right:auto;top:auto;width:300px;align-self:flex-end;margin:-30px -60px -150px 0}
  .footer__bottom{margin:var(--space-16) var(--space-16) 0;padding:var(--space-24) 0}
}

/* ---- Figma homepage pass (15:252) ---- */
.follow-banner__copy{color:var(--text-primary)}
.takes__author .story-card__media{aspect-ratio:auto;height:191px}
.worth{margin-top:var(--space-48)}
/* Newsletter: beige rounded container inset 20px, previews run off its bottom edge */
.newsletter{background:transparent;padding:40px 20px;height:auto}
.newsletter__box{background:var(--neutral-100);border-radius:var(--radius-md);padding:var(--space-64) 0 0;height:auto;overflow:hidden;box-sizing:border-box}
.newsletter:not(:has(.ticker)){padding-bottom:0}
.newsletter__box:not(:has(.ticker)){padding-bottom:var(--space-64)}
.newsletter__box .ticker{margin-top:var(--space-32);height:auto}
/* Originals: vertical cards use the small body title */
.originals .video-card--vertical .video-card__title{font:var(--text-base);font-weight:400}
.originals .video-card--vertical .video-card__body{gap:var(--space-8)}

/* 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,64px)}
.worth--head .section-header{margin-bottom:var(--space-24)}

/* Homepage / Mobile (Figma 399:6843): stacked follow line and sideways swipe rails. */
@media (max-width:767px){
  .featured{padding:88px 0 24px}
  .featured .wrap,.follow-banner .wrap,#takes .wrap,#calendar .wrap,#fresh .wrap{width:min(100% - 32px,1288px)}
  .featured__track,.featured__sticky{height:auto;position:static}
  .featured__grid{display:flex;flex-direction:column;gap:10px;height:auto;overflow:visible}
  .featured__grid>.story-card--main{height:470px;max-height:none;aspect-ratio:auto}
  .rail{display:flex;flex-direction:column;gap:20px;min-width:0;width:100%}
  .rail>.featured__list,.rail>.picks__list,.rail>.events-grid__col,.rail>.worth__grid,.rail>.originals__grid,.rail>.fresh__grid{
    display:flex;flex-direction:row;align-items:stretch;gap:20px;width:auto;max-width:100%;height:auto;min-height:0;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;transform:none;
    grid-template-columns:none;margin:0;padding:0 0 2px}
  .rail>.featured__list::-webkit-scrollbar,.rail>.picks__list::-webkit-scrollbar,.rail>.events-grid__col::-webkit-scrollbar,
  .rail>.worth__grid::-webkit-scrollbar,.rail>.originals__grid::-webkit-scrollbar,.rail>.fresh__grid::-webkit-scrollbar{display:none}
  .rail>.featured__list>.story-card,.rail>.fresh__grid>.story-card{flex:none;width:280px;height:auto;min-height:337px;scroll-snap-align:start}
  .rail>.picks__list>.event-card,.rail>.events-grid__col>.event-card{
    display:flex;flex:none;width:282px;min-height:166px;height:auto;scroll-snap-align:start}
  .rail .event-card__date,.rail .event-card__divider{display:flex}
  .rail .event-card__content{display:flex}
  .rail .event-card__mmeta{display:none}
  .rail .event-card__title{grid-column:auto;white-space:nowrap}
  .rail .event-card__media{grid-column:auto;grid-row:auto;align-self:center;width:72px;height:72px;margin:0}
  .rail>.worth__grid>.video-card,.rail>.originals__grid>.video-card{flex:none;width:280px;scroll-snap-align:start}
  .rail__pager{display:flex;align-items:center;justify-content:space-between;width:100%}
  .rail__pager[hidden]{display:none}
  .rail__dots{display:flex;gap:4px;align-items:center}
  .rail__dot{width:4px;height:4px;padding:0;border:0;border-radius:var(--radius-full);background:var(--border-strong);cursor:pointer}
  .rail__dot.is-current{width:20px;background:var(--accent-default)}
  .rail__count{margin:0;font:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
  .follow-banner{margin-top:0;padding:20px 0 40px}
  .follow-banner__headline{flex-direction:column;gap:28px}
  .follow-banner__pair{display:flex;flex-direction:column;align-items:center;gap:8px}
  .follow-banner__pair>span{font:700 30px/36px var(--font-display)}
  .follow-banner__comma{display:none}
  .follow-banner .rotator{height:36px;padding:4px 0;margin:0}
  .follow-banner .rotator__item{left:0;top:4px}
  .follow-banner .follow-item{height:36px;min-width:72px;padding:4px 8px 4px 12px;gap:8px}
  .follow-banner .follow-item__img{width:24px;height:24px}
  .follow-banner .follow-item__label{font:var(--text-xs)}
  .follow-banner .follow-btn{height:26px;padding:3px 12px}
  .follow-banner__copy{margin-top:20px;font-size:18px;line-height:28px}
  .follow-banner__actions{width:100%;margin-top:20px}
  .follow-banner__actions .btn{flex:1}
  #takes .section-header{flex-wrap:wrap;align-items:flex-start}
  #takes .section-header__actions{width:100%}
  #takes .section-header__actions .btn{flex:1}
  .events-grid{grid-template-columns:1fr}
}

/* Phone rails: one full-width card. The 282px horizontal card collides with the mobile grid. */
@media (max-width:640px){
  .rail>.picks__list>.event-card,
  .rail>.events-grid__col>.event-card{
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:8px;align-items:start;
    flex:0 0 100%;width:100%;min-height:0;height:auto}
  .rail .event-card__date,.rail .event-card__divider{display:none}
  .rail .event-card__content{display:contents}
  .rail .event-card__meta{grid-column:1;gap:8px 4px}
  .rail .event-card__title{grid-column:1;white-space:normal}
  .rail .event-card__mmeta{display:block;grid-column:1 / -1}
  .rail .event-card__actions{grid-column:1 / -1;flex-wrap:nowrap;gap:8px;padding-top:8px}
  .rail .event-card__actions .btn--icon-only:not(.event-card__more){width:40px;height:40px;padding:8px}
  .rail .event-card__more{width:auto;padding:8px 14px}
  .rail .event-card__more .btn__label{display:inline}
  .rail .event-card__more .btn__icon{width:16px;height:16px}
  .rail .event-card__media{grid-column:2;grid-row:1 / span 2;align-self:start;width:80px;height:80px;margin:0}
}
