/* ============================================================
   eddieespriella.com — shared site theme
     1. Brand tokens (palette + semantic) and dark-mode overrides
     2. Base resets, type defaults, View Transitions
     3. Brand custom cursor
     4. Masthead (.masthead, .ms-*, theme toggle, hamburger,
        mobile-menu, responsive breakpoints)
     5. Sticky audit pill
     6. prefers-reduced-motion safety net

   Every standard page links this file. Page-specific styles
   (work cards, contact form, CV grid, stack list, essay typo,
   404 layout) stay inline on each page. The audit page (.mast
   instead of .masthead, React shell) is intentionally isolated.
   ============================================================ */

:root {
  --princeton-orange: #ff8700;
  --yale-blue:        #053c5e;
  --stormy-teal:      #145b5b;
  --oxblood:          #991414;
  --graphite:         #333333;
  --silver:           #bcb5b6;
  --cream:            #faf8f3;

  --bg:        var(--cream);
  --ink:       var(--graphite);
  --ink-deep:  #0f0f0f;
  --muted:     #5f5f5f;
  --rule:      rgba(51, 51, 51, 0.14);
  --rule-2:    rgba(51, 51, 51, 0.24);
  --accent:    var(--princeton-orange);
  --navy:      var(--yale-blue);
  --teal:      var(--stormy-teal);
  --red:       var(--oxblood);
  --anchor:    var(--yale-blue);

  --grid-max:  1440px;
  --pad:       clamp(20px, 3.2vw, 44px);
  --header-h:  56px;
}
:root[data-theme="dark"] {
  --bg:        var(--yale-blue);
  --ink:       var(--cream);
  --ink-deep:  var(--cream);
  --muted:     var(--silver);
  --rule:      rgba(250, 248, 243, 0.14);
  --rule-2:    rgba(250, 248, 243, 0.24);
  --anchor:    var(--cream);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:        var(--yale-blue);
    --ink:       var(--cream);
    --ink-deep:  var(--cream);
    --muted:     var(--silver);
    --rule:      rgba(250, 248, 243, 0.14);
    --rule-2:    rgba(250, 248, 243, 0.24);
    --anchor:    var(--cream);
  }
}

@view-transition { navigation: auto; }

/* Base resets and shared body defaults. Theme tokens above drive
   color and background; pages override font-family/size as needed.
   These were stripped from per-page inline styles during the theme
   extraction (#18) and need to live here so the body element actually
   picks up the dark-mode --bg value, not just the masthead. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--ink);
  transition: background-color .25s ease, color .25s ease;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: #ffffff; }
a { color: inherit; text-decoration: none; }

@media (hover: hover) {
  html { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23ff8700'/%3E%3C/svg%3E") 10 10, auto; }
  a, button, [role='button'], summary, label, input[type='submit'], input[type='button'] {
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='3.5' fill='%23ff8700'/%3E%3Ccircle cx='14' cy='14' r='10' fill='none' stroke='%23ff8700' stroke-width='1.5' opacity='0.5'/%3E%3C/svg%3E") 14 14, pointer;
  }
}

/* Masthead */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.masthead.is-hidden { transform: translateY(-100%); }

.ms-left { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--anchor); display: flex; align-items: center; gap: 14px; }
.ms-left-link { display: inline-flex; align-items: center; gap: 14px; color: inherit; transition: color .25s; }
.ms-left-link:hover { color: var(--accent); }
.ms-left img.mark { width: 22px; height: 22px; display: block; transition: filter .25s; }
:root[data-theme="dark"] .ms-left img.mark { filter: invert(1) brightness(1.4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ms-left img.mark { filter: invert(1) brightness(1.4); }
}
.ms-left .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--oxblood); display: inline-block; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } }

.ms-center { font-family: "Instrument Serif", serif; font-size: 17px; letter-spacing: -.01em; color: var(--ink-deep); }
.ms-center a { color: inherit; transition: color .25s; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.ms-center a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.ms-right { display: flex; justify-content: flex-end; gap: 26px; align-items: center; font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ms-right a { position: relative; padding-bottom: 2px; color: var(--ink); }
.ms-right a.is-current { color: var(--accent); }
.ms-right a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.ms-right a:hover::after, .ms-right a.is-current::after { transform: scaleX(1); transform-origin: left; }

.theme-toggle { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); cursor: pointer; border-radius: 50%; transition: border-color .25s, color .25s; flex-shrink: 0; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 14px; height: 14px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; }
}

.hamburger { display: none; position: relative; width: 28px; height: 28px; background: transparent; border: 0; cursor: pointer; padding: 0; flex-shrink: 0; }
.hamburger span { position: absolute; left: 4px; right: 4px; height: 2px; background: var(--ink); border-radius: 2px; transition: top .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), opacity .2s ease, background .25s; }
.hamburger span:nth-child(1) { top: 8px; }
.hamburger span:nth-child(2) { top: 13px; }
.hamburger span:nth-child(3) { top: 18px; }
.hamburger:hover span { background: var(--accent); }
.hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 13px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 13px; transform: rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 49; background: var(--bg); transform: translateY(-100%); transition: transform .45s cubic-bezier(.22,1,.36,1); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mobile-menu.is-open { transform: translateY(0); pointer-events: auto; }
.mobile-menu-nav { display: flex; flex-direction: column; gap: 14px; padding: 80px var(--pad) 40px; }
.mobile-menu-nav a { font-family: "Instrument Serif", serif; font-size: clamp(36px, 9vw, 56px); line-height: 1.05; letter-spacing: -.018em; color: var(--ink-deep); opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), color .25s; }
.mobile-menu.is-open .mobile-menu-nav a { opacity: 1; transform: translateY(0); }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(1) { transition-delay: .12s; }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(2) { transition-delay: .18s; }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(3) { transition-delay: .24s; }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(4) { transition-delay: .30s; }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(5) { transition-delay: .36s; }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(6) { transition-delay: .42s; }
.mobile-menu-nav a:hover, .mobile-menu-nav a:focus-visible { color: var(--accent); font-style: italic; outline: none; }
.mobile-menu-nav a.is-current { color: var(--accent); font-style: italic; }

@media (max-width: 820px) {
  .masthead { grid-template-columns: 1fr auto; }
  .ms-center { display: none; }
  .ms-right { gap: 14px; }
  .ms-right > a { display: none; }
  .hamburger { display: inline-flex; }
}
@media (min-width: 821px) { .mobile-menu { display: none; } }

/* Sticky audit pill: keep the audit a tap away on every subpage. */
.audit-pill {
  position: fixed; bottom: 24px; right: 24px; z-index: 40;
  padding: 12px 20px;
  background: var(--accent); color: var(--ink-deep);
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .3);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .3s, box-shadow .3s;
  opacity: 0;
  animation: pillIn .6s cubic-bezier(.22,1,.36,1) 1.5s forwards;
}
.audit-pill:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -10px rgba(0, 0, 0, .4); }
.audit-pill .arr { transition: transform .3s; }
.audit-pill:hover .arr { transform: translateX(3px); }
@keyframes pillIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) { .audit-pill { bottom: 16px; right: 16px; padding: 10px 16px; font-size: 10px; } }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .audit-pill { animation: none; opacity: 1; }
  .ms-left .dot, .hero-meta .v .live-dot { animation: none; }
  .theme-toggle, .hamburger span, .mobile-menu, .mobile-menu-nav a { transition: none; }
}