/* ==========================================================================
   Header — cream branding band that sticks to the top, plus the full-screen
   hamburger menu.
   ========================================================================== */

/* Fixed rather than sticky: the menu overlay locks body scrolling, and a
   sticky header stops resolving reliably once its scroll container changes.
   body carries a matching padding-top so nothing hides underneath at rest. */
.tb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--c-cream);
}

.tb-header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  height: var(--header-h);
  transition:
    height 520ms var(--motion-easing),
    background-color 520ms var(--motion-easing);
}

/* Hairline appears only once the page has moved */
.tb-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--c-rule-dark);
  opacity: 0;
  transition: opacity 400ms var(--motion-easing);
}

.tb-header.is-scrolled::after {
  opacity: 1;
}

.tb-header.is-scrolled .tb-header__bar {
  height: var(--header-h-scrolled);
}

.tb-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.tb-header__logo img {
  height: var(--logo-h);
  width: auto;
  transition: height 520ms var(--motion-easing), opacity 320ms var(--motion-easing), filter 320ms var(--motion-easing);
}

.tb-header__tools {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  flex: 0 0 auto;
}

html[data-page="book"] .tb-header__bar.tb-shell {
  gap: 12px;
  padding-left: max(24px, var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(24px, var(--gutter), env(safe-area-inset-right, 0px));
}

html[data-page="book"] .tb-header__logo {
  min-width: 0;
  flex: 0 1 auto;
}

html[data-page="book"] .tb-header__logo img {
  max-width: 52vw;
  width: auto;
}

html[data-page="book"] .tb-header__tools {
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  html[data-page="book"] .tb-header__page {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  html[data-page="book"] .tb-header__page {
    display: none;
  }
}

.tb-header__page {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(14px, calc(22 * var(--u)), 18px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--c-green);
  pointer-events: none;
  white-space: nowrap;
}

.tb-header--overlay {
  background: transparent;
}

.tb-header--overlay::after {
  opacity: 0;
}

.tb-header--overlay .tb-header__logo img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  opacity: 0.94;
}

.tb-header--overlay .tb-burger {
  color: var(--c-cream);
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.5));
}

.tb-header--overlay .tb-header__page {
  color: var(--c-cream);
  text-shadow: var(--type-on-photo-shadow);
}

/* Open menu sits on green, so the page name matches the X. */
.tb-header.is-menu-open .tb-header__page {
  color: var(--c-cream);
  text-shadow: none;
}

@media (max-width: 860px) {
  .tb-header__tools {
    gap: 2.2vw;
  }

  .tb-header__page,
  .tb-header--overlay .tb-header__page {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-synthesis: none;
    font-kerning: none;
    letter-spacing: 0;
    text-shadow: none;
    -webkit-text-stroke: 0;
  }
}

@media (hover: hover) {
  .tb-header__logo:hover img {
    opacity: 0.72;
  }
}

/* ------------------------------------------------------------- hamburger */

.tb-burger {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(6 * var(--u));
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  align-items: flex-end;
  color: var(--c-green);
  transition: color 420ms var(--motion-easing);
}

.tb-burger__line {
  display: block;
  width: calc(30 * var(--u));
  height: calc(2 * var(--u));
  background: currentColor;
  transition:
    transform 560ms var(--motion-easing),
    opacity 300ms var(--motion-easing),
    width 560ms var(--motion-easing);
}

@media (hover: hover) {
  .tb-burger:hover .tb-burger__line:nth-child(2) {
    width: calc(22 * var(--u));
  }
}

/* Collapses into an X while the overlay is open */
.tb-burger[aria-expanded="true"] {
  color: var(--c-cream);
}
.tb-burger[aria-expanded="true"] .tb-burger__line:nth-child(1) {
  transform: translateY(calc(8 * var(--u))) rotate(45deg);
}
.tb-burger[aria-expanded="true"] .tb-burger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.tb-burger[aria-expanded="true"] .tb-burger__line:nth-child(3) {
  width: calc(30 * var(--u));
  transform: translateY(calc(-8 * var(--u))) rotate(-45deg);
}

/* The bar turns green behind the open overlay so the logo stays legible */
.tb-header.is-menu-open {
  background: var(--c-green);
}
.tb-header.is-menu-open::after {
  opacity: 0;
}
/* Knock the green lockup back to near-white so it reads on the open panel */
.tb-header.is-menu-open .tb-header__logo img {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

/* ---------------------------------------------------------------- overlay */

.tb-menu {
  position: fixed;
  inset: 0;
  /* Sits inside .tb-header, so this is relative to .tb-header__bar (z-index 2)
     — the bar must stay on top so the logo and close button remain usable. */
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--c-green);
  color: var(--c-cream);
  padding-top: var(--header-h);
  /* clip-path wipe keeps the panel from simply popping in */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path 900ms var(--motion-easing),
    visibility 0ms linear 900ms;
}

.tb-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition:
    clip-path 900ms var(--motion-easing),
    visibility 0ms linear 0ms;
}

.tb-menu__list {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

.tb-menu__item {
  overflow: hidden;
}

.tb-menu__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: calc(32 * var(--u));
  font-family: var(--f-display);
  font-size: var(--menu-item-size, calc(88 * var(--u)));
  font-weight: 500;
  line-height: 1.12;
  color: var(--c-cream);
  opacity: 0.62;
  transform: translate3d(0, calc(105% * var(--motion-scale)), 0);
  transition:
    transform 900ms var(--motion-easing) var(--menu-delay, 0ms),
    opacity 600ms var(--motion-easing);
}

.tb-menu.is-open .tb-menu__link {
  transform: none;
}

@media (hover: hover) {
  .tb-menu__link:hover {
    opacity: 1;
  }
}

.tb-menu__index {
  font-family: var(--f-label);
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.55;
}

.tb-menu__link[aria-current="page"] {
  opacity: 1;
}

.tb-menu__label {
  position: relative;
}

/* Hover sweep underline on non-active items */
.tb-menu__label::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.08em;
  width: 100%;
  height: calc(2 * var(--u));
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 620ms var(--motion-easing);
}

@media (hover: hover) {
  .tb-menu__link:hover .tb-menu__label::before {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.tb-menu__foot {
  margin-top: calc(80 * var(--u));
  display: flex;
  flex-wrap: wrap;
  gap: calc(56 * var(--u));
  font-family: var(--f-label);
  font-size: calc(14 * var(--u));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(239, 236, 231, 0.7);
  opacity: 0;
  transition: opacity 700ms var(--motion-easing) 420ms;
}

.tb-menu.is-open .tb-menu__foot {
  opacity: 1;
}

.tb-menu__foot a:hover {
  color: var(--c-cream);
}

.tb-menu__head {
  display: none;
}

@media (min-width: 861px) {
  .tb-header.is-menu-open {
    background: var(--c-cream);
  }

  .tb-header.is-menu-open .tb-header__logo img {
    filter: none;
    opacity: 1;
  }

  .tb-burger[aria-expanded="true"] {
    color: var(--c-green);
  }

  .tb-header.is-menu-open.tb-header--overlay .tb-burger {
    filter: none;
  }

  .tb-header.is-menu-open .tb-header__page {
    color: var(--c-green);
    text-shadow: none;
  }

  .tb-menu {
    position: absolute;
    inset: auto;
    top: calc(100% + 10px);
    right: var(--gutter);
    left: auto;
    width: 320px;
    max-width: calc(100vw - (2 * var(--gutter)));
    padding: 22px 26px 26px;
    background: var(--c-cream);
    color: var(--c-green);
    clip-path: none;
    box-shadow: 0 18px 48px rgba(0, 84, 58, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc(-10px * var(--motion-scale)), 0);
    transition:
      opacity 320ms var(--motion-easing),
      transform 320ms var(--motion-easing),
      visibility 0ms linear 320ms;
  }

  .tb-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    clip-path: none;
    transition:
      opacity 320ms var(--motion-easing),
      transform 320ms var(--motion-easing),
      visibility 0ms linear 0ms;
  }

  .tb-menu > .tb-shell {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .tb-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 18px;
  }

  .tb-menu__title {
    font-family: var(--f-label);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-green);
  }

  .tb-menu__list {
    gap: 10px;
  }

  .tb-menu__link {
    font-size: 28px;
    font-variation-settings: "opsz" 48;
    color: var(--c-green);
    opacity: 0.72;
    transform: none;
    gap: 0;
  }

  .tb-menu.is-open .tb-menu__link {
    transform: none;
  }

  .tb-menu__link[aria-current="page"] {
    opacity: 1;
  }

  .tb-menu__foot {
    display: none;
  }
}

@media (max-width: 860px), (max-height: 820px) {
  /* Start the list under the lockup instead of centering it into the header. */
  .tb-menu {
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(8vw, env(safe-area-inset-bottom));
  }

  .tb-menu > .tb-shell {
    width: 100%;
    padding-top: 3vw;
  }
}

@media (max-width: 860px) {
  .tb-menu__list {
    gap: 2vw;
  }

  .tb-menu__foot {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 10vw;
    gap: 2.4vw;
  }

  .tb-burger {
    gap: 1.4vw;
    width: 9.8vw;
    height: 9.8vw;
  }

  .tb-burger__line {
    width: 7vw;
    height: 0.46vw;
  }

  @media (hover: hover) {
    .tb-burger:hover .tb-burger__line:nth-child(2) {
      width: 5.1vw;
    }
  }

  .tb-burger[aria-expanded="true"] .tb-burger__line:nth-child(1) {
    transform: translateY(1.86vw) rotate(45deg);
  }
  .tb-burger[aria-expanded="true"] .tb-burger__line:nth-child(3) {
    width: 7vw;
    transform: translateY(-1.86vw) rotate(-45deg);
  }
}