/* V17: ink in the margins, a few souvenirs, and a little coastal air.
   Accent positions are separate from the draggable object's coordinates. */
.desktop-details { position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;color:#254857; }
.desktop-details *, .desktop-keepsake { box-sizing:border-box; }
.desktop-keepsake { position:absolute;z-index:4;pointer-events:none;user-select:none;color:#27485a; }
.desktop-keepsake svg { fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round; }
.detail-note-margin { left:16px;top:auto;bottom:-26px;width:157px;height:24px;transform:rotate(-4deg); }
.detail-note-margin>span { font:italic 16px/1.2 "Bradley Hand","Segoe Print",cursive;white-space:nowrap;text-shadow:0 1px #fff,0 0 5px #fff; }
.detail-note-margin svg { position:absolute;left:115px;top:-11px;width:47px;height:24px;transform:scaleY(-1); }
.detail-photo-tab { left:2px;bottom:-15px;height:17px;padding:3px 7px 3px 6px;color:#faf4df;background:#ad5a40;box-shadow:0 1px 1px #31566730;transform:rotate(7deg); }
.detail-photo-tab>span { display:block;white-space:nowrap;font:600 6px/10px ui-monospace,monospace;letter-spacing:1px; }
.detail-photo-tab>i { position:absolute;right:-4px;top:0;width:5px;height:17px;background:#7f3d2f;clip-path:polygon(0 0,100% 20%,70% 50%,100% 80%,0 100%); }
.detail-music-margin { left:39px;top:calc(100% + 8px);display:flex;align-items:center;gap:5px;transform:rotate(-5deg);white-space:nowrap; }
.detail-music-margin svg { width:25px;height:17px;stroke-width:1.1; }
.detail-music-margin>span { font:italic 14px/1.3 "Bradley Hand","Segoe Print",cursive;text-shadow:0 1px #fff,0 0 5px #fff; }
.coastal-gulls { position:absolute;left:7%;top:161px;width:145px;height:75px; }
.gull-route { position:absolute;inset:0;animation:coastal-gull-glide 29s ease-in-out infinite; }
.coastal-gull { position:absolute;width:52px;height:25px;overflow:visible;filter:drop-shadow(0 1px 0 #fff9); }
.coastal-gull.first { left:18px;top:0;transform:rotate(-7deg); }
.coastal-gull.second { left:83px;top:27px;width:31px;height:18px;transform:rotate(7deg);opacity:.75; }
.gull-wing { fill:#f4f6eb;stroke:#496979;stroke-width:1;stroke-linejoin:round;transform-box:fill-box;animation:coastal-wing 4s ease-in-out infinite; }
.gull-left { transform-origin:100% 100%; }.gull-right { transform-origin:0 100%;animation-direction:reverse; }
.second .gull-wing { animation-delay:-1.7s;animation-duration:4.6s; }
.gull-body { fill:none;stroke:#345869;stroke-width:1;stroke-linecap:round; }
.coastal-gulls>span { position:absolute;left:-10px;top:52px;font:italic 12px/1.1 "Bradley Hand","Segoe Print",cursive;transform:rotate(-6deg);white-space:nowrap; }
.coastal-postmark { position:absolute;left:18.7%;bottom:14%;width:72px;height:72px;transform:rotate(-13deg);color:#356879;opacity:.88; }
.postmark-ring { position:relative;width:65px;height:65px;border:1px solid currentColor;border-radius:50%;outline:1px dashed currentColor;outline-offset:3px;background:#dcece512; }
.postmark-ring>span { position:absolute;top:9px;left:0;right:0;text-align:center;font:600 6px/1.2 ui-monospace,monospace;letter-spacing:1px; }
.postmark-ring>svg { position:absolute;left:10px;top:20px;width:43px;height:25px;stroke:currentColor;stroke-width:1;fill:none; }
.postmark-ring>small { position:absolute;left:0;right:0;bottom:9px;text-align:center;font:500 4px/1 ui-monospace,monospace;letter-spacing:.35px; }
.coastal-postmark>i { position:absolute;right:-23px;top:25px;width:46px;height:18px;transform:rotate(4deg);background:repeating-linear-gradient(0deg,transparent 0 5px,#356879a0 5px 6px);clip-path:polygon(0 20%,100% 0,100% 80%,0 100%); }
.coastal-shell { position:absolute;left:22.1%;bottom:5.8%;width:62px;height:50px;transform:rotate(10deg); }
.coastal-shell>svg { width:53px;height:39px;filter:drop-shadow(1px 3px 2px #24435440); }
.shell-paper { fill:#f2e1c9;stroke:#a98066;stroke-width:1; }.shell-ink { fill:none;stroke:#b78a6d;stroke-width:1.2;stroke-linecap:round; }.shell-crease { fill:none;stroke:#fff9e9;stroke-width:1.1;stroke-linecap:round; }
.coastal-shell>span { position:absolute;top:40px;left:-10px;white-space:nowrap;font:italic 10px/1 Georgia,serif;color:#3d5c66; }
.desktop-buddy { position:absolute;left:12.5%;bottom:8.6%;width:136px;display:flex;align-items:center;gap:4px;transform:rotate(-4deg); }
.desktop-buddy-button { position:relative;pointer-events:auto;display:grid;place-items:center;flex:none;width:48px;height:48px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#214855;cursor:pointer;touch-action:manipulation; }
.desktop-buddy-button:focus-visible { outline:2px solid #325f74;outline-offset:3px;background:#f4f5e57a; }
.buddy-face { position:relative;display:block;width:43px;height:30px;transform:rotate(-2deg);transition:transform 160ms var(--shell-ease); }
.buddy-bracket { position:absolute;top:0;font:26px/29px Georgia,serif;font-style:normal; }.buddy-bracket.left { left:0;transform:rotate(6deg); }.buddy-bracket.right { right:0;transform:rotate(-6deg); }
.buddy-eye { position:absolute;top:10px;width:3px;height:5px;border-radius:50%;background:currentColor;animation:coastal-buddy-blink 6.4s linear infinite;transform-origin:50% 65%; }.buddy-eye.left { left:12px; }.buddy-eye.right { right:12px; }
.buddy-smile { position:absolute;top:17px;left:17px;width:9px;height:4px;border-bottom:1.5px solid currentColor;border-radius:0 0 50% 50%;transform:rotate(-4deg); }
.buddy-wave { position:absolute;right:-5px;top:4px;width:7px;height:15px;border-right:1.5px solid currentColor;border-radius:50%;transform:rotate(-12deg);opacity:0;transition:transform 160ms var(--shell-ease),opacity 160ms var(--shell-ease); }
.buddy-caption { max-width:88px;white-space:normal;font:italic 15px/1.04 "Bradley Hand","Segoe Print",cursive;letter-spacing:-.2px;text-shadow:0 1px #e4eeec; }
.desktop-buddy-button[aria-pressed="true"] .buddy-face { transform:rotate(8deg) translateY(-2px); }
.desktop-buddy-button[aria-pressed="true"] .buddy-wave { opacity:1;transform:rotate(18deg); }
.desktop-buddy-button[aria-pressed="true"] .buddy-eye.right { animation:none;transform:scaleY(.3); }
@media(hover:hover) and (pointer:fine) { .desktop-buddy-button:hover .buddy-face { transform:rotate(6deg) translateY(-1px); } }
@keyframes coastal-gull-glide { 0%,100% { transform:translate(0,0); } 50% { transform:translate(34px,-9px); } }
@keyframes coastal-wing { 0%,100% { transform:rotate(0); } 48% { transform:rotate(12deg) scaleY(.7); } }
@keyframes coastal-buddy-blink { 0%,45%,48%,100% { transform:scaleY(1); } 46%,47% { transform:scaleY(.1); } }
html[data-motion="paused"] .desktop-details *,
html[data-motion-preference="paused"] .desktop-details *,
html[data-visible="false"] .desktop-details *,
html[data-hero-visible="false"] .desktop-details * { animation-play-state:paused!important; }
@media(min-width:900px) and (max-width:1150px) {
 .coastal-gulls { left:5%;top:148px;transform:scale(.8);transform-origin:0 0; }
 .coastal-postmark { left:19%;bottom:15%;transform:rotate(-13deg) scale(.8); }
 .coastal-shell { left:25%;bottom:6%;transform:rotate(10deg) scale(.8); }
 .desktop-buddy { left:14%;bottom:8%; }
 .detail-note-margin>span { font-size:13px; }.detail-note-margin svg { left:84px; }
 .detail-music-margin { left:20px;top:calc(100% + 6px); }
}
@media(max-width:899px) {
 .coastal-gulls { left:15px;top:143px;width:100px;height:42px;transform:scale(.7);transform-origin:0 0; }
 .coastal-gulls>span,.coastal-postmark,.coastal-shell { display:none; }
 .desktop-buddy { left:calc(50% - 68px);bottom:101px;transform:rotate(-3deg); }
 .detail-note-margin { top:-25px;bottom:auto;left:14px;height:35px;transform:rotate(-6deg); }
 .detail-note-margin>span { font-size:13px; }.detail-note-margin svg { left:84px;top:8px;width:37px;transform:none; }
 .detail-music-margin { left:42px;top:calc(100% + 10px); }
 .detail-photo-tab { bottom:-14px; }
}
@media(prefers-reduced-motion:reduce) {
 .desktop-details * { animation:none!important; }
 .buddy-face,.buddy-wave { transition:none; }
}