/* Section 01: a quieter introduction, with motion tied to native scrolling. */
.everyday{padding-top:70px;padding-bottom:110px;background:var(--paper)}
.everyday .section-label{margin-bottom:35px}
.everyday .section-label>span:last-child{color:#71859d;letter-spacing:1.4px}
.everyday-layout{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:6vw}
.everyday-copy{padding:20px 0;min-width:0}
.everyday-copy h2{font-size:clamp(42px,4.8vw,80px);font-weight:450;line-height:1.13;letter-spacing:-.05em;margin:0 0 28px}
.everyday-copy h2 .serif{color:#587697}
.everyday-copy p{font-size:17px;line-height:1.85;color:#576d88;margin:0;max-width:440px}
.everyday-copy p.everyday-purpose{margin-top:16px;color:#294867}
.everyday-copy .text-link{font-size:16px;margin-top:32px;gap:28px}
.everyday-visual{margin:0;min-width:0;position:relative}
.liquid-stage{display:block;position:relative;width:100%;aspect-ratio:1.5;isolation:isolate;cursor:pointer;border-radius:28px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.liquid-stage:focus-visible{outline:2px solid #7195bd;outline-offset:8px}
.liquid-halo{position:absolute;inset:5% -6% 4%;border-radius:50%;background:radial-gradient(ellipse at 54% 48%,#c4d9ed8a 0%,#d8e5f252 42%,transparent 70%);transform:translateY(10%);pointer-events:none}
.liquid-stage canvas{position:absolute;inset:0;width:100%;height:calc(100% - 36px);pointer-events:none;z-index:2}

.liquid-hint{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);display:flex;gap:30px;align-items:center;white-space:nowrap;font-size:13px;color:#5b7999;letter-spacing:.3px;padding:12px 0;border-bottom:1px solid #a8bfd155;transition:color .2s,border-color .2s}
.liquid-hint>span{font-size:21px;transition:transform .3s}
.liquid-stage:hover .liquid-hint{color:#244d7c;border-color:#7195bd}
.liquid-stage:hover .liquid-hint>span{transform:rotate(45deg)}
.liquid-fallback{position:absolute;inset:34% 9% 18%;border-radius:50%;background:repeating-radial-gradient(ellipse at 48% 46%,#b4d4ed55 0 8px,#f6fbff99 10px 12px,#aacde844 15px 30px);box-shadow:inset 0 0 45px 35px var(--paper);transform:rotate(-5deg)}
.liquid-stage.sculpture-ready .liquid-fallback{position:absolute;inset:34% 9% 18%;border-radius:50%;background:repeating-radial-gradient(ellipse at 48% 46%,#b4d4ed55 0 8px,#f6fbff99 10px 12px,#aacde844 15px 30px);box-shadow:inset 0 0 45px 35px var(--paper);transform:rotate(-5deg)}
.everyday-visual figcaption{text-align:center;margin:18px 0 0;font-size:12px;letter-spacing:1.4px;color:#6b85a1}
@media(max-width:1100px){.everyday-layout{gap:4vw}.everyday-copy p{font-size:16px}.liquid-stage{aspect-ratio:1}}
@media(max-width:800px){.everyday{padding-top:65px;padding-bottom:100px}.everyday .section-label{margin-bottom:32px}.everyday-layout{grid-template-columns:1fr;gap:12px}.everyday-copy{padding:0}.everyday-copy h2{font-size:7vw;margin-bottom:22px}.everyday-copy p{max-width:530px}.everyday-copy .text-link{margin-top:24px}.liquid-stage{aspect-ratio:1.45}.everyday-visual{width:100%}}
@media(max-width:520px){.everyday{padding-bottom:80px}.everyday-copy h2{font-size:10vw}.everyday-copy p{font-size:16px}.everyday-copy p br{display:none}.liquid-stage{aspect-ratio:1.05}.everyday-visual figcaption{font-size:11px;margin-top:26px}}
@media(prefers-reduced-motion:reduce){.liquid-hint,.liquid-hint>span{transition:none}}

/* The same identity as the header, floating above the interactive surface. */
.liquid-brand{position:absolute;top:8%;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;gap:14px;color:#294867;text-align:left;white-space:nowrap}
.liquid-brand>svg{width:43px;height:55px;stroke:#397bbd;stroke-width:1}
.liquid-brand>span{font-size:clamp(30px,2.6vw,43px);font-weight:450;letter-spacing:-2px;line-height:1.05}
.liquid-brand small{font-size:9px;letter-spacing:6px;margin-top:9px;margin-left:3px;color:#587697}
@media(max-width:520px){.liquid-brand{top:8%;gap:10px}.liquid-brand>svg{width:32px;height:42px}.liquid-brand>span{font-size:30px;letter-spacing:-1.6px}.liquid-brand small{font-size:8px;letter-spacing:4.8px;margin-top:7px}}
/* A ceramic city, connected by water. */
.city-study{position:relative;isolation:isolate;padding-top:10px}
.city-study::before{content:"";position:absolute;z-index:-1;inset:8% -6% 12%;border-radius:50%;background:radial-gradient(ellipse,#d8e7f27a,transparent 68%);pointer-events:none}
.city-study-top{display:flex;align-items:center;justify-content:space-between;margin:0 5%;font-size:10px;letter-spacing:1.8px;color:#6583a0}
.city-study-top>span:first-child{display:flex;align-items:center;gap:9px}
.city-study-top i{width:5px;height:5px;border-radius:50%;background:#5c94bc;box-shadow:0 0 0 4px #72a1c015}
.city-study-art{position:relative;aspect-ratio:1.4;margin:-12px -6% -25px;touch-action:pan-y}
.city-study-art canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;touch-action:none}
.city-study-fallback{position:absolute;inset:0;width:100%;height:100%}
.city-ready .city-study-fallback{display:none}
.city-study figcaption.city-study-caption{margin:0 5%;text-align:left;letter-spacing:0}
.city-moments{display:flex;border-top:1px solid #284b7124;border-bottom:1px solid #284b7124}
.city-moments button{position:relative;flex:1;padding:17px 5px;display:flex;gap:12px;align-items:center;color:#73899f;font-size:14px;text-align:left;transition:color .25s}
.city-moments button span{font-size:10px;color:#7b9ab7}
.city-moments button::after{content:"";position:absolute;bottom:-1px;left:0;right:20px;height:2px;background:#5989b4;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.city-moments button[aria-pressed=true]{color:#203f62}
.city-moments button[aria-pressed=true]::after{transform:scaleX(1)}
.city-study-message{padding:20px 0 18px;min-height:100px}
.city-study-message strong{font-size:23px;font-weight:450;letter-spacing:-.6px;color:#284867}
.city-study-message p{font-size:14px;line-height:1.6;color:#70869d;margin:7px 0 0}
.city-study-note{font-size:10px;line-height:1.6;color:#8b9caf;display:flex;justify-content:space-between;gap:15px}
.city-study-note>span{font-size:9px}
@media(max-width:1100px){.city-study-art{aspect-ratio:1.15;margin-left:-8%;margin-right:-8%}.city-moments button{font-size:12px;gap:8px}}
@media(max-width:800px){.city-study{margin-top:32px}.city-study-art{aspect-ratio:1.4}.city-study-top,.city-study figcaption.city-study-caption{margin-left:0;margin-right:0}.city-study-message{min-height:95px}.city-study-note{font-size:10px}}
@media(max-width:520px){.city-study-art{aspect-ratio:1.12;margin:-8px -5% -20px}.city-study-top{font-size:9px;letter-spacing:1.3px}.city-moments button{font-size:13px;padding:16px 3px}.city-study-message strong{font-size:22px}.city-study-message p{font-size:13px}.city-study-note{display:block}.city-study-note>span{display:block;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.city-moments button,.city-moments button::after{transition:none}}
@media(min-width:801px){.everyday-layout>.everyday-copy{transform:translateY(var(--city-copy-offset,-85px))}}

.motion-paused .city-study-art canvas,.city-fallback .city-study-art canvas{touch-action:pan-y}
@media(prefers-reduced-motion:reduce){.city-study-art canvas{touch-action:pan-y}}