:root { color-scheme: light; font-family: Georgia, 'Times New Roman', serif; color: #242321; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; position: relative; }
.art { position: absolute; z-index: 0; width: 100%; max-width: 1800px; aspect-ratio: 3 / 2; left: 50%; top: 0; transform: translateX(-50%); overflow: hidden; pointer-events: none; contain: layout paint; }
.art img { display: block; width: 100%; height: 100%; }
.glint { position: absolute; border-radius: 50%; background: radial-gradient(ellipse at 42% 42%, rgba(255,255,255,.95), rgba(255,249,234,.36) 35%, transparent 70%); opacity: .04; animation: glimmer 18s ease-in-out infinite; animation-play-state: paused; will-change: opacity, transform; }
.glint-red { left: 3%; top: 5%; width: 12%; height: 8%; animation-delay: -4s; }
.glint-copper { left: 7%; top: 18%; width: 14%; height: 8%; animation-duration: 22s; animation-delay: -12s; }
.glint-violet { left: 6%; top: 29%; width: 13%; height: 8%; animation-duration: 24s; animation-delay: -7s; }
.glint-blue { left: 82%; top: 91%; width: 13%; height: 8%; animation-duration: 20s; animation-delay: -15s; }
@keyframes glimmer { 0%, 100% { opacity: .025; transform: translate3d(-2px, 1px, 0); } 50% { opacity: .16; transform: translate3d(2px, -1px, 0); } }
html[data-motion="running"] .glint { animation-play-state: running; }
main { position: relative; z-index: 1; width: min(100% - 64px, 690px); margin-inline: auto; padding-top: clamp(112px, 11vw, 170px); padding-bottom: 90px; }
header { text-align: center; margin: 0 0 54px; perspective: 1000px; }
h1 { font-size: clamp(44px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; margin: 0; }
/* A shallow letterpress edge: depth without moving the reading text. */
h1 { color: #282621; text-shadow: 0 1px 0 #e4e0d8, 0 2px 0 #c5bfb4, 0 3px 1px #b6b0a6, 0 9px 12px rgba(62,47,32,.16), 0 18px 28px rgba(62,47,32,.08); transform-origin: 50% 70%; animation: type-emerge 2400ms cubic-bezier(.2,.65,.25,1) both; animation-play-state: paused; }
@keyframes type-emerge { from { transform: translate3d(0,9px,-18px) rotateX(7deg); opacity: .82; } to { transform: translate3d(0,0,0) rotateX(0); opacity: 1; } }
html[data-motion="running"] h1 { animation-play-state: running; }
article { font-size: 19px; line-height: 1.75; background: #fff; box-shadow: 0 0 24px 18px #fff; }
p { margin: 0 0 1.25em; }
section { margin-top: 58px; }
/* Reversible watermark: CSS crops the original logo without editing the source. */
.watermarked { position: relative; isolation: isolate; }
.watermarked > h2, .watermarked > p { position: relative; z-index: 1; }
.watermark-f { position: absolute; z-index: 0; top: 110px; left: 50%; width: min(66%, 390px); aspect-ratio: 230 / 335; overflow: hidden; transform: translateX(-50%) rotate(-8deg); opacity: .065; pointer-events: none; user-select: none; }
.watermark-f img { position: absolute; width: 256.956522%; height: auto; max-width: none; left: -78.26087%; top: -156.716418%; filter: grayscale(1) invert(1); }
h2 { font-size: 30px; line-height: 1.24; font-weight: 500; letter-spacing: -.025em; margin: 0 0 22px; text-wrap: balance; }
footer { margin-top: 64px; padding-top: 30px; border-top: 1px solid #e6e1db; text-align: center; }
.closing { font-size: 27px; line-height: 1.4; }
.signature { font-style: italic; font-size: 20px; }
.motion-toggle { position: absolute; top: 16px; right: 16px; z-index: 3; min-height: 44px; padding: 10px 16px; border: 1px solid #dedbd5; border-radius: 24px; background: #fffffff2; color: #47443f; font: 13px/1.3 system-ui, sans-serif; cursor: pointer; }
.motion-toggle:focus-visible { outline: 2px solid #565047; outline-offset: 4px; }
[hidden] { display: none !important; }
@media (min-width: 761px) and (max-width: 1100px) { main { width: 54%; } article { font-size: 18px; } h1 { font-size: 48px; } }
@media (max-width: 760px) {
 .art { width: 100%; }
 main { width: auto; margin: 0 24px; padding-top: 0; padding-bottom: 96px; }
 header { height: calc(100vw * .667); display: grid; place-items: center; margin: 0 -24px 22px; }
 h1 { font-size: clamp(27px, 7.4vw, 48px); width: 53%; line-height: 1.09; }
 h1 { text-shadow: 0 1px 0 #ded9d1, 0 2px 0 #c4bdb2, 0 5px 8px rgba(62,47,32,.16), 0 10px 16px rgba(62,47,32,.07); }
 article { font-size: 17px; line-height: 1.78; }
 section { margin-top: 40px; }
 h2 { font-size: 27px; }
 .closing { font-size: 25px; }
 footer { margin-top: 48px; }
 .motion-toggle { top: calc(100vw * .667 - 48px); right: 10px; font-size: 11px; min-height: 44px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .glint { animation: none !important; opacity: 0 !important; will-change: auto; } }
@media (prefers-reduced-motion: reduce) { h1 { animation: none !important; transform: none !important; opacity: 1; } }
@media print { .motion-toggle { display: none !important; } .glint { display: none; } }

/* Independent A/B preview. Original local design remains in the parent folder. */
.preview-tools { position: relative; z-index: 5; height: 56px; display: flex; justify-content: center; align-items: center; gap: 8px; background: #fff; border-bottom: 1px solid #eee9e3; font: 12px system-ui,sans-serif; }
.preview-tools a { text-decoration: none; color: #62584f; padding: 11px 14px; border-radius: 22px; border: 1px solid transparent; }
.preview-tools a[aria-current="page"] { color: #29231f; border-color: #d7cbc0; background: #f8f5f1; }
.preview-tools a:focus-visible { outline: 2px solid #655240; outline-offset: 2px; }
.preview-tools .motion-toggle { position: static; min-height: 42px; font-size: 11px; padding: 8px 12px; }
.art { top: 56px; }
.glint { animation-name: glimmer-b; animation-duration: 8s; }
.glint-copper { animation-duration: 10s; }
.glint-violet { animation-duration: 11s; }
.glint-blue { animation-duration: 9s; }
@keyframes glimmer-b { 0%,100% {opacity:.07;transform:translate3d(-4px,2px,0) scale(.97)} 50% {opacity:.43;transform:translate3d(5px,-3px,0) scale(1.06)} }
.sweep-pad { position:absolute; overflow:hidden; border-radius:45%; transform:translate3d(0,var(--drift,0px),0); }
.sweep-left {left:1%;top:3%;width:21%;height:82%;}
.sweep-right {left:80%;top:86%;width:18%;height:14%;}
.sweep-pad::after {content:"";position:absolute;inset:-10% -30%;background:linear-gradient(112deg,transparent 34%,#fff3 44%,#fff9 49%,#fff3 53%,transparent 65%);animation:sweep 8s ease-in-out infinite;will-change:transform,opacity;}
.sweep-right::after {animation-delay:-4s;animation-duration:11s;}
@keyframes sweep {0%,15%{transform:translateX(-105%);opacity:0} 35%,60%{opacity:.6} 85%,100%{transform:translateX(105%);opacity:0} }
.spark { position:absolute;width:18px;height:18px; background:radial-gradient(circle,#fff 0 9%,#fff9 17%,transparent 63%); animation:sparkle 7s ease-in-out infinite;will-change:transform,opacity; }
.spark::before,.spark::after {content:"";position:absolute;background:linear-gradient(transparent,#fff,transparent);border-radius:50%;}
.spark::before{width:1px;left:50%;top:0;height:100%;}.spark::after{height:1px;top:50%;left:0;width:100%;background:linear-gradient(90deg,transparent,#fff,transparent);}
.s1{left:8%;top:9%;animation-delay:-1s}.s2{left:13%;top:23%;animation-delay:-4s;animation-duration:9s}.s3{left:8%;top:55%;animation-delay:-6s;animation-duration:10s}.s4{left:88%;top:94%;animation-delay:-3s}.s5{left:95%;top:69%;animation-delay:-5s;animation-duration:12s}
@keyframes sparkle{0%,100%{opacity:.08;transform:scale(.65) rotate(-12deg)}45%,55%{opacity:.85;transform:scale(1.25) rotate(12deg)}}
.pigment{position:absolute;width:11px;height:11px;border-radius:45% 55% 58% 42%;box-shadow:inset -2px -2px 3px #0002,inset 2px 2px 3px #fff8;animation:pigment-drift 9s ease-in-out infinite;will-change:transform;}
.p1{left:23%;top:5%;background:#bb202b}.p2{left:17%;top:91%;background:#eabb24;animation-delay:-4s;animation-duration:11s}.p3{left:94%;top:53%;background:#77528f;animation-delay:-6s;animation-duration:13s}
@keyframes pigment-drift{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(3px,-7px,0) scale(1.1)}}
.traces{position:absolute;inset:0;width:100%;height:100%;transform:translate3d(0,var(--drift,0px),0);}
.trace{stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:trace-light 12s ease-in-out infinite;}
.trace-copper{stroke:#ffefce;animation-delay:-2s}.trace-violet{stroke:#e7c7ff;animation-delay:-6s}.trace-blue{stroke:#cee8ff;animation-delay:-9s}
@keyframes trace-light{0%,10%{stroke-dashoffset:1;opacity:0}35%,60%{stroke-dashoffset:0;opacity:.6}85%,100%{stroke-dashoffset:0;opacity:0}}
html[data-variant="A"] .glint{animation-name:glimmer;animation-duration:16s;}
html[data-variant="A"] .sweep-pad{opacity:.3;}
html[data-variant="A"] .sweep-pad::after{animation-duration:16s;}
html[data-variant="A"] .spark{display:none;}
html[data-variant="A"] .pigment,html[data-variant="A"] .traces{display:none;}
.spark,.pigment,.trace,.sweep-pad::after {animation-play-state:paused;}
html[data-motion="running"] .spark,html[data-motion="running"] .pigment,html[data-motion="running"] .trace,html[data-motion="running"] .sweep-pad::after{animation-play-state:running;}
@media(max-width:760px){.spark{width:12px;height:12px}.pigment{width:6px;height:6px}.preview-tools{gap:2px;font-size:11px}.preview-tools a{padding:11px 10px}.preview-tools .motion-toggle{padding:8px 10px}.trace{stroke-width:4;}}
@media(prefers-reduced-motion:reduce){.spark,.pigment,.traces,.sweep-pad{display:none!important;animation:none!important}.sweep-pad::after,.trace{animation:none!important}.art{--drift:0px!important;}}

/* Separate experiment only. The A/B pages do not load this stylesheet. */
article { position: relative; isolation: isolate; }
article > .introduction, article > section, article > footer { position: relative; z-index: 1; }
.watermark-f { display: none; }
.watermark-large { position: absolute; left: 50%; top: 0; width: min(92vw, 1150px); aspect-ratio: 230 / 335; transform: translateX(-50%); overflow: hidden; z-index: 0; opacity: .022; pointer-events: none; user-select: none; }
.watermark-large img { position: absolute; width: 256.956522%; height: auto; max-width: none; left: -78.26087%; top: -156.716418%; filter: grayscale(1) invert(1); }
.preview-tools::before { content: 'F · Test'; font-size: 11px; color: #756d66; padding-right: 6px; }
@media(max-width:400px) { .preview-tools a { padding: 11px 6px; } .preview-tools::before { padding-right: 0; font-size: 10px; } }

/* Final local composition: animation B, watermark A, no comparison controls. */
.art { top: 0; }
.watermark-large { opacity: .022; }
.consultation { margin: 38px 0 0; }
.consultation a { display: inline-block; max-width: 100%; padding: 18px 22px; border: 1px solid #8a7a69; border-radius: 3px; color: #332b24; background: #fbf9f6; text-decoration: none; font: 17px/1.65 Georgia, serif; }
.consultation span { white-space: nowrap; }
.consultation a:hover { background: #f2ece4; }
.consultation a:focus-visible { outline: 2px solid #5d4837; outline-offset: 5px; }
@media(max-width:760px) { .consultation a { width:100%; padding:16px; } }