/* M. Bilal Textiles — bell tent sub-category page.
   Loaded only on bell-tents.html via the extraCss front matter hook.
   Site tokens come from style.css; the extra tokens this page needs are scoped on .bt.
   The pin anchoring invariant: .stage height must equal the photo height exactly.
   .stage is always position:relative — never static — and the caption lives in
   .stage-wrap, outside .stage. See docs/bell-tents.md before touching this. */

.bt{
  --charcoal:#1b1b1b; --charcoal-2:#242424;
  --gold-light:#cbb271;
  --line-2:#d8d0bd;
  --display:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-family:var(--body);
}
.bt .wrap{max-width:1420px;padding:0 34px}
.bt h1,.bt h2,.bt h3{font-family:var(--display);line-height:1.13;text-wrap:balance;margin:0}
.bt img{display:block;max-width:100%}
.bt button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.bt :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bt .btn{border:1.5px solid transparent}
.bt .btn-gold{border-color:var(--gold)}
.bt .btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light)}
.bt .btn-line{color:var(--ink);border-color:var(--line-2);background:none}
.bt .btn-line:hover{border-color:var(--gold);color:var(--gold-dark)}
.bt .head{display:flex;flex-direction:column}
.bt .head h2{margin:0}

/* ================= HERO ================= */
.bt-hero{position:relative;background:#0f0f0f;color:#fff;overflow:hidden;isolation:isolate;
  min-height:clamp(470px,56vw,780px);display:flex;align-items:center;padding:0}
.bt-hero>.wrap{width:100%}
.bt-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;z-index:-2}
.bt-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(100deg,rgba(9,9,9,.94) 2%,rgba(9,9,9,.82) 24%,rgba(9,9,9,.36) 52%,rgba(9,9,9,.10) 76%,rgba(9,9,9,.28) 100%)}
.bt-hero .hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:80px 0 84px;max-width:640px}
.bt-hero h1{color:#fff;font-size:clamp(32px,3.9vw,50px);font-weight:800;max-width:17ch;margin:4px 0 0}
.bt-hero h1 em{font-style:normal;color:var(--gold)}
.bt-hero p{color:#d6d1c5;font-size:18.5px;max-width:46ch;margin:0}
.bt-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}

/* ================= THE EXPLORER ================= */
.bt .spec{background:var(--ink);color:#fff;padding:76px 0 78px;position:relative;overflow:hidden}
.bt .spec:before{content:"";position:absolute;top:-26%;left:-8%;width:760px;height:760px;
  background:radial-gradient(circle,rgba(181,152,71,.13),transparent 68%);pointer-events:none}
.bt .spec .wrap{position:relative}
.spec-head{max-width:840px;display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.spec-head h2{color:#fff;font-size:clamp(30px,3.7vw,46px);font-weight:800}
.spec-head p{color:#b3aea1;font-size:18.5px;max-width:64ch;margin:0}
.spec-head p b{color:#fff;font-weight:600}

.spec-grid{display:grid;grid-template-columns:1.24fr 1fr;gap:46px;align-items:stretch}
.stage-col{display:flex;flex-direction:column}

/* --- stage --- */
.stage-wrap{position:sticky;top:26px}
.stage{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(181,152,71,.32);background:#0d0d0d;line-height:0}
.stage>img{width:100%}
.stage-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,10,.10),transparent 28%,rgba(10,10,10,.44))}
.stage-cap{position:absolute;left:0;right:0;bottom:0;padding:20px 26px;z-index:4;line-height:1.5;pointer-events:none;
  font-size:14px;color:#d8d3c7;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.stage-cap b{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.flyline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .35s;z-index:2}
.flyline path{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-dasharray:7 6;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(0,0,0,.7))}
.stage.fly .flyline{opacity:.82}

.pin{position:absolute;transform:translate(-50%,-50%);z-index:3;line-height:1;transition:opacity .25s}
.pin:after{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;
  transform:translate(-50%,-50%);border-radius:50%}
.pin .dot{display:block;width:18px;height:18px;border-radius:50%;
  background:rgba(16,16,16,.82);border:2.5px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.55);transition:.22s}
.pin:hover .dot{background:var(--gold);border-color:#fff;transform:scale(1.15)}
.pin .lbl{position:absolute;left:50%;top:calc(100% + 11px);transform:translateX(-50%);
  white-space:nowrap;background:rgba(10,10,10,.95);border:1px solid rgba(181,152,71,.5);
  color:#fff;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;padding:5px 11px;border-radius:6px;opacity:0;transition:opacity .18s}
.pin.up .lbl{top:auto;bottom:calc(100% + 11px)}
.pin:hover .lbl,.pin:focus-visible .lbl,.pin.on .lbl{opacity:1}
.pin.on .dot{background:var(--gold);border-color:#fff;box-shadow:0 0 0 7px rgba(181,152,71,.32)}
.stage.picked .pin:not(.on){opacity:.4}
.stage.picked .pin:not(.on):hover{opacity:1}

/* --- panel --- */
.bt .panel{background:var(--charcoal);border:1px solid rgba(181,152,71,.26);border-radius:18px;
  padding:34px 32px 30px;display:flex;flex-direction:column}
.bt .opt{display:none}
.bt .opt.on{display:block;animation:bt-fade .3s ease}
@keyframes bt-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bt .opt h3{color:#fff;font-size:30px;font-weight:800;margin-bottom:16px}
.bt .opt p{color:#b3aea1;font-size:16.5px;max-width:60ch;margin:0}
.bt .opt p:first-of-type{color:#e6e1d5;font-size:18.5px;font-weight:500}
.bt .opt p+p{margin-top:13px}

.bt .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.bt .chips>span{width:100%;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#77726a;margin-bottom:4px}
.bt .chips button{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:#a8a294;border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:7px 14px;transition:.2s}
.bt .chips button:hover{color:var(--gold);border-color:rgba(181,152,71,.55)}
.bt .chips button.on{color:#1a1508;background:var(--gold);border-color:var(--gold)}
.panel-foot{margin-top:18px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.panel-foot p{font-size:13.5px;color:#77726a;flex:1;min-width:190px;margin:0}
.panel-foot a{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--gold);
  border-bottom:1px solid rgba(181,152,71,.45);padding-bottom:2px;white-space:nowrap}
.panel-foot a:hover{color:#fff;border-color:#fff}

/* --- detail frames, inside the content box --- */
.optshots{display:none}
.optshots.on{display:grid;gap:16px;margin-top:auto;padding-top:24px;
  border-top:1px dashed rgba(255,255,255,.14);animation:bt-fade .34s ease}
.optshots.n1.on{grid-template-columns:minmax(0,300px)}
.optshots.n2.on{grid-template-columns:repeat(2,minmax(0,1fr))}
.shot{display:flex;flex-direction:column;gap:9px;min-width:0}
.shot img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:11px;
  border:1px solid rgba(255,255,255,.11);transition:.25s}
.shot:hover img{border-color:var(--gold);transform:translateY(-2px)}
.shot figcaption{font-size:13px;color:#8f8a7e;line-height:1.45}
.shot figcaption b{display:block;font-family:var(--display);font-weight:800;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}

/* ================= FABRICS ================= */
.bt .fabrics{background:#fff;padding:82px 0 78px;border-top:1px solid var(--line)}
.bt .fabrics .head{max-width:820px;gap:13px;margin-bottom:42px}
.bt .fabrics h2{font-size:clamp(28px,3.3vw,42px);font-weight:800}
.bt .fabrics .head p{color:var(--muted);font-size:18px;max-width:62ch;margin:0}
.fablist{border-top:1px solid var(--line-2)}
.fb{border-bottom:1px solid var(--line-2)}
.fb>summary,.fb:not(.has){display:grid;grid-template-columns:1.5fr 1.15fr .8fr 1.9fr 26px;
  gap:24px;align-items:baseline;padding:19px 4px;list-style:none}
.fb>summary::-webkit-details-marker{display:none}
.fb.has>summary{cursor:pointer;transition:background .18s}
.fb.has>summary:hover{background:rgba(181,152,71,.07)}
.fb-n{font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--ink)}
.fb-c,.fb-g{font-size:14.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fb-u{font-size:14.5px;color:var(--muted)}
.fb-x{position:relative;width:13px;height:13px;justify-self:end;align-self:center}
.fb-x:before,.fb-x:after{content:"";position:absolute;background:var(--gold-dark);transition:.2s}
.fb-x:before{left:0;right:0;top:6px;height:1.5px}
.fb-x:after{top:0;bottom:0;left:6px;width:1.5px}
.fb[open] .fb-x:after{transform:scaleY(0)}
.fb[open]>summary{background:rgba(181,152,71,.07)}
.fb-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;
  padding:6px 4px 26px;max-width:900px;margin:0}
.fb-spec>div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.fb-spec dt{font-size:14px;color:var(--muted)}
.fb-spec dd{font-size:14px;font-weight:600;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;margin:0}
.fab-foot{margin-top:26px;font-size:13.5px;color:var(--muted);max-width:70ch}

@media(max-width:900px){
  .fb>summary,.fb:not(.has){grid-template-columns:1fr 26px;gap:4px 18px;padding:16px 4px}
  .fb-n{grid-column:1}
  .fb-c,.fb-g,.fb-u{grid-column:1}
  .fb-x{grid-row:1;grid-column:2}
  .fb-spec{grid-template-columns:1fr}
  .fb-spec>div{flex-wrap:wrap}
  .fb-spec dd{white-space:normal;text-align:left}
}

/* ================= SIZES ================= */
.bt .sizes{background:var(--canvas);padding:80px 0 74px;border-top:1px solid var(--line)}
.bt .sizes .head{max-width:760px;gap:13px;margin-bottom:12px}
.bt .sizes h2{font-size:clamp(28px,3.3vw,42px);font-weight:800}
.bt .sizes .head p{color:var(--muted);font-size:18px;max-width:62ch;margin:0}
.sizes-scroll{overflow-x:auto;overflow-y:visible;padding:42px 0 66px;margin:36px 0 -66px}
.sizes-scroll::-webkit-scrollbar{height:7px}
.sizes-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.sizes-stage{display:block;min-width:820px}
.sizes-fig{position:relative}
.sizes-fig>img{width:100%;display:block}
.sizes-grid{position:absolute;left:0;right:0;height:1px;background:rgba(20,20,20,.13);pointer-events:none}
.sizes-grid.ground{background:var(--gold);height:1.5px;opacity:.85}
.sizes-w{position:absolute;transform:translateX(-50%);top:100%;padding-top:16px;text-align:center;width:var(--span);min-width:70px}
.sizes-w b{display:block;font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sizes-w i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px;
  font-variant-numeric:tabular-nums}
.sizes-w:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;
  border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.sizes-foot{margin-top:74px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  border-top:1px solid var(--line-2);padding-top:18px}
.sizes-foot p{font-size:13.5px;color:var(--muted);flex:1;min-width:220px;margin:0}
.sizes-foot .hint{display:none;color:var(--gold-dark);font-weight:600}
.sizes-foot a{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--gold-dark);
  border-bottom:1px solid rgba(181,152,71,.45);padding-bottom:2px}
.sizes-foot a:hover{color:var(--ink);border-color:var(--ink)}

/* ================= BUILDS ================= */
.bt .builds{background:#fff;padding:82px 0 78px;border-top:1px solid var(--line)}
.bt .builds .head{max-width:820px;gap:13px;margin-bottom:44px}
.bt .builds h2{font-size:clamp(28px,3.3vw,42px);font-weight:800}
.bt .builds .head p{color:var(--muted);font-size:18px;max-width:64ch;margin:0}
.builds-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:52px;align-items:center}
.build{display:none}
.build.on{display:flex;flex-direction:column;gap:16px;animation:bt-fade .3s ease}
.build h3{font-size:29px;font-weight:800}
.build p{color:var(--muted);font-size:16.5px;max-width:44ch;margin:0}
.build .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.build .tags span{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-dark);background:rgba(181,152,71,.12);
  border:1px solid rgba(181,152,71,.38);border-radius:5px;padding:5px 10px}
.build-stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#efe9db}
.build-stage img{width:100%;aspect-ratio:3/2;object-fit:cover;display:none}
.build-stage img.on{display:block;animation:bt-fade .35s ease}
.filmstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px}
.frame{text-align:left;display:flex;flex-direction:column;gap:9px}
.frame img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:9px;
  border:1.5px solid var(--line);opacity:.62;transition:.22s}
.frame:hover img{opacity:1;border-color:var(--line-2)}
.frame.on img{opacity:1;border-color:var(--gold);box-shadow:0 0 0 3px rgba(181,152,71,.18)}
.frame b{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);transition:.2s}
.frame:hover b{color:var(--ink)}
.frame.on b{color:var(--gold-dark)}

@media(max-width:1180px){
  /* stacked: the control must sit above what it changes, so nothing moves under the thumb */
  .bt .builds .wrap{display:flex;flex-direction:column}
  .bt .builds .head{order:0}
  .filmstrip{order:1;margin:0 0 34px}
  .builds-grid{order:2;display:flex;flex-direction:column;gap:26px}
  .build-stage{order:-1}
  .sizes-scroll{margin-top:24px}
}
@media(max-width:900px){
  .sizes-foot .hint{display:inline}
}
@media(max-width:760px){
  .filmstrip{grid-template-columns:repeat(3,1fr)}
}

/* ================= QUOTE ================= */
.bt .cta{padding:84px 0}
.bt .cta .wrap{max-width:1180px;padding:0 24px}

@media(max-width:1180px){
  .bt-hero{min-height:0}
  .bt-hero .hero-in{padding:70px 0 76px}
  .spec-grid{grid-template-columns:1fr;gap:30px}
  .stage-wrap{position:relative;top:auto}
}
@media(max-width:900px){
  .bt-hero:after{background:linear-gradient(180deg,rgba(9,9,9,.86),rgba(9,9,9,.56) 50%,rgba(9,9,9,.86))}
}
@media(max-width:560px){
  /* no hover on touch, and a centred label this close to the frame edge would clip */
  .pin .lbl{display:none}
  .pin:after{width:26px;height:26px}
  .stage-veil{background:linear-gradient(to bottom,rgba(10,10,10,.14),transparent 32%)}
  .stage-cap{position:static;padding:13px 2px 0;color:#8f8a7e;font-size:13px}
}
@media(max-width:720px){
  .bt .wrap{padding:0 20px}
  .optshots.n1.on,.optshots.n2.on{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-wrap{position:relative;top:auto}
  .pin .dot{width:15px;height:15px}
  .stage-cap{font-size:13px;padding:14px 18px}
}