/* The Homebound Collection (22 Sep 2026): on the amber the header's words
   wear, navy words on it, headed the way the other collections are, with the
   MNL → DVO route where the YinYang mark and the sun sit. */
.hb { background: var(--nav-ink, #FFB627); color: var(--nav-bg, #001E2D); padding: clamp(60px, 9vh, 110px) 16px clamp(70px, 10vh, 120px); overflow: hidden; }
.hb-head { display: grid; gap: 8px; justify-items: center; text-align: center; margin: 0 0 clamp(40px, 6vh, 70px); }
.hb-head small { font: 600 10px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--red, #AE2012); }
.hb-head h2 { margin: 0; font: 400 clamp(34px, 5vw, 72px)/1 'Anton', var(--display); text-transform: uppercase; letter-spacing: .01em; }
.hb-line { margin: 6px 0 4px; font: italic 400 clamp(17px, 1.6vw, 22px)/1.45 var(--body); opacity: .88; }
.hb-head > span { font: 600 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .6; }

.hb-route { width: min(300px, 70vw); height: auto; overflow: visible; margin-bottom: 6px; }
.hb-arc { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; opacity: .55; }
.hb-pin { fill: var(--nav-bg, #001E2D); }
.hb-code { font: 700 13px var(--mono); letter-spacing: .2em; fill: var(--nav-bg, #001E2D); }
.hb-plane path { fill: var(--red, #AE2012); }
/* before it flies, the plane waits on MNL */
.hb-plane { transform: translate(44px, 92px) rotate(-33deg); }
.hb.is-flown .hb-plane, .hb.is-flying .hb-plane { transform: none; }

/* the two designs, 100px apart picture to picture, labelled as the Shop is */
.hb-row { display: flex; justify-content: center; align-items: flex-start; column-gap: 81px; row-gap: 50px; flex-wrap: wrap; }
.hb-one { margin: 0; display: grid; grid-template-columns: auto clamp(220px, 26vw, 380px); column-gap: 10px; }
.hb-batch { grid-column: 1; grid-row: 1; align-self: start; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 600 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.hb-shot { grid-column: 2; grid-row: 1; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: rgba(0,30,45,.08); box-shadow: 0 22px 44px -28px rgba(0,30,45,.6); }
.hb-shot picture, .hb-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transition: transform .8s ease; }
.hb-shot:hover img { transform: scale(1.04); }
.hb-one figcaption { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 10px; text-align: right; }
.hb-one figcaption b { font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
/* on the amber the price box turns round: navy, with amber figures */
.hb-price { padding: 7px 12px; border-radius: 4px; background: var(--nav-bg, #001E2D); color: var(--nav-ink, #FFB627);
  font-family: var(--price), var(--mono); font-weight: 700; font-size: clamp(14px, 1.3vw, 19px); line-height: 1; }
.hb-price .from { font: 600 8px var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-right: 5px; }
.hb-price .compare { display: none; }
@media (max-width: 700px) { .hb-row { column-gap: 12px; } .hb-one { grid-template-columns: auto min(40vw, 260px); column-gap: 5px; } .hb-batch { font-size: 7px; letter-spacing: .08em; } .hb-one figcaption b { font-size: 8px; letter-spacing: .08em; } .hb-price { font-size: 12px; padding: 5px 7px; } }