/* NorCal Shiba mascot illustrations: decorative companions beside section headings.
   Static, no motion. Sized by visible artwork via --mascot-w set per image. */
.mascot-art{display:block;height:auto;max-width:100%;pointer-events:none;user-select:none}

/* Side placement: heading copy left, illustration in its own right column */
.has-mascot:not(.has-mascot-top){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,4vw,56px);align-items:end}
.has-mascot:not(.has-mascot-top)>:not(.mascot-art){grid-column:1}
.has-mascot:not(.has-mascot-top)>.mascot-art{grid-column:2;grid-row:1/span 6;align-self:end;width:var(--mascot-w,180px);margin:0 clamp(0px,2vw,24px) 0 0}

/* Top placement: illustration above the eyebrow or heading */
.has-mascot-top{display:flow-root}
.mascot-top{float:right;width:calc(var(--mascot-w,150px) * .95);margin:0 0 12px 24px}

/* Articles: small figure floated beside the first section of the body */
.post-body .mascot-aside{float:right;width:var(--mascot-w,160px);margin:4px 0 16px 28px}
.post-body .mascot-aside img{width:100%;height:auto;display:block;box-shadow:none!important;border-radius:0!important;background:none!important;border:0!important;margin:0!important;padding:0!important}
.post-body h2{clear:none}

/* Thanks page */
.inner:has(>.mascot-thanks){display:flow-root}
.mascot-thanks{float:right;width:var(--mascot-w,170px);margin:0 0 12px 24px}

@media (max-width:640px){
  .has-mascot:not(.has-mascot-top){column-gap:14px;align-items:center}
  .has-mascot:not(.has-mascot-top)>.mascot-art{grid-row:1/span 2;align-self:center;width:calc(var(--mascot-w,180px) * .5);margin:0}
  .has-mascot:not(.has-mascot-top)>p{grid-column:1/-1}
  .mascot-top{width:calc(var(--mascot-w,150px) * .55);margin:0 0 8px 14px}
  .post-body .mascot-aside{width:calc(var(--mascot-w,160px) * .66);margin:2px 0 10px 16px}
  .mascot-thanks{width:calc(var(--mascot-w,170px) * .55);margin:0 0 8px 14px}
}
@media print{.mascot-art,.mascot-aside{display:none}}
.vp-section-heading.has-mascot{max-width:none}

/* Home about: mascot closes the text column at lower right, beside the links */
.mascot-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.mascot-row>.vp-actions{margin-bottom:6px;flex:1;min-width:0}
.mascot-close{width:156px;flex:none;margin:0 12px 0 0}
@media (max-width:640px){.mascot-row{gap:12px}.mascot-close{width:92px;margin:0}}

/* Small phones: links take the full width, mascot closes the column on its own line */
@media (max-width:379px){
  .mascot-row{flex-wrap:wrap;gap:4px}
  .mascot-row>.vp-actions{flex:1 1 100%;margin-bottom:0}
  .mascot-close{width:84px;margin:0 4px 0 auto}
}