/*
 * The part of the public site's CSS that staff do not edit.
 *
 * Everything else -- tokens, base, layout, sections -- is a
 * Phaedo::Cms::Stylesheet row, edited in the admin. This stays on disk because
 * it is plumbing rather than design: nothing here is a decision anyone would
 * want to make through a CMS, and a mistake in it breaks the page in ways that
 * are hard to recognise as a CSS problem at all.
 *
 * The layer order is declared here rather than in the CMS stylesheet, because
 * the first sheet to declare it is the one that fixes it and this one is linked
 * first. The CMS sheet only has to open @layer blocks by name.
 */

@layer tokens, reset, base, layout, components;

/* The small, boring part. Nothing here is opinionated about how the site looks. */

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-height: 100svh;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  /* Long words and URLs should wrap rather than push the page sideways. */
  p,
  li,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
  }

  ul[class],
  ol[class] {
    padding: 0;
    list-style: none;
  }

  :where(a) {
    color: inherit;
  }

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

/*
 * The homepage's table of prints: where each one lies, how big it is, and what
 * it does under the pointer. Plumbing, like the rest of this file -- without it
 * the prints stack down the page as a column of images nothing can move -- and
 * in the components layer, so the CMS sheet can restyle any of it.
 *
 * Here rather than in a sheet the homepage links itself: Turbo appends a page's
 * own sheet after the ones already in the head, so on a visit from another page
 * that sheet came after the CMS's and took the last word from it.
 */
@layer components {
  /* The table fades out at its top and bottom, so it needs little of the
     page's usual space above and below it: the fade is the gap. */
  .page__main:has(> .print-table) {
    padding-block: var(--space-sm, 0.75rem);
  }

  .print-table {
    /* How wide an inch of paper is drawn. An 8x10 contact sheet comes out at
       more than a quarter of a wide screen, and never so small on a phone that a
       test strip is a sliver. */
    --print-inch: clamp(1.54rem, 3.64vw, 3.64rem);

    position: relative;

    /* The width of the page, out past the column the content sits in and the
       gutter either side of it, but not past the scrollbar, as 100vw would. */
    max-width: none;
    margin-inline: calc(var(--gutter, 0px) * -1);
    height: clamp(32rem, 85svh, 64rem);

    /* A print pushed to the edge goes over it, not into a sideways scroll.
       hidden first for a Safari older than 16, which has no clip. */
    overflow: hidden;
    overflow: clip;

    /* Raising a print can never lift it over the masthead or the footer. */
    isolation: isolate;

    /* Towards the masthead above and the footer below, the prints fade into
       the page rather than ending in a straight line along the table's edge.
       A mask, so whatever the page's paper is, they fade into it. */
    --print-fade: min(5rem, 15%);
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent,
      #000 var(--print-fade),
      #000 calc(100% - var(--print-fade)),
      transparent
    );
    mask-image: linear-gradient(
      to bottom,
      transparent,
      #000 var(--print-fade),
      #000 calc(100% - var(--print-fade)),
      transparent
    );
  }

  .print {
    position: absolute;
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    width: calc(var(--width) * var(--print-inch));
    max-width: none;
    height: auto;
    aspect-ratio: var(--width) / var(--height);

    /* Placed by its centre, so a tilt turns it where it lies. */
    translate: -50% -50%;
    rotate: var(--tilt);
    filter: drop-shadow(0.1rem 0.25rem 0.35rem rgb(0 0 0 / 0.25));
    cursor: grab;

    /* A finger swiping across a print scrolls the page and pinches zoom it:
       the controller only takes a finger that rests on a print a moment, and
       stops the scroll itself once it has. */
    touch-action: manipulation;

    /* The pointer moves the print rather than selecting it, dragging it off
       as a file, or, held still on a phone, offering to save it. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
  }

  /* In the hand: a little larger, and further off the table. */
  .print--lifted {
    scale: 1.03;
    filter: drop-shadow(0.35rem 0.8rem 0.9rem rgb(0 0 0 / 0.3));
    cursor: grabbing;
  }

  /*
   * A bio's picture, opened larger in a popover. Behaviour, not design, so it
   * lives here and not in the site stylesheet. The button, not the img, is the
   * item the section lays out beside the words now, so it takes what the site
   * stylesheet gives .bio__picture -- the grid area and the width, and the
   * flex sizing of the older flex layout -- and the picture fills it. Without
   * the area the button is placed by the grid's auto-placement, in the row of
   * the name, and the words drop below it.
   */
  .bio__open {
    grid-area: picture;
    flex: 0 1 12rem;
    width: 100%;
    max-width: 12rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
  }

  /*
   * The browser centres a popover with margin: auto, which the reset's
   * * { margin: 0 } beats, as any author rule beats the browser's. Put it back.
   */
  .bio__enlarged {
    margin: auto;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }

  /*
   * Important, so a rule of the site stylesheet's for div or img cannot show
   * the picture while it is closed or leave it as wide as the upload: an
   * important declaration in a layer beats a normal one. Only where popovers
   * work: a browser without them drops the :popover-open rule, and would draw
   * the large picture on the page for good.
   */
  @supports selector(:popover-open) {
    .bio__enlarged:not(:popover-open) {
      display: none !important;
    }
  }

  @supports not selector(:popover-open) {
    .bio__enlarged {
      display: none;
    }

    .bio__open {
      cursor: auto;
    }
  }

  .bio__enlarged button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-out;
  }

  .bio__enlarged img {
    max-width: 96vw !important;
    max-height: 96dvh !important;
    object-fit: contain;
  }

  .bio__enlarged::backdrop {
    background: rgb(0 0 0 / 0.85);
  }
}