/* arc.css — styles for the CMS-driven pages (exhibit index + detail + nav).
   Layered on top of the HTML5 UP "Story" main.css / extra.css. */

/* --- Tame the template's viewport-scaling type ----------------------------
   Story sets a large root font-size that grows with the viewport, so every
   em/rem-based heading and gap balloons on wide screens. Pin it to a fixed,
   conventional size instead (loaded after main.css, so this wins everywhere). */
html { font-size: 18px; }
@media screen and (max-width: 480px) { html { font-size: 16px; } }

/* --- Top navigation bar --------------------------------------------------- */
.arc-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75em 1.5em;
	background: #000;
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 1000;
}
.arc-nav .arc-brand {
	font-size: 1.4em;
	color: #fff;
	border: 0;
	text-decoration: none;
}
.arc-nav .arc-brand img { display: block; height: 1.6rem; width: auto; } /* ~match the old 1.4em text */
.arc-nav nav a {
	color: #fff;
	margin-left: 1.25em;
	border-bottom: 1px solid transparent;
	text-decoration: none;
}
.arc-nav nav a:hover { border-bottom-color: #fff; }

/* --- Homepage banner logo ------------------------------------------------- */
/* The logo image is huge at natural size; cap it here. width:100% lets it scale
   down on narrow viewports, max-width caps it on wide ones. Adjust max-width to
   taste — it's the one dial. */
.arc-logo { margin: 0 0 1rem; }
.arc-logo picture { display: block; }
.arc-logo img { display: block; width: 100%; max-width: 300px; height: auto; }

/* xlarge+ (≥1281px): logo beside the intro paragraph as two columns, sized by
   height to match the ~5-line paragraph. (Unchanged — the approved layout.) */
@media screen and (min-width: 1281px) {
	.arc-banner-head { display: flex; align-items: flex-start; gap: 1.75rem; margin-bottom: 1.5rem; }
	.arc-banner-head .arc-logo { margin: 0.4rem 0 0; flex: 0 0 auto; }
	.arc-banner-head .arc-logo img { width: auto; max-width: none; height: 9.5rem; }
	.arc-banner-head .major { margin: 0; flex: 1; }
}

/* "large" tier (981–1280px) only: the column is narrower, so float the smaller
   logo left and let the paragraph wrap around and beneath it. Below 981px it
   stacks (logo on top, width-capped). */
@media screen and (min-width: 981px) and (max-width: 1280px) {
	.arc-banner-head { margin-bottom: 1.5rem; }
	.arc-banner-head::after { content: ""; display: table; clear: both; } /* contain the float */
	.arc-banner-head .arc-logo { float: left; margin: 0.4rem 1.5rem 0.5rem 0; }
	.arc-banner-head .arc-logo img { width: auto; max-width: none; height: 7.1rem; }
	.arc-banner-head .major { margin: 0; }
}

/* stacked range (≤980px): centre the (horizontal) logo. */
@media screen and (max-width: 980px) {
	.arc-logo img { margin-left: auto; margin-right: auto; }
}

/* --- Banner: stack by WIDTH, not orientation ------------------------------
   The Story template stacks the banner on @media (orientation: portrait) — i.e.
   whenever the window is taller than wide — which fires at an unpredictable
   width (= the window height). Override it to be width-driven: side-by-side at
   ≥981px, stacked at ≤980px, regardless of orientation. */

/* ≥981px: force side-by-side (undo the template's portrait stacking). */
@media screen and (min-width: 981px) {
	.banner.style1 { flex-direction: row; text-align: left; }
	.banner.style1 .content { display: block; width: 50%; max-width: 48rem; }
	.banner.style1 .image { width: 50%; max-width: none; height: auto; }
	.banner.style1.fullscreen .content { min-height: 0; }
	.banner.style1.fullscreen .image { height: auto; }
}

/* ≤980px: force stacked (apply even when the window is landscape). */
@media screen and (max-width: 980px) {
	.banner.style1 { flex-direction: column-reverse; text-align: center; }
	.banner.style1 .content { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 100%; }
	.banner.style1 .image { width: 100%; max-width: 100%; height: 45vh; }
	.banner.style1.fullscreen .content { min-height: 50vh; }
	.banner.style1.fullscreen .image { height: 50vh; }
}

/* --- Events --------------------------------------------------------------- */

/* Homepage banner "next event" — a plain paragraph flowing on from the intro
   copy (the teaser, with a trailing link); no box. */
.arc-next-event-link { white-space: nowrap; }

/* Facet badges (event page + cards) */
.arc-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.arc-badge {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	background: #ededed;
	color: #444;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	white-space: nowrap;
}

/* Event detail meta line */
.arc-event-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; color: #555; margin: 0 0 0.8rem; }
.arc-event-when { font-weight: 600; color: #222; }
.arc-event-where { color: #666; }
.arc-event-past { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #999; }

/* Agenda filter chips */
.arc-filters { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; margin: 1.5rem 0 0; text-align: left; }
.arc-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.arc-filter-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-right: 0.2rem; }
.arc-chip {
	border: 1px solid #bbb;
	background: #fff;
	color: #333;
	border-radius: 999px;
	padding: 0.3em 0.85em;
	font-size: 0.85rem;
	line-height: 1.3;
	cursor: pointer;
}
.arc-chip:hover { border-color: #000; }
.arc-chip.is-on { background: #000; color: #fff; border-color: #000; }

/* Agenda list + cards */
.arc-event-section { margin-top: 2em; }
.arc-event-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5em; }
.arc-event-card {
	display: flex;
	gap: 1.25rem;
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.arc-event-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.1); transform: translateY(-2px); }
.arc-event-card-thumb { flex: 0 0 200px; background: #f4f4f4 center/cover no-repeat; min-height: 130px; }
.arc-event-card-main { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.2rem; text-align: left; }
.arc-event-card-when { font-weight: 600; color: #1a1a1a; }
.arc-event-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.arc-event-card-venue { color: #777; font-size: 0.9rem; }
.arc-event-card-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
.arc-event-card-excerpt { color: #555; margin-top: 0.3rem; }
.arc-section-empty { display: none; color: #888; padding: 1em 0; }

@media screen and (max-width: 560px) {
	.arc-event-card { flex-direction: column; }
	.arc-event-card-thumb { flex-basis: auto; height: 150px; }
}

/* --- Photo galleries: uniform image height ------------------------------- */
/* The Story gallery fixes the article WIDTH, so a mix of portrait/landscape
   photos gives ragged heights and the strip "barfs". Pin the image HEIGHT
   instead (width follows the aspect ratio), so everything lines up. Applied to
   the lightbox photo galleries (exhibit / event / past-events) AND the homepage
   carousels (ARC Moments + Our exhibits), which live inside .wrapper.style1 —
   the detail-page lightbox galleries sit outside it, so they're unaffected by
   the second selector but still covered by the first. */
.gallery.style2.lightbox article,
.wrapper.style1 .gallery.style2 article { width: auto; max-width: 80vw; }
.gallery.style2.lightbox .image,
.wrapper.style1 .gallery.style2 .image { width: auto; }
.gallery.style2.lightbox .image img,
.wrapper.style1 .gallery.style2 .image img { display: block; height: 16rem; width: auto; }

/* The homepage carousels (ARC Moments, Our exhibits) run full-bleed, so without
   a gap the strip mashes into the next section's edge-to-edge image. Add room
   below — the template already draws a faint top-of-section divider
   (#wrapper.divided > *), which now sits in this gap and does the dividing.
   Use margin (not padding): the hover nav overlays are height:100% of the
   gallery, so inner padding would let their gradients spill into the gap.
   Scoped to .wrapper.style1 so the detail-page lightbox galleries are untouched. */
.wrapper.style1 .gallery.style2 {
	margin-bottom: 3rem;
}

/* --- Exhibit index: search + grid ---------------------------------------- */
.arc-search-wrap { max-width: 40em; margin: 0 auto 2em auto; }
.arc-search {
	width: 100%;
	border: 1px solid #bbb;
	border-radius: 8px;
	padding: 0.65em 0.9em;
	font-size: 1.1em;
}
.arc-count { text-align: center; color: #777; margin: -1em 0 2em; }

.arc-year-heading {
	width: 100%;
	margin: 1.5em 0 0.5em;
	text-align: left;
	border-bottom: 2px solid #000;
	padding-bottom: 0.2em;
}
.arc-year-heading .beeb { font-size: 1.5em; }

.arc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25em;
	margin-bottom: 2em;
}
.arc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e4e4e4;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.arc-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.arc-card .arc-card-img {
	aspect-ratio: 4 / 3;
	background: #f4f4f4 center/cover no-repeat;
}
.arc-card .arc-card-body { padding: 0.75em 0.9em; }
.arc-card .arc-card-title { font-weight: 600; line-height: 1.25; }
.arc-card .arc-card-meta { color: #888; font-size: 0.85em; margin-top: 0.25em; }
.arc-noresults { text-align: center; color: #888; padding: 2em 0; display: none; }

/* --- Homepage carousel: text-based year dividers -------------------------- */
/* A slim black band with the year set vertically; stretches to the card height
   automatically (the carousel is a flexbox). No image files needed — any year
   "just works". Specific enough to beat the template's .small article width. */
.gallery.style2 article.arc-year-divider {
	width: auto;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.9rem;
}
.gallery.style2 article.arc-year-divider .beeb {
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	white-space: nowrap;
}

/* --- Exhibit detail page (lead image on top, write-up + specs below) ------ */
/* px (not rem): the Story template scales the root font-size with the viewport,
   so rem-based widths balloon on wide screens. */
.arc-exhibit { max-width: 800px; margin: 0 auto; padding: 2rem 1.25em; text-align: left; }
.arc-exhibit h1 { margin-bottom: 0.1em; }
.arc-exhibit-meta { color: #888; font-style: italic; margin: 0 0 1.3em; }

.arc-lead-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 0 0 1.7em;
}

.arc-description { max-width: 640px; }
.arc-description p { margin: 0 0 1em; line-height: 1.65; }
.arc-description > :last-child { margin-bottom: 0; }

.arc-specs { width: 100%; max-width: 640px; border-collapse: collapse; margin: 1.6em 0; }
.arc-specs th, .arc-specs td {
	text-align: left;
	padding: 0.5em 0.75em;
	border-bottom: 1px solid #eaeaea;
	vertical-align: top;
}
.arc-specs th { width: 32%; white-space: nowrap; color: #555; }

.arc-back { display: inline-block; margin-top: 1.6em; font-weight: 600; }

/* Space the embedded video off the preceding text/description. */
.arc-exhibit .video-container { margin-top: 1.5rem; }

@media screen and (max-width: 480px) {
	.arc-nav { padding: 0.6em 1em; }
	.arc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}