@font-face {
  font-family: "Forevs";
  src: url("assets/fonts/Forevs-Regular.woff2") format("woff2"),
    url("assets/fonts/Forevs-Regular.woff") format("woff"),
    url("assets/fonts/Forevs-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: Georgia, "Times New Roman", serif;
  /* Theme colours; index.html picks one of four at random on load. */
  --bg: #dbf2ff;
  --ink: #0600d9;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: clip;
}
main {
  padding: 6.5rem 1.5rem 10rem;
}
.intro {
  /* Intro type stays at --type-size and only shrinks once the longest line
     (20.1em wide) would come within --type-margin of the window edges. */
  --type-size: 2.25rem;
  --type-margin: 3.5rem;
  --type: clamp(
    1.375rem,
    calc((100vw - 2 * var(--type-margin)) / 20.1),
    var(--type-size)
  );
  max-width: 1945.333px;
  margin: 0 auto;
  text-align: center;
}
.intro h1 {
  margin: 0 0 2.75rem;
  line-height: 1.1;
}
.intro p {
  margin: 0;
}
/* Same scale as the old outlined artwork: 67-unit type in a 1459-unit line at half width. */
.intro-text {
  font-family: "Forevs", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, serif;
  font-weight: 400;
  font-size: var(--type);
  line-height: 1.26;
  color: var(--ink);
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}
.name-logo {
  display: block;
  /* Sized from the intro type so the two always scale together. */
  width: calc(var(--type) * 4.968);
  height: auto;
  margin: 0 auto;
}

.work {
  --camera-width: min(14.4rem, calc((100vw - 3rem) * 0.175));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5rem;
  padding-bottom: calc(var(--camera-width) * 2);
}
.camera-button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  z-index: 3;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}
.camera-button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 8px;
  border-radius: 1rem;
}
.camera-button:disabled {
  cursor: default;
}
.camera {
  display: block;
  width: var(--camera-width);
  height: auto;
}
.print-canvas {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.camera-lip {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--camera-width);
  height: auto;
  clip-path: inset(0 0 10.16%);
  z-index: 5;
  pointer-events: none;
}
.work.is-printing .print-canvas,
.work.is-printing .camera-lip {
  display: block;
}

/* The whole pile is projected onto one tabletop plane; print.js uses the same values. */
.photo-stack {
  --pile-tilt: 50deg;
  --pile-depth: 4.9; /* perspective distance in camera widths */
  position: relative;
  left: calc(var(--camera-width) * -0.00815558);
  isolation: isolate;
  width: calc(var(--camera-width) * 0.79297365);
  margin-top: calc(var(--camera-width) * 0.1);
  transform-origin: 50% 0;
  transform: perspective(calc(var(--camera-width) * var(--pile-depth)))
    rotateX(var(--pile-tilt));
}
.work.is-printing .photo-stack > .polaroid:not(.printed-polaroid),
.photo-stack.has-prints > .polaroid:not(.printed-polaroid) {
  visibility: hidden;
}

/* Instant-film proportions: even top and sides, deeper bottom margin. */
.polaroid {
  margin: 0;
  padding: 5.5% 5.5% 16%;
  background: #fff;
  border-radius: calc(var(--camera-width) * 0.022);
}
.project-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #ffb9bd;
  border-radius: 1px;
}
.printed-polaroid {
  position: absolute;
  inset: 0;
  transform-origin: 50% 65%;
  /* Shadows are tinted with the theme ink so they sit naturally on the ground. */
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 16%, transparent),
    0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent);
  /* Cards already on the table slide when a new print shoves into them. */
  transition: transform var(--push-duration, 1.4s)
    cubic-bezier(0.18, 0.75, 0.25, 1);
}
/* Printed sheets have no shadow in flight, so it settles in after the handoff. */
.printed-polaroid.camera-photo {
  /* Prints from the camera keep the original neutral grey shadow. */
  box-shadow: 0 6px 18px #0000001a, 0 1px 3px #0000000d;
}
/* Only used when print.js has flightShadow off. */
.printed-polaroid.camera-photo.shadow-fade {
  animation: shadow-in 0.6s ease-out both;
}
@keyframes shadow-in {
  from {
    box-shadow: 0 0 0 #0000, 0 0 0 #0000;
  }
}

@media (max-width: 600px) {
  main {
    padding-top: 3.5rem;
  }
  .intro h1 {
    margin-bottom: 2.25rem;
  }
  .intro-text br {
    display: none;
  }
  main {
    padding-bottom: 4rem;
  }
  .work {
    /* Bigger camera on phones; the pile is pulled in to make room. */
    --camera-width: min(12.12rem, calc((100vw - 2rem) * 0.235));
    margin-top: 3.25rem;
    padding-bottom: calc(var(--camera-width) * 1.85);
  }
  .photo-stack {
    --pile-spread: 0.72;
  }
}
@media (prefers-reduced-motion: reduce) {
  .printed-polaroid.camera-photo.shadow-fade {
    animation: none;
  }
  .printed-polaroid {
    transition: none;
  }
}

/* Flash: a glow in the flash window plus a soft bloom, laid over the camera image.
   Positions are measured from camera.png (797 × 817); print.js animates opacity. */
.camera-flash {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--camera-width);
  aspect-ratio: 797 / 817;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.camera-flash::before {
  content: "";
  position: absolute;
  left: 8.78%;
  top: 25.34%;
  width: 17.31%;
  height: 12.61%;
  border-radius: 4%;
  background: radial-gradient(
    ellipse at 50% 45%,
    #fffdf5d9 0%,
    #fff4d9a6 55%,
    #ffe6bd73 100%
  );
}
.camera-flash::after {
  content: "";
  position: absolute;
  left: 17.44%;
  top: 31.64%;
  width: calc(60% * var(--flash-bloom, 1));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff8e699 0%,
    #fff3d93d 30%,
    #fff3d900 68%
  );
}

/* Contact links under the pile. */
.contact {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
}
.contact a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  transition: color 0.2s ease, background-color 0.2s ease;
}
@media (hover: hover) {
  .contact a:hover {
    color: var(--ink);
    background-color: color-mix(in srgb, var(--ink) 10%, transparent);
  }
}
.contact a {
  -webkit-tap-highlight-color: transparent;
}
.contact a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.contact svg {
  width: 1.375rem;
  height: 1.375rem;
  stroke-width: 2.25;
}