/* Shared by all three draft variations: self-hosted fonts, reset, the staging
   draft bar, the light/dark toggle and the portrait/gallery photo fallbacks.
   Each variation sets its own colour tokens and type in its own style.css. */

@font-face { font-family: 'Cormorant Garamond Variable'; font-style: normal; font-display: swap; font-weight: 300 700; src: url(fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'Cormorant Garamond Variable'; font-style: italic; font-display: swap; font-weight: 300 700; src: url(fonts/cormorant-garamond-latin-wght-italic.woff2) format('woff2-variations'); }
@font-face { font-family: 'Raleway Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/raleway-latin-wght-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'Newsreader Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(fonts/newsreader-latin-wght-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'Newsreader Variable'; font-style: italic; font-display: swap; font-weight: 200 800; src: url(fonts/newsreader-latin-wght-italic.woff2) format('woff2-variations'); }
@font-face { font-family: 'Manrope Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(fonts/manrope-latin-wght-normal.woff2) format('woff2-variations'); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .6rem 1rem; border-radius: 6px; background: #111; color: #fff; text-decoration: none;
}
.skip-link:focus { top: 3rem; }

/* ---------- Staging draft bar (removed when a design is chosen) ---------- */
.draft-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem 1rem;
  padding: .45rem 1rem; background: #15191E; color: #C9CFD6;
  font: 500 12.5px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .01em;
}
.draft-bar strong { color: #fff; font-weight: 600; }
.draft-bar nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .35rem; }
.draft-bar a {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 .6rem; border-radius: 999px;
  color: #C9CFD6; text-decoration: none;
}
.draft-bar a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.draft-bar a[aria-current="page"] { color: #15191E; background: #E9EDF1; }

/* ---------- Light / dark toggle ---------- */
.theme-toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border-radius: 999px;
  border: 1px solid var(--toggle-border, currentColor); background: transparent; color: inherit;
  transition: background-color 150ms ease, border-color 150ms ease;
}
/* Hover only on real pointers: on phones a tapped button would otherwise keep its
   hover tint and look stuck. */
@media (hover: hover) { .theme-toggle:hover { background: var(--toggle-hover, rgba(127, 127, 127, .12)); } }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 20px; height: 20px; }
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }

/* ---------- Photos: monogram until a real headshot is dropped in ---------- */
.portrait { position: relative; overflow: hidden; isolation: isolate; background: var(--portrait-bg); }
.portrait::before {
  content: attr(data-initials); position: absolute; inset: 0; z-index: -1;
  display: grid; place-items: center;
  font-family: var(--portrait-font, Georgia, serif); font-weight: 500; letter-spacing: .06em;
  font-size: var(--portrait-size, 4.5rem); color: var(--portrait-ink);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

:focus-visible { outline: 2px solid var(--focus, #2563EB); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .draft-bar, .theme-toggle, .site-header nav { display: none !important; }
}