/* Header: large serif wordmark on the left, Playground button on the right */
.site-header {
  padding: 3rem var(--gutter) 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7.5vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-wordmark);
  user-select: none; /* can't be highlighted */
  -webkit-user-select: none;
}
/* The full stop a little bigger than the letters (line-height 0 so it does not make the line taller) */
.wordmark-dot { font-size: 1.35em; line-height: 0; }

/* Playground and Achievements sit together on the right */
.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Header buttons (Playground, Achievements): styled like the bio card's round + button (darkened fill,
   no outline), as a pill with an icon. The fill is the solid colour 20% black makes on the crimson page
   (30% on hover), so the doodles hiding behind it don't show through. On hover they peek out. */
.btn-peek {
  position: relative;
  isolation: isolate; /* keeps the fill and doodles (negative z-index) behind the label but above the page */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem 0.65rem 0.95rem;
  border: 0;
  border-radius: 999px;
  color: var(--color-wordmark);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: transform 0.15s;
}
/* The fill is its own layer (z-index -1) so the doodles (z-index -2) can hide underneath it;
   a background on the button itself would always paint below them */
.btn-peek::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #a20626; /* 20% black over --color-bg */
  transition: background-color 0.15s;
}
.btn-peek:hover { transform: scale(1.04); }
.btn-peek:hover::before { background-color: #8e0522; /* 30% black over --color-bg */ }
.btn-peek:active { transform: scale(0.97); }
.btn-peek:focus-visible { outline: 2px solid var(--color-wordmark); outline-offset: 4px; }
.btn-peek svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

/* Three doodles with eyes hide fully behind the pill (it is opaque) and, on hover,
   pop up over its top edge as if peeking at you. They sit along the straight middle part
   of the pill so the rounded ends never give them away. */
.pg-bits {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.pg-bit {
  position: absolute;
  left: calc(50% + var(--x));
  top: 50%;
  width: var(--s);
  height: auto;
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  opacity: 0;
  transform: translateY(0) rotate(0deg);
  transition: transform 0.2s ease-in, opacity 0.2s ease 0.05s;
}
/* Left, middle and right doodle (Playground: sun, ball, heart; Achievements: trophy, star, rosette) */
.pg-bit-1 { --s: 36px; --x: -38px; --y: -28px; --r: -12deg; }
.pg-bit-2 { --s: 30px; --x: 2px;   --y: -26px; --r: 4deg; }
.pg-bit-3 { --s: 34px; --x: 40px;  --y: -27px; --r: 12deg; }
/* Achievements is a little wider, so its doodles spread a bit more */
.btn-achievements .pg-bit-1 { --x: -44px; --y: -29px; }            /* trophy */
.btn-achievements .pg-bit-2 { --x: 2px;   --y: -31px; --s: 32px; }  /* star (its eyes sit lower, so it rises higher) */
.btn-achievements .pg-bit-3 { --x: 46px;  --y: -28px; }            /* rosette */

/* --peek scales how far they come up: js/modules/peek-buttons.js sets it from the mouse height on the
   button (mouse near the top edge = up to 1.3, near the bottom edge = 0.7); 1 without the script */
@media (hover: hover) {
  .btn-peek:hover .pg-bit {
    opacity: 1;
    transform: translateY(calc(var(--y) * var(--peek, 1))) rotate(var(--r));
    transition: transform 0.5s cubic-bezier(0.34, 1.7, 0.64, 1), opacity 0.1s ease;
  }
}
.btn-peek:focus-visible .pg-bit {
  opacity: 1;
  transform: translateY(calc(var(--y) * var(--peek, 1))) rotate(var(--r));
  transition: transform 0.5s cubic-bezier(0.34, 1.7, 0.64, 1), opacity 0.1s ease;
}
/* Once they're up, they follow the mouse quickly (no bounce) */
.btn-peek.is-tracking:hover .pg-bit {
  transition: transform 0.18s ease-out, opacity 0.1s ease;
}

@media (prefers-reduced-motion: reduce) {
  .pg-bit { transition: opacity 0.2s ease !important; }
}

/* Phones: both buttons become round icon buttons (like the + button) so they fit next to the wordmark.
   The label stays for screen readers. */
/* Phones: Playground and Achievements (with their labels) go on their own line under the wordmark;
   no peeking doodles, as there's no hover. (Not the Side Quests and Achievements headers, which keep Close beside it.) */
@media (max-width: 640px) {
  .site-header:not(.sq-header):not(.ach-header) {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }
  .header-actions { gap: 0.5rem; }
  .pg-bits { display: none; }
}

/* Text-only button in the wordmark's cream (the Side Quests "Close") */
.btn-header {
  flex-shrink: 0;
  color: var(--color-wordmark);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color 0.15s;
}
.btn-header:hover { text-decoration-color: currentColor; }
.btn-header:focus-visible { outline: 2px solid var(--color-wordmark); outline-offset: 4px; border-radius: 4px; }