.ipqlb{
--ink:#171512;
--ink-soft:#211e19;
--paper:#e4dfcf;
--paper-dim:#b9b3a0;
--signal:#d8391f;
--rule: rgba(228,223,207,0.16);
background:var(--ink);
color:var(--paper);
font-family:'Inter',sans-serif;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
.ipqlb *{box-sizing:border-box;}
.ipqlb a{color:inherit;}
.ipqlb .ipqlb-display{font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:0.01em; line-height:0.88; margin:0;}
.ipqlb .ipqlb-mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em;}
@media (prefers-reduced-motion: reduce){
.ipqlb *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
} .ipqlb-hero{
position:relative; min-height:92vh; display:flex; align-items:flex-end;
padding:48px 28px 64px; overflow:hidden;
}
.ipqlb-hero-bg{ position:absolute; inset:0; overflow:hidden; background:var(--ink); }
.ipqlb-hero-bg picture{ display:block; width:100%; height:100%; }
.ipqlb-hero-bg img{
width:100%; height:100%; object-fit:contain; object-position:center 42%;
display:block;
}
.ipqlb-hero-bg::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(23,21,18,0) 0%, rgba(23,21,18,0.15) 55%, rgba(23,21,18,0.92) 100%);
}
.ipqlb-viewfinder{position:absolute; inset:28px; pointer-events:none;}
.ipqlb-corner{position:absolute; width:26px; height:26px; border-color:var(--paper); opacity:0.85;}
.ipqlb-corner.tl{top:0; left:0; border-top:2px solid; border-left:2px solid;}
.ipqlb-corner.tr{top:0; right:0; border-top:2px solid; border-right:2px solid;}
.ipqlb-corner.bl{bottom:0; left:0; border-bottom:2px solid; border-left:2px solid;}
.ipqlb-corner.br{bottom:0; right:0; border-bottom:2px solid; border-right:2px solid;}
.ipqlb-exif{
position:absolute; top:44px; right:44px; font-family:'IBM Plex Mono',monospace; font-size:12px;
text-align:right; color:var(--paper); opacity:0.85; line-height:1.7;
}
.ipqlb-rec{display:inline-flex; align-items:center; gap:6px; margin-bottom:6px;}
.ipqlb-rec-dot{width:7px; height:7px; border-radius:50%; background:var(--signal); animation:ipqlb-pulse 1.8s infinite;}
@keyframes ipqlb-pulse{0%,100%{opacity:1;} 50%{opacity:0.25;}}
.ipqlb-hero-body{position:relative; z-index:2; max-width:920px;}
.ipqlb-hero-eyebrow{
font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.18em;
text-transform:uppercase; color:var(--signal); margin-bottom:18px; display:block;
}
.ipqlb-hero h1{ font-size:clamp(56px, 12vw, 148px); margin:0 0 18px; }
.ipqlb-hero-body p{ max-width:480px; font-size:17px; line-height:1.55; color:var(--paper-dim); margin:0; }
.ipqlb-scroll-cue{
position:absolute; bottom:20px; left:28px; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:11px;
text-transform:uppercase; letter-spacing:0.14em; color:var(--paper-dim); display:flex; align-items:center; gap:10px;
}
.ipqlb-scroll-cue .ipqlb-bar{width:1px; height:34px; background:var(--paper-dim); position:relative; overflow:hidden;}
.ipqlb-scroll-cue .ipqlb-bar::after{
content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--signal);
animation:ipqlb-drip 1.8s ease-in-out infinite;
}
@keyframes ipqlb-drip{ 0%{top:-100%;} 100%{top:100%;} } .ipqlb-filmstrip-wrap{ position:sticky; top:0; z-index:40; background:var(--ink); border-bottom:1px solid var(--rule); }
.ipqlb-filmstrip{ display:flex; overflow-x:auto; scrollbar-width:none; padding:14px 20px; }
.ipqlb-filmstrip::-webkit-scrollbar{display:none;}
.ipqlb-frame-btn{
flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px;
background:none; border:none; cursor:pointer; padding:0 16px; opacity:0.45; transition:opacity .25s;
}
.ipqlb-frame-btn.active, .ipqlb-frame-btn:hover{opacity:1;}
.ipqlb-sprockets{display:flex; gap:4px;}
.ipqlb-sprockets i{width:4px; height:6px; background:var(--paper-dim); display:block; border-radius:1px;}
.ipqlb-frame-thumb{ width:64px; height:44px; background-size:cover; background-position:center; border:1px solid var(--rule); }
.ipqlb-frame-btn.active .ipqlb-frame-thumb{border-color:var(--signal);}
.ipqlb-frame-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-dim); }
.ipqlb-frame-btn.active .ipqlb-frame-label{color:var(--paper);}
.ipqlb-frame-divider{flex:0 0 auto; width:1px; background:var(--rule); margin:6px 0;} .ipqlb-capsule{
padding:96px 28px 100px; position:relative; border-bottom:1px solid var(--rule);
background:linear-gradient(180deg, var(--ink) 0%, var(--ipqlb-tint, var(--ink)) 100%);
}
.ipqlb-capsule-head{ max-width:1180px; margin:0 auto 56px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:end; }
.ipqlb-frame-counter{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--paper-dim); display:flex; align-items:center; gap:10px; }
.ipqlb-frame-counter .ipqlb-swatch{ width:10px; height:10px; border-radius:50%; background:var(--ipqlb-swatch, var(--signal)); }
.ipqlb-capsule-head h2{ font-size:clamp(38px, 6vw, 76px); margin:6px 0 14px; }
.ipqlb-capsule-head p{ max-width:520px; font-size:15.5px; line-height:1.6; color:var(--paper-dim); margin:0 0 20px; }
.ipqlb-capsule-shop-btn{
display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px;
text-transform:uppercase; letter-spacing:0.08em; text-decoration:none;
border:1px solid var(--ipqlb-swatch, var(--paper)); color:var(--paper);
padding:11px 20px; transition:background .2s, color .2s;
}
.ipqlb-capsule-shop-btn:hover{ background:var(--ipqlb-swatch, var(--signal)); color:var(--ink); }
.ipqlb-capsule-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.ipqlb-shot{ position:relative; overflow:hidden; background:var(--ink-soft); border:1px solid var(--rule); }
.ipqlb-shot img{
width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(15%);
transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .6s;
}
.ipqlb-shot:hover img{transform:scale(1.045); filter:grayscale(0%);}
.ipqlb-tag{
position:absolute; bottom:10px; left:10px; font-family:'IBM Plex Mono',monospace; font-size:10px;
letter-spacing:0.06em; background:rgba(23,21,18,0.72); padding:4px 8px; text-transform:uppercase; color:var(--paper-dim);
}
.ipqlb-hotspot{ position:absolute; width:18px; height:18px; transform:translate(-50%,-50%); cursor:pointer; }
.ipqlb-ring{ position:absolute; inset:0; border:1px solid var(--paper); border-radius:50%; animation:ipqlb-ring 2.4s infinite; }
.ipqlb-dot{ position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:var(--signal); border-radius:50%; }
@keyframes ipqlb-ring{0%{transform:scale(0.6); opacity:1;} 100%{transform:scale(1.9); opacity:0;}}
.ipqlb-tip{
position:absolute; bottom:26px; left:50%; transform:translateX(-50%) translateY(4px);
background:var(--paper); color:var(--ink); padding:9px 12px; white-space:nowrap;
font-family:'IBM Plex Mono',monospace; font-size:11px; text-decoration:none;
opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
.ipqlb-tip::after{ content:''; position:absolute; top:100%; left:50%; margin-left:-5px; border:5px solid transparent; border-top-color:var(--paper); }
.ipqlb-hotspot:hover .ipqlb-tip{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.ipqlb .span-7{grid-column:span 7;} .ipqlb .span-5{grid-column:span 5;}
.ipqlb .span-4{grid-column:span 4;} .ipqlb .span-8{grid-column:span 8;}
.ipqlb .span-6{grid-column:span 6;} .ipqlb .span-3{grid-column:span 3;}
.ipqlb .span-9{grid-column:span 9;}
.ipqlb .h-tall{aspect-ratio:3/4;} .ipqlb .h-wide{aspect-ratio:4/3;} .ipqlb .h-square{aspect-ratio:1/1;}
@media (max-width:860px){
.ipqlb-capsule-head{grid-template-columns:1fr;}
.ipqlb-capsule-grid > *{grid-column:span 12 !important;}
.ipqlb-capsule{padding:64px 18px 72px;}
.ipqlb-filmstrip-wrap{top:0;} .ipqlb .h-tall, .ipqlb .h-wide, .ipqlb .h-square{ aspect-ratio:auto; }
.ipqlb-shot img{ height:auto; object-fit:contain; }
} .ipqlb-footer-cta{ padding:120px 28px; text-align:center; background:var(--ink); }
.ipqlb-footer-cta .ipqlb-mono{ display:block; color:var(--signal); font-size:13px; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:0; }
.ipqlb-footer-cta h2{ font-size:clamp(40px,8vw,96px); margin:0; }
.ipqlb-footer-sep{
width:44px; height:1px; background:var(--rule); margin:28px auto;
}
.ipqlb-footer-logo{ display:inline-block; width:130px; }
.ipqlb-footer-logo img{ width:100%; height:auto; display:block; opacity:0.92; }
.ipqlb-shop-link{
display:inline-flex; align-items:center; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:13px;
text-transform:uppercase; letter-spacing:0.1em; text-decoration:none; color:var(--paper); background:var(--signal);
border:1px solid var(--signal);
padding:16px 30px; margin-top:28px; transition:background .2s, color .2s;
}
.ipqlb-shop-link:hover{background:var(--paper); color:var(--signal); border-color:var(--paper);}