/* =====================================================================
   Envestpro Media — design system
   Ported from the "envestpro media" design canvas. This is the only
   stylesheet the member-facing pages load: no Bootstrap, no FontAwesome.
   ===================================================================== */

/* ----- Webfonts (Montserrat, self-hosted, Latin subset) --------------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/montserrat-300.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-700.woff2') format('woff2'); }

:root {
  /* Brand */
  --ep-navy:      #151E49;
  --ep-ink:       #0D1230;   /* deeper navy, used behind media */
  --ep-gold:      #D89D48;
  --ep-gold-deep: #C08930;
  --ep-white:     #ffffff;

  /* Neutrals */
  --ep-bone:      #F6F3EE;   /* warm off-white page ground */
  --ep-fog:       #cdd1dc;   /* input borders */
  --ep-sand:      #e3ded4;   /* borders on bone */
  --ep-hairline:  #ece7de;   /* list dividers */
  --ep-slate:     #808284;   /* muted label grey */
  --ep-slate-2:   #5b6076;   /* muted body on light */
  --ep-graphite:  #3d445e;   /* long-form body copy */

  /* Type */
  --ep-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --ep-tracking-eyebrow: 0.18em;

  /* Motion */
  --ep-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ep-dur:  140ms;

  /* Layout */
  --ep-max: 1280px;
  --ep-pad: 48px;

  /* Shadow */
  --ep-shadow-2: 0 4px 12px rgba(21, 30, 73, .08), 0 1px 2px rgba(21, 30, 73, .04);
  --ep-shadow-3: 0 12px 32px rgba(21, 30, 73, .12), 0 2px 6px rgba(21, 30, 73, .06);
}

/* ----- Element defaults ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body.ep-body {
  margin: 0;
  background: var(--ep-white);
  color: var(--ep-navy);
  font-family: var(--ep-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ep-shell { display: flex; flex-direction: column; min-height: 100vh; }
.ep-main  { flex: 1 0 auto; display: flex; flex-direction: column; }

.ep-container { width: 100%; max-width: var(--ep-max); margin: 0 auto; padding: 0 var(--ep-pad); }

/* Lowercase brand voice is deliberate — never auto-capitalise headings. */
.ep-body h1, .ep-body h2, .ep-body h3 {
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

.ep-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ep-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ep-slate);
}
.ep-eyebrow--gold { color: var(--ep-gold); }

.ep-hairline { height: 1px; background: var(--ep-navy); opacity: .12; border: 0; }

/* Visible to screen readers only — used where the design carries meaning
   graphically (e.g. the bare count on a folder card). */
.ep-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ----- Top bar -------------------------------------------------------- */
.ep-topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--ep-navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ep-topbar-inner {
  max-width: var(--ep-max); margin: 0 auto; padding: 0 var(--ep-pad);
  min-height: 72px; display: flex; align-items: center; gap: 44px;
}
.ep-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.ep-brand img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }
.ep-brand-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ep-white); white-space: nowrap; }
.ep-brand-name b { font-weight: 600; color: var(--ep-gold); }

.ep-nav { display: flex; align-items: center; gap: 30px; }
.ep-nav a {
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: rgba(255, 255, 255, .75); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: color var(--ep-dur) var(--ep-ease);
  white-space: nowrap;
}
.ep-nav a:hover { color: var(--ep-gold); }
.ep-nav a.is-active { color: var(--ep-gold); border-bottom-color: var(--ep-gold); }

.ep-topbar-end { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 24px; }

.ep-topsearch {
  display: flex; align-items: center; gap: 10px; width: 280px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px; padding: 9px 14px; margin: 0;
}
.ep-topsearch:focus-within { border-color: var(--ep-gold); }
.ep-topsearch span { color: rgba(255, 255, 255, .5); font-size: 14px; line-height: 1; }
.ep-topsearch input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--ep-white); font-family: var(--ep-font); font-size: 13px; font-weight: 400;
}
.ep-topsearch input::placeholder { color: rgba(255, 255, 255, .45); }

.ep-user { display: flex; align-items: center; gap: 11px; }
.ep-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 999px;
  background: var(--ep-gold); color: var(--ep-navy);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
}
.ep-username { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .75); white-space: nowrap; }

.ep-signout { margin: 0; }
.ep-signout button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--ep-font); font-size: 13px; font-weight: 500;
  color: rgba(255, 255, 255, .5); white-space: nowrap;
  transition: color var(--ep-dur) var(--ep-ease);
}
.ep-signout button:hover { color: var(--ep-gold); }

.ep-topbar :focus-visible { outline: 2px solid var(--ep-gold); outline-offset: 3px; }

/* ----- Hero band ------------------------------------------------------ */
.ep-hero { position: relative; background: var(--ep-ink); overflow: hidden; }
.ep-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 34% 42%;
  opacity: .34; filter: grayscale(.35);
}
.ep-hero::after { content: ""; position: absolute; inset: 0; background: rgba(13, 18, 48, .62); }
.ep-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--ep-max); margin: 0 auto; padding: 96px var(--ep-pad) 88px;
}
.ep-hero .ep-eyebrow { color: var(--ep-gold); margin-bottom: 24px; }
.ep-hero h1 {
  font-size: clamp(38px, 4.6vw, 60px); line-height: 1.04;
  letter-spacing: -.025em; color: var(--ep-white);
}
.ep-hero p {
  margin: 28px 0 0; max-width: 560px;
  font-size: 17px; line-height: 1.65; font-weight: 300;
  color: rgba(255, 255, 255, .76); text-wrap: pretty;
}

/* ----- Section head (eyebrow + heading + rule) ------------------------ */
/* width:100% is load-bearing: .ep-section is a flex child of .ep-main, and
   the auto side margins would otherwise cancel `stretch` and shrink it to
   fit its content, leaving it narrower than the band above. */
.ep-section { width: 100%; max-width: var(--ep-max); margin: 0 auto; padding: 44px var(--ep-pad) 112px; }
.ep-section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ep-section-head h2 { font-size: clamp(26px, 3vw, 34px); color: var(--ep-navy); }
.ep-section-head .ep-eyebrow { flex: none; }
.ep-section > .ep-hairline { margin-bottom: 40px; }

/* ----- Folder cards (navy) ------------------------------------------- */
.ep-folders {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.ep-folder {
  position: relative; display: block; overflow: hidden;
  border-radius: 8px; background: var(--ep-navy);
  aspect-ratio: 4 / 3.1; text-decoration: none;
  transition: box-shadow var(--ep-dur) var(--ep-ease), transform var(--ep-dur) var(--ep-ease);
}
.ep-folder:hover { box-shadow: var(--ep-shadow-3); transform: translateY(-2px); }
.ep-folder:focus-visible { outline: 2px solid var(--ep-gold); outline-offset: 3px; }
/* The canvas used a 4250px mark with generous transparent margins; ep-icon
   is tightly cropped, so it needs to sit smaller and further into the corner
   to stay behind the folder name rather than across it. */
.ep-folder-mark { position: absolute; right: -5%; bottom: -7%; width: 46%; opacity: .08; }
.ep-folder-inner {
  position: relative; height: 100%; padding: 26px 26px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ep-folder-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ep-folder-kind { font-size: 10px; font-weight: 500; letter-spacing: .16em; color: rgba(255, 255, 255, .5); }
.ep-folder-count { font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--ep-gold); }
.ep-folder-rule { width: 36px; height: 1px; background: rgba(216, 157, 72, .7); margin-bottom: 16px; }
.ep-folder-name {
  font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.008em;
  color: var(--ep-white); text-wrap: pretty;
  min-height: 2.5em; display: flex; align-items: flex-end;
}

/* ----- Video cards ---------------------------------------------------- */
.ep-videos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px;
  list-style: none; margin: 0; padding: 0;
}
.ep-video { display: block; text-decoration: none; transition: transform var(--ep-dur) var(--ep-ease); }
.ep-video:hover { transform: translateY(-2px); }
.ep-video:focus-visible { outline: 2px solid var(--ep-gold); outline-offset: 3px; border-radius: 6px; }
.ep-thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 6px; background: var(--ep-ink);
  display: flex; align-items: center; justify-content: center;
}
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Shown instead of a photo when the video has no thumbnail of its own —
   the built-in base64 fallback is a full-bleed play glyph that reads as a
   broken image once it is cover-fitted. */
.ep-thumb .ep-thumb-mark { width: 42%; height: auto; object-fit: contain; opacity: .12; }
.ep-thumb::before {
  content: ""; position: absolute; left: 0; top: 0;
  height: 2px; width: 34px; background: var(--ep-gold); z-index: 2;
}
.ep-play {
  position: absolute; width: 52px; height: 52px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ep-dur) var(--ep-ease);
}
.ep-play::after {
  content: ""; width: 0; height: 0; margin-left: 3px;
  border-left: 12px solid rgba(255, 255, 255, .9);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.ep-video:hover .ep-play { background: rgba(216, 157, 72, .92); }
.ep-video:hover .ep-play::after { border-left-color: var(--ep-navy); }
.ep-video-body { padding: 16px 2px 0; }
.ep-video-title {
  display: block; font-size: 15px; font-weight: 600; line-height: 1.35;
  letter-spacing: -.01em; color: var(--ep-navy); text-wrap: pretty;
}
.ep-video-meta { display: block; font-size: 12px; font-weight: 400; color: var(--ep-slate); margin-top: 9px; }

/* ----- Result rows (search) ------------------------------------------ */
.ep-rows { border-top: 1px solid var(--ep-hairline); }
.ep-row {
  display: grid; grid-template-columns: 132px 1fr 200px 110px; gap: 24px;
  align-items: center; padding: 14px 12px; border-radius: 4px;
  border-bottom: 1px solid var(--ep-hairline);
  text-decoration: none; transition: background var(--ep-dur) var(--ep-ease);
}
.ep-row:hover { background: var(--ep-bone); }
.ep-row:focus-visible { outline: 2px solid var(--ep-gold); outline-offset: -2px; }
.ep-row .ep-thumb { border-radius: 4px; }
.ep-row .ep-thumb::before { width: 24px; }
.ep-row-title { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--ep-navy); }
.ep-row-cat { font-size: 12px; font-weight: 400; color: var(--ep-slate); }
.ep-row-meta { font-size: 13px; font-weight: 400; color: var(--ep-slate); text-align: right; }

/* ----- Page band (folder / player breadcrumb header) ------------------ */
.ep-band { background: var(--ep-navy); }
.ep-band--deep { background: var(--ep-ink); }
.ep-band-inner { max-width: var(--ep-max); margin: 0 auto; padding: 44px var(--ep-pad) 52px; }

.ep-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.ep-crumbs a, .ep-crumbs span {
  font-size: 12px; font-weight: 500; letter-spacing: .1em;
  color: rgba(255, 255, 255, .55); text-decoration: none;
  transition: color var(--ep-dur) var(--ep-ease);
}
.ep-crumbs a:hover { color: var(--ep-gold); }
.ep-crumbs .ep-crumb-sep { color: rgba(255, 255, 255, .3); letter-spacing: 0; }
.ep-crumbs .ep-crumb-here { color: var(--ep-gold); }
.ep-crumbs :focus-visible { outline: 2px solid var(--ep-gold); outline-offset: 3px; }

.ep-band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.ep-band-head h1 {
  font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08;
  letter-spacing: -.025em; color: var(--ep-white); max-width: 760px;
}
.ep-band-stat { flex: none; text-align: right; min-width: 150px; border-top: 1px solid rgba(216, 157, 72, .6); padding-top: 18px; }
.ep-band-stat b { display: block; font-size: 40px; font-weight: 300; line-height: 1; color: var(--ep-white); }
.ep-band-stat span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .14em; color: rgba(255, 255, 255, .5); margin-top: 9px; }

.ep-listmeta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.ep-listmeta-count { font-size: 13px; font-weight: 400; color: var(--ep-slate); }
.ep-listmeta-sort  { font-size: 13px; font-weight: 500; color: var(--ep-navy); }

/* ----- Player --------------------------------------------------------- */
.ep-player-page { background: var(--ep-bone); flex: 1; }
.ep-player-band { background: var(--ep-ink); }
/* Shares the player's 1080px column so the band reads as one centred stage
   rather than a breadcrumb hanging off the video's left edge. */
.ep-player-crumbs { max-width: 1080px; margin: 0 auto; padding: 20px var(--ep-pad) 0; }
.ep-player-crumbs .ep-crumbs { margin: 0; padding-bottom: 16px; }
.ep-player-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--ep-pad) 40px; }
.ep-player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 8px; background: var(--ep-navy);
}
.ep-player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

.ep-detail {
  max-width: var(--ep-max); margin: 0 auto;
  padding: 44px var(--ep-pad) 96px;
  display: grid; grid-template-columns: 1fr 344px; gap: 32px; align-items: start;
}
.ep-detail .ep-eyebrow { font-size: 11px; letter-spacing: .16em; color: var(--ep-gold); margin-bottom: 16px; }
.ep-detail h1 {
  font-size: clamp(26px, 3vw, 36px); line-height: 1.14;
  letter-spacing: -.022em; color: var(--ep-navy); max-width: 720px;
}
.ep-detail-meta {
  display: flex; flex-wrap: wrap; gap: 26px; margin: 24px 0 30px;
  font-size: 13px; font-weight: 400; color: var(--ep-slate);
}
.ep-detail-meta b { color: var(--ep-gold-deep); font-weight: 600; }
.ep-detail .ep-hairline { margin-bottom: 30px; }
.ep-detail-desc {
  margin: 0; max-width: 680px;
  font-size: 16px; line-height: 1.7; font-weight: 300;
  color: var(--ep-graphite); text-wrap: pretty;
}

.ep-aside { background: var(--ep-white); border: 1px solid var(--ep-sand); border-radius: 8px; padding: 26px 24px; }
.ep-aside > .ep-eyebrow { font-size: 11px; letter-spacing: .16em; margin-bottom: 20px; }
.ep-aside-item {
  display: flex; gap: 14px; padding: 14px 0;
  border-top: 1px solid var(--ep-hairline); text-decoration: none;
}
.ep-aside-item:hover .ep-aside-title { color: var(--ep-gold-deep); }
.ep-aside-item:focus-visible { outline: 2px solid var(--ep-gold); outline-offset: 2px; }
.ep-aside-thumb {
  position: relative; width: 88px; height: 50px; flex: none; overflow: hidden;
  border-radius: 4px; background: var(--ep-ink);
  display: flex; align-items: center; justify-content: center;
}
.ep-aside-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-aside-thumb .ep-aside-mark { width: 52%; height: auto; object-fit: contain; opacity: .16; }
.ep-aside-title { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ep-navy); transition: color var(--ep-dur) var(--ep-ease); }
.ep-aside-meta { display: block; font-size: 11px; font-weight: 400; color: var(--ep-slate); margin-top: 6px; }
.ep-aside-all {
  display: inline-block; margin-top: 20px;
  font-size: 13px; font-weight: 500; color: var(--ep-navy); text-decoration: none;
}
.ep-aside-all:hover { color: var(--ep-gold-deep); }

/* ----- Auth (login + password pages) --------------------------------- */
.ep-auth { display: grid; grid-template-columns: 1.15fr 1fr; flex: 1; min-height: 620px; }
.ep-auth-visual { position: relative; background: var(--ep-ink); overflow: hidden; }
.ep-auth-visual img.ep-auth-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .42;
}
.ep-auth-visual::after { content: ""; position: absolute; inset: 0; background: rgba(13, 18, 48, .55); }
.ep-auth-visual-inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 64px;
}
.ep-auth-brand { display: flex; align-items: center; gap: 14px; }
.ep-auth-brand img { height: 38px; width: auto; filter: brightness(0) invert(1); }
.ep-auth-brand span { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ep-white); }
.ep-auth-brand b { font-weight: 600; color: var(--ep-gold); }
.ep-auth-copy { max-width: 520px; }
.ep-auth-copy h1 {
  font-size: clamp(32px, 3.9vw, 52px); line-height: 1.06;
  letter-spacing: -.025em; color: var(--ep-white);
}
.ep-auth-rule { width: 64px; height: 1px; background: var(--ep-gold); margin: 34px 0 26px; }
.ep-auth-copy p {
  margin: 0; font-size: 17px; line-height: 1.65; font-weight: 300;
  color: rgba(255, 255, 255, .78); text-wrap: pretty;
}
.ep-auth-fine { font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .42); max-width: 560px; }

.ep-auth-panel { display: flex; align-items: center; justify-content: center; padding: 56px; background: var(--ep-bone); }
.ep-auth-form { width: 100%; max-width: 380px; }
.ep-auth-form .ep-eyebrow { margin-bottom: 14px; }
.ep-auth-title { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; color: var(--ep-navy); margin: 0 0 10px; }
.ep-auth-sub { margin: 0 0 36px; font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--ep-slate-2); }
.ep-auth-links { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.ep-auth-links a { font-size: 13px; font-weight: 400; color: var(--ep-slate); text-decoration: none; }
.ep-auth-links a:hover { color: var(--ep-gold-deep); }
.ep-auth-link { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--ep-slate); text-decoration: none; }
.ep-auth-link:hover { color: var(--ep-gold-deep); }
.ep-auth-panel p { color: var(--ep-slate-2); font-weight: 300; }
.ep-auth-panel a { color: var(--ep-navy); }

/* Single-column variant used by the password-reset / change pages. Those
   templates put .ep-auth-form straight inside .ep-auth with no panel
   wrapper, so the centring has to live on the section itself. */
.ep-auth--single {
  grid-template-columns: 1fr;
  place-items: center;
  background: var(--ep-bone);
  padding: 72px 24px;
}
.ep-auth--single .ep-auth-panel { padding: 0; background: none; }
.ep-auth--single .ep-auth-form {
  background: var(--ep-white); border: 1px solid var(--ep-sand);
  border-radius: 8px; padding: 40px 36px; box-shadow: var(--ep-shadow-2);
  max-width: 440px;
}
.ep-auth--single .ep-auth-title { margin-bottom: 24px; }

/* ----- Forms ---------------------------------------------------------- */
.ep-label {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ep-navy); margin: 0 0 8px;
}
.ep-field {
  display: block; width: 100%; margin-bottom: 22px;
  padding: 13px 14px; font-family: var(--ep-font); font-size: 15px;
  color: var(--ep-navy); background: var(--ep-white);
  border: 1px solid var(--ep-fog); border-radius: 4px; outline: none;
  transition: border-color var(--ep-dur) var(--ep-ease);
}
.ep-field:focus { border-color: var(--ep-gold); box-shadow: 0 0 0 3px rgba(216, 157, 72, .18); }

.ep-btn {
  display: inline-block; padding: 15px 24px; cursor: pointer;
  font-family: var(--ep-font); font-size: 14px; font-weight: 700; letter-spacing: .06em;
  color: var(--ep-white); background: var(--ep-navy);
  border: 0; border-radius: 4px; text-decoration: none; text-align: center;
  transition: background var(--ep-dur) var(--ep-ease);
}
.ep-btn:hover { background: var(--ep-ink); color: var(--ep-white); }
.ep-btn:focus-visible { outline: 2px solid var(--ep-gold); outline-offset: 2px; }
.ep-btn-block { display: block; width: 100%; }

.ep-form-errors, .text-danger {
  background: #fdf2f2; border: 1px solid #e9bcbc; border-radius: 4px;
  color: #8a2b2b; font-size: 13px; padding: 10px 14px; margin: 0 0 18px;
}
.ep-form-errors p { margin: 0; }
.ep-form-errors p + p { margin-top: 6px; }

/* ----- Alerts --------------------------------------------------------- */
.ep-alert {
  border-radius: 4px; font-size: 13px; padding: 11px 15px; margin-bottom: 18px;
  background: rgba(216, 157, 72, .12); border: 1px solid rgba(216, 157, 72, .45);
  color: var(--ep-navy);
}
.ep-alert--error { background: #fdf2f2; border-color: #e9bcbc; color: #8a2b2b; }
.ep-alert--success { background: #eef6f1; border-color: #b6d6c4; color: #2f7d56; }
.ep-alert b { font-weight: 600; }

/* ----- Pagination ----------------------------------------------------- */
.ep-pages {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: 56px; font-size: 13px; font-weight: 400; color: var(--ep-slate);
}
.ep-pages a {
  font-weight: 500; color: var(--ep-navy); text-decoration: none;
  border: 1px solid var(--ep-fog); border-radius: 999px; padding: 8px 18px;
  transition: border-color var(--ep-dur) var(--ep-ease), color var(--ep-dur) var(--ep-ease);
}
.ep-pages a:hover { border-color: var(--ep-navy); color: var(--ep-gold-deep); }
.ep-pages a:focus-visible { outline: 2px solid var(--ep-gold); outline-offset: 2px; }

/* ----- Empty state ---------------------------------------------------- */
.ep-empty { grid-column: 1 / -1; padding: 80px 0; text-align: center; }
.ep-empty img { height: 56px; width: auto; opacity: .35; margin-bottom: 22px; }
.ep-empty h3 { font-size: 18px; font-weight: 600; color: var(--ep-navy); margin: 0 0 10px; }
.ep-empty p { font-size: 14px; font-weight: 300; color: var(--ep-slate); margin: 0 auto; max-width: 46ch; }

/* ----- Footer --------------------------------------------------------- */
.ep-footer {
  flex-shrink: 0; background: var(--ep-navy);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ep-footer-inner {
  max-width: var(--ep-max); margin: 0 auto; padding: 34px var(--ep-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.ep-footer-brand { display: flex; align-items: center; gap: 12px; }
.ep-footer-brand img { height: 22px; width: auto; opacity: .85; }
.ep-footer-brand span { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .5); }
.ep-footer-credit { color: var(--ep-gold); font-weight: 500; }
.ep-footer-fine {
  font-size: 12px; font-weight: 400; line-height: 1.6; text-align: right;
  color: rgba(255, 255, 255, .42); max-width: 620px;
}

/* ----- Responsive ----------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --ep-pad: 32px; }
  .ep-folders { grid-template-columns: repeat(3, 1fr); }
  .ep-videos  { grid-template-columns: repeat(3, 1fr); }
  .ep-detail  { grid-template-columns: 1fr 300px; }
}

@media (max-width: 980px) {
  .ep-topbar-inner { flex-wrap: wrap; gap: 16px 24px; padding-top: 14px; padding-bottom: 14px; }
  .ep-topbar-end { flex-basis: 100%; justify-content: flex-start; }
  .ep-topsearch { width: 100%; max-width: 320px; }
  .ep-hero-inner { padding: 64px var(--ep-pad) 60px; }
  .ep-section { padding-bottom: 80px; }
  .ep-folders { grid-template-columns: repeat(2, 1fr); }
  .ep-videos  { grid-template-columns: repeat(2, 1fr); }
  .ep-detail  { grid-template-columns: 1fr; }
  .ep-band-head { flex-direction: column; align-items: flex-start; gap: 26px; }
  .ep-band-stat { text-align: left; min-width: 0; }
  .ep-row { grid-template-columns: 110px 1fr; gap: 16px; }
  .ep-row-cat, .ep-row-meta { grid-column: 2; text-align: left; }
  .ep-auth { grid-template-columns: 1fr; }
  .ep-auth-visual { min-height: 260px; }
  .ep-auth-visual-inner { padding: 32px; gap: 28px; }
  .ep-auth-fine { display: none; }
  .ep-auth-panel { padding: 48px 32px; }
}

@media (max-width: 620px) {
  :root { --ep-pad: 20px; }
  .ep-folders { grid-template-columns: 1fr; }
  .ep-videos  { grid-template-columns: 1fr; }
  .ep-folder  { aspect-ratio: 16 / 9; }
  .ep-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ep-footer-fine { text-align: left; }
  .ep-listmeta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ep-folder, .ep-video, .ep-play, .ep-nav a, .ep-row { transition: none; }
  .ep-folder:hover, .ep-video:hover { transform: none; }
}