/* ════════════════════════════════════════════════════════════
   BAWR Group — bawrgroup.com
   style.css
   Aesthetic: Editorial Minimal · Palette: Grayscale + beige
   ════════════════════════════════════════════════════════════ */

/* ─── 1. Custom Properties ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-primary:    #F4F1EC;   /* warm beige base */
  --bg-secondary:  #EAE6DF;   /* deeper beige surface */
  --bg-elevated:   #FDFCFB;   /* near-white elevated */

  /* Text — all verified WCAG AA against --bg-primary */
  --text-primary:   #1C1917;
  --text-secondary: #524F4B;
  --text-tertiary:  #636060;  /* 4.6:1 on #F4F1EC — WCAG AA */

  /* Accent: charcoal (grayscale-only) */
  --accent:        #1C1917;   /* charcoal — same as text-primary */
  --accent-hover:  #0C0B09;   /* deeper charcoal on hover */
  --accent-subtle: #EAE6DF;   /* beige for selection state */

  /* Surfaces */
  --border:        #D6D2CB;

  /* Typography */
  --font-display: 'DM Serif Display', 'New York', Georgia, ui-serif, serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.70rem,  0.65rem + 0.25vw, 0.75rem);
  --text-sm:   clamp(0.813rem, 0.75rem + 0.33vw, 0.875rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.063rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.63vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,   1.25rem + 1.25vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.5rem  + 1.88vw, 2.5rem);
  --text-4xl:  clamp(2.25rem,  1.75rem + 2.5vw,  3.25rem);
  --text-5xl:  clamp(2.75rem,  2rem    + 3.75vw, 4.5rem);

  /* Spacing (4px grid) */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;

  --space-section: 5rem;
  --max-width:     72rem;
  --max-width-narrow: 44rem;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   150ms;
  --t-base:   220ms;
}

/* ─── 2. Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ─── 3. Base ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-subtle); color: var(--text-primary); }

/* ─── 4. Typography ────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.1; color: var(--text-primary); }

h1, h2        { font-family: var(--font-display); font-weight: 400; }
h1            { font-size: var(--text-5xl); letter-spacing: -0.03em; }
h2            { font-size: var(--text-4xl); letter-spacing: -0.02em; }
h3            { font-family: var(--font-body); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.005em; }

h1 em, h2 em  { font-style: normal; color: var(--text-secondary); }

p             { color: var(--text-secondary); line-height: 1.65; }
p + p         { margin-top: var(--s-4); }
strong        { color: var(--text-primary); font-weight: 600; }

/* Inline links (not buttons) */
a:not([class]) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
a:not([class]):hover { color: var(--accent-hover); }

/* ─── 5. Layout ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.container--narrow { max-width: var(--max-width-narrow); }

.section { padding-block: var(--space-section); }

.section--hero { background: var(--bg-primary); }

/* ─── 6. Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.75rem var(--s-6);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t-base), transform var(--t-fast);
  text-decoration: none;
}

.btn--primary {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* ─── 7. Navigation ────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-primary);
  transition: background var(--t-base), box-shadow var(--t-base);
}

.site-nav.scrolled {
  background: rgba(244, 241, 236, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-4);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
}

.nav-logo__mark { width: 20px; height: 20px; flex-shrink: 0; }

.nav-logo__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.nav-rule { margin: 0; }

/* ─── 8. Hero ──────────────────────────────────────────────── */
.hero-copy { padding-block: clamp(5rem, 14vw, 9rem); }
.hero-copy h1 { margin-bottom: var(--s-8); }

/* Thin eyebrow rule above the headline */
.hero-copy::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--text-primary);
  margin-bottom: var(--s-8);
  opacity: 0;
  animation: rule-in 0.5s var(--ease-out) 0.15s forwards;
}

@keyframes rule-in {
  from { opacity: 0; width: 0; }
  to   { opacity: 1; width: 2rem; }
}

/* ─── 9. Footer ────────────────────────────────────────────── */
.site-footer { background: var(--bg-primary); }

.footer-inner--simple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-8);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: 0;
}

.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-legal a {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  transition: color var(--t-fast);
}
.footer-legal a:hover { color: var(--text-primary); }

/* ─── 10. Visual Signature — Editorial Rule System ─────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.section-label::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--text-primary);
  flex-shrink: 0;
}

.editorial-rule {
  position: relative;
  display: block;
  border: none;
  height: 1px;
  background: var(--border);
  margin: 0;
}

.editorial-rule::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  height: 3px;
  width: 2.5rem;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  animation: rule-extend 0.65s var(--ease-out) 0.25s forwards;
}

.nav-rule::before {
  width: 100%;
  height: 2px;
  top: -1px;
  animation-duration: 0.85s;
  animation-delay: 0s;
}

.footer-rule::before {
  width: 5rem;
  animation-delay: 0s;
  animation-duration: 0.5s;
}

@keyframes rule-extend {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─── 11. Scroll Animations ────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ─── 12. Responsive ───────────────────────────────────────── */
@media (min-width: 960px) {
  .container { padding-inline: var(--s-12); }
}

/* ─── Accessibility ────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -200%;
  left: 0;
  z-index: 9999;
  padding: var(--s-3) var(--s-6);
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .editorial-rule::before { transform: scaleX(1); }
  .reveal { opacity: 1; transform: none; }
}