/* ============================================================
   JC Burrows — Luxury Dark Editorial Theme

   Executive design system utilizing high-contrast luxury dark
   surfaces (#161413 canvas, #1e1c1a cards, #312e2b borders,
   #d79b42 warm gold accents) paired with Fraunces serif display
   and Inter body typography.

   Framework: Tailwind CSS + shadcn/ui CSS-variable convention
   (--background, --foreground, etc. as HSL triples, consumed via
   hsl(var(--token)) throughout components). For direct hex values,
   see the "Plain hex reference" block at the bottom.
   ============================================================ */

:root {
  /* ---- Core surface & text tokens ---- */
  --background: 30 8% 8%;          /* #161413 */
  --foreground: 36 30% 94%;        /* #f4f1eb */

  --card: 30 8% 11%;               /* #1e1c1a */
  --card-foreground: 36 30% 94%;   /* #f4f1eb */

  --popover: 30 8% 11%;            /* #1e1c1a */
  --popover-foreground: 36 30% 94%;/* #f4f1eb */

  --primary: 36 30% 94%;           /* #f4f1eb — primary light-on-dark */
  --primary-foreground: 30 8% 8%;  /* #161413 */

  --secondary: 30 6% 16%;          /* #2b2926 */
  --secondary-foreground: 36 30% 94%; /* #f4f1eb */

  --muted: 30 6% 16%;              /* #2b2926 */
  --muted-foreground: 30 10% 65%;  /* #afa69d */

  --accent: 30 6% 16%;             /* #2b2926 */
  --accent-foreground: 36 30% 94%; /* #f4f1eb */

  --destructive: 0 62.8% 50%;
  --destructive-foreground: 36 30% 94%;

  --border: 30 6% 18%;             /* #312e2b */
  --input: 30 6% 18%;              /* #312e2b */
  --ring: 30 10% 40%;

  --radius: 0.5rem;                /* Base border radius (8px) */

  /* ---- Executive Warm Gold Brand Accent (#d79b42) ---- */
  --gold: 36 65% 55%;              /* #d79b42 */
  --ink: 36 30% 94%;               /* Primary ink color */
  --paper: 30 8% 8%;               /* Primary dark surface */
}

/* Typography pipeline: Google Fonts Fraunces (variable optical size) + Inter */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&family=Inter:wght@100..900&display=swap");

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.font-serif,
h1, h2, h3,
.headline {
  font-family: "Fraunces", ui-serif, Georgia, serif;
}

/* ---- Border radius scale (base --radius: 0.5rem = 8px) ---- */
/* rounded-sm  -> calc(var(--radius) - 4px) = 4px   (badges, tags)
   rounded     -> .25rem = 4px                      (small buttons)
   rounded-md  -> calc(var(--radius) - 2px) = 6px   (inputs)
   rounded-lg  -> var(--radius) = 8px                (cards)
   rounded-xl  -> .75rem = 12px                     (larger panels)
   rounded-2xl -> 1rem = 16px
   rounded-3xl -> 1.5rem = 24px                     (hero image frame)
   rounded-full-> 9999px                            (pill buttons, avatar) */

/* ---- Container & layout width ---- */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 1400px;   /* Content container cap */
}

/* Content-width caps within sections (Tailwind max-w-*) */
/* max-w-xs  20rem (320px)  — small callouts
   max-w-sm  24rem (384px)
   max-w-md  28rem (448px)
   max-w-lg  32rem (512px)  — narrow text columns
   max-w-xl  36rem (576px)
   max-w-2xl 42rem (672px)  — body copy blocks, ~80 char line length
   max-w-3xl 48rem (768px)  — standard article/section width
   max-w-4xl 56rem (896px)
   max-w-5xl 64rem (1024px) — wide section wrappers
   max-w-6xl 72rem (1152px) — widest content wrapper below full container */

/* ---- Section vertical rhythm ---- */
/* py-10  2.5rem (40px)  — tight internal spacing
   py-12  3rem (48px)
   py-14  3.5rem (56px)
   py-16  4rem (64px)    — standard sub-section spacing
   py-20  5rem (80px)    — standard major section spacing
   py-24  6rem (96px)    — large section breaks
   py-28  7rem (112px)   — hero / largest section breaks */

/* ---- Editorial Typography Scale ---- */
/* text-xs   .75rem  / 1rem       — eyebrow labels, captions
   text-sm   .875rem / 1.25rem    — small body, nav links
   text-base 1rem    / 1.5rem     — body copy
   text-lg   1.125rem/ 1.75rem
   text-xl   1.25rem / 1.75rem
   text-2xl  1.5rem  / 2rem       — sub-headings
   text-3xl  1.875rem/ 2.25rem
   text-4xl  2.25rem / 2.5rem     — section headings
   text-5xl  3rem     / 1         — large headings
   text-6xl  3.75rem  / 1         — hero headline (desktop)
   text-7xl  4.5rem   / 1         — largest hero treatment */

/* ---- Letter-spacing tokens ---- */
/* tracking-tight   -.025em  — large display headlines
   tracking-normal   0
   tracking-wide     .025em  — eyebrow/label text
   tracking-wider    .05em   — small caps-style labels
   tracking-widest   .1em    — emphasized micro-labels */

/* ---- Gap scale (flex/grid gaps) ---- */
/* gap-1 .25rem · gap-2 .5rem · gap-3 .75rem · gap-4 1rem ·
   gap-5 1.25rem · gap-6 1.5rem · gap-8 2rem · gap-10 2.5rem ·
   gap-12 3rem */

/* ---- Line-height named tokens ---- */
/* leading-none    1     — display numbers
   leading-tight   1.25  — headlines
   leading-snug    1.375
   leading-relaxed 1.625 — body copy paragraphs */

/* ---- Elevation & Shadows ---- */
/* shadow-sm  0 1px 2px 0 rgba(0,0,0,.05)
   shadow-md  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1)
   shadow-lg  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1)
   shadow-xl  0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1)
   shadow-2xl 0 25px 50px -12px rgba(0,0,0,.25)   <- hero portrait only */

/* ---- Transitions ---- */
.interactive-transition {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ---- Sticky nav ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background-color: hsl(var(--background) / 0.9);
  border-bottom: 1px solid hsl(var(--border));
}

/* ---- Hero portrait treatment ---- */
.hero-portrait {
  border-radius: 1.5rem; /* rounded-3xl, 24px */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
  object-fit: cover;
  object-position: top;
}
.about-headshot {
  aspect-ratio: 1 / 1;
  border-radius: 9999px; /* rounded-full — circular headshot treatment */
  object-fit: cover;
}

/* ---- Responsive breakpoints ---- */
/* sm  640px
   md  768px
   lg  1024px  <- nav collapses to mobile menu below this
   xl  1280px
   2xl 1400px  <- container max-width kicks in */

/* ============================================================
   Plain hex reference
   ============================================================
   background        #161413
   foreground        #f4f1eb
   card / panel       #1e1c1a
   secondary/muted    #2b2926
   muted-foreground   #afa69d
   border             #312e2b
   gold accent        #d79b42   <- used for CTAs, hairline borders,
                                  accent markers, active states
   ============================================================ */