/* Vivianne Jorritsma - production manager for film and art
   Static rebuild of the former WordPress/Elementor site. */

@font-face {
  font-family: 'Nokora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nokora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-text:      #232528;
  --color-heading:   #2C302E;
  --color-ghost:     #FFFFFF;
  --color-button:    #474DE1;
  --color-button-hi: #BAB0D7;
  --color-button-tx: #F5F5F5;

  --font: 'Nokora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --size-title: clamp(1.5rem, 1.05rem + 1.9vw, 2.1875rem); /* -> 35px */
  --size-body:  0.9375rem;                                  /*    15px */

  --measure: 1300px;
  --gutter:  clamp(1.25rem, 5vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--color-text);
  background-color: #F5F5F5;
  background-image: linear-gradient(250deg, #F5F5F5 35%, #E4F2FF 90%);
  background-repeat: no-repeat;
}

a { color: inherit; }

img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6em 1em;
  background: var(--color-button);
  color: var(--color-button-tx);
  z-index: 10;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- header */

.site-header {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 8rem) var(--gutter) 0;
}

/* Deliberately near-invisible on the pale ground: this ghost-white wordmark
   is how the original site read, and it pairs with the white scribble rule. */
.site-title {
  margin: 0;
  font-size: var(--size-title);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-ghost);
}

.button {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.75em 1.4em;
  margin-bottom: 2rem;
  float: right;
  font-size: var(--size-body);
  font-weight: 700;
  line-height: 1;
  color: var(--color-button-tx);
  background-color: var(--color-button);
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.button:hover,
.button:focus-visible { background-color: var(--color-button-hi); }

/* ----------------------------------------------------------------- works */

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 7rem);
}

.works {
  clear: both;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work + .work { margin-top: 2.75rem; } /* was a 44px Elementor gap */

.work { position: relative; }

.work summary {
  display: block; /* hides the default disclosure marker */
  font-size: var(--size-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-heading);
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.work summary::-webkit-details-marker { display: none; }
.work summary:hover { opacity: 0.65; }
.work summary:focus-visible {
  outline: 2px solid var(--color-button);
  outline-offset: 4px;
}

.work__body { padding-top: 0.75rem; }

.work__text { max-width: 46rem; }
.work__text p { margin: 0 0 0.15em; }
.work__text p:first-child { font-weight: 700; }
.work__text a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* -------------------------------------------------- image: default (flow)
   Narrow screens get the still inline, below the credits, once the row is
   open. The <img> lives outside the <details> on purpose: a closed <details>
   does not render its children, so an image inside it could never be
   revealed on hover. */

.work__img {
  display: none;
  width: 100%;
  max-width: 30rem;
  margin-top: 1.5rem;
}

.work:has(details[open]) .work__img { display: block; }

/* ---------------------------------- image: reveal on wide screens
   The original showed the still as a background image on the right of the
   row, on hover only. Here it is a real <img>, sized consistently instead of
   collapsing to the height of the closed row, and it is also revealed when a
   row is opened - so touch users, who never hover, see it too. */

@media (min-width: 60rem) {

  .work__img {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    width: min(36%, 26rem);
    max-width: none;
    max-height: 9rem;
    margin: 0;
    object-fit: contain;
    object-position: center right;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, max-height 0.35s ease;
  }

  /* :focus-visible, not :focus-within - a mouse click focuses the <summary>
     and that focus outlives the click, which would leave the still stuck on
     screen after the row is closed again. This way keyboard users still get
     the preview, and mouse users do not get a sticky one. */
  .work:hover .work__img,
  .work:has(summary:focus-visible) .work__img,
  .work:has(details[open]) .work__img { opacity: 1; }

  /* Open rows are taller, so the still is shown larger. The min-height
     replaces the run of blank "." paragraphs the original used as a spacer -
     and only panels that actually carry a still need the reserved room. */
  .work:has(.work__img) .work__body { min-height: 13rem; }
  .work:has(details[open]) .work__img { max-height: 15rem; }
}

/* --------------------------------------------------------------- divider */

.divider {
  display: block;
  width: 100%;
  margin: clamp(3rem, 8vw, 6rem) 0;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
  font-size: 0.8125rem;
  color: #8C9299;
}
.site-footer p { margin: 0; }

/* -------------------------------------------------------------- a11y */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}