.site-nav-links a[aria-current="page"] { position: relative; width: fit-content; padding: .75rem 0; color: var(--cloud); }
.site-nav-links a[aria-current="page"]::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--raz); }
.project-page { overflow: clip; }
.project-page > section { width: 100%; margin: 0; }
.project-shell { width: min(1200px, calc(100% - 3rem)); margin: 0 auto; }
.project-eyebrow { --eyebrow-left: 2rem; --eyebrow-right: 6rem; display: flex; width: fit-content; align-items: center; gap: .7rem; margin: 0 0 1rem; color: var(--raz); font-size: .78rem; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
.project-eyebrow::before, .project-eyebrow::after { content: ""; flex: 0 0 auto; height: .78em; background: currentColor; }
.project-eyebrow::before { width: var(--eyebrow-left); }
.project-eyebrow::after { width: var(--eyebrow-right); }
.project-hero .project-eyebrow { --eyebrow-left: 2rem; --eyebrow-right: 6rem; }
.project-story-section .project-eyebrow { --eyebrow-left: 6rem; --eyebrow-right: 2.5rem; }
.project-direction-section .project-eyebrow { --eyebrow-left: 3.5rem; --eyebrow-right: 8rem; }
.project-refinement-section .project-eyebrow { --eyebrow-left: 7rem; --eyebrow-right: 3.5rem; }
.project-closing-section .project-eyebrow { --eyebrow-left: 4.5rem; --eyebrow-right: 7rem; }
.project-section-heading { margin: 0; color: var(--cloud); font-family: var(--font-display); font-size: clamp(2.75rem, 5.3vw, 5rem); font-weight: 700; letter-spacing: -.05em; line-height: .98; }
.project-copy { max-width: 42rem; margin: 1.5rem 0 0; color: var(--cloud); font-size: clamp(1rem, 1.35vw, 1.12rem); font-weight: 400; line-height: 1.75; }
.project-hero { padding: clamp(4.5rem, 7vw, 7rem) 0; background: var(--smoke); }
.project-hero-inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.project-hero-copy { min-width: 0; }
.project-back { display: inline-flex; min-height: 44px; align-items: center; gap: .6rem; margin: 0 0 2rem; padding: .65rem .85rem; border-left: 4px solid var(--raz); background: var(--pavement); color: var(--cloud); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.project-back:hover { background: var(--raz); color: var(--cloud); }
.project-back:focus-visible { outline: 2px solid var(--raz); outline-offset: 4px; }
.project-hero .project-eyebrow { color: var(--cloud); }
.project-hero .project-eyebrow::before, .project-hero .project-eyebrow::after { content: none; }
.project-hero h1 { max-width: 8ch; margin: 0; color: var(--raz); font-family: var(--font-display); font-size: clamp(4.4rem, 7.6vw, 7.25rem); font-weight: 700; letter-spacing: -.06em; line-height: .88; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.project-hero-intro { max-width: 34rem; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; color: var(--cloud); font-size: clamp(1.05rem, 1.55vw, 1.25rem); font-weight: 400; line-height: 1.7; }
.project-facts { display: grid; grid-template-columns: minmax(7rem, .65fr) minmax(0, 1.35fr); gap: 1.5rem 2.5rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(232,232,232,.28); }
.project-facts div { min-width: 0; }
.project-facts dt { margin: 0 0 .55rem; color: var(--raz); font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.project-facts dd { margin: 0; color: var(--cloud); font-size: .96rem; font-weight: 400; line-height: 1.65; }
.project-hero-media { margin: 0; overflow: hidden; outline: 2px solid var(--raz); outline-offset: 4px; background: var(--pavement); }
.project-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-hero-media img { height: auto; object-position: 56% 50%; }
.project-story-section { padding: clamp(5.5rem, 9vw, 9rem) 0; background: var(--pavement); }
.project-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.project-story-section .project-section-heading { max-width: 16ch; font-size: clamp(2.2rem, 4vw, 4rem); }
.project-before-media { margin: 0; }
.project-before-media img { display: block; width: 100%; height: auto; object-fit: contain; }
.project-direction-section { padding: clamp(5.5rem, 9vw, 9rem) 0; background: var(--smoke); }
.project-direction-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.project-direction-intro .project-copy { margin: 0; }
.project-concept-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.project-concept-grid .project-concept-media:nth-child(1) { grid-column: 1 / span 7; }
.project-concept-grid .project-concept-media:nth-child(2) { grid-column: 8 / -1; }
.project-concept-grid .project-concept-media:nth-child(3) { grid-column: 3 / -1; }
.project-concept-media { display: block; margin: 0; }
.project-concept-media img { display: block; width: 100%; height: auto; }
.project-concept-media figcaption { margin-top: .9rem; color: var(--mist); font-size: .72rem; font-weight: 600; letter-spacing: .11em; line-height: 1.4; text-align: left; text-transform: uppercase; }
.project-refinement-section { padding: clamp(5.5rem, 9vw, 9rem) 0; background: var(--pavement); }
.project-refinement-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 3vw, 3rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.project-refinement-intro .project-copy { margin: 0; }
.project-refinement-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.project-refinement-media { margin: 0; }
.project-refinement-media img { display: block; width: 100%; height: auto; }
.project-closing-section { padding: clamp(5rem, 8vw, 8rem) 0; background: var(--cloud); }
.project-closing-copy { margin: 0 0 clamp(3rem, 6vw, 5rem); color: var(--pavement); font-family: var(--font-display); font-size: clamp(2.8rem, 5.5vw, 5.25rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.02; }
.project-closing-media { margin: 0; }
.project-closing-media img { display: block; width: 100%; height: auto; }
.project-navigation-section { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--smoke); }
.project-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.project-nav-item { display: grid; gap: .45rem; color: var(--cloud); text-decoration: none; }
.project-nav-item--next { justify-items: end; text-align: right; }
.project-nav-kicker { color: var(--mist); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.project-nav-name { color: var(--cloud); font-family: var(--font-display); font-size: clamp(1.45rem, 2.6vw, 2.35rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.project-nav-arrow { color: var(--raz); font-size: 1.4rem; line-height: 1; }
.project-nav-item.is-disabled { cursor: default; }
.project-nav-all { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: .8rem 1rem; border-bottom: 3px solid var(--raz); color: var(--cloud); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: color .2s ease, background-color .2s ease; }
.project-nav-all:hover { background: var(--raz); color: var(--cloud); }
.project-nav-all:focus-visible { outline: 2px solid var(--raz); outline-offset: 4px; }
@media (max-width: 1000px) { .project-hero-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 3rem; } .project-hero h1 { font-size: clamp(4rem, 8vw, 5.5rem); } .project-hero .project-eyebrow { --eyebrow-left: 1.5rem; --eyebrow-right: 4rem; } }
@media (max-width: 900px) {
  .project-hero-inner, .project-story-grid, .project-direction-intro, .project-refinement-intro { grid-template-columns: minmax(0, 1fr); }
  .project-story-grid { gap: 3rem; }
  .project-direction-intro, .project-refinement-intro { gap: 1.5rem; }
}
@media (max-width: 700px) {
  .project-shell { width: min(100% - 2rem, 1200px); }
  .project-hero, .project-story-section, .project-direction-section, .project-refinement-section, .project-closing-section, .project-navigation-section { padding: 4rem 0; }
  .project-hero h1 { max-width: 9ch; font-size: clamp(3.5rem, 16vw, 5rem); }
  .project-facts { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .project-concept-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .project-concept-grid .project-concept-media { grid-column: 1; grid-row: auto; }
  .project-refinement-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .project-story-section .project-eyebrow { --eyebrow-left: 4rem; --eyebrow-right: 2rem; }
  .project-direction-section .project-eyebrow { --eyebrow-left: 2.5rem; --eyebrow-right: 5.5rem; }
  .project-refinement-section .project-eyebrow { --eyebrow-left: 5rem; --eyebrow-right: 2.5rem; }
  .project-closing-section .project-eyebrow { --eyebrow-left: 3rem; --eyebrow-right: 5rem; }
  .project-navigation { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 1rem; }
  .project-nav-all { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .project-nav-item--previous, .project-nav-item--next { min-height: 48px; }
}
@media (max-width: 420px) {
  .project-hero, .project-story-section, .project-direction-section, .project-refinement-section, .project-closing-section, .project-navigation-section { padding: 3.25rem 0; }
  .project-hero h1 { font-size: clamp(3rem, 15vw, 4rem); }
  .project-section-heading, .project-closing-copy { font-size: clamp(2.45rem, 12vw, 3.4rem); }
  .project-hero .project-eyebrow { --eyebrow-left: .75rem; --eyebrow-right: 2rem; }
  .project-story-section .project-eyebrow { --eyebrow-left: 2.75rem; --eyebrow-right: 1.25rem; }
  .project-direction-section .project-eyebrow { --eyebrow-left: 1.25rem; --eyebrow-right: 3rem; }
  .project-refinement-section .project-eyebrow { --eyebrow-left: 3rem; --eyebrow-right: 1.5rem; }
  .project-closing-section .project-eyebrow { --eyebrow-left: 1rem; --eyebrow-right: 2.5rem; }
  .project-nav-name { font-size: 1.3rem; }
}