/* The site nav, shared by every public page: Rogue Creativez, then Studio, Portfolio (a menu of the three
   portfolios), Shop, Blog and Start a project. One file so the bar is the same everywhere; nav.js writes the markup. */
:root {
  --nv-ink: #ece6da; --nv-ink-2: #a39d92; --nv-ink-3: #6b665d;
  --nv-bg: #0f0f0e; --nv-bg-2: #171716; --nv-bg-3: #1f1f1d;
  --nv-line: rgba(236, 230, 218, 0.14); --nv-line-2: rgba(236, 230, 218, 0.4);
  --nv-accent: #e0613a; --nv-ok: #7fbf7a;
  --nv-sans: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --nv-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --nv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.snav { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 55; display: flex; justify-content: space-between; align-items: center;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px));
  color: var(--nv-ink); pointer-events: none; font-family: var(--nv-sans); transition: transform 0.35s var(--nv-ease); }
@media (min-width: 900px) { .snav { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }
.snav a, .snav button { pointer-events: auto; color: inherit; text-decoration: none; }
.snav.is-away { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
/* the plate: a dark veil behind the bar, so pictures that pass under it never print through the words. No edge and no line:
   it fades out below the bar so the bar stays seamless with the page. It fades in once the page has moved off its top, and
   stays on for pages whose pictures move without the page scrolling. */
.snav-plate { position: fixed; top: 0; left: 0; right: 0; z-index: 54; height: 72px; pointer-events: none; background: rgba(15, 15, 14, 0.84);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
  opacity: 0; transition: opacity 0.3s, transform 0.35s var(--nv-ease); }
.snav-plate.is-on { opacity: 1; }
.snav-plate.is-away { transform: translateY(-100%); }
/* the mark is the brand logo on one line, cut from the brand PNG: the hanging queen, ROGUE, CREATIVEZ (assets/brand/rc-logo-line.png) */
.snav-mark { display: flex; align-items: center; }
.snav-mark img { display: block; height: 19px; width: auto; max-width: none; }
.snav-r { display: flex; align-items: center; gap: 36px; }
.snav-links { display: flex; align-items: center; gap: 30px; font-family: var(--nv-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.snav-links a, .snav-pbtn { opacity: 0.62; transition: opacity 0.2s; position: relative; }
.snav-links a:hover, .snav-pbtn:hover, .snav-pbtn[aria-expanded="true"], .snav-links a[aria-current], .snav-pbtn.is-here { opacity: 1; }
.snav-links a[aria-current]::after, .snav-pbtn.is-here::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; }
.snav-pbtn, .snav-mbtn { all: unset; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--nv-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.snav-pbtn { opacity: 0.62; transition: opacity 0.2s; position: relative; }   /* all: unset above clears it; the underline needs it */
.snav-pbtn svg { width: 12px; height: 12px; transition: transform 0.25s var(--nv-ease); }
.snav-pbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.snav-pbtn:focus-visible, .snav-mbtn:focus-visible, .snav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.snav-mbtn { display: none; padding: 9px 4px; }
.snav-talk { font-family: var(--nv-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; padding: 9px 14px; white-space: nowrap; }

/* the dropdown and the phone sheet sit outside the blended bar so they keep their own colours */
.snav-menu { position: fixed; z-index: 56; width: 340px; padding: 6px; background: var(--nv-bg-2); border: 1px solid var(--nv-line-2); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  font-family: var(--nv-sans); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.25s var(--nv-ease), visibility 0s 0.25s; }
.snav-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s, transform 0.25s var(--nv-ease), visibility 0s; }
.snav-menu a { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; padding: 12px; color: var(--nv-ink); text-decoration: none; }
.snav-menu a + a { border-top: 1px solid var(--nv-line); }
.snav-menu a i { grid-row: span 2; font-style: normal; font-family: var(--nv-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--nv-accent); padding-top: 3px; }
.snav-menu a b { font-weight: 500; font-size: 15px; color: var(--nv-ink); }
.snav-menu a small { font-family: var(--nv-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-ink-3); }
.snav-menu a:hover, .snav-menu a:focus-visible, .snav-menu a[aria-current] { background: var(--nv-bg-3); outline: none; }
.snav-menu a:hover b, .snav-menu a:focus-visible b, .snav-menu a[aria-current] b { color: var(--nv-accent); }
.snav-sheet { position: fixed; inset: 0; z-index: 54; background: var(--nv-bg); color: var(--nv-ink); display: flex; flex-direction: column; gap: 22px;
  padding: calc(96px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
  font-family: var(--nv-sans); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; overflow-y: auto; }
.snav-sheet[hidden] { display: none; }
.snav-sheet a { color: inherit; text-decoration: none; }
.snav-sheet a[aria-current] { color: var(--nv-accent); }
.snav-sheet .snav-port { display: flex; flex-direction: column; gap: 12px; }
.snav-sheet .snav-port a { font-family: var(--nv-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-ink-2); display: flex; gap: 12px; padding-left: 4px; }
.snav-sheet .snav-port a[aria-current] { color: var(--nv-accent); }
.snav-sheet .snav-port a i { font-style: normal; color: var(--nv-accent); }
.snav-sheet .snav-stalk { margin-top: auto; display: flex; align-items: center; gap: 10px; font-family: var(--nv-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nv-accent); }
.snav-sheet .snav-stalk svg { width: 14px; height: 14px; }
@media (max-width: 899px) { .snav-links { display: none; } .snav-mbtn { display: inline-flex; } .snav-r { gap: 14px; } .snav-talk { padding: 9px 10px; }
  .snav-mark img { height: clamp(9px, calc((100vw - 245px) / 9.7), 19px); } }   /* on a phone the logo shrinks to clear Menu and Start a project */
@media (prefers-reduced-motion: reduce) { .snav, .snav-menu, .snav-plate { transition: none; } }