.portal-main{width:min(calc(100% - 40px),var(--site));margin:0 auto;padding:48px 0 20px;min-width:0}
.portal-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:64px;align-items:end;margin-bottom:34px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.portal-intro>*{min-width:0}
.section-label,.home-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--teal-dark);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.section-label::before{content:"";width:26px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.portal-intro h1{max-width:760px;margin:10px 0 0;font:700 clamp(46px,5.5vw,72px)/.95 var(--serif);letter-spacing:-.045em;color:var(--navy)}
.portal-intro p{margin:0;color:#42565E;font-size:16px;line-height:1.65}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);grid-template-rows:1fr 1fr;gap:16px;margin-bottom:58px;min-width:0}
.hero-card{--overlay-strength:.78;position:relative;min-width:0;min-height:250px;overflow:hidden;border-radius:20px;background:var(--navy);color:#fff;text-decoration:none;box-shadow:var(--shadow-md);isolation:isolate;transition:transform .22s ease,box-shadow .22s ease}
.hero-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 0 rgba(11,38,51,.04),0 28px 58px rgba(11,38,51,.18);color:#fff}
.hero-main{grid-row:1 / span 2;min-height:540px}
.hero-side{min-height:262px}
.portal-picture,.portal-picture img{width:100%;height:100%}
.portal-picture{position:absolute;inset:0;overflow:hidden}
.portal-picture img{object-fit:cover;object-position:var(--focal-x,50%) var(--focal-y,50%);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.hero-card:hover img{transform:scale(1.025)}
.hero-card--build-muscle-after-60{--focal-x:58%;--focal-y:45%;--overlay-strength:.82}
.hero-card--age-related-muscle-loss{--focal-x:50%;--focal-y:44%;--overlay-strength:.72}
.hero-card--protein-after-60{--focal-x:50%;--focal-y:48%;--overlay-strength:.80}
.hero-shade{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(5,19,26,.04) 20%,rgba(5,19,26,.26) 52%,rgba(5,19,26,var(--overlay-strength)) 100%)}
.hero-side .hero-shade{background:linear-gradient(90deg,rgba(5,19,26,.82) 0%,rgba(5,19,26,.52) 52%,rgba(5,19,26,.08) 100%),linear-gradient(0deg,rgba(5,19,26,.5),transparent 62%)}
.hero-copy{position:absolute;z-index:2;right:0;bottom:0;left:0;padding:28px 30px;min-width:0}
.hero-main .hero-copy{padding:38px 40px}
.tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;color:#76D2C8;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(197,154,74,.16)}
.hero-copy h2,.hero-copy h3{margin:0;color:#fff;font-family:var(--serif);font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.hero-copy h2{max-width:700px;font-size:clamp(42px,4.7vw,65px);line-height:.98}
.hero-copy h3{max-width:430px;font-size:clamp(28px,2.55vw,39px);line-height:1.02}
.hero-copy p{max-width:620px;margin:12px 0 0;color:rgba(255,255,255,.92);font-size:14px;line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero-side .hero-copy p{max-width:360px;font-size:12.5px}
.portal-meta{display:flex;align-items:center;gap:10px;margin-top:15px;color:rgba(255,255,255,.78);font-size:10.5px;font-weight:600}
.portal-meta span+span::before{content:"•";margin-right:10px;color:var(--gold)}
.article-section{margin:0 0 40px}
.article-section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.article-section-head h2{margin:7px 0 0;font:700 clamp(38px,4vw,52px)/1 var(--serif);letter-spacing:-.035em;color:var(--navy)}
.article-section-head>span{color:var(--muted);font-size:12px}
.article-list{display:grid;gap:18px}
.portal-item{display:grid;grid-template-columns:minmax(280px,330px) minmax(0,1fr);gap:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.portal-item:hover{transform:translateY(-3px);border-color:#B9D2CC;box-shadow:var(--shadow-md)}
.portal-thumb{position:relative;display:block;min-height:205px;overflow:hidden;background:var(--paper-2);text-decoration:none}
.portal-thumb .portal-picture{position:absolute}
.portal-thumb img{object-fit:cover;object-position:var(--focal-x,50%) var(--focal-y,50%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.portal-item:hover .portal-thumb img{transform:scale(1.025)}
.portal-item--what-do-bcaas-do{--focal-x:57%;--focal-y:48%}
.portal-item--eaa-vs-bcaa{--focal-x:50%;--focal-y:50%}
.portal-item--amino-acid-benefits{--focal-x:50%;--focal-y:50%}
.portal-info{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:25px 30px}
.portal-info .tag{margin:0 0 7px;color:var(--teal-dark)}
.portal-info h3{margin:0;font:700 clamp(25px,2.4vw,34px)/1.05 var(--serif);letter-spacing:-.025em;color:var(--navy)}
.portal-info h3 a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--teal),var(--teal));background-position:0 100%;background-repeat:no-repeat;background-size:0 2px;transition:background-size .22s ease}
.portal-item:hover h3 a{background-size:100% 2px}
.portal-info p{margin:10px 0 0;color:#42575E;font-size:13.5px;line-height:1.55}
.portal-info .portal-meta{margin-top:12px;color:var(--muted)}
.portal-info .portal-meta span+span::before{color:var(--gold)}
.read-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:14px;color:var(--teal-dark);font-size:12px;font-weight:800;text-decoration:none}
.read-link span{transition:transform .18s ease}
.portal-item:hover .read-link span{transform:translateX(3px)}
@media(max-width:920px){
  .portal-intro{grid-template-columns:1fr;gap:18px}
  .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr)}
  .hero-main{min-height:500px}
  .hero-copy h2{font-size:51px}
  .hero-copy h3{font-size:30px}
  .portal-item{grid-template-columns:minmax(250px,300px) minmax(0,1fr)}
}
@media(max-width:760px){
  .portal-main{width:calc(100% - 28px);padding-top:30px}
  .portal-intro{margin-bottom:24px;padding-bottom:24px}
  .portal-intro h1{font-size:47px}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:none;gap:14px;margin-bottom:44px}
  .hero-main,.hero-side{grid-row:auto;min-height:360px}
  .hero-side{min-height:310px}
  .hero-side .hero-shade{background:linear-gradient(180deg,rgba(5,19,26,.05) 15%,rgba(5,19,26,.25) 55%,rgba(5,19,26,.82) 100%)}
  .hero-main .hero-copy,.hero-copy{padding:25px 24px}
  .hero-copy h2{font-size:45px}
  .hero-copy h3{font-size:33px}
  .hero-copy p,.hero-side .hero-copy p{font-size:13px}
  .article-section-head{align-items:flex-start;display:grid;gap:8px}
  .portal-item{grid-template-columns:1fr}
  .portal-thumb{min-height:auto;aspect-ratio:16/9}
  .portal-info{padding:23px 22px}
}
@media(max-width:390px){
  .portal-main{width:calc(100% - 24px)}
  .portal-intro h1{font-size:42px}
  .hero-main,.hero-side{min-height:330px}
  .hero-copy h2{font-size:40px}
  .hero-copy h3{font-size:30px}
  .hero-main .hero-copy,.hero-copy{padding:22px 20px}
}
@media(hover:none){.hero-card:hover,.portal-item:hover{transform:none}.hero-card:hover img,.portal-item:hover .portal-thumb img{transform:none}}