@font-face{font-family:BloomSans;src:url('fonts/bloom-sans-semibold.ttf');font-weight:700 900;font-display:swap}
/* 02 — separate greeting, centered identification, and a quiet studio portrait. */
.hero h1{width:100%;font-size:clamp(4rem,8.3vw,7.5rem);line-height:.88}
.hero .portrait-name{text-align:center;padding:12px 10px}
.hero .portrait-name strong{font-size:clamp(1.1rem,2.25vw,1.85rem);white-space:nowrap}
.hero .portrait-name span{font-size:clamp(.75rem,1.5vw,1.25rem);white-space:nowrap;margin-top:7px}
.hero-down{justify-self:center;margin-right:clamp(28px,4vw,65px)}
/* 03 — transparent outline marks; only the background moves. */
 .video-section{position:relative;isolation:isolate;overflow:hidden;background:#f9f5ec}
.video-section>.wrap{position:relative;z-index:1}
.video-section h2{font-weight:900;color:#890d3b;font-size:clamp(1.15rem,7.3vw,6.5rem);letter-spacing:.012em;background:#f9f5ec;padding:14px 0 18px}
.video-section .video-frame{isolation:isolate;overflow:hidden;border-radius:5px;background:#233e32;border:1px solid #334f40;box-shadow:0 25px 65px #233e3226}
.video-section>.outline-pattern{position:absolute;z-index:0;inset:-380px -120px;background-image:url('assets/bloom-lotos-outline.svg');background-size:333.28px 245.58px;opacity:.49;transform:translate3d(0,var(--outline-y,0px),0);pointer-events:none}
.video-section .play-mark{background:#f9f5ec;color:#890d3b}
.video-section .frame-note{color:#fff5e9;background:#233e32;padding:7px 10px;border-radius:3px}
/* 05 — a punk poster: heavy type, torn banner and a hard-edged video frame. */
.editor-section{position:relative;isolation:isolate;overflow:hidden;background:#171918;color:#fff5e6;padding-top:100px;padding-bottom:120px}
.editor-section:before{content:"";position:absolute;top:0;left:0;right:0;height:24px;background:#4b1531;clip-path:polygon(0 0,100% 0,100% 45%,96% 70%,90% 30%,84% 85%,77% 40%,70% 74%,64% 32%,57% 91%,50% 35%,43% 78%,36% 42%,29% 95%,21% 44%,14% 80%,7% 40%,0 85%)}
.editor-section:after{content:"";position:absolute;z-index:-1;width:230px;height:170px;right:-75px;top:80px;transform:rotate(-18deg);background:repeating-linear-gradient(0deg,transparent 0 12px,#ed91b5 12px 16px);opacity:.3}
.editor-section .section-number{color:#ed91b5;opacity:1}
.editor-section h2{font:900 clamp(3rem,8.2vw,7.8rem)/.94 'Arial Black',Arial,sans-serif;letter-spacing:-.065em;max-width:none;text-align:left;margin:0 0 36px;color:#fff5e6;text-transform:uppercase}
.editor-section h2 span{display:block}.editor-section h2 span:last-child{color:#ed91b5}
.editor-section .editor-subtitle{display:table;max-width:100%;background:#d6ed94;color:#171918;padding:15px 28px 19px;text-align:left;font:900 clamp(1.35rem,3.4vw,3.1rem)/1.06 'Arial Black',Arial,sans-serif;text-transform:uppercase;letter-spacing:-.05em;margin:0 0 76px;transform:rotate(-2deg);clip-path:polygon(1% 6%,98% 0,100% 89%,97% 94%,70% 98%,42% 93%,2% 100%,0 23%)}
.editor-section .editor-explanation{max-width:940px;margin:0 0 0 auto}
.editor-section .editor-video-label{display:table;position:relative;z-index:1;max-width:100%;background:#fff5e6;color:#171918;font:700 clamp(1.1rem,2.1vw,1.8rem)/1.12 BloomSans,Arial,sans-serif;letter-spacing:-.025em;padding:13px 19px;margin:0 0 25px -15px;transform:rotate(-2deg)}
.editor-section .video-frame{background:#292d29;border:6px solid #fff5e6;border-radius:0;box-shadow:13px 13px 0 #ed91b5}
.editor-section .play-mark{background:#ed91b5;color:#171918;border-radius:0;transform:rotate(-5deg)}
.editor-section .frame-note{color:#fff5e6}
@media(max-width:760px){
 .hero h1{font-size:clamp(2.15rem,9.3vw,4.5rem);line-height:.9}
 .hero .portrait-name{padding:8px 4px}
 .hero .portrait-name strong{font-size:clamp(.72rem,2.55vw,1.1rem)}
 .hero .portrait-name span{font-size:clamp(.47rem,1.98vw,.82rem);margin-top:4px}
 .video-section>.outline-pattern{background-size:210.49px 155.24px}
 .hero-down{margin-right:13px}
 .editor-section{padding-top:64px;padding-bottom:70px}
 .editor-section h2{max-width:none;font-size:clamp(2.1rem,8.2vw,3.9rem)}
 .editor-section .editor-subtitle{font-size:clamp(1.15rem,4.8vw,1.8rem);padding:13px 16px 16px;margin-bottom:50px}
 .editor-section .editor-video-label{font-size:clamp(.95rem,3.9vw,1.4rem);margin:0 0 22px -5px;padding:12px 13px}
 .editor-section .video-frame{border-width:4px;box-shadow:8px 8px 0 #ed91b5}
}
@media(max-width:430px){.hero h1{font-size:clamp(1.8rem,9.3vw,2.6rem)}.hero-lead{font-size:.78rem}.hero-down{margin-right:10px}}
@media(prefers-reduced-motion:reduce){.video-section .outline-pattern{transform:none}}