/* ============================================================
   HEART OF A LION — The Pursuit System
   Palette + type derived from the Pursuit Collection artwork
   ============================================================ */

:root{
  --ink:#10152A;
  --ink-2:#1B2340;
  --ink-3:#262F52;
  --bone:#EDE6D5;
  --bone-2:#F6F2E8;
  --chalk:#FFFFFF;
  --onyx:#0A0B0E;
  --blood:#A8121F;
  --line:rgba(237,230,213,.16);
  --line-dark:rgba(16,21,42,.14);

  --ff-display:'Bevan', Georgia, serif;
  --ff-body:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-black:'Pirata One', 'Bevan', serif;

  --pad:clamp(20px, 5vw, 84px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:70px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bone-2); color:var(--ink);
  font-family:var(--ff-body); font-weight:400; font-size:15px; line-height:1.65;
  letter-spacing:.005em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
::selection{background:var(--ink); color:var(--bone)}

/* ---------- type scale (deliberately restrained) ---------- */
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.08}
h1{font-size:clamp(1.9rem, 3.1vw, 2.7rem)}
h2{font-size:clamp(1.45rem, 2.2vw, 2.05rem)}
h3{font-size:clamp(1.05rem, 1.3vw, 1.25rem)}
p{margin:0 0 1.05em}
.lede{font-size:clamp(.98rem,1.15vw,1.08rem); line-height:1.72; color:rgba(16,21,42,.72); max-width:58ch}
.dark .lede,.onyx .lede,.phero .lede,.hero .lede{color:rgba(237,230,213,.72)}

.eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(16,21,42,.5); margin:0 0 18px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:''; width:26px; height:1px; background:currentColor; opacity:.55}
.dark .eyebrow,.onyx .eyebrow,.phero .eyebrow,.hero .eyebrow{color:rgba(237,230,213,.58)}

.script{font-family:var(--ff-black); font-weight:400; letter-spacing:.01em}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.sec{padding-block:clamp(64px, 8vw, 128px)}
.sec--tight{padding-block:clamp(48px, 5vw, 76px)}
.dark{background:var(--ink); color:var(--bone)}
.onyx{background:var(--onyx); color:var(--bone)}
.bone{background:var(--bone)}
.grid{display:grid; gap:clamp(20px,2.4vw,34px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav__in{
  width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav a, .nav button{color:var(--bone)}
.nav.is-stuck{background:rgba(16,21,42,.9); backdrop-filter:blur(14px); border-color:var(--line)}
.nav.is-light:not(.is-stuck) a,.nav.is-light:not(.is-stuck) button{color:var(--ink)}
.nav.is-light:not(.is-stuck) .brand__mark{filter:invert(1)}
.nav.is-light:not(.is-stuck) .burger i{background:var(--ink)}

.brand{display:flex; align-items:center; gap:10px}
.brand__mark{width:30px; height:34px; object-fit:contain; transition:transform .6s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-4deg) scale(1.06)}
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__txt b{font-size:12.5px; font-weight:800; letter-spacing:.17em; text-transform:uppercase}
.brand__txt span{font-size:8px; letter-spacing:.42em; opacity:.6; margin-top:4px; text-transform:uppercase}

.menu{display:flex; align-items:center; gap:clamp(16px,2vw,32px); list-style:none; margin:0; padding:0}
.menu a{
  font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  position:relative; padding:6px 0; opacity:.82; transition:opacity .3s;
}
.menu a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.menu a:hover{opacity:1}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.menu a[aria-current="page"]{opacity:1}

.nav__cta{display:flex; align-items:center; gap:14px}
.burger{display:none; background:none; border:0; padding:8px; width:40px; height:40px}
.burger i{display:block; width:20px; height:1.5px; background:var(--bone); margin:4px auto; transition:transform .4s var(--ease), opacity .3s}
.burger.is-open i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:89; background:var(--ink); color:var(--bone);
  display:flex; flex-direction:column; justify-content:center; padding:var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); pointer-events:none;
}
.drawer.is-open{clip-path:inset(0 0 0 0); pointer-events:auto}
.drawer ol{list-style:none; margin:0; padding:0; counter-reset:d}
.drawer li{overflow:hidden; border-bottom:1px solid var(--line)}
.drawer a{
  display:flex; align-items:baseline; gap:16px; padding:16px 0;
  font-size:clamp(1.5rem,7vw,2.2rem); font-weight:800; letter-spacing:-.02em;
  transform:translateY(105%); transition:transform .6s var(--ease);
}
.drawer.is-open a{transform:translateY(0)}
.drawer li:nth-child(1) a{transition-delay:.08s}
.drawer li:nth-child(2) a{transition-delay:.14s}
.drawer li:nth-child(3) a{transition-delay:.2s}
.drawer li:nth-child(4) a{transition-delay:.26s}
.drawer li:nth-child(5) a{transition-delay:.32s}
.drawer li:nth-child(6) a{transition-delay:.38s}
.drawer a i{counter-increment:d; font-style:normal; font-size:10px; letter-spacing:.2em; opacity:.4}
.drawer a i::before{content:'0' counter(d)}
.drawer__foot{margin-top:38px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.55}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--ink); --fg:var(--bone);
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; background:var(--bg); color:var(--fg); border:1px solid var(--bg);
  font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  overflow:hidden; isolation:isolate; transition:color .4s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--fg); z-index:-1;
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:translateY(0)}
.btn--ghost{background:transparent; border-color:rgba(16,21,42,.28); color:var(--ink)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--bone-2)}
.btn--ghost.is-on{background:var(--ink); border-color:var(--ink); color:var(--bone)}
.dark .btn--ghost,.onyx .btn--ghost,.hero .btn--ghost,.phero .btn--ghost,.nav .btn--ghost{border-color:rgba(237,230,213,.3); color:var(--bone)}
.dark .btn--ghost::before,.onyx .btn--ghost::before,.hero .btn--ghost::before,.phero .btn--ghost::before,.nav .btn--ghost::before{background:var(--bone)}
.dark .btn--ghost:hover,.onyx .btn--ghost:hover,.hero .btn--ghost:hover,.phero .btn--ghost:hover,.nav .btn--ghost:hover{color:var(--ink)}
.dark .btn--ghost.is-on,.onyx .btn--ghost.is-on{background:var(--bone); border-color:var(--bone); color:var(--ink)}
.nav.is-light:not(.is-stuck) .btn--ghost{border-color:rgba(16,21,42,.28); color:var(--ink)}
.nav.is-light:not(.is-stuck) .btn--ghost::before{background:var(--ink)}
.nav.is-light:not(.is-stuck) .btn--ghost:hover{color:var(--bone-2)}
.btn--bone{--bg:var(--bone); --fg:var(--ink)}
.btn--blood{--bg:var(--blood); --fg:#fff}

.tlink{
  display:inline-flex; align-items:center; gap:9px; font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; padding-bottom:5px;
  border-bottom:1px solid currentColor;
}
.tlink svg{transition:transform .4s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}

/* ============================================================
   HERO — video
   ============================================================ */
.hero{position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--onyx); color:var(--bone)}
.hero__video{position:absolute; inset:0; overflow:hidden; background:var(--onyx) url('../img/duo.jpg') center 22%/cover no-repeat}
.hero__video iframe{
  position:absolute; top:50%; left:50%; width:100vw; height:56.25vw;
  min-height:100svh; min-width:177.77svh; transform:translate(-50%,-50%);
  border:0; pointer-events:none;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,11,14,.72) 0%, rgba(10,11,14,.24) 34%, rgba(16,21,42,.62) 76%, rgba(16,21,42,.95) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(16,21,42,.6), transparent 60%);
}
.hero__grain{position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}
.hero__in{
  position:relative; z-index:2; height:100%; max-width:var(--maxw); margin:0 auto;
  padding:var(--nav-h) var(--pad) clamp(40px,6vw,72px);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero__wordmark{
  position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(28px,5vh,64px); z-index:1;
  font-family:var(--ff-display); font-size:clamp(4.5rem,17vw,15rem); line-height:.78;
  color:transparent; -webkit-text-stroke:1px rgba(237,230,213,.22);
  letter-spacing:.02em; text-align:center; user-select:none; pointer-events:none;
}
.hero__label{
  font-size:10px; letter-spacing:.4em; text-transform:uppercase; opacity:.7; margin-bottom:20px;
}
.hero h1{max-width:16ch; font-size:clamp(2rem,4.4vw,3.4rem); text-wrap:balance}
.hero__row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:34px; flex-wrap:wrap;
  margin-top:26px; padding-top:26px; border-top:1px solid var(--line);
}
.hero__meta{display:flex; gap:clamp(18px,3vw,48px); flex-wrap:wrap}
.hero__meta div{max-width:23ch}
.hero__meta dt{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; margin-bottom:6px}
.hero__meta dd{margin:0; font-size:13px; line-height:1.5}
.hero__acts{display:flex; gap:12px; flex-wrap:wrap}
/* page hero (interior) */
.phero{position:relative; padding:calc(var(--nav-h) + clamp(56px,9vw,120px)) 0 clamp(44px,6vw,84px); background:var(--ink); color:var(--bone); overflow:hidden}
.phero__ghost{
  position:absolute; right:-2%; bottom:-14%; font-family:var(--ff-display);
  font-size:clamp(7rem,20vw,17rem); line-height:.8; color:rgba(237,230,213,.045); pointer-events:none; user-select:none;
}
.phero .wrap{position:relative; z-index:1}
.phero h1{max-width:18ch}
.crumb{font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.5; margin-bottom:18px}
.crumb a:hover{opacity:1; text-decoration:underline}

/* ============================================================
   SEAM — signature divider (garment colour-block seam)
   ============================================================ */
.seam{display:block; width:100%; height:clamp(48px,7vw,110px); line-height:0}
.seam svg{width:100%; height:100%; display:block}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{overflow:hidden; padding:16px 0; border-block:1px solid var(--line); background:var(--ink); color:var(--bone)}
.marquee__t{display:flex; width:max-content; animation:slide 38s linear infinite}
.marquee.is-bone{background:var(--bone); color:var(--ink); border-color:var(--line-dark)}
.marquee span{
  display:inline-flex; align-items:center; gap:22px; padding-right:22px;
  font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; white-space:nowrap;
}
.marquee span::after{content:''; width:5px; height:5px; background:currentColor; border-radius:50%; opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee__t{animation-play-state:paused}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.pcard{position:relative; display:block}
.pcard__ph{position:relative; overflow:hidden; aspect-ratio:4/5; background:#fff}
.pcard__img-link{position:absolute; inset:0; display:block}
.pcard__img-link img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), opacity .6s var(--ease)}
.pcard__img-link img+img{position:absolute; inset:0; opacity:0}
.pcard:hover .pcard__img-link img{transform:scale(1.045)}
.pcard:hover .pcard__img-link img+img{opacity:1}

.pcard__tag{
  position:absolute; top:12px; left:12px; z-index:3; background:var(--ink); color:var(--bone);
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:6px 10px;
}
.pcard__tag.is-blood{background:var(--blood); color:#fff}

/* Bottom overlay: caption band is always visible; the buy bar grows in
   above it on hover without ever moving or covering the caption. */
.pcard__overlay{position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; pointer-events:none}

.pcard__buy{
  overflow:hidden; max-height:0; opacity:0; pointer-events:none;
  background:var(--bone);
  transition:max-height .4s var(--ease), opacity .3s var(--ease);
}
.pcard:hover .pcard__buy{max-height:56px; opacity:1; pointer-events:auto}
.pcard__buy .button{
  display:flex; align-items:center; justify-content:center; width:100%; height:56px;
  padding:0 14px; background:var(--bone); color:var(--ink); border:0;
  font-family:var(--ff-body); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:opacity .3s;
}
.pcard__buy .button:hover{opacity:.8}

/* Shop page: thumbnails match the photos' native 4:5 ratio (no cropping),
   grid clears the floated "Showing results" / sorting row, and "Add to bag" is solid blue */
.woocommerce-shop .pcard__ph{aspect-ratio:4/5}
.woocommerce-shop .grid.g4{clear:both}
.woocommerce-shop .pcard__buy a.button,
.woocommerce-shop .pcard__buy .add_to_cart_button,
.woocommerce-shop .pcard__buy a.button:hover,
.woocommerce-shop .pcard__buy .add_to_cart_button:hover{background:#485797; opacity:1}

/* Homepage: same solid-blue "Add to bag" treatment for the drop grid */
.home-drop .pcard__buy a.button,
.home-drop .pcard__buy .add_to_cart_button,
.home-drop .pcard__buy a.button:hover,
.home-drop .pcard__buy .add_to_cart_button:hover{background:#485797; opacity:1}
.pcard__buy a.added_to_cart.wc-forward{display:none}

.pcard__cap{
  pointer-events:auto; display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:13px 15px; background:rgba(16,21,42,.92);
}
.pcard__cap-text h3{margin:0; font-size:12.5px; font-weight:800; letter-spacing:.01em; text-transform:uppercase; color:var(--bone); line-height:1.3}
.pcard__cap-text span{display:block; margin-top:4px; font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(237,230,213,.58)}
.pcard__cap-price{flex-shrink:0; font-size:12.5px; font-weight:800; color:var(--bone); white-space:nowrap; padding-top:1px}
.pcard__cap-price del{opacity:.5; font-weight:600; font-size:11px}
.pcard__cap-price ins{text-decoration:none}

/* Reduced motion: keep the buy bar reachable via keyboard/tap without relying on the grow transition. */
@media (hover:none){
  .pcard__buy{max-height:56px; opacity:1; pointer-events:auto; position:static}
}

/* ============================================================
   EDITORIAL BLOCKS
   ============================================================ */
.split{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(28px,5vw,80px)}
.split--flip .split__fig{order:2}
.split__fig{position:relative; overflow:hidden}
.split__fig img{width:100%; aspect-ratio:4/5; object-fit:cover}
.figcap{
  position:absolute; left:0; bottom:0; background:var(--bone); color:var(--ink);
  padding:10px 14px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
}

.stat{border-top:1px solid var(--line-dark); padding-top:16px}
.dark .stat{border-color:var(--line)}
.stat b{display:block; font-family:var(--ff-display); font-size:clamp(1.7rem,3vw,2.4rem); line-height:1; font-weight:400; letter-spacing:.01em}
.stat span{display:block; margin-top:9px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.55}

.tile{position:relative; overflow:hidden; display:block; background:var(--ink)}
.tile img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; transition:transform 1.2s var(--ease), filter .6s}
.tile:hover img{transform:scale(1.05)}
.tile__cap{position:absolute; inset:auto 0 0 0; padding:clamp(16px,2vw,26px); color:var(--bone);
  background:linear-gradient(0deg, rgba(10,11,14,.85), transparent)}
.tile__cap h3{font-size:15px}
.tile__cap p{margin:6px 0 0; font-size:11.5px; opacity:.72; letter-spacing:.02em}

.value{padding:26px; border:1px solid var(--line); height:100%}
.value__n{font-family:var(--ff-display); font-size:1.3rem; opacity:.35; letter-spacing:.02em}
.value h3{margin:14px 0 10px; font-size:14px; letter-spacing:.06em; text-transform:uppercase}
.value p{font-size:13px; opacity:.7; margin:0; line-height:1.62}

/* blog */
.post{display:block; border-top:1px solid var(--line-dark); padding-top:18px}
.post__ph{overflow:hidden; aspect-ratio:16/11; margin-bottom:16px; background:var(--ink-2)}
.post__ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.post:hover .post__ph img{transform:scale(1.05)}
.post__meta{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.5; margin-bottom:10px}
.post h3{font-size:16px; line-height:1.3; letter-spacing:-.01em}
.post p{font-size:13px; opacity:.68; margin:9px 0 0}

.article{max-width:70ch; margin:0 auto}
.article h2{margin:44px 0 14px}
.article p{font-size:15.5px; line-height:1.8; color:rgba(16,21,42,.8)}
.article blockquote{
  margin:34px 0; padding:22px 0 22px 26px; border-left:2px solid var(--ink);
  font-family:var(--ff-black); font-size:1.35rem; line-height:1.45; letter-spacing:.01em;
}
.article img{margin:34px 0}

/* forms */
.field{display:block; margin-bottom:20px}
.field span{display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.55; margin-bottom:9px}
.field input,.field textarea,.field select{
  width:100%; padding:14px 0; background:transparent; border:0; border-bottom:1px solid var(--line-dark);
  font:inherit; font-size:14px; color:inherit; border-radius:0; transition:border-color .4s;
}
.dark .field input,.dark .field textarea,.dark .field select{border-color:var(--line); color:var(--bone)}
.field input:focus,.field textarea:focus,.field select:focus{outline:0; border-color:currentColor}
.field textarea{resize:vertical; min-height:110px}

.acc{border-top:1px solid var(--line-dark)}
.acc__q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:0; padding:20px 0; text-align:left; color:inherit;
  font-size:13.5px; font-weight:700; letter-spacing:.01em;
}
.acc__q i{font-style:normal; font-size:18px; line-height:1; transition:transform .4s var(--ease)}
.acc.is-open .acc__q i{transform:rotate(45deg)}
.acc__a{max-height:0; overflow:hidden; transition:max-height .55s var(--ease)}
.acc__a p{font-size:13.5px; opacity:.7; padding-bottom:20px; margin:0; max-width:62ch}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--onyx); color:var(--bone); padding-top:clamp(52px,6vw,86px)}
.foot__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(24px,3vw,52px); padding-bottom:52px}
.foot h4{font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.5; margin-bottom:18px; font-weight:600}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.foot a{font-size:13px; opacity:.78; transition:opacity .3s}
.foot a:hover{opacity:1}
.foot__brand p{font-size:13px; opacity:.6; max-width:34ch; margin-top:16px}
.foot__base{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-block:22px 26px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.5;
}
.foot__word{
  font-family:var(--ff-display); font-size:clamp(3rem,14vw,11rem); line-height:.8; text-align:center;
  color:transparent; -webkit-text-stroke:1px rgba(237,230,213,.13); letter-spacing:.02em;
  padding-bottom:8px; user-select:none;
}
.social{display:flex; gap:10px}
.social a{
  width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line);
  transition:background .4s var(--ease), color .4s;
}
.social a:hover{background:var(--bone); color:var(--onyx)}

/* ============================================================
   SCROLL ANIMATION
   ============================================================ */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv[data-rv="clip"]{opacity:1; transform:none}
.rv[data-rv="clip"] img{clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease), transform 1.15s var(--ease); transform:scale(1.06)}
.rv[data-rv="clip"].in img{clip-path:inset(0 0 0 0); transform:scale(1)}
.rv[data-rv="left"]{transform:translateX(-28px)}
.rv[data-rv="right"]{transform:translateX(28px)}
.rv[data-rv="scale"]{transform:scale(.965)}
.rv.in[data-rv="left"],.rv.in[data-rv="right"],.rv.in[data-rv="scale"]{transform:none}
[data-stagger]>*{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-stagger].in>*{opacity:1; transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:.05s}
[data-stagger].in>*:nth-child(2){transition-delay:.13s}
[data-stagger].in>*:nth-child(3){transition-delay:.21s}
[data-stagger].in>*:nth-child(4){transition-delay:.29s}
[data-stagger].in>*:nth-child(5){transition-delay:.37s}
[data-stagger].in>*:nth-child(6){transition-delay:.45s}
[data-stagger].in>*:nth-child(7){transition-delay:.53s}
[data-stagger].in>*:nth-child(8){transition-delay:.61s}

.lines span{display:block; overflow:hidden}
.lines span b{display:block; font-weight:inherit; transform:translateY(105%); transition:transform .95s var(--ease)}
.lines.in span b{transform:translateY(0)}
.lines.in span:nth-child(2) b{transition-delay:.08s}
.lines.in span:nth-child(3) b{transition-delay:.16s}

/* page transition veil */
.veil{position:fixed; inset:0; z-index:200; background:var(--ink); pointer-events:none;
  transform:translateY(0); transition:transform .8s var(--ease)}
.veil.is-up{transform:translateY(-100%)}
.veil.is-down{transform:translateY(0)}
.veil--out{transform:translateY(100%)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .menu{display:none}
  .burger{display:block}
  .nav__cta .btn{display:none}
  .split{grid-template-columns:1fr}
  .split--flip .split__fig{order:0}
  .g3{grid-template-columns:1fr 1fr}
  .hero__row{align-items:flex-start}
}
@media (max-width:640px){
  .hero__wordmark{display:none}
  .hero__acts{width:100%}
  .hero__acts .btn{flex:1; justify-content:center}
  .hero__in{padding-bottom:36px}
  .hero__row{margin-top:20px; padding-top:20px; gap:22px}
  .phero__ghost{font-size:9rem}
}
@media (max-width:600px){
  .g2,.g3{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr; gap:32px}
  .hero__meta{gap:18px}
  .pcard__buy{max-height:56px; opacity:1; pointer-events:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rv,[data-stagger]>*,.lines span b{opacity:1 !important; transform:none !important; clip-path:none !important}
}
:focus-visible{outline:2px solid var(--blood); outline-offset:3px}


/* ============================================================
   CONTEXT FIXES
   ============================================================ */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.value{border-color:var(--line-dark)}
.dark .value,.onyx .value{border-color:var(--line)}
.dark .acc,.onyx .acc,.dark .post,.onyx .post{border-color:var(--line)}
.dark .field input,.dark .field textarea,.dark .field select,
.onyx .field input,.onyx .field textarea,.onyx .field select,
.foot .field input,.foot .field textarea,.foot .field select{border-color:var(--line); color:var(--bone)}
.dark input::placeholder,.onyx input::placeholder,.foot input::placeholder{color:rgba(237,230,213,.38)}
select option{color:var(--ink); background:var(--bone-2)}
.dark .article p,.onyx .article p{color:rgba(237,230,213,.76)}

.seam{position:relative; margin-top:-1px; margin-bottom:-1px}

[data-thumb]{opacity:.55; transition:opacity .35s var(--ease), outline-color .3s; outline:1px solid transparent; outline-offset:-1px}
[data-thumb]:hover{opacity:.85}
[data-thumb].is-on{opacity:1; outline-color:var(--ink)}

.hero__wordmark,.foot__word,.phero__ghost{color:rgba(237,230,213,.07)}
@supports (-webkit-text-stroke: 1px currentColor){
  .hero__wordmark{color:transparent; -webkit-text-stroke:1px rgba(237,230,213,.22)}
  .foot__word{color:transparent; -webkit-text-stroke:1px rgba(237,230,213,.13)}
}
.foot .brand__txt b{font-size:12.5px}
.tlink:hover{opacity:.75}

/* ============================================================
   WORDPRESS THEME ADDITIONS
   Cart icon, contact/newsletter form notices, comments, editor
   parity — everything that isn't WooCommerce-template-specific
   (that lives in woocommerce.css) but is needed regardless of
   whether WooCommerce is active.
   ============================================================ */
.nav__cart{position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-right:2px}
.nav__cart-count{
  position:absolute; top:2px; right:0; min-width:16px; height:16px; padding:0 4px;
  background:var(--blood); color:#fff; border-radius:50%; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.nav__cart-count:empty,.nav__cart-count[data-empty="1"]{display:none}

.form-notice{font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-top:16px; opacity:.75}
.form-notice--error{color:var(--blood); opacity:1}

.comments{margin-top:20px}
.comment-list{list-style:none; padding:0; margin:0}
.comment-list .comment{list-style:none; padding:20px 0; border-top:1px solid var(--line-dark); display:flex; gap:16px}
.comment-list .children{list-style:none; margin:0 0 0 40px; padding:0}
.comment-list .avatar{width:44px; height:44px; border-radius:50%; flex-shrink:0}
.comment-author .fn{font-weight:700; font-size:13.5px; font-style:normal}
.comment-metadata{font-size:10.5px; opacity:.5; letter-spacing:.06em; margin:2px 0 8px}
.comment-metadata a{color:inherit}
.comment-content p{font-size:13.5px; opacity:.78; margin:0 0 .6em}
.comment-reply-link{font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-decoration:underline}
#respond{margin-top:10px}
.comment-form p{margin-bottom:16px}
.comment-form label{display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; margin-bottom:8px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line-dark); background:transparent; font:inherit; font-size:14px;
}
.comment-form-cookies-consent{display:flex; align-items:center; gap:8px}
.comment-form-cookies-consent label{margin:0; text-transform:none; letter-spacing:0; opacity:.7; font-size:12.5px}

.skip-link{position:absolute; left:-9999px; top:0; z-index:999; background:var(--ink); color:var(--bone); padding:14px 20px; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.skip-link:focus{left:12px; top:12px}

@media (max-width:640px){
  ul.products,
  .woocommerce div.product .related.products ul.products,
  .woocommerce div.product .upsells.products ul.products{grid-template-columns:1fr}
}

/* ============================================================
   GALLERY GRID (Customizer photo galleries)
   ============================================================ */
.gal__item{display:block; overflow:hidden; background:var(--ink-2); position:relative}
.gal__item img{width:100%; height:100%; aspect-ratio:1; object-fit:cover; transition:transform 1s var(--ease), opacity .5s}
.gal__item:hover img{transform:scale(1.05)}
.gal__item::after{
  content:''; position:absolute; inset:0; background:var(--ink); opacity:0; transition:opacity .45s var(--ease);
  pointer-events:none;
}
.gal__item:hover::after{opacity:.12}
@media (max-width:860px){ .gal.g4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .gal.g4,.gal.g3{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   LOOKBOOK TILE — hover-scrub image slider
   ============================================================ */
.tile__scrub{position:relative; display:block; width:100%; aspect-ratio:3/4; overflow:hidden; cursor:pointer; background:var(--ink-2)}
.tile__scrub img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; opacity:0; z-index:1;
  transition:opacity .35s ease;
}
.tile__scrub img.is-active{opacity:1; z-index:2}
.tile__dots{
  position:absolute; left:0; right:0; bottom:14px; z-index:3;
  display:flex; justify-content:center; gap:6px; pointer-events:none;
}
.tile__dots i{width:5px; height:5px; border-radius:50%; background:rgba(237,230,213,.4); transition:background .25s, transform .25s; display:block}
.tile__dots i.is-on{background:var(--bone); transform:scale(1.35)}
.tile__arrow{
  position:absolute; top:50%; z-index:4; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,11,14,.5); color:var(--bone);
  opacity:0; transition:opacity .3s ease, background .3s ease;
}
.tile__scrub:hover .tile__arrow{opacity:1}
.tile__arrow:hover{background:rgba(10,11,14,.8)}
.tile__arrow--prev{left:10px}
.tile__arrow--next{right:10px}
@media (hover:none){
  .tile__arrow{opacity:1; background:rgba(10,11,14,.4)}
}
@media (prefers-reduced-motion:reduce){
  .tile__scrub img{transition:opacity .01ms}
}

/* ===============================================================
   BEHIND THE SCENES — auto-advancing slider, 3 photos per slide,
   right-to-left slide transition
   =============================================================== */
.bts-slider{position:relative; width:100%; aspect-ratio:3/1.05; max-height:420px; overflow:hidden; border-radius:2px; background:var(--ink-2)}
.bts-slider__track{display:flex; width:100%; height:100%; transition:transform .7s var(--ease)}
.bts-slider__group{flex:0 0 100%; width:100%; height:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.5vw,16px)}
.bts-slider__group img{width:100%; height:100%; object-fit:cover; display:block; border-radius:2px}
.bts-slider__dots{position:absolute; left:0; right:0; bottom:14px; z-index:4; display:flex; justify-content:center; gap:8px}
.bts-slider__dots i{width:6px; height:6px; border-radius:50%; background:rgba(237,230,213,.4); transition:background .25s, transform .25s; display:block}
.bts-slider__dots i.is-on{background:var(--bone); transform:scale(1.4)}
@media (max-width:640px){ .bts-slider{aspect-ratio:1/1.15; max-height:480px} .bts-slider__group{gap:6px} }
@media (prefers-reduced-motion:reduce){ .bts-slider__track{transition:none} }