/* One workshop frame and header for Home, Changes and Tuner.
   Dimensions and type follow the approved header in dist/style.css. */
body.bean-site-frame,
.bean-tuner.bean-site-frame {
  --site-paper: #f4f3eb;
  --site-ink: #282b27;
  --site-rule: #c5c7ba;
  --site-accent: #8c4038;
  --site-gutter: 32px;
  margin: 12px;
  max-width: none;
  border: 1px solid var(--site-rule);
  background: var(--site-paper);
  color: var(--site-ink);
  color-scheme: light;
}

:is(.home-page, #bean-changes, .bean-tuner) .bean-site-header {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 88px;
  min-height: 0;
  padding: 0;
  border-bottom: 1px solid var(--site-rule);
}
.bean-site-header *, .bean-site-header *::before, .bean-site-header *::after { box-sizing: border-box; }
:is(.home-page, #bean-changes, .bean-tuner) .bean-site-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  flex-shrink: 0;
  color: var(--site-ink);
  text-decoration: none;
  font-family: 'DM Sans', Arial, sans-serif;
}
.bean-site-header .bean-site-brand img { display: block; width: 95px; height: 49px; object-fit: contain; }
.bean-site-header .bean-site-brand>span { border-left: 1px solid #aeb1a3; padding-left: 16px; font-size: 11px; font-weight: 600; letter-spacing: 2px; line-height: 1.7; }
.bean-site-header .bean-site-brand small { font-size: 7.7px; letter-spacing: 1px; font-weight: 400; }
:is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav { display: flex; align-items: stretch; margin: 0; font: 11px 'IBM Plex Mono', monospace; text-transform: uppercase; }
:is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>a,
:is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px;
  border: 0;
  border-left: 1px solid var(--site-rule);
  border-radius: 0;
  background: transparent;
  color: var(--site-ink);
  font: inherit;
  text-transform: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
:is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>.bean-site-custom { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 24px; color: var(--site-accent); }
.bean-site-header .bean-site-custom small { font: 7.7px 'IBM Plex Mono', monospace; letter-spacing: .5px; color: #76796f; }
:is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>:hover { background: #e6e7dc; }
:is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>[aria-current="page"] { background: #ece5dd; color: var(--site-accent); }
.bean-site-header :is(a,button):focus-visible { outline: 2px solid var(--site-accent); outline-offset: -4px; }

@media (min-width: 761px) and (max-width: 1000px) {
  body.bean-site-frame, .bean-tuner.bean-site-frame { --site-gutter: 26px; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>a { padding: 20px; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>.bean-site-custom { padding: 16px 19px; }
}
@media (max-width: 760px) {
  body.bean-site-frame, .bean-tuner.bean-site-frame { margin: 7px; --site-gutter: 20px; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header { height: 73px; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-brand { padding: 10px 12px; gap: 8px; }
  .bean-site-header .bean-site-brand img { width: 65px; height: 38px; }
  .bean-site-header .bean-site-brand>span { font-size: 7.7px; padding-left: 8px; letter-spacing: 1.3px; }
  .bean-site-header .bean-site-brand small { font-size: 6.05px; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav { font-size: 8.8px; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>a,
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>.bean-site-custom { padding: 9px; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>.bean-site-builds,
  .bean-site-header .bean-site-custom small { display: none; }
}
@media (max-width: 360px) {
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header { height: auto; flex-wrap: wrap; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-brand { min-height: 64px; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav { width: 100%; border-top: 1px solid var(--site-rule); }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>a,
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>.bean-site-custom { flex: 1; min-height: 44px; align-items: center; }
  :is(.home-page, #bean-changes, .bean-tuner) .bean-site-header nav>a[href="/tuner/"] { border-left: 0; }
}
@media print {
  body.bean-site-frame, .bean-tuner.bean-site-frame { margin: 0; border: 0; }
  .bean-site-header { display: none !important; }
}