/* Forge engine: layout. Announcement, nav, hero, section frames, page heads,
   legal and lab pages, footer, and the drawer shell. */

/* ---- announcement ---- */
.announce { border-bottom: 1px solid var(--line); background: var(--surface); }
.announce-inner { min-height: var(--announce-h); display: flex; align-items: center; justify-content: center; padding-block: var(--s2); }
.announce-text { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.4; }

/* ---- nav: solid-dark ---- */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: var(--s5); min-height: var(--nav-h); }
.nav-logo { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--fg); text-decoration: none; flex-shrink: 0; }
.logo { display: inline-flex; align-items: center; color: inherit; }
.logo svg, .logo-img { height: var(--logo-h) !important; width: auto !important; max-width: 220px; }
.logo-text { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-md); letter-spacing: 0.02em; text-transform: var(--case-title); }
.nav-primary { flex: 1; display: none; }
.nav-links { display: flex; justify-content: center; gap: var(--s6); }
.nav-links a, .nav-panel-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--fg); text-decoration: none; font-size: var(--t-sm); font-weight: var(--w-medium); letter-spacing: 0.06em; text-transform: uppercase; }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.nav-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--radius); color: var(--fg); }
.nav-icon:hover { background: var(--surface); }
.cart-count { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-family: var(--font-body); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 18px; text-align: center; }
.cart-count[data-count="0"] { display: none; }
/* brand.yaml nav_cart: text: the word and the count side by side, no badge, zero shown. */
.nav-cart--text { width: auto; gap: var(--s1); padding: 0 var(--s3); font-size: var(--t-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.nav-cart--text .cart-count, .nav-cart--text .cart-count[data-count="0"] { display: inline; position: static; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--accent-text); font-size: inherit; line-height: inherit; }
.nav-toggle .nav-toggle-close { display: none; }
.site-header.is-open .nav-toggle-open { display: none; }
.site-header.is-open .nav-toggle-close { display: inline-flex; }
.nav-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; border-bottom: 1px solid var(--line); padding: var(--s4) var(--gutter) var(--s6); }
.nav-panel-links { display: grid; gap: var(--s1); }
.nav-panel-links a { width: 100%; font-size: var(--t-md); border-bottom: 1px solid var(--line); }
@media (min-width: 960px) {
  .nav-primary { display: block; }
  .nav-toggle, .nav-panel { display: none !important; }
}

/* ---- sections ---- */
.s { position: relative; }
.section-head { max-width: 46rem; margin-bottom: var(--s7); }
.section-title { font-size: var(--t-h2); text-transform: var(--case-title); }
.section-lead { margin-top: var(--s4); color: var(--muted); font-size: var(--t-md); max-width: 38rem; }
.section-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6); }
.section-bar .section-head { margin-bottom: 0; }

/* ---- hero ---- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(88svh, 860px); padding-block: calc(var(--s9) + var(--s4)) var(--s9); }
.hero--type { min-height: min(70svh, 680px); align-items: center; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video, .hero-media img, .hero-img { width: 100%; height: 100%; object-fit: cover; }
/* The vial overlay: a frame with the video's aspect that covers the hero like object-fit: cover
   (min-height transfers through the ratio to min-width), so each vial lands on the plate spot.
   The custom properties are set inline per item (the box from hero.json); these are fallbacks. */
.hero-vials { --hero-ar: 16 / 9; position: absolute; left: 50%; top: 50%; z-index: -2; aspect-ratio: var(--hero-ar); min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); pointer-events: none; }
.hero-vial { --vx: 0%; --vy: 0%; --vw: 0%; --vh: 0%; position: absolute; left: var(--vx); top: var(--vy); width: var(--vw); height: var(--vh); object-fit: contain; }
.hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--hero-bg) 88%, transparent) 0%, color-mix(in srgb, var(--hero-bg) 55%, transparent) 45%, transparent 80%), linear-gradient(0deg, color-mix(in srgb, var(--hero-bg) 70%, transparent) 0%, transparent 45%); }
.hero-inner { display: flex; }
.hero-inner--right { justify-content: flex-end; }
.hero-inner--center { justify-content: center; text-align: center; }
.hero-inner--center .hero-actions { justify-content: center; }
.hero-copy { min-width: 0; max-width: 44rem; }
/* Over a full-bleed media hero the copy keeps to its safe side (the subject sits past ~54%). */
@media (min-width: 768px) { .hero--media .hero-inner:not(.hero-inner--center) .hero-copy { max-width: min(44rem, 44vw); } }
.hero-title { font-size: var(--t-hero); line-height: var(--lh-tight); text-transform: var(--case-title); letter-spacing: var(--track-title); color: var(--fg); overflow-wrap: break-word; }
.hero-origin { display: flex; align-items: center; gap: .75em; margin-top: var(--s5); }
.hero-origin-flag { flex: none; width: 2.4em; height: auto; }
.hero-lead { margin-top: var(--s5); font-size: var(--t-md); color: var(--muted); max-width: 34rem; }
.hero-inner--center .hero-lead { margin-inline: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
@media (max-width: 767px) {
  .hero { min-height: min(82svh, 640px); padding-block: var(--s9) var(--s7); }
  .hero-scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--hero-bg) 92%, transparent) 0%, color-mix(in srgb, var(--hero-bg) 60%, transparent) 55%, color-mix(in srgb, var(--hero-bg) 25%, transparent) 100%); }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ---- page heads and pages ---- */
.page-head { padding-block: var(--s8) var(--s6); }
.page-head--band { padding-block: var(--s9) var(--s7); border-bottom: 1px solid var(--line); }
.page-head--money { padding-block: var(--s6) var(--s4); }
.page-title { font-size: var(--t-h1); text-transform: var(--case-title); }
.page-intro { margin-top: var(--s5); color: var(--muted); }
.frame--page { padding-bottom: var(--section-pad); }
.frame--money { padding-bottom: var(--s9); }
.page--money .page-title { font-size: var(--t-xl); }
.post-list { display: grid; gap: var(--s6); max-width: var(--measure); }
.post-title { font-size: var(--t-lg); }
.post-title a { color: var(--fg); text-decoration: none; }
.post-excerpt { color: var(--muted); margin-top: var(--s2); }

/* legal */
.legal-head { max-width: var(--measure); }
.legal-updated { color: var(--muted); font-size: var(--t-sm); margin-top: var(--s3); }
.legal-body { padding-bottom: var(--section-pad); }
.legal-body.has-toc { display: grid; gap: var(--s7); }
.legal-toc { font-size: var(--t-sm); }
.legal-toc-title { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
.legal-toc ol { padding-left: 1.2em; display: grid; gap: var(--s2); }
.legal-toc a { color: var(--fg); text-decoration: none; }
.legal-toc a:hover { color: var(--accent-text); }
.legal-text h2 { scroll-margin-top: calc(var(--nav-h) + var(--s5)); }
@media (min-width: 1024px) {
  .legal-body.has-toc { grid-template-columns: 15rem minmax(0, 1fr); }
  .legal-toc { position: sticky; top: calc(var(--nav-h) + var(--s6)); align-self: start; }
}

/* ---- grids ---- */
.grid { display: grid; gap: var(--s5); }
.grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (min-width: 768px) { .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
@media (min-width: 1100px) { .grid--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 380px) { .grid--cards { grid-template-columns: minmax(0, 1fr); } }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); padding-top: var(--s9); font-size: var(--t-sm); }
.footer-grid { display: grid; gap: var(--s7); grid-template-columns: 1fr; padding-bottom: var(--s8); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); } }
.footer-logo { display: inline-flex; color: var(--fg); text-decoration: none; margin-bottom: var(--s4); }
.footer-blurb { color: var(--muted); max-width: 26rem; }
.footer-contact { margin-top: var(--s4); }
.footer-contact a { color: var(--fg); }
.footer-title { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: var(--w-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s4); }
.footer-links { display: grid; gap: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--fg); text-decoration: none; }
.footer-links a:hover { color: var(--accent-text); }
@media (max-width: 767px) { .footer-links a { min-height: var(--tap); } }
.footer-base { display: grid; gap: var(--s5); padding-block: var(--s6) var(--s7); border-top: 1px solid var(--line); color: var(--muted); }
.footer-disclaimer:empty { display: none; }
.footer-disclaimer { font-size: var(--t-xs); line-height: 1.6; max-width: 60rem; }
.footer-entity { font-size: var(--t-xs); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }

/* ---- drawer shell ---- */
.drawer-scrim { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--shadow-ink) 55%, transparent); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(440px, 100vw); display: flex; flex-direction: column; box-shadow: var(--shadow-lift); transform: translateX(100%); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.drawer[aria-hidden="false"] { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-out), visibility 0s; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.drawer-title { font-size: var(--t-md); text-transform: var(--case-title); }
.drawer-close { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--radius); color: var(--fg); }
.drawer-close:hover { background: var(--surface); }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer-body .widget_shopping_cart_content { min-height: 100%; display: flex; flex-direction: column; }