/* Site menu: the top-right "Menu" button and the panel it slides in from the right.
   Shared by every page; the markup is injected by /assets/site-menu.js. */

/* ---------- the button ---------- */
.sm-toggle { position: relative; padding: 0; background: none; border: 0; cursor: none; white-space: nowrap; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #e8e6e1; transition: color .3s ease; }
.sm-toggle::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #e8e6e1; transform: scaleX(0); transform-origin: right; transition: transform .8s cubic-bezier(.5,0,.3,1); }
.sm-toggle.sm-cue::after, .sm-toggle:hover::after, .sm-toggle[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.sm-toggle::before { content: ''; position: absolute; inset: -14px -12px; }   /* finger-sized tap area around the small label */
.sm-toggle:focus { outline: none; }
.sm-toggle:focus-visible { outline: 1px solid rgba(232,230,225,0.5); outline-offset: 6px; border-radius: 2px; }

/* ---------- scrim: the site stays visible, just dimmed ---------- */
.sm-scrim { position: fixed; inset: 0; z-index: 8990; background: rgba(8,8,8,0.28); opacity: 0; pointer-events: none; transition: opacity .5s ease; cursor: none; }
.sm-scrim.open { opacity: 1; pointer-events: auto; }

/* ---------- panel ----------
   Desktop: slides in from the right and pushes the page left. Phones: drops from the top and pushes it down.
   Either way the page dims, and slides back when the menu closes. */
.sm-panel { position: fixed; z-index: 9000; display: flex; background: linear-gradient(180deg, #141414, #0f0f0f); visibility: hidden; }
.sm-panel.open { transform: none; visibility: visible; }
.sm-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 40% at 70% 0%, rgba(237,233,224,0.06), rgba(237,233,224,0) 70%); }
.sm-inner { position: relative; display: flex; flex-direction: column; width: 100%; overflow-y: auto; overscroll-behavior: contain; }
/* the header's centre line matches the Menu button's (--sm-top is set from the button's position) */
.sm-head { flex: none; display: flex; justify-content: space-between; align-items: center; height: calc(var(--sm-top, 40px) * 2); border-bottom: 1px solid rgba(255,255,255,0.08); font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #5f5b53; }
.sm-head > span:first-child { visibility: hidden; }   /* no doubled "Menu": the open menu shows only Close, where Menu was */
.sm-close { position: absolute; transform: translateY(-50%); background: none; border: 0; padding: 14px 0 14px 20px; cursor: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: #e8e6e1; transition: color .3s ease; }
.sm-close:hover, .sm-close:focus-visible { color: #EDE9E0; outline: none; }

.sm-list { list-style: none; margin: auto 0; padding: 4vh 0; }
.sm-row { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; gap: 6px 14px; padding: clamp(14px,2.2vh,22px) 0; border-bottom: 1px solid rgba(255,255,255,0.08); color: #cbc7bf; text-decoration: none; cursor: none; opacity: 0; transform: translateX(30px); transition: opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1), color .35s ease; }
.sm-panel.open .sm-row { opacity: 1; transform: none; }
.sm-n { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.1em; color: #5f5b53; transition: color .35s ease; }
.sm-label { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: clamp(2rem, 3vw, 2.9rem); line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.sm-sub { grid-column: 2; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6b675f; transition: color .35s ease; }
.sm-row:focus-visible { color: #f2f0ef; outline: none; }
.sm-row:focus-visible .sm-label { transform: translateX(8px); }
.sm-row:focus-visible .sm-sub { color: #b4aea4; }
/* hover effects only where there is a real mouse (on touch screens they "stick" after a tap) */
@media (hover: hover) {
  .sm-row:hover { color: #f2f0ef; }
  .sm-row:hover .sm-label { transform: translateX(8px); }
  .sm-row:hover .sm-n, .sm-row:hover .sm-sub { color: #b4aea4; }
  .sm-list:hover .sm-row:not(:hover) { color: #4a4741; }
}
/* touch: a brief pressed state instead */
.sm-row:active { color: #f2f0ef; background: rgba(255,255,255,0.03); }
/* the page you're on: greyed out, not clickable, no hover */
.sm-row[aria-current="page"], .sm-list:hover .sm-row[aria-current="page"] { color: #3d3b37; pointer-events: none; }
.sm-row[aria-current="page"] .sm-n, .sm-row[aria-current="page"] .sm-sub { color: #3d3b37; }
.sm-row[aria-current="page"] .sm-sub::after { content: '  ·  You are here'; }

/* footer: Omery and the socials share one line */
.sm-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .6s ease .5s; }
.sm-panel.open .sm-foot { opacity: 1; }
.sm-foot a { color: #6b675f; text-decoration: none; cursor: none; transition: color .3s ease; }
.sm-foot a:hover, .sm-foot a:focus-visible { color: #EDE9E0; outline: none; }
.sm-social { display: flex; flex-wrap: nowrap; gap: 16px; }

/* preview beside the panel, over the site */
.sm-peek { position: fixed; top: 0; left: 0; z-index: 8995; width: 300px; aspect-ratio: 4/3; border-radius: 8px; pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(0.94); transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1); background: #1a1a1a center/cover no-repeat; box-shadow: 0 30px 80px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.08); }
.sm-peek.on { opacity: 1; transform: translate(-50%,-50%) scale(1); }
/* several previews: a deck of cards that shuffles */
.sm-peek.deck { background: none; border: 0; box-shadow: none; }
.sm-card { position: absolute; inset: 0; border-radius: 8px; background: #1a1a1a center/cover no-repeat; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 80px rgba(0,0,0,0.6); transition: transform .6s cubic-bezier(.16,1,.3,1), filter .5s ease; }

/* clicking the page closes the menu (on desktop the scrim also dims it; on phones the page dims itself) */
.sm-scrim { position: fixed; inset: 0; z-index: 8990; background: transparent; opacity: 0; pointer-events: none; cursor: none; }
.sm-scrim.open { opacity: 1; pointer-events: auto; }
html.sm-drag [data-root] { transition: none; }
/* the pushed page's own Menu button fades out; Close takes its place */
[data-menu-toggle] { transition: color .3s ease, opacity .3s ease; }
html.sm-crunch [data-menu-toggle] { opacity: 0 !important; }   /* !important: beats the home page's fade-in animation */

/* ---------- desktop: a side panel from the right, the page pushed left ---------- */
@media (min-width: 641px) {
  .sm-panel { top: 0; right: 0; bottom: 0; width: min(540px, 88vw); border-left: 1px solid rgba(255,255,255,0.08); box-shadow: -40px 0 120px rgba(0,0,0,0.55); transform: translateX(101%);
    /* closing: slide out first, hide only once the slide has finished */
    transition: transform .62s cubic-bezier(.76,0,.24,1), visibility 0s linear .62s; }
  .sm-panel.open { transition: transform .62s cubic-bezier(.76,0,.24,1), visibility 0s linear 0s; }
  .sm-inner { padding: 0 clamp(24px,3vw,40px) 30px; }
  .sm-panel.open li:nth-child(1) .sm-row { transition-delay: .26s, .26s, 0s; }
  .sm-panel.open li:nth-child(2) .sm-row { transition-delay: .34s, .34s, 0s; }
  .sm-panel.open li:nth-child(3) .sm-row { transition-delay: .42s, .42s, 0s; }
  .sm-panel.open li:nth-child(4) .sm-row { transition-delay: .50s, .50s, 0s; }
  /* the page narrows into the space left of the panel and re-lays itself out (sizes follow --vw, set by the script),
     rather than sliding behind it; a dark wash over it does the dimming */
  html.sm-anim [data-root] { transition: width .62s cubic-bezier(.76,0,.24,1); }
  html.sm-crunch [data-root] { width: calc(100% - var(--sm-shift, 540px)) !important; }
  .sm-scrim { background: rgba(8,8,8,0.42); transition: opacity .62s ease; }
}

/* ---------- phones: the menu drops from the top and pushes the page down beneath it ---------- */
@media (max-width: 640px) {
  .sm-panel { top: 0; left: 0; right: 0; width: 100%; max-height: 86vh; border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 24px 60px rgba(0,0,0,0.55); transform: translateY(-101%);
    transition: transform .5s cubic-bezier(.32,.72,0,1), visibility 0s linear .5s; }
  .sm-panel.open { transition: transform .5s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s; }
  .sm-panel.sm-dragging { transition: none; }
  .sm-inner { padding: 0 20px 20px; }
  .sm-close { font-size: 9.5px; }
  .sm-list { margin: 4px 0 0; padding: 0 0 12px; }
  .sm-row { padding: 12px 0; }
  .sm-list li:last-child .sm-row { border-bottom: 0; }   /* the footer's own rule follows; avoid a double line */
  .sm-label { font-size: 9vw; }
  .sm-foot { padding-top: 14px; font-size: 10px; letter-spacing: 0.12em; }
  .sm-social { gap: 14px; }
  .sm-panel.open li:nth-child(1) .sm-row { transition-delay: .12s, .12s, 0s; }
  .sm-panel.open li:nth-child(2) .sm-row { transition-delay: .17s, .17s, 0s; }
  .sm-panel.open li:nth-child(3) .sm-row { transition-delay: .22s, .22s, 0s; }
  .sm-panel.open li:nth-child(4) .sm-row { transition-delay: .27s, .27s, 0s; }
  .sm-panel.open .sm-foot { transition-delay: .3s; }
  .sm-peek { display: none; }
  html.sm-anim [data-root] { transition: transform .5s cubic-bezier(.32,.72,0,1), filter .5s ease; }
  html.sm-crunch [data-root] { transform: translateY(var(--sm-push, 60vh)); filter: brightness(0.55); }
  nav[aria-label="Main navigation"] { mix-blend-mode: normal !important; background: linear-gradient(to bottom, rgba(13,13,13,0.92) 0%, rgba(13,13,13,0.6) 70%, transparent 100%); padding-bottom: 18px !important; }
}
/* touch screens: hide the site's follow-the-finger cursor circle while the menu is open */
@media (hover: none) { html.sm-open [data-cursor] { opacity: 0 !important; } }
@media (prefers-reduced-motion: reduce) {
  .sm-panel, .sm-row, .sm-foot, .sm-scrim, .sm-toggle::after { transition: none; }
  .sm-row { opacity: 1; transform: none; }
}

/* ---------- site footer: identical on every page ----------
   Omery bottom-left, Austin bottom-right, at the home page's spacing.
   The home page pins it to the bottom of the screen (.site-foot--pinned); scrolling pages end with it. */
.site-foot { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(64px, 10vh, 120px); padding: 0 60px 34px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #7A7A7A; white-space: nowrap; }
.site-foot--pinned { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; z-index: 15; animation: sf-fade 1.2s ease 1.05s both; }
.site-foot a { color: inherit; text-decoration: none; cursor: none; transition: color .3s ease; }
.site-foot a:hover, .site-foot a:focus-visible { color: #EDE9E0; outline: none; }
.sf-short { display: none; }
.sf-arrow { display: inline-block; margin-left: 0.45em; will-change: transform; animation: sf-beckon 6s ease-in-out 1s infinite; }
.site-foot a:hover .sf-arrow { animation: none; transform: translate(2px,-2px); color: #EDE9E0; transition: transform .3s cubic-bezier(.16,1,.3,1), color .3s ease; }
@keyframes sf-beckon { 0%, 16%, 100% { transform: translate(0,0); color: #7A7A7A; } 4%, 12% { transform: translate(2px,-2px); color: #e8e6e1; } 8% { transform: translate(0,0); color: #9a958b; } }
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .site-foot { padding: 0 20px 22px; font-size: 9.5px; letter-spacing: 0.16em; }
  .sf-full { display: none; }
  .sf-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .sf-arrow, .site-foot--pinned { animation: none; } }