:root { --black:#090907; --ink:#171611; --ivory:#f1ede4; --paper:#e8e1d5; --line:rgba(23,22,17,.18); --display:"Cormorant Garamond",Georgia,serif; --body:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ivory); font-family:var(--body); }
a { color:inherit; text-decoration:none; }
.collection-skip { position:fixed; z-index:200; top:10px; left:10px; padding:10px 14px; color:var(--black); background:var(--ivory); transform:translateY(-150%); }
.collection-skip:focus { transform:none; }
.collection-header { position:absolute; z-index:50; top:0; right:0; left:0; display:flex; align-items:center; gap:44px; min-height:88px; padding:16px clamp(20px,4vw,64px); color:#fff; }
.collection-brand { display:flex; align-items:center; gap:12px; margin-right:auto; }
.collection-brand > span { display:grid; place-items:center; width:42px; height:42px; border:1px solid currentColor; border-radius:50%; font-family:var(--display); font-size:1.45rem; }
.collection-brand strong { font-family:var(--display); font-size:1.08rem; letter-spacing:.025em; }
.collection-brand small { display:block; margin-top:2px; font-family:var(--body); font-size:.5rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; opacity:.7; }
.collection-header nav { display:flex; gap:30px; font-size:.64rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.collection-book { min-height:40px; padding:13px 16px; color:var(--black); background:var(--ivory); font-size:.62rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; }
.collection-hero { position:relative; display:grid; align-items:end; min-height:100svh; color:#fff; background:var(--black); overflow:hidden; }
.collection-hero > img,.collection-hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.collection-hero > img { object-fit:cover; object-position:center; }
.collection-hero-shade { background:linear-gradient(90deg,rgba(4,4,3,.9),rgba(4,4,3,.38) 48%,rgba(4,4,3,.06)),linear-gradient(0deg,rgba(4,4,3,.7),transparent 45%); }
.collection-hero-copy { position:relative; z-index:2; width:min(100% - clamp(40px,10vw,160px),1500px); margin:0 auto; padding:170px 0 120px; }
.collection-hero-copy p,.collection-kicker { margin:0; font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.collection-hero h1 { max-width:950px; margin:22px 0 10px; font-family:var(--display); font-size:clamp(4.6rem,10vw,11rem); font-weight:500; letter-spacing:-.06em; line-height:.78; }
.collection-hero-copy > span { color:rgba(255,255,255,.7); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.collection-scroll { position:absolute; z-index:2; right:clamp(22px,4vw,64px); bottom:34px; display:flex; gap:14px; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.55); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }
.collection-intro,.collection-uses,.collection-details,.collection-commission,.collection-related { padding:clamp(90px,11vw,170px) clamp(24px,7vw,110px); }
.collection-intro { display:grid; grid-template-columns:minmax(150px,.55fr) minmax(0,2fr); gap:clamp(40px,9vw,150px); }
.collection-kicker { color:#766f64; }
.collection-intro h2,.collection-details h2,.collection-cta h2 { max-width:1050px; margin:0; font-family:var(--display); font-size:clamp(3.5rem,7vw,8rem); font-weight:500; letter-spacing:-.055em; line-height:.88; }
.collection-intro div > p { max-width:720px; margin:45px 0 0 auto; color:#5f594f; font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.85; }
.collection-uses { padding-top:0; }
.collection-uses > div { display:grid; grid-template-columns:repeat(4,1fr); margin-top:34px; border-top:1px solid var(--line); }
.collection-uses article { min-height:180px; padding:22px 24px 30px 0; border-right:1px solid var(--line); }
.collection-uses article:not(:first-child) { padding-left:24px; }
.collection-uses article:last-child { border-right:0; }
.collection-uses span,.collection-steps span,.collection-details-list span { color:#8b8377; font-size:.58rem; letter-spacing:.15em; }
.collection-uses h3 { margin:68px 0 0; font-family:var(--display); font-size:1.7rem; font-weight:500; }
.collection-details { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,9vw,150px); color:var(--ivory); background:#15140f; }
.collection-details-heading h2 { margin-top:30px; font-size:clamp(3.5rem,6vw,6.8rem); }
.collection-details .collection-kicker { color:rgba(241,237,228,.48); }
.collection-details-list { border-top:1px solid rgba(241,237,228,.2); }
.collection-details-list article { display:grid; grid-template-columns:45px 130px 1fr; gap:20px; padding:30px 0; border-bottom:1px solid rgba(241,237,228,.2); }
.collection-details-list h3,.collection-steps h3 { margin:0; font-family:var(--display); font-size:1.55rem; font-weight:500; }
.collection-details-list p,.collection-steps p { margin:0; color:rgba(241,237,228,.58); font-size:.82rem; line-height:1.75; }
.collection-commission { background:var(--paper); }
.collection-steps { display:grid; grid-template-columns:repeat(4,1fr); margin-top:45px; border-top:1px solid var(--line); }
.collection-steps article { min-height:270px; padding:24px 26px 30px 0; border-right:1px solid var(--line); }
.collection-steps article:not(:first-child) { padding-left:26px; }
.collection-steps article:last-child { border-right:0; }
.collection-steps h3 { margin-top:70px; }
.collection-steps p { margin-top:16px; color:#665f55; }
.collection-note { max-width:720px; margin:60px 0 0 auto; padding-left:28px; border-left:2px solid #9f7b4f; font-family:var(--display); font-size:1.45rem; line-height:1.45; }
.collection-cta { padding:clamp(110px,15vw,220px) 24px; color:#fff; background:var(--black); text-align:center; }
.collection-cta .collection-kicker { color:rgba(255,255,255,.5); }
.collection-cta h2 { max-width:1050px; margin:32px auto 50px; }
.collection-cta > a { display:inline-flex; gap:70px; padding:18px 20px; color:var(--black); background:var(--ivory); font-size:.64rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.collection-related > div { margin-top:35px; border-top:1px solid var(--line); }
.collection-related a { display:grid; grid-template-columns:60px 1fr auto; align-items:center; min-height:100px; border-bottom:1px solid var(--line); }
.collection-related a span { color:#7c7468; font-size:.62rem; }
.collection-related strong { font-family:var(--display); font-size:clamp(2rem,4vw,4.4rem); font-weight:500; }
.collection-footer { display:flex; justify-content:space-between; gap:25px; padding:28px clamp(24px,7vw,110px); color:rgba(241,237,228,.5); background:var(--black); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; }
@media(max-width:900px){.collection-header nav{display:none}.collection-intro,.collection-details{grid-template-columns:1fr}.collection-uses>div,.collection-steps{grid-template-columns:repeat(2,1fr)}.collection-uses article:nth-child(2),.collection-steps article:nth-child(2){border-right:0}.collection-details-list article{grid-template-columns:40px 120px 1fr}}
@media(max-width:620px){.collection-header{min-height:72px;padding:12px 18px}.collection-header .collection-brand strong{font-size:.9rem}.collection-book{padding:11px 10px;font-size:.52rem}.collection-hero{min-height:760px}.collection-hero>img{object-position:62% center}.collection-hero-copy{width:calc(100% - 40px);padding-bottom:130px}.collection-hero h1{font-size:clamp(4.3rem,20vw,6.4rem)}.collection-scroll{left:20px;right:auto}.collection-intro{grid-template-columns:1fr}.collection-intro div>p{margin-left:0}.collection-uses>div,.collection-steps{grid-template-columns:1fr}.collection-uses article,.collection-uses article:not(:first-child),.collection-steps article,.collection-steps article:not(:first-child){min-height:auto;padding:24px 0 30px;border-right:0;border-bottom:1px solid var(--line)}.collection-uses h3,.collection-steps h3{margin-top:35px}.collection-details-list article{grid-template-columns:35px 1fr}.collection-details-list p{grid-column:2}.collection-note{font-size:1.2rem}.collection-footer{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
