/*
 * Hosting-safe progressive enhancements for the static/PHP deployment.
 * Revision 2026-09-16: restore the earlier black / warm-ivory / rose energy
 * and open desktop content beyond the previous 78rem editorial cap.
 */

:root {
  --dw-black: #0a0a0a;
  --dw-ivory: #fcfbf9;
  --dw-soft-ivory: #f0eee9;
  --dw-rose: #d4245a;
  --dw-charcoal: #5c5a55;
}

body { background: var(--dw-ivory); color: var(--dw-black); }
body,
button,
input,
textarea,
select { font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif; }
.display,
h1,
h2,
h3 { font-family: "Newsreader", Georgia, serif; }
.on-ink {
  --ink: var(--dw-black);
  --ink-foreground: var(--dw-ivory);
  --brand-coral: var(--dw-rose);
  --terracotta: var(--dw-rose);
  --color-terracotta: var(--dw-rose);
}
.on-paper {
  --paper: var(--dw-ivory);
  --paper-foreground: var(--dw-black);
  --brand-coral: var(--dw-rose);
  --terracotta: var(--dw-rose);
  --color-terracotta: var(--dw-rose);
}
.on-ink .action { --cta-idle-border: var(--dw-rose); }
.on-paper .action {
  --cta-fill: var(--dw-rose) !important;
  --cta-idle-border: var(--dw-rose) !important;
  --cta-idle-text: var(--dw-black) !important;
  --cta-on-fill: var(--dw-ivory) !important;
}
.on-paper .action-quiet {
  --cta-quiet-text: var(--dw-black) !important;
  --cta-quiet-hover: var(--dw-rose) !important;
}
.accent-mark, .eyebrow { color: var(--dw-rose); }
.text-terracotta { color: var(--dw-rose) !important; }
.border-terracotta,
.rule-accent { border-color: var(--dw-rose) !important; }
input:focus,
textarea:focus,
select:focus { border-color: var(--dw-rose) !important; outline-color: var(--dw-rose); }

/* Keep reading measures intentional while making the composition viewport-scale. */
@media (min-width: 1280px) {
  body > header > div.mx-auto,
  main .on-paper > div.mx-auto,
  footer > div.mx-auto {
    width: 100%;
    max-width: none !important;
    padding-left: clamp(3rem, 8vw, 12rem) !important;
    padding-right: clamp(3rem, 8vw, 12rem) !important;
  }

  main > header.on-ink > div {
    min-height: calc(100vh - 5.25rem);
    grid-template-columns: minmax(0, 1fr) minmax(42rem, 0.9fr) !important;
  }

  main > header.on-ink > div > div:first-child {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main > header.on-ink > div > div:first-child > div {
    width: 100%;
    padding-bottom: clamp(5rem, 11vh, 10rem) !important;
    padding-left: clamp(3rem, 8vw, 12rem) !important;
    padding-right: clamp(3rem, 5vw, 8rem) !important;
  }

  main > header.on-ink > div > div > div:last-child > img {
    height: calc(100vh - 5.25rem) !important;
    min-height: 40rem !important;
    max-height: none !important;
  }

  main > header.on-ink h1 { max-width: 19ch; }
}

/* Preserve the original site’s cinematic dark treatment while retaining this build’s photography. */
main > header.on-ink { background-color: var(--dw-black); }
main > header.on-ink img { filter: grayscale(100%) sepia(8%) brightness(0.84) contrast(1.06); }
main > header.on-ink .action:hover,
main > header.on-ink .action:focus-visible {
  background-color: var(--dw-rose);
  border-color: var(--dw-rose);
}

#enquiry-outcome:empty { display: none; }
#enquiry-outcome[data-status="sent"] { border-left: 2px solid var(--dw-rose); padding-left: 1rem; }
#enquiry-outcome[data-status="error"] { border-left: 2px solid var(--destructive); padding-left: 1rem; }

/* The cover opens with a transparent nav; scrolling gives it a quiet, legible paper surface. */
body > header {
  transition: background-color 220ms ease, box-shadow 220ms ease, border-color 220ms ease, color 220ms ease;
}
body.cover-dark > header:not([data-scrolled]) { color: var(--ink-foreground); }
body > header[data-scrolled="true"] {
  --foreground: var(--dw-black);
  --muted-foreground: var(--dw-charcoal);
  --color-foreground: var(--dw-black);
  --color-muted-foreground: var(--dw-charcoal);
  --accent: var(--dw-rose);
  --color-accent: var(--dw-rose);
  --terracotta: var(--dw-rose);
  --color-terracotta: var(--dw-rose);
  background-color: color-mix(in srgb, var(--dw-ivory) 96%, transparent) !important;
  border-bottom: 1px solid rgb(10 10 10 / 8%);
  box-shadow: 0 8px 24px rgb(10 10 10 / 5%);
  color: var(--dw-black) !important;
}
body > header[data-scrolled="true"] a,
body > header[data-scrolled="true"] button { color: var(--dw-charcoal); }
body > header[data-scrolled="true"] a[aria-current="page"],
body > header[data-scrolled="true"] a:hover,
body > header[data-scrolled="true"] a:focus-visible { color: var(--dw-black); }
body > header[data-scrolled="true"] .link-accent,
body > header[data-scrolled="true"] .link-accent:hover,
body > header[data-scrolled="true"] .link-accent:focus-visible { border-color: var(--dw-rose); }

@media (max-width: 1023px) {
  #mobile-menu-toggle { display: inline-flex; }
}

@media (min-width: 1024px) {
  #mobile-menu-toggle, #mobile-nav { display: none !important; }
}