/* ==========================================================================
   TGP Components V1
   Built only from foundations.css tokens. IDs match the Component Registry
   (B = block, E = element, C = card). New pieces not yet in the registry are
   marked NEW.
   ========================================================================== */

/* ---- B01 Site Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 6.8px + 1.81vw, 42px) var(--edge);
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.site-header .logo { display: block; line-height: 0; }
.site-header .logo-mark { display: block; height: clamp(56px, 38.4px + 4.69vw, 111px); aspect-ratio: 83 / 111; }
.site-header .logo-mark > img, .site-header .logo-mark > svg { width: 100%; height: 100%; }
.site-nav ul { display: flex; gap: clamp(20px, 2px + 4.48vw, 88px); }
.site-nav a { text-decoration: none; color: var(--c-ink-muted); transition: color .15s ease; padding-block: 10px; }
.site-nav a:hover { color: var(--c-green-text); }
.site-nav a[aria-current="page"] { color: var(--c-ink); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.menu-btn { display: none; }

@media (max-width: 820px) {
  .site-nav { display: none; }
  .menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    width: 44px; height: 44px; padding: 0 8px;
    background: none; border: 0; cursor: pointer;
  }
  .menu-btn span { display: block; height: 2px; background: var(--c-ink); }
  .site-header.open .site-nav {
    display: block; position: fixed; inset: 0; z-index: -1;
    background: var(--c-bg); padding: 120px var(--margin) 40px;
  }
  .site-header.open .site-nav ul { flex-direction: column; gap: var(--s-4); }
  .site-header.open .site-nav a { font-size: var(--t-54); font-weight: 300; color: var(--c-ink); }
}

/* ---- E14 Logo lockup (footer) ------------------------------------------- */
.lockup { display: flex; align-items: stretch; gap: var(--s-3); text-decoration: none; }
.lockup img { height: clamp(72px, 50px + 6vw, 156px); width: auto; }
.lockup .descriptor {
  display: flex; flex-direction: column; justify-content: space-between;
  font: 700 clamp(18px, 12px + 1.6vw, 49px)/0.92 var(--f-sans);
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--c-ink);
}

/* ---- B02 Hero (full bleed) ---------------------------------------------- */
.hero { position: relative; }
.hero .ph { --r: 16 / 9; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  align-content: end;            /* stays a .layout grid; text sits at the bottom */
  padding-bottom: var(--s-7);
}
.hero-text { grid-column: 6 / 14; text-align: right; }
.hero-text .t-feature { display: inline-block; margin-top: var(--s-3); }
.hero .dots { position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); z-index: 3; }
@media (max-width: 820px) {
  .hero .ph { --r: 4 / 5; }
  .hero-text { grid-column: content; }
}

/* ---- E18 Carousel dots (NEW) -------------------------------------------- */
.dots { display: flex; gap: clamp(14px, 9.4px + 1.2vw, 36px); }
.dots button {
  width: clamp(12px, 11px + .3vw, 17px); height: clamp(12px, 11px + .3vw, 17px);
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.8);
}
.dots button[aria-current="true"] { background: var(--c-yellow); }
.dots.on-light button { background: var(--c-placeholder-2); }
.dots.on-light button[aria-current="true"] { background: var(--c-ink); }
/* Keep a 44px tap area without changing the drawn dot size */
.dots button { position: relative; }
.dots button::after { content: ""; position: absolute; inset: -14px; }

/* ---- NEW Typology Word List (over image) -------------------------------- */
.typology { position: relative; }
.typology-overlay { position: absolute; inset: 0; z-index: 2; padding-top: var(--s-6); }
.typology-list a { text-decoration: none; color: var(--c-white); transition: color .15s ease; }
.typology-list a:hover { color: var(--c-yellow); }
.typology-list a[aria-current="true"] { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
.typology-list.compact { font-size: var(--t-36); line-height: 1.5; }
.typology-list.inline { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
@media (max-width: 820px) { .typology > .ph { --r: 4 / 5; } }

/* ---- E03 Lead / statement ----------------------------------------------- */
.statement { padding-block: var(--s-8); }

/* ---- B03 Project Intro -------------------------------------------------- */
.intro-title .sub { display: block; font-family: var(--f-sans); color: var(--c-green-text); }

/* ---- E09 Facts ---------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--gutter); padding-block: var(--s-5); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.facts div { display: flex; flex-direction: column; gap: 2px; }
.facts dt { font-size: var(--t-16); line-height: 1.5; }
.facts dd { font-size: var(--t-24); font-weight: 600; line-height: 1.35; }
@media (max-width: 820px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- E08 Caption -------------------------------------------------------- */
.caption { margin-top: var(--s-4); }
.caption .t-caption-title .area { color: var(--c-green-text); }
.caption .t-caption { margin-top: var(--s-2); }

/* ---- NEW Image Pair (half-bleed, 4:5) ----------------------------------- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--seam); }

/* ---- B07 Image Row ------------------------------------------------------ */
.image-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 820px) { .image-row { grid-template-columns: 1fr; } }

/* ---- Carousel (inset image + dots) -------------------------------------- */
.carousel { position: relative; }
.carousel .dots { position: absolute; left: 50%; bottom: var(--s-4); transform: translateX(-50%); z-index: 3; }

/* ---- NEW Inline Callout (link out from a story) ------------------------- */
.inline-callout { position: relative; padding-top: var(--s-2); border-top: 1px solid var(--c-ink); }
.inline-callout .label { display: block; font-size: var(--t-16); }
.inline-callout .label strong { font-size: var(--t-24); font-weight: 600; margin-left: .2em; }
.inline-callout .ph { margin-top: var(--s-3); }
.inline-callout a { text-decoration: none; }
.inline-callout a:hover .t-small { color: var(--c-green-text); }

/* ---- E07 Section Title row ---------------------------------------------- */
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-6); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--c-ink);
}
.icon-btn svg { width: 30px; height: 30px; }

/* ---- C01 Project Card + B09 Related ------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.card { text-decoration: none; display: block; }
.card .t-caption-title { margin-top: var(--s-4); }
.card .t-caption { color: var(--c-ink-muted); }
.card:hover .t-caption-title { color: var(--c-green-text); }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---- B10 Team Members / NEW Face Grid ----------------------------------- */
.faces { display: grid; grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr)); gap: var(--seam); }
.faces figure { margin: 0; }
.faces a { text-decoration: none; display: block; }
.faces .ph { filter: grayscale(1); }
.faces .name { margin-top: var(--s-2); font-size: var(--t-16); line-height: 1.4; }
.faces .name b { font-weight: 600; display: block; }
.faces a:hover .name b { color: var(--c-green-text); }
@media (max-width: 820px) { .faces { --cols: 4 !important; } }

.person-line b { font-weight: 600; }

/* ---- NEW Credits (collaborators) ---------------------------------------- */
.credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--gutter); }
.credits div { display: flex; flex-direction: column; }
.credits dt { font-size: var(--t-16); color: var(--c-ink-muted); line-height: 1.5; }
.credits dd { font-size: var(--t-24); font-weight: 600; line-height: 1.4; margin-bottom: var(--s-3); }
@media (max-width: 820px) { .credits { grid-template-columns: 1fr; } }

/* ---- NEW Pager (previous / next) ---------------------------------------- */
.pager { display: flex; justify-content: space-between; align-items: center; padding-block: var(--s-6); border-top: 1px solid var(--c-line); }
.pager a { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-ink-muted); min-height: 44px; }
.pager a:hover { color: var(--c-green-text); }
.pager svg { width: 28px; height: 14px; }

/* ---- NEW Job Listing ---------------------------------------------------- */
.jobs { border-top: 1px solid var(--c-line); }
.jobs li { border-bottom: 1px solid var(--c-line); }
.jobs a {
  display: grid; grid-template-columns: 6fr 3fr 2fr 1fr; gap: var(--gutter); align-items: baseline;
  padding-block: var(--s-5); text-decoration: none;
}
.jobs a:hover .t-caption-title { color: var(--c-green-text); }
.jobs .arrow { justify-self: end; }
@media (max-width: 820px) {
  .jobs a { grid-template-columns: 1fr auto; row-gap: 4px; }
  .jobs .meta { grid-column: 1; }
  .jobs .arrow { grid-row: 1; grid-column: 2; }
}

/* ---- NEW Contact Block -------------------------------------------------- */
.contact-block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--gutter); }
.contact-block dt { font-size: var(--t-16); color: var(--c-ink-muted); margin-bottom: var(--s-2); }
.contact-block dd { font-size: var(--t-24); line-height: 1.54; }
@media (max-width: 820px) { .contact-block { grid-template-columns: 1fr; } }

/* ---- E17 Input + Submit (the one button use case) ----------------------- */
.signup { display: flex; gap: var(--gutter); align-items: flex-end; }
.signup label { display: block; font-size: var(--t-16); color: var(--c-ink-muted); margin-bottom: var(--s-2); }
.signup .field { flex: 1; }
.signup input {
  width: 100%; font: inherit; font-size: var(--t-24); color: var(--c-ink);
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--c-ink); border-radius: 0; background: transparent;
}
.signup input::placeholder { color: var(--c-ink-muted); }
.signup input:focus { outline: none; border-bottom-width: 2px; }
.signup button {
  font: 600 var(--t-24)/1 var(--f-sans); letter-spacing: .01em;
  color: var(--c-white); background: var(--c-ink); border: 0; cursor: pointer;
  padding: 0 var(--s-5); min-height: 56px;
  transition: background .15s ease;
}
.signup button:hover { background: var(--c-green-text); }

/* ---- NEW Instagram Feed ------------------------------------------------- */
.insta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--seam); }
@media (max-width: 820px) { .insta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- NEW Person Header -------------------------------------------------- */
.person-portrait { grid-column: 6 / span 4; }
@media (max-width: 820px) { .person-portrait { grid-column: content; max-width: 320px; } }

/* ---- NEW Case Study Entry (landing) ------------------------------------- */
.cs-entry .label-on-image {
  position: absolute; left: var(--s-5); bottom: var(--s-5); z-index: 2;
}

/* ==========================================================================
   Home splash: ported from Claude Design "Guzzardo Home v5" (Oct 3 2026).
   Timings, easings and shape geometry are copied from the export; only the
   text placement follows the grid. Sequence (from page load):
     0.3s  small yellow angle flies in from top right (3s, settles fast)
     0.8s  hero photo wipes in left to right inside the big yellow angle;
           headline wipes in with it
     1.0s  big yellow angle fades in
     1.2s  dot field fades in
     1.8s  full photo, scrim and slide dots fade in; small angle fades out
   On scroll (statement 60% in view, never before 2.6s): the big angle exits
   bottom right as the statement's yellow shape slides in from the left,
   carrying white highlight words. 1s later the ink copy of those words fades.
   Slides crossfade every 5s. Reduced motion: final state, no movement.
   ========================================================================== */
.splash {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-bg);
  container-type: size;
}
.splash img { display: block; }
.splash-slides { position: absolute; inset: 0; }
.splash-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; z-index: 0;
  transition: opacity 1.1s cubic-bezier(.45, 0, .55, 1);
}
.splash-slides img.prev { opacity: 1; z-index: 1; }
.splash-slides img.cur  { opacity: 1; z-index: 2; }

/* Full photo layer: hidden until 1.8s on first load */
.splash-slides.base { z-index: 2; }
.splash:not(.go) .splash-slides.base img { opacity: 0; }
.splash.intro .splash-slides.base img { transition-delay: 1.8s; }

/* Big yellow angle (behind the photo; overflows below the hero) */
.splash-angle2 {
  position: absolute; left: 0; top: 24%; width: 100%; height: auto;
  z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .5s cubic-bezier(.45, 0, .55, 1) 1s;
}
.splash.go .splash-angle2 { opacity: 1; }
.splash.exit .splash-angle2 { transform: translate(130%, 115%); transition: transform 1.4s cubic-bezier(.22, .8, .2, 1); }

/* Dot field */
.splash-dots {
  position: absolute; right: 60px; top: calc(24% + 46cqw - 90px); width: 28%; height: auto;
  z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .5s cubic-bezier(.45, 0, .55, 1) 1.2s;
}
.splash.go .splash-dots { opacity: .65; }

/* Photo inside the big angle, wiping in */
.splash-mask {
  position: absolute; left: 0; top: 24%; width: 100%; aspect-ratio: 1930 / 1019;
  z-index: 1; overflow: hidden;
  -webkit-mask: url(../img/splash/angle_2.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../img/splash/angle_2.svg) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s cubic-bezier(.45, 0, .55, 1) .8s;
}
.splash-mask .splash-slides { inset: auto; left: 0; top: -24cqh; width: 100cqw; height: 100cqh; }
.splash.go .splash-mask { clip-path: inset(0 0 0 0); }

/* Small yellow angle flying in */
.splash-angle3 {
  position: absolute; left: 10.4%; top: calc(-1% + 12px); width: 76.6%; height: auto;
  z-index: 3; pointer-events: none; mix-blend-mode: multiply;
  transform: translate(122%, -57.6%); opacity: 1;
  transition: transform 3s cubic-bezier(.05, .9, .1, 1) .3s, opacity .5s cubic-bezier(.45, 0, .55, 1) 1.8s;
}
.splash.go .splash-angle3 { transform: translate(-1.5%, .7%); opacity: 0; }

/* Scrim, from the bottom right corner */
.splash-scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(to top left, rgba(20,22,18,.65) 0%, rgba(20,22,18,.42) 18%, rgba(20,22,18,.22) 32%, rgba(20,22,18,.1) 44%, rgba(20,22,18,.03) 54%, rgba(20,22,18,0) 62%);
  transition: opacity .5s cubic-bezier(.45, 0, .55, 1) 1.8s;
}
.splash.go .splash-scrim { opacity: 1; }

/* Headline: on the grid, wipes in with the photo */
.splash-text {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  align-content: end; padding-bottom: var(--s-7);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s cubic-bezier(.45, 0, .55, 1) .8s;
}
.splash-text a { pointer-events: auto; }
.splash.go .splash-text { clip-path: inset(0 0 0 0); }

/* Slide dots: the E18 component, fading in last */
.splash .dots { position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); z-index: 5; opacity: 0; transition: opacity .5s cubic-bezier(.45, 0, .55, 1) 1.8s; }
.splash.go .dots { opacity: 1; }

@media (max-width: 820px) {
  .splash { aspect-ratio: 4 / 5; }
  .splash .hero-text { grid-column: content; }
}

/* Statement that follows the splash */
.splash-statement { position: relative; z-index: 1; padding-block: calc(var(--s-8) + 50px) var(--s-8); overflow-x: clip; }
.stmt-wrap { container-type: inline-size; }
.stmt {
  position: relative; display: inline-block;
  font-size: min(var(--t-54), 4.6cqw);
  line-height: 1.216; /* from the export: the shape geometry depends on it */
}
.stmt-text { position: relative; margin: 0; white-space: nowrap; }
.stmt-text .hi { transition: color .2s ease; }
.stmt.done > .stmt-text .hi { color: transparent; }
.stmt-shape, .stmt-clip {
  position: absolute; left: -.647em; top: -.37em; width: 21.02em; height: 5.216em;
  clip-path: polygon(0 100%, 0 29.32%, 100% 0, 100% 38.91%);
  pointer-events: none; will-change: transform;
  /* start fully off the left edge of the screen */
  transform: translate(calc(-21.02em - var(--margin)), 0);
}
.stmt-shape { background: var(--c-yellow); }
.stmt-clip .stmt-text {
  position: absolute; left: .647em; top: .37em; color: transparent;
  will-change: transform; transform: translate(calc(21.02em + var(--margin)), 0);
}
.stmt-clip .hi { color: #fff; -webkit-text-stroke: .6px #fff; }
.stmt.on .stmt-shape, .stmt.on .stmt-clip, .stmt.on .stmt-clip .stmt-text {
  transform: translate(0, 0);
  transition: transform 1.4s cubic-bezier(.22, .8, .2, 1);
}
@media (max-width: 820px) {
  .stmt { font-size: var(--t-54); }
  .stmt-text { white-space: normal; }
  .stmt-text br { display: none; }
  /* Line breaks can't be guaranteed on phones, so the white-word overlay is
     dropped: the shape still slides in behind ink text */
  .stmt-clip { display: none; }
  .stmt.done > .stmt-text .hi { color: inherit; }
}

/* Reduced motion: everything lands in its final state */
@media (prefers-reduced-motion: reduce) {
  .splash *, .splash-statement * { transition: none !important; }
}

/* ---- B11 Site Footer ---------------------------------------------------- */
.site-footer { margin-top: var(--s-8); padding: var(--s-7) 0 var(--s-5); border-top: 1px solid var(--c-line); }
.site-footer .top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--gutter); }
.site-footer .social { display: flex; flex-direction: column; gap: var(--s-3); }
.site-footer .social a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--c-ink); }
.site-footer .social a:hover { color: var(--c-green-text); }
.site-footer .social svg { width: 36px; height: 36px; }
.site-footer .links { justify-self: end; display: flex; flex-direction: column; gap: 6px; }
.site-footer .links a { text-decoration: none; }
.site-footer .links a:hover { color: var(--c-green-text); }
.site-footer .legal { display: flex; justify-content: space-between; margin-top: var(--s-7); color: var(--c-ink-muted); }
@media (max-width: 820px) {
  .site-footer .top { grid-template-columns: 1fr; }
  .site-footer .social { flex-direction: row; }
  .site-footer .links { justify-self: start; }
  .site-footer .legal { flex-direction: column; gap: var(--s-2); }
}