/* ============================================================================
   MERKEL PLUMBING — v2 design contract  ("Daylight Atelier")
   THESIS: A master plumber's craft seen in clean, bright workshop daylight — warm,
     light, hand-made. Refuses v1's dark cast-iron heaviness AND the generic
     cream+high-contrast-serif+terracotta AI-plumber default.
   OWN-WORLD: Warm chalk-plaster paper carries every surface; structure is whitespace,
     thin brand hairlines and an organic Young Serif, not boxes. One near-black enamel band
     for contrast. The logo's barn red (#8C0404) is the one generous accent; its straw cream
     (#FCEC9C) is the whisper, on dark grounds only. Mulish for all text/UI. Bright, warm,
     shallow-focus craft photography. Recognizable with copy gone.
   PALETTE SOURCE: the client's vintage gas-station oval logo — barn red #8C0404,
     straw cream #FCEC9C, outline near-black #0C0C0C (sampled 2026-07-30).
   STORY: Visitor lands in a sunlit maker's studio, feels 25 years of unhurried craft in
     the light and materials, grasps the full residential/commercial/industrial range,
     trusts the Master Plumber, and calls or requests service.
   FIRST VIEWPORT: Editorial split — big Young Serif headline + lede + two actions on
     plaster (left), a bright hands-soldering-copper still framed (right), a red enamel
     oval badge pinned to its corner. A slim spec strip (25 yrs · licence M-43459 · DFW ·
     by referral · phone) grounds the base. No text-over-photo.
   FORM: Daylight atelier, re-anchored to the shop's vintage gas-station sign palette.
   ============================================================================ */

/* ---- Fonts (self-hosted) -------------------------------------------------
   Served from /fonts, not fonts.googleapis.com. The Google stylesheet is
   render-blocking and sits on a second origin, so the browser had to resolve
   DNS, connect and complete TLS to googleapis, parse the CSS, and only THEN
   discover the woff2 on a third origin (gstatic) — two round trips in front of
   the text of every page. Preconnect hid some of that latency but could not
   remove the dependency. Local files are discovered from this stylesheet with
   no new connection, and BaseLayout preloads the two `latin` faces so they are
   in flight before this file is even parsed.

   `latin-ext` is declared but not preloaded: `unicode-range` means the browser
   only fetches it if a glyph actually needs it, and no copy on this site does.
   Keep both declared anyway so a future client name or street with an accent
   cannot silently fall back to Georgia.

   Sourced from Google Fonts (Young Serif v2, Mulish v18), both SIL Open Font
   License 1.1, which permits self-hosting. Mulish is the variable face, so one
   file covers the whole 300-800 range the design uses rather than six statics.
   Re-download from the css2 API with a modern browser UA if either is updated. */
@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/young-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/young-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/mulish-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/mulish-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Paper ramp — warm plaster grounds, hue pulled toward the logo's straw
     (low chroma: plaster, not "AI cream") */
  --paper: oklch(0.966 0.011 92);
  --paper-2: oklch(0.938 0.017 88);
  --paper-3: oklch(0.902 0.024 80);

  /* Ink — warm brown-black, pulled toward the logo's outline (never gray/navy) */
  --ink: oklch(0.26 0.016 45);
  --ink-soft: oklch(0.40 0.02 45);
  --ink-faint: oklch(0.54 0.02 45);

  /* Brand — the logo's barn red #8C0404, the one generous accent */
  --brand: oklch(0.404 0.163 29);
  --brand-deep: oklch(0.325 0.135 29);       /* pressed / deep marks */
  --brand-lift: oklch(0.47 0.175 32);        /* hover lift */
  --brand-wash: oklch(0.404 0.163 29 / 0.07);

  /* Straw — the logo's cream #FCEC9C. On dark grounds only (no contrast on paper) */
  --straw: oklch(0.938 0.101 98);
  --straw-soft: oklch(0.86 0.09 96);
  --straw-deep: oklch(0.70 0.115 90);        /* small marks on paper */

  /* Enamel — the one dark ground, the logo's near-black #0C0C0C warmed a hair */
  --enamel: oklch(0.19 0.014 40);
  --enamel-2: oklch(0.245 0.018 38);
  --on-dark: oklch(0.945 0.012 90);
  --on-dark-soft: oklch(0.80 0.022 92);

  /* Hairline — brand-tinted */
  --line: oklch(0.404 0.163 29 / 0.26);
  --line-soft: oklch(0.404 0.163 29 / 0.14);

  /* Type */
  --display: "Young Serif", "Petrona", Georgia, "Times New Roman", serif;
  --sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid scale */
  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.11rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.7vw, 2.9rem);
  --step-4: clamp(2.3rem, 1.8rem + 2.5vw, 3.8rem);
  --step-5: clamp(2.8rem, 2rem + 4vw, 5rem);

  /* Space */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: 9rem;

  --wrap: 72rem;
  --wrap-tight: 56rem;
  --radius: 3px;
  --radius-lg: 6px;

  /* Shadows — warm brand-tinted, offset + soft blur (never hard plates) */
  --shadow-sm: 0 1px 2px oklch(0.30 0.09 32 / 0.09), 0 2px 6px oklch(0.30 0.09 32 / 0.07);
  --shadow-md: 0 4px 10px oklch(0.30 0.09 32 / 0.11), 0 14px 30px oklch(0.30 0.09 32 / 0.13);
  --shadow-lg: 0 8px 18px oklch(0.30 0.09 32 / 0.13), 0 32px 60px oklch(0.30 0.09 32 / 0.17);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Z-scale */
  --z-header: 100;
  --z-menu: 200;
  --z-overlay: 300;
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

/* astro:assets <Picture> wraps the <img> in a <picture>, which inserts a box
   between the figure and the image. Every rule in this project that sizes an image
   with `height: 100%` (gallery tiles, the hero figure, the full-bleed commitment
   band) then resolves against that wrapper's auto height instead of the figure, so
   the image's intrinsic aspect ratio takes over and fights the layout — a pale strip
   down the side of a gallery tile, and CLS 0.325 on /gallery.
   `display: contents` takes the wrapper out of the box tree so the <img> lays out as
   a direct child of the figure, exactly as it did before <Picture> existed. Keep this
   whenever <Picture> is used inside a container that dictates the image's height. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--brand); color: var(--paper); }

/* ---- Paper grain — faint plaster texture, clean not distressed ---------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ---- Typography --------------------------------------------------------- */
h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
p { text-wrap: pretty; }
p + p { margin-top: 1em; }
strong { font-weight: 700; color: inherit; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  font-weight: 400;
}

/* Tracked small-caps kicker — a system mark, used sparingly */
.kicker {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
}
.kicker::before {
  content: ""; width: 1.7rem; height: 2px; border-radius: 2px;
  background: var(--brand); flex: none;
}

/* ---- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-tight { width: min(100% - 2.5rem, var(--wrap-tight)); margin-inline: auto; }
.section { padding-block: var(--sp-6); }
.section-sm { padding-block: var(--sp-5); }

/* Surface grounds */
.on-paper { background: var(--paper); color: var(--ink); }
.on-paper-2 { background: var(--paper-2); color: var(--ink); }
.on-paper-3 { background: var(--paper-3); color: var(--ink); }

.on-enamel { background: var(--enamel); color: var(--on-dark); }
.on-enamel h1, .on-enamel h2, .on-enamel h3, .on-enamel h4 { color: var(--on-dark); }
.on-enamel .lede { color: var(--on-dark-soft); }
.on-enamel .kicker { color: var(--straw); }
.on-enamel .kicker::before { background: var(--straw); }

/* Faint plaster grain on the deeper paper bands for material depth */
.on-paper-2, .on-paper-3 { position: relative; }
.on-paper-2::after, .on-paper-3::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
}
.on-paper-2 > *, .on-paper-3 > * { position: relative; z-index: 1; }

/* Editorial brand-red rule — the section mark */
.rule {
  width: 3rem; height: 2px; border: 0; border-radius: 2px;
  background: var(--brand);
  margin: 0 0 var(--sp-3);
}
.on-enamel .rule { background: var(--straw); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --_bg: var(--brand);
  --_fg: var(--paper);
  --_bd: var(--brand);
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.9em 1.6em;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--_fg);
  background: var(--_bg);
  border: 1.5px solid var(--_bd);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.btn:hover { background: var(--brand-lift); border-color: var(--brand-lift); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Ghost outline — fills on hover, adapts to ground */
.btn-ghost {
  --_bg: transparent; --_fg: var(--brand); --_bd: color-mix(in oklch, var(--brand) 55%, transparent);
}
.btn-ghost:hover { background: var(--brand); color: var(--paper); border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.on-enamel .btn-ghost { --_fg: var(--on-dark); --_bd: color-mix(in oklch, var(--on-dark) 45%, transparent); }
.on-enamel .btn-ghost:hover { background: var(--on-dark); color: var(--enamel); border-color: var(--on-dark); }

/* Text link with brand-red underline wipe */
.link {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 700; letter-spacing: 0.01em;
  font-size: 0.96rem;
  color: var(--brand);
  background-image: linear-gradient(var(--brand), var(--brand));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.4s var(--ease-out), color 0.25s var(--ease-out);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 1.5px; color: var(--brand-lift); }
.link .arrow { transition: transform 0.4s var(--ease-out); }
.link:hover .arrow { transform: translateX(5px); }
.on-enamel .link { color: var(--straw); background-image: linear-gradient(var(--straw), var(--straw)); }

/* ---- Reveal (progressive; visible by default) --------------------------- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(20px); }
  .js .reveal.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
}

/* ---- Utility ------------------------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: var(--z-overlay);
  background: var(--brand); color: var(--paper); padding: 0.6em 1em; border-radius: var(--radius); font-weight: 700;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---- Forms (unscoped: contact-form.js injects .field__error at runtime) ---- */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-deep);
}
.field label .opt { font-weight: 400; color: var(--ink-faint); letter-spacing: 0.04em; text-transform: none; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8em 0.9em;
  background: oklch(0.99 0.004 85);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px oklch(0.404 0.163 29 / 0.16);
}
.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: oklch(0.5 0.17 30);
  box-shadow: 0 0 0 3px oklch(0.5 0.17 30 / 0.14);
}
.field__error {
  display: flex; align-items: center; gap: 0.4em;
  font-size: 0.82rem; color: oklch(0.48 0.17 30); min-height: 1.1em; margin: 0;
}
.field__error:not(:empty)::before {
  content: "!"; display: inline-grid; place-items: center;
  width: 1.05em; height: 1.05em; border-radius: 50%; flex: none;
  background: oklch(0.48 0.17 30); color: var(--paper); font-size: 0.72em; font-weight: 700;
}
/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button.is-loading { opacity: 0.7; cursor: progress; }