/* About Us (about.html, js/about.js): Weston's story in the order a good
   brand page tells it. Photo hero, the reason, where it began, what came
   next, how it is made, the numbers, the leather, a closer look, the
   principles, the reviews, the promise with the dates
   and six reasons to buy with confidence, the house, then "make it yours".
   Ink on stone, hairlines, square corners; sentence-case headings, since
   this page is read as a story rather than scanned as a shop. */

/* photo spots, framed as the owner set them (js/photos.js) */
figure[data-slot]{position:relative;margin:0;overflow:hidden;background:var(--stage)}
figure[data-slot][hidden]{display:none}
figure[data-slot]:not([data-fill]){aspect-ratio:var(--ar)}
figure[data-slot] img{position:absolute;inset:0;display:block;width:100%;height:100%}

/* shared: section heads and headings */
.ab-head{max-width:760px;margin:0 auto clamp(30px,3.6vw,48px);padding:0 var(--pad);text-align:center}
.ab-head .eyebrow,.ab-split-copy .eyebrow,.ab-leather-copy .eyebrow{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.ab-head h2,.ab-split-copy h2,.ab-leather-copy h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,3.3vw,48px);line-height:1.12;letter-spacing:.005em;color:var(--ink);text-wrap:balance}
.ab-head p:not(.eyebrow){max-width:58ch;margin:16px auto 0;font-size:16px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
#main > section + section{margin-top:clamp(72px,9vw,136px)}
#main > .ab-open{margin-top:clamp(64px,8vw,112px)}

/* the hero: a photo, the title over it */
.ab-hero{position:relative;height:clamp(520px,72vh,860px);overflow:hidden;background:var(--ph-dark);color:#fff}
.ab-hero .ab-hero-img{position:absolute;inset:0;aspect-ratio:auto}
.ab-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,9,.66) 0,rgba(10,10,9,.18) 45%,rgba(10,10,9,0) 70%),linear-gradient(to right,rgba(10,10,9,.36) 0,rgba(10,10,9,0) 60%);pointer-events:none}
.ab-hero-copy{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:clamp(36px,5vw,76px);max-width:760px}
.ab-hero h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(38px,5.4vw,80px);line-height:1.02;letter-spacing:.01em;text-wrap:balance;text-shadow:0 1px 24px rgba(10,10,9,.25)}
.ab-hero-lede{max-width:44ch;margin:18px 0 0;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:rgba(255,255,255,.9)}

/* the reason, set large */
.ab-open{max-width:980px;margin-left:auto;margin-right:auto;padding:0 var(--pad);text-align:center}
.ab-open-big{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.5vw,36px);line-height:1.42;color:var(--ink);text-wrap:balance}
.ab-open-small{margin:28px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}

/* where it began: the six Originals */
.ab-orig-row{max-width:1440px;margin:0 auto;padding-top:0}
.ab-foot{margin:clamp(24px,3vw,36px) 0 0;text-align:center}

/* what came next: photo beside the copy */
.ab-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px);max-width:1440px;margin-left:auto;margin-right:auto;padding:0 var(--pad)}
.ab-split.no-photo{grid-template-columns:minmax(0,1fr);max-width:820px}
.ab-split-img[data-fill]{align-self:stretch;min-height:clamp(440px,44vw,700px)}
.ab-split-copy p:not(.eyebrow){max-width:52ch;margin:18px 0 0;font-size:16.5px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.ab-split-copy .btn{margin-top:30px}

/* how a glove is made */
.ab-made-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.ab-steps{counter-reset:step;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);max-width:1440px;margin:clamp(28px,3.4vw,44px) auto 0;padding:0 var(--pad);list-style:none}
.ab-steps li{counter-increment:step;display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--ink)}
.ab-steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-3)}
.ab-steps b{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ab-steps span{font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* the numbers, on ink */
.ab-numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--ink);color:#F7F6F3}
.ab-numbers > div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:clamp(44px,5vw,72px) 18px;text-align:center}
.ab-numbers > div + div{border-left:1px solid rgba(247,246,243,.14)}
.ab-numbers b{font-family:var(--display);font-weight:300;font-size:clamp(56px,6.4vw,96px);line-height:1;letter-spacing:-.01em}
.ab-numbers span{max-width:20ch;font-size:14px;line-height:1.5;color:rgba(247,246,243,.72)}

/* the leather: copy beside two close-ups */
.ab-leather{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(32px,6vw,96px);max-width:1440px;margin-left:auto;margin-right:auto;padding:0 var(--pad)}
.ab-leather-copy > p:not(.eyebrow){max-width:50ch;margin:18px 0 0;font-size:16.5px;line-height:1.75;color:var(--ink-2)}
.ab-facts{margin:28px 0 0;border-top:1px solid var(--rule)}
.ab-facts div{padding:16px 0;border-bottom:1px solid var(--rule)}
.ab-facts dt{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ab-facts dd{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.ab-leather-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.ab-leather-pics figure:nth-child(2){margin-top:clamp(40px,6vw,96px)}

/* what we stand for */
.ab-values-list{counter-reset:value;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);max-width:1440px;margin:0 auto;padding:0 var(--pad);list-style:none}
.ab-values-list li{counter-increment:value;padding:28px 24px 30px;background:var(--white);border:1px solid var(--rule)}
.ab-values-list li::before{content:counter(value,decimal-leading-zero);display:block;margin-bottom:22px;font-family:var(--display);font-weight:300;font-size:40px;line-height:1;color:var(--ink-3)}
.ab-values-list b{display:block;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ab-values-list p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}



/* the house today */
.ab-house-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.ab-house-tile{display:block;color:var(--ink)}
.ab-house-tile figure{margin:0 0 16px;aspect-ratio:4/5;overflow:hidden;background:var(--stage)}
.ab-house-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ab-house-tile.is-glove img{object-fit:contain}
.ab-house-tile:hover img{transform:scale(1.03)}
.ab-house-tile .eyebrow{margin:0 0 6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.ab-house-tile h3{margin:0;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ab-house-tile:hover h3{text-decoration:underline;text-underline-offset:4px}

/* the last detail: a photo band, then "make it yours" */
.ab-close .ab-close-img{aspect-ratio:auto}
.ab-close .ab-close-img[data-fill]{height:clamp(320px,38vw,560px)}
.ab-close .try{border-bottom:0}

@media(max-width:980px){
  .ab-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-values-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-numbers > div:nth-child(3){border-left:0}
  .ab-numbers > div:nth-child(n+3){border-top:1px solid rgba(247,246,243,.14)}
}
@media(max-width:860px){
  .ab-split,.ab-leather{grid-template-columns:minmax(0,1fr)}
  .ab-split-img[data-fill]{min-height:0;aspect-ratio:4/5}
  .ab-house-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .ab-hero{height:78vh}
  .ab-made-pics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .ab-made-pics::-webkit-scrollbar{display:none}
  .ab-made-pics figure{scroll-snap-align:center}
  .ab-steps,.ab-values-list{grid-template-columns:minmax(0,1fr)}
  .ab-house-grid{grid-template-columns:minmax(0,1fr)}
  .ab-leather-pics figure:nth-child(2){margin-top:32px}
}

/* look closer: four details, each with its caption */
.ab-closer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.ab-detail{margin:0}
.ab-detail figcaption{margin-top:14px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.ab-detail figcaption b{display:block;margin-bottom:4px;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* what customers say (sample until real reviews exist) */
.ab-rv-stars{display:flex;justify-content:center;margin-top:16px}
.ab-rv-stars .rv-stars-fill svg,.ab-rv-list .rv-stars-fill svg{fill:var(--ink)}
.ab-rv-stars .rv-stars-base svg,.ab-rv-list .rv-stars-base svg{fill:var(--rule-2)}
.ab-rv-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);max-width:1440px;margin:0 auto;padding:0 var(--pad);list-style:none}
.ab-rv-list li{display:flex;flex-direction:column;gap:14px;padding:28px 26px;background:var(--white);border:1px solid var(--rule)}
.ab-rv-list p{flex:1;margin:0;font-size:15.5px;line-height:1.7;color:var(--ink)}
.ab-rv-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-3)}
.ab-rv-by b{color:var(--ink);font-weight:600}
.ab-rv-by em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ab-rv-sample{margin:14px 0 0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* buy with confidence: the promise, the dates, then six reasons */
.ab-trust{padding:clamp(56px,7vw,100px) var(--pad);background:var(--ground-2)}
.ab-trust-head{max-width:760px;margin:0 auto;text-align:center}
.ab-trust-head .eyebrow{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.ab-trust-head h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,3.3vw,48px);line-height:1.12;text-wrap:balance}
.ab-timeline{max-width:1100px;margin:clamp(36px,4vw,56px) auto 0;padding:26px clamp(18px,3vw,36px) 30px;background:var(--white);border:1px solid var(--rule)}
.ab-timeline-kicker{margin:0 0 20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ab-timeline-kicker span{color:var(--ink)}
.ab-timeline ol{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.ab-timeline ol::before{content:"";position:absolute;top:7px;left:7px;right:33%;border-top:1px dashed var(--rule-ctl)}
.ab-timeline li{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:28px}
.ab-timeline li::before{content:"";position:absolute;top:0;left:0;width:15px;height:15px;border:1.5px solid var(--ink);border-radius:50%;background:var(--white)}
.ab-timeline li:first-child::before{background:var(--ink)}
.ab-timeline b{font-family:var(--display);font-size:18px;font-weight:500;color:var(--ink)}
.ab-timeline span{font-size:14px;line-height:1.55;color:var(--ink-2)}
.ab-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;max-width:1100px;margin:clamp(20px,2.4vw,32px) auto 0;padding:0;list-style:none;background:var(--rule);border:1px solid var(--rule)}
.ab-trust-grid li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:26px 24px 28px;background:var(--ground)}
.ab-trust-grid li > svg{width:28px;height:28px;margin-bottom:6px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-trust-grid b{font-family:var(--display);font-size:13.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ab-trust-grid p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.ab-trust-grid .link{margin-top:auto;padding-top:8px}
.ab-pay{justify-content:flex-start;margin-top:6px}

@media(max-width:980px){
  .ab-closer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-rv-list{grid-template-columns:minmax(0,1fr)}
  .ab-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .ab-timeline ol{grid-template-columns:minmax(0,1fr);gap:22px}
  .ab-timeline ol::before{top:7px;bottom:7px;left:7px;right:auto;border-top:0;border-left:1px dashed var(--rule-ctl)}
  .ab-timeline li{padding:0 0 0 30px}
  .ab-trust-grid{grid-template-columns:minmax(0,1fr)}
}
.ab-pay .pay-note{display:none}   /* the tile already says "Secure checkout" */