/* ==========================================================================
   XEL — SHARED STYLES — fard.io
   Variables · Reset · Cursor · Nav (with hamburger) · Footer · Utils
   Breakpoints: 375 · 480 · 768 · 1024 · 1280 · 1440
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Unbounded:wght@200;400;700;900&family=Fraunces:ital,opsz,wght@0,9..144,100;0,9..144,300;1,9..144,100;1,9..144,300;1,9..144,700&display=swap');

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   ACCESSIBILITY — skip link, focus indicators
   -------------------------------------------------------------------------- */

/* Skip to main content link — visually hidden until focused */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .6rem 1.2rem;
  background: var(--cobalt2);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: top .15s;
  white-space: nowrap;
}
.skip-link:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; }

/* Global focus-visible — keyboard users see a consistent indicator */
:focus-visible {
  outline: 2px solid var(--cobalt-pale);
  outline-offset: 2px;
}
/* Remove outline for mouse/pointer (modern browsers) */
:focus:not(:focus-visible) { outline: none; }

/* Nav links */
.nav-links a:focus-visible,
.nav-overlay a:focus-visible {
  outline: 2px solid var(--cobalt-pale);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Burger button */
.nav-burger:focus-visible {
  outline: 2px solid var(--cobalt-pale);
  outline-offset: 4px;
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* background */
    --bg:          #eaf0ff;
    --bg2:         #ccd8ff;

  /* ink */
    --ink:          #1c2235;
    --ink2:          #2e3d5c;
    --ink3:          #4a5a7a;

  /* cobalt — primary accent */
    --cobalt-deep:  #0a28a0;
    --cobalt:       #1840c8;
    --cobalt2:      #2050d0;
    --cobalt-pale:  #4878f0;

  /* brick — secondary accent */
    --brick-dark:  #3d1000;
    --brick:       #a02800;
    --brick2:      #c83000;
    --brick3:      #d84020;
    --brick-pale:  #fca070;

  /* status */
    --cobalt-lit:    #1840c8;

  /* borders */
    --border:      rgba(60,80,160,.32);
    --border-brick:    rgba(180,40,0,.28);

  /* typography */
  --font-disp:   'Unbounded', sans-serif;
  --font-mono:   'Space Mono', monospace;
  --font-ser:    'Fraunces', serif;

  /* spacing scale */
  --pad:         clamp(1rem, 3vw, 2.5rem);
}

/* grain canvas — shared across all pages via xel.css */
#noise { position: fixed; inset: 0 10% 0 0; pointer-events: none; z-index: 1; opacity: 0.10; }

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: hidden;
  /* micro-texture on type — subtle emboss against cobalt bg */
  text-shadow: 0 1px 0 rgba(255,255,255,.07), 0 -1px 0 rgba(0,0,20,.08);
}
/* native cursor preserved — ring overlay only (no cursor:none) */

/* --------------------------------------------------------------------------
   CUSTOM CURSOR — pointer devices only
   -------------------------------------------------------------------------- */

#cursor {
  display: none;
  position: fixed;
  width: 28px; height: 28px;
  border: 1.5px solid rgba(24,64,200,.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .12s, height .12s, border-color .15s, opacity .15s;
  will-change: transform;
  opacity: 0.7;
}
@media (pointer: fine) {
  #cursor { display: block; }
}
#cursor.big {
  width: 52px; height: 52px;
  border-color: var(--brick2);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   SCANLINES — decorative, pointer devices only (GPU cost)
   -------------------------------------------------------------------------- */

#scanlines {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 500;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(24,64,200,.04) 2px, rgba(24,64,200,.04) 4px
  );
}
@media (pointer: coarse) {
  /* disable on touch — saves compositing layer */
  #scanlines { display: none; }
}

/* --------------------------------------------------------------------------
   NAV
   Desktop: logo | links | status
   Tablet (≤1024): logo | links (condensed) | status hidden
   Mobile (≤768): logo | hamburger button → full-screen menu overlay
   -------------------------------------------------------------------------- */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  padding: 1.26rem var(--pad);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
  background: rgba(216,226,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-logo {
  font-family: var(--font-disp);
  font-weight: 900; font-size: 1.05rem;
  letter-spacing: .18em; color: var(--cobalt2);
  text-decoration: none; z-index: 1;
}
.nav-logo span {
  font-family: var(--font-mono);
  font-weight: 400; font-size: .65rem;
  letter-spacing: .1em; color: var(--ink3);
  margin-left: .7rem; vertical-align: middle;
}

/* Desktop links */
.nav-links {
  display: flex; gap: 2.5rem; list-style: none;
}
/* Photos tab hidden — re-enable when ready */
.nav-links a[href="/photos/"] { display: none; }
.nav-links li:has(a[href="/photos/"]) { display: none; }
.nav-links a {
  color: var(--ink3); text-decoration: none;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  transition: color .2s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--brick2);
  transition: width .25s;
}
.nav-links a:hover,
.nav-links a.active  { color: var(--ink2); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* Status dot — base rule, used in nav, footer, about, etc. */
.status-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cobalt-lit);
  flex-shrink: 0;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.2;} }

.nav-status {
  display: flex; align-items: center; gap: .5rem;
  font-size: .62rem; color: var(--ink3); letter-spacing: .1em;
}
.nav-status .status-dot { width: 5px; height: 5px; }

/* ── HAMBURGER BUTTON ── */
.nav-burger {
  display: none; /* hidden on desktop */
  background: none; border: none;
  cursor: pointer; padding: .4rem;
  flex-direction: column; justify-content: center;
  gap: 5px; z-index: 301;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--cobalt);
  transition: transform .3s, opacity .2s, width .3s;
  transform-origin: center;
}
/* Animate to × when open */
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE MENU OVERLAY ── */
.nav-overlay {
  display: none; /* JS adds .open to show */
  position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 299;
  background: rgba(210,220,255,.99);
  flex-direction: column; align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-overlay.open { display: flex; }
.nav-overlay ul {
  list-style: none;
  display: flex; flex-direction: column;
  align-items: center;
  gap: clamp(.65rem, 2.8vh, 2rem);
  text-align: center;
  padding: clamp(.9rem, 3.5vh, 2.5rem) 1.5rem clamp(.9rem, 3vh, 2rem);
  width: 100%;
  box-sizing: border-box;
}
.nav-overlay a {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(.82rem, 4.5vw, 2.2rem);
  letter-spacing: .08em; color: var(--ink2);
  text-decoration: none; text-transform: uppercase;
  transition: color .2s;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  /* prevent any single link from being taller than necessary */
  line-height: 1.1;
}
.nav-overlay a::after {
  content: ''; width: 0; height: 1px;
  background: var(--brick2); transition: width .3s;
}
.nav-overlay a:hover       { color: var(--ink); }
.nav-overlay a:hover::after{ width: 100%; }
.nav-overlay a.active      { color: var(--cobalt2); }
/* Status dot in overlay */
.nav-overlay-status {
  flex-shrink: 0;
  margin-bottom: clamp(.6rem, 2vh, 1.4rem);
  display: flex; align-items: center; gap: .6rem;
  font-size: .68rem; color: var(--ink3); letter-spacing: .14em;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

footer {
  padding: 2.5rem var(--pad);
  border-top: none;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  position: relative; z-index: 2;
  background: #0e1830;  /* deep cobalt-navy */
}

.footer-left {
  font-family: var(--font-disp); font-weight: 900;
  font-size: .9rem; letter-spacing: .22em;
  color: var(--cobalt-pale);
}

.footer-right {
  font-family: var(--font-mono);
  font-size: .6rem; color: rgba(180,200,255,.55);
  letter-spacing: .1em; text-align: center;
}

.footer-links {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem;
  justify-content: center;
}

.footer-links a {
  color: rgba(180,200,255,.55); text-decoration: none; font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; transition: color .2s;
  white-space: nowrap;
}

.footer-links a:hover { color: rgba(180,200,255,1); }

.footer-credit {
  font-family: var(--font-mono);
  font-size: .52rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(180,200,255,.25);
  width: 100%;
  text-align: center;
  align-self: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(24,50,120,.30);
  margin-top: .5rem;
}

.footer-status {
  display: flex; align-items: center; gap: .5rem;
  font-size: .62rem; color: rgba(180,200,255,.55);
  letter-spacing: .1em; white-space: nowrap;
}

.footer-status .status-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cobalt-pale);
  opacity: .8; flex-shrink: 0;
}




/* --------------------------------------------------------------------------
   UTILS — shared section header, g-dot
   -------------------------------------------------------------------------- */

.g-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brick2); opacity: .85; align-self: center;
}
.section-header {
  display: flex; align-items: baseline; gap: 1.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px dotted var(--border); padding-bottom: 1rem;
}
.section-num { font-size: .6rem; color: var(--ink3); letter-spacing: .12em; }
.section-title {
  font-family: var(--font-disp); font-weight: 700;
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink2);
}
.section-line { flex: 1; height: 1px; background: var(--border); }


/* --------------------------------------------------------------------------
   RESPONSIVE — NAV BREAKPOINTS
   -------------------------------------------------------------------------- */

/* Condensed nav at tablet width */
@media (max-width: 1024px) {
  .nav-links { gap: 1.8rem; }
  .nav-status { display: none; } /* reclaim space — status moves to overlay */
}

/* Hamburger replaces links below 768px */
@media (max-width: 768px) {
  nav { padding: 0.99rem 1.25rem; }
  .nav-links  { display: none; }  /* desktop links hidden */
  .nav-burger { display: flex; }  /* burger visible */
}

/* Extra-small phones */
@media (max-width: 390px) {
  .nav-logo span { display: none; } /* hide "fard.io" sub-label — too tight */
}

/* --------------------------------------------------------------------------
   RESPONSIVE — FOOTER
   -------------------------------------------------------------------------- */


@media (max-width: 600px) {
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .footer-right  { text-align: left; }
  .footer-links  { justify-content: flex-start; }
  .footer-status { font-size: .56rem; }
}


/* --------------------------------------------------------------------------
   REDUCED MOTION — honour the OS/browser preference
   Disables all CSS animations and transitions site-wide.
   Canvas / JS animations are handled separately in xel.js / viewer.js.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Kill all transitions and animations globally */
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }

  /* Status dot pulse — remove entirely so it stays solid */
  .nav-status .status-dot,
  .footer-status .status-dot { animation: none !important; }

  /* Ticker marquee — freeze it */
  .ticker-inner { animation: none !important; }

  /* Glitch layers on hero name — hide the pseudo-elements */
  .hero-name::before,
  .hero-name::after,
  .hero-name-wrap::after { display: none !important; }
}