/* ============================================================
   JC Burrows — Dark Theme, cloned directly from theerinmoore.com

   Source: extracted from the site's compiled Tailwind/shadcn CSS
   bundle (/_next/static/css/*.css). Erin's site ships with a
   complete, ALREADY-BUILT dark theme (shadcn's standard .dark
   token set) that simply isn't activated on the live site — it's
   sitting unused in her own CSS. This file takes those exact
   values and makes dark the ONLY theme (not a toggle).

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

:root {
  /* ---- Core surface & text (decoded from Erin's own .dark block) ---- */
  --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 — inverted vs. light mode: primary is now 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;                /* same base radius Erin's site uses site-wide */

  /* ---- Brand accent — same gold across light/dark on Erin's site,
     carried through unchanged since it's the brand mark, not a
     surface color ---- */
  --gold: 36 65% 55%;              /* #d79b42 */
  --ink: 36 30% 94%;               /* on dark bg, "ink" flips to the light text color */
  --paper: 30 8% 8%;               /* and "paper" flips to the dark background */
}

/* If the build framework doesn't use next/font (Erin's self-hosted,
   hashed font files), load the same two families from Google Fonts.
   Confirmed from the source: both are true variable fonts, full
   100-900 weight range, Fraunces also uses the optical-size axis: */
@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 — CORRECTED against actual computed
   values (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 — the
                                                        most-used
                                                        card radius)
   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;   /* the hard cap — same as Erin's site at
                           desktop widths */
}
/* Content-width caps used within sections (Tailwind max-w-*),
   same scale as Erin's site — pick per block by role: */
/* 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 (padding-top/bottom pairs actually
   used across the page) ---- */
/* 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 / biggest section breaks */

/* ---- Type scale (exact, matches Erin's site) ---- */
/* 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 (used sparingly — only on eyebrows/labels,
   NEVER on body copy or headlines) ---- */
/* tracking-tight   -.025em  — occasionally on large headlines
   tracking-normal   0
   tracking-wide     .025em  — eyebrow/label text
   tracking-wider    .05em   — small caps-style labels
   tracking-widest   .1em    — the most 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     — large display numbers
   leading-tight   1.25  — headlines
   leading-snug    1.375
   leading-relaxed 1.625 — body copy paragraphs */

/* ---- Shadows (standard Tailwind scale, confirmed in use) ----
   Use shadow-sm/md on small elements, shadow-lg on cards,
   shadow-xl/2xl reserved for the hero portrait only — Erin's site
   does not stack heavy shadows on multiple elements at once. */
/* 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 ---- */
/* Default on all interactive elements (links, buttons, cards on
   hover): 150ms, cubic-bezier(.4,0,.2,1). Do not use anything
   slower for hover states — Erin's site is snappy, not languid.
   Longer durations (300ms-1s) are reserved for the one page-load
   reveal moment and the stat count-up animation only. */
.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 ---- */
/* Nav bar is position: sticky, top: 0, z-index: 50, with
   backdrop-blur-xl (24px) and a semi-transparent background
   (background over background at ~90% opacity) so content scrolls
   beneath it visibly blurred — not a solid opaque bar. */
.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 ---- */
/* aspect-ratio: 1/1 (square) for the small About-page headshot;
   the large homepage hero image uses object-fit: cover,
   object-position: top, inside a rounded-3xl (24px) frame with
   shadow-2xl. Do not crop the standing photo to square on the
   homepage — it should stay in its natural portrait proportions,
   contained rather than forced to a fixed aspect ratio. */
.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 (standard Tailwind — confirmed in use) ---- */
/* sm  640px
   md  768px
   lg  1024px  <- nav collapses to mobile menu below this
   xl  1280px
   2xl 1400px  <- container max-width kicks in */

/* ---- Font weights in use: 400 / 500 / 600 / 700 — same scale, no 800/900 ---- */

/* ============================================================
   Plain hex reference (if the build isn't using CSS variables /
   shadcn conventions — use these directly)
   ============================================================
   background        #161413
   foreground        #f4f1eb
   card / panel       #1e1c1a
   secondary/muted    #2b2926
   muted-foreground   #afa69d
   border             #312e2b
   gold accent        #d79b42   <- use sparingly, same restraint
                                    as Erin's site: CTAs, hairline
                                    accents, the one "Vol." style
                                    marker per section, never a
                                    full background fill
   ============================================================ */