/* ============================================================
   George Brothers — site.css
   Shared chrome + resets for all pages. Page-specific styles
   (art, keyframes, layout) stay in each page's own <style> block.
   ============================================================ */

/* ===== self-hosted fonts (latin subsets; CJK glyphs fall through to system fonts) ===== */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-400.v1.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-italic.v1.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/space-grotesk-var.v1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400.v1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500.v1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-italic.v1.woff2') format('woff2')}

html{color-scheme:dark}
body{margin:0;background:#171009;font-family:'Space Grotesk',sans-serif}
/* clip (not hidden): kills stray horizontal overflow on mobile without
   creating a scroll container, so position:sticky keeps working */
html,body{overflow-x:clip}
/* Inline display styles (style="display:flex" etc.) beat the UA's
   [hidden]{display:none} rule — enforce it so hidden always wins. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}

/* Button reset — converted <a onClick> -> <button> keeps looking identical */
button{font:inherit;color:inherit;background:none;border:none;padding:0;text-align:inherit;cursor:pointer}

/* Focus visibility */
:focus-visible{outline:2px solid #efa85c;outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* Skip link — visually hidden until focused */
.skip-link{position:absolute;left:16px;top:-52px;z-index:100;background:#f3ead9;color:#171009;font:500 13px 'Space Grotesk',sans-serif;padding:10px 18px;border-radius:0 0 10px 10px;transition:top .2s}
.skip-link:focus{top:0}

/* ===== shared keyframes ===== */
@keyframes pdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes fadeup{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}

/* ============================================================
   Canonical nav (.gb-nav) — donor: Work.dc.html
   ============================================================ */
.gb-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 64px;position:relative;z-index:3}

.gb-wordmark{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.18em;border:1px solid rgba(243,234,217,.45);padding:5px 10px;border-radius:3px;cursor:pointer}

.nav-links{display:flex;gap:10px;font:500 12px 'Space Grotesk',sans-serif;letter-spacing:.22em;color:rgba(243,234,217,.72)}
.nav-links a{padding:8px 18px;border:1px solid transparent;border-radius:999px;transition:color .3s,border-color .3s;cursor:pointer}
.nav-links a[aria-current="page"]{border-color:rgba(243,234,217,.55);color:#f3ead9;cursor:default}

.gb-nav-right{display:flex;align-items:center;gap:14px}

.nav-burger{display:none;place-items:center;gap:4px;width:44px;height:44px;border:1px solid rgba(243,234,217,.4);border-radius:10px;cursor:pointer;grid-template-rows:repeat(3,2px);align-content:center}
.nav-burger span{width:16px;height:2px;background:#f3ead9;border-radius:2px;display:block}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .gb-nav,.gb-footer{padding-left:clamp(18px,4.5vw,64px);padding-right:clamp(18px,4.5vw,64px)}
}

/* ============================================================
   Mobile menu (#mobile-menu) — full-screen overlay
   JS toggles: remove [hidden] then add .open (next frame) to open;
   remove .open then set [hidden] after the fade to close.
   ============================================================ */
#mobile-menu{position:fixed;inset:0;z-index:80;background:rgba(23,16,9,.97);flex-direction:column;align-items:center;justify-content:center;gap:26px;opacity:0;pointer-events:none;transition:opacity .3s ease}
#mobile-menu[hidden]{display:none}
#mobile-menu:not([hidden]){display:flex}
#mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu-close{position:absolute;top:16px;right:16px;padding:10px;line-height:1;font:400 26px 'Space Grotesk',sans-serif;color:rgba(243,234,217,.7);cursor:pointer;transition:color .3s}
.mobile-menu-close:hover,.mobile-menu-close:focus-visible{color:#f3ead9}
#mobile-menu a{font:400 34px 'Instrument Serif',serif;color:#f3ead9}
#mobile-menu a[aria-current="page"]{color:#efa85c}

/* ============================================================
   Canonical footer (.gb-footer) — donor: Connect/Now shape
   ============================================================ */
.gb-footer{border-top:1px solid rgba(243,234,217,.14);padding:34px 64px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.gb-copyright{font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:rgba(243,234,217,.6)}
.gb-footer-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* inline-flex + min-height lifts these pills from 39px to the 44px touch
   minimum without moving the label inside them. */
.gb-footer-links a{display:inline-flex;align-items:center;min-height:44px;font:500 13px 'Space Grotesk',sans-serif;color:rgba(243,234,217,.75);border:1px solid rgba(243,234,217,.3);border-radius:999px;padding:0 20px;cursor:pointer;transition:border-color .3s,color .3s,box-shadow .3s}

/* ============================================================
   Shared hover classes (style-hover conversion targets)
   Payloads kept verbatim (incl. !important) per the source
   runtime's createPseudoSheet semantics — see spec §2.3.
   ============================================================ */
.hv-nav:hover,.hv-nav:focus-visible{color:#f3ead9 !important;border-color:rgba(243,234,217,.55) !important}
.hv-pill:hover,.hv-pill:focus-visible{border-color:#efa85c !important;color:#efa85c !important}
.hv-pill-glow:hover,.hv-pill-glow:focus-visible{box-shadow:0 0 18px rgba(239,168,92,.38) !important}
.hv-cta:hover,.hv-cta:focus-visible{background:#efa85c !important}

/* ============================================================
   Résumé gate dialog — shared chrome, injected by js/site.js.
   Two paths: instant public download, or email-me the full copy.
   ============================================================ */
#rg-dialog{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;border:none;padding:20px;box-sizing:border-box;background:transparent;display:none;align-items:center;justify-content:center;z-index:200}
#rg-dialog[open]{display:flex}
#rg-dialog::backdrop{background:rgba(10,7,18,.72);backdrop-filter:blur(3px)}
#rg-dialog .rg-panel{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow-y:auto;background:#171009;border:1px solid rgba(243,234,217,.16);border-radius:18px;padding:30px 28px 28px;box-shadow:0 24px 70px rgba(0,0,0,.55);animation:rg-rise .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes rg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#rg-dialog .rg-close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(243,234,217,.2);border-radius:999px;color:rgba(243,234,217,.7);cursor:pointer;font-size:16px;line-height:1;transition:border-color .3s,color .3s}
#rg-dialog .rg-close:hover,#rg-dialog .rg-close:focus-visible{border-color:#efa85c;color:#efa85c}
#rg-dialog .rg-eyebrow{font:400 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;color:rgba(243,234,217,.55);text-transform:uppercase}
#rg-dialog .rg-title{margin:11px 0 0;font:400 27px/1.15 'Instrument Serif',serif;color:#f3ead9}
#rg-dialog .rg-lead{margin:9px 0 0;font:400 13.5px/1.6 'Space Grotesk',sans-serif;color:rgba(243,234,217,.72)}
#rg-dialog .rg-dl{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;background:#f3ead9;color:#171009;font:500 14px 'Space Grotesk',sans-serif;padding:14px 22px;border:none;border-radius:999px;cursor:pointer;transition:background .3s}
#rg-dialog .rg-dl:hover,#rg-dialog .rg-dl:focus-visible{background:#efa85c}
#rg-dialog .rg-note{margin:9px 0 0;font:400 11px/1.5 'IBM Plex Mono',monospace;color:rgba(243,234,217,.5);text-align:center}
#rg-dialog .rg-or{display:flex;align-items:center;gap:12px;margin:22px 0 18px;font:400 10.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:rgba(243,234,217,.4)}
#rg-dialog .rg-or::before,#rg-dialog .rg-or::after{content:"";flex:1;height:1px;background:rgba(243,234,217,.14)}
#rg-dialog .rg-fh{font:400 15px/1.4 'Space Grotesk',sans-serif;color:#f3ead9;margin:0 0 4px}
#rg-dialog .rg-fsub{font:400 12.5px/1.55 'Space Grotesk',sans-serif;color:rgba(243,234,217,.62);margin:0 0 15px}
#rg-dialog label{display:block;font:400 10px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,234,217,.55);margin:0 0 6px}
#rg-dialog input{width:100%;box-sizing:border-box;background:rgba(243,234,217,.05);border:1px solid rgba(243,234,217,.18);border-radius:10px;padding:11px 13px;font:400 14px 'Space Grotesk',sans-serif;color:#f3ead9;margin-bottom:13px;transition:border-color .3s}
#rg-dialog input:focus{outline:none;border-color:#efa85c}
#rg-dialog input::placeholder{color:rgba(243,234,217,.32)}
#rg-dialog input[aria-invalid="true"]{border-color:#e0674d}
#rg-dialog .rg-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#rg-dialog .rg-submit{width:100%;background:transparent;color:#f3ead9;font:500 14px 'Space Grotesk',sans-serif;padding:13px 22px;border:1px solid rgba(243,234,217,.34);border-radius:999px;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
#rg-dialog .rg-submit:hover,#rg-dialog .rg-submit:focus-visible{border-color:#efa85c;color:#efa85c}
#rg-dialog .rg-submit:disabled{opacity:.55;cursor:default}
#rg-dialog .rg-err{margin:11px 0 0;font:400 12.5px/1.5 'Space Grotesk',sans-serif;color:#e8917a}
#rg-dialog .rg-sent{text-align:center;padding:8px 0 2px}
#rg-dialog .rg-sent .rg-check{width:46px;height:46px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(239,168,92,.14);color:#efa85c}
#rg-dialog .rg-sent h3{margin:0;font:400 22px 'Instrument Serif',serif;color:#f3ead9}
#rg-dialog .rg-sent p{margin:8px 0 0;font:400 13px/1.6 'Space Grotesk',sans-serif;color:rgba(243,234,217,.7)}

/* ============================================================
   Reduced motion — duration-clamp (not animation:none) so
   fill-mode end states still apply.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}
}