/* IMG Network — Concept 02 / Integrated graphic identity */
:root {
  --yellow: #fff000;
  --black: #111110;
  --white: #fff;
  --line: #dededb;
  --sans: 'Alegreya Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Alegreya', Georgia, serif;
  --gutter: clamp(22px, 5vw, 78px);
}
*, *::before, *::after {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0; background: var(--white); color: var(--black); font-family: var(--sans); -webkit-font-smoothing: antialiased;}
a {color: inherit;}
a:focus-visible {outline: 3px solid var(--yellow); outline-offset: 4px;}
.skip-link {position: absolute; left: 18px; top: -100px; z-index: 99; padding: 12px 16px; background: var(--yellow); color: var(--black); font-size: 16px;}
.skip-link:focus {top: 8px;}
.page-shell {max-width: 1920px; margin: 0 auto; overflow: hidden;}
.site-header {min-height: 93px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line);}
.brand {font-family: 'Roboto', Arial, sans-serif; display: inline-flex; align-items: baseline; font-size: 34px; line-height: 1; letter-spacing: -.065em; font-weight: 300; text-decoration: none; white-space: nowrap;}
.brand strong {font-weight: 700;}
.brand i {width: 9px; height: 9px; margin-left: 3px; background: var(--yellow); display: block; align-self: flex-start; font-style: normal; transform: translateY(2px);}
.site-header nav {display: flex; align-items: center; gap: clamp(20px, 3.5vw, 62px);}
.site-header nav a {font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;}
.site-header nav a:hover, .site-footer a:hover {text-decoration: underline; text-underline-offset: 4px;}
.nav-index {font-size: 11px; letter-spacing: .1em; font-weight: 500; margin-right: 6px; color: #777;}

.hero {display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); min-height: 745px; border-bottom: 1px solid var(--line);}
.hero-copy {display: flex; flex-direction: column; padding: clamp(58px, 6vw, 98px) 24px 48px var(--gutter); min-width: 0;}
.hero-eyebrow {display: flex; align-items: center; gap: 13px; margin: 0 0 clamp(50px, 6vw, 94px); font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.25;}
.tiny-square {display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; background: var(--yellow);}
.hero h1 {margin: 0; font-size: clamp(76px, 9.2vw, 156px); line-height: .85; font-weight: 500; letter-spacing: -.077em;}
.title-stop {color: #e6d600;}
.hero-bottom {display: grid; grid-template-columns: minmax(80px, 160px) minmax(0, 380px); gap: 20px; align-items: end; margin-top: auto; padding-top: 68px;}
.hero-serial {font-size: 12px; letter-spacing: .12em; line-height: 1.1; font-weight: 700;}
.hero-bottom p {font-size: clamp(19px, 1.8vw, 27px); font-weight: 400; line-height: 1.19; max-width: 450px; margin: 0; letter-spacing: -.02em;}
.hero-pattern {position: relative; min-height: 610px; border-left: 1px solid var(--line); background: #fff url('../assets/img-pattern.png') center center / cover no-repeat;}
.pattern-label {position: absolute; left: 25px; bottom: 38px; right: 25px; display: flex; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 800; letter-spacing: .12em;}
.pattern-corner {position: absolute; top: 0; right: 0; width: 12px; height: 85px; background: var(--yellow);}

.programmes {padding: 105px var(--gutter) 100px;}
.section-heading {display: grid; grid-template-columns: minmax(170px,.55fr) minmax(300px,1.65fr) minmax(200px, .8fr); gap: 26px; align-items: end; margin-bottom: 50px;}
.section-index {align-self: start; font-size: 12px; font-weight: 700; letter-spacing: .13em;}
.section-heading h2 {margin: 0; font-size: clamp(45px, 4.9vw, 80px); font-weight: 500; letter-spacing: -.064em; line-height: .92;}
.section-heading em {font-family: var(--serif); font-size: .78em; font-weight: 400; letter-spacing: -.05em;}
.section-heading p {font-size: 18px; line-height: 1.35; margin: 0 0 5px; max-width: 260px;}
.projects {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
.project {min-height: 566px; padding: clamp(30px, 3.2vw, 50px); display: flex; flex-direction: column;}
.project-conference {background: var(--yellow); color: var(--black);}
.project-journal {background: var(--black); color: var(--white);}
.project-top {display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid currentColor; padding-bottom: 15px; font-size: 12px; font-weight: 800; letter-spacing: .14em;}
.project-body {padding: clamp(60px, 7vw, 110px) 0 45px;}
.project h3 {font-family: 'Roboto', Arial, sans-serif; font-size: clamp(44px, 5.3vw, 91px); margin: 0 0 37px; letter-spacing: -.074em; font-weight: 700; line-height: .95; white-space: nowrap;}
.project h3 span {font-weight: 300;}
.project h3 b {font-weight: 500;}
.project-journal h3 b {color: var(--yellow);}
.project p {font-size: clamp(20px, 1.65vw, 26px); max-width: 520px; margin: 0; line-height: 1.27; font-weight: 400; letter-spacing: -.01em;}
.project-cta {border-top: 1px solid currentColor; text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0 0; margin-top: auto; font-size: 19px; line-height: 1.3; font-weight: 700;}
.project-cta .link-arrow, .coming-back .link-arrow {display: block; flex: 0 0 28px; width: 28px; height: 28px; transition: transform .15s ease;}
.project-cta:hover .link-arrow, .coming-back:hover .link-arrow {transform: translate(3px,-3px);}
.site-footer {padding: 25px var(--gutter) 34px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 25px; font-size: 14px;}
.footer-left {display: flex; align-items: center; gap: 12px; font-weight: 700;}
.footer-mark {width: 10px; height: 10px; background: var(--yellow);}
.site-footer a {text-decoration: none; font-weight: 700;}

.conference-shell {min-height: 100svh; display: flex; flex-direction: column;}
.conference-coming {flex: 1; min-height: 720px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);}
.coming-content {display: flex; flex-direction: column; justify-content: center; padding: 74px var(--gutter) 80px;}
.coming-content .hero-eyebrow {margin-bottom: 60px;}
.coming-kicker {font-family: 'Roboto', Arial, sans-serif; font-size: clamp(26px, 3.5vw, 45px); letter-spacing: -.06em; margin: 0 0 30px; font-weight: 700;}
.coming-kicker span {font-weight: 300;}
.coming-content h1 {font-size: clamp(90px, 12vw, 180px); line-height: .75; letter-spacing: -.07em; font-weight: 500; margin: 0 0 65px;}
.coming-content h1 em {font-family: var(--serif); font-weight: 400; font-size: .87em; letter-spacing: -.04em;}
.coming-description {font-size: clamp(20px, 2.4vw, 29px); max-width: 490px; line-height: 1.25; margin: 0 0 56px;}
.coming-back {display: flex; justify-content: space-between; gap: 15px; width: min(490px, 100%); border-top: 1px solid #222; padding: 14px 0; font-size: 20px; font-weight: 700; text-decoration: none;}
.coming-pattern {background: #fff url('../assets/img-pattern.png') center/cover no-repeat; border-left: 1px solid var(--line);}

@media (max-width: 1250px) {
  .hero {grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); min-height: 685px;}
  .hero h1 {font-size: clamp(70px, 9vw, 120px);}
  .hero-eyebrow {margin-bottom: 70px;}
  .section-heading {grid-template-columns: 175px minmax(340px, 1fr);}
  .section-heading p {grid-column: 2; max-width: 500px;}
  .project h3 {font-size: clamp(42px, 5vw, 72px);}
}
@media (max-width: 810px) {
  .site-header {min-height: 78px;}
  .brand {font-size: 31px;}
  .hero {grid-template-columns: minmax(0, 1fr); min-height: 0;}
  .hero-copy {min-height: 580px; padding: 55px var(--gutter) 55px;}
  .hero h1 {font-size: clamp(64px, 13vw, 110px);}
  .hero-eyebrow {margin-bottom: 55px;}
  .hero-bottom {margin-top: 60px; padding-top: 0;}
  .hero-pattern {min-height: 200px; border-left: 0; border-top: 1px solid var(--line); background-size: 100% auto; background-position: center 45%;}
  .pattern-label {bottom: 17px;}
  .programmes {padding-top: 73px; padding-bottom: 80px;}
  .section-heading {grid-template-columns: 1fr; gap: 23px; margin-bottom: 36px;}
  .section-heading p {grid-column: auto;}
  .projects {grid-template-columns: 1fr;}
  .project {min-height: 440px;}
  .project-body {padding: 64px 0 50px;}
  .project h3 {font-size: clamp(50px, 9vw, 83px);}
  .project p {max-width: 580px;}
  .conference-coming {grid-template-columns: 1fr;}
  .coming-pattern {min-height: 190px; border-left: 0; border-top: 1px solid var(--line); background-size: 100% auto;}
  .coming-content {min-height: 620px;}
}
@media (max-width: 540px) {
  .site-header {min-height: 76px; gap: 12px;}
  .brand {font-size: 29px;}
  .site-header nav {gap: 15px;}
  .site-header nav a {font-size: 14px;}
  .nav-index {display: none;}
  .hero-copy {min-height: 0; padding-top: 50px; padding-bottom: 45px;}
  .hero-eyebrow {font-size: 10px; margin-bottom: 58px;}
  .hero h1 {font-size: clamp(62px, 15.3vw, 92px); letter-spacing: -.077em;}
  .hero-bottom {grid-template-columns: 73px 1fr; gap: 18px; margin-top: 76px;}
  .hero-serial {font-size: 10px;}
  .hero-bottom p {font-size: 20px;}
  .hero-pattern {min-height: 170px;}
  .programmes {padding-top: 59px; padding-bottom: 58px;}
  .section-heading h2 {font-size: clamp(47px, 11vw, 62px);}
  .section-heading p {font-size: 18px;}
  .project {min-height: 465px; padding: 29px 26px 33px;}
  .project-top {font-size: 10px;}
  .project-body {padding: 67px 0 48px;}
  .project h3 {font-size: clamp(46px, 11vw, 61px); margin-bottom: 31px;}
  .project p {font-size: 20px;}
  .project-cta {font-size: 19px;}
  .site-footer {font-size: 12px; flex-wrap: wrap;}
  .site-footer > span {order: 3; width: 100%;}
  .coming-content {min-height: 590px; padding-top: 60px;}
  .coming-content .hero-eyebrow {margin-bottom: 57px;}
  .coming-content h1 {font-size: clamp(78px, 17vw, 113px); margin-bottom: 57px;}
  .coming-kicker {font-size: 35px;}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  .project-cta .link-arrow, .coming-back .link-arrow {transition: none;}
}

/* ---- Concept 02 / typographic hero, network identity strip ---- */
.hero {display: block; min-height: auto;}
.hero-copy {min-height: 708px; padding: clamp(54px,6.2vw,98px) var(--gutter) 49px;}
.hero-eyebrow {margin-bottom: clamp(43px,5.3vw,77px);}
.hero h1 {max-width: 1260px; font-size: clamp(84px, 11.2vw, 183px); line-height: .84; letter-spacing: -.078em;}
.hero-bottom {display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-top: 62px; margin-top: auto;}
.hero-bottom p {width: min(100%,490px); font-size: clamp(20px,1.65vw,27px);}
.hero-serial {align-self: end;}
.network-band {position: relative; isolation: isolate; background: var(--yellow); overflow: hidden; padding: 24px var(--gutter) 60px;}
.network-band::before {content: ''; position:absolute; z-index: -1; inset: 0; pointer-events:none; background: url('../assets/img-pattern-white-on-yellow.png') 0 42% / 560px auto repeat; opacity: .88;}
.network-band-meta {display:flex; justify-content: space-between; gap: 20px; font-size: 11px; font-weight: 800; letter-spacing: .14em; padding-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,.5);}
.network-band-content {display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px,.65fr); gap: 60px; align-items: end; padding-top: 46px;}
.network-band h2 {margin:0; font-size: clamp(60px, 6.2vw, 108px); font-weight: 500; letter-spacing: -.068em; line-height: .86;}
.network-band h2 em {font-family: var(--serif); font-size: .77em; font-weight: 400; letter-spacing: -.045em;}
.network-band p {font-size: clamp(19px,1.6vw,25px); max-width: 350px; line-height:1.2; margin: 0 0 5px; background: var(--yellow); box-shadow: 9px 0 var(--yellow), -9px 0 var(--yellow);}
.programmes {padding-top: 28px;}
.programmes-meta {display:flex; justify-content:space-between; gap:16px; margin-bottom:43px; font-size: 11px; font-weight:800; letter-spacing:.14em;}
.coming-pattern {background: var(--yellow) url('../assets/img-pattern-white-on-yellow.png') center / 570px auto repeat; position:relative; border-left:1px solid var(--yellow);}
.coming-pattern-caption {position:absolute; bottom: 27px; left: 30px; color:var(--black); font-weight:800; font-size:12px; letter-spacing:.14em; padding:4px 7px; background:var(--yellow);}
.coming-content h1 em {text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .11em; text-underline-offset: .09em;}
@media (max-width: 1250px) {
 .hero h1 {font-size: clamp(75px,10.3vw,142px);}
}
@media (max-width: 810px) {
 .hero-copy {min-height:620px; padding:55px var(--gutter) 53px;}
 .hero h1 {font-size: clamp(72px,12.2vw,110px);}
 .network-band {padding:25px var(--gutter) 46px;}
 .network-band-content {grid-template-columns:1fr; gap:24px; padding-top:35px;}
 .network-band p {font-size:21px; max-width:430px;}
 .coming-pattern {background-size: 560px auto;}
}
@media (max-width: 540px) {
 .hero-copy {min-height:0; padding-top:54px; padding-bottom:37px;}
 .hero h1 {font-size:clamp(58px,15vw,90px);}
 .hero-eyebrow {margin-bottom:70px;}
 .hero-bottom {padding-top:70px; gap:18px; align-items: start;}
 .hero-bottom p {max-width:235px; font-size:20px;}
 .network-band {padding-bottom:42px;}
 .network-band-meta,.programmes-meta {font-size:10px;}
 .network-band-meta span:last-child {display:none;}
 .network-band-content {gap:28px; padding-top:41px;}
 .network-band h2 {font-size:clamp(51px,11vw,73px);}
 .network-band p {font-size:20px;}
 .programmes {padding-top:24px;}
 .programmes-meta {margin-bottom:29px;}
 .coming-pattern {min-height:210px; background-size:470px auto;}
}