/* Additional isolated study only; approved A/B and product never load this file. */
.adaptive-review{position:fixed;z-index:6;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:260px;max-width:calc(100vw - 24px);max-height:65svh;overflow:auto;background:#f4efe5f5;color:#293529;padding:0 12px;font:12px/1.5 'Helvetica Neue',Arial,sans-serif}
.adaptive-review:not([open]){width:auto}.adaptive-review summary{min-height:44px;align-content:center;cursor:pointer}.adaptive-review label{display:grid;grid-template-columns:1fr;gap:4px;margin:12px 0}.adaptive-review select{font:16px/1.4 Arial,sans-serif;min-height:44px;max-width:100%;background:#fffaf0;color:#293529;border:1px solid #c9c9bb;padding:4px 8px}.adaptive-review button{font:inherit;min-height:44px;padding:8px 12px;background:#293529;color:#fffaf0;border:0;cursor:pointer}.adaptive-review a{display:block;min-height:44px;align-content:center}.adaptive-review :is(select,button,summary):focus-visible{outline:2px solid #5b684b;outline-offset:2px}.adaptive-review p{margin:12px 0}.review-note{max-width:150px;padding:5px 8px}
body[data-adaptive-ready] .photograph-field{margin:0;flex:0 0 var(--field);width:var(--field)}
body[data-adaptive-ready] .memory{margin:0;position:absolute}.memory a{border-radius:1px}.memory img{max-width:none;object-fit:contain}
body[data-adaptive-ready] .memory a{height:100%;padding:5px}.memory img{width:100%;height:auto}
body[data-paper=refined] .letter-scroll{
 background-color:#f7f2e8;background-image:url('/demo/christmas/assets/moment/assets/letter-uncoated.svg');background-size:192px 192px;
 border:1px solid #fffaf1;border-right-color:#e5ddcf;border-bottom-color:#d9cfbf;
 border-radius:.5px 1.5px 1px .5px;
 box-shadow:0 1px 1px #1721151f,1px 4px 10px #17211529,3px 12px 22px #17211517;
}
.letter-copy{white-space:pre-line}
@media(max-width:360px){.adaptive-review{top:8px;font-size:11px}.review-note{max-width:116px;font-size:8px}.adaptive-review summary{max-width:150px}.adaptive-review[open]{width:260px}}

.adaptive-review fieldset{border:0;margin:0;padding:0;min-width:0}

/* Landscape chrome is measured; photo columns use the remaining height. */
.journey{--gallery-safe-top:env(safe-area-inset-top,0px);--gallery-safe-bottom:env(safe-area-inset-bottom,0px);--gallery-safe-left:env(safe-area-inset-left,0px);--gallery-safe-right:env(safe-area-inset-right,0px)}
@media(hover:hover) and (pointer:fine){.journey[data-pan-ready],.journey[data-pan-ready] [data-photograph]{cursor:grab}.journey[data-pan-ready] .letter-scroll{cursor:text}.journey[data-panning],.journey[data-panning] *{cursor:grabbing!important;user-select:none}}
.photo-viewer{background:#142019f5;color:#faf5eb;padding:max(72px,calc(env(safe-area-inset-top) + 60px)) max(16px,env(safe-area-inset-right)) max(76px,calc(env(safe-area-inset-bottom) + 68px)) max(16px,env(safe-area-inset-left));touch-action:pan-y pinch-zoom}
.photo-viewer::backdrop{background:#172019}.photo-viewer>img{object-fit:contain;max-height:100%;animation:viewer-photo-reveal 180ms ease-out both}.photo-viewer>img[hidden]{display:none}
.photo-viewer button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;border:1px solid #f7f2e82b;border-radius:24px;background:#f7f2e80d;color:inherit;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:12px/1.2 'Helvetica Neue',Arial,sans-serif}
.photo-viewer button:disabled{opacity:.3;cursor:default}.photo-viewer button[hidden]{display:none}.photo-viewer button:focus-visible{outline:2px solid #fff9eb;outline-offset:4px}
.photo-viewer .viewer-close{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));padding:4px 13px;gap:8px}.viewer-close span{margin:0;font-size:21px}
.viewer-count{position:absolute;left:20px;top:max(24px,calc(env(safe-area-inset-top) + 12px));margin:0;font:11px/1.4 'Helvetica Neue',Arial,sans-serif;letter-spacing:.12em;color:#e4e4d8}
.viewer-previous,.viewer-next{position:absolute;top:calc(50% - 22px);padding:0}.viewer-previous{left:max(12px,env(safe-area-inset-left))}.viewer-next{right:max(12px,env(safe-area-inset-right))}.viewer-previous span,.viewer-next span{font:300 30px/1 Georgia,serif;transform:translateY(-1px)}
.photo-viewer .viewer-description{font:italic 12px/1.45 Georgia,serif;bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));left:72px;right:72px;color:#e2e2d6}.viewer-state{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 100px);text-align:center;font:14px/1.6 Georgia,serif}.viewer-state[hidden]{display:none}
@keyframes viewer-photo-reveal{from{opacity:0;transform:scale(.994)}to{opacity:1;transform:none}}
@media(max-width:700px){.viewer-previous,.viewer-next{top:auto;bottom:max(12px,env(safe-area-inset-bottom))}}
@media(max-height:500px){.photo-viewer{padding-top:max(56px,calc(env(safe-area-inset-top) + 48px));padding-bottom:max(44px,calc(env(safe-area-inset-bottom) + 36px))}.photo-viewer .viewer-close{top:max(6px,env(safe-area-inset-top))}.viewer-count{top:max(20px,env(safe-area-inset-top))}.photo-viewer .viewer-description{bottom:max(10px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.photo-viewer[open],.photo-viewer>img{animation:none}}

/* Transform-only journey position; the native progress remains the no-JS fallback. */
.journey-tools progress[hidden]{display:none}
.journey-meter{display:block;height:2px;min-width:30px;width:72px;flex:1;background:#d7d9cf;overflow:hidden;contain:strict}
.journey-meter>span{display:block;width:100%;height:100%;background:#4e6342;transform:scaleX(0);transform-origin:left;will-change:transform}
/* Restore the clean light-ink opening/closing. Shadow follows glyphs, not a
   rectangle; photographs, scenery and the physical personal letter stay intact. */
body[data-axis=x] .opening-copy,body[data-axis=x] .ending-copy{
 color:#fffaf0;text-shadow:0 1px 3px #14200fe6,0 0 14px #14200f99;
}

/* Current outlined logo: original artwork/transparent canvas, natural ratio. */
.ending .wordmark{filter:none;text-shadow:none;box-shadow:none;height:auto}
.referral-cta{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:44px;margin-top:28px;padding:12px 18px;text-align:center;text-decoration:none;text-shadow:none;font:12px/1.5 'Helvetica Neue',Arial,sans-serif}
.ending-copy .referral-note{font:10px/1.5 'Helvetica Neue',Arial,sans-serif;margin:10px 0 0;max-width:270px}
/* Restrained monochrome control system; photograph frames are untouched. */
.unfold,.again,.referral-cta,.adaptive-review button,.photo-viewer button,.depth-toggle,.depth-strength select{
 background:#111;color:#fffaf0;border:1px solid #111;text-shadow:none;
}
.depth-toggle,.depth-strength select{border-radius:0;text-decoration:none}
.photo-viewer button{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(hover:hover){.unfold:hover,.again:hover,.referral-cta:hover,.adaptive-review button:hover,.photo-viewer button:not(:disabled):hover,.depth-toggle:not(:disabled):hover,.depth-strength select:not(:disabled):hover{background:#292929;border-color:#292929}}
.unfold:active,.again:active,.referral-cta:active,.adaptive-review button:active,.photo-viewer button:not(:disabled):active,.depth-toggle:not(:disabled):active{background:#000;border-color:#000}
.photo-viewer button:disabled,.depth-toggle:disabled,.depth-strength select:disabled{background:#363636;color:#e5e1d8;border-color:#363636;opacity:1;cursor:default}
.unfold:focus-visible,.again:focus-visible,.referral-cta:focus-visible,.adaptive-review button:focus-visible,.photo-viewer button:focus-visible,.depth-toggle:focus-visible,.depth-strength select:focus-visible{outline:2px solid #fffaf0;outline-offset:2px;box-shadow:0 0 0 5px #111}
.journey-tools{background:#f4efe5f5;color:#111}.journey-meter{background:#d5d1ca}.journey-meter>span{background:#111}.journey-tools progress{color:#111}.journey-tools progress::-webkit-progress-value{background:#111}.journey-tools progress::-moz-progress-bar{background:#111}
.adaptive-review{color:#111}.adaptive-review :is(select,summary):focus-visible{outline-color:#111}.skip-letter{color:#111}.journey:focus-visible{outline-color:#111}
@media(max-height:500px){.referral-cta{margin-top:18px}.ending-copy .referral-note{margin-top:8px}}

/* Supplied stock composition trial only: favour the candle in portrait crops.
   object-fit:cover preserves the source ratio; no raster change/filter. */
body[data-scenery=adobe-test] .continuous-master img{object-position:40% 50%}

/* Optional CSS-only atmospheric comparison; the same native depth layer moves. */
body:is([data-scenery=evergreen-test],[data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test]) .continuous-master{
 background-color:#102a24;
 background-image:radial-gradient(ellipse at 15% 38%,rgba(180,125,55,.17),transparent 48%),radial-gradient(ellipse at 76% 72%,rgba(165,112,47,.11),transparent 52%);
}
body:is([data-scenery=evergreen-test],[data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test]) .continuous-master img{visibility:hidden}

/* Personal opening only; the original first photograph is moved, never cloned. */
body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening-copy{width:49%;max-height:calc(100% - 240px)}
body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening h1{font-size:clamp(54px,7vw,94px)}
body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening>.memory{position:absolute;margin:0}
body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening>.memory a{display:block;height:100%;padding:5px}
body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening>.memory img{width:100%;height:auto}
@media(max-width:700px) and (min-height:521px){
 body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening{align-items:flex-start;padding-top:112px}
 body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening-copy{width:100%;max-height:calc(100% - 300px);padding-bottom:0}
 body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening h1{font-size:clamp(50px,14vw,68px)}
 body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening .eyebrow{margin-bottom:16px}
 body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .dedication{margin-top:18px}
}
@media(max-height:520px){body:is([data-scenery=evergreen-personal-test],[data-scenery=evergreen-atmosphere-test],[data-scenery=interior-evergreen-test]) .opening-copy{width:100%;max-height:calc(100% - 200px)}}

/* One continuous CSS environment spanning the existing native depth layer.
   Broad tones/ambient light never follow individual photographs or animate. */
body[data-scenery=evergreen-atmosphere-test] .continuous-master{
 background-color:#102a24;
 background-image:
  linear-gradient(to bottom,rgba(2,13,10,.25),transparent 30%,transparent 73%,rgba(2,13,10,.30)),
  radial-gradient(ellipse 24% 85% at 12% 40%,rgba(177,126,63,.13),transparent 100%),
  radial-gradient(ellipse 28% 95% at 54% 68%,rgba(162,119,63,.10),transparent 100%),
  radial-gradient(ellipse 23% 85% at 91% 46%,rgba(182,136,72,.12),transparent 100%),
  linear-gradient(100deg,#0d241f 0%,#19372b 22%,#102b26 44%,#1b352b 68%,#102b24 85%,#0d241e 100%);
}

/* Opt-in story conclusion occupies the complete viewport: no leftover letter
   fragment in the final composition. Other variants keep their exact widths. */
body:is([data-composition=story-test],[data-composition=story-v2]) .ending{width:100vw;justify-content:center}
body:is([data-composition=story-test],[data-composition=story-v2]) .ending-copy{width:min(100%,720px)}
body:is([data-composition=story-test],[data-composition=story-v2]) .ending .again{left:max(32px,calc((100vw - 720px)/2))}

/* V2 only: leave the personal opening intact. The remaining photographs have
   no frame or faux object treatment; their full native ratio travels through
   the viewport. A focused image rises above the shallow paired overlap. */
body[data-composition=story-v2] .photograph-field .memory a{padding:0;background:transparent;box-shadow:none;border-radius:0}
body[data-composition=story-v2] .photograph-field .memory img{width:100%;height:100%;object-fit:contain}
body[data-composition=story-v2] .photograph-field .memory:focus-within{z-index:3!important}

/* Original interior + one translucent evergreen layer, moving together with
   the existing depth picture. Source pixels are unchanged, never sharpened. */
#review-tint-control[hidden]{display:none}
body[data-scenery=interior-evergreen-test]{--interior-tint:.7}
body[data-scenery=interior-evergreen-test][data-tint="60"]{--interior-tint:.6}
body[data-scenery=interior-evergreen-test][data-tint="80"]{--interior-tint:.8}
body[data-scenery=interior-evergreen-test] .continuous-master::after{content:"";position:absolute;inset:0;background:#102a24;opacity:var(--interior-tint);pointer-events:none}
/* Keep the complete conclusion and CTA in one natural final viewport. Nested
   overflow remains available for accessibility text enlargement/short screens. */
body[data-scenery=interior-evergreen-test] .ending{
 width:100vw;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px;justify-items:start;
 padding-top:max(76px,calc(env(safe-area-inset-top) + 56px));
 padding-bottom:max(94px,calc(var(--depth-tools-height,44px) + 40px + env(safe-area-inset-bottom)));
}
body[data-scenery=interior-evergreen-test] .ending-copy{width:min(100%,720px);max-height:100%;padding-bottom:0;overflow-y:auto}
body[data-scenery=interior-evergreen-test] .ending .wordmark{width:105px;margin-top:24px}
body[data-scenery=interior-evergreen-test] .referral-cta{margin-top:24px}
body[data-scenery=interior-evergreen-test] .ending .again{position:static;max-width:100%;width:max-content;margin:0;align-self:end}
@media(max-width:700px){body[data-scenery=interior-evergreen-test] .ending .wordmark{width:90px}}
@media(max-height:500px){
 body[data-scenery=interior-evergreen-test] .ending{padding-top:58px;padding-bottom:70px;gap:8px}
 body[data-scenery=interior-evergreen-test] .ending .wordmark{width:69px;margin-top:12px}
 body[data-scenery=interior-evergreen-test] .referral-cta{margin-top:12px}
}
