/* DefyOdds — redesign 2026 */
:root{
  --paper:#f6f8f4;      /* cool off-white page */
  --white:#ffffff;
  --forest:#13291b;     /* primary ink */
  --pine:#1f6a2e;       /* links, headings (AA on paper) */
  --green:#46c934;      /* brand green from the logo */
  --moss:#e3ebe0;       /* soft panels */
  --stone:#5b6b5f;      /* secondary text */
  --line:#d3ddd1;
  --display:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --read:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --wide:1180px; --col:760px; --g:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--forest);font:400 19px/1.68 var(--read);font-optical-sizing:auto;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--pine);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--forest);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
::selection{background:var(--green);color:var(--forest)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--forest);color:#fff;padding:8px 14px;z-index:100;font-family:var(--display);letter-spacing:1px}
.skip:focus{left:8px}

/* ---------- header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,248,244,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.bar{max-width:var(--wide);margin:0 auto;padding:0 var(--g);display:flex;align-items:center;gap:24px;min-height:72px}
.logo{font:400 36px/1 var(--display);letter-spacing:.5px;color:var(--forest);text-decoration:none;white-space:nowrap;padding-top:4px}
.logo span{color:var(--green)}
.logo:hover{color:var(--forest);text-decoration:none}
#site-nav{margin-left:auto}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{display:block;font:400 20px/1 var(--display);letter-spacing:1.2px;color:var(--forest);text-decoration:none;background:none;border:0;padding:26px 12px 22px;cursor:pointer;position:relative}
.menu>li>a::after,.menu>li>button::before{content:"";position:absolute;left:12px;right:12px;bottom:14px;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.menu>li>a:hover::after,.menu>li>a[aria-current]::after,.menu>li>button:hover::before,.menu>li.active>button::before,.menu>li.open>button::before{transform:scaleX(1)}
.has-sub>button::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 5px 8px;transition:transform .2s}
.has-sub.open>button::after{transform:rotate(-135deg);margin-bottom:0}
.has-sub ul{list-style:none;margin:0;padding:10px;position:absolute;left:0;top:calc(100% - 6px);min-width:240px;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--green);box-shadow:0 18px 40px -18px rgba(19,41,27,.35);display:none}
.has-sub:hover ul,.has-sub:focus-within ul,.has-sub.open ul{display:block}
.has-sub ul a{display:block;padding:10px 12px;color:var(--forest);text-decoration:none;font:400 17px/1.3 var(--read)}
.has-sub ul a:hover,.has-sub ul a[aria-current]{background:var(--moss);color:var(--pine)}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;padding:12px 4px;cursor:pointer}
.menu-toggle span{display:block;width:26px;height:2px;background:var(--forest);margin:6px 0;transition:transform .2s,opacity .2s}

/* ---------- homepage hero: the one loud moment */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;background-color:var(--forest);background-size:cover;background-position:center 30%;color:#fff;overflow:hidden}
.hero-inner{position:relative;max-width:var(--wide);width:100%;margin:0 auto;padding:80px var(--g) clamp(48px,8vh,96px)}
.hero h1{font:400 clamp(72px,14.5vw,210px)/.82 var(--display);letter-spacing:-.5px;margin:0;text-transform:uppercase;color:#fff;text-wrap:balance;max-width:11ch}
.hero-sub{font:italic 400 clamp(19px,2vw,24px)/1.4 var(--read);margin:26px 0 30px;max-width:34ch;color:#e7f0e5;padding-left:16px;border-left:3px solid var(--green)}
.hero .btn{margin:0}
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-sub,.hero .btn{animation:rise .9s .18s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}

/* ---------- content column */
.content{max-width:calc(var(--col) + 2*var(--g));margin:0 auto;padding:56px var(--g) 88px}
.content.wide{max-width:var(--wide)}
.content::after{content:"";display:table;clear:both}
.text{max-width:var(--col)}
.home .text{max-width:var(--col)}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:.98;margin:1.5em 0 .4em;text-wrap:balance}
h1{font-size:clamp(48px,7vw,84px);letter-spacing:.3px;color:var(--forest)}
h2{font-size:clamp(38px,5vw,60px);letter-spacing:.4px;color:var(--forest)}
h3{font-size:21px;letter-spacing:2px;color:var(--pine);margin-bottom:.2em}
h4{font-size:26px;letter-spacing:.8px;color:var(--forest)}
h3+h2{margin-top:.1em}
.text>:first-child{margin-top:0}
p{margin:0 0 1.05em}
.text p strong:only-child{font-weight:700;color:var(--forest)}
blockquote{margin:1.6em 0;padding:0 0 0 24px;border-left:4px solid var(--green);font-style:italic;font-size:1.12em;line-height:1.55}
ul,ol{padding-left:1.3em}
li{margin-bottom:.35em}
hr{border:0;height:1px;background:var(--line);margin:56px 0;clear:both}
.spacer{height:16px;clear:both}

/* figures */
figure{margin:0 0 28px}
figure.img img{width:100%;border-radius:3px}
figure.float-left,figure.float-right{width:calc(var(--w,4) / 12 * 100%);max-width:44%;min-width:180px}
figure.float-left{float:left;margin:8px 36px 20px 0}
figure.float-right{float:right;margin:8px 0 20px 36px}
figcaption{font:italic 400 15px/1.5 var(--read);color:var(--stone);margin-top:10px}

/* buttons */
.btn-wrap{margin:24px 0;clear:both}
.btn-wrap.center{text-align:center}.btn-wrap.right{text-align:right}
.btn{display:inline-block;background:var(--green);color:var(--forest);font:400 21px/1 var(--display);letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;padding:17px 28px 14px;border-radius:3px;box-shadow:inset 0 -3px 0 rgba(19,41,27,.18);transition:background .15s,transform .15s}
.btn:hover{background:#5ad648;color:var(--forest);text-decoration:none;transform:translateY(-1px)}

/* listing pages: interviews, perspectives, comebacks */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 40px;align-items:start;margin:12px 0 28px}
.row>.col{grid-column:span var(--span,12);min-width:0}
.wide .row>.col .text{font-size:17px;line-height:1.6}
.wide .row>.col h2{font-size:clamp(30px,3vw,40px)}
.wide .row>.col .btn-wrap{margin-top:8px;text-align:left}
.wide .row>.col .btn{font-size:18px;padding:13px 20px 11px}
.wide .row>.col hr{margin:24px 22px}
.wide>.text,.wide>figure,.wide>.btn-wrap,.wide>.video,.wide>.audio{max-width:var(--col)}
.wide>figure.img:not(.float-left):not(.float-right){max-width:var(--wide)}

/* media */
.video{position:relative;aspect-ratio:16/9;margin:0 0 32px;background:var(--forest);border-radius:4px;overflow:hidden;max-width:var(--col)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
figure.audio{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:4px;padding:20px 22px;max-width:var(--col)}
figure.audio figcaption{margin:0 0 12px;color:var(--forest);font-style:normal;font-size:17px}
figure.audio figcaption strong{font:400 24px/1.1 var(--display);letter-spacing:.8px}
figure.audio figcaption span{color:var(--stone);font-style:italic}
figure.audio audio{width:100%}
.form-note{background:var(--moss);border-radius:4px;padding:24px 26px;max-width:var(--col);margin:16px 0}
.form-note .btn-wrap{margin-bottom:0}

/* homepage body */
.home{padding-top:72px}
.home>figure.img:not(.float-left):not(.float-right){max-width:var(--col)}

/* ---------- footer */
.site-footer{background:var(--forest);color:#cfdccd;margin-top:24px}
.site-footer .wrap{max-width:var(--wide);margin:0 auto;padding:64px var(--g) 40px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px 48px}
.foot-brand .logo{color:#fff;font-size:52px}
.foot-brand p{font:italic 400 18px/1.5 var(--read);margin:10px 0 0;max-width:30ch}
.foot-tag{font:400 30px/1 var(--display);letter-spacing:1px;color:#fff;margin:6px 0 4px}
.foot-cta .btn-wrap{margin:14px 0 0}
.site-footer nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 28px;padding:28px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.site-footer nav a{color:#fff;text-decoration:none;font:400 19px/1 var(--display);letter-spacing:1.2px}
.site-footer nav a:hover{color:var(--green)}
.copy{grid-column:1/-1;font-size:14px;color:#94a796;margin:0}

/* ---------- tablet / mobile */
@media (max-width:980px){
  .menu>li>a,.menu>li>button{padding-left:8px;padding-right:8px;font-size:18px}
}
@media (max-width:860px){
  body{font-size:18px}
  .bar{flex-wrap:wrap;min-height:64px}
  .menu-toggle{display:block}
  #site-nav{display:none;width:100%;margin:0 0 12px}
  .nav-open #site-nav{display:block}
  .nav-open .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-open .menu-toggle span:nth-child(2){opacity:0}
  .nav-open .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .menu{flex-direction:column;gap:0}
  .menu>li{border-top:1px solid var(--line)}
  .menu>li>a,.menu>li>button{width:100%;text-align:left;padding:16px 0 14px;font-size:22px}
  .menu>li>a::after,.menu>li>button::before{display:none}
  .has-sub>button::after{float:right;margin-top:6px}
  .has-sub ul{position:static;box-shadow:none;border:0;padding:0 0 12px 12px;min-width:0;background:none}
  .has-sub:hover ul,.has-sub:focus-within ul{display:none}
  .has-sub.open ul{display:block}
  .row{grid-template-columns:1fr}
  .row>.col{grid-column:1/-1}
  figure.float-left,figure.float-right{float:none;width:100%;max-width:100%;min-width:0;margin:0 0 24px}
  .hero{min-height:78vh}
  .site-footer .wrap{grid-template-columns:1fr}
}
@media (min-width:600px) and (max-width:860px){
  .wide .row{grid-template-columns:1fr 1fr}
  .wide .row>.col{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- homepage sections */
.home{max-width:var(--wide);padding-top:0}
.home>section{padding:clamp(56px,8vw,104px) 0;border-bottom:1px solid var(--line)}
.home>section:last-child{border-bottom:0}
.h-intro .text{max-width:860px}
.h-intro h2{font-size:clamp(44px,6.4vw,80px);line-height:.92;margin-bottom:.5em}
.h-intro p{font-size:clamp(19px,1.6vw,22px);line-height:1.6;max-width:var(--col)}
.h-values-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:44px}
.h-values-head .text{max-width:none}
.h-values-head h2{font-size:clamp(40px,5.2vw,68px);line-height:.95;margin-bottom:0}
.h-values-head figure{margin:0}
.values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:3px solid var(--forest)}
.values li{padding:26px 28px 8px 0;margin:0;border-right:1px solid var(--line)}
.values li+li{padding-left:28px}
.values li:last-child{border-right:0}
.v-num{display:block;font:400 64px/1 var(--display);color:var(--green);margin-bottom:10px}
.values h4{font-size:30px;margin:0 0 .35em}
.values p{font-size:17px;line-height:1.55;color:var(--stone);margin:0}
.h-split>.text{max-width:900px;margin-bottom:36px}
.h-split>.text h2{font-size:clamp(38px,4.8vw,62px);line-height:.95}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);align-items:center}
.img-right .split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.img-right .split>figure{order:2}
.split>figure{margin:0}
.split>figure img{aspect-ratio:4/5;object-fit:cover}
.split-body .text{max-width:none}
.split-body h2{font-size:clamp(34px,3.8vw,48px)}
.split-body .btn-wrap{margin-bottom:0}
@media (max-width:860px){
  .h-values-head,.split,.img-right .split{grid-template-columns:1fr;gap:28px}
  .img-right .split>figure{order:0}
  .split>figure img{aspect-ratio:4/3}
  .values{grid-template-columns:1fr}
  .values li,.values li+li{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
  .values li:last-child{border-bottom:0}
}
.video-fig{max-width:var(--col)}
.video-fig .video{margin-bottom:0}
.video-fig figcaption p{margin:0}

/* listing grids (interviews, comebacks, perspectives) */
.row.cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px;align-items:stretch}
.row.cards>.col{grid-column:auto;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;padding:0}
.row.cards>.col>figure.img{margin:0}
.row.cards>.col>figure.img img{border-radius:0;aspect-ratio:1/1;object-fit:cover}
.row.cards>.col figcaption{font-style:normal;font-size:16px;line-height:1.55;color:var(--forest);padding:18px 20px 0;margin:0}
.row.cards>.col figcaption strong:first-child{display:block;font:400 26px/1 var(--display);letter-spacing:.6px;margin-bottom:8px;color:var(--forest)}
.row.cards>.col figcaption p{margin:0 0 .7em}
.row.cards>.col>.text{padding:18px 20px 0;margin:0;font-size:16px}
.row.cards>.col>.btn-wrap{margin:auto 20px 20px;padding-top:12px;text-align:left}
.row.cards>.col .btn{font-size:17px;padding:12px 18px 10px}
@media (max-width:860px){.row.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
@media (max-width:520px){.row.cards{grid-template-columns:1fr}}
.row .row{margin:0 0 16px;gap:20px 32px}
.row figure.img{margin-bottom:16px}

/* hero sizing: headline, tagline and button all visible on first screen */
.hero{min-height:min(86vh,820px)}
.hero h1{font-size:clamp(60px,min(9.5vw,15vh),150px);line-height:.86;max-width:16ch}
.hero-sub{margin:22px 0 26px}
@media (max-width:860px){.hero h1{font-size:clamp(56px,15vw,96px);max-width:11ch}}

/* founder credit */
.credit{grid-column:1/-1;margin:0;font:italic 400 17px/1.5 var(--read);color:#cfdccd}
.credit a{color:#fff;text-decoration-color:var(--green);text-underline-offset:.2em}
.credit a:hover{color:var(--green)}

/* modern sans-serif body text */
body{font-size:18px;line-height:1.65;letter-spacing:.005em}
p strong,.text p strong:only-child{font-weight:600}
@media (max-width:860px){body{font-size:17px}}

/* reading time + share */
.story-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid var(--line);max-width:var(--col)}
.read-time{font:400 18px/1 var(--display);letter-spacing:1.2px;color:var(--stone);text-transform:uppercase}
.share-btn{display:inline-flex;align-items:center;gap:8px;margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px 7px;font:400 17px/1 var(--display);letter-spacing:1.2px;text-transform:uppercase;color:var(--forest);cursor:pointer}
.share-btn:hover{border-color:var(--forest)}
.share-btn.copied{background:var(--green);border-color:var(--green)}

/* read next */
.read-next{background:var(--moss);border-top:1px solid var(--line)}
.read-next-inner{max-width:var(--wide);margin:0 auto;padding:48px var(--g) 56px}
.read-next-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.read-next-head h2{margin:0;font-size:clamp(34px,4vw,48px)}
.next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.next-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;text-decoration:none;color:var(--forest);transition:transform .15s,box-shadow .15s}
.next-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(19,41,27,.45);color:var(--forest);text-decoration:none}
.next-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.next-why{font:400 15px/1 var(--display);letter-spacing:1.4px;text-transform:uppercase;color:var(--pine);padding:16px 18px 6px}
.next-title{font:400 26px/1.05 var(--display);letter-spacing:.4px;padding:0 18px 20px}
@media (max-width:860px){.next-grid{grid-template-columns:1fr}.next-card{flex-direction:row}.next-card img{width:120px;aspect-ratio:1;flex:none}.next-why{padding-top:14px}.next-card>span{display:block}.next-card{align-items:stretch}.next-card .next-why,.next-card .next-title{padding-left:16px}}
@media (max-width:860px){.next-card{display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto 1fr}.next-card img{grid-row:1/3;height:100%}}

/* homepage visualizations */
.h-viz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);align-items:center}
.viz-copy h2{font-size:clamp(38px,4.6vw,58px);line-height:.95;margin:0 0 .45em}
.viz-copy p{max-width:46ch}
.viz-credit{font-size:15px;color:var(--stone)}
.viz-players figure.audio{margin-bottom:16px}
.viz-more{margin:4px 0 0}
@media (max-width:860px){.h-viz{grid-template-columns:1fr}}

/* ---------- story header */
.story-head{background:var(--moss);border-bottom:1px solid var(--line)}
.sh-inner{max-width:var(--wide);margin:0 auto;padding:clamp(36px,6vw,72px) var(--g);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:center}
.no-photo .sh-inner{grid-template-columns:1fr}
.sh-label{font:400 20px/1 var(--display);letter-spacing:2px;color:var(--pine);margin:0 0 14px;text-transform:uppercase}
.story-head h1{font-size:clamp(46px,6.4vw,92px);line-height:.9;margin:0 0 22px;max-width:14ch}
.no-photo .story-head h1,.no-photo h1{max-width:20ch}
.sh-tags{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sh-tags li{margin:0;padding:7px 14px 5px;border-radius:999px;background:var(--white);border:1px solid var(--line);font:400 17px/1 var(--display);letter-spacing:1.2px;text-transform:uppercase;color:var(--forest)}
.story-head .story-meta{border:0;padding:0;margin:0;max-width:none;justify-content:flex-start}
.story-head .share-btn{margin-left:8px;background:var(--white)}
.sh-photo{margin:0;justify-self:end;width:100%;max-width:440px}
.sh-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;border-radius:4px;box-shadow:12px 12px 0 var(--green)}
.story-dup{display:none}
.story-head+.content{padding-top:48px}

/* ---------- pull quote */
.pull-quote{margin:44px 0;max-width:var(--col);clear:both}
.pull-quote blockquote{margin:0;padding:6px 0 6px 28px;border-left:6px solid var(--green);font:400 clamp(30px,3.6vw,44px)/1.05 var(--display);letter-spacing:.3px;color:var(--forest);font-style:normal;text-wrap:balance}

/* ---------- Q&A questions + top accent */
p.q{margin-top:1.8em;padding-left:14px;border-left:3px solid var(--green);font-weight:600;color:var(--forest)}
p.q strong{font-weight:650}
.site-header{border-top:4px solid var(--green)}

@media (max-width:860px){
  .sh-inner{grid-template-columns:1fr;gap:28px}
  .sh-photo{justify-self:start;max-width:320px;order:-1}
  .sh-photo img{box-shadow:8px 8px 0 var(--green)}
  .story-head h1{max-width:none}
}
@media (max-width:860px){
  .sh-photo{max-width:100%;order:0}
  .sh-photo img{aspect-ratio:16/10;object-position:center 30%}
  .sh-inner{padding-top:28px;padding-bottom:36px}
}

/* ---------- calmer heading scale (clean + sleek) */
h2{font-size:clamp(30px,3.2vw,42px);line-height:1;letter-spacing:.5px}
h3{font-size:18px;letter-spacing:2.2px}
.h-intro h2{font-size:clamp(32px,3.4vw,46px);line-height:1;max-width:24ch;margin-bottom:.6em}
.h-intro p{font-size:clamp(18px,1.4vw,20px)}
.h-values-head h2{font-size:clamp(32px,3.4vw,46px);line-height:1}
.h-split>.text h2{font-size:clamp(30px,3.2vw,42px);line-height:1}
.split-body h2{font-size:clamp(28px,2.8vw,38px)}
.viz-copy h2{font-size:clamp(30px,3.2vw,42px);line-height:1}
.read-next-head h2{font-size:clamp(28px,3vw,38px)}
.story-head h1{font-size:clamp(42px,5vw,72px);line-height:.92}
.values h4{font-size:26px}
.v-num{font-size:48px}
.pull-quote blockquote{font-size:clamp(26px,2.8vw,36px);line-height:1.1}
.home>section{padding:clamp(48px,6vw,88px) 0}
.h-intro h2{max-width:34ch}

/* ---------- clean white look */
:root{--paper:#ffffff;--moss:#eef3ec}
body{font-size:17px;line-height:1.7}
.h-intro p{font-size:18px}
.site-header{background:rgba(255,255,255,.96)}
@media (max-width:860px){body{font-size:16.5px}}

/* quieter hero tagline */
.hero-sub{font:400 clamp(16px,1.35vw,19px)/1.5 var(--read);font-style:normal;letter-spacing:.01em;color:rgba(255,255,255,.88);max-width:42ch;margin:22px 0 28px;padding-left:14px}

/* softer body text, titles stay dark */
:root{--body-ink:#364239}
body{color:var(--body-ink)}
h1,h2,h4,.story-head h1,.next-title,.values h4,.pull-quote blockquote,p.q,p.q strong,.text p strong,.foot-tag{color:var(--forest)}

/* ---------- polish pass */
/* columns always fill the width (fixes narrow squeezed text) */
.row{display:flex;gap:28px 40px;align-items:flex-start}
.row>.col{flex:var(--span,6) 1 0;min-width:0}
@media (max-width:860px){.row{display:block}.row>.col{margin-bottom:12px}}
/* footer sits at the bottom on short pages */
html{background:var(--forest)}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;background:var(--paper)}
.site-footer{margin-top:0}
/* breathing room on pages without a story header */
main>.content:first-child{padding-top:clamp(48px,6vw,80px)}
/* consistent, softer corners and flatter buttons */
figure.img img,.video,.sh-photo img{border-radius:6px}
.row.cards>.col,.next-card,figure.audio,.form-note{border-radius:8px}
.btn{border-radius:6px;box-shadow:none;padding:15px 26px 13px;transition:background .15s,transform .15s}
.btn:hover{background:#3db52d;color:var(--forest)}
.row.cards>.col{transition:border-color .15s}
.row.cards>.col:hover{border-color:#c4d0c2}
/* lighter dividers */
hr{background:#e3e9e2}
/* links: subtle green underline */
.text a{text-decoration-color:rgba(31,106,46,.45)}
.text a:hover{text-decoration-color:currentColor}
.row.cards{display:grid}

/* footer tagline: match the quieter hero tagline */
.foot-brand p{font:400 15px/1.55 var(--read);font-style:normal;letter-spacing:.01em;color:#a9b8aa;margin-top:12px;max-width:32ch}
.credit{font-style:normal;font-size:15px}

/* ---------- forms */
.form-card{max-width:var(--col);margin:8px 0 24px;background:var(--moss);border-radius:10px;padding:clamp(24px,4vw,40px)}
.form-card>h2{margin:0 0 .35em}
.form-lead{margin:0 0 24px;max-width:56ch}
.df-form{display:grid;gap:18px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.df-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px;color:var(--forest)}
.df-form .opt{font-weight:400;color:var(--stone);font-size:13px}
.df-form input:not([type=radio]):not([type=checkbox]),.df-form select,.df-form textarea{font:inherit;font-weight:400;font-size:16px;color:var(--forest);background:#fff;border:1px solid #cdd8cb;border-radius:6px;padding:11px 12px;width:100%}
.df-form textarea{resize:vertical}
.df-form input:focus,.df-form select:focus,.df-form textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.f-choice{border:0;padding:0;margin:0;display:grid;gap:8px}
.f-choice legend{font-weight:600;font-size:15px;color:var(--forest);margin-bottom:6px}
.f-choice label,.f-check{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-weight:400!important;font-size:15px!important;color:var(--body-ink)!important}
.f-choice input,.f-check input{width:18px;height:18px;margin-top:3px;accent-color:#2f9a24;flex:none}
.f-actions{margin:4px 0 0}
.f-actions .btn{border:0;cursor:pointer}
.f-actions .btn[disabled]{opacity:.6;cursor:wait}
.f-error{margin:0;color:#a3261b;font-weight:600}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-status{background:#fff;border-left:4px solid var(--green);border-radius:6px;padding:14px 16px;margin:0 0 22px;color:var(--forest)}
.form-status strong{display:block;font-size:17px;margin-bottom:2px}
.f-under18{font-size:14px;color:var(--stone);margin:18px 0 0}
@media (max-width:640px){.f-grid{grid-template-columns:1fr}}
.df-form .lbl .opt{margin-left:6px}
.form-card{scroll-margin-top:110px}

/* =====================================================================
   ATHLETIC REDESIGN: black & white first, green as the single accent,
   photo-led, square imagery, pill buttons
   ===================================================================== */
:root{
  --forest:#111111; --pine:#111111; --paper:#ffffff; --moss:#f5f5f5;
  --body-ink:#3b3b3b; --stone:#707072; --line:#e5e5e5; --green:#46c934; --volt:#5ee13f;
}
body{color:var(--body-ink)}
a{color:#111;text-decoration-color:rgba(17,17,17,.35)}
a:hover{color:#111;text-decoration-color:#111}
::selection{background:var(--volt);color:#111}

/* header: clean white bar, bold sans nav */
.site-header{border-top:0;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.bar{min-height:64px}
.logo{font-size:32px;color:#111}
.menu>li>a,.menu>li>button{font:600 15px/1 var(--read);letter-spacing:0;text-transform:none;padding:24px 12px 22px;color:#111}
.menu>li>a::after,.menu>li>button::before{height:2px;bottom:12px;background:#111}
.has-sub ul{border-top:0;border-radius:0;box-shadow:0 18px 40px -20px rgba(0,0,0,.35);padding:8px}
.has-sub ul a{font:500 15px/1.3 var(--read)}
.has-sub ul a:hover,.has-sub ul a[aria-current]{background:#f5f5f5;color:#111}

/* labels: small tracked sans, grey */
h3,.sh-label,.next-why,.tile-tag{font:600 12px/1.2 var(--read)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--stone)}
h1,h2,h4{color:#111}

/* pill buttons */
.btn{background:#111;color:#fff;border-radius:999px;font:600 13px/1 var(--read);letter-spacing:.08em;text-transform:uppercase;padding:15px 26px;box-shadow:none}
.btn:hover{background:#3a3a3a;color:#fff;transform:none}
.btn-light{background:#fff;color:#111}
.btn-light:hover{background:#e6e6e6;color:#111}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* hero */
.hero{min-height:min(92vh,900px)}
.hero h1{letter-spacing:0}
.hero-sub{border-left:0;padding-left:0;color:rgba(255,255,255,.85)}

/* imagery: square, photo-led, gentle zoom on hover */
figure.img img,.sh-photo img,.video,.next-card,.next-card img,.row.cards>.col,.row.cards>.col>figure.img img{border-radius:0}
figure.img{overflow:hidden}
a img,.row.cards img,.tile img,.next-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a:hover img,.row.cards>.col:hover img,.tile:hover img,.next-card:hover img{transform:scale(1.04)}
hr{background:var(--line)}

/* listing cards: no boxes, image + bold name, whole card clickable */
.row.cards{gap:44px 24px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.row.cards>.col{background:none;border:0;position:relative;padding:0}
.row.cards>.col:hover{border:0}
.row.cards>.col>figure.img{overflow:hidden;background:#f5f5f5}
.row.cards>.col>figure.img img{aspect-ratio:4/5}
.row.cards>.col figcaption{padding:16px 0 0;font-size:15px;line-height:1.55;color:var(--body-ink)}
.row.cards>.col figcaption strong:first-child{font:400 30px/1 var(--display);letter-spacing:.3px;color:#111;margin-bottom:8px}
.row.cards>.col>.text{padding:16px 0 0}
.row.cards>.col>.btn-wrap{margin:14px 0 0;padding:0}
.row.cards>.col .btn{background:transparent;color:#111;padding:0;border-radius:0;letter-spacing:.08em;font-size:12px;box-shadow:inset 0 -1.5px 0 #111;padding-bottom:4px}
.row.cards>.col .btn:hover{background:transparent;color:#111;box-shadow:inset 0 -3px 0 var(--green)}
.row.cards>.col .btn::after{content:"";position:absolute;inset:0}

/* homepage */
.h-tiles .tiles-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.h-tiles h2{margin:0}
.tiles-all{font:600 13px/1 var(--read);letter-spacing:.08em;text-transform:uppercase;color:#111;text-decoration:none;box-shadow:inset 0 -1.5px 0 #111;padding-bottom:4px}
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;background:#111;color:#fff;text-decoration:none}
.tile img{width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.78) 100%)}
.tile-text{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;display:flex;flex-direction:column;gap:8px}
.tile .tile-tag{color:var(--volt)!important}
.tile-name{font:400 clamp(26px,2.2vw,34px)/.95 var(--display);color:#fff;letter-spacing:.3px}
.tile:hover{color:#fff}
.h-values{background:#111;color:#e9e9e9;box-shadow:0 0 0 100vmax #111;clip-path:inset(0 -100vmax);border-bottom:0!important}
.h-values h2,.h-values h4{color:#fff}
.h-values h3{color:#a7a7a7!important}
.values{border-top:1px solid #333}
.values li{border-right-color:#333}
.values p{color:#b9b9b9}
.v-num{color:var(--volt)}
.h-values figure.img img{filter:grayscale(.15) contrast(1.05)}
.home>section{border-bottom:0}
.home>section+section:not(.h-values){border-top:1px solid var(--line)}
.h-values+section{border-top:0!important}
.split>figure img{aspect-ratio:4/5}
figure.audio{border-radius:0;border:0;border-left:3px solid #111;background:#f5f5f5}

/* story header: black, dramatic */
.story-head{background:#111;border-bottom:0;color:#fff}
.story-head h1{color:#fff}
.story-head .sh-label{color:var(--volt)!important}
.sh-tags li{background:transparent;border:1px solid #4a4a4a;color:#fff;font:600 12px/1 var(--read);letter-spacing:.1em;padding:8px 12px}
.story-head .read-time{color:#a7a7a7;font:600 12px/1 var(--read);letter-spacing:.12em}
.story-head .share-btn{background:transparent;border-color:#4a4a4a;color:#fff}
.story-head .share-btn:hover{border-color:#fff}
.sh-photo img{box-shadow:none}
.share-btn{font:600 12px/1 var(--read);letter-spacing:.1em}
.read-time{font:600 12px/1 var(--read);letter-spacing:.12em}

/* pull quote + Q&A */
.pull-quote blockquote{border-left:0;padding:0;color:#111;font-size:clamp(30px,3.4vw,44px);line-height:1}
.pull-quote blockquote::before{content:"";display:block;width:48px;height:4px;background:var(--green);margin-bottom:18px}
p.q{border-left:0;padding-left:0;color:#111}
p.q strong{font-weight:700}

/* read next: photo tiles with names over the image */
.read-next{background:#f5f5f5;border-top:0}
.next-grid{gap:12px}
.next-card{position:relative;border:0;background:#111;color:#fff;aspect-ratio:4/5;display:block}
.next-card:hover{transform:none;box-shadow:none;color:#fff}
.next-card img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.next-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%)}
.next-card .next-why,.next-card .next-title{position:absolute;left:18px;right:18px;z-index:1;padding:0}
.next-card .next-why{bottom:58px;color:var(--volt)!important}
.next-card .next-title{bottom:18px;color:#fff;font-size:28px}

/* forms */
.form-card{background:#f5f5f5;border-radius:0}
.df-form input:not([type=radio]):not([type=checkbox]),.df-form select,.df-form textarea{border-radius:4px;border-color:#d4d4d4}
.df-form input:focus,.df-form select:focus,.df-form textarea:focus{outline:2px solid #111;border-color:#111}
.f-choice input,.f-check input{accent-color:#111}
.form-status{border-left-color:var(--green);border-radius:0}

/* footer: black */
.site-footer{background:#111}
html{background:#111}
.foot-tag{font:400 32px/1 var(--display)}
.site-footer nav a{font:600 14px/1 var(--read);letter-spacing:0;text-transform:none;color:#fff}
.site-footer nav a:hover{color:var(--volt)}
.site-footer .btn{background:#fff;color:#111}
.site-footer .btn:hover{background:#e6e6e6}
.credit a{text-decoration-color:var(--volt)}

@media (max-width:860px){
  .menu>li>a,.menu>li>button{font-size:18px;padding:16px 0}
  .tile-grid{grid-template-columns:1fr 1fr}
  .next-card{aspect-ratio:16/10;display:block}
  .next-card img{grid-row:auto;height:100%}
  .row.cards{grid-template-columns:1fr 1fr;gap:32px 14px}
  .row.cards>.col figcaption strong:first-child{font-size:24px}
}
@media (max-width:520px){.row.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){a:hover img,.row.cards>.col:hover img,.tile:hover img,.next-card:hover img{transform:none}}
.row.cards>.col>figure.img{background:none}
.tile::after,.next-card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.88) 100%)}

/* no lonely last words */
.hero-sub,.foot-brand p,.form-lead,.tile-name,.next-title{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}

/* pro spotlight: black band */
.h-pros{background:#111;box-shadow:0 0 0 100vmax #111;clip-path:inset(0 -100vmax);color:#fff;padding:clamp(56px,7vw,96px) 0!important;margin:12px 0 40px;border-top:0!important}
.home>.h-pros{margin:0}
.h-pros h2{color:#fff;margin:6px 0 0}
.h-pros h3{color:var(--volt)!important;margin:0}
.h-pros .tiles-head{align-items:flex-end;margin-bottom:28px}
.h-pros+section{border-top:0!important}
.content:not(.home) .h-pros{margin:20px 0 56px}
.h-pros .tiles-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:860px){.tile::after{background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.92) 100%)}}

/* footer CTA: visible heading, aligned with the logo */
.site-footer .wrap{align-items:start}
.foot-cta{justify-self:end;text-align:left;max-width:380px}
.site-footer .foot-tag{color:#fff!important;font:400 34px/1 var(--display);margin:0 0 10px;letter-spacing:.3px}
.foot-sub{font:400 15px/1.5 var(--read);color:#a9b8aa;margin:0 0 18px;text-wrap:balance}
.foot-cta .btn-wrap{margin:0}
@media (max-width:860px){.foot-cta{justify-self:start}}

/* end-of-page link */
.page-next{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 24px;margin:48px 0 8px;padding:28px 0;border-top:2px solid #111;border-bottom:1px solid var(--line);text-decoration:none;color:#111;max-width:var(--col);clear:both}
.content.wide .page-next{max-width:none}
.pn-label{grid-column:1;font:600 12px/1 var(--read);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.pn-title{grid-column:1;font:400 clamp(32px,4vw,52px)/.95 var(--display);letter-spacing:.3px;color:#111}
.pn-arrow{grid-column:2;grid-row:1/3;font:400 40px/1 var(--read);transition:transform .2s}
.page-next:hover{color:#111}
.page-next:hover .pn-arrow{transform:translateX(8px)}
.page-next:hover .pn-title{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--green)}

/* ---------- tighter feature blocks + rounded photos */
:root{--r:14px}
.split{max-width:1040px;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(28px,4vw,56px)}
.img-right .split{grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
.split>figure img{aspect-ratio:4/5;max-height:560px}
.split-body,.split-body p,.viz-copy p{font-size:16.5px;line-height:1.65}
.h-split>.text h2{max-width:28ch}
.h-intro p{font-size:17px}
figure.img img,.sh-photo img,.video,.tile,.next-card,.row.cards>.col>figure.img,.row.cards>.col>figure.img img,.h-values figure.img img,.split>figure img{border-radius:var(--r)}
figure.img{border-radius:var(--r)}
figure.audio,.form-card,.form-status{border-radius:var(--r)}
.page-next{border-radius:0}
.h-split>.text h2{max-width:22em}
.h-tiles .tiles-head{align-items:flex-end}
.h-tiles h3{margin:0 0 6px}

/* mission: two-column editorial layout, tighter section spacing */
.home>section{padding:clamp(40px,5vw,72px) 0}
.h-intro .text{max-width:none;display:flow-root}
.h-intro .text>h3,.h-intro .text>h2{float:left;clear:left;width:42%}
.h-intro .text>h2{margin:0}
.h-intro .text>p{margin-left:50%;font-size:16.5px;line-height:1.7}
@media (max-width:860px){.h-intro .text>h3,.h-intro .text>h2{float:none;width:auto}.h-intro .text>h2{margin-bottom:.6em}.h-intro .text>p{margin-left:0}}
/* phones: feature blocks stack (photo above text) */
@media (max-width:860px){.split,.img-right .split{grid-template-columns:1fr;gap:24px}.img-right .split>figure{order:0}.split>figure img{aspect-ratio:4/3;max-height:none}}
/* core values: headline sits beside the photo, not below empty space */
.h-values-head{align-items:center}
.h-values-head h2{max-width:12ch}
/* ---------- Stories hub ---------- */
.hub-head{max-width:var(--wide);margin:0 auto;padding:clamp(40px,6vw,80px) var(--g) clamp(20px,3vw,32px)}
.hub-head h1{font-size:clamp(56px,9vw,120px);line-height:.88;margin:0 0 .25em;color:#111}
.hub-head p{max-width:46ch;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--body-ink);margin:0}
.hub{max-width:var(--wide);margin:0 auto;padding:0 var(--g) clamp(48px,6vw,88px)}
.hub-filters{border-top:2px solid #111;padding:18px 0 4px;margin-bottom:28px}
.hub-row{display:flex;align-items:baseline;gap:16px;margin-bottom:12px}
.hub-label{flex:none;width:64px;font:600 12px/1.2 var(--read);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 14px/1 var(--read);color:#111;background:#fff;border:1px solid #d6d6d6;border-radius:999px;padding:9px 15px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.chip:hover{border-color:#111}
.chip[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}
.chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hub-count{font-size:14px;color:var(--stone);margin:8px 0 0}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:36px 20px}
.hub-card{display:flex;flex-direction:column;text-decoration:none;color:#111}
.hub-card[hidden]{display:none}
.hub-img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:#f2f2f2;margin-bottom:12px}
.hub-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hub-card:hover .hub-img img{transform:scale(1.04)}
.hub-tag{font:600 11.5px/1.2 var(--read);letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.hub-tag.is-pro{color:#1f8a12}
.hub-name{font:400 27px/1 var(--display);letter-spacing:.01em;text-transform:uppercase;margin:6px 0 6px}
.hub-line{font-size:14.5px;line-height:1.5;color:var(--body-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hub-card:hover .hub-name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.hub-card:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:var(--r)}
.hub-empty{text-align:center;padding:48px 0}
.hub-empty p{font-size:17px;margin:0 0 18px}
@media (max-width:640px){
  .hub-row{flex-direction:column;gap:8px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--g));padding:2px var(--g) 6px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .hub-grid{grid-template-columns:1fr 1fr;gap:28px 12px}
  .hub-name{font-size:22px}
  .hub-line{font-size:13.5px;-webkit-line-clamp:3}
}
@media (prefers-reduced-motion:reduce){.hub-card:hover .hub-img img{transform:none}}
@media (max-width:860px){.h-values-head h2{max-width:none}}
/* stories hub: keep filter rows inside the screen on phones */
.hub{overflow-x:clip}
.hub-row,.chips{min-width:0}
.hub-filters{margin-bottom:32px}
@media (max-width:640px){.hub-row{align-items:stretch}.chips{max-width:calc(100% + 2 * var(--g))}}
.content a{overflow-wrap:anywhere}
/* homepage hero on phones: two balanced headline lines, buttons visible without scrolling */
@media (max-width:860px){
  .hero{min-height:min(74svh,640px)}
  .hero h1{max-width:none;font-size:clamp(52px,14vw,88px)}
  .hero-inner{padding-bottom:36px}
}
/* small labels (h3) directly above body text need breathing room; label above a headline stays tight */
main h3+p,main h3+ul,main h3+ol,main h3+blockquote{margin-top:12px}
/* phone menu: big display type */
@media (max-width:860px){
  .menu>li>a,.menu>li>button{font:400 36px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;padding:18px 0 14px;color:#111}
  .has-sub>button::after{margin-top:10px}
  .has-sub ul a{font:500 17px/1.3 var(--read);padding:10px 0}
}
@media (max-width:860px){.has-sub ul{position:static;box-shadow:none!important;border:0!important;background:none!important;padding:0 0 14px!important;margin:0;min-width:0}.has-sub ul a{padding:9px 0!important}}
@media (max-width:860px){.menu>li>a,.menu>li>button{font-size:28px;padding:15px 0 12px}.has-sub>button::after{margin-top:6px}}
/* small labels above headlines: a little air, consistent site-wide */
main h3{margin-bottom:10px}
main h3+h2,main h3+h1{margin-top:0}
.h-tiles h3,.h-pros h3{margin-bottom:10px!important}
/* ---------- alignment + spacing pass ---------- */
/* footer: community block aligned to the right edge; credit and copyright share one row */
.foot-cta{justify-self:end;text-align:right}
.foot-cta .btn-wrap{text-align:right}
.site-footer .credit{grid-column:1;align-self:center;font-size:14px}
.site-footer .copy{grid-column:2;justify-self:end;align-self:center;font-size:13px}
@media (max-width:860px){
  .foot-cta{justify-self:start;text-align:left}.foot-cta .btn-wrap{text-align:left}
  .site-footer .credit,.site-footer .copy{grid-column:1;justify-self:start}
}
/* feature blocks line up with the section edges */
.split{max-width:none}
/* even section rhythm; no oversized gap before the footer */
.home>section:last-child{padding-bottom:clamp(40px,5vw,72px)}
.home>section.h-pros{padding-bottom:clamp(40px,5vw,72px)}
main>.content:last-child,main>.content.wide:last-child{padding-bottom:clamp(40px,5vw,72px)}
.content.home{padding-bottom:0}
.chip[hidden]{display:none}
/* stories header: smaller title, intro beside it on wide screens */
.hub-head{padding:clamp(36px,5vw,64px) var(--g) clamp(24px,3vw,36px)}
.hub-head-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:end}
.hub-head h3{margin:0 0 10px}
.hub-head h1{font-size:clamp(44px,5.4vw,76px);line-height:.92;margin:0;max-width:10ch}
.hub-head p{font-size:16.5px;line-height:1.65;max-width:52ch;margin:0}
.hub-filters{padding-top:20px}
@media (max-width:860px){.hub-head-inner{grid-template-columns:1fr;gap:16px}.hub-head h1{max-width:none}}
/* vision & values page */
.vv-values .text h2{margin-bottom:24px}
.vv-photo{margin:0 0 8px}
.vv-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 35%}
.vv-values .values{margin:24px 0 8px}
.vv-values .values h4{font-size:24px}
.vv-values .values p{font-size:16px}
.vv-values .values{border-top:2px solid #111}
.vv-values .values li{border-right-color:var(--line)}
.vv-values .values p{color:var(--body-ink)}
.vv-photo img{aspect-ratio:2/1}
@media (max-width:860px){.vv-values .values li{border-bottom-color:var(--line)}.vv-photo img{aspect-ratio:4/3}}
.vv-photo img{object-position:center 22%}
/* feature blocks (computer): photo column a little narrower and exactly as tall as the text */
@media (min-width:861px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
  .img-right .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split>figure{position:relative;min-height:320px;margin:0}
  .split>figure img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center 20%}
  .split>.text{align-self:center}
}
@media (min-width:861px){.split>.text{align-self:stretch;display:flex;flex-direction:column;justify-content:center}.split>.text>:first-child{margin-top:0}.split>.text>:last-child{margin-bottom:0}}
@media (min-width:861px){.split>.split-body{display:flex;flex-direction:column;justify-content:center}.split-body>.text>:first-child{margin-top:0}}
/* story photos between paragraphs, full text width, never cropped */
figure.photo-wide{float:none!important;width:100%!important;max-width:none!important;margin:36px 0!important;clear:both}
figure.photo-wide img{display:block;width:auto;max-width:100%;height:auto;max-height:min(620px,78vh);margin:0 auto;border-radius:var(--r)}
figure.photo-wide figcaption{text-align:center}
.photo-dup{display:none!important}
/* tall story photos: text wraps beside them on computers */
figure.photo-tall{width:100%;margin:36px 0;clear:both}
figure.photo-tall img{display:block;width:auto;max-width:100%;max-height:min(620px,78vh);margin:0 auto;border-radius:var(--r)}
@media (min-width:761px){
  figure.photo-tall{width:40%!important;margin:6px 0 20px!important}
  figure.photo-tall.float-left{float:left;margin-right:32px!important;clear:left}
  figure.photo-tall.float-right{float:right;margin-left:32px!important;clear:right}
  figure.photo-tall img{width:100%;max-height:none;margin:0}
}
main:has(.story-head) .content h2{clear:both}
/* rhythm: dividers and the blocks around them */
main hr{margin:40px 0}
main hr+figure,main hr+.text>:first-child,main hr+figure.photo-wide,main hr+figure.photo-tall{margin-top:0!important}
main .text ul:last-child,main .text ol:last-child{margin-bottom:0}
main .text li+li{margin-top:.35em}
.page-next{margin-bottom:0}
/* story pages: tighter handoff from the header into the article, and from the article into Read next */
.story-head+.content{padding-top:clamp(32px,4vw,48px)}
.story-head+.content>.text:first-child>:first-child,.story-head+.content>:first-child{margin-top:0}
main:has(.story-head) .content{padding-bottom:clamp(32px,4vw,48px)}
.read-next-inner{padding-top:clamp(36px,4vw,48px)}
.story-head+.content>.text:first-child:has(>.story-dup:only-child)+*{margin-top:0!important}
.story-head+.content>.text:first-child:has(>.story-dup:only-child)+*>:first-child{margin-top:0!important}
.story-head+.content>.text:first-child:not(:has(>:not(.story-dup)))+*{margin-top:0!important}
main hr+*,main hr+*>:first-child{margin-top:0!important}
main hr:has(+.page-next){display:none}
.photo-dup+*,.photo-dup+*>:first-child{margin-top:0!important}
@media (max-width:860px){.page-next{margin-top:40px}}
main .spacer:has(+.page-next),main hr:has(+.spacer+.page-next){display:none}
/* homepage: "See all stories" stays on one line */
.tiles-all{white-space:nowrap}
@media (max-width:640px){.tiles-head{align-items:flex-end}.tiles-head h2{max-width:11ch}}
/* article titles written as bold caps paragraphs: use the headline font */
.text>p.as-title{font:400 clamp(26px,3vw,34px)/1.02 var(--display);letter-spacing:.01em;text-transform:uppercase;color:#111;margin:0 0 10px}
.text>p.as-title strong{font-weight:400}
.text>p.as-title+h3{margin-top:4px}
@media (min-width:761px){figure.photo-tall{width:46%!important}figure.photo-tall.float-left{margin-right:36px!important}figure.photo-tall.float-right{margin-left:36px!important}}
/* share your story */
.share-band{background:#111;color:#fff}
.share-band-inner{max-width:var(--wide);margin:0 auto;padding:clamp(40px,5vw,64px) var(--g);display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.share-band h2{color:#fff;font-size:clamp(36px,4.4vw,56px);line-height:.95;margin:0 0 8px}
.share-band p{color:#c9c9c9;font-size:17px;margin:0;max-width:44ch}
.share-line{margin:40px 0 0;padding:20px 24px;background:var(--moss);border-radius:var(--r);font-size:16px;color:var(--body-ink)}
.share-line a{color:#111;font-weight:600}
.share-line+.page-next,.share-line+hr{margin-top:28px}
.share-band{background:var(--moss);color:#111;border-top:1px solid var(--line)}
.share-band h2{color:#111}
.share-band p{color:var(--body-ink)}
.share-band .btn-light{background:#111;color:#fff}
.share-band .btn-light:hover{background:#333;color:#fff}
main hr:has(+.share-line),main hr:has(+.spacer+.share-line),main .spacer:has(+.share-line){display:none}
.hub-share{margin:14px 0 0!important;font-size:15px!important;color:var(--body-ink)}
.hub-share a{color:#111;font-weight:600}
.hub-more{text-align:center;margin-top:44px}
.hub-more:has([data-more][hidden]){display:none}
.btn-outline{background:transparent;color:#111;border:1.5px solid #111}
.btn-outline:hover{background:#111;color:#fff}
.hub{padding-bottom:clamp(40px,5vw,72px)}