/* round 4 (misc agent): members login split layout + episode card grid. Every rule is scoped to .fn-login--split or .fn-ep */

/* ---- 1. login: brand photo panel (left) + the existing form card (right); stacks on phone ---- */
body .fn-login.fn-login--split{display:block;min-height:0;padding:0;background:radial-gradient(700px 480px at 78% 30%,#fbe9e7 0%,rgba(251,233,231,0) 70%),#f6f1ee}
.fn-login--split .fn-login__split{display:grid;width:100%;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:calc(100vh - 38px)}
.fn-login--split .fn-login__brand{position:relative;overflow:hidden;background:#5b0a0e;min-height:560px}
.fn-login--split .fn-login__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%;display:block}
.fn-login--split .fn-login__brand::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(91,10,14,.10) 0%,rgba(91,10,14,.18) 38%,rgba(125,15,19,.80) 70%,rgba(91,10,14,.96) 100%),
             linear-gradient(90deg,rgba(91,10,14,.35) 0%,rgba(91,10,14,0) 55%)}
.fn-login--split .fn-login__brand::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;background:linear-gradient(90deg,var(--fn-gold),rgba(212,164,52,.15))}
.fn-login--split .fn-login__brandtext{position:absolute;left:56px;right:56px;bottom:56px;z-index:1;color:#fff}
.fn-login--split .fn-login__brandlogo{display:block;width:250px;max-width:100%;height:auto;margin:0 0 18px;filter:drop-shadow(0 4px 18px rgba(0,0,0,.35))}
.fn-login--split .fn-login__brandline{margin:0;padding:10px 0 0 18px;border-left:4px solid var(--fn-gold);
  font:800 clamp(30px,3vw,44px)/1.1 var(--fn-head);letter-spacing:-.01em;color:#fff;text-shadow:0 3px 24px rgba(0,0,0,.4)}
.fn-login--split .fn-login__card{align-self:center;justify-self:center;width:calc(100% - 80px);max-width:500px;margin:56px 40px;
  border-radius:22px;border-top:6px solid var(--fn-red);box-shadow:0 30px 70px rgba(60,20,20,.16),0 2px 0 rgba(0,0,0,.02);padding:40px 38px 32px}
/* the brand panel now carries the logo, so the card's own red logo is not repeated */
.fn-login--split .fn-login__card .fn-login__logo{display:none}
.fn-login--split .fn-login__card p{font-size:18px;line-height:1.6}
.fn-login--split .fn-login__card h1{font-size:28px}
.fn-login--split .fn-login__alt{font-size:18px}
.fn-login--split .fn-login__help{font-size:17px}
.fn-login--split .fn-field{font-size:18px}
@media (max-width:900px){
  .fn-login--split .fn-login__split{grid-template-columns:1fr;min-height:0}
  .fn-login--split .fn-login__brand{min-height:0;height:250px}
  .fn-login--split .fn-login__photo{object-position:70% 35%}
  .fn-login--split .fn-login__brandtext{left:22px;right:22px;bottom:54px}
  .fn-login--split .fn-login__brandlogo{width:180px;margin-bottom:10px}
  .fn-login--split .fn-login__brandline{font-size:28px;padding-left:14px}
  .fn-login--split .fn-login__card{width:auto;max-width:520px;margin:-36px 14px 40px;position:relative;z-index:3;padding:28px 22px 24px}
}
@media (max-width:640px){
  .fn-login--split .fn-login__card p,.fn-login--split .fn-login__alt,.fn-login--split .fn-field{font-size:17px}
  .fn-login--split .fn-login__help{font-size:16px}
  .fn-login--split .fn-login__card h1{font-size:24px}
}
@media (min-width:901px) and (max-width:1100px){
  .fn-login--split .fn-login__brandtext{left:36px;right:36px;bottom:40px}
  .fn-login--split .fn-login__card{width:calc(100% - 48px);margin:40px 24px;padding:34px 28px 28px}
}

/* ---- 2. episode cards: two even columns (8 cards = 4 full rows, never an empty slot), equal heights per row,
          episode label as a readable pill chip ---- */
body.fn-ep .fn-ep-cards{max-width:1120px;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:stretch}
body.fn-ep .fn-epcard{height:100%}
body.fn-ep .fn-epcard > div{flex:1 1 auto;display:flex;flex-direction:column;padding:26px 30px 30px}
body.fn-ep .fn-epcard h3{font-size:22px;line-height:1.3;margin:0 0 .7em}
body.fn-ep .fn-epcard h3 .red{display:block;width:fit-content;margin:0 0 12px;padding:7px 14px;border-radius:999px;
  font-size:17px;line-height:1.2;letter-spacing:.06em;background:#fbeaea;color:var(--fn-red-d);border:1px solid #f1cfd0}
body.fn-ep .fn-epcard.is-on h3 .red{background:var(--fn-red);color:#fff;border-color:var(--fn-red)}
body.fn-ep .fn-epcard p{font-size:18px;line-height:1.7}
body.fn-ep .fn-epcard p:last-of-type{margin-bottom:0}
body.fn-ep .fn-ep-eyebrow{font-size:17px}
body.fn-ep .fn-epnav__head{font-size:17px}
@media (max-width:760px){
  body.fn-ep .fn-ep-cards{grid-template-columns:1fr;gap:24px}
  body.fn-ep .fn-epcard > div{padding:22px 20px 24px}
  body.fn-ep .fn-epcard h3{font-size:20px}
  body.fn-ep .fn-epcard p{font-size:17px}
}
/* login photo framing at in-between widths: keep both walkers in view */
@media (min-width:901px) and (max-width:1100px){ body .fn-login--split .fn-login__photo{object-position:84% 40%} }
@media (min-width:641px) and (max-width:900px){ body .fn-login--split .fn-login__brand{height:340px} body .fn-login--split .fn-login__photo{object-position:70% 28%} }