/*
  Home. Structure after ruehaus.com, surface after the "frankly" board.
  See ARCHITECTURE.md §17 for the reasoning; this file is the how.

  Board vocabulary used here, and where:
    stone / putty / sage card stock  -> section and plate grounds
    greyscale photography            -> every plate, until it is in view
    glassine sheets                  -> .mast__glassine, .arc-plate__glassine
    one cobalt pattern mark          -> .mast__print
    tiny typewriter labels, [ ]      -> .spec, bracketed kickers
    "[ hello, it's me ]" mono label  -> .mast__hello (in .mast__intro, with the statement)
    catalogue record card            -> .arc-card
*/

/* ---------- Header on the home page ----------
   Rue Haus's header is a line of small labels that scrolls away with the page.
   Here it has to: the archive rows stick to the top of the screen, and a sticky
   header that reappears on scroll-up would land on top of them. */
.page-home .site-header {
  position: relative;
  background: transparent;
  border-bottom: 0;
}

.page-home .site-header--hidden {
  top: 0;
}

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

.mast {
  padding-top: var(--space-4);
}

.mast__bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.mast__name {
  padding-block: var(--space-6) var(--space-7);
}

/* Eight textured marks in a row, standing where the studio name was. */
.mast__marks {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 1.6vw, 28px);
}

/*
  One mark. The texture PNG is the mask, not the picture: its alpha carries the
  print texture, and the fill underneath is whatever colour we want. That is what
  lets a hover repaint the ink rather than swap in a second image.
*/
.mast__m {
  display: block;
  aspect-ratio: var(--ar);
  background-color: var(--color-text);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  transform: rotate(var(--r, 0deg)) translateY(var(--lift, 0));
  transition:
    background-color var(--duration-short) var(--ease-default),
    transform var(--duration-medium) var(--ease-default);
}

/* A hand placing prints, not a grid of icons: each one a touch off square. */
.mast__m:nth-child(1) { --r: -2deg; }
.mast__m:nth-child(2) { --r: 1.5deg; }
.mast__m:nth-child(3) { --r: -1deg; }
.mast__m:nth-child(4) { --r: 2deg; }
.mast__m:nth-child(5) { --r: -1.5deg; }
.mast__m:nth-child(6) { --r: 1deg; }
.mast__m:nth-child(7) { --r: -2.5deg; }
.mast__m:nth-child(8) { --r: 1.5deg; }

.mast__m:hover {
  background-color: var(--color-accent);
  --lift: -6px;
}

@media (max-width: 760px) {
  .mast__marks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-4);
  }

  /* Two by two, rather than three and an orphan. */
  .mast__vols {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* :nth-child(n) so this outranks the per-mark tilts above. */
  .mast__m:nth-child(n) {
    --r: 0deg;
    transition: background-color var(--duration-short) linear;
  }

  .mast__m:hover {
    --lift: 0;
  }
}

.mast__vols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.mast__vols a {
  position: relative;
  padding-block: var(--space-1);
  transition: color var(--duration-short) var(--ease-default);
}

/* Same hairline the nav uses, in cobalt, drawn in from the left. */
.mast__vols a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transition: right var(--duration-medium) var(--ease-default);
}

.mast__vols a:hover,
.mast__vols a:focus-visible {
  color: var(--color-accent);
}

.mast__vols a:hover::after,
.mast__vols a:focus-visible::after {
  right: 0;
}

.mast__plate {
  background-color: var(--color-sage);
  background-image: var(--texture-scan);
  background-size: var(--texture-scan-size);
  background-blend-mode: multiply;
  margin-top: var(--space-6);
  overflow: hidden;
}

/*
  One section, on the same 12-column grid as the archive plates: the collage takes
  seven columns, the introduction the last five. The collage's pieces are placed in
  percentages of .mast__collage, so they keep their relationship to each other
  whatever width the column ends up.
*/
.mast__plate-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-8);
}

.mast__collage {
  grid-column: 1 / 8;
  position: relative;
  height: clamp(460px, 68vh, 720px);
}

/* The portrait sits straight on the sage, no mount. */
.mast__portrait {
  position: absolute;
  left: 4%;
  top: 6%;
  width: min(54%, 440px);
  transform: rotate(-1.2deg);
}

.mast__portrait img,
.mast__portrait video {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.08) brightness(1.02);
  box-shadow:
    0 1px 2px rgb(40 40 36 / 0.12),
    0 20px 44px -24px rgb(40 40 36 / 0.45);
}

/* A long sheet of glassine laid over the portrait's right edge, clear of the face,
   the way the museum pin lays translucent sheets across its objects. */
.mast__glassine {
  position: absolute;
  z-index: 2;
  left: 52%;
  top: 34%;
  width: 38%;
  height: 60%;
  background: var(--glassine);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.25) inset,
    0 14px 30px -20px rgb(40 40 36 / 0.35);
  transform: rotate(1.2deg);
}

/* One textured mark, big, printed in cobalt on the glassine. The texture is the
   mask's alpha; the colour is the fill. Centred on the sheet. */
.mast__print {
  position: absolute;
  z-index: 3;
  left: 71%;
  top: 40%;
  height: 48%;
  aspect-ratio: 494 / 640;
  translate: -50% 0;
  background-color: var(--color-accent);
  -webkit-mask: url(/assets/brand/marks/collage.webp) center / contain no-repeat;
  mask: url(/assets/brand/marks/collage.webp) center / contain no-repeat;
  transform: rotate(4deg);
}

/*
  The introduction reads like an index card: a bracketed label in the studio's
  hand, the line, a hairline, two sentences, and one clear next step. Everything
  in sentence case; the mono does the talking, Ubuntu does the reading.
*/
.mast__intro {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mast__hello {
  font-family: var(--font-family-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.mast__statement {
  font-size: clamp(1.5rem, 1.05rem + 1.15vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.045em;
  max-width: 17em;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid rgb(27 27 25 / 0.22);
  align-self: stretch;
}

.mast__lede {
  font-size: var(--font-size-base);
  line-height: 1.65;
  max-width: 40ch;
}

.mast__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-7);
}

/* The one filled control on the plate (a .btn--primary), inked cobalt on hover. */
.mast__cta:hover,
.mast__cta:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.mast__link {
  font-family: var(--font-family-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--color-accent);
}

.mast__link:hover,
.mast__link:focus-visible {
  color: var(--color-accent);
}

@media (max-width: 960px) {
  .mast__collage,
  .mast__intro {
    grid-column: 1 / -1;
  }

  .mast__intro {
    max-width: 36rem;
  }
}

@media (max-width: 760px) {
  .mast__bar-mid {
    display: none;
  }

  .mast__collage {
    height: min(700px, 125vw);
  }

  .mast__portrait {
    left: 6%;
    top: 6%;
    width: 64%;
  }

  .mast__glassine {
    left: 20%;
    top: 48%;
    width: 60%;
    height: 48%;
  }

  .mast__print {
    height: auto;
    width: 44%;
    left: 50%;
    top: auto;
    bottom: 4%;
  }
}

/* ---------- Method + services ---------- */

.method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* The fanned note pile can tip a corner past the viewport edge on a narrow
     screen. clip, not hidden: it trims without making a scroll container. */
  overflow-x: clip;
  border-top: 1px solid var(--color-border);
}

.method__left {
  position: relative;
  padding: var(--space-9) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.method__title {
  font-family: var(--font-family-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  /* Rue Haus sets its method name on a tilt; this is the paper version of that,
     a line of type pasted up slightly crooked. */
  transform: rotate(-4deg);
  transform-origin: left bottom;
  max-width: none;
}

.method__title em {
  color: var(--color-accent);
  text-transform: none;
}

.method__intro {
  max-width: 34ch;
  margin-top: var(--space-4);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* The four steps, ruled like the services list opposite so the two columns read as
   a pair: how Frankie works on the left, what she makes on the right. The last
   step is inked cobalt, the point everything before it leads to. */
.process {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 34rem;
  border-top: 1px solid var(--color-text);
}

.process li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-text);
}

.process__n {
  grid-row: span 2;
  padding-top: 0.3em;
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.process__name {
  font-family: var(--font-family-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.process__note {
  grid-column: 2;
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.process li:last-child .process__name {
  color: var(--color-accent);
}

.method__notes-label {
  margin-top: var(--space-6);
}

/* ---------- The pile of working notes ----------
   Five real sheets from three case studies, overlapping at different angles with a
   glassine interleaf between them. Placed by hand in percentages of the pile, so it
   scales as one composition. Every sheet composes one transform from custom
   properties, because four things move it: its resting angle (--rot), the scroll
   fan-out (--fx/--fy x --spread, home.js), the hover lift (--lift) and a drag
   (--dx/--dy, draggable.js). */
.notes {
  --spread: 0;
  position: relative;
  height: clamp(460px, 40vw, 580px);
  margin-top: var(--space-4);
}

.note {
  position: absolute;
  display: block;
  cursor: grab;
  transform:
    translate(
      calc(var(--dx, 0px) + var(--fx, 0px) * var(--spread)),
      calc(var(--dy, 0px) + var(--fy, 0px) * var(--spread) + var(--lift, 0px))
    )
    rotate(calc(var(--rot, 0deg) + var(--frot, 0deg) * var(--spread)));
  transition: transform var(--duration-medium) var(--ease-default);
  touch-action: pan-y;
}

.note.is-dragging {
  cursor: grabbing;
  transition: none;
}

/* Aged a little: the scans are bright office white, and old papers in a folder
   have gone warm. A filter, so the source files stay untouched. */
.note img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.28) saturate(0.85) brightness(0.95) contrast(1.02);
  box-shadow:
    0 1px 2px rgb(40 40 36 / 0.16),
    0 18px 32px -18px rgb(40 40 36 / 0.5);
}

/* Tape holding a sheet down: translucent, slightly crooked, across one corner. */
.note--tape::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 50%;
  width: 34%;
  height: 22px;
  margin-left: -17%;
  background: rgb(236 230 214 / 0.62);
  box-shadow: 0 1px 2px rgb(40 40 36 / 0.12);
  transform: rotate(var(--tape, -3deg));
  pointer-events: none;
}

.note--cutout img {
  box-shadow: none;
  filter: sepia(0.2) drop-shadow(0 6px 8px rgb(40 40 36 / 0.3));
}

/* Pulled up out of the pile: to the front, lifted, and the index tab shows. */
.note:hover,
.note:focus-visible {
  z-index: 30;
  --lift: -10px;
}

/* A file tab: the source of the sheet, tucked under its top edge. */
.note__tab {
  position: absolute;
  left: var(--space-3);
  top: calc(-1 * var(--space-5));
  padding: 2px var(--space-2);
  background: var(--color-bone);
  opacity: 0;
  transition: opacity var(--duration-short) var(--ease-default);
  white-space: nowrap;
}

.note:hover .note__tab,
.note:focus-visible .note__tab {
  opacity: 1;
}

@media (hover: none) {
  .note__tab {
    opacity: 1;
  }
}

/* A tight pile rather than a spread: every sheet overlaps at least two others. */
.note--1 { left: 1%;  top: 5%;  width: 36%; z-index: 1; --rot: -8deg;  --fx: -22px; --fy: 4px;   --frot: -3deg; }
.note--2 { left: 57%; top: 0;   width: 40%; z-index: 2; --rot: 7deg;   --fx: 24px;  --fy: -10px; --frot: 3deg; --tape: 4deg; }
.note--3 { left: 17%; top: 20%; width: 35%; z-index: 4; --rot: -3deg;  --fx: -12px; --fy: 14px;  --frot: -2deg; }
.note--4 { left: 37%; top: 17%; width: 53%; z-index: 5; --rot: 2.5deg; --fx: 16px;  --fy: 18px;  --frot: 2deg; --tape: -5deg; }
.note--5 { left: 3%;  top: 71%; width: 40%; z-index: 6; --rot: -10deg; --fx: -8px;  --fy: 22px;  --frot: -4deg; }

.note__glassine {
  position: absolute;
  z-index: 3;
  left: 9%;
  top: 33%;
  width: 60%;
  height: 44%;
  background: var(--glassine);
  -webkit-backdrop-filter: blur(1.2px);
  backdrop-filter: blur(1.2px);
  box-shadow: 0 10px 24px -18px rgb(40 40 36 / 0.4);
  transform: rotate(-4deg) translateY(calc(var(--spread) * -8px));
  pointer-events: none;
}

@media (max-width: 900px) {
  .notes {
    height: clamp(400px, 96vw, 580px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .note {
    transition: none;
  }

  .note:hover,
  .note:focus-visible {
    --lift: 0px;
  }
}

.method__right {
  padding: var(--space-9) var(--container-pad);
  background-color: var(--color-bone);
  background-image: var(--texture-scan);
  background-size: var(--texture-scan-size);
  background-blend-mode: multiply;
}

/* The left column (steps plus the pile of notes) runs longer than the services, so
   the services ride along beside it, clear of the nav when it slides back in. */
.method__sticky {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.method__heading {
  font-size: var(--font-size-2xl);
}

.services {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-text);
}

.services li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-text);
  font-size: var(--font-size-sm);
  text-align: right;
}

.services__n {
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.method__cta {
  align-self: flex-end;
}

@media (max-width: 900px) {
  .method {
    grid-template-columns: 1fr;
  }

  .method__left,
  .method__right {
    padding-block: var(--space-8);
  }

  .method__sticky {
    position: static;
  }

}

/* ---------- The Archive ---------- */

.archive {
  --row-h: 2.75rem;
}

.archive__title {
  text-align: center;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-block: var(--space-8) var(--space-6);
}

/* A row: name / kind / discipline / place. Sticks at its own slot, so the rows
   collect at the top of the screen like tabs as the plates pass beneath. */
.arc-row {
  position: sticky;
  top: calc(var(--i) * var(--row-h));
  /* A link to #pate lands the row in its own slot, under the rows above it. */
  scroll-margin-top: calc(var(--i) * var(--row-h));
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.55fr) minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  height: var(--row-h);
  padding-inline: var(--container-pad);
  background-color: var(--paper);
  background-image: var(--texture-scan);
  background-size: var(--texture-scan-size);
  background-blend-mode: multiply;
  border-top: 1px solid var(--color-text);
  color: var(--color-text);
  transition: background-color var(--duration-short) var(--ease-default);
}

.arc-row:hover,
.arc-row:focus-visible {
  background-color: var(--color-bone);
}

.arc-row__name,
.arc-row__place {
  font-family: var(--font-family-display);
  font-size: clamp(0.875rem, 0.7rem + 0.6vw, 1.2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arc-row__kind,
.arc-row__disc {
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.arc-row__place {
  text-align: right;
}

.arc-row__arrow {
  display: inline-block;
  margin-left: 0.4em;
  font-family: var(--font-family-body);
  transition: transform var(--duration-short) var(--ease-default),
              color var(--duration-short) var(--ease-default);
}

.arc-row:hover .arc-row__arrow {
  transform: translateX(4px);
  color: var(--color-accent);
}

.arc-row:hover .arc-row__name {
  color: var(--color-accent);
}

/* A plate: the ground a project is laid out on. */
.arc-plate {
  position: relative;
  z-index: 1;
  padding-block: var(--space-9);
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Every light plate is the same scanned paper, in its own colour. */
.arc-plate--stone,
.arc-plate--putty,
.arc-plate--sage,
.arc-plate--sage-deep {
  background-image: var(--texture-scan);
  background-size: var(--texture-scan-size);
  background-blend-mode: multiply;
}

.arc-plate--stone { background-color: var(--paper); }
.arc-plate--putty { background-color: var(--color-parchment); }
.arc-plate--sage { background-color: var(--color-sage); }
.arc-plate--sage-deep { background-color: var(--color-sage-deep); }
.arc-plate--ink {
  background: var(--color-ink);
  color: var(--color-ink-text);
}

.arc-plate__grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--space-5);
  align-items: start;
}

.arc-plate__main {
  grid-column: 1 / 9;
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
}

.arc-plate__main--tall {
  grid-column: 2 / 7;
}

.arc-plate__side {
  grid-column: 8 / 12;
  grid-row: 1;
  margin-top: 18%;
  position: relative;
  z-index: 2;
}

.arc-plate__main--tall ~ .arc-plate__side {
  grid-column: 7 / 11;
  margin-left: -10%;
}

.arc-plate__note {
  grid-column: 9 / 13;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  z-index: 3;
}

.arc-plate__main--tall ~ .arc-plate__note {
  grid-column: 8 / 13;
}

.arc-plate__lede {
  font-family: var(--font-family-display);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}

.arc-plate__body {
  font-size: var(--font-size-sm);
  max-width: 44ch;
}

.arc-plate--ink .spec,
.arc-plate--ink .spec--key {
  color: var(--color-ink-muted);
}

.arc-plate--ink .spec:has(.spec--key) {
  color: var(--color-ink-text);
}

/* The work itself, no paper behind it. The shadow sits on the picture so two
   overlapping pieces still separate. */
.arc-sheet {
  transform: rotate(var(--rot, 0deg));
}

.arc-sheet img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow:
    0 1px 2px rgb(40 40 36 / 0.12),
    0 22px 46px -26px rgb(40 40 36 / 0.5);
}

.arc-plate__main--tall img {
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
}

/* The screen recording. Straight, unmounted: it is a screen, not a print. */
.arc-screen video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-ink-border);
}

.arc-plate__side--cutout img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgb(40 40 36 / 0.3));
}

.arc-plate__mark {
  position: absolute;
  left: -2%;
  bottom: -12%;
  width: clamp(90px, 12vw, 170px);
  height: auto;
  z-index: 3;
  transform: rotate(-9deg);
}

.arc-plate__glassine {
  position: absolute;
  z-index: 2;
  left: 44%;
  top: 48%;
  width: 26%;
  height: 44%;
  background: var(--glassine);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  transform: rotate(-2deg);
  pointer-events: none;
}


/* Greyscale until the plate is in view, then the colour comes up: the board's
   photographs are all silver, the work is not. Gated on js-ready so a visitor
   without JS gets the colour straight away rather than a page stuck in grey. */
html.js-ready .arc-plate img:not(.arc-plate__mark),
html.js-ready .arc-plate video {
  filter: grayscale(1) contrast(1.05);
  transition: filter 1.4s var(--ease-default);
}

html.js-ready .arc-plate.is-inked img:not(.arc-plate__mark),
html.js-ready .arc-plate.is-inked video {
  filter: none;
}

html.js-ready .arc-plate.is-inked .arc-plate__side--cutout img {
  filter: drop-shadow(0 18px 22px rgb(40 40 36 / 0.3));
}

/* ---------- Agility Boulders: a deck that flicks through as you scroll ----------
   The plate is tall; the stage inside it is sticky, sitting just under the row
   tabs that are stacked by the time you reach it (--stack). Scroll distance is spent
   flicking one card off the top of the pile at a time. home.js writes each card's
   --out (0 in the pile, 1 gone) and the CSS turns that into movement. */
.arc-plate--deck {
  /* How many row tabs are stacked above the stage when it pins: the rows up to and
     including this project's own. Agility is the first row, so 1; the Photography
     deck sets 7 inline. Update these if the archive order changes. */
  --stack: 1;
  display: block;
  padding: 0;
  min-height: 0;
  /* NOT hidden: overflow: hidden makes the plate a scroll container, and a sticky
     child then sticks to the plate instead of to the page. */
  overflow: clip;
  height: calc(100vh - var(--stack) * var(--row-h) + (var(--n) - 1) * 55vh);
}

.deck__stage {
  position: sticky;
  top: calc(var(--stack) * var(--row-h));
  height: calc(100vh - var(--stack) * var(--row-h));
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: center;
  gap: var(--space-7);
  padding-block: var(--space-6);
}

.deck__pile {
  position: relative;
  height: 100%;
}

.deck__card {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--n) - var(--k));
  /* Flicked up and away as --out goes 0 -> 1, turning as it goes. */
  transform:
    translate(calc(var(--out, 0) * -18%), calc(var(--out, 0) * -115%))
    rotate(calc(var(--r, 0deg) - var(--out, 0) * 14deg));
  opacity: calc(1 - var(--out, 0) * 0.15);
  will-change: transform;
}

.deck__card img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow:
    0 1px 2px rgb(40 40 36 / 0.14),
    0 22px 44px -24px rgb(40 40 36 / 0.5);
}

/* Also an .arc-plate__note, which places itself on a 12-column plate grid
   (columns 9-13, row 2). On this two-column stage that invents ten phantom columns
   and squeezes the pile to a stamp, so the placement is reset here. */
.deck__stage > .deck__note {
  grid-column: auto;
  grid-row: auto;
  align-self: end;
}

.deck__count {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.deck__note .spec + .spec:not(.deck__count) {
  margin-top: var(--space-2);
}

/* The way out to the full photography archive on Cargo. */
.deck__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-family-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--color-accent);
  transition: color var(--duration-short) var(--ease-default);
}

.deck__link:hover,
.deck__link:focus-visible {
  color: var(--color-accent);
}

/* No JS, or reduced motion: no pinned deck. The seven graphics sit in a plain grid
   so every one of them is still there to see. */
html:not(.js-ready) .arc-plate--deck {
  height: auto;
  padding-block: var(--space-9);
}

html:not(.js-ready) .deck__stage {
  position: static;
  height: auto;
  grid-template-columns: 1fr;
}

html:not(.js-ready) .deck__pile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-5);
  height: auto;
}

html:not(.js-ready) .deck__card {
  position: static;
  transform: none;
}

html:not(.js-ready) .deck__count {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .arc-plate--deck {
    height: auto;
    padding-block: var(--space-9);
  }

  .deck__stage {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
  }

  .deck__pile {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-5);
    height: auto;
  }

  .deck__card {
    position: static;
    transform: none;
  }

  .deck__count {
    display: none;
  }
}

@media (max-width: 900px) {
  .deck__stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding-block: var(--space-4);
  }
}

/* ---------- Pacific Outdoor Living ----------
   Website and hiring stories stacked on the left, the pull-up banner standing on
   the right, the note under the stories. Everything square to the page. */
.arc-plate--pol .arc-plate__grid {
  grid-template-rows: auto auto auto;
  row-gap: var(--space-5);
  align-items: start;
}

.pol__site {
  grid-column: 1 / 9;
  grid-row: 1;
  margin: 0;
}

.pol__site video {
  display: block;
  width: 100%;
  height: auto;
}

.pol__stories {
  grid-column: 1 / 5;
  grid-row: 2 / 4;
  margin: 0;
}

.pol__phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.pol__phones video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 449 / 800;
  object-fit: cover;
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgb(40 40 36 / 0.14),
    0 16px 28px -18px rgb(40 40 36 / 0.5);
}

.pol__stories figcaption,
.pol__banner figcaption {
  margin-top: var(--space-3);
}

.pol__banner {
  grid-column: 10 / 13;
  grid-row: 1 / 4;
  align-self: center;
  margin: 0;
  text-align: center;
}

.pol__banner img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  filter: drop-shadow(0 24px 22px rgb(40 40 36 / 0.3));
}

.arc-plate--pol .pol__note {
  grid-column: 5 / 9;
  grid-row: 2;
  align-self: end;
}

html.js-ready .arc-plate.is-inked .pol__banner img {
  filter: drop-shadow(0 24px 22px rgb(40 40 36 / 0.3));
}

@media (max-width: 900px) {
  .pol__site,
  .pol__stories,
  .arc-plate--pol .pol__note {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* The three phones stay in one row on a phone. */

  .pol__banner {
    grid-column: 2 / -2;
    grid-row: auto;
  }

  .pol__banner img {
    max-height: 70vh;
  }
}

/* The Pate bottles: a lineup standing on one baseline, no background. */
.arc-bottles {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 2vw, 32px);
  position: relative;
  z-index: 2;
}

.arc-bottle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.arc-bottle img {
  width: auto;
  height: min(60vh, 560px);
  filter: drop-shadow(0 24px 22px rgb(40 40 36 / 0.28));
}

/* The private label shot is a group, bottle-height to bottle-height with the
   single bottles beside it. */
.arc-bottle--helena img {
  height: min(52vh, 480px);
}

.arc-bottle figcaption {
  text-align: center;
  max-width: 18ch;
}

html.js-ready .arc-plate.is-inked .arc-bottle img {
  filter: drop-shadow(0 24px 22px rgb(40 40 36 / 0.28));
}

/* The Apple Park packages: same lineup, four pieces at their own relative sizes. */
.arc-lineup {
  grid-column: 1 / 10;
}

.arc-lineup__gift img { height: min(52vh, 480px); }
.arc-lineup__bird img { height: min(44vh, 400px); }
.arc-lineup__cubby img { height: min(40vh, 360px); }
.arc-lineup__bunny img { height: min(34vh, 300px); }

/* Sea & Believe: three pouches at one height, the burger tray shorter, as on a
   shelf. The lineup starts clear of the otter mark in the corner. */
.arc-lineup--snb .arc-bottle img { height: min(44vh, 400px); }
.arc-lineup--snb .arc-lineup__tray img { height: min(26vh, 240px); }

/* The otter stamps the top-right corner, above the note, clear of the packs. */
.arc-lineup--snb ~ .arc-plate__mark {
  left: auto;
  right: 3%;
  top: -4%;
  bottom: auto;
  width: clamp(80px, 9vw, 130px);
}

.arc-lineup__note {
  grid-column: 10 / 13;
}

.arc-plate__credit {
  margin-top: var(--space-4);
}

/* The Pate record card. */
.arc-card {
  grid-column: 8 / 13;
  grid-row: 1;
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background-color: var(--color-bone);
  /* Ruled like an index card: a cobalt head rule and faint grey lines. */
  background-image: var(--texture-scan);
  background-size: var(--texture-scan-size);
  background-blend-mode: multiply;
  box-shadow:
    0 1px 2px rgb(40 40 36 / 0.12),
    0 22px 46px -26px rgb(40 40 36 / 0.5);
  transform: rotate(var(--rot, 0deg));
}

.arc-card__title {
  font-family: var(--font-family-display);
  font-size: clamp(1.1rem, 0.85rem + 0.8vw, 1.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  max-width: 16ch;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  /* The cobalt head rule of an index card. */
  border-bottom: 1px solid var(--color-accent);
}

/* Ruled like an index card: a faint grey line under every field. */
.arc-card__fields {
  display: grid;
  gap: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgb(40 40 36 / 0.14) 31px 32px);
}

.arc-card__fields > div {
  display: grid;
  grid-template-columns: 9ch 1fr;
  gap: var(--space-4);
  line-height: 32px;
}

.arc-card__fields dt {
  color: var(--color-text-muted);
}

.arc-card__fields dd {
  color: var(--color-text);
}



@media (max-width: 900px) {
  .archive {
    --row-h: 2.25rem;
  }

  .arc-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
  }

  .arc-row__name {
    font-size: 0.95rem;
  }

  .arc-row__kind,
  .arc-row__disc {
    display: none;
  }

  .arc-row__place {
    font-family: var(--font-family-mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }

  .arc-plate {
    min-height: 0;
    padding-block: var(--space-8);
  }

  .arc-plate__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .arc-plate__main,
  .arc-plate__main--tall,
  .arc-bottles,
  .arc-card {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .arc-bottle img {
    height: min(40vh, 300px);
  }

  .arc-bottle--helena img {
    height: min(34vh, 250px);
  }

  /* Four packages in a 2 x 2 at phone width. */
  .arc-lineup {
    flex-wrap: wrap;
    row-gap: var(--space-5);
  }

  .arc-lineup .arc-bottle {
    flex: 0 0 44%;
  }

  .arc-lineup .arc-bottle img {
    height: auto;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
  }

  .arc-bottle figcaption {
    font-size: 9px;
  }

  .arc-plate__side,
  .arc-plate__main--tall ~ .arc-plate__side {
    grid-column: 3 / -1;
    grid-row: auto;
    margin: -22% 0 0;
  }

  .arc-plate__note,
  .arc-plate__main--tall ~ .arc-plate__note {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .arc-plate__main--tall img {
    max-height: 70vh;
  }

  .arc-plate__glassine {
    display: none;
  }

  .arc-plate__mark {
    left: auto;
    right: 0;
    bottom: auto;
    top: 0;
  }

  .arc-card {
    padding: var(--space-6) var(--space-5) var(--space-5);
  }



  .arc-card__fields > div {
    grid-template-columns: 7ch 1fr;
    line-height: 1.5;
    padding-block: 6px;
  }
}

/* ---------- Closer ---------- */

.closer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  border-top: 1px solid var(--color-text);
}

.closer__btn {
  min-width: min(100%, 320px);
  justify-content: center;
}

.closer__all:hover {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .mast__portrait,
  .mast__glassine,
  .method__title,
  .arc-plate__mark {
    transform: none;
  }
}

/* At phone width the packs fill the plate in a 2 x 2 and the corner stamp would
   land on a pouch. The otter is already on every pack, so it steps out. */
@media (max-width: 900px) {
  .arc-lineup--snb ~ .arc-plate__mark {
    display: none;
  }
}