:root { --paper:#f4f0e8; --ink:#28251f; --soft:#655c52; --gold:#92713e; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; min-height:100%; }
body { background:var(--paper); color:var(--ink); font-family:Georgia,'Times New Roman',serif; overflow-x:hidden; }
.sda {
  cursor:default; width:100%; min-height:100vh; min-height:100svh; height:100vh; height:100svh;
  position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%;
}
.sda-paper { position:absolute; inset:0; z-index:-3; background:radial-gradient(ellipse 48% 52% at 49% 47%,#fcf9f1 4%,#f4f0e8 69%,#eae4db 145%); pointer-events:none; }
.sda-orbit { position:absolute; inset:0; display:block; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.88; }
.sda-heart {
  position:absolute; width:min(62vw,640px); height:auto; max-height:83vh; max-height:83svh;
  left:50%; top:47%; transform:translate(-50%,-50%); z-index:-2;
  object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none;
  filter:saturate(1.13) contrast(1.045) drop-shadow(0 0 27px rgba(174,142,75,.14));
  animation:sda-breathe 11s ease-in-out infinite alternate;
}
.sda-vignette { position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(to bottom,rgba(247,243,235,.04) 42%,rgba(247,243,235,.78) 76%,rgba(247,243,235,.95) 100%); }
.sda-content {
  position:absolute; bottom:clamp(64px,11.5vh,132px); left:50%; transform:translateX(-50%);
  z-index:2; width:min(92%,850px); text-align:center; text-shadow:0 1px 8px rgba(249,247,241,.6);
  animation:sda-appear 1.7s ease both; pointer-events:none;
}
.sda-eyebrow { margin:0 0 13px; color:#786c5c; font:500 clamp(10px,1vw,12px)/1.45 system-ui,-apple-system,sans-serif; letter-spacing:.27em; }
.sda h1 { font-size:clamp(39px,6vw,77px); font-weight:400; letter-spacing:-.045em; line-height:1.07; margin:0 0 11px; }
.sda-phrase { font-size:clamp(19px,2.15vw,31px); line-height:1.3; font-style:italic; color:#544a3d; margin:0 0 13px; }
.sda-subline { font:400 clamp(12px,1.16vw,15px)/1.5 system-ui,-apple-system,sans-serif; color:#70675a; letter-spacing:.025em; margin:0; }
.sda-line { width:51px; height:1px; margin:19px auto 12px; background:#ad8c58; }
.sda-soon { font:500 10px/1.4 system-ui,-apple-system,sans-serif; color:#60574e; letter-spacing:.22em; text-transform:uppercase; margin:0; }
.sda-credit { position:absolute; bottom:17px; left:clamp(17px,3.4vw,48px); z-index:2; margin:0; color:#857b6e; font:400 10px/1.4 system-ui,-apple-system,sans-serif; letter-spacing:.035em; pointer-events:none; }
.sda-credit cite { font-style:italic; }
@keyframes sda-breathe { from { transform:translate(-50%,-50%) scale(.98); filter:saturate(1.11) contrast(1.04); } to { transform:translate(-50%,-50%) scale(1.022); filter:saturate(1.25) contrast(1.065); } }
@keyframes sda-appear { from { opacity:0; transform:translate(-50%,10px); } to { opacity:1; transform:translate(-50%,0); } }
/* Mobile portrait: artwork and editorial text have separate visual territories. */
@media (max-width:720px) and (orientation:portrait) {
  .sda-heart { width:min(88vw,390px); max-height:55vh; max-height:55svh; top:35%; }
  .sda-vignette { background:linear-gradient(to bottom,rgba(247,243,235,.02) 24%,rgba(247,243,235,.13) 43%,rgba(247,243,235,.90) 66%,#f4f0e8 93%); }
  .sda-content { bottom:calc(45px + env(safe-area-inset-bottom,0px)); width:calc(100% - 36px); }
  .sda-eyebrow { font-size:10px; margin-bottom:10px; letter-spacing:.16em; }
  .sda h1 { font-size:clamp(34px,10vw,51px); line-height:1.08; margin-bottom:8px; }
  .sda-phrase { font-size:clamp(17px,4.8vw,22px); line-height:1.25; margin-bottom:8px; }
  .sda-subline { font-size:12px; line-height:1.4; }
  .sda-line { margin:12px auto 10px; }
  .sda-credit { left:12px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); font-size:9px; }
}
/* Short smartphones, compact portrait (including 320×568). */
@media (max-width:720px) and (orientation:portrait) and (max-height:650px) {
  .sda-heart { width:min(77vw,330px); max-height:49svh; top:31%; }
  .sda-content { bottom:calc(31px + env(safe-area-inset-bottom,0px)); }
  .sda-eyebrow { font-size:9px; margin-bottom:7px; }
  .sda h1 { font-size:clamp(29px,9vw,42px); margin-bottom:6px; }
  .sda-phrase { font-size:clamp(15px,4.5vw,19px); margin-bottom:5px; }
  .sda-subline { font-size:11px; }
  .sda-line { margin:8px auto 7px; }
  .sda-soon { font-size:9px; }
  .sda-credit {font-size:8px; bottom:calc(5px + env(safe-area-inset-bottom,0px));}
}
/* Landscape mobile: horizontal composition, readable and without clipping. */
@media (max-height:500px) and (orientation:landscape) {
  .sda { min-height:320px; height:100vh; height:100svh; }
  .sda-heart { left:32%; top:49%; width:min(33vw,350px); max-height:90svh; }
  .sda-vignette { background:linear-gradient(to right,rgba(247,243,235,.04) 25%,rgba(247,243,235,.7) 56%,#f4f0e8 89%); }
  .sda-content { bottom:auto; top:47%; left:76%; transform:translate(-50%,-50%); width:43%; text-align:center; animation:none; }
  .sda h1 { font-size:clamp(26px,4.9vw,44px); }
  .sda-phrase { font-size:clamp(14px,2.2vw,20px); }
  .sda-subline {font-size:11px;}
  .sda-eyebrow {font-size:9px;margin-bottom:8px;}
  .sda-line {margin:10px auto 7px;}
  .sda-credit {font-size:8px;bottom:7px;left:12px;}
}
/* Accessibility: motion reduction applies to both canvas and CSS animations. */
@media (prefers-reduced-motion:reduce) { .sda-heart,.sda-content { animation:none!important; } .sda-orbit { opacity:.58; } }
body.sda-still .sda-heart, body.sda-still .sda-content {animation:none!important;}