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

:root, html[data-palette="stone"] {
  color-scheme: light;
  --bg: #eef0ef;            /* page background, text on solid buttons */
  --ink: #1b2530;           /* main text and solid buttons */
  --band: #1b2530;          /* dark bands (reel, calls to action) */
  --accent: #3d5a78;        /* denim: section numbers, small labels, links */
  --soft: #36414b;          /* body copy */
  --muted: #56626c;         /* secondary text and captions */
  --rule: #cdd4d7;          /* thin dividers */
  --panel: #e2e6e7;         /* tinted sections and the contact form */
  --on-dark: #eef0ef;       /* text on dark bands */
  --on-dark-muted: #c3ccd3; /* secondary text on dark bands */
  --on-dark-label: #a9c0d6; /* small labels on dark bands */
  --frame-dark: #26313c;    /* behind the reel video */
  --band-rgb: 27, 37, 48;    /* the dark band colour as red, green, blue (for see-through shades) */
  --band-rule: #3a4757;       /* lines and card edges on dark bands */
  --header-bg: #1b2530;        /* the top menu bar */
  --header-ink: #eef0ef;
  --header-accent: #a9c0d6;    /* the current page in the menu */
  --header-rule: #1b2530;
}

html[data-palette="denim"] {
  color-scheme: light;
  --bg: #e5e5e5;
  --ink: #262a33;
  --band: #4a4f5e;          /* deep denim grey */
  --accent: #4f5747;        /* deep sage */
  --soft: #3a3e47;
  --muted: #4c515a;
  --rule: #c3c5ca;
  --panel: #cdd1c5;         /* soft sage */
  --on-dark: #e5e5e5;
  --on-dark-muted: #cbced5; /* pale heather */
  --on-dark-label: #c5cab9; /* pale sage */
  --frame-dark: #353946;
  --band-rgb: 38, 42, 51;    /* the dark band colour as red, green, blue (for see-through shades) */
  --band-rule: #646979;       /* lines and card edges on dark bands */
  --header-bg: #4a4f5e;        /* the top menu bar */
  --header-ink: #e5e5e5;
  --header-accent: #c5cab9;    /* the current page in the menu */
  --header-rule: #4a4f5e;
}

/* Sage: sage green where the other colourways are light, cream where they are dark (bands, menu bar).
   Text on the sage is light, text on the cream is a deep sage. The sage is a deeper shade of #738678,
   because #738678 itself is too light for readable light text (even white on it is only 3.9:1). */
html[data-palette="sage"] {
  color-scheme: dark;
  --bg: #5e6e62;            /* sage */
  --ink: #fffdf7;           /* ivory text on the sage */
  --band: #f4eddd;          /* cream bands (reel, calls to action) */
  --accent: #f9eecf;        /* pale butter: section numbers, small labels, links */
  --soft: #f6f3ea;
  --muted: #eeebe0;
  --rule: #7d8c80;
  --panel: #546357;         /* deeper sage for the contact form and tinted sections */
  --on-dark: #3a463d;       /* here the "dark" bands are cream, so their text is a deep sage */
  --on-dark-muted: #56645a;
  --on-dark-label: #7a5a1f; /* deep brass */
  --frame-dark: #2f3a32;
  --band-rgb: 244, 237, 221;  /* the band colour as red, green, blue (for see-through shades) */
  --band-rule: #ddd3bb;       /* lines and card edges on the cream bands */
  --header-bg: #f4eddd;        /* cream menu bar */
  --header-ink: #3a463d;
  --header-accent: #7a5a1f;    /* the current page in the menu */
  --header-rule: #f4eddd;
}

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

/* Footer: name on the left, links with the credit line centred under them, socials on the right.
   On smaller screens everything stacks in the centre: name, links, socials, then the credit line. */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; }
  .footer-grid > * { justify-self: center !important; }
  .footer-grid .f-mid { display: contents !important; }
  .footer-grid .f-name { order: 0; }
  .footer-grid nav { order: 1; }
  .footer-grid > div:last-child { order: 2; }
  .footer-grid .f-copy { order: 3; }
}

/* Phones: tighter menu spacing, a taller photo band, and the staggered headshots line up in one column */
@media (max-width: 640px) {
  .site-nav { width: 100%; justify-content: space-between; gap: 0 12px !important; font-size: 12px !important; letter-spacing: 0.1em !important; }
  .stagger { margin-top: 0 !important; }
  .wide-band { aspect-ratio: 3 / 2 !important; }
}

/* The resume sheet: a printed page. On small screens its two columns stack */
@media (max-width: 760px) {
  .resume-sheet { aspect-ratio: auto !important; }
  .sheet-col { flex-basis: 100% !important; padding: 14pt 20pt !important; }
}

/* Printing the resume: only the 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; }
  body:not(.resume-page) header nav, body:not(.resume-page) footer { display: none !important; }
}

/* 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(--bg); color: var(--ink); border: 1px solid var(--ink);
  font-family: Jost, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 500;
  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: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.palette-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.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; } }