/* Site reset, self-hosted display fonts, brand and compatibility tokens.
 * Layout: design-foundations.css. Accepted Home type/rhythm: design-system.css.
 * Reusable sections: section-patterns.css and content-cards.css.
 * New sections use the semantic roles in docs/design-system.md.
 * Instrument Serif has only regular/italic 400; do not synthesize bold.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;

  background: var(--lbd-ink);
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* WordPress emits its own skip link ahead of anything this project styles. It
 * is hidden until focus and then becomes the first visible control on the
 * page, so it takes the site's sans rather than the browser's default serif. */
.skip-link {
  font-family: var(--lbd-font-sans);
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin-400.woff2) format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
}

:root {

  --lbd-ink:            #121212;
  --lbd-paper:          #F7F5F2;

  --lbd-gold:           #FFAA0C;
  --lbd-gold-on-light:  #9E5F09;
  /* Resolved here, so `.lbd-on-light` remapping --lbd-gold for type never
   * reaches a fill: ink on the dark gold is only 3.6:1. */
  --lbd-gold-fill:      var(--lbd-gold);

  --lbd-text:           #FFFFFF;
  --lbd-text-muted:     #B8B4AE;
  --lbd-text-on-light:  #121212;

  --lbd-rule:           rgb(255 255 255 / 0.14);
  --lbd-rule-strong:    rgb(255 255 255 / 0.28);

  --lbd-font-display: "Instrument Serif", Didot, "Bodoni MT", Georgia, serif;

  --lbd-font-sans: "Helvetica Neue", "HelveticaNeue", "Helvetica Neue LT Std",
                   Helvetica, Arial, "Segoe UI", system-ui, sans-serif;

  --lbd-fs-body-lg:   clamp(1.0625rem, 1.3vw, 1.25rem);
  --lbd-fs-body:      1rem;
  --lbd-fs-small:     0.875rem;
  --lbd-fs-eyebrow:   0.75rem;

  --lbd-control-height: 3rem;

  --lbd-lh-snug:  1.25;
  --lbd-lh-body:  1.65;

  --lbd-track-eyebrow: 0.18em;
  --lbd-track-caps:    0.08em;
  --lbd-track-display: -0.01em;

  --lbd-s1:  0.25rem;
  --lbd-s2:  0.5rem;
  --lbd-s3:  0.75rem;
  --lbd-s4:  1rem;
  --lbd-s5:  1.5rem;
  --lbd-s6:  2rem;
  --lbd-s7:  3rem;
  --lbd-s8:  4rem;
  --lbd-s9:  6rem;
  --lbd-s10: 8rem;

  /* The fixed chrome above page content: the phones' text strip (0 elsewhere,
   * set in design-foundations.css) plus the 80px bar. Content offsets read
   * --lbd-header-h; the bar's own geometry reads --bar-h in header.css. */
  --lbd-topbar-h: 0px;
  --lbd-header-h: calc(5rem + var(--lbd-topbar-h));

  --lbd-radius: 2px;
  --lbd-radius-pill: 999px;

  --lbd-dur-fast: 180ms;
  --lbd-dur-base: 320ms;
  --lbd-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --lbd-ease-out: cubic-bezier(0.16, 1, 0.30, 1);

  --lbd-ease-wipe: cubic-bezier(.7, 0, .2, 1);
  --lbd-ease-wipe-reveal: cubic-bezier(.65, 0, .3, 1);

  /* PHOTOGRAPH HOVER ZOOM. One curve, one duration, one distance, everywhere a
   * photograph answers to hover or focus: the card grids, the projects grid and
   * the services menu. `--lbd-ease-out` is the site's answering curve, the same
   * one the hover wipe moves its active line on. Always scale inside a frame
   * that clips, so the box itself never moves. Reduced motion flattens the
   * scale below rather than each sheet switching the transition off. */
  --lbd-zoom-scale: 1.025;
  --lbd-zoom-dur:   var(--lbd-dur-base);
  --lbd-zoom-ease:  var(--lbd-ease-out);

  /* A ROW THAT OPENS GROWS on a two-to-one clock: a disclosure row travels a
   * short distance, so the clock is short rather than leaving a three-line
   * answer crawling. Opening is the answer arriving and may take its time; closing is getting
   * out of the way and wants to be over. assets/js/disclosure.js reads all
   * three, so the clock is stated here and not in the script. */
  --lbd-row-dur:       440ms;
  --lbd-row-dur-close: 220ms;
  --lbd-row-ease:      cubic-bezier(0.65, 0, 0, 1);

  --lbd-z-header: 100;
  --lbd-z-modal:  300;
}

.lbd-sr-only {
  font: inherit;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lbd-on-light {
  --lbd-text:        var(--lbd-text-on-light);
  --lbd-text-muted:  #5A554E;
  --lbd-gold:        var(--lbd-gold-on-light);
  --lbd-rule:        rgb(31 31 31 / 0.16);
  --lbd-rule-strong: rgb(31 31 31 / 0.32);
  background: var(--lbd-paper);
  color: var(--lbd-text);
}

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lbd-dur-fast: 1ms;
    --lbd-dur-base: 1ms;
    /* A zoom is travel, not decoration: hold the photograph still instead of
     * arriving at the enlarged state instantly. */
    --lbd-zoom-scale: 1;
    /* The markers and chevrons still change state, they just stop travelling
     * to it. disclosure.js reads the query itself and does not grow the row at
     * all, so a reader who asked for less motion gets the plain disclosure. */
    --lbd-row-dur:       1ms;
    --lbd-row-dur-close: 1ms;
  }
}