/* ==========================================================================
   PROJECT PAGE — triptych
   Three columns, each scrolling on its own (martina gerardi). The middle
   column carries the film and the finished work, so it is twice the width of
   the two side columns, which always match each other.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.pmast {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: grid;
  /* back link, centred title, and an empty third cell to balance it */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: var(--mast-h);
  padding-inline: clamp(0.85rem, 1.6vw, 1.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.pmast__back {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  text-decoration: none;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}

.pmast__back:hover,
.pmast__back:focus-visible { color: var(--ink); }

.pmast__badge {
  width: 28px;
  height: 28px;
  transition: transform 0.6s var(--ease);
}

.pmast__back:hover .pmast__badge { transform: rotate(-18deg); }

.pmast__title {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

/* the balancing cell */
.pmast::after { content: ""; }

/* --------------------------------------------------------------------------
   The triptych
   -------------------------------------------------------------------------- */

:root { --mast-h: 3.25rem; }

/* Middle column double the width of each side; the 260px floor keeps the
   sides readable on narrower screens before the layout stacks. */
.triptych {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr minmax(260px, 1fr);
  height: 100vh;
  height: 100svh;
  padding-top: var(--mast-h);
}

.panel {
  position: relative;
  overflow: auto;
  border-left: 1px solid var(--rule);
  scrollbar-width: thin;
}

.panel:first-child { border-left: 0; }

.panel::-webkit-scrollbar { width: 9px; height: 9px; }
.panel::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 99px;
  border: 3px solid var(--paper);
}
.panel::-webkit-scrollbar-thumb:hover { background: var(--peri); }

/* --- column heading ----------------------------------------------------- */
.panel__tag {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.8rem clamp(0.9rem, 1.4vw, 1.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel__tag b {
  color: var(--amber);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   The media canvas
   -------------------------------------------------------------------------- */

.panel--canvas { container-type: inline-size; }

/* Content is sized against its own column, so the wide middle column carries
   large type and large media while the narrower sides stay proportionate,
   down to a legibility floor below which the text simply rewraps. */
.panel--canvas .canvas {
  width: 100%;
  max-width: 34em;
  margin-inline: auto;
  padding: 2em 1.6em 8em;
  font-size: clamp(14px, 100cqw / 34, 26px);
  line-height: 1.5;
}

/* the brief keeps fixed rem type, independent of column width */
.panel--brief .canvas {
  padding: clamp(1.4rem, 2.2vw, 2.4rem) clamp(1rem, 1.5vw, 1.6rem) 6rem;
}

/* --------------------------------------------------------------------------
   Type inside a canvas — all em, so it tracks the column
   -------------------------------------------------------------------------- */

.canvas h2 {
  font-size: 1.55em;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.canvas h3 {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.canvas p {
  font-size: 0.86em;
  line-height: 1.55;
  max-width: 42em;
}

.canvas p + p { margin-top: 1em; }

.prose { margin: 2.4em 0; }
.prose--lead p { font-size: 0.95em; }

.prose__rule {
  height: 1px;
  background: var(--rule);
  margin-bottom: 1.4em;
}

/* --------------------------------------------------------------------------
   Figures — the collage rhythm, after martina gerardi
   -------------------------------------------------------------------------- */

.fig {
  position: relative;
  margin: 1.5em 0;
}

.fig img,
.fig video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-warm);
}

.fig figcaption {
  margin-top: 0.5em;
  font-size: 0.62em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* widths are percentages of an em-sized canvas */
.fig--full  { width: 100%; }
.fig--wide  { width: 86%; }
.fig--mid   { width: 68%; }
.fig--small { width: 50%; }

.fig--right  { margin-left: auto; }
.fig--centre { margin-inline: auto; }

.fig--tilt-a { transform: rotate(-1.1deg); }
.fig--tilt-b { transform: rotate(1.4deg); }

/* two side by side */
.pair {
  display: flex;
  gap: 0.7em;
  margin: 1.5em 0;
  align-items: flex-start;
}

.pair .fig { width: 100%; margin: 0; }

/* a deliberate overlap, as in the reference */
.fig--lift { margin-top: -3.5em; }

/* the film gets its own frame */
.film {
  width: 100%;
  margin: 0 0 2em;
}

.film video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

/* --------------------------------------------------------------------------
   Left column — the brief
   -------------------------------------------------------------------------- */

.brief__title {
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 1.5rem;
}

.brief p {
  font-size: 0.95rem;
  line-height: 1.55;
}

.brief p + p { margin-top: 1em; }

.facts {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
}

.fact {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.fact__k {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.fact__v {
  font-size: 0.95rem;
  line-height: 1.45;
}

.brief__next {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.brief__next span { color: var(--amber); transition: transform 0.5s var(--ease); }
.brief__next:hover span { transform: translateX(0.35em); }

/* --------------------------------------------------------------------------
   Stacked layout — phones, tablets, reduced motion
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .triptych {
    display: block;
    height: auto;
    padding-top: var(--mast-h);
  }

  .panel {
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .panel:first-child { border-top: 0; }

  /* stacked: each section runs full width */
  .panel--canvas .canvas {
    width: auto;
    font-size: clamp(15px, 4.2vw, 18px);
    padding: 1.5em 1.1em 3em;
  }

  .panel--canvas { container-type: normal; }



  /* stacked masthead: back + title only */
  .pmast { grid-template-columns: auto 1fr; }
  .pmast__back span { white-space: nowrap; }
  .pmast__title { text-align: right; }

  .fig--wide, .fig--mid, .fig--small { width: 100%; }
  .fig--tilt-a, .fig--tilt-b { transform: none; }
  .fig--lift { margin-top: 1.5em; }
}

/* --------------------------------------------------------------------------
   Deck — a pile of prints that shuffles, one photograph at a time
   -------------------------------------------------------------------------- */

.deck {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 2em 0;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.deck img {
  position: absolute;
  max-width: 84%;
  max-height: 84%;
  width: auto;
  height: auto;
  background: var(--paper);
  padding: 0.35em;
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.10),
              0 10px 26px rgba(20, 22, 28, 0.16);
  opacity: 0;
  /* each card carries its own scatter, set once by the script */
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  will-change: transform, opacity;
}

/* the three that are showing: the face, and two peeking out behind it */
.deck img[data-slot="0"] { opacity: 1; z-index: 3; }
.deck img[data-slot="1"] { opacity: 1; z-index: 2; }
.deck img[data-slot="2"] { opacity: 1; z-index: 1; }

.deck__count {
  position: absolute;
  right: 0;
  bottom: -1.6em;
  z-index: 5;
  font-size: 0.62em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* held still for anyone who would rather it did not move */
@media (prefers-reduced-motion: reduce) {
  .deck img[data-slot] { transition: none; }
}

/* links inside the facts list, e.g. a collaborator's Instagram */
.fact__v a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}

.fact__v a:hover,
.fact__v a:focus-visible {
  color: var(--navy);
  text-decoration-color: var(--navy);
}

/* a deck with no frame: the photographs sit edge to edge as they are */
.deck--flush img {
  padding: 0;
  background: none;
  box-shadow: 0 12px 30px rgba(20, 22, 28, 0.22);
}

/* a deck can carry a caption on the left, opposite its counter */
.deck__note {
  position: absolute;
  left: 0;
  bottom: -1.6em;
  z-index: 5;
  margin: 0;
  font-size: 0.62em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   A statement — the raised voice, sized like the home page's definition line
   -------------------------------------------------------------------------- */

/* .canvas p sets 0.86em, so this needs the extra weight to win */
.canvas p.statement {
  margin: 1.8em 0;
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  max-width: 20em;
  color: var(--ink);
}

.canvas p.statement + p.statement { margin-top: -0.5em; }