:root {
  --red: #c9133e;
  --red-bright: #f02658;
  --oxblood: #590817;
  --ink: #17090d;
  --cream: #fff7e8;
  --gold: #e2b970;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--cream);
  background: radial-gradient(circle at 50% 0%, #761024 0, var(--ink) 48rem);
  font-family: "DM Sans", sans-serif;
  forced-color-adjust: none;
}
button, a { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 50; background: white; color: black; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header { position:relative; z-index:20; display:grid; grid-template-columns:auto minmax(180px,1fr) auto; align-items:center; gap:clamp(1rem,3vw,2.4rem); min-height:106px; padding:1rem max(1.25rem,calc((100vw - 1180px)/2)); border-bottom:3px solid var(--red); background:linear-gradient(105deg,#21050c 0%,#65091d 50%,#26050e 100%); box-shadow:0 12px 35px rgba(0,0,0,.35); }
.site-logo { display:flex; align-items:center; min-width:300px; padding:.35rem .5rem; color:white; text-decoration:none; transform:skew(-4deg); }
.site-logo__main { color:#ef1736; font:italic 700 1.8rem/.95 "Oswald",sans-serif; letter-spacing:-.035em; text-transform:uppercase; white-space:nowrap; }
.site-logo__main b { font-size:1.2em; line-height:.8; }
.site-logo__life { display:block; width:4.35rem; height:3.4rem; margin-left:-.15rem; object-fit:contain; transform:rotate(-4deg); }
.explore-copy { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.explore-copy strong { font:italic 700 clamp(1.25rem,2.2vw,1.75rem)/1.1 "Playfair Display",serif; }
.explore-copy span { color:#efcbd4; font-size:.78rem; }

.garden-shell { position:relative; width:100%; overflow:auto; scrollbar-color:var(--red) #16080c; }
.garden-stage { position: relative; width: min(100vw, 1024px); min-width: 620px; margin: 0 auto; aspect-ratio: 2 / 3; overflow: hidden; box-shadow: 0 0 80px rgba(0,0,0,.65); }
.garden-art { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; user-select: none; }
.garden-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(20,0,8,.18); }

.hotspot { position: absolute; z-index: 5; left: var(--x); top: var(--y); width: 2.15rem; height: 2.15rem; transform: translate(-50%,-50%); border: 0; border-radius: 50%; color: white; background: rgba(182,6,43,.28); box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 0 7px rgba(211,19,62,.38), 0 0 22px 8px rgba(240,38,88,.68); cursor: pointer; animation: breathe 2.4s ease-in-out infinite; }
.hotspot::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: var(--red-bright); box-shadow: inset 0 1px 2px rgba(255,255,255,.55); }
.hotspot span { position: absolute; left: 50%; bottom: calc(100% + .75rem); transform: translateX(-50%) translateY(5px); width: max-content; max-width: 12rem; padding: .42rem .65rem; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; color: white; background: rgba(44,3,12,.92); box-shadow: 0 8px 25px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: .18s ease; font-size: .77rem; font-weight: 700; letter-spacing: .04em; }
.hotspot:hover, .hotspot:focus-visible { z-index: 8; outline: none; transform: translate(-50%,-50%) scale(1.16); }
.hotspot:hover span, .hotspot:focus-visible span { opacity: 1; transform: translateX(-50%) translateY(0); }
.hotspot--lawn { width: 2.45rem; height: 2.45rem; }
@keyframes breathe { 50% { box-shadow: 0 0 0 2px white, 0 0 0 11px rgba(211,19,62,.15), 0 0 30px 11px rgba(240,38,88,.62); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }

.quick-nav { display:flex; gap:.15rem; padding:.3rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(35,4,11,.72); }
.quick-nav a, .quick-nav button { border: 0; border-radius: 999px; padding: .58rem .8rem; color: #f9dfe5; background: transparent; text-decoration: none; cursor: pointer; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.quick-nav a:hover, .quick-nav button:hover, .quick-nav a:focus-visible, .quick-nav button:focus-visible { color: white; background: var(--red); outline: none; }
.quick-nav .sound-toggle { display:inline-flex; align-items:center; gap:.3rem; border:1px solid rgba(255,255,255,.18); }
.quick-nav .sound-toggle span { display:grid; place-items:center; width:1.15rem; height:1.15rem; border-radius:50%; color:#5b0714; background:#f7d98c; font-size:.7rem; }
.quick-nav .sound-toggle[aria-pressed="true"] { color:white; background:linear-gradient(135deg,#c9133e,#7d0923); }
.quick-nav .sound-toggle[aria-pressed="true"] span { animation:sound-pulse 1.5s ease-in-out infinite; }
@keyframes sound-pulse { 50%{transform:scale(1.13);box-shadow:0 0 9px rgba(247,217,140,.75)} }

.rebecca-guide { position:absolute; z-index:7; left:84%; top:57%; width:9.5%; aspect-ratio:1; pointer-events:none; filter:drop-shadow(0 5px 3px rgba(0,0,0,.52)); transform:translate(-50%,-88%); will-change:left,top; }
.rebecca-sprite { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }

.story-card { width: min(92vw, 670px); max-height: min(82svh, 780px); border: 1px solid rgba(255,255,255,.22); border-radius: 22px; padding: 0; color: var(--ink); background: #fff9ee; box-shadow: 0 25px 100px rgba(0,0,0,.72); overflow: auto; }
.story-card::backdrop { background: rgba(18,2,7,.75); backdrop-filter: blur(8px); }
.story-card__close { position: sticky; z-index: 2; float: right; top: .85rem; margin: .85rem .85rem -3.5rem 0; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; color: white; background: var(--oxblood); cursor: pointer; font-size: 1.7rem; line-height: 1; }
.card-content { padding: clamp(1.5rem, 5vw, 3rem); }
.card-kicker { color: var(--red); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; font-weight: 700; }
.card-content h2 { margin: .25rem 3rem 1.1rem 0; color: var(--oxblood); font: italic 700 clamp(2rem, 6vw, 3.2rem)/1 "Playfair Display",serif; }
.card-content p { color: #3e2c30; line-height: 1.65; }
.card-content p:first-of-type { font-size: 1.08rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.card-actions a { display: inline-flex; align-items: center; min-height: 2.8rem; padding: .65rem 1rem; border-radius: 999px; color: white; background: var(--red); text-decoration: none; font-weight: 700; }
.card-actions a:hover { background: var(--oxblood); }
.panel-gallery { display:grid; grid-template-columns:1.15fr .85fr; gap:.75rem; margin:0 0 1.5rem; }
.panel-gallery img { display:block; width:100%; height:210px; border-radius:14px; object-fit:cover; }
.panel-gallery img:first-child { object-position:center 28%; }
.panel-feature-image { display:block; width:100%; height:min(42vw,290px); margin:0 0 1.3rem; border-radius:16px; object-fit:cover; object-position:center 10%; }
.contact-email { display:inline-block; margin:.15rem 0 1.5rem; color:var(--red); font-weight:700; word-break:break-word; }
.contact-form { display:grid; gap:.85rem; padding:1.1rem; border:1px solid #ead8c6; border-radius:16px; background:#fff; }
.contact-form label { display:grid; gap:.35rem; color:#522331; font-size:.78rem; font-weight:700; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid #d8bdc4; border-radius:9px; padding:.75rem; color:#241016; background:#fffaf6; font:inherit; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--red); outline:3px solid rgba(201,19,62,.13); }
.contact-form button { justify-self:start; border:0; border-radius:999px; padding:.8rem 1.1rem; color:white; background:var(--red); cursor:pointer; font-weight:700; }
.contact-form button:hover { background:var(--oxblood); }
.contact-form small { color:#806a70; line-height:1.45; }
.serenity-ad { position:fixed; z-index:24; left:max(.75rem,env(safe-area-inset-left)); bottom:max(.75rem,env(safe-area-inset-bottom)); width:min(350px,calc(100vw - 1.5rem)); overflow:hidden; border:1px solid rgba(255,255,255,.3); border-radius:17px; background:#fff8ec; box-shadow:0 18px 55px rgba(20,0,7,.55); animation:serenity-arrive .55s ease-out both; }
.serenity-ad__link { display:grid; grid-template-columns:105px 1fr; min-height:126px; color:#291018; text-decoration:none; }
.serenity-ad__link > img { display:block; width:100%; height:100%; min-height:126px; object-fit:cover; object-position:center 35%; }
.serenity-ad__copy { display:flex; flex-direction:column; justify-content:center; gap:.28rem; padding:.85rem .9rem; }
.serenity-ad__copy small { color:var(--red); font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.serenity-ad__copy strong { font:italic 700 1.12rem/1.08 "Playfair Display",serif; }
.serenity-ad__copy b { color:var(--red); font-size:.7rem; }
.serenity-ad:hover { transform:translateY(-2px); box-shadow:0 22px 65px rgba(20,0,7,.62); }
@keyframes serenity-arrive { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem max(1rem, calc((100vw - 1024px)/2)); color: #cfa8b1; background: #11070a; font-size: .75rem; }

@media (max-width: 680px) {
  .site-header { grid-template-columns:1fr auto; gap:.7rem; min-height:auto; padding:.75rem; }
  .site-logo { min-width:235px; transform:skew(-3deg) scale(.9); transform-origin:left center; }
  .site-logo__main { font-size:1.45rem; }
  .site-logo__life { width:3.75rem; height:3rem; }
  .explore-copy { text-align:right; }
  .explore-copy strong { font-size:1.05rem; }
  .desktop-note { display:none; }
  .quick-nav { grid-column:1 / -1; max-width:100%; overflow-x:auto; justify-content:flex-start; }
  .garden-stage { min-width: 560px; margin: 0; }
  .quick-nav a, .quick-nav button { padding-inline: .68rem; }
  .panel-gallery { grid-template-columns:1fr 1fr; }
  .panel-gallery img { height:150px; }
  .serenity-ad { width:min(320px,calc(100vw - 1.25rem)); }
  .serenity-ad__link { grid-template-columns:90px 1fr; min-height:112px; }
  .serenity-ad__link > img { min-height:112px; }
  .serenity-ad__copy strong { font-size:1rem; }
  footer { flex-direction: column; padding-bottom: 5rem; }
}