.logo-wrap{
  overflow: hidden; /* clears the float cleanly */
}

.logo-block{
  float: right;
  margin: 1.8rem 0 1.2rem 1.6rem; /* top | right | bottom | left */
  text-align: center;
}


.logo-image{
  width: 200px;
  height: 200px;
  display: block;
}

.logo-notes{
  max-width: none; /* allow natural flow */
}

.logo-notes p{
  margin-bottom: 1.4rem;
}

/* Mobile: stack logo above text */
@media (max-width: 640px){
  .logo-block{
    float: none;
    margin: 0 0 1.4rem 0;
  }

  .logo-image{
    margin-left: auto;
    margin-right: auto;
  }
}


/* --------------------------------------------------
   Optional logo experiment (private)
   Loaded only on logo.html
-------------------------------------------------- */

.brand-with-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Logo container */
.logo-mark {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo image */
.logo-mark img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  opacity: 0.85;   /* subdued, not logo-heavy */
}

/* Text stack */
.brand-text {
  display: flex;
  flex-direction: column;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .logo-mark {
    width: 48px;
    height: 48px;
  }
}

/* Force logo + text to sit side-by-side in the header (private test) */
.site-header .brand.brand-with-logo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
}

/* Logo sizing */
.site-header .brand.brand-with-logo .logo-mark {
  width: 45px;
  height: 45px;
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header .brand.brand-with-logo .logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.85;
}

/* Keep the text as a vertical stack */
.site-header .brand.brand-with-logo .brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0; /* prevents weird wrapping behaviour */
}