/* Earl’s fonts (ADR 0085): written by Earl from --font-heading and --font-body below. Change those, never this. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/montserrat.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  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: "Montserrat Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 115.87%;
  ascent-override: 83.54%;
  descent-override: 21.66%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700;
  size-adjust: 110.98%;
  ascent-override: 83.54%;
  descent-override: 21.66%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla/karla.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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: "Karla Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 103.50%;
  ascent-override: 88.60%;
  descent-override: 24.35%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Karla Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700;
  size-adjust: 100.04%;
  ascent-override: 88.60%;
  descent-override: 24.35%;
  line-gap-override: 0.00%;
}
/* End of Earl’s fonts. */
/* This site's own look, drawn once from seed 2736141759 on the big-picture starter (ADR 0077): the starter’s own colors; the starter’s own type; a split welcome; raised cards; corners of 0.25rem; airy spacing; the bar decoration; middle sections in the order about, services.
   Keep it: change these values only when the owner asks for a different look. */
/* A layout of the style system (ADR 0085): one token system shared by all
   five layouts, drawn here as Calm & refined in Modern sans. The site's Mood
   sets the colors and surfaces, its Type the lettering, and its seed the
   corners, spacing, cards and decoration, all by setting these variables
   (shared-src/src/style.ts, shared-src/src/variation.ts).

   Use these variables; do not introduce colors, fonts, or sizes outside them.
   The names are the contract. Change what a value is, never what it is called. */
:root {
  --color-page: #fff8e7;
  --color-surface: #ffe39a;
  --color-ink: #2a1a10;
  --color-muted: #654a36;
  --color-border: #efcf7f;
  --color-accent: #c8102e;
  /* The text on an accent button. */
  --color-accent-ink: #ffffff;
  /* A wash of the accent, for panels, markers and the photo-shaped places. */
  --color-accent-soft: #ffe0dc;
  /* Laid over a photo so the words on it can be read (kit: hero-photo), and their color. */
  --color-shade: rgb(0 0 0 / 0.5);
  --color-on-shade: #ffffff;
  /* What sits behind the phone menu while it is open. */
  --color-scrim: rgb(42 26 16 / 0.45);
  /* Light or dark: what the browser draws its own controls in. */
  --color-scheme: light;
  /* The welcome before the owner's photo arrives: drawn from the mood's own colors, never a stock photo. */
  --hero-wash: linear-gradient(180deg, var(--color-surface) 0%, var(--color-page) 100%);

  /* The lettering (the Type): two families at most, none downloaded
     (shared-src/src/fonts.ts), and how the headings are set. */
  --font-heading: "Montserrat", "Montserrat Fallback", "Century Gothic", "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Karla", "Karla Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --heading-weight: 700;
  --heading-case: none;
  --heading-tracking: 0.01em;
  --heading-leading: 1.08;

  /* The larger steps grow with the screen, so a heading fits a phone and
     still carries a wide one. The Type sets the welcome's largest. */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --step-4: clamp(1.9rem, 1.4rem + 2.4vw, 3.25rem);
  --step-5: clamp(2.4rem, 1.4rem + 4.8vw, 5.25rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;

  --measure: 60ch;
  --page-width: 74rem;
  --radius: 1.75rem;

  /* The site's own variation (ADR 0077). Each site is given a seed when it is
     made, and the seed sets these, with the corners and the spacing; what is
     written here is the layout as first drawn.
     The welcome: how its words line up, whether it sits on a band, and its
     columns on a wide screen. A layout whose shape fixes one keeps it. */
  --hero-align: start;
  --hero-justify: flex-start;
  --hero-inline: 0;
  --hero-band: var(--color-accent);
  --hero-columns: minmax(0, 7fr) minmax(0, 5fr);
  /* The cards: what they sit on, their edge, and their shadow. */
  --card-bg: var(--color-page);
  --card-border: 2px solid var(--color-ink);
  --card-shadow: 4px 4px 0 var(--color-ink);
  /* A card pointed at or reached by the keyboard: the look's glow, or its resting shadow. */
  --card-hover-shadow: var(--card-shadow);
  /* The one decoration: a bar over section headings, a texture on the
     surface bands, or a rule between sections; none of them here. */
  --motif-bar: block;
  --motif-texture: radial-gradient(color-mix(in srgb, var(--color-ink) 14%, transparent) 0.75px, transparent 1px);
  --motif-texture-size: 4px 4px;
  --motif-divider: 2px solid color-mix(in srgb, var(--color-ink) 28%, transparent);
  /* The page's own surface: a grain or a weave over the page color, drawn from the color tokens; none here. */
  --page-texture: radial-gradient(var(--color-border) 0.75px, transparent 1px);
  --page-texture-size: 4px 4px;
  /* A small mark before the line above each section's heading ("✦"); none here. */
  --heading-mark: "";
  /* The frame around every photo and every place a photo goes. */
  --frame-border: 2px solid var(--color-ink);
  --frame-padding: 0.375rem;
  --frame-shadow: 4px 4px 0 var(--color-ink);
  --frame-bg: var(--color-page);
  /* The buttons' corners, edge and shadow. */
  --button-radius: 999px;
  --button-border-width: 3px;
  --button-shadow: 3px 3px 0 var(--color-ink);
  /* A button pointed at or reached by the keyboard: the look's glow, or its resting shadow. */
  --button-hover-shadow: var(--button-shadow);

  /* Set by the new-site interview (ADR 0053). */
  --color-brand: #c8102e;
  --color-support: #ffe39a;
}