/* ==========================================================================
   Playfair Display variant
   Loaded only by the pages in /playfair, on top of site.css.

   Playfair is a high contrast didone serif and runs far wider than the
   condensed grotesque it replaces: roughly the same text takes about 1.6 times
   the width. So this is not a straight font swap. Display sizes come down,
   line heights open up (a condensed face tolerates 0.86, a serif does not),
   and the tight negative tracking goes back to neutral.
   ========================================================================== */

:root {
  --display: 'Playfair Display', 'EB Garamond', Georgia, serif;
}

/* ---------- Display scale --------------------------------------------------- */

.d1, .d2, .d3, .d4 {
  letter-spacing: 0;
  line-height: 1.02;
}
.d1 { font-size: clamp(2.3rem, 8.2vw, 8.2rem); }
.d2 { font-size: clamp(2.15rem, 6.5vw, 5.9rem); }
.d3 { font-size: clamp(1.7rem, 3.5vw, 3.05rem); line-height: 1.06; }
.d4 { font-size: clamp(1.32rem, 2vw, 1.85rem); line-height: 1.12; }

/* ---------- Small letterspaced caps ------------------------------------------
   Heavy tracking on a serif reads as spaced out rather than crisp, so every
   label comes back a step. */

.eyebrow {
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.2em;
}
.idx, .cap b, .panel__num, .mos__num { letter-spacing: 0.16em; }
.panel__kind, .mos__kind { letter-spacing: 0.14em; }
.ph__label { letter-spacing: 0.16em; }
.field label, .ftr__col h4 { letter-spacing: 0.16em; }
.hdr__link { font-size: 0.82rem; letter-spacing: 0.13em; }
.btn { letter-spacing: 0.13em; }
.blink { letter-spacing: 0.13em; }
.quote__by { letter-spacing: 0.15em; }

/* ---------- Hero ------------------------------------------------------------- */

.hero__tag h1 {
  font-size: clamp(2rem, 6.5vw, 6rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.hero__tag h1 em {
  font-size: 0.24em;
  letter-spacing: 0.22em;
  padding-top: 1.3em;
}
@media (max-width: 859px) {
  .hero__tag h1 { font-size: clamp(1.6rem, 8vw, 2.8rem); }
  .hero__tag h1 em { font-size: 0.3em; letter-spacing: 0.16em; }
}

/* ---------- Pinned tagline ---------------------------------------------------- */

.pinned__tag {
  font-size: clamp(2.2rem, 7.2vw, 6.8rem);
  line-height: 1.04;
  letter-spacing: 0;
}

/* The phone stacks this one word per line, ranged left, as large as it will
   go (see site.css). How large that is depends on the face: the base scale
   there is written for a condensed grotesque, and Playfair runs far wider, so
   the size has to come back or "outcome" - the widest of the four words, not
   "Environment" - runs out of the gutter. 11.5vw is what fits, measured, from
   320px up. A little negative tracking buys the rest. */
@media (max-width: 859px) {
  .pinned__tag {
    font-size: clamp(2.2rem, 11.5vw, 4.5rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
  }
}

/* ---------- About statement ---------------------------------------------------- */

.stmt__text {
  font-size: clamp(1.6rem, 3.5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0;
  max-width: 26ch;
}
.stmt__sub {
  font-size: clamp(1.05rem, 2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* ---------- Service panels and cards -------------------------------------------- */

.panel__title {
  font-size: clamp(1.12rem, 1.62vw, 1.58rem);
  line-height: 1.06;
  letter-spacing: 0;
}
.mos__title {
  font-size: clamp(1.3rem, 2.4vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: 0;
}
.collect__name {
  font-size: clamp(1.12rem, 2vw, 1.78rem);
  letter-spacing: 0;
}

/* ---------- Overlay menu --------------------------------------------------------- */

.menu__item {
  font-size: clamp(1.25rem, 2.8vw, 2.45rem);
  letter-spacing: 0;
}
.menu__label {
  font-size: clamp(1.45rem, 2.8vw, 2.45rem);
  letter-spacing: 0.01em;
}
@media (max-width: 480px) { .menu__item { font-size: 1.05rem; } }

/* ---------- Marquee and footer ----------------------------------------------------- */

.marquee span {
  font-size: clamp(0.95rem, 1.9vw, 1.7rem);
  letter-spacing: 0.01em;
}
.ftr__cta a.mail {
  font-size: clamp(1.15rem, 2.7vw, 2.5rem);
  letter-spacing: 0;
  line-height: 1.1;
}

/* ---------- Portfolio subheading ---------------------------------------------------- */

.pintro__sub {
  font-size: clamp(0.88rem, 1.35vw, 1.2rem);
  letter-spacing: 0.05em;
}

/* ---------- Reveal mask -------------------------------------------------------------
   A serif sits differently in its line box than the condensed face, so the mask
   needs a touch more room top and bottom or it clips the letterforms. */

.rv-line {
  padding-block: 0.1em 0.24em;
  margin-block: -0.1em -0.24em;
}


/* ---------- Project pages ---------------------------------------------------- */

.proj__lede {
  font-size: clamp(1.02rem, 1.15vw, 1.22rem);
  line-height: 1.6;
  max-width: 54ch;
}
.beat__text {
  font-size: clamp(1.1rem, 1.55vw, 1.62rem);
  line-height: 1.42;
}

/* Playfair's square brackets are very fine and read as pipes at label size,
   so the bracket link takes its brackets from the body face instead. */
.blink::before,
.blink::after {
  font-family: var(--body);
  font-size: 1.15em;
  opacity: 0.7;
}