/* ============================================================
   TGP — styles.css
   Block styles for the Project page. Tokens only: every color,
   font size, and spacing value is a var(--token) from tokens.css,
   which scripts/build-tokens.mjs generates from registry/tokens.json.
   The build fails if this file has a raw color or length, or names
   a token that doesn't exist (spec §4.2, §5).

   Layout switches use  @media (width < 820px) ; staging swaps
   in the real query from breakpoint.mobile. Mobile token values are
   in tokens.css, not here.
   ============================================================ */

/* ---------- Base ---------- */

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
html.menu-open {
  overflow: hidden;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--type-body-family);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--color-text);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-link-hover);
}
img {
  display: block;
}
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* ---------- Shared type roles (elements) ---------- */

/* E01 Display Title */
.display-title {
  margin: 0;
  font-family: var(--type-display-family);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  font-weight: normal;
  color: var(--color-text-strong);
  text-wrap: var(--type-display-wrap);
}

/* E02 Eyebrow */
.eyebrow {
  margin: 0;
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line-height);
  color: var(--color-accent-text);
}

/* E03 Lead Paragraph */
.lead {
  margin: 0;
  max-width: var(--measure-lead);
  font-family: var(--type-lead-family);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* E04 Heading */
.heading {
  margin: 0;
  padding: var(--space-stack-sm) 0;
  font-family: var(--type-heading-family);
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
  font-weight: normal;
  color: var(--color-text-muted);
}

/* E05 Body Text (richtext) */
.body-text {
  max-width: var(--measure-body);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.body-text p {
  margin: 0;
}
.body-text p + p {
  margin-top: var(--space-stack-sm);
}
.body-text a {
  color: var(--color-text);
}
.body-text a:hover {
  color: var(--color-accent-link-hover);
}

/* E06 Pull Quote */
.pull-quote {
  margin: var(--space-stack-xl) 0 0;
  max-width: var(--measure-quote);
  font-family: var(--type-quote-family);
  font-size: var(--type-quote-size);
  line-height: var(--type-quote-line-height);
  color: var(--color-accent-text);
  text-wrap: pretty;
}

/* E07 Section Title */
.section-title {
  margin: 0;
  font-family: var(--type-section-title-family);
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-line-height);
  font-weight: normal;
  color: var(--color-text-heading);
}

/* E08 Caption */
.caption {
  margin: 0;
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  color: var(--color-text-muted);
}
.caption-name {
  font-weight: var(--type-caption-weight-name);
}

/* E11 Image focal point (B02, B04 focalPoint field) */
img[data-focal="top"] { object-position: top; }
img[data-focal="bottom"] { object-position: bottom; }
img[data-focal="left"] { object-position: left; }
img[data-focal="right"] { object-position: right; }

/* ---------- B01 Site Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--header-padding) var(--header-padding-end) var(--header-padding) var(--header-padding);
  background: var(--effect-header-glass-background);
  -webkit-backdrop-filter: blur(var(--effect-header-glass-blur));
  backdrop-filter: blur(var(--effect-header-glass-blur));
}

/* E14 Animated Wordmark */
.site-logo {
  display: block;
  flex: 0 0 auto;
  width: var(--logo-width);
}
.wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.wordmark-green { fill: var(--color-brand-green); }
.wordmark-yellow { fill: var(--color-accent-graphic); }

/* E10 Text Link in the nav */
.site-nav {
  display: flex;
  gap: var(--nav-gap);
  padding-top: var(--header-nav-offset);
  font-family: var(--type-nav-family);
  font-size: var(--type-nav-size);
  letter-spacing: var(--type-nav-tracking);
}
.nav-link {
  line-height: var(--type-nav-line-height);
  color: var(--color-text);
}
.nav-link:hover {
  color: var(--nav-link-hover);
}
.nav-link[aria-current="page"] {
  color: var(--nav-link-active);
}

/* E16 Menu Button + Mobile Menu */
.menu-button,
.menu-close {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}
.menu-button rect { fill: currentColor; }
.menu-close path { stroke: currentColor; fill: none; }
.mobile-menu {
  display: none;
}

@media (width < 820px) {
  .site-nav { display: none; }
  .menu-button { display: block; }
  .mobile-menu:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-stack-md);
    padding: 0 var(--space-gutter);
    background: var(--color-bg);
    font-family: var(--type-nav-mobile-family);
    font-size: var(--type-nav-mobile-size);
    font-weight: var(--type-nav-mobile-weight);
  }
  .menu-close {
    display: block;
    position: absolute;
    top: var(--header-padding);
    right: var(--header-padding);
  }
  .mobile-link {
    display: flex;
    align-items: center;
    padding: var(--space-stack-sm) 0;
    color: var(--color-text);
  }
  .mobile-link[aria-current="page"] {
    color: var(--nav-link-active);
  }
}

/* ---------- B02 Project Hero ---------- */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio-hero);
  overflow: hidden;
  background: var(--color-image-placeholder);
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--motion-hero-reveal-opacity-from);
  transform: scale(var(--motion-hero-reveal-scale-from));
  transition:
    opacity var(--motion-hero-reveal-opacity-duration) var(--motion-hero-reveal-opacity-easing),
    transform var(--motion-hero-reveal-scale-duration) var(--motion-hero-reveal-scale-easing);
}
.hero img.is-revealed {
  opacity: var(--motion-hero-reveal-opacity-to);
  transform: scale(var(--motion-hero-reveal-scale-to));
}
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--effect-hero-scrim);
}

/* ---------- B03 Project Intro ---------- */

.intro {
  padding: var(--space-stack-lg) var(--space-gutter) 0;
}
.intro-overview {
  margin-top: var(--space-stack-lg);
}

/* E09 Fact Row */
.facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  width: min(100%, var(--facts-width));
  margin: var(--space-stack-xl) 0 0 auto;
  font-family: var(--type-data-family);
  font-size: var(--type-data-size);
  line-height: var(--type-data-line-height);
  color: var(--color-text-muted);
}
.fact-row {
  display: grid;
  grid-template-columns: var(--facts-label-width) 1fr;
  align-items: center;
  min-height: var(--facts-row-height);
  padding: 0 var(--space-grid-gap);
  background: var(--color-surface-subtle);
}
.fact-row dt {
  margin: 0;
  font-weight: var(--type-data-weight-label);
}
.fact-row dd {
  margin: 0;
  font-weight: var(--type-data-weight-value);
}

/* ---------- B04 Full-Bleed Image ---------- */

.full-bleed {
  margin: var(--space-section) 0 0;
}
.full-bleed-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio-full-bleed);
  overflow: hidden;
  background: var(--color-image-placeholder);
}
.full-bleed-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.full-bleed-caption {
  padding: var(--caption-gap) var(--space-gutter) 0;
}

/* ---------- B05 Story Section ---------- */

.story {
  padding: var(--space-stack-md) var(--space-gutter) 0;
}
.story-with-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-stack-lg);
  align-items: start;
}
.story-statement {
  margin-top: var(--space-stack-lg);
}

/* E12 Angled Portrait + E08 caption */
.featured-person {
  display: flex;
  flex-direction: column;
  gap: var(--caption-gap);
  justify-self: end;
  width: var(--portrait-width);
  margin: 0;
}
.portrait {
  width: 100%;
  aspect-ratio: var(--ratio-portrait);
  object-fit: cover;
  background: var(--color-surface-band);
  -webkit-clip-path: url(#shape-angle-portrait);
  clip-path: url(#shape-angle-portrait);
}

@media (width < 820px) {
  .story-with-person {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- surface.band (starts at the first B06) ---------- */

.surface-band {
  position: relative;
  margin-top: var(--space-section);
  padding-bottom: var(--band-padding-bottom);
  background: var(--color-surface-band);
}
.surface-band > section {
  position: relative;
}

/* E15 Angle Band Edge */
.band-edge {
  position: absolute;
  top: 0;
  left: var(--band-notch-offset);
  display: block;
  width: var(--band-notch-width);
  height: auto;
  pointer-events: none;
}
.band-edge polygon {
  fill: var(--color-bg);
}

/* ---------- B06 Process Section ---------- */

.process {
  padding: 0 var(--space-gutter);
}
.process-intro {
  margin-top: var(--space-stack-md);
}
.process-concept-heading {
  margin-top: var(--space-stack-xl);
}

/* ---------- B07 Image Row ---------- */

.image-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-grid-gap);
  margin-top: var(--space-stack-lg);
}
.image-row-item {
  display: flex;
  flex-direction: column;
  gap: var(--caption-gap);
  margin: 0;
}
.drawing-image {
  width: 100%;
  aspect-ratio: var(--ratio-drawing);
  object-fit: cover;
  background: var(--color-surface-subtle);
}

@media (width < 820px) {
  .image-row {
    grid-auto-flow: row;
  }
}

/* ---------- B08 Drawing / Site Plan ---------- */

.drawing {
  display: flex;
  flex-direction: column;
  gap: var(--caption-gap);
  margin: var(--space-stack-lg) 0 0;
}
.drawing .drawing-image {
  background: var(--color-surface-band);
  mix-blend-mode: var(--effect-drawing-multiply);
}

/* B07 / B08 used on their own in the body */
.block-standalone {
  padding: 0 var(--space-gutter);
}
.block-standalone > .image-row,
.block-standalone > .drawing {
  margin-top: var(--space-stack-lg);
}

/* ---------- B09 Related Projects + C01 Project Card ---------- */

.related {
  padding: var(--space-section) var(--space-gutter) 0;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-card-gap);
  margin-top: var(--space-stack-md);
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--caption-gap);
  color: var(--color-text-muted);
}
.project-card:hover {
  color: var(--color-accent-link-hover);
}
.project-card-image {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-card);
  overflow: hidden;
  background: var(--color-image-placeholder);
}
.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-card-title {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line-height);
  text-wrap: pretty;
}

@media (width < 820px) {
  .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- B10 Team Members (E13 Avatar) ---------- */

.team {
  padding: var(--space-section) var(--space-gutter) 0;
}
.avatar-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-grid-gap);
  margin: var(--space-stack-md) 0 0;
  padding: 0;
  list-style: none;
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  aspect-ratio: var(--ratio-avatar);
  overflow: hidden;
  border-radius: var(--shape-avatar);
  background: var(--color-image-placeholder);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-name {
  font-family: var(--type-caption-family);
  font-size: var(--type-data-size);
  color: var(--color-bg);
  text-align: center;
}

/* ---------- B11 Site Footer ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
}
.footer-band {
  display: block;
  width: 100%;
  height: auto;
}
.footer-band polygon {
  fill: var(--color-brand-green);
}
.footer-text {
  margin: 0;
  padding: var(--footer-padding-top) var(--space-gutter) var(--footer-padding-bottom);
  text-align: center;
  font-family: var(--type-footer-family);
  font-size: var(--type-footer-size);
  line-height: var(--type-footer-line-height);
  color: var(--color-text-muted);
}
.footer-text a {
  color: inherit;
}
.footer-text a:hover {
  color: var(--color-accent-link-hover);
}
.footer-separator {
  display: inline-block;
  padding: 0 var(--footer-separator-gap);
}

/* ---------- Messages (not found) ---------- */

.page-message {
  padding: var(--space-section) var(--space-gutter);
}
.page-message .lead {
  margin-top: var(--space-stack-md);
}

/* ---------- Reduced motion (registry §8 item 3) ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero img {
    opacity: var(--motion-hero-reveal-opacity-to);
    transform: none;
    transition: none;
  }
}