:root{color-scheme:light;--ink:#12292f;--paper:#f8f6ef;--coral:#fc6e58;--blue:#dcecef}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.collection-page{--hero-tone:#e6f2f3;--hero-glow:rgba(247,200,69,.26);min-height:100vh;background:radial-gradient(circle at 8% 10%,var(--hero-glow) 0 8%,transparent 8.2%),repeating-linear-gradient(90deg,transparent 0 12vw,rgba(41,119,132,.035) 12vw calc(12vw + 1px)),linear-gradient(120deg,#f8f6ef 0 58%,var(--hero-tone) 100%)}
.collection-header{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:25px 38px}
.collection-brand{display:flex;align-items:baseline;gap:16px;text-transform:uppercase}
.collection-brand strong{font-size:16px;letter-spacing:.32em}
.collection-brand small{font-size:8px;letter-spacing:.2em;color:#5c777b}
.collection-nav{display:flex;gap:30px}
.collection-nav a{position:relative;padding:8px 0;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.collection-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--coral);transition:right .25s ease}
.collection-nav a:hover:after{right:0}
.collection-hero{min-height:76vh;display:grid;grid-template-columns:minmax(300px,.72fr) minmax(480px,1.28fr);align-items:center;gap:4vw;padding:7vh 6vw 10vh}
.collection-title>p:first-child{margin:0 0 20px;color:#297784;font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase}
.collection-title h1{margin:0;font-size:clamp(74px,10vw,150px);line-height:.69;letter-spacing:-.07em;text-transform:uppercase}
.collection-title h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;text-transform:none;color:var(--coral)}
.collection-title .lead{max-width:420px;margin-top:32px;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.65;color:#587176}
.hero-stack{height:62vh;min-height:480px;position:relative}
.hero-stack img{position:absolute;width:57%;height:76%;object-fit:cover;border:5px solid rgba(255,255,255,.72);border-radius:28px;box-shadow:0 28px 70px rgba(20,52,58,.16);opacity:1;filter:none;transition:opacity .42s ease,filter .42s ease}
.hero-stack img.is-swapping{opacity:.08;filter:blur(8px)}
.hero-stack img:first-child{left:4%;top:4%;transform:rotate(-4deg);animation:floatA 7s ease-in-out infinite alternate}
.hero-stack img:nth-child(2){right:3%;bottom:1%;transform:rotate(5deg);animation:floatB 9s ease-in-out infinite alternate}
.collection-grid{--grid-base:#dcecef;--grid-glow:rgba(255,255,255,.52);--grid-accent:rgba(41,119,132,.12);position:relative;padding:8vh 4vw 13vh;columns:3 340px;column-gap:clamp(14px,1.5vw,26px);background:radial-gradient(circle at 10% 9%,var(--grid-glow),transparent 21%),radial-gradient(circle at 90% 47%,var(--grid-accent),transparent 24%),repeating-linear-gradient(120deg,transparent 0 80px,rgba(255,255,255,.13) 80px 81px),var(--grid-base)}
.collection-grid figure{--ratio:1.5;display:inline-block;width:100%;margin:0 0 clamp(14px,1.5vw,26px);overflow:hidden;border-radius:clamp(12px,1.4vw,24px);background:#cbdcde;position:relative;isolation:isolate;box-shadow:0 14px 38px rgba(27,61,66,.08);break-inside:avoid-column}
.collection-grid img{width:100%;height:auto;object-fit:contain;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s}
.collection-grid figure:hover img{transform:scale(1.025);filter:saturate(1.08)}
.collection-grid figcaption{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;width:max-content;max-width:calc(100% - 36px);padding:9px 13px;border-radius:999px;color:#fff;background:rgba(8,15,18,.62);backdrop-filter:blur(9px);font-size:9px;line-height:1.25;letter-spacing:.13em;text-transform:uppercase}
.collection-grid .has-caption:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(5,13,15,.26));pointer-events:none}
.collection-grid figure.spotlight-frame{column-span:all;display:block;width:min(100%,1780px);margin:clamp(30px,5vw,88px) auto;overflow:visible;border-radius:clamp(16px,2vw,32px);background:rgba(255,255,255,.32);box-shadow:0 30px 80px rgba(27,61,66,.14)}
.collection-grid figure.spotlight-frame:before{content:"FEATURED FRAME";position:absolute;z-index:4;left:clamp(18px,2vw,34px);top:clamp(18px,2vw,34px);padding:10px 13px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(10,20,23,.58);backdrop-filter:blur(10px);color:#fff;font-size:8px;font-weight:700;letter-spacing:.2em}
.collection-grid .spotlight-frame img{display:block;width:100%;max-height:88vh;object-fit:contain;border-radius:inherit;background:rgba(255,255,255,.24)}
.collection-grid .spotlight-frame:hover img{transform:none;filter:saturate(1.04)}
.collection-note{position:relative;display:inline-flex;width:100%;min-height:clamp(340px,35vw,560px);flex-direction:column;justify-content:flex-end;margin:0 0 clamp(14px,1.5vw,26px);padding:clamp(28px,3.4vw,58px);overflow:hidden;border:1px solid rgba(18,41,47,.13);border-radius:clamp(12px,1.4vw,24px);background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(248,246,239,.57));color:#163038;box-shadow:0 14px 38px rgba(27,61,66,.07);break-inside:avoid-column}
.collection-note:before{content:"";position:absolute;right:-12%;top:-10%;width:58%;aspect-ratio:1;border:1px solid rgba(41,119,132,.15);border-radius:50%}.collection-note.note-2{background:linear-gradient(150deg,rgba(18,41,47,.96),rgba(24,64,71,.9));color:#f8f6ef}.collection-note.note-2:before{border-color:rgba(255,255,255,.14)}
.note-number{position:absolute;right:clamp(22px,2.4vw,40px);top:clamp(22px,2.4vw,40px);color:var(--coral);font-size:clamp(28px,4vw,62px);font-weight:700;letter-spacing:-.07em}.note-eyebrow{margin:0 0 18px;color:#297784;font-size:8px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}.note-2 .note-eyebrow{color:#8fc8d1}.collection-note h2{position:relative;max-width:520px;margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,3vw,56px);font-weight:400;line-height:.98;letter-spacing:-.045em}.note-body{position:relative;max-width:530px;margin:24px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(14px,1.25vw,18px);line-height:1.58;color:#567075}.note-2 .note-body{color:rgba(255,255,255,.69)}.note-line{display:block;width:70px;height:3px;margin-top:30px;background:var(--coral)}
.collection-footer{display:flex;justify-content:space-between;padding:24px 38px;background:var(--paper);font-size:8px;letter-spacing:.18em;text-transform:uppercase}
.people-theme .collection-grid{--grid-base:#e8e2eb;--grid-glow:rgba(255,255,255,.58);--grid-accent:rgba(109,78,131,.13)}
.food-theme .collection-grid{--grid-base:#f2e2c9;--grid-glow:rgba(255,250,237,.72);--grid-accent:rgba(205,119,39,.13)}
.wedding-theme .collection-grid{--grid-base:#eee2e7;--grid-glow:rgba(255,255,255,.68);--grid-accent:rgba(169,88,113,.12)}
.events-theme .collection-grid{--grid-base:#e9e3ea;--grid-glow:rgba(255,255,255,.6);--grid-accent:rgba(76,87,143,.12)}
.travel-theme .collection-grid{--grid-base:#dfebea;--grid-glow:rgba(255,255,255,.62);--grid-accent:rgba(61,126,118,.13)}
.people-theme{--hero-tone:#eee7f0;--hero-glow:rgba(203,170,217,.25)}.food-theme{--hero-tone:#f2e1c6;--hero-glow:rgba(247,178,69,.26)}.wedding-theme{--hero-tone:#f2e3e9;--hero-glow:rgba(235,151,179,.24)}.events-theme{--hero-tone:#e8e3ef;--hero-glow:rgba(157,172,226,.22)}.travel-theme{--hero-tone:#e0ece9;--hero-glow:rgba(118,190,179,.22)}
@keyframes floatA{to{transform:translateY(-18px) rotate(-2deg)}}
@keyframes floatB{to{transform:translateY(18px) rotate(2deg)}}
@media(max-width:1000px){.collection-grid{columns:2 300px}}
@media(max-width:800px){.collection-header{padding:20px}.collection-brand small,.collection-nav a:first-child{display:none}.collection-nav{gap:16px}.collection-hero{display:block;padding:90px 20px 45px}.collection-title h1{font-size:20vw}.hero-stack{height:50vh;min-height:390px;margin-top:30px}.hero-stack img{width:67%;height:72%}.collection-grid{padding:40px 14px;columns:1}.collection-grid figure,.collection-note{margin-bottom:12px}.collection-grid figure.spotlight-frame{margin:28px auto}.collection-grid figure.spotlight-frame:before{font-size:7px}.collection-note,.collection-note.note-2{min-height:330px}.collection-footer{padding:20px;gap:20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
