/* Previously editorial family, v1 (2026-11-07). The Luxury (Provenance) composition as ONE opt-in layer.
   Nothing here applies until a page puts class "pv-ed" on <body>; pages that do not are untouched.
   CSS only: it restyles markup that already exists, so no link, filter, table or control moves or goes.

   Grammar (the same on every page that opts in):
   - a story run is "one large plate, then two compact rows", repeating, with the plate's image side
     alternating on wide screens; on phones the plate runs edge to edge;
   - a department/chapter index is numbered I, II, III... in gold, a ruled row on wide screens and a
     swipeable snap rail on phones;
   - section heads carry one short gold hairline; gold rules, never boxes or pills.

   Type: this file never sets a family. Pages keep their own heading face (Culture: --font-head,
   Luxury: Previously Display). The brand display face ships Regular 400 only: never ask it for 500+.
   Motion: one quiet rise per story, only where the browser can tie it to scrolling, off for visitors
   who ask for less motion. */

.pv-ed{--ed-gold:var(--gold,#F2BC68);--ed-rule:rgba(242,188,104,.22);--ed-rule-2:rgba(242,188,104,.34);--ed-gutter:16px}
@supports (width:1cqw){.pv-ed .fresh-stage,.pv-ed .toc-stage{container-type:inline-size}.pv-ed .fresh-stage>*,.pv-ed .toc-stage>*{--ed-gutter:calc((100vw - 100cqw)/2)}}

/* ---------- section heads: one short gold hairline ---------- */
.pv-ed .fresh-head,.pv-ed .toc-stage .stage-head{position:relative;padding-bottom:22px}
.pv-ed .fresh-head::after,.pv-ed .toc-stage .stage-head::after{content:"";display:block;width:56px;height:1px;background:var(--ed-gold);margin-top:18px}

/* ---------- THE LATEST: large plate, then two compact rows ---------- */
.pv-ed .fresh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.pv-ed .fg-cell{display:grid;column-gap:28px;align-items:start;padding:36px 0 40px;border-top:1px solid var(--ed-rule)}
.pv-ed .fg-thumb{grid-area:img;aspect-ratio:1/1}
.pv-ed .fg-k{grid-area:k;margin-top:0}
.pv-ed .fg-h{grid-area:h;margin-top:8px}

/* compact rows: thumbnail beside kicker + headline */
.pv-ed .fg-cell:not(:nth-child(3n+1)){grid-template-columns:clamp(120px,15vw,200px) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"img k" "img h" "img ."}
.pv-ed .fg-cell:not(:nth-child(3n+1)) .fg-h{font-size:clamp(17px,1.5vw,22px);line-height:1.25}

/* the plate: wide image one side, a large headline the other */
.pv-ed .fg-cell:nth-child(3n+1){grid-column:1/-1;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"img ." "img k" "img h" "img ." ;column-gap:56px;border-top:1px solid var(--ed-rule)}
.pv-ed .fg-cell:nth-child(1){border-top:0;padding-top:14px}
.pv-ed .fg-cell:nth-child(3n+1) .fg-thumb{aspect-ratio:3/2}
.pv-ed .fg-cell:nth-child(3n+1) .fg-k{display:flex;align-items:center;gap:14px;align-self:end}
.pv-ed .fg-cell:nth-child(3n+1) .fg-k::before{content:"";width:32px;height:1px;background:var(--ed-gold)}
.pv-ed .fg-cell:nth-child(3n+1) .fg-h{font-size:clamp(28px,3vw,46px);line-height:1.1;font-weight:700;text-wrap:balance;overflow-wrap:break-word;align-self:start;margin-top:14px}
.pv-ed .fg-cell:nth-child(6n+4){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-areas:". img" "k img" "h img" ". img"}
.pv-ed .fg-cell:not(:nth-child(3n+1)) .fg-k{align-self:end}

/* phone: the plate runs edge to edge; rows are compact and alternate image side */
@media (max-width:759px){
  .pv-ed .fresh-grid{grid-template-columns:minmax(0,1fr)}
  .pv-ed .fg-cell{padding:28px 0 30px;border-top:1px solid var(--ed-rule)}
  .pv-ed .fg-cell:nth-child(1){border-top:0;padding-top:12px}
  .pv-ed .fg-cell:nth-child(3n+1){grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"img" "k" "h";column-gap:0}
  .pv-ed .fg-cell:nth-child(3n+1) .fg-thumb{margin:0 calc(-1*var(--ed-gutter));aspect-ratio:3/2}
  .pv-ed .fg-cell:nth-child(3n+1) .fg-k{margin-top:20px;align-self:auto}
  .pv-ed .fg-cell:nth-child(3n+1) .fg-h{font-size:clamp(26px,7.4vw,32px);margin-top:12px}
  .pv-ed .fg-cell:nth-child(6n+4){grid-template-columns:minmax(0,1fr);grid-template-areas:"img" "k" "h"}
  .pv-ed .fg-cell:not(:nth-child(3n+1)){grid-template-columns:116px minmax(0,1fr);column-gap:18px}
  .pv-ed .fg-cell:not(:nth-child(3n+1)) .fg-h{font-size:17px}
  .pv-ed .fg-cell:nth-child(3n){grid-template-columns:minmax(0,1fr) 116px;grid-template-areas:"k img" "h img" ". img"}
}

/* ---------- IN THIS ISSUE: numbered chapters ---------- */
.pv-ed .toc-grid{counter-reset:edch}
.pv-ed .toc-card{counter-increment:edch;position:relative;border-top:0;border-left:1px solid var(--ed-rule-2);padding:2px 20px 6px 18px}
.pv-ed .toc-card::before{content:counter(edch,upper-roman);display:block;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.32em;color:var(--ed-gold);margin-bottom:16px}
.pv-ed .toc-thumb{border-radius:0}

/* phone: a swipeable chapter rail that runs to the screen edges */
@media (max-width:760px){
  .pv-ed .toc-grid{display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ed-gutter);margin:0 calc(-1*var(--ed-gutter));padding:0 var(--ed-gutter) 8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
  .pv-ed .toc-grid::-webkit-scrollbar{display:none}
  .pv-ed .toc-card{flex:0 0 64%;scroll-snap-align:start;display:flex;flex-direction:column;min-height:200px}
  .pv-ed .toc-card:last-child{margin-right:36px}
  .pv-ed .toc-lead{flex-direction:column;gap:0;margin-top:12px}
  .pv-ed .toc-thumb{flex:none;width:100%;aspect-ratio:3/2;margin-bottom:12px}
  .pv-ed .toc-h{font-size:18px}
}

/* ---------- motion: quiet, once, scroll-linked ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes ed-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  @supports (animation-timeline:view()){
    .pv-ed .fg-cell,.pv-ed .toc-card{animation:ed-rise linear both;animation-timeline:view();animation-range:entry 4% entry 38%}
  }
  .pv-ed .fg-thumb img,.pv-ed .toc-thumb img{transition:transform .6s var(--pv-ease,cubic-bezier(.22,.8,.28,1))}
  .pv-ed .fg-cell:hover .fg-thumb img,.pv-ed .toc-lead:hover .toc-thumb img{transform:scale(1.03)}
}

/* ---------- Culture header (2026-11-07): compact identity + in-page index + ONE quiet material accent ----------
   Replaces the old laptop-only 'PREVIOUSLY CULTURE' mast (phones had no identity at all). The title uses the page's
   display face at its only weight; the accent is a CSS vinyl-groove sheen, not an image, shown once, behind the text. */
.pv-ed{--cu-gold:var(--gold,#F2BC68)}
.pv-ed .cu-head{position:relative;isolation:isolate;max-width:var(--cw,1360px);margin:0 auto;padding:28px 24px 0}
.pv-ed .cu-head::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:min(46%,560px);height:calc(100% - 56px);pointer-events:none;
  background:radial-gradient(60% 130% at 100% 0,rgba(242,188,104,.20),rgba(242,188,104,0) 66%),repeating-radial-gradient(circle at 100% -10%,rgba(242,188,104,0) 0 7px,rgba(242,188,104,.11) 8px,rgba(242,188,104,0) 10px);
  -webkit-mask-image:linear-gradient(to left,#000 12%,rgba(0,0,0,.5) 55%,transparent 100%),linear-gradient(to bottom,#000 0,#000 60%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 12%,rgba(0,0,0,.5) 55%,transparent 100%),linear-gradient(to bottom,#000 0,#000 60%,transparent 100%);mask-composite:intersect}
.pv-ed .cu-kicker{margin:0;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--muted,#A9AFB7)}
.pv-ed .cu-title{margin:12px 0 0;font-family:var(--font-display);font-weight:400;font-synthesis:none;font-size:clamp(60px,8vw,112px);line-height:.95;letter-spacing:.005em;color:var(--cu-gold)}
.pv-ed .cu-index{display:flex;gap:clamp(18px,2.1vw,30px);margin-top:26px;border-block:1px solid rgba(242,188,104,.3);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.pv-ed .cu-index::-webkit-scrollbar{display:none}
.pv-ed .cu-index a{flex:none;display:flex;align-items:center;min-height:54px;margin-bottom:-1px;border-bottom:2px solid transparent;font-family:var(--font-head);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--muted,#A9AFB7);text-decoration:none}
.pv-ed .cu-index a:hover,.pv-ed .cu-index a:focus-visible{color:var(--cu-gold);border-bottom-color:var(--cu-gold)}
.pv-ed .stage[id]{scroll-margin-top:88px}
@media(max-width:899px){
  .pv-ed .cu-head{padding:18px 16px 0}
  .pv-ed .cu-head::before{width:70%}
  .pv-ed .cu-title{font-size:clamp(56px,17vw,84px)}
  .pv-ed .cu-index{margin:22px -16px 0;padding:0 16px;gap:26px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
}
@media(min-width:900px){.pv-ed .cover-media{height:min(80vh,780px);min-height:520px}}

/* ---------- Culture concept alignment (2026-11-07, from the full Culture concept) ----------
   Header: five evenly spread tabs, the current one underlined. The other departments move to a numbered strip
   under the cover with the numeral INLINE ("I  The Conversation"). Lead headline in the brand serif, mixed case,
   at its one real weight. Script lettering is not faked: it needs a font file or supplied lettering asset. */
.pv-ed .cu-index{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;overflow:visible}
.pv-ed .cu-index a{justify-content:center;text-align:center;padding:0 6px}
.pv-ed .cu-index a[aria-current]{color:var(--cu-gold);border-bottom-color:var(--cu-gold)}
.pv-ed .cu-strip{counter-reset:custrip;max-width:var(--cw,1360px);margin:0 auto;padding:0 24px;display:flex;gap:0;border-bottom:1px solid rgba(242,188,104,.3);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:24px}
.pv-ed .cu-strip::-webkit-scrollbar{display:none}
.pv-ed .cu-strip a{counter-increment:custrip;flex:1 0 auto;scroll-snap-align:start;display:flex;align-items:baseline;gap:14px;padding:22px 28px 22px 22px;min-height:64px;border-left:1px solid rgba(242,188,104,.34);font-family:var(--font-display);font-weight:400;font-synthesis:none;font-size:clamp(19px,1.7vw,24px);line-height:1.1;color:#F3F1E9;text-decoration:none;white-space:nowrap}
.pv-ed .cu-strip a:first-child{border-left:0;padding-left:0}
.pv-ed .cu-strip a::before{content:counter(custrip,upper-roman);font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.3em;color:var(--cu-gold)}
.pv-ed .cu-strip a:hover,.pv-ed .cu-strip a:focus-visible{color:var(--cu-gold)}
.pv-ed .cover-cap h1{font-family:var(--font-display);font-weight:400;font-synthesis:none;text-transform:none;letter-spacing:-.01em;line-height:1.04}
/* the department chapters: numeral on the same line as the name */
.pv-ed .toc-card{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
.pv-ed .toc-card::before{margin-bottom:0}
.pv-ed .toc-card .toc-lead{grid-column:1/-1}
@media(max-width:899px){
  .pv-ed .cu-index{margin:22px -16px 0;padding:0 16px;gap:0;-webkit-mask-image:none;mask-image:none}
  .pv-ed .cu-index a{padding:0 2px;font-size:12px;letter-spacing:.08em}
}
@media(max-width:430px){
  .pv-ed .cu-index a{font-size:10.5px;letter-spacing:.04em}
}
@media(max-width:899px){
  .pv-ed .cu-strip{padding:0 16px;scroll-padding-inline:16px}
  .pv-ed .cu-strip a{padding:18px 22px 18px 18px;font-size:20px}
}

/* ---------- In This Issue as graphic-forward photo tiles (2026-11-07, owner pick: the tile mockup) ----------
   Each department is a tall tile: its lead photograph fills it, the numeral and department name sit on a top scrim,
   the lead headline on a bottom scrim. Same markup and links as before; phones keep the swipeable snap rail. */
.pv-ed .toc-grid{gap:14px}
.pv-ed .toc-card{display:block;position:relative;border:0;padding:0;min-height:0;overflow:hidden;aspect-ratio:3/4;background:var(--panel,#141F2C)}
.pv-ed .toc-card::before{position:absolute;top:16px;left:16px;z-index:3;margin:0;color:var(--cu-gold,#F2BC68);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.pv-ed .toc-card .toc-dept{position:absolute;top:13px;left:50px;z-index:3;color:#fff;font-size:12px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.pv-ed .toc-card .toc-lead{position:absolute;inset:0;display:block;margin:0}
.pv-ed .toc-card .toc-thumb{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;border-radius:0}
.pv-ed .toc-card .toc-thumb img{width:100%;height:100%;object-fit:cover}
.pv-ed .toc-card .toc-lead::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(12,18,27,.78) 0,rgba(12,18,27,.5) 14%,rgba(12,18,27,0) 34%,rgba(12,18,27,.34) 44%,rgba(12,18,27,.78) 66%,rgba(12,18,27,.97) 100%)}
.pv-ed .toc-card .toc-tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 18px 20px}
.pv-ed .toc-card .toc-h{font-family:var(--font-display);font-weight:400;font-synthesis:none;font-size:clamp(20px,2vw,26px);line-height:1.12;color:#F3F1E9}
.pv-ed .toc-card .toc-date{color:#C7D0DA}
@media(min-width:761px){.pv-ed .toc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.pv-ed .toc-card{flex:0 0 74%;min-height:0}.pv-ed .toc-card:last-child{margin-right:36px}}