/* Iris Company — shared header, menu & CTA styles.
   Edit here once; every page picks it up. */

/* Anchor-jump clearance. When a mobile-menu (or mega-menu) link points at
   a same-page section like #music-videos, the fixed nav would otherwise
   cover the section heading on landing. scroll-margin-top on [id] pushes
   the browser's "landed at top" point down by the nav's height — scoped
   per-target rather than via html { scroll-padding-top }, so it can't
   interact with the mega menu's hover/positioning behavior. */
[id]{scroll-margin-top:5rem}

:root{--soot:#0B0908;--char:#191210;--ember:#E8A75C;--flame:#C96F35;--bone:#F0E7D8;--ash:#8A7E70;--serif:'Cormorant Garamond', Georgia, serif;--sans:'Inter', -apple-system, sans-serif;--mono:'IBM Plex Mono', monospace}
  nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
    padding:1.2rem 2.5rem;background:transparent;
    transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
    border-bottom:1px solid transparent}
  nav.scrolled{
    background:rgba(11,9,8,.55);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom-color:rgba(240,231,216,.08)}
  .wordmark{font-family:var(--serif);font-weight:400;font-size:1.35rem;letter-spacing:.42em;text-transform:uppercase}
  .wordmark img{height:1.68rem;width:auto;display:block}
  .nav-links{display:flex;gap:2.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
  .nav-links a{opacity:.75;transition:opacity .3s}
  .nav-links a:hover,.nav-links a.on{opacity:1}
  /* works dropdown */
  .nav-drop{position:relative}
  .nav-sub{
    position:absolute;top:100%;left:50%;z-index:110;
    transform:translateX(-50%) translateY(4px);
    color:var(--bone);
    background:rgba(11,9,8,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(240,231,216,.16);border-radius:6px;
    box-shadow:0 14px 36px rgba(0,0,0,.22);
    padding:1rem 1.3rem;display:grid;gap:.7rem;min-width:11.5rem;white-space:nowrap;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease,transform .25s ease,
      color .35s ease,background-color .35s ease,border-color .35s ease,box-shadow .35s ease;
  }
  /* Light hero state. The index page toggles nav.over-light / body.nav-on-light
     while the fixed header overlaps its white hero. */
  nav.over-light .nav-sub,
  body.nav-on-light .nav-sub{
    color:#0B0908;
    background:rgba(255,255,255,.96);
    border-color:rgba(11,9,8,.16);
    box-shadow:0 14px 36px rgba(11,9,8,.14);
  }
  nav.over-light .nav-sub a,
  body.nav-on-light .nav-sub a{color:#0B0908 !important}
  /* Explicit dark state and the default used by every dark-background page. */
  nav.over-dark .nav-sub,
  body.nav-on-dark .nav-sub{
    color:var(--bone);
    background:rgba(11,9,8,.94);
    border-color:rgba(240,231,216,.16);
    box-shadow:0 14px 36px rgba(0,0,0,.22);
  }
  nav.over-dark .nav-sub a,
  body.nav-on-dark .nav-sub a{color:var(--bone) !important}
  .nav-sub::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
  .nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(10px);
  }
  .nav-sub a{display:block}
  /* mobile menu */
  .nav-burger{display:none;background:rgba(11,9,8,.35);border:1px solid rgba(240,231,216,.3);border-radius:99px;
    color:var(--bone);font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
    padding:.55em 1.15em;cursor:pointer;transition:border-color .3s,color .3s}
  .nav-burger:hover{border-color:var(--ember);color:var(--ember)}
  @media (max-width:860px){.nav-burger{display:inline-block}}
  .mnav{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
    background:rgba(11,9,8,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
  .mnav.open{opacity:1;visibility:visible}
  .mnav ul{list-style:none;text-align:center;display:grid;gap:1.5rem;padding:0}
  .mnav a{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,6vw,2.1rem);letter-spacing:.14em;transition:color .3s,letter-spacing .3s}
  .mnav a:hover{color:var(--ember);letter-spacing:.2em}
  .mnav-close{position:absolute;top:1.4rem;right:1.6rem;background:none;border:0;cursor:pointer;
    font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);transition:color .3s}
  .mnav-close:hover{color:var(--ember)}
  @media (prefers-reduced-motion: no-preference){
    .mnav .glitch-once::before{animation:glitch-l .5s steps(1) 1 forwards}
    .mnav .glitch-once::after{animation:glitch-rr .5s steps(1) 1 forwards}
  }
  .btn-row{display:flex;gap:1rem;flex-wrap:wrap}
  .btn{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;padding:.95em 2em;border-radius:99px;transition:all .3s;display:inline-block}
  .btn-fill{background:var(--ember);color:var(--soot);font-weight:500}
  .btn-fill:hover{background:var(--bone)}
  .btn-ghost{border:1px solid rgba(240,231,216,.35)}
  .btn-ghost:hover{border-color:var(--ember);color:var(--ember)}
  /* text glitch for CTAs - single burst on hover, words only */
  .glitch-btn{position:relative}
  .glitch-btn::before,.glitch-btn::after{content:attr(data-text);position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;font:inherit;letter-spacing:inherit;text-transform:inherit;
    background:transparent;border:0;opacity:0;pointer-events:none}
  .glitch-btn::before{color:var(--flame)}
  .glitch-btn::after{color:var(--bone)}
  @media (prefers-reduced-motion: no-preference){
    .glitch-btn:hover::before{animation:glitch-l .5s steps(1) 1 forwards}
    .glitch-btn:hover::after{animation:glitch-rr .5s steps(1) 1 forwards}
  }
  @keyframes glitch-l{
    0%  {opacity:.9;clip-path:inset(0 0 68% 0);   transform:translate(-8px,-1px)}
    20% {opacity:.9;clip-path:inset(40% 0 38% 0); transform:translate(-5px,1px) skewX(-10deg)}
    40% {opacity:.9;clip-path:inset(74% 0 4% 0);  transform:translate(-10px,2px)}
    60% {opacity:.9;clip-path:inset(14% 0 66% 0); transform:translate(-4px,-2px) scaleX(1.05)}
    80% {opacity:.9;clip-path:inset(52% 0 28% 0); transform:translate(-7px,1px)}
    100%{opacity:0; clip-path:inset(30% 0 54% 0); transform:translate(0,0)}
  }
  @keyframes glitch-rr{
    0%  {opacity:.9;clip-path:inset(58% 0 16% 0); transform:translate(8px,1px)}
    20% {opacity:.9;clip-path:inset(8% 0 74% 0);  transform:translate(5px,-1px) skewX(8deg)}
    40% {opacity:.9;clip-path:inset(44% 0 34% 0); transform:translate(10px,2px)}
    60% {opacity:.9;clip-path:inset(78% 0 0 0);   transform:translate(4px,2px) scaleX(1.06)}
    80% {opacity:.9;clip-path:inset(22% 0 60% 0); transform:translate(7px,-2px)}
    100%{opacity:0; clip-path:inset(48% 0 32% 0); transform:translate(0,0)}
  }

  /* Autofill hardening — Chrome (and other WebKit browsers) drop a pale
     background over pre-filled inputs, breaking the dark theme. Force the
     soot fill and bone text so autofilled inputs match the intended look
     of the contact form fields and the newsletter footer input. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 60px var(--soot) inset !important;
    -webkit-text-fill-color: var(--bone) !important;
    caret-color: var(--bone);
    transition: background-color 9999s ease-in-out 0s;
  }

  /* Newsletter footer form — match the contact form focus behaviour:
     kill the browser's blue outline and change the parent's underline to
     ember when the input inside is focused. :focus-within is needed here
     because the border-bottom lives on .news-form (the flex parent), not
     on the input itself. */
  .news-form { transition: border-bottom-color .3s; }
  .news-form input:focus,
  .news-form button:focus { outline: none; }
  .news-form:focus-within { border-bottom-color: var(--ember); }

  /* ================================================================
     PERFORMANCE & FILM MEGA-MENU
     A wider, multi-column dropdown replacing the small .nav-sub panel
     for the Performance & Film nav item. Follows the site's dark-glass,
     ember-accent visual language.
     ================================================================ */
  .nav-mega{
    position:absolute;top:100%;left:50%;z-index:110;
    transform:translateX(-50%) translateY(4px);
    color:var(--bone);
    background:rgba(11,9,8,.96);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(240,231,216,.16);border-radius:6px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    padding:2rem 2.4rem;
    width:min(94vw,940px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s ease,visibility .28s ease,transform .28s ease;
  }
  /* Same 12px pre-panel hover bridge as .nav-sub so the pointer doesn't
     fall into a gap between the trigger and the panel. */
  .nav-mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
  .nav-drop:hover .nav-mega,.nav-drop:focus-within .nav-mega{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(10px);
  }
  /* 3-col grid; top row has section headings (Performance spans 2, Film spans 1) */
  .nav-mega-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:1.2rem 2.6rem;
  }
  .nav-mega-h{
    font-family:var(--serif);font-weight:300;
    font-size:1.6rem;letter-spacing:.05em;
    color:var(--bone);margin:0 0 .8rem;
    padding-bottom:.7rem;
    border-bottom:1px solid rgba(240,231,216,.14);
  }
  .nav-mega-h.perf{grid-column:1 / span 2}
  .nav-mega-h.film{grid-column:3 / span 1}
  .nav-mega-sub{
    font-family:var(--mono);font-size:.85rem;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--ember);margin:1.2rem 0 1rem;
  }
  .nav-mega-col:first-of-type .nav-mega-sub:first-of-type,
  .nav-mega-col:nth-of-type(2) .nav-mega-sub:first-of-type,
  .nav-mega-col:nth-of-type(3) .nav-mega-sub:first-of-type{margin-top:0}
  .nav-mega a{
    display:block;font-family:var(--mono);font-weight:400;
    font-size:.68rem;letter-spacing:.18em;line-height:1.5;
    color:var(--bone);opacity:.75;padding:.5em 0;
    transition:opacity .25s ease,color .25s ease;
    white-space:normal;   /* long titles wrap gracefully */
  }
  .nav-mega a:hover{opacity:1;color:var(--ember)}
  /* When a subsection heading is itself a link (Dance Films, Music Videos,
     Reels), reassert the heading styling — otherwise .nav-mega a's size and
     spacing wins by specificity. Also add subtle hover. */
  .nav-mega a.nav-mega-sub{
    font-size:.85rem;font-weight:500;letter-spacing:.22em;
    color:var(--ember);opacity:1;padding:0;line-height:1.4;
    transition:opacity .25s ease;
  }
  .nav-mega a.nav-mega-sub:hover{opacity:.7;color:var(--ember)}
  /* Below 1000px, drop mega-menu display and let mobile nav handle it */
  @media (max-width:1000px){
    .nav-mega{display:none}
  }