/* PREVIOUSLY · pv-section-v1 · the shared section template (2026-11-11)
   One layout for every section front (Entertainment, Sports, Culture, Food,
   Provenance, Newsroom). The homepage is not a section front and never loads
   this file.

   Opt-in only: nothing here applies unless the page's <main> carries the class
   "pv-sec". Built on the Provenance family (same tokens, same faces), so Food,
   Provenance and the Newsroom move onto it without a visual jump.

   Page order (every section, always the same):
     1. .sx-head     slim section header: name and sub-tabs
     2. .sx-live     optional live band (Sports scores only)
     3. .sx-lead     the top story: photo at full strength, never faded, with a
                     modest headline on a dark band under it
     4. .sx-latest   the next four stories, right under the lead
     5. .sx-doors    the section's collections as world doors
     6. .sx-note     one closing line
   Worlds (.sx-world) are baked hidden into the page and open full screen.
   Every story in a section sits behind one of its doors; there is no
   separate list of every story.

   Faces: 'Previously Display' for section names and story headlines (Regular
   only), 'Previously Headline' (Anton) for world names on doors and in worlds,
   Inter for everything else. Dark theme d3 only. No pill shapes. Gold is the
   only accent; coral stays reserved for LIVE. */

.pv-sec{
  --sx-ink:#0C121B; --sx-gold:#F2BC68; --sx-gold-soft:rgba(242,188,104,.24); --sx-paper:#F3F1E9;
  --sx-text:#C7D0DA; --sx-text-2:#A4B3C2; --sx-text-3:#8FA3B5; --sx-rule:#223343; --sx-surface:#141F2C;
  --sx-deep:#0A0F16; --sx-live:#F46B62; --sx-gut:48px; --sx-max:1400px;
  --sx-display:'Previously Display','Playfair Display',Georgia,serif;
  --sx-sign:'Previously Headline','Anton','Arial Narrow',Impact,sans-serif;
  --sx-body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  display:block; max-width:var(--sx-max); margin:0 auto; padding:0 var(--sx-gut) 40px;
  color:var(--sx-paper); font-family:var(--sx-body); font-size:16px; line-height:1.55;
}
body:has(main.pv-sec){background:#0C121B}
/* Embedded in a native page (Sports story area): the page keeps its own
   width, gutters and background. */
.pv-sec.pv-sec--embed{max-width:none;margin:0;padding:0;background:transparent}
.pv-sec *,.sx-world *{box-sizing:border-box}
.pv-sec a,.sx-world a{color:inherit;text-decoration:none}
.pv-sec a:focus-visible,.pv-sec button:focus-visible,.sx-world a:focus-visible,.sx-world button:focus-visible{outline:2px solid var(--sx-gold,#F2BC68);outline-offset:3px}
.pv-sec img,.sx-world img{display:block;max-width:100%}
.sx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* small shared parts */
.sx-k{margin:0;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sx-gold)}
.sx-time{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sx-text-2)}
.sx-credit{font-size:10.5px;line-height:1.5;color:var(--sx-text-2);overflow-wrap:anywhere}

/* section heading used by every block: kicker, title, optional "all" link */
.sx-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 22px}
.sx-sh h2{margin:6px 0 0;font-family:var(--sx-display);font-weight:400;font-size:clamp(26px,2.4vw,32px);line-height:1.08;letter-spacing:-.005em}
.sx-sh h2::after{content:"";display:block;width:48px;height:1px;background:var(--sx-gold);margin-top:14px}
.sx-sh-all{flex:none;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-gold);padding:10px 0;border-bottom:1px solid var(--sx-gold)}
.sx-sh-all:hover{color:var(--sx-paper)}

/* ---------------- 1. section header ---------------- */
.sx-head{padding:22px 0 0;border-bottom:1px solid var(--sx-rule)}
.sx-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:16px}
.sx-head h1{margin:0;font-family:var(--sx-display);font-weight:400;font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-.01em}
.sx-head h1 span{color:var(--sx-gold)}
.sx-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--sx-gut));padding:0 var(--sx-gut)}
.sx-tabs::-webkit-scrollbar{display:none}
.sx-tabs a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin-bottom:-1px;border-bottom:2px solid transparent;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-text-2)}
.sx-tabs a:first-child{padding-left:0}
.sx-tabs a:hover{color:var(--sx-paper)}
.sx-tabs a[aria-current="page"]{color:var(--sx-gold);border-bottom-color:var(--sx-gold)}

/* ---------------- 2. live band (Sports scores) ---------------- */
.sx-live{margin:22px 0 0}
.sx-live-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sx-text-2)}
.sx-live-h b{color:var(--sx-gold);font-weight:700}
.sx-live-h a{margin-left:auto;color:var(--sx-gold)}
.sx-scores{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(-1*var(--sx-gut));padding:0 var(--sx-gut) 4px}
.sx-scores::-webkit-scrollbar{display:none}
.sx-score{flex:0 0 176px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--sx-surface);border:1px solid var(--sx-rule)}
.sx-score:hover{border-color:var(--sx-gold-soft)}
.sx-score-lg{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--sx-gold)}
.sx-score-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.25}
.sx-score-t img{width:20px;height:20px;object-fit:contain;flex:none}
.sx-score-t b{margin-left:auto;font-variant-numeric:tabular-nums}
.sx-score-s{font-size:11px;letter-spacing:.06em;color:var(--sx-text-2)}
.sx-score-s.is-live{color:var(--sx-live);font-weight:700}

/* ---------------- 3. the lead (owner pick, option A) ----------------
   The photo runs at full strength: no veil, gradient, filter or mask, ever.
   The headline sits on its own dark band under the photo. */
.sx-lead{margin:26px 0 0;background:var(--sx-surface)}
.sx-lead figure{margin:0}
.sx-lead figure>a{display:block;overflow:hidden;background:var(--sx-ink)}
.sx-lead img{width:100%;height:auto;aspect-ratio:16/9;max-height:min(70vh,660px);object-fit:cover;object-position:50% 30%;opacity:1;filter:none;-webkit-mask-image:none;mask-image:none}
.sx-lead figcaption{padding:10px 28px 0}
.sx-lead-copy{padding:18px 28px 26px}
.sx-lead h2{margin:10px 0 12px;font-family:var(--sx-display);font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.12;max-width:30ch;text-wrap:balance;overflow-wrap:break-word}
.sx-lead h2 a:hover{color:var(--sx-gold)}
.sx-lead-dek{margin:0 0 18px;max-width:66ch;font-size:15px;line-height:1.6;color:var(--sx-text)}
.sx-lead-meta{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--sx-rule)}
.sx-go{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-gold);white-space:nowrap}
.sx-go:hover{color:var(--sx-paper)}

/* ---------------- 4. the latest: four stories ---------------- */
.sx-latest{margin:44px 0 0}
.sx-latest-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.sx-tile{min-width:0;display:flex;flex-direction:column;gap:8px}
.sx-tile-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sx-surface);margin-bottom:6px}
.sx-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.sx-tile:hover .sx-tile-img img{transform:scale(1.02)}
.sx-tile h3{margin:0;font-family:var(--sx-display);font-weight:400;font-size:clamp(18px,1.45vw,21px);line-height:1.18;text-wrap:balance;overflow-wrap:break-word}
.sx-tile:hover h3{color:var(--sx-gold)}

/* ---------------- 5. world doors ---------------- */
.sx-doors{margin:64px 0 0}
.sx-doors-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sx-door{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;background:var(--sx-surface);color:#fff;isolation:isolate;
  opacity:0;animation:sx-rise .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*45ms)}
.sx-door-img,.sx-door-img img{position:absolute;inset:0;width:100%;height:100%}
.sx-door-img img{object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sx-door-img--type{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1A2737,#0F1823)}
.sx-door-img--type span{font-family:var(--sx-sign);font-size:clamp(46px,6vw,84px);letter-spacing:.02em;color:rgba(242,188,104,.16);text-transform:uppercase}
/* Doors are signs, not story photos: one bottom shade so the sign reads. */
.sx-door::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,12,18,.5) 0%,rgba(8,12,18,0) 28%,rgba(8,12,18,.22) 50%,rgba(8,12,18,.94) 100%)}
.sx-door-tx{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:18px}
.sx-door-n{font-family:var(--sx-sign);font-size:30px;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.5);text-wrap:balance;overflow-wrap:break-word}
.sx-door-c{margin-top:auto;padding-top:8px;border-top:1px solid rgba(242,188,104,.45);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sx-gold)}
.sx-door:hover .sx-door-img img,.sx-door:focus-visible .sx-door-img img{transform:scale(1.05)}
@keyframes sx-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* A collection page leads with the doors, larger. */
.sx-doors--page{margin-top:30px}
.sx-doors--page .sx-doors-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sx-doors--page .sx-door{aspect-ratio:4/5}
.sx-doors--page .sx-door-n{font-size:38px}
/* Three worlds fill one row instead of leaving a gap. Four fill the row
   the grid was built for, on the front and on the collection page. */
.sx-doors--n3 .sx-doors-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-doors--n4 .sx-doors-grid,.sx-doors--page.sx-doors--n4 .sx-doors-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------------- a world (full screen) ---------------- */
.sx-world{position:fixed;inset:0;z-index:140;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#0C121B;color:#F3F1E9;font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.55;
  --sx-gold:#F2BC68;--sx-paper:#F3F1E9;--sx-text:#C7D0DA;--sx-text-2:#A4B3C2;--sx-rule:#223343;--sx-surface:#141F2C;--sx-gut:16px;
  --sx-display:'Previously Display','Playfair Display',Georgia,serif;--sx-sign:'Previously Headline','Anton','Arial Narrow',Impact,sans-serif;
  transition:opacity .24s ease,transform .28s cubic-bezier(.2,.7,.2,1);
  padding-bottom:calc(110px + env(safe-area-inset-bottom)) /* clear of the floating podcast player */}
.sx-world[hidden]{display:none}
.sx-world.is-entering{opacity:0;transform:translateY(26px)}
.sx-world.is-leaving{opacity:0;transform:translateY(18px);pointer-events:none}
html.sx-locked,html.sx-locked body{overflow:hidden}

/* world header: the photo clean, the name on a band under it */
.sx-w-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) var(--sx-gut) 10px;background:rgba(12,18,27,.94);border-bottom:1px solid var(--sx-rule);backdrop-filter:blur(8px)}
.sx-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 8px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22);cursor:pointer;
  font-family:var(--sx-sign);font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.sx-back svg{width:16px;height:16px}
.sx-back:hover{border-color:var(--sx-gold);color:var(--sx-gold)}
.sx-w-sec{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sx-text-2)}
.sx-w-hero{margin:0;background:#0A0F16}
.sx-w-hero img{width:100%;height:auto;aspect-ratio:21/9;max-height:46vh;object-fit:cover;object-position:50% 35%}
.sx-w-band{max-width:1400px;margin:0 auto;padding:16px var(--sx-gut) 6px}
.sx-w-band h2{margin:0;font-family:var(--sx-sign);font-weight:400;font-size:clamp(40px,9vw,88px);line-height:.95;letter-spacing:.01em;text-transform:uppercase}
.sx-w-c{margin:8px 0 0;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sx-gold)}
.sx-w-body{max-width:1400px;margin:0 auto;padding:18px 0 0}

/* the deck: one card at a time, swipe on phones */
.sx-deck-wrap{position:relative}
.sx-deck{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--sx-gut);padding:0 var(--sx-gut) 4px;scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch}
.sx-deck::-webkit-scrollbar{display:none}
.sx-card{flex:0 0 86%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;min-width:0;background:var(--sx-surface);border:1px solid var(--sx-rule)}
.sx-card:only-child{flex-basis:100%}
.sx-c-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#0A0F16}
.sx-c-img img{width:100%;height:100%;object-fit:cover}
.sx-c-img--poster{aspect-ratio:auto;height:100%;min-height:260px}
.sx-c-img--type{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1A2737,#0F1823)}
.sx-c-img--type span{font-family:var(--sx-sign);font-size:56px;color:rgba(242,188,104,.2);text-transform:uppercase}
.sx-c-tx{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 16px 18px}
.sx-c-h{margin:0;font-family:var(--sx-display);font-weight:400;font-size:24px;line-height:1.12;color:#fff;text-wrap:balance}
a.sx-card:hover .sx-c-h{color:var(--sx-gold)}
.sx-c-d{margin:0;font-size:14.5px;line-height:1.5;color:var(--sx-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sx-c-m{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sx-text-2)}
.sx-c-go{margin-top:auto;padding-top:6px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sx-gold)}
.sx-deck-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding:12px var(--sx-gut) 0}
.sx-arrow{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#F3F1E9;border:1px solid rgba(233,238,243,.2);cursor:pointer}
.sx-arrow svg{width:18px;height:18px}
.sx-arrow:hover:not(:disabled){color:var(--sx-gold);border-color:var(--sx-gold)}
.sx-arrow:disabled{opacity:.3;cursor:default}
.sx-pos{min-width:64px;text-align:center;font-size:12px;letter-spacing:.2em;color:var(--sx-text-2);font-variant-numeric:tabular-nums}

/* a shelf inside a world: a small labelled row of more cards */
.sx-shelf{padding:34px 0 0}
.sx-shelf-h{margin:0 var(--sx-gut) 12px;padding-top:12px;border-top:1px solid rgba(242,188,104,.4);font-family:var(--sx-sign);font-weight:400;font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--sx-gold)}
.sx-shelf .sx-card{flex-basis:62%}

.sx-w-end{display:flex;flex-wrap:wrap;gap:10px;padding:34px var(--sx-gut) 8px;max-width:1400px;margin:0 auto}
.sx-w-end a{flex:1 1 220px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;
  font-family:var(--sx-sign);font-size:14px;letter-spacing:.2em;text-transform:uppercase}
.sx-desk{border:1px solid var(--sx-gold);color:var(--sx-gold)}
.sx-desk:hover{background:rgba(242,188,104,.1)}
.sx-nextw{background:var(--sx-gold);color:#0C121B !important}
.sx-nextw:hover{background:#F7CD88}
.sx-nextw svg{width:18px;height:18px}

/* ---------------- 6. closing line ---------------- */
.sx-note{margin:72px 0 0;padding:34px 0 0;border-top:1px solid var(--sx-rule);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.sx-note p{margin:0;font-family:var(--sx-display);font-size:clamp(20px,2vw,26px);line-height:1.2}
.sx-note a{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-gold);border-bottom:1px solid var(--sx-gold);padding-bottom:8px}

/* ---------------- tablet ---------------- */
@media (max-width:1000px){
  .pv-sec{--sx-gut:28px}
  .sx-latest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-doors-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .sx-doors--n4 .sx-doors-grid,.sx-doors--page.sx-doors--n4 .sx-doors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-door-n{font-size:24px}
}
/* ---------------- phone ---------------- */
@media (max-width:700px){
  .pv-sec{--sx-gut:16px;padding-bottom:30px}
  .sx-head{padding-top:14px}
  .sx-head-row{padding-bottom:12px}
  .sx-head h1{font-size:30px}
  .sx-tabs a{padding:0 12px}
  .sx-lead{margin:16px calc(-1*var(--sx-gut)) 0}
  .sx-lead img{aspect-ratio:4/3;max-height:none}
  .sx-lead figcaption{padding:8px var(--sx-gut) 0}
  .sx-lead-copy{padding:14px var(--sx-gut) 20px}
  .sx-lead h2{font-size:23px;line-height:1.16}
  .sx-lead-dek{font-size:14px}
  .sx-latest{margin-top:32px}
  .sx-latest-grid{gap:22px 12px}
  .sx-tile h3{font-size:16px}
  .sx-tile .sx-time{display:none}
  .sx-doors{margin-top:46px}
  .sx-doors-grid,.sx-doors--page .sx-doors-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sx-doors--n4 .sx-doors-grid,.sx-doors--page.sx-doors--n4 .sx-doors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-door,.sx-doors--page .sx-door{aspect-ratio:4/5}
  .sx-doors--n3 .sx-door:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .sx-doors--n4 .sx-door:first-child{grid-column:auto;aspect-ratio:4/5}
  .sx-door-tx{padding:12px}
  .sx-door-n,.sx-doors--page .sx-door-n{font-size:21px}
  .sx-door-c{font-size:9.5px;letter-spacing:.16em}
  .sx-sh{margin-bottom:16px}
  .sx-sh h2{font-size:26px}
  .sx-note{margin-top:52px}
  .sx-score{flex-basis:156px}
}
/* ---------------- worlds on tablet and laptop ---------------- */
@media (min-width:700px){
  .sx-world{--sx-gut:28px}
  .sx-card{flex-basis:70%}
  .sx-shelf .sx-card{flex-basis:calc((100% - 24px)/3)}
}
@media (min-width:1100px){
  .sx-world{--sx-gut:40px}
  .sx-w-hero img{max-height:52vh}
  .sx-card{flex-basis:100%;flex-direction:row;min-height:0}
  .sx-card .sx-c-img{flex:0 0 58%;aspect-ratio:16/10}
  .sx-card .sx-c-img--poster{flex-basis:34%;aspect-ratio:2/3;height:auto;min-height:0}
  .sx-c-tx{justify-content:center;gap:12px;padding:34px 38px}
  .sx-c-h{font-size:38px;line-height:1.06}
  .sx-c-d{font-size:16px;-webkit-line-clamp:5}
  .sx-deck-nav{justify-content:flex-end;padding-right:var(--sx-gut)}
  .sx-shelf .sx-card{flex-direction:column}
  .sx-shelf .sx-card .sx-c-img{flex:none}
  .sx-shelf .sx-c-tx{padding:16px 18px 18px}
  .sx-shelf .sx-c-h{font-size:22px}
  .sx-w-end{justify-content:flex-end}
  .sx-w-end a{flex:0 0 auto;min-width:260px}
}
@media (prefers-reduced-motion:reduce){
  .sx-door{animation:none;opacity:1}
  .sx-world,.sx-door-img img,.sx-tile-img img{transition:none}
}