/*
 * Chrome: the site header (nav) and footer. Both sit on --surface-chrome, one step
 * off the page (DESIGN.md §3 "page/chrome two-tone"). Geometry measured from V0.1
 * frames 62:1315 (Nav) and 62:1236 (Footer).
 */

/* ============ Header / nav ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-height);
  background: var(--surface-chrome);
  color: var(--ink-primary);
  /* Hide and show glide with a longer ease in and out (Nick, 2026-09-25). */
  transition: transform 650ms var(--ease-in-out), background-color var(--dur-base) var(--ease-out);
}
/* Scrolled: when the header comes back on scroll-up it slides down on a frosted band,
   so the page reads through it without colliding with the logo and pills
   (review 2026-09-24, G1: "not true refraction, blurry"). */
/* --nav-glass and --nav-blur come from Site → Navigation (nav.php). */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--surface-chrome) var(--nav-glass, 70%), transparent);
  -webkit-backdrop-filter: blur(var(--nav-blur, 18px)) saturate(1.4); backdrop-filter: blur(var(--nav-blur, 18px)) saturate(1.4);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink-primary) 8%, transparent);
}
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }

.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 27px; /* V0.1 centres the bar at y≈70 of the 112 band */
  transition: padding-top var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled .site-header__inner { padding-top: 0; }

.logo { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--ink-primary); }
.logo svg { width: 117px; height: auto; overflow: visible; } /* the dot fills the box top to bottom; clipped at a fractional y while the header slides it went flat (Nick, 2026-09-26) */

/* The black pill sits 3px inside the white one all round (review 2026-09-24, G5). */
.nav {
  position: relative;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-page);
}
.nav__list {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  height: 31px;
}
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  /* The pills tighten from 1280 down to 1024 so nine links still clear the logo
     (Outcomes, 2026-10-09). 18 sides of padding share whatever the row has spare. */
  height: 31px; padding: 0 clamp(6px, (100vw - 910px) / 18, 18.5px) var(--lift);
  font-family: var(--font-ui); font-size: var(--fs-label-sm); line-height: 1; letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--ink-primary);
  transition: color var(--dur-base) var(--ease-out);
}
/* The black pill. Sits under the current page; JS slides it to whatever is hovered. */
.nav__indicator {
  position: absolute; top: 3px; left: 0; z-index: 0;
  height: 31px; width: 0;
  border-radius: var(--radius-pill);
  background: var(--action-primary-bg);
  transition: transform 450ms var(--ease-out), width 450ms var(--ease-out), opacity var(--dur-fast);
  pointer-events: none;
}
.nav .nav__link.is-target { color: var(--action-primary-ink); }
/* Without JS the indicator never measures, so fall back to a static pill. */
.no-js .nav__link.is-current { background: var(--action-primary-bg); color: var(--action-primary-ink); border-radius: var(--radius-pill); }

.nav-toggle { display: none; }

/* ---------- Mobile nav (Nav Mobile 390×72 + a drawer the comp never designed) ---------- */
@media (max-width: 1023px) {
  .site-header__inner { padding-top: 0; }
  .nav { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 37px; padding: 0 18px; border-radius: var(--radius-pill);
    background: var(--action-primary-bg); color: var(--action-primary-ink);
    font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: -0.05em;
  }
  .nav-toggle__bars { position: relative; width: 14px; height: 8px; }
  .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
    transition: transform var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);
  }
  .nav-toggle__bars::before { top: 0; }
  .nav-toggle__bars::after { top: 6.5px; }
  .menu-open .nav-toggle__bars::before { top: 3.25px; transform: rotate(45deg); }
  .menu-open .nav-toggle__bars::after { top: 3.25px; transform: rotate(-45deg); }
}

.menu {
  position: fixed; inset: 0; z-index: 49;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-height) + var(--space-32)) var(--gutter) var(--space-40);
  background: var(--surface-chrome); color: var(--ink-primary);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 600ms var(--ease-in-out);
  visibility: hidden;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
/* Every row is a full-width tap target at least 56px tall, not just the word (Tucker,
   2026-09-25). The label stays inline inside it, so a wrapped name ("AI Creative Systems")
   keeps its current-page dot after the last word. */
.menu__list { display: grid; gap: 0; }
.menu__link {
  display: flex; align-items: center; width: 100%; min-height: 56px; padding-block: 4px;
  font-family: var(--font-display); font-size: 40px; line-height: 1.1; letter-spacing: -0.05em;
  opacity: 0; transform: translateY(20px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: calc(150ms + var(--i) * 45ms);
  -webkit-tap-highlight-color: transparent;
}
.menu__link:active .menu__label { opacity: 0.6; }
/* The current page's dot is sized to the type and centred on its optical middle: halfway
   between the x-height's middle and the cap height's (Ekstra: x 0.58em, cap 0.68em, so
   0.315em up), not on the line box. */
.menu__link.is-current .menu__label::after {
  content: ""; display: inline-block; width: 0.34em; height: 0.34em; margin-left: 0.3em;
  border-radius: 50%; background: currentColor;
  vertical-align: calc(0.315em - 0.17em);
}
.menu-open .menu__link { opacity: 1; transform: none; }
.menu__meta { display: grid; gap: 0; }
.menu__meta a { display: flex; align-items: center; min-height: 44px; }
.menu-open { overflow: hidden; }
.menu-open .site-header { background: var(--surface-chrome); transform: none; }

/* ============ Footer ============ */
.site-footer {
  background: var(--surface-chrome);
  color: var(--ink-primary);
  padding-block: 40px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 201px 1fr 381px;
  grid-template-areas:
    "links1 links2 invite"
    "phone  email  legal";
  row-gap: 88px;
}
.site-footer__links { display: grid; gap: 8px; align-content: start; }
.site-footer__links a { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.45; letter-spacing: -0.03em; }
:where([data-input="mouse"], .no-js) .site-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__links--1 { grid-area: links1; }
.site-footer__links--2 { grid-area: links2; }

.invite { grid-area: invite; display: grid; gap: 22px; align-content: start; }
.invite__title { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-label-md); line-height: 1.25; letter-spacing: -0.05em; }
.invite__form { display: flex; align-items: flex-end; gap: 15px; }
.invite__field { flex: 1; position: relative; }
.invite__input {
  width: 100%; height: 37px; padding: 0; border: 0; border-bottom: 1px solid var(--border-strong);
  background: transparent; outline: 0; border-radius: 0;
  font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: -0.05em;
}
.invite__input::placeholder { color: var(--ink-primary); opacity: 1; }
.invite__input:focus { border-bottom-width: 2px; }
.invite .btn { width: 138px; flex: none; }
.invite__status { font-family: var(--font-ui); font-size: var(--fs-label-xs); letter-spacing: -0.05em; min-height: 12px; }
.invite__hp { position: absolute; left: -9999px; }

.socials { display: flex; gap: 22px; align-items: center; }
.socials a { display: inline-flex; width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
:where([data-input="mouse"], .no-js) .socials a:hover { transform: translateY(-2px); opacity: 0.7; }
.socials svg { width: 100%; height: 100%; }

.site-footer__phone, .site-footer__email {
  font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-label-lg); line-height: 1; letter-spacing: -0.05em;
  align-self: end;
}
.site-footer__phone { grid-area: phone; }
.site-footer__email { grid-area: email; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where([data-input="mouse"], .no-js) .site-footer__email:hover { text-decoration-thickness: 2px; }
.site-footer__legal {
  grid-area: legal; align-self: end; display: flex; gap: 10px;
  font-family: var(--font-ui); font-size: var(--fs-label-xs); line-height: 1; letter-spacing: -0.05em;
}
:where([data-input="mouse"], .no-js) .site-footer__legal a:hover { text-decoration: underline; }
/* The full wordmark closes every page, in the footer's own ink (Madeline's Direction #1, minus the blue). */
.site-footer__mark { margin-top: 144px; }
.site-footer__mark svg { display: block; width: 100%; height: auto; }
/* Cropped: the wordmark runs off the bottom of the page, cut through the x-height. */
.site-footer:has(.site-footer__mark--crop) { padding-bottom: 0; }
.site-footer__mark--crop { aspect-ratio: 1257 / 100; overflow: hidden; }

/* The contact page's footer drops the invitation form, which repeats the form above it
   (Nick 09-30; every width, Tucker). On desktop the grid's third column, the invite's,
   collapses to the legal line under it, flush right. */
.tpl-contact .invite { display: none; }
@media (min-width: 1024px) {
  .tpl-contact .site-footer__grid { grid-template-columns: 201px 1fr max-content; }
}

@media (max-width: 1023px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "invite invite"
      "links1 links2"
      "phone  phone"
      "email  email"
      "legal  legal";
    row-gap: 32px;
  }
  .site-footer__email { font-size: var(--fs-label-md); }
}
/* Phones (mobile pass, 2026-09-25): 44px tap targets on every footer link and the menu
   button, a 16px invitation field so iOS doesn't zoom on focus, and a wordmark gap sized
   for a phone rather than the desktop's 144. */
@media (max-width: 767px) {
  .nav-toggle { position: relative; }
  .nav-toggle::after { content: ""; position: absolute; inset: -4px; }
  .site-header .logo { min-height: 44px; } /* the wordmark draws 28px tall; the link is a tap target */
  .menu__meta { display: none; } /* the phone and email leave the fly-out on phones (Nick 09-30); the footer has them */
  .site-footer__links { gap: 0; }
  .site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } /* "News" is narrower than 44 */
  .site-footer__phone, .site-footer__email { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
  .site-footer__grid { row-gap: var(--space-8); } /* the 44px targets carry the air now */
  .site-footer__legal { align-items: center; flex-wrap: wrap; }
  .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .invite__input { height: 44px; font-size: 16px; }
  .invite .btn { min-height: 44px; }
  .site-footer__mark { margin-top: var(--space-64); }
}