/* 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: Reither Woodworking as it is, on a better day.
   - the old site is dark: page #161616, black bands, text #f7f7f7, grey #a4a4a4 (all theirs)
   - headlines in Kaushan Script, their own headline face; body in Lato, their body face
   - no colour accent: the old site has none, so buttons are their light tone on dark */

:root {
  --bg: #161616;
  --surface: #1d1d1d;
  --surface-2: #262626;
  --line: #2e2e2e;
  --line-strong: #5a5a5a;

  --text: #f7f7f7;
  --text-2: #a4a4a4;

  --accent: #f7f7f7;
  --accent-deep: #e2e2e2;
  --accent-soft: rgba(247, 247, 247, 0.1);
  --on-accent: #161616;

  --dark-bg: #000000;
  --dark-text: #f7f7f7;
  --dark-text-2: #a4a4a4;

  --font-display: 'Kaushan Script', cursive;
  --font-body: 'Lato', system-ui, sans-serif;
  --font-eyebrow: 'Lato', system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: 0;
  --display-transform: none;
  --display-size: 5.4rem;
  --h1-size: 3.8rem;
  --h2-size: 2.9rem;
  --h3-size: 1.25rem;
  --body-size: 1.0625rem;
  --lead-size: 1.22rem;
  --eyebrow-size: 0.76rem;
  --eyebrow-tracking: 0.08em;
  --eyebrow-transform: uppercase;
  --btn-size: 0.92rem;
  --btn-tracking: 0.01em;
  --btn-transform: none;
  --btn-pad: 14px 26px;

  --radius-control: 4px;
  --radius-card: 6px;
  --radius-image: 4px;
  --gutter: 24px;
  --gap: 24px;
  --gap-lg: 60px;
  --section-pad: clamp(72px, 10vw, 132px);
  --content-max: 1160px;
  --content-max-wide: 1400px;

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

  --hero-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 55%, 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 ---- */
body :is(h1, h2, .h1, .h2, .display) { line-height: 1.16; }
body :is(h3, .h3) { font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
body .eyebrow { color: var(--text-2); }
.brand-logo { height: 54px !important; }
.hero-overlay { min-height: min(88vh, 860px); }
.band { --band-bg: #000; --band-surface: #111; --band-text: #f7f7f7; --band-text-2: #a4a4a4; --band-line: #2e2e2e; --band-accent: #f7f7f7; }
@media (min-width: 901px) {
  body .project-grid.uniform { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body .project-grid.uniform .project-card { grid-column: span 2; }
  body .project-grid.uniform .project-card:nth-child(n + 4) { grid-column: span 3; }
  body .project-grid.uniform .project-card:nth-child(n + 4) .project-media { aspect-ratio: 16 / 10 !important; }
}
.intro :is(h2) { font-size: clamp(1.7rem, 3vw, 2.5rem); }
body .service-more { display: inline-block; margin-top: 10px; font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }