/* Shared navigation and interaction layer for the complete ABC-ARTE demo. */
.abc-menu-toggle,
.abc-mobile-panel { display: none; }

:root {
  --abc-ink: #0a0a0a;
  --abc-paper: #fff;
  --abc-blue: #1556ff;
  --abc-yellow: #ffd500;
  --abc-red: #ee252c;
  --abc-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --abc-serif: "Source Serif 4", Georgia, serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--abc-sans); text-rendering: optimizeLegibility; }
body > header { background: var(--abc-paper); color: var(--abc-ink); }
body > header nav { letter-spacing: -.018em; }
body > footer, .master-footer { font-family: var(--abc-sans); }

/* Institutional design system: fewer visual effects, stronger hierarchy. */
.abc-institutional { --abc-page-gutter: clamp(16px, 2.35vw, 34px); }
.abc-institutional h1,
.abc-institutional h2,
.abc-institutional h3 { text-wrap: balance; }
.abc-institutional h1 { font-family: var(--abc-sans) !important; font-weight: 750 !important; letter-spacing: -.055em !important; }
.abc-institutional p { text-wrap: pretty; }
.abc-institutional :is(.kicker, .eyebrow, .section-label, .label, .tag, .head h2, .other-head h2) {
  font-family: var(--abc-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .105em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}
.abc-institutional :is(.intro, .lede, .subtitle, .subhead, .artists-statement) {
  font-family: var(--abc-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -.025em !important;
}
.abc-institutional :is(button, .button, .btn, .cta, .loadmore) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.abc-institutional :is(.cover, .media, .image, .card-image, .feature-image, .hero-img, .program-img) img {
  display: block;
  width: 100%;
}

/* Index pages share one calm museum rhythm. */
@media (min-width: 901px) {
  .abc-page-exhibitions :is(.title, .hero),
  .abc-page-fairs :is(.title, .hero),
  .abc-page-publications :is(.title, .hero),
  .abc-page-news :is(.title, .hero),
  .abc-page-about :is(.title, .hero) { border-bottom-width: 2px !important; }
  .abc-page-exhibitions :is(.section, section),
  .abc-page-fairs :is(.section, section),
  .abc-page-publications :is(.section, section),
  .abc-page-news :is(.section, section) { scroll-margin-top: 88px; }
}

/* Detail pages use the same editorial navigation and section cadence. */
.abc-institutional :is(.tabs, .subnav, .anchor-nav) {
  scrollbar-width: none;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.abc-institutional :is(.tabs, .subnav, .anchor-nav)::-webkit-scrollbar { display: none; }
.abc-institutional :is(.tabs, .subnav, .anchor-nav) a {
  font-family: var(--abc-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 5px !important;
}
.abc-page-artist-detail :is(.section, .works, .overview),
.abc-page-artist-works :is(.works, .more),
.abc-page-artist-biography :is(.bio-hero, .extended, .bibliography, .collections),
.abc-page-exhibition-detail :is(.text, .installation-grid, .works),
.abc-page-fair-detail :is(.overview, .works, .more-install),
.abc-page-publication-detail :is(.description, .details, .related) {
  scroll-margin-top: 88px;
}
.abc-institutional :is(.loadmore, .loadmore-major, .load, .rooms-load, .editorial-load, .more button) {
  min-height: 54px !important;
  border: 0 !important;
  border-top: 2px solid #111 !important;
  border-bottom: 2px solid #111 !important;
  background: #fff !important;
  color: #111 !important;
  font-family: var(--abc-sans) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: .02em !important;
}
.abc-institutional :is(.loadmore, .loadmore-major, .load, .rooms-load, .editorial-load, .more button):hover { background: #111 !important; color: #fff !important; }
.abc-page-fair-detail :is(.loadmore-blue, .loadmore-yellow) { background: #1556ff !important; color: #fff !important; }
.abc-page-fair-detail #install-grid { background: #fff !important; }
.abc-page-fair-detail #moreInstall { display: contents !important; background: #fff !important; }
.abc-page-artist-works :is(.work-img, .work),
.abc-page-exhibition-detail :is(.work-visual, .work),
.abc-page-publications .cover,
.abc-page-publication-detail .real-cover { background: #fff !important; }
.abc-page-artist-works .work-img img,
.abc-page-exhibition-detail .work-visual img,
.abc-page-publications .cover img,
.abc-page-publication-detail .real-cover img { object-fit: contain !important; }
.abc-page-about .statement { padding-top: clamp(76px, 10vw, 150px) !important; padding-bottom: clamp(76px, 10vw, 150px) !important; }
.abc-page-about .locations,
.abc-page-contact .locations { background: #fff !important; }

/* Commerce and utility pages remain deliberately quieter than programme pages. */
.abc-page-utility :is(input, textarea, select),
.abc-page-contact :is(input, textarea, select) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.abc-page-utility :is(.submit, .pay-button, button[type="submit"]),
.abc-page-contact :is(.submit, button[type="submit"]) {
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--abc-sans) !important;
  font-weight: 750 !important;
}

.abc-canonical-header {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  display: grid !important;
  grid-template-columns: 238px minmax(650px, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  height: 88px !important;
  padding: 13px 24px !important;
  border: 0 !important;
  border-bottom: 2px solid var(--abc-ink) !important;
  font-family: var(--abc-sans) !important;
}
.abc-canonical-header .logo { display: block !important; width: 238px !important; margin: 0 !important; }
.abc-canonical-header .logo img { display: block !important; width: 238px !important; height: auto !important; max-width: none !important; }
.abc-canonical-header > nav { display: flex !important; justify-content: center !important; align-items: center !important; gap: clamp(14px, 1.35vw, 24px) !important; margin: 0 !important; font-size: clamp(13px, 1vw, 16px) !important; font-weight: 700 !important; white-space: nowrap; }
.abc-canonical-header > nav a { padding: 14px 0 !important; text-decoration: none !important; }
.abc-canonical-header > nav a.active { text-decoration: none !important; }
.abc-header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 19px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.abc-header-tools a { text-decoration: none; }
.abc-header-tools button { appearance: none; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; }

.abc-institutional-footer { display: grid !important; grid-template-columns: 1fr 1.25fr 1fr !important; gap: 28px !important; padding: 28px 24px 42px !important; border: 0 !important; border-top: 2px solid #111 !important; background: #fff !important; color: #111 !important; font-family: var(--abc-sans) !important; font-size: 16px !important; line-height: 1.45 !important; }
.abc-institutional-footer a { color: inherit !important; text-decoration: none !important; }
.abc-institutional-footer a:hover { text-decoration: underline !important; text-underline-offset: 3px !important; }
.abc-footer-identity, .abc-footer-social { display: flex; flex-direction: column; align-items: flex-start; }
.abc-footer-identity strong { font-size: 18px; }
.abc-institutional-footer > nav { display: grid; grid-template-columns: repeat(2, max-content); align-content: start; gap: 5px 34px; }
.abc-footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px 30px; margin-top: 20px; padding-top: 17px; border-top: 2px solid #111; font-size: 16px; font-weight: 750; }
.abc-footer-legal a { text-decoration: underline !important; text-underline-offset: 3px !important; }

.abc-has-video { position: relative; background: #111; }
.abc-has-video > img { position: absolute; inset: 0; z-index: 0; }
.abc-autoplay-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #111;
}

a[href], button, summary { cursor: pointer; }
.abc-page-news :is(.feature, .card, .media-strip > div) { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #175cff;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .abc-canonical-header { display: flex !important; height: 76px !important; padding: 10px 16px !important; gap: 8px !important; }
  .abc-canonical-header .logo { width: auto !important; min-width: 0 !important; }
  .abc-canonical-header .logo img { width: 190px !important; max-width: 48vw !important; }
  .abc-canonical-header > nav, .abc-header-tools, .abc-desktop-panel { display: none !important; }
  body > header nav,
  body > header .mobile-nav,
  body > header .hamburger { display: none !important; }
  body > header #menuToggle { display: none !important; }
  body > header .util,
  body > header .utility,
  body > header .utils { display: none !important; }

  body > header { position: sticky; top: 0; z-index: 1000; }

  .abc-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
  }

  .abc-menu-toggle span,
  .abc-menu-toggle span::before,
  .abc-menu-toggle span::after {
    display: block;
    width: 27px;
    height: 2px;
    background: currentColor;
    content: "";
    transition: transform .2s ease, opacity .2s ease;
  }
  .abc-menu-toggle span { position: relative; }
  .abc-menu-toggle span::before { position: absolute; top: -8px; }
  .abc-menu-toggle span::after { position: absolute; top: 8px; }
  .abc-menu-toggle[aria-expanded="true"] span { background: transparent; }
  .abc-menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .abc-menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

  .abc-mobile-panel {
    position: fixed;
    inset: var(--abc-header-height, 86px) 0 0;
    z-index: 999;
    padding: 12px 18px 30px;
    overflow-y: auto;
    background: #fff;
    border-top: 2px solid #111;
  }
  .abc-mobile-panel.open { display: flex; flex-direction: column; }
  .abc-mobile-panel a {
    display: block;
    padding: 12px 2px;
    border-bottom: 1px solid #111;
    font-size: clamp(27px, 9vw, 42px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    text-decoration: none;
  }
  .abc-mobile-languages {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 22px 2px 2px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
  }
  .abc-mobile-languages button {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 3px 0;
    color: inherit;
    font: inherit;
  }
  .abc-mobile-languages button[aria-pressed="true"] {
    border-bottom-color: currentColor;
  }
  body.abc-menu-open { overflow: hidden; }

  .abc-institutional-footer { grid-template-columns: 1fr !important; gap: 24px !important; padding: 24px 16px 34px !important; }
  .abc-institutional-footer > nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; }
  .abc-footer-legal { grid-column: 1 !important; gap: 11px 22px; }

}

/* Approved Home editorial scale.
   The site-wide monumental-title pass must not turn Home section labels or the
   artists ticker into page titles. Keep these values aligned with the approved
   Home prototype while retaining monumental typography on inner pages. */
body.abc-home .section > .head > h2 {
  font-family: var(--abc-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

body.abc-home .artist-marquee .artist-name {
  font-size: clamp(34px, 4.8vw, 78px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

@media (max-width: 700px) {
  body.abc-home .section > .head > h2 {
    font-size: 12px !important;
  }

  body.abc-home .artist-marquee .artist-name {
    font-size: 36px !important;
  }
}

/* Institutional Consistency Pass — one visual grammar across programme pages. */
.abc-institutional {
  --black: var(--abc-ink) !important;
  --white: var(--abc-paper) !important;
  --red: var(--abc-red) !important;
  --blue: var(--abc-blue) !important;
  --yellow: var(--abc-yellow) !important;
  --p: var(--abc-red) !important;
  --pink: var(--abc-red) !important;
  --g: var(--abc-paper) !important;
  --grey: var(--abc-paper) !important;
  --beige: var(--abc-paper) !important;
  background: var(--abc-paper) !important;
  color: var(--abc-ink) !important;
}
.abc-institutional main { overflow: clip; }
.abc-institutional :is(h1, .monumental-title) {
  font-family: var(--abc-sans) !important;
  font-weight: 750 !important;
  font-style: normal !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1 !important;
  letter-spacing: -.045em !important;
  line-height: .86 !important;
}
.abc-institutional :is(h2, h3, .artist-index__item, .archive-row, .ex h2, .pub h2) {
  font-family: var(--abc-sans) !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1 !important;
}
.abc-institutional :is(.intro, .lede, .subtitle, .subhead, .artists-statement, .artists-opening__statement, .section-subtitle, .page-subtitle) {
  font-family: var(--abc-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: .005em !important;
  line-height: 1.24 !important;
}
.abc-institutional :is(.title, .hero, .page-title) { border-radius: 0 !important; box-shadow: none !important; }
.abc-institutional :is(.filters, .tabs, .subnav, .anchor-nav) {
  display: flex;
  align-items: center;
  gap: clamp(17px, 2.2vw, 34px);
  overflow-x: auto;
  background: var(--abc-paper) !important;
  color: var(--abc-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.abc-institutional :is(.filters, .tabs, .subnav, .anchor-nav) :is(a, button) {
  min-height: 46px;
  padding: 13px 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: inherit !important;
  font: 700 13px/1 var(--abc-sans) !important;
  letter-spacing: .02em !important;
  white-space: nowrap;
}
.abc-institutional :is(.filters, .tabs, .subnav, .anchor-nav) :is(.active, .on, [aria-current="page"]) { border-bottom-color: var(--abc-ink) !important; }
.abc-institutional :is(.card-image, .feature-image, .hero-img, .program-img, .current-img, .forthcoming-img, .fair-image, .news-image) {
  overflow: hidden;
  padding: 0 !important;
  background: var(--abc-paper) !important;
}
.abc-institutional :is(.card-image, .feature-image, .hero-img, .program-img, .current-img, .forthcoming-img, .fair-image, .news-image) img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
}
.abc-institutional :is(.work-img, .work-visual, .real-cover, .cover) { background: var(--abc-paper) !important; }
.abc-institutional :is(.work-img, .work-visual, .real-cover, .cover) img { display: block; max-width: 100%; object-fit: contain !important; }
.abc-page-artist-detail .hero-image,
.abc-page-artist-detail .work-img,
.abc-page-artist-works .work-img,
.abc-page-exhibition-detail :is(.work-visual, .installation-grid > *, .artwork-source),
.abc-page-publications .cover,
.abc-page-publication-detail .pageimg,
.abc-page-news :is(.visual, .card .img),
.abc-page-search :is(.thumb, .result:hover),
.abc-page-enquiry .image { background: var(--abc-paper) !important; }
.abc-page-fairs :is(.card-media, .photo, .verified-photo, .asset-pending) { padding: 0 !important; background: var(--abc-paper) !important; }
.abc-page-fairs .card-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; background: var(--abc-paper) !important; }
.abc-page-news :is(.filters .active, .load),
.abc-page-search :is(.filters .active, .load),
.abc-page-enquiry .submit { background: var(--abc-blue) !important; border-color: var(--abc-blue) !important; color: #fff !important; }
.abc-page-news .source { border-top-color: var(--abc-red) !important; }
.abc-page-news .hero .meta:first-child,
.abc-page-search .hero .eyebrow,
.abc-page-enquiry .eyebrow { color: var(--abc-red) !important; }
.abc-institutional :is(button, .button, .btn, .cta, .loadmore, input, textarea, select) { border-radius: 0 !important; box-shadow: none !important; }
.abc-institutional :is(.loadmore, .loadmore-major, .load, .rooms-load, .editorial-load, .more button) { width: 100%; }

/* One institutional load-more language across every public template. */
:is(button.loadmore, button.loadmore-major, button.load, button.rooms-load, button.editorial-load, [data-load-editorial]){
  width:100%!important;
  min-height:70px!important;
  margin:0!important;
  padding:18px 24px!important;
  border:0!important;
  border-top:2px solid #111!important;
  border-bottom:2px solid #111!important;
  border-radius:0!important;
  background:#1556ff!important;
  color:#fff!important;
  font-family:var(--abc-sans,"Helvetica Neue",Arial,sans-serif)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  text-align:center!important;
  cursor:pointer!important;
}
:is(button.loadmore, button.loadmore-major, button.load, button.rooms-load, button.editorial-load, [data-load-editorial]):hover,
:is(button.loadmore, button.loadmore-major, button.load, button.rooms-load, button.editorial-load, [data-load-editorial]):focus-visible{
  background:#111!important;
  color:#fff!important;
  outline:0!important;
}
.abc-institutional :is(.card, .pub, .ex, .archive-row, article) { border-radius: 0 !important; box-shadow: none !important; }
.abc-institutional img { border-radius: 0 !important; }
.abc-institutional [style*="background:#f1"],
.abc-institutional [style*="background: #f1"],
.abc-institutional [style*="background:#eee"],
.abc-institutional [style*="background: #eee"] { background-color: var(--abc-paper) !important; }

@media (max-width: 900px) {
  .abc-institutional :is(h1, .monumental-title) { letter-spacing: -.035em !important; line-height: .9 !important; }
  .abc-institutional :is(.filters, .tabs, .subnav, .anchor-nav) { padding-inline: 16px !important; scroll-padding-inline: 16px; }
  .abc-institutional :is(.card-image, .feature-image, .program-img, .current-img, .forthcoming-img, .fair-image, .news-image) { min-height: 46svh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .abc-autoplay-media { display: none; }
}

/* ABC-ARTE TYPOGRAPHY STANDARD — one system across every prototype */
.abc-institutional {
  font-family: var(--abc-sans) !important;
  letter-spacing: 0 !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility;
}

/* Monumental page titles: identical family, scale, weight and open tracking. */
body.abc-institutional :is(h1, .monumental-title),
body.abc-institutional :is(.hero, .title, .page-title, .artists-opening, .artist-copy, .artist-head, .cart-head, .info, .sd-copy) h1 {
  font-family: var(--abc-sans) !important;
  font-size: clamp(76px, 11vw, 172px) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: .88 !important;
  letter-spacing: .006em !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* Monumental section titles: one reduced scale throughout the site. */
body.abc-institutional :is(
  .section-title h2,
  .section-head h2,
  .archive-head h2,
  .archive h2,
  .titlebar h2,
  .locations-head h2,
  .gallery-title h2,
  .description h2,
  .related > h2,
  .other-artists-title,
  .head h2,
  .other-head h2
) {
  font-family: var(--abc-sans) !important;
  font-size: clamp(48px, 6.5vw, 100px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: .92 !important;
  letter-spacing: .004em !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1 !important;
}

/* Introductory subtitles: same display family and same scale on every page. */
body.abc-institutional :is(
  .intro,
  .lede,
  .subtitle,
  .subhead,
  .artists-statement,
  .artists-opening__statement,
  .section-subtitle,
  .page-subtitle,
  .exhibition-subtitle,
  .hero-bottom > p,
  .hero-copy-block > p
) {
  font-family: var(--abc-sans) !important;
  font-size: clamp(18px, 1.65vw, 27px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.24 !important;
  letter-spacing: .018em !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1 !important;
}

/* Supporting display copy must never use compressed tracking. */
body.abc-institutional :is(h2, h3, .artist-card__name, .artist-row, .archive-row strong, .card-info h3, .ex-info h3, .copy h2) {
  font-family: var(--abc-sans) !important;
  letter-spacing: 0 !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1 !important;
}

@media (max-width: 900px) {
  body.abc-institutional :is(h1, .monumental-title),
  body.abc-institutional :is(.hero, .title, .page-title, .artists-opening, .artist-copy, .artist-head, .cart-head, .info, .sd-copy) h1 {
    font-size: clamp(58px, 17vw, 112px) !important;
    line-height: .92 !important;
    letter-spacing: .004em !important;
  }
  body.abc-institutional :is(
    .section-title h2,
    .section-head h2,
    .archive-head h2,
    .archive h2,
    .titlebar h2,
    .locations-head h2,
    .gallery-title h2,
    .description h2,
    .related > h2,
    .other-artists-title,
    .head h2,
    .other-head h2
  ) {
    font-size: clamp(40px, 12vw, 68px) !important;
    line-height: .94 !important;
    letter-spacing: .004em !important;
  }
  body.abc-institutional :is(
    .intro,
    .lede,
    .subtitle,
    .subhead,
    .artists-statement,
    .artists-opening__statement,
    .section-subtitle,
    .page-subtitle,
    .exhibition-subtitle,
    .hero-bottom > p,
    .hero-copy-block > p
  ) {
    font-size: 18px !important;
    line-height: 1.28 !important;
    letter-spacing: .014em !important;
  }
}
