/* The pages around the room: works by subject, a page per painting, about, contact. The same type, pills
   and slate colours as the room (style.css); here they sit on a plain wall instead of over the room. */

/* ---------- the bar at the top, on every page ---------- */
.nav__name { display: inline-flex; align-items: center; min-height: 44px; }
.site-nav__menu { display: flex; align-items: center; gap: 4px; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: var(--fs-label); font-weight: 500; text-decoration: none; border-radius: 999px;
  text-shadow: 0 0 12px var(--halo), 0 0 2px var(--halo); /* in the room it can sit over a bright ceiling */
  transition: background-color .2s var(--ease);
}
@media (hover: hover) { .site-nav__link:hover { background: var(--hover); } }
.site-nav__link[aria-current="page"] { box-shadow: inset 0 -1.5px 0 currentColor; border-radius: 0; }
.site-nav__contact { margin-left: 8px; }
.site-nav__contact[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--bg); }
.site-nav__toggle {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--pill-line-bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--fs-label); font-weight: 500; cursor: pointer; pointer-events: auto;
}
.site-nav__bars { position: relative; width: 16px; height: 10px; }
.site-nav__bars i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.site-nav__bars i:first-child { top: 1px; }
.site-nav__bars i:last-child { top: 7.5px; }
.menu-open .site-nav__bars i:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-open .site-nav__bars i:last-child { top: 4.25px; transform: rotate(-45deg); }

/* on the pages the bar has its own backing, and the name is always there */
.page-body .nav {
  background: rgba(var(--scrim), .86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.page-body .site-nav__link, .page-body .nav__name { text-shadow: none; }

/* phones: the links fold into a menu that fills the screen */
@media (max-width: 899px) {
  .site-nav__toggle { display: inline-flex; position: relative; z-index: 2; }
  .site-nav__menu {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 4px;
    padding: calc(88px + var(--st)) var(--gr) calc(40px + var(--sb)) var(--gl);
    background: var(--bg);
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  }
  .menu-open .site-nav__menu { opacity: 1; visibility: visible; }
  /* a blurred backing would hold the menu inside the bar (it makes the bar its frame): none while it is open */
  .menu-open .nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-open { overflow: hidden; }
  .site-nav__menu > * { flex-shrink: 0; }
  .site-nav__link {
    min-height: 64px; padding: 0; font-size: var(--fs-h2); letter-spacing: -.022em; text-shadow: none;
    border-radius: 0; box-shadow: 0 1px 0 var(--line);
  }
  .site-nav__link[aria-current="page"] { box-shadow: 0 1px 0 var(--line); color: var(--ink-2); }
  .site-nav__contact { margin: 32px 0 0; align-self: flex-start; }
  .menu-open .nav__name { opacity: 1; visibility: visible; position: relative; z-index: 2; }
}

@media (max-width: 899px) and (max-height: 560px) {
  .site-nav__menu { justify-content: flex-start; padding-top: calc(72px + var(--st)); overflow-y: auto; }
  .site-nav__link { min-height: 52px; font-size: 1.5rem; }
  .site-nav__contact { margin-top: 20px; }
}

/* ---------- a page ---------- */
.page-body { min-height: 100svh; display: flex; flex-direction: column; }
.page { flex: 1; padding: calc(72px + var(--st) + 64px) var(--gr) 96px var(--gl); }
.page-head { max-width: 60rem; }
.page-head__kicker { color: var(--ink-2); }
.page-head__title { margin-top: 12px; font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 500; letter-spacing: -.045em; line-height: .95; text-wrap: balance; }
.page-head__text { margin-top: 20px; max-width: 34em; color: var(--ink-2); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }

/* ---------- works, by subject ---------- */
.series { margin-top: 96px; scroll-margin-top: calc(72px + var(--st) + 24px); }
.series__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 48px; align-items: baseline; padding-bottom: 24px; box-shadow: 0 1px 0 var(--line); }
.series__text { color: var(--ink-2); max-width: 36em; }
.cards { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 56px 32px; align-items: end; }
.card__link { display: grid; gap: 14px; text-decoration: none; }
.card__frame {
  display: block; aspect-ratio: var(--ar); background: var(--line) center / cover no-repeat;
  box-shadow: 0 32px 64px -40px #000;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; }
.card__title { font-style: italic; line-height: 1.35; }
.card__meta { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-2); margin-top: -8px; }
.card__go { color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
@media (hover: hover) {
  .card__link:hover .card__frame { transform: translateY(-6px); box-shadow: 0 44px 72px -40px #000; }
  .card__link:hover .card__go { opacity: 1; transform: none; }
}
@media (hover: none) { .card__go { opacity: 1; transform: none; } } /* a finger cannot hover: always say it opens */
.card__link:focus-visible .card__go { opacity: 1; transform: none; }

/* ---------- a painting ---------- */
.crumbs { display: flex; align-items: center; gap: 10px; color: var(--ink-2); margin-top: -12px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); text-decoration: underline; } }
.work__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 56px; align-items: start; margin-top: 32px; }
.work__fig { position: sticky; top: calc(72px + var(--st) + 32px); display: grid; gap: 14px; justify-items: center; }
.work__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.work__frame { display: block; width: 100%; max-height: calc(100svh - 220px); aspect-ratio: var(--ar); margin: 0 auto; background: var(--line) center / cover no-repeat; box-shadow: 0 48px 96px -48px #000; }
.work__frame img { width: 100%; height: 100%; object-fit: contain; }
.work__open .work__frame { width: min(100%, calc((100svh - 220px) * (var(--ar)))); }
.work__hint { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); transition: opacity .4s var(--ease); }
.work__hint.is-done { opacity: 0; }
.work__series { color: var(--ink-2); }
.work__title { margin-top: 8px; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; font-style: italic; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.facts { display: grid; gap: 0; margin: 28px 0 0; }
.facts > div { display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: 12px 0; box-shadow: 0 1px 0 var(--line); }
.facts dt { color: var(--ink-2); line-height: inherit; }
.facts dd { margin: 0; }
.work__text { margin-top: 24px; color: var(--ink-2); max-width: 34em; }
.work__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 96px; padding-top: 24px; box-shadow: 0 -1px 0 var(--line); }
.pager__link { display: grid; gap: 4px; min-height: 44px; text-decoration: none; }
.pager__link .label { color: var(--ink-2); }
.pager__title { font-style: italic; }
.pager__link--next { text-align: right; }
@media (hover: hover) { .pager__link:hover .pager__title { text-decoration: underline; } }

/* the painting enlarged: the large photograph on the dark wall; tap or click it to see it at full size */
.zoom {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: calc(72px + var(--st)) var(--gr) calc(24px + var(--sb)) var(--gl); border: 0;
  background: var(--view); color: var(--view-ink);
}
.zoom[open] { display: grid; animation: view-in .24s var(--ease); }
.zoom::backdrop { background: var(--view); }
.zoom__fig { min-height: 0; display: flex; align-items: center; justify-content: center; }
.zoom__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; }
.zoom.is-full .zoom__fig { display: block; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.zoom.is-full .zoom__fig::-webkit-scrollbar { display: none; }
.zoom.is-full .zoom__img { max-width: none; max-height: none; cursor: grab; user-select: none; -webkit-user-drag: none; }
.zoom__close { position: absolute; top: calc(16px + var(--st)); right: var(--gr); }
.zoom__hint {
  position: absolute; left: 50%; bottom: calc(16px + var(--sb)); translate: -50% 0; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; background: rgba(20, 21, 22, .7); color: var(--view-ink); pointer-events: none;
}

/* ---------- about ---------- */
.about__fig { margin-top: 56px; display: grid; gap: 12px; max-width: 70rem; }
.about__fig .work__frame { max-height: none; }
.about__fig figcaption { color: var(--ink-2); }
.about__fig figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
.prose { display: grid; gap: 48px; margin-top: 72px; max-width: 38em; }
.prose h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.prose p { margin-top: 14px; color: var(--ink-2); }
.about__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px !important; }

/* ---------- contact ---------- */
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.asks { margin-top: 96px; max-width: 48rem; }
.asks__title { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.asks__list { list-style: none; padding: 0; margin: 16px 0 0; box-shadow: 0 -1px 0 var(--line); }
.ask {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
  min-height: 64px; padding: 12px 0; text-decoration: none; box-shadow: 0 1px 0 var(--line);
}
.ask__title { font-style: italic; }
.ask__date { color: var(--ink-2); }
.ask__go { transition: transform .3s var(--ease); }
@media (hover: hover) { .ask:hover .ask__go { transform: translateX(4px); } .ask:hover .ask__title { text-decoration: underline; } }

/* ---------- foot of every page ---------- */
.site-foot { display: grid; gap: 12px; padding: 40px var(--gr) calc(40px + var(--sb)) var(--gl); box-shadow: 0 -1px 0 var(--line); color: var(--ink-2); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); }
.site-foot__credit { max-width: 48em; }

/* ---------- phones ---------- */
@media (max-width: 899px) {
  .work__grid { grid-template-columns: 1fr; gap: 32px; }
  .work__fig { position: static; }
  .work__open .work__frame { width: 100%; }
  .work__frame { max-height: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .work__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; }
  .work__open .work__frame { width: min(100%, calc((100svh - 150px) * (var(--ar)))); }
}
@media (max-width: 719px) {
  .page { padding-top: calc(64px + var(--st) + 40px); padding-bottom: 72px; }
  .series { margin-top: 72px; }
  .series__head { grid-template-columns: 1fr; }
  .cards { gap: 48px; }
  .work__actions .pill, .contact__actions .pill { width: 100%; }
  .pager { margin-top: 72px; }
  .facts > div { grid-template-columns: 6em 1fr; }
  .ask { grid-template-columns: minmax(0, 1fr) auto; }
  .ask__date { grid-row: 2; }
}