/* Page-level styles for the Alphabelle homepage (lookbook, occasions, details, footer). */
.ab-home{background:var(--ab-paper)}
.ab-home .ab-foot a{color:inherit}

/* Logo: option 10, Ribbon-tied A (master in brand/logo). Drawn as a mask so it takes the nav colour; the text stays for screen readers. */
.ab-home .ab-logo,.ab-home .ab-foot strong{display:block;aspect-ratio:1752/208;background:currentColor;-webkit-mask:url(/brand/alphabelle-logo.svg) left center/contain no-repeat;mask:url(/brand/alphabelle-logo.svg) left center/contain no-repeat;font-size:0;line-height:0}
.ab-home .ab-logo{height:24px}
.ab-home .ab-foot strong{height:22px;color:var(--ab-ink)}
@media (max-width:820px){.ab-home .ab-logo{height:20px}}

/* Header: ink band (logo display option 5, picked 26 Sep 2026). Opt in with class ab-band on the header; the band looks the same after scrolling. */
.ab-nav.ab-band,.ab-nav.ab-band.solid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;padding:0 var(--ab-pad);background:var(--ab-ink);color:var(--ab-ivory);border-bottom:1px solid rgba(201,164,106,.6);backdrop-filter:none}
.ab-band .ab-links{grid-column:1;grid-row:1;justify-self:start}
.ab-band .ab-logo{grid-column:2;grid-row:1}
.ab-band .ab-right{grid-column:3;grid-row:1;justify-self:end}
.ab-band ~ main{padding-top:76px}
@media (min-width:861px){.ab-band ~ main .hp,.ab-band ~ main .hp-media{min-height:calc(100svh - 76px)}}
.ab-menu{display:none;position:relative;width:28px;height:28px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.ab-menu::before,.ab-menu::after{content:"";position:absolute;left:4px;right:4px;height:1.5px;background:currentColor;transition:transform .3s var(--ab-ease)}
.ab-menu::before{top:9px}
.ab-menu::after{bottom:9px}
@media (max-width:820px){
  .ab-nav.ab-band,.ab-nav.ab-band.solid{height:60px}
  .ab-band ~ main{padding-top:60px}
  .ab-band .ab-menu{display:block;grid-column:1;grid-row:1;justify-self:start}
  .ab-nav.ab-band .ab-logo{height:18px}
  .ab-band.open .ab-links{display:flex;position:absolute;grid-area:auto;justify-self:stretch;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:4px var(--ab-pad) 14px;background:var(--ab-ink);border-bottom:1px solid rgba(201,164,106,.6)}
  .ab-band.open .ab-links a{padding:15px 0;border-top:1px solid rgba(251,248,243,.12)}
  .ab-band.open .ab-menu::before{transform:translateY(4.25px) rotate(45deg)}
  .ab-band.open .ab-menu::after{transform:translateY(-4.25px) rotate(-45deg)}
}

.sec-head{padding:0 var(--ab-pad);max-width:1320px;margin:0 auto 36px}
.sec-head h2{font-family:var(--ab-serif);font-weight:300;font-size:clamp(40px,5.2vw,72px);line-height:1;letter-spacing:-.01em;margin:0}

/* Lookbook */
.lookbook{padding:120px 0 40px}
.lb-grid{max-width:1320px;margin:0 auto;padding:0 var(--ab-pad);display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.lb-item{position:relative;overflow:hidden;border-radius:4px;background:#efe9df;cursor:pointer}
.lb-item img,.lb-item video{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ab-ease)}
.lb-item:hover img,.lb-item:hover video{transform:scale(1.04)}
.lb-item figcaption{position:absolute;left:16px;bottom:14px;right:16px;color:#fff;font:500 11px/1.3 var(--ab-sans);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.lb-item.wide{grid-column:1/-1;aspect-ratio:21/9}
.lb-item.tall5{grid-column:span 5;aspect-ratio:4/5}
.lb-item.tall4{grid-column:span 4;aspect-ratio:3/4;margin-top:80px}
.lb-item.tall3{grid-column:span 3;aspect-ratio:3/4}
@media (max-width:820px){
  .lb-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .lb-item.tall5,.lb-item.tall4,.lb-item.tall3{grid-column:span 1;aspect-ratio:3/4;margin-top:0}
  .lb-item.wide{grid-column:1/-1;aspect-ratio:4/3}
}

/* Occasions */
.occasions{padding:100px 0 60px}
.occ-row{max-width:1320px;margin:0 auto;padding:0 var(--ab-pad);display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.occ{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ab-ink);font:inherit}
.occ-img{display:block;overflow:hidden;border-radius:4px;aspect-ratio:4/5;background:#efe9df}
.occ-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ab-ease)}
.occ:hover .occ-img img,.occ:focus-visible .occ-img img{transform:scale(1.05)}
.occ:focus-visible{outline:none}
.occ:focus-visible .occ-img{box-shadow:0 0 0 2px var(--ab-gold)}
.occ b{font-family:var(--ab-serif);font-weight:400;font-size:26px;line-height:1.05;margin-top:4px}
.occ .occ-p{font:500 10.5px/1.4 var(--ab-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ab-stone)}
@media (max-width:1000px){.occ-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.occ-row{grid-template-columns:repeat(2,1fr)}.occ b{font-size:22px}}

/* Details */
.details{padding:80px 0 120px}
.details-grid{max-width:1320px;margin:0 auto;padding:0 var(--ab-pad);display:grid;grid-template-columns:repeat(4,1fr);gap:28px;border-top:1px solid var(--ab-line);padding-top:32px}
.details-grid h3{font-family:var(--ab-serif);font-weight:400;font-size:26px;margin:0 0 10px}
.details-grid p{margin:0;color:#5e5750;font-size:14px;line-height:1.6;max-width:32ch}
@media (max-width:900px){.details-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.details-grid{grid-template-columns:1fr}}

/* Reveal helper used by page.js */
.reveal{opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}