/* Opt-in illustration composition layer. Load after pages.css. */
.hb-art-frame {
  --hb-art-ink: var(--ink, #1c2833);
  --hb-art-muted: var(--feather, #526f83);
  --hb-art-accent: var(--coral, #e5795e);
  --hb-art-surface: var(--blue, #e4edf0);
  --hb-art-stroke: 2.2px;
  --hb-art-pad: clamp(22px, 3vw, 34px);
  position: relative;
  isolation: isolate;
  min-width: 0;
  background: var(--hb-art-surface);
  border-radius: var(--hb-art-corner, 6px 28px 6px 6px);
}
.hb-art-scene { display: block; min-width: 0; width: 100%; margin: 0; }
.hb-art-scene > img, img.hb-art-scene { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
/* These rules reach inline SVG only. External SVG files need matching source values. */
.hb-art-line { fill: none; stroke: var(--hb-art-ink); stroke-width: var(--hb-art-stroke); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hb-art-line--muted { stroke: var(--hb-art-muted); }
.hb-art-line--accent { stroke: var(--hb-art-accent); }

/* Equal cover proportions, with the existing stagger remaining on the articles. */
.hb-art-library .hb-page-guide-cover.hb-art-guide {
  display: grid;
  grid-template-rows: auto auto minmax(112px, 1fr) auto;
  gap: 17px;
  min-height: 440px;
  padding: var(--hb-art-pad);
  border-radius: 4px;
}
.hb-art-guide > span:first-child { margin: 0; }
.hb-art-guide h2 { max-width: 16ch; font-size: clamp(32px, 3.8vw, 47px); line-height: 1.04; margin: 0; }
.hb-art-guide > .hb-art-scene, .hb-art-guide > .hb-page-guide-line {
  position: relative;
  inset: auto;
  width: calc(100% + var(--hb-art-pad) * 2);
  height: auto;
  min-height: 112px;
  margin-inline: calc(var(--hb-art-pad) * -1);
  align-self: center;
}
.hb-art-guide > .hb-page-guide-line { aspect-ratio: 600 / 170; }
.hb-art-guide .hb-page-cover-foot { margin: 0; padding-top: 0; font-size:14px !important; align-self: end; }
.hb-art-guide--supplier { --hb-art-surface: var(--coral, #e5795e); }

/* The scene gets its own space; the title and note remain native HTML. */
.hb-page-jobsite.hb-art-jobsite {
  display: grid;
  grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr);
  grid-template-areas: 'title art' 'note art';
  gap: 24px;
  padding: var(--hb-art-pad);
  min-height: 0;
  overflow: hidden;
}
.hb-art-jobsite .hb-page-jobsite-title { grid-area: title; position: static; max-width: none; padding: 0; margin: 0; }
.hb-art-jobsite .hb-page-jobsite-title p { max-width: 25ch; }
.hb-art-jobsite > .hb-art-scene, .hb-art-jobsite > img { grid-area: art; width: 100%; max-width: 100%; height: auto; margin: 0; align-self: center; }
.hb-art-jobsite .hb-page-site-note { grid-area: note; position: relative; inset: auto; width: min(100%, 225px); max-width: none; padding: 16px 18px; align-self: end; transform: rotate(2deg); }
.hb-art-jobsite .hb-page-site-note p { font-size:14px; }

/* Keep the friendly arch, but bring its cable endpoints inside the painted area. */
.hb-page-origin-bird.hb-art-origin { --hb-art-corner: 45% 45% 8px 8px; padding: 32px 24px 66px; min-height: 410px; overflow: hidden; }
.hb-art-origin::before { inset: 110px 28px 72px; transform: rotate(-8deg); }
.hb-art-origin img { width: 72%; height: auto; max-width: 280px; max-height: 320px; object-fit: contain; }
.hb-art-origin > span { bottom: 22px; left: 24px; }

@media (max-width: 700px) {
  .hb-art-library { grid-template-columns: minmax(0, 1fr); }
  .hb-art-library .hb-page-guide:nth-child(2) { padding-top: 0; }
  .hb-art-library .hb-page-guide-cover.hb-art-guide { min-height: 410px; gap: 16px; }
  .hb-art-guide h2 { font-size: clamp(31px, 8.5vw, 42px); }
  .hb-page-jobsite.hb-art-jobsite { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'title' 'art' 'note'; gap: 22px; }
  .hb-art-jobsite .hb-page-jobsite-title h2 { max-width: 20ch; }
  .hb-art-jobsite .hb-page-site-note { justify-self: end; transform: rotate(1.5deg); }
  .hb-page-origin-bird.hb-art-origin { min-height: 350px; }
  .hb-art-origin img { max-height: 270px; width: 72%; }
}

/* Shared optical roles and surfaces, including contrast on the coral cover. */
.hb-art-library .hb-page-guide-cover.hb-art-guide--supplier{background:var(--coral)}
.hb-art-mini{object-fit:contain;stroke:none;fill:none}
.hb-art-switchboard{--hb-art-surface:var(--peach);border-radius:6px 28px 6px 6px}
.hb-art-switchboard .hb-page-switchboard-in>span,.hb-art-switchboard .hb-page-map-caption{color:var(--soft)!important}
.hb-art-switchboard .hb-page-switchboard-routes:before,.hb-art-switchboard .hb-page-switchboard-routes>div:before{border-color:var(--feather)}
.hb-art-switchboard .hb-page-switchboard-routes i,.hb-art-switchboard .hb-page-switchboard-routes i:after{border-color:var(--ink)}
.hb-art-desk-cue{display:block;width:100%;max-width:290px;margin-top:17px;height:auto}
.hb-page-origin-bird.hb-art-origin{align-items:flex-end}
.hb-art-origin:before{content:none}
.hb-art-origin img.hb-art-cord{position:absolute;width:110%;max-width:none;max-height:none;height:auto;left:-5%;bottom:60px;margin:0;z-index:0;pointer-events:none;filter:none}
.hb-art-origin img.hb-art-mascot{position:relative;z-index:1}
.hb-art-origin>span{z-index:2}
.hb-art-contact-perch{position:relative;height:175px;margin-top:25px;overflow:hidden}
.contact-aside .hb-art-contact-perch>img:not(.hb-art-contact-cord){position:absolute;right:0;bottom:0;width:130px;height:auto;margin:0;z-index:1}
.contact-aside .hb-art-contact-perch>img.hb-art-contact-cord{position:absolute;left:-5%;bottom:-16px;width:110%;max-width:none;height:auto;margin:0;pointer-events:none}
@media(max-width:650px){.hb-art-contact-perch{display:none}}

/* Give the approved mascot its original presence and keep small cover rows readable. */
.hb-art-origin img.hb-art-mascot{width:100%;max-width:300px;max-height:none}
@media(max-width:700px){.hb-art-origin img.hb-art-mascot{width:100%;max-width:260px;max-height:none}}
@media(max-width:650px){
 .audience-card{grid-template-columns:minmax(0,1fr) 70px;gap:14px 18px}
 .audience-card>div{display:contents}
 .audience-card h3,.audience-card p{grid-column:1/-1;max-width:none}
 .audience-card p{margin:0}
 .audience-card .text-link{grid-column:1;margin:0}
 .audience-card img.hb-art-mini{grid-column:2;width:70px;height:70px;align-self:end}
}

/* One clear connection, followed by a brief destination acknowledgement. */
.hb-art-drawing{display:block;width:100%;height:auto;max-width:100%;overflow:hidden}
.hb-art-jobsite-drawing>.hb-art-narrow{display:none}
.hb-line-trace{display:none}
@media(prefers-reduced-motion:no-preference){
 .hb-art-drawing.is-playing .hb-line-base{opacity:.3}
 .hb-art-drawing.is-playing .hb-line-trace{display:inline;stroke-dasharray:1;stroke-dashoffset:1;animation:hb-cord-connect 1050ms cubic-bezier(.38,.12,.2,1) both}
 .hb-art-drawing.is-playing .hb-line-handoff.hb-line-trace{animation-duration:320ms;animation-delay:880ms}
 .hb-art-drawing.is-playing .hb-phone-receiver{transform-box:fill-box;transform-origin:50% 90%;animation:hb-desk-answer 430ms ease-out 1130ms both}
 .hb-art-drawing.is-playing .hb-house-window{animation:hb-window-answer 430ms ease-out 1130ms both}
 .hb-art-narrow.is-playing .hb-line-connection.hb-line-trace{animation-duration:650ms}
 .hb-art-narrow.is-playing .hb-line-handoff.hb-line-trace{animation-delay:520ms}
 .hb-art-narrow.is-playing .hb-house-window{animation-delay:800ms}
}
@keyframes hb-cord-connect{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hb-desk-answer{0%,100%{transform:rotate(0)}35%{transform:rotate(-5deg)}68%{transform:rotate(2deg)}}
@keyframes hb-window-answer{0%,100%{fill:#f6f1e8}45%{fill:#f1c7b4}}
.motion-paused .hb-art-drawing .hb-line-base{opacity:1}
.motion-paused .hb-art-drawing .hb-line-trace{display:none!important;animation:none!important}
.motion-paused .hb-art-drawing .hb-phone-receiver,.motion-paused .hb-art-drawing .hb-house-window{animation:none!important}
@media(max-width:700px){
 .hb-art-jobsite-drawing>.hb-art-drawing{display:none}
 .hb-art-jobsite-drawing>.hb-art-narrow{display:block}
}
@media(max-width:360px){
 .hb-art-drawing g{stroke-width:1.5}
 .hb-art-drawing path[stroke-width="2.8"]{stroke-width:2.2}
 .hb-art-drawing path[stroke-width="1.5"]{stroke-width:1.1}
}