/* L3-v3 */
/* ---- base: white paper, black ink, one electric orange ---- */
:root{background:#fff;color:#000}
body{background:#fff}
h1,h2,h3{font-family:"Archivo Black","Archivo",Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;overflow-wrap:break-word}
p{color:#262626}
a:focus-visible,button:focus-visible{outline:3px solid #ff5200;outline-offset:3px}
.eyebrow{font-weight:800;letter-spacing:.14em;color:#000}
.eyebrow::before{content:"";display:inline-block;width:10px;height:10px;background:#ff5200;margin-right:10px;vertical-align:0}

/* ---- topbar + header: segmented nav, 3px rules ---- */
.topbar{background:#000;color:#fff;border-bottom:3px solid #ff5200;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px}
header{background:#fff;border-bottom:3px solid #000}
.brand{font-family:"Archivo Black","Archivo",Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0;font-size:21px;gap:12px}
.menu{color:#000}
.brand-mark{background:none}
.brand small:empty{display:none}
@media (min-width:641px){
 .header{align-items:stretch;min-height:96px}
 .brand{align-self:center}
 nav{gap:0;align-self:stretch;border-left:3px solid #000;border-right:3px solid #000}
 nav a{display:flex;align-items:center;padding:0 20px;border:0;border-left:3px solid #000;text-transform:uppercase;font-size:13px;font-weight:800;letter-spacing:.06em}
 nav a:first-child{border-left:0}
 nav a.active{background:#ff5200;color:#000;border-color:#000}
 nav a:hover{background:#000;color:#fff}
 nav a.active:hover{background:#000;color:#ff5200}
}
@media (min-width:641px) and (max-width:900px){
 nav a{padding:0 11px;font-size:11px;letter-spacing:.03em}
 .brand{font-size:17px}
}

/* ---- buttons and underlinks: square, 3px, uppercase ---- */
.button{border-radius:0;border:3px solid #000;background:#ff5200;color:#000;text-transform:uppercase;font-weight:800;letter-spacing:.07em;font-size:13px;padding:15px 24px;white-space:normal;text-align:center}
.button:hover{background:#000;color:#fff;border-color:#000}
.hero .button{border-color:#ff5200}
.hero .button:hover{background:#fff;color:#000;border-color:#fff}
.hero .button.outline{background:transparent;border-color:#fff;color:#fff}
.hero .button.outline:hover{background:#fff;color:#000}
.button.white{background:#000;border-color:#000;color:#fff}
.button.white:hover{background:#ff5200;color:#000;border-color:#000}
.underlink{display:inline-block;border:3px solid #000;padding:10px 16px;text-decoration:none;text-transform:uppercase;font-weight:800;letter-spacing:.07em;font-size:12px;line-height:1.3}
.underlink:hover{background:#000;color:#fff}

/* ---- hero: black block, huge type, the photo as a thin strip under it ---- */
.hero{position:relative;z-index:0;background-color:#000;background-repeat:no-repeat;background-size:0 0,100% auto;background-position:0 0,left 50% bottom calc(90px - 33.34vw);padding-bottom:180px;border-bottom:3px solid #000}
.hero::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:180px;background:#000;border-bottom:6px solid #ff5200}
.hero-inner{padding-top:84px;padding-bottom:76px}
.hero .eyebrow{color:#ff5200;font-size:13px;letter-spacing:.18em;margin-bottom:28px}
.hero h1{font-size:clamp(40px,7.6vw,104px);line-height:.92;max-width:none;letter-spacing:-.015em;margin-bottom:32px;font-weight:400}
.hero em{font-style:normal;font-weight:400;color:#ff5200}
.hero p{color:#e6e6e6;font-size:19px;max-width:660px}
.hero .actions{margin-top:36px}
.photo-note{position:absolute;left:max(32px,calc(50% - 588px));bottom:16px;margin:0;background:#000;color:#fff;padding:6px 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* ---- facts: four bordered boxes, the last one orange ---- */
.facts{gap:0;padding-top:0;padding-bottom:0;margin-top:56px;border-bottom:0}
:root .facts>div,:root .facts>a{border:3px solid #000;margin:0 0 0 -3px;padding:26px 24px 24px;background:#fff}
:root .facts>:first-child{margin-left:0}
.facts strong{font-size:30px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;overflow-wrap:break-word;font-weight:400}
.facts span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#333;margin-top:12px}
:root .facts>a{background:#ff5200;color:#000}
.facts>a span{color:#000}
.facts>a span::after{content:" \2192"}
.facts>a:hover{background:#000;color:#fff}
.facts>a:hover span{color:#fff}

/* ---- latest stories: 3 boxed cards with black top bars, orange labels ---- */
.section-title{border-bottom:3px solid #000;padding-bottom:18px}
.section-title h2{font-size:clamp(32px,4.4vw,56px)}
.story-grid{gap:24px}
.story-card{border:3px solid #000;padding:0 24px 22px;background:#fff}
.card-top{background:#000;margin:0 -24px 18px;padding:13px 24px 12px;align-items:center;gap:12px}
.card-top .eyebrow{color:#ff5200;margin:0;font-size:12px;letter-spacing:.14em}
.card-top .eyebrow::before{display:none}
.index{color:#fff;font-family:"Archivo Black","Archivo",Arial,sans-serif;font-size:18px;line-height:1}
.club-tag{font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:#333;margin-bottom:10px}
.story-card h3{font-size:23px;line-height:1.08;margin-bottom:12px}
.story-card h3 a:hover{text-decoration:underline;text-decoration-color:#ff5200;text-decoration-thickness:4px}
.story-card p{font-size:15px;color:#262626}
.card-bottom{border-top:3px solid #000;padding-top:16px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:11px;align-items:center}
.card-bottom a{text-decoration:none;background:#000;color:#fff;padding:7px 11px;font-size:11px;font-weight:800}
.card-bottom a:hover{background:#ff5200;color:#000}

/* ---- about: a full-width orange manifesto band ---- */
.about{max-width:none;margin:0;text-align:left;background:#ff5200;color:#000;padding:76px max(32px,calc(50% - 588px));border-top:3px solid #000;display:grid;grid-template-columns:1.15fr 1fr;column-gap:64px;align-items:start}
.about>.eyebrow{grid-column:1/-1}
.about .eyebrow::before{background:#000}
.about h2{grid-column:1;grid-row:2/4;font-size:clamp(32px,4.6vw,60px);line-height:1;margin:0}
.about p{grid-column:2;grid-row:2;color:#000;font-size:18px;margin-bottom:26px}
.about .underlink{grid-column:2;grid-row:3;justify-self:start;background:#000;color:#fff;border-color:#000}
.about .underlink:hover{background:#fff;color:#000}

/* ---- spotlight inverted: white band, black score box ---- */
.spotlight{background:#fff;color:#000;padding:76px 0;border-top:3px solid #000}
.spotlight .eyebrow{color:#000}
.spotlight h2{font-size:clamp(32px,4.6vw,60px);line-height:1;margin-bottom:22px}
.spotlight p{color:#262626;font-size:17px;margin-bottom:30px}
.score{background:#000;color:#fff;border:3px solid #000;padding:32px}
.score>span{display:block;color:#ff5200;font-weight:800;text-transform:uppercase;letter-spacing:.14em}
.score>div{border-bottom:3px solid #fff;padding:22px 0;font-family:"Archivo Black","Archivo",Arial,sans-serif;text-transform:uppercase;font-size:22px;line-height:1.1;gap:16px}
.score strong{font-family:"Archivo Black","Archivo",Arial,sans-serif;font-weight:400;color:#ff5200;font-size:64px;line-height:1}
.score a{color:#fff;text-transform:uppercase;font-weight:800;letter-spacing:.1em}
.score a:hover{color:#ff5200}
@media (min-width:641px){.spotlight-grid{grid-template-columns:1.1fr 1fr;gap:64px}}

/* ---- footer: black, orange headings, white 3px rule ---- */
footer{background:#000;padding-top:60px}
.footer-brand{font-family:"Archivo Black","Archivo",Arial,sans-serif;font-weight:400;text-transform:uppercase;font-size:30px;letter-spacing:-.01em;line-height:1.05}
footer h2{color:#ff5200;font-size:13px;letter-spacing:.16em;margin-bottom:24px}
footer p{color:#d4d4d4}
.footer-grid>div:last-child>a,.text-button{color:#fff;font-weight:600}
footer a:hover,.text-button:hover{color:#ff5200}
.footer-bottom{border-top:3px solid #fff;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:#d4d4d4;font-size:11px}

/* ---- privacy notice: square, bordered, no shadow ---- */
.privacy-notice{border:3px solid #000;border-radius:0;box-shadow:none;background:#fff}
.privacy-notice strong{font-family:"Archivo Black","Archivo",Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.privacy-notice>svg{color:#ff5200}
.privacy-notice p{color:#262626}

/* ---- inner pages: the page title as a black band like the hero ---- */
.page{padding-top:0}
.page-heading{max-width:none;background:#000;color:#fff;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax);padding:64px 0 56px;margin-bottom:56px}
.page-heading .eyebrow{color:#ff5200}
.page-heading h1{font-size:clamp(40px,6.6vw,92px);line-height:.95;margin-bottom:24px;color:#fff}
.page-heading p{color:#e0e0e0;max-width:760px}
.page-heading p:last-child{margin-bottom:0}

/* news list: 3 cards in a row */
@media (min-width:901px){.news-grid{grid-template-columns:repeat(3,1fr)}}

/* article + privacy */
.article>.underlink:first-child{display:block;margin:0;padding:30px 0 0;border:0;background:#000;color:#ff5200;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax)}
.article>.underlink:first-child:hover{color:#fff}
.article>.underlink:first-child+.page-heading{padding-top:26px}
.article .page-heading h1{font-size:clamp(34px,5vw,64px);line-height:1}
.article-meta{font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#000;font-size:12px;border-top:3px solid #000;border-bottom:3px solid #000;padding:12px 0;margin-bottom:32px}
.article .lead{font-size:23px;font-weight:700;color:#000;line-height:1.5}
.article>p{color:#262626;margin-bottom:20px}
.article h2{border-top:3px solid #000;padding-top:18px;font-size:24px;margin-bottom:12px}
.article>.underlink:last-child{margin-top:8px}
.source-box{background:#fff;border:3px solid #000;border-left:16px solid #ff5200;padding:28px 32px}
.source-box strong{display:block;margin-bottom:8px;font-family:"Archivo Black","Archivo",Arial,sans-serif;font-weight:400;text-transform:uppercase;font-size:18px}
.source-box h2{border:0;padding:0;margin-bottom:10px}
.source-box p{margin-bottom:16px}
.source-box a,.timeline a{text-transform:uppercase;letter-spacing:.07em;font-weight:800;font-size:12px;text-decoration-color:#ff5200;text-decoration-thickness:3px}

/* clubs */
.team-grid{gap:24px}
.team{border:3px solid #000;border-top:14px solid #000;padding:26px}
.team-monogram{border:3px solid #000;font-family:"Archivo Black","Archivo",Arial,sans-serif;font-weight:400}
.team .eyebrow{color:#000;font-size:11px}
.team h2{font-size:24px;margin-bottom:10px}
.team p{margin-bottom:20px}
.team-links a{text-transform:uppercase;letter-spacing:.07em;font-size:12px;font-weight:800;text-decoration-color:#ff5200;text-decoration-thickness:3px}
.note{color:#333;border-left:6px solid #ff5200;padding-left:14px}

/* history: a black year column against white cells */
.timeline{max-width:none}
@media (min-width:641px){.timeline article{grid-template-columns:220px 1fr}}
.timeline article{gap:0;padding:0;border:3px solid #000;margin-top:-3px}
.timeline article:first-child{margin-top:0}
.year{background:#000;color:#ff5200;font-size:56px;padding:26px 24px;line-height:1;overflow-wrap:anywhere}
.timeline article>div{padding:28px 32px}
.timeline h2{font-size:26px;margin-bottom:10px}
.timeline p{margin-bottom:14px}

/* contact */
.contact-panel{background:#000;color:#fff;border:3px solid #000;padding:36px}
.contact-panel h2{margin-bottom:26px}
.contact-panel .contacts a{color:#fff}
.contact-panel .note{margin-top:28px}
.contact-grid>section:last-child h2{margin-bottom:12px}
.contact-grid>section:last-child p{margin-bottom:22px}
.contact-panel .contacts svg{color:#ff5200}
.contact-panel .note{color:#d4d4d4;border-left-color:#ff5200}
.contact-grid>section:last-child>a:last-child{display:inline-block;margin-top:6px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:12px;text-decoration-color:#ff5200;text-decoration-thickness:3px}

@media (max-width:900px){
 .about{padding-left:22px;padding-right:22px;column-gap:36px}
 .photo-note{left:22px}
}
@media (max-width:640px){
 .topbar{font-size:10px;letter-spacing:.1em}
 .brand{font-size:16px}
 nav{box-shadow:none;border-bottom:3px solid #000;border-top:3px solid #000;top:84px}
 nav a{text-transform:uppercase;font-weight:800;letter-spacing:.06em;font-size:14px;border-bottom:0}
 nav a.active{color:#000;background:#ff5200;padding-left:10px;padding-right:10px}
 .hero{padding-bottom:120px;background-position:0 0,left 50% bottom calc(60px - 33.34vw)}
 .hero::before{bottom:120px}
 .hero-inner{padding-top:52px;padding-bottom:52px}
 .hero h1{font-size:clamp(32px,10.4vw,46px);line-height:.96}
 .hero p{font-size:16px}
 .photo-note{bottom:10px;font-size:10px}
 .facts{margin-top:36px}
 :root .facts>div,:root .facts>a{margin:-3px 0 0 -3px;padding:18px 16px}
 :root .facts>:nth-child(odd){margin-left:0}
 :root .facts>:nth-child(-n+2){margin-top:0}
 .facts strong{font-size:21px}
 .facts span{font-size:11px}
 .section-title{flex-wrap:wrap;align-items:flex-end}
 .story-card{padding:0 20px 20px}
 .card-top{margin:0 -20px 16px;padding:12px 20px 11px}
 .story-card h3{font-size:21px}
 .about{grid-template-columns:1fr;padding:52px 22px}
 .about h2,.about p,.about .underlink{grid-column:1;grid-row:auto}
 .about h2{margin-bottom:18px}
 .spotlight{padding:52px 0}
 .score{padding:22px}
 .score>div{font-size:18px}
 .score strong{font-size:44px}
 .page-heading{padding:42px 0 38px;margin-bottom:36px}
 .page-heading h1{font-size:clamp(30px,9.6vw,44px)}
 .article .page-heading h1{font-size:clamp(28px,8.4vw,38px)}
 .article>.underlink:first-child{padding-top:24px}
 .article .lead{font-size:19px}
 .year{font-size:40px;padding:16px 18px}
 .timeline article>div{padding:20px 18px}
 .team{padding:22px}
 .contact-panel{padding:24px}
 .source-box{padding:22px 20px;border-left-width:10px}
 .footer-brand{font-size:24px}
 .brand-mark{width:42px;height:44px}
}