/* POCHÉ — the still editorial pages. The printed matter of the same house.
   No film, no scrubbing, no pinning. Chrome, type and reveal vocabulary are
   shared with the home page; everything below is layout on the canvas ground. */

body.page-body {
  min-height: 100svh;
  padding-top: calc(4.5rem + clamp(1rem, 4vh, 2.5rem));
}

.page {
  width: 100%; max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}

/* More space above a heading than below it: the gap belongs to the boundary. */
.band { padding-block: clamp(3.5rem, 9vh, 7rem) 0; }
.band:first-of-type { padding-top: clamp(1rem, 4vh, 2.5rem); }

.page-head { max-width: 46rem; }
.page-head .standfirst {
  margin: 1.25rem 0 0;
  font-size: var(--t-body); line-height: var(--lh-body);
  color: var(--sc-ink-soft); max-width: var(--measure); text-wrap: pretty;
}

/* Asymmetric two-column: media 7, text 5. Never more than two alternations in
   a row before a full-bleed image breaks the rhythm. */
.duo {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 7fr 5fr; align-items: center;
}
/* Alternating the side must not alternate the proportion: the media column
   stays 7/12 whichever side it lands on, or every other row reads as a mistake. */
.duo--flip { grid-template-columns: 5fr 7fr; }
.duo--flip > .duo__media { order: 2; }
.duo__text { display: flex; flex-direction: column; gap: 1rem; }
.duo__text .t-body { color: var(--sc-ink-soft); }

.figure { margin: 0; }
.figure img { width: 100%; height: auto; display: block; border-radius: var(--sc-r-sm); }

/* Images unmask as they arrive, with a settle inside the crop. Once only. */
.figure { overflow: hidden; border-radius: var(--sc-r-sm); clip-path: inset(0 0 12% 0); }
.figure img { transform: scale(1.04); }
.figure, .figure img {
  transition: clip-path 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out);
}
.is-revealed .figure, .is-revealed.figure { clip-path: inset(0); }
.is-revealed .figure img, .is-revealed.figure img { transform: none; }

.full { margin-block: clamp(2rem, 6vh, 4rem) 0; }
/* a portrait plate does not get to be as tall as the page */
.full--narrow { max-width: 30rem; margin-inline: auto; }

/* Hairlines draw left to right. It echoes the Living Plan without repeating it. */
.rule {
  height: 1px; border: 0; margin: 0;
  background: var(--sc-line);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 600ms var(--sc-ease-out);
}
.is-revealed .rule, .is-revealed.rule { transform: scaleX(1); }

.rows { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; }

/* ------------------------------------------------------------- about -- */
.etymology { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 4vw, 3rem); }
.etymology .duo__text { grid-column: 1; }

/* the poché divider: the ink mass fills once, and only once */
.poche-divider { margin-block: clamp(3rem, 8vh, 5.5rem) 0; display: flex; justify-content: center; }
.poche-divider svg { width: 132px; height: 66px; display: block; }
.poche-divider .pd-line { fill: none; stroke: var(--sc-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.poche-divider .pd-ink { fill: var(--sc-ink); opacity: 0; transition: opacity 700ms var(--sc-ease-out); }
.is-revealed .poche-divider .pd-ink, .is-revealed.poche-divider .pd-ink { opacity: 1; }

.principles { display: flex; flex-direction: column; gap: clamp(1.75rem, 4vh, 2.75rem); margin-top: 2rem; }
.principle { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline; }
.principle p { margin: 0; color: var(--sc-ink-soft); max-width: var(--measure); }

.facts { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.facts p { margin: 0; color: var(--sc-ink-soft); max-width: var(--measure); }

/* ---------------------------------------------------------- services -- */
.programme + .programme { margin-top: clamp(3rem, 8vh, 5.5rem); }

.process { margin-top: 2rem; display: flex; flex-direction: column; }
.phase {
  display: grid; grid-template-columns: 4rem 12rem 1fr;
  gap: clamp(0.75rem, 2vw, 2rem); align-items: baseline;
  padding-block: clamp(1rem, 2.5vh, 1.5rem);
}
.phase p { margin: 0; color: var(--sc-ink-soft); max-width: var(--measure); }
.phase__n { font-family: var(--sc-font-mono); font-size: var(--t-anno);
            letter-spacing: var(--tr-anno); color: var(--sc-accent);
            font-variant-numeric: tabular-nums; }
/* The numbers are justified here: the process is a real sequence. Their rules
   draw in order, so the sequence is the thing that animates. */
.phase .rule { grid-column: 1 / -1; margin-top: clamp(1rem, 2.5vh, 1.5rem); }
.process .phase:nth-child(1) .rule { transition-delay: 0ms; }
.process .phase:nth-child(2) .rule { transition-delay: 120ms; }
.process .phase:nth-child(3) .rule { transition-delay: 240ms; }
.process .phase:nth-child(4) .rule { transition-delay: 360ms; }

/* ------------------------------------------------------ testimonials -- */
.quotes { display: flex; flex-direction: column; gap: clamp(3rem, 8vh, 5rem); margin-top: 2.5rem; }
.quote { max-width: 34rem; }
.quote--right { margin-left: auto; text-align: right; }
.quote blockquote {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--t-head); line-height: 1.35; letter-spacing: var(--tr-head);
  max-width: 24ch; text-wrap: balance;
}
.quote--right blockquote { margin-left: auto; }
/* the opening mark hangs outside the measure, so the text edge stays true */
.quote blockquote { text-indent: -0.42em; }
.quote--right blockquote { text-indent: 0; }
.quote .mark-open { color: var(--sc-ink-soft); }
.quote figcaption {
  margin-top: 1rem; font-family: var(--sc-font-mono);
  font-size: var(--t-anno); letter-spacing: var(--tr-anno); color: var(--sc-ink-soft);
}
.quote figcaption b { font-weight: 400; color: var(--sc-ink); }
/* a quote reads as being said, so its lines arrive a little slower */
.quote [data-lines] .ln:nth-child(2) > i { transition-delay: 90ms; }
.quote [data-lines] .ln:nth-child(3) > i { transition-delay: 180ms; }

/* ------------------------------------------------------ contact band -- */
.contact-band { padding-block: clamp(4rem, 10vh, 7rem) clamp(3rem, 8vh, 5rem); }
.contact-band .rule { margin-bottom: clamp(2rem, 5vh, 3rem); }
.contact-band h2 { margin: 0 0 1.5rem; }
.contact-band .contact { margin-top: 1.5rem; flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1.5rem; }

/* ------------------------------------------------------------ mobile -- */
@media (max-width: 860px) {
  .duo, .etymology, .principle, .facts { grid-template-columns: 1fr; }
  .duo--flip > .duo__media { order: 0; }
  .phase { grid-template-columns: 3rem 1fr; }
  .phase p { grid-column: 2; }
  .phase .rule { grid-column: 1 / -1; }
  .quote--right { margin-left: 0; text-align: left; }
  .quote--right blockquote { margin-left: 0; }
  .quote blockquote { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .figure { clip-path: none !important; }
  .figure img { transform: none !important; }
  .rule { transform: scaleX(1) !important; }
  .poche-divider .pd-ink { opacity: 1 !important; }
  .figure, .figure img, .rule, .poche-divider .pd-ink { transition: none !important; }
}