/* DJ HartBeat — house style borrowed from Star City Painters (floating pill
   header, Oswald/Inter, maroon + white, marquee strip, ghost wordmark footer),
   with a nightclub twist: deep maroon, a rose glow, equalizer bars. */

:root {
  /* Quiet-luxury palette: a warm near-black ground, bone and stone paper, and
     brass used only for hairlines and small caps. The old maroon survives as a
     deep claret for dark grounds rather than as a bright accent. */
  --ink:       #231d1c;
  --ink-deep:  #16110f;
  --claret:       #5e2a31;
  --accent:       #8a6a42;   /* brass */
  --accent-dark:  #6f5435;
  --rose:    #c9b9a5;
  --slate:      #6f6760;
  --light-gray: #ddd5c9;
  --cream:      #f8f5f0;
  --cream-dim:  #efe9e0;
  --white:      #fff;
  --body-text:  #4a443f;
  --card-border: rgba(35,29,28,.12);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, sans-serif;
  --max-width: 1200px;
  --radius: 2px;
  --radius-lg: 2px;
  --radius-pill: 2px;
  --ease: cubic-bezier(.16,1,.3,1);
  --transition: .4s var(--ease);
  --shadow-md: 0 24px 60px -30px rgba(35,29,28,.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body { font-family: var(--font-sans); color: var(--body-text); background: var(--cream); line-height: 1.65; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; color: var(--ink); }
h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); letter-spacing: .005em; line-height: 1.06; margin-bottom: .55em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: .005em; margin-bottom: .55em; }
h2::after { content: ''; display: block; width: 46px; height: 1px; background: var(--accent); margin-top: 1.1rem; }
h3 { font-family: var(--font-sans); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--slate); margin-bottom: .75rem; }
p { margin-bottom: 1.05em; max-width: 68ch; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--max-width); margin-inline: auto; padding: 0 1.5rem; }
section { padding: 5.5rem 0; }
.lede { font-size: 1.12rem; color: var(--slate); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); padding: .5rem 1rem .5rem .85rem;
  border: 0; border-top: 1px solid var(--accent); border-radius: 0; background: transparent; padding-left: 0;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- header: floating pill ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 200; padding: 1.1rem 1.5rem .9rem; }
.site-header::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 140px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(35,9,18,.6), rgba(35,9,18,0));
}
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--max-width); margin: 0 auto; padding: .45rem .55rem .45rem 1.35rem;
  background: rgba(248,245,240,.94); border-radius: 0;
  border-bottom: 1px solid var(--card-border); box-shadow: none;
  -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px);
}
.brand { display: inline-flex; align-items: center; gap: .38rem; min-height: 44px; }
.brand-name { font: 500 .95rem/1 var(--font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.brand-name span { color: var(--accent); }
/* The mark is one mask image tinted by background-color, so every place that
   used to set `stroke` still sets the logo's colour with no second file. */
/* Lockup: the mark is sized from the wordmark's cap height, not picked in px,
   so it scales with .brand-name and reads as one unit rather than an icon
   parked next to some text. The SVG viewBox is cropped to the ink, so this
   height is the visible height with no padding to guess at. */
.pulse { height: 1.5em; width: 1.63em; flex: none;     /* 1.5 x the 1.087 aspect */
  font-size: .95rem;               /* matches .brand-name, so the mark tracks the wordmark */
  /* No optical nudge needed: measured, the mark already centres on the cap box
     (caps 40.2-58.2px, mark 37.8-59.9px) — it overshoots evenly top and bottom. */
  -webkit-mask: url(../img/logo/heartbeat.svg) center / contain no-repeat;
          mask: url(../img/logo/heartbeat.svg) center / contain no-repeat;
  background-color: var(--accent); }

.nav { display: flex; gap: .1rem; align-items: center; }
.nav a { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: .55rem .95rem; border-radius: 0; transition: var(--transition); }
.nav a:hover { color: var(--ink); background: transparent; box-shadow: inset 0 -1px 0 var(--accent); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; box-shadow: inset 0 -1px 0 var(--accent); border-radius: 0; }
.nav .nav-cta { background: transparent; color: var(--ink); font-weight: 500; border: 1px solid var(--ink); font-size: .72rem; margin-left: .9rem; }
.nav .nav-cta:hover { background: var(--ink); color: var(--cream); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .site-header { padding: .85rem 1rem .5rem; }
  .bar { padding: .4rem .5rem .4rem 1rem; }
  .brand, .nav-toggle { position: relative; z-index: 120; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    background: none; border: 0; cursor: pointer; color: var(--ink);
  }
  .nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: .15rem;
    background: var(--cream); border-left: 3px solid var(--accent); padding: 6rem 2rem 2.5rem; z-index: 99;
  }
  .nav[hidden] { display: none; }
  .nav a { font: 500 1.35rem/1 var(--font-display); text-transform: uppercase; width: 100%; padding: .9rem 1rem; color: var(--ink); border-radius: var(--radius); box-shadow: none !important; }
  .nav .nav-cta { margin: 1rem 0 0; text-align: center; font-size: 1rem; border-radius: var(--radius-pill); }
}

/* ---------- buttons (pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 1.05rem 2.4rem; border-radius: 0; border: 1px solid transparent;
  font: 700 .85rem/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: none; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.hero .btn-primary, .page-header .btn-primary, .cta-banner .btn-primary { background: transparent; color: var(--cream); border-color: rgba(248,245,240,.55); }
.hero .btn-primary:hover, .page-header .btn-primary:hover, .cta-banner .btn-primary:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-quiet { padding: .9rem 1.6rem; min-height: 46px; background: transparent; color: var(--ink); border-color: var(--card-border); }
.btn-quiet:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.text-link { align-self: center; font-size: .9rem; font-weight: 600; color: var(--accent); }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
section.alt { background: var(--cream-dim); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
@media (max-width: 580px) { .btn-row .btn { width: 100%; } }

/* ---------- hero + page headers: dark, with equalizer ---------- */
.hero, .page-header {
  position: relative; overflow: hidden; color: rgba(255,255,255,.88);
  background:
    radial-gradient(ellipse 70% 80% at 80% 110%, rgba(94,42,49,.45), transparent 72%),
    radial-gradient(ellipse 60% 70% at 8% -10%, rgba(94,42,49,.30), transparent 70%),
    var(--ink-deep);
}
.hero {
  background:
    radial-gradient(ellipse 60% 70% at 85% 100%, rgba(123,34,51,.45), transparent 70%),
    #0e0b0c;
}
.hero { min-height: 80vh; display: flex; align-items: flex-start; padding: 8.5rem 0 5rem; }
.page-header { padding: 9rem 0 4rem; }
.hero h1, .page-header h1 { color: var(--white); max-width: 900px; }
.hero h1 .hl { color: var(--rose); font-style: italic; }
.hero .wrap, .page-header .wrap { position: relative; z-index: 2; }
.hero .eyebrow, .page-header .eyebrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--white); }
.hero .lede, .page-header .lede { color: rgba(255,255,255,.85); max-width: 560px; }

.eq { position: absolute; inset: auto 0 0; height: 24%; display: flex; align-items: flex-end; gap: 10px; padding: 0 6px; opacity: .5; z-index: 1; pointer-events: none; }
.eq i {
  flex: 1; height: 100%; transform-origin: bottom; border-radius: 0;
  background: linear-gradient(180deg, rgba(201,185,165,.55), rgba(138,106,66,.25));
  transform: scaleY(calc(.18 + (var(--h) / 1000)));
}
@media (max-width: 860px) {
  .hero { min-height: 0; padding: 7rem 0 3.5rem; } /* ponytail: 0 not "unset" - deleting it falls back to the base 80vh */
  .page-header { padding: 7rem 0 3rem; }
  .eq i:nth-child(odd) { display: none; }
}

/* ---------- marquee ---------- */
.marquee-strip { overflow: hidden; white-space: nowrap; padding: 1.5rem 0; background: var(--ink-deep); border-block: 1px solid rgba(201,185,165,.18); }
.marquee-inner { display: inline-flex; animation: mq 120s linear infinite; }
.mq-item { font: 400 .72rem var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--rose); padding: 0 2rem; }
.mq-dot { color: rgba(201,185,165,.4); padding: 0 .25rem; font-size: .6rem; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 2rem 1.75rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover { border-color: var(--accent); box-shadow: none; }
.card p { font-size: .92rem; color: var(--slate); }
.card p:last-child { margin-bottom: 0; }
.split { display: grid; gap: 3rem; align-items: start; }
/* One column: lead with the photo, whatever order the markup uses. */
.split > .photo, .split > .photo-slot { order: -1; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split > .photo, .split > .photo-slot { order: 0; }   /* two columns: back to source order */
}

.photo-slot { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 0; color: var(--accent); background: var(--cream-dim); border: 1px solid var(--card-border); box-shadow: none; }
.photo { width: 100%; max-width: 520px; height: auto; margin-inline: auto; border-radius: 0; box-shadow: var(--shadow-md); }
.subhead { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: .005em; text-transform: none; color: var(--ink); margin-bottom: .9rem; }
/* ponytail: .subhead and the footer heading moved h3 -> h2 for heading order (WCAG 1.3.1).
   These two rules keep them rendering exactly as they did as h3s. */
.subhead::after { display: none; }
.photo-slot.sq { aspect-ratio: 1; box-shadow: none; }

/* ---------- pre-footer CTA band ---------- */
.cta-banner { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding: 4.5rem 0; }
.cta-banner::after { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(123,34,51,.18); pointer-events: none; }
.cta-banner .wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-banner h2 { color: var(--white); margin: 0; }
.cta-banner h2::after { display: none; }
.cta-banner .btn-row { margin: 0; }

/* ---------- form ---------- */
.form { background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: 1.15rem; }
.field label { display: block; margin-bottom: .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .85rem 1.1rem; font-size: .95rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--light-gray); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(123,34,51,.15); }
.two-up { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .two-up { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: .88rem; color: var(--slate); margin-top: 1rem; }

/* Editor-only notes — never visible to visitors (tools/check-no-editor-flags.sh asserts these). */
.todo { display: none; }
.ph { display: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink-deep); color: rgba(255,255,255,.55); padding: 3.5rem 0 1.5rem; overflow: hidden; }
.site-footer .brand-name { color: var(--white); }
.site-footer .pulse { background-color: var(--rose); }
.foot-grid { display: grid; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 2fr 1fr; gap: 3rem; } }
.site-footer h2 { color: var(--white); font-size: .82rem; font-weight: 600; letter-spacing: .18em; margin-bottom: 1rem; }
.site-footer h2::after { display: none; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; font-size: .83rem; transition: color var(--transition); }
.site-footer li a:hover { color: var(--rose); }
.foot-ghost {
  /* 17 characters now instead of 11, so the ghost is sized off its own length
     rather than a fixed vw step that clipped the final letter. */
  font: 400 clamp(1.6rem, 6.1vw, 5.6rem)/1 var(--font-display); color: rgba(255,255,255,.06); text-transform: uppercase;
  text-align: center; white-space: nowrap; margin: 2.5rem 0 -.5rem; letter-spacing: -.02em; user-select: none; pointer-events: none;
}
.fine { padding-top: 1.5rem; font-size: .75rem; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: .75rem 1rem; font-weight: 700; z-index: 9999; }
.skip:focus { left: 0; }