/* Type override (2026-07): the site's primary text face is Scto Grotesk A.
   The captured CSS references "Abcgramercy Book" throughout; these
   later-loaded @font-face declarations rebind that family name to the
   Scto files, so every rule — and the GL text rasterizer, which reads
   computed font families — switches without touching any selector.
   The D/W monogram (Ppplayground) and display serifs are untouched. */

@font-face {
  font-family: "Abcgramercy Book";
  src: url("/assets/6465deb27a4ac2c73f7303ab_Scto-Grotesk-A-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Abcgramercy Book";
  src: url("/assets/6465deb23e20c176005b5e04_SctoGroteskA-Medium.ttf") format("truetype");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* Uniform gentle tracking (-.1px) in place of the serif-era values —
   Scto stays crisp at text sizes with just a hint of tightening. */
.main-hero_heading,
.main-hero_heading-2,
.header-text,
.paragraph,
.subtext,
.navlink,
.navlink-2,
.new-nav-text,
.case-study-date,
.project-text,
.rich-tags,
.link-text,
.h1.is-serif,
.h3,
.p1,
.grid-content,
.year,
.experiments-hero_line {
  letter-spacing: -0.1px !important;
}

/* Information page: the bio grew to 5 lines, crowding the columns below.
   Add breathing room under the hero. Desktop only (section-hero-2 is
   information-only; mobile keeps its own padding). */
@media (min-width: 992px) {
  .section-hero-2 { padding-bottom: 8rem; }
}

/* Mobile menu — round outlined hamburger centered between the D/W monogram,
   opening a bottom drawer (vaul-style). Webflow's dead menu + trigger hidden. */
.menu-modal-trigger, .menu-mobile { display: none !important; }
.m-menu-toggle, .m-menu-drawer, .m-menu-scrim { display: none; }

@media (max-width: 820px) {
  /* Decorative D/W footer must not eat taps on the centered button. */
  .footer-section, .footer-container, .footer-text { pointer-events: none; }
  /* Captured CSS sets .is--d width:100% at <=479px, which centers the D over
     the button. Keep D and W corner-anchored across mobile. */
  .footer-text.is--d { width: auto; }
  .footer-text.is--w { width: auto; }

  .m-menu-toggle {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 2000000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: #fff;
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.16);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  }
  .m-menu-toggle svg line { stroke: currentColor; stroke-width: 1.5; }

  .m-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 2147483644;
    display: block;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .m-menu-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483645;
    display: block;
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    padding: 0.85rem 1rem calc(3rem + env(safe-area-inset-bottom, 0px));
    min-height: 72vh;
    transform: translateY(110%);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.13);
    touch-action: none;
  }
  .m-menu-handle {
    width: 2.25rem;
    height: 0.3rem;
    background: #e2e2e2;
    border-radius: 999px;
    margin: 0 auto 1.9rem;
  }
  .m-menu-links { display: flex; flex-direction: column; gap: 0.45rem; }
  .m-menu-links a {
    display: inline-flex;
    align-items: baseline;
    color: #111;
    text-decoration: none;
    font-family: "Abcgramercy Book", Georgia, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.2px;
  }
  .m-menu-links .m-arw {
    font-size: 0.72em;
    vertical-align: 0.12em;
    color: #a3a3a3;
    margin-left: 0.3rem;
  }

  body.m-menu-open { overflow: hidden; }
  body.m-menu-open .m-menu-scrim { opacity: 1; pointer-events: auto; }
  body.m-menu-open .m-menu-drawer { transform: translateY(0); }
}