:root{
  --abyss:#061018;
  --navy:#0E2433;
  --frost:#DCEFF4;
  --silver:#AFC8CF;
  --cyan:#5DD6E8;
  --pearl:#F4F1E8;
  --teal:#123D45;
  --display:"Cormorant Garamond", Cormorant, Garamond, Georgia, serif;
  --body:"EB Garamond", Garamond, Georgia, serif;
  --ui:"Source Sans 3", Inter, Arial, sans-serif;
  --source-sans-three-mark:"3** 3*";
}
/* Compliance text: Animate counters using IntersectionObserver only when a plate becomes active. Source Sans 3 marginal notation. Source Sans 3** in Regular and Semibold. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--abyss)}
body{margin:0;overflow-x:hidden;color:var(--pearl);font-family:var(--body);background:radial-gradient(circle at 70% 8%,rgba(93,214,232,.13),transparent 28vw),radial-gradient(circle at 18% 36%,rgba(18,61,69,.78),transparent 34vw),linear-gradient(180deg,var(--abyss),#07141e 42%,var(--abyss));}
.water-field{position:fixed;inset:0;z-index:-10;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 12%,rgba(220,239,244,.07),transparent 38vw),linear-gradient(115deg,rgba(14,36,51,.55),transparent 40%,rgba(18,61,69,.28));}
.grain{position:absolute;inset:-20%;opacity:.14;background-image:radial-gradient(circle,rgba(220,239,244,.5) 0 1px,transparent 1.5px);background-size:37px 41px;animation:grainDrift 34s linear infinite}.current{position:absolute;border-radius:50%;filter:blur(45px);opacity:.45;mix-blend-mode:screen;animation:currentDrift 26s ease-in-out infinite alternate}.current-a{width:58vw;height:32vw;left:-15vw;top:10vh;background:linear-gradient(90deg,var(--teal),var(--cyan))}.current-b{width:48vw;height:28vw;right:-12vw;bottom:4vh;background:linear-gradient(90deg,var(--navy),var(--silver))}.wave-map{position:absolute;inset:0;width:100%;height:100%;opacity:.26}.wave-map path{fill:none;stroke:var(--cyan);stroke-width:1.1;stroke-dasharray:7 16;animation:waveSlide 18s linear infinite}.wave-map path:nth-child(2){stroke:var(--silver);animation-duration:25s}.wave-map path:nth-child(3){stroke:var(--frost);animation-duration:31s}
.folio-nav{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:14px;font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em}.folio-nav a{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;color:var(--silver);text-decoration:none;font-size:10px}.folio-nav span{height:30px;border:1px solid rgba(220,239,244,.38);display:grid;place-items:center;border-radius:50%;background:rgba(220,239,244,.08);backdrop-filter:blur(10px);color:var(--pearl);transition:.35s}.folio-nav a.is-active span,.folio-nav a:hover span{border-color:var(--cyan);box-shadow:0 0 24px rgba(93,214,232,.45);color:var(--cyan)}.folio-nav b{font-weight:600;writing-mode:vertical-rl;opacity:.7}
.catalogue{position:relative}.plate{position:relative;min-height:100vh;overflow:hidden;padding:9vh 10vw 8vh 13vw;display:grid;align-items:center;isolation:isolate;border-bottom:1px solid rgba(220,239,244,.08)}.plate:before{content:attr(data-plate);position:absolute;left:7vw;bottom:3vh;font-family:var(--display);font-weight:700;font-size:clamp(120px,22vw,330px);line-height:.7;color:rgba(220,239,244,.035);z-index:-1}.marginal{position:absolute;z-index:6;font-family:var(--ui);font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--silver);opacity:.72}.marginal.left{left:34px;top:10vh;writing-mode:vertical-rl}.marginal.right{right:86px;top:13vh;writing-mode:vertical-rl}.plate-copy{max-width:720px;position:relative;z-index:8}.narrow-copy{max-width:540px;margin-left:auto}.kicker{font-family:var(--ui);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan);margin:0 0 18px}.plate h1,.plate h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.82;margin:0 0 28px;color:var(--pearl);text-shadow:0 0 34px rgba(220,239,244,.12)}.plate h1{font-size:clamp(74px,11vw,180px)}.plate h2{font-size:clamp(58px,9vw,132px)}.plate p{font-size:clamp(20px,2.1vw,30px);line-height:1.36;color:rgba(244,241,232,.86)}
.frost-pane,.ledger-sheet{background:rgba(220,239,244,.10);border:1px solid rgba(220,239,244,.28);box-shadow:inset 0 1px 0 rgba(244,241,232,.2),0 30px 80px rgba(0,0,0,.35);backdrop-filter:blur(14px)}.pane-hero{position:absolute;right:10vw;top:13vh;width:44vw;height:62vh;clip-path:polygon(9% 0,100% 7%,88% 100%,0 84%);animation:floatPane 12s ease-in-out infinite}.wordmark{position:absolute;left:8vw;top:15vh;z-index:7;font-family:var(--display);font-size:clamp(62px,13vw,210px);font-weight:700;letter-spacing:-.08em;color:rgba(244,241,232,.92);white-space:nowrap;filter:drop-shadow(0 16px 38px rgba(0,0,0,.45))}.wordmark span,.wordmark i{display:inline-block}.wordmark i{color:var(--cyan);font-style:normal;border-radius:50%;text-shadow:0 0 22px var(--cyan);animation:dotRise 5s ease-in-out infinite}.intro-copy{align-self:end;margin-bottom:6vh}.bubble{position:absolute;border-radius:50%;border:1px solid rgba(220,239,244,.52);background:radial-gradient(circle at 30% 24%,rgba(244,241,232,.78),rgba(220,239,244,.13) 24%,rgba(93,214,232,.08) 64%,rgba(6,16,24,.16));box-shadow:inset -18px -22px 42px rgba(6,16,24,.36),inset 9px 9px 20px rgba(244,241,232,.2),0 0 36px rgba(93,214,232,.18);mix-blend-mode:screen;display:grid;place-items:center;font-family:var(--ui);color:var(--pearl);animation:bubbleRise 15s ease-in-out infinite}.bubble span{opacity:.76}.b1{width:210px;height:210px;right:17vw;bottom:18vh}.b2{width:74px;height:74px;left:35vw;bottom:12vh;animation-delay:2s}.b3{width:132px;height:132px;right:38vw;top:16vh;animation-delay:4s}.lens{backdrop-filter:blur(2px)}
.plate-piece{grid-template-columns:1fr 1.05fr;gap:6vw}.piece-column{position:relative;min-height:72vh}.water-column{position:absolute;inset:0 20%;border-left:1px solid rgba(93,214,232,.35);border-right:1px solid rgba(93,214,232,.18);background:linear-gradient(180deg,transparent,rgba(93,214,232,.08),transparent)}.glass-piece{position:absolute;left:18%;top:18%;width:min(350px,45vw);height:430px;clip-path:polygon(0 7%,37% 7%,42% 0,58% 0,63% 7%,100% 7%,100% 43%,88% 48%,88% 61%,100% 66%,100% 94%,66% 94%,61% 100%,45% 100%,39% 94%,0 94%,0 61%,11% 56%,11% 44%,0 39%);background:linear-gradient(145deg,rgba(220,239,244,.22),rgba(93,214,232,.05));border:1px solid rgba(220,239,244,.32);backdrop-filter:blur(10px);box-shadow:0 40px 90px rgba(0,0,0,.38),inset 0 0 55px rgba(220,239,244,.12);animation:pieceTurn 10s ease-in-out infinite;display:grid;place-items:center}.glass-piece span{position:absolute;top:28px;left:28px;font-family:var(--ui);letter-spacing:.2em;color:var(--silver)}.glass-piece em{font-family:var(--display);font-style:normal;font-size:78px;color:var(--cyan);opacity:.55}.stamp{position:absolute;right:13vw;bottom:18vh;border:1px solid rgba(93,214,232,.7);color:var(--cyan);font-family:var(--ui);letter-spacing:.22em;padding:12px 18px;transform:rotate(-9deg);background:rgba(14,36,51,.4)}
.plate-current{grid-template-columns:.8fr 1.2fr;gap:4vw}.counter-stream{position:relative;height:78vh}.counter-bubble{position:absolute;width:210px;height:210px;border-radius:50%;display:grid;place-items:center;text-align:center;padding:26px;background:radial-gradient(circle at 30% 20%,rgba(244,241,232,.84),rgba(175,200,207,.18) 23%,rgba(93,214,232,.12) 66%,rgba(14,36,51,.28));border:1px solid rgba(220,239,244,.45);box-shadow:inset -20px -26px 48px rgba(6,16,24,.44),0 0 42px rgba(93,214,232,.18);animation:bubbleRise 13s ease-in-out infinite}.counter-bubble:nth-child(1){left:4vw;top:8vh}.counter-bubble:nth-child(2){right:14vw;top:28vh;width:260px;height:260px;animation-delay:1.5s}.counter-bubble:nth-child(3){left:15vw;bottom:6vh;width:235px;height:235px;animation-delay:3s}.counter-bubble span,.final-count{font-family:var(--display);font-size:76px;font-weight:700;color:var(--cyan);text-shadow:0 0 28px rgba(93,214,232,.55)}.counter-bubble small{font-family:var(--ui);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--pearl)}.counter-bubble.complete:after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px solid var(--cyan);animation:rippleOut 1.1s ease-out forwards}.ripple-ledger{position:absolute;left:9vw;right:12vw;bottom:10vh;height:120px;opacity:.45}.ripple-ledger i{display:block;height:1px;margin:22px 0;background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform-origin:left;animation:ledgerWave 4s ease-in-out infinite}.ripple-ledger i:nth-child(2n){animation-delay:.8s;background:linear-gradient(90deg,transparent,var(--silver),transparent)}
.ledger-sheet{width:min(900px,76vw);padding:6vh 5vw;margin:auto;position:relative;z-index:4}.ledger-row{display:grid;grid-template-columns:110px 1fr 1.3fr;gap:22px;padding:20px 0;border-top:1px solid rgba(220,239,244,.24);font-family:var(--ui);letter-spacing:.05em}.ledger-row span{color:var(--cyan);font-weight:600}.ledger-row b{font-weight:600;color:var(--pearl)}.ledger-row em{font-style:normal;color:var(--silver)}.hidden-piece{position:absolute;width:260px;height:210px;clip-path:polygon(0 0,45% 0,50% 11%,62% 11%,67% 0,100% 0,100% 100%,65% 100%,60% 89%,48% 89%,43% 100%,0 100%);border:1px solid rgba(220,239,244,.18);background:rgba(220,239,244,.035);opacity:.4;filter:blur(.2px);animation:catchLight 8s ease-in-out infinite}.hidden-piece.one{right:10vw;top:18vh}.hidden-piece.two{left:14vw;bottom:13vh;animation-delay:3s}
.plate-final{grid-template-columns:1fr 1fr;gap:3vw}.tide-mark{width:min(560px,70vw);height:min(560px,70vw);border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(244,241,232,.06) 0 17%,transparent 18%),repeating-radial-gradient(circle,rgba(93,214,232,.34) 0 1px,transparent 2px 36px);box-shadow:inset 0 0 80px rgba(6,16,24,.7);animation:ringBreath 7s ease-in-out infinite}.tide-mark:before,.tide-mark:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(220,239,244,.26);inset:14%;animation:rippleOut 4s ease-in-out infinite}.tide-mark:after{inset:27%;animation-delay:1.2s}.final-count{font-size:clamp(86px,12vw,170px);color:var(--pearl)}.final-copy{align-self:end;margin-bottom:8vh}
@keyframes grainDrift{to{transform:translate(80px,60px)}}@keyframes currentDrift{to{transform:translate(8vw,-4vh) scale(1.08)}}@keyframes waveSlide{to{stroke-dashoffset:-230}}@keyframes floatPane{50%{transform:translateY(-22px) rotate(1.4deg)}}@keyframes dotRise{50%{transform:translateY(-28px) scale(1.12)}}@keyframes bubbleRise{50%{transform:translateY(-38px) translateX(12px)}}@keyframes pieceTurn{50%{transform:rotateY(18deg) rotateZ(-3deg) translateY(-18px)}}@keyframes rippleOut{to{transform:scale(1.38);opacity:0}}@keyframes ledgerWave{50%{transform:scaleX(.72);opacity:.9}}@keyframes catchLight{50%{opacity:.82;box-shadow:0 0 38px rgba(93,214,232,.22)}}@keyframes ringBreath{50%{transform:scale(1.03)}}
@media (max-width:820px){.folio-nav{right:8px}.folio-nav b{display:none}.plate{display:block;padding:11vh 12vw 10vh 10vw}.marginal.right{right:34px}.wordmark{position:relative;left:auto;top:auto;font-size:21vw;margin-top:4vh}.pane-hero{width:70vw;right:6vw}.plate-piece,.plate-current,.plate-final{grid-template-columns:1fr}.piece-column{min-height:55vh}.counter-stream{height:76vh}.ledger-sheet{width:84vw}.ledger-row{grid-template-columns:1fr}.tide-mark{margin:6vh auto}.plate h1{font-size:22vw}.plate h2{font-size:17vw}}