/* ---------- desktop and tablet menu: a black notch hangs from the top edge of the screen once the page has scrolled
   a little (owner, 11 November 2026: not over the top of the hero, where it used to show too). Its three lines open
   a 2 x 3 puzzle of the menu links, half the screen wide on screens 1200px and up, with the light/dark and sound
   switches under it.
   On hover the other pieces fade back (Spotlight) and the piece's icon makes one small move of its own. Tablets and desktops only: 641px and up. ---------- */
.dnotch,
.dnotch-scrim {
  display: none;
}
@media (min-width: 641px) {
  .dnotch {
    --notch: #000000;
    --notch-line: #ffd731; /* thin yellow outline round the closed notch, so it shows on the plum night background */
    --seam: #1a1714;
    --tab-h: 46px;
    --swoop: cubic-bezier(0.7, 0, 0.2, 1);
    --calm: cubic-bezier(0.2, 0.7, 0.2, 1);
    --fit: 1;
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 57;
    height: 0;
    font-family: var(--font-body);
  }
  /* the tab, with scooped shoulders where it meets the top edge of the screen; its shape is the svg behind the button */
  .dnotch__tab {
    position: absolute;
    left: 50%;
    top: env(safe-area-inset-top, 0px);
    z-index: 2;
    width: 132px;
    height: var(--tab-h);
    margin-left: -66px;
    transition:
      transform 450ms var(--swoop),
      visibility 0s;
  }
  /* at the very top of the page (js/desk-notch.js sets is-away) the tab is tucked up above the screen, and
     visibility: hidden (after the slide) takes it out of the Tab order too */
  .dnotch.is-away .dnotch__tab {
    transform: translateY(calc(-100% - 4px));
    visibility: hidden;
    transition:
      transform 450ms var(--swoop),
      visibility 0s linear 450ms;
  }
  .dnotch__frame {
    position: absolute;
    left: -22px;
    top: 0;
    width: 176px;
    height: var(--tab-h);
    overflow: visible;
    pointer-events: none;
  }
  .dnotch__frame-fill {
    fill: var(--notch);
  }
  .dnotch__frame-line {
    fill: none;
    stroke: var(--notch-line);
    stroke-width: 2px; /* owner, 8 November 2026 (was 1px) */
    transition: opacity 0.2s;
  }
  /* no outline once the menu is open */
  .dnotch[data-open="true"] .dnotch__frame-line {
    opacity: 0;
  }
  .dnotch__toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0 0 24px 24px;
    background: none;
    color: #ffffff;
    cursor: pointer;
  }
  .dnotch__toggle:focus-visible {
    outline: 3px solid #4fa6ff;
    outline-offset: -5px;
  }
  /* three white lines, no animation; an X while the menu is open */
  /* whole pixels only (owner, 8 November 2026): 3px lines 5px apart, 13px from the top of the 46px tab, so each line
     lands on whole pixel rows (13, 21, 29). Centring the 19px stack would put it at 13.5px, and the old 2.4px lines and
     4.4px gaps started at 15, 21.8 and 28.6px, which the browser smeared differently, so the third looked thinner. */
  .dnotch__lines {
    display: grid;
    align-self: start;
    margin-top: 13px;
    gap: 5px;
    width: 34px;
  }
  .dnotch__lines i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
  }
  .dnotch__x {
    display: none;
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
  }
  .dnotch[data-open="true"] .dnotch__lines {
    display: none;
  }
  .dnotch[data-open="true"] .dnotch__x {
    display: block;
  }
  /* light mode (owner, 8 November 2026): the closed notch is inverted, an ivory tab with black lines and a dark
     outline (yellow would barely show on the ivory page). Open, it goes back to black, so it matches the black panel
     it hangs from. */
  .dnotch__frame-fill {
    transition: fill 0.2s;
  }
  :root:not([data-mode="night"]) .dnotch:not([data-open="true"]) {
    --notch-line: #1a1714;
  }
  :root:not([data-mode="night"]) .dnotch:not([data-open="true"]) .dnotch__frame-fill {
    fill: #fffbf0;
  }
  :root:not([data-mode="night"]) .dnotch:not([data-open="true"]) .dnotch__toggle {
    color: #1a1714;
  }

  /* the panel rolls down from the top; the script sets its size and the tab follows its bottom edge */
  .dnotch__panel {
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--panel-w, 600px);
    height: var(--panel-h, 700px);
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 0 22px;
    background: var(--notch);
    color: #ffffff;
    border-radius: 0 0 30px 30px;
    transform: translateX(-50%) scale(var(--fit));
    transform-origin: 50% 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0 round 0 0 30px 30px);
    transition:
      clip-path 500ms var(--swoop),
      visibility 0s linear 500ms;
  }
  .dnotch[data-open="true"] .dnotch__panel {
    visibility: visible;
    clip-path: inset(0 0 0 0 round 0 0 30px 30px);
    transition:
      clip-path 500ms var(--swoop),
      visibility 0s;
  }

  /* the puzzle */
  .dnotch__board {
    position: relative;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }
  .dnotch__piece {
    position: absolute;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      transform 150ms ease-in,
      opacity 120ms ease-in;
  }
  .dnotch[data-open="true"] .dnotch__piece {
    opacity: 1;
    transform: none;
    transition:
      transform 320ms var(--calm),
      opacity 260ms ease-out;
    transition-delay: calc(200ms + var(--i, 0) * 40ms);
  }
  .dnotch__pz {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: var(--on-c);
    text-decoration: none;
    pointer-events: none; /* only the piece's outline answers the pointer, not the empty corners */
    -webkit-tap-highlight-color: transparent;
  }
  .dnotch__pz:focus-visible {
    outline: none;
  }
  .dnotch__pz > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: opacity 0.2s ease;
  }
  .dnotch__slot path {
    fill: transparent;
    pointer-events: fill;
    cursor: pointer;
  }
  .dnotch__shape path {
    fill: var(--c);
    stroke: var(--seam);
    stroke-width: 2.5px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill 0.3s ease;
  }
  .dnotch__pz:focus-visible .dnotch__shape path {
    stroke: #4fa6ff;
    stroke-width: 4px;
  }
  .dnotch__piece:has(.dnotch__pz:focus-visible) {
    z-index: 2;
  }
  /* the icon over the name, both centred */
  .dnotch__lbl {
    position: absolute;
    inset: var(--inset, 78px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .dnotch__ic {
    width: 44px;
    height: 44px;
    stroke-width: 1.7;
  }
  .dnotch__lbl b {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
  }
  /* Spotlight: pointing at a piece fades the others back (a third of the way, so they stay readable) */
  @media (hover: hover) {
    .dnotch__board:has(.dnotch__pz:hover) .dnotch__pz:not(:hover) > svg.dnotch__shape,
    .dnotch__board:has(.dnotch__pz:hover) .dnotch__pz:not(:hover) .dnotch__lbl {
      opacity: 0.66;
    }
  }

  /* Icons (owner, 9 November 2026, the calm pick from docs/design/notch-hover/notch-hover-icons.html): pointing at
     a piece, or tabbing to it, gives its icon one small move of its own; the rest of the piece stays still. The icons
     are written out in index.html (not <use>) so their parts can move. transform-box: fill-box makes each part turn
     round its own middle, not the icon's corner. The rules are listed twice, for :hover (mouse only, like Spotlight)
     and :focus-visible (keyboard), because a tap on a touch screen would otherwise leave :hover stuck on. */
  .dnotch__ic,
  .dnotch__ic * {
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }
  .dnotch__ic {
    transform-origin: 50% 60%;
  }
  .dnotch__flame,
  .dnotch__steam,
  .dnotch__pin {
    transform-origin: 50% 100%;
  }
  .dnotch__flame {
    transition: fill 0.2s;
  }
  .dnotch__shadow {
    fill: currentColor;
    stroke: none;
    opacity: 0.25;
  }
  .dnotch__pz:focus-visible .dnotch__flame {
    fill: var(--yellow);
  }
  .dnotch__pz:focus-visible .dnotch__ic--wiggle {
    animation: dnotch-wiggle 0.6s ease-in-out;
  }
  .dnotch__pz:focus-visible .dnotch__ic--wiggle .dnotch__flame {
    animation: dnotch-flicker 0.3s ease-in-out infinite alternate;
  }
  .dnotch__pz:focus-visible .dnotch__ic--tip {
    animation: dnotch-tip 0.6s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
  }
  .dnotch__pz:focus-visible .dnotch__ic--rumble {
    animation: dnotch-rumble 0.5s ease-in-out;
  }
  .dnotch__pz:focus-visible .dnotch__ic--turn .dnotch__star {
    animation: dnotch-turn 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  .dnotch__pz:focus-visible .dnotch__ic--turn .dnotch__twinkle {
    animation: dnotch-twinkle 0.6s ease-in-out 0.15s;
  }
  .dnotch__pz:focus-visible .dnotch__ic--steam {
    animation: dnotch-lift 0.5s ease-out;
  }
  .dnotch__pz:focus-visible .dnotch__ic--steam .dnotch__steam {
    animation: dnotch-steam 1.3s ease-in-out infinite;
  }
  .dnotch__pz:focus-visible .dnotch__ic--hop .dnotch__pin {
    animation: dnotch-hop 0.7s cubic-bezier(0.3, 0.6, 0.3, 1);
  }
  .dnotch__pz:focus-visible .dnotch__ic--hop .dnotch__shadow {
    animation: dnotch-shade 0.7s;
  }
  @media (hover: hover) {
    .dnotch__pz:hover .dnotch__flame {
      fill: var(--yellow);
    }
    .dnotch__pz:hover .dnotch__ic--wiggle {
      animation: dnotch-wiggle 0.6s ease-in-out;
    }
    .dnotch__pz:hover .dnotch__ic--wiggle .dnotch__flame {
      animation: dnotch-flicker 0.3s ease-in-out infinite alternate;
    }
    .dnotch__pz:hover .dnotch__ic--tip {
      animation: dnotch-tip 0.6s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
    }
    .dnotch__pz:hover .dnotch__ic--rumble {
      animation: dnotch-rumble 0.5s ease-in-out;
    }
    .dnotch__pz:hover .dnotch__ic--turn .dnotch__star {
      animation: dnotch-turn 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
    }
    .dnotch__pz:hover .dnotch__ic--turn .dnotch__twinkle {
      animation: dnotch-twinkle 0.6s ease-in-out 0.15s;
    }
    .dnotch__pz:hover .dnotch__ic--steam {
      animation: dnotch-lift 0.5s ease-out;
    }
    .dnotch__pz:hover .dnotch__ic--steam .dnotch__steam {
      animation: dnotch-steam 1.3s ease-in-out infinite;
    }
    .dnotch__pz:hover .dnotch__ic--hop .dnotch__pin {
      animation: dnotch-hop 0.7s cubic-bezier(0.3, 0.6, 0.3, 1);
    }
    .dnotch__pz:hover .dnotch__ic--hop .dnotch__shadow {
      animation: dnotch-shade 0.7s;
    }
  }
  /* the cake wiggles and its candle lights; the die tips a quarter turn (a five looks the same after, so letting go
     snaps back unseen); the controller rumbles; the big star turns and the small one twinkles; the bowl lifts and
     its steam rises; the pin hops and its shadow shrinks */
  @keyframes dnotch-wiggle {
    25% {
      transform: rotate(-9deg);
    }
    50% {
      transform: rotate(7deg);
    }
    75% {
      transform: rotate(-3deg);
    }
  }
  @keyframes dnotch-flicker {
    to {
      transform: scale(1.2, 1.35);
    }
  }
  @keyframes dnotch-tip {
    55% {
      transform: translateY(-4px) rotate(100deg);
    }
    80% {
      transform: rotate(84deg);
    }
    100% {
      transform: rotate(90deg);
    }
  }
  @keyframes dnotch-rumble {
    20% {
      transform: translateX(-2px) rotate(-4deg);
    }
    40% {
      transform: translateX(2px) rotate(4deg);
    }
    60% {
      transform: translateX(-1.5px) rotate(-2deg);
    }
    80% {
      transform: translateX(1px) rotate(1deg);
    }
  }
  @keyframes dnotch-turn {
    50% {
      transform: rotate(60deg) scale(1.15);
    }
    100% {
      transform: rotate(90deg);
    }
  }
  @keyframes dnotch-twinkle {
    50% {
      transform: scale(1.35);
    }
  }
  @keyframes dnotch-lift {
    40% {
      transform: translateY(-3px);
    }
  }
  @keyframes dnotch-steam {
    0% {
      transform: translateY(1px);
      opacity: 0.3;
    }
    50% {
      transform: translateY(-1.5px);
      opacity: 1;
    }
    100% {
      transform: translateY(-3px);
      opacity: 0;
    }
  }
  @keyframes dnotch-hop {
    35% {
      transform: translateY(-5px);
    }
    60% {
      transform: scale(1.08, 0.9);
    }
    80% {
      transform: translateY(-1px);
    }
  }
  @keyframes dnotch-shade {
    35% {
      transform: scale(0.5);
      opacity: 0.1;
    }
  }

  /* under the puzzle: the light/dark switch (it names the mode it switches to, like the phone menu) and Sound */
  .dnotch__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 14px 26px 0;
    padding-top: 14px;
    border-top: 1.5px dashed rgba(255, 255, 255, 0.26);
    opacity: 0;
    transition: opacity 0.15s;
  }
  .dnotch[data-open="true"] .dnotch__foot {
    opacity: 1;
    transition: opacity 0.25s ease 0.4s;
  }
  .dnotch__mode {
    display: grid;
    grid-template-columns: 30px auto 42px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: transparent;
    color: #ffffff;
    font: 600 0.95rem/1 var(--font-body);
    text-align: left;
    cursor: pointer;
    transition:
      border-color 0.2s,
      background-color 0.2s;
  }
  .dnotch__mode:hover {
    border-color: var(--yellow);
    background: rgba(255, 255, 255, 0.06);
  }
  .dnotch__mode:focus-visible {
    outline: 3px solid #4fa6ff;
    outline-offset: 2px;
  }
  .dnotch__chip {
    display: grid;
    place-items: center;
    width: 30px;
    height: 26px;
    border-radius: 8px;
    background: var(--yellow);
    color: #1a1714;
    transform: rotate(-4deg);
  }
  .dnotch__chip .i {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
  }
  .dnotch__switch {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition:
      background-color 0.3s,
      border-color 0.3s;
  }
  .dnotch__switch i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.25s var(--calm);
  }
  /* each switch is "on" for its own reason: light mode (the site opens dark, so it starts off), or sound on */
  :root:not([data-mode="night"]) #dnotch-mode .dnotch__switch,
  :root:not([data-sound="off"]) #dnotch-sound .dnotch__switch {
    background: var(--yellow);
    border-color: var(--yellow);
  }
  :root:not([data-mode="night"]) #dnotch-mode .dnotch__switch i,
  :root:not([data-sound="off"]) #dnotch-sound .dnotch__switch i {
    transform: translateX(18px);
    background: #1a1714;
  }

  .dnotch-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 56;
    background: rgba(20, 23, 27, 0.5); /* the same dark tint in day and night */
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s,
      visibility 0s linear 0.3s;
  }
  .dnotch-scrim.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s;
  }
}
@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
  .dnotch,
  .dnotch *,
  .dnotch-scrim {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .dnotch__ic,
  .dnotch__ic * {
    animation: none !important;
  }
}