/* ==============================
   Design tokens
   ============================== */
:root{
  --color-bg: #e1e8f0; /* Azureish White */
  --color-text: #1a1a1a; /* Ink */
  --color-accent: #D16D86; /* Rose */
  --color-muted: #f2f3f5; /* Mist */
  --color-gold: #C5A572;  /* Champagne */

  /* Type scale (fluid modular) */
  --step--1: clamp(.80rem, .75rem + .3vw, .9rem);
  --step-0: clamp(1.00rem, .95rem + .4vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + .8vw, 1.45rem);
  --step-2: clamp(1.55rem, 1.3rem + 1.2vw, 1.85rem);
  --step-3: clamp(1.95rem, 1.6rem + 1.6vw, 2.35rem);
  --step-4: clamp(2.45rem, 1.9rem + 2.2vw, 3.00rem);
  --step-5: clamp(3.05rem, 2.2rem + 3vw, 3.8rem);
  --step-6: clamp(3.8rem, 2.6rem + 4vw, 4.8rem);

  --radius: 16px;
  --shadow: 0 2px 14px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --shadow-soft: 0 1px 8px rgba(0,0,0,.06);
  --focus: 0 0 0 3px color-mix(in oklab, var(--color-accent) 40%, white);
  --note-rotation-max: 4deg;
  --note-offset-max: 16px;
  --min-spacing: 12px;
}

@font-face{
  font-family:"Mandalina Classical Script";
  src: url("/assets/fonts/MandalinaClassicalScript.woff2") format("woff2"),
       url("/assets/fonts/MandalinaClassicalScript.woff") format("woff");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face{
  font-family:"Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

html,body{height:100%}
html{
  background: var(--color-bg);
  color: var(--color-text);
}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{line-height:1.1;letter-spacing:-.01em}
h1{font-size: var(--step-4);} /* H1 two steps larger than H2 */
h2{font-size: var(--step-2);}
p{font-size:var(--step-0)}

.btn{
  font: inherit;
  background: var(--color-text);
  color: white;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.05rem;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.btn.primary{background: var(--color-accent);}
.btn:focus-visible{outline: none; box-shadow: var(--focus);}
.btn:active{transform: translateY(1px)}

.hero{
  padding: clamp(1.5rem, 2vw, 2.5rem);
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in oklab, var(--color-accent) 10%, transparent), transparent),
    radial-gradient(800px 400px at 10% 0%, color-mix(in oklab, var(--color-gold) 18%, transparent), transparent);
  isolation:isolate;
}
.hero-bg::before{
  content:"";
  position:absolute;inset:-10%;
  background:
    radial-gradient(50% 60% at 40% 10%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(60% 40% at 70% 0%, rgba(255,255,255,.7), transparent 70%);
  pointer-events:none;z-index:-1;
}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.08;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0, rgba(0,0,0,.03) 1px, transparent 1px, transparent 2px),
                    repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0, rgba(0,0,0,.02) 1px, transparent 1px, transparent 2px);
}

.title{margin: 0; text-wrap: balance}
.hero-actions{display:flex; gap:.75rem; align-items:center; justify-content:center; margin-top:1rem}
.playing-dot{width:10px;height:10px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 0 rgba(209,109,134,.7);animation:pulse 1.8s infinite}
.playing-dot[hidden]{display:none}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(209,109,134,.7)} 70%{box-shadow:0 0 0 10px rgba(209,109,134,0)} 100%{box-shadow:0 0 0 0 rgba(209,109,134,0)} }
@media (prefers-reduced-motion: reduce){
  .playing-dot{animation:none}
}

.ampersand{
  position:absolute; right: clamp(1rem, 4vw, 3rem); top: clamp(1rem, 4vw, 3rem);
  font-size: var(--step-4);
  background: transparent; border: 0; color: var(--color-accent); cursor: pointer;
  line-height:1; padding:.25rem .45rem; border-radius:.5rem;
}
.ampersand:focus-visible{box-shadow: var(--focus); outline: none}

.hero-roses{
  position:absolute; inset:auto 0 0 0; max-width: min(820px, 95%); margin-inline:auto; opacity:.45; filter: saturate(1.05);
}

.main{padding: clamp(1rem, 3vw, 2rem)}

.notes-wrap{position:relative}
.notes{
  position:relative;
  min-height: 60dvh;
  background: linear-gradient(to bottom, color-mix(in oklab, white 70%, var(--color-bg)), transparent 60%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: clamp(12px, 2vw, 18px);
}

.notes--columns{
  display:block;
  column-width: 16rem;
  column-gap: 1rem;
}
.note{
  position:absolute;
  display:inline-block;
  padding:.5rem .75rem;
  border-radius: .75rem;
  background: var(--color-muted);
  box-shadow: var(--shadow-soft);
  transform: translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0deg));
  will-change: transform, left, top;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  font-family: "Mandalina Classical Script","Great Vibes","Parisienne","Allura",cursive;
  font-size: var(--step-2);
}
.notes--columns .note{position:static; display:inline-block; margin:.5rem .5rem; transform: rotate(var(--rot,0deg));}

.note:focus-visible{outline:none; box-shadow: var(--focus);}

.love-note-wrap{display:grid;place-items:center;margin:clamp(1.5rem,3vw,2rem) 0}
.love-note{
  position:relative;
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-muted) 65%, white), white);
  border: 1px solid color-mix(in oklab, var(--color-gold) 40%, white);
  text-align:center;
}
.love-note .flourish{
  font-family: "Mandalina Classical Script","Great Vibes","Parisienne","Allura",cursive;
  font-size: var(--step-3);
  margin:0;
}
.love-note .pin{
  position:absolute; top:.5rem; right:.5rem; background:transparent; border:0; color: var(--color-gold); cursor:pointer;
}
.love-note .pin:focus-visible{box-shadow: var(--focus); border-radius:.5rem; outline:none}

.decor{position:relative;display:grid;place-items:center;margin:2rem 0}
.hands-pic{max-width:min(720px, 92%);border-radius:var(--radius);overflow:hidden;box-shadow: var(--shadow-soft)}
.hands-egg{
  position:absolute; right: 6%; bottom: 8%; background: white; border:1px solid #ddd; border-radius: 999px; padding:.25rem; cursor:pointer
}
.hands-egg:focus-visible{box-shadow: var(--focus); outline:none}

.footer{display:flex;justify-content:space-between;align-items:center;padding:1rem;color:#555}
.ring-zone{display:flex;align-items:center;gap:.5rem}
.ring{color: var(--color-gold);}
.ring-zone:focus-within .ring-hint{display:inline}
.ring-hint{font-size: .9rem; color:#666}

dialog{
  border:0; border-radius: calc(var(--radius) + 4px); padding: 0; box-shadow: var(--shadow);
  width:min(560px, 92%);
}
dialog .dialog-inner{padding:1rem 1.25rem 1.25rem}
dialog::backdrop{background: color-mix(in oklab, black 20%, transparent); backdrop-filter: blur(3px)}
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))){
  dialog::backdrop{background: rgba(0,0,0,.35)}
}
dialog h2{font-size: var(--step-2); margin: .5rem 0}
dialog p{font-size: var(--step-0);}
dialog form .close{position:absolute; right:.5rem; top:.5rem; border:0; background:transparent; font-size:1.1rem; cursor:pointer}
.dialog-pic{display:block;margin-top:.75rem;border-radius:12px;overflow:hidden}

.toast{
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem;
  background: var(--color-text); color: white; padding:.5rem .75rem; border-radius: .75rem;
  box-shadow: var(--shadow); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
}
.toast.show{opacity:1; transform: translate(-50%, -8px)}

:focus-visible{outline: none; box-shadow: var(--focus)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .note{transition: none !important; transform: none !important}
  .ampersand, .hero-roses{transition:none !important}
}

/* Safe-area + dvh fallback */
:root{--vh:1vh}
.full-height{min-height: calc(var(--vh) * 100)}