/* ===================================================
   ABOUT + CONTACT
   Chrome (nav, scene, cursor, page-hero) is in site.css
   =================================================== */

/* ==============================
   SHARED SECTION SHELL
   ============================== */
.page-section {
  position: relative;
  z-index: var(--z-base);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad) var(--space-22);
}

/* extra air where a section follows the intro card rather than another
   section (About's Approach block, Contact's footer) */
.page-section--spaced { padding-top: var(--space-22); }
.footer--spaced { padding-top: var(--space-22); }

.page-section-head {
  --head-measure: 760px;
  max-width: var(--head-measure);
  margin-bottom: var(--space-8);
}

.page-section-head h2 {
  font: 600 var(--text-fluid-4xl)/var(--leading-tight) var(--display);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.page-section-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: var(--tracking-snug);
}

.page-section-head p {
  --p-measure: 620px;
  font: 400 var(--text-lg)/var(--leading-relaxed) var(--sans);
  color: var(--text);
  max-width: var(--p-measure);
}

.section-kicker {
  font: 700 var(--text-2xs)/var(--leading-none) var(--mono);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
  display: block;
}

/* ==============================
   ABOUT — portrait + intro
   ============================== */
.about-intro {
  /* pulls up over the hero's shoreline, like the case-study artwork */
  --overlap: 70px;
  position: relative;
  z-index: var(--z-raised);
  max-width: var(--page-max);
  margin: calc(-1 * var(--overlap)) auto 0;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-5);
  align-items: start;
}

.about-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: var(--hairline) solid var(--card-border);
  box-shadow: var(--shadow-frame);
  aspect-ratio: 4 / 5;
  background: var(--card);
}
.about-photo img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: top center;
}

.about-intro-card {
  --card-pad-y: 48px;
  --card-pad-x: 44px;
  background: var(--card);
  border: var(--hairline) solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad-y) var(--card-pad-x);
}

.about-intro-card h2 {
  font: 600 var(--text-fluid-2xl)/var(--leading-snug) var(--display);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.about-intro-card p {
  font: 400 var(--text-lg)/var(--leading-loose) var(--sans);
  color: var(--text);
}
.about-intro-card p + p { margin-top: var(--space-3); }
.about-intro-card strong { font-weight: 600; color: var(--fg); }

/* quick facts strip */
.about-facts {
  --fact-min: 140px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--fact-min), 1fr));
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: var(--hairline) solid var(--card-border);
}

.about-fact-label {
  display: block;
  font: 700 var(--text-2xs)/var(--leading-none) var(--mono);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.about-fact-value {
  display: block;
  font: 500 var(--text-base)/var(--leading-normal) var(--sans);
  color: var(--fg);
}

/* ==============================
   ABOUT — approach cards
   ============================== */
/* min(--card-min, 100%): a bare minmax(320px, 1fr) track cannot shrink below
   320px, so at a 320px viewport (288px of content) the cards overflowed the
   page and `overflow-x: clip` on body cut them off rather than scrolling —
   a reflow failure. The min() lets the track collapse to the container. */
.about-cards {
  --card-min: 320px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
  gap: var(--space-5);
}

.about-card {
  --card-pad-y: 40px;
  --card-pad-x: 36px;
  background: var(--card);
  border: var(--hairline) solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad-y) var(--card-pad-x);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.about-card:hover {
  transform: translateY(calc(-1 * var(--stroke-lg)));
  box-shadow: var(--shadow-card-hover);
}

.about-card-num {
  font: 700 var(--text-xs)/var(--leading-none) var(--mono);
  letter-spacing: var(--tracking-wider);
  color: var(--accent);
  margin-bottom: var(--space-4);
  display: block;
}

/* h3, not h2: these cards sit under the section's own h2, so an h2 here
   skipped a level and flattened the outline. */
.about-card h3 {
  font: 600 var(--text-fluid-lg)/var(--leading-base) var(--display);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.about-card p {
  font: 400 var(--text-base)/var(--leading-loose) var(--sans);
  color: var(--text);
}
.about-card p + p { margin-top: var(--space-3); }
.about-card strong { font-weight: 600; color: var(--fg); }

/* ==============================
   ABOUT — bento gallery
   ============================== */
.outside-grid {
  --tile-h: 230px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, var(--tile-h));
  gap: var(--space-4);
}

.tile {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: var(--hairline) solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  background: linear-gradient(140deg, var(--sky-2), var(--card));
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.tile:hover { transform: translateY(calc(-1 * var(--stroke-lg))); box-shadow: var(--shadow-card-hover); }

.tile img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-smooth);
}
.tile:hover img { transform: scale(1.05); }

.tile figcaption {
  --cap-pad-y: 6px;
  --cap-pad-x: 13px;
  --cap-inset-x: 16px;
  --cap-inset-y: 14px;
  --cap-shift: 6px;
  position: absolute;
  left: var(--cap-inset-x); bottom: var(--cap-inset-y);
  padding: var(--cap-pad-y) var(--cap-pad-x);
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: var(--hairline) solid var(--glass-line);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  font: 500 var(--text-xs)/var(--leading-none) var(--mono);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  transform: translateY(var(--cap-shift));
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.tile:hover figcaption { opacity: 1; transform: translateY(0); }

.tile-travel { grid-column: span 2; grid-row: span 2; }
.tile-snow   { grid-column: span 2; grid-row: span 1; }

/* ==============================
   CONTACT
   ============================== */
.contact-grid {
  --overlap: 70px;
  position: relative;
  z-index: var(--z-raised);
  max-width: var(--page-max);
  margin: calc(-1 * var(--overlap)) auto 0;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-5);
  align-items: start;
}

.contact-card {
  --card-pad-y: 44px;
  --card-pad-x: 40px;
  background: var(--card);
  border: var(--hairline) solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad-y) var(--card-pad-x);
}

.contact-card h2 {
  font: 600 var(--text-fluid-xl)/var(--leading-snug) var(--display);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.contact-card > p {
  --p-measure: 440px;
  font: 400 var(--text-lg)/var(--leading-loose) var(--sans);
  color: var(--text);
  margin-bottom: var(--space-8);
  max-width: var(--p-measure);
}

.contact-links { display: flex; flex-direction: column; gap: var(--space-2); }

.contact-link {
  --link-pad-y: 16px;
  --link-pad-x: 20px;
  --link-shift: 4px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--link-pad-y) var(--link-pad-x);
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--card-border);
  background: var(--bg);
  color: var(--fg);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.contact-link:hover {
  border-color: var(--accent);
  transform: translateX(var(--link-shift));
}

.contact-link-icon {
  --icon-box: 40px;
  --icon-size: 18px;
  inline-size: var(--icon-box);
  block-size: var(--icon-box);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
  background: var(--wash-soft);
}
.contact-link-icon svg {
  inline-size: var(--icon-size); block-size: var(--icon-size);
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.contact-link-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.contact-link-label { font: 600 var(--text-base)/var(--leading-none) var(--sans); }
.contact-link-value {
  font: 400 var(--text-sm)/var(--leading-base) var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.contact-link-arrow {
  margin-left: auto;
  font: 400 var(--text-lg)/var(--leading-none) var(--sans);
  color: var(--muted);
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.contact-link:hover .contact-link-arrow { transform: translateX(var(--stroke-lg)); color: var(--accent); }

/* dark inverted side panel */
.contact-info {
  --card-pad-y: 44px;
  --card-pad-x: 40px;
  background: var(--surface-invert);
  color: var(--on-invert);
  border: var(--hairline) solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: var(--card-pad-y) var(--card-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.contact-info :where(a, button):focus-visible { --focus-color: var(--on-invert); }

.contact-info-block { display: flex; flex-direction: column; gap: var(--space-2); }

.contact-info-label {
  font: 700 var(--text-2xs)/var(--leading-none) var(--mono);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--on-invert-muted);
}

.contact-info-value {
  font: 500 var(--text-xl)/var(--leading-base) var(--sans);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.contact-quote {
  font: 300 italic var(--text-lg)/var(--leading-relaxed) var(--sans);
  color: var(--on-invert-muted);
  border-left: var(--stroke) solid var(--on-invert-line);
  padding-left: var(--space-5);
  margin-top: var(--space-1);
}

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 980px) {
  .about-intro,
  .contact-grid {
    --overlap: 48px;
    grid-template-columns: 1fr;
  }
  .about-photo { aspect-ratio: 16 / 11; }
  .about-intro-card,
  .contact-card,
  .contact-info { --card-pad-y: 34px; --card-pad-x: 28px; }

  .outside-grid {
    --tile-h: 200px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, var(--tile-h));
  }
  .tile-travel, .tile-snow { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 600px) {
  .about-intro, .contact-grid { --overlap: 32px; }
  .about-intro-card,
  .contact-card,
  .contact-info,
  .about-card { --card-pad-y: 28px; --card-pad-x: 22px; }

  .outside-grid {
    --tile-h: 210px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, var(--tile-h));
  }
  .tile-travel, .tile-snow { grid-column: span 1; }
  .tile figcaption { opacity: 1; transform: none; }
}