/* ============================================================
   S-Class v2.48.3 — Public E-Portfolio polish
   - shorter responsive full-width cover
   - stronger outer shell
   - true readable dark mode
   - larger supporting text
   - sticky footer at viewport bottom
   ============================================================ */

/* The whole page is a vertical flex layout: nav + portfolio. */
html,body{min-height:100%!important}
body{
  min-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  background:#c9d9e9!important;
}
.ep-nav{flex:0 0 auto!important}
.ep-root{
  flex:1 0 auto!important;
  min-height:calc(100dvh - 64px)!important;
  display:flex!important;
  flex-direction:column!important;
  padding:0!important;
  --ep-shell-outer:#c6d7e9;
  --ep-shell-mid:#e5eef6;
  --ep-canvas:#f8fbff;
  background:
    linear-gradient(90deg,
      var(--ep-shell-outer) 0 9.5%,
      var(--ep-shell-mid) 9.5% 15.5%,
      var(--ep-canvas) 15.5% 84.5%,
      var(--ep-shell-mid) 84.5% 90.5%,
      var(--ep-shell-outer) 90.5% 100%)!important;
}

/* Brand uses the actual S-Class system logo. */
.ep-brand-icon{
  width:42px!important;height:42px!important;padding:4px!important;
  overflow:hidden!important;background:#fff!important;
  border:1px solid #d8e5f1!important;
}
.ep-brand-icon img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:11px!important}
.ep-brand strong{font-size:15px!important;color:#233a61!important;line-height:1.08!important}
.ep-brand small{font-size:13px!important;color:#7b8ba1!important}

/* Cover: 1920 × 360 is the recommended source size (5.33:1). */
.ep-hero-section{margin:0 auto 30px!important}
.ep-cover{
  height:clamp(220px,18.75vw,360px)!important;
  border-radius:0 0 28px 28px!important;
  box-shadow:0 8px 0 rgba(177,197,215,.86),0 20px 38px rgba(27,58,94,.13)!important;
}
.ep-cover-image{object-fit:cover!important;object-position:center center!important}
.ep-hero-main{
  margin:-62px auto 0!important;
  padding:18px 22px!important;
  min-height:168px!important;
}

/* Supporting text: larger than previous build, while headings stay dominant. */
.ep-section-head span{font-size:13px!important}
.ep-section-head h2{font-size:28px!important;line-height:1.22!important}
.ep-section-head p{font-size:14px!important;line-height:1.55!important}
.ep-card span{font-size:13px!important}
.ep-card p,.ep-fallback-text{font-size:15px!important;line-height:1.65!important}
.ep-tag-row span,.ep-tag-row .ep-tag{font-size:13px!important}
.ep-timeline h3,.ep-timeline-card h3{font-size:16px!important}
.ep-timeline p,.ep-timeline-card p{font-size:14px!important;line-height:1.6!important}
.ep-rank-big-card p,.ep-rank-big-card span,.ep-rank-big-card small{font-size:13.5px!important;line-height:1.55!important}
.ep-pride-body span{font-size:13px!important}.ep-pride-body h3{font-size:18px!important}.ep-pride-body p{font-size:14px!important;line-height:1.58!important}.ep-pride-body small{font-size:13px!important}

/* My Future readability */
.ep-future-title-row span{font-size:13px!important}
.ep-future-title-row h3{font-size:26px!important}
.ep-future-title-row p{font-size:13px!important;line-height:1.55!important}
.ep-future-stats small{font-size:13px!important}.ep-future-stats strong{font-size:22px!important}.ep-future-stats span{font-size:13px!important}
.ep-future-block-head span{font-size:14px!important}.ep-future-block-head small{font-size:13px!important}
.ep-future-skill-row span{font-size:13px!important;padding:8px 10px!important}
.ep-future-week-item{grid-template-columns:40px minmax(0,1fr)!important;padding:10px!important}
.ep-future-week-item>i{width:38px!important;height:38px!important;font-size:15px!important}
.ep-future-week-item b{font-size:13px!important}.ep-future-week-item span{font-size:13px!important;line-height:1.45!important}.ep-future-week-item small{font-size:13px!important}
.ep-future-mini-head span{font-size:13px!important}.ep-future-mini-head h3{font-size:17px!important}
.ep-future-completed-item b,.ep-future-related-item b{font-size:13px!important}.ep-future-completed-item span,.ep-future-related-item span{font-size:13px!important;line-height:1.45!important}.ep-future-completed-item small,.ep-future-related-item small{font-size:13px!important}

/* Career icon: strong contrast regardless of outfit color. */
.ep-future-career-icon{
  width:58px!important;height:58px!important;border-radius:18px!important;
  background:color-mix(in srgb,var(--future-color,#2f8f65) 14%,#fff)!important;
  color:var(--future-color,#2f8f65)!important;
  border:1px solid color-mix(in srgb,var(--future-color,#2f8f65) 30%,#dce7f1)!important;
  font-size:24px!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
  font-weight:700!important;
}

/* Footer must touch the real bottom when content is short. */
.ep-footer{
  width:100%!important;
  margin:auto 0 0!important;
  padding:28px 0 0!important;
  flex:0 0 auto!important;
}
.ep-footer>div{
  width:min(1180px,calc(100% - 36px))!important;
  margin:0 auto!important;
  padding:14px 18px 16px!important;
  border-radius:18px 18px 0 0!important;
  border-bottom:0!important;
}

/* ---------- Dark mode: true contrast, not dark text on dark surfaces ---------- */
.ep-root.mode-dark{
  --ep-shell-outer:#030816!important;
  --ep-shell-mid:#081222!important;
  --ep-canvas:#0f1929!important;
  --ep-card:#172235!important;
  --ep-card-solid:#172235!important;
  --ep-text:#f8fafc!important;
  --ep-muted:#c4d0df!important;
  --ep-line:#33445d!important;
  background:
    linear-gradient(90deg,
      #030816 0 10%,
      #081222 10% 16%,
      #0f1929 16% 84%,
      #081222 84% 90%,
      #030816 90% 100%)!important;
}
body.ep-mode-dark{background:#030816!important;color:#f8fafc!important}
body.ep-mode-dark .ep-nav{background:rgba(8,18,34,.96)!important;border-bottom-color:#26364e!important}
body.ep-mode-dark .ep-brand-icon{background:#162238!important;border-color:#31445f!important}
body.ep-mode-dark .ep-brand strong{color:#f8fafc!important}
body.ep-mode-dark .ep-brand small,body.ep-mode-dark .ep-nav-links button{color:#d4deea!important}

.ep-root.mode-dark .ep-hero-main,
.ep-root.mode-dark .ep-card,
.ep-root.mode-dark .ep-rank-big-card,
.ep-root.mode-dark .ep-pride-card,
.ep-root.mode-dark .ep-achievement-card,
.ep-root.mode-dark .ep-timeline-card,
.ep-root.mode-dark .ep-timeline-item,
.ep-root.mode-dark .ep-future-section,
.ep-root.mode-dark .ep-future-info-card,
.ep-root.mode-dark .ep-future-mini-card,
.ep-root.mode-dark .ep-game-level-card,
.ep-root.mode-dark .ep-game-badge-card,
.ep-root.mode-dark .ep-footer>div{
  background:#172235!important;
  border-color:#33445d!important;
  color:#f8fafc!important;
}
.ep-root.mode-dark .ep-section-alt{background:rgba(15,25,41,.80)!important;border-color:#2c3d55!important}
.ep-root.mode-dark .ep-hero-info h1,
.ep-root.mode-dark #epName,
.ep-root.mode-dark .ep-section-head h2,
.ep-root.mode-dark .ep-card span,
.ep-root.mode-dark .ep-card h3,
.ep-root.mode-dark .ep-card strong,
.ep-root.mode-dark .ep-timeline h3,
.ep-root.mode-dark .ep-timeline-card h3,
.ep-root.mode-dark .ep-rank-big-card h3,
.ep-root.mode-dark .ep-rank-big-card strong,
.ep-root.mode-dark .ep-pride-body h3,
.ep-root.mode-dark .ep-future-title-row h3,
.ep-root.mode-dark .ep-future-block-head span,
.ep-root.mode-dark .ep-future-mini-head h3,
.ep-root.mode-dark .ep-future-week-item b,
.ep-root.mode-dark .ep-future-completed-item b,
.ep-root.mode-dark .ep-future-related-item b{
  color:#f8fafc!important;
}
.ep-root.mode-dark .ep-hero-info p,
.ep-root.mode-dark #epClass,
.ep-root.mode-dark .ep-section-head p,
.ep-root.mode-dark .ep-card p,
.ep-root.mode-dark .ep-fallback-text,
.ep-root.mode-dark .ep-timeline p,
.ep-root.mode-dark .ep-timeline-card p,
.ep-root.mode-dark .ep-rank-big-card p,
.ep-root.mode-dark .ep-rank-big-card span,
.ep-root.mode-dark .ep-rank-big-card small,
.ep-root.mode-dark .ep-pride-body p,
.ep-root.mode-dark .ep-pride-body small,
.ep-root.mode-dark .ep-future-title-row p,
.ep-root.mode-dark .ep-future-stats span,
.ep-root.mode-dark .ep-future-week-item span,
.ep-root.mode-dark .ep-future-week-item small,
.ep-root.mode-dark .ep-future-completed-item span,
.ep-root.mode-dark .ep-future-completed-item small,
.ep-root.mode-dark .ep-future-related-item span,
.ep-root.mode-dark .ep-future-related-item small,
.ep-root.mode-dark .ep-footer{
  color:#c4d0df!important;
}
.ep-root.mode-dark .ep-card-icon,
.ep-root.mode-dark .ep-future-week-item>i,
.ep-root.mode-dark .ep-future-mini-head>i,
.ep-root.mode-dark .ep-future-related-icon{
  background:#22324a!important;
  color:#9cc7ff!important;
  border-color:#344966!important;
}
.ep-root.mode-dark .ep-tag-row span,
.ep-root.mode-dark .ep-tag-row .ep-tag,
.ep-root.mode-dark .ep-future-skill-row span,
.ep-root.mode-dark .ep-future-stats>div,
.ep-root.mode-dark .ep-future-week-item,
.ep-root.mode-dark .ep-future-completed-item,
.ep-root.mode-dark .ep-future-related-item,
.ep-root.mode-dark .ep-rank-mini,
.ep-root.mode-dark .ep-soft-btn{
  background:#213047!important;
  color:#e8eef7!important;
  border-color:#344966!important;
}
.ep-root.mode-dark .ep-future-career-icon{
  background:color-mix(in srgb,var(--future-color,#4ade80) 20%,#172235)!important;
  color:color-mix(in srgb,var(--future-color,#4ade80) 72%,#ffffff)!important;
  border-color:color-mix(in srgb,var(--future-color,#4ade80) 40%,#33445d)!important;
}

@media(max-width:920px){
  .ep-root{background:var(--ep-canvas)!important}
  .ep-cover{height:clamp(210px,28vw,290px)!important;border-radius:0 0 24px 24px!important}
  .ep-hero-main{margin:-50px auto 0!important}
}
@media(max-width:680px){
  body{min-height:100dvh!important}
  .ep-root{min-height:calc(100dvh - 68px)!important}
  .ep-cover{height:210px!important;border-radius:0 0 22px 22px!important}
  .ep-hero-main{margin:-40px auto 0!important}
  .ep-section-head h2{font-size:24px!important}
  .ep-section-head p{font-size:13px!important}
  .ep-card p,.ep-fallback-text{font-size:14px!important}
  .ep-footer{padding-top:20px!important}.ep-footer>div{width:calc(100% - 16px)!important}
}