/* ==========================================================
   PHONE MENU — burger + full-screen panel, shared by index.html and
   about.html. Both live at the site root, so the same markup and the
   same relative links work on either page.

   Desktop keeps its inline nav; this only exists below the breakpoint,
   where there isn't room for the links and the projects deserve a way in
   that doesn't depend on scrolling the card row.
   ========================================================== */

.menu-toggle,
.menu-panel{ display: none; }

@media (max-width: 860px){

  /* the inline navs step aside for the burger */
  .sc-nav,
  .ab-nav{ display: none; }

  /* ---------- burger ---------- */
  /* Bare bars. No disc, no pink, no glass: this site draws no containers
     anywhere else, and a button was the only thing on the phone wearing one.

     Both position values are handed in by the page so the burger lands on
     the same axis and the same gutter as the name opposite it, rather than
     on a top and right of its own. */
  .menu-toggle{
    position: fixed;
    top: var(--burger-top, clamp(18px, 3vh, 28px));
    right: var(--pad-x, clamp(16px, 4vw, 30px));
    z-index: 9100;
    display: flex;
    flex-direction: column;
    /* the bars sit flush with the button's right edge, so the mark aligns to
       the page gutter rather than to the invisible tap target around it */
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    /* the box stays 46px for a comfortable thumb even though the bars are
       narrower than it */
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .menu-toggle span{
    display: block;
    width: 26px;
    height: 2px;
    /* was --black, which only worked against the old pink fill */
    background: var(--fg);
    border-radius: 2px;
    /* with no disc behind them, this is the only thing keeping the bars
       readable if they ever sit over a photograph */
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--black) 30%, transparent));
    transition: transform .35s var(--ease), opacity .2s ease;
  }
  /* the two bars cross into an X. They're translated onto the same line
     first, then rotated, so the X is centred rather than pivoting around
     wherever each bar happened to sit. */
  body.menu-open .menu-toggle span:nth-child(1){ transform: translateY(4px) rotate(45deg); }
  body.menu-open .menu-toggle span:nth-child(2){ transform: translateY(-4px) rotate(-45deg); }

  /* ---------- panel ---------- */
  .menu-panel{
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 4vh, 38px);
    padding: clamp(72px, 12vh, 110px) clamp(22px, 6vw, 44px) clamp(28px, 5vh, 48px);
    /* The panel is glass too, so opening the menu feels like frosting the
       page rather than replacing it: you keep your place, the cards stay
       faintly visible behind. Tinted heavily enough that the large type
       holds contrast over whatever image happens to be underneath. */
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    overflow-y: auto;
    /* hidden by default without display:none, so it can animate */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
  }
  body.menu-open .menu-panel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  @supports not (backdrop-filter: blur(1px)){
    .menu-panel{ background: var(--bg); }
  }

  /* ---------- primary: the two destinations ----------
     These carry the weight — large, dark, with an arrow that marks them
     as somewhere to go. The projects below are deliberately quieter, so
     the eye lands on these two first and reads the list as a sub-level of
     Work rather than as three equal groups. */
  .menu-primary{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .menu-primary a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(38px, 13vw, 68px);
    line-height: 1;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: var(--fg);
    transition: color .25s ease;
  }
  .menu-primary a::after{
    content: "\2197\FE0E";
    font-size: .3em;
    color: var(--hl, var(--pink));
    transition: transform .3s var(--ease);
  }
  .menu-primary a:hover{ color: var(--hl, var(--pink)); }
  .menu-primary a:hover::after{ transform: translate(3px, -3px); }
  /* the page you're on is stated, not offered */
  .menu-primary a[aria-current="page"]{ color: var(--fg-dim); }
  .menu-primary a[aria-current="page"]::after{
    content: "•";
    color: var(--fg-dim);
    font-size: .35em;
  }

  .menu-label{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: 4px;
  }
  /* rule running off the label, so the section reads as a subordinate
     grouping rather than a third peer of Work and About */
  .menu-label::after{
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  .menu-projects{
    /* indented under the primary links — the clearest possible signal
       that these sit one level down */
    padding-left: clamp(10px, 3vw, 18px);
  }
  .menu-projects ul{ list-style: none; }
  .menu-projects a{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-dim);
    transition: color .25s ease, padding-left .25s var(--ease);
  }
  .menu-projects a:hover{
    color: var(--fg);
    padding-left: 5px;
  }
  .menu-projects .year{
    font-size: 10.5px;
    color: var(--fg-dim);
    opacity: .7;
  }

  .menu-social{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    border-top: 1px solid var(--line);
    padding-top: clamp(14px, 2.6vh, 22px);
  }
  .menu-social a{
    font-size: 12px;
    color: var(--fg-dim);
    transition: color .25s ease;
  }
  .menu-social a:hover{ color: var(--hl, var(--pink)); }

  /* the page behind must not scroll while the panel is up */
  body.menu-open{ overflow: hidden; }
}

@media (prefers-reduced-motion: reduce){
  .menu-panel,
  .menu-toggle span{ transition-duration: .01ms; }
}