/* Hubbard Clothing Co. v2 — expand-on-tap detail view (original code).
   A card's photo grows to full-bleed (FLIP, transform + opacity), the headline swaps, details scroll underneath. */
.tk-xbtn{display:none}
.xp-ok .tk-xbtn{position:absolute;z-index:5;right:calc(clamp(1.25rem,5vw,6rem) + 10px);top:calc(var(--tk-top) - var(--deck-y) + .5rem + 10px);
  display:inline-flex;align-items:center;gap:.6rem;min-height:38px;padding:0 .9rem 0 1rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(43,41,38,.2);background:rgba(247,244,238,.86);color:var(--charcoal);
  font:600 .64rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.xp-ok .ink-dark .tk-xbtn,.xp-ok .tk-lookbook .tk-xbtn{background:rgba(20,19,17,.5);color:var(--ivory);border-color:rgba(236,231,223,.34)}
.tk-xbtn-i{position:relative;width:10px;height:10px}
.tk-xbtn-i::before,.tk-xbtn-i::after,.xp-close i::before,.xp-close i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;background:currentColor}
.tk-xbtn-i::after{transform:rotate(90deg)}
.tk-xbtn:focus-visible,.xp-close:focus-visible,.xp-play:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.xp-ok .tk-panel[data-xp-k] .tk-card{cursor:pointer}

html.xp-open,html.xp-open body{overflow:hidden}
.xp{position:fixed;inset:0;z-index:150;color:var(--charcoal)}
.xp[hidden]{display:none}
.xp-shade{position:absolute;inset:0;background:#14120F;opacity:0}
.xp-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.xp-anim .xp-scroll{overflow:hidden}
.xp-hero{position:relative;height:var(--tk-h,100vh);color:var(--ivory)}
.xp-media{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;transform-origin:0 0;background:#14120F;will-change:transform}
.xp-img{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.xp-img picture{display:block;width:100%;height:100%}
.xp-img img{display:block;width:100%;height:100%;object-fit:cover}
.xp-img iframe{position:absolute;left:0;top:50%;width:100%;aspect-ratio:16/9;height:auto;transform:translateY(-50%);border:0}
.xp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s ease;
  background:linear-gradient(180deg,rgba(14,13,11,.5) 0,rgba(14,13,11,0) 26%,rgba(14,13,11,.1) 48%,rgba(14,13,11,.78) 100%)}
.xp.is-in .xp-hero::after{opacity:1}
.xp-vplay .xp-hero::after,.xp-vplay .xp-head,.xp-vplay .xp-cue{opacity:0!important;pointer-events:none}
.xp-head{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0 clamp(1.25rem,6vw,6rem) calc(env(safe-area-inset-bottom,0px) + clamp(4.5rem,13svh,7rem))}
.xp-head .tk-eyebrow{color:var(--champagne);margin-bottom:.9rem}
.xp-title{font:400 min(clamp(2rem,1.2rem + 3.8vw,5.2rem),9svh)/1.08 var(--serif);letter-spacing:.03em;color:var(--ivory);margin:0 0 1.4rem;max-width:17ch;text-wrap:balance}
.xp-rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s var(--ease-lux),transform 1s var(--ease-lux);transition-delay:calc(var(--k,0) * 90ms)}
.xp.is-in .xp-rv{opacity:1;transform:none}
.xp-cue{position:absolute;z-index:1;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 1.2rem);width:1px;height:2.2rem;background:rgba(236,231,223,.5);opacity:0;transition:opacity .8s ease .6s}
.xp.is-in .xp-cue{opacity:1}
.xp-play{position:absolute;z-index:2;left:50%;top:42%;width:78px;height:78px;margin:-39px 0 0 -39px;border:0;border-radius:50%;cursor:pointer;
  background:var(--camel);display:grid;place-items:center;opacity:0;transition:opacity .6s ease .3s}
.xp-play[hidden]{display:none!important}   /* the barber film control exists only in the expanded Barber view */
.xp-play svg{width:26px;height:26px;margin-left:4px;fill:var(--charcoal)}
.xp.is-in .xp-play{opacity:1}
.xp-body{position:relative;background:var(--tn-oat,#EFE9E0);opacity:0;transition:opacity .5s ease}
.xp.is-in .xp-body{opacity:1}
.xp-sec{padding:clamp(3rem,9vh,6.5rem) clamp(1.25rem,6vw,6rem)}
.xp-sec+.xp-sec{padding-top:0}
.xp-wrap{max-width:860px;margin:0 auto}
.xp-h{font:500 clamp(1.65rem,1.2rem + 1.9vw,3rem)/1.14 var(--serif);letter-spacing:.03em;margin:0 0 1.3rem}
.xp-lede{font:300 clamp(1.15rem,1rem + .6vw,1.5rem)/1.5 var(--sans);margin:0 0 1.1rem;color:var(--charcoal)}
.xp-p{margin:0 0 1rem;max-width:64ch}
.xp-body .btn-row{margin-top:1.4rem}
.xp-fig{margin:2.2rem 0 0}
.xp-fig img,.xp-bleed img,.xp-gal img{display:block;width:100%;height:auto;border-radius:var(--radius-s,12px)}
.xp-fig figcaption{font:600 .66rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;margin-top:.75rem;color:var(--taupe-deep)}
.xp-bleed{margin:2.2rem 0 0}
.xp-gal{display:grid;gap:1rem;margin-top:1.8rem}
@media(min-width:700px){.xp-gal{grid-template-columns:1fr 1fr}}
.xp-staff{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1rem;margin-top:1.8rem}
@media(min-width:900px){.xp-staff{grid-template-columns:repeat(4,1fr)}}
.xp-ph{border-radius:var(--radius-s,12px);overflow:hidden;margin-bottom:.8rem;background:rgba(0,0,0,.05)}
.xp-ph img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.xp-staff h3,.xp-staff h4{font:500 1.02rem/1.3 var(--serif);letter-spacing:.03em;margin:0 0 .25rem}
.xp-staff p{font-size:.92rem;line-height:1.5;margin:0}
.xp-vid{margin-top:2rem;border-radius:var(--radius-s,12px);overflow:hidden;border:0}
.xp-body ul{padding-left:1.1rem}
.xr{opacity:0;transform:translate3d(0,30px,0);transition:opacity .9s var(--ease-lux),transform 1.1s var(--ease-lux);transition-delay:calc(var(--k,0) * 70ms)}
.xr.in{opacity:1;transform:none}
.xp-close{position:absolute;z-index:3;top:calc(env(safe-area-inset-top,0px) + 14px);right:clamp(14px,3vw,2.5rem);
  display:inline-flex;align-items:center;gap:.65rem;min-height:44px;padding:0 1rem 0 1.15rem;border-radius:999px;cursor:pointer;
  background:rgba(20,19,17,.62);color:var(--ivory);border:1px solid rgba(236,231,223,.3);
  font:600 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translate3d(0,-8px,0);transition:opacity .45s ease,transform .6s var(--ease-lux)}
.xp-close i{position:relative;width:12px;height:12px}
.xp-close i::before{transform:rotate(45deg)}.xp-close i::after{transform:rotate(-45deg)}
.xp.is-in .xp-close{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .xp-rv,.xr,.xp-close,.xp-body,.xp-play,.xp-cue,.xp-hero::after{transition:none!important}
  .xr{opacity:1;transform:none}
}