/* The Position: one stylesheet, one layout for phone and desktop. Every measure is copied from Variety Partners (r164). */
:root{--bg:#f9f8f5;--ink:#141416;--body:#4a4a52;--mute:#9a9488;--line:#9a9488;--soft:rgba(154,148,136,.16);--ac:#c4ab67;--tile:#c4ab67;
--serif:"Iowan Old Style",Georgia,"Times New Roman",Times,serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
--gut:46px;--card:0 1px 2px rgba(20,20,22,.05),0 8px 18px -6px rgba(20,20,22,.09),0 22px 40px -24px rgba(20,20,22,.12)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.serif{font-family:var(--serif)}

/* header */
.hd{position:sticky;top:0;z-index:50;height:56px;display:flex;align-items:center;padding:0 var(--gut);background:var(--bg);border-bottom:1px solid var(--line)}
.hd .mark{display:flex;align-items:center;gap:8px}
.tile{display:block;width:33px;height:33px;border-radius:8px;background:var(--tile) url(tp_apple_touch.png) center/cover}
.word{font:400 17px/17px var(--serif);color:var(--ink)}
.nav{margin-left:auto;display:flex}
.nav a{position:relative;font:400 17px/20px var(--serif);color:var(--ink)}
.nav a+a{margin-left:32px}
.nav a+a::before{content:"";position:absolute;left:-16px;top:0;width:1px;height:20px;background:var(--line)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--ac);transform:scaleX(0);transition:transform .25s ease}
.nav a.on::after{transform:none}
@media (hover:hover){.nav a:hover::after{transform:none}}
.burg{display:none;margin-left:auto;width:18px;height:36px;position:relative;border:0;background:none;padding:0;cursor:pointer}
.burg::before,.burg::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform .25s ease,top .25s ease}
.burg::before{top:12px}.burg::after{top:22px}
.menu-open .burg::before{top:17px;transform:rotate(45deg)}.menu-open .burg::after{top:17px;transform:rotate(-45deg)}
.menu{position:fixed;left:0;right:0;top:0;z-index:40;background:var(--bg);padding:56px 22px 22px;border-bottom:1px solid var(--line);border-radius:0 0 18px 18px;box-shadow:0 30px 60px -30px rgba(20,20,22,.35);transform:translateY(-104%);transition:transform .35s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.menu-open .menu{transform:none;visibility:visible}
.menu>a{display:block;padding:17.4px 0;border-bottom:1px solid var(--line);font:400 17px/20px var(--serif)}
.menu>a small{display:block;margin-top:6px;font:700 9.5px/11.4px var(--sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--mute)}
.menu .cta{display:flex;justify-content:flex-end;padding-top:21px}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;height:41px;padding:0 28px;border-radius:99px;font:600 13.5px/15px var(--sans);background:var(--ac);color:#fff;border:1px solid var(--ac);transition:background .2s,color .2s;cursor:pointer}
.btn.g{background:transparent;color:var(--ink);border-color:var(--line)}
@media (hover:hover){.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}}

/* banner: words centred, no picture */
.ban{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:520px;padding:0 var(--gut);border-bottom:1px solid var(--line)}
.ban .eb{font:700 16px/26.4px var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--ac)}
.ban h1{margin:16px 0 0;font:600 76px/80px var(--serif);letter-spacing:-1.4px}
.ban .rule{width:64px;height:3px;border-radius:99px;background:var(--ac);margin-top:22px}
.ban p{margin:22px 0 0;font:400 18px/28px var(--sans)}

/* headline strip */
.mq{height:128px;overflow:hidden;border-bottom:1px solid var(--line);display:flex;align-items:center}
.mq .track{display:flex;align-items:center;white-space:nowrap;animation:mq 90s linear infinite;will-change:transform}
.mq a{display:flex;align-items:center;font:400 36px/40px var(--serif);letter-spacing:-.5px}
.mq a em{font-style:normal;color:var(--mute);margin-right:14px}
.mq svg{width:18px;height:18px;margin:0 40px;color:var(--mute);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}
@media (hover:hover){.mq:hover .track{animation-play-state:paused}}

/* sections */
.sec{padding:43px var(--gut) 34px;border-top:1px solid var(--line)}
.ban+.sec,.mq+.sec{border-top:0}
.sh{display:grid;grid-template-columns:1fr auto;column-gap:22px;padding-bottom:24px;margin-bottom:26px;position:relative}
.sh::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.sh .eb{font:700 12px/19.8px var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--ac)}
.sh .hint{grid-column:2;grid-row:1;font:400 12px/19.8px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--mute)}
.sh .hint a{color:var(--ink)}
.sh h2{grid-column:1/-1;margin:6px 0 0;font:600 34px/38px var(--serif);letter-spacing:-.6px}

/* statement */
.man{padding:44px var(--gut) 34px;border-top:1px solid var(--line)}
.man .k{display:block;font:700 12px/19.8px var(--sans);font-style:normal;letter-spacing:2.5px;text-transform:uppercase;color:var(--ac);margin-bottom:6px}
.man p{margin:0;font:600 40px/48.7px var(--serif);letter-spacing:-.7px;max-width:1240px}
.man p span{color:var(--mute)}

/* cards */
.card{background:#fff;border:1px solid var(--soft);border-radius:18px;box-shadow:var(--card);overflow:hidden}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.wc{display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
@media (hover:hover){.wc:hover{transform:translateY(-3px)}}
.wc .pic{aspect-ratio:16/10;border-bottom:1px solid rgba(154,148,136,.38);background:#ece9e2;overflow:hidden}
.wc .pic img{width:100%;height:100%;object-fit:cover}
.wc .wm{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.k{display:block;font:700 11px/11px var(--sans);font-style:normal;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin-bottom:9px}
.k .d{color:var(--mute);font-weight:400;letter-spacing:1.6px}
.wc b{font:600 20px/24px var(--serif);letter-spacing:-.3px}
.wc p{margin:8px 0 0;font:400 14px/21px var(--sans);color:var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dots{display:none}

/* cover story */
.cover{display:grid;grid-template-columns:1.25fr 1fr}
.cover .pic{aspect-ratio:16/9;background:#ece9e2;overflow:hidden;border-right:1px solid rgba(154,148,136,.38)}
.cover .pic img{width:100%;height:100%;object-fit:cover}
.cover .wm{padding:40px 44px;display:flex;flex-direction:column;justify-content:center}
.cover b{font:600 38px/44px var(--serif);letter-spacing:-.8px}
.cover p{margin:16px 0 0;font:400 16px/26px var(--sans);color:var(--body)}

/* list rows (values / coverage / archive) */
.rows{display:block}
.row{display:grid;grid-template-columns:200px 1fr;column-gap:32px;padding:2px 0 28px}
.row+.row{padding-top:26px;border-top:1px solid var(--soft)}
.row i{font:700 11px/11px var(--sans);font-style:normal;letter-spacing:2px;text-transform:uppercase;color:var(--ac);padding-top:14px}
.row p{margin:0;font:600 30px/40px var(--serif);letter-spacing:-.4px}
.row p span{color:var(--mute)}
.row .n{display:block;margin-top:8px;font:400 12px/19.8px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--mute)}
a.row{transition:opacity .2s}
@media (hover:hover){a.row:hover p b{color:var(--ac)}}

/* numbers card */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.nums>div{padding:30px 32px 32px}
.nums>div+div{border-left:1px solid var(--soft)}
.nums i{display:block;font:700 11px/11px var(--sans);font-style:normal;letter-spacing:2px;text-transform:uppercase;margin-bottom:9px}
.nums b{display:block;font:600 42px/45px var(--serif);letter-spacing:-.8px}
.nums p{margin:10px 0 0;font:400 14px/21px var(--sans);color:var(--body)}

/* archive */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{height:34px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:transparent;font:600 12.5px/1 var(--sans);color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}

/* article */
.art{max-width:860px;margin:0 auto;padding:64px var(--gut) 10px}
.art .eb{font:700 12px/19.8px var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--ac)}
.art h1{margin:12px 0 0;font:600 54px/60px var(--serif);letter-spacing:-1.2px}
.art .by{margin-top:18px;font:400 12px/19.8px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--mute)}
.art .dek{margin:22px 0 0;font:400 22px/33px var(--serif);color:var(--body)}
.hero{max-width:1160px;margin:40px auto 0;padding:0 var(--gut)}
.hero .card{aspect-ratio:16/9}
.hero img{width:100%;height:100%;object-fit:cover}
.body{max-width:860px;margin:0 auto;padding:44px var(--gut) 56px}
.body h2{margin:44px 0 0;font:600 28px/34px var(--serif);letter-spacing:-.5px}
.body h2:first-child{margin-top:0;font-size:30px;line-height:38px}
.body h2:first-child::before{content:"";display:block;width:64px;height:3px;border-radius:99px;background:var(--ac);margin-bottom:22px}
.body p{margin:16px 0 0;font:400 18px/31px var(--sans);color:#2c2c33}
.body p a{text-decoration:underline;text-underline-offset:3px}
.body .end{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:28px;border-top:1px solid var(--soft)}

/* legal + form */
.form{padding:34px 36px 36px;max-width:860px}
.form .f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font:700 10.5px/14px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.form input,.form select,.form textarea{width:100%;height:46px;border:1px solid rgba(154,148,136,.45);border-radius:12px;background:var(--bg);padding:0 14px;font:400 15px/1.4 var(--sans);color:var(--ink)}
.form textarea{height:120px;padding:12px 14px;resize:vertical}
.form .act{display:flex;justify-content:flex-end;margin-top:24px}
.ok{display:none;padding:40px 36px;font:600 24px/32px var(--serif)}

/* footer: Variety's, copied */
.ft{background:var(--bg);box-shadow:inset 0 1px 0 var(--line);margin-top:0}
.ft .fw{position:relative;height:113px;padding:0 var(--gut)}
.ft .bar{margin:0 var(--gut);border-top:1px solid rgba(154,148,136,.38);padding:16px 0 20px;display:flex;justify-content:space-between;gap:16px;font:400 12.5px/16px var(--sans);color:var(--mute)}
.ft .bar nav{display:flex;gap:12px;align-items:center}
.ft .bar nav i{width:1px;height:12px;background:var(--mute)}
@media (hover:hover){.ft a:hover{color:var(--ac)}}

/* subscribe sheet */
.sub{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(20,20,22,.35);opacity:0;visibility:hidden;transition:opacity .25s}
.sub.on{opacity:1;visibility:visible}
.sub .card{width:min(520px,100%);padding:36px 36px 34px;position:relative}
.sub .x{position:absolute;right:14px;top:12px;border:0;background:none;font:400 26px/1 var(--sans);cursor:pointer;color:var(--mute)}
.sub h3{margin:6px 0 0;font:600 30px/36px var(--serif);letter-spacing:-.5px}
.sub p{margin:10px 0 0;font:400 15px/24px var(--sans);color:var(--body)}
.sub form{display:flex;gap:10px;margin-top:22px}
.sub input{flex:1;height:44px;border:1px solid rgba(154,148,136,.45);border-radius:99px;padding:0 18px;font:400 15px var(--sans);background:var(--bg)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.mq .track{animation:none}}

/* phone: Variety's phone measures */
@media (max-width:760px){
 :root{--gut:22px}
 .hd{padding:0 22px}.tile{width:28px;height:28px;border-radius:7px}
 .nav{display:none}.burg{display:block}
 .ban{height:340px}
 .ban .eb{font-size:12px;line-height:18px;letter-spacing:1.9px}
 .ban h1{margin-top:12.7px;font-size:44px;line-height:48px;letter-spacing:-.8px}
 .ban .rule{width:48px;margin-top:16px}
 .ban p{margin-top:12.8px;font-size:16px;line-height:25px}
 .mq{height:84px}.mq a{font-size:24px;line-height:28px;letter-spacing:-.4px}.mq svg{width:14px;height:14px;margin:0 22px}
 .sec{padding:23px 22px 28px}
 .sh{display:flex;flex-direction:column;padding-bottom:0;margin-bottom:0}.sh .hint{order:3}
 .sh::after{display:none}
 .sh .eb{font-size:11px;line-height:18.15px}
 .sh h2{margin-top:6px;font-size:28px;line-height:32px;letter-spacing:-.4px}
 .sh .hint{display:block;margin-top:6px;font-size:11px;line-height:18.15px;letter-spacing:1px}
 .sh .hint.sw::after{content:"  \2192  swipe";color:var(--ac);font-weight:700}
 .man{padding:30px 22px 26px}.man p{font-size:26px;line-height:33px;letter-spacing:-.4px}
 .grid.swipe{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -22px;padding:28px 22px 16px;scrollbar-width:none}
 .grid.swipe::-webkit-scrollbar{display:none}
 .grid.swipe>*{flex:0 0 71%;scroll-snap-align:start}
 .grid:not(.swipe){grid-template-columns:1fr;gap:14px;margin-top:28px}
 .dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
 .dots i{width:6px;height:6px;border-radius:3px;background:rgba(154,148,136,.45);transition:width .25s,background .25s}
 .dots i.on{width:18px;background:var(--ac)}
 .wc .wm{padding:18px 18px 19px}
 .cover{grid-template-columns:1fr;margin-top:28px}
 .cover .pic{border-right:0;border-bottom:1px solid rgba(154,148,136,.38)}
 .cover .wm{padding:22px 20px 24px}.cover b{font-size:26px;line-height:31px;letter-spacing:-.4px}.cover p{font-size:15px;line-height:24px}
 .rows{margin-top:28px}
 .row{grid-template-columns:1fr;row-gap:10px;padding:0 0 22px}.row+.row{padding-top:22px}
 .row i{padding-top:0}.row p{font-size:22px;line-height:29px;letter-spacing:-.3px}
 .nums{grid-template-columns:1fr 1fr;margin-top:28px}.nums>div{padding:22px 20px}
 .nums>div:nth-child(3){border-left:0}.nums>div:nth-child(n+3){border-top:1px solid var(--soft)}
 .nums b{font-size:32px;line-height:36px}
 .chips{margin-top:28px;flex-wrap:nowrap;overflow-x:auto;margin-left:-22px;margin-right:-22px;padding:0 22px;scrollbar-width:none}
 .chips::-webkit-scrollbar{display:none}.chip{flex:none}
 .art{padding:36px 22px 0}.art h1{font-size:34px;line-height:40px;letter-spacing:-.7px}.art .dek{font-size:18px;line-height:28px}
 .hero{margin-top:26px;padding:0 22px}
 .body{padding:30px 22px 40px}.body h2{font-size:23px;line-height:29px;margin-top:34px}.body h2:first-child{font-size:24px;line-height:31px}.body p{font-size:17px;line-height:29px}
 .form{padding:22px 20px 24px;margin-top:28px}.form .f2{grid-template-columns:1fr;gap:0}
 .ft .fw{height:auto;padding:10.5px 22px 0;display:grid;grid-template-columns:1fr auto;row-gap:16px}
 .sub .card{padding:30px 22px 26px}.sub h3{font-size:25px;line-height:30px}.sub form{flex-direction:column}.sub input{flex:none;width:100%;min-height:44px}.sub .btn{justify-content:center}
 .ft .bar{margin:20px 22px 0;padding:14px 0 calc(14px + env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:8px;text-align:center}
}

/* topic desk: Variety's careers card */
.cap{display:grid;grid-template-columns:1fr 1fr;padding:0}
.cap .list{display:flex;flex-direction:column}
.cap .list button{flex:1;min-height:64px;display:flex;align-items:center;padding:0 32px;border:0;border-top:1px solid rgba(154,148,136,.38);background:#fff;font:600 20px/22px var(--serif);letter-spacing:-.3px;color:var(--mute);text-align:left;cursor:pointer;transition:background .2s,color .2s}
.cap .list button:first-child{border-top:0}
.cap .list button.on{background:#faf9f6;color:var(--ink)}
.cap .n{margin-left:auto;font:400 12px/19.8px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--mute)}
.cap .tabs{display:none}
.cap .pane{border-left:1px solid rgba(154,148,136,.38);padding:30px 32px 31px;display:flex}
.cap .pb{display:none;flex-direction:column;width:100%}
.cap .pb.on{display:flex;animation:pbin .35s ease}
@keyframes pbin{from{opacity:0;transform:translateY(6px)}}
.cap .pk{font:700 11px/11px var(--sans);font-style:normal;letter-spacing:2px;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.cap .ph{font:600 24px/30px var(--serif);letter-spacing:-.3px;margin-bottom:14px}
.cap .pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cap .pills span{height:31px;display:flex;align-items:center;padding:0 13px;border-radius:999px;border:1px solid rgba(154,148,136,.38);background:#faf9f6;font:500 13px/13px var(--sans);letter-spacing:.1px;color:var(--body)}
.cap .pb p{margin:0 0 28px;font:400 16px/25px var(--sans);color:var(--body);max-width:600px}
.cap .pn{font:400 14px/20px var(--sans);font-style:normal;color:var(--body)}
.cap .pn b{color:var(--ink);margin-right:3px}.cap .pn span{color:var(--mute)}
.cap .pn a{color:var(--ink)}
@media (hover:hover){.cap .list button:not(.on):hover{color:var(--ink)}.cap .pn a:hover{color:var(--ac)}}
@media (max-width:760px){
 .cap{display:block;margin-top:28px}
 .cap .list{display:none}
 .cap .tabs{display:flex;overflow-x:auto;border-bottom:1px solid rgba(154,148,136,.38);scrollbar-width:none}
 .cap .tabs::-webkit-scrollbar{display:none}
 .cap .tabs button{flex:none;position:relative;padding:16px 14px 14px;border:0;background:none;font:600 16px/18px var(--serif);letter-spacing:-.3px;color:var(--mute);cursor:pointer}
 .cap .tabs button.on{color:var(--ink)}
 .cap .tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ac)}
 .cap .pane{border-left:0;padding:20px 18px}
 .cap .pb p{margin-bottom:22px}
}

/* what we cover: Variety's numbers card, two rows */
.nums.cov>a{display:block;padding:30px 32px 32px;transition:background .2s}
.nums.cov>a:nth-child(n+5){border-top:1px solid var(--soft)}
.nums.cov>a:nth-child(4n+2),.nums.cov>a:nth-child(4n+3),.nums.cov>a:nth-child(4n+4){border-left:1px solid var(--soft)}
.nums.cov i{color:var(--ink)}
@media (hover:hover){.nums.cov>a:hover{background:#faf9f6}.nums.cov>a:hover b{color:var(--ac)}}
@media (max-width:760px){
 .nums.cov>a{padding:18px 18px 19px;border-left:0!important;border-top:0}
 .nums.cov>a:nth-child(even){border-left:1px solid var(--soft)!important}
 .nums.cov>a:nth-child(n+3){border-top:1px solid var(--soft)}
 .nums.cov b{font-size:20.9px;line-height:23.9px;letter-spacing:-.5px}
 .nums.cov p{display:none}
}

/* inline subscribe on home */
@media (max-width:760px){.ban{height:auto;min-height:340px;padding-top:44px;padding-bottom:40px}}

/* section bar: a simple newspaper-style row of topics under the banner */

/* home archive: straight stories, four per topic */
.arch2{border-top:1px solid var(--soft)}
.ar{display:grid;grid-template-columns:150px 200px minmax(0,1fr);column-gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--soft)}
.ar[hidden]{display:none}
.ar .ad{font:400 12px/19.8px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--mute)}
.ar .ac{font:700 11px/19.8px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--ac)}
.ar .am{display:flex;flex-direction:column;min-width:0}
.ar .am b{font:600 22px/28px var(--serif);letter-spacing:-.3px}
.ar .am span{margin-top:4px;font:400 15px/23px var(--sans);color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.ar:hover .am b{color:var(--ac)}}
.amore{display:flex;justify-content:flex-end;margin-top:24px}.amore .btn{min-width:120px;justify-content:center}
.amore[hidden]{display:none}
@media (max-width:760px){
 .ar{grid-template-columns:1fr;row-gap:6px;padding:16px 0}
 .ar .ad,.ar .ac{display:inline}
 .ar .ad{grid-row:1}.ar .ac{grid-row:1;justify-self:end}
 .ar{grid-template-columns:1fr auto}
 .ar .am{grid-column:1/-1}
 .ar .am b{font-size:19px;line-height:25px}
}


/* archive rows: New York Times style with a picture on the right */
.ar{grid-template-columns:150px minmax(0,1fr) 176px;column-gap:28px;align-items:start;padding:22px 0}
.ar .ad{grid-column:1;grid-row:1;padding-top:2px}
.ar .ac{display:none}
.ar .am{grid-column:2;grid-row:1}
.ar .am b::before{content:attr(data-c);display:block;font:700 11px/19.8px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--ac);margin-bottom:4px}
.ar .am .dk{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font:400 15px/23px var(--sans);color:var(--body);white-space:normal}
.ar .th{grid-column:3;grid-row:1;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#ece9e2;border:1px solid var(--soft)}
.ar .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
@media (hover:hover){.ar:hover .th img{transform:scale(1.04)}}
@media (max-width:760px){
 .ar{grid-template-columns:minmax(0,1fr) 104px;column-gap:16px;row-gap:0;padding:18px 0}
 .ar .ad{grid-column:1;grid-row:1;justify-self:start;padding-top:0}
 .ar .am{grid-column:1;grid-row:2}
 .ar .th{grid-column:2;grid-row:1/3;align-self:start;border-radius:8px}
 .ar .am b{font-size:18px;line-height:23px}
 .ar .am .dk{display:none}
}
/* More: a rule runs in from the left and ends at the button */
.amore{align-items:center;gap:20px;margin-top:22px}
.amore::before{content:"";flex:1;height:1px;background:var(--line)}
.arch2{border-top:0}
.arch2 .ar{border-bottom:0;border-top:1px solid var(--soft)}

/* archive picture sits in the middle right */
.ar{align-items:center}
.ar .ad{align-self:start;padding-top:4px}
.ar .am{align-self:center}
.ar .th{align-self:center}
/* More sits on the rule: the line runs through the button */
.amore{position:relative;margin-top:8px;gap:0}
.amore::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);flex:none}
.amore .btn{position:relative;background:var(--bg)}
@media (hover:hover){.amore .btn:hover{background:var(--ink)}}
/* banner rhythm: rule to line 22, line to subscribe 22 (phone 13 / 18) */
@media (max-width:760px){.ar .ad{padding-top:0}}
/* about block on home */
.pub .lead{margin:0;max-width:860px;font:400 22px/33px var(--serif);color:var(--ink)}
@media (max-width:760px){.pub{margin-top:28px}.pub .lead{font-size:19px;line-height:28px}}
/* More: the rule runs in from the left and stops at the button */
.amore{display:flex;align-items:center;gap:0}
.amore::before{position:static;flex:1;height:1px;margin-right:0}
.amore .btn{background:transparent}
.pub .lead{margin-bottom:6px}

/* footer: two rows, no bottom bar, icons aligned to the wordmark */
.ft .fw{height:113px}
@media (max-width:760px){.ft .fw{padding-bottom:22px}}
/* More: line closes the list, button sits under it on the right */
.amore{display:flex;justify-content:flex-end;margin-top:0;padding-top:22px;border-top:1px solid var(--line)}
.amore::before{display:none}
.amore .btn{border-color:var(--line)}
/* legal: one page, contents on the left */

/* footer icons: Variety's exact sizes (mail 19.8, rule 1x15, arrow 24.8) */

/* policies page: minimal, parts split by full rules */
.legal .pk{display:flex;gap:16px;align-items:baseline}
.legal .pk i{font:700 11px/11px var(--sans);font-style:normal;letter-spacing:2px;color:var(--ac)}
.legal .pk h2{margin:0;font:600 26px/30px var(--serif);letter-spacing:-.4px}
@media (max-width:760px){
 .legal .pk h2{font-size:23px;line-height:28px}
}
/* one button everywhere (Variety's): 41 tall, pill, gold, white text */
.btn,.amore .btn{height:41px;padding:0 28px;border:0;border-radius:99px;background:var(--ac);color:#fff;font:600 13.5px/15px var(--sans)}
.amore .btn{min-width:0}
@media (hover:hover){.btn:hover,.amore .btn:hover{background:var(--ink);color:#fff}}
/* nav underline: Variety's 2px pill */
.nav a::after{border-radius:99px}
/* buttons: favicon gold with ink words (white on this gold cannot be read) */
.btn,.amore .btn{color:var(--ink)}
@media (hover:hover){.btn:hover,.amore .btn:hover{background:var(--ink);color:#fff}}
/* house rule 2026-10-20: gold only on eyebrows, buttons, actions and the banner rule; categories and numbers are black */
.ar .am b::before{color:var(--ink)}
.ar .ac{color:var(--ink)}
/* phone rail: first card sits on the 22 gutter, like every other rail on the site */
@media (max-width:760px){.grid.swipe{scroll-padding-inline:22px}}
/* right-hand grey words are grey, links included (house rule 2026-10-20) */
.sh .hint a{color:var(--mute)}
/* selected filter chip: gold with ink words (family spec) */
.chip[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:var(--ink)}
/* the closing line: same air above and below the button (home archive and every article) */
.amore{padding-top:34px}
@media (max-width:760px){.amore{padding-top:28px}}
/* ---------- Get Featured: Variety's onboarding page, in The Position's colours ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.steps .st{padding:30px 32px 32px}
.steps .st+.st{border-left:1px solid var(--soft)}
.steps i{display:block;font:700 11px/11px var(--sans);font-style:normal;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.steps b{display:block;font:600 24px/28px var(--serif);letter-spacing:-.4px}
.steps p{margin:10px 0 0;font:400 14px/21px var(--sans);color:var(--body)}
.vform{padding:30px 32px 32px}
.vform form{display:block}
.vform .ftabs{display:none}
.vform .fg{display:flex;flex-wrap:wrap;gap:22px 32px;margin-bottom:22px}
.vform .vf{min-width:0}
.vform .vf.w1{flex:1 1 100%}.vform .vf.w2{flex:1 1 calc(50% - 16px)}.vform .vf.w3{flex:1 1 calc(33.33% - 22px)}
.vform label{display:block;font:700 11px/11px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.vform input,.vform select,.vform textarea{display:block;width:100%;height:44px;border:1px solid transparent;border-radius:12px;background:#f3f2ee;padding:0 15px;font:400 15px/42px var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;outline:none}
.vform select{color:var(--mute);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239a9488' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.vform select:valid{color:var(--ink)}
.vform textarea{height:92px;padding:11px 15px;line-height:23px;resize:vertical}
.vform input:focus,.vform select:focus,.vform textarea:focus{border-color:var(--ac)}
.vform .act{display:flex;justify-content:flex-end;margin-top:8px}
.vform .ok{display:none;font:600 20px/28px var(--serif)}
@media (max-width:760px){
 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps .st{padding:18px 18px 19px}
 .steps .st:nth-child(3){border-left:0}
 .steps .st:nth-child(n+3){border-top:1px solid var(--soft)}
 .steps b{font-size:19px;line-height:23px}
 .steps p{font-size:13px;line-height:19px;margin-top:6px}
 .vform{padding:0 0 19px;margin-top:28px}
 .vform .ftabs{display:flex;border-bottom:1px solid rgba(154,148,136,.45);margin:0 0 20px}
 .vform .ftabs button{flex:1 1 0;height:48px;padding:16px 6px 14px;margin-bottom:-1px;background:none;border:0;border-bottom:3px solid transparent;font:600 16px/18px var(--serif);letter-spacing:-.3px;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
 .vform .ftabs button.on{border-bottom-color:var(--ac)}
 .vform .fg{display:none;margin:0 19px;gap:14px}
 .vform .fg.on{display:flex}
 .vform .vf.w2,.vform .vf.w3{flex:1 1 100%}
 .vform label{font-size:9.5px;line-height:9.5px;margin-bottom:7px}
 .vform input,.vform select,.vform textarea{height:48px;font-size:16px;line-height:22.4px;padding:12px 14px}
 .vform select{padding-right:38px}
 .vform textarea{height:96px}
 .vform .act{margin:20px 19px 0}
}
@media (max-width:760px){.steps{margin-top:28px}}
/* ---------- Variety's card sizes ---------- */
/* four across, like Variety's cards and the puzzle cards (321 at 1440) */
.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.wc .pic{aspect-ratio:16/9}
.wc .wm{padding:22px 22px 24px}
/* the wide card: words on the left, picture on the right, 323 tall (Variety's next card) */
.nx{display:grid;grid-template-columns:1fr 1fr;min-height:323px;overflow:hidden}
.nx .nxt{display:flex;flex-direction:column;padding:31px 33px 32px}
.nx .nxk{display:block;font:700 11px/11px var(--sans);font-style:normal;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.nx .nxh{display:block;margin-top:14px;font:600 24px/30px var(--serif);letter-spacing:-.4px;color:var(--ink)}
.nx p{margin:14px 0 0;font:400 16px/25px var(--sans);color:var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nx .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.nx .pills span{height:31px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid rgba(154,148,136,.45);border-radius:99px;font:500 13px/1 var(--sans);color:var(--body);background:var(--bg)}
.nx .nxb{margin-top:auto;padding-top:24px;display:flex;justify-content:flex-end}
.nx .nxp{position:relative;background:#ece9e2;border-left:1px solid rgba(154,148,136,.38)}
.nx .nxp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (hover:hover){a.nx:hover .nxh{color:var(--ac)}}
@media (max-width:760px){
 .nx{grid-template-columns:1fr;min-height:0;margin-top:28px}
 .nx .nxp{order:-1;aspect-ratio:16/9;border-left:0;border-bottom:1px solid rgba(154,148,136,.38)}
 .nx .nxt{padding:20px 20px 20px}
 .nx .nxh{font-size:22px;line-height:27px;margin-top:12px}
 .nx p{font-size:15px;line-height:24px;margin-top:10px}
 .nx .nxb{padding-top:18px}
}
/* ---------- banner subscribe: one pill, the button sits inside it ---------- */
div.nx p{display:block;-webkit-line-clamp:unset;overflow:visible}
/* wide card: the picture column is the picture's own 16:9 at the card's height, so nothing is cropped */
.nx{grid-template-columns:1fr 574px}
@media (max-width:1100px) and (min-width:761px){.nx{grid-template-columns:1fr 1fr}}
/* archive filters: Variety's pill size (31 tall, 13/500) */
.chip{height:31px;padding:0 14px;font:500 13px/1 var(--sans)}
/* pills and archive filters: Variety's pill to the decimal (31 tall, 13/500, +0.1 tracking, 0 13 padding) */
.nx .pills span,.chip{height:31px;padding:0 13px;font:500 13px/13px var(--sans);letter-spacing:.1px;border:1px solid rgba(154,148,136,.38);border-radius:999px}
.nx .pills span{background:#faf9f6;color:var(--body)}
/* ---------- Policies: contents on the left, the text on the right ---------- */
/* Policies, designed: a contents card that follows you, and the text in one card with each part laid out in columns */
/* ---------- Policies: four promises, then the full text, one part per row ---------- */
/* ---------- footer icons: placed to Variety's measured pixels (r164), mail | arrow ---------- */
.ft .fw{position:relative}
/* ---------- PHONE: Variety's phone measures, written last so nothing above can undo them ---------- */
@media (max-width:760px){
 .nx{grid-template-columns:1fr!important;min-height:0}
 .nx .nxp{order:-1;aspect-ratio:16/9;border-left:0;border-bottom:1px solid rgba(154,148,136,.38)}
 .nx .nxt{padding:18px 18px 19px}
 .nx .nxk{font-size:11px;line-height:11px}
 .nx .nxh{margin-top:12px;font-size:20px;line-height:22px;letter-spacing:-.3px}
 .nx p{margin-top:10px;font-size:14px;line-height:21px}
 .nx .pills{margin-top:12px}
 .nx .nxb{padding-top:18px}
 .grid.swipe>*{flex:0 0 71vw}
 .wc .wm{padding:18px 18px 19px}
 .wc b{font-size:20px;line-height:22px;letter-spacing:-.3px}
 .wc p{margin-top:8px;font-size:14px;line-height:21px}
 .man{padding:24px 22px 28px}
 .man p{font-size:22px;line-height:30px;letter-spacing:-.3px}
 .man p span{color:var(--ink)}
 .steps b{font-size:20px;line-height:22px;letter-spacing:-.3px}
 .nums b{font-size:20.9px;line-height:24px;letter-spacing:-.5px}
}
/* archive rows: desktop keeps its columns; the phone label is hidden there */
.ar .lab{display:none}
@media (max-width:760px){
 /* phone archive row, the Variety card voice: label line, serif title, picture on the right */
 .ar{grid-template-columns:minmax(0,1fr) 96px!important;column-gap:16px;row-gap:0;padding:18px 0!important;align-items:start!important}
 .ar .ad{display:none!important}
 .ar .am{grid-column:1!important;grid-row:1!important;align-self:start!important}
 .ar .am b::before{display:none!important}
 .ar .lab{display:block;font:700 11px/11px var(--sans);font-style:normal;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin-bottom:9px}
 .ar .lab span{font-weight:400;letter-spacing:1.6px;color:var(--mute)}
 .ar .am b{display:block;font-size:18px!important;line-height:22px!important;letter-spacing:-.3px}
 .ar .th{grid-column:2!important;grid-row:1!important;width:96px;aspect-ratio:4/3;border-radius:10px;align-self:start!important}
 .chips{margin:28px -22px 8px;padding:0 22px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
 .chips::-webkit-scrollbar{display:none}
 .man .k{font-size:11px;line-height:18.15px}
}
@media (max-width:760px){.ar .lab span{font:400 11px/11px var(--sans);letter-spacing:1.6px;color:var(--mute)}.chips{margin-bottom:18px}}
/* phone footer on Variety's lines: tile at 10.5, links at 54 */
@media (max-width:760px){
 .ft .fw{display:block!important;height:99px!important;padding:0 22px!important;position:relative}
}
.wc b{line-height:22px}
@media (max-width:760px){
 .ar .th{width:104px!important;aspect-ratio:16/9!important}
 .ar{grid-template-columns:minmax(0,1fr) 104px!important}
 /* subscribe sheet: the button is the one button, its own width, on the right */
 .sub form{align-items:stretch}
 .sub form .btn{align-self:flex-end;width:auto!important;padding:0 28px}
}
.sub input:focus{outline:none}
.sub input:focus{border-color:var(--ac)}
/* ---------- archive: the closing line is the same hairline as the rows ---------- */
.amore{border-top-color:var(--soft)}
/* ---------- no word left alone on a last line ---------- */
p,.nx p,.wc p{text-wrap:pretty}
/* ---------- Get Featured tabs: Variety's tab line, 2px gold sitting on the grey rule ---------- */
@media (max-width:760px){
 .vform .ftabs{border-bottom:1px solid rgba(154,148,136,.38)}
 .vform .ftabs button{position:relative;border-bottom:0;margin-bottom:0}
 .vform .ftabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ac)}
}
/* ---------- subscribe sheet: Variety's form inside a card ---------- */
.sub .card{width:min(460px,100%);padding:30px 32px 32px;border-radius:18px}
.sub .x{right:18px;top:16px;color:var(--mute)}
.sub h3{margin:6px 0 0;font:600 28px/32px var(--serif);letter-spacing:-.4px}
.sub p{margin:8px 0 0;font:400 15px/24px var(--sans);color:var(--body)}
.sub form{display:flex;flex-direction:column;gap:0;margin-top:24px}
.sub label{display:block;font:700 11px/11px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.sub input{flex:none;width:100%;height:44px;border:1px solid transparent;border-radius:12px;background:#f3f2ee;padding:0 15px;font:400 15px/42px var(--sans);color:var(--ink);outline:none}
.sub input:focus{border-color:var(--ac)}
.sub form .btn{align-self:flex-end;margin-top:22px;width:auto;padding:0 28px}
@media (max-width:760px){
 .sub .card{padding:24px 22px 22px}
 .sub h3{font-size:24px;line-height:28px}
 .sub label{font-size:9.5px;line-height:9.5px;margin-bottom:7px}
 .sub input{height:48px;font-size:16px}
 .sub form .btn{margin-top:20px}
}

/* ---------- footer icons, copied from Variety r164: mail | Instagram | arrow ---------- */

/* ---------- footer icons, Variety r164 minus Instagram: mail sits where Variety's last icon sits ---------- */

/* ---------- the nx card, Variety's Partner With Us card: picture half, text 608, label ink on phone ---------- */
.nx{grid-template-columns:1fr 672px}
.nx .nxt{padding:31px 34px 32px 33px}
.nx .nxh{letter-spacing:-.3px}
.nx p{max-width:600px;margin-top:16px}
@media (max-width:760px){
 .nx{grid-template-columns:1fr!important}
 .nx .nxp{aspect-ratio:16/10}
 .nx .nxk{color:var(--ink)}
 .nx p{margin-top:16px}
}
@media (max-width:760px){
 .nx .nxt{padding:18px 19px 19px}
}

/* ---------- legal bar under the footer, copied from Variety r164 ---------- */
.ft .flbar{display:flex!important;justify-content:space-between;align-items:center;gap:16px;margin:0 46px!important;padding:16px 0 20px!important;border-top:1px solid rgba(154,148,136,.38)!important;font:400 12.5px/16px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;color:#9a9488!important;text-align:left}
.ft .flcopy{font:inherit!important;color:inherit!important}
.ft .fllinks{display:flex!important;align-items:center;gap:12px;margin:0;padding:0;position:static!important}
.ft .fllinks a{all:unset;cursor:pointer;color:#9a9488!important;font:400 12.5px/16px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important}
.ft .fllinks a:hover{color:#141416!important}
.ft .fllinks .flsep{display:block!important;position:static!important;width:1px!important;height:12px!important;background:#9a9488!important;opacity:1!important;margin:0!important}
@media (max-width:760px){
 .ft .flbar{flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:0 22px 14px!important;padding:14px 0 4px!important;text-align:center}
}

@media (max-width:760px){.ft .fw{height:84px!important;min-height:0!important;padding-bottom:0!important}}

/* phone home subscribe: one size smaller, centred, 16px text so iPhone does not zoom */
/* section bottoms, as Variety: 26 under the last card on desktop, 28 on phone; cards add no margin of their own */
@media (min-width:761px){html body main>.sec{padding-bottom:26px!important}}
html body main>.sec>.card:last-child,html body main>.sec>.nx:last-child{margin-bottom:0!important}
/* the publisher card: picture and words share the card half and half at every desktop width, as Variety's */
@media (min-width:761px){html body .nx{grid-template-columns:1fr 1fr!important}}
/* phone menu rows: Variety's exact row paddings (73.2 / 73.4 / 74.4 / 74.1), then the button 21 below */
@media (max-width:760px){
html body .menu>a:nth-of-type(1){padding-top:17.4px!important;padding-bottom:17.4px!important}
html body .menu>a:nth-of-type(2){padding-top:18px!important;padding-bottom:17px!important}
html body .menu>a:nth-of-type(3){padding-top:18px!important;padding-bottom:18px!important}
html body .menu>a:nth-of-type(4){padding-top:18px!important;padding-bottom:17.7px!important}
}
/* the archive sits in Variety's card (the numbers card / tabs card): white, the soft edge, 18 radius, the same shadow;
   rows are divided inside it, and a row warms to Variety's pill white on hover */
html body #archive .arch2{background:#fff!important;border:1px solid rgba(154,148,136,.16)!important;border-radius:18px!important;box-shadow:rgba(20,20,22,.05) 0 1px 2px 0,rgba(20,20,22,.09) 0 8px 18px -6px,rgba(20,20,22,.08) 0 26px 44px -22px!important;overflow:hidden!important;padding:0!important}
html body #archive .arch2>.ar{padding-left:32px!important;padding-right:32px!important;transition:background .2s}
html body #archive .arch2>.ar.first{border-top:0!important}
@media (hover:hover){html body #archive .arch2>.ar:hover{background:#faf9f6!important}}
@media (max-width:760px){html body #archive .arch2>.ar{padding-left:19px!important;padding-right:19px!important}}
html body #archive .amore{border-top:0!important;margin-top:0!important;padding-top:26px!important}
/* archive pictures sit on the row's centre line, top to bottom, on phone and desktop */
html body #archive .arch2>.ar>.th{align-self:center!important;margin-top:0!important;margin-bottom:0!important}
/* the newsletter card at the end of the home page: the form sits where the button sits on the other cards */
.nx.nl .ok{display:none;margin-top:auto;padding-top:24px;font:400 15px/23px var(--sans);color:var(--ink)}
/* a Variety kit block that follows a section keeps the line between sections */
main>.sec+.mobx.vpkit{border-top:1px solid var(--line)!important}
/* the next-step cards, measured against Variety's work page card: text starts 31px inside the card, phone pills 30px tall */
@media (min-width:761px){.nx .nxt{padding-top:30px}}
@media (max-width:760px){.nx .pills span{height:30px}}
@media (max-width:760px){.nx .nxt{padding-top:18px}.nx .nxh{margin-top:9px}}
@media (max-width:760px){.nx .nxt{padding:18px 18px 19px}.nx .nxp{aspect-ratio:auto;height:213.6px}}
/* What We Cover on a phone: "Arts &" over "Sport", the same two lines as Brand Strategy beside it */
.nums.cov br.m{display:none}
@media (max-width:760px){.nums.cov br.m{display:inline}}
/* archive: More sits inside the card, under the last story, like Apply inside Variety's careers card */
html body #archive .arch2>.amore{margin:0!important;padding:22px 32px!important;border-top:1px solid var(--soft)!important;background:transparent!important}
html body #archive .arch2>.amore[hidden]{display:none!important}
@media (max-width:760px){html body #archive .arch2>.amore{padding:18px 19px!important}}
/* card text shows in full (the cover story now uses one sentence), no cut-off "..." */
html body .nx .nxt p{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important}
@media (max-width:760px){#archive .chip{height:30px}}
/* What We Cover: each name stays on one line on desktop; between phone and wide desktop the card shows two columns so they fit */
@media (min-width:761px){.nums.cov b{white-space:nowrap}}
@media (min-width:761px) and (max-width:1199px){
 .nums.cov{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nums.cov>a{border-left:0!important;border-top:0!important}
 .nums.cov>a:nth-child(even){border-left:1px solid var(--soft)!important}
 .nums.cov>a:nth-child(n+3){border-top:1px solid var(--soft)!important}
}
/* Recent Stories on a mid-size desktop: two columns (Variety's Index cards do the same), so a long section name and its date stay on one line */
@media (min-width:761px) and (max-width:1199px){main .grid.swipe{grid-template-columns:repeat(2,minmax(0,1fr))}}