/* © Mathis Dabbarh Marsepoil. All rights reserved. See LICENSE. */
/* ---------------------------------------------------------------
   zero-margin full-bleed system, measured off tatjanastuermer.de:
   no container, no max-width, no centering. images run to the screen
   edges; the only separation is a 2px line so two frames never read
   as one. text bands run the full width in tight type.
   --------------------------------------------------------------- */

:root {
  --font-serif: Georgia, "Times New Roman", Times, serif;
  /* the only separation between image frames */
  --seam: 2px;
  /* images stay edge-to-edge; type gets just enough room not to sit on the
     glass, the way the right-hand column does on the Monteverde reference */
  --text-inset: clamp(12px, 1.2vw, 28px);
}

.serif {
  font-family: var(--font-serif);
}

/* the hero and the scroll below it ------------------------------- */

/* home.css pins the hero with position:fixed, which paints it above the
   content scrolling under it and shows through any gap that content
   doesn't cover. image and rotation unchanged — it just sits in flow. */
body[data-page="home"] .hero {
  position: relative;
  width: 100%;
  height: 100vh;
}

body[data-page="home"],
body[data-page="worksingle"] {
  background: var(--bg);
  overflow-x: hidden;
}

.scroll-index {
  position: relative;
  z-index: 1;
  background: var(--bg);
  width: 100%;
}

/* WORK BLOCK ----------------------------------------------------- */

.wb {
  display: block;
}

/* the description sits in an enclosed box — the rule runs from the image
   above to the image below and out to both edges, same 2px as the seam
   between frames so it reads as one system */
.wb-band {
  border: var(--seam) solid var(--fg);
}

/* three-column info band — facts left, title + text centre, credits right */
.wb-text {
  display: grid;
  grid-template-columns: 22% minmax(0, 1fr) 20%;
  column-gap: clamp(16px, 2.5vw, 48px);
  padding: 9vh var(--text-inset) 7vh;
  font-family: var(--font-serif);
  align-items: start;
}

.wb-col > * {
  display: block;
}
.wb-col--side {
  text-align: right;
}

.wb-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  color: var(--fg);
  opacity: 1;
}
a.wb-title:hover {
  opacity: .55;
}

.wb-year,
.wb-medium,
.wb-details,
.wb-credit,
.wb-label {
  font-size: .9rem;
  line-height: 1.3;
  opacity: .55;
}

/* exhibition lines and outbound links sit under the credits, separated by a
   blank line rather than a rule */
.wb-shown:first-of-type,
.wb-link:first-of-type {
  margin-top: .9em;
}
a.wb-link {
  opacity: .55;
}
a.wb-link:hover {
  opacity: 1;
}

.wb-abstract {
  margin: 0;
  font-size: .95rem;
  line-height: 1.35;
}

/* IMAGE SEQUENCE ------------------------------------------------- */

/* the gaps show the container behind the frames, so colouring the container
   colours the seams. --seam-color comes from a work's `accent` field. */
.wb-seq {
  display: flex;
  flex-direction: column;
  gap: var(--seam);
  width: 100%;
  background: var(--seam-color, transparent);
}

.wb-row {
  display: flex;
  gap: var(--seam);
  width: 100%;
  background: var(--seam-color, transparent);
}

/* one image at a set fraction of the width, left, the rest held open for
   copy — the aside paints over the seam colour so only the 2px shows */
.wb-row--solo > .wb-frame {
  flex: 0 0 var(--w, 50%);
}
.wb-aside {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg);
  font-family: var(--font-serif);
  font-size: .95rem;
  line-height: 1.45;
  padding: 0 var(--text-inset);
}
.wb-aside p {
  margin: 0;
  max-width: 62ch;
}

/* every frame is cropped to a house ratio (--r, set per image at build time)
   so a row never ends up with frames of different heights and odd source
   files can't introduce their own letterboxing */
.wb-frame {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

/* the crop box — every shot is cropped to a house ratio (--r, set per image
   at build time) so a row never ends up with frames of different heights and
   odd source files can't bring their own letterboxing */
.wb-shot {
  display: block;
  aspect-ratio: var(--r, 3 / 2);
  overflow: hidden;
  background: var(--fg-faint);
}

.wb-shot img,
.wb-shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* click-to-play video: a circle with a play mark, in the style of the home
   and theme dots. white because it always sits over footage. hidden while
   the video plays; clicking the video pauses it. */
.wb-shot {
  position: relative;
}
.wb-shot video {
  cursor: pointer;
}
.wb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border: var(--seam) solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
.wb-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.wb-play:hover {
  background: rgba(0, 0, 0, .45);
}
.is-playing .wb-play {
  opacity: 0;
  pointer-events: none;
}

/* big left, two stacked right — one row's height for three images, for
   works that shouldn't take a full screen each */
/* `width` on the lead image sets its share of the row (50 = half and half);
   without it the lead takes two thirds */
.wb-row--lead {
  display: grid;
  grid-template-columns: var(--lead-cols, 2fr 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--seam);
}
.wb-row--lead > .wb-frame {
  min-height: 0;
}
.wb-row--lead > .wb-frame:first-child {
  grid-row: 1 / span 2;
}
/* the lead sets the row height; the stacked pair just fills its half */
.wb-row--lead > .wb-frame:not(:first-child) .wb-shot {
  aspect-ratio: auto;
  height: 100%;
}
.wb-row--lead > .wb-frame:not(:first-child) {
  display: flex;
}
.wb-row--lead > .wb-frame:not(:first-child) .wb-shot {
  flex: 1 1 auto;
  width: 100%;
}

.wb-frame figcaption {
  font-family: var(--font-serif);
  font-size: .8rem;
  line-height: 1.3;
  opacity: .5;
  padding: 6px var(--seam) 0;
}

/* ARCHIVE --------------------------------------------------------- */

/* the overlay text runs uppercase. scoped here rather than in archive.css so
   that file stays exactly as the old site left it. */
body[data-page="archive"] .overlay-meta {
  text-transform: uppercase;
}

/* the categories sit at the top of the page and scroll away with it instead
   of staying pinned over the images. archive.css pins the bar and archive.js
   pads the grid to clear a pinned bar — both are overridden here so those
   files stay as they were. the page padding puts the bar where the pinned
   one used to sit. */
body[data-page="archive"] .archive-page {
  padding-top: 100px;
}
body[data-page="archive"] .archive-filters {
  position: static;
}
body[data-page="archive"] .archive-grid {
  padding-top: 1.5rem !important;
}
@media (max-width: 768px) {
  body[data-page="archive"] .archive-page {
    padding-top: 64px;
  }
}

/* FOOTER --------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 1;
  padding: 6vh var(--text-inset) 8vh;
  background: var(--bg);
  color: var(--fg-mute);
  font-family: var(--font-serif);
  font-size: .8rem;
  line-height: 1.4;
}
@media (max-width: 768px) {
  /* the theme dot and now-playing sit at the bottom of the screen on phones */
  .site-footer {
    padding-bottom: 150px;
  }
}

/* INFO ----------------------------------------------------------- */

/* fills the viewport rather than sitting as a short band with dead space
   under it — there's only one block on this page */
.info-page {
  min-height: 100vh;
}
.info-page .wb-text {
  min-height: 100vh;
  align-content: center;
}
.info-page .wb-abstract em {
  font-style: italic;
}

/* PROJECT PAGE EXTRAS -------------------------------------------- */

/* a work's long text as a spread of two portrait pages, each half the width
   and √2 as tall (A-series, the proportion of the InDesign layout). every size
   inside is in vw, so text that fits the left page at one screen width fits
   at all of them — which lets the build decide once (spreadMode in
   .eleventy.js):
   - fits the left page: text there, one of the work's images cropped to fill
     the right page, a 2px line between (accent colour, else foreground).
   - doesn't: two balanced columns starting on the left page and running onto
     the right, the same centre line, no image. */
.wb-lede {
  --page-pad-y: 4.5vw;
  --page-pad-x: 3vw;
  --line-color: var(--seam-color, var(--fg));
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70.7vw;
  gap: var(--seam);
  background: var(--line-color);
}
.wb-lede-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad-y) var(--page-pad-x);
  background: var(--bg);
  font-family: var(--font-serif);
  font-size: 1.65vw;
  line-height: 1.35;
  text-align: center;
  hyphens: auto;
}
.wb-lede-inner {
  width: 100%;
}
.wb-lede-text p {
  margin: 0 0 1.35em;
  orphans: 3;
  widows: 3;
}
.wb-lede-text p:last-child {
  margin-bottom: 0;
}
/* "### Text by …" in a work's markdown: a small credit line */
.wb-lede-text h3 {
  margin: 0 0 2em;
  font-size: .55em;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}
.wb-lede-text * + h3 {
  margin-top: 4em;
}
/* "#### subheading" in a work's markdown */
.wb-lede-text h4 {
  margin: 2em 0 .7em;
  font-size: 1em;
  font-weight: 400;
  font-style: italic;
}
/* a heading never ends a column — it stays with the paragraph after it */
.wb-lede-text h3,
.wb-lede-text h4 {
  break-after: avoid;
  break-inside: avoid;
}
.wb-lede-text strong {
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wb-lede-image {
  position: relative;
  min-width: 0;
  margin: 0;
  background: var(--bg);
}
.wb-lede-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wb-lede--columns {
  grid-template-columns: 1fr;
}
/* the centre line runs the full page height like the image spread's seam,
   which column-rule wouldn't (it only spans the text) */
.wb-lede--columns .wb-lede-text {
  background:
    linear-gradient(to right,
      transparent calc(50% - 1px), var(--line-color) calc(50% - 1px),
      var(--line-color) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--bg);
}
.wb-lede--columns .wb-lede-inner {
  column-count: 2;
  column-gap: calc(var(--page-pad-x) * 2);
}

@media (max-width: 900px) {
  .wb-lede {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .wb-lede-text {
    padding: 8vh var(--text-inset);
    font-size: 1.15rem;
  }
  .wb-lede--columns .wb-lede-text {
    background: var(--bg);
  }
  .wb-lede--columns .wb-lede-inner {
    column-count: 1;
  }
  .wb-lede-image {
    aspect-ratio: 4 / 5;
  }
}

.wb-tail {
  padding-top: 5vh;
  padding-bottom: 4vh;
  font-size: .9rem;
  line-height: 1.35;
}

.wb-exh-row {
  display: block;
  opacity: .55;
}
.wb-exh-year {
  display: inline-block;
  min-width: 4em;
  font-variant-numeric: tabular-nums;
}

.wb-nav {
  padding-top: 4vh;
  padding-bottom: 12vh;
  font-size: .9rem;
  border-top: 1px solid var(--fg-faint);
}
.wb-nav a {
  font-family: var(--font-serif);
}

/* NAV LEGIBILITY ------------------------------------------------- */

/* both pages open on a photo the nav sits over, then scroll into plain
   --bg. base.njk toggles .past-hero; these hand the nav back. */
body[data-page="home"].past-hero .menu-items a,
body[data-page="home"].past-hero .mobile-menu a,
body[data-page="home"].past-hero .mobile-menu-toggle,
body[data-page="worksingle"].past-hero .menu-items a,
body[data-page="worksingle"].past-hero .mobile-menu a,
body[data-page="worksingle"].past-hero .mobile-menu-toggle {
  color: var(--fg) !important;
  text-shadow: none !important;
}
body[data-page="home"].past-hero .home-button,
body[data-page="worksingle"].past-hero .home-button {
  border-color: var(--fg) !important;
  background: none !important;
}
body.dark-mode[data-page="home"].past-hero .home-button,
body.dark-mode[data-page="worksingle"].past-hero .home-button {
  background: var(--fg) !important;
}
body[data-page="home"].past-hero .menu-items a::after,
body[data-page="worksingle"].past-hero .menu-items a::after {
  background: var(--fg) !important;
}

/* MOBILE --------------------------------------------------------- */

@media (max-width: 900px) {
  /* three columns squeeze to nothing — stack them, facts first */
  .wb-text {
    grid-template-columns: 1fr;
    row-gap: 1.2em;
  }
  .wb-col--side {
    text-align: left;
  }
  .wb-spread {
    columns: 1;
    column-rule: none;
  }
}

@media (max-width: 768px) {
  .wb-text {
    padding: 7vh var(--text-inset) 5vh;
  }
  /* side-by-side frames get too small to read below this — stack them,
     keeping the same seam so the rhythm doesn't change */
  .wb-row {
    flex-direction: column;
  }
}

/* MOBILE NAV ----------------------------------------------------- */

@media (max-width: 768px) {
  /* two lines at seam weight instead of the boxed three-bar icon; they cross
     into an x when open. drawn in currentColor so they follow the nav's
     white-over-photo and theme colour switching on their own. */
  .mobile-menu-toggle {
    width: 36px;
    height: 36px;
    border: 0 !important;
    background: none;
    opacity: 1;
    z-index: 2300;
  }
  .mobile-menu-toggle::before,
  .mobile-menu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: var(--seam);
    background: currentColor !important;
    box-shadow: none !important;
    transition: transform .25s ease;
  }
  .mobile-menu-toggle::before {
    transform: translate(-50%, -4px);
  }
  .mobile-menu-toggle::after {
    transform: translate(-50%, 3px);
  }
  body.menu-open .mobile-menu-toggle::before {
    transform: translate(-50%, -1px) rotate(45deg);
  }
  body.menu-open .mobile-menu-toggle::after {
    transform: translate(-50%, -1px) rotate(-45deg);
  }

  /* the home circle and the x stay above the open panel, in the panel's
     colours — over the home photo they're forced white, which would vanish on
     a light-mode panel */
  .home-button {
    position: relative;
    z-index: 2300;
  }
  body.menu-open .mobile-menu-toggle {
    color: var(--fg) !important;
  }
  body.menu-open .home-button {
    border-color: var(--fg) !important;
  }

  /* full-screen panel on the page ground instead of the small blurred box,
     links set like the work titles, hairlines between them */
  .mobile-menu {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 96px var(--text-inset) 0 !important;
    background: var(--bg) !important;
    backdrop-filter: none !important;
    border: 0 !important;
    transform: none !important;
    transition: opacity .25s ease;
  }
  .mobile-menu a {
    color: var(--fg) !important;
    font-family: var(--font-serif);
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 18px 0 !important;
    opacity: .9;
    border-top: 1px solid var(--fg-faint) !important;
  }
  .mobile-menu a:last-child {
    border-bottom: 1px solid var(--fg-faint);
  }
  body.menu-open {
    overflow: hidden;
  }
}