/* ==========================================================================
   Craig's DJ Service — "late-night warmth"
   Rebuilt 2026-09-07. Replaces the cream/gold layout whose hero background
   never painted (.cdj-hero was position:static with z-index:-2 pseudo-elements,
   so the photo and its scrim rendered behind the opaque page background and the
   white headline sat on cream).

   WHY DARK: Craig's photo library is a set of dim, grainy, low-light reception
   shots. On cream they read as bad photography. On a near-black ground the same
   grain reads as a room at 10pm, which is the thing he is actually selling. The
   constraint chose the palette.
   ========================================================================== */

.cdj-home{
  /* Warm-tinted neutrals. Nothing here is pure black or pure white: a true #000
     under a warm photo looks like a hole, and #fff text on it buzzes. */
  --ink:        oklch(0.145 0.012 62);
  --ink-2:      oklch(0.195 0.016 62);
  --ink-3:      oklch(0.255 0.018 64);
  --line:       oklch(0.32 0.016 64);
  --paper:      oklch(0.965 0.008 78);
  --paper-dim:  oklch(0.79 0.012 76);
  --paper-far:  oklch(0.63 0.014 74);
  /* One accent, and it is the only saturated thing on the page. */
  --amber:      oklch(0.80 0.148 78);
  --amber-deep: oklch(0.52 0.150 58);  /* light-band only. 0.70 measured 2.50:1 on --paper, below AA; this is 5.20:1 */
  --shell: 1180px;
  --gut: clamp(20px, 5vw, 56px);

  background: var(--ink);
  color: var(--paper);
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.cdj-home *,.cdj-home *::before,.cdj-home *::after{box-sizing:border-box}
.cdj-home img{max-width:100%;display:block}

/* Divi prints the page title above custom page content. On this page the hero
   IS the title, so the duplicate is removed rather than styled. */
body.page-id-47 .entry-title.main_title{display:none!important}

.cdj-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

/* --- Type -------------------------------------------------------------------
   Bricolage Grotesque carries every display line: it is a grotesque with actual
   drawing in it, which keeps "$775" and a condensed headline from reading as a
   template. Karla runs the body, humanist and warm at small sizes.
   Hierarchy is scale AND weight, never weight alone: the old page set almost
   everything at 650 and read as uniformly heavy with no order to it. */
.cdj-home h1,.cdj-home h2,.cdj-home h3,.cdj-display{
  font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-weight:800; letter-spacing:-0.028em; line-height:0.94;
  margin:0; text-wrap:balance;
  /* ⚠ COLOUR STATED, NEVER INHERITED. Divi ships `h1..h6{color:#333}`, which beats
     inheritance from a coloured ancestor: any heading left uncoloured here renders
     #333 on the near-black ground at 1.57:1, i.e. invisible. That is the exact
     failure this rebuild exists to fix, and leaving it to inheritance re-created it
     on the services H2 and the form card H3. Measured, not assumed. */
  color:var(--paper);
}
/* The light band inverts, and its nested dark card inverts back. */
.cdj-availability h2,.cdj-availability h3{color:var(--ink)}
.cdj-availability .cdj-form-card h3{color:var(--paper)}
.cdj-eyebrow,.cdj-kicker{
  font-family:"Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-size:0.735rem; font-weight:700; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--amber);
}
.cdj-lede{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.55;color:var(--paper-dim);max-width:60ch}

/* --- Nav --------------------------------------------------------------------
   Transparent over the hero, then it earns a background once the photo has
   scrolled away. The old nav was white text on a white strip above the hero,
   so the location line was invisible. */
.cdj-nav{position:sticky;top:0;z-index:60;transition:background .4s cubic-bezier(.16,1,.3,1),border-color .4s}
.cdj-nav::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1);border-bottom:1px solid transparent}
.cdj-nav.is-stuck::after{opacity:.94;border-bottom-color:var(--line)}
.cdj-nav-inner{display:flex;align-items:center;gap:28px;padding-block:18px}
.cdj-brand{text-decoration:none;color:var(--paper);line-height:1.15;flex:0 0 auto}
.cdj-brand b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-0.01em}
.cdj-brand span{display:block;font-size:0.72rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--paper-far)}
.cdj-menu{display:flex;gap:26px;margin-left:auto}
.cdj-menu a{color:var(--paper-dim);text-decoration:none;font-size:0.9rem;position:relative;padding-block:4px}
/* Underline grows from the left. Not a colour swap: colour alone is a weak
   affordance against a photo whose brightness changes as you scroll. */
.cdj-menu a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--amber);transition:width .35s cubic-bezier(.16,1,.3,1)}
.cdj-menu a:hover{color:var(--paper)}
.cdj-menu a:hover::after{width:100%}

.cdj-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:0.86rem;
  letter-spacing:0.055em;text-transform:uppercase;text-decoration:none;
  padding:.92em 1.5em;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  white-space:nowrap;  /* "Check Date" broke across two lines in the 390px nav */
  background:var(--amber);color:oklch(0.19 0.03 70);
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,color .3s,border-color .3s;
}
.cdj-btn:hover{background:oklch(0.86 0.148 80);transform:translateY(-2px)}
.cdj-btn.line{background:transparent;color:var(--paper);border-color:oklch(0.55 0.02 70)}
.cdj-btn.line:hover{background:oklch(1 0 0 / .07);border-color:var(--paper-dim);color:var(--paper)}
.cdj-btn.solid-dark{background:var(--paper);color:var(--ink)}
.cdj-btn.solid-dark:hover{background:#fff}

/* --- Hero -------------------------------------------------------------------
   position:relative + isolation:isolate is the whole fix the old page was
   missing. The scrim is two layers: a vertical wash so the nav has something to
   sit on, and a left-weighted wash so the headline holds contrast wherever the
   photo happens to be bright. */
.cdj-hero{position:relative;isolation:isolate;min-height:min(92vh,860px);display:flex;align-items:flex-end;padding-block:clamp(90px,16vh,150px) clamp(40px,7vh,72px);margin-top:calc(-1 * (18px + 18px + 42px))}
.cdj-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  /* PNG first as the shorthand, so position/size/repeat are set and any engine that
     does not parse image-set() still gets a hero. image-set() then upgrades it to
     WebP: 1074 KB -> 47 KB, which on a hero that blocks first paint is the single
     biggest performance win available on this page. The PNG is kept on disk. */
  background:url("https://craigsdjservice.com/wp-content/uploads/2023/11/dj5.png") center 42%/cover no-repeat;
  background-image:image-set(
    url("https://craigsdjservice.com/wp-content/uploads/2023/11/dj5.webp") type("image/webp"),
    url("https://craigsdjservice.com/wp-content/uploads/2023/11/dj5.png")  type("image/png"));
  /* The photo is underexposed and noisy. Warming and lifting it slightly, then
     sitting it under a heavy scrim, turns a flaw into the mood. */
  filter:saturate(.82) contrast(1.12) brightness(.92);
}
.cdj-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, oklch(0.145 0.012 62 / .92) 0%, oklch(0.145 0.012 62 / .35) 34%, oklch(0.145 0.012 62 / .55) 68%, var(--ink) 99%),
    linear-gradient(96deg, oklch(0.145 0.012 62 / .90) 0%, oklch(0.145 0.012 62 / .58) 46%, oklch(0.145 0.012 62 / .12) 78%);
}
.cdj-hero-content{position:relative;z-index:2;width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.cdj-kicker{display:inline-flex;align-items:center;gap:.6em;margin-bottom:22px}
.cdj-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px oklch(0.80 0.148 78 / .22)}
.cdj-hero h1{font-size:clamp(2.9rem,8.4vw,6.2rem);max-width:15ch;margin-bottom:26px;color:var(--paper)}
.cdj-hero .cdj-lede{margin-bottom:36px}
.cdj-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* The three facts. NOT a stat-tile row: no boxes, no big-number-small-label
   template. A rule, a label, a value, sharing one baseline. */
.cdj-facts{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);margin-top:clamp(44px,7vh,76px);padding-top:26px;border-top:1px solid oklch(1 0 0 / .16)}
.cdj-fact{min-width:150px}
.cdj-fact dt{font-size:0.72rem;letter-spacing:0.17em;text-transform:uppercase;color:var(--paper-far);margin-bottom:7px;font-weight:600}
.cdj-fact dd{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.32rem;letter-spacing:-0.015em;color:var(--paper)}
.cdj-fact dd a{color:inherit;text-decoration:none;border-bottom:1.5px solid oklch(0.80 0.148 78 / .45);transition:border-color .3s}
.cdj-fact dd a:hover{border-bottom-color:var(--amber)}
.cdj-fact .cdj-from{font-size:.78rem;font-weight:600;color:var(--paper-far);letter-spacing:.04em}

/* --- Sections ---------------------------------------------------------------
   Spacing varies by section rather than one padding everywhere, so the page has
   a rhythm instead of a metronome. */
.cdj-section{padding-block:clamp(76px,11vh,132px);position:relative}
.cdj-section-head{max-width:none}
/* ⚠ `ch` MUST SIT ON THE HEADING, never on a wrapper. `ch` resolves against the
   element's OWN font-size, so 22ch on this wrapper (inheriting 16px body text)
   computed to ~176px and crushed both the headline and the lede into a column one
   word wide. On the h2 the same unit measures the display face, which is what
   "about sixteen characters" was ever meant to describe. The hero escaped this
   only because its 15ch is on the h1. */
.cdj-section h2{max-width:16ch}
.cdj-section h2{font-size:clamp(2.05rem,4.6vw,3.4rem);margin-block:14px 20px}

/* --- Services ---------------------------------------------------------------
   A numbered editorial list on rules. The previous version was four identical
   rounded cards, which is the single most generic pattern available and said
   nothing that the text inside it did not already say. Numbers carry the
   sequence; the rule carries the separation. No boxes at all. */
.cdj-services{margin-top:clamp(40px,6vh,64px);border-top:1px solid var(--line)}
.cdj-svc{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,52px);align-items:start;padding-block:clamp(26px,3.6vh,38px);border-bottom:1px solid var(--line);transition:background .4s cubic-bezier(.16,1,.3,1)}
.cdj-svc:hover{background:oklch(1 0 0 / .028)}
.cdj-svc-n{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:0.86rem;color:var(--amber);letter-spacing:.06em;padding-top:.5em;min-width:2.4em}
.cdj-svc h3{font-size:clamp(1.28rem,2.5vw,1.72rem);margin-bottom:9px;color:var(--paper)}
.cdj-svc p{margin:0;color:var(--paper-dim);max-width:56ch}

/* --- Availability -----------------------------------------------------------
   The one place on the page that inverts to light. It is the conversion step,
   and after a long dark scroll a light band reads as "this is the part you
   act on" without needing a banner to say so. */
.cdj-availability{background:var(--paper);color:var(--ink)}
.cdj-availability .cdj-eyebrow{color:var(--amber-deep)}
.cdj-availability h2{color:var(--ink)}
.cdj-availability .cdj-lede{color:oklch(0.42 0.015 66)}
.cdj-avail-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px)}
@media(min-width:900px){.cdj-avail-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.cdj-form-card{background:var(--ink);color:var(--paper);border-radius:20px;padding:clamp(26px,3.6vw,40px)}
.cdj-form-card h3{font-size:1.45rem;margin-bottom:8px}
.cdj-form-card p{color:var(--paper-dim);margin:0 0 22px;font-size:.95rem}
.cdj-date{
  width:100%;font:inherit;font-size:1.02rem;color:var(--paper);
  background:oklch(1 0 0 / .06);border:1.5px solid var(--line);border-radius:12px;
  padding:.92em 1em;margin-bottom:14px;color-scheme:dark;
  transition:border-color .3s,background .3s;
}
.cdj-date:focus{outline:none;border-color:var(--amber);background:oklch(1 0 0 / .1)}
.cdj-submit{width:100%;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.055em;text-transform:uppercase;background:var(--amber);color:oklch(0.19 0.03 70);border:0;border-radius:999px;padding:1.02em 1.4em;cursor:pointer;transition:background .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.cdj-submit:hover{background:oklch(0.86 0.148 80);transform:translateY(-2px)}
.cdj-client{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem;color:var(--paper-far)}
.cdj-client a{color:var(--paper);text-decoration:none;border-bottom:1.5px solid oklch(0.80 0.148 78 / .5)}
.cdj-client a:hover{border-bottom-color:var(--amber)}

/* --- Gallery ----------------------------------------------------------------
   Deliberately uneven. Every photo is the same vintage and roughly the same
   scene, so equal tiles would read as one repeated picture. Varying the spans
   makes it a set. Duotone at rest, full colour on hover: the treatment hides
   the noise until someone actually wants to look. */
.cdj-gallery-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(30px,4.5vh,48px)}
.cdj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:820px){.cdj-grid{grid-template-columns:repeat(6,1fr);gap:14px}}
.cdj-shot{position:relative;overflow:hidden;border-radius:14px;background:var(--ink-2);aspect-ratio:4/3}
@media(min-width:820px){
  .cdj-shot:nth-child(1){grid-column:span 4;aspect-ratio:16/10}
  .cdj-shot:nth-child(2){grid-column:span 2;aspect-ratio:4/5}
  .cdj-shot:nth-child(3){grid-column:span 2;aspect-ratio:4/5}
  .cdj-shot:nth-child(4){grid-column:span 4;aspect-ratio:16/10}
  .cdj-shot:nth-child(5){grid-column:span 3}
  .cdj-shot:nth-child(6){grid-column:span 3}
}
.cdj-shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .55s ease}
.cdj-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,oklch(0.145 0.012 62 / .5));pointer-events:none;opacity:.9;transition:opacity .5s}
.cdj-shot img{filter:saturate(.35) contrast(1.1) sepia(.22) brightness(.95)}
.cdj-shot:hover img{filter:none;transform:scale(1.045)}
.cdj-shot:hover::after{opacity:.35}

/* --- Contact ----------------------------------------------------------------- */
.cdj-final{border-top:1px solid var(--line)}
.cdj-final h2{max-width:16ch}
.cdj-contact-list{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,60px);margin-block:clamp(30px,4.5vh,46px)}
.cdj-contact-list div{min-width:180px}
.cdj-contact-list dt{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--paper-far);margin-bottom:7px;font-weight:600}
.cdj-contact-list dd{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1.05rem,2vw,1.3rem);letter-spacing:-0.012em}
.cdj-contact-list a{color:var(--paper);text-decoration:none;border-bottom:1.5px solid oklch(0.80 0.148 78 / .45)}
.cdj-contact-list a:hover{border-bottom-color:var(--amber)}
.cdj-colophon{margin-top:clamp(46px,7vh,80px);padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.82rem;color:var(--paper-far)}

/* --- Motion -----------------------------------------------------------------
   One orchestrated entrance, staggered, then scroll reveals. Exponential
   ease-out, no bounce. Transform and opacity only, never layout properties. */
@keyframes cdjRise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
.cdj-rise{animation:cdjRise .95s cubic-bezier(.16,1,.3,1) both}
.cdj-hero .cdj-kicker{animation-delay:.05s}
.cdj-hero h1{animation-delay:.14s}
.cdj-hero .cdj-lede{animation-delay:.26s}
.cdj-hero .cdj-actions{animation-delay:.36s}
.cdj-hero .cdj-facts{animation-delay:.46s}
.cdj-reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.cdj-reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .cdj-rise{animation:none}
  .cdj-reveal{opacity:1;transform:none;transition:none}
  .cdj-shot img,.cdj-btn,.cdj-svc{transition:none}
}
/* Focus is visible against both the dark ground and the light band. */
.cdj-home a:focus-visible,.cdj-home button:focus-visible,.cdj-home input:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:4px}

@media(max-width:760px){
  .cdj-menu{display:none}
  .cdj-hero{min-height:auto;padding-block:clamp(110px,20vh,160px) 56px}
  .cdj-actions .cdj-btn{flex:1 1 auto}
}