/* D2 "Water held in view": the approved finishing system for the five public marketing pages.
   Ported from docs/design/approved-opening-2026-10-16.html and approved-registration-2026-10-16.html.
   Scoped to body.d2 so the issued policy layouts keep their own plain ground.
   See docs/design/website-delivery-spec.md before changing any value here. */
:root{--distance:0;--photo:url('/assets/sky-slow-swell.webp')}
html[data-setting=earth]{--photo:url('/assets/water-earth-environment.webp')}

/* ---------- One shared atmosphere and camera ---------- */
.d2{background:var(--pearl)}
.d2 .environment{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--pearl);isolation:isolate;opacity:1;transition:none}
.d2 .masthead,.d2 main,.d2 .site-footer{position:relative;z-index:1}
.d2 .proximity-photo{position:absolute;top:4%;right:-13%;width:73%;height:102%;overflow:visible;transform-origin:100% 55%;transform:translateX(calc(var(--distance)*18%)) scale(calc(1 - var(--distance)*.23));opacity:calc(1 - var(--distance)*.24);transition:transform 1.4s cubic-bezier(.22,.61,.36,1),opacity 1.4s linear;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22water-feather%22%20gradientUnits%3D%22userSpaceOnUse%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221000%22%20gradientTransform%3D%22translate(1000%20510)%20scale(1%20.43)%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22white%22%20stop-opacity%3D%221%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22white%22%20stop-opacity%3D%221%22%2F%3E%3Cstop%20offset%3D%22.52%22%20stop-color%3D%22white%22%20stop-opacity%3D%221%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.86%22%2F%3E%3Cstop%20offset%3D%22.76%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.57%22%2F%3E%3Cstop%20offset%3D%22.85%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.28%22%2F%3E%3Cstop%20offset%3D%22.93%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.07%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22soft-shore%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.0026%20.0031%22%20numOctaves%3D%221%22%20seed%3D%2223%22%20result%3D%22contour%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22contour%22%20scale%3D%2224%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%20result%3D%22dispersed%22%2F%3E%3CfeGaussianBlur%20in%3D%22dispersed%22%20stdDeviation%3D%2224%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cellipse%20cx%3D%221000%22%20cy%3D%22510%22%20rx%3D%221000%22%20ry%3D%22430%22%20fill%3D%22url(%23water-feather)%22%20filter%3D%22url(%23soft-shore)%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22water-feather%22%20gradientUnits%3D%22userSpaceOnUse%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221000%22%20gradientTransform%3D%22translate(1000%20510)%20scale(1%20.43)%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22white%22%20stop-opacity%3D%221%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22white%22%20stop-opacity%3D%221%22%2F%3E%3Cstop%20offset%3D%22.52%22%20stop-color%3D%22white%22%20stop-opacity%3D%221%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.86%22%2F%3E%3Cstop%20offset%3D%22.76%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.57%22%2F%3E%3Cstop%20offset%3D%22.85%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.28%22%2F%3E%3Cstop%20offset%3D%22.93%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.07%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22soft-shore%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.0026%20.0031%22%20numOctaves%3D%221%22%20seed%3D%2223%22%20result%3D%22contour%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22contour%22%20scale%3D%2224%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%20result%3D%22dispersed%22%2F%3E%3CfeGaussianBlur%20in%3D%22dispersed%22%20stdDeviation%3D%2224%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cellipse%20cx%3D%221000%22%20cy%3D%22510%22%20rx%3D%221000%22%20ry%3D%22430%22%20fill%3D%22url(%23water-feather)%22%20filter%3D%22url(%23soft-shore)%22%2F%3E%3C%2Fsvg%3E");mask-mode:alpha;mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.d2 .photo-scene{position:absolute;inset:-5%;background-image:var(--photo);background-size:cover;background-position:69% 62%;transform:scale(1.1);opacity:.62;animation:close-water-exposure 40s ease-in-out infinite}
/* The ribbon layer overscans 20% at each edge so its drift never reveals an end. */
.d2 .proximity-bands{position:absolute;inset:0 -20%;transform:translate(calc(10% + var(--distance)*-4%),calc(1% + var(--distance)*3%)) scale(calc(1.04 - var(--distance)*.06));transform-origin:75% 55%;opacity:calc(.95 + var(--distance)*.03);transition:transform 1.8s cubic-bezier(.22,.61,.36,1),opacity 1.8s linear;mask-image:linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.66) 18%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.95) 68%,#000 84%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.66) 18%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.95) 68%,#000 84%)}
.d2 .brand-water{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.76;animation:surface-distance 40s ease-in-out infinite;transform-origin:76% 51%}
.d2 .ribbon-long{animation:ribbon-long 23.3s ease-in-out infinite alternate;transform-origin:center}
.d2 .ribbon-short{animation:ribbon-short 48.3s ease-in-out infinite alternate;transform-origin:center}
.d2 .brand-water path{stroke:var(--pearl);stroke-width:5;paint-order:stroke fill}
.d2 .brand-water path:nth-of-type(1){transform:translateY(23.6px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(2){transform:translateY(83.2px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(3){transform:translateY(153.04px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(4){transform:translateY(225.6px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(5){transform:translateY(301.6px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(6){transform:translateY(332.32px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(7){transform:translateY(414.64px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(8){transform:translateY(429.2px) scaleY(.52)}
/* Native app strands keep their small-screen arrangement, gather into two loose groups on tablet and three wider. */
.d2 .brand-water path:nth-of-type(n+9){display:none}
@media(min-width:721px) and (max-width:1099px){
.d2 .brand-water path:nth-of-type(1){transform:translateY(29.765px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(2){transform:translateY(40.1228px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(3){transform:translateY(59.6222px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(4){transform:translateY(121.85px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(5){transform:translateY(378.2182px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(6){transform:translateY(365.0642px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(7){transform:translateY(406.401px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(8){transform:translateY(367.4498px) scaleY(.52)}
}
@media(min-width:1100px){
.d2 .brand-water path:nth-of-type(n+9){display:inline}
.d2 .brand-water path:nth-of-type(1){transform:translateY(9.765px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(2){transform:translateY(20.1228px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(3){transform:translateY(39.6222px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(4){transform:translateY(231.85px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(5){transform:translateY(268.2182px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(6){transform:translateY(255.0642px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(7){transform:translateY(406.401px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(8){transform:translateY(367.4498px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(9){transform:translateY(610.1228px) scaleY(.52)}
.d2 .brand-water path:nth-of-type(10){transform:translateY(628.2182px) scaleY(.52)}
}
/* Inverse 40s ebb and flow: the photograph brightens as the ribbons recede, and the reverse. */
@keyframes close-water-exposure{0%{opacity:.62;transform:scale(1.1) translate3d(0,0,0)}14%,36%{opacity:.84;transform:scale(1.115) translate3d(-1%,.65%,0)}63%,82%{opacity:.40;transform:scale(1.075) translate3d(.8%,-.45%,0)}100%{opacity:.62;transform:scale(1.1) translate3d(0,0,0)}}
@keyframes surface-distance{0%{opacity:.76;transform:translateY(0) scale(1)}14%,36%{opacity:.42;transform:translateY(12px) scale(1.008)}63%,82%{opacity:1;transform:translateY(24px) scale(.99)}100%{opacity:.76;transform:translateY(0) scale(1)}}
@keyframes ribbon-long{to{transform:translateY(14.25px)}}
@keyframes ribbon-short{to{transform:translateY(-4.4px)}}
html[data-paused=true] .d2 *,html[data-paused=true] .d2 *::before,html[data-paused=true] .d2 *::after{animation-play-state:paused!important}
@media(max-width:1099px){.d2 .proximity-photo{right:-24%;width:82%;opacity:calc(.94 - var(--distance)*.18)}.d2 .proximity-bands{transform:translate(calc(11% + var(--distance)*-3%),calc(3% + var(--distance)*3%)) scale(calc(1.03 - var(--distance)*.04))}}
@media(max-width:720px){.d2 .proximity-photo{top:18%;right:-50%;width:110%;height:82%;opacity:calc(.9 - var(--distance)*.14)}.d2 .proximity-bands{transform:translate(calc(12% + var(--distance)*-3%),calc(7% + var(--distance)*3%)) scale(1.02)}}

/* Quieter applications of the same family: registration and the reading pages. */
.d2:not(.wider-view) .proximity-photo{opacity:calc(.70 - var(--distance)*.12)}
.d2:not(.wider-view) .proximity-bands{opacity:.36}
.d2.reading-page .proximity-photo{opacity:calc(.56 - var(--distance)*.12)}
.d2.reading-page .proximity-bands{opacity:.30}
@media(max-width:720px){.d2:not(.wider-view) .proximity-photo{opacity:.40}.d2:not(.wider-view) .proximity-bands{opacity:.24}}

/* ---------- Retire the earlier cloudy clearings: the D2 mist replaces them ---------- */
.d2 :is(.chapter,.founder-welcome,.invitation,.site-footer,.reading,.section-heading,.steps,.everyday-example,h1,.intro,.hero-content,.hero-register,.masthead nav a,.setting-choice,.example-note,h4,.welcome-foot)::before,.d2 .masthead::after{content:none!important;display:none!important}
.d2 :is(.chapter,.founder-welcome,.invitation,.site-footer,.masthead){background:transparent}
.d2 .masthead{background:var(--pearl)}

/* ---------- Shared header, controls and footer ---------- */
:root .d2.depth-site{--outer-grid:clamp(1.25rem,6vw,7.5rem)}
@media(min-width:1700px){:root .d2.depth-site{--outer-grid:max(7.5rem,calc((100vw - 1450px)/2))}}
:root .d2.depth-site .masthead{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;max-width:none;min-height:100px;padding:20px var(--outer-grid);gap:clamp(1.25rem,2.5vw,2.75rem)}
:root .d2.depth-site .identity{width:128px;min-width:128px;min-height:44px;display:flex;align-items:center}
:root .d2.depth-site .masthead nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(16px,1.7vw,28px);font:400 1rem/1.35 var(--practical)}
:root .d2.depth-site .masthead nav a{display:flex;align-items:center;min-height:44px;padding:0;color:var(--ink);font-size:1rem;line-height:1.35;white-space:nowrap}
:root .d2.depth-site :is(.masthead nav .nav-invitation,.primary-action){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid var(--action);border-radius:8px;background:var(--action);color:var(--pearl);font:400 1.0625rem/1.35 var(--practical);text-decoration:none;white-space:normal;box-shadow:none;transition:filter .18s ease-in-out}
:root .d2.depth-site .masthead nav .nav-invitation{min-height:44px;padding:10px 18px;font-size:1rem}
:root .d2.depth-site .masthead nav .nav-invitation[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
:root .d2.depth-site :is(.primary-action,.masthead nav .nav-invitation):hover{filter:brightness(.92)}
:root .d2.depth-site .setting-control{margin:0 0 0 auto}
:root .d2.depth-site .setting-options{gap:0}
:root .d2.depth-site .setting-choice,:root .d2.depth-site .setting-choice[aria-pressed=true]{min-height:44px;padding:10px 8px;border:0;border-radius:0;background:transparent;font:400 .875rem/1.35 var(--practical);color:var(--quiet);text-decoration:none}
:root .d2.depth-site .setting-choice[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:7px;text-decoration-color:color-mix(in srgb,var(--action) 45%,transparent);text-decoration-thickness:1px}
:root .d2.depth-site .setting-choice:hover{color:var(--ink)}
:root .d2.depth-site .motion-control{position:fixed;right:1.5rem;bottom:1.25rem;z-index:20;min-height:44px;padding:10px 12px;border:0;border-radius:8px;background:color-mix(in srgb,var(--pearl) 60%,transparent);color:var(--quiet);font:400 .875rem/1.4 var(--practical);box-shadow:none}
:root .d2.depth-site .site-footer{max-width:none;margin:0;padding:2rem var(--outer-grid) calc(6rem + env(safe-area-inset-bottom));display:grid;grid-template-columns:140px 1fr 1.3fr;gap:3rem;align-items:start;border-top:1px solid color-mix(in srgb,var(--line) 30%,transparent);background:transparent}
:root .d2.depth-site .footer-identity{display:block;width:110px}
:root .d2.depth-site .site-footer :is(p,a){font:400 .875rem/1.6 var(--practical)}
:root .d2.depth-site .site-footer>div{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
:root .d2.depth-site .site-footer>div a{text-decoration:none;min-height:24px}
:root .d2.depth-site .site-footer>div a:hover{text-decoration:underline}
@media(min-width:721px) and (max-width:1099px){:root .d2.depth-site .masthead{gap:12px 24px}:root .d2.depth-site .masthead nav{gap:8px 18px}}
@media(max-width:720px){
:root .d2.depth-site .masthead{display:flex;gap:4px 16px;padding-block:14px;min-height:0}
:root .d2.depth-site .identity{width:108px;min-width:108px}
:root .d2.depth-site .setting-control{margin-left:auto;width:auto}
:root .d2.depth-site .masthead nav{order:3;display:flex;width:100%;flex-wrap:wrap;gap:4px 18px;font-size:.9375rem}
:root .d2.depth-site .masthead nav a{font-size:.9375rem;white-space:normal}
:root .d2.depth-site .masthead nav .nav-invitation{font-size:.9375rem;padding:9px 14px}
:root .d2.depth-site .setting-choice{font-size:.8125rem;padding-inline:6px}
:root .d2.depth-site .motion-control{font-size:.8125rem;right:12px;bottom:10px}
:root .d2.depth-site .site-footer{grid-template-columns:1fr;gap:1.5rem}
}

/* ---------- Type roles: Delphi for short headlines, DM Sans practical, Lora for selected reflection ---------- */
:root .d2.depth-site :is(h3,h4,summary,.quiet-statement,.purpose-layout h2,.care-layout #taking-part-title,.next-steps h2,label,button){font-family:var(--practical)}
:root .d2.depth-site :is(.hero-tagline,.lead,.founder-intro,.possible-reflection blockquote){font-family:var(--reflective)}
:root .d2.depth-site .next-steps h2{font-size:var(--marketing-h3);line-height:1.4}
:root .d2.depth-site .eyebrow{font:400 1rem/1.5 var(--practical);color:var(--action)}
:root .d2.depth-site .lead{line-height:1.5}
@media(max-width:720px){:root .d2.depth-site .eyebrow{font-size:.9375rem}}

/* ---------- Expansive welcome: approved opening composition ---------- */
:root .d2.wider-view .welcome{display:flex;align-items:center;min-height:min(50rem,calc(100svh - 100px));padding:3rem var(--outer-grid) 5rem}
:root .d2.wider-view .hero-content{width:min(48rem,72%);max-width:48rem}
:root .d2.wider-view h1{max-width:12.5ch;line-height:1.08;text-wrap:balance}
:root .d2.wider-view h1 span{display:block}
:root .d2.wider-view .hero-tagline{max-width:30ch;margin:36px 0 24px;line-height:1.5}
:root .d2.wider-view .intro{max-width:45ch;line-height:1.65}
:root .d2.wider-view .hero-invitation{margin-top:32px}
:root .d2.wider-view .hero-register{margin-top:0;max-width:none}
:root .d2.wider-view .invitation-note{margin-top:12px;font:400 1rem/1.5 var(--practical);color:var(--quiet);max-width:36ch}
:root .d2.wider-view .page-section{padding-top:clamp(56px,7vw,112px);padding-bottom:clamp(64px,8vw,128px)}
:root .d2.wider-view .section-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(48px,7vw,128px)}
:root .d2.wider-view .section-grid .section-heading{max-width:25rem}
:root .d2.wider-view .section-heading h2{max-width:16ch;line-height:1.16;text-wrap:balance}
:root .d2.wider-view .eyebrow{gap:16px;margin-bottom:24px}
:root .d2.wider-view .eyebrow::before{width:32px}
:root .d2.wider-view .reading{max-width:48ch}
:root .d2.wider-view .lead{margin-bottom:28px;max-width:28ch}
:root .d2.wider-view .quiet-statement{font-size:clamp(1.375rem,2vw,1.6875rem);line-height:1.4;margin-top:40px;max-width:29ch}
:root .d2.wider-view .space-line{margin-top:24px}
:root .d2.wider-view .register .reading{max-width:48ch}
@media(min-width:721px) and (max-width:1099px){:root .d2.wider-view .hero-content{width:min(42rem,85%)}:root .d2.wider-view .welcome{min-height:44rem}:root .d2.wider-view .section-grid{grid-template-columns:1fr;gap:36px}:root .d2.wider-view .reading{max-width:54ch}}
@media(max-width:1099px){:root .d2.wider-view .section-grid{grid-template-columns:1fr}}
@media(max-width:720px){
:root .d2.wider-view .welcome{min-height:0;align-items:flex-start;padding-top:40px;padding-bottom:64px}
:root .d2.wider-view .hero-content{width:100%;max-width:38rem}
:root .d2.wider-view h1{font-size:clamp(2.625rem,11.6vw,3.75rem);max-width:12ch}
:root .d2.wider-view h1 span{display:inline}
:root .d2.wider-view .hero-tagline{font-size:1.3125rem;margin:28px 0 22px}
:root .d2.wider-view .intro{font-size:1.125rem;max-width:38ch}
:root .d2.wider-view .hero-invitation{margin-top:28px}
:root .d2.wider-view .primary-action{padding-inline:22px;width:auto}
:root .d2.wider-view .invitation-note{font-size:.9375rem;max-width:30ch}
:root .d2.wider-view .section-grid{gap:32px}
:root .d2.wider-view .section-heading h2{font-size:clamp(2.25rem,9vw,2.875rem)}
:root .d2.wider-view .lead{font-size:1.375rem}
:root .d2.wider-view .quiet-statement{font-size:1.4375rem;max-width:28ch}
:root .d2.wider-view .page-section{padding-block:52px 76px}
}

/* ---------- Registration: lean introduction, real form, quieter atmosphere ---------- */
:root .d2.register-page .invitation{padding:clamp(2.5rem,5vw,5rem) var(--outer-grid) 5.5rem}
:root .d2.register-page .invitation-content{max-width:34rem;margin:0;text-align:left}
:root .d2.register-page .invitation h1{font:400 clamp(2.75rem,4.3vw,4.5rem)/1.12 var(--brand);max-width:10em;margin:0 0 1.75rem}
:root .d2.register-page .invitation-content>p{font:400 var(--marketing-body)/1.6 var(--practical);max-width:46ch;margin:0 0 1rem}
:root .d2.register-page .invitation-content .registration-intro{font-size:1.25rem;line-height:1.55;max-width:31ch}
:root .d2.register-page{--marketing-body:1.125rem}
:root .d2.register-page .interest-form{max-width:none;margin:2rem 0 0}
:root .d2.register-page .interest-form .field{margin-bottom:1.5rem}
:root .d2.register-page .interest-form label{display:block;font:400 1rem/1.5 var(--practical)}
:root .d2.register-page .interest-form .consent{display:flex}
:root .d2.register-page .interest-form :is(input[type=email],textarea){font:400 1.125rem/1.5 var(--practical);margin-top:.5rem}
:root .d2.register-page .interest-form textarea{min-height:7rem}
:root .d2.register-page .interest-form :is(.field-hint,.field-error){font-size:.875rem;line-height:1.6;margin-top:.4rem}
:root .d2.register-page .interest-form .primary-action{width:100%;margin:.25rem 0 0}
:root .d2.register-page .interest-form .small-note{font:400 .875rem/1.65 var(--practical);color:var(--quiet);max-width:60ch;margin:1.15rem 0 0}
:root .d2.register-page .interest-form .form-status{font:400 1.125rem/1.6 var(--practical);margin-top:1rem}
:root .d2.register-page .interest-form .form-status:empty{margin:0}
:root .d2.register-page .interest-form .form-status[data-state=done]{margin:2rem 0 2.5rem;color:var(--ink)}
:root .d2.register-page .interest-form .form-status[data-state=done] strong{display:block;font-weight:500;font-size:1.5rem;line-height:1.4;margin-bottom:.6rem}
:root .d2.register-page .interest-form .form-status[data-state=done] span{display:block}
:root .d2.register-page .interest-form .form-status:focus{outline:2px solid var(--action);outline-offset:5px}
:root .d2.register-page .care-chapter{padding:2.5rem var(--outer-grid) 5rem}
:root .d2.register-page .care-chapter .chapter-top{display:none}
:root .d2.register-page .care-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:7%;padding-top:2rem;border-top:1px solid color-mix(in srgb,var(--line) 30%,transparent)}
:root .d2.register-page .care-layout #taking-part-title{font-size:1.625rem;line-height:1.35;max-width:15em;margin:0 0 1rem}
:root .d2.register-page .care-intro{max-width:38ch}
@media(min-width:1100px){:root .d2.register-page{--marketing-body:1.1875rem}:root .d2.register-page .invitation-content{margin-left:5%;max-width:35rem}:root .d2.register-page .interest-form{max-width:32rem}:root .d2.register-page .care-chapter{padding-top:4rem}}
@media(min-width:1700px){:root .d2.register-page .invitation-content{margin-left:0}:root .d2.register-page .invitation h1{font-size:4.5rem}}
@media(max-width:1099px){:root .d2.register-page .care-layout{grid-template-columns:1fr;gap:2rem}:root .d2.register-page .care-intro{max-width:54ch}}
@media(max-width:720px){:root .d2.register-page .invitation{padding-top:2rem;padding-bottom:4rem}:root .d2.register-page .invitation h1{font-size:2.75rem}:root .d2.register-page .invitation-content{max-width:100%}:root .d2.register-page .invitation-content .registration-intro{font-size:1.1875rem}:root .d2.register-page .care-chapter{padding-bottom:3rem}}

/* ---------- Reduced motion, forced colours and print ---------- */
@media(prefers-reduced-motion:reduce){.d2 *,.d2 *::before,.d2 *::after{animation:none!important;scroll-behavior:auto!important}.d2 .proximity-photo,.d2 .proximity-bands{transition:none!important;transform:none!important}.d2.wider-view .proximity-photo{opacity:.76}.d2.wider-view .proximity-bands{opacity:.98}.d2 .photo-scene{opacity:.62;transform:scale(1.1)!important}.d2 .brand-water{opacity:.76;transform:none!important}:root .d2.depth-site :is(.primary-action,.masthead nav .nav-invitation){transition:none}}
@media(forced-colors:active){.d2 .environment{display:none}:root .d2.depth-site :is(.primary-action,.masthead nav .nav-invitation){border:1px solid ButtonText}}
@media print{.d2 .environment,.d2 .motion-control{display:none!important}}

/* Measured readability: on narrower screens the photograph sits behind the opening copy,
   so its exposure is lowered just enough for small text to stay at or above 4.5:1 at the brightest point of the ebb. */
@media(max-width:1099px){.d2.wider-view .proximity-photo{opacity:calc(.66 - var(--distance)*.14)}html[data-setting=earth] .d2.wider-view .proximity-photo{opacity:calc(.46 - var(--distance)*.1)}}
/* Quiet ink is only 4.9:1 on bare pearl, so the hero note over moving water uses ink to keep 4.5:1. */
:root .d2.wider-view .invitation-note{color:var(--ink)}
/* The character count sits beside the moving water at tablet widths; ink keeps it at 4.5:1 or more. */
:root .d2.register-page .interest-form .field-hint{color:var(--ink)}