/* NSJ Remodeling: 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: Dark and Moody. The same brand taken somewhere new.
   - brand accent #e07a5f; brand light tone #f3f0e9
   - headlines in Barlow (theirs); body in Barlow (used on the old site)
   - night tone #1f110d drawn from the accent; their light tone returns as contrast bands */

:root {
  --bg: #1f110d;
  --surface: #2f1a14;
  --surface-2: #41231c;
  --line: #5e3328;
  --line-strong: #864939;

  --text: #f3f0e9;
  --text-2: #a39b96;

  --accent: #e07a5f;
  --accent-deep: #e6957f;
  --accent-soft: rgba(224, 122, 95, 0.14);
  --on-accent: #1f110d;

  --dark-bg: #120a08;
  --dark-text: #f3f0e9;
  --dark-text-2: #948c86;

  /* Contrast bands: sections that flip to the other side of the palette. */
  --band-bg: #f3f0e9;
  --band-surface: #f9f8f4;
  --band-text: #311b15;
  --band-text-2: #7f706a;
  --band-line: #d4cec7;
  --band-accent: #e07a5f;

  --font-display: 'Barlow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-eyebrow: 'Barlow', system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.03em;
  --display-transform: none;
  --display-size: 6rem;
  --h1-size: 3.8rem;
  --h2-size: 2.9rem;
  --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: 4px;
  --radius-card: 6px;
  --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, #1f110d 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.1) 100%);
}

/* ---- Captured from the original site (reference only) ----
   platform: unknown
   fonts: Noto Sans | Barlow | Noto Sans JP
   colours: rgb(0, 0, 0) | rgb(255, 255, 255) | rgb(18, 18, 18) | rgb(224, 122, 95) | rgb(120, 136, 155) | rgb(34, 34, 34) | rgb(167, 128, 128) | rgb(240, 242, 244)
   Use the brand colour above as --accent if the designer has one. */

/* ---- NSJ Remodeling, version 3: after dark ----
   The colours are lifted from the brownstone parlour in their gallery:
   walnut trim for the page, the cherry floor for depth, plaster for the
   light bands. Coral stays theirs on the buttons; a paler rose, the tone of
   the NSJ lettering in the logo, carries the small accents on dark.
   Headlines go to Barlow Condensed in capitals, the tall cut of their own
   Barlow, set like a sign over a shopfront. */
:root {
  --bg: #17100d;
  --surface: #231814;
  --surface-2: #2e1f19;
  --line: #3d2a22;
  --line-strong: #5b3f33;
  --text: #f1e9df;
  --text-2: #b8a99c;
  --accent: #e9a48f;
  --accent-deep: #f0b7a5;
  --accent-soft: rgba(233, 164, 143, 0.14);
  --on-accent: #17100d;
  --dark-bg: #0f0a08;
  --dark-text: #f1e9df;
  --dark-text-2: #a09184;
  --band-bg: #ece3d7;
  --band-surface: #f6f0e7;
  --band-text: #241713;
  --band-text-2: #66544a;
  --band-line: #cdbfb0;
  --band-accent: #8e2f1d;
  --font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: 0.005em;
  --display-transform: uppercase;
  --display-size: 5.6rem;
  --h1-size: 4rem;
  --h2-size: 3rem;
  --h3-size: 1.5rem;
  --radius-control: 2px;
  --radius-card: 2px;
  --radius-image: 2px;
  --values-bg: #0f0a08;
  --values-text: #f1e9df;
  --values-text-2: #cdbfb3;
  --values-photo-opacity: 0.28;
  --value-bg: rgba(35, 24, 20, 0.82);
  --value-rule: 2px solid #8e2f1d;
  --resource-bg: #6b2418;
  --resource-text: #f6ece2;
  --resource-text-2: #e3cdc1;
  --pair-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.8);
}
body .btn-primary {
  background: #e07a5f;
  color: #17100d;
}
body .btn-primary:hover {
  background: #ec8d74;
}
body h3,
body .h3 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.story-title,
.st-lead {
  line-height: 1;
}
body .resource .btn-primary {
  background: #f1e9df;
  color: #17100d;
}