/* zanitabuchanan.com — Heartprint
   Palette and type carried over from the printed program: lavender ground, plum ink, violet, gold, daffodil. */

@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:italic;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/eb-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(fonts/eb-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Pinyon Script";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/pinyon-script-latin-400-normal.woff2) format("woff2")}

:root{
  --veil:#f4eefb;        /* lavender ground */
  --veil-deep:#e9dff6;   /* lavender at the edges */
  --pearl:#fffdf8;       /* paper, cards */
  --plum:#3b2754;        /* ink */
  --plum-soft:#5a476e;   /* secondary ink */
  --violet:#5d3f8a;      /* headings, links */
  --wisteria:#9b85cc;    /* quiet lines */
  --gold:#b8924a;
  --gold-deep:#8a6a2f;
  --gold-light:#e9d6a0;
  --daffodil:#f2c94c;
  --sage:#7f8f68;
  --gold-grad:linear-gradient(135deg,#c9a45c 0%,#b8924a 35%,#e9d6a0 52%,#b8924a 70%,#8a6a2f 100%);
  --display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --text:"EB Garamond",Garamond,"Times New Roman",serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --measure:34rem;
  --step--1:clamp(.92rem,.88rem + .15vw,1rem);
  --step-0:clamp(1.12rem,1.06rem + .28vw,1.3rem);
  --step-1:clamp(1.35rem,1.2rem + .6vw,1.75rem);
  --step-2:clamp(1.7rem,1.4rem + 1.3vw,2.6rem);
  --step-3:clamp(2.2rem,1.6rem + 2.6vw,4rem);
  --step-4:clamp(2.6rem,1.6rem + 4.2vw,5.6rem);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--veil);color:var(--plum);font-family:var(--text);font-size:var(--step-0);line-height:1.62;
  font-kerning:normal;font-variant-ligatures:common-ligatures;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-decoration-color:color-mix(in srgb,var(--gold) 70%,transparent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--plum);text-decoration-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-3rem;z-index:100;background:var(--pearl);padding:.5rem 1rem;border-radius:999px;transition:top .2s}
.skip:focus{top:1rem}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--violet);line-height:1.08;margin:0;letter-spacing:.005em}

/* ------------------------------------------------------------------ navigation */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:center;padding:.7rem 1rem;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
.nav-inner{pointer-events:auto;display:flex;align-items:center;gap:.25rem;padding:.35rem .45rem .35rem .8rem;border-radius:999px;
  background:color-mix(in srgb,var(--pearl) 78%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px -18px rgba(59,39,84,.45);border:1px solid color-mix(in srgb,var(--gold) 28%,transparent)}
.nav-home{display:flex;align-items:center;gap:.45rem;color:var(--plum);text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.15rem;margin-right:.35rem}
.nav-home svg{width:24px;height:22px;color:var(--gold)}
.nav a.link{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--plum-soft);text-decoration:none;padding:.35rem .7rem;border-radius:999px}
.nav a.link:hover,.nav a.link[aria-current="true"]{color:var(--violet);background:color-mix(in srgb,var(--veil-deep) 70%,transparent)}
.nav a.share{background:var(--violet);color:var(--pearl);margin-left:.2rem}
.nav a.share:hover{background:var(--plum);color:var(--pearl)}
.nav.is-hidden{transform:translateY(-130%);opacity:0}
.menu-btn{display:none}
@media (max-width:860px){
  .nav-inner{padding:.3rem .3rem .3rem .75rem}
  .nav a.link{display:none}
  .nav a.share{display:inline-block;padding:.35rem .8rem}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:999px;border:0;background:transparent;color:var(--violet);cursor:pointer}
  .menu-btn svg{width:22px;height:22px}
  .nav.open .nav-inner{flex-wrap:wrap;border-radius:1.4rem;max-width:22rem;padding:.6rem}
  .nav.open a.link{display:block;width:100%;padding:.55rem .8rem;font-size:1.15rem}
}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:max(100svh,640px);overflow:hidden;isolation:isolate;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 42%,#fffdf8 0%,#fbf6ff 34%,var(--veil) 62%,var(--veil-deep) 100%)}
.hero-stage{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(4.5rem,9vh,7rem) 1.25rem 3.5rem;width:100%}
.ilm{font-family:var(--script);font-weight:400;font-size:clamp(2.3rem,1.6rem + 2.6vw,3.9rem);line-height:1.1;color:#4a2f74;margin:0 0 .2em}
.diamond-wrap{position:relative;width:min(56vh,500px,84vw);aspect-ratio:1;margin:.2rem 0 .6rem}
.rays{position:absolute;inset:-46%;z-index:-1;pointer-events:none;animation:turn 240s linear infinite}
.diamond{width:100%;height:100%;overflow:visible}
.diamond .tile{cursor:zoom-in;transition:filter .5s}
.diamond .tile:hover,.diamond .tile:focus-visible{filter:brightness(1.06) saturate(1.04)}
.diamond .tile:focus-visible{outline:none}
.diamond .tile:focus-visible .tile-edge{stroke:var(--gold);stroke-width:7}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,1.2rem + 2.7vw,3.3rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--plum);line-height:1.12;margin:.35em 0 .15em;padding-left:.14em}
.hero h1 span{display:block}
.dates{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.25rem,1rem + .9vw,1.7rem);color:var(--violet);margin:0}
.known{font-style:italic;color:var(--plum-soft);margin:.6em 0 0;font-size:var(--step-0)}
.cue{margin-top:1.4rem;display:inline-flex;flex-direction:column;align-items:center;gap:.25rem;color:var(--gold-deep);text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.05rem}
.cue svg{width:34px;height:31px;color:var(--gold);animation:breathe 3.2s ease-in-out infinite}
.cue:hover{color:var(--violet)}

.garland{position:absolute;z-index:2;top:-.25rem;left:-2vw;width:104vw;max-width:none;pointer-events:none}
.cluster{position:absolute;z-index:4;top:-1.6rem;width:clamp(170px,19vw,260px);pointer-events:none}
.cluster.l{left:-3.2rem}
.cluster.r{right:-3.2rem}
.strands{position:absolute;inset:0;z-index:2;pointer-events:none}
.strand{position:absolute;top:1.2rem;width:auto;max-width:none;transform-origin:var(--ox,50%) 0;animation:sway var(--dur,9s) ease-in-out var(--delay,0s) infinite alternate}
.petals{position:absolute;inset:0;z-index:5;pointer-events:none;width:100%;height:100%}
@keyframes sway{from{transform:rotate(calc(var(--amp,1.1deg)*-1))}to{transform:rotate(var(--amp,1.1deg))}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(4px) scale(1.05)}}

/* ------------------------------------------------------------------ shared section rhythm */
.section{position:relative;padding:clamp(4.5rem,9vw,8rem) 1.25rem}
.prose{max-width:var(--measure);margin:0 auto}
.prose p{hyphens:auto;-webkit-hyphens:auto}
.chapter-title{font-family:var(--display);font-style:italic;font-weight:600;font-size:var(--step-3);color:var(--violet);margin:0 0 .55em;line-height:1.04}
.spray{width:min(300px,64vw);margin:0 auto 1.4rem}

/* ------------------------------------------------------------------ story opening */
.opening{text-align:center;padding-top:clamp(4rem,8vw,7rem)}
.opening h2{font-family:var(--display);font-style:italic;font-weight:600;font-size:var(--step-3);color:var(--violet);max-width:17ch;margin:0 auto .7em;line-height:1.06}
.opening .prose{text-align:left}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:600;font-size:4.6em;line-height:.78;padding:.06em .1em 0 0;color:#4a2f74}
.unforgettable{font-family:var(--display);font-weight:500;font-style:italic;font-size:var(--step-2);line-height:1.25;color:var(--plum);max-width:24ch;margin:2.2rem auto 0;text-align:center}

/* ------------------------------------------------------------------ golden thread */
.thread{padding-top:2rem}
.thread-wrap{position:relative;max-width:1180px;margin:0 auto}
.thread-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.thread-svg path{fill:none;stroke:url(#threadGold);stroke-width:2.2;stroke-linecap:round}
.thread-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(11,1fr);align-items:center;min-height:420px}
.thread-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.thread-item .dot{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#f6efe0 35%,#e3d3b0 70%,#c9a45c 100%);
  box-shadow:0 0 0 3px rgba(255,253,248,.85),0 2px 8px rgba(138,106,47,.35);z-index:2;transform:scale(.4);opacity:0;transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.thread-item .label{position:absolute;width:9.6rem;font-size:.98rem;line-height:1.32;color:var(--plum-soft);opacity:0;transition:opacity .7s .15s,transform .7s .15s}
.thread-item .label b{display:block;font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--violet);line-height:1.1;margin-bottom:.1rem}
.thread-item:nth-child(odd) .label{bottom:calc(50% + 1.4rem);transform:translateY(8px)}
.thread-item:nth-child(even) .label{top:calc(50% + 1.4rem);transform:translateY(-8px)}
.thread-item.lit .dot{transform:scale(1);opacity:1}
.thread-item.lit .label{opacity:1;transform:none}
.thread-item.seal .dot{width:26px;height:26px;background:var(--gold-grad)}
@media (max-width:900px){
  .thread-list{grid-template-columns:1fr;min-height:0;gap:1.6rem;padding-left:.5rem;max-width:30rem;margin:0 auto}
  .thread-item{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:1.1rem}
  .thread-item .label,.thread-item:nth-child(odd) .label,.thread-item:nth-child(even) .label{position:static;width:auto;transform:translateX(-8px)}
  .thread-item.lit .label{transform:none}
  .thread-item .dot{flex:none}
}

/* ------------------------------------------------------------------ chapter layouts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure));gap:clamp(2rem,6vw,6rem);max-width:1120px;margin:0 auto;align-items:center}
.split.flip{grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr)}
.split.flip .art{order:2}
.split .prose{margin:0}
@media (max-width:900px){.split,.split.flip{grid-template-columns:1fr}.split.flip .art{order:0}.split .prose{margin:0 auto}}
.art{position:relative;display:grid;place-items:center;min-height:300px}

/* backstage pass */
.pass-rig{position:relative;padding-top:120px;perspective:900px}
.pass-cord{position:absolute;top:0;left:50%;width:2px;height:132px;transform:translateX(-50%);background:linear-gradient(var(--gold-deep),var(--gold-light) 40%,var(--gold))}
.pass{position:relative;width:min(250px,64vw);aspect-ratio:5/7;transform-origin:50% -120px;animation:passSway 6s ease-in-out infinite alternate;cursor:pointer;border:0;background:none;padding:0;font:inherit;color:inherit}
.pass-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
.pass.flipped .pass-inner{transform:rotateY(180deg)}
.pass-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden;
  background:var(--pearl);box-shadow:0 18px 40px -20px rgba(59,39,84,.55),0 0 0 1px rgba(184,146,74,.35) inset;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.1rem 1rem 1.2rem;text-align:center}
.pass-face::before{content:"";position:absolute;top:.6rem;left:50%;width:2.2rem;height:.5rem;border-radius:999px;transform:translateX(-50%);background:var(--veil-deep);box-shadow:inset 0 1px 2px rgba(59,39,84,.25)}
.pass-front{background:linear-gradient(160deg,#4a2f74 0%,#5d3f8a 48%,#3b2754 100%);color:var(--pearl)}
.pass-front .k{margin-top:1.3rem;font-family:var(--display);font-weight:600;font-size:2rem;line-height:.95;letter-spacing:.02em}
.pass-front .who{font-family:var(--script);font-size:2.6rem;line-height:1;color:var(--gold-light)}
.pass-front svg{width:64px;height:58px;color:var(--gold-light);filter:drop-shadow(0 0 6px rgba(233,214,160,.6))}
.pass-front .hint{font-size:.85rem;font-style:italic;opacity:.8}
.pass-back{transform:rotateY(180deg);justify-content:center;gap:.8rem}
.pass-back q{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.35rem;line-height:1.22;color:var(--violet);quotes:"\201C" "\201D"}
.pass-back small{font-size:.9rem;color:var(--plum-soft)}
@keyframes passSway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.pass:hover,.pass:focus-visible{animation-play-state:paused}

/* polaroids */
.stack{position:relative;width:min(340px,76vw);aspect-ratio:.86;cursor:pointer;border:0;background:none;padding:0}
.polaroid{position:absolute;inset:0;background:var(--pearl);padding:5% 5% 18%;border-radius:3px;box-shadow:0 22px 40px -24px rgba(59,39,84,.6),0 1px 0 rgba(255,255,255,.9) inset;
  transform:rotate(var(--r,0deg)) translate(var(--x,0),var(--y,0));transition:transform .7s cubic-bezier(.3,1.2,.4,1),opacity .4s}
.polaroid img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02)}
.polaroid svg{position:absolute;right:7%;bottom:5%;width:26px;height:24px;color:var(--gold)}
.polaroid.leaving{transform:translate(120%,-8%) rotate(18deg);opacity:0}
.stack-hint{margin-top:1rem;font-style:italic;color:var(--plum-soft);font-size:.98rem;text-align:center}

/* work marginalia */
.marg{position:relative}
.marg .yr{position:absolute;left:-6.2rem;top:-.1rem;font-family:var(--display);font-weight:600;font-size:2.1rem;color:var(--gold);line-height:1}
@media (max-width:760px){.marg .yr{position:static;display:block;margin-bottom:.15rem}}

/* faith */
.faith{text-align:center;background:radial-gradient(70% 60% at 50% 30%,rgba(255,250,236,.95) 0,rgba(253,243,223,.55) 40%,rgba(244,238,251,0) 75%)}
.faith .hymn{font-family:var(--script);font-size:clamp(2.6rem,1.6rem + 4vw,5rem);color:#4a2f74;line-height:1.05;margin:0 0 .15em}
.faith .hymn-k{font-family:var(--display);font-style:italic;color:var(--gold-deep);font-size:var(--step-1);margin-bottom:2rem}
.faith .prose{text-align:left}

/* magazine */
.mag-rig{perspective:1200px;display:grid;place-items:center}
.mag{position:relative;width:min(360px,78vw);aspect-ratio:8.5/11;border-radius:4px;overflow:hidden;transform-style:preserve-3d;
  transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,4deg));transition:transform .25s ease-out;box-shadow:24px 34px 60px -28px rgba(59,39,84,.65),0 0 0 1px rgba(0,0,0,.05)}
.mag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.mag::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.35) var(--shine,50%),rgba(255,255,255,0) 70%);mix-blend-mode:soft-light;pointer-events:none}
.mag .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(59,39,84,.55) 0%,rgba(59,39,84,0) 30%,rgba(59,39,84,0) 58%,rgba(30,18,46,.72) 100%)}
.mag .mast{position:absolute;top:2.5%;left:0;right:0;text-align:center;font-family:var(--display);font-weight:600;font-size:min(7.2rem,24vw);letter-spacing:.06em;line-height:.9;color:var(--pearl);
  text-shadow:0 2px 18px rgba(30,18,46,.35)}
.mag .issue{position:absolute;top:24%;left:6%;font-family:var(--display);font-style:italic;font-weight:600;font-size:1.05rem;color:var(--gold-light)}
.mag .lines{position:absolute;left:6%;right:6%;bottom:5%;display:grid;gap:.55rem;color:var(--pearl)}
.mag .lines p{margin:0;font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.08;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.mag .lines p em{display:block;font-style:italic;font-weight:500;font-size:.9rem;color:var(--gold-light)}
.mag .side{position:absolute;right:6%;top:31%;width:38%;text-align:right;color:var(--pearl);font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.35)}

/* pearls */
.pearls{position:relative;max-width:980px;margin:2.6rem auto 0}
.pearl-strand{position:absolute;left:0;right:0;top:0;width:100%;height:120px;pointer-events:none}
.pearl-strand path{fill:none;stroke:url(#strandGold);stroke-width:1.6}
.pearl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative}
.pearl-item{display:flex;flex-direction:column;align-items:center;text-align:center}
.pearl-item:nth-child(1),.pearl-item:nth-child(5){margin-top:14px}
.pearl-item:nth-child(2),.pearl-item:nth-child(4){margin-top:52px}
.pearl-item:nth-child(3){margin-top:66px}
.pearl-btn{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 32% 28%,#ffffff 0,#fbf7f1 22%,#efe6f5 52%,#d9cbe6 78%,#bfaee0 100%);
  box-shadow:0 10px 22px -10px rgba(59,39,84,.55),inset -4px -6px 10px rgba(155,133,204,.35),inset 3px 4px 8px rgba(255,255,255,.9);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.pearl-btn:hover{transform:scale(1.08)}
.pearl-item .lesson{margin-top:1rem;font-family:var(--display);font-weight:600;font-size:1.22rem;line-height:1.2;color:var(--violet);max-width:12rem;transition:opacity .6s,transform .6s}
.js .pearl-item:not(.open) .lesson{opacity:0;transform:translateY(-6px)}
.pearl-item.open .pearl-btn{background:radial-gradient(circle at 32% 28%,#fff 0,#fff8e6 25%,#f1e2b8 58%,#d7b874 85%,#b8924a 100%)}
.pearl-count{margin:1.6rem auto 0;text-align:center;font-style:italic;color:var(--plum-soft)}
@media (max-width:760px){
  .pearl-strand{display:none}
  .pearl-list{grid-template-columns:1fr;gap:1.2rem;max-width:22rem;margin:0 auto}
  .pearl-item,.pearl-item:nth-child(n){flex-direction:row;margin-top:0;text-align:left;gap:1rem}
  .pearl-item .lesson{margin-top:0;max-width:none}
  .pearl-btn{flex:none;width:50px;height:50px}
}

/* proudest */
.framed{position:relative;padding:12px;background:var(--pearl);box-shadow:0 26px 50px -30px rgba(59,39,84,.6);border-radius:2px}
.framed::before{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);pointer-events:none}
.framed img{width:100%}

/* tide */
.peace{background:linear-gradient(180deg,var(--veil) 0%,#efe6f8 35%,#f6ead9 72%,#f2e2c8 100%);overflow:hidden;padding-bottom:0}
.peace .prose{position:relative;z-index:2;padding-bottom:12rem}
.peace .chapter-title{text-align:center}
.tide{position:absolute;left:0;right:0;bottom:0;height:min(42vw,300px);z-index:1;pointer-events:none}
.tide svg{position:absolute;left:0;width:200%;height:100%;bottom:0}
.tide .w1{animation:drift 26s linear infinite;transform:translateY(var(--rise1,40px))}
.tide .w2{animation:drift 19s linear infinite reverse;transform:translateY(var(--rise2,60px))}
.tide .w3{animation:drift 14s linear infinite}
@keyframes drift{from{translate:0 0}to{translate:-50% 0}}

/* gallery */
.gallery-head{text-align:center;max-width:44rem;margin:0 auto 1.8rem}
.gallery-head p{color:var(--plum-soft)}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 auto 2rem}
.filters button{font:600 1.05rem/1 var(--display);color:var(--violet);background:transparent;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);padding:.6rem 1.05rem;border-radius:999px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:var(--pearl)}
.filters button span{font-family:var(--text);font-weight:400;font-size:.88rem;opacity:.75;margin-left:.35rem}
.rows{max-width:1400px;margin:0 auto;padding:0 clamp(0rem,2vw,1.5rem)}
.row{display:flex;gap:6px;margin-bottom:6px}
.ph{position:relative;flex:none;border:0;padding:0;margin:0;background:var(--c,#ddd);cursor:zoom-in;overflow:hidden;border-radius:2px}
.ph img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ph img.in{opacity:1}
.ph:hover img{transform:scale(1.035)}
.ph:focus-visible{outline-offset:2px}
.more{display:block;margin:2rem auto 0;font:600 1.1rem var(--display);color:var(--pearl);background:var(--violet);border:0;border-radius:999px;padding:.8rem 1.6rem;cursor:pointer}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;display:none;background:rgba(36,22,52,.94);color:var(--pearl);align-items:center;justify-content:center}
.lb.open{display:flex}
.lb figure{margin:0;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;align-items:center}
.lb img{max-width:94vw;max-height:82vh;width:auto;height:auto;box-shadow:0 30px 80px -30px #000;border-radius:2px}
.lb figcaption{margin-top:.8rem;font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--gold-light)}
.lb button{position:absolute;border:0;background:rgba(255,253,248,.12);color:var(--pearl);width:3rem;height:3rem;border-radius:50%;cursor:pointer;font-size:1.6rem;line-height:1;display:grid;place-items:center}
.lb button:hover{background:rgba(255,253,248,.24)}
.lb .x{top:1rem;right:1rem}
.lb .prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb .next{right:1rem;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lb .prev,.lb .next{top:auto;bottom:1rem;transform:none}}

/* family */
.family{max-width:52rem;margin:0 auto;text-align:center}
.family .lead{font-size:var(--step-1);font-family:var(--display);font-weight:500;line-height:1.35;color:var(--plum);max-width:36rem;margin:0 auto 2.4rem}
.kin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem;text-align:left}
.kin h3{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.45rem;color:var(--violet);margin-bottom:.35rem}
.kin p{margin:0;color:var(--plum)}
.kin .parents{grid-column:1/-1;text-align:center;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
@media (max-width:700px){.kin{grid-template-columns:1fr}}

/* service */
.service{background:linear-gradient(180deg,var(--veil) 0%,#efe7f8 100%)}
.svc{max-width:62rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.svc-card{background:var(--pearl);border-radius:6px;padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 30px 60px -40px rgba(59,39,84,.55);position:relative}
.svc-card::before{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:3px;pointer-events:none}
.svc-when{font-family:var(--display);font-weight:600;font-size:var(--step-2);color:var(--violet);line-height:1.1;margin-bottom:.6rem}
.svc-where{margin-bottom:1.4rem}
.svc-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 1.08rem/1 var(--display);padding:.75rem 1.2rem;border-radius:999px;text-decoration:none;border:1px solid var(--violet);color:var(--violet);background:transparent;cursor:pointer}
.btn:hover{background:var(--violet);color:var(--pearl)}
.btn.solid{background:var(--violet);color:var(--pearl)}
.btn.solid:hover{background:var(--plum);border-color:var(--plum)}
.order{list-style:none;margin:0;padding:0}
.order li{display:grid;grid-template-columns:1fr;padding:.75rem 0;border-bottom:1px solid color-mix(in srgb,var(--wisteria) 30%,transparent)}
.order li:last-child{border-bottom:0}
.order .part{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--violet);line-height:1.15}
.order .who{color:var(--plum-soft)}
@media (max-width:800px){.svc{grid-template-columns:1fr}}

/* memories */
.memories{text-align:center}
.press{display:grid;place-items:center;margin:1rem auto 0;gap:.8rem}
.press-btn{position:relative;width:min(220px,58vw);aspect-ratio:35/32;border:0;background:none;padding:0;cursor:pointer;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:none}
.press-btn svg{width:100%;height:100%;overflow:visible}
.press-btn .ridge{fill:none;stroke:color-mix(in srgb,var(--wisteria) 55%,transparent);stroke-width:.34;stroke-linecap:round}
.press-btn .ink .ridge{stroke:url(#inkGold);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));stroke-width:.42}
.press-btn.done .ink .ridge{filter:drop-shadow(0 0 1.2px rgba(233,214,160,.9))}
.press-label{font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--violet)}
.press-note{font-style:italic;color:var(--plum-soft);margin:0}
.form-wrap{max-width:38rem;margin:2.4rem auto 0;text-align:left}
.js .form-wrap.sealed{display:none}
.mform{background:var(--pearl);border-radius:8px;padding:clamp(1.4rem,4vw,2.4rem);box-shadow:0 30px 60px -40px rgba(59,39,84,.55);display:grid;gap:1.1rem}
.mform label{display:block;font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--violet);margin-bottom:.3rem}
.mform .opt{font-family:var(--text);font-weight:400;font-style:italic;font-size:.92rem;color:var(--plum-soft)}
.mform input[type=text],.mform input[type=email],.mform textarea{width:100%;font:inherit;font-size:1.1rem;color:var(--plum);background:#fff;border:1px solid color-mix(in srgb,var(--wisteria) 55%,transparent);border-radius:6px;padding:.7rem .85rem}
.mform textarea{min-height:11rem;resize:vertical;line-height:1.5}
.mform input:focus,.mform textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.mform .help{font-size:.95rem;color:var(--plum-soft);margin:.3rem 0 0}
.mform .check{display:flex;gap:.65rem;align-items:flex-start;font-size:1.02rem}
.mform .check input{margin-top:.35rem;width:1.1rem;height:1.1rem;accent-color:var(--violet)}
.file{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.file input{font-size:1rem}
.form-status{min-height:1.4em;font-style:italic;color:var(--violet)}
.form-status.err{color:#8a2f3c}
.hidden-field{display:none}
.thanks-note{display:none;text-align:center;background:var(--pearl);border-radius:8px;padding:2.4rem 1.6rem;box-shadow:0 30px 60px -40px rgba(59,39,84,.55)}
.thanks-note svg{width:76px;height:70px;color:var(--gold);margin:0 auto 1rem}
.thanks-note h3{font-family:var(--display);font-style:italic;font-size:var(--step-2);margin-bottom:.5rem}
.sent .mform{display:none}.sent .thanks-note{display:block}

.wall{max-width:72rem;margin:3rem auto 0;columns:3 18rem;column-gap:1.4rem;text-align:left}
.wall[hidden]{display:none}
.note{break-inside:avoid;background:var(--pearl);border-radius:6px;padding:1.4rem 1.4rem 1.2rem;margin:0 0 1.4rem;box-shadow:0 20px 40px -32px rgba(59,39,84,.55);position:relative}
.note svg{position:absolute;top:-12px;right:16px;width:30px;height:28px;color:var(--gold)}
.note blockquote{margin:0 0 .8rem;font-size:1.08rem;line-height:1.55}
.note cite{font-family:var(--display);font-style:normal;font-weight:600;color:var(--violet)}
.note cite span{display:block;font-family:var(--text);font-weight:400;font-style:italic;color:var(--plum-soft);font-size:.95rem}

/* appreciation + closing */
.appreciation{text-align:center}
.appreciation .prose{text-align:center;font-size:var(--step-1);font-family:var(--display);font-weight:500;line-height:1.4}
.closing{position:relative;text-align:center;background:radial-gradient(90% 70% at 50% 100%,#fffaf0 0,#fbf4ea 35%,var(--veil) 75%);overflow:hidden}
.portrait{width:min(300px,64vw);margin:0 auto 2.4rem;position:relative}
.portrait .frame{position:relative;aspect-ratio:4/5;border-radius:50% 50% 48% 48%/42% 42% 58% 58%;overflow:hidden;box-shadow:0 0 0 6px var(--pearl),0 0 0 7.5px var(--gold),0 30px 60px -28px rgba(59,39,84,.6)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.closing .prose{text-align:center}
.hymn-line{font-family:var(--script);font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);line-height:1.25;color:#4a2f74;max-width:22ch;margin:2.2rem auto 1.4rem}
.sign{font-style:italic;color:var(--plum-soft);margin-top:1.4rem}
.foot{padding:2.2rem 1.25rem 3rem;text-align:center;color:var(--plum-soft);font-size:.98rem}
.foot svg{width:30px;height:28px;color:var(--gold);margin:0 auto .5rem}

/* tap prints */
.tapprint{position:fixed;z-index:90;width:46px;height:42px;margin:-21px 0 0 -23px;pointer-events:none;color:var(--gold);animation:tapBloom 1.9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes tapBloom{0%{transform:scale(.35) rotate(-8deg);opacity:0}15%{opacity:.95}100%{transform:scale(1.25) rotate(4deg);opacity:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strand,.rays,.cue svg,.pass,.tide svg{animation:none!important}
  .petals{display:none}
  .thread-item .dot,.thread-item .label{transition:none}
  .tapprint{animation-duration:.01s}
}
@media print{
  .nav,.petals,.strands,.garland,.cluster,.press,.form-wrap,.lb{display:none!important}
  body{background:#fff}
}

/* refinements after first review */
.chapter-title,.opening h2,.unforgettable,.hymn-line{text-wrap:balance}
.garland{top:-1.6rem}
.hero-stage{padding-top:clamp(5.6rem,11vh,7.5rem)}
.diamond-wrap{width:min(50vh,470px,84vw)}
.nav.at-top{transform:translateY(-130%);opacity:0}
.nav.at-top.open{transform:none;opacity:1}
.thread-list{grid-template-columns:repeat(12,1fr)}
@media (max-width:900px){.thread-list{grid-template-columns:1fr}}
.opening h2{max-width:22ch}
/* magazine: masthead sits on its own band so it never covers her face */
.mag{background:linear-gradient(180deg,#3b2754 0%,#4a2f74 22%,#5d3f8a 100%)}
.mag img{top:20%;height:80%;object-position:50% 12%}
.mag .shade{background:linear-gradient(180deg,rgba(59,39,84,1) 19.5%,rgba(59,39,84,.0) 34%,rgba(59,39,84,0) 58%,rgba(30,18,46,.75) 100%)}
.mag .mast{top:1.2%;font-size:min(6.4rem,21vw)}
.mag .issue{top:auto;bottom:auto;left:0;right:0;top:15.3%;text-align:center;font-size:.98rem;letter-spacing:.04em}
.mag .side{top:40%;width:34%;font-size:1.02rem}
@media (max-width:700px){
  .strand:not(.m){display:none}
  .strand.m{height:56vh!important;opacity:.95}
  .strand.m[src*="l1"],.strand.m[src*="r1"]{height:40vh!important;left:auto}
  .cluster{width:128px;top:-1rem}
  .cluster.l{left:-2.4rem}.cluster.r{right:-2.4rem}
  .hero h1{font-size:1.62rem;letter-spacing:.1em;padding-left:.1em}
  .hero-stage{padding-left:2.2rem;padding-right:2.2rem;padding-top:4.6rem}
  .ilm{font-size:2.2rem}
  .peace .prose{padding-bottom:8rem}
  .mag .issue{top:16.6%}
}
section[id],#memory-form{scroll-margin-top:5rem}

/* ---------- magazine, editorial pass */
.mag{background:#2a1a40;box-shadow:28px 40px 70px -30px rgba(30,18,46,.7),0 0 0 1px rgba(0,0,0,.08);border-radius:3px}
.mag img{top:0;height:100%;object-position:50% 0}
.mag .shade{background:linear-gradient(180deg,rgba(30,18,46,.55) 0%,rgba(30,18,46,.15) 22%,rgba(30,18,46,0) 45%,rgba(30,18,46,.15) 70%,rgba(30,18,46,.82) 100%)}
.mag .mast{top:2.6%;font-size:min(6.9rem,22vw);letter-spacing:.14em;padding-left:.14em;color:#fffdf8;text-shadow:0 2px 24px rgba(30,18,46,.55);mix-blend-mode:normal;font-weight:500}
.mag .issue{top:auto;left:0;right:0;top:19.4%;text-align:center;display:grid;gap:.1rem;color:var(--gold-light);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.mag .issue i{font-family:var(--script);font-style:normal;font-size:1.55rem;line-height:1}
.mag .issue b{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase}
.mag .side{top:44%;right:5%;width:30%;text-align:right;font-size:.98rem;line-height:1.12;color:#fffdf8}
.mag .side em{display:block;font-family:var(--script);font-style:normal;font-size:1.5rem;color:var(--gold-light);margin-bottom:.15rem}
.mag .lines{bottom:7.5%;left:6%;right:28%;gap:.5rem}
.mag .lines p{font-size:1rem;color:#fffdf8}
.mag .lines p::before{content:"";display:block;width:2.2rem;height:1px;background:var(--gold-light);margin-bottom:.3rem;opacity:.8}
.mag .barcode{position:absolute;right:6%;bottom:3%;width:17%;height:5.5%;background:repeating-linear-gradient(90deg,#fffdf8 0 1px,transparent 1px 3px,#fffdf8 3px 5px,transparent 5px 6px);opacity:.75}
.mag::after{background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.28) var(--shine,50%),rgba(255,255,255,0) 65%)}
.mag-rig{padding:1.5rem 0}
@media (max-width:700px){.mag .issue{top:18.6%}.mag .issue i{font-size:1.35rem}}

/* ---------- all-access pass, laminated */
.pass-rig{padding-top:150px}
.pass-cord{display:none}
.lanyard{position:absolute;top:0;left:50%;width:16px;height:160px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,#4a2f74 0 10px,#5d3f8a 10px 20px);border-radius:2px;box-shadow:0 2px 6px rgba(59,39,84,.3)}
.lanyard::before{content:"ZAN · ZAN · ZAN";position:absolute;inset:0;writing-mode:vertical-rl;font:600 .55rem/16px var(--display);letter-spacing:.3em;color:var(--gold-light);text-align:center;opacity:.9}
.lanyard .clip{position:absolute;left:50%;bottom:-14px;width:22px;height:20px;transform:translateX(-50%);border-radius:4px 4px 8px 8px;background:linear-gradient(180deg,#f3e3b7,#b8924a 55%,#8a6a2f);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.pass{width:min(270px,70vw);aspect-ratio:3/4.6;transform-origin:50% -150px}
.pass-face{padding:1.35rem 1rem 1rem;justify-content:flex-start;gap:.35rem;border-radius:16px;
  box-shadow:0 24px 44px -22px rgba(59,39,84,.6),0 0 0 1px rgba(184,146,74,.5) inset,0 0 0 4px rgba(255,255,255,.35) inset}
.pass-face::before{display:none}
.pass-face::after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(118deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 60%);pointer-events:none}
.pass .slot{width:2.4rem;height:.5rem;border-radius:999px;background:rgba(30,18,46,.55);box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.25);margin-bottom:.2rem}
.pass-front{background:linear-gradient(165deg,#5d3f8a 0%,#3b2754 55%,#2a1a40 100%);color:var(--pearl)}
.pass-front .tour{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-light)}
.pass-front .k{margin-top:.1rem;font-size:1.85rem;line-height:.95;letter-spacing:.04em;background:linear-gradient(180deg,#fffdf8,#e9d6a0);-webkit-background-clip:text;background-clip:text;color:transparent}
.pass-front .photo{width:46%;aspect-ratio:1;border-radius:50%;overflow:hidden;margin:.35rem 0 .2rem;box-shadow:0 0 0 3px var(--gold),0 0 0 6px rgba(233,214,160,.35),0 10px 20px -8px #000}
.pass-front .photo img{width:100%;height:100%;object-fit:cover}
.pass-front .who{font-size:2.2rem;line-height:1;margin-top:.1rem}
.pass-front .row{display:flex;justify-content:space-between;width:100%;font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);border-top:1px solid rgba(233,214,160,.35);padding-top:.5rem;margin-top:.3rem}
.pass-front .holo{position:absolute;right:.8rem;bottom:2.1rem;width:34px;height:31px;color:var(--gold-light);opacity:.9;filter:drop-shadow(0 0 5px rgba(233,214,160,.7))}
.pass-front .holo svg{width:100%;height:100%}
.pass-front .hint{position:absolute;left:0;right:0;bottom:.7rem;font-size:.8rem;font-style:italic;opacity:.75}
.pass-back{justify-content:center;gap:.9rem;background:linear-gradient(165deg,#fffdf8,#f4eefb)}
.pass-back .slot{position:absolute;top:1.35rem;left:50%;transform:translateX(-50%);background:rgba(59,39,84,.25)}
.pass-back .stamp{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.3em;text-transform:uppercase;color:#a23b4a;border:2px solid #a23b4a;border-radius:4px;padding:.15rem .6rem .1rem;transform:rotate(-8deg);opacity:.85;margin-top:1rem}
.pass-back q{font-size:1.28rem}
.pass-back .fine{font-size:.68rem;line-height:1.35;color:var(--plum-soft);border-top:1px solid color-mix(in srgb,var(--gold) 50%,transparent);padding-top:.5rem;margin-top:.2rem}

/* ---------- whimsy: gold dust drifting through the whole page */
.dust{position:fixed;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;opacity:.9}
main{position:relative}
main>section{position:relative;z-index:2}
.hero{z-index:3}
.chapter-title::after{content:"";display:block;width:3.2rem;height:2px;margin:.45rem 0 0;background:linear-gradient(90deg,var(--gold),var(--gold-light),transparent)}
.opening h2::after,.faith .chapter-title::after,.peace .chapter-title::after,.gallery-head .chapter-title::after,.family .chapter-title::after,.memories .chapter-title::after,.appreciation .chapter-title::after,.closing .chapter-title::after{margin-left:auto;margin-right:auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.pearl-btn{animation:pearlBob 5s ease-in-out infinite}
.pearl-item:nth-child(2) .pearl-btn{animation-delay:-1s}.pearl-item:nth-child(3) .pearl-btn{animation-delay:-2s}.pearl-item:nth-child(4) .pearl-btn{animation-delay:-3s}.pearl-item:nth-child(5) .pearl-btn{animation-delay:-4s}
@keyframes pearlBob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.portrait .frame{box-shadow:0 0 0 6px var(--pearl),0 0 0 7.5px var(--gold),0 0 60px 10px rgba(233,214,160,.45),0 30px 60px -28px rgba(59,39,84,.6)}
.portrait img{object-position:50% 30%}
.portrait::before,.portrait::after{content:"";position:absolute;width:140px;height:116px;background:url(../img/fl/rose.webp) center/contain no-repeat;z-index:2;pointer-events:none}
.portrait::before{left:-70px;bottom:-24px;transform:rotate(-15deg)}
.portrait::after{right:-66px;top:-20px;transform:rotate(20deg) scale(.8)}
@media (prefers-reduced-motion:reduce){.dust{display:none}.pearl-btn{animation:none}}
/* magazine v3: masthead on its own plum band; photo below; issue line tucked under the masthead right */
.mag{background:linear-gradient(180deg,#2a1a40,#3b2754)}
.mag img{top:17%;height:83%;object-position:50% 0}
.mag .shade{background:linear-gradient(180deg,rgba(42,26,64,1) 16.5%,rgba(42,26,64,0) 30%,rgba(30,18,46,0) 62%,rgba(30,18,46,.85) 100%)}
.mag .mast{top:1.8%;font-size:min(5.9rem,19vw);letter-spacing:.2em;padding-left:.2em;line-height:1}
.mag .issue{top:13.2%;left:6%;right:6%;flex-direction:row;display:flex;justify-content:space-between;align-items:baseline}
.mag .issue i{font-size:1.25rem}
.mag .issue b{font-size:.66rem;letter-spacing:.22em}
.mag .side{top:36%}
@media (max-width:700px){.mag .issue{top:13%}.mag .issue i{font-size:1.1rem}.mag .issue b{font-size:.58rem}}
.mag .mast{top:1.2%;font-size:min(4.6rem,15vw);letter-spacing:.26em;padding-left:.26em}
.mag .issue{top:11.4%}
.mag img{top:17.5%}
.mag .shade{background:linear-gradient(180deg,rgba(42,26,64,1) 17%,rgba(42,26,64,0) 31%,rgba(30,18,46,0) 62%,rgba(30,18,46,.85) 100%)}
.mag .lines{bottom:6%}
@media (max-width:700px){.mag .mast{font-size:min(4rem,15vw)}.mag .issue{top:11.8%}}
.mag .mast{font-size:min(3.9rem,13vw);line-height:.95;top:2.2%}
.mag .issue{top:15.2%}
.mag img{top:21.5%;height:78.5%}
.mag .shade{background:linear-gradient(180deg,rgba(42,26,64,1) 21%,rgba(42,26,64,0) 34%,rgba(30,18,46,0) 62%,rgba(30,18,46,.85) 100%)}
.mag .side{top:40%}
@media (max-width:700px){.mag .mast{font-size:min(3.6rem,13vw)}.mag .issue{top:15.4%}}

/* ---------- v1.2 */
/* pass: jeweled edge */
.pass .jewels{position:absolute;inset:7px;border-radius:12px;pointer-events:none;
  background:
    radial-gradient(circle,#fff 0 1px,#f3e3b7 1.5px,#b8924a 2.4px,transparent 3px) 0 0/14px 14px repeat-x,
    radial-gradient(circle,#fff 0 1px,#f3e3b7 1.5px,#b8924a 2.4px,transparent 3px) 0 100%/14px 14px repeat-x,
    radial-gradient(circle,#fff 0 1px,#f3e3b7 1.5px,#b8924a 2.4px,transparent 3px) 0 0/14px 14px repeat-y,
    radial-gradient(circle,#fff 0 1px,#f3e3b7 1.5px,#b8924a 2.4px,transparent 3px) 100% 0/14px 14px repeat-y;
  filter:drop-shadow(0 0 2px rgba(255,246,221,.8))}
.pass .jewels::after{content:"";position:absolute;inset:-7px;border-radius:16px;border:2px solid transparent;background:var(--gold-grad) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pass-front .k{font-size:2.1rem;margin-top:.3rem}
.pass-front .photo{width:54%;margin:.6rem 0 .3rem}
.pass-front .who{font-size:2.5rem}
.pass-front .tour{margin-top:.35rem}
.pass-front .hint{bottom:.9rem}
/* magazine: iconic */
.mag .mast{font-family:var(--display);font-weight:500;font-size:min(4.4rem,14.5vw);letter-spacing:.3em;padding-left:.3em;top:2.4%;
  background:linear-gradient(180deg,#fffdf8 0%,#f1e2b8 60%,#c9a45c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 2px 14px rgba(30,18,46,.6))}
.mag .issue{top:15.6%;flex-direction:column;align-items:center;gap:.05rem}
.mag .issue b{font-size:.78rem;letter-spacing:.42em;padding-left:.42em;color:#fffdf8}
.mag .issue i{font-family:var(--display);font-style:italic;font-weight:500;font-size:.95rem;letter-spacing:.2em;color:var(--gold-light)}
.mag .issue::before,.mag .issue::after{content:"";position:absolute;top:50%;width:18%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-light))}
.mag .issue::before{left:4%}.mag .issue::after{right:4%;transform:scaleX(-1)}
.mag .side{top:42%;right:6%;width:40%;font-weight:500;font-size:1.05rem;line-height:1.1;letter-spacing:.02em}
.mag .side em{font-size:1.9rem;color:#fffdf8;text-shadow:0 0 18px rgba(233,214,160,.6)}
.mag .lines{right:34%;bottom:7%}
.mag .lines p{font-weight:600;font-size:1.02rem;letter-spacing:.01em}
.mag .lines p em{color:var(--gold-light);font-weight:500}
.mag .lines p::before{width:1.6rem;background:var(--gold-light)}
.mag .shade{background:linear-gradient(180deg,rgba(42,26,64,1) 21%,rgba(42,26,64,0) 34%,rgba(30,18,46,0) 58%,rgba(30,18,46,.88) 100%)}
.mag{box-shadow:28px 40px 70px -30px rgba(30,18,46,.75),0 0 0 1px rgba(233,214,160,.35)}
@media (max-width:700px){.mag .side{font-size:.95rem}.mag .lines p{font-size:.92rem}}
/* daffodil movement: strands already sway; add a slow breath to the corner clusters and garland */
.cluster{animation:breatheC 7s ease-in-out infinite alternate;transform-origin:50% 0}
.cluster.r{animation-delay:-3.5s}
@keyframes breatheC{from{transform:rotate(-1.2deg) scale(1)}to{transform:rotate(1.2deg) scale(1.015)}}
.garland{animation:garlandSway 11s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes garlandSway{from{transform:translateY(0) rotate(-.25deg)}to{transform:translateY(5px) rotate(.25deg)}}
.spray{animation:breatheC 8s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.cluster,.garland,.spray{animation:none}}
/* responsive sweep */
html,body{overflow-x:hidden;max-width:100%}
.hero,.closing,.peace{overflow-x:clip}
.split{padding:0 .25rem}
.svc-card,.mform,.note{max-width:100%}
.svc-actions .btn{flex:1 1 auto;justify-content:center}
@media (max-width:480px){
  .hero h1{font-size:1.45rem}
  .filters button{font-size:.95rem;padding:.5rem .8rem}
  .order .part{font-size:1.15rem}
  .kin{gap:1.4rem}
  .nav-inner{padding-left:.6rem}
  .pass{width:min(250px,76vw)}
  .mag{width:min(330px,84vw)}
  .wall{columns:1}
}
@media (min-width:1700px){.hero-stage{padding-top:8rem}.diamond-wrap{width:min(50vh,520px)}}

/* ---------- v1.3: hymn interlude */
.closing{padding-bottom:clamp(3rem,6vw,5rem)}
.interlude{text-align:center;position:relative;padding-top:clamp(3rem,6vw,5rem);
  background:radial-gradient(70% 55% at 50% 40%,rgba(255,250,236,.95) 0,rgba(253,243,223,.5) 45%,rgba(244,238,251,0) 80%)}
.interlude::before{content:"";display:block;width:min(22rem,70vw);height:1px;margin:0 auto 2.6rem;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.staff{position:absolute;left:0;right:0;top:46%;height:72px;transform:translateY(-50%);pointer-events:none;opacity:.35}
.staff span{display:block;height:1px;background:linear-gradient(90deg,transparent 0,var(--gold) 18%,var(--gold) 82%,transparent);margin:0 0 17px}
.hymn-words{position:relative;font-family:var(--script);font-size:clamp(2.4rem,1.3rem + 4.6vw,5rem);line-height:1.2;color:#4a2f74;margin:0 0 .3em;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .35em}
.hymn-words .w{font:inherit;color:inherit;background:none;border:0;padding:.05em .12em;cursor:pointer;border-radius:.3em;transition:color .3s,text-shadow .3s,transform .3s;touch-action:manipulation}
.hymn-words .w:hover{color:var(--violet)}
.hymn-words .w.ring{color:var(--gold-deep);text-shadow:0 0 22px rgba(233,214,160,.95),0 0 2px rgba(184,146,74,.6);transform:translateY(-4px)}
.hymn-words .ell{align-self:flex-end;padding-bottom:.1em}
.hymn-rest{font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--step-1);color:var(--plum);margin:0 auto .8rem;max-width:26ch}
.play{display:inline-flex;align-items:center;gap:.5rem;font:600 1.05rem var(--display);color:var(--violet);background:transparent;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);border-radius:999px;padding:.55rem 1.1rem .55rem .8rem;cursor:pointer;margin-top:.4rem}
.play svg{width:22px;height:20px;color:var(--gold)}
.play:hover{background:var(--pearl)}
.interlude .sign{margin-top:2.6rem}
.note-hint{font-size:.9rem;font-style:italic;color:var(--plum-soft);margin:.4rem 0 0}

/* ---------- v1.3: mobile */
@media (max-width:700px){
  .section{padding:3.4rem 1.1rem}
  .hero{min-height:100svh}
  .hero-stage{padding-top:4.2rem;padding-bottom:2.4rem}
  .diamond-wrap{width:min(78vw,340px)}
  .ilm{font-size:2.1rem}
  .known{font-size:1rem}
  .opening h2{font-size:1.9rem}
  .chapter-title{font-size:2rem}
  .unforgettable{font-size:1.45rem}
  .split{gap:2rem}
  .art{min-height:0}
  .pass-rig{padding-top:110px}
  .lanyard{height:120px}
  .pass{transform-origin:50% -110px}
  .stack{width:min(300px,78vw)}
  .mag{width:min(300px,80vw)}
  .mag .side{display:none}
  .mag .lines{right:8%}
  .pearls{margin-top:1.4rem}
  .peace .prose{padding-bottom:7rem}
  .tide{height:min(44vw,220px)}
  .gallery-head{margin-bottom:1rem}
  .filters{gap:.4rem;margin-bottom:1.2rem}
  .filters button{font-size:.92rem;padding:.5rem .75rem}
  .filters button span{display:none}
  .rows{padding:0}
  .row{gap:3px;margin-bottom:3px}
  .family .lead{font-size:1.2rem}
  .svc-card{padding:1.3rem}
  .svc-when{font-size:1.5rem}
  .btn{padding:.7rem 1rem;font-size:1rem}
  .press-btn{width:min(190px,56vw)}
  .mform{padding:1.2rem}
  .mform textarea{min-height:9rem}
  .portrait{width:min(240px,66vw)}
  .portrait::before,.portrait::after{width:96px;height:80px}
  .portrait::before{left:-44px;bottom:-14px}.portrait::after{right:-42px;top:-10px}
  .hymn-words{font-size:2.4rem}
  .staff{height:56px}.staff span{margin-bottom:13px}
  .lb img{max-height:76vh}
  .lb .x{top:.6rem;right:.6rem}
}

/* ---------- v1.4 */
.mag .glow{position:absolute;left:50%;top:52%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 38% 46% at 50% 50%,rgba(255,236,180,.55) 0,rgba(233,200,120,.32) 32%,rgba(201,164,92,.12) 58%,rgba(201,164,92,0) 75%);
  animation:glowBreathe 6s ease-in-out infinite alternate}
@keyframes glowBreathe{from{opacity:.85;transform:translate(-50%,-50%) scale(1)}to{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.tide-btn{position:relative;z-index:3;display:flex;align-items:center;gap:.5rem;margin:-9rem auto 0;font:600 1.02rem var(--display);color:var(--violet);background:rgba(255,253,248,.7);border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);border-radius:999px;padding:.5rem 1.05rem .5rem .75rem;cursor:pointer;backdrop-filter:blur(6px)}
.tide-btn svg{width:20px;height:18px;color:var(--gold)}
.tide-btn[aria-pressed="true"]{background:var(--violet);color:var(--pearl);border-color:var(--violet)}
.tide-btn[aria-pressed="true"] svg{color:var(--gold-light)}
.peace .prose{padding-bottom:11rem}
@media (max-width:700px){.tide-btn{margin-top:-6rem}.peace .prose{padding-bottom:8rem}}
/* living childhood photographs: a slow, gentle drift, each tile on its own path */
.ph.alive img{transition:opacity .6s;animation:kenburns var(--kd,14s) ease-in-out var(--kdelay,0s) infinite alternate;transform-origin:var(--ko,50% 40%)}
.ph.alive:hover img{animation-play-state:paused}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(var(--kx,-2%),var(--ky,1.5%))}}
@media (prefers-reduced-motion:reduce){.ph.alive img{animation:none}.mag .glow{animation:none}}
.tide{height:min(46vw,340px)}
.peace .prose{padding-bottom:14rem}
.tide-btn{margin-top:-11rem}
@media (max-width:700px){.tide{height:min(50vw,240px)}.peace .prose{padding-bottom:9rem}.tide-btn{margin-top:-7rem}}

/* ---------- v1.7: live garland and the bluebird */
.garland{display:none}
.garland-live{position:absolute;z-index:2;top:.4rem;left:0;width:100%;height:clamp(60px,9vw,120px);overflow:visible;pointer-events:none;animation:garlandSway 11s ease-in-out infinite alternate;transform-origin:50% 0}
.garland-live .pl{transform-box:fill-box;transform-origin:50% 0;animation:pearlSwing 3.2s ease-in-out calc(var(--i) * -.21s) infinite alternate}
@keyframes pearlSwing{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(7deg) translateY(.12px)}}
.garland-live .jq{transform-box:fill-box;transform-origin:50% 15%;animation:jonqSway 4.6s ease-in-out calc(var(--i) * -.7s) infinite alternate}
@keyframes jonqSway{from{transform:rotate(-9deg) scale(1)}to{transform:rotate(9deg) scale(1.04)}}
.bird{position:absolute;z-index:6;top:0;left:0;width:clamp(44px,5vw,70px);pointer-events:none;opacity:0;offset-path:path("M -80 120 C 120 20, 260 160, 420 70 S 640 20, 700 95");offset-rotate:auto;offset-distance:0%}
.bird.fly{animation:birdFly 5.2s cubic-bezier(.35,.1,.3,1) forwards}
.bird.fly .wing.front{animation:flapF .22s ease-in-out infinite alternate}
.bird.fly .wing.back{animation:flapB .22s ease-in-out infinite alternate}
.bird.perched{opacity:1;offset-distance:100%;offset-rotate:0deg}
.bird.perched .body{animation:perchTilt 6s ease-in-out infinite}
.bird.perched .wing.front{animation:settle 1.2s ease-out forwards}
.wing{transform-box:fill-box;transform-origin:90% 60%}
@keyframes flapF{from{transform:rotate(18deg)}to{transform:rotate(-28deg)}}
@keyframes flapB{from{transform:rotate(12deg)}to{transform:rotate(-20deg)}}
@keyframes settle{from{transform:rotate(-20deg)}to{transform:rotate(4deg)}}
@keyframes birdFly{0%{opacity:0;offset-distance:0%}6%{opacity:1}92%{offset-rotate:auto}100%{opacity:1;offset-distance:100%;offset-rotate:0deg}}
@keyframes perchTilt{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-7deg)}84%{transform:rotate(5deg)}}
@media (max-width:700px){.garland-live{top:.2rem;height:52px}.bird{width:34px;offset-path:path("M -40 90 C 60 20, 150 110, 230 60 S 330 20, 300 60")}}
@media (prefers-reduced-motion:reduce){.garland-live,.garland-live .pl,.garland-live .jq,.bird .wing,.bird .body{animation:none!important}.bird{opacity:1;offset-distance:100%;offset-rotate:0deg}}
.garland-live{height:clamp(70px,10.5vw,140px)}
.hero-stage{padding-top:clamp(6.4rem,12vh,8.4rem)}
@media (max-width:700px){.garland-live{height:60px}.hero-stage{padding-top:5rem}}
.bird.perched{animation:garlandSway 11s ease-in-out infinite alternate;transform-origin:50% -400%}

/* ---------- v1.8: a day at Assateague */
.peace{background:none;--p:0}
.sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sky>div{position:absolute;inset:0}
.sky-day{background:linear-gradient(180deg,#fbe3d2 0%,#f8f0e4 22%,#f4eefb 48%,#efe7f8 70%,#f6ead9 100%);opacity:calc(1 - var(--p))}
.sky-set{background:linear-gradient(180deg,#5d3f8a 0%,#9a6aa8 22%,#e58a7a 46%,#f6b27b 62%,#f8d9a6 76%,#e9c9b4 100%);opacity:calc(1 - abs(var(--p) * 2 - 1))}
.sky-dusk{background:linear-gradient(180deg,#1e1538 0%,#2f2358 30%,#4a2f74 55%,#6b4a8c 72%,#8a6a9a 86%,#b58aa0 100%);opacity:calc(var(--p) * 2 - 1)}
.stars{background:radial-gradient(1.2px 1.2px at 12% 18%,#fff 60%,transparent),radial-gradient(1px 1px at 28% 8%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 41% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 12%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 66% 30%,#fff 60%,transparent),radial-gradient(1px 1px at 78% 9%,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 88% 21%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 36%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 20% 40%,#fff 60%,transparent),radial-gradient(1px 1px at 93% 38%,#fff 60%,transparent),radial-gradient(1.4px 1.4px at 7% 30%,#fff 60%,transparent),radial-gradient(1px 1px at 35% 44%,#fff 60%,transparent);
  opacity:calc((var(--p) - .72) * 3.6);animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{filter:brightness(.8)}to{filter:brightness(1.3)}}
.sun{position:absolute;left:calc(8% + var(--p) * 84%);top:calc(68% - sin(var(--p) * 180deg) * 58%);width:clamp(60px,9vw,120px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 45% 40%,#fffbe6 0,#ffe9a8 40%,#f9c66b 75%,#f3a65a 100%);box-shadow:0 0 40px 14px rgba(255,225,160,.55),0 0 120px 40px rgba(255,200,120,.25);
  filter:saturate(calc(1 + var(--p) * .8));opacity:calc(1 - max(0, var(--p) - .9) * 10)}
.sky .sun::after{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,200,.35),transparent 60%)}
.fireflies{position:absolute;inset:0;width:100%;height:100%;opacity:calc((var(--p) - .7) * 3.3)}
.peace .chapter-title,.peace .prose p{color:color-mix(in srgb,var(--plum) calc((1 - var(--p)) * 100%),#fffdf8);transition:color .2s}
.peace .chapter-title{color:color-mix(in srgb,var(--violet) calc((1 - var(--p)) * 100%),var(--gold-light))}
.day-note{font-family:var(--display);font-style:italic;font-size:1.05rem;text-align:center;margin-top:.6rem;opacity:.85}
.peace .tide-btn{color:color-mix(in srgb,var(--violet) calc((1 - var(--p)) * 100%),var(--pearl));background:color-mix(in srgb,rgba(255,253,248,.7) calc((1 - var(--p)) * 100%),rgba(59,39,84,.5))}
.tide .w1 path{fill:color-mix(in srgb,#c9b8ee calc((1 - var(--p)) * 100%),#5a4a8a)}
.tide .w2 path{fill:color-mix(in srgb,#9fc3cf calc((1 - var(--p)) * 100%),#3f4f7a)}
.tide .w3 path:first-child{fill:color-mix(in srgb,#7fa6b8 calc((1 - var(--p)) * 100%),#2b355e)}
.peace{min-height:150vh}
.peace .prose{position:sticky;top:18vh;padding-bottom:0}
.peace .tide-btn{position:sticky;top:calc(18vh + 15rem);margin:2rem auto 0}
.peace .tide{position:absolute;bottom:0}
@media (max-width:700px){.peace{min-height:140vh}.peace .prose{top:14vh}.peace .tide-btn{top:calc(14vh + 17rem)}}

/* ---------- v1.8: herbs on the windowsill */
.sill{position:relative;margin:2.2rem auto 0;max-width:22rem;height:7.2rem;display:flex;justify-content:center;align-items:flex-end;gap:1.6rem}
.sill-line{position:absolute;left:0;right:0;bottom:1.5rem;height:6px;border-radius:3px;background:linear-gradient(180deg,#f3e3b7,#c9a45c);box-shadow:0 3px 6px rgba(59,39,84,.18)}
.sill-cap{position:absolute;left:0;right:0;bottom:0;text-align:center;font-style:italic;font-size:.9rem;color:var(--plum-soft)}
.herb{position:relative;z-index:1;width:3.4rem;height:5.6rem;border:0;background:none;padding:0;cursor:pointer;margin-bottom:1.5rem;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.herb svg{width:100%;height:100%;overflow:visible}
.herb .stem{fill:none;stroke:#5c7a5f;stroke-width:2.2;stroke-linecap:round}.herb .stem.thin{stroke-width:1.4}
.herb .leaf{fill:#6f9b6a;stroke:#4f7a52;stroke-width:.8}
.herb.mint .leaf{fill:#86b27e}
.herb .needles path{stroke:#6e8f6a;stroke-width:1.8;stroke-linecap:round;fill:none}
.herb:hover{transform:rotate(-4deg)}
.herb.touched{animation:herbShake .9s ease-out}
@keyframes herbShake{0%{transform:rotate(0)}20%{transform:rotate(-9deg)}45%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.herb-bit{position:fixed;z-index:95;width:10px;height:10px;pointer-events:none;border-radius:60% 0 60% 0;background:#86b27e;animation:herbDrift 1.8s ease-out forwards}
@keyframes herbDrift{from{transform:translate(0,0) rotate(0);opacity:.95}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.herb-scent{position:absolute;left:50%;bottom:95%;transform:translateX(-50%);font-family:var(--script);font-size:1.35rem;color:var(--sage);white-space:nowrap;opacity:0;pointer-events:none;animation:scent 1.8s ease-out forwards}
@keyframes scent{0%{opacity:0;transform:translate(-50%,6px)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-34px)}}

/* ---------- v1.8: a candle for her */
.candle-wrap{display:flex;flex-direction:column;align-items:center;margin:0 0 1.6rem}
.candle{position:relative;width:70px;height:120px;border:0;background:none;padding:0;cursor:pointer;display:block}
.candle .wax{position:absolute;left:50%;bottom:0;width:30px;height:62px;transform:translateX(-50%);border-radius:4px 4px 6px 6px;background:linear-gradient(90deg,#f6e9c8,#fffdf8 45%,#e9d6a0);box-shadow:0 10px 18px -10px rgba(59,39,84,.5)}
.candle .wax::before{content:"";position:absolute;left:0;right:0;top:-5px;height:10px;border-radius:50%;background:#fff6dd}
.candle .wick{position:absolute;left:50%;bottom:62px;width:2px;height:9px;background:#3b2754;transform:translateX(-50%)}
.candle .flame{position:absolute;left:50%;bottom:68px;width:22px;height:38px;transform:translateX(-50%) scale(0);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.candle .fire{position:absolute;inset:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 80%,#fff9e0 0,#ffe08a 35%,#f6a53a 70%,rgba(246,165,58,0) 100%);animation:flicker .18s ease-in-out infinite alternate}
.candle .glowf{position:absolute;inset:-70px -60px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,150,.55),rgba(255,220,150,0) 65%);animation:flicker .3s ease-in-out infinite alternate}
.candle[aria-pressed="true"] .flame{transform:translateX(-50%) scale(1)}
@keyframes flicker{from{transform:scaleX(.96) skewX(-2deg)}to{transform:scaleX(1.04) skewX(2deg) translateY(-1px)}}
.candle-k{font-family:var(--display);font-weight:600;color:var(--violet);margin:.4rem 0 0;font-size:1.05rem}
@media (prefers-reduced-motion:reduce){.stars,.candle .fire,.candle .glowf{animation:none}.herb.touched{animation:none}}
.sky .sun{z-index:2}.sky .stars,.sky .fireflies{z-index:3}
.sun{top:calc(78% - sin(var(--p) * 180deg) * 66%);width:clamp(70px,10vw,140px)}
.peace .prose{z-index:4}
.day-note{margin-top:1rem;margin-bottom:0}
.peace .tide-btn{top:calc(18vh + 17.5rem)}
@media (max-width:700px){.peace .tide-btn{top:calc(14vh + 19.5rem)}}
.peace .tide{z-index:3}
.sky>div{z-index:0}.sky .sun{z-index:2;position:absolute}.sky .stars{z-index:1}.sky .fireflies{z-index:3}
.sky .sun{display:block}
.peace .prose p,.peace .chapter-title,.peace .day-note{color:#3b2754;text-shadow:none}
.peace .prose{--k:clamp(0, calc((var(--p) - .5) * 3), 1)}
.peace .prose p,.peace .day-note{color:color-mix(in srgb,#3b2754 calc((1 - var(--k)) * 100%),#fffdf8)}
.peace .chapter-title{color:color-mix(in srgb,#5d3f8a calc((1 - var(--k)) * 100%),#f1e2b8)}
.peace .prose{text-shadow:0 1px 14px color-mix(in srgb,transparent calc((1 - var(--k)) * 100%),rgba(20,12,40,.6))}
.peace .tide-btn{color:color-mix(in srgb,var(--violet) calc((1 - var(--k)) * 100%),var(--pearl));background:color-mix(in srgb,rgba(255,253,248,.75) calc((1 - var(--k)) * 100%),rgba(59,39,84,.55))}
.sun{top:auto;left:auto}
.peace .prose{--k:clamp(0, calc((var(--p) - .38) * 4), 1)}
.peace .prose p,.peace .day-note{color:color-mix(in srgb,#2a1a40 calc((1 - var(--k)) * 100%),#fffdf8)}
.peace .chapter-title{color:color-mix(in srgb,#4a2f74 calc((1 - var(--k)) * 100%),#f6e7b0)}
.peace .prose{--k:clamp(0, calc((var(--p) - .22) * 5), 1)}
.peace .prose p,.peace .day-note,.peace .chapter-title{text-shadow:0 1px 10px color-mix(in srgb,transparent calc((1 - var(--k)) * 100%),rgba(20,12,40,.55))}

/* ---------- v1.9 */
.ilm{position:relative;margin-bottom:.55em}
.ilm .of{position:absolute;left:0;right:0;top:100%;margin-top:-.28em;font-family:var(--display);font-style:italic;font-weight:500;font-size:.38em;letter-spacing:.3em;padding-left:.3em;color:var(--violet)}
.hero-stage{padding-top:clamp(8rem,15vh,10.5rem)}
@media (max-width:700px){.hero-stage{padding-top:6.4rem}.ilm .of{font-size:.42em}}
/* dove */
.bird{offset-path:none!important;offset-rotate:auto;animation:none!important;transform:translate(-200px,-200px);will-change:transform;transform-origin:50% 60%}
.bird.fly{animation:none!important}
.bird .wing.front{transform:rotate(calc(var(--flap,0) * -34deg))}
.bird .wing.back{transform:rotate(calc(var(--flap,0) * -26deg))}
.bird.fly .wing{animation:none!important;transition:none}
.bird.perched .wing{animation:none!important;transition:transform .6s ease-out}
.bird.perched .wing.front,.bird.perched .wing.back{transform:rotate(3deg)}
.bird.perched .body{animation:perchTilt 7s ease-in-out infinite}
.bird.perched{animation:none!important}
/* pass: holo centered between Zan and the hint */
.pass-front .holo{position:static;margin:.35rem auto .1rem;width:30px;height:28px}
.pass-front .who{margin-bottom:0}
/* chimes/peace spacing and prompts */
.day-note{margin-top:1.1rem}
.scroll-hint{font-size:.95rem;font-style:italic;color:inherit;opacity:.85;margin:.2rem 0 0;text-align:center}
.scroll-hint .arrow{display:block;font-size:1.3rem;line-height:.8;animation:breathe 2.6s ease-in-out infinite}
.peace .tide-btn{top:calc(18vh + 20rem)}
@media (max-width:700px){.peace .tide-btn{top:calc(14vh + 22.5rem)}}
.sun .yr{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.9vw,1.6rem);letter-spacing:.08em;color:#8a5a1a;opacity:.85;text-shadow:0 0 10px rgba(255,250,220,.9)}
/* herbs look touchable */
.herb{animation:herbIdle 5s ease-in-out infinite}
.herb.rosemary{animation-delay:-1.7s}.herb.mint{animation-delay:-3.3s}
@keyframes herbIdle{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.herb::after{content:"";position:absolute;left:50%;bottom:-2px;width:3rem;height:1.1rem;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(233,214,160,.9),rgba(233,214,160,0) 70%);animation:herbGlow 2.4s ease-in-out infinite alternate}
@keyframes herbGlow{from{opacity:.35}to{opacity:.95}}
.sill-cap em{font-style:italic;color:var(--gold-deep)}
@media (prefers-reduced-motion:reduce){.herb,.herb::after,.scroll-hint .arrow{animation:none}}
.peace .tide-btn{top:calc(18vh + 23rem)}
.scroll-hint{margin-bottom:1.2rem}
@media (max-width:700px){.peace .tide-btn{top:calc(14vh + 25.5rem)}.peace{min-height:150vh}}
.foot .made{margin-top:.9rem;font-size:.72rem;letter-spacing:.04em;color:color-mix(in srgb,var(--plum-soft) 62%,transparent);display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.foot .made a{color:inherit;text-decoration:none}
.foot .made a:hover{color:var(--violet)}
.foot .made .km{font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:lowercase}
/* a hairline gold heartprint watermark in the corner of the footer, part of the design */
.foot{position:relative}
.foot::after{content:"";position:absolute;right:1rem;bottom:.8rem;width:22px;height:20px;opacity:.28;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path d='M12 21 C2 14 1 8 4 4 C7 1 11 2 12 5 C13 2 17 1 20 4 C23 8 22 14 12 21Z' fill='none' stroke='%23b8924a' stroke-width='1'/><path d='M12 17 C6 13 5 9 7 7 C9 5 11 6 12 8 C13 6 15 5 17 7 C19 9 18 13 12 17Z' fill='none' stroke='%23b8924a' stroke-width='.8'/><path d='M12 13 C9.5 11.5 9 9.5 10.5 9 C11.5 9 12 10 12 10.5 C12 10 12.5 9 13.5 9 C15 9.5 14.5 11.5 12 13Z' fill='none' stroke='%23b8924a' stroke-width='.7'/></svg>") center/contain no-repeat}

/* ---------- v1.11: footer signature */
.foot>svg{display:none}
.foot::after{display:none}
.foot .made{align-items:center;gap:.4rem}
.sig{width:26px;height:24px;border:0;background:none;padding:0;cursor:pointer;color:var(--gold);opacity:.75;display:inline-grid;place-items:center;border-radius:50%;transition:transform .4s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.sig svg{width:100%;height:100%}
.sig:hover{opacity:1;transform:scale(1.18)}
.sig::after{content:"";position:absolute;width:26px;height:24px;border-radius:50%;box-shadow:0 0 0 0 rgba(184,146,74,.5);animation:sigPulse 3.2s ease-out infinite}
@keyframes sigPulse{0%{box-shadow:0 0 0 0 rgba(184,146,74,.45)}70%{box-shadow:0 0 0 12px rgba(184,146,74,0)}100%{box-shadow:0 0 0 12px rgba(184,146,74,0)}}
.sig.pressed{animation:sigSpin 1.2s cubic-bezier(.3,1.4,.5,1)}
@keyframes sigSpin{from{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.35)}to{transform:rotate(360deg) scale(1)}}
.reveal{height:0;overflow:hidden;opacity:0;transition:height .9s cubic-bezier(.2,.8,.2,1),opacity .9s;display:flex;flex-direction:column;align-items:center;gap:.1rem}
.reveal.open{height:5.4rem;opacity:1}
.reveal .r1{font-family:var(--script);font-size:1.5rem;color:var(--violet);opacity:0;transform:translateY(8px);transition:all .8s .2s}
.reveal .r2{font-family:var(--display);font-weight:600;font-size:1.7rem;letter-spacing:.22em;padding-left:.22em;text-transform:lowercase;text-decoration:none;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(8px);transition:all .8s .5s}
.reveal .r3{font-size:.78rem;letter-spacing:.08em;color:var(--plum-soft);opacity:0;transition:opacity .8s .9s}
.reveal.open .r1,.reveal.open .r2{opacity:1;transform:none}
.reveal.open .r3{opacity:.85}
@media (prefers-reduced-motion:reduce){.sig::after,.sig.pressed{animation:none}}
.reveal.open{height:6.6rem}
.reveal .r3{margin-top:.2rem}

/* ---------- v1.12: the signature springs from the heartprint */
.reveal{display:none}
.sig-wrap{position:relative;display:inline-grid;place-items:center}
.spring{position:absolute;left:50%;bottom:100%;pointer-events:none;transform-origin:0 100%;transform:translateX(-50%) scale(0) rotate(-14deg);opacity:0;transition:transform .55s cubic-bezier(.25,1.7,.4,1),opacity .3s}
.spring .thread{display:block;width:1px;height:14px;margin:0 auto;background:linear-gradient(180deg,var(--gold),transparent)}
.spring .tag{display:block;font-family:var(--script);font-size:1.15rem;line-height:1;white-space:nowrap;color:var(--violet);padding:.1rem .55rem .25rem;
  background:color-mix(in srgb,var(--pearl) 92%,transparent);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;box-shadow:0 8px 18px -12px rgba(59,39,84,.5);margin-bottom:.1rem}
.spring .tag a{color:inherit;text-decoration:none}
.spring.out{transform:translateX(-50%) scale(1) rotate(0);opacity:1;pointer-events:auto;animation:tagBob 3s ease-in-out .6s infinite alternate}
@keyframes tagBob{from{translate:0 0}to{translate:0 -3px}}
.sig[aria-pressed="true"]{color:var(--violet)}
@media (prefers-reduced-motion:reduce){.spring{transition:none}.spring.out{animation:none}}
.spring{left:100%;bottom:auto;top:50%;transform-origin:0 50%;transform:translate(.2rem,-50%) scale(0) rotate(-10deg);display:flex;align-items:center}
.spring .thread{width:16px;height:1px;margin:0;background:linear-gradient(90deg,var(--gold),transparent)}
.spring .tag{margin:0;font-size:1.05rem}
.spring.out{transform:translate(.2rem,-50%) scale(1) rotate(0)}
@keyframes tagBob{from{translate:0 0}to{translate:3px 0}}
@media (max-width:700px){.foot .made{flex-direction:column;gap:.6rem}.spring{left:50%;top:auto;bottom:100%;transform-origin:50% 100%;transform:translate(-50%,-.2rem) scale(0);flex-direction:column}.spring .thread{width:1px;height:12px;background:linear-gradient(180deg,transparent,var(--gold))}.spring.out{transform:translate(-50%,-.2rem) scale(1)}}
.spring .thread{display:block;width:16px;height:1px;flex:none;align-self:center}

/* ---------- v1.13: a tiny purple line of text that springs up and curves to the right */
.spring{all:unset;position:absolute;left:50%;bottom:50%;width:160px;height:60px;overflow:visible;pointer-events:none;opacity:0}
.spring .sigtext{font-family:var(--text);font-size:10.5px;letter-spacing:.04em;fill:var(--violet)}
.spring .sigtext textPath{stroke-dasharray:1;stroke-dashoffset:1}
.spring text{opacity:0}
.spring.out{opacity:1}
.spring.out text{opacity:1;animation:sigDraw .45s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes sigDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.spring.in text{animation:sigHide .3s ease-in forwards}
@keyframes sigHide{to{clip-path:inset(0 0 0 100%);opacity:0}}
@media (max-width:700px){.spring{left:auto;right:0}}
@media (prefers-reduced-motion:reduce){.spring.out text,.spring.in text{animation:none}}
.spring{all:revert;position:absolute;left:50%;bottom:55%;width:160px;height:60px;overflow:visible;pointer-events:none;opacity:0;display:block;transform:none;transition:none;animation:none}
.spring.out{opacity:1;transform:none;animation:none}
.spring text{font-family:"EB Garamond",Garamond,serif;font-size:10.5px;letter-spacing:.04em;fill:#5d3f8a}
.sig-wrap{overflow:visible}
.spring{width:170px!important;height:64px!important;min-width:170px;min-height:64px;left:40%;bottom:60%;z-index:5}
.spring text{font-size:11px}
.spring{left:70%;bottom:40%}

/* ---------- v1.14 */
.ilm .of{font-family:var(--display);font-style:italic;font-weight:500;font-size:.26em;letter-spacing:.42em;padding-left:.42em;color:var(--gold-deep);margin-top:-.15em;opacity:.9}
.foot .made{margin-top:0;font-size:.78rem}
.foot .ilm-line{margin-top:.55rem;font-size:.98rem;color:var(--plum-soft)}
@media (max-width:700px){.ilm .of{font-size:.3em}}

/* v1.15 */
.unforgettable{margin-top:3.4rem}
@media (max-width:700px){.unforgettable{margin-top:2.6rem}}

/* ---------- v1.16 */

/* A pearl that has been touched stays a pearl. It rings with light for a moment, and then it is
   exactly the colour it always was -- no refresh needed, however many of them are open. */
.pearl-item.open .pearl-btn,
.pearl-item.open .pearl-btn:hover{
  background:radial-gradient(circle at 32% 28%,#ffffff 0,#fbf7f1 22%,#efe6f5 52%,#d9cbe6 78%,#bfaee0 100%)}
.pearl-btn.chimed{animation:pearlBob 5s ease-in-out infinite,pearlRing 1.5s cubic-bezier(.2,.8,.3,1)}
@keyframes pearlRing{
  0%{box-shadow:0 10px 22px -10px rgba(59,39,84,.55),inset -4px -6px 10px rgba(155,133,204,.35),inset 3px 4px 8px rgba(255,255,255,.9),0 0 0 0 rgba(214,176,98,.62),0 0 14px 2px rgba(240,215,154,.5)}
  100%{box-shadow:0 10px 22px -10px rgba(59,39,84,.55),inset -4px -6px 10px rgba(155,133,204,.35),inset 3px 4px 8px rgba(255,255,255,.9),0 0 0 22px rgba(214,176,98,0),0 0 0 0 rgba(240,215,154,0)}}

/* The heartprints are small, so they are drawn with fewer, lighter ridges and given a little more
   room -- a blot at 18px reads as a heart at 26. The ones that do something beam, so the invitation
   to touch them does not have to be written out. */
.nav-home svg{width:27px;height:25px}
.play svg{width:26px;height:24px}
.tide-btn svg{width:25px;height:23px}
.polaroid svg{width:30px;height:28px}
.sig{width:32px;height:30px}
.sig::after{width:32px;height:30px}

@keyframes hpBeam{
  0%,100%{filter:drop-shadow(0 0 0 rgba(201,164,92,0));transform:scale(1)}
  44%{filter:drop-shadow(0 0 6px rgba(226,190,116,.9)) drop-shadow(0 0 15px rgba(201,164,92,.38));transform:scale(1.085)}}
@keyframes hpHalo{
  0%{box-shadow:0 0 0 0 rgba(201,164,92,.42)}
  65%{box-shadow:0 0 0 15px rgba(201,164,92,0)}
  100%{box-shadow:0 0 0 0 rgba(201,164,92,0)}}
.sig svg,.tide-btn svg,.play svg{animation:hpBeam 2.9s ease-in-out infinite;transform-origin:50% 55%}
.tide-btn svg{animation-delay:-.9s}
.play svg{animation-delay:-1.8s}
.sig{opacity:1}
.sig::after{animation:hpHalo 2.9s ease-out infinite}
.sig:hover svg,.tide-btn:hover svg,.play:hover svg{animation-play-state:paused;filter:drop-shadow(0 0 8px rgba(233,205,140,.95))}
.tide-btn[aria-pressed="true"] svg{animation:none;filter:none}

@media (prefers-reduced-motion:reduce){
  .sig svg,.tide-btn svg,.play svg,.sig::after,.pearl-btn.chimed{animation:none}}

/* ---------- v1.16: the cover, rebuilt as an editorial cover

   The old one was a purple wash with four stacked cover lines over her dress. A fashion cover is
   mostly photograph and white space: one enormous masthead, one line, one flourish, and the rest
   left alone. The plum and gold stay, as type and rules rather than as a tint over everything. */
.mag{background:#efeaf4;box-shadow:26px 38px 70px -32px rgba(40,26,62,.55),0 0 0 1px rgba(184,146,74,.22);border-radius:2px}
.mag img{top:0;height:100%;object-position:50% 16%;filter:saturate(1.04) contrast(1.03)}
.mag .shade{background:linear-gradient(180deg,rgba(255,253,248,.78) 0%,rgba(255,253,248,.26) 17%,rgba(255,253,248,0) 36%,
  rgba(255,253,248,.06) 62%,rgba(253,249,243,.55) 86%,rgba(250,245,238,.78) 100%)}
.mag::after{background:linear-gradient(118deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.28) var(--shine,50%),rgba(255,255,255,0) 68%)}

.mag .mast{top:2.2%;left:0;right:0;font-family:var(--display);font-weight:300;font-size:min(6.9rem,23vw);
  letter-spacing:.16em;text-indent:.16em;line-height:.92;color:var(--plum);text-shadow:none;mix-blend-mode:normal}
.mag .mrule{position:absolute;left:8%;right:8%;top:20.5%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 85%,transparent) 18%,color-mix(in srgb,var(--gold) 85%,transparent) 82%,transparent)}

.mag .spine{position:absolute;left:1.4%;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--display);font-weight:600;font-size:.6rem;letter-spacing:.36em;text-transform:uppercase;
  color:color-mix(in srgb,var(--plum) 78%,transparent)}
.mag .spine i{font-style:normal;color:var(--gold)}

.mag .script{position:absolute;right:5.5%;top:40%;font-family:var(--script);font-size:2.35rem;line-height:1;
  color:var(--plum);text-shadow:0 1px 10px rgba(255,253,248,.85)}

.mag .lines{position:absolute;left:8%;right:26%;bottom:8%;top:auto;display:block;color:var(--plum)}
.mag .lines p{margin:0;font-family:var(--display);font-weight:600;font-size:1.14rem;line-height:1.1;
  color:var(--plum);text-shadow:none;letter-spacing:.005em}
.mag .lines p::before{content:"";display:block;width:2.3rem;height:1px;background:var(--gold);margin-bottom:.42rem;opacity:.95}
.mag .lines p em{display:block;margin-top:.3rem;font-family:var(--text);font-style:italic;font-weight:400;
  font-size:.8rem;letter-spacing:.02em;color:color-mix(in srgb,var(--gold) 86%,#6b4f22)}

.mag .mag-hp{position:absolute;right:6%;bottom:7%;width:21px;height:19px;color:var(--gold);opacity:.9}
.mag .issue,.mag .side{display:none}

@media (max-width:700px){
  .mag .mast{font-size:min(5.6rem,21vw)}
  .mag .script{font-size:2rem;top:42%}
  .mag .lines{right:22%;bottom:7.5%}
  .mag .lines p{font-size:1.02rem}
  .mag .spine{font-size:.54rem;letter-spacing:.3em}}

/* v1.16a: let the masthead clear her face, and keep the spine inside the cover */
.mag img{transform:scale(1.2);transform-origin:50% 0%;object-position:50% 0}
.mag .mast{top:1.1%;font-size:min(5.1rem,17vw);letter-spacing:.2em;text-indent:.2em}
.mag .mrule{top:14.2%}
.mag .years{position:absolute;left:0;right:0;top:15.8%;text-align:center;font-family:var(--display);
  font-weight:600;font-size:.6rem;letter-spacing:.42em;text-indent:.42em;
  color:color-mix(in srgb,var(--gold) 92%,#5a4018)}
.mag .spine{top:52%;font-size:.55rem;letter-spacing:.42em}
.mag .script{top:27.5%;right:5%;font-size:2.5rem;text-shadow:0 1px 14px rgba(255,253,248,.95),0 0 26px rgba(255,253,248,.8)}
.mag .mag-hp{width:25px;height:23px;opacity:1;right:6.5%;bottom:7.5%}
@media (max-width:700px){
  .mag .mast{font-size:min(4.3rem,16vw)}
  .mag .script{font-size:2.05rem;top:29%}
  .mag .years{font-size:.54rem;letter-spacing:.34em;text-indent:.34em}}

/* v1.16b: the dates and the flourish move off her face and onto clear ground */
.mag .years{left:8%;right:auto;top:15.6%;text-align:left;font-size:.58rem;letter-spacing:.34em;text-indent:.34em;
  color:color-mix(in srgb,var(--plum) 72%,transparent);text-shadow:0 1px 8px rgba(255,253,248,.9)}
.mag .script{top:auto;bottom:18.5%;right:6%;font-size:2.25rem;text-align:right;
  color:color-mix(in srgb,var(--plum) 94%,#000)}
.mag .spine{color:color-mix(in srgb,var(--plum) 86%,transparent);top:54%}
@media (max-width:700px){.mag .script{font-size:1.85rem;bottom:19%}}

/* v1.16c: the heartprint strokes sit right on the edge of the box, so let them paint outside it */
.sig svg,.nav-home svg,.play svg,.tide-btn svg,.polaroid svg,.mag .mag-hp{overflow:visible}