/* ==========================================================================
   Misideal — shared site styles
   Reset, tokens, nav, footer, window chrome, cursor label, mobile menu.
   Loaded on every page. Page-specific styles live in their own file.
   ========================================================================== */

:root{
  --sans:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:14px;
  --rad:18px;
  --bone:#F0EEE9;
  --dim:rgba(240,238,233,.56);
  --faint:rgba(240,238,233,.16);
  --bg:#141414;
  --panel:#0A0A0A;
}

*{box-sizing:border-box;margin:0;padding:0;}
/* scrollbar-gutter:stable — always reserves the scrollbar's width, even
   when the page is short enough not to need one (e.g. the Work grid
   filtered down to Magu's 2 projects). Without it, the scrollbar
   appearing/disappearing shifts all the centered fixed/auto-margin
   content sideways by its width. */
html{scrollbar-gutter:stable;}
html,body{height:100%;}
body{
  background:var(--bg);color:var(--bone);font-family:var(--mono);font-weight:400;
  font-size:11px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,video{display:block;max-width:100%;}
button{font:inherit;color:inherit;}
:focus-visible{outline:1.5px solid var(--bone);outline-offset:3px;}

/* ===== NAV (pill) =====
   One centered pill containing the logo, the links and the email, all
   separated by "|". Used two ways:
   - .site-header.in-window: absolutely positioned inside a .win frame
     (Home, Project pages) — the frame itself already sits var(--pad) in
     from the viewport, so the header is flush with the frame's own edges.
   - .site-header (default): fixed straight to the viewport, for pages with
     no window frame (Work page) — offset by the same var(--pad) so the
     nav lands in the exact same on-screen spot either way. */
.site-header{
  position:fixed;top:var(--pad);left:var(--pad);right:var(--pad);z-index:300;
  display:flex;align-items:flex-start;justify-content:center;
  padding:26px 30px;pointer-events:none;
}
.site-header.in-window{position:absolute;top:0;left:0;right:0;z-index:90;}
.site-header > *{pointer-events:auto;}

.site-nav{display:flex;align-items:center;gap:14px;padding:13px 24px;border-radius:999px;
  background:rgba(255,255,255,.07);backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);
  font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
/* Just above the 680px hamburger cutoff, "Get in touch: hello@misideal.com"
   was wrapping onto two uneven lines. Tightening size/tracking slightly in
   this narrow band buys enough room to keep it on one line. */
@media(max-width:900px) and (min-width:681px){
  .site-nav{gap:10px;font-size:10.5px;letter-spacing:.08em;}
}
.site-nav a{transition:opacity .2s;}
.site-nav a:hover{opacity:.55;}
/* "Get in touch:" stays full-strength white; only the address itself is
   dimmed like the rest of the nav's secondary text. */
.site-nav .em .addr{opacity:.6;}
.site-nav a[aria-current=page]{opacity:.5;}
.site-nav .sep{opacity:.3;}
.site-logo img{height:22px;display:block;}

.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.07);backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);
  align-items:center;justify-content:center;cursor:pointer;}
.menu-btn svg{width:16px;height:16px;}

@media(max-width:680px){
  .site-header{justify-content:space-between;}
  /* The logo stays out of the hamburger menu, visible and clickable in
     the collapsed header at all times — only the links/separators/email
     collapse away, leaving the logo alone in its pill. */
  .site-nav .sep,
  .site-nav a[data-nav],
  .site-nav .em{display:none;}
  .menu-btn{display:flex;}
}

.mobile-menu{position:fixed;inset:0;z-index:500;background:rgba(10,10,10,.98);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s ease;}
/* visibility:hidden (not just opacity/pointer-events) so the close button
   and links inside are removed from the tab order while closed — without
   it they stayed keyboard-focusable at every viewport size, including
   desktop, even though the hamburger that opens them is never shown there */
body.menu-open .mobile-menu{opacity:1;visibility:visible;pointer-events:auto;}
.menu-close{position:fixed;top:calc(var(--pad) + 26px);right:calc(var(--pad) + 30px);
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.menu-close svg{width:16px;height:16px;}
@media(max-width:420px){.menu-close{top:calc(var(--pad) + 20px);right:calc(var(--pad) + 20px);}}
.mobile-menu a{font-family:var(--sans);font-weight:700;
  text-transform:uppercase;
  font-size:clamp(24px,7vw,36px);letter-spacing:-.02em;}
.mobile-menu a[aria-current=page]{opacity:.5;}
.mobile-menu .mm-logo{margin-bottom:6px;}
.mobile-menu .mm-logo img{height:26px;}
.mobile-menu .em{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;margin-top:8px;}
.mobile-menu .em .addr{opacity:.6;}
body.menu-open{overflow:hidden;}

/* ===== FOOTER (botbar) =====
   Same two contexts as the header. */
.site-footer{
  position:fixed;bottom:var(--pad);left:var(--pad);right:var(--pad);z-index:300;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 30px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);pointer-events:none;
}
.site-footer.in-window{position:absolute;bottom:0;left:0;right:0;z-index:90;}
.site-footer > *{pointer-events:auto;}
.site-footer a:hover{color:var(--bone);}
.site-footer .cr-full{display:inline;}
.site-footer .cr-short{display:none;}
@media(max-width:700px){.site-footer{padding:18px 20px;}}
@media(max-width:480px){
  .site-footer{font-size:8.5px;gap:10px;}
  .site-footer .cr-full{display:none;}
  .site-footer .cr-short{display:inline;}
  .site-footer,.site-footer a{white-space:nowrap;}
}

/* ===== WINDOW FRAME =====
   Holds the looping/hero video pages (Home, Project). */
.win{position:fixed;top:var(--pad);left:var(--pad);right:var(--pad);
  bottom:var(--pad);border-radius:var(--rad);overflow:hidden;background:var(--panel);}
.win .scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.win .scroll::-webkit-scrollbar{display:none;}

/* ===== CURSOR LABEL =====
   top/left:0 pins the fixed-position anchor to the viewport origin — without
   it, "auto" insets fall back to the element's static position in document
   flow (wherever it lands after all the preceding page content), and the
   JS translate(cx,cy) then offsets from THAT instead of the viewport corner.
   Barely visible on short pages, wildly wrong on a long scrolling one. */
.cursorlbl{position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  transform:translate(-50%,-50%);text-align:center;
  max-width:min(88vw,900px);
  opacity:0;transition:opacity .25s ease;}
.cursorlbl.on{opacity:1;}
.cursorlbl .eb{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  opacity:.7;margin-bottom:9px;}
.cursorlbl .tt{font-family:var(--sans);font-weight:700;
  font-size:clamp(22px,3.4vw,48px);
  letter-spacing:-.015em;text-transform:uppercase;line-height:1;
  text-shadow:0 2px 44px rgba(0,0,0,.7);}
.cursorlbl .cta{margin-top:11px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.75;}
.cursorlbl .cta:empty{display:none;}
.cdot{position:fixed;top:0;left:0;z-index:201;width:7px;height:7px;border-radius:50%;
  background:var(--bone);pointer-events:none;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .25s;}
.cdot.on{opacity:.9;}
@media(hover:none){.cursorlbl,.cdot{display:none!important;}}

/* ===== MEDIA GRADE (dark overlay for legibility over video/image) ===== */
.grade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.05) 38%,rgba(0,0,0,.55) 100%);}

.visually-hidden{position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ===== NOSCRIPT FALLBACK =====
   Most pages render entirely via JS, so without it the .win frame (if
   present) sits empty underneath — this sits on top of that and explains
   what happened instead of leaving a silent blank page. */
.noscript-msg{position:fixed;inset:0;z-index:1000;display:flex;
  align-items:center;justify-content:center;text-align:center;
  padding:40px;background:var(--bg);color:var(--bone);
  font-family:var(--mono);font-size:14px;line-height:1.6;}
.noscript-msg a{text-decoration:underline;text-underline-offset:3px;}