/* Fonts: Bricolage Grotesque (display) + Inter (body), self-hosted variable fonts */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/BricolageGrotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/BricolageGrotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/Inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/Inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- */
:root{
  /* --- base ink ------------------------------------------------------- */
  --ink:#1B1B1B;
  --ink-soft:#221F1C;
  --warm-700:#3A3733;
  --warm-500:#6B6560;
  --warm-400:#9C948C;
  --warm-200:#E4DFD3;
  --warm-150:#EEEAE0;
  --cream-100:#F6F4F0;
  --cream-200:#F4F0E8;
  --cream-300:#EFE9DC;
  --cream-400:#E7DFCE;
  --white:#FFFFFF;
  --dark-elevated:#272725;

  /* --- brand accents --------------------------------------------------- */
  --terracotta:#E15C31;
  --forest:#3D5A45;
  --slate:#3D5A73;

  /* --- semantic: text -------------------------------------------------- */
  --text-ink:var(--ink);
  --text-body-strong:var(--ink-soft);
  --text-body:var(--warm-700);
  --text-muted:var(--warm-500);
  --text-muted-soft:var(--warm-400);
  --text-on-primary:var(--white);
  --text-on-dark:var(--white);
  --text-on-dark-soft:#C9C4BC;

  /* --- semantic: surface ----------------------------------------------- */
  --surface-canvas:var(--cream-200);
  --surface-soft:var(--cream-100);
  --surface-card:var(--cream-300);
  --surface-strong:var(--cream-400);
  --surface-dark:var(--ink);
  --surface-dark-elevated:var(--dark-elevated);

  /* --- semantic: line -------------------------------------------------- */
  --hairline:var(--warm-200);
  --hairline-soft:var(--warm-150);

  /* --- semantic: interactive ------------------------------------------- */
  --primary:var(--ink);
  --primary-active:#2E2E2C;
  --primary-disabled:var(--warm-200);

  /* --- semantic: feature cards ----------------------------------------- */
  --feature-terracotta:var(--terracotta);
  --feature-forest:var(--forest);
  --feature-slate:var(--slate);
  --feature-cream:var(--surface-card);

  /* --- semantic: status ------------------------------------------------ */
  --success:#22c55e;
  --warning:#f59e0b;
  --error:#ef4444;
}

/* ---- */
:root{
  /* display — Bricolage Grotesque, weight 500, negative tracking */
  --display-xl-size:clamp(38px,6.6vw,72px);   --display-xl-lh:1; /* @kind other */     --display-xl-ls:-0.035em; /* @kind spacing */
  --display-lg-size:clamp(32px,5.2vw,56px);   --display-lg-lh:1.05; /* @kind other */  --display-lg-ls:-0.036em; /* @kind spacing */
  --display-md-size:clamp(27px,3.8vw,40px);   --display-md-lh:1.1; /* @kind other */   --display-md-ls:-0.025em; /* @kind spacing */
  --display-sm-size:clamp(24px,3vw,32px);   --display-sm-lh:1.15; /* @kind other */  --display-sm-ls:-0.016em; /* @kind spacing */
  --display-weight:500; /* @kind font */

  /* titles — Inter 600 */
  --title-lg-size:24px; --title-lg-lh:1.3; /* @kind other */ --title-lg-ls:-0.3px; /* @kind spacing */
  --title-md-size:18px; --title-md-lh:1.4; /* @kind other */ --title-md-ls:0px; /* @kind spacing */
  --title-sm-size:16px; --title-sm-lh:1.4; /* @kind other */ --title-sm-ls:0px; /* @kind spacing */
  --title-weight:600; /* @kind font */

  /* body + utility — Inter */
  --body-md-size:16px; --body-md-lh:1.55; /* @kind other */
  --body-sm-size:14px; --body-sm-lh:1.55; /* @kind other */
  --body-weight:400; /* @kind font */
  --caption-size:13px; --caption-lh:1.4; /* @kind other */ --caption-weight:500; /* @kind font */
  --caption-upper-size:12px; --caption-upper-lh:1.4; /* @kind other */ --caption-upper-weight:600; /* @kind font */ --caption-upper-ls:1.5px; /* @kind spacing */
  --button-size:14px; --button-lh:1; /* @kind other */ --button-weight:600; /* @kind font */
  --nav-link-size:14px; --nav-link-lh:1.4; /* @kind other */ --nav-link-weight:500; /* @kind font */
}

/* ---- */
:root{
  --space-xxs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-xxl:48px;
  --space-section:96px;

  --container-max:1280px;
  --control-height:44px;
  --nav-height:64px;
  --band-padding:80px;
}

/* ---- */
:root{
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:9999px;
  --radius-full:9999px;
}

/* ---- */
:root{
  /* The system is near-flat. Depth comes from saturated colour against cream,
     not from shadow. Only one shadow exists, for rare hover elevation. */
  --shadow-none:none;
  --border-hairline:1px solid var(--hairline);
  --border-hairline-soft:1px solid var(--hairline-soft);
  --border-focus:1px solid var(--ink);
  --shadow-hover:0 6px 20px rgba(27,27,27,0.06);
}

/* ---- */
:root{
  /* Not specified in the source brand doc — these are a conservative default
     so consumers stay consistent. Flagged in readme.md under Known Gaps. */
  --ease-standard:cubic-bezier(0.32,0.72,0,1); /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --hover-opacity:0.86; /* @kind other */
}

/* ---- */
/* Responsive rules the inline-styled components can't express themselves.
   Every rule here is keyed to a class a published component already sets. */

.dj-hero-grid{display:grid;gap:var(--space-xxl);align-items:center}
.dj-band{padding:var(--space-section) var(--space-xl)}

@media (max-width:1040px){
  .dj-hero-grid{grid-template-columns:minmax(0,1fr) !important;gap:var(--space-xl)}
  .dj-band{padding:var(--space-xxl) var(--space-lg)}
}

@media (max-width:760px){
  .dj-nav-links{display:none !important}
  .dj-nav-bar{padding:0 var(--space-lg) !important}
  .dj-cta-band{padding:var(--space-xl) !important}
  .dj-footer{padding:var(--space-xxl) var(--space-lg) !important}
}

/* ---- */
*,*::before,*::after{box-sizing:border-box}body{margin:0;background:#F4F0E8}html{scroll-behavior:smooth}a{color:#1B1B1B}a:hover{opacity:.86}

:root{
  --font-display:"Bricolage Grotesque","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
:root{
  --font-display:"Bricolage Grotesque","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

:root{
  
  --ink:#1B1B1B;
  --ink-soft:#221F1C;
  --warm-700:#3A3733;
  --warm-500:#6B6560;
  --warm-400:#9C948C;
  --warm-200:#E4DFD3;
  --warm-150:#EEEAE0;
  --cream-100:#F6F4F0;
  --cream-200:#F4F0E8;
  --cream-300:#EFE9DC;
  --cream-400:#E7DFCE;
  --white:#FFFFFF;
  --dark-elevated:#272725;

  
  --terracotta:#E15C31;
  --forest:#3D5A45;
  --slate:#3D5A73;

  
  --text-ink:var(--ink);
  --text-body-strong:var(--ink-soft);
  --text-body:var(--warm-700);
  --text-muted:var(--warm-500);
  --text-muted-soft:var(--warm-400);
  --text-on-primary:var(--white);
  --text-on-dark:var(--white);
  --text-on-dark-soft:#C9C4BC;

  
  --surface-canvas:var(--cream-200);
  --surface-soft:var(--cream-100);
  --surface-card:var(--cream-300);
  --surface-strong:var(--cream-400);
  --surface-dark:var(--ink);
  --surface-dark-elevated:var(--dark-elevated);

  
  --hairline:var(--warm-200);
  --hairline-soft:var(--warm-150);

  
  --primary:var(--ink);
  --primary-active:#2E2E2C;
  --primary-disabled:var(--warm-200);

  
  --feature-terracotta:var(--terracotta);
  --feature-forest:var(--forest);
  --feature-slate:var(--slate);
  --feature-cream:var(--surface-card);

  
  --success:#22c55e;
  --warning:#f59e0b;
  --error:#ef4444;
}

:root{
  
  --display-xl-size:clamp(38px,6.6vw,72px);   --display-xl-lh:1;      --display-xl-ls:-0.035em; 
  --display-lg-size:clamp(32px,5.2vw,56px);   --display-lg-lh:1.05;   --display-lg-ls:-0.036em; 
  --display-md-size:clamp(27px,3.8vw,40px);   --display-md-lh:1.1;    --display-md-ls:-0.025em; 
  --display-sm-size:clamp(24px,3vw,32px);   --display-sm-lh:1.15;   --display-sm-ls:-0.016em; 
  --display-weight:500; 

  
  --title-lg-size:24px; --title-lg-lh:1.3;  --title-lg-ls:-0.3px; 
  --title-md-size:18px; --title-md-lh:1.4;  --title-md-ls:0px; 
  --title-sm-size:16px; --title-sm-lh:1.4;  --title-sm-ls:0px; 
  --title-weight:600; 

  
  --body-md-size:16px; --body-md-lh:1.55; 
  --body-sm-size:14px; --body-sm-lh:1.55; 
  --body-weight:400; 
  --caption-size:13px; --caption-lh:1.4;  --caption-weight:500; 
  --caption-upper-size:12px; --caption-upper-lh:1.4;  --caption-upper-weight:600;  --caption-upper-ls:1.5px; 
  --button-size:14px; --button-lh:1;  --button-weight:600; 
  --nav-link-size:14px; --nav-link-lh:1.4;  --nav-link-weight:500; 
}

:root{
  --space-xxs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-xxl:48px;
  --space-section:96px;

  --container-max:1280px;
  --control-height:44px;
  --nav-height:64px;
  --band-padding:80px;
}

:root{
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:9999px;
  --radius-full:9999px;
}

:root{
  
  --shadow-none:none;
  --border-hairline:1px solid var(--hairline);
  --border-hairline-soft:1px solid var(--hairline-soft);
  --border-focus:1px solid var(--ink);
  --shadow-hover:0 6px 20px rgba(27,27,27,0.06);
}

:root{
  
  --ease-standard:cubic-bezier(0.32,0.72,0,1); 
  --duration-fast:120ms; 
  --duration-base:200ms; 
  --duration-slow:420ms; 
  --hover-opacity:0.86; 
}



.dj-hero-grid{display:grid;gap:var(--space-xxl);align-items:center}
.dj-band{padding:var(--space-section) var(--space-xl)}

@media (max-width:1040px){
  .dj-hero-grid{grid-template-columns:minmax(0,1fr) !important;gap:var(--space-xl)}
  .dj-band{padding:var(--space-xxl) var(--space-lg)}
}

@media (max-width:760px){
  .dj-nav-links{display:none !important}
  .dj-nav-bar{padding:0 var(--space-lg) !important}
  .dj-cta-band{padding:var(--space-xl) !important}
  .dj-footer{padding:var(--space-xxl) var(--space-lg) !important}
}