/* ============================================================
   HOME V2 — MADE IN AMERICA, the calm band. Rendered by //site/_home_v2_mia.php.
   The live band's copy on a STILL flag: no ripple filter, no cloth
   animation, content height instead of a full fold. The quiet between the
   products and the film.

   ROUND 1 (2026-09-03, blind against Apple's "Our values lead the way"). The
   plate had been a full-bleed background under a two-way scrim heavy enough
   to keep white type legible over stripes, and the scrim won: the
   photograph read as a dark smear behind the headline. Now the band speaks
   the page's own grammar — copy left on the bare stage, art right — and the
   plate stands on its own, UNCROPPED at its 1920×1072 aspect (2.7× its
   ~720px display width), faded into the black ground at its edges by CSS
   masks, no scrim anywhere. The photograph's dark left third is what lets
   the two columns overlap — see .hv2-mia-inner.

   ROUND 2. The band's one door led away from the products the lede had just
   named, so the lede's three nouns are now three shop doors (the Trifecta's
   mono-red shop-line vocabulary) and "About Feniex" is the quiet second
   line — see "the doors" below and the partial's header for the routes.
   ============================================================ */

.hv2-mia {
  position: relative;
  /* Keeps the phone-size art (pulled 40% off-canvas, see the media query)
     from widening the page. */
  overflow: hidden;
  border-top: 1px solid var(--hv2-line);
  border-bottom: 1px solid var(--hv2-line);
  color: var(--hv2-ink);
}

/* Three tracks, two items. A (36%) is copy-only, C (44%) is art-only, and
   B (20%) is shared: the copy spans A+B, the plate spans B+C. B is sized to
   the plate's own dark left third — the first ~30% of a 64%-wide plate is
   ~19% of the row — so at any row width the type only ever sits over the
   part of the photograph that is already black. Same container and side
   padding as the video band below, so the two share one left text edge. */
.hv2-mia-inner {
  display: grid;
  grid-template-columns: minmax(0, 36fr) minmax(0, 20fr) minmax(0, 44fr);
  align-items: center;
  max-width: var(--hv2-maxw);
  margin-inline: auto;
  padding: 56px 28px 52px;
}
.hv2-mia-copy {
  grid-column: 1 / 3;
  grid-row: 1;
  position: relative;
  z-index: 1;
}
.hv2-mia-art {
  grid-column: 2 / 4;
  grid-row: 1;
  /* Top and bottom fade into the ground, so the plate has no picture-frame
     edge; the sideways fade lives on the image itself (nested masks
     intersect on their own — no mask-composite needed). */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* No plate on disk (the file has not landed on this environment): the
   vector flag is bright edge to edge, so it gets track C alone instead of
   the overlap, and is dimmed to sit on the stage. */
.hv2-mia:not(.hv2-mia--plate) .hv2-mia-art { grid-column: 3 / 4; }
.hv2-mia-art svg { filter: saturate(0.7) brightness(0.55); }

/* The plate itself: the whole photograph, never cover-cropped. 30% on the
   left is the dark third, forced to pure black so the overlap zone is
   ground; a whisper on the right where the cloth falls into shadow. */
.hv2-mia-plate,
.hv2-mia-art svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1072;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 94%, rgba(0, 0, 0, 0.6) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 94%, rgba(0, 0, 0, 0.6) 100%);
}

/* ---- the copy --------------------------------------------------------
   base.css sets .hv2 p { margin: 0 } at (0,1,1), which outranks a lone
   class: the old single-class `margin: 28px 0 0` on the lede never applied
   and it sat jammed under the title. Every margin here is written with two
   classes. */
.hv2-mia .hv2-eyebrow { margin: 0 0 16px; }
.hv2-mia-title {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  /* 56px at 1280 — "DESIGNED IN AMERICA," is the long line and clears the
     A+B tracks (629px) with room; the old 5.2vw wanted the whole row. */
  font-size: clamp(36px, 4.4vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--hv2-ink);
  margin: 0;
}
.hv2-mia-title em { font-style: normal; color: var(--hv2-accent); }
.hv2-mia .hv2-mia-lede {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(244, 245, 247, 0.8);
  max-width: 540px;
  margin: 22px 0 0;
}
/* ---- the doors --------------------------------------------------------
   ROUND 2. The lede's three nouns, each a buy path in the Trifecta's shop-
   line vocabulary (products.css .hv2-series-shop: mono, red, the arrow that
   travels on hover), so the doors a buyer meets here look like the ones
   they met one screen up. A flex row that wraps with a row gap, so a narrow
   column drops a whole door to the next line rather than breaking one.
   12px against the cards' 11.5: these stand alone under a 17px lede, not at
   the foot of a 244px card. No height cost: at 1280 the plate column is
   401px tall and the copy column was ~349, so this row and the demoted link
   under it (~40px together) sit inside the room the plate already holds.

   Specificity note: Bootstrap's a:hover (0,1,1) outranks a lone class, so
   the hover colour is set on .hv2-mia-door:hover (0,2,0), as
   products.css does for .hv2-shelf-all. */
.hv2-mia .hv2-mia-doors {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 26px 0 0;
}
.hv2-mia-door {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--hv2-accent);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.hv2-mia-door svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hv2-mia-door:hover,
.hv2-mia-door:focus-visible { color: var(--hv2-accent-soft); }
.hv2-mia-door:hover svg,
.hv2-mia-door:focus-visible svg { transform: translateX(5px); }
.hv2-mia-door:focus-visible { outline: 2px solid var(--hv2-accent); outline-offset: 4px; }

/* The story door, now the quiet second line: muted Inter with an ink arrow
   (the red is spent on the shop row above it), waking to ink on hover. In
   round 1 this was the band's only action — the partial's header has the
   story. */
.hv2-mia .hv2-mia-more { margin: 18px 0 0; }
.hv2-mia-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: var(--hv2-muted);
  transition: color 0.2s ease;
}
.hv2-mia-more a::after {
  content: "\2192";
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.hv2-mia-more a:hover,
.hv2-mia-more a:focus-visible { color: var(--hv2-ink); }
.hv2-mia-more a:hover::after,
.hv2-mia-more a:focus-visible::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .hv2-mia-door, .hv2-mia-door svg, .hv2-mia-more a, .hv2-mia-more a::after { transition: none; }
  .hv2-mia-door:hover svg, .hv2-mia-door:focus-visible svg,
  .hv2-mia-more a:hover::after, .hv2-mia-more a:focus-visible::after { transform: none; }
}

/* ---- phones and small tablets: stack, copy then flag ---------------- */
@media (max-width: 860px) {
  .hv2-mia-inner {
    grid-template-columns: 1fr;
    row-gap: 26px;
    padding: 48px 20px 40px;
  }
  .hv2-mia-copy { grid-column: 1; grid-row: 1; }
  .hv2-mia-art,
  .hv2-mia:not(.hv2-mia--plate) .hv2-mia-art { grid-column: 1; grid-row: 2; }
  /* The dark third goes off-canvas to the left (only black leaves the
     frame) so the lit flag fills the width; the section clips the rest. */
  .hv2-mia--plate .hv2-mia-art { width: 140%; margin-left: -40%; }
  /* 9vw: "BUILT IN AUSTIN, TEXAS" (the long line, ~0.43em a character) holds
     one line down to 360px wide; 9.6vw orphaned "TEXAS" at 390. */
  .hv2-mia-title { font-size: clamp(30px, 9vw, 48px); }
  .hv2-mia .hv2-mia-lede { font-size: 16px; }
}

/* ============================================================
   PHONES (≤640px) — phone round 1, 2026-09-03: the ≤860px block above
   already stacks the band (copy, then the flag) and sizes the title to
   hold BUILT IN AUSTIN, TEXAS on one line; this only moves the band onto
   the page's 22px phone edge with a little more air above the eyebrow.
   ============================================================ */
@media (max-width: 640px) {
  .hv2-mia-inner { padding: 56px 22px 44px; }
}

/* ============================================================
   PHONES (≤640px) — phone round 4, 2026-09-03: tap heights for the text
   doors. The three mono shop doors were 14px tall to the thumb and the
   story link 17px; 10px of padding above and below makes each a 34-37px
   target without moving the band's rhythm — the doors row's top margin,
   its row gap and the story line's margin each give back what the padding
   adds, so what the eye sees between the lines is what round 2 set.
   ============================================================ */
@media (max-width: 640px) {
  .hv2-mia .hv2-mia-doors { gap: 0 28px; margin-top: 16px; }
  .hv2-mia-door { padding: 10px 0; }
  .hv2-mia .hv2-mia-more { margin-top: 0; }
  .hv2-mia-more a { padding: 10px 0; }
}