/* Shared header for every page except Home (Home keeps its own centered-
   wordmark nav over the Wall, styled inline). Markup: src/components/Nav.astro.

   Layout: wordmark centered with real breathing room above it, links
   centered on their own row underneath (desktop), MENU on the right
   (mobile). The wordmark PNG carries transparent padding (~15% above,
   ~30% below the ink), so the negative margins on .proto-logo-img cancel
   it and the nav padding is the actual visible space.

   Legibility: a soft black gradient behind the header (no hard bar) so the
   links read over any photo scrolling underneath.

   Stacking: above the project pages' fixed overlays (.of-* layers sit at
   150–155) so the header is there on every page; the mobile menu overlay
   sits just under it so MENU/CLOSE stays on top. The header itself lets
   clicks and wheel events through everywhere except its links. */
/* --container: the one content width for every inner page (headers,
   galleries, strips, text). Full-bleed moments (the Manifiesto opening
   shot, Home's Wall) opt out on purpose. */
:root{--nav-h:96px;--container:1240px;--gutter:clamp(1.2rem,3vw,2.6rem);}
@media (min-width:768px){:root{--nav-h:116px;}}

.proto-nav{position:fixed;top:0;left:0;right:0;z-index:170;display:flex;flex-direction:column;align-items:center;padding:1.1rem 1.1rem 0.9rem;background:transparent;pointer-events:none;}
.proto-nav::before{content:"";position:absolute;inset:0 0 -2.5rem 0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.6) 45%,rgba(0,0,0,0.25) 75%,rgba(0,0,0,0) 100%);}
.proto-nav a,.proto-nav button{pointer-events:auto;}

.proto-logo{display:inline-flex;align-items:center;}
.proto-logo,.proto-menu a{text-shadow:0 1px 3px rgba(0,0,0,0.75),0 2px 10px rgba(0,0,0,0.55),0 5px 20px rgba(0,0,0,0.35);}
/* The image's transparent padding hangs ~30px below the logo link's own box
   (that's what the negative margin cancels) — straight over the links row.
   pointer-events:none on the image so only the link's real box (the ink)
   is clickable; otherwise the top half of every nav link clicked through
   to the logo and went Home. */
.proto-logo-img{display:block;width:118px;height:auto;margin:-18px 0 -27px;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.95)) drop-shadow(0 2px 5px rgba(0,0,0,0.6));}

.proto-menu{display:none;}
.proto-menu a{font-size:0.75rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:#f5f2ed;text-decoration:none;opacity:0.82;}
.proto-menu a:hover,.proto-menu a[aria-current="page"]{opacity:1;}
.proto-menu a:focus-visible,.proto-logo:focus-visible{outline:2px solid rgba(255,255,255,0.9);outline-offset:3px;}

/* ===== mobile — MENU/CLOSE toggle + full-screen link overlay (<768px) ===== */
.proto-menu-toggle{position:absolute;right:1.1rem;top:2.35rem;transform:translateY(-50%);display:inline-block;background:none;border:none;padding:0;font-family:'DM Sans',sans-serif;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#f5f2ed;opacity:0.72;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,0.55),0 2px 10px rgba(0,0,0,0.35);}
.proto-menu-toggle:hover{opacity:1;}
.proto-menu-toggle:focus-visible{outline:2px solid rgba(255,255,255,0.9);outline-offset:3px;opacity:1;}

.mobile-nav-overlay{position:fixed;inset:0;z-index:165;background:#000;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .25s ease;}
.mobile-nav-overlay.is-open{opacity:1;visibility:visible;}
.mobile-nav-links{display:flex;flex-direction:column;gap:1.4rem;padding:0 1.6rem;width:100%;}
.mobile-nav-links a{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,10vw,2.6rem);letter-spacing:0.03em;color:#f5f2ed;text-decoration:none;opacity:0.85;}
.mobile-nav-links a:hover,.mobile-nav-links a:focus-visible{opacity:1;}
.mobile-nav-links a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:0.3em;}
.mobile-nav-links a:focus-visible{outline:2px solid rgba(255,255,255,0.9);outline-offset:4px;}
@media (prefers-reduced-motion:reduce){.mobile-nav-overlay{transition:none;}}

/* ===== shared page shell + page header (every inner page) =====
   Content column, then: small kicker, one huge word, optional index line.
   Same title on Projects, Film & Photo, Tattoo, Exhibitions, About. */
.g-page{padding-top:var(--nav-h);}
.g-wrap{width:min(100% - 2 * var(--gutter),var(--container));margin-left:auto;margin-right:auto;}

/* page header: kicker, one huge word, an optional index line */
.g-head{padding-top:1.4rem;padding-bottom:2.6rem;}
@media (min-width:900px){.g-head{padding-top:2rem;padding-bottom:3.4rem;}}
.g-kicker{font-size:0.62rem;letter-spacing:0.24em;text-transform:uppercase;color:#8f96a8;}
.g-title{margin-top:0.7rem;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(3rem,11vw,8.5rem);letter-spacing:-0.035em;line-height:0.86;}
.g-index{display:flex;flex-wrap:wrap;gap:0.5rem 1.6rem;margin-top:1.6rem;}
.g-index a{font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;text-decoration:none;opacity:0.75;transition:opacity .2s ease;}
.g-index a:hover{opacity:1;}
.g-index sup{font-size:0.55rem;margin-left:0.3em;color:#8f96a8;letter-spacing:0.05em;}

/* text link + page footer (footer carries the site-wide "Contacto" link) */
.g-link{display:inline-flex;align-items:center;gap:0.5em;font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(245,242,237,0.3);padding-bottom:0.25rem;transition:border-color .2s ease;}
.g-link:hover{border-color:#f5f2ed;}
.g-link:focus-visible,.g-index a:focus-visible{outline:2px solid rgba(255,255,255,0.9);outline-offset:3px;}

.g-foot{padding-top:4rem;padding-bottom:3rem;display:flex;justify-content:space-between;gap:1rem;font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:#8f96a8;}
.g-foot-links{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:baseline;}

@media (min-width:768px){
  .proto-logo-img{width:135px;margin:-20px 0 -31px;}
  .proto-menu{display:flex;justify-content:center;gap:1.5rem;margin-top:0.9rem;}
  .proto-menu-toggle{display:none;}
  .mobile-nav-overlay{display:none;}
}