/* Jeppiaar campus workshop, variation B: a black cinematic title and an edge-to-edge photo mosaic. */
.ev,.ev *{box-sizing:border-box;border-radius:0}
:root{--gutter:64px}
@media(max-width:1099px){:root{--gutter:40px}}
@media(max-width:699px){:root{--gutter:20px}}
.ev{background:#fff;color:#181818;font-family:'Roboto Condensed',sans-serif}
.ev img{display:block;width:100%;height:100%;object-fit:cover}
.ev a:focus-visible{outline:3px solid #F3CD29;outline-offset:3px}
.shell{width:min(1180px,100% - 2*var(--gutter));margin-inline:auto}
.ev h1,.ev h2{font-family:'Fjalla One',sans-serif;font-weight:400;margin:0;text-transform:none}

/* Hero: one black canvas from breadcrumb to the last mosaic tile */
.hero{background:#181818;color:#fff;border-top:3px solid #D4AF37}
.hero__copy{padding:24px 0 40px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;font-size:15px;line-height:1.4;color:#E6DFD4}
.crumb a{color:#F3CD29}
.crumb span[aria-hidden]{color:#D4AF37}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.hero__head{grid-column:1/span 9}
.kicker{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 16px;font-size:16px;font-weight:700;line-height:1.4;color:#D4AF37}
.hero h1{color:#fff;font-size:clamp(40px,4.7vw,68px);line-height:1.15;text-wrap:balance}
.lead{grid-column:10/span 3;margin:0;padding-top:16px;border-top:2px solid #D4AF37;font-size:clamp(18px,1.4vw,20px);line-height:1.4;color:#E6DFD4}

/* Edge-to-edge mosaic */
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,3fr) minmax(0,2fr);gap:8px;height:clamp(560px,50vw,900px);padding-bottom:8px}
.tile{display:flex;flex-direction:column;min-height:0;background:#000;color:#fff;text-decoration:none;outline-offset:-3px!important}
.tile__img{display:block;flex:1;min-height:0;overflow:hidden;background:#181818}
.tile__cap{display:block;flex:none;padding:8px 16px;background:#000;font-size:15px;line-height:1.4;color:#E6DFD4;transition:background-color .2s ease,color .2s ease}
.tile:hover .tile__cap{background:#D4AF37;color:#181818}
.m-lead{grid-column:1/span 4;grid-row:1/span 2}
.m-lead img{object-position:40% 25%}
.m-wide{grid-column:5/-1;grid-row:1}
.m-wide img{object-position:50% 90%}
.m-a{grid-column:5/span 4;grid-row:2}
.m-a img{object-position:50% 72%}
.m-b{grid-column:9/-1;grid-row:2}
.m-b img{object-position:40% 45%}

/* Story */
.story{padding:96px 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 24px}
.story__first{grid-column:1/span 6;margin:0;font:400 clamp(26px,2.5vw,36px)/1.3 'Fjalla One',sans-serif;color:#0D5630}
.story__rest{grid-column:8/span 5}
.story__rest p{margin:0 0 24px;font-size:20px;line-height:1.55}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 24px;border:2px solid;font:400 17px/1.25 'Fjalla One',sans-serif;text-decoration:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.btn--gold{background:#D4AF37;border-color:#D4AF37;color:#181818}
.btn--gold:hover{background:#B8860B;border-color:#B8860B;color:#181818}
.btn--line{background:#fff;border-color:#B8860B;color:#0D5630}
.btn--line:hover{background:#F6EFD7;color:#0D5630}

/* Session highlights: Sage Green band with white text */
.themes{background:#426653;color:#fff;padding:64px 0}
.themes h2{color:#fff;font-size:clamp(30px,2.8vw,40px);line-height:1.2}
.themes__intro{margin:8px 0 32px;font-size:19px;line-height:1.5;color:#fff}
.themes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.themes li{padding-top:16px;border-top:3px solid #D4AF37;font:400 clamp(20px,1.7vw,24px)/1.3 'Fjalla One',sans-serif;color:#fff}

/* Remaining photos on black */
.photos{background:#181818;color:#fff;padding:96px 0 0}
.photos h2{color:#fff;font-size:clamp(30px,2.8vw,40px);line-height:1.2}
.photos__hint{margin:8px 0 32px;font-size:17px;line-height:1.5;color:#E6DFD4}
.strip{display:grid;grid-template-columns:3fr 6fr 3fr;gap:8px;margin-bottom:8px;padding:0;list-style:none}
.strip li{display:flex;min-width:0}
.strip .tile{width:100%}
.strip .tile__img{aspect-ratio:auto;flex:1;min-height:clamp(280px,29vw,520px)}
.strip .is-land img{object-position:50% 60%}
.closing{display:flex;max-width:1600px;margin-inline:auto}
.closing .tile{width:100%}
.closing .tile__img{flex:none;aspect-ratio:21/9}
.closing img{object-position:50% 76%}

/* Related stories */
.related{padding:96px 0}
.related h2{color:#000;font-size:clamp(30px,2.8vw,40px);line-height:1.2;margin-bottom:32px}
.related__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:2px solid #181818}
.related__grid a{display:block;padding:24px 24px 24px 0;color:#181818;text-decoration:none;border-bottom:1px solid #D8D4CA;transition:color .2s ease}
.related__grid a+a{padding-left:24px;border-left:1px solid #D8D4CA}
.related small{display:block;margin-bottom:8px;font-size:15px;line-height:1.4;color:#595959}
.related strong{display:block;font:400 26px/1.25 'Fjalla One',sans-serif;color:#0D5630}
.related__grid a:hover strong{color:#57473A}
.related a:focus-visible{outline-color:#B8860B}
.story a:focus-visible{outline-color:#B8860B}

@media(max-width:1099px){
  .hero__head{grid-column:1/-1}
  .lead{grid-column:1/span 9}
  .crumb{margin-bottom:32px}
  .mosaic{height:clamp(560px,86vw,860px)}
  .m-lead{grid-column:1/span 5}
  .m-wide{grid-column:6/-1}
  .m-a{grid-column:6/span 3}
  .m-b{grid-column:9/-1}
  .tile__cap{padding:8px 12px;font-size:14px}
  .story,.related{padding-block:64px}
  .photos{padding-top:64px}
  .story__first,.story__rest{grid-column:1/-1}
  .themes ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:699px){
  .hero__copy{padding:20px 0 32px}
  .lead{grid-column:1/-1}
  .mosaic{display:block;height:auto;padding-bottom:0}
  .mosaic .tile{margin-bottom:8px}
  .mosaic .tile__img{flex:none;aspect-ratio:16/9}
  .mosaic .m-lead .tile__img{aspect-ratio:4/5}
  .story,.related{padding-block:48px}
  .themes{padding:48px 0}
  .photos{padding-top:48px}
  .story__rest p{font-size:18px}
  .themes ul,.related__grid{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:minmax(0,1fr)}
  .strip .tile__img{flex:none;min-height:0;aspect-ratio:4/5}
  .strip .is-land .tile__img{aspect-ratio:4/3}
  .closing .tile__img{aspect-ratio:4/3}
  .related__grid a,.related__grid a+a{padding:20px 0;border-left:0}
  .btn{width:100%;justify-content:center}
}

/* Photo viewer */
html.lb-open{overflow:hidden}
.lb{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:#000;color:#fff}
.lb[open]{display:flex;flex-direction:column}
.lb::backdrop{background:#000}
.lb__bar,.lb__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gutter);flex:none}
.lb__foot{align-items:flex-start;flex-wrap:wrap;padding-bottom:16px}
.lb__stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--gutter)}
.lb__img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb__count{margin:0;font-size:14px;line-height:1.4;color:#E6DFD4}
.lb__cap{margin:0;flex:1 1 280px;font-size:17px;line-height:1.4;color:#fff}
.lb__nav{display:flex;gap:8px}
.lb__btn{min-height:44px;padding:8px 16px;background:#000;border:2px solid #D4AF37;color:#fff;font:400 16px/1.2 'Fjalla One',sans-serif;cursor:pointer}
.lb__btn:hover{background:#D4AF37;color:#181818}
.lb__btn:focus-visible{outline:3px solid #F3CD29;outline-offset:3px}
