/* Base reset */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #121212;
  background: ##FFE94D;
  line-height: 1.35;
}



/* Layout: three panels (content / spine / image) */
.layout {
  display: grid;
  grid-template-columns: 1fr 64px minmax(40%, 1fr);
  min-height: 100vh;
}

/* Panels */
.panel {
  display: flex;
}

.panel--left {
  background: #FFE156; /* punchy yellow close to mockup */
  padding: 5%; /* equal padding on all four sides */
  align-items: stretch;
}

.panel--spine {
  background: #FFE156;
  border-left: 1px solid rgba(0,0,0,.2);
  border-right: 1px solid rgba(0,0,0,.2);
  justify-content: center;
  align-items: left;
}

.panel--image {
  background: #ddd;
}

.panel--image img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
}


/* Vertical nav text */
.panel--spine ul {
  display: flex;
  list-style: none;
  margin: 50% 0 0 0 ;
  padding: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
  font-weight: 600;
}
.panel--spine a {
  color: #111;
  text-decoration: none;
}
.panel--spine li + li { 
	margin-top: 2rem; 
}

/* Content area */
.content {
  max-width: 100%;
  margin: 0;
  display: grid;
  gap: clamp(16px, 3.2vw, 28px);
}

.lede {
  font-size: clamp(18px, 1.5vw, 48px);
  margin: 0;
}

.presented, .dates, .exhibitors { 
   margin: 0; 
   font-size: clamp(18px, 1.5vw, 48px);
}
.presented .strong,
.dates .strong,
.exhibitors .strong,
.strong { 
   font-weight: 700; 
   font-size: clamp(18px, 1.5vw, 48px);
}

hr {
  border: none;
  border-top: 2px solid rgba(0, 0, 0, 0.6);
  margin: clamp(8px, 2vw, 16px) 0;
}

/* Links styled with underline like the mockup */
.inline-link {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.inline-link:hover { opacity: .8; }

.names {
  font-size: clamp(18px, 1.5vw, 48px);
}


/* Responsive: stack on small screens */
@media (max-width: 960px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .panel--spine {
    display: none;
  }
  .panel--image img {
    height: 56vh;
  }
  .content {
    max-width: 680px;
  }
}