/* ==========================================================================
   Punta Brava Foundation - shared site chrome
   Single source of truth for design tokens, base type, and the nav/menu shell.
   Every page loads this: index.html and every page under /events/.
   Page-specific rules stay in that page's own <style> block.
   Do not copy rules out of here into a page. If a page needs the chrome, it
   links this file.
   ========================================================================== */

  html[data-theme="light"]{
    color-scheme:light;
    --ground:#eceae5; --rail-top:#f3f2ee; --panel:#ffffff; --panel-2:#f6f5f1; --panel-3:#efeee9;
    --hair:#e5e4df; --hair-2:#cfcec8;
    --text:#1c1b19; --text-2:#43413c; --text-3:#706e69; --text-4:#9a988f;
    --blue:#497585; --blue-deep:#3c6373; --warn:#9a6f1f;
    --shadow:0 16px 44px rgba(28,27,25,.16);
    --scrim:rgba(28,27,25,.32);
  }
  html[data-theme="dark"]{
    color-scheme:dark;
    --ground:#0b0b0a; --rail-top:#0d0d0c; --panel:#131312; --panel-2:#1a1a18; --panel-3:#201f1d;
    --hair:#242421; --hair-2:#302f2a;
    --text:#ece9e3; --text-2:#b6b3aa; --text-3:#86837b; --text-4:#5b5953;
    --blue:#5f93a6; --blue-deep:#497585; --warn:#c9a24b;
    --shadow:0 18px 50px rgba(0,0,0,.55);
    --scrim:rgba(0,0,0,.55);
  }
  :root{
    --font:'EB Garamond',Georgia,serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --radius:10px; --radius-sm:7px;
    --pad:22px; --nav-h:62px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;background:var(--ground)}
  body{font-family:var(--font);background:var(--ground);color:var(--text);font-size:17px;line-height:1.55;
       -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s ease,color .35s ease}
  ::selection{background:rgba(73,117,133,.22)}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  img{display:block;max-width:100%}
  :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
  .skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--text);padding:12px 18px;z-index:200;
        font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .skip:focus{left:12px;top:12px}
  .wrap{max-width:960px;margin:0 auto;padding-left:max(var(--pad),env(safe-area-inset-left));
        padding-right:max(var(--pad),env(safe-area-inset-right))}
  .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--blue)}
  .eyebrow.q{color:var(--text-4)}
  .rule{width:52px;height:1px;background:var(--blue);margin-top:20px;opacity:.9}
  html[data-theme="light"] .only-dark{display:none}
  html[data-theme="dark"] .only-light{display:none}

  /* ================= NAV ================= */
  .nav{position:fixed;top:0;left:0;right:0;z-index:60;height:calc(var(--nav-h) + env(safe-area-inset-top));
       padding-top:env(safe-area-inset-top);
       display:flex;align-items:center;justify-content:space-between;
       padding-left:max(var(--pad),env(safe-area-inset-left));
       padding-right:max(calc(var(--pad) - 10px),env(safe-area-inset-right));
       background:var(--ground);
       background:color-mix(in srgb, var(--ground) 92%, transparent);
       backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
       border-bottom:1px solid var(--hair);transition:background .35s ease,border-color .35s ease}
  .lockup{display:flex;align-items:center;gap:12px}
  .lockup img{width:30px;height:auto}
  .lockup .lk-t{display:flex;flex-direction:column;line-height:1}
  .lockup .lk-1{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}
  .lockup .lk-2{font-family:var(--mono);font-size:8px;letter-spacing:.42em;text-transform:uppercase;color:var(--text-3);margin-top:4px}
  .nav-right{display:flex;align-items:center;gap:2px}
  .nav-links{display:none}
  .nav-give{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
            color:var(--blue);padding:14px 10px}
  .theme-btn{background:none;border:none;color:var(--text-3);width:44px;height:44px;
             display:flex;align-items:center;justify-content:center;transition:color .2s}
  .theme-btn:hover{color:var(--text)}
  .theme-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round}
  .menu-btn{background:none;border:none;color:var(--text);width:44px;height:44px;position:relative;transition:color .2s}
  .menu-btn:hover{color:var(--blue)}
  .menu-btn svg,.menu-btn .mi-w{position:absolute;top:50%;left:50%;
                transition:opacity .24s ease,transform .3s ease}
  .menu-btn svg{width:20px;height:20px;margin:-10px 0 0 -10px;
                stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  .menu-btn .mi-w{width:26px;height:8px;margin:-4px 0 0 -13px;background:currentColor;
                -webkit-mask:url("data:image/png;base64,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") center / contain no-repeat;
                mask:url("data:image/png;base64,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") center / contain no-repeat}
  .menu-btn:hover:not(.open) .mi-w{transform:translateX(2px)}
  .menu-btn .mi-x{opacity:0;transform:translateX(7px) rotate(-45deg)}
  .menu-btn.open .mi-w{opacity:0;transform:translateX(-8px)}
  .menu-btn.open .mi-x{opacity:1;transform:none}
  @media(min-width:960px){
    .nav-links{display:flex;gap:22px;align-items:center;margin-right:14px}
    .nav-links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
                 color:var(--text-3);padding:10px 2px;transition:color .2s;border-bottom:1px solid transparent}
    .nav-links a:hover{color:var(--text)}
    .nav-links a[aria-current="page"]{color:var(--text);border-bottom-color:var(--blue)}
    .nav-links a.give{color:var(--blue)}
    .menu-btn{display:none}
    .nav-give{display:none}
    /* Nested nav groups (PT IA 2026-08-13): Foundation > Team/Financials,
       Events > event pages. Hover/focus-within reveal; keyboard-reachable. */
    .nav-group{position:relative;display:inline-flex;align-items:center}
    .nav-group > a::after{content:"";display:inline-block;width:4px;height:4px;margin-left:7px;
      border-right:1px solid currentColor;border-bottom:1px solid currentColor;
      transform:rotate(45deg) translateY(-1px);opacity:.5}
    .nav-sub{position:absolute;top:100%;left:-14px;min-width:206px;
      background:var(--panel);border:1px solid var(--hair-2);border-radius:var(--radius-sm);
      box-shadow:var(--shadow);padding:6px 0;
      opacity:0;visibility:hidden;transform:translateY(-4px);
      transition:opacity .18s ease,transform .18s ease,visibility .18s;
      display:flex;flex-direction:column}
    .nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
    .nav-sub a{padding:9px 16px;border-bottom:none;white-space:nowrap;letter-spacing:.14em}
    .nav-sub a:hover{color:var(--text);background:var(--panel-2)}
  }
  /* Side-menu nested items.

     Was: every child permanently visible with a short rule in front of it, which
     read as a dash-prefixed flat list rather than a hierarchy, and gave a member
     no way to put anything away. Now a disclosure: the parent stays a link, a
     chevron opens the group, and the children are out of the tab order until it
     does. The chevron is the same rotated square the desktop dropdown uses, so
     the two surfaces say "there is more here" the same way. */
  .menu .m-group{display:block}
  .menu .m-row{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--hair)}
  .menu .m-row > a{flex:1 1 auto;border-bottom:none}

  .menu .m-tog{flex:0 0 auto;width:48px;min-height:48px;display:flex;align-items:center;
               justify-content:center;background:none;border:0;padding:0;margin:0;
               color:var(--text-3);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .menu .m-tog:hover{color:var(--text)}
  .menu .m-tog:focus-visible{outline:1px solid var(--blue);outline-offset:-4px;border-radius:var(--radius-sm)}
  .m-chev{display:inline-block;width:6px;height:6px;
          border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
          transform:rotate(45deg) translateY(-2px);opacity:.55;
          transition:transform .28s cubic-bezier(.32,.72,.28,1),opacity .2s}
  .menu .m-group.is-open .m-chev{transform:rotate(-135deg) translateY(0);opacity:.9}

  /* grid-template-rows animates to content height without hard-coding one, and
     visibility keeps the collapsed links out of the tab order. hidden is not used
     on purpose: an author display rule beats it, which has bitten this site twice. */
  .menu .m-sub-wrap{display:grid;grid-template-rows:0fr;visibility:hidden;
                    transition:grid-template-rows .3s cubic-bezier(.32,.72,.28,1),visibility 0s linear .3s}
  .menu .m-sub-in{overflow:hidden;min-height:0}
  .menu .m-group.is-open .m-sub-wrap{grid-template-rows:1fr;visibility:visible;
                    transition:grid-template-rows .3s cubic-bezier(.32,.72,.28,1),visibility 0s}

  /* Tighter than a top-level row on purpose: equal heights made the three rows
     read as three peers rather than a parent and its children. */
  .menu a.m-sub{padding:13px 2px 13px 20px;min-height:44px;font-size:16.5px;color:var(--text-2)}
  .menu a.m-sub:hover{color:var(--text)}
  .menu a.m-sub:first-child{border-top:none}
  .menu .m-group.is-open .m-sub-in > a:last-child{border-bottom:1px solid var(--hair)}

  @media (prefers-reduced-motion: reduce) {
    .menu .m-sub-wrap,.menu .m-group.is-open .m-sub-wrap,.m-chev{transition:none}
  }

  /* side panel menu */
  .scrim{position:fixed;inset:0;z-index:54;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s ease}
  .scrim.open{opacity:1;pointer-events:auto}
  /* Closed with visibility, not transform alone: a transformed-off-screen panel
     stays in the tab order, so keyboard users met six hidden links before the
     first real control on the page. Visibility flips after the slide so the
     close animation still plays. */
  .menu{position:fixed;top:0;right:0;bottom:0;z-index:56;width:min(300px,82vw);
        background:var(--ground);border-left:1px solid var(--hair);
        transform:translateX(102%);visibility:hidden;
        transition:transform .32s cubic-bezier(.32,.72,.28,1),visibility 0s linear .32s;
        display:flex;flex-direction:column;
        padding:calc(var(--nav-h) + env(safe-area-inset-top) + 8px) 24px calc(24px + env(safe-area-inset-bottom))}
  .menu.open{transform:translateX(0);visibility:visible;
             transition:transform .32s cubic-bezier(.32,.72,.28,1),visibility 0s}
  .menu a{display:block;padding:17px 2px;border-bottom:1px solid var(--hair);color:var(--text);font-size:19px;min-height:48px}
  .menu a[aria-current="page"]{color:var(--blue)}
  .menu .m-foot{margin-top:auto;padding-top:22px;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
                text-transform:uppercase;color:var(--text-4);line-height:2}

/* The hidden attribute is only display:none in the user agent sheet, so ANY
   author rule that sets display beats it and the element stays on screen while
   the code believes it is gone. That shipped twice: once on the event page and
   again on the give page, where a fee offer for cards stayed visible on bank
   transfers showing a stale figure. Global, because scoping the fix to one page
   is what let it happen a second time. */
[hidden] { display: none !important; }