/* Shared site header: used by every page. Relies on the page tokens
   --backdrop, --ink, --quiet, --line, --panel, --accent, --display, --body. */
/* palette: warm paper background, vermilion line icons (proposal, adapted from the reference) */
.site-header {
  --menu-bg: #FDFCF8; --menu-line: #ECE7DC; --icon: #E5532A;
  --brand-ink: #A93A1B; --brand-tint: #FBE8DF;
  position: relative; z-index: 50; background: var(--menu-bg); border-bottom: 1px solid var(--menu-line); font-family: var(--body);
}
/* outline icons next to the menu links */
.nav-icon { width: 30px; height: 30px; margin: -5px 0; flex: none; fill: none; stroke: var(--icon); stroke-width: 1; stroke-linejoin: miter; }
.site-header__inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 40px;
}
.site-name { font: 700 24px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }

/* menu items: plain words, the current page in ink, the rest quiet (as on mobbin) */
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav > a, .site-menu > summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  font: 500 16px/1 var(--body); color: var(--quiet); text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-nav > a:hover, .site-menu > summary:hover, .site-menu[open] > summary { color: var(--ink); background: #F5F2EA; }
/* active section: a tinted pill in the brand colour */
.site-nav > a[aria-current="page"], .site-menu.is-current > summary { color: var(--brand-ink); background: var(--brand-tint); }
.site-menu > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  transition: transform .15s;
}
.site-menu[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }

/* dropdown: one row per case study, thumbnail + client + catchy title */
.site-menu { position: relative; display: flex; align-items: center; }   /* size to the summary, so both pills sit on one line */
.site-menu__panel {
  position: absolute; top: calc(100% + 10px); left: 0; width: 460px; padding: 8px;
  background: var(--menu-bg); border: 1px solid var(--menu-line); border-radius: 14px;
  box-shadow: 0 16px 40px -16px rgba(20, 22, 40, .25);
}
.site-menu__item {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center;
  padding: 8px; border-radius: 10px; color: var(--ink); text-decoration: none;
}
a.site-menu__item:hover { background: #F5F2EA; }
/* the case study you are on */
.site-menu__item[aria-current="page"] { background: var(--brand-tint); }
.site-menu__item img { width: 96px; height: 64px; object-fit: cover; object-position: left top; border-radius: 6px; border: 1px solid var(--line); display: block; }
.site-menu__label { display: block; font: 400 13px/1.3 var(--body); color: var(--quiet); }
.site-menu__title { display: block; margin-top: 2px; font: 700 17px/1.25 var(--display); letter-spacing: -0.01em; }
.site-menu__soon { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--panel); font: 500 12px/1.4 var(--body); color: var(--quiet); }
.site-menu__item.is-soon { cursor: default; }
.site-menu__item.is-soon img { opacity: .6; }

@media (max-width: 720px) {
  .site-header__inner { flex-wrap: wrap; gap: 8px 16px; }
  .site-nav { flex-basis: 100%; margin-left: -12px; }   /* own row under the name; align text with the name */
  .site-name { font-size: 20px; }
  .site-menu { position: static; }
  .site-menu__panel { left: 16px; right: 16px; width: auto; }
  .site-menu__item { grid-template-columns: 72px 1fr; }
  .site-menu__item img { width: 72px; height: 48px; }
}