/* Ported unchanged from the prototype: dist/navigation.css. */
/* A quiet top bar leaves the collection room to breathe. */
.workspace { width: 100%; margin-left: 0; }
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 25px;
  height: 92px;
  padding: 0 4.5%;
  background: #f0ebe3;
  border-bottom: 1px solid #cdbb9855;
  position: relative;
  z-index: 40;
}
.top-brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; color: #252830; }
.top-brand > span:last-child { font: 19px var(--serif); letter-spacing: 2.5px; }
.top-brand small { display: block; font: 6px var(--sans); letter-spacing: 2px; margin-top: 6px; color: #806d5b; }
.top-monogram { font: 31px var(--serif); color: #a96b43; border: 1px solid #a96b4366; width: 35px; height: 40px; display: grid; place-items: center; }
.topbar .top-actions { justify-self: end; gap: 15px; }
.primary-nav { display: flex; align-items: center; gap: 5px; }
.primary-nav > a, .nav-more > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 11px;
  color: #736758;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.primary-nav > a.active, .primary-nav > a:hover,
.nav-more.active > summary, .nav-more > summary:hover, .nav-more[open] > summary {
  color: #252830;
  background: transparent;
  border-bottom-color: #a96b43;
}
.nav-more { position: relative; }
.nav-more summary { list-style: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary:focus-visible { outline: 2px solid #a96b43; outline-offset: 3px; }
.nav-more[open] > summary > span { transform: rotate(180deg); }
.more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 240px;
  padding: 15px 12px 10px;
  background: #192131;
  border: 1px solid #cdbb9866;
  box-shadow: 0 18px 50px #10172430;
  color: #f0ebe3;
}
.more-heading { display: block; padding: 7px 12px 12px; font-size: 7px; letter-spacing: 1.8px; color: #cdbb98; }
.more-panel a { display: flex; padding: 13px 12px; min-height: 44px; font-size: 11px; color: #e7ddd0; background: transparent; border-radius: 0; }
.more-panel a:hover, .more-panel a.active { color: #fff3e0; background: #cdbb9817; }
.more-panel .more-home { margin-top: 8px; border-top: 1px solid #cdbb9840; color: #cdbb98; font-size: 10px; }
.showcase-mode .top-brand, .chronicle-mode .top-brand, .landing .top-brand { color: #f0ebe3; }
.showcase-mode .top-brand small, .chronicle-mode .top-brand small, .landing .top-brand small { color: #cdbb98; }
.showcase-mode .primary-nav > a, .chronicle-mode .primary-nav > a,
.showcase-mode .nav-more > summary, .chronicle-mode .nav-more > summary { color: #c7bdaf; }
.showcase-mode .primary-nav > a.active, .chronicle-mode .primary-nav > a.active,
.showcase-mode .primary-nav > a:hover, .chronicle-mode .primary-nav > a:hover,
.showcase-mode .nav-more.active > summary, .chronicle-mode .nav-more.active > summary,
.showcase-mode .nav-more[open] > summary, .chronicle-mode .nav-more[open] > summary { color: #f0dfc7; border-bottom-color: #cdbb98; }
.landing .primary-nav { display: none; }
.landing .topbar { grid-template-columns: 1fr auto; }
.landing .top-actions .icon-button, .landing .top-actions .avatar { display: none; }
@media (max-width: 1100px) { .topbar .preview-badge { display: none; } }
@media (max-width: 760px) {
  .topbar { height: auto; padding: 17px 20px 0; gap: 14px; grid-template-columns: 1fr auto; }
  .top-brand { grid-column: 1; grid-row: 1; }
  .topbar .top-actions { grid-column: 2; grid-row: 1; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 0; width: 100%; }
  .primary-nav > a, .nav-more > summary { padding: 12px 15px; font-size: 11px; }
  .top-brand > span:last-child { font-size: 18px; }
  .topbar .top-actions { gap: 10px; }
  .more-panel { right: 0; width: min(240px, calc(100vw - 40px)); }
  .landing .topbar { padding: 17px 20px; height: auto; }
}
@media (max-width: 360px) {
  .primary-nav > a, .nav-more > summary { padding: 12px 11px; }
  .top-brand small { letter-spacing: 1.2px; }
}