/* The transparent header belongs to the Taller home only. */
.header .workshop-logo,.header .workshop-tagline {display:none;}
body:has(.reference-hero) {--workshop-bar-height:30px;}
body:has(.reference-hero) .utility-bar {
  position:relative;
  z-index:21;
  justify-content:space-between;
  min-height:var(--workshop-bar-height);
  padding-block:0;
  flex-wrap:nowrap;
  letter-spacing:.035em;
}
body:has(.reference-hero) .utility-bar a {min-height:var(--workshop-bar-height);}
body:has(.reference-hero) .header {
  position:absolute;
  inset:var(--workshop-bar-height) 0 auto;
  height:90px;
  border:0;
  background:transparent;
  color:#211b16;
}
body:has(.reference-hero) .header .brand {flex-direction:column;align-items:center;gap:2px;}
body:has(.reference-hero) .header .brand-logo {display:none;}
body:has(.reference-hero) .header .workshop-tagline {
  display:block;
  font:600 clamp(7px,.65vw,9px)/1.2 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
}
body:has(.reference-hero) .header .workshop-logo {
  display:block;
  width:auto;
  height:76px;
  max-height:none;
  filter:none;
  mix-blend-mode:normal;
}
body:has(.reference-hero) .header nav {gap:24px;}
body:has(.reference-hero) .header nav > :is(a,button) {font:16px Georgia,serif;}
body:has(.reference-hero) .header nav > :is(a,button):hover {color:#762b3f;}
body:has(.reference-hero) .header nav > button span {color:#762b3f;}

.reference-hero {
  --workshop-wine:#762b3f;
  --workshop-ink:#302e2f;
  position:relative;
  height:clamp(720px,56.25vw,1120px);
  background:#e9e1d8 url('assets/portada-taller/bison-segundo-2.jpg') 50% 28%/cover no-repeat;
  color:var(--workshop-ink);
  overflow:hidden;
}
.reference-copy {
  position:relative;
  z-index:3;
  width:35.5%;
  margin-left:4.2%;
  padding:clamp(145px,11vw,220px) 0 75px;
}
.reference-copy .eyebrow {
  display:block;
  font:10px/1.5 Arial,sans-serif;
  letter-spacing:2.4px;
  color:var(--workshop-wine);
  margin-bottom:26px;
}
.reference-copy h1 {
  font:400 clamp(45px,4.1vw,79px)/1.05 Georgia,serif;
  letter-spacing:-2px;
  margin:0 0 24px;
}
.reference-copy h1 em {color:var(--workshop-wine);}
.reference-copy p {font:clamp(16px,1.35vw,21px)/1.45 Georgia,serif;margin:0 0 34px;}
.reference-rule {display:block;width:48px;height:2px;background:var(--workshop-wine);margin:27px 0 22px;}
.reference-actions {display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.reference-copy .button.dark {background:var(--workshop-wine);border:0;padding:18px 23px;font:15px Georgia,serif;gap:20px;}
.reference-copy .button.dark:hover {background:#5c1e30;}
.reference-copy .ref-config {font:14px Georgia,serif;border-bottom:1px solid var(--workshop-wine);}
.heritage-proof {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:29px 5%;
  gap:25px;
  background:#eae2d6;
  border-block:1px solid #d2c6b7;
}
.heritage-proof > div {border-right:1px solid #cfc2b1;padding-right:15px;}
.heritage-proof > div:last-child {border:0;}
.heritage-proof strong {display:block;font:400 clamp(17px,1.7vw,25px)/1.2 var(--serif);color:#302e2f;margin-bottom:9px;}
.heritage-proof span {font:9px/1.6 var(--sans);letter-spacing:1.2px;color:#762b3f;}
.heritage-proof + .values-strip {display:none;}

/* Scale the cards to 80% while retaining the number of columns and the gaps. */
.weapon-section .weapon-grid {width:calc(64% - 4px);}
.weapon-section .weapon-card .weapon-picture {min-height:85px;}
.weapon-section .weapon-card .weapon-trigger .weapon-name {
  inset-inline:5px;
  font-size:.68rem;
  overflow-wrap:anywhere;
}
.weapon-section .weapon-card .category-materials {padding:0;gap:4px;}
.weapon-section .weapon-card .category-materials > :is(a,button) {min-height:40px;padding:4px 2px;}
@media(max-width:1050px) {
  .weapon-section .weapon-grid {width:calc(64% - 2.4px);}
}
@media(max-width:740px) {
  .weapon-section .weapon-grid {width:calc(64% + .64px);}
  .weapon-section .weapon-card .weapon-trigger .weapon-name {
    inset-inline:4px;
    font-size:.65rem;
  }
  .weapon-section .weapon-card .category-materials > :is(a,button) {width:86%;font-size:.65rem;}
}
@media(max-width:520px) {
  .weapon-section .weapon-grid {width:calc(64% - .96px);}
}

@media(max-width:1200px) {
  body:has(.reference-hero) .header .workshop-logo {height:64px;}
  body:has(.reference-hero) .header nav {gap:14px;}
  body:has(.reference-hero) .header nav > :is(a,button) {font-size:13px;}
}
@media(min-width:741px) and (max-width:1100px) {
  .reference-copy {margin-left:4%;width:38%;}
  .reference-copy h1 {font-size:clamp(40px,4.5vw,49px);}
}
@media(max-width:850px) {
  body:has(.reference-hero) .header {height:80px;}
  body:has(.reference-hero) .header nav {display:none;}
  body:has(.reference-hero) .header.menu-open nav {
    display:flex;
    position:absolute;
    inset:80px 0 auto;
    padding:16px 5%;
    flex-wrap:wrap;
    background:#f3ebe1;
    border-bottom:1px solid #d2c6b7;
  }
  body:has(.reference-hero) .menu-button {display:block;}
}
@media(max-width:800px) {
  .heritage-proof {grid-template-columns:1fr 1fr;padding:25px 6%;gap:24px;}
  .heritage-proof > div:nth-child(2) {border:0;}
}
@media(max-width:740px) {
  .reference-copy {margin-left:7%;width:86%;padding:92px 0 8px;}
  .reference-copy h1 {font-size:clamp(36px,9.5vw,56px);letter-spacing:-1.4px;margin-bottom:12px;}
  .reference-copy h1 br {display:none;}
  .reference-copy .eyebrow {font-size:9px;letter-spacing:1.7px;margin-bottom:10px;}
  .reference-copy p {font-size:15px;line-height:1.4;max-width:390px;margin-bottom:18px;}
  .reference-rule {margin:14px 0 12px;}
  .reference-copy .button.dark {padding:13px 16px;font-size:13px;}
  .reference-copy .ref-config {font-size:13px;}
  .reference-actions {gap:12px;}
}
@media(max-width:360px) {
  body:has(.reference-hero) .header .workshop-logo {height:54px;}
}

.hero-slideshow {position:absolute;inset:0;width:100%;overflow:hidden;isolation:isolate;background:#e9e1d8;}
.hero-slide {position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;pointer-events:none;background:#e9e1d8;}
.hero-slide.is-active {opacity:1;visibility:visible;transition:opacity var(--slide-fade, 0ms) var(--slide-fade-easing,cubic-bezier(.4,0,.2,1));z-index:1;}
.hero-slide-media {display:block;width:100%;height:100%;object-fit:cover;object-position:65% center;}
.hero-slide:has(video) {background:#b4a58e;}
.hero-slide:has(video) .hero-slide-media {object-fit:cover;object-position:50% 10%;}
.hero-slideshow::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,239,230,.98) 0%,rgba(245,239,230,.94) 23%,rgba(245,239,230,.78) 37%,rgba(245,239,230,.22) 56%,transparent 72%),linear-gradient(180deg,rgba(245,239,230,.88),rgba(245,239,230,.12) 110px,transparent 180px);z-index:2;pointer-events:none;}
.reference-hero.has-slider .reference-copy {z-index:3;}
.hero-slider-controls {position:absolute;left:4.2%;bottom:30px;z-index:5;display:flex;align-items:center;gap:13px;color:#302e2f;}
.hero-slider-controls button {display:grid;place-items:center;border:0;background:transparent;color:inherit;padding:0;cursor:pointer;}
.hero-slider-controls .slider-arrow {width:34px;height:34px;font:20px/1 Georgia,serif;}
.slider-dots {display:flex;align-items:center;gap:10px;}
.hero-slider-controls .slider-dot {width:8px;height:8px;border:1px solid #762b3f;border-radius:50%;transition:background .3s,transform .3s;}
.hero-slider-controls .slider-dot.is-active {background:#762b3f;transform:scale(1.15);}
.hero-slider-controls .slider-pause {width:34px;height:34px;font:15px/1 Arial,sans-serif;border:1px solid #beb2a6;border-radius:50%;margin-left:2px;}
.slider-count {font:10px/1.2 Arial,sans-serif;letter-spacing:1.3px;margin-left:3px;}
.hero-slider-controls button:focus-visible {outline:2px solid #762b3f;outline-offset:5px;}
@media(max-width:1100px) and (min-width:741px){.hero-slider-controls{gap:8px}.slider-dots{gap:8px}}
@media(max-width:740px){
 .reference-hero.has-slider {min-height:900px;height:max(900px,100svh);padding-bottom:0;}
 .hero-slideshow {inset:0;width:100%;height:100%;}
 .hero-slide-media {object-position:60% bottom;}
 .hero-slideshow::after {inset:0;background:linear-gradient(180deg,rgba(245,239,230,.97) 0%,rgba(245,239,230,.93) 32%,rgba(245,239,230,.78) 46%,rgba(245,239,230,.1) 69%,transparent 84%);}
 .hero-slide:has(video) .hero-slide-media {object-position:50% 10%;}
 .hero-slider-controls {left:50%;bottom:12px;transform:translateX(-50%);gap:8px;padding:4px 9px;background:#f6f0e6e8;border-radius:24px;white-space:nowrap;}
 .slider-dots {gap:9px;}.hero-slider-controls .slider-arrow {width:24px;height:29px;}.hero-slider-controls .slider-pause {width:27px;height:27px;}.slider-count{font-size:9px;}
}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide.is-active{transition:none;}.hero-slider-controls .slider-dot{transition:none;}}

.hero-slide.is-exiting {opacity:1;visibility:visible;z-index:0;}
.hero-slide:has(img) .hero-slide-media {animation:slide-breathe 20s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:65% 55%;}
.hero-slide.is-active:has(img) .hero-slide-media {animation-play-state:running;}
.slider-is-paused .hero-slide:has(img) .hero-slide-media {animation-play-state:paused;}
@keyframes slide-breathe {from{transform:scale(1) translateX(0);}to{transform:scale(1.025) translateX(-.4%);}}
/* Full-width originals, with a separate focal point for each photograph. */
.hero-slide::before {content:none;}
.hero-slide-media,.hero-slide:has(video) .hero-slide-media {position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;mask-image:none;}
.hero-video-frame {display:contents;}
.hero-slide[data-slide="0"] .hero-slide-media {object-fit:cover;object-position:50% 28%;}
.hero-slide[data-slide="0"] {background:#b4a58e url('assets/portada-taller/bison-segundo-2.jpg') 50% 28%/cover no-repeat;}
.hero-slide[data-slide="0"] video {opacity:0;}
.hero-slide[data-slide="0"] video.is-playing {opacity:1;}
.hero-slideshow::after {background:linear-gradient(90deg,rgba(245,239,230,.88) 0%,rgba(245,239,230,.84) 23%,rgba(245,239,230,.66) 37%,rgba(245,239,230,.1) 57%,transparent 72%),linear-gradient(180deg,rgba(245,239,230,.83),rgba(245,239,230,.1) 110px,transparent 180px);}
@media(max-width:740px){
 .hero-slide[data-slide="0"] .hero-slide-media {object-position:50% 38%;}
 .hero-slide[data-slide="0"] {background-position:50% 38%;}
 .hero-slideshow::after {background:linear-gradient(180deg,rgba(245,239,230,.94),rgba(245,239,230,.88) 32%,rgba(245,239,230,.65) 46%,rgba(245,239,230,.06) 69%,transparent 84%);}
}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide.is-active{transition:none;}.hero-slide:has(img) .hero-slide-media{animation:none;}}

@media(min-width:741px){.reference-copy .hero-collection-sentence{white-space:nowrap;}}
.hero-slide picture {display:contents;}
@media(max-width:740px){
 body:has(.reference-hero) .header {background:#efe8db;}
 .reference-hero.has-slider {--mobile-media-height:clamp(285px,82vw,420px);height:auto;min-height:0;max-height:none;padding-bottom:calc(var(--mobile-media-height) + 56px);}
 .reference-hero.has-slider .reference-copy {padding-bottom:8px;}
 .hero-slide .hero-slide-media,.hero-slide:has(video) .hero-slide-media {inset:var(--hero-copy-height,550px) 0 auto;width:100%;height:var(--mobile-media-height);object-fit:contain;object-position:center;}
 .hero-slide[data-slide] .hero-slide-media {object-position:center;}
 .hero-slide picture {display:flex;align-items:center;position:absolute;inset:var(--hero-copy-height,550px) 0 auto;width:100%;height:var(--mobile-media-height);}
 .hero-slide picture .hero-slide-media {position:relative;inset:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}
 .hero-slide-photo picture {justify-content:flex-end;transform-origin:right center;scale:1.25;}
 .hero-slide[data-slide="1"] picture {scale:1.2;translate:12px 0;}
 .hero-slide[data-slide="0"] {background:#efe8db;}
 .hero-video-frame {
   display:block;
   position:absolute;
   inset:var(--hero-copy-height,550px) 0 auto;
   height:var(--mobile-media-height);
   background:url('assets/portada-taller/bison-segundo-2.jpg') 50% 38%/cover no-repeat;
   mask-image:linear-gradient(180deg,transparent,#000 13%,#000 78%,transparent);
 }
 .hero-slide[data-slide="0"] .hero-video-frame video {inset:0;height:100%;object-fit:cover;object-position:50% 38%;}
 .hero-slide picture {z-index:1;}
 .hero-slideshow::after {background:linear-gradient(180deg,rgba(245,239,230,.98) 0%,rgba(245,239,230,.96) calc(var(--hero-copy-height,550px) * .25),rgba(245,239,230,.91) calc(var(--hero-copy-height,550px) * .65),rgba(245,239,230,.79) calc(var(--hero-copy-height,550px) - 25px),rgba(245,239,230,.07) calc(var(--hero-copy-height,550px) + 50px),transparent calc(var(--hero-copy-height,550px) + 105px));}
}

/* These masks follow the blade, guard and grip in the source coordinates. */
.hero-slide-photo {
  --photo-width:133.333cqh;
  --photo-y:50%;
  --photo-fade:var(--sword-fade);
  background:#efe8db;
}
@media(max-width:740px) {
  .hero-slide-photo {--photo-fade:var(--sword-fade-mobile,var(--sword-fade));}
  .hero-slide:has(img) .hero-slide-media {animation:none;}
  .hero-slide-photo:not([data-slide="1"]) picture {container-type:size;}
  .hero-slide-photo:not([data-slide="1"]) picture::before {
    content:"";
    position:absolute;
    z-index:-1;
    top:calc((100% - min(75cqw,100cqh)) / 2 - 43px);
    right:0;
    width:min(100%,133.333cqh);
    height:106px;
    background:var(--photo-top-tint,#e2e2ef);
    mask-image:radial-gradient(ellipse 82% 50% at 76% 54%,#000 8%,#000b 34%,#0004 66%,transparent);
  }
  .hero-slide[data-slide="4"] {--photo-top-tint:#d6d3e8;}
  .hero-slide[data-slide="5"] {--photo-top-tint:#dbdaea;}
  .hero-slide[data-slide="6"] {--photo-top-tint:#dedfec;}
  .hero-slide[data-slide="7"] {--photo-top-tint:#e3f9fe;}
  .hero-slide[data-slide="8"] {--photo-top-tint:#d9d9e9;}
  .hero-slide[data-slide="9"] {--photo-top-tint:#e3e2f0;}
  .hero-slide[data-slide="10"] {--photo-top-tint:#ecebf6;}
  .hero-slide[data-slide="11"] {--photo-top-tint:#e4e4ef;}
}
.hero-slide[data-slide="1"] {--photo-width:100cqh;--photo-y:100%;}
.hero-slide[data-slide="2"] {--photo-y:0%;}
.hero-slide[data-slide="6"] {--photo-y:80%;}
.hero-slide.hero-slide-photo .hero-slide-media {
  mask-image:var(--photo-fade);
  mask-size:100% 100%;
  mask-repeat:no-repeat;
}
.hero-slide-catalogue {
  --caption-x:64%;
  --caption-y:11%;
  --caption-width:34%;
  --caption-height:7%;
  --logo-x:36%;
  --logo-y:88%;
}
.hero-slide[data-slide="7"] {
  --caption-x:33.5%;
  --caption-y:8.4%;
  --caption-width:21%;
  --caption-height:6.5%;
  --logo-x:64%;
}
.hero-slide[data-slide="8"] {--caption-x:62%;--caption-width:37%;}
.hero-slide[data-slide="9"] {--caption-x:67%;--caption-width:29%;}
.hero-slide[data-slide="10"] {--caption-width:32%;}
.hero-slide[data-slide="11"] {
  --caption-x:33%;
  --caption-y:12.4%;
  --caption-width:19%;
  --logo-x:64%;
  --logo-y:86%;
}
.hero-slide.hero-slide-catalogue .hero-slide-media {
  mask-image:var(--photo-fade),
             radial-gradient(ellipse var(--caption-width) var(--caption-height) at var(--caption-x) var(--caption-y),transparent 86%,#000 150%),
             radial-gradient(ellipse 23% 12.5% at var(--logo-x) var(--logo-y),transparent 86%,#000 150%);
  mask-composite:intersect;
}
@media(min-width:741px) {
  .hero-slide-photo picture {
    display:block;
    position:absolute;
    inset:0;
    container-type:size;
  }
  .hero-slide.hero-slide-photo .hero-slide-media {
    inset:var(--photo-y) auto auto 50%;
    width:max(100%,var(--photo-width));
    height:auto;
    translate:-50% calc(-1 * var(--photo-y));
  }
}

.hero-slide.hero-slide-flipped .hero-slide-media {
  scale:-1 1;
  transform-origin:center;
}

.workshop-mobile-break {display:none;}
@media(min-width:741px) {
  .cover-compare .workshop-layout-link {display:none;}
}
@media(max-width:740px) {
  [data-workshop-view="mobile"] body:has(.reference-hero) .header {background:transparent;}
  [data-workshop-view="mobile"] .reference-hero {
    --alternative-background:#efe8db;
    background:var(--alternative-background);
  }
  [data-workshop-view="mobile"] .reference-hero.has-slider {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(clamp(405px,108vw,540px),auto) auto auto;
    padding-bottom:12px;
  }
  [data-workshop-view="mobile"] .reference-hero.has-slider .reference-copy {
    grid-area:1 / 1;
    align-self:start;
    padding-bottom:14px;
    text-shadow:0 1px 6px var(--alternative-background),0 0 14px var(--alternative-background);
  }
  [data-workshop-view="mobile"] .reference-copy h1 br,
  [data-workshop-view="mobile"] .workshop-mobile-break {display:initial;}
  [data-workshop-view="mobile"] .workshop-title-period {display:none;}
  [data-workshop-view="mobile"] .reference-copy p {margin-bottom:0;}
  [data-workshop-view="mobile"] .hero-slideshow {
    grid-area:1 / 1;
    position:relative;
    inset:auto;
    height:auto;
  }
  [data-workshop-view="mobile"] .hero-slide picture,
  [data-workshop-view="mobile"] .hero-video-frame {
    inset:0;
    height:100%;
  }
  [data-workshop-view="mobile"] .hero-slide[data-slide="1"] picture {translate:12px -8%;}
  [data-workshop-view="mobile"] .hero-slide:is([data-slide="0"],[data-slide="1"])::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(90deg,#efe8dbd9,#efe8db91 50%,#efe8db20);
  }
  [data-workshop-view="mobile"] .hero-slide[data-slide="1"]::before {
    background:linear-gradient(90deg,#efe8dbc2,#efe8db70 49%,transparent 86%);
  }
  [data-workshop-view="mobile"] .hero-slideshow::after {
    background:linear-gradient(180deg,#efe8db66,#efe8db33 43px,transparent 96px);
  }
  [data-workshop-view="mobile"] .has-slider .reference-actions {
    grid-area:2 / 1;
    position:relative;
    z-index:3;
    margin:-12px 0 0 7%;
    display:grid;
    width:min(86%,230px);
    gap:8px;
  }
  [data-workshop-view="mobile"] .reference-actions :is(.button.dark,.ref-config) {
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:44px;
    padding:10px 16px;
    font:13px/1.2 Georgia,serif;
  }
  [data-workshop-view="mobile"] .reference-actions .button.dark {
    border:0;
    background:var(--workshop-wine);
  }
  [data-workshop-view="mobile"] .reference-actions .ref-config {
    border:1px solid var(--workshop-wine);
    background:var(--alternative-background);
  }
  [data-workshop-view="mobile"] .hero-slider-controls {
    grid-area:3 / 1;
    position:relative;
    inset:auto;
    transform:none;
    width:max-content;
    margin:10px auto 0;
  }
}