/* Homepage pieces added on top of the brand layer. */

/* ── hero slide 1 is a <picture>: phones get the portrait of the same swing ── */
.hero-slide > picture{position:absolute;inset:0}
.hero-slide > picture img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
@media(max-width:700px){.hero-slide > picture img{object-position:var(--pos-m,var(--pos,50% 50%))}}

/* ── proof row beside the glove buttons: rating, delivery date, the biggest bundle ── */
.proof{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 0;margin:22px 0 0;padding:0;list-style:none;text-align:left;
  font-family:var(--mono);font-size:11.5px;font-weight:400;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}
.proof[hidden]{display:none}
.proof li{display:flex;align-items:center;gap:9px;max-width:100%}
.proof span{min-width:0}
.proof li + li::before{content:"";align-self:stretch;width:1px;margin:0 9px 0 18px;background:var(--rule-2)}
.proof a{display:flex;align-items:center;gap:9px;color:inherit}
.proof a:hover span{text-decoration:underline;text-underline-offset:3px}
.proof svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.proof b{font-weight:400;color:var(--ink)}
.proof-start{justify-content:flex-start}
/* on the hero photo */
.hero-copy .proof{margin-top:26px}
.proof-light{justify-content:flex-start;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(10,10,9,.5)}
.proof-light b{color:#fff}
.proof-light svg{stroke:#fff;filter:drop-shadow(0 1px 4px rgba(10,10,9,.4))}
.proof-light li + li::before{background:rgba(255,255,255,.45)}
@media(max-width:700px){
  .proof{flex-direction:column;align-items:center;gap:10px}
  .proof li + li::before{display:none}
  .proof-light,.proof-start{align-items:flex-start}
}

/* five stars filled to the rating, ink (white on the hero) */
.proof-stars{position:relative;flex:none;display:inline-block;width:70px;height:14px;color:var(--ink)}
.proof-stars > svg{position:absolute;inset:0;width:70px;height:14px;fill:currentColor;stroke:none;filter:none}
.proof-stars > .base{opacity:.22}
.proof-stars > .fill{clip-path:inset(0 calc(100% - var(--fill,100%)) 0 0)}
.proof-light .proof-stars{color:#fff}
.proof-light .proof-stars > .base{opacity:.4}

/* ── try your initials: the product page's live foil preview ── */
.try{
  display:grid;justify-content:center;column-gap:clamp(40px,6vw,104px);
  grid-template-columns:minmax(0,clamp(420px,32vw,600px)) minmax(0,500px);
  grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:"stage ." "stage head" "stage body" "stage .";
  padding:clamp(56px,7vw,104px) var(--pad);background:var(--white);border-bottom:1px solid var(--rule);
}
.try-head{grid-area:head}
.try-stage{grid-area:stage}
.try-body{grid-area:body}
.try-head h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:.08em;text-transform:uppercase;text-wrap:balance}
.try-stage{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--stage);container-type:inline-size}
.try-stage img{width:100%;height:100%;object-fit:cover}
.try-tag{
  position:absolute;left:14px;top:14px;padding:6px 9px 5px;border:1px solid var(--ink);background:rgba(255,255,255,.92);
  font-family:var(--mono);font-size:11px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.try-tag[hidden]{display:none}
.try-lede{margin:18px 0 26px;max-width:46ch;color:var(--ink-2)}
.try-field{display:flex;gap:10px}
.try-field input{
  flex:1;min-width:0;height:56px;padding:0 16px;border:1px solid var(--rule-ctl);border-radius:0;background:var(--white);
  font-family:var(--serif);font-size:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--foil-ink);caret-color:var(--ink);
  transition:border-color .2s;
}
.try-field input:hover{border-color:var(--ink-3)}
.try-field input:not(:placeholder-shown){border-color:var(--ink)}
.try-field input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.try-field input::placeholder{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink-3);opacity:1}
.try-field .btn{flex:none;min-height:56px}
.try-hint{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3)}
.try-hint.is-ask{color:var(--ink);font-weight:600}
.try-offer{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:26px 0 0}
.try-offer [data-offer-line]{font-size:14px;color:var(--ink-2)}
.try-body .proof{flex-direction:column;align-items:flex-start;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.try-body .proof li + li::before{display:none}
@media(max-width:860px){
  .try{grid-template-columns:minmax(0,520px);grid-template-rows:none;grid-template-areas:"head" "stage" "body";row-gap:26px}
  .try-head{text-align:center}
  .try-lede{margin-top:0}
}
@media(max-width:560px){
  .try-field{flex-direction:column}
  .try-field input{flex:none;width:100%}
  .try-field .btn{width:100%}
}

/* ── the lookbook's button, with the proof row under it ── */
.lb-foot{display:flex;flex-direction:column;align-items:center;padding:0 var(--pad)}

/* ── on the course: everyday photos, no names attached ── */
.oncourse{padding-bottom:clamp(64px,8vw,110px)}
.oncourse .sec-head{padding-top:0}
.oc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.oc-tile{position:relative;display:block;overflow:hidden;aspect-ratio:1;background:var(--ph-fill)}
.oc-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.oc-tile:hover img{transform:scale(1.04)}
.oc-rating{margin:clamp(26px,3vw,38px) 0 0;padding:0 var(--pad);text-align:center}
.oc-rating[hidden]{display:none}
.oc-rating a{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;color:var(--ink)}
.oc-rating b{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.oc-rating span:not(.proof-stars):not(.link){font-size:14px;color:var(--ink-2)}
.oc-rating .link{margin-left:6px;padding-bottom:2px}
@media(max-width:760px){
  .oc-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad);gap:8px;scrollbar-width:none}
  .oc-row::-webkit-scrollbar{display:none}
  .oc-tile{scroll-snap-align:center}
}

/* ── made to order: the steps, the dates, the biggest bundle ── */
.made{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--ground-2)}
.made-img{position:relative;margin:0;min-height:clamp(380px,38vw,640px);overflow:hidden;background:var(--ph-fill)}
.made-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% 50%}
.made-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(40px,5vw,80px) clamp(26px,5vw,76px)}
.made-copy h2{margin:0 0 26px;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.3vw,32px);line-height:1.2;letter-spacing:.07em;text-transform:uppercase;text-wrap:balance}
.made-steps{counter-reset:step;width:100%;max-width:470px;margin:0 0 26px;padding:0;list-style:none;border-top:1px solid var(--rule-2)}
.made-steps li{counter-increment:step;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:8px;padding:13px 0;border-bottom:1px solid var(--rule-2)}
.made-steps li::before{content:counter(step,decimal-leading-zero);grid-row:span 2;padding-top:2px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.made-steps b{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.made-steps span{font-size:14px;color:var(--ink-2)}
.made-offer{margin:0 0 18px;font-size:15px;color:var(--ink)}
.made-offer[hidden]{display:none}
.made-btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
@media(max-width:860px){
  .made{grid-template-columns:minmax(0,1fr)}
  .made-img{min-height:0;aspect-ratio:16/10}
}

/* ── promises: bold outline icon over a short uppercase label ── */
.strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:clamp(6px,1vw,14px) var(--pad)}
.strip > div{border-right:0;padding:clamp(26px,3vw,40px) 12px}
.strip > [hidden]{display:none}
.strip svg{width:34px;height:34px;margin-bottom:10px;stroke-width:1.7}
.strip b{font-size:12px;line-height:1.35}
.strip span{font-size:13px}
@media(max-width:760px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip > div{border-bottom:0;padding:22px 8px}
}

/* the made-to-order photo is shown whole (square), never cropped */
.made-img{min-height:0;aspect-ratio:1/1;align-self:center;background:var(--stage)}
.made-img img{position:static;width:100%;height:100%;object-fit:contain}
@media(max-width:900px){.made-img{aspect-ratio:1/1}}

/* ── homepage rhythm (2026-09-25): photo sections never touch each other ── */
/* the collection: compact product cards, centred, not two half-page blocks */
#featured[data-count="1"],#featured[data-count="2"]{grid-template-columns:repeat(var(--cards,2),minmax(0,380px));justify-content:center;gap:clamp(20px,3vw,44px)}
#featured[data-count="1"]{--cards:1}
.collection{padding-bottom:clamp(40px,5vw,72px)}
/* photo rows keep the page's side margins and a visible gap between photos */
.lookbook .lb-row{gap:clamp(8px,1vw,14px);padding:0 var(--pad)}
/* space between one photo section and the next */
.made{margin-bottom:clamp(56px,7vw,104px)}
.editorial + .strip{margin-top:clamp(56px,7vw,104px)}
@media(max-width:760px){
  .lookbook .lb-row{padding:0 var(--pad)}
}
@media(max-width:520px){
  #featured[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}