/* ============================================================
   DAREDEVIL CHICKEN — shared.css
   Loaded by: index.html, about.html, photos.html, video.html,
   collaborations.html
   (magic-banana-hour.html is intentionally standalone — its own
   fonts + design system.)

   Load order matters: link this BEFORE each page's own <style>
   block so page-specific rules can override shared defaults.
   ============================================================ */

/* ===== background pattern (navy geometric / scallop) ===== */
html {
  --s: 104px;
  --c1: #053355;
  --c2: #0b3c5a;
  --g1:/calc(2*var(--s)) calc(2*var(--s)) radial-gradient(at 100% 0,var(--c2) 17.5%,#0000 18%);
  --g2:/calc(2*var(--s)) calc(2*var(--s)) radial-gradient(at 0 100%,var(--c2) 17.5%,#0000 18%);
  --_s:0 calc(var(--s)/2)/var(--s) var(--s);
  background:
    calc(var(--s)/ 2) var(--s) var(--g1),
    calc(var(--s)/-2) 0        var(--g1),
    calc(var(--s)/-2) var(--s) var(--g2),
    calc(var(--s)/ 2) 0        var(--g2),
    radial-gradient(at 100% 0,var(--c1) 35%,#0000 35.5%) var(--_s),
    radial-gradient(at 0 100%,var(--c1) 35%,#0000 35.5%) var(--_s),
    repeating-conic-gradient(from 45deg,var(--c1) 0 25%,var(--c2) 0 50%) 0 0/var(--s) var(--s);
}
html{ background-color:var(--c1); background-attachment:fixed; min-height:100%; }
@media (max-width:600px){ html{ --s:64px } }

/* ===== design tokens (superset — every page can use any of these) ===== */
:root{
  --cream:#FAF5ED; --cream-2:#F2E9DB;
  --ink:#0C2A41; --ink-soft:#4F6170; --line:#E5DBD1;
  --coral:#F25C4E; --coral-light:#FF8475; --coral-deep:#C2402F;
  --navy-fg:#EAF1F7;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gap:14px;
  --radius:18px;
}

/* ===== base ===== */
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh; background:transparent; color:var(--navy-fg);
  font-family:"Figtree",system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}

/* ===== nav — SHARED BLOCK (same markup/CSS/JS on every page) ===== */
.nav{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px clamp(22px,6vw,120px) 14px; backdrop-filter:blur(2px);}
/* brand is a two-row column: wordmark on top, tagline centered beneath.
   (column layout guarantees centering on all devices — the old
   flex-wrap + width:100% trick drifted right on iPad/Safari) */
.brand{display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:"Fraunces",serif; font-weight:900; line-height:1;
  font-size:clamp(21px,2.6vw,31px); letter-spacing:-.01em; color:var(--cream); text-decoration:none; text-shadow:0 2px 16px rgba(0,0,0,.4);}
.brand-name{display:flex; align-items:baseline; gap:.16em; white-space:nowrap;}
.brand .brace{color:var(--coral); font-weight:600}
.brand-tag{font-family:'Figtree',sans-serif; font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral-light); opacity:.9; text-align:center; text-shadow:none;}
@media (max-width:640px){ .brand-tag{display:none} }
.nav-links{display:flex; align-items:center; gap:clamp(12px,1.9vw,26px)}
.nav-links a{font-size:13px; letter-spacing:.02em; text-decoration:none; color:var(--cream); opacity:.85; white-space:nowrap}
.nav-links a:hover{opacity:1; color:var(--coral-light)}
.nav-links a.active{opacity:1; color:var(--coral-light)}
.nav-links a.active::after{content:""; display:block; height:2px; border-radius:2px; margin-top:3px; background:var(--coral)}
.nav-links a.cta{opacity:1; color:#fff; background:var(--coral); padding:8px 16px; border-radius:999px; font-weight:700; box-shadow:0 4px 16px rgba(242,92,78,.42);}
.nav-links a.cta:hover{background:var(--coral-light); color:#3a0f0a}
@media (max-width:640px){.nav-links a:not(.cta){display:none}}

/* mobile hamburger */
.burger{display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:9px; background:none; border:0; cursor:pointer; border-radius:10px;}
.burger span{display:block; height:2.5px; border-radius:2px; background:var(--cream);
  transition:transform .3s var(--ease), opacity .2s ease;}
.burger:focus-visible{outline:2px solid var(--coral-light); outline-offset:2px;}
.nav.menu-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav.menu-open .burger span:nth-child(2){opacity:0;}
.nav.menu-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

.mobile-menu{position:absolute; top:calc(100% + 4px); left:16px; right:16px; z-index:30;
  background:var(--cream); color:var(--ink); border-radius:14px;
  box-shadow:0 16px 40px rgba(3,20,34,.45);
  display:grid; overflow:hidden;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);}
.nav.menu-open .mobile-menu{opacity:1; transform:none; pointer-events:auto;}
.mobile-menu a{display:block; padding:14px 20px; text-decoration:none; color:var(--ink);
  font-weight:700; font-size:15px; border-bottom:1px solid var(--line);}
.mobile-menu a.active{color:var(--coral-deep);}
.mobile-menu a:last-child{border-bottom:0; color:var(--coral-deep);}
.mobile-menu a:active{background:var(--cream-2);}
@media (max-width:640px){ .burger{display:flex} }
/* ===== end shared nav block ===== */

/* ============================================================
   COMPACT FOOTER — shared across all pages
   Self-contained palette: do NOT reference page variables here —
   a footer var can't be defined from a var of the same name
   (cyclic reference = the whole declaration goes invalid).
   Default margin-top is 28px (about/photos/video); index and
   collaborations override to 0 in their page styles.
   ============================================================ */
.dcf-footer{
  --dcf-coral: #F25C4E;
  --dcf-coral-light: #FF8475;
  --dcf-cream: #FAF5ED;
  --dcf-ink: #0C2A41;

  background: var(--dcf-ink);
  color: var(--dcf-cream);
  font-family: 'Figtree', sans-serif;
  margin-top: 28px;
}

/* marquee bulb string — the "curtain call" divider */
.dcf-bulbs{
  height: 14px;
  background-image: radial-gradient(circle, var(--dcf-coral-light) 0 3px, transparent 4px);
  background-size: 28px 14px;
  background-repeat: repeat-x;
  background-position: center;
  animation: dcf-glow 3.4s ease-in-out infinite;
}
@keyframes dcf-glow{
  0%, 100% { opacity: .55; filter: brightness(1); }
  50%      { opacity: 1;   filter: brightness(1.3); }
}

.dcf-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px clamp(22px, 5vw, 64px) 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  flex-wrap: wrap;
  font-size: 13.5px;
}

.dcf-wordmark{
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.dcf-brace{ color: var(--dcf-coral); }

.dcf-nav{ display: flex; gap: 8px 18px; flex-wrap: wrap; }
.dcf-nav a{
  color: var(--dcf-cream);
  text-decoration: none;
  opacity: .82;
  white-space: nowrap;
  transition: opacity .15s ease, color .15s ease;
}
.dcf-nav a:hover{ color: var(--dcf-coral-light); opacity: 1; }

.dcf-meta{ display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.dcf-email{
  color: var(--dcf-cream);
  text-decoration: none;
  opacity: .9;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.dcf-email:hover{ color: var(--dcf-coral-light); border-color: var(--dcf-coral-light); }

.dcf-socials{ display: inline-flex; align-items: center; gap: 12px; }
.dcf-socials a{
  color: var(--dcf-cream);
  opacity: .75;
  display: inline-flex;
  transition: color .15s ease, opacity .15s ease, transform .15s ease;
}
.dcf-socials svg{ width: 17px; height: 17px; }
.dcf-socials a:hover{ color: var(--dcf-coral-light); opacity: 1; transform: translateY(-2px); }

.dcf-copy{ opacity: .5; white-space: nowrap; }

/* keyboard focus visibility */
.dcf-footer a:focus-visible{
  outline: 2px solid var(--dcf-coral-light);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 720px){
  .dcf-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 18px 22px 20px;
  }
}
/* ===== end shared footer block ===== */

/* ===== accessibility: reduced motion (site-wide) ===== */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .dcf-bulbs{ animation:none; opacity:.85; }
}