/* EON 2.0 · the full catalogue page (bands.html). Sits on eon2.css tokens. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.is-locked{overflow:hidden}
body.bands-page{margin:0; font-family:'Inter',system-ui,sans-serif; font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.7), transparent 60%),
    var(--c-cream)}
body.bands-page h1,body.bands-page h2,body.bands-page h3{margin:0; font-family:'Prata',Georgia,serif; font-weight:400; color:var(--c-espresso); text-wrap:pretty}
body.bands-page p{margin:0}
body.bands-page a{text-decoration:none}
.eyebrow{font-family:'Courier Prime','Courier New',monospace; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--c-olive); margin:0 0 10px}

/* top bar */
.bands-top{position:sticky; top:0; z-index:40; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:16px clamp(20px,5vw,72px);
  background:rgba(243,237,226,.78); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(110,89,54,.16)}
.bands-top .mark{display:inline-flex; align-items:center; gap:12px; font-family:'Prata',serif; font-size:19px; letter-spacing:.34em; color:var(--c-espresso)}
.mark-bars{display:inline-flex; align-items:flex-end; gap:3px; height:18px}
.mark-bars i{display:block; width:3px; height:100%; border-radius:1px; background:linear-gradient(160deg,#C9A96A,#8C6F3F 60%,#6E5936)}
.mark-bars i:nth-child(2){margin-left:4px}
.bands-nav{display:flex; gap:clamp(14px,2.4vw,30px); font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase}
.bands-nav a{color:var(--c-mocha); padding:6px 0; border-bottom:1px solid transparent; transition:color .3s, border-color .3s}
.bands-nav a:hover{color:var(--c-olive-deep); border-bottom-color:var(--c-olive)}

/* hero */
.bands-hero{max-width:1280px; margin:0 auto; padding:clamp(56px,9vw,120px) clamp(20px,5vw,72px) clamp(28px,4vw,48px)}
.bands-hero h1{font-size:clamp(38px,6.4vw,84px); line-height:1.02; letter-spacing:-.01em; max-width:14ch}
.bands-hero .lede{margin-top:clamp(18px,2.6vw,30px); max-width:62ch; font-family:'Prata',Georgia,serif; font-size:clamp(16px,1.9vw,21px); line-height:1.55; color:var(--c-coffee)}
.family-nav{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(28px,4vw,48px); padding-top:22px; border-top:1px solid rgba(110,89,54,.22)}
.family-nav a{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
  font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-coffee);
  border:1px solid rgba(110,89,54,.28); background:rgba(250,247,241,.6); transition:background .3s, border-color .3s, color .3s}
.family-nav a span{font-family:'Courier Prime',monospace; font-size:10px; color:var(--c-latte)}
.family-nav a:hover,.family-nav a.on{background:var(--c-olive-deep); border-color:var(--c-olive-deep); color:#FBF8F2}
.family-nav a:hover span,.family-nav a.on span{color:rgba(251,248,242,.7)}

/* families */
.bands-main{max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,72px) clamp(40px,6vw,80px)}
.family{padding:clamp(40px,6vw,84px) 0; border-top:1px solid rgba(110,89,54,.18); scroll-margin-top:84px}
.family:first-child{border-top:0}
.family-head{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,60px); align-items:end; margin-bottom:clamp(24px,3.5vw,44px)}
.family-head h2{font-size:clamp(30px,4.2vw,54px); line-height:1.04}
.family-line{margin-top:10px; font-family:'Prata',serif; font-style:italic; font-size:clamp(16px,1.8vw,20px); color:var(--c-gold)}
.family-copy{font-size:15px; line-height:1.7; color:var(--c-mocha); max-width:48ch}
.band-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(14px,2vw,26px)}

/* cards */
.band{display:flex; flex-direction:column; background:var(--c-linen); border:1px solid rgba(110,89,54,.18); border-radius:6px; overflow:hidden; color:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 14px 34px -28px rgba(59,47,38,.4);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s, border-color .35s}
.band:hover{transform:translateY(-3px); border-color:rgba(95,100,68,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 24px 44px -26px rgba(59,47,38,.45)}
.band-media{display:block; aspect-ratio:1/1; background:var(--c-parchment); overflow:hidden}
.band-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.band:hover .band-media img{transform:scale(1.04)}
.band-body{display:flex; flex-direction:column; gap:8px; padding:16px 16px 18px}
.band-karat{font-family:'Courier Prime',monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-olive)}
.band-name{font-family:'Prata',serif; font-size:16.5px; line-height:1.3; color:var(--c-espresso); text-wrap:pretty}
.band-foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:8px}
.band-colors{display:inline-flex; gap:6px}
.dot{width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.18);
  box-shadow:inset 0 -2px 4px -1px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.7)}
.dot.yellow,.dot.gold{background:radial-gradient(circle at 35% 30%, #F4DE9E, #D0AB5A 50%, #8A6A34)}
.dot.rose{background:radial-gradient(circle at 35% 30%, #EEC7AC, #CF9877 50%, #8A5A42)}
.dot.white{background:radial-gradient(circle at 35% 30%, #F4F2EA, #C4C1B6 50%, #7B7970)}
.dot.twotone{background:linear-gradient(135deg, #D0AB5A 0 50%, #C4C1B6 50% 100%)}
.band-price{font-family:'Cinzel',serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-deep)}

/* help + footer */
.bands-help{max-width:1280px; margin:0 auto; padding:clamp(30px,5vw,60px) clamp(20px,5vw,72px); display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(20px,4vw,60px);
  border-top:1px solid rgba(110,89,54,.18)}
.bands-help h2{font-size:clamp(26px,3.4vw,40px)}
.bands-help ul{list-style:none; margin:0; padding:0}
.bands-help li{padding:12px 0; border-bottom:1px solid rgba(110,89,54,.16)}
.bands-help li a{color:var(--c-coffee); font-family:'Prata',serif; font-size:16px}
.bands-help li a:hover{color:var(--c-olive-deep)}
.bands-foot{max-width:none; margin:clamp(40px,6vw,80px) 0 0; padding:40px max(clamp(20px,5vw,72px), calc((100% - 1280px) / 2 + clamp(20px,5vw,72px))) 64px; background:linear-gradient(180deg, var(--c-coffee), var(--c-espresso)); display:flex; gap:22px; flex-wrap:wrap;
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,237,226,.8); border-top:0}
.bands-page .bands-foot a{color:rgba(243,237,226,.82)} .bands-page .bands-foot a:hover{color:#FFFFFF}

/* detail dialog */
.band-dialog{width:min(1080px, calc(100vw - 32px)); max-height:calc(100vh - 48px); margin:auto; padding:0; border:1px solid rgba(110,89,54,.28); border-radius:8px;
  background:var(--c-linen); color:var(--c-coffee); box-shadow:0 40px 90px -30px rgba(36,28,22,.5); overflow:auto;
  display:none; grid-template-columns:1fr 1fr}
.band-dialog[open]{display:grid}
.band-dialog::backdrop{background:rgba(59,47,38,.42); backdrop-filter:blur(8px)}
.band-dialog-close{position:sticky; top:0; grid-column:1/-1; display:flex; justify-content:flex-end; z-index:2; height:0; margin:0}
.band-dialog-close button{margin:14px 14px 0 0; width:40px; height:40px; border-radius:50%; border:1px solid rgba(110,89,54,.3); background:rgba(250,247,241,.9); color:var(--c-espresso); font-size:22px; line-height:1; cursor:pointer}
.band-dialog-close button:hover{color:var(--c-olive-deep); border-color:var(--c-olive)}
.bd-gallery{padding:clamp(16px,2.5vw,28px); background:var(--c-parchment)}
.bd-main{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; display:block; background:var(--c-parchment)}
.bd-thumbs{display:flex; gap:8px; margin-top:10px}
.bd-thumbs button{flex:1; padding:0; border:1px solid transparent; border-radius:3px; overflow:hidden; background:var(--c-linen); cursor:pointer; opacity:.6; transition:opacity .3s, border-color .3s}
.bd-thumbs button.on,.bd-thumbs button:hover{opacity:1; border-color:var(--c-olive)}
.bd-thumbs img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.bd-body{padding:clamp(22px,3.5vw,40px) clamp(20px,3.5vw,40px) clamp(24px,3.5vw,40px)}
.bd-title{font-size:clamp(22px,2.6vw,30px); line-height:1.15}
.bd-price{margin:14px 0 18px; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-mocha)}
.bd-price b{font-weight:400; color:var(--c-gold-deep); font-size:15px}
.bd-specs{margin:0 0 18px; padding:0}
.bd-specs div{display:flex; justify-content:space-between; gap:20px; padding:9px 0; border-bottom:1px solid rgba(110,89,54,.16); font-size:14px}
.bd-specs dt{font-family:'Cinzel',serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-latte); margin:0}
.bd-specs dd{margin:0; text-align:right; color:var(--c-espresso)}
.bd-desc p{margin:0 0 12px; font-size:14.5px; line-height:1.7; color:var(--c-coffee)}
.bd-cta{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 14px}
.cta{display:inline-block; font-family:'Cinzel',serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-olive-deep); border:1px solid rgba(95,100,68,.5); border-radius:3px; padding:13px 26px; background:rgba(250,247,241,.6); transition:background .3s, border-color .3s}
.cta:hover{border-color:var(--c-olive-deep); background:var(--c-olive-wash)}
.cta.solid{background:var(--c-olive-deep); color:#FBF8F2; border-color:var(--c-olive-deep)}
.cta.solid:hover{background:var(--c-olive); color:#FBF8F2}
.bd-note{font-size:12.5px; line-height:1.6; color:var(--c-latte)}

@media (max-width:860px){
  .family-head{grid-template-columns:1fr; align-items:start}
  .bands-help{grid-template-columns:1fr}
  .band-dialog{grid-template-columns:1fr; max-height:calc(100vh - 24px); width:calc(100vw - 20px)}
  .bd-gallery{position:relative}
}
@media (max-width:560px){
  .bands-nav a:nth-child(2){display:none}
  .band-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .band-body{padding:12px 12px 14px}
  .band-name{font-size:14px}
  .band-price{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .band,.band-media img{transition:none}
}