/* ================================================
   IAh Architects — Stylesheet
   Aesthetic: refined minimalism, editorial spacing,
   monochrome palette, generous whitespace.
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500&display=swap');

:root {
  /* Locked IAh / phasework brand tokens */
  --color-bg: #FAFAF9;      /* paper */
  --color-ink: #14171C;     /* ink */
  --color-muted: #5f6168;
  --color-rule: #E7E2D8;
  --color-accent: #B83C3C;  /* signal */
  --color-stone: #F0EAE0;
  --color-olive: #2C2A1F;

  --font-display: 'Geist', -apple-system, system-ui, sans-serif;
  --font-body: 'Geist', -apple-system, system-ui, sans-serif;
  --fs: 15px;        /* the one text size */
  --fs-title: 28px;  /* page titles only */
  --font-label: 'Geist', -apple-system, system-ui, sans-serif;

  --max-width: 1800px;
  --gutter: clamp(1.25rem, 3.5vw, 3.5rem);

  --tracking-wide: 0;
  --tracking-mid: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: 0.6; }

/* ============== HEADER / NAV ============== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 249, 0.9);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-rule);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.75rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;  /* the wordmark is part of the logo, not text: sized to the 40px mark */
  letter-spacing: -0.015em;
  color: var(--color-ink);
  white-space: nowrap;
}

/* The mark is a true square (406.406 x 406.406 in the source). As an
   inline-block with no in-flow line boxes its baseline is its bottom edge,
   so the wordmark sits on the same line the peaks stand on. */
.brand-glyph {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex: none;
}
.brand-glyph svg { display: block; width: 100%; height: 100%; }
/* The "h" of IAh in the header wordmark takes the mark's light grey. */
.brand .brand-h { color: #D8D8D8; }

/* Lockup: peaks glyph at far left + the IAh wordmark. Sized in em so the
   whole thing scales as one unit (including the landing-intro animation). */
.brand-lockup {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.logo-glyph {
  display: inline-block;
  width: 0.95em;
  height: 0.72em;
  margin-right: 0.34em;
  flex: none;
  align-self: center;
  position: relative;
  top: 0.02em;
}
.logo-glyph svg { display: block; width: 100%; height: 100%; }

/* IAh logo: a solid block "I" + "Ah" (Inter). The block sits on the text
   baseline at cap height, so it scales cleanly with the wordmark. */
.logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink);
}

.logo-i {
  display: inline-block;
  width: 0.30em;
  height: 0.73em;
  background: currentColor;
  margin-right: 0.1em;
}

.brand .brand-mark {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: var(--fs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
  position: relative;
  top: -0.02em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav a, .nav-toggle-label {
  font-family: var(--font-label);
  font-size: var(--fs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--color-ink);
  position: relative;
  padding: 0.25rem 0;
}

.nav a.is-active::after,
.nav a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--color-ink);
}

/* Dropdown for WORK */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0;
}

.nav-dropdown-toggle::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after {
  transform: translateY(0) rotate(225deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  padding: 0.5rem 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  list-style: none;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-label);
  font-size: var(--fs);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
}

/* Mobile toggle */
.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  cursor: pointer;
  user-select: none;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  font-family: inherit;
}

@media (max-width: 880px) {
  /* Opaque header on mobile: backdrop-filter over the scrolling gallery
     causes visible flicker on iOS/Android. */
  .site-header {
    background: var(--color-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-toggle-label { display: inline-block; }
  .nav {
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 2rem var(--gutter);
    border-top: 1px solid var(--color-rule);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.7,0,.2,1);
  }
  .nav-toggle:checked ~ .nav { transform: translateX(0); }
  .nav a, .nav-dropdown-toggle {
    padding: 1rem 0;
    width: 100%;
    border-bottom: 1px solid var(--color-rule);
    font-size: var(--fs);
  }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    border: 0;
    padding: 0 0 0 1rem;
    opacity: 1;
    visibility: visible;
    min-width: 0;
  }
  .nav-dropdown-menu a { padding: 0.6rem 0; border-bottom: 1px solid var(--color-rule); }
}

/* ============== MAIN ============== */
main { flex: 1; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-pad {
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  display: inline-block;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--fs-title);
  margin-bottom: 1.5rem;
}

h2 {
  font-size: var(--fs-title);
  margin-bottom: 1.25rem;
}

h3 { font-size: var(--fs); margin-bottom: 0.75rem; }

.lead {
  font-size: var(--fs);
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 60ch;
}

p { margin-bottom: 1.25rem; max-width: 70ch; }
p:last-child { margin-bottom: 0; }

/* ============== HOME — MASONRY GRID ============== */
.hero-rule {
  border-top: 1px solid var(--color-rule);
  margin: 0 auto;
  max-width: var(--max-width);
}

.gallery {
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  align-items: flex-start;
}

.gallery-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

/* Source bucket — items live here in the HTML, JS distributes them into columns */
.gallery-bucket { display: none; }

.gallery-item {
  overflow: hidden;
  background: #f4f4f4;
  position: relative;
  contain: layout paint;
  /* aspect-ratio is set per-item inline based on real image dimensions */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover motion only on hover-capable devices — avoids per-image GPU layers
   (will-change/filter) that flicker during touch scrolling on mobile. */
@media (hover: hover) {
  .gallery-item img {
    transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .4s ease;
  }
  .gallery-item:hover img {
    transform: scale(1.03);
    filter: saturate(1.05);
  }
}

/* Each tile links to its project; caption appears bottom-right on hover */
.gallery-link {
  position: absolute;
  inset: 0;
  display: block;
}

.gallery-item .caption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.55rem 0.85rem;
  background: rgba(20, 23, 28, 0.82);
  color: #fff;
  font-family: var(--font-label);
  font-size: var(--fs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.gallery-item:hover .caption,
.gallery-link:focus-visible .caption { opacity: 1; transform: translateY(0); }

/* Infinite-scroll sentinel — invisible but reserves a sliver of space */
.gallery-sentinel {
  height: 1px;
  width: 100%;
}

/* Home page: tighten footer spacing since the gallery itself is the page */
body.home .site-footer { margin-top: 0; }

/* ============== ABOUT / TEXT PAGES ============== */
.text-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

@media (max-width: 720px) {
  .text-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

.text-layout h1 {
  font-size: var(--fs-title);
  position: sticky;
  top: 6rem;
}

.prose p + p { margin-top: 0; }

/* ============== PEOPLE ============== */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2.5rem;
}

.person {
  display: flex;
  flex-direction: column;
}

.person-photo {
  aspect-ratio: 4 / 5;
  background: #ededed;
  margin-bottom: 1.25rem;
  overflow: hidden;
  position: relative;
}

.person-photo::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted);
}

.person-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

.person h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs);
  letter-spacing: var(--tracking-mid);
  margin-bottom: 0.25rem;
}

.person .role {
  font-family: var(--font-label);
  font-size: var(--fs);
  color: var(--color-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  font-weight: 400;
}

/* ============== PEOPLE — bio list ============== */
.people-list {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: 3rem;
  max-width: 1100px;
}

/* Name and role sit on their own row over the bio column, so the photo's top
   edge lines up with the first line of the bio rather than with the name. */
.people-list .person {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  grid-template-areas:
    ".     head"
    "photo body";
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: 1.1rem;
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--color-rule);
}
.people-list .person-head  { grid-area: head; }
/* nudged down by the bio's half-leading so the photo meets the cap line */
.people-list .person-photo { grid-area: photo; margin: 0.4rem 0 0; }
.people-list .person-body  { grid-area: body; }
.people-list .person-body .person-bio:first-child { margin-top: 0; }

.people-list .person:last-child { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 640px) {
  .people-list .person {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "photo" "body";
    row-gap: 1.25rem;
  }
  .people-list .person-photo { max-width: 220px; }
}

.person .cred {
  font-family: var(--font-label);
  font-size: var(--fs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  text-transform: none;
  margin-left: 0.4rem;
}

.person-info { padding-top: 0.15rem; }

.person-bio {
  font-size: var(--fs);
  line-height: 1.7;
  color: #2b2b2b;
  margin-top: 0.9rem;
  margin-bottom: 0;
  max-width: 62ch;
}

.collaborators {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--color-rule);
  max-width: 1100px;
}
.collaborators p {
  font-size: var(--fs);
  color: var(--color-ink);
  margin-top: 0.35rem;
}
/* A second block (the headshot credit) sits under the first, no second rule. */
.collaborators + .collaborators { margin-top: 1.75rem; padding-top: 0; border-top: 0; }
.collaborators a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* ============== PROJECT DETAIL ============== */
.pd-head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.back-link { cursor: pointer; }
.back-link:hover { color: var(--color-ink); }

.pd-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-top: 0.5rem;
}

@media (max-width: 720px) { .pd-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

.project-facts {
  display: grid;
  gap: 1.1rem;
}
.project-facts div { display: grid; gap: 0.15rem; }
.project-facts dt {
  font-family: var(--font-label);
  font-size: var(--fs);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--color-muted);
}
.project-facts dd { font-size: var(--fs); }

.pd-meta { display: grid; gap: 1.5rem; align-content: start; }

.pd-press a {
  font-family: var(--font-label);
  font-size: var(--fs);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  font-weight: 400;
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.pd-press a:hover { opacity: 1; color: var(--color-ink); }
/* Several press links stack closer than the rest of the meta column. */
.pd-press-list { display: grid; gap: 0.6rem; }
.pd-press-list .pd-press { margin: 0; }

.pd-hero {
  max-width: var(--max-width);
  margin: 0 auto clamp(0.75rem, 1.5vw, 1.5rem);
  padding: 0 var(--gutter);
}
.pd-hero img { width: 100%; height: auto; background: var(--color-stone); }
.pd-hero-media img { max-width: 920px; margin: 0 auto; }

.project-gallery {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  columns: 2;
  column-gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
@media (max-width: 720px) { .project-gallery { columns: 1; } }

.pg-item {
  break-inside: avoid;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.5rem);
  overflow: hidden;
  background: #f4f4f4;
}
.pg-item img {
  width: 100%; height: auto; display: block;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.pg-item:hover img { transform: scale(1.02); }

/* ============== LIGHTBOX / GALLERY VIEWER ============== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(20, 23, 28, 0.95);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lb-stage {
  grid-column: 2;
  display: grid;
  place-items: center;
  padding: 4vmin;
  min-width: 0;
}
.lb-stage img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.lb-btn {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 2.4rem;
  line-height: 1;
  padding: 1rem 1.2rem;
  opacity: 0.75;
  transition: opacity .2s ease;
}
.lb-btn:hover { opacity: 1; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-close {
  position: absolute;
  top: 0.4rem;
  right: 1rem;
  font-size: 2.6rem;
  z-index: 1;
}
.lb-count {
  position: absolute;
  bottom: 1.1rem;
  left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-label);
  font-size: var(--fs);
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 600px) {
  .lb-btn { font-size: 1.9rem; padding: 0.5rem 0.55rem; }
  .lb-stage { padding: 8vmin 2vmin; }
  .lb-stage img { max-height: 80vh; }
}

.prevnext {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--color-rule);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.prevnext a {
  display: grid;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--fs);
  font-weight: 400;
}
.prevnext .pn-next { text-align: right; }
.prevnext span {
  font-family: var(--font-label);
  font-size: var(--fs);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--color-muted);
}

.text-link {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  font-size: var(--fs);
  letter-spacing: 0;
  text-transform: none;
}

/* ============== WORK / PROJECT GRID ============== */
.project-intro {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 720px) { .project-grid { grid-template-columns: 1fr; } }

.project {
  display: block;
}

.project-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 1rem;
}

.project-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}

.project:hover .project-image img { transform: scale(1.04); }

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-label);
  font-size: var(--fs);
  letter-spacing: var(--tracking-wide);
  font-weight: 400;
}

.project-name { font-weight: 500; text-transform: none; }
.project-loc { color: var(--color-muted); text-transform: none; }

/* ============== CONTACT ============== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}

@media (max-width: 720px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-info p { font-size: var(--fs); margin-bottom: 0.6rem; }
.contact-info .label {
  font-family: var(--font-label);
  font-size: var(--fs);
  text-transform: none;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
  display: block;
  font-weight: 400;
}

.contact-info .label:first-child { margin-top: 0; }

form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 480px) { form .row { grid-template-columns: 1fr; } }

form label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs);
  text-transform: none;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-bottom: 0.4rem;
  margin-top: 1.25rem;
  font-weight: 400;
}

form input, form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-ink);
  background: transparent;
  padding: 0.6rem 0;
  font-family: inherit;
  font-size: var(--fs);
  color: var(--color-ink);
  outline: none;
  transition: border-color .2s ease;
}

form textarea {
  min-height: 140px;
  resize: vertical;
}

form input:focus, form textarea:focus {
  border-bottom-width: 2px;
}

form button {
  margin-top: 2rem;
  background: var(--color-ink);
  color: #fff;
  border: 0;
  padding: 1rem 2.5rem;
  font-family: var(--font-label);
  font-size: var(--fs);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

form button:hover { background: #000; }
form button:active { transform: translateY(1px); }

.form-status {
  margin-top: 1.25rem;
  font-size: var(--fs);
  color: var(--color-muted);
}

/* ============== FOOTER ============== */
.site-footer {
  border-top: 1px solid var(--color-rule);
  padding: 2.5rem var(--gutter);
  margin-top: 4rem;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.socials { display: flex; gap: 1rem; }

.socials a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .2s ease, color .2s ease;
}

.socials a:hover { background: var(--color-ink); color: #fff; opacity: 1; }

.socials svg { width: 16px; height: 16px; }

.copyright {
  font-family: var(--font-label);
  font-size: var(--fs);
  color: var(--color-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  font-weight: 400;
}

/* ============== ENTRY ANIMATION ============== */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rise {
  animation: rise .8s cubic-bezier(.2,.6,.2,1) both;
}

.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.15s; }
.rise-3 { animation-delay: 0.25s; }

/* ============== LANDING INTRO (home) ============== */
/* Big "IAh" centred, then JS animates it into the top-left logo spot while
   the grid is revealed. A JS-less fallback simply fades the overlay out. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--color-bg);
  display: grid;
  place-items: center;
  animation: introAutoHide .6s ease 2.6s forwards; /* fallback if JS is off */
}

#intro .intro-bg {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
}

#intro .intro-mark {
  position: relative;
  display: block;
  width: clamp(150px, 30vw, 380px);
  height: clamp(150px, 30vw, 380px);
  transform-origin: left top;
  will-change: transform;
}
#intro .intro-mark svg { display: block; width: 100%; height: 100%; }

@keyframes introAutoHide { to { opacity: 0; visibility: hidden; } }
@keyframes introPulse { 0% { transform: scale(.94); } 45% { transform: scale(1); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  #intro { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Footer credit for the logo designers */
.copyright .credit { margin-left: 1.25rem; }
.copyright .credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.copyright .credit a:hover { color: var(--color-ink); opacity: 1; }
@media (max-width: 640px) { .copyright .credit { display: block; margin: 0.4rem 0 0; } }