/* Inner pages: artwork details, Texts, Visit, About, Index.
   Loaded after styles.css (fonts, tokens, body, .wrap, taskbar). */

/* ---------- Top of page ---------- */
.site-logo { padding-top: max(16px, var(--side-margin)); text-align: left; }
.site-logo a { display: inline-block; }
.site-logo .logo { display: block; width: 140px; height: auto; }

.breadcrumb { display: block; margin: 16px 0 24px; font-size: 20px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Window chrome ---------- */
.win { border: 1px solid var(--blue); background: var(--gray); }
.win .titlebar {
  height: 32px;
  border-bottom: 1px solid var(--blue);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 10px;
  background: var(--blue); color: var(--ink);
}
.win .titlebar-title { min-width: 0; font-size: 14px; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win .titlebar .ctl-group { display: flex; align-items: center; gap: 12px; flex: none; }
.win .titlebar .ctl-group span { display: block; color: var(--ink); line-height: 1; }
.win .titlebar .min { font-size: 18px; margin-top: -6px; }
.win .titlebar .max { width: 11px; height: 11px; border: 1px solid var(--ink); }
.win .titlebar .close { font-size: 14px; }

/* ---------- Title + preview ---------- */
.artwork-top { display: block; }
.artwork-header { display: block; }
/* Headings shrink to stay on one line (--len = characters; mono glyphs are ~0.6em wide),
   between a 14px floor and a 24px cap. cqw = width of the title block. */
.artwork-title-block { container-type: inline-size; }
.artwork-title-block h1 {
  font-family: var(--mono); font-weight: 400; line-height: 1.3;
  font-size: clamp(14px, calc(100cqw / (var(--len) * 0.62)), 24px);
  margin: 0; overflow-wrap: break-word;
}
.artwork-title-block .artist-name {
  font-size: clamp(14px, calc(100cqw / (var(--len) * 0.62)), 24px); margin: 0; line-height: 1.3;
}
.artwork-title-block .work-link { display: block; font-size: 18px; margin-top: 16px; word-break: break-all; }

/* Phones: scale the heading down, and shrink each link so it stays on one line
   (--len is the URL's length in characters; mono glyphs are ~0.6em wide).
   Very long ones (.is-long, e.g. exonemo) keep a fixed size and wrap instead. */
@media (max-width: 699.98px) {
  .artwork-title-block .work-link {
    font-size: min(14px, calc((100vw - 2 * max(16px, 6vw)) / (var(--len) * 0.62)));
    white-space: nowrap; word-break: normal; margin-top: 12px;
  }
  .artwork-title-block .work-link.is-long { font-size: 12px; white-space: normal; word-break: break-all; }
}

.artwork-main-window { margin-top: 32px; min-width: 0; }
.artwork-main-window .win { aspect-ratio: 16 / 9; }
.artwork-main-window .frame-body { height: calc(100% - 32px); position: relative; overflow: hidden; }
.artwork-main-window .frame-body a { display: block; width: 100%; height: 100%; }
.artwork-main-window .frame-body iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.artwork-main-window .frame-body img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artwork-main-window .frame-body.contain img { object-fit: contain; }
/* A live site needs more height than a still on a phone */
@media (max-width: 699.98px) { .artwork-main-window .win:has(iframe) { aspect-ratio: 3 / 4; } }

/* ---------- About / Artist ---------- */
.artwork-info { margin-top: 32px; display: grid; grid-template-columns: 1fr; gap: 24px; }
.artwork-info .win { min-height: 260px; }
.artwork-info .info-body {
  font-family: var(--sans); font-size: 16px; line-height: 1.5; padding: 16px;
  height: calc(100% - 32px); overflow-y: auto;
}
.artwork-info .info-body p { margin: 0 0 1em; }
.artwork-info .info-body p:last-child { margin-bottom: 0; }

/* ---------- Prev / next ---------- */
.prev-next-nav {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin-top: 32px; padding: 24px 0 64px;
}
.prev-next-link { display: flex; flex-direction: column; gap: 8px; text-decoration: none; flex: 0 1 200px; min-width: 0; }
.prev-next-link:hover .prev-next-label { text-decoration: underline; }
.prev-next-label { font-size: 16px; overflow-wrap: anywhere; }
/* Phones: just "prev" / "next", without the title */
@media (max-width: 699.98px) { .prev-next-label { font-size: 14px; } .prev-next-label .pn-title { display: none; } }
.prev-next-link .win { width: min(160px, 100%); aspect-ratio: 16 / 9; }
.prev-next-link .win .titlebar { height: 20px; }
.prev-next-link .win .titlebar .ctl-group { display: none; }
.prev-next-link .frame-body { height: calc(100% - 20px); overflow: hidden; }
.prev-next-link .frame-body img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prev-next-link .frame-body.contain img { object-fit: contain; }
.next-cell { margin-left: auto; align-items: flex-end; text-align: right; }

/* ---------- Desktop: preview left (75%), title block bottom-aligned on the right ---------- */
@media (min-width: 900px) {
  .artwork-top {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr); grid-template-rows: 1fr auto;
    column-gap: 5%; align-items: start;
  }
  .artwork-main-window { grid-column: 1; grid-row: 1 / 3; margin-top: 0; }
  .artwork-header { grid-column: 2; grid-row: 2; }
  .artwork-info { grid-template-columns: 1fr 1fr; }
}

/* ---------- Curatorial Statement page: a single column of text ---------- */
.page-byline { font-family: var(--mono); font-size: 24px; line-height: 1.5; margin: -12px 0 32px; }
.text-body { font-family: var(--sans); font-size: 16px; line-height: 1.4; max-width: 70ch; padding-bottom: 64px; }
.text-body p { margin: 0 0 1.25em; }
.text-body p:last-child { margin-bottom: 0; }
.text-body .text-closing { margin-top: 2.5em; }
.text-theme { font-family: var(--mono); font-weight: 400; font-size: 16px; line-height: 1.4; margin: 1.5em 0 1em; }

/* ---------- About page: plain text, no boxes ---------- */
.about-text { max-width: 70ch; padding-bottom: 64px; font-family: var(--sans); font-size: 16px; line-height: 1.4; }
.about-text p { margin: 0 0 1.25em; }
.about-heading { font-family: var(--mono); font-weight: 400; font-size: 24px; line-height: 1.5; margin: 2em 0 0.75em; }
.credits { margin: 0; }
.credits dt { font-family: var(--mono); font-weight: 600; font-size: 16px; line-height: 1.4; margin-top: 1.5em; }
.credits dt:first-child { margin-top: 0; }
.credits dd { margin: 0.25em 0 0; }

/* ---------- Visit page: plain text in the mono face, map, then hours ---------- */
.visit-layout { font-family: var(--mono); font-size: 16px; line-height: 1.4; }
.visit-layout p { margin: 0; }
.visit-layout { display: grid; gap: 32px; padding-bottom: 64px; }
.visit-details { order: -1; }
.visit-details p + p { margin-top: 1.5em; }
.visit-map { display: block; width: 100%; height: clamp(260px, 42vw, 420px); border: 0; filter: grayscale(1) contrast(1.15); }
.visit-hours { padding-top: 32px; }
.visit-hours-title { font-family: var(--mono); font-weight: 400; font-size: 24px; line-height: 1.5; margin: 0 0 12px; }
@media (min-width: 800px) {
  .visit-layout { grid-template-columns: 2fr 1fr; column-gap: 6%; align-items: start; }
  .visit-details { order: 0; }
  .visit-map { height: clamp(300px, 34vw, 420px); }
}
.hours { display: grid; grid-template-columns: max-content 1fr; column-gap: 32px; row-gap: 4px; margin: 0; }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; }
@media (max-width: 479.98px) {
  .hours { grid-template-columns: 1fr; row-gap: 0; }
  .hours dd { margin-bottom: 0.75em; }
}

/* ---------- Text pages (Texts, Visit, About) ---------- */
.page-title {
  font-family: var(--mono); font-weight: 400; font-size: min(48px, 12.5vw); line-height: 1;
  margin: 0 0 32px; overflow-wrap: break-word;
}
@media (min-width: 700px) { .page-title { font-size: 56px; } }

.page-stack { display: grid; gap: 24px; max-width: 900px; padding-bottom: 64px; }
.page-stack .win { min-width: 0; }
.prose { font-family: var(--sans); font-size: 16px; line-height: 1.5; padding: 20px; }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose .label { font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; margin: 0 0 6px; }
.prose .fact { font-family: var(--mono); font-size: 20px; line-height: 1.4; margin: 0; }
.prose .fact + .fact { margin-top: 2px; }
.prose .note { margin-top: 1.25em; }

/* ---------- Index of works ---------- */
.index-list { list-style: none; margin: 0; padding: 0 0 64px; max-width: 1100px; }
.index-row {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 14px 0; border-top: 1px solid var(--blue);
  font-size: 16px; line-height: 1.4;
}
.index-row:last-child { border-bottom: 1px solid var(--blue); }
.index-row .theme { font-size: 14px; letter-spacing: 0.02em; }
@media (min-width: 700px) {
  .index-row { grid-template-columns: 1.1fr 2fr 1fr; gap: 24px; align-items: baseline; }
  .index-row .theme { text-align: right; }
}

/* ---------- Index: hover preview window (see preview.js) ---------- */
.hover-preview {
  position: fixed; z-index: 9000;
  width: 300px;
  border: 1px solid var(--blue);
  background: var(--gray);
  pointer-events: none;
  animation: hover-preview-in 120ms ease-out;
}
.hover-preview[hidden] { display: none; }
.hover-preview-bar {
  height: 28px; padding: 0 10px;
  display: flex; align-items: center;
  background: var(--blue); color: var(--ink);
  font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden;
}
.hover-preview-bar span { overflow: hidden; text-overflow: ellipsis; }
.hover-preview-body { aspect-ratio: 16 / 9; overflow: hidden; background: #D9D9D9; }
.hover-preview-body img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes hover-preview-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hover-preview { animation: none; } }