@import url("../fonts/pretendard.css");

:root {
  --bg: #fbfbfa;
  --text: #0e0e0e;
  --muted: #a3a39f;
  --line: #e4e4e1;
  --surface: #ececea;
  --gutter: 10px;
  --font: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs: 15px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.12;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--text); color: var(--bg); padding: 8px 12px;
}
.skip:focus { top: 10px; }

/* top bar, 12-column grid so columns line up with the home layout */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: repeat(12, 1fr);
  padding: var(--gutter);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.top-brand {
  grid-column: 1 / span 2; justify-self: start;
  display: block; line-height: 0;
}
.top-brand img { display: block; height: clamp(20px, 2.6vw, 30px); width: auto; }
.top-nav { grid-column: 3 / span 3; justify-self: start; }
.top-time { grid-column: 11; font-variant-numeric: tabular-nums; }
.top-contact { grid-column: 12; justify-self: end; }
.top-nav a[aria-current="page"], .top-nav a.is-on { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.top a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

@media (max-width: 760px) {
  .top { display: flex; justify-content: space-between; gap: 16px; }
  .top-time { display: none; }
}

/* ---------- orchestrated hamburger -> island menu ----------
   shared by both pages (js/chrome.js's initMenu wires it up on index.html
   AND project.html) so there's always a way back to the rest of the
   site, even from the very bottom of a long project page, without
   relying only on the fixed .top bar. additive to the plain text nav
   ("Work, About") just after it in the header -- not a replacement.
   modelled on GreenSock's "orchestrated easeReverse" demo
   (codepen.io/GreenSock/pen/JoRMPLg), recoloured from the pen's gray
   (#BBBAA6) to plain black/white to match this site.

   the trick: .menu-island's CLOSED width is exactly the icon button's
   own size, so while closed the button simply IS the whole island
   (nothing else is visible, just hidden offscreen-by-opacity inside the
   same box). opening it animates the island wider to reveal the symbol
   image (left), nav links (middle) and that same button -- now morphed
   into an X -- sitting at the far right, purely because flexbox's
   space-between keeps it pinned to the island's trailing edge. nothing
   ever has to translate sideways to "move to the right". js/chrome.js
   (initMenu) measures the island's natural content width on open and
   tweens to that, with a different ease opening vs. closing on every
   piece (island, bars, backdrop, symbol, links) -- the "easeReverse"
   part of the reference. */
.menu-island {
  position: fixed; left: 50%; top: var(--gutter);
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
/* closed, .menu-symbol and .menu-links are width:0 (not just
   opacity:0) and carry no margin -- so the ONLY thing with real
   layout width inside the padding is .menu-trigger, which is why the
   island's closed box shrink-wraps to exactly fit padding+icon and
   the icon sits centred. opacity alone isn't enough: an invisible
   element still pushes real siblings aside at its full layout width,
   which is what quietly ate the whole icon off-box the first time
   this was wired up (caught via a Playwright screenshot showing an
   empty circle, then confirmed in computed styles). js/chrome.js
   (initMenu) tweens width + margin-right together with opacity when
   opening/closing each one. */
.menu-symbol {
  flex: none;
  width: 0; height: 14px; margin-right: 0;
  object-fit: contain;
  opacity: 0;
}
.menu-links {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  white-space: nowrap;
  width: 0; margin-right: 0; overflow: hidden;
  opacity: 0;
}
.menu-links a { font-size: var(--fs); }
.menu-links a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.menu-trigger {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 10px;
}
.menu-trigger-icon { display: block; overflow: visible; }
.menu-bar {
  stroke: var(--text); stroke-width: 1.4px; stroke-linecap: round;
}

/* dims + blurs everything underneath while the island is open, sitting
   outside .top (not inside it) so it layers over the rest of the header
   (brand, text nav, contact) too. backdrop-filter is the right tool
   here because blurring the content BEHIND an overlay is exactly what
   this element is for -- the open island itself sits in its own
   sibling element, above this one, so its own real text/photo is never
   the thing being blurred. */
.menu-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(14, 14, 14, 0.06);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
}
.menu-backdrop.is-on { pointer-events: auto; }

/* on narrow screens the plain text nav ("Work, About") sits centre-ish
   too (flex space-between with brand/nav/contact), right where the
   fixed-centred island would land -- confirmed overlapping via a
   Playwright screenshot/rect check (nav at x 163-244 vs. the island
   centred on the 390px viewport). dropping the island to its own row
   below .top's measured height (42px) clears it instead of guessing a
   shared position. */
@media (max-width: 760px) {
  .menu-island { top: calc(var(--gutter) + 40px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
[hidden] { display: none !important; }