/* ZERO11 Articles — index + single article. Uses tokens from z11.css. */
:root{
  --maxw:1920px;
  --i:0px;--i-cta:0px;
  --f-hero: clamp(34px,6vw,114px);
  --f-title:clamp(30px,4.6vw,88px);
  --f-h:    clamp(30px,4.8vw,92px);
  --f-body: clamp(16px,1.3vw,24px);
  --f-art:  clamp(18px,1.45vw,24px);
  --f-stand:clamp(22px,2vw,38px);
}
@media (min-width:700px){:root{--i:calc(11vw - var(--page-gutter));--i-cta:calc(4.9vw - var(--page-gutter))}}
.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* masked line reveal (same system as the other pages) */
.rv{display:block;overflow:hidden;padding:.14em .14em .34em;margin:-.14em -.14em -.34em}
.rv > span{display:block;line-height:1.05}
.js .rv:not(.is-done) > span{visibility:hidden}
.rv.is-done,html:not(.js) .rv{overflow:visible}
.rv.is-done > span{transform:none}
.js [data-fade]:not(.is-shown),.js .rise:not(.is-shown){opacity:0}
@media (min-width:700px){.rv > span{white-space:nowrap}}
@media (max-width:699px){
  .rv{display:inline;overflow:visible;padding:0;margin:0}
  .rv > span{display:inline;transform:none!important;visibility:visible!important}
  .js [data-lines]:not(.is-shown){opacity:0}
}
.sans{font-family:var(--sans);font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:-.012em;margin:0}
.body{font-size:var(--f-body);line-height:1.42;letter-spacing:-.004em}
.body p{margin:0}
.eyebrow a{text-decoration:none}.eyebrow a:hover{text-decoration:underline;text-underline-offset:.3em}

/* placeholder imagery — clearly labelled until real project assets are supplied */
.frame{position:relative;overflow:hidden;aspect-ratio:var(--ar,16/9);background:#DADADA;margin:0}
.frame > img{position:absolute;left:0;top:-4%;width:100%;height:108%;object-fit:cover;display:block}
.ph__in{position:absolute;inset:0;background:linear-gradient(135deg,#D8D8D8,#E6E6E6);transition:transform 1s var(--ease-out)}
.ph__label{position:absolute;left:clamp(12px,1.4vw,26px);bottom:clamp(12px,1.2vw,22px);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--zero11-dark)}

/* ===================== INDEX ===================== */
.page{padding-top:clamp(110px,12vw,230px)}
.page .eyebrow{margin-bottom:clamp(30px,4.6vw,88px)}
.h-title{font-size:var(--f-hero);margin-left:var(--i)}
.h-intro{margin:clamp(24px,2.8vw,54px) 0 0 var(--i);max-width:min(46vw,860px)}
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px clamp(18px,2.2vw,40px);margin:clamp(56px,7vw,130px) 0 0 var(--i);padding-bottom:clamp(14px,1.4vw,24px);border-bottom:1px solid rgba(0,0,0,.2)}
.filters__cats{display:flex;flex-wrap:wrap;gap:6px clamp(16px,2vw,34px);margin:0;padding:0;list-style:none}
.filters button{font:700 var(--t-nav)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:none;border:0;padding:.7em 0;cursor:pointer;color:inherit;border-bottom:2px solid transparent}
.filters button:hover,.filters button:focus-visible{border-bottom-color:rgba(0,0,0,.45)}
.filters button[aria-pressed="true"]{border-bottom-color:var(--zero11-dark)}
.filters__search{margin-left:auto;min-width:min(100%,260px)}
.filters input{width:100%;font:400 var(--t-nav)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:none;border:0;border-bottom:1px solid var(--zero11-dark);padding:.7em 0;color:inherit;border-radius:0}
.filters input::placeholder{color:var(--zero11-dark);opacity:1}
.filters input:focus{outline:2px solid var(--zero11-dark);outline-offset:4px}
@media (max-width:699px){.filters{margin-left:0}.filters__search{margin-left:0;width:100%}}
.count{margin:14px 0 0 var(--i);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:699px){.count{margin-left:0}}

.list{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(56px,7vw,130px) clamp(1rem,2vw,2rem);align-items:start;padding-block:clamp(40px,5vw,100px) clamp(80px,12vw,240px)}
.entry{grid-column:1/-1;margin:0}
.entry[hidden]{display:none}
@media (min-width:900px){
  .entry{grid-column:span 6}
  .entry--wide{grid-column:1/-1}
  .entry--lo{margin-top:clamp(40px,8vw,160px)}
}
.entry__link{display:block;color:inherit;text-decoration:none}
.entry .frame{--ar:4/3}
.entry--wide .frame{--ar:21/9}
@media (max-width:899px){.entry--wide .frame{--ar:4/3}}
.entry__meta{display:flex;gap:1.2em;margin-top:clamp(20px,1.8vw,34px);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}
.entry__meta span + span{color:var(--muted)}
.entry__title{font-size:clamp(26px,2.8vw,54px);margin-top:clamp(12px,1.2vw,22px);max-width:20em;line-height:1.04}
.entry--wide .entry__title{font-size:clamp(30px,4.4vw,84px);max-width:16em}
.entry__excerpt{margin-top:clamp(14px,1.4vw,26px);font-size:var(--f-body);line-height:1.42;max-width:46ch}
.entry__read{display:inline-block;margin-top:clamp(16px,1.6vw,30px);font-size:var(--t-nav);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.entry__read .arw{display:inline-block;transition:transform .5s var(--ease-out)}
.entry__link:hover .entry__title,.entry__link:focus-visible .entry__title{text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:.05em}
.entry__link:hover .arw,.entry__link:focus-visible .arw{transform:translateX(6px)}
.entry__link:hover .ph__in,.entry__link:focus-visible .ph__in,.entry__link:hover .frame > img{transform:scale(1.03)}
.empty{margin:clamp(40px,5vw,90px) 0 0 var(--i);font-size:var(--f-body)}
.empty[hidden]{display:none}
@media (max-width:699px){.empty{margin-left:0}}

/* ===================== ARTICLE ===================== */
.art__head{padding-top:clamp(110px,12vw,230px)}
.art__head .eyebrow{margin-bottom:clamp(30px,4.2vw,80px)}
.art__title{font-size:var(--f-title);margin-left:var(--i);line-height:1}
.art__meta{display:flex;flex-wrap:wrap;gap:6px clamp(18px,2vw,36px);margin:clamp(28px,3.2vw,60px) 0 0 var(--i);font-size:var(--t-nav);letter-spacing:.08em;text-transform:uppercase}
.art__meta span:first-child{font-weight:700}
.art__back{margin:clamp(18px,1.8vw,34px) 0 0 var(--i)}
.art__back .tlink{font-size:var(--t-nav)}
.art__hero{margin-top:clamp(48px,6vw,120px);--ar:21/9}
.art__hero-wrap{max-width:var(--maxw);margin-inline:auto}
@media (max-width:699px){.art__hero{--ar:4/3}.art__meta,.art__back,.art__title{margin-left:0}}

.standfirst{margin:clamp(48px,6vw,120px) 0 0 var(--i);font-size:var(--f-stand);line-height:1.3;letter-spacing:-.01em;max-width:min(58vw,820px)}
.prose{margin-top:clamp(40px,5vw,96px);font-size:var(--f-art);line-height:1.55;letter-spacing:-.003em}
.prose > *{margin-left:var(--i);max-width:min(54vw,780px)}
.prose p{margin-block:0 1.1em}
.prose h2{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.012em;line-height:1.05;font-size:clamp(26px,3.2vw,60px);margin-top:clamp(56px,5.5vw,110px);margin-bottom:clamp(18px,1.8vw,34px);max-width:min(72vw,1200px)}
.prose h3{font-family:var(--sans);font-weight:700;line-height:1.15;font-size:clamp(20px,1.9vw,36px);margin-top:2em;margin-bottom:.6em}
.prose ul,.prose ol{padding-left:1.3em;margin-block:0 1.4em}
.prose > ul,.prose > ol{padding-left:1.3em;max-width:min(54vw,780px)}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin-bottom:.6em;padding-left:.2em}
.prose a{text-decoration:underline;text-underline-offset:.2em}
.prose blockquote{margin-block:clamp(48px,6vw,120px);max-width:min(86vw,1500px);font-family:var(--serif);font-weight:300;font-style:italic;letter-spacing:-.03em;font-size:clamp(32px,4.6vw,88px);line-height:1.08}
.prose blockquote p{margin:0}
.prose blockquote span{display:block}
.fig{margin-block:clamp(40px,4.6vw,90px)}
.prose .fig--wide{margin-left:calc(var(--i) - 5.5vw);max-width:min(84vw,1560px)}
.prose .fig--full{margin-left:0;max-width:none}
.fig--column{--ar:3/2}.fig--wide{--ar:16/9}.fig--full{--ar:21/9}
.fig figcaption{margin-top:12px;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prose .fig--full figcaption{margin-left:var(--i)}
@media (max-width:699px){
  .prose > *,.prose .fig--wide{margin-left:0;max-width:none}
  .prose ul,.prose ol{padding-left:1.3em}
  .prose .fig--full figcaption{margin-left:0}
  .fig--wide,.fig--full{--ar:4/3}
}

.art__foot{margin:clamp(64px,8vw,150px) 0 0 var(--i);max-width:min(54vw,780px);padding-top:clamp(28px,3vw,54px);border-top:1px solid rgba(0,0,0,.2)}
@media (max-width:699px){.art__foot{margin-left:0;max-width:none}}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(16px,2vw,34px);font-size:var(--t-nav);letter-spacing:.08em;text-transform:uppercase}
.share__l{color:var(--muted)}
.share a,.share button{font:700 var(--t-nav)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:inherit;background:none;border:0;padding:0 0 .3em;cursor:pointer;border-bottom:1px solid var(--zero11-dark);text-decoration:none}
.share__ok{font-size:var(--t-micro);color:var(--muted)}
.author{margin-top:clamp(28px,3vw,54px)}
.author strong{display:block;font-size:var(--t-nav);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6em}
.author p{margin:0;font-size:var(--f-body);line-height:1.45;max-width:46ch}

.cta{padding-block:clamp(80px,12vw,230px) clamp(40px,6vw,110px)}
.cta__h{font-size:var(--f-h);margin-left:var(--i-cta);line-height:1.02}
.cta__l{margin:clamp(22px,2.4vw,46px) 0 0 var(--i-cta)}
.cta__l .tlink{font-size:var(--t-nav)}
@media (max-width:699px){.cta__h,.cta__l{margin-left:0}}
.next{padding-block:clamp(40px,5vw,100px) clamp(80px,12vw,240px)}
.next__l{margin-bottom:clamp(18px,2vw,36px)}
.next__link{display:block;color:inherit;text-decoration:none;margin-left:var(--i-cta);max-width:min(80vw,1300px)}
@media (max-width:699px){.next__link{margin-left:0}}
.next__meta{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}
.next__meta span + span{color:var(--muted);margin-left:1.2em}
.next__t{font-size:clamp(26px,3.6vw,68px);margin-top:clamp(10px,1.2vw,22px);line-height:1.04}
.next__link:hover .next__t,.next__link:focus-visible .next__t{text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:.05em}
.next__read{display:inline-block;margin-top:clamp(14px,1.6vw,30px);font-size:var(--t-nav);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.next__read .arw{display:inline-block;transition:transform .5s var(--ease-out)}
.next__link:hover .arw{transform:translateX(6px)}