*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: var(--body-size);
  line-height: 1.7;
  letter-spacing: -.01em;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { margin: 0; font-family: 'DM Sans', sans-serif; }

.h2 {
  font-size: var(--h2-size);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.02em;
}

.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: var(--label-size);
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--pad);
  top: -100px;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--button-size);
  text-transform: uppercase;
  letter-spacing: .1em;
  z-index: 200;
  transition: top var(--dur-fade) var(--ease-standard);
}
.skip-link:focus { top: var(--pad); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* site nav — shared across all v2 pages, fixed over the hero on index,
   solid on interior pages (`.site-nav--solid`). Name on the left,
   `.site-nav__actions` on the right. Below 1100px: two independent
   dropdowns — "Selected work" and the Work/About/Contact hamburger — each
   opening its own `.site-nav__panel` anchored under its own button
   (`js/nav.js`). At/above 1100px: the "Selected work" toggle disappears and
   its project links render inline instead (see the desktop override near
   the end of this block); the hamburger/Work-About-Contact dropdown stays
   a dropdown at every width. */
.site-nav {
  --nav-logo-size: clamp(48px, 4.5vw, 64px); /* square mark: width tracks this same height value */
  --nav-hamburger-size: 44px; /* fixed touch-target width, set on .site-nav__toggle */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 1.4vw, 20px) var(--pad);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--hero-button-size);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.site-nav--overlay {
  color: var(--on-dark);
  background: var(--scrim-top);
  padding-bottom: clamp(24px, 3.4vw, 48px);
}
.site-nav--solid {
  position: relative; /* in normal flow like static, but anchors the dropdown panels */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-nav__name { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; }
.site-nav__logo { display: block; height: var(--nav-logo-size); width: auto; }
.site-nav__actions { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.site-nav__dropdown { position: relative; }
.site-nav__links { display: flex; flex-direction: column; gap: clamp(12px, 2vw, 18px); list-style: none; margin: 0; padding: 0; }
.site-nav__links a { text-decoration: none; opacity: .85; }
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* Project links — reused wherever `js/project-links.js` renders them
   (the header's `.site-nav__projects`, on every page). */
.site-nav__projects .project-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  opacity: .8;
  transition: opacity var(--dur-fade) var(--ease-standard);
  padding-bottom: 4px;
}
.site-nav__projects .project-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fade) var(--ease-standard);
}
.site-nav__projects .project-link:hover,
.site-nav__projects .project-link:focus-visible,
.site-nav__projects .project-link.is-active {
  opacity: 1;
}
.site-nav__projects .project-link:hover::after,
.site-nav__projects .project-link:focus-visible::after,
.site-nav__projects .project-link.is-active::after {
  transform: scaleX(1);
}
@media (hover: hover) {
  .site-nav__projects:has(.project-link.is-active) .project-link:not(.is-active) {
    opacity: .5;
  }
}

/* Hamburger toggle — permanent control, every width */
.site-nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: var(--nav-hamburger-size);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.site-nav__toggle-bar {
  display: block;
  width: 27.2px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-fade) var(--ease-standard), opacity var(--dur-fade) var(--ease-standard);
}
.site-nav__dropdown.is-open .site-nav__toggle-bar--1 { transform: translateY(3.25px) rotate(45deg); }
.site-nav__dropdown.is-open .site-nav__toggle-bar--2 { transform: translateY(-3.25px) rotate(-45deg); }

/* "Selected work" toggle — permanent control, every width. Opens the same
   `.site-nav__projects` project list as its dropdown panel. */
.site-nav__projects-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  opacity: .85;
}
.site-nav__projects-toggle::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--dur-fade) var(--ease-standard);
}
.site-nav__dropdown.is-open .site-nav__projects-toggle::after { transform: rotate(180deg); }

/* Dropdown panels — one shared style for both "Selected work" and the
   Work/About/Contact menu, each anchored under its own button. */
.site-nav__panel {
  display: none;
  position: absolute;
  top: 100%; right: 0;
  margin-top: clamp(8px, 1vw, 14px);
  flex-direction: column;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(16px, 2vw, 24px);
  z-index: 1;
  white-space: nowrap;
  max-width: calc(100vw - 2 * var(--pad));
  max-height: calc(100svh - 100%);
  overflow-y: auto;
}
.site-nav--overlay .site-nav__panel { background: var(--ink); color: var(--on-dark); }
.site-nav--solid .site-nav__panel { background: var(--bg); border: 1px solid var(--line); }
.site-nav__dropdown.is-open > .site-nav__panel { display: flex; }

/* Desktop: "Selected work" is exposed inline instead of tucked behind a
   dropdown — hide its toggle and turn the project list into a plain row
   sitting in `.site-nav__actions` next to the hamburger. The
   Work/About/Contact dropdown is unaffected and stays a dropdown here too. */
@media (min-width: 1100px) {
  .site-nav__projects-toggle { display: none; }
  .site-nav__dropdown[data-projects-group] {
    position: absolute;
    left: 50%;
    top: 50%;
    /* True page-center isn't optical center: the logo and hamburger flanking
       the links aren't the same width, so centering on the full bar reads as
       shifted toward whichever icon is narrower. Nudge by half that
       difference to land on the midpoint between the two icons instead. */
    transform: translate(calc(-50% + (var(--nav-logo-size) - var(--nav-hamburger-size)) / 2), -50%);
  }
  .site-nav__dropdown .site-nav__projects.site-nav__panel {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 1.6vw, 24px);
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    white-space: normal;
  }
}

.site-footer {
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--button-size);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 32px);
  white-space: nowrap;
}
.site-footer__socials a:hover,
.site-footer__socials a:focus-visible { color: var(--ink); }
.site-footer > :last-child { justify-self: end; }

@media (max-width: 640px) {
  .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .site-footer > :last-child { justify-self: center; }
}

.page-shell { padding-top: 0; }
.page-shell--padded { padding-top: clamp(72px, 9vw, 96px); }

main:focus { outline: none; }

.page-links {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.page-links a {
  display: block;
  padding: clamp(28px, 4vw, 56px) var(--pad);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.page-links .eyebrow {
  display: block;
  margin-bottom: 8px;
}
.page-links a:hover .h2 {
  text-decoration: underline;
  text-underline-offset: 6px;
}
@media (min-width: 640px) {
  .page-links { grid-template-columns: repeat(3, 1fr); }
  .page-links a:not(:last-child) { border-right: 1px solid var(--line); }
}