:root {
  --shell-hamburger-bg: var(--red, #e0001a);
  --shell-hamburger-hover-bg: var(--shell-hamburger-bg);
  --shell-hamburger-bar: #fff;
  --shell-hamburger-radius: 8px;
  --shell-banner-width: 100%;
  --shell-banner-margin-left: 0;
  --shell-safe-top: env(safe-area-inset-top, 0px);
  --shell-safe-left: env(safe-area-inset-left, 0px);
  --shell-safe-right: env(safe-area-inset-right, 0px);
}

.heroBanner {
  display: block;
  width: var(--shell-banner-width);
  max-width: 100%;
  max-height: 250px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 24px;
  margin-left: var(--shell-banner-margin-left);
}

.navlinks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}

.navlinks a {
  color: var(--red, #e0001a);
  text-decoration: none;
  font-weight: 600;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 12px;
}

.journalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pageKicker {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red, #e0001a);
}

.pageLead {
  margin: 0;
}

.pageStatusStrip {
  margin-top: 12px;
}

.inlineInput {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 8px);
  background: #fff;
  color: var(--text, #1a1a1a);
  font: inherit;
}

.hamburger {
  position: fixed;
  left: calc(12px + var(--shell-safe-left));
  top: calc(12px + var(--shell-safe-top));
  z-index: 11008;
  border: none;
  background: var(--shell-hamburger-bg);
  color: #fff;
  width: 44px;
  height: 36px;
  padding: 6px;
  border-radius: var(--shell-hamburger-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hamburger:hover,
.hamburger:focus-visible {
  background: var(--shell-hamburger-hover-bg);
}

.hamburger-icon {
  display: inline-block;
  width: 18px;
  height: 14px;
  position: relative;
}

.hamburger-icon .bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--shell-hamburger-bar);
  border-radius: 2px;
  transition: transform .14s ease, box-shadow .14s ease;
  will-change: transform, box-shadow;
}

.hamburger-icon .bar:nth-child(1) {
  top: 2px;
}

.hamburger-icon .bar:nth-child(2) {
  top: 6px;
}

.hamburger-icon .bar:nth-child(3) {
  top: 10px;
}

.hamburger:hover .hamburger-icon .bar,
.hamburger:focus-visible .hamburger-icon .bar {
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.35);
}

.hamburger:hover .hamburger-icon .bar:nth-child(1),
.hamburger:focus-visible .hamburger-icon .bar:nth-child(1) {
  transform: scaleY(1.25) translateY(-0.5px);
}

.hamburger:hover .hamburger-icon .bar:nth-child(2),
.hamburger:focus-visible .hamburger-icon .bar:nth-child(2) {
  transform: scaleY(1.35);
}

.hamburger:hover .hamburger-icon .bar:nth-child(3),
.hamburger:focus-visible .hamburger-icon .bar:nth-child(3) {
  transform: scaleY(1.25) translateY(0.5px);
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
  transform: translateX(-100%);
  transition: transform .28s ease;
  z-index: 11011;
  padding: calc(18px + var(--shell-safe-top)) calc(12px + var(--shell-safe-right)) 18px calc(12px + var(--shell-safe-left));
  overflow: auto;
  will-change: transform;
}

.sidebar-inner {
  max-width: 260px;
  margin: 0 auto;
}

.sidebar-header {
  font-size: 18px;
  margin-bottom: 14px;
  color: var(--red, #e0001a);
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-list a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: #111;
  text-decoration: none;
}

.sidebar-list a:hover {
  background: #f5f5f5;
}

.sidebar-open .sidebar {
  transform: translateX(0);
}

.sidebar-open #hamburger {
  opacity: 0 !important;
  transform: scale(.96) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: 0 !important;
  transition: opacity .18s ease, transform .12s ease !important;
}

.sidebar .sidebar-close {
  position: absolute;
  top: calc(10px + var(--shell-safe-top));
  right: calc(10px + var(--shell-safe-right));
  z-index: 11013;
  border: none;
  background: transparent;
  color: var(--red, #e0001a);
  font-size: 22px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
  display: none;
}

.sidebar .sidebar-close:hover {
  background: rgba(224, 0, 26, 0.06);
}

.sidebar-open .sidebar .sidebar-close,
.sidebar-closing .sidebar .sidebar-close {
  display: block;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  z-index: 11009;
}

.sidebar-open .sidebar-backdrop,
.sidebar-closing .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .sidebar {
    width: 220px;
    max-width: none;
  }

  .sidebar-inner {
    max-width: 200px;
  }
}

@media (max-width: 640px) {
  .heroBanner {
    max-height: 140px;
    margin-bottom: 16px;
  }

  .journalHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .sidebar {
    width: min(320px, 86vw);
  }

  .sidebar-list a {
    padding: 10px 12px;
  }
}