/* The original JPG stays intact. This window isolates its monogram from
   the square white margins and tiny wordmark; it does not stretch the mark. */
.brand-signature .brand-symbol {
  display: block;
  position: relative;
  overflow: hidden;
  width: 50px;
  aspect-ratio: 340 / 840;
  flex: none;
  font: inherit;
  mix-blend-mode: multiply;
}
.brand-signature .brand-symbol img {
  position: absolute;
  display: block;
  width: 423.529412%;
  height: auto;
  max-width: none;
  left: -161.764706%;
  top: -23.809524%;
  object-fit: contain;
}
.brand.brand-signature {
  position: relative;
  min-height: 76px;
  padding-left: 106px;
  gap: 0;
  flex: none;
  white-space: normal;
}
.brand-signature .brand-ribbon {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  top: -18px;
  left: 0;
  width: 82px;
  height: 148px;
  padding-top: 10px;
  background: #e3e9e8;
  border-top: 3px solid var(--blue, #007687);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 94%, 0 100%);
  font: inherit;
}
.brand-signature .brand-type {
  display: block;
  font: 600 32px/.94 var(--serif);
  color: var(--ink);
}
.brand-signature .brand-type small {
  display: block;
  margin-top: 10px;
  font: 12px/1.4 var(--sans);
  color: var(--muted);
}
.brand-signature:focus-visible { outline-offset: 7px; }
.brand-signature:focus-visible .brand-ribbon { background: #cbd9db; }
/* The ribbon fits above the first content row; it needs no full-width spacer. */
/* Keep the overhanging ribbon above the isolated homepage photo layer. */
.site-header { position: relative; z-index: 1; margin-bottom: 0; }
.site-header .header-inner { min-height: 112px; padding-top: 18px; padding-bottom: 18px; }
.editor-header { min-height: 112px; padding-top: 18px; padding-bottom: 18px; margin-bottom: 0; }
.editor-header .brand-type small { font-size: 14px; letter-spacing: .08em; }
/* Notices can begin immediately below the header, beside the ribbon. */
@media (min-width: 651px) {
  .preview-banner > .container { padding-left: 106px; }
  .site-header ~ .storage-warning { padding-left: max(146px, calc((100% - 1200px) / 2 + 106px)); }
}
@media (max-width: 1120px) {
  .site-header .brand-type small { display: none; }
}
@media (max-width: 900px) {
  .site-header nav { margin-top: 32px; }
}
@media (max-width: 650px) {
  .brand.brand-signature { min-height: 76px; padding-left: 74px; }
  .brand-signature .brand-ribbon { width: 58px; height: 106px; top: -13px; padding-top: 10px; }
  .brand-signature .brand-symbol { width: 34px; }
  .brand-signature .brand-type { font-size: 26px; }
  .brand-signature .brand-type small { font-size: 12px; margin-top: 7px; }
  .site-header .header-inner { min-height: 102px; padding-top: 13px; padding-bottom: 13px; gap: 12px; }
  .site-header nav { margin-top: 0; }
  .editor-header { min-height: 102px; padding-top: 13px; padding-bottom: 13px; gap: 12px; flex-wrap: wrap; }
  .editor-header .header-actions { margin-left: auto; }
}
@media (max-width: 380px) {
  .brand-signature .brand-type { font-size: 24px; }
  .editor-header .header-actions { padding-left: 74px; }
}