/* True Blue Tribe · Heritage Denim (palette option 4, chosen 10/17/2026)
   Workwear and the American flag: navy and faded denim, saddle tan, one brick red.
   Type: Zilla Slab (headlines) · Lora (reading) · Karla (labels, buttons, UI). */
:root{
  /* Palette */
  --chambray:#EFEAE0;   /* page bands */
  --paper:#F7F4EE;      /* page */
  --midnight:#16202B;   /* text, dark ground */
  --navy:#1E3045;       /* bands, podcast */
  --navy-2:#172638;
  --ink-2:#1D2A39; --ink-3:#273749;
  --denim:#4F6E8E;      /* the "true blue" */
  --denim-lt:#8FA9C4;   /* denim on dark grounds */
  --tan:#A57E52;        /* saddle tan */
  --brick:#A33B2A;      /* signature: buttons, labels */
  --brick-2:#8A3022;    /* hover */
  --brick-lt:#D8644E;   /* brick on dark grounds */
  --steel:#D3D9E0;      /* logo on dark */
  --text:#1F2833; --muted:#5B6470; --muted-dark:#A7B1BD;
  --line:#DCD5C8; --line-dark:rgba(255,255,255,.12);
  /* The 4 Mountains + sections */
  --heart:#A33B2A; --body:#A57E52; --mind:#4F6E8E; --spirit:#5C4F7A; --skills:#6B7547; --stories:#8A5A3C;
  /* Type */
  --display:"Zilla Slab", Rockwell, Georgia, serif;
  --poster:"Oswald", "Arial Narrow", Impact, sans-serif;
  --label:"Karla", "Helvetica Neue", Arial, sans-serif;
  --ui:"Karla", "Helvetica Neue", Arial, sans-serif;
  --serif:"Lora", Georgia, serif;
  --wrap:1200px;
  --kicker:var(--brick);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--text); font:400 16px/1.65 var(--ui)}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.005em; line-height:1.04; text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,4.4rem)}
h2{font-size:clamp(2rem,4.2vw,2.9rem)}
h3{font-size:1.6rem}
h1 em,h2 em{font-style:normal; color:var(--brick)}
p{margin:0}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
.wrap.narrow{max-width:760px}
.center{text-align:center}
.kicker{display:inline-block; font:700 .76rem/1.3 var(--label); letter-spacing:.18em; text-transform:uppercase; color:var(--kicker)}
.kicker a{text-decoration:none}
.lede{font:400 1.14rem/1.65 var(--serif); color:var(--muted)}
.small{font-size:.88rem; color:var(--muted-dark)}
.text-link{font:700 .85rem var(--label); color:var(--brick); text-decoration:none}
.text-link:hover{text-decoration:underline}

/* Dark grounds: lift the accents so they keep their contrast */
.hero, .band.ink, .band.navy, .page-hero, .art-head, .site-head, .manifesto-band, .signup.dark, .scorecard, .site-foot, .manifesto-page{--kicker:var(--brick-lt)}
.hero h1 em, .page-hero h1 em, .band.ink h2 em, .band.navy h2 em{color:var(--brick-lt)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border:2px solid transparent; border-radius:2px; font:700 .86rem/1 var(--label); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .2s, color .2s, border-color .2s}
.btn.red{background:var(--brick); color:#fff}
.btn.red:hover{background:var(--brick-2)}
.btn.ghost{border-color:currentColor; color:inherit; background:transparent}
.btn.ghost:hover{background:var(--paper); color:var(--midnight); border-color:var(--paper)}
.btn.disabled{opacity:.45; pointer-events:none}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}
:focus-visible{outline:2px solid var(--denim); outline-offset:3px}

/* Logo (original artwork from the LIONHEART drive) */
.logo-h{display:block; height:78px; width:auto}
.logo-stack{display:block; width:220px; height:auto}
img.lion{display:block; height:auto}
@media (max-width:600px){.logo-h{height:60px}}

/* Header */
.preview-bar{background:var(--denim); color:#fff; font:700 .7rem/1 var(--label); letter-spacing:.16em; text-transform:uppercase; text-align:center; padding:7px 12px}
.site-head{position:sticky; top:0; z-index:50; background:var(--midnight); color:#fff; border-bottom:1px solid var(--line-dark)}
.head-in{max-width:var(--wrap); margin:0 auto; padding:10px max(20px, env(safe-area-inset-left,0px)); display:flex; align-items:center; gap:24px}
.brand{text-decoration:none; flex:none}
.site-nav{display:flex; align-items:center; gap:22px; margin-left:auto}
.site-nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0}
.site-nav li{position:relative}
.site-nav li > a, .drop-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; background:none; border:0; color:#E3E8EE; font:700 .82rem/1 var(--label); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer}
.site-nav li > a:hover, .drop-btn:hover, .drop-btn[aria-expanded="true"], .site-nav li.is-active > a, .site-nav li.is-active > .drop-btn{color:#fff; box-shadow:inset 0 -2px 0 var(--brick-lt)}
.drop-btn i{width:7px; height:7px; border-right:1.5px solid var(--brick-lt); border-bottom:1.5px solid var(--brick-lt); transform:translateY(-2px) rotate(45deg); transition:transform .2s}
.drop-btn[aria-expanded="true"] i{transform:translateY(1px) rotate(-135deg)}
.join-btn{min-height:42px; padding:10px 18px; font-size:.8rem}
.drop{position:absolute; top:calc(100% + 13px); left:0; min-width:280px; background:var(--ink-2); border:1px solid var(--line-dark); border-top:2px solid var(--brick); padding:8px; box-shadow:0 20px 40px rgba(0,0,0,.35)}
.drop a{display:grid; gap:2px; padding:12px 14px; text-decoration:none; color:#fff}
.drop a b{font:700 .95rem var(--ui)}
.drop a span{font-size:.82rem; color:var(--muted-dark)}
.drop a:hover{background:var(--ink-3)}
.has-drop:has(.mega){position:static}
.mega{position:absolute; left:0; right:0; top:100%; background:var(--ink-2); border-top:2px solid var(--brick); border-bottom:1px solid var(--line-dark); box-shadow:0 30px 50px rgba(0,0,0,.4)}
.mega-in{max-width:var(--wrap); margin:0 auto; padding:32px max(20px, env(safe-area-inset-left,0px)); display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:32px}
.mega-col{display:grid; gap:14px; align-content:start}
.mtn-links{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.mtn-links a{display:grid; gap:4px; padding:12px; text-decoration:none; color:#fff; border-left:2px solid var(--ink-3)}
.mtn-links a:hover{background:var(--ink-3); border-color:var(--brick-lt)}
.mtn-links b{font:700 1.3rem/1 var(--display)}
.mtn-links span{font-size:.82rem; line-height:1.45; color:var(--muted-dark)}
.plain{display:grid; gap:2px}
.plain a{padding:7px 0; color:#E3E8EE; text-decoration:none; font-size:.95rem}
.plain a:hover{color:#fff; text-decoration:underline; text-decoration-color:var(--brick-lt)}
.mega-all{margin-top:6px; color:var(--brick-lt); font:700 .84rem var(--label); text-decoration:none}
.mega-card{display:grid; gap:10px; align-content:start; padding:22px; background:var(--navy); color:#fff; text-decoration:none; border-left:3px solid var(--tan)}
.mega-card b{font:700 1.7rem/1.05 var(--display)}
.mega-card span:not(.kicker){font-size:.9rem; color:#C9D3DE}
.mega-card em{font:700 .84rem var(--label); color:#fff; font-style:normal}
.menu-btn{display:none; margin-left:auto; width:44px; height:44px; background:none; border:1px solid var(--line-dark); color:#fff; cursor:pointer; padding:11px 10px; flex-direction:column; justify-content:space-between}
.menu-btn span{display:block; height:2px; background:currentColor}
@media (max-width:1060px){
  .menu-btn{display:flex}
  .site-nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--midnight); border-top:1px solid var(--line-dark); padding:12px max(20px, env(safe-area-inset-left,0px)) 24px; flex-direction:column; align-items:stretch; gap:16px; max-height:calc(100vh - 70px); overflow:auto}
  .site-nav.open{display:flex}
  .site-nav ul{flex-direction:column; gap:0}
  .site-nav li > a, .drop-btn{width:100%; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line-dark); font-size:.95rem}
  .drop, .mega{position:static; box-shadow:none; border:0; min-width:0; padding:0 0 8px; background:transparent}
  .mega-in{grid-template-columns:1fr; padding:8px 0; gap:20px}
  .mega-card{display:none}
  .site-nav li > a:hover, .drop-btn:hover, .drop-btn[aria-expanded="true"]{box-shadow:none}
}

/* Hero */
.hero{position:relative; background:var(--midnight); color:#fff; overflow:hidden; min-height:clamp(540px,78vh,760px); display:grid; align-items:center}
.hero-bg{position:absolute; inset:0; background:radial-gradient(ellipse at 78% 38%, #2B4560 0%, var(--navy) 38%, var(--midnight) 72%)}
.hero-mark{position:absolute; z-index:1; right:4%; top:50%; transform:translateY(calc(-50% + 50px)); width:min(40vw,500px); opacity:.08}
.hero-mark img{width:100%; height:auto; display:block}
@media (max-width:700px){.hero-mark{right:-12%; width:70vw; opacity:.06}}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--brick) 0 33%, var(--tan) 33% 66%, var(--denim) 66%)}
.hero-in{position:relative; z-index:2; display:grid; gap:24px; padding-block:96px 120px; max-width:var(--wrap)}
.hero h1{font-size:clamp(2.6rem,5vw,4.25rem); max-width:none; line-height:1.05}
.hero .lede{color:#D3DBE4; max-width:560px; font-size:1.2rem}
.hero-show{position:absolute; z-index:2; right:max(20px, calc((100vw - var(--wrap))/2 + 20px)); bottom:40px; display:grid; gap:4px; padding:18px 22px; background:var(--navy); color:#fff; text-decoration:none; border-left:3px solid var(--tan); min-width:240px}
.hero-show b{font:700 1.7rem/1 var(--display)}
.hero-show span:last-child{font-size:.84rem; color:#C9D3DE}
.hero-show:hover{background:var(--navy-2)}
@media (max-width:760px){.hero-show{position:relative; right:auto; bottom:auto; margin:0 20px 32px} .hero-in{padding-block:64px 32px}}

/* Bands */
.band{padding:clamp(64px,9vw,104px) 0}
.band.ink{background:var(--midnight); color:#fff}
.band.ink .lede, .band.ink p{color:#C5CED8}
.band.navy{background:var(--navy); color:#fff}
.band.navy .lede{color:#D2DBE5}
.sec-head{display:grid; gap:12px; max-width:720px; margin-bottom:40px}
.sec-head.row{max-width:none; display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap}
.sec-head p{color:var(--muted); font:400 1.06rem/1.6 var(--serif)}
.ink .sec-head p{color:#C5CED8}

/* Seasons */
.seasons{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.season{display:grid; gap:12px; align-content:start; padding:28px; background:var(--ink-2); border-top:3px solid var(--denim); text-decoration:none; color:#fff; transition:transform .2s, background .2s}
.season:nth-child(2){border-color:var(--brick)}
.season:nth-child(3){border-color:var(--tan)}
.season .kicker{color:var(--denim-lt)}
.season b{font:700 1.5rem/1.15 var(--display)}
.season p{font:400 .98rem/1.6 var(--serif); color:#BDC7D2!important}
.season em{font:700 .84rem var(--label); font-style:normal; color:var(--brick-lt)}
.season:hover{background:var(--ink-3); transform:translateY(-3px)}
@media (max-width:860px){.seasons{grid-template-columns:1fr}}

/* Cards */
.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{display:grid; grid-template-rows:auto 1fr; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--text); transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 36px -18px rgba(22,32,43,.35)}
.card-img{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--midnight)}
.card-img img{width:100%; height:100%; object-fit:cover}
.card-body{display:grid; gap:10px; align-content:start; padding:20px 22px 24px}
.card-title{font:700 1.4rem/1.15 var(--display); color:var(--midnight)}
.card-ex{font:400 .95rem/1.55 var(--serif); color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.byline{font:700 .8rem var(--label); color:var(--text)}
.card.feature{grid-template-columns:1.3fr 1fr; grid-template-rows:none; margin-bottom:40px}
.card.feature .card-img{aspect-ratio:auto; min-height:320px}
.card.feature .card-body{padding:40px; align-content:center}
.card.feature .card-title{font-size:clamp(1.9rem,3.4vw,2.6rem)}
@media (max-width:760px){.card.feature{grid-template-columns:1fr}.card.feature .card-img{min-height:200px}.card.feature .card-body{padding:24px}}
.tile{position:relative; display:grid; place-items:center; width:100%; height:100%; color:#fff; overflow:hidden}
.tile .lion{position:absolute; width:34%; right:-4%; bottom:-14%; opacity:.16}
.tile b{position:relative; font:700 1.7rem/1.05 var(--display); padding:0 20px; text-align:center}
.tile-heart{background:linear-gradient(135deg,#5A2A24,var(--midnight))}
.tile-mind{background:linear-gradient(135deg,#34506D,var(--midnight))}
.tile-body{background:linear-gradient(135deg,#5E4A33,var(--midnight))}
.tile-spirit{background:linear-gradient(135deg,#3B3556,var(--midnight))}
.tile-skills{background:linear-gradient(135deg,#3E4630,var(--midnight))}
.tile-stories{background:linear-gradient(135deg,#55392A,var(--midnight))}
.sec-heart{color:var(--heart)} .sec-mind{color:var(--mind)} .sec-body{color:var(--body)} .sec-spirit{color:var(--spirit)} .sec-skills{color:var(--skills)} .sec-stories{color:var(--stories)}
.art-head .sec-heart{color:var(--brick-lt)} .art-head .sec-mind{color:var(--denim-lt)} .art-head .sec-body{color:#C9A273} .art-head .sec-spirit{color:#A69BC9} .art-head .sec-skills{color:#A8B47E} .art-head .sec-stories{color:#C8936E}
.group-h{margin:48px 0 24px; padding-top:20px; border-top:1px solid var(--line)}
.group-h:first-child{margin-top:0}

/* Show */
.show-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,80px); align-items:center}
.show-in > div:last-child{display:grid; gap:20px}
@media (max-width:820px){.show-in{grid-template-columns:1fr}}
.cover{position:relative; aspect-ratio:1; max-width:420px; width:100%; background:var(--midnight); color:#fff; display:grid; align-content:end; padding:9%; overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.cover::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg, var(--brick) 0 33%, var(--tan) 33% 66%, var(--denim) 66%)}
.cover .lion{position:absolute; top:11%; right:9%; width:20%}
.cover-t{font:700 clamp(3rem,7vw,5.2rem)/.92 var(--display); letter-spacing:-.01em}
.cover-s{margin-top:14px; font:700 .76rem var(--label); letter-spacing:.18em; text-transform:uppercase; color:var(--brick-lt)}
.cover.small{max-width:200px; padding:16px}
.cover.small .cover-t{font-size:2.2rem}
.show-meta{font-size:.95rem; color:#C9D3DE}
.show-meta a{color:#fff}
.show-hero h1{font-size:clamp(3rem,7vw,5rem)}
.show-card{display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center; padding:28px; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--text); margin-bottom:28px}
.show-card > div:last-child{display:grid; gap:10px}
.show-card b{font:700 2.2rem/1.05 var(--display); color:var(--midnight)}
.show-card p{color:var(--muted); font-family:var(--serif)}
.show-card em{font:700 .85rem var(--label); font-style:normal; color:var(--brick)}
@media (max-width:640px){.show-card{grid-template-columns:1fr}}

/* Mountains */
.mountains{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; background:var(--line-dark)}
.mtn{display:grid; gap:12px; align-content:start; padding:32px 26px 36px; background:var(--midnight); text-decoration:none; color:#fff; transition:background .2s; border-top:3px solid var(--c)}
.mtn:nth-child(1){--c:var(--brick-lt)} .mtn:nth-child(2){--c:#C9A273} .mtn:nth-child(3){--c:var(--denim-lt)} .mtn:nth-child(4){--c:#A69BC9}
a.mtn:hover{background:var(--ink-2)}
.mtn-n{font:700 .78rem var(--label); letter-spacing:.2em; color:var(--c)}
.mtn b{font:700 2.4rem/1 var(--display)}
.mtn p{font:400 .96rem/1.6 var(--serif); color:#BDC7D2!important}
.mtn em{font:700 .84rem var(--label); font-style:normal; color:#fff; margin-top:auto}
@media (max-width:900px){.mountains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mountains{grid-template-columns:1fr}}

/* Challenge teaser */
.challenge-band{background:var(--chambray)}
.ch-in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,6vw,80px); align-items:center}
.ch-in > div{display:grid; gap:20px; justify-items:start}
.ch-in p{color:var(--muted); font:400 1.06rem/1.65 var(--serif)}
.ch-cats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 28px}
.ch-cats li{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #D3CBBC; font:700 .95rem var(--ui)}
.ch-cats b{font:700 1.2rem/1 var(--display); color:var(--brick)}
@media (max-width:820px){.ch-in{grid-template-columns:1fr}}
@media (max-width:460px){.ch-cats{grid-template-columns:1fr}}

/* Manifesto band */
.manifesto-band{background:var(--navy); color:#fff}
.mf-in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,6vw,72px); align-items:center}
.mf-in > div{display:grid; gap:20px; justify-items:start}
.mf-in img{border:1px solid rgba(255,255,255,.12)}
.mf-in blockquote{margin:0; font:700 clamp(1.8rem,3.4vw,2.5rem)/1.12 var(--display)}
.mf-in p{color:#D2DBE5; font:italic 400 1.2rem/1.55 var(--serif)}
@media (max-width:820px){.mf-in{grid-template-columns:1fr}}

/* Signup */
.signup{padding:clamp(56px,8vw,88px) 0; background:var(--chambray)}
.signup.dark{background:var(--navy); color:#fff}
.signup-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:center}
.signup-in > div{display:grid; gap:12px}
.signup p{color:var(--muted); font-family:var(--serif)}
.signup.dark p{color:#D2DBE5}
.signup-form{display:grid; grid-template-columns:1fr auto; gap:10px}
.signup-form input{min-height:52px; padding:12px 16px; border:2px solid #D3CBBC; border-radius:2px; background:#fff; font:400 1rem var(--ui); color:var(--text); min-width:0}
.signup.dark .signup-form input{border-color:transparent}
.form-note{grid-column:1/-1; font-size:.88rem; border-left:2px solid var(--brick-lt); padding-left:10px}
@media (max-width:760px){.signup-in{grid-template-columns:1fr}}
@media (max-width:440px){.signup-form{grid-template-columns:1fr}}

/* Page heroes */
.page-hero{background:var(--midnight); color:#fff; padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,64px); border-bottom:4px solid var(--navy)}
.page-hero .wrap{display:grid; gap:18px}
.page-hero .lede{color:#C5CED8; max-width:720px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{padding:9px 16px; border:1px solid var(--line-dark); border-radius:2px; color:#E3E8EE; text-decoration:none; font:700 .78rem var(--label); letter-spacing:.14em; text-transform:uppercase}
.chip:hover{border-color:#fff; color:#fff}
.chip.on{background:var(--brick); border-color:var(--brick); color:#fff}
.epigraph{margin:12px 0 0; padding-left:20px; border-left:3px solid var(--denim-lt); font:italic 400 1.3rem/1.5 var(--serif); color:#E3E8EE}
.epigraph cite{display:block; margin-top:8px; font:700 .76rem var(--label); letter-spacing:.16em; text-transform:uppercase; font-style:normal; color:var(--muted-dark)}
.empty{padding:40px; background:var(--chambray); border-left:3px solid var(--brick); display:grid; gap:8px; margin-top:28px}
.empty b{font:700 1.5rem/1.15 var(--display); color:var(--midnight)}
.empty p{color:var(--muted); font-family:var(--serif)}
.empty a{color:var(--brick)}

/* Article */
.art-head{background:var(--midnight); color:#fff; padding:clamp(48px,7vw,88px) 0 clamp(80px,9vw,120px)}
.art-head .wrap{display:grid; gap:18px}
.art-head h1{font-size:clamp(2.6rem,5.6vw,4rem)}
.art-meta{display:flex; flex-wrap:wrap; gap:8px 20px; font:700 .9rem var(--ui); color:#BDC7D2}
.art-meta a{color:#fff; text-decoration:none; border-bottom:1px solid var(--brick-lt)}
.art-img{margin-top:-64px; width:100%; aspect-ratio:972/360; object-fit:cover; box-shadow:0 24px 48px -24px rgba(0,0,0,.5); margin-bottom:8px}
.article > .wrap{padding-bottom:64px}
.article .prose{padding-top:40px}
.prose{font:400 1.14rem/1.8 var(--serif); color:#26303B}
.prose p{margin:0 0 1.15em}
.prose h2{margin:1.5em 0 .5em; font-size:clamp(1.8rem,3.6vw,2.3rem); color:var(--midnight)}
.prose h3{margin:1.4em 0 .5em; font-size:1.5rem}
.prose ul,.prose ol{margin:0 0 1.2em; padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose blockquote{margin:1.4em 0; padding:4px 0 4px 22px; border-left:3px solid var(--tan); font-style:italic}
.prose a{color:var(--brick)}
.prose hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.prose strong{font-weight:600; color:var(--midnight)}
.art-ch{display:grid; gap:8px; padding:22px 24px; background:var(--chambray); border-left:3px solid var(--denim); margin:8px 0 32px; font-family:var(--serif)}
.art-ch a{color:var(--brick); font:700 .86rem var(--label); text-decoration:none}
.author-box{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.author-box div{display:grid; gap:4px}
.author-box b{font:700 1.4rem/1.1 var(--display); color:var(--midnight)}
.author-box span{font:700 .76rem var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.author-box p{color:var(--muted); font:400 .98rem/1.6 var(--serif)}
.author-box a{color:var(--brick); font:700 .86rem var(--label); text-decoration:none}
.avatar{display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--denim); color:#fff; font:700 1.2rem/1 var(--display)}
.avatar.big{width:88px; height:88px; font-size:1.9rem}
.avatar.huge{width:132px; height:132px; font-size:2.9rem; flex:none}

/* Manifesto page */
.manifesto-page{background:var(--navy); color:#fff}
.manifesto-page .prose{color:#E3E8EE; font-size:1.26rem}
.manifesto-page .prose p:first-child, .manifesto-page .prose p:last-child{font:700 2.1rem/1.1 var(--display); color:#fff}
.manifesto-page .prose p:last-child{color:var(--brick-lt)}

/* Challenge page */
.ch-top{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(32px,6vw,72px); align-items:start}
.ch-top > div:first-child{display:grid; gap:16px}
.credit{font-size:.86rem; color:var(--muted-dark)}
.scorecard{position:sticky; top:90px; display:grid; gap:8px; padding:28px; background:var(--navy); border-top:3px solid var(--brick-lt)}
.score{font:700 4.6rem/.95 var(--display); color:#fff}
.of{font:700 .84rem var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dark)}
.bar{height:8px; background:var(--ink-3); margin:8px 0}
.bar i{display:block; height:100%; width:0; background:var(--brick-lt); transition:width .3s}
.rank{font:700 1.7rem/1 var(--display); color:var(--brick-lt)}
.scorecard p{font-size:.84rem; color:var(--muted-dark)}
.reset{background:none; border:0; color:#fff; text-decoration:underline; cursor:pointer; font:inherit; padding:0}
@media (max-width:860px){.ch-top{grid-template-columns:1fr}.scorecard{position:static}}
.ch-jump{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line-dark)}
.ch-jump a{color:#C5CED8; font:700 .76rem var(--label); letter-spacing:.12em; text-transform:uppercase; text-decoration:none}
.ch-jump a:hover{color:#fff}
.ch-grid{columns:2 420px; column-gap:40px}
.ch-cat{break-inside:avoid; margin-bottom:40px; scroll-margin-top:100px}
.ch-cat header{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:10px; border-bottom:2px solid var(--midnight); margin-bottom:6px}
.ch-cat h2{font-size:1.8rem; color:var(--midnight)}
.cat-score{font:700 .86rem var(--label); letter-spacing:.1em; color:var(--muted)}
.cat-score.done{color:var(--skills)}
.ch-cat ul{list-style:none; margin:0; padding:0}
.ch-cat li{display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line)}
.ch-cat label{display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; flex:1}
.ch-cat input{position:absolute; opacity:0; width:1px; height:1px}
.box{flex:none; width:22px; height:22px; border:2px solid #B7AE9E; border-radius:2px; display:grid; place-items:center; transition:background .15s, border-color .15s}
.ch-cat input:checked + .box{background:var(--brick); border-color:var(--brick)}
.ch-cat input:checked + .box::after{content:""; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg)}
.ch-cat input:focus-visible + .box{outline:2px solid var(--denim); outline-offset:2px}
.num{font:700 .78rem var(--label); color:var(--muted); width:22px; font-variant-numeric:tabular-nums}
.sk{font-size:1rem}
.ch-cat input:checked ~ .sk{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--brick)}
.learn{flex:none; font:700 .8rem var(--label); color:var(--brick); text-decoration:none}

/* Voices */
.voices{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px}
.voice{display:grid; justify-items:center; gap:8px; padding:28px 18px; background:#fff; border:1px solid var(--line); text-decoration:none; text-align:center}
.voice b{font:700 1.35rem/1.1 var(--display); margin-top:6px; color:var(--midnight)}
.voice span{font-size:.86rem; color:var(--muted)}
.voice em{font:700 .76rem var(--label); letter-spacing:.14em; text-transform:uppercase; font-style:normal; color:var(--brick)}
.voice:hover{border-color:var(--midnight)}
.voice-hero{display:flex!important; align-items:center; gap:32px; flex-wrap:wrap}
.voice-hero > div{display:grid; gap:14px; flex:1; min-width:260px}

/* Join */
.join-hero .lion{width:128px; margin:0 auto 8px}
@media (max-width:600px){.join-hero .lion{width:100px}}
.join-hero .wrap{justify-items:center}

/* Footer */
.site-foot{background:#101820; color:#C5CED8; padding:72px 0 0}
.foot-in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.foot-in > div{display:grid; gap:10px; align-content:start}
.foot-in a{color:#C5CED8; text-decoration:none; font-size:.95rem}
.foot-in a:hover{color:#fff}
.foot-brand p{font:400 .95rem/1.7 var(--serif); margin-top:12px; max-width:340px}
.foot-base{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:56px; padding-block:24px; border-top:1px solid var(--line-dark); font-size:.82rem; color:#8794A3}
@media (max-width:860px){.foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-in{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}

/* Layout: content lines up under the logo; reading columns stay narrow but sit on the left edge */
.hero-in{width:100%}
.wrap.narrow{max-width:var(--wrap)}
.wrap.narrow > *{max-width:760px}
.wrap.narrow.center > *{margin-left:auto; margin-right:auto}

/* Quote wall (from the @truebluetribe Instagram) */
.q{margin:0; display:grid; gap:14px}
.q-text{position:relative; font:600 clamp(1.5rem,3.2vw,2.3rem)/1.25 var(--display); color:var(--midnight); max-width:30ch; text-wrap:balance}
.q-text::before{content:"\201C"; display:block; height:.55em; color:var(--brick); font-size:1.8em; line-height:1}
.q-by{font:700 .8rem/1.3 var(--label); letter-spacing:.16em; text-transform:uppercase; font-style:normal; color:var(--denim)}
.q-by::before{content:"— "}
.quote-band{background:var(--chambray); padding:clamp(56px,8vw,88px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.quote-band .wrap{display:grid; gap:22px}
.quote-inline{margin:8px 0 36px; padding:28px 0; border-top:3px solid var(--midnight); border-bottom:1px solid var(--line)}
.quote-inline .q-text{font-size:clamp(1.35rem,2.6vw,1.75rem)}
.quote-foot{margin-top:20px; padding-top:18px; border-top:1px solid var(--line-dark)}
.quote-foot .q-text{font:italic 400 1rem/1.55 var(--serif); color:#E3E8EE}
.quote-foot .q-text::before{display:inline; height:auto; font-size:1em; color:var(--brick-lt); margin-right:2px}
.quote-foot .q-by{color:var(--denim-lt); font-size:.72rem}

/* Quote carousels: five quotes per band */
.qc-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.qc-ctrl{display:flex; align-items:center; gap:12px}
.qc-prev,.qc-next{width:40px; height:40px; border-radius:50%; border:1.5px solid var(--midnight); background:transparent; color:var(--midnight); font:700 1rem/1 var(--ui); cursor:pointer; transition:background .2s, color .2s}
.qc-prev:hover,.qc-next:hover{background:var(--midnight); color:#fff}
.qc-count{font:700 .8rem var(--label); letter-spacing:.14em; color:var(--muted); font-variant-numeric:tabular-nums; min-width:3.2em; text-align:center}
.qc-track{display:grid}
.qc-slide{grid-area:1/1; opacity:0; visibility:hidden; transform:translateX(16px); transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s}
.qc-slide.on{opacity:1; visibility:visible; transform:none; transition:opacity .5s ease, transform .5s ease, visibility 0s}
.qc-dots{display:flex; gap:8px}
.qc-dot{width:28px; height:4px; padding:0; border:0; background:var(--line); cursor:pointer}
.qc-dot.on{background:var(--brick)}

/* Homepage sections carried over from the 2023-24 site */
.crisis-band{background:var(--paper)}
.crisis-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,80px); align-items:start}
.crisis-head{display:grid; gap:14px; position:sticky; top:120px}
.crisis-banner{font:700 clamp(2.4rem,5vw,3.8rem)/1 var(--display); color:var(--midnight); margin:0}
.crisis-body{display:grid; gap:18px; justify-items:start}
.crisis-body h2{color:var(--midnight)}
.crisis-sub{font:italic 400 1.2rem/1.5 var(--serif); color:var(--brick)!important}
.crisis-body p{font:400 1.08rem/1.7 var(--serif); color:var(--text); margin:0}
.crisis-body .btn-row{margin-top:10px; align-items:center}
@media (max-width:820px){.crisis-in{grid-template-columns:1fr}.crisis-head{position:static}}
.mt-sub{font:700 .82rem var(--label)!important; letter-spacing:.14em; text-transform:uppercase; color:var(--denim-lt)!important}
.words-band{background:var(--chambray)}
.words-in{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px,6vw,72px); align-items:center}
.words-in figure{margin:0; display:grid; gap:18px}
.words-in blockquote{margin:0; font:400 1.25rem/1.6 var(--serif); color:var(--text)}
.words-in blockquote::before{content:"\201C"; display:block; font:700 3.4rem/.6 var(--display); color:var(--brick); margin-bottom:10px}
.words-in figcaption{display:grid; gap:2px}
.words-in figcaption b{font:700 .9rem var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--midnight)}
.words-in figcaption span{font:400 .9rem var(--serif); color:var(--muted)}
.founder{padding:36px 32px; background:var(--midnight)}
.founder blockquote{font:700 1.6rem/1.3 var(--display)!important; color:#fff!important}
.founder figcaption b{color:var(--brick-lt)!important}
.founder figcaption span{color:#A7B1BD!important}
@media (max-width:820px){.words-in{grid-template-columns:1fr}}
.merch-band{background:var(--navy); color:#fff; --kicker:var(--brick-lt); padding:clamp(48px,6vw,72px) 0}
.merch-in{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.merch-in > div{display:grid; gap:10px}
.mf-pitch{font:400 1.2rem/1.65 var(--serif); color:#D2DBE5; margin:0}

/* Photo backgrounds (licensed Adobe Stock, assets/img/bg) and the bold poster type */
.photo-bg{position:relative; isolation:isolate; background-color:var(--midnight); color:#fff; --kicker:var(--brick-lt)}
.photo-bg::before{content:""; position:absolute; inset:0; z-index:-2; background:var(--bg) center/cover no-repeat} /* --bg paths resolve from this stylesheet: url(img/bg/...) */
.photo-bg::after{content:""; position:absolute; inset:0; z-index:-1; background:var(--shade, linear-gradient(90deg, rgba(14,20,28,.92) 0%, rgba(14,20,28,.78) 50%, rgba(14,20,28,.6) 100%))}
.photo-bg p, .photo-bg .lede, .photo-bg .sec-head p{color:#D2DBE5}
.hero.photo-bg .hero-bg{background:linear-gradient(90deg, rgba(12,17,24,.94) 0%, rgba(12,17,24,.8) 45%, rgba(12,17,24,.35) 100%)}
.hero.photo-bg::after{inset:auto 0 0 0; height:4px; z-index:3; background:linear-gradient(90deg, var(--brick) 0 33%, var(--tan) 33% 66%, var(--denim) 66%)}
.hero.photo-bg .hero-mark{opacity:.06}
.band.ink.photo-bg{--shade:linear-gradient(180deg, rgba(14,20,28,.9) 0%, rgba(22,32,43,.82) 55%, rgba(14,20,28,.95) 100%)}
.band.ink.photo-bg .mtn{background:rgba(22,32,43,.86)}
.band.ink.photo-bg a.mtn:hover{background:rgba(30,48,69,.95)}
.band.ink.photo-bg .mountains{background:transparent; gap:2px}
.show-band.photo-bg{--shade:rgba(10,8,6,.62)}
.challenge-band.photo-bg{--shade:linear-gradient(90deg, rgba(14,20,28,.95) 0%, rgba(14,20,28,.85) 55%, rgba(14,20,28,.7) 100%)}
.challenge-band.photo-bg h2{color:#fff}
.challenge-band.photo-bg .ch-in p{color:#D2DBE5}
.challenge-band.photo-bg .ch-cats li{border-bottom-color:rgba(255,255,255,.16); color:#fff}
.challenge-band.photo-bg .ch-cats b{color:var(--brick-lt)}
.merch-band.photo-bg{--shade:linear-gradient(90deg, rgba(14,20,28,.9) 0%, rgba(14,20,28,.7) 60%, rgba(14,20,28,.45) 100%); padding:clamp(80px,10vw,128px) 0}
.signup.dark.photo-bg{--shade:linear-gradient(90deg, rgba(14,20,28,.93) 0%, rgba(14,20,28,.8) 60%, rgba(14,20,28,.65) 100%)}
.page-hero.photo-bg{--shade:linear-gradient(90deg, rgba(14,20,28,.93) 0%, rgba(14,20,28,.78) 60%, rgba(14,20,28,.55) 100%); padding:clamp(88px,12vw,150px) 0 clamp(64px,8vw,96px)}

/* Poster type: Oswald, uppercase, for the big statement headlines */
.hero h1, .page-hero h1, .band h2, .signup h2, .crisis-banner{font-family:var(--poster); font-weight:700; text-transform:uppercase; letter-spacing:.005em; line-height:1.02}
.band h2{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.hero h1{font-size:clamp(2.4rem,5vw,4.1rem); line-height:1.04}
.page-hero h1{font-size:clamp(2.8rem,6vw,4.6rem)}
.crisis-banner{font-size:clamp(2.2rem,3.8vw,3.4rem); text-wrap:balance; max-width:9.5em}
.pod-kicker{letter-spacing:.32em}
.pod-title{font-size:clamp(3.4rem,8vw,6.2rem)!important; color:var(--brick-lt); line-height:.95!important}
.band .prose h2{font-family:var(--display); text-transform:none; letter-spacing:-.005em; line-height:1.1; font-size:clamp(1.8rem,3.6vw,2.3rem)}

/* Background video (homepage Join the Tribe band). The video is pre-darkened; the overlay keeps text readable. */
.bg-video{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; pointer-events:none}
.signup.dark.video-bg{--shade:linear-gradient(90deg, rgba(14,20,28,.88) 0%, rgba(14,20,28,.55) 55%, rgba(14,20,28,.35) 100%); min-height:clamp(480px,72vh,760px); display:grid; align-items:center; padding:clamp(96px,12vw,160px) 0}
.signup.dark.video-bg .bg-video{object-position:center 68%}
@media (prefers-reduced-motion: reduce){.bg-video{display:none}}
.page-hero.photo-bg[style*="forged-blade"]{--shade:linear-gradient(90deg, rgba(14,20,28,.9) 0%, rgba(14,20,28,.62) 45%, rgba(14,20,28,.18) 100%)}
.page-hero.photo-bg[style*="forged-blade"]::before{background-position:center 62%}

/* MANifesto download band on the homepage runs light so the dark signup band below it stands apart */
.manifesto-band.light{background:var(--chambray); color:var(--text); --kicker:var(--brick); border-top:1px solid var(--line)}
.manifesto-band.light .mf-pitch{color:var(--text)}
.manifesto-band.light .mf-in img{border-color:var(--line)}
.show-hero.photo-bg{--shade:linear-gradient(90deg, rgba(14,20,28,.45) 0%, rgba(14,20,28,.6) 40%, rgba(14,20,28,.88) 70%, rgba(14,20,28,.92) 100%)}
.show-band.photo-bg{--shade:linear-gradient(90deg, rgba(14,20,28,.45) 0%, rgba(14,20,28,.6) 40%, rgba(14,20,28,.88) 70%, rgba(14,20,28,.92) 100%)}

/* Podcast sections: the father-and-son photo fills the open left side (cover art returns when the real artwork is ready) */
.show-band.photo-bg, .show-hero.photo-bg{--shade:linear-gradient(90deg, rgba(14,20,28,.15) 0%, rgba(14,20,28,.3) 38%, rgba(14,20,28,.85) 56%, rgba(14,20,28,.93) 100%); min-height:clamp(460px,62vh,640px)}
.show-band.photo-bg::before, .show-hero.photo-bg::before{background-size:150% auto; background-position:81% 32%}
.show-band .show-in, .show-hero .show-in{min-height:inherit; align-items:center}
.photo-space{min-height:1px}
@media (max-width:820px){
  .show-band.photo-bg::before, .show-hero.photo-bg::before{background-size:cover; background-position:45% 30%}
  .show-band.photo-bg, .show-hero.photo-bg{--shade:linear-gradient(180deg, rgba(14,20,28,.2) 0%, rgba(14,20,28,.55) 40%, rgba(14,20,28,.92) 70%)}
  .photo-space{min-height:280px}
}

/* Parallax: the photo layer is taller than its section and drifts slower than the page (site.js sets --py) */
.parallax{overflow:hidden}
.parallax::before{inset:-100px 0; transform:translate3d(0, var(--py, 0px), 0); will-change:transform}
@media (prefers-reduced-motion: reduce){.parallax::before{transform:none}}
.page-hero.photo-bg[style*="men-ridge"]{--shade:linear-gradient(180deg, rgba(14,21,29,.55) 0%, rgba(14,21,29,.2) 50%, rgba(14,21,29,.3) 100%); min-height:clamp(600px,88vh,900px); padding-top:clamp(72px,8vw,110px); padding-bottom:clamp(240px,30vw,420px)}
.page-hero.photo-bg[style*="men-ridge"]::before{background-position:center 25%}
@media (max-width:700px){.page-hero.photo-bg[style*="men-ridge"]{padding-bottom:220px}}

/* War-cry band: a brick accent strip between the light manifesto and the dark 4 Mountains */
.war-band{background:var(--brick); color:#fff; padding:clamp(48px,6vw,72px) 0; --kicker:#F3D9C9}
.war-in{display:grid; gap:10px; justify-items:center; text-align:center}
.war-in .kicker{letter-spacing:.32em}
.war-in h2{font-family:var(--poster); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.02; font-size:clamp(2rem,4.6vw,3.6rem); color:#fff}
.war-in .btn{margin-top:14px}
.war-band .btn.ghost{border-color:#fff; color:#fff}
.war-band .btn.ghost:hover{background:#fff; color:var(--brick)}

/* Agora newsletter form (iframe). Styling inside the form comes from site/agora/email-signup-form.css, pasted into Agora. */
.agora-form{width:100%; min-width:0}
.agora-form iframe{display:block; width:100%; height:200px; border:0; border-radius:0; background:transparent; color-scheme:normal}

/* Left manifesto line: slab serif in brick, sentence case, so it reads apart from the uppercase headline beside it */
.crisis-banner{font-family:var(--display)!important; font-weight:700!important; text-transform:none!important; letter-spacing:-.005em!important; line-height:1.08!important; color:var(--brick)!important; font-size:clamp(2rem,3.4vw,3rem)!important; max-width:9em}
.perks{list-style:none; padding:0!important; display:grid; gap:14px}
.perks li{padding-left:28px; position:relative}
.perks li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; background:var(--brick); transform:rotate(45deg)}
.perks b{color:var(--midnight)}

/* Listen-on links (YouTube, Spotify, Apple Podcasts). Set the URLs in content/shows/<show>.md */
.listen{display:grid; gap:12px; margin-top:8px}
.plats{display:flex; flex-wrap:wrap; gap:10px 22px}
.plat{display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font:700 .86rem var(--label); letter-spacing:.04em}
.plat svg{width:30px; height:30px; flex:none; --ink-bg:#16202B}
a.plat:hover{color:var(--brick-lt)}
.plat span{display:grid; line-height:1.15}
.plat em{font:400 .72rem var(--label); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:#A7B1BD}
.plat.soon{opacity:.82}

/* The Holler: signup-band link and the newsletter page */
.holler-more{display:inline-block; margin-top:10px}
.signup.dark .holler-more{color:var(--brick-lt)}
.holler-hero{--shade:linear-gradient(90deg, rgba(14,20,28,.9) 0%, rgba(14,20,28,.6) 60%, rgba(14,20,28,.4) 100%)}
.holler-hero .btn-row{margin-top:8px}
.holler-copy p:nth-child(3){font:700 clamp(1.5rem,3vw,2rem)/1.2 var(--display); color:var(--brick)}
.issue{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,200px),1fr)); gap:2px; background:var(--line-dark)}
.issue li{display:flex; background:var(--midnight)}
.issue li:nth-child(1){--c:var(--brick-lt)} .issue li:nth-child(2){--c:#C9A273} .issue li:nth-child(3){--c:var(--denim-lt)} .issue li:nth-child(4){--c:#A69BC9} .issue li:nth-child(5){--c:var(--brick-lt)}
.issue a, .issue .item{position:relative; flex:1; display:grid; gap:8px; align-content:start; padding:26px 22px 30px; text-decoration:none; color:inherit; transition:background .3s ease, transform .3s ease}
.issue a::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.issue a:hover, .issue a:focus-visible{background:#1F2B38; transform:translateY(-3px)}
.issue a:hover::before, .issue a:focus-visible::before{transform:scaleX(1)}
.issue a:hover b{color:var(--c)}
.issue b{transition:color .3s ease}
@media (prefers-reduced-motion: reduce){.issue a, .issue a::before, .issue b{transition:none} .issue a:hover, .issue a:focus-visible{transform:none}}
.issue b{font:700 1.6rem/1 var(--poster); text-transform:uppercase; letter-spacing:.02em; color:#fff}
.issue li:last-child b{color:var(--brick-lt)}
.issue span{font:400 .98rem/1.55 var(--serif); color:#BDC7D2}