/* ============================================================
   TTCC — CONTACT PAGE
   contact.html only: a two-column split — type on the left in the
   shared gutter, one full-bleed still on the right that starts at the
   top of the page and runs behind the (frosted) top bar — with the
   footer following it at full width. The shell (top bar,
   menu panel, search overlay, footer) comes from base.css + nav.css +
   footer.css, shared with the other pages.
   ============================================================ */

/* The split is the page; the footer sits after it, untouched. The still
   starts at the very top and runs behind the fixed top bar, so the grid
   itself begins at y=0 and the left column pays the bar's height back as
   padding. */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 30vw;
  min-height: 100vh;
}

/* Left column carries the standard gutter; the right one deliberately
   does not, so the image can meet the screen's edge. The top padding is
   the bar's height plus the page's own 90px.

   The left inset matches .topbar__inner rather than being a flat gutter:
   that box is capped at 2000px and centred, so past 2192px the logo sits
   further in than the gutter alone would put it. Below that width the
   max() resolves to plain var(--gutter), so nothing is added. */
.contact-split__text {
  padding: calc(var(--topbar-h) + 90px) var(--gutter) 120px;
  padding-left: max(var(--gutter), calc((100vw - 2000px) / 2 + var(--gutter)));
}

.contact-split__media {
  overflow: hidden;
  background: #ececec;          /* shows through until the image lands */
}

.contact-split__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* ----- Type -----
   Deliberately larger than any other page heading. */
.contact__title {
  font-size: clamp(64px, 9vw, 140px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #000000;
}

/* The line that opens the column: a step above body size, a step below
   the CONTACT lockup. */
.contact__lead {
  margin-top: 72px;
  max-width: 420px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #000000;
}

.contact__intro {
  margin-top: 20px;
  max-width: 320px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: #000000;
}

/* ----- Details -----
   Two columns, generously spaced; each item is a grey label with its
   value or values under it. */
.contact-details {
  margin-top: 90px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 56px;
  align-items: start;
}

.contact-details__label {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #8a8a8a;
}

.contact-details__value {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;           /* <address> would italicise itself */
  line-height: 1.55;
  color: #000000;
}

/* Glyph link: sized to the body text it sits in, and dark to match it. */
.contact-details__icon {
  display: inline-flex;
  color: #000000;
  transition: color 0.2s ease;
}

.contact-details__icon:hover {
  color: #6a6a6a;
}

.contact-details__icon svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
}

/* Socials are the same glyph link as above, three across one line. */
.contact-details__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

/* ----- Frosted top bar (this page only) -----
   The still runs under the bar, so the bar takes the hero pill's
   treatment: a translucent white ground over a 14px blur. It already
   sits at z-index 100 — above anything in the split — and the logo and
   links keep the dark `home` colours, which stay legible on the light
   fill. */
.contact-page .topbar,
/* nav.js paints the bar solid once the page scrolls; on this page it
   stays frosted, so that rule is matched and overridden here. */
body.contact-page .topbar.is-solid {
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

/* No backdrop-filter (older Firefox, some Android): a translucent fill
   over an unblurred photograph loses all contrast, so go opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact-page .topbar,
  body.contact-page .topbar.is-solid {
    background-color: #ffffff;
  }
}

@media (max-width: 1300px) {
  .contact-split {
    grid-template-columns: 1fr 34vw;
  }

  .contact-split__text {
    padding: calc(var(--topbar-h) + 72px) var(--gutter) 90px;
    padding-left: var(--gutter);
  }

  .contact-details {
    column-gap: 40px;
    row-gap: 48px;
  }
}

@media (max-width: 900px) {
  /* The still moves above the type as a 16:9 band, still edge to edge,
     and the columns become one. */
  .contact-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .contact-split__media {
    grid-row: 1;
    aspect-ratio: 16 / 9;
  }

  .contact-split__text {
    grid-row: 2;
    padding: 56px var(--gutter) 80px;
    padding-left: var(--gutter);
  }

  /* The image is a band below the bar now, not behind it — the bar goes
     back to its normal self, solid only once scrolled. */
  .contact-page .topbar {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.contact-page .topbar.is-solid {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* The band sits under the fixed bar, so the split pays its height. */
  .contact-split {
    margin-top: var(--topbar-h);
  }

  .contact__lead {
    margin-top: 48px;
  }

  .contact-details {
    margin-top: 64px;
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}

@media (max-width: 700px) {
  .contact-split__text {
    padding: 40px var(--gutter) 64px;
    padding-left: var(--gutter);
  }

  .contact__lead {
    margin-top: 36px;
  }

  .contact-details {
    margin-top: 48px;
  }
}