
/* ZUUL FX PARALLEL / SELECTED WORKS V1.11
   Legacy-safe: no JS, content always visible. */
body.parallel-v111 { background:#030303; color:#f2f2f2; }
body.parallel-v111 .container { max-width:1320px; }

.parallel-hero {
  position:relative;
  min-height:560px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  border-bottom:1px solid #242424;
  background:#050505;
}
.parallel-hero:before {
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  background:
    linear-gradient(120deg, rgba(165,10,10,.16), rgba(0,0,0,0) 38%),
    url('../img/about-band.jpg') center 42% / cover no-repeat;
  opacity:.16;
}
.parallel-hero:after {
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  background:linear-gradient(to right, rgba(0,0,0,.97) 0%, rgba(0,0,0,.84) 50%, rgba(0,0,0,.74) 100%);
}
.parallel-hero .container {
  position:relative;
  z-index:2;
  padding-bottom:66px;
}
.parallel-hero .kicker {
  color:#d71313;
  font-size:12px;
  font-weight:bold;
  letter-spacing:3px;
  text-transform:uppercase;
}
.parallel-hero h1 {
  margin:8px 0 0;
  max-width:980px;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  font-size:86px;
  line-height:.91;
  text-transform:uppercase;
}
.parallel-hero h1 span { color:#e01414; }
.parallel-hero p {
  max-width:830px;
  color:#c2c2c2;
  font-size:18px;
  line-height:1.65;
  margin:20px 0 0;
}
.parallel-tags {
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
}
.parallel-tags span {
  margin:0 8px 8px 0;
  padding:8px 10px;
  border:1px solid #343434;
  background:#090909;
  color:#b9b9b9;
  font-size:10px;
  font-weight:bold;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.works-section {
  position:relative;
  overflow:hidden;
  padding:88px 0 94px;
  border-bottom:1px solid #242424;
}
.works-section .container { position:relative; z-index:2; }

.works-section--music { background:#080606; }
.works-section--music:before {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:url('../img/music-bg-demo.jpg') center 34% / cover no-repeat;
  opacity:.075;
}
.works-section--music:after {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:rgba(3,3,3,.84);
}

.works-section--cinema { background:#060606; }
.works-section--cinema:before {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:url('../img/archive-glass.jpg') center / cover no-repeat;
  opacity:.07;
}
.works-section--cinema:after {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:linear-gradient(to bottom, rgba(4,4,4,.80), rgba(4,4,4,.92));
}

.works-section--science { background:#031012; }
.works-section--science:before {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:url('../img/hplus-bg-01.png') right center / cover no-repeat;
  opacity:.13;
}
.works-section--science:after {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:linear-gradient(to right, rgba(2,6,7,.96), rgba(2,6,7,.85));
}

.works-section--stage { background:#070707; }
.works-section--stage:before {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:url('../img/bio-portrait-band.png') center 30% / cover no-repeat;
  opacity:.035;
}
.works-section--stage:after {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:rgba(3,3,3,.91);
}

.works-section--heritage {
  background:
    radial-gradient(circle at 80% 20%, rgba(135,91,22,.13), rgba(0,0,0,0) 30%),
    linear-gradient(to bottom, #080705, #030303);
}
.works-section--heritage:before {
  content:"";
  position:absolute;
  right:-120px; top:-100px;
  width:520px; height:520px;
  border:1px solid rgba(179,130,51,.12);
  transform:rotate(45deg);
}
.works-section--heritage:after {
  content:"";
  position:absolute;
  left:0; bottom:0; right:0;
  height:120px;
  background:linear-gradient(to top, rgba(84,45,10,.08), rgba(0,0,0,0));
}

.works-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:36px;
  margin-bottom:40px;
}
.works-head h2 {
  margin:0;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  font-size:68px;
  line-height:.94;
  text-transform:uppercase;
}
.works-head h2 span { color:#df1111; }
.works-head p {
  max-width:560px;
  margin:0;
  color:#a9a9a9;
  font-size:15px;
  line-height:1.65;
}

.work-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}
.work-card {
  position:relative;
  overflow:hidden;
  min-height:275px;
  border:1px solid #292929;
  background:rgba(7,7,7,.83);
  padding:28px 29px 30px;
}
.work-card:before {
  content:"";
  position:absolute;
  left:0; top:0; width:3px; height:100%;
  background:#a70d0d;
  opacity:.85;
}
.work-card .year {
  color:#d81313;
  font-size:11px;
  font-weight:bold;
  letter-spacing:1.7px;
  text-transform:uppercase;
}
.work-card h3 {
  margin:7px 0 8px;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  font-size:38px;
  line-height:1;
  text-transform:uppercase;
}
.work-card .role {
  color:#e0e0e0;
  font-size:11px;
  font-weight:bold;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.work-card p {
  color:#aaa;
  font-size:14px;
  line-height:1.65;
  margin:15px 0 0;
}
.work-card .credits {
  margin-top:16px;
  color:#777;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.work-card .credits strong { color:#aaa; }

.work-card--hero {
  grid-column:span 2;
  min-height:330px;
  display:grid;
  grid-template-columns:210px 1fr;
  gap:34px;
  align-items:center;
}
.work-card--hero .stamp {
  width:176px;
  height:176px;
  border:1px solid #333;
  background:#080808 url('../img/symbol-zuulfx.png') center / 68% no-repeat;
  opacity:.92;
}
.work-card--hero h3 { font-size:51px; }

.project-pills {
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
}
.project-pills span {
  margin:0 7px 7px 0;
  padding:6px 8px;
  border:1px solid #303030;
  background:#0b0b0b;
  color:#a8a8a8;
  font-size:10px;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.film-strip {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:22px;
}
.film-mini {
  min-height:160px;
  padding:20px;
  border:1px solid #282828;
  background:rgba(8,8,8,.82);
}
.film-mini strong {
  display:block;
  font-family:Impact, Arial, sans-serif;
  font-size:24px;
  line-height:1.05;
  text-transform:uppercase;
}
.film-mini span {
  display:block;
  margin-top:8px;
  color:#c81515;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.film-mini p {
  color:#8e8e8e;
  font-size:12px;
  line-height:1.55;
  margin:11px 0 0;
}

.stage-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.stage-card {
  min-height:220px;
  padding:22px;
  border:1px solid #292929;
  background:rgba(8,8,8,.82);
}
.stage-card h3 {
  margin:0;
  font-family:Impact, Arial, sans-serif;
  font-size:30px;
  line-height:1;
  text-transform:uppercase;
}
.stage-card .org {
  margin-top:8px;
  color:#d01212;
  font-size:10px;
  font-weight:bold;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.stage-card p {
  color:#989898;
  font-size:12px;
  line-height:1.6;
  margin:14px 0 0;
}

.heritage-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}
.heritage-card {
  min-height:205px;
  padding:24px;
  border:1px solid #352d21;
  background:rgba(8,7,5,.80);
}
.heritage-card h3 {
  margin:0;
  font-family:Impact, Arial, sans-serif;
  font-size:31px;
  line-height:1;
  text-transform:uppercase;
}
.heritage-card .type {
  margin-top:8px;
  color:#b98b45;
  font-size:10px;
  font-weight:bold;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.heritage-card p {
  color:#a69a88;
  font-size:13px;
  line-height:1.62;
}

.selected-note {
  margin-top:34px;
  padding:18px 21px;
  border-left:2px solid #a80d0d;
  background:rgba(10,7,7,.82);
  color:#979797;
  font-size:12px;
  line-height:1.6;
}

@media screen and (max-width:1050px) {
  .parallel-hero h1 { font-size:72px; }
  .stage-grid { grid-template-columns:repeat(2, 1fr); }
  .film-strip { grid-template-columns:repeat(2, 1fr); }
}
@media screen and (max-width:820px) {
  .parallel-hero { min-height:470px; }
  .parallel-hero h1 { font-size:58px; }
  .works-head { display:block; }
  .works-head p { margin-top:17px; }
  .work-grid { grid-template-columns:1fr; }
  .work-card--hero { grid-column:span 1; grid-template-columns:1fr; }
  .work-card--hero .stamp { width:130px; height:130px; }
  .heritage-grid { grid-template-columns:1fr; }
}
@media screen and (max-width:560px) {
  .parallel-hero h1 { font-size:46px; }
  .works-section { padding:66px 0 72px; }
  .works-head h2 { font-size:48px; }
  .work-card { padding:24px 22px; }
  .work-card h3 { font-size:32px; }
  .work-card--hero h3 { font-size:40px; }
  .stage-grid, .film-strip { grid-template-columns:1fr; }
}


/* V1.13 — supplied archive visuals */
.project-visuals {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:9px;
  margin:20px 0 4px;
}
.project-visuals--3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.project-visual {
  position:relative;
  overflow:hidden;
  height:0;
  padding-top:100%;
  border:1px solid #303030;
  background:#050505;
}
.project-visual img {
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.project-visual span {
  position:absolute;
  left:0; right:0; bottom:0;
  padding:8px 9px;
  background:rgba(0,0,0,.78);
  color:#d7d7d7;
  font-size:9px;
  font-weight:bold;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.work-card--music-visual {
  display:grid;
  grid-template-columns:minmax(250px, 42%) 1fr;
  gap:28px;
  align-items:center;
}
.work-card--music-visual .project-visuals { margin:0; }
.work-card--music-visual .project-copy { min-width:0; }
.work-card--music-visual.single-cover {
  grid-template-columns:minmax(220px, 34%) 1fr;
}
.work-card--music-visual.single-cover .project-visuals {
  grid-template-columns:1fr;
  max-width:330px;
}
.parallel-note {
  margin-top:13px;
  color:#777;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.65px;
  text-transform:uppercase;
}
.parallel-note strong { color:#aaa; }

@media screen and (max-width:820px) {
  .work-card--music-visual,
  .work-card--music-visual.single-cover {
    grid-template-columns:1fr;
  }
  .work-card--music-visual.single-cover .project-visuals { max-width:100%; }
}
@media screen and (max-width:520px) {
  .project-visuals--3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}


/* V1.14 — external press/archive visual preview
   Remote images are used for layout validation before local authorised masters. */

.ext-visual {
  position:relative;
  overflow:hidden;
  border:1px solid #303030;
  background:#070707;
}
.ext-visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ext-credit {
  margin-top:7px;
  color:#6f6f6f;
  font-size:9px;
  line-height:1.45;
  letter-spacing:.45px;
}
.ext-credit a { color:#898989; text-decoration:none; }
.ext-credit a:hover { color:#d31313; }

.work-card--with-external {
  display:grid;
  grid-template-columns:minmax(210px, 34%) 1fr;
  gap:30px;
  align-items:center;
}
.work-card--with-external .ext-visual {
  height:0;
  padding-top:100%;
}
.work-card--with-external .ext-visual img {
  position:absolute;
  left:0; top:0;
}

.work-card--cinema-feature {
  grid-template-columns:minmax(220px, 31%) 1fr;
}
.work-card--cinema-feature .ext-visual {
  padding-top:142%;
}

.work-card--science-feature {
  grid-template-columns:minmax(290px, 46%) 1fr;
}
.work-card--science-feature .ext-visual {
  height:270px;
  padding-top:0;
}

.film-mini {
  overflow:hidden;
  padding:0 0 20px;
}
.film-mini .mini-poster {
  height:250px;
  overflow:hidden;
  margin-bottom:18px;
  background:#0a0a0a;
  border-bottom:1px solid #282828;
}
.film-mini .mini-poster img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.film-mini > strong,
.film-mini > span,
.film-mini > p,
.film-mini > .ext-credit {
  margin-left:20px;
  margin-right:20px;
}
.film-mini > strong { margin-top:0; }

.stage-card {
  padding:0 0 22px;
  overflow:hidden;
}
.stage-card .stage-visual {
  height:245px;
  overflow:hidden;
  background:#050505;
  border-bottom:1px solid #292929;
}
.stage-card .stage-visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.stage-card h3,
.stage-card .org,
.stage-card p,
.stage-card .ext-credit {
  margin-left:22px;
  margin-right:22px;
}
.stage-card h3 { margin-top:21px; }

.heritage-card {
  padding:0 0 24px;
  overflow:hidden;
}
.heritage-card .heritage-visual {
  height:220px;
  overflow:hidden;
  background:#080706;
  border-bottom:1px solid #352d21;
  display:flex;
  align-items:center;
  justify-content:center;
}
.heritage-card .heritage-visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.heritage-card .heritage-visual--logo img {
  width:72%;
  height:72%;
  object-fit:contain;
}
.heritage-card h3,
.heritage-card .type,
.heritage-card p,
.heritage-card .ext-credit {
  margin-left:24px;
  margin-right:24px;
}
.heritage-card h3 { margin-top:22px; }

.external-preview-note {
  margin-top:28px;
  padding:16px 18px;
  border:1px solid #2b2b2b;
  background:#070707;
  color:#7e7e7e;
  font-size:10px;
  line-height:1.6;
}
.external-preview-note strong { color:#aaa; }

@media screen and (max-width:900px) {
  .work-card--with-external,
  .work-card--cinema-feature,
  .work-card--science-feature {
    grid-template-columns:1fr;
  }
  .work-card--cinema-feature .ext-visual {
    padding-top:62%;
  }
  .work-card--science-feature .ext-visual {
    height:300px;
  }
}
@media screen and (max-width:560px) {
  .film-mini .mini-poster { height:330px; }
  .stage-card .stage-visual { height:310px; }
  .heritage-card .heritage-visual { height:230px; }
  .work-card--science-feature .ext-visual { height:230px; }
}


/* V1.16 — larger showcase cards for SKÁLD and 7734 */
.work-card--span-2 {
  grid-column: span 2;
}
.work-card--showcase {
  display:grid;
  grid-template-columns:minmax(360px, 43%) 1fr;
  gap:32px;
  align-items:center;
}
.work-card--showcase .project-visuals {
  margin:0;
}
.work-card--showcase .project-visual {
  padding-top:112%;
}
.work-card--showcase .project-copy,
.work-card--showcase > div:last-child {
  min-width:0;
}
.work-card--showcase .project-copy h3,
.work-card--showcase > div:last-child h3 {
  font-size:44px;
}
@media screen and (max-width:820px) {
  .work-card--span-2 {
    grid-column:span 1;
  }
  .work-card--showcase {
    grid-template-columns:1fr;
  }
}


/* V1.18 — CMBV supplied logo */
.heritage-card .heritage-visual--logo {
  background:#ffffff;
}
.heritage-card .heritage-visual--logo img {
  width:88%;
  height:82%;
  object-fit:contain;
}


/* V1.46 — PARALLEL readability */
.parallel-hero .kicker {
  font-size:14px;
}
.work-card .year,
.work-card .role {
  font-size:12px;
}
.work-card p {
  font-size:16px;
  line-height:1.72;
}
.work-card .credits {
  font-size:12px;
}
.film-mini span,
.stage-card .org,
.heritage-card .type {
  font-size:12px;
}
.film-mini p,
.stage-card p,
.heritage-card p {
  font-size:15px;
  line-height:1.68;
}
.selected-note {
  font-size:14px;
}
.parallel-note,
.ext-credit {
  font-size:11px;
}
