@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('assets/barlow-condensed-extrabold.ttf') format('truetype'); }
:root { --red: #365848; }
.red-nav, .contact-copy .section-number, .footer-line a { color: var(--cream); }
/* Preserve the approved heading line boxes when applying Barlow Condensed. */
.type-fitted-line { display: block; white-space: pre; transform-origin: left center; font-style: normal; font-weight: inherit; }

/* Keep Safari's automatic text inflation separate from user-controlled zoom. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 800px) {
  /* Natural text flow replaces measured overlays and fixed heading boxes. */
  .photo-title, .section-intro > h2, .stuff-projects .ws-project {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-weight: 800;
  }
  .suburban-first { font-size: calc((100vw - var(--gutter) * 2) * .184); line-height: 1; }
  .suburban-second { margin-top: -5px; font-size: calc((100vw - var(--gutter) * 2) * .133); line-height: 1.08; }
  /* Keep the biography subordinate to the full-width mobile headline. */
  .photo-copy .hero-bio { font-size: clamp(20px, 3vw, 24px); }
  .section-intro > h2 { font-size: clamp(52px, 16.4vw, 72px); }
  .stuff-projects .projects-intro { font-size: 22px; }
  .stuff-projects .ws-project {
    font-size: clamp(32px, 9.8vw, 40px);
    line-height: 1.1;
  }

  /* Let grid contents shrink to the screen instead of their intrinsic width. */
  .red-shell { width: 100%; min-width: 0; }
  .ws-case-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .ws-case-layout > *, .contact-layout > * { min-width: 0; max-width: 100%; }
  .ws-project-media, .ws-project-video { width: 100%; max-width: 100%; }
  .ws-detail, .contact-copy > p { overflow-wrap: break-word; }
  .contact-form, .contact-field, .contact-field input, .contact-field textarea {
    min-width: 0;
    max-width: 100%;
  }
}

/* Fixed navigation keeps a comfortable tap target clear of device safe areas. */
.back-to-top {
  position: fixed;
  z-index: 20;
  right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid rgb(32 35 28 / 25%);
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 4px 16px rgb(32 35 28 / 18%);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
.back-to-top span { font-size: 21px; line-height: 1; }
.back-to-top:hover { background: var(--cream); }
.back-to-top:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--cream); }

.back-to-top[hidden] { display: none; }

.footer-copyright { margin: 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 800px) {
  .red-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* Reuse the approved long-title spacing for every project that needs it. */
@media (min-width: 801px) {
  .stuff-projects .ws-project--long { line-height: 1.18; }
}