/* Reither Woodworking Inc: brand style sheet
   Colours, type, spacing and shape for the whole site, in one file.
   Change a value here and it changes everywhere.
   Generated by John Kaplar (johnkaplar.ai) from the original site and the chosen design. */

/* Theme: Light and Bright. The shop in daylight.
   - white paint and walnut, the two materials in their own kitchen photos
   - accent #3b4a6b is the slate blue of the island in their kitchen; bands in a pale maple wash #f0ebe3
   - headlines in Zilla Slab (their logo is a slab), body in Lato (theirs); square corners, a shaker-panel line inside the big photos */

:root {
  --bg: #fbfbf9;
  --surface: #ffffff;
  --surface-2: #eef0f2;
  --line: #dfe2e6;
  --line-strong: #b4bac4;

  --text: #20242c;
  --text-2: #5d6470;

  --accent: #3b4a6b;
  --accent-deep: #2e3b57;
  --accent-soft: rgba(59, 74, 107, 0.12);
  --on-accent: #ffffff;

  --dark-bg: #20242c;
  --dark-text: #fbfbf9;
  --dark-text-2: #aab0ba;

  /* Contrast bands: sections that flip to the other side of the palette. */
  --band-bg: #f0ebe3;
  --band-surface: #ffffff;
  --band-text: #20242c;
  --band-text-2: #5d6470;
  --band-line: #d8cfc1;
  --band-accent: #3b4a6b;

  --font-display: 'Zilla Slab', Georgia, serif;
  --font-body: 'Lato', system-ui, sans-serif;
  --font-eyebrow: 'Lato', system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.012em;
  --display-transform: none;
  --display-size: 5rem;
  --h1-size: 3.5rem;
  --h2-size: 2.6rem;
  --h3-size: 1.4rem;
  --body-size: 1.0625rem;
  --lead-size: 1.2rem;
  --eyebrow-size: 0.9rem;
  --eyebrow-tracking: 0;
  --eyebrow-transform: none;
  --btn-size: 0.95rem;
  --btn-tracking: 0;
  --btn-transform: none;
  --btn-pad: 15px 28px;

  --radius-control: 3px;
  --radius-card: 4px;
  --radius-image: 4px;
  --gutter: 24px;
  --gap: 24px;
  --gap-lg: 64px;
  --section-pad: clamp(80px, 11vw, 148px);
  --content-max: 1180px;
  --content-max-wide: 1440px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-duration: 0ms;

  --hero-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);
}

/* ---- Captured from the original site (reference only) ----
   platform: unknown
   fonts: Lato | Kaushan Script | Roboto | Times New Roman
   colours: rgb(0, 0, 0) | rgb(247, 247, 247) | rgb(164, 164, 164) | rgb(127, 128, 128) | rgb(255, 255, 255) | rgb(226, 226, 226) | rgb(22, 22, 22) | rgb(145, 145, 145)
   Use the brand colour above as --accent if the designer has one. */

/* ---- Reither Woodworking: site rules ---- */
.brand-logo { height: 52px !important; filter: brightness(0) opacity(0.86); }
.site-footer .brand-logo { filter: none; }
/* A shaker door is a frame around a flat panel. The large photos carry that one line. */
.hw-window::after, .wl-stage::after, .pers-photo-1::after {
  content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, 0.78); pointer-events: none;
}
.pers-photo-1 { position: relative; }
.hw-title { max-width: 11ch; }
.hw-second span { font-size: 0.82rem; line-height: 1.3; }
body .st-photo { aspect-ratio: 4 / 3; }
body .service-more { display: inline-block; margin-top: 10px; font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }