/* ------------------------------------------------------------------
   TEEARCH - testimonials page

   Hand-written, loaded AFTER styles.css and only by testimonials.html.
   It is not generated by Tailwind and Tailwind never needs to run for
   it.

   The palette, the type and the voice are the home page's. The FORM is
   its own, and it is set by the content: there are three reviews, and
   only three. A page that pretends otherwise - a grid of quote cards, a
   carousel, a wall of five-star rows - would be padding. So the three
   are printed WHOLE and set at heading size, one to a spread, with the
   attribution on a rule beneath. The quotation mark hangs in the left
   margin like a paragraph mark, the client roster is set as one wall of
   names rather than a logo strip, and the page closes by pointing at
   the work the reviews are describing.

   This is also the only page with no ink block and no photograph on it
   at all. It is the quiet page: type, rules and white space.

   Every value below reads a brand token that styles.css already
   publishes on :root, so the pages cannot drift apart.
------------------------------------------------------------------ */

/* ------------------------------------------------------------- type */

/* The masthead h1 uses the home page's own `text-display` size from
   styles.css, so all six heroes set at the same scale. This is the
   size below it, used by section headings and the closing line. */
.head-md {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--color-ink);
}

/* The serif italic accent, same role as on the other five pages. */
.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-brass);
}

/* Mono label type. Every small label on this page is one of these. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.mono .l { color: var(--color-brass); }

/* ---------------------------------------------------------- masthead */

.mast { padding-block: 8.5rem 3.5rem; }

@media (min-width: 768px) {
  .mast { padding-block: 11rem 4.5rem; }
}

/* ------------------------------------------------------------ section */

.sec { padding-block: 4.5rem; }
.sec-alt { background: var(--color-paper-2); }

/* The reviews follow the masthead directly, so they do not need the
   full gap the later sections open. Matched off the masthead rather
   than with :first-of-type - both are <section>s, so the masthead is
   the first of that type and the reviews are not. */
.mast + .sec { padding-top: 1rem; }

@media (min-width: 768px) {
  .sec { padding-block: 6rem; }
  .mast + .sec { padding-top: 1.5rem; }
}

.sec-head { border-top: 1px solid var(--color-ink); padding-top: 1.25rem; }
.sec-head h2 { margin: 1.25rem 0 0; }
.sec-head p.txt {
  margin: 1.25rem 0 0;
  max-width: 42rem;
  font-size: var(--text-lede);
  line-height: 1.6;
  color: var(--color-muted);
}

/* ----------------------------------------------------------- reviews */

/* One review to a spread. The number and the source sit in a narrow
   left column on a wide screen and the quotation runs beside them, so
   the page reads as three entries rather than three boxes. */
.review {
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid var(--color-line);
  padding-block: 3rem;
}
.review:first-of-type { border-top: 1px solid var(--color-ink); }

.review .idx {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brass);
}

.review blockquote {
  margin: 0;
  max-width: 46rem;
  position: relative;
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--color-ink);
}
.review blockquote p { margin: 0; }

/* The longest of the three is set a size down. Three reviews of very
   different lengths at one size would leave the first as a slab and
   the last as a single line; sized against their length they read as
   one set. */
.review-long blockquote {
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* The opening mark hangs outside the measure, in the brand's serif -
   the same italic that carries the accent word in every heading on the
   site, used here at size as a paragraph mark. */
.review blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.35em;
  left: -0.62em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3em;
  line-height: 1;
  color: var(--color-amber);
  pointer-events: none;
}

@media (max-width: 899px) {
  /* No margin to hang into on a phone, so the mark sits above instead
     of over the first word. */
  .review blockquote { padding-top: 1.5rem; }
  .review blockquote::before { top: -0.25em; left: -0.04em; font-size: 2.5em; }
}

.review .by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  border-top: 1px solid var(--color-line);
  padding-top: 0.9rem;
  max-width: 46rem;
}
.review .who {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
}
.review .src {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}

@media (min-width: 900px) {
  .review {
    grid-template-columns: 11rem 1fr;
    column-gap: 3.5rem;
    row-gap: 1.75rem;
    padding-block: 4rem;
  }
  .review .idx { grid-column: 1; grid-row: 1; padding-top: 0.5rem; }
  .review blockquote { grid-column: 2; grid-row: 1; }
  .review .by { grid-column: 2; grid-row: 2; }
}

/* ---------------------------------------------------------- register */

/* The client roster set as one wall of names. The home page runs these
   as a moving logo marquee and the about page stills them into a ruled
   logo register; here they are neither - just the names, at size, in
   one paragraph-shaped block divided by amber points. */
.register {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin-top: 2.5rem;
  max-width: 60rem;
}
.register span {
  font-size: clamp(1.125rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--color-ink);
}
.register i {
  font-style: normal;
  color: var(--color-amber);
  font-size: 1.25rem;
  line-height: 1;
}

/* ------------------------------------------------------------- check */

/* Three rows that send you to the work the reviews are talking about.
   The number carries the row, so it is set large in mono and the link
   text follows it. */
.check {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--color-ink);
}
.check a {
  display: grid;
  grid-template-columns: 1fr 1.25rem;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  transition:
    background-color 0.35s var(--ease-out-soft),
    padding 0.35s var(--ease-out-soft);
}
.check a:hover { background: var(--color-paper-3); padding-inline: 0.75rem; }
.check .fig {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-right: 1rem;
}
.check .lbl {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
}
.check .sub {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-muted-2);
}
.check .arw {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-muted-2);
  transition:
    transform 0.35s var(--ease-out-soft),
    color 0.35s var(--ease-out-soft);
}
.check a:hover .arw { transform: translateX(4px); color: var(--color-brass); }

@media (min-width: 700px) {
  .check a { grid-template-columns: 1fr 1.25rem; }
  .check .row { display: flex; align-items: baseline; }
}

/* ----------------------------------------------------------- closing */

/* The sixth closing on the site, and the plainest: no panel, no band,
   no frame and nothing centred - one rule, the line, the buttons, and
   the credentials held to the right of them. */
.close-split {
  display: grid;
  gap: 2.5rem;
  border-top: 1px solid var(--color-ink);
  padding-top: 2.5rem;
}
.close-split .acts {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.close-split dl { margin: 0; }
.close-split dl > div + div {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-line);
  padding-top: 1.5rem;
}
.close-split dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.close-split dd {
  margin: 0.6rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-ink);
}

@media (min-width: 900px) {
  .close-split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4.5rem;
  }
}

/* Reveals reuse the home page's .reveal contract - app.js adds .is-in. */