/* =========================================================
   FADA — Kesişimler / Intersections
   Shared stylesheet for all 4 pages (index, history, artists, about)
   ========================================================= */

:root {
  --color-bg: #0a0a0a;
  --color-accent: #fbaf1d;
  --color-accent-2: #fdba20;
  --color-accent-soft: rgba(251, 175, 29, 0.35);
  --color-white: #ffffff;
  --color-text-muted: #999999;
  --color-text-dim: #777777;
  --color-text-dimmer: #666666;
  --color-card-bg: rgba(0, 0, 0, 0.5);

  --font-body: "Rethink Sans", "Helvetica Neue", Arial, sans-serif;
  --font-italic: "Spectral", Georgia, serif;
  /* Stand-ins for Avenir Next / Avenir Next Condensed — not freely licensable.
     See README for how to swap in the real typeface if you have a license. */
  --font-condensed: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-condensed-black: "Anton", "Arial Narrow", sans-serif;

  --content-max: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.accent { color: var(--color-accent); }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow--center { text-align: center; }

.venue-date {
  font-family: var(--font-condensed);
  font-weight: 600;
  line-height: 1.35;
}
.venue-date__venue { display: block; font-size: 20px; letter-spacing: -0.01em; }
.venue-date__date { display: block; font-size: 20px; font-weight: 400; }

.btn {
  display: inline-block;
  width: fit-content;
  padding: 13px 28px;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn--primary { background: var(--color-accent); color: #0a0a0a; }
.btn--primary:hover { background: #ffc242; }
.btn--primary:active { transform: scale(0.98); }

/* --------------------------------------------------------
   Header / Navigation (shared across all 4 pages)
   -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 26px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.main-nav ul { display: flex; gap: 39px; }
.main-nav a {
  font-size: 13px;
  color: #666;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--color-white); }
.main-nav a[aria-current="page"] { color: var(--color-accent-2); }

/* --------------------------------------------------------
   Hero (index.html)
   -------------------------------------------------------- */
.hero {
  display: grid;
  /* Figma: 512px copy column at the 64px gutter, 670px visual starting at x=733 */
  grid-template-columns: minmax(320px, 512px) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(40px, 11vw, 157px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px var(--gutter) 72px;
}
/* Vertical rhythm comes from per-element margins, not a single flex gap —
   the hero is deliberately unevenly spaced (see Figma node 209:1140). */
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hero__logo {
  width: 191px;
  height: auto;
  margin-bottom: clamp(56px, 13vw, 179px);
}
.hero__eyebrow.venue-date { color: rgba(255, 255, 255, 0.9); margin-bottom: 24px; }
.hero__eyebrow .venue-date__date { color: rgba(255, 255, 255, 0.6); }
.hero__wordmark { line-height: 0; width: 100%; margin-bottom: 55px; }
.hero__wordmark img { width: min(100%, 447px); height: auto; }
.hero__cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero__tagline {
  flex: 0 1 272px;
  max-width: 272px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 15px;
  line-height: 1.43;
  color: var(--color-text-muted);
}
.hero__cta-row .btn { flex-shrink: 0; }
.hero__visual {
  overflow: hidden;
  background: var(--color-bg);
  aspect-ratio: 670 / 625;
  margin-top: 7px; /* Figma: visual sits 7px below the copy column's top edge */
}
.hero__visual img, .hero__visual video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------
   Partner / logo strip (index.html)
   -------------------------------------------------------- */
.partner-strip {
  position: relative;
  display: block;
  width: min(1440px, 100vw);
  height: 100px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}
.partner-strip__logo { position: absolute; width: auto; max-width: none; object-fit: contain; }
/* Exact desktop positions and rendered sizes from Figma node 48:989. */
.partner-strip__logo--bilkent {
  left: 8.333333%; top: 10px;
  width: 112.272px; height: 81px;
}
.partner-strip__logo--fada {
  left: 33.125%; top: 13px;
  width: 58px; height: 76px;
}
.partner-strip__logo--cermodern {
  left: 54.166667%; top: 44px;
  width: 128.497px; height: 13.799px;
}
.partner-strip__sponsor {
  position: absolute;
  left: 79.930556%; top: 1px;
  width: 95px; height: 88px;
  margin: 0;
}
.partner-strip__sponsor figcaption {
  position: absolute; inset: 0 auto auto 0;
  width: 95px;
  font-size: 10px; line-height: 15px; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); text-align: center; white-space: nowrap;
}
.partner-strip__logo--golden {
  left: 7px; top: 23px;
  width: 78px; height: 65px;
}

/* --------------------------------------------------------
   Timeline / History block (shared shape used on index.html)
   -------------------------------------------------------- */
.timeline { padding: 96px var(--gutter); max-width: 1200px; margin: 0 auto; }
.timeline__intro { text-align: center; margin-bottom: 72px; }
.timeline__heading {
  margin-top: 12px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.timeline__list { position: relative; display: flex; flex-direction: column; gap: 72px; }
.timeline__list::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--color-accent-soft);
  transform: translateX(-50%);
}
.timeline-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.timeline-item::before {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent);
  transform: translateX(-50%);
}
.timeline-item--right .timeline-item__copy { text-align: right; grid-column: 1; }
.timeline-item--right .timeline-item__media { grid-column: 2; }
.timeline-item--left .timeline-item__copy { text-align: left; grid-column: 2; }
.timeline-item--left .timeline-item__media { grid-column: 1; }
.timeline-item--text-only.timeline-item--right .timeline-item__copy { grid-column: 1; }
.timeline-item--text-only.timeline-item--left .timeline-item__copy { grid-column: 2; }
.timeline-item__year { font-size: 12px; letter-spacing: 0.12em; color: var(--color-accent); margin-bottom: 10px; }
.timeline-item__title { font-weight: 400; font-size: clamp(20px, 2.6vw, 32px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.timeline-item__text { font-size: 15px; line-height: 1.65; color: var(--color-text-dim); max-width: 42ch; }
.timeline-item--right .timeline-item__text { margin-left: auto; }
.timeline-item__media img { width: 100%; height: auto; object-fit: cover; }
.timeline-item__media figcaption {
  margin-top: 10px; font-size: 11px; font-style: italic; color: rgba(255, 255, 255, 0.55);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.timeline-item__media figcaption .cap-text { flex: 1; }
.timeline-item__media .credit {
  font-style: normal; letter-spacing: 0.04em; color: var(--color-accent); font-size: 11px;
  white-space: nowrap;
}
.timeline-item--today { padding-top: 24px; }
.timeline-item--today .timeline-item__lockup { grid-column: 1; text-align: left; }
.timeline-item--today .timeline-item__lockup-heading { font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 18px; }
.timeline-item--today .timeline-item__wordmark { width: min(420px, 100%); }
.timeline-item--today .timeline-item__copy { grid-column: 2; text-align: left; }
.timeline-item--today .timeline-item__text { margin-left: 0; }

/* --------------------------------------------------------
   "For More Information" band (index.html)
   -------------------------------------------------------- */
.info-band {
  background: var(--color-accent);
  color: #0a0a0a;
  padding: 64px var(--gutter);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.info-band h2 { font-size: clamp(26px, 3.4vw, 37px); font-weight: 400; letter-spacing: -0.02em; }
.info-band__contact {
  text-align: right;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.7);
  letter-spacing: -0.01em;
}
.info-band__contact p:first-child { color: rgba(10, 10, 10, 0.85); }

/* --------------------------------------------------------
   Featured artists (index.html) — name tiles over a backdrop photo
   -------------------------------------------------------- */
.featured { position: relative; padding: 96px var(--gutter); overflow: hidden; }
.featured__backdrop { position: absolute; inset: 0; z-index: 0; }
.featured__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.featured__content { position: relative; z-index: 1; max-width: 620px; margin: 0 0 56px auto; }
.featured__heading { font-size: clamp(28px, 3.4vw, 37px); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 24px; }
.featured__intro { font-size: 15px; line-height: 1.65; color: #c6c6c6; max-width: 48ch; }
.featured__intro p + p { margin-top: 1em; }

.name-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
}
.name-tile {
  background: var(--color-card-bg);
  height: 96px;
  display: flex;
  align-items: center;
  padding: 0 28px;
}
.name-tile a {
  font-weight: 500;
  font-size: 22px;
  color: var(--color-accent-2);
  letter-spacing: -0.02em;
}
.name-tile a:hover { text-decoration: underline; }

/* --------------------------------------------------------
   History page top block (moved from history.html <style>)
   -------------------------------------------------------- */
.history-top {
  max-width: 1200px; margin: 0 auto; padding: 48px var(--gutter) 32px;
  display: grid; grid-template-columns: 380px 1fr; gap: 48px;
}
.history-top__label {
  text-align: right; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); margin-bottom: 24px;
}

/* --------------------------------------------------------
   Big display heading (history.html)
   -------------------------------------------------------- */
.mega-heading {
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.mega-heading .accent { font-family: var(--font-condensed-black); font-weight: 400; }

/* --------------------------------------------------------
   Long-form article blocks (history.html, about.html)
   -------------------------------------------------------- */
.article-block { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.article-block__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-accent);
  max-width: 100%;
}
.article-block__lede + .article-block__lede { color: var(--color-white); margin-top: 1.5em; }
.article-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-white);
  max-width: 68ch;
}
.article-body + .article-body { margin-top: 1.5em; }
.article-body--muted { color: var(--color-text-dim); }
.article-body--accent { color: var(--color-accent); }

.photo-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; margin: 48px auto; max-width: 1200px; padding: 0 var(--gutter); align-items: start; }
.photo-row img { width: 100%; height: auto; object-fit: cover; }
.photo-caption { margin-top: 10px; font-size: 12px; letter-spacing: 0.06em; color: var(--color-accent); }

/* Two photos side-by-side at their natural aspect ratio, sharing a common height */
.photo-duo { display: flex; gap: 24px; margin: 48px auto; max-width: 1200px; padding: 0 var(--gutter); flex-wrap: nowrap; }
.photo-duo img { height: clamp(160px, 26vw, 380px); width: auto; min-width: 0; flex-shrink: 1; object-fit: cover; }

/* Text column + image column, image kept at native aspect ratio (no crop) */
.photo-pair { display: grid; gap: 40px; margin: 48px auto; max-width: 1200px; padding: 0 var(--gutter); align-items: start; }
.photo-pair img { width: 100%; height: auto; object-fit: cover; }
.photo-pair .article-body { max-width: 100%; }
.photo-pair .article-body + .article-body { margin-top: 1.5em; }

.photo-wide { max-width: 1200px; margin: 48px auto; padding: 0 var(--gutter); }
.photo-wide img { width: 100%; height: auto; object-fit: cover; }

.divider {
  max-width: 1200px;
  margin: 64px auto;
  padding: 0 var(--gutter);
}
.divider hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.15); }

/* --------------------------------------------------------
   Artists tab
   -------------------------------------------------------- */
.artists-hero { max-width: 1200px; margin: 0 auto; padding: 72px var(--gutter) 48px; }
.artists-hero h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 400; letter-spacing: -0.02em; color: var(--color-accent); margin-bottom: 20px; }
.artists-hero p { font-size: 16px; line-height: 1.6; color: var(--color-text-muted); max-width: 68ch; }

.artwork-grid {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start;
}
.artwork { display: flex; flex-direction: column; gap: 16px; }
.artwork img { height: clamp(260px, 34vw, 460px); width: auto; max-width: 100%; object-fit: cover; }
.artwork__name { font-size: 20px; font-weight: 500; }
.artwork__title { font-family: var(--font-italic); font-style: italic; color: var(--color-text-muted); font-size: 15px; }
.artwork__meta { font-size: 14px; color: var(--color-text-dim); }

.contributor-row {
  max-width: 1200px; margin: 72px auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.contributor-row a { color: var(--color-white); font-size: 18px; font-weight: 500; }
.contributor-row a:hover { color: var(--color-accent); }

.collaborators { max-width: 1200px; margin: 120px auto 96px; padding: 0 var(--gutter); }
.collaborators h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-style: italic;
  font-family: var(--font-italic);
  color: var(--color-accent);
  margin-bottom: 48px;
}
.collaborators h2 strong { font-family: var(--font-body); font-style: normal; font-weight: 700; }
.collaborator-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 32px;
}
.collaborator-columns ul { display: flex; flex-direction: column; }
.collaborator-columns li {
  padding: 8px 0;
  border-bottom: 1px solid #1a1a1a;
  color: var(--color-text-dim);
  font-size: 15px;
}

/* --------------------------------------------------------
   About tab
   -------------------------------------------------------- */
.about-hero { max-width: 1440px; margin: 0 auto; padding: 0; }
.about-hero img { width: 100%; height: auto; display: block; }
.about-hero__stack { display: none; }

.pull-quote-wrap { max-width: 1200px; margin: 48px auto; padding: 0 var(--gutter); display: flex; justify-content: flex-end; }
.pull-quote {
  max-width: 780px;
  font-family: var(--font-italic); font-style: italic;
  font-size: clamp(18px, 2vw, 24px); line-height: 1.5;
  color: var(--color-accent);
}
.dean-note { max-width: 1200px; margin: 0 auto 24px; padding: 0 var(--gutter); font-style: italic; color: var(--color-white); font-size: 18px; line-height: 1.45; }

.info-lines { max-width: 1200px; margin: 32px auto 0; padding: 0 var(--gutter); font-size: 18px; line-height: 1.6; color: var(--color-accent-2); }
.info-lines p { margin: 0; }

.more-info-link { max-width: 1200px; margin: 32px auto; padding: 0 var(--gutter); font-size: 18px; }
.more-info-link a { text-decoration: underline; }

/* --------------------------------------------------------
   Footer
   -------------------------------------------------------- */
.site-footer { padding: 32px var(--gutter); text-align: center; font-size: 12px; color: var(--color-text-dimmer); border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* =========================================================
   RESPONSIVE — tablet & mobile
   Desktop (1024px and up) is the Figma 1440 design and is untouched.
   Tablet  : 700px – 1023px  (designed at 768 / 834)
   Mobile  : up to 699px     (designed at 390 / 375)
   ========================================================= */

/* ---------------------------------------------------------
   TABLET + MOBILE (shared, up to 1023px)
   --------------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --gutter: 40px; }

  /* Hero: logo + date on the left, square video on the right,
     wordmark and CTA running full width underneath */
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "logo  visual"
      "venue visual"
      "word  word"
      "cta   cta";
    column-gap: 32px;
    row-gap: 0;
    padding-top: 40px;
    padding-bottom: 64px;
  }
  .hero__content { display: contents; }
  .hero__logo { grid-area: logo; margin-bottom: 32px; }
  .hero__eyebrow.venue-date { grid-area: venue; align-self: end; margin-bottom: 0; }
  .hero__wordmark { grid-area: word; margin: 40px 0 36px; }
  .hero__wordmark img { width: min(100%, 447px); }
  .hero__cta-row { grid-area: cta; }
  .hero__visual { grid-area: visual; margin-top: 0; aspect-ratio: 1 / 1; }

  /* Partner strip: all four logos stay in one row, evenly spaced */
  .partner-strip {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 32px var(--gutter) 56px;
  }
  .partner-strip__logo { position: static; width: auto; max-width: 100%; }
  .partner-strip__sponsor {
    position: static;
    width: auto; height: auto;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .partner-strip__sponsor figcaption {
    position: static;
    width: auto;
  }
  .partner-strip__logo--bilkent,
  .partner-strip__logo--fada { height: 56px; }
  .partner-strip__logo--cermodern { height: 20px; }
  .partner-strip__logo--golden { height: 52px; }

  /* Timeline: keeps the alternating centre-line layout */
  .timeline { padding: 72px var(--gutter); }
  .timeline__intro { margin-bottom: 56px; }
  .timeline__list { gap: 64px; }
  .timeline-item { gap: 40px; }
  .timeline-item__title { font-size: 22px; }
  .timeline-item__text { font-size: 14px; }
  .timeline-item__media { margin: 0; }
  .timeline-item__media figcaption { flex-direction: column; gap: 4px; }

  /* Info band keeps heading-left / contact-right */
  .info-band { padding: 56px var(--gutter); flex-wrap: nowrap; }

  /* Featured artists: photo sits at the top at its natural ratio,
     text stays in the right-hand (faded) half, tiles below */
  .featured { padding: 72px var(--gutter); }
  .featured__backdrop { bottom: auto; }
  .featured__backdrop img {
    height: auto;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
            mask-image: linear-gradient(#000 70%, transparent);
  }
  .featured__content { max-width: 52%; margin-bottom: 48px; }
  .featured__intro { font-size: 14px; }
  .name-grid { gap: 12px; max-width: none; }
  .name-tile { height: 80px; padding: 0 18px; }
  .name-tile a { font-size: 18px; }

  /* History page */
  .history-top { grid-template-columns: 1fr; gap: 32px; }
  .history-top__label { text-align: left; }
  .photo-duo, .photo-pair, .photo-wide { margin: 40px auto; }
  .photo-duo { gap: 16px; }
  /* the two photos share one height: each grows by its own width/height ratio */
  .photo-duo img { height: auto; width: 0; min-width: 0; }
  .photo-duo img:nth-child(1) { flex: 1.198 1 0; }
  .photo-duo img:nth-child(2) { flex: 2.073 1 0; }
  .photo-pair { gap: 28px; }
  .divider { margin: 48px auto; }

  /* Artists page */
  .artists-hero { padding: 56px var(--gutter) 40px; }
  .artwork-grid { flex-wrap: wrap; gap: 32px; }
  .artwork img { height: clamp(260px, 40vw, 400px); }
  .contributor-row { margin-top: 56px; gap: 16px; }
  .contributor-row a { font-size: 16px; }
  .collaborators { margin: 96px auto 72px; }
  .collaborators h2 { margin-bottom: 32px; }
  /* one alphabetical list that flows down the columns */
  .collaborator-columns { display: block; columns: 3; column-gap: 32px; }
  .collaborator-columns ul { display: contents; }
  .collaborator-columns li { break-inside: avoid; }

  /* About page */
  .about-hero + .article-block--first { margin-top: 88px !important; }
  .pull-quote-wrap { margin: 40px auto; }
  .pull-quote { max-width: 88%; }
}

/* ---------------------------------------------------------
   MOBILE (up to 699px)
   --------------------------------------------------------- */
@media (max-width: 699px) {
  :root { --gutter: 20px; }

  /* Header: compact single row — Back to FADA + the four links */
  .site-header__inner { padding: 18px var(--gutter); gap: 12px; }
  .main-nav ul { gap: 14px; }
  .main-nav a {
    min-height: 44px;
    font-size: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 0;
  }
  .site-header__inner { padding-top: 10px; padding-bottom: 10px; }

  /* Hero: stacked — logo, date, wordmark, tagline, CTA, then the video */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "logo" "venue" "word" "cta" "visual";
    padding-top: 32px;
    padding-bottom: 48px;
  }
  .hero__logo { width: 150px; margin-bottom: 48px; }
  .hero__eyebrow.venue-date { align-self: start; }
  .venue-date__venue, .venue-date__date { font-size: 18px; }
  .hero__wordmark { margin: 20px 0 28px; }
  .hero__cta-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero__tagline { flex-basis: auto; }
  .hero__visual { margin-top: 40px; }

  /* Partner strip: 2 × 2 */
  .partner-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    row-gap: 36px;
    column-gap: 16px;
    padding: 24px var(--gutter) 48px;
  }
  .partner-strip__logo--bilkent,
  .partner-strip__logo--fada,
  .partner-strip__logo--cermodern { justify-self: center; }
  .partner-strip__logo--bilkent,
  .partner-strip__logo--fada { height: 60px; }
  .partner-strip__logo--cermodern { height: auto; width: min(100%, 150px); }
  .partner-strip__logo--golden { height: 56px; }

  /* Timeline: single column, line on the left, text before image */
  .timeline { padding: 56px var(--gutter); }
  .timeline__intro { margin-bottom: 40px; }
  .timeline__heading { font-size: 30px; }
  .timeline__list { gap: 48px; }
  .timeline__list::before { left: 5px; transform: none; }
  .timeline-item { grid-template-columns: 1fr; gap: 20px; padding-left: 32px; }
  .timeline-item::before { left: 0; transform: none; top: 5px; }
  .timeline .timeline-item .timeline-item__copy { grid-column: 1; text-align: left; order: 0; }
  .timeline .timeline-item .timeline-item__media { grid-column: 1; order: 1; }
  .timeline .timeline-item .timeline-item__text { margin-left: 0; max-width: none; }
  .timeline-item__title { font-size: 24px; }
  .timeline-item--today { padding-top: 8px; }
  .timeline .timeline-item--today .timeline-item__lockup { grid-column: 1; order: 0; }
  .timeline-item--today .timeline-item__lockup-heading { font-size: 28px; margin-bottom: 12px; }
  .timeline-item--today .timeline-item__wordmark { width: min(100%, 300px); }
  .timeline .timeline-item--today .timeline-item__copy { order: 1; }

  /* Info band: stacked */
  .info-band { flex-direction: column; gap: 20px; padding: 48px var(--gutter); }
  .info-band h2 { font-size: 28px; }
  .info-band__contact { text-align: left; }

  /* Featured artists: photo on top (bleeds edge to edge), text, 2-col tiles */
  .featured { padding: 0 var(--gutter) 56px; }
  .featured__backdrop {
    position: relative;
    inset: auto;
    margin: 0 calc(var(--gutter) * -1);
    aspect-ratio: 4 / 3;
  }
  .featured__backdrop img {
    height: 100%;
    object-fit: cover;
    object-position: left top;
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
            mask-image: linear-gradient(#000 55%, transparent);
  }
  .featured__content { max-width: none; margin: -24px 0 36px; }
  .featured__heading { font-size: 30px; margin-bottom: 16px; }
  .featured__intro { font-size: 15px; }
  .name-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .name-tile { height: 72px; padding: 0 14px; background: rgba(255, 255, 255, 0.06); }
  .name-tile a { font-size: 16px; line-height: 1.2; }

  /* History page */
  .history-top { padding-top: 32px; gap: 28px; }
  .mega-heading { font-size: 72px; }
  .article-block__lede, .article-body { font-size: 15px; }
  .photo-duo, .photo-pair, .photo-wide { margin: 32px auto; }
  .photo-duo { gap: 8px; }
  .photo-pair { grid-template-columns: 1fr !important; gap: 24px; }
  .divider { margin: 40px auto; }

  /* Artists page */
  .artists-hero { padding: 40px var(--gutter) 32px; }
  .artists-hero h1 { font-size: 30px; margin-bottom: 16px; }
  .artists-hero p { font-size: 15px; }
  .artwork-grid { flex-direction: column; gap: 40px; }
  .artwork { width: 100%; }
  .artwork img { width: 100%; height: auto; }
  .contributor-row { grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 48px; }
  .collaborators { margin: 72px auto 56px; }
  .collaborators h2 { font-size: 28px; margin-bottom: 24px; }
  .collaborator-columns { columns: 2; column-gap: 16px; }
  .collaborator-columns li { font-size: 13px; padding: 7px 0; }

  /* About page: banner is re-composed from the same image, stacked */
  .about-hero__full { display: none !important; }
  .about-hero__stack { display: block; padding: 24px var(--gutter) 20px; background: #000; }
  .about-hero__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .about-crop { display: block; background-image: url("assets/16x9.png"); background-repeat: no-repeat; }
  .about-crop--brand { width: 58%; aspect-ratio: 640 / 334; background-size: 412.5% auto; background-position: 3.5% 20.245%; }
  .about-crop--date  { width: 25.4%; aspect-ratio: 280 / 190; background-size: 942.857% auto; background-position: 97.458% 14.894%; }
  .about-crop--title { position: relative; width: calc(100% + var(--gutter) * 2); margin: 12px calc(var(--gutter) * -1) 4px; aspect-ratio: 1616 / 660; background-size: 163.366% auto; background-position: 68.359% 0; }
  /* hides the edge of the Bilkent logo that falls inside this crop (it is shown in the logos crop below) */
  .about-crop--title::after { content: ""; position: absolute; right: 0; bottom: 0; width: 7%; height: 25%; background: #000; }
  .about-crop--logos { width: 32.6%; margin-left: auto; aspect-ratio: 360 / 100; background-size: 733.333% auto; background-position: 97.149% 92.857%; }
  .about-hero + .article-block--first { margin-top: 48px !important; }
  .article-block .venue-date { margin-bottom: 20px !important; }
  .dean-note { font-size: 16px; }
  .pull-quote-wrap { margin: 32px auto; }
  .pull-quote { max-width: none; font-size: 19px; }
  .info-lines { font-size: 16px; }
  .more-info-link { font-size: 16px; overflow-wrap: anywhere; }

  .site-footer { padding: 28px var(--gutter); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* --------------------------------------------------------
   TABLET HERO FIX (2026-09-16) — hero section only.
   Between 700px and 1279px the hero keeps the desktop
   composition, scaled down: copy on the left, square video
   on the right. The logo lines up with the top of the video
   and the CTA lines up with its bottom.
   Delete this block to go back to the previous tablet layout.
   -------------------------------------------------------- */
@media (min-width: 700px) and (max-width: 1279px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto;
    grid-template-areas: "copy visual";
    column-gap: clamp(28px, 4vw, 56px);
    align-items: stretch;
  }
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-area: copy;
    min-width: 0;
  }
  .hero__logo { width: clamp(140px, 17vw, 191px); margin-bottom: 32px; }
  .hero__eyebrow.venue-date { margin-top: auto; margin-bottom: 16px; align-self: auto; }
  .hero__wordmark { margin: 0 0 clamp(24px, 3.5vw, 40px); }
  .hero__wordmark img { width: min(100%, 447px); }
  .hero__cta-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__tagline { flex-basis: auto; }
  .hero__visual {
    grid-area: visual;
    margin-top: 0;
    aspect-ratio: 1 / 1;
    align-self: stretch;
    max-width: 100%;
  }
}