/* Hamburger menu shared by every page except the homepage (which has its own) */
.hr { display: flex; align-items: center; gap: 22px; justify-self: end; }
.sm-burger { position: relative; width: 24px; height: 14px; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; flex: none; }
.sm-burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s cubic-bezier(.22,.8,.18,1), top .45s cubic-bezier(.22,.8,.18,1); }
.sm-burger i:nth-child(1) { top: 2px; } .sm-burger i:nth-child(2) { top: 10px; }
.sm-open .sm-burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.sm-open .sm-burger i:nth-child(2) { top: 6px; transform: rotate(-45deg); }
.sm-burger:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

.sm { position: fixed; inset: 0; z-index: 50; display: grid; align-content: center; padding: 0 18px; box-sizing: border-box;
      background: var(--room, var(--bg)); color: var(--ink, var(--text)); font-family: "JetBrains Mono", ui-monospace, monospace;
      opacity: 0; visibility: hidden; transition: opacity .45s cubic-bezier(.22,.8,.18,1), visibility 0s linear .45s; }
.sm-open .sm { opacity: 1; visibility: visible; transition-delay: 0s; }
.sm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sm li { overflow: hidden; }
.sm li.sep { margin-top: 18px; }
.sm a { display: block; font-size: clamp(22px, 6vw, 34px); line-height: 1.15; font-weight: 500; letter-spacing: -.015em; color: inherit; text-decoration: none;
        transform: translateY(105%); transition: transform .7s cubic-bezier(.22,.8,.18,1); }
.sm-open .sm a { transform: none; }
.sm li:nth-child(2) a { transition-delay: .05s; } .sm li:nth-child(3) a { transition-delay: .1s; } .sm li:nth-child(4) a { transition-delay: .15s; }
.sm li:nth-child(5) a { transition-delay: .2s; } .sm li:nth-child(6) a { transition-delay: .25s; } .sm li:nth-child(7) a { transition-delay: .3s; } .sm li:nth-child(8) a { transition-delay: .35s; }
.sm a:hover { opacity: .55; }
@media (min-width: 900px) { .sm { padding-left: calc(18px + 4vw); } }
/* the header stays on top of the open menu so the burger can close it */
.sm-open header, .sm-open .bar, .sm-open .site-header { position: relative; z-index: 60; }
.sm-open .bar { position: absolute; }

.mode-ico { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mode-ico.i-sun { display: none; }
:root[data-theme="dark"] .mode-ico.i-sun { display: block; }
:root[data-theme="dark"] .mode-ico.i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mode-ico.i-sun { display: block; } :root:not([data-theme="light"]) .mode-ico.i-moon { display: none; } }
@media (prefers-reduced-motion: reduce) { .sm, .sm a, .sm-burger i { transition-duration: .01s !important; transition-delay: 0s !important; } }

/* ---------- Menu as a folder that slides down from above; its upside-down flap says CLOSE ---------- */
.sm { inset: 0 0 auto 0; height: calc(100dvh - 28px); overflow: visible; align-content: center; box-sizing: border-box;
  padding: calc(70px + env(safe-area-inset-top, 0px)) var(--pad, 18px) 30px;
  background: var(--room, var(--bg)); border: 1px solid var(--muted, var(--dim)); border-top: 0; border-radius: 0 0 12px 12px;
  opacity: 1; visibility: hidden; transform: translateY(calc(-100% - 48px));
  transition: transform .85s cubic-bezier(.22,.8,.18,1), visibility 0s linear .85s; }
.sm-open .sm { transform: none; visibility: visible; transition-delay: 0s; }
.sm .menu-close { position: absolute; top: 100%; left: calc(62% - 1px); width: min(31%, 240px); height: 26px; margin-top: -1px; padding: 0;
  border: 1px solid var(--muted, var(--dim)); border-top: 0; border-radius: 0 0 9px 9px; background: var(--room, var(--bg)); color: var(--muted, var(--dim));
  font: 400 10.5px/26px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; text-align: center; cursor: pointer; }
.sm .menu-close::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: var(--room, var(--bg)); }
.sm .menu-close:hover { color: var(--ink, var(--text)); }
.fold-veil { position: fixed; inset: 0; z-index: 49; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .6s cubic-bezier(.22,.8,.18,1), visibility 0s linear .6s; }
.sm-open .fold-veil { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .sm, .fold-veil { transition-duration: .01s !important; } }

/* thin lines between the menu pages, like the project lists */
.sm ul, .menu ul { gap: 0; }
.sm li, .menu li { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding: 9px 0; }
.sm li:first-child, .menu li:first-child { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.sm li.sep, .menu li.sep { margin-top: 0; }

/* ---------- Header buttons: bigger, with a generous tap area that takes priority over the page underneath ---------- */
:is(.bar, header, .site-header) :is(.back, .hback) { font-size: 25px; line-height: 1; text-decoration: none; }
.sm-burger { width: 32px; height: 18px; }
.sm-burger i:nth-child(1) { top: 3px; } .sm-burger i:nth-child(2) { top: 14px; }
.sm-open .sm-burger i:nth-child(1) { top: 8px; transform: rotate(45deg); }
.sm-open .sm-burger i:nth-child(2) { top: 8px; transform: rotate(-45deg); }
:is(.bar, header, .site-header) :is(.back, .hback, .mode, .sm-burger), .top :is(.mode, .burger) { position: relative; }
:is(.bar, header, .site-header) :is(.back, .hback, .mode, .sm-burger)::before, .top :is(.mode, .burger)::before { content: ""; position: absolute; inset: -18px -10px -14px; }  /* roughly 48px square, reaching the top edge of the screen */
:is(.bar, header, .site-header) :is(.back, .hback)::before { inset: -18px -22px -14px -14px; }
.hr > :last-child::before, .top-right > :last-child::before { right: -14px; }                      /* the menu button area nearly reaches the right edge (never past it: a tap area sticking out makes the page wider and cancels the page fade in Chrome) */

/* the small page label under the signature (Art, Bio) steps aside while the menu is open, so every page's open menu looks the same */
.title small { transition: opacity .35s cubic-bezier(.22,.8,.18,1); }
.sm-open .title small { opacity: 0; animation: none; }