/* itsori.com — shared site nav (home + project pages).
   Figma: component "Nav · cells" 412:21486 (desktop) · "Nav · mobile (sticky)" 420:235 · menu examples 413:50.
   Home: always visible (sticky). Project pages (.site-nav--auto): hidden at the top, slides down once the hero
   scrolls away (site-nav.js). Desktop: "Work" opens the project index. Mobile (≤760px): "Menu" opens a full-screen sheet. */

.site-nav {
  --sn-paper: #eeedea;
  --sn-ink: #121212;
  --sn-muted: #6e6e6e;
  --sn-yellow: #efd052;
  --sn-blue: #0b4f9c;
  --sn-h: 72px;
  position: sticky;
  top: 0;
  z-index: 40;
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--sn-ink);
}
.site-nav__bar {
  display: flex;
  height: calc(var(--sn-h) + 1px);
  background: var(--sn-paper);
  border-bottom: 1px solid var(--sn-ink);
}
.site-nav__cell {
  display: flex;
  flex: 0 0 217px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  height: var(--sn-h);
  padding: 0 20px;
  border: 0;
  border-right: 1px solid var(--sn-ink);
  background: none;
  font: inherit;
  font-size: 16px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.site-nav__cell:hover { background: rgba(255, 255, 255, 0.55); }
.site-nav__cell:focus { outline: none; }
.site-nav__cell:focus-visible { outline: 2px solid var(--sn-blue); outline-offset: -4px; }
.site-nav__cell--logo { flex: 1 0 auto; padding-left: 14px; }
.site-nav__cell--logo:hover { background: none; }
.site-nav__cell--current { background: #fff; }
.site-nav__cell--cta { border-right: 0; background: var(--sn-yellow); font-weight: 500; }
.site-nav__cell--cta:hover { background: var(--sn-yellow); }
.site-nav__cell--cta span { transition: transform 0.2s; }
.site-nav__cell--cta:hover span { transform: translateX(4px); }
.site-nav__ext { color: var(--sn-muted); }
.site-nav__work[aria-expanded="true"],
.site-nav__menu[aria-expanded="true"] { background: var(--sn-ink); color: var(--sn-paper); }
.site-nav__menu { display: none; }

/* Mark — same parts as the IT'S ORI logo, 1em = disc */
.sn-mark {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  font-size: 44px;
  -webkit-mask: url("assets/logo-mask-ellipse.svg") 0 0 / 1em 1em no-repeat;
  mask: url("assets/logo-mask-ellipse.svg") 0 0 / 1em 1em no-repeat;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.site-nav__cell--logo:hover .sn-mark { transform: rotate(-18deg); }
.sn-mark > * { position: absolute; max-width: none; }
.sn-mark__disc { inset: 0; width: 1em; height: 1em; }
.sn-mark__u1 { left: 0.25218em; top: 0.16836em; width: 0.60189em; height: 0.5799em; }
.sn-mark__u2 { left: 0.1666em; top: 0.25078em; width: 0.60189em; height: 0.5799em; }
.sn-mark__o { left: 0.22987em; top: -0.04558em; font-size: 0.78516em; font-weight: 900; line-height: normal; text-transform: uppercase; color: var(--sn-yellow); }

/* Project pages: hidden until the hero has scrolled away */
.site-nav--auto { position: fixed; left: 0; right: 0; transform: translateY(-105%); transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.site-nav--auto.is-shown,
.site-nav--auto.is-open,
.site-nav--auto:focus-within { transform: none; } /* keyboard focus reveals it, so focus never lands off-screen */
.site-nav--auto .site-nav__bar { width: 100%; } /* project pages: the bar and its underline run edge to edge at any window width */

/* Desktop project index ("Work") */
.site-nav__index {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sn-h) + 1px);
  max-width: 1440px;
  margin: 0 auto;
  background: #fff; /* Figma 427:3706: white sheet, ink rules */
  border: 1px solid var(--sn-ink);
  border-top: 0;
  box-shadow: 0 24px 60px rgba(18, 18, 18, 0.18);
}
.site-nav__index[hidden], .site-menu[hidden], .site-nav__dim[hidden] { display: none; }
.sn-row {
  display: flex;
  gap: 20px; /* Figma: the arrow follows the name */
  align-items: center;
  height: 84px;
  padding: 0 20px;
  border-top: 1px solid var(--sn-ink);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
}
.sn-row:first-child { border-top: 0; }
.sn-row:hover { background: var(--sn-paper); }
.sn-row__year, .sn-row__tags, .sn-menu__label { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sn-muted); }
.sn-row__name { font-size: 40px; font-weight: 300; letter-spacing: -0.02em; }
.sn-row__go { font-size: 18px; transition: transform 0.2s; }
.sn-row:hover .sn-row__go { transform: translateX(4px); }
.sn-row[aria-current="page"] { background: var(--sn-blue); color: var(--sn-paper); } /* Figma: current project in blue + yellow dot */
.sn-row[aria-current="page"] .sn-row__year { color: var(--sn-paper); }
.sn-row[aria-current="page"] .sn-row__tags,
.sn-row[aria-current="page"] .sn-row__go { color: var(--sn-yellow); }
.site-nav__dim { position: fixed; inset: 0; z-index: 30; background: rgba(18, 18, 18, 0.4); }

/* Mobile sheet ("Menu") */
.site-menu {
  position: fixed;
  inset: calc(var(--sn-h-m, 56px) + 1px) 0 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  --sn-paper: #eeedea; --sn-blue: #0b4f9c; --sn-yellow: #efd052; /* the sheet sits outside .site-nav, so it needs the tokens too */
  background: #eeedea;
  font-family: "Outfit", system-ui, sans-serif;
  color: #121212;
  animation: sn-down 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes sn-down { from { transform: translateY(-12px); opacity: 0; } }
.sn-menu__link { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 36px; font-weight: 500; letter-spacing: -0.02em; color: inherit; text-decoration: none; }
.sn-menu__link span { font-size: 22px; font-weight: 400; }
.sn-menu__label { padding: 20px 16px 10px; }
/* Figma 426:3684: Work (white, ↓) → project list on white → Resume · Substack · Contact */
.sn-menu__link--work { background: #fff; border-bottom: 0; }
.sn-menu__list { display: flex; flex-direction: column; background: #fff; border-bottom: 1px solid #121212; }
.site-menu .sn-row { gap: 10px; height: auto; padding: 9px 16px; border-top: 1px solid #121212; }
.site-menu .sn-row:hover { background: var(--sn-paper); }
.site-menu .sn-row__name { flex: 1 1 auto; font-size: 20px; }
.site-menu .sn-row__go { font-size: 14px; }
.site-menu .sn-row__tags { display: none; }
.sn-menu__contact { display: flex; gap: 12px; margin-top: auto; padding: 16px 16px 20px; background: #0b4f9c; color: #fff; }
.sn-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; color: inherit; transition: background-color 0.2s, color 0.2s; }
.sn-icon:hover, .sn-icon:focus-visible { background: #fff; color: #0b4f9c; }
html.sn-lock, html.sn-lock body { overflow: hidden; }

@media (max-width: 1100px) {
  .site-nav__cell { flex-basis: 170px; }
}
/* 761–940px: the four text cells share the room left by the logo, so "Let's talk" never runs past the window */
@media (max-width: 940px) and (min-width: 761px) {
  .site-nav__cell { flex: 1 1 0; }
  .site-nav__cell--logo { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .site-nav { --sn-h: 56px; }
  .site-nav__cell { padding: 0 14px; font-size: 15px; }
  .site-nav__cell--logo { padding-left: 10px; }
  .site-nav__cell--hide-m { display: none; }
  .site-nav__menu { display: flex; flex: 0 0 96px; background: #fff; }
  .site-nav__cell--cta { display: none; } /* Figma mobile nav: logo + ≡ only */
  .sn-mark { font-size: 40px; }
  .site-nav__index, .site-nav__dim { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav--auto, .sn-mark, .site-menu { transition: none; animation: none; }
}