/* Luminous template demo.
   Every colour on the pages comes from these palettes, so a new colourway is
   one new block below (20 colours each). Most layout styling is inline in each page. */

html[data-palette="blue"] {
  color-scheme: light;
  --bg: #f7f2e9;            /* page background */
  --paper: #f7f2e9;         /* light text on dark bands, button text */
  --ink: #1c2b45;           /* main text, dark bands, solid buttons */
  --accent: #c2a060;        /* frames, rules, ornaments, outlined buttons */
  --accent-on-dark: #c2a060;/* accent used on dark bands */
  --label: #765923;         /* small uppercase labels on light backgrounds */
  --muted: #586274;         /* secondary text */
  --soft: #3d4a61;          /* body copy on light backgrounds */
  --rule: #e3dccd;          /* thin dividers */
  --panel: #e2e6e9;         /* tinted sections and cards (a light slate grey) */
  --panel-rule: #c3cad1;    /* dividers inside tinted sections */
  --on-dark-muted: #c9d3e0; /* secondary text on dark bands */
  --frame-dark: #0f1a2d;    /* behind the reel video */
  --dark-rule: #2f3f5c;     /* dividers on dark bands */
  --band: #1c2b45;          /* dark bands and the footer */
  --on-dark: #f7f2e9;       /* text on dark bands and the footer */
  --header-bg: var(--bg);   /* header background */
  --footer-bg: var(--band); /* footer background */
  --stills-bg: var(--bg);   /* production stills section */
  --stills-rule: var(--bg); /* line above the production stills (hidden here) */
  --footer-line-gap: 0px;   /* space above the gold line at the top of the footer (About and Gallery) */
}

/* Sea glass: calm coastal colours, sand white, sea glass aqua frames and a deep sea teal for dark bands */
html[data-palette="sea"] {
  color-scheme: light;
  --bg: #f5f3ee;
  --paper: #f5f3ee;
  --ink: #1f3a3d;
  --accent: #8fbcb6;
  --accent-on-dark: #a9d3cd;
  --label: #2c6766;
  --muted: #536669;
  --soft: #34494c;
  --rule: #dfe2dc;
  --panel: #e1edeb;
  --panel-rule: #bfd5d1;
  --on-dark-muted: #c9ddd9;
  --frame-dark: #14282a;
  --dark-rule: #3a5d60;
  --band: #2b4f52;
  --on-dark: #f5f3ee;
  --header-bg: var(--bg);
  --footer-bg: var(--band);
  --stills-bg: var(--bg);
  --stills-rule: var(--bg);
  --footer-line-gap: 0px;
}

/* Popcorn: a soft butter ground with a popcorn white header and sections, a yellow footer, charcoal text and honey frames */
html[data-palette="popcorn"] {
  color-scheme: light;
  --bg: #fbf3d6;
  --paper: #fbf3d6;
  --ink: #2b2822;
  --accent: #c99b2c;
  --accent-on-dark: #876410;   /* here the "dark" bands are popcorn white, so this is a deep honey */
  --label: #6b4f0e;
  --muted: #5c5444;
  --soft: #3d382c;
  --rule: #ecdfb3;
  --panel: #f4e3a1;
  --panel-rule: #d8c37c;
  --on-dark-muted: #5c5444;
  --frame-dark: #2b2822;
  --dark-rule: #eadfc2;
  --band: #fffbf2;
  --on-dark: #2b2822;
  --header-bg: #fffbf2;        /* popcorn white header */
  --footer-bg: #f4e3a1;        /* yellow footer */
  --stills-bg: #fffbf2;        /* production stills on popcorn white */
  --stills-rule: #c99b2c;      /* honey line above them */
  --footer-line-gap: 40px;     /* the footer is a new colour here, so the gold line sits inside it */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); font-family: Figtree, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--ink); }
a:hover { color: var(--label); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
button, select, input, textarea { font: inherit; }
[style*="Fraunces"] { font-variation-settings: "SOFT" 50; }
select option { background: var(--bg); color: var(--ink); }
.demo-note { margin: 0; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--accent); padding: 12px 14px; }

/* Phones: name first, both menus centred underneath */
@media (max-width: 760px) {
  .site-header .brand { order: -1 !important; width: 100% !important; }
  .site-header .nav-left, .site-header .nav-right { flex: 1 1 100% !important; justify-content: center !important; gap: 0 22px !important; }
}

/* The resume sheet: a printed page. On small screens its top block and columns stack */
@media (max-width: 760px) {
  .resume-sheet { aspect-ratio: auto !important; }
}

/* Printing the resume: only the framed sheet, on one letter page, with the agency header at the top */
@page { size: letter; margin: 0; }
@media print {
  html, body { background: #ffffff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .resume-page header, .resume-page footer, .resume-page .resume-intro { display: none !important; }
  .resume-page .resume-wrap { padding: 0 !important; background: #ffffff !important; }
  .resume-page .resume-sheet { width: 8.5in !important; height: 11in !important; max-width: none !important; aspect-ratio: auto !important; margin: 0 !important; box-shadow: none !important; overflow: hidden; }
}

/* Home headshots: four in a row on wide screens, two on smaller ones. Gallery photos: three in a row, two on phones */
@media (max-width: 900px) { .hs-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 16px !important; } }

/* Gallery: click a photo to see it larger */
[data-lightbox] { cursor: zoom-in; }
[data-lightbox] img { transition: opacity 0.2s ease; }
[data-lightbox]:hover img { opacity: 0.88; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 56px 20px; background: rgba(10, 14, 20, 0.88); }
.lightbox img { display: block; max-width: min(100%, 1100px); max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.lightbox button { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; background: transparent; color: #ffffff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox button:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* Colour switcher (template demo only) */
.palette-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--accent);
  font-family: Figtree, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.palette-switch button {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.palette-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.palette-switch .swatch { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(0,0,0,0.15); }
.palette-switch .swatch i { flex: 1; }
.palette-switch .short { display: none; }
@media (max-width: 680px) {
  .palette-switch { left: 12px; right: 12px; bottom: 12px; justify-content: center; gap: 2px; padding: 4px; }
  .palette-switch .label, .palette-switch .full { display: none; }
  .palette-switch .short { display: inline; }
  .palette-switch button { flex: 1 1 0; justify-content: center; padding: 0 8px; letter-spacing: 0.06em; }
}
@media print { .palette-switch { display: none; } }