/* The approved desktop layout is preserved at 1600px and above.
   Narrow layouts share the original assets, colors and type families. */
@media (max-width: 1599px) {
  :root { --page-gutter: 40px; }

  .site-brand-tagline, .site-brand-divider { display: none; }
  .site-brand-lockup, .site-brand { min-width: 0; }
  .site-search { max-width: 100%; }
  .site-search input { width: 100%; }
  .site-footer { flex-wrap: wrap; padding-inline: var(--page-gutter); font-size: 14px; }

  /* Give artwork a real, clipped column, independent of the 1920px canvas. */
  .home-hero { --hero-copy-share: 56%; height: auto; min-height: 424px; }
  .home-timeline { display: none; }
  .home-hero__content {
    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    column-gap: 40px;
    height: auto;
    min-height: 344px;
    padding: 42px var(--page-gutter);
    align-items: center;
  }
  .hero-copy {
    grid-column: 1; grid-row: 1;
    width: 100%; height: auto; min-height: 260px;
    padding-top: 0; gap: 16px;
  }
  .hero-copy h1 {
    font-size: clamp(40px, 3.5vw, 56px); line-height: 1.35;
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .hero-copy__intro, .hero-copy__description {
    height: auto; white-space: normal; overflow: visible;
    line-height: 1.6; overflow-wrap: anywhere;
  }
  .hero-copy__metadata {
    height: auto; flex-wrap: wrap; gap: 8px 12px;
    font-size: 14px; line-height: 24px;
  }
  .hero-copy__metadata > p { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .hero-copy__actions { height: auto; padding-top: 8px; }
  .hero-aside {
    grid-column: 2; grid-row: 1; position: static;
    width: 100%; height: 100%; min-height: 260px;
    justify-content: flex-end; align-items: flex-end;
  }
  .hero-credit { display: none; }
  .home-hero__background {
    top: 80px; bottom: 0;
    left: calc(var(--page-gutter) + (100% - 2 * var(--page-gutter) - 40px) * .56 + 40px);
    right: var(--page-gutter);
  }
  .home-hero .banner-art { inset: 0; width: 100%; height: 100%; }
  .home-hero .banner-art__subject { inset: 0; width: 100%; height: 100%; }
  .home-hero .banner-art__ambient { display: none; }
  .home-hero .banner-art__vertical, .home-hero .banner-art__horizontal {
    mask-image: none; -webkit-mask-image: none;
  }
  .home-hero .banner-art__reading {
    background: linear-gradient(90deg, var(--bg), transparent 20%, transparent 90%, var(--bg));
  }
  .home-hero .banner-art__top { height: 80px; }
  .home-hero .banner-art__bottom { height: 96px; }

  .home-events { padding-inline: var(--page-gutter); }
  .event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .event-card__body { padding: 20px; gap: 20px; }
  .event-card__date { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .event-card__title {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
    white-space: normal; height: 56px; max-height: 56px; overflow-wrap: anywhere;
  }
  .event-card__bottom { height: auto; min-height: 44px; align-items: flex-end; }
  .event-card__tags { flex-wrap: wrap; }
  .event-card__arrow { width: 44px; height: 44px; flex-basis: 44px; }
  .event-card__media { height: auto; aspect-ratio: 16 / 9; }
  .event-card__media:not(.event-card__media--canvas) .event-card__image { height: 100%; }

  /* Detail headings wrap only below the protected desktop breakpoint. */
  .detail-hero { --detail-art-height: clamp(160px, 26vw, 240px); }
  .detail-hero__copy, .detail-hero__actions, .detail-hero .breadcrumbs {
    width: calc(60% - 32px); min-width: 0; max-width: 100%;
  }
  body[data-page=detail] .detail-hero__identity h1,
  body[data-page=detail]:not([data-event=artefact-2026-2027]) .detail-hero__identity h1 {
    font-size: clamp(32px, 3.4vw, 48px); line-height: 1.4;
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .detail-hero .banner-art { left: 60%; right: 0; top: 0; width: 40%; height: 100%; }
  .detail-hero .banner-art__subject { inset: 0; width: 100%; height: 100%; }
  .detail-hero .banner-art__ambient { display: none; }
  .detail-hero .banner-art__vertical, .detail-hero .banner-art__horizontal {
    mask-image: none; -webkit-mask-image: none;
  }
  .detail-hero .banner-art__reading {
    background: linear-gradient(90deg, var(--bg), transparent 28%, transparent 90%, var(--bg));
  }
  .detail-hero__eyebrow, .detail-hero__subtitle, .detail-hero__identity > p {
    white-space: normal; overflow-wrap: anywhere;
  }
  .detail-content, .detail-section, .detail-sidebar, .theme-block > *, .award-card { min-width: 0; }
  .body-copy, .requirement-group__body, .theme-block, .schedule__stage, .award-card { overflow-wrap: anywhere; }
  .award-card__amount { overflow-wrap: anywhere; }
  .detail-load-error { margin-inline: var(--page-gutter); max-width: calc(100% - 2 * var(--page-gutter)); }

  .admin-main, .admin-split > *, .event-editor, .source-form, .form-grid > *, .editor-row > * { min-width: 0; }
  .admin-heading, .editor-heading { overflow-wrap: anywhere; }
}

@media (max-width: 1199px) {
  :root { --page-gutter: 32px; --reading-gutter: 32px; }
  .site-header {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    height: auto; min-height: 112px; gap: 8px 24px; padding: 16px 24px 0;
  }
  .site-brand-area { height: 40px; }
  .site-brand__name { font-size: 20px; line-height: 28px; }
  .site-search-area { height: 44px; }
  .site-search { width: 100%; height: 44px; }
  .site-search input { font-size: 16px; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; height: 44px; justify-content: center; gap: 32px; }
  .site-nav a, .site-nav a:first-child { width: auto; min-width: 64px; height: 44px; font-size: 14px; }
  .home-hero [data-site-header] { height: auto; min-height: 112px; }
  .home-hero__background { top: 128px; }
  .event-grid, .related-events .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .detail-sidebar {
    position: static; max-height: none; overflow: visible;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  }
  .registration-facts dd { max-width: none; }
}

@media (max-width: 1023px) {
  :root { --page-gutter: 24px; --reading-gutter: 24px; }
  /* The spacer shares the exact height and position of the image layer. */
  .home-hero { --hero-art-height: clamp(160px, 28vw, 240px); min-height: 0; }
  .home-hero__content {
    grid-template-columns: minmax(0, 1fr); gap: 24px;
    height: auto; min-height: 0; padding: 34px var(--page-gutter);
  }
  .home-hero__content::after { content: ''; grid-column: 1; grid-row: 2; height: var(--hero-art-height); }
  .hero-copy { min-height: 0; width: 100%; }
  .hero-copy h1 { font-size: clamp(32px, 4.4vw, 44px); }
  .hero-aside { grid-column: 1; grid-row: 3; min-height: 0; height: 44px; }
  .home-hero__background {
    inset: auto var(--page-gutter) 102px;
    height: var(--hero-art-height);
  }
  .hero-controls { width: auto; height: 44px; gap: 16px; }
  .hero-arrow { width: 44px; height: 44px; flex-basis: 44px; }
  .home-hero .banner-art__top, .home-hero .banner-art__bottom { height: 40px; }
  .home-events__heading, body[data-view=events] .home-events__heading {
    flex-direction: column; align-items: stretch; gap: 16px;
  }
  body[data-view=events] .collection-filter-toolbar { margin-left: 0; align-self: flex-start; }
  .home-filters { gap: 8px; }
  .filter-button { height: auto; min-height: 44px; }
  body[data-view=events] .collection-filter-control { height: 44px; }
  body[data-view=events] .collection-filter-control select,
  body[data-view=events] #collection-status-select { height: 42px; font-size: 16px; }
  body[data-view=events] .collection-filter-control::after { top: 17px; }

  .detail-hero { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 24px; }
  .detail-hero__copy, .detail-hero__actions, .detail-hero .breadcrumbs { width: 100%; }
  .detail-hero::after { content: ''; height: var(--detail-art-height); }
  .detail-hero .banner-art {
    top: auto; bottom: 40px; left: var(--reading-gutter); right: var(--reading-gutter);
    width: auto; height: var(--detail-art-height);
  }
  .detail-hero .banner-art__top, .detail-hero .banner-art__bottom { height: 40px; }
  .detail-hero__subtitle { font-size: 18px; line-height: 1.6; }
  .schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-question { min-height: 44px; }
  .faq-icon { width: 32px; }
  .faq-icon::before, .faq-icon::after { left: 8px; }
  .faq-answer p { padding-right: 0; }
  .registration-card__actions .text-link { display: flex; align-items: center; justify-content: center; min-height: 44px; }
}

@media (max-width: 699px) {
  :root { --page-gutter: 16px; --reading-gutter: 16px; }
  .home-events { padding: 24px var(--page-gutter); }
  .event-grid, .related-events .event-grid { grid-template-columns: minmax(0, 1fr); }
  .event-card { min-height: 0; }
  .event-card__body { padding: 20px; }
  body[data-view=events] .collection-filter-toolbar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; gap: 8px; align-self: stretch;
  }
  body[data-view=events] .collection-filter-control { width: 100%; padding-inline: 8px; gap: 4px; }
  body[data-view=events] .collection-filter-control::after { right: 9px; }
  .hero-copy__intro, .hero-copy__description { font-size: 16px; line-height: 26px; }
  .hero-copy__actions { width: 100%; }
  .site-footer { gap: 8px; padding: 24px var(--page-gutter); }
  .home-empty { padding: 32px 16px; }
  .list-controls, .event-toolbar { font-size: 14px; }

  .detail-hero { padding-top: 24px; padding-bottom: 32px; }
  .detail-hero .banner-art { bottom: 32px; }
  .detail-hero__subtitle { font-size: 16px; line-height: 26px; }
  .detail-hero__actions { align-items: stretch; gap: 12px; }
  .detail-hero__actions .button-primary { width: 100%; min-width: 0; }
  .detail-hero__actions .text-link { justify-content: center; }
  .detail-sidebar { display: flex; }
  .sidebar-card { padding: 20px; }
  .organizer { padding: 8px 16px 0; }
  .detail-section { gap: 20px; }
  .detail-content { gap: 40px; }
  .detail-layout { padding-top: 32px; padding-bottom: 40px; gap: 40px; }
  .section-heading h2, .related-events h2 { font-size: 22px; line-height: 32px; }
  .schedule { gap: 20px 16px; }
  .schedule__date, .schedule__stage h3 { font-size: 18px; line-height: 28px; }
  .registration-card__deadline .deadline-date { font-size: 32px; line-height: 40px; }
  .award-card__amount { font-size: 32px; line-height: 40px; }

  .admin-main { padding: 24px 16px 40px; }
  .admin-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .admin-heading > .text-link, .admin-eyebrow, .admin-stat span, .admin-main small { font-size: 14px !important; }
  .admin-stats { gap: 12px; }
  .admin-tabs { flex-wrap: wrap; overflow: visible; gap: 8px 20px; }
  .admin-tabs button { min-height: 44px; }
  .event-editor, .source-form { padding: 16px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-main input, .admin-main textarea, .admin-main select { font-size: 16px; }
  .admin-main .category-options input { min-height: 0; }
  .category-options label { min-height: 44px; }
  .editor-row { grid-template-columns: minmax(0, 1fr); }
  .editor-row input:nth-child(3) { grid-column: auto; }
  .editor-row button { min-width: 44px; min-height: 44px; justify-self: end; }
  .editor-actions { flex-direction: column; align-items: stretch; }
  .editor-actions label { width: 100%; }
  .admin-main .image-import input { flex-basis: 100%; }
}

@media (max-width: 599px) {
  .site-header { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; gap: 8px; }
  .site-brand-area { height: 36px; }
  .site-brand img { width: 32px; height: 32px; }
  .site-brand__name { font-size: 20px; }
  .site-nav { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: 100%; }
  .site-nav a, .site-nav a:first-child { width: 100%; min-width: 0; white-space: nowrap; }
  .site-search-area { grid-column: 1; grid-row: 3; width: 100%; }
  .site-search { height: 44px; }
  .hero-copy h1, body[data-page=detail] .detail-hero__identity h1,
  body[data-page=detail]:not([data-event=artefact-2026-2027]) .detail-hero__identity h1 {
    font-size: 32px; line-height: 1.4;
  }
  .event-card__body { padding: 16px; }
}

@media (max-width: 359px) {
  body[data-view=events] .collection-filter-toolbar { grid-template-columns: minmax(0, 1fr); }
  .schedule { grid-template-columns: minmax(0, 1fr); }
  .registration-facts > div { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .sidebar-card { padding: 16px; }
}

@media (max-width: 1599px) and (pointer: coarse) {
  .filter-button { min-height: 44px; }
  .hero-arrow { width: 44px; height: 44px; flex-basis: 44px; }
  body[data-view=events] .collection-filter-control { height: 44px; }
  body[data-view=events] .collection-filter-control select,
  body[data-view=events] #collection-status-select { height: 42px; font-size: 16px; }
  body[data-view=events] .collection-filter-control::after { top: 17px; }
}
