/* Aga English — shared brand tokens and components.
   Extracted from Final-brand-guidelines.html. Link this file (plus fonts/fonts.css)
   from any page built to the brand, instead of re-declaring the palette. */

:root{
  --blossom:#F589AD;
  --blossom-deep:#E85C8C;
  --blossom-soft:#FFD9E6;
  --fairy:#B870DB;
  --fairy-soft:#EBD6F7;
  --sunbeam:#FBD76A;
  --glitter:#FFC94D;
  --mint:#85E0C2;
  --mint-deep:#3FA37B;
  --sky:#7DC4E8;
  --coral:#F08A75;
  --cloud:#FFF9FC;
  --cloud-2:#FDF1F6;
  --plum:#4A2038;
  --plum-soft:#8A5C73;

  --display:'Grandstander',system-ui,sans-serif;
  --script:'Grand Hotel',cursive;
  --body:'Quicksand',system-ui,sans-serif;
  --hand:'Caveat',cursive;
  /* Quote font: Railey (Type Fairy) was the brief, but it's personal-use-only until a
     commercial licence is bought, and it isn't a Google Font so it can't be self-hosted under
     the SIL OFL like the rest of this set. Using Caveat instead — the same face already used
     under every photo caption, so quotes read as part of the same handwritten voice. */
  --quote:'Caveat',cursive;
}

/* ——— glitter texture, reusable on any relative-positioned wrapper ——— */
.glitter{position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 1.6px),
    radial-gradient(circle, var(--glitter) 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.7) .9px, transparent 1.5px);
  background-size:70px 58px, 113px 91px, 47px 79px;
  background-position:0 0, 23px 31px, 47px 11px;
  opacity:.55;animation:ageng-shimmer 6s ease-in-out infinite}
@keyframes ageng-shimmer{0%,100%{opacity:.38}50%{opacity:.72}}
@media (prefers-reduced-motion:reduce){.glitter{animation:none;opacity:.5}}

small.cap{display:block;font-family:var(--hand);font-size:19px;color:var(--plum-soft);margin-top:12px}

/* ——— photo frames ——— */
/* 1. glow frame (Stardust) — an actual soft radiance around the photo, gently pulsing */
.glowframe{position:relative}
.glowframe img{display:block;width:100%;height:100%;object-fit:cover;border-radius:24px;
  filter:saturate(1.08) brightness(1.04);
  box-shadow:
    0 0 0 5px #fff,
    0 0 24px 6px rgba(255,196,77,.55),
    0 0 55px 20px rgba(255,214,120,.4),
    0 0 90px 34px rgba(255,224,150,.22);
  animation:ageng-glowpulse 3.4s ease-in-out infinite}
@keyframes ageng-glowpulse{
  0%,100%{box-shadow:0 0 0 5px #fff, 0 0 24px 6px rgba(255,196,77,.5), 0 0 55px 20px rgba(255,214,120,.35), 0 0 90px 34px rgba(255,224,150,.18)}
  50%{box-shadow:0 0 0 5px #fff, 0 0 32px 10px rgba(255,196,77,.8), 0 0 70px 28px rgba(255,214,120,.5), 0 0 110px 42px rgba(255,224,150,.3)}
}
@media (prefers-reduced-motion:reduce){.glowframe img{animation:none}}

/* 2. star corners (Stardust) */
.starcorner{padding:14px;position:relative}
.starcorner img{border-radius:18px;display:block;width:100%;height:100%;object-fit:cover}
.starcorner .c{position:absolute;width:76px;height:76px}
.starcorner .tl{top:0;left:0}
.starcorner .br{bottom:0;right:0;transform:rotate(180deg)}

/* 3. storybook arch (Stardust) */
.archframe{border-radius:120px 120px 24px 24px;overflow:hidden;position:relative;
  box-shadow:0 0 0 5px #fff, 0 0 0 9px var(--sunbeam), 0 14px 32px -12px rgba(184,112,219,.45)}
.archframe img{display:block;width:100%;height:100%;object-fit:cover}

/* 4. flower ring (Fairy-Tale, recoloured) */
.flowerframe{position:relative}
.flowerframe img{border-radius:50%;display:block;width:100%;height:100%;object-fit:cover;
  box-shadow:0 0 0 6px #fff,0 0 0 10px var(--blossom-soft)}
.flowerframe svg{position:absolute;top:0;left:0;width:100%;height:100%}

/* 5. corner sprigs (Fairy-Tale, recoloured) */
.sprig{position:relative;padding:16px}
.sprig img{border-radius:20px;display:block;width:100%;height:100%;object-fit:cover;box-shadow:0 8px 22px -12px rgba(75,46,69,.5)}
.sprig .c{position:absolute;width:88px;height:88px}
.sprig .tl{top:-4px;left:-4px}
.sprig .br{bottom:-4px;right:-4px;transform:rotate(180deg)}

/* 6. polaroid + washi tape (Polaroid) */
.polaroid{background:#fff;padding:12px 12px 44px;border-radius:4px;display:inline-block;
  box-shadow:0 10px 26px -10px rgba(74,32,56,.5);position:relative}
.polaroid img{display:block;width:100%;height:auto;object-fit:cover}
.polaroid .cap{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--hand);
  font-size:19px;color:var(--plum);line-height:1.15;padding:0 8px}
.polaroid .tape{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:96px;height:26px;background:rgba(255,201,77,.75);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.polaroid .tape.pink{background:rgba(245,137,173,.65)}
.polaroid .tape.mint{background:rgba(133,224,194,.65)}
.tilt-l{transform:rotate(-3deg)}.tilt-r{transform:rotate(2.5deg)}.tilt-r2{transform:rotate(4deg)}

/* 7. film strip (Polaroid) */
.filmstrip{display:flex;gap:3px;background:var(--plum);border-radius:14px;padding:10px;overflow:hidden}
.filmstrip .frame{position:relative;flex:1;aspect-ratio:1/1;background:var(--plum)}
.filmstrip .frame img{width:100%;height:100%;object-fit:cover;display:block}
.filmstrip .hole{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cloud);top:4px}
.filmstrip .hole.l{left:2px}.filmstrip .hole.r{right:2px}
.filmstrip .hole.b{top:auto;bottom:4px}

/* ——— dividers ——— */
.stardiv{display:block;width:100%;height:26px}
.flowerdiv{display:block;width:100%;height:34px}

/* ——— pull quote, book interior ——— */
.pull{padding:16px 18px 16px 20px;border-radius:18px;background:var(--cloud-2);
  border-left:6px solid var(--sunbeam);font-family:var(--script);font-size:22px;color:var(--blossom-deep);line-height:1.35}