/* The Circle Codex - the house in its own mother tongue: sand and burnished gold (scoped :root) */
:root{--ember:#C7A24E;--ember-hi:#E0C079;--gold:#D9B36A}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}

/* hero band */
.cc-hero{position:relative;min-height:92vh;display:flex;align-items:flex-start;overflow:hidden;padding-top:clamp(120px,17vh,190px)}
.cc-hero .bg{position:absolute;inset:0;z-index:-2;background:#0d0b08 center/cover no-repeat;background-image:url('/web/image/2590/bdpsite_hero-circle-codex.jpg');animation:kb 26s ease-out both}
.cc-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(13,11,8,.72) 0%,rgba(13,11,8,.30) 46%,transparent 70%),linear-gradient(180deg,rgba(13,11,8,.55),transparent 30%,rgba(13,11,8,.35))}
.cc-hero .hin{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge);width:100%}
.cc-hero .box{max-width:44ch}
.cc-hero .crumb{margin-bottom:26px}
.cc-hero h1{font-family:"Newsreader",serif;font-weight:400;font-size:clamp(52px,8.4vw,120px);line-height:.92;letter-spacing:-.02em;margin-bottom:.14em}
.cc-hero .tagline{font-family:"Newsreader",serif;font-style:italic;font-size:clamp(21px,2.6vw,36px);color:var(--gold);line-height:1.1;margin-bottom:.7em}
.cc-hero .lead{font-size:clamp(16px,1.35vw,20px);margin-bottom:1.9em;max-width:40ch}
.cc-cta{display:flex;flex-wrap:wrap;gap:14px}

/* movements motif */
.cc-mov h2{font-family:"Newsreader",serif;font-weight:400;font-size:clamp(28px,4.2vw,52px);letter-spacing:-.015em;max-width:16ch;margin-bottom:.4em}
.cc-mov .intro{color:var(--sand);max-width:60ch;margin-bottom:clamp(34px,5vh,56px)}
.eleven{display:grid;grid-template-columns:repeat(11,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mv{padding:22px 6px 24px;text-align:center;position:relative}
.mv+.mv{border-left:1px solid var(--line-2)}
.mv .rn{font-family:"Newsreader",serif;font-size:clamp(20px,2vw,30px);color:var(--gold);line-height:1}
.cc-mov .cap{color:var(--stone);font-size:14px;margin-top:20px;max-width:64ch}

/* the pair */
.cc-pair{background:var(--ink-2);border-block:1px solid var(--line)}
.cc-pair h2{font-family:"Newsreader",serif;font-weight:400;font-size:clamp(26px,3.6vw,46px);letter-spacing:-.015em;margin-bottom:.2em}
.cc-pair .sub{color:var(--stone);margin-bottom:clamp(34px,5vh,54px)}
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.pcard{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,34px);align-items:start}
.pcard .cover{align-self:start;width:100%;max-width:200px;border-radius:2px;overflow:hidden;box-shadow:0 30px 54px -24px rgba(0,0,0,.8),0 0 0 1px var(--line);transition:transform .5s var(--ease)}
.pcard:hover .cover{transform:translateY(-6px)}
.pcard .cover img{width:100%;display:block}
.ph-cover{align-self:start;width:100%;max-width:200px;aspect-ratio:475/760;border-radius:2px;display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px;background:linear-gradient(160deg,#211c16,#171310);border:1px solid var(--gold);box-shadow:0 30px 54px -24px rgba(0,0,0,.8)}
.ph-cover .pc-k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ph-cover .pc-t{font-family:"Newsreader",serif;font-size:clamp(19px,1.7vw,23px);line-height:1.12;color:var(--bone)}
.ph-cover .pc-n{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;color:var(--stone)}
.pbody .bt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.pbody h3{font-family:"Newsreader",serif;font-size:clamp(22px,2vw,28px);line-height:1.08;letter-spacing:-.01em;margin-bottom:.3em}
.pbody .pd{color:var(--sand);font-size:14.5px;max-width:34ch;margin-bottom:16px}
.pbody .price{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--stone);margin-top:12px}

/* close */
.cc-close{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,70px);align-items:start}
.cc-close .an{font-family:"Newsreader",serif;font-size:clamp(30px,3.6vw,50px);letter-spacing:-.01em}
.cc-close .lead{font-size:clamp(16px,1.3vw,19px)}
.cc-close .back{margin-top:1.6em}

@media(max-width:1000px){
  .cc-hero{min-height:auto;padding-bottom:clamp(56px,10vh,90px)}
  .eleven{grid-template-columns:repeat(6,1fr)}
  .mv:nth-child(7){border-left:0}
  .pair-grid{grid-template-columns:1fr;gap:40px}
  .cc-close{grid-template-columns:1fr;gap:16px}
}
@media(max-width:600px){
  .eleven{grid-template-columns:repeat(4,1fr)}
  .pcard{grid-template-columns:1fr}.pcard .cover,.ph-cover{max-width:180px}
}