/* ============================================================
   Erisse — /contact page-specific CSS  (PARALLEL build).
   Loaded ONLY on /contact (config.extraCss). Does NOT modify
   styles.css or templates/. All overrides scoped to this page.
   Assets (mirror hash -> readable name):
     e5acbf4704f6c32c0e141e370ce146b6fa1dcf57.png -> contact-hero-bg.png
     802ccf932457498fc4655d01a338c9a7908c0fd4.png -> contact-inkblot.png
   ============================================================ */

/* the footer sits flush against the hero on this page — no section gap
   (the only two in-flow .page children are the hero and the footer). */
.page { gap: 0; }

/* ---- hero shell: /contact renders ALL its content inside the hero,
        over one full-height background image (1063px tall on desktop). ---- */
.hero { height: 1063px; }
.hero-content { padding: 30px 0; }
.hero-frame { width: min(1280px, 100%); }

/* hero background = image + tan tint (mix-blend difference) + 60% black scrim.
   Repurpose the template's single .scrim as the tan layer; add the black
   scrim as .hero-bg::after so paint order stays img -> tan -> black. */
.hero .scrim { background: rgb(215, 191, 154); mix-blend-mode: difference; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }

/* nav is ~900px wide and centred, and sits directly above the content
   (no 167px bottom gap on this page). */
.hero-frame > .site-nav { width: 900px; max-width: 100%; margin: 0 auto; }

/* the content block fills the frame; the narrow default hero-copy is replaced */
.hero-copy {
  width: 100%; max-width: none;
  padding: 20px 30px;
  display: block;
}

/* vertically-rhythmed content column; position:relative anchors the inkblot art */
.contact-main {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 80px;
  padding: 100px 0;
}

/* decorative inkblot artwork — two stacked copies, exactly as published */
.contact-inkblot {
  position: absolute; left: 95px; top: 169px;
  width: 911px; height: 799px;
  object-fit: cover;
  z-index: 0; pointer-events: none;
}

/* keep every text block above the inkblot art; the translate(0,0) also puts
   each text block on its own composited layer so glyphs get grayscale AA
   (matching the published site — avoids subpixel colour fringing in the diff). */
.contact-intro, .contact-enq, .contact-inkblot-test {
  position: relative; z-index: 1;
  transform: translate(0, 0);
}

/* --- intro --- */
.contact-intro { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.contact-h1 { font-family: var(--serif-regular); font-size: 64px; line-height: 76.8px; color: var(--cream); }
.contact-lede { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; color: var(--cream); max-width: 360px; }

/* --- general enquiries --- */
.contact-enq { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.contact-enq-title { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; color: var(--cream); }
.contact-enq-lines p { font-family: var(--serif-light); font-size: 20px; line-height: 24px; color: var(--cream); }

/* --- the inkblot test (inert "coming soon" CTA) --- */
.contact-inkblot-test {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding: 7px; text-align: left;
}
.contact-it-title { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; color: var(--cream); }
.contact-it-body { width: 492px; }
.contact-it-body p { font-family: var(--serif-light); font-size: 20px; line-height: 24px; color: var(--cream); }
.contact-it-soon { font-family: var(--serif-light-italic); font-style: italic; }
/* the blank spacer line keeps 20px/24px on every breakpoint */
.contact-it-body p.contact-it-gap { font-size: 20px; line-height: 24px; }

/* this page's footer has NO call-to-action block */
.footer-cta { display: none; }

/* /contact does not render the page ornament strip, and its newsletter
   block is empty (no email input / Subscribe button — the original keeps
   the ~55px space but shows no form controls). */
.ornament { display: none; }
.footer-news .news-form { visibility: hidden; }

/* ============================================================
   MOBILE  (<= 809px)
   ============================================================ */
@media (max-width: 809px) {
  /* on mobile the footer sits 50px below the hero (unlike desktop's flush footer) */
  .page { gap: 50px; }
  .hero { height: 784px; }
  .hero-frame { width: 100%; }
  .hero-copy { padding: 0; }
  /* nav keeps a 30px inset on mobile (logo x30, actions end at x360) */
  .hero-frame > .site-nav { padding-left: 30px; padding-right: 30px; }
  /* the empty newsletter block is 70px tall on mobile (55px on desktop) */
  .footer-news .news-form { height: 70px; }
  .contact-main { gap: 58px; padding: 100px 30px 30px; }

  .contact-h1 { font-size: 48px; line-height: 57.6px; }
  .contact-lede { font-size: 18px; line-height: 21.6px; max-width: 330px; }

  .contact-enq { gap: 25px; }
  .contact-enq-title { font-size: 20px; line-height: 24px; }
  .contact-enq-lines p { font-size: 14px; line-height: 16.8px; }

  .contact-inkblot-test { gap: 25px; }
  .contact-it-title { font-size: 24px; line-height: 28.8px; }
  .contact-it-body { width: 223px; }
  .contact-it-body p { font-size: 14px; line-height: 16.8px; }

  .contact-inkblot { left: -17px; top: 213px; width: 551px; height: 483px; }
}