/* Charlie Millson digital identity, shared across the site. */
:root {
  --brand-paper: #F5F3EC;
  --brand-ink: #171B19;
  --brand-signal: #D8FF3E;
  --brand-slate: #69736E;
  --brand-mist: #DCE1DA;
  --brand-cobalt: #3657D6;
  --brand-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --brand-mono: Menlo, Consolas, monospace;
}
html { color-scheme: light; }
body { font-family: var(--brand-font) !important; }
button, input, textarea { font-family: inherit; }
h1, h2, h3 { font-family: var(--brand-font) !important; letter-spacing: -.055em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brand-cobalt) !important; outline-offset: 3px; }
.brand-mark { display: inline-block; width: min(220px, 55vw); margin-bottom: 1.7rem; }
.brand-mark img { display: block; width: 100%; height: auto; }
.brand-mark--wordmark { width: min(280px, 70vw); }
.brand-mark--wordmark .brand-logo-dark { display: none; }
.brand-home body.theme-dark .brand-logo-light { display: none; }
.brand-home body.theme-dark .brand-logo-dark { display: block; }
.brand-credit { display: block; width: 170px; max-width: 45%; margin: 1.5rem auto 0; }
.brand-credit-dark { display: none; }
.brand-home body.theme-dark .brand-credit-light { display: none; }
.brand-home body.theme-dark .brand-credit-dark { display: block; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 200; padding: .75rem 1rem; color: var(--brand-paper); background: var(--brand-ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* Home */
.brand-home body {
  --page-top: var(--brand-paper); --page-bottom: var(--brand-paper);
  --surface: var(--brand-paper); --surface-solid: var(--brand-paper);
  --surface-muted: #EAEDE6; --surface-muted-strong: var(--brand-mist);
  --surface-border: var(--brand-mist); --surface-border-strong: var(--brand-slate);
  --text-main: var(--brand-ink); --text-strong: var(--brand-ink);
  --text-muted: #414A44; --text-soft: #59645D;
  --surface-shadow: none; --surface-shadow-soft: none;
  --theme-button-bg: var(--brand-paper); --theme-button-border: var(--brand-ink);
  --theme-button-text: var(--brand-ink); --theme-button-hover: var(--brand-signal);
  --logo-surface: var(--brand-paper); --logo-border: var(--brand-mist);
  background: var(--brand-paper) !important;
}
.brand-home body.theme-dark {
  color-scheme: dark;
  --page-top: var(--brand-ink); --page-bottom: var(--brand-ink);
  --surface: #242A26; --surface-solid: var(--brand-ink);
  --surface-muted: #2D352F; --surface-muted-strong: #384139;
  --surface-border: #48534A; --surface-border-strong: var(--brand-slate);
  --text-main: var(--brand-paper); --text-strong: var(--brand-paper);
  --text-muted: var(--brand-mist); --text-soft: #ADB8AD;
  --surface-shadow: none; --surface-shadow-soft: none;
  --theme-button-bg: #242A26; --theme-button-border: var(--brand-mist);
  --theme-button-text: var(--brand-paper); --theme-button-hover: #384139;
  --logo-surface: #242A26; --logo-border: #48534A;
  --overlay: rgba(0, 0, 0, .72);
  background: var(--brand-ink) !important;
}
.brand-home .main-content { max-width: 1160px; }
.brand-home .main-content > header,
.brand-home .main-content section { border-radius: 4px !important; box-shadow: none !important; border: 1px solid var(--surface-border); background: var(--surface) !important; }
.brand-home .main-content > header { border-top: 8px solid var(--brand-signal) !important; padding-top: clamp(2rem, 5vw, 4rem); }
.brand-home .main-content > header h1 { font-size: clamp(3.4rem, 8vw, 6.5rem); line-height: .9; margin-bottom: 1.2rem; }
.brand-home .main-content > header p.text-xl { font-size: clamp(1rem, 2vw, 1.3rem); color: var(--text-muted) !important; }
.brand-home .main-content section h2 { font-size: clamp(1.75rem, 3.4vw, 2.65rem); line-height: 1.05; }
.brand-home .section-header::after { width: 80px; height: 6px; border-radius: 0; transform: skewX(-20deg); background: var(--brand-signal); }
.brand-home .timeline-dot { background: var(--brand-signal); border-color: var(--surface); }
.brand-home .rounded-2xl, .brand-home .rounded-lg, .brand-home .rounded-md { border-radius: 4px !important; }
.brand-home .bg-white { background: var(--surface) !important; }
.brand-home .bg-gray-50 { background: var(--surface-muted) !important; }
.brand-home .text-gray-900, .brand-home .text-gray-800 { color: var(--text-strong) !important; }
.brand-home .text-gray-700, .brand-home .text-gray-600 { color: var(--text-muted) !important; }
.brand-home .text-gray-500, .brand-home .text-gray-400 { color: var(--text-soft) !important; }
.brand-home .text-teal-600, .brand-home .text-teal-500, .brand-home .text-teal-700 { color: var(--text-strong) !important; }
.brand-home .border-teal-600 { border-color: var(--brand-signal) !important; }
.brand-home .border-teal-200, .brand-home .border-gray-100, .brand-home .border-gray-200 { border-color: var(--surface-border) !important; }
.brand-home .bg-teal-600 { background: var(--brand-ink) !important; color: var(--brand-paper) !important; }
.brand-home .hover\:bg-teal-700:hover { background: var(--brand-signal) !important; color: var(--brand-ink) !important; }
.brand-home a:hover, .brand-home button:hover { color: var(--brand-cobalt); }
.brand-home body.theme-dark a:hover, .brand-home body.theme-dark button:hover { color: var(--brand-signal); }
.brand-home #cv-version-link { background: var(--brand-ink) !important; color: var(--brand-paper) !important; border-color: var(--brand-ink) !important; box-shadow: none !important; }
.brand-home #cv-version-link:hover { background: var(--brand-signal) !important; color: var(--brand-ink) !important; }
.brand-home body.theme-dark #cv-version-link { background: var(--brand-signal) !important; color: var(--brand-ink) !important; }
.brand-home body.theme-dark #cv-version-link:hover { background: var(--brand-paper) !important; color: var(--brand-ink) !important; }
.brand-home body.theme-dark .bg-teal-600:hover { color: var(--brand-ink) !important; }
.brand-home .theme-icon-button { border-radius: 4px; box-shadow: none; }
.brand-home .site-loader { background: var(--surface-solid); color: var(--text-strong); }
.brand-home .site-loader::before { border-color: var(--brand-mist); }
.brand-home .loader-ring { border-top-color: var(--brand-signal); border-right-color: var(--brand-mist); }
.brand-home .loader-ring::after { border-bottom-color: var(--brand-signal); border-left-color: var(--brand-mist); }
.brand-home .loader-track { background: var(--brand-mist); }
.brand-home .loader-progress { background: var(--brand-signal); }
.brand-home ::-webkit-scrollbar-thumb { background: var(--brand-slate); }
.brand-home ::-webkit-scrollbar-track { background: var(--surface-muted); }
.brand-home body.theme-dark ::-webkit-scrollbar-track { background: var(--surface-muted); }
.brand-home .main-content > footer { border-top: 1px solid var(--surface-border); padding-top: 1.5rem; }

/* Editorial home layout */
.brand-home { scroll-behavior: smooth; }
.brand-home .main-content { padding-top: 0; }
.brand-home .main-content > header { margin: 0 0 3.5rem; padding: 0 clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem); border: 0 !important; border-top: 8px solid var(--brand-signal) !important; }
.brand-home .site-masthead { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.6rem 0; border-bottom: 1px solid var(--surface-border-strong); }
.brand-home .site-masthead .brand-mark { width: 280px; margin: 0; flex: 0 0 auto; }
.brand-home .site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); flex-wrap: wrap; }
.brand-home .site-nav a, .brand-home .brand-label, .brand-home .section-index { font: 11px/1.4 var(--brand-mono); text-transform: uppercase; letter-spacing: .08em; }
.brand-home .site-nav a { color: var(--text-muted); text-decoration: none; }
.brand-home .site-nav a:hover, .brand-home .site-nav a:focus-visible { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--brand-signal); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.brand-home .site-actions { display: flex; align-items: center; gap: .6rem; }
.brand-home .theme-icon-button { width: 2.75rem; height: 2.75rem; }
.brand-home #cv-version-link { min-height: 2.75rem; font-size: .75rem; letter-spacing: .02em; }
.brand-home .hero-copy { max-width: 850px; padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem); }
.brand-home .brand-label { display: flex; align-items: center; gap: 1rem; margin: 0 0 2rem; color: var(--text-muted); }
.brand-home .signal-rule { display: inline-block; width: 88px; height: 7px; flex: 0 0 auto; background: var(--brand-signal); transform: skewX(-20deg); }
.brand-home .main-content > header h1 { max-width: 9ch; margin: 0; font-size: clamp(4.2rem, 11vw, 9.5rem); line-height: .82; letter-spacing: -.085em; }
.brand-home .hero-deck { max-width: 24ch; margin: 2.25rem 0 0; color: var(--text-strong); font-size: clamp(1.65rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -.045em; }
.brand-home .hero-description { max-width: 46rem; margin: 1rem 0 0; color: var(--text-muted); font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.5; }
.brand-home .hero-contact { align-items: center; border-top: 1px solid var(--surface-border-strong); padding-top: 1.25rem; gap: 1rem 2rem; }
.brand-home .hero-contact svg { color: var(--text-muted) !important; }
.brand-home .hero-contact a { text-decoration: underline; text-underline-offset: 3px; }
.brand-home #copy-email-button { opacity: 1; }
.brand-home .main-content section { border: 0; border-top: 1px solid var(--surface-border-strong); background: transparent !important; padding: 2rem 0 3rem; border-radius: 0 !important; }
.brand-home .main-content section h2 { max-width: 15ch; margin-bottom: 2rem; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: .98; letter-spacing: -.065em; }
.brand-home .section-header::after { margin-top: 1.1rem; }
.brand-home .section-index { margin: 0 0 1rem; color: var(--text-soft); }
.brand-home #about p.leading-relaxed { max-width: 62ch; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.6; }
.brand-home #experience .job-entry-header { margin-bottom: .6rem; }
.brand-home #experience .job-entry-header h3 { line-height: 1.18; }
.brand-home #experience .job-logo { border-radius: 4px; box-shadow: none; }
.brand-home #leadership .rounded-full { border-radius: 4px !important; box-shadow: none; }
.brand-home #education > .grid > div { border-color: var(--surface-border-strong); }
.brand-home .main-content > footer { margin-top: 2rem; }
.brand-home body.theme-dark .modal-cancel:hover { background: var(--surface-muted-strong) !important; color: var(--brand-paper) !important; }
.brand-home body.theme-dark .modal-content { border-color: var(--surface-border) !important; box-shadow: none !important; }
.brand-home body.theme-dark .modal-content .bg-teal-600 { background: var(--brand-signal) !important; color: var(--brand-ink) !important; }
.brand-home body.theme-dark .modal-content .bg-teal-600:hover { background: var(--brand-paper) !important; color: var(--brand-ink) !important; }

@media (max-width: 900px) {
  .brand-home .site-masthead { align-items: flex-start; }
  .brand-home .site-nav { order: 3; flex: 1 0 100%; padding-top: .5rem; }
  .brand-home .site-actions { margin-left: auto; }
}
@media (max-width: 640px) {
  .brand-home .main-content > header { padding-inline: 1.25rem; margin-bottom: 1.5rem; }
  .brand-home .site-masthead .brand-mark { width: min(205px, 60vw); }
  .brand-home .site-nav { gap: .8rem 1.2rem; }
  .brand-home .hero-copy { padding: 3.5rem 0; }
  .brand-home .main-content > header h1 { font-size: clamp(3.7rem, 16vw, 5.5rem); }
  .brand-home .main-content section { padding: 2rem .4rem 2.7rem; }
}

/* CV and document pages */
.brand-cv { --paper: #F5F3EC; --ink: #171B19; --muted: #59645D; --line: #DCE1DA; --accent: #171B19; --accent-soft: #D8FF3E; --page: #EAEDE6; }
.brand-cv body { background: var(--page); }
.brand-cv .cv-paper { border-radius: 4px; box-shadow: none; }
.brand-cv .cv-hero { background: var(--brand-paper); color: var(--brand-ink); border-top: 8px solid var(--brand-signal); }
.brand-cv .hero-name { font-size: clamp(3.2rem, 7vw, 6rem); line-height: .92; }
.brand-cv .section-title::before, .brand-cv .entry::before { background: var(--brand-signal); }
.brand-cv .cv-action, .brand-cv .badge, .brand-cv .side-card { border-radius: 4px; }
.brand-cv .cv-action-primary { background: var(--brand-ink); color: var(--brand-paper); }
.brand-cv .cv-action-primary:hover { background: var(--brand-signal); color: var(--brand-ink); }
.brand-cv .floating-home-link { border-radius: 4px; }

/* Link hub */
.brand-links { color-scheme: light; --background: #F5F3EC; --background-glow: transparent; --surface: #F5F3EC; --surface-hover: #EAEDE6; --border: #DCE1DA; --text: #171B19; --muted: #59645D; --accent: #171B19; --accent-soft: #D8FF3E; --shadow: none; }
.brand-links body { background: var(--brand-paper) !important; color: var(--brand-ink); }
.brand-links .profile h1 { font-size: clamp(3.2rem, 10vw, 5.4rem); line-height: .9; }
.brand-links .profile .brand-mark { width: min(255px, 70vw); margin: 0 auto 1.5rem; }
.brand-links .avatar { border-color: var(--brand-ink); box-shadow: none; }
.brand-links .link-card { border-radius: 4px; box-shadow: none; border-color: var(--brand-ink); background: transparent; }
.brand-links .link-card:hover { background: var(--brand-signal); border-color: var(--brand-ink); }
.brand-links .icon { border-radius: 4px; background: var(--brand-mist); color: var(--brand-ink); }
.brand-links .site-loader { background: var(--brand-paper); color: var(--brand-ink); }
.brand-links .site-loader::before { border-color: var(--brand-mist); }
.brand-links .loader-ring { border-top-color: var(--brand-signal); border-right-color: var(--brand-mist); }
.brand-links .loader-ring::after { border-bottom-color: var(--brand-signal); border-left-color: var(--brand-mist); }
.brand-links .loader-progress { background: var(--brand-signal); }

/* Payment page */
.brand-pay { color-scheme: light; --ink: #171B19; --muted: #59645D; --night: #F5F3EC; --panel: #F5F3EC; --panel-strong: #EAEDE6; --line: #DCE1DA; --mint: #D8FF3E; --mint-dark: #171B19; --glow: transparent; }
.brand-pay body { background: var(--brand-paper) !important; }
.brand-pay body::before, .brand-pay .orb { display: none; }
.brand-pay .topbar, .brand-pay .method { border-color: var(--brand-ink); }
.brand-pay .brand { display: inline-flex; width: 74px; height: 74px; align-items: center; justify-content: center; background: var(--brand-signal); color: var(--brand-ink); border-radius: 4px; }
.brand-pay .eyebrow::before { width: 64px; height: 6px; background: var(--brand-signal); box-shadow: none; transform: skewX(-20deg); }
.brand-pay .method { border-radius: 4px; background: transparent; box-shadow: none; }
.brand-pay .method:hover { background: var(--brand-mist); border-color: var(--brand-ink); }
.brand-pay .method-icon, .brand-pay .detail-row, .brand-pay .copy, .brand-pay .action { border-radius: 4px; }
.brand-pay .method-icon { background: var(--brand-mist); color: var(--brand-ink); }
.brand-pay .action { background: var(--brand-ink); color: var(--brand-paper); }
.brand-pay .action:hover { background: var(--brand-signal); color: var(--brand-ink); }
.brand-pay .footnote { color: var(--brand-slate); }

/* 404 */
.brand-error { color-scheme: light; --background: #F5F3EC; --surface: #F5F3EC; --border: #171B19; --text: #171B19; --muted: #59645D; --accent: #171B19; --accent-hover: #3657D6; --accent-soft: #D8FF3E; --shadow: none; }
.brand-error body { background: var(--brand-paper); }
.brand-error .error-card { border-radius: 4px; box-shadow: none; backdrop-filter: none; }
.brand-error .error-card::before { background: var(--brand-signal); }
.brand-error .button { border-radius: 4px; }
.brand-error .button-primary { background: var(--brand-ink); color: var(--brand-paper); }
.brand-error .button-primary:hover { background: var(--brand-signal); color: var(--brand-ink); }

/* Ancillary authored pages */
.brand-letter { --ink: #171B19; --muted: #59645D; --line: #DCE1DA; --accent: #D8FF3E; --paper: #F5F3EC; --background: #EAEDE6; }
.brand-letter .page { box-shadow: none; border-radius: 4px; }
.brand-terms { --ink: #171B19; --muted: #59645D; --paper: #F5F3EC; --panel: #F5F3EC; --line: #DCE1DA; --accent: #171B19; --accent-dark: #3657D6; --cream: #EAEDE6; --radius: 4px; }
.brand-terms body { background: var(--brand-paper); }
.brand-terms h1, .brand-terms h2, .brand-terms h3 { font-family: var(--brand-font) !important; }

@media print {
  .brand-home .main-content section, .brand-home .main-content > header { border-color: #999; }
  .brand-cv .cv-hero { background: #fff; color: #000; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}