/* P7 Owambe: balloon letter drop + aso-ebi fabric banners.
   From Design/variations/2026-10-08-owambe/ (layout 3, client pick 8 Oct). Logic: assets/owambe.js */
#owambe { overflow: visible; overflow-x: clip; }

/* Balloon heading (letters split by owambe.js into .ow-bl > .ow-bin) */
#owambe .ow-balloon { text-align: center; font: 800 clamp(84px, 16vw, 236px)/.9 var(--display); font-variation-settings: "wdth" 100; letter-spacing: .01em; transform: rotate(-3deg); white-space: nowrap; }
#owambe .ow-balloon > span { display: inline-block; color: var(--gold); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--fuch), 0 13px 0 var(--ink); }
#owambe .ow-bl { display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--lr, 0deg)); }
#owambe .ow-bin { display: inline-block; transform-origin: 50% 100%; }
#owambe .ow-c1 { color: var(--gold); } #owambe .ow-c2 { color: var(--green); }
#owambe .ow-c3 { color: var(--fuch); text-shadow: 0 7px 0 var(--gold), 0 13px 0 var(--ink); }

/* Aso-ebi banners */
#owambe .bolts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1140px; margin: 0 auto; padding: 0 14px; align-items: start; }
#owambe .bolt { position: relative; transform-origin: 50% 0; }
#owambe .bolt:nth-child(2) { margin-top: 40px; }
#owambe .bolt__rod { position: relative; z-index: 2; height: 16px; margin: 0 -14px; background: var(--ink); border-radius: 8px; }
#owambe .bolt__rod::before, #owambe .bolt__rod::after { content: ""; position: absolute; top: -5px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); }
#owambe .bolt__rod::before { left: -10px; } #owambe .bolt__rod::after { right: -10px; }
#owambe .bolt__drop { position: relative; overflow: hidden; margin-top: -6px; }
#owambe .bolt__cloth { min-height: 540px; padding: 40px 20px 100px; background: var(--pat); border: 3px solid var(--ink); border-top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 52px), 0 100%); }
/* The label is a sewn-on patch: solid paper, a paper halo and an ink ring so the pattern never sits behind text. */
#owambe .bolt__label { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 18px; padding: 28px 24px 26px; box-shadow: 0 0 0 7px var(--paper), 0 0 0 9.5px var(--ink), 0 14px 0 2px rgba(16, 22, 52, .22); outline: 2px dashed rgba(16, 22, 52, .55); outline-offset: -10px; }
#owambe .bolt__label h3 { font: 800 36px/.95 var(--display); font-variation-settings: "wdth" 75; text-transform: uppercase; margin-bottom: 12px; text-wrap: balance; }
#owambe .bolt__label p { font-size: 16px; line-height: 1.55; color: var(--ink); }
#owambe .bolt__roll { position: absolute; left: -4px; right: -4px; bottom: 0; height: 36px; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(rgba(16, 22, 52, .35), rgba(16, 22, 52, 0) 35%, rgba(255, 255, 255, .35) 55%, rgba(16, 22, 52, .45)), var(--pat); opacity: 0; pointer-events: none; }
#owambe .bolt--fuch { --pat: radial-gradient(circle, var(--fuch) 0 6px, transparent 7px) 0 0/28px 28px, radial-gradient(circle, var(--ink) 0 2px, transparent 3px) 14px 14px/28px 28px, var(--fuch-soft); }
#owambe .bolt--gold { --pat: repeating-linear-gradient(45deg, transparent 0 19px, rgba(16, 22, 52, .55) 19px 21px), conic-gradient(from 45deg, var(--gold) 25%, var(--gold-soft) 0 50%, var(--gold) 0 75%, var(--gold-soft) 0) 0 0/40px 40px; }
#owambe .bolt--green { --pat: repeating-linear-gradient(90deg, var(--green) 0 14px, var(--green-soft) 14px 22px, var(--ink) 22px 24px, var(--green-soft) 24px 32px, var(--gold) 32px 36px, var(--green-soft) 36px 44px); }

@media (max-width: 900px) {
  #owambe .bolts { grid-template-columns: 1fr; gap: 56px; max-width: 480px; padding: 0 16px; }
  #owambe .bolt:nth-child(2) { margin-top: 0; }
  #owambe .bolt__cloth { min-height: 0; padding: 32px 18px 88px; }
}
@media (max-width: 600px) {
  #owambe .ow-balloon { font-size: 17.5vw; }
  #owambe .ow-balloon > span { -webkit-text-stroke: 3.5px var(--ink); text-shadow: 0 5px 0 var(--fuch), 0 9px 0 var(--ink); }
  #owambe .ow-c3 { text-shadow: 0 5px 0 var(--gold), 0 9px 0 var(--ink); }
  #owambe .bolt__label { padding: 24px 20px 22px; }
  #owambe .bolt__label h3 { font-size: 32px; }
}