/* Airy navigation and understated labels, inspired by Peti Lau's portfolio. */
@font-face {
  font-family: "Josefin Sans";
  src: url("assets/fonts/josefin-sans-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --label-font: "Josefin Sans", "Manrope", Arial, sans-serif;
  --caption-serif: "Cormorant Garamond", Georgia, serif;
}

.site-header nav,
.press-page .site-header nav,
body:has(.cotton-hero) .site-header nav {
  gap: clamp(24px, 3vw, 44px);
  font-family: var(--label-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.site-header nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 0;
  color: var(--muted);
  text-shadow: none;
}
.site-header nav a:hover,
.site-header nav a:focus-visible,
.site-header nav a[aria-current="page"] { color: var(--ink); }
.site-header nav a > span { margin-left: 0; }
.site-header nav a::after { bottom: 7px; }

/* The short labels carry the tracking; reading text keeps its natural spacing. */
.eyebrow,
.project-pagination,
.case-subnav,
.text-link,
.gallery-view-label,
.photo-page-note {
  font-family: var(--label-font);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: none;
}
.eyebrow { font-size: 11px; line-height: 1.7; }
.text-link { font-size: 11px; line-height: 1.7; }
.project-pagination { font-size: 11px; line-height: 1.8; }

.interiors-page .project-cover-link h2 {
  padding: 25px 8px 0;
  font-family: var(--caption-serif);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-shadow: none;
}
.interior-lightbox .lightbox-bar h2,
.viewer-paper .viewer-title {
  font-family: var(--caption-serif);
  font-weight: 400;
  letter-spacing: .025em;
  text-shadow: none;
}

@media (max-width: 650px) {
  .site-header nav,
  .press-page .site-header nav,
  body:has(.cotton-hero) .site-header nav {
    gap: 14px;
    font-size: 10px;
    letter-spacing: .14em;
  }
  .site-header nav a { gap: 3px; }
  .site-header nav .ui-arrow { width: 18px; height: 18px; }
  .interiors-page .project-cover-link h2 {
    padding-top: 20px;
    font-size: 15px;
    letter-spacing: .14em;
  }
  .eyebrow, .text-link, .project-pagination { font-size: 10px; }
}
@media (max-width: 360px) {
  .site-header nav,
  .press-page .site-header nav,
  body:has(.cotton-hero) .site-header nav { gap: 11px; font-size: 9px; letter-spacing: .12em; }
}