/* =============================================================================
   BRAND LAYER — Kalba Sports Festival 2026 visual identity on the website.
   Built from the brand guide: official palette (navy / turquoise / coral / gold
   and their tints) plus the logo's own elements — the running-track bands, the
   sun-ray crown, the mountain peaks, the sea curl and the rounded logo tile.
   Light is the default theme; dark stays available from the header toggle.
   Two clear paths everywhere: COMPETITIONS (navy + turquoise) for athletes and
   teams, VISITORS & FAMILIES (gold + coral) for everyone else.
   ============================================================================= */
:root {
  --b-navy:#1D3E56; --b-navy-70:#61788A; --b-navy-40:#A5B2BB; --b-navy-10:#E8ECEE;
  --b-teal:#4391A7; --b-teal-70:#7BB2C1; --b-teal-40:#B4D3DC; --b-teal-10:#ECF4F6;
  --b-coral:#E2563A; --b-coral-70:#EB8A70; --b-coral-40:#F3BCAD; --b-coral-10:#FCEFEB;
  --b-gold:#EFAB45; --b-gold-70:#F4C47D; --b-gold-40:#F9DDB5; --b-gold-10:#FDF7EC;
  --b-paper:#FBFAF6;
  --b-swoosh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E %3Cpath fill='%234391A7' d='M60 300 C150 150 260 80 400 40 L400 92 C285 125 190 190 128 300 Z'/%3E %3Cpath fill='%234391A7' d='M170 300 C235 200 310 150 400 124 L400 168 C330 190 270 235 230 300 Z'/%3E %3Cpath fill='%23E2563A' d='M282 300 C320 245 360 215 400 200 L400 250 C375 262 350 280 336 300 Z'/%3E%3C/svg%3E");
  --b-swoosh-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E %3Cpath fill='%23EFAB45' d='M60 300 C150 150 260 80 400 40 L400 92 C285 125 190 190 128 300 Z'/%3E %3Cpath fill='%234391A7' d='M170 300 C235 200 310 150 400 124 L400 168 C330 190 270 235 230 300 Z'/%3E %3Cpath fill='%23E2563A' d='M282 300 C320 245 360 215 400 200 L400 250 C375 262 350 280 336 300 Z'/%3E%3C/svg%3E");
  --b-rays-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23EFAB45' fill-opacity='0.22'%3E %3Cpath d='M20 64a12 12 0 0 1 24 0Z'/%3E %3Cpath d='M30 48h4l2-44h-8Z'/%3E%3Cpath d='M22 51l3-2-17-34-6 3Z'/%3E%3Cpath d='M42 51l-3-2 17-34 6 3Z'/%3E %3Cpath d='M17 57l1-3-16-9-2 5Z'/%3E%3Cpath d='M47 57l-1-3 16-9 2 5Z'/%3E%3C/g%3E%3C/svg%3E");
  --b-rays-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E %3Cpath d='M20 64a12 12 0 0 1 24 0Z'/%3E %3Cpath d='M30 48h4l2-44h-8Z'/%3E%3Cpath d='M22 51l3-2-17-34-6 3Z'/%3E%3Cpath d='M42 51l-3-2 17-34 6 3Z'/%3E %3Cpath d='M17 57l1-3-16-9-2 5Z'/%3E%3Cpath d='M47 57l-1-3 16-9 2 5Z'/%3E%3C/g%3E%3C/svg%3E");
  --b-crown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Cg fill='%23EFAB45'%3E %3Cpath d='M80 60a20 20 0 0 1 40 0Z'/%3E %3Cpath d='M97 36h6l3-36h-12Z'/%3E%3Cpath d='M86 39l5-3-22-32-9 6Z'/%3E%3Cpath d='M114 39l-5-3 22-32 9 6Z'/%3E %3Cpath d='M79 46l3-5-34-20-5 9Z'/%3E%3Cpath d='M121 46l-3-5 34-20 5 9Z'/%3E %3Cpath d='M76 55l1-5-40-6-2 10Z'/%3E%3Cpath d='M124 55l-1-5 40-6 2 10Z'/%3E%3C/g%3E%3C/svg%3E");
  --b-peaks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cg fill='none' stroke='%234391A7' stroke-width='3' stroke-linejoin='round'%3E %3Cpath d='M2 22 L18 8 L26 14 L38 3 L58 22'/%3E%3Cpath d='M10 22 L20 14 L27 19 L38 10 L50 22' stroke-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --b-peaks-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cg fill='none' stroke='%23EFAB45' stroke-width='3' stroke-linejoin='round'%3E %3Cpath d='M2 22 L18 8 L26 14 L38 3 L58 22'/%3E%3Cpath d='M10 22 L20 14 L27 19 L38 10 L50 22' stroke-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --b-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath fill='none' stroke='%234391A7' stroke-opacity='0.35' stroke-width='3' stroke-linecap='round' d='M2 30 C20 30 22 12 36 12 C48 12 48 26 38 26 C31 26 31 18 37 18 M44 30 C62 30 64 12 78 12 C90 12 90 26 80 26 C73 26 73 18 79 18 M86 30 C104 30 106 12 118 12'/%3E%3C/svg%3E");
  --b-wave-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.25' stroke-width='3' stroke-linecap='round' d='M2 30 C20 30 22 12 36 12 C48 12 48 26 38 26 C31 26 31 18 37 18 M44 30 C62 30 64 12 78 12 C90 12 90 26 80 26 C73 26 73 18 79 18 M86 30 C104 30 106 12 118 12'/%3E%3C/svg%3E");
  --b-leaves-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E %3Cpath d='M0 120 C30 60 70 25 120 10 L120 26 C78 40 42 72 18 120 Z'/%3E %3Cpath d='M40 120 C62 82 90 60 120 50 L120 62 C96 72 72 92 56 120 Z'/%3E%3C/g%3E%3C/svg%3E");
  --b-leaves-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='0.16'%3E %3Cpath d='M0 120 C30 60 70 25 120 10 L120 26 C78 40 42 72 18 120 Z'/%3E %3Cpath d='M40 120 C62 82 90 60 120 50 L120 62 C96 72 72 92 56 120 Z'/%3E%3C/g%3E%3C/svg%3E");
  --b-swoosh-flip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cg transform='translate(400 0) scale(-1 1)'%3E %3Cpath fill='%234391A7' d='M60 300 C150 150 260 80 400 40 L400 92 C285 125 190 190 128 300 Z'/%3E %3Cpath fill='%234391A7' d='M170 300 C235 200 310 150 400 124 L400 168 C330 190 270 235 230 300 Z'/%3E %3Cpath fill='%23E2563A' d='M282 300 C320 245 360 215 400 200 L400 250 C375 262 350 280 336 300 Z'/%3E%3C/g%3E%3C/svg%3E");
  --b-tile-r:22px;
}

/* ---------- 4-colour brand bar (as on the medal ribbons) ---------- */
.brand-bar { height:6px; background:linear-gradient(90deg,var(--b-navy) 0 25%,var(--b-teal) 25% 50%,var(--b-coral) 50% 75%,var(--b-gold) 75%); }

/* ---------- LIGHT THEME (default) ---------- */
html[data-theme="light"] body { background:var(--b-paper); }
html[data-theme="light"] .topbar { background:#fff !important; box-shadow:0 1px 0 var(--b-navy-10); }
html[data-theme="light"] .topbar::after { content:""; position:absolute; inset:auto 0 0 0; height:4px;
  background:linear-gradient(90deg,var(--b-navy) 0 25%,var(--b-teal) 25% 50%,var(--b-coral) 50% 75%,var(--b-gold) 75%); pointer-events:none; }
html[data-theme="light"] .brand, html[data-theme="light"] #brandName { color:var(--b-navy) !important; }

/* ---- Homepage hero, light: no overlay — the daylight film sits in a logo-shaped
       tile under the sun crown, the words sit on paper beside it ---- */
.home-hero .hm-video-light { display:none; }
html[data-theme="light"] .home-hero {
  min-height:auto; padding:110px 24px 80px; text-align:start; place-items:stretch;
  background:var(--b-swoosh) no-repeat right -40px bottom -10px / min(520px,60vw) 300px, var(--b-paper);
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center;
  max-width:none;
}
html[dir="rtl"][data-theme="light"] .home-hero { background-position:left -40px bottom -10px, 0 0; }
html[dir="rtl"][data-theme="light"] .home-hero { background-image:var(--b-swoosh-flip, var(--b-swoosh)); }
html[data-theme="light"] .home-hero::before { /* sun-ray tiles, faint, in the top corner */
  content:""; position:absolute; top:70px; inset-inline-end:0; width:min(360px,40vw); height:220px;
  background:var(--b-rays-gold) repeat 0 0 / 64px 64px; -webkit-mask:linear-gradient(to bottom,#000,transparent); mask:linear-gradient(to bottom,#000,transparent);
  pointer-events:none; z-index:0;
}
html[data-theme="light"] .home-hero .hero-overlay,
html[data-theme="light"] .home-hero .hx-slides,
html[data-theme="light"] .home-hero .hm-video-dark { display:none !important; }
html[data-theme="light"] .home-hero .hm-video-light { display:block; }
html[data-theme="light"] .home-hero .hero-media {
  position:relative; inset:auto; order:2; z-index:1; aspect-ratio:4/3.3; width:100%; max-width:640px; justify-self:center;
  border-radius:var(--b-tile-r); overflow:visible; margin-top:46px;
}
html[data-theme="light"] .home-hero .hero-media::before { /* sun crown above the tile */
  content:""; position:absolute; left:50%; top:-50px; width:62%; height:58px; transform:translateX(-50%);
  background:var(--b-crown) no-repeat center bottom / contain; z-index:2;
}
html[data-theme="light"] .home-hero .hero-media video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:var(--b-tile-r);
  border:6px solid #fff; box-shadow:0 0 0 2px var(--b-gold), 0 24px 60px -24px rgba(29,62,86,.45);
}
html[data-theme="light"] .home-hero .hero-media { margin-bottom:22px; }
html[data-theme="light"] .home-hero .hero-media::after { /* the footer's sea-curl waves, running along the bottom border under the film */
  content:""; position:absolute; left:0; right:0; bottom:-18px; height:36px; z-index:3; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath fill='none' stroke='%234391A7' stroke-opacity='0.85' stroke-width='3' stroke-linecap='round' d='M2 30 C20 30 22 12 36 12 C48 12 48 26 38 26 C31 26 31 18 37 18 M44 30 C62 30 64 12 78 12 C90 12 90 26 80 26 C73 26 73 18 79 18 M86 30 C104 30 106 12 118 12'/%3E%3C/svg%3E") repeat-x left center / 108px 36px;
}
html[data-theme="light"] .home-hero .def-hero-in { order:1; margin:0; max-width:620px; justify-self:end; }
html[dir="rtl"][data-theme="light"] .home-hero .def-hero-in { justify-self:start; }
html[data-theme="light"] .home-hero .def-kicker { color:var(--b-teal) !important; background:var(--b-teal-10); border:0;
  display:inline-block; padding:6px 14px; border-radius:999px; font-weight:800; letter-spacing:0; }
html[data-theme="light"] .home-hero h1 { color:var(--b-navy) !important; text-shadow:none; }
html[data-theme="light"] .home-hero h1 b { color:var(--b-coral) !important; }
html[data-theme="light"] .home-hero .def-sub { color:var(--b-navy-70) !important; text-shadow:none; }
html[data-theme="light"] .home-hero .btn-row { justify-content:flex-start !important; }
html[data-theme="light"] .home-hero .def-count { justify-content:flex-start; }
html[data-theme="light"] .home-hero .cd-cell { background:#fff; border:0; border-radius:16px; box-shadow:0 1px 0 var(--b-navy-10), 0 10px 24px -18px rgba(29,62,86,.5); position:relative; overflow:hidden; }
html[data-theme="light"] .home-hero .cd-cell::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--b-teal); }
html[data-theme="light"] .home-hero .cd-cell:nth-child(2)::before { background:var(--b-coral); }
html[data-theme="light"] .home-hero .cd-cell:nth-child(3)::before { background:var(--b-gold); }
html[data-theme="light"] .home-hero .cd-cell:nth-child(4)::before { background:var(--b-navy); }
html[data-theme="light"] .home-hero .cd-num { color:var(--b-navy) !important; }
html[data-theme="light"] .home-hero .cd-lbl { color:var(--b-navy-70) !important; }
@media (max-width: 900px) {
  html[data-theme="light"] .home-hero { grid-template-columns:1fr; padding:92px 16px 64px; text-align:center;
    background-size:min(420px,90vw) 220px, auto; }
  html[data-theme="light"] .home-hero .hero-media { order:1; max-width:520px; margin-top:52px; }
  html[data-theme="light"] .home-hero .def-hero-in { order:2; justify-self:center !important; }
  html[data-theme="light"] .home-hero .btn-row, html[data-theme="light"] .home-hero .def-count { justify-content:center !important; }
}

/* ---------- Two path buttons (hero) — both themes ---------- */
.btn.path-comp, .btn.path-vis { position:relative; overflow:hidden; border-radius:14px !important; padding-inline:22px 26px !important; font-weight:800; }
.btn.path-comp { background:var(--b-navy) !important; color:#fff !important; border:0 !important; }
.btn.path-vis  { background:var(--b-gold) !important; color:var(--b-navy) !important; border:0 !important; }
.btn.path-comp { box-shadow:inset 0 -4px 0 var(--b-teal); } .btn.path-vis { box-shadow:inset 0 -4px 0 var(--b-coral); }
.btn.path-comp:hover { background:#16324a !important; } .btn.path-vis:hover { background:#f2b95e !important; }
.btn .path-ic { display:inline-block; width:22px; height:14px; vertical-align:-1px; margin-inline-end:8px; background:var(--b-peaks-gold) no-repeat center / contain; }
.btn.path-vis .path-ic { background:var(--b-rays-gold) no-repeat center / contain; filter:brightness(.35) saturate(2); width:18px; height:18px; vertical-align:-3px; }

/* ---------- Path heads above the two rails — both themes ---------- */
.path-head { position:relative; overflow:hidden; border-radius:var(--b-tile-r); margin:0 auto 18px; max-width:1200px;
  display:grid; grid-template-columns:auto 1fr 210px auto; gap:18px; align-items:center; padding:22px 26px; color:#fff; }
.path-head .ph-mark { width:58px; height:58px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.12); }
.path-head .ph-mark i { width:36px; height:28px; background:var(--b-peaks-gold) no-repeat center / contain; }
.path-head .ph-k { font-size:.82rem; font-weight:800; letter-spacing:.02em; opacity:.85; display:block; margin-bottom:2px; }
.path-head .ph-t { font-size:clamp(1.25rem,2.6vw,1.75rem); font-weight:900; margin:0; line-height:1.25; color:inherit; }
.path-head .ph-sub { display:block; font-size:.9rem; opacity:.85; margin-top:4px; }
.path-head .ph-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.path-head .ph-chips span { font-size:.78rem; font-weight:700; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.14); }
.path-head .ph-img { position:relative; z-index:1; height:118px; border-radius:16px; border:4px solid rgba(255,255,255,.9); background:#ccc center / cover no-repeat; box-shadow:0 12px 30px -18px rgba(0,0,0,.6); }
.path-head.is-comp .ph-img { background-image:url("../media/portals/path-competitions.webp"); }
.path-head.is-vis .ph-img { background-image:url("../media/portals/path-visitors.webp"); }
.path-head .ph-cta { position:relative; z-index:1; white-space:nowrap; }
.path-head.is-comp { background:var(--b-swoosh) no-repeat right -20px bottom -30px / 280px 190px, var(--b-leaves-navy) repeat 0 0 / 120px 120px, var(--b-navy); }
.path-head.is-vis  { background:var(--b-swoosh) no-repeat right -20px bottom -30px / 280px 190px, var(--b-leaves-gold) repeat 0 0 / 120px 120px, var(--b-gold); color:var(--b-navy); }
html[dir="rtl"] .path-head.is-comp, html[dir="rtl"] .path-head.is-vis { background-image:var(--b-swoosh-flip), var(--b-leaves-navy); background-position:left -20px bottom -30px, 0 0; }
html[dir="rtl"] .path-head.is-vis { background-image:var(--b-swoosh-flip), var(--b-leaves-gold); }
.path-head.is-vis .ph-mark { background:rgba(29,62,86,.1); }
.path-head.is-vis .ph-mark i { background:var(--b-crown) no-repeat center / contain; filter:brightness(.25); }
.path-head.is-vis .ph-chips span { background:rgba(29,62,86,.1); }
.path-head .ph-cta.btn { border-radius:12px !important; font-weight:800; border:0 !important; }
.path-head.is-comp .ph-cta.btn { background:var(--b-teal) !important; color:#fff !important; }
.path-head.is-vis .ph-cta.btn { background:var(--b-navy) !important; color:#fff !important; }
@media (max-width: 1000px) { .path-head { grid-template-columns:auto 1fr 160px auto; } }
@media (max-width: 700px) {
  .path-head { grid-template-columns:auto 1fr; padding:18px; }
  .path-head .ph-img { grid-column:1 / -1; grid-row:1; height:150px; }
  .path-head .ph-cta { grid-column:1 / -1; justify-self:stretch; text-align:center; }
  .path-head .ph-mark { width:46px; height:46px; }
}
.showcase-wrap[id] { scroll-margin-top:84px; }

/* rail cards: rounded logo tiles with the path colour as a ribbon */
.showcase-wrap .sc-item { border-radius:18px !important; }
.showcase-wrap .sc-item .sc-body::after { content:""; position:absolute; inset:auto 0 0 0; height:6px; z-index:3;
  background:linear-gradient(90deg,var(--b-teal) 0 60%,var(--b-coral) 60%); pointer-events:none; }
.showcase-wrap.showcase-act .sc-item .sc-body::after { background:linear-gradient(90deg,var(--b-gold) 0 60%,var(--b-coral) 60%); }
.sc-path { position:absolute; top:12px; inset-inline-start:12px; z-index:3; font-size:.72rem; font-weight:800; padding:4px 10px; border-radius:999px; }
.sc-path.is-comp { background:var(--b-navy); color:#fff; }
.sc-path.is-vis { background:var(--b-gold); color:var(--b-navy); }

/* ---------- Section titles: mountain peaks + brand bar ---------- */
html[data-theme="light"] .cine-head .cine-ey { color:var(--b-navy) !important; }
html[data-theme="light"] .cine-head .cine-sub { color:var(--b-navy-70) !important; }
.cine-head .cine-ey::before { content:""; display:inline-block; width:34px; height:14px; margin-inline-end:10px; vertical-align:middle;
  background:var(--b-peaks) no-repeat center / contain; }
.showcase-act .cine-head .cine-ey::before { background-image:var(--b-peaks-gold); }

/* ---------- Marquee: wristband stripes ---------- */
html[data-theme="light"] .mq { background:repeating-linear-gradient(-55deg,var(--b-navy) 0 26px,#21476a 26px 52px) !important; border:0 !important; }
html[data-theme="light"] .mq span { color:#fff !important; }
html[data-theme="light"] .mq span::after { color:var(--b-gold) !important; }

/* ---------- Edition strip: a white card with the track bands ---------- */
html[data-theme="light"] .edition { background:var(--b-paper) !important; }
html[data-theme="light"] .edition-in { background:#fff var(--b-swoosh) no-repeat right -10px bottom -20px / 220px 150px; border-radius:var(--b-tile-r);
  box-shadow:0 1px 0 var(--b-navy-10), 0 18px 40px -30px rgba(29,62,86,.5); }
html[dir="rtl"][data-theme="light"] .edition-in { background-image:var(--b-swoosh-flip); background-position:left -10px bottom -20px; }
html[data-theme="light"] .edition .yr, html[data-theme="light"] .edition .dd { color:var(--b-navy) !important; }
html[data-theme="light"] .edition .mo { color:var(--b-coral) !important; }
html[data-theme="light"] .edition-rule { background:var(--b-gold) !important; }

/* ---------- Buttons & links in light ---------- */
html[data-theme="light"] .btn.gold { background:var(--b-gold) !important; color:var(--b-navy) !important; }

/* ---------- Footer: navy roll-up with the track bands and the sea curl ---------- */
html[data-theme="light"] .footer { position:relative; overflow:hidden;
  background:var(--b-swoosh) no-repeat right -30px bottom -30px / 360px 240px, var(--b-wave-w) repeat-x left 18px top 18px / 180px 60px, var(--b-navy) !important; color:#fff !important; }
html[dir="rtl"][data-theme="light"] .footer { background-image:var(--b-swoosh-flip), var(--b-wave-w) !important; background-position:left -30px bottom -30px, right 18px top 18px !important; }
html[data-theme="light"] .footer::before { content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg,var(--b-navy) 0 25%,var(--b-teal) 25% 50%,var(--b-coral) 50% 75%,var(--b-gold) 75%); }
html[data-theme="light"] .footer, html[data-theme="light"] .footer * { color:#fff !important; }
html[data-theme="light"] .footer a:hover { color:var(--b-gold) !important; }

/* ---------- Inner-page heroes, light: track bands across the foot ---------- */
html[data-theme="light"] .def-hero:not(.home-hero)::after { content:""; position:absolute; inset:auto 0 -1px 0; height:42px; z-index:3;
  background:linear-gradient(90deg,var(--b-navy) 0 25%,var(--b-teal) 25% 50%,var(--b-coral) 50% 75%,var(--b-gold) 75%) bottom / 100% 6px no-repeat; }

/* ---------- Champ page path badge ---------- */
.path-badge { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.85rem; padding:6px 14px; border-radius:999px; margin-bottom:10px; }
.path-badge.is-comp { background:var(--b-navy); color:#fff; }
.path-badge.is-vis { background:var(--b-gold); color:var(--b-navy); }
.path-badge i { width:20px; height:12px; background:var(--b-peaks-gold) no-repeat center / contain; }
.path-badge.is-vis i { background:var(--b-crown) no-repeat center / contain; filter:brightness(.25); }

.showcase-wrap > .path-head { width:calc(100% - 32px); }
/* ---------- Readable card titles ----------
   The colour stripe used to sit on .sc-item::after, which replaced the dark
   gradient that keeps the white titles legible. The stripe now lives on
   .sc-body::after, and the bright light-mode photos get a deeper scrim. */
.showcase-wrap .sc-item .sc-body { z-index:2; }
html[data-theme="light"] .showcase .sc-item::after {
  background:linear-gradient(180deg, rgba(8,28,44,0) 32%, rgba(8,28,44,.55) 55%, rgba(8,28,44,.86) 78%, rgba(8,28,44,.95) 100%);
}
html[data-theme="light"] .showcase .sc-item .sc-ti,
html[data-theme="light"] .showcase .sc-item .sc-ey,
html[data-theme="light"] .showcase .sc-item .sc-go,
html[data-theme="light"] .showcase .sc-item .sc-num { text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.45); }
html[data-theme="light"] .showcase .sc-item .sc-ti { color:#fff; }