/* ==========================================================================
   PLOP! — the header.

   Not a navigation bar. At the top of the page the labels are small paper tags
   lying on the table, each one turned a degree or two, with nothing behind
   them. Once you scroll they gather onto a single strip of paper — still paper,
   still slightly crooked, but compact and out of the way.

   No glass, no blur, no translucent bar.
   ========================================================================== */

.head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.6rem);
  padding: clamp(.7rem, 2vw, 1.3rem) clamp(.9rem, 3vw, 2.2rem);
  transition: background-color var(--t-mid) var(--push),
              box-shadow var(--t-mid), transform var(--t-mid) var(--push),
              padding var(--t-mid) var(--push);
}
.head.is-compact {
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(23,23,23,.10), 0 6px 18px rgba(60,40,20,.10);
  padding-block: .5rem;
}
.head.is-hidden { transform: translate3d(0, -110%, 0); }

/* over a dark photograph the strip has not gathered yet, so the labels
   themselves take the light tone */
.head[data-tone="dark"]:not(.is-compact) { --head-ink: var(--paper); }
.head:not([data-tone="dark"]) { --head-ink: var(--ink); }
.head.is-compact { --head-ink: var(--ink); }

/* --- the wordmark ------------------------------------------------------- */
/* PLOP! with a little life in the baseline. Each letter is turned and nudged
   by its own amount; the word stays flat enough to read at a glance. */
.wordmark {
  display: inline-flex;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: -.02em;
  line-height: 1;
}
.wordmark__c {
  display: inline-block;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
  transition: transform var(--t-fast) var(--snap);
}
.wordmark__bang { margin-left: .04em; }
.head__mark { text-decoration: none; flex: 0 0 auto; }
.head__mark:hover .wordmark__c { transform: rotate(calc(var(--r, 0deg) * -1.4)) translateY(var(--y, 0)); }

/* on a dark photograph the coloured letters lose their contrast; the mark
   goes to paper white as one word rather than five colours */
.head[data-tone="dark"]:not(.is-compact) .wordmark__c { color: var(--paper) !important; }

/* --- the labels --------------------------------------------------------- */
.head__nav { flex: 1 1 auto; }
.head__labels {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.navlabel {
  display: inline-block;
  padding: .3rem .6rem;
  color: var(--head-ink);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: var(--track-label);
  text-decoration: none;
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--t-fast) var(--snap), background-color var(--t-fast);
}
.navlabel--head { background: rgba(250, 245, 233, .0); }
.head.is-compact .navlabel { background: transparent; }
.navlabel:hover {
  background: var(--butter);
  color: var(--ink);
  transform: rotate(calc(var(--tilt, 0deg) * -1)) translateY(-1px);
}

.head__cta { flex: 0 0 auto; --tilt: -1.5deg; }

/* --- the phone burger: two folds of paper ------------------------------- */
.head__burger {
  display: none;
  flex: 0 0 auto;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  background: var(--paper);
  box-shadow: var(--lift-scrap);
  cursor: pointer;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 5px;
  transform: rotate(-2deg);
}
.head__burger-fold {
  display: block;
  width: 22px; height: 3px;
  background: var(--ink);
  transition: transform var(--t-mid) var(--push);
}
html.is-menu-open .head__burger-fold:nth-child(1) { transform: translateY(4px) rotate(45deg); }
html.is-menu-open .head__burger-fold:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 899px) {
  .head__nav { display: none; }
  .head__burger { display: grid; }
  .head__cta { display: none; }
  .head { justify-content: space-between; }
}

/* ==========================================================================
   The phone menu: one sheet of paper, unfolded.

   Not a drawer sliding in from the side. The sheet is folded flat against the
   top edge and rotates open around it, and the navigation is printed on it.
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 39;
  display: grid;
  visibility: hidden;
  pointer-events: none;
}
html.is-menu-open .menu { visibility: visible; pointer-events: auto; }

.menu__sheet {
  background: var(--paper);
  background-image: var(--grain);
  padding: clamp(5rem, 16vw, 7rem) clamp(1.4rem, 6vw, 3rem) 3rem;
  box-shadow: 0 20px 60px rgba(60, 40, 20, .28);
  transform-origin: top center;
  transform: perspective(1400px) rotateX(-92deg);
  transition: transform 460ms var(--push);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: flex-start;
}
html.is-menu-open .menu__sheet { transform: perspective(1400px) rotateX(0deg); }

/* the crease, printed down the sheet */
.menu__sheet::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: clamp(4.4rem, 15vw, 6.4rem);
  border-top: 1px dashed rgba(23, 23, 23, .18);
  pointer-events: none;
}

.menu__list { display: flex; flex-direction: column; gap: .1rem; width: 100%; }
.navlabel--menu {
  font-family: var(--display);
  font-size: clamp(2rem, 11vw, 3.4rem);
  letter-spacing: var(--track-display);
  padding: .18rem .4rem;
  color: var(--ink);
}
.navlabel--menu:hover { background: var(--butter); }
.menu__cta { margin-top: 1.2rem; --tilt: -2deg; }
.menu__note { margin-top: .8rem; }

@media (min-width: 900px) {
  .menu { display: none; }
}