:root{
  --ivory:#f6efed; --ivory-2:rgba(246,239,237,.8); --ivory-3:rgba(246,239,237,.52);
  --ink:#38374f; --ink-2:rgba(56,55,79,.82); --ink-3:rgba(56,55,79,.55);
  --rose:#e8d0d7; --rose-2:#d9afbb; --mauve:#928092; --slate:#687797;
  --serif:'Cormorant Garamond','Cormorant',Garamond,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(20px,5.5vw,88px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --fg:var(--ivory); --fg2:var(--ivory-2); --fg3:var(--ivory-3);
  --speck:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='1' seed='7'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .15  0 0 0 0 .22  18 0 0 0 -11.5'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#6b697f;color:var(--fg);font-family:var(--sans);font-weight:350;font-size:1rem;line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:rgba(232,208,215,.55);color:#38374f}
.tone-dark{--fg:var(--ink);--fg2:var(--ink-2);--fg3:var(--ink-3);color:var(--fg)}

/* ---------- fixed layers */
#sky{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,var(--s1,#6b697f) 0%,var(--s2,#8d798d) 100%)}
#sky::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 60% at 88% 104%,rgba(232,208,215,.28),transparent 62%),radial-gradient(80% 50% at 0% 0%,rgba(40,36,60,.18),transparent 60%)}
#gl,#fallback{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#fallback{display:none}
#grain{position:fixed;inset:-60%;z-index:70;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 .7'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");animation:grain 1.4s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
main{position:relative;z-index:2}

/* ---------- loader */
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:linear-gradient(180deg,#6b697f,#928092 60%,#c9a3b0);transition:opacity 1.1s var(--ease),visibility 0s linear 1.1s}
#loader.done{opacity:0;visibility:hidden}
.ld{display:flex;flex-direction:column;align-items:center;gap:26px}
.ld-stack{position:relative;width:90px;height:70px}
.ld-stack i{position:absolute;left:50%;border-radius:50%;background:var(--speck),radial-gradient(120% 110% at 68% 22%,#a9adca 0%,#8990b0 30%,#6c7596 58%,#4d5474 86%);box-shadow:0 8px 10px -6px rgba(24,20,44,.6),inset -3px -2px 5px rgba(233,200,212,.35);opacity:0;transform:translate(-50%,-26px);animation:drop .9s var(--ease) forwards}
.ld-stack i:nth-child(1){width:84px;height:30px;bottom:0;animation-delay:.15s}
.ld-stack i:nth-child(2){width:62px;height:22px;bottom:29px;animation-delay:.45s}
.ld-stack i:nth-child(3){width:44px;height:17px;bottom:50px;animation-delay:.75s}
@keyframes drop{to{opacity:1;transform:translate(-50%,0)}}
.ld-name{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.25rem;letter-spacing:.14em;color:var(--ivory-2);opacity:0;animation:fade 1s ease .5s forwards}
@keyframes fade{to{opacity:1}}

/* ---------- header / nav */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:24px var(--pad);color:var(--ivory);transition:color .7s ease;pointer-events:none}
.top>*{pointer-events:auto}
body.ui-dark .top,body.ui-dark .cairn{color:var(--ink)}
.mono{font-family:var(--serif);font-style:italic;font-size:1.3rem;letter-spacing:.1em}
.mono b{font-weight:400;font-style:normal;opacity:.5;margin:0 .35em}
.idx-btn{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;display:flex;gap:14px;align-items:center;font-weight:400}
.idx-btn i{display:block;width:28px;height:1px;background:currentColor;position:relative}
.idx-btn i::after{content:"";position:absolute;right:0;top:-4px;width:16px;height:1px;background:currentColor}
.cairn{position:fixed;right:calc(var(--pad)*.42);top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column-reverse;align-items:center;gap:7px;color:var(--ivory);opacity:0;transition:opacity .8s ease,color .7s ease}
.cairn.show{opacity:1}
.cairn a{position:relative;display:block;padding:2px}
.cairn a i{display:block;height:7px;border-radius:50%;border:1px solid currentColor;opacity:.55;transition:all .5s var(--ease)}
.cairn a.on i{background:currentColor;opacity:1}
.cairn a span{position:absolute;right:calc(100% + 14px);top:50%;transform:translate(6px,-50%);white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:1rem;opacity:0;transition:all .4s var(--ease);pointer-events:none}
.cairn a:hover span,.cairn a:focus-visible span{opacity:1;transform:translate(0,-50%)}

.index{position:fixed;inset:0;z-index:90;background:rgba(48,46,68,.72);backdrop-filter:blur(26px) saturate(1.1);-webkit-backdrop-filter:blur(26px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s linear .7s;padding:80px var(--pad)}
.index.open{opacity:1;visibility:visible;transition:opacity .7s var(--ease)}
.index ol{list-style:none;columns:2;column-gap:clamp(40px,8vw,140px)}
.index li{break-inside:avoid;opacity:0;transform:translateY(20px);transition:all .8s var(--ease)}
.index.open li{opacity:1;transform:none}
.index a{display:flex;align-items:baseline;gap:18px;padding:10px 0;font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.4vw,3.1rem);line-height:1.15;color:var(--ivory);transition:color .3s,transform .5s var(--ease)}
.index a:hover{color:var(--rose);transform:translateX(8px)}
.index a small{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;min-width:2.8em;opacity:.6}
.index .x{position:absolute;top:24px;right:var(--pad);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ivory)}

/* ---------- type */
.kicker,.mk{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fg2);font-weight:400;line-height:1.6}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,6.4vw,6.8rem);line-height:.98;letter-spacing:-.005em;color:var(--fg)}
.lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.95vw,1.85rem);line-height:1.42;color:var(--fg)}
.body{max-width:33em;color:var(--fg2);font-size:1.03rem;line-height:1.85}
.it{font-style:italic}
.mark{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.stone{display:inline-block;border-radius:50%;background:var(--speck),radial-gradient(120% 110% at 68% 22%,#a9adca 0%,#8990b0 28%,#6c7596 56%,#4d5474 84%,#3f3a51 100%);box-shadow:0 12px 16px -9px rgba(20,18,40,.65),inset -4px -3px 8px rgba(233,200,212,.34),inset 3px 5px 9px rgba(255,255,255,.1)}
.mark .stones{position:relative;width:46px;height:34px;flex:none}
.mark .stones .stone:nth-child(1){position:absolute;left:0;bottom:0;width:46px;height:20px}
.mark .stones .stone:nth-child(2){position:absolute;left:10px;bottom:18px;width:28px;height:13px}

/* split word reveal */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translateY(108%);transition:transform 1.35s var(--ease);transition-delay:calc(var(--i)*70ms)}
.on .w>span,.on.w>span{transform:none}
.js .rv{opacity:0;transform:translateY(36px);transition:opacity 1.5s var(--ease),transform 1.5s var(--ease);transition-delay:var(--d,0s)}
.js .rv.on{opacity:1;transform:none}

/* ---------- pebble photos */
.pb{position:relative;margin:0;filter:drop-shadow(0 36px 40px rgba(26,22,46,.32)) drop-shadow(0 8px 10px rgba(26,22,46,.12))}
.pb .sh{position:relative;display:block;width:100%;aspect-ratio:var(--ar,3/4);overflow:hidden;background:linear-gradient(160deg,#8b7e95,#5f5870);cursor:zoom-in}
.pb img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);opacity:0;transition:transform 2.4s var(--ease),opacity 1.6s var(--ease)}
.pb.on img{transform:scale(1.015);opacity:1}
.pb .sh:hover img{transform:scale(1.05)}
.pb .sh::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 55% at 80% 10%,rgba(255,238,244,.26),transparent 62%),radial-gradient(90% 70% at 10% 105%,rgba(38,32,62,.34),transparent 62%);mix-blend-mode:soft-light}
.pb figcaption{margin-top:18px;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fg3);text-align:center}

/* ---------- ripple divider */
.ripple{position:relative;height:clamp(70px,9vw,130px);color:var(--fg);opacity:.32;margin-top:clamp(40px,6vw,90px)}
.ripple svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ripple path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;animation:drift 14s ease-in-out infinite alternate}
.ripple path:nth-child(2){animation-duration:17s;opacity:.8}
.ripple path:nth-child(3){animation-duration:20s;opacity:.6}
.ripple path:nth-child(4){animation-duration:23s;opacity:.45}
.ripple path:nth-child(5){animation-duration:26s;opacity:.3}
@keyframes drift{from{transform:translateX(-1.6%)}to{transform:translateX(1.6%)}}

/* ---------- hero */
.hero{position:relative;height:290vh}
.hero-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-copy{position:absolute;left:0;right:0;top:calc(10.5vh + 30px);text-align:center;padding:0 var(--pad)}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(3.15rem,7.4vw,8.8rem);line-height:.94;letter-spacing:.004em;margin:.34em 0 .28em;color:#f8f1ef;text-shadow:0 2px 40px rgba(60,48,84,.16)}
.hero h1 .c{display:inline-block;opacity:0;transform:translateY(.32em);transition:opacity 1.6s var(--ease),transform 1.8s var(--ease);transition-delay:calc(var(--i)*45ms + .1s)}
.hero .kicker,.hero .hl{opacity:0;transition:opacity 1.8s ease 1s}
.ready .hero h1 .c{opacity:1;transform:none}
.ready .hero .kicker,.ready .hero .hl{opacity:1}
.hl{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.65vw,1.6rem);color:var(--ivory-2)}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-size:.6rem;letter-spacing:.36em;text-transform:uppercase;color:var(--ivory-2)}
.cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--ivory),transparent);transform-origin:top;animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.lbl{position:absolute;left:0;top:0;display:flex;align-items:center;gap:14px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.15rem,1.55vw,1.55rem);color:#fbf5f3;opacity:0;white-space:nowrap;pointer-events:none;will-change:transform,opacity;text-shadow:0 1px 18px rgba(50,40,70,.25)}
.lbl::before{content:"";width:clamp(26px,4vw,56px);height:1px;background:currentColor;opacity:.65}
.lbl.l{flex-direction:row-reverse}
.lbl.c{flex-direction:column;gap:6px}
.lbl.c::before{width:1px;height:18px;order:2}

/* ---------- intro */
.intro{padding:clamp(120px,22vh,240px) var(--pad) clamp(40px,8vh,80px);min-height:120vh;display:flex;flex-direction:column;justify-content:center}
.scrub{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.3vw,4.4rem);line-height:1.16;text-align:center;max-width:17.5em;margin:0 auto;color:var(--ivory)}
.scrub span{opacity:.16;transition:opacity .35s linear}

/* ---------- chapters */
.ch{position:relative;padding:clamp(110px,17vh,210px) var(--pad) 0}
.wrap{max-width:1320px;margin:0 auto;position:relative}

.roots-grid{display:grid;grid-template-columns:5fr 1fr 6fr;align-items:center}
.roots-grid .txt{grid-column:1}
.roots-grid .pb{grid-column:3}
.roots .lead{margin-top:34px;max-width:17em}

.mother-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.mother-head .lead{max-width:22em;margin-top:30px}
.mother-grid{display:grid;grid-template-columns:3.2fr 5fr 3.2fr;gap:clamp(20px,4vw,70px);align-items:center;margin-top:clamp(60px,9vw,130px)}
.m1{margin-top:-8vw}.m2{margin-top:12vw}
.quote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.8rem,3.1vw,3.2rem);line-height:1.2;text-align:center;position:relative;color:var(--fg)}
.quote::before{content:"\201C";display:block;font-size:2.4em;line-height:.6;color:var(--rose-2);opacity:.9;margin-bottom:.1em;font-style:normal}
.mother .body{margin:clamp(50px,7vw,100px) auto 0;text-align:center;max-width:36em}
.m3{width:62%;margin:clamp(40px,5vw,70px) auto 0}

.pharm-grid{display:grid;grid-template-columns:6.4fr 1fr 4.6fr;align-items:center}
.ph-figs{position:relative;aspect-ratio:1/1.06}
.ph-figs .pb{position:absolute}
.ph-figs .p1{left:0;top:4%;width:56%}
.ph-figs .p2{right:0;bottom:-6%;width:40%}
.ph-figs .p3{right:6%;top:-4%;width:30%}
.ph-text{grid-column:3}
.ph-text .lead{margin-top:32px}
.triad{display:flex;gap:14px;align-items:center;margin-top:36px;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--fg2)}
.triad i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}

.flags-grid{display:grid;grid-template-columns:7fr 1fr 4.4fr;align-items:end}
.flags .h2.big{font-size:clamp(3rem,6.6vw,7.4rem);line-height:.96;max-width:9.5em}
.flags-sub{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.6rem);margin:28px 0 26px;display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.flags-sub em{font-size:.62em;opacity:.7}
.flags-sub .bar{display:inline-flex;height:.46em;width:1.4em;border-radius:.3em;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.flags-sub .bar b{flex:1}
.flags .pb{grid-column:3}
.moment{display:grid;grid-template-columns:3fr 1fr 6fr;align-items:center;margin-top:clamp(90px,12vw,170px)}
.moment .pb{grid-column:1}
.moment .mt{grid-column:3;max-width:30em}
.date{font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,7vw,7rem);line-height:.9;letter-spacing:.02em;color:var(--fg);opacity:.92}
.date small{font-family:var(--sans);display:block;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fg3);margin-bottom:18px}
.moment .lead{margin-top:26px}
.moment .body{margin-top:12px}

.artist-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.artist-grid{display:grid;grid-template-columns:4fr 4.6fr 3.4fr;gap:clamp(20px,4.4vw,76px);align-items:center;margin-top:clamp(50px,7vw,100px)}
/* a2 spans both rows so the lower pair tucks up under the first pair instead of waiting below it */
.a1{grid-column:1;grid-row:1}
.artist-text{grid-column:2;grid-row:1}
.a2{grid-column:3;grid-row:1/span 2;align-self:start;margin-top:16vw}
.a3{grid-column:1;grid-row:2;align-self:start;margin-top:1vw}
.a4{grid-column:2;grid-row:2;align-self:start;width:80%;justify-self:center;margin-top:6vw}
.big-it{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.9rem,3.2vw,3.2rem);line-height:1.16;color:var(--fg)}
.artist .body{margin-top:30px}

.dishes-grid{display:grid;grid-template-columns:5fr 1fr 6fr;align-items:center}
.wordmark{font-size:clamp(3.4rem,7.4vw,8rem)}
.wordmark em{font-style:italic;font-weight:300;color:var(--rose)}
.dishes .lead{margin-top:26px;max-width:20em}
.dishes .body{margin-top:22px}
.offers{list-style:none;margin-top:44px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.offers li{display:flex;align-items:center;gap:22px;font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.55rem)}
.offers .stone{flex:none;animation:bob 6s ease-in-out infinite}
.offers li:nth-child(1) .stone{width:44px;height:18px;margin-left:15px}
.offers li:nth-child(2) .stone{width:60px;height:24px;margin-left:7px;animation-delay:-2s}
.offers li:nth-child(3) .stone{width:74px;height:30px;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-4px)}}
.btn{display:inline-flex;align-items:center;gap:16px;margin-top:46px;padding:16px 34px;border:1px solid var(--fg3);border-radius:999px;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;font-weight:400;transition:background .5s var(--ease),color .5s,border-color .5s}
.btn:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn i{width:22px;height:1px;background:currentColor}
.enq .btn[aria-expanded="true"]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
/* enquire card: rises out of the button like a stone surfacing */
.enq{position:relative;display:inline-block}
.enq-card{position:absolute;left:0;bottom:calc(100% - 30px);z-index:20;width:min(330px,82vw);padding:24px 28px 16px;border-radius:30px;
  background:linear-gradient(160deg,rgba(92,86,118,.86),rgba(56,55,79,.9));backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);
  border:1px solid rgba(246,239,237,.2);box-shadow:0 40px 70px -30px rgba(14,12,30,.75),inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.96);transform-origin:20% 100%;transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s linear .5s}
.enq-card.open{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.enq-card .mk{margin-bottom:6px;color:var(--rose)}
.enq-row{display:flex;flex-direction:column;padding:12px 0;border-top:1px solid rgba(246,239,237,.14);transition:color .35s,padding-left .5s var(--ease)}
.enq-row:first-of-type{border-top:0}
.enq-row small{font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory-3)}
.enq-row span{font-family:var(--serif);font-size:1.45rem;line-height:1.3;color:var(--ivory)}
.enq-row:hover{padding-left:6px}.enq-row:hover span{color:var(--rose)}

/* food constellation: small pebbles surface one by one, joined by faint star lines */
.feast{margin-top:clamp(70px,9vw,130px)}
.feast-lbl{text-align:center;color:var(--ivory-3)}
.feast-lbl b{font-weight:400;opacity:.6;margin:0 .5em}
.feast-sky{position:relative;margin-top:clamp(18px,3vw,40px)}
.feast-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.feast-lines path{fill:none;stroke:rgba(246,239,237,.3);stroke-width:1;stroke-dasharray:4 7;vector-effect:non-scaling-stroke;stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.6s var(--ease) .5s}
.feast-sky.on .feast-lines path{stroke-dashoffset:0}
.feast-lines circle{fill:#f6efed;opacity:0;transition:opacity 1.2s ease}
.feast-sky.on .feast-lines circle{opacity:.55;animation:twinkle 3.6s ease-in-out infinite;animation-delay:var(--tw)}
@keyframes twinkle{50%{opacity:.12}}
.fd{position:absolute;margin:0;padding:0;opacity:0;transform:translateY(40px) scale(.55);transition:opacity .9s var(--ease),transform 1.3s cubic-bezier(.3,1.5,.5,1);transition-delay:var(--dl)}
.feast-sky.on .fd{opacity:1;transform:none}
.fd .bob{display:block;animation:bob 7s ease-in-out infinite;animation-delay:var(--bd)}
.fd .sh{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:linear-gradient(160deg,#8b7e95,#5f5870);cursor:zoom-in}
.fd .sh img{width:100%;height:100%;object-fit:cover;opacity:1;transform:scale(1.02);transition:transform 1.6s var(--ease)}
.fd .sh::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 55% at 80% 10%,rgba(255,238,244,.22),transparent 62%),radial-gradient(90% 70% at 10% 105%,rgba(38,32,62,.3),transparent 62%);mix-blend-mode:soft-light}
.fd .sh:hover img{transform:scale(1.1)}
.fd{filter:drop-shadow(0 22px 22px rgba(20,16,40,.4)) drop-shadow(0 4px 6px rgba(20,16,40,.2))}

/* the 30: rolls up like a counter, then light moves through it and rings ripple out */
.t-num{display:inline-flex;position:relative;font-family:var(--serif);font-weight:300;font-size:clamp(7rem,17vw,17rem);line-height:.9;letter-spacing:-.02em;margin:0 0 22px;transition:filter 1.6s ease;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.t-num .dg{display:block;height:.9em;overflow:hidden;padding:0 .01em}
.t-num .strip{display:block;transform:translateY(0);transition:transform 2.8s cubic-bezier(.16,1,.3,1)}
.t-num .dg+.dg .strip{transition-duration:3.2s}
.t-num .strip b{display:block;height:.9em;line-height:.9em;font-weight:300;
  background:linear-gradient(100deg,#4c4866 0%,#8c6f86 38%,#f6e2e8 50%,#8c6f86 62%,#b88b9c 100%);background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.t-num.lit .strip{transform:translateY(calc(var(--to) * -.9em))}
.t-num.landed{filter:drop-shadow(0 0 34px rgba(246,226,232,.55))}
.t-num.landed .strip b{animation:shimmer 5.5s ease-in-out infinite}
@keyframes shimmer{0%{background-position:100% 0}55%,100%{background-position:-60% 0}}
.t-echo{position:absolute;left:0;top:0;height:.9em;line-height:.9em;pointer-events:none;color:transparent;-webkit-text-stroke:1px rgba(140,111,134,.7);opacity:0;transform-origin:50% 55%}
.t-num.landed .t-echo{animation:echo 4s cubic-bezier(.2,.6,.3,1) infinite}
.t-num.landed .t-echo.e2{animation-delay:2s}
@keyframes echo{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}

.love-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.love-head .lead{max-width:24em;margin-top:30px}
.love-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,30px);margin-top:clamp(60px,8vw,120px);align-items:start}
.lv1{grid-column:4/span 5;grid-row:1}
.lv2{grid-column:1/span 3;grid-row:1;margin-top:16vw}
.lv3{grid-column:10/span 3;grid-row:1;margin-top:6vw}
.lv4{grid-column:2/span 3;grid-row:2;margin-top:-10vw}
.lv5{grid-column:6/span 3;grid-row:2;margin-top:4vw}
.lv6{grid-column:9/span 3;grid-row:2;margin-top:-6vw}

.whl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,70px);margin-top:clamp(60px,8vw,110px);align-items:start}
.whl-c:nth-child(2){margin-top:9vw}
.whl-c:nth-child(3){margin-top:3vw}
.whl-c h3{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3vw,2.9rem);margin:34px 0 10px;line-height:1}
.whl-c p{color:var(--fg2);font-size:1rem;line-height:1.8;max-width:24em}
.wavebox{background:radial-gradient(90% 70% at 70% 18%,#8d8aa9,#5d5a78 55%,#403c57);display:grid;place-items:center;cursor:default}
.wavebox svg{width:78%;height:60%;overflow:visible}
.wavebox path{fill:none;stroke:#f1e4e8;stroke-width:1.1;vector-effect:non-scaling-stroke}
.summary{margin-top:clamp(90px,12vw,170px);text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2.2rem,5.4vw,5.6rem);line-height:1.05}

/* ---------- thirty */
.thirty{position:relative;height:330vh}
.thirty-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:0 var(--pad);overflow:hidden}
.thirty-grid{display:grid;grid-template-columns:7fr 1fr 4fr;align-items:center;width:100%}
.t-left{position:relative}
.litany{list-style:none}
.litany li{font-family:var(--serif);font-weight:300;font-size:clamp(1.45rem,2.7vw,2.75rem);line-height:1.22;opacity:.18;transform:translateX(-10px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.litany li.on{opacity:1;transform:none}
.litany li em{font-style:italic}
.t-words{margin-top:26px;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fg2);opacity:0;transition:opacity 1.2s ease}
.t-words.on{opacity:1}
.t-fig{grid-column:3;max-height:78vh}

.celebrate{padding-top:clamp(40px,8vh,90px)}
.celebrate ol{list-style:none;margin-top:34px;border-top:1px solid rgba(56,55,79,.18)}
.celebrate li{display:grid;grid-template-columns:5em 1fr;align-items:baseline;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid rgba(56,55,79,.18);font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2.5vw,2.4rem);line-height:1.25}
.celebrate li small{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;color:var(--fg3)}

/* ---------- album */
.album-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:clamp(40px,6vw,80px)}
.album-grid{columns:4 240px;column-gap:clamp(14px,1.8vw,26px)}
.tile{display:block;width:100%;break-inside:avoid;margin-bottom:clamp(14px,1.8vw,26px);position:relative;overflow:hidden;border-radius:44% 56% 46% 54%/13% 15% 14% 13%;box-shadow:0 26px 34px -22px rgba(40,34,60,.55);transform:translateZ(0);transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.tile:nth-child(3n+2){border-radius:52% 48% 55% 45%/15% 12% 16% 13%}
.tile:nth-child(3n){border-radius:48% 52% 42% 58%/12% 16% 12% 15%}
.tile img{width:100%;height:auto;transition:transform 1.4s var(--ease),opacity 1.2s ease;opacity:0}
.tile img.ld{opacity:1}
.tile:hover{transform:translateY(-6px);box-shadow:0 36px 44px -24px rgba(40,34,60,.65)}
.tile:hover img{transform:scale(1.04)}

/* ---------- finale */
.finale{position:relative;height:300vh}
.fin-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.fin-copy{position:absolute;left:0;right:0;top:calc(11vh + 26px);text-align:center;padding:0 var(--pad)}
.fin-l{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3.6vw,3.7rem);line-height:1.16;color:var(--ink);opacity:0;max-width:18em;margin:0 auto}
.fin-l+.fin-l{margin-top:.35em}
.fin-l.it{font-style:italic}
.fin-sign{position:absolute;left:0;right:0;top:calc(11vh + 26px);font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(3rem,7vw,7.2rem);line-height:1;color:var(--ink);opacity:0;text-align:center}

.foot{position:relative;z-index:3;background:linear-gradient(180deg,#c4b9c7,#b4aaba);padding:0 var(--pad) 46px;text-align:center}
.foot .ripple{margin-top:0;height:90px;opacity:.35}
.foot-name{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1;margin-top:40px}
.foot-meta{margin-top:22px;font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2)}
.foot-top{display:inline-block;margin-top:40px;font-family:var(--serif);font-style:italic;font-size:1.15rem;border-bottom:1px solid var(--ink-3);padding-bottom:3px}

/* ---------- lightbox */
.lb{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.lb.open{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.lb-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(62,58,84,.9),rgba(56,55,79,.94));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.lb-fig{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;max-width:min(92vw,1100px);touch-action:pan-y}
.lb-fig img{max-width:100%;max-height:78vh;max-height:78svh;border-radius:26px;box-shadow:0 40px 80px -30px rgba(10,8,24,.7);transition:opacity .5s var(--ease),transform .7s var(--ease);user-select:none;-webkit-user-drag:none}
.lb-fig img.swap{opacity:0;transform:scale(.97)}
.lb-cap{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ivory-2);min-height:1.6em;text-align:center}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:var(--ivory);border:1px solid rgba(246,239,237,.25);transition:background .4s,border-color .4s}
.lb-nav:hover{background:rgba(246,239,237,.1);border-color:rgba(246,239,237,.6)}
.lb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1}
.lb-prev{left:clamp(10px,3vw,40px)}.lb-next{right:clamp(10px,3vw,40px)}
.lb-close{position:absolute;top:24px;right:var(--pad);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ivory)}
.lb-count{position:absolute;top:28px;left:var(--pad);font-family:var(--serif);font-size:1.1rem;color:var(--ivory-2);letter-spacing:.08em}

/* ---------- responsive */
@media (max-width:980px){
  .index ol{columns:1}
  .roots-grid,.pharm-grid,.flags-grid,.dishes-grid,.moment,.thirty-grid{grid-template-columns:1fr}
  .roots-grid .pb,.flags .pb,.ph-text,.moment .pb,.moment .mt,.t-fig{grid-column:1}
  .roots-grid .pb{margin-top:60px;width:86%;justify-self:end}
  .ph-figs{margin-bottom:70px}
  .flags .pb{margin-top:60px;width:78%;justify-self:end}
  .moment .pb{width:58%}
  .moment .mt{margin-top:40px}
  .dishes-grid .pb{order:2;margin-top:60px;width:82%}
  .mother-grid{grid-template-columns:1fr 1fr;row-gap:50px}
  .mother-grid .quote{grid-column:1/-1;grid-row:1}
  .m1,.m2{margin-top:0}.m2{margin-top:18vw}
  .m-mid{grid-column:1/-1;grid-row:1}
  .m3{width:48%}
  .artist-grid{grid-template-columns:1fr 1fr}
  .artist-text{grid-column:1/-1;grid-row:1}
  .a1{grid-column:1;grid-row:2;align-self:start}
  .a2{grid-column:2;grid-row:2;align-self:start;margin-top:22vw}
  .a3{grid-column:1;grid-row:3;align-self:start;margin-top:-17vw}
  .a4{grid-column:2;grid-row:3;align-self:start;width:100%;justify-self:auto;margin-top:5vw}
  .love-grid{grid-template-columns:1fr 1fr;gap:18px}
  .love-grid .pb{grid-column:auto!important;grid-row:auto!important;margin-top:0!important}
  .love-grid .pb:nth-child(even){margin-top:16vw!important}
  .love-grid .lv1{grid-column:1/-1!important;width:80%;justify-self:center}
  .whl-grid{grid-template-columns:1fr;gap:70px}
  .whl-c{margin-top:0!important;width:88%}
  .whl-c:nth-child(2){justify-self:end}
  .thirty{height:300vh}
  .thirty-grid{position:relative}
  .t-fig{position:absolute;right:0;top:-2vh;width:38%;z-index:-1;opacity:.95}
  .t-num{font-size:clamp(6rem,30vw,10rem)}
  .mother-grid .quote{grid-column:auto;grid-row:auto}
  .celebrate li{grid-template-columns:3.2em 1fr}
  .cairn{display:none}
}
@media (max-width:560px){
  .lb-nav{width:46px;height:46px;top:auto;bottom:22px;transform:none}
  .lb-fig img{max-height:70svh}
  .hero .kicker{max-width:19em;margin:0 auto}
  .album-grid{columns:2}
  .mono{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .js .rv,.pb img,.w>span,.fd{opacity:1!important;transform:none!important}
  #grain{animation:none}
}

/* ================= multi-page additions ================= */
/* page veil: falls on the way out, lifts on arrival */
#loader.leave{transition:opacity .6s var(--ease),visibility 0s}

/* home: the chapters, each a pebble you can walk into */
.toc-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.toc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(34px,5vw,90px) clamp(24px,4vw,70px);margin-top:clamp(60px,8vw,120px);align-items:start}
.toc-card{display:block;color:var(--fg);transition:transform .9s var(--ease)}
.toc-card:nth-child(3n+2){margin-top:9vw}
.toc-card:nth-child(3n){margin-top:3vw}
.toc-card .pb .sh{cursor:pointer}
.toc-card:hover{transform:translateY(-6px)}
.toc-card:hover .pb img{transform:scale(1.06)}
.toc-meta{display:block;margin-top:30px}
.toc-num{display:block;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fg3)}
.toc-t{display:inline-block;margin-top:10px;font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3vw,2.9rem);line-height:1.02;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .8s var(--ease);padding-bottom:4px}
.toc-card:hover .toc-t,.toc-card:focus-visible .toc-t{background-size:100% 1px}
.toc-s{display:block;margin-top:10px;color:var(--fg2);font-size:.98rem;line-height:1.7;max-width:22em}

/* the way onward, at the foot of each page */
.next{position:relative;padding:clamp(110px,16vh,190px) var(--pad) clamp(60px,10vh,110px);text-align:center}
.next a{display:inline-flex;flex-direction:column;align-items:center;gap:14px;color:var(--fg)}
.next .mark{margin:0 0 6px}
.next-t{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(3rem,7vw,7rem);line-height:1;background:linear-gradient(currentColor,currentColor) 50% 100%/0 1px no-repeat;transition:background-size .9s var(--ease),letter-spacing .9s var(--ease);padding-bottom:.08em}
.next a:hover .next-t,.next a:focus-visible .next-t{background-size:100% 1px;letter-spacing:.01em}
.next-s{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fg2)}

/* footer menu, and a footer that sits on the night sky */
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(18px,2.6vw,36px);margin-top:34px}
.foot-nav a{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);transition:color .3s}
.foot-nav a:hover,.foot-nav a.here{color:var(--ink)}
.foot-nav a.here{text-decoration:underline;text-underline-offset:6px}
.foot.night{background:transparent;color:var(--ivory)}
.foot.night .foot-meta,.foot.night .foot-nav a{color:var(--ivory-3)}
.foot.night .foot-nav a:hover,.foot.night .foot-nav a.here{color:var(--ivory)}
.foot.night .foot-top{border-color:var(--ivory-3)}
.index a.here{color:var(--rose)}

/* 404 */
.lost{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--pad)}
.lost .h2{margin:26px 0 20px}

@media (max-width:980px){
  .toc-grid{grid-template-columns:1fr 1fr;gap:54px 20px}
  .toc-card:nth-child(n){margin-top:0}
  .toc-card:nth-child(even){margin-top:16vw}
}
@media (max-width:560px){
  .toc-t{font-size:1.7rem}
  .toc-s{font-size:.9rem}
}

/* ================= top navigation ================= */
/* all pages in the header on wide screens; a Menu button opens them on narrow ones */
.topnav{display:flex;align-items:center;gap:clamp(16px,1.9vw,34px)}
.topnav a{position:relative;padding:6px 0;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400;white-space:nowrap;opacity:.78;transition:opacity .3s}
.topnav a::after{content:"";position:absolute;left:0;right:.28em;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.topnav a:hover,.topnav a.here{opacity:1}
.topnav a:hover::after,.topnav a.here::after{transform:scaleX(1)}
/* a soft band behind the header once the page moves, so links stay legible over photos */
.top::before{content:"";position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(180deg,rgba(52,50,74,.62),rgba(52,50,74,.28) 60%,rgba(52,50,74,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
body.ui-dark .top::before{background:linear-gradient(180deg,rgba(236,226,232,.72),rgba(236,226,232,.3) 60%,rgba(236,226,232,0))}
.top.scrolled::before{opacity:1}
@media (min-width:1101px){.top .idx-btn{display:none}}
@media (max-width:1100px){.topnav{display:none}}

/* menu overlay: pages, each with its chapters beneath */
.index ol{columns:2;column-gap:clamp(40px,8vw,140px)}
.index li{margin-bottom:clamp(14px,2vh,24px)}
.index a.pg{padding:4px 0}
.index .subs{display:flex;flex-wrap:wrap;gap:4px 18px;padding-left:calc(2.8em * .62 + 18px);margin-top:2px}
.index .subs a{display:inline;padding:0;font-family:var(--sans);font-weight:400;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;line-height:2;color:var(--ivory-3);transform:none}
.index .subs a:hover{color:var(--rose);transform:none}
.index a.pg{font-size:clamp(1.7rem,3vw,2.8rem)}
@media (max-width:980px){
  .index{align-items:flex-start;overflow-y:auto}
  .index ol{columns:1}
  .index a.pg{font-size:1.9rem}
  .index .subs{padding-left:0}
}

/* ================= pebble navigation ================= */
/* each page is its own speckled stone; the current page is the rose stone */
.topnav{gap:12px}
.topnav a{display:inline-flex;align-items:center;justify-content:center;padding:11px 19px 10px;opacity:1;
  font-size:.56rem;letter-spacing:.24em;font-weight:500;color:#f6efed;text-shadow:0 1px 2px rgba(30,26,48,.45);
  border-radius:52% 48% 55% 45% / 62% 56% 44% 38%;
  background:var(--speck),radial-gradient(130% 150% at 70% 16%,#aeb2cf 0%,#8d94b4 28%,#6d7697 58%,#4d5474 100%);
  box-shadow:0 12px 14px -9px rgba(18,16,38,.7),0 2px 3px rgba(18,16,38,.25),inset -3px -3px 7px rgba(233,200,212,.32),inset 3px 4px 8px rgba(255,255,255,.16);
  transform:rotate(var(--tilt,0deg));
  transition:transform .6s cubic-bezier(.3,1.5,.5,1),box-shadow .6s var(--ease),filter .4s}
.topnav a::after{display:none}
.topnav a:nth-child(7n+1){--tilt:-1.5deg;border-radius:55% 45% 50% 50% / 60% 60% 40% 40%}
.topnav a:nth-child(7n+2){--tilt:1deg;border-radius:48% 52% 45% 55% / 58% 64% 36% 42%}
.topnav a:nth-child(7n+3){--tilt:-.5deg;border-radius:50% 50% 56% 44% / 66% 54% 46% 34%}
.topnav a:nth-child(7n+4){--tilt:1.5deg;border-radius:46% 54% 50% 50% / 56% 62% 38% 44%}
.topnav a:nth-child(7n+5){--tilt:-1deg;border-radius:53% 47% 47% 53% / 64% 58% 42% 36%}
.topnav a:nth-child(7n+6){--tilt:.5deg;border-radius:50% 50% 45% 55% / 60% 66% 34% 40%}
.topnav a:nth-child(7n+7){--tilt:-1.2deg;border-radius:47% 53% 54% 46% / 58% 60% 40% 42%}
.topnav a:hover,.topnav a:focus-visible{transform:translateY(-3px) rotate(calc(var(--tilt,0deg) * -2));filter:brightness(1.08);
  box-shadow:0 18px 18px -10px rgba(18,16,38,.75),0 2px 3px rgba(18,16,38,.2),inset -3px -3px 7px rgba(233,200,212,.4),inset 3px 4px 8px rgba(255,255,255,.2)}
.topnav a:active{transform:translateY(0) scale(.97)}
.topnav a.here{color:#38374f;text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:var(--speck),radial-gradient(130% 150% at 70% 16%,#fbeef2 0%,#ecd0d9 32%,#d4a9b8 66%,#b48a9d 100%);
  box-shadow:0 12px 16px -9px rgba(80,40,60,.55),0 0 0 1px rgba(255,240,245,.25),inset -3px -3px 7px rgba(150,100,120,.3),inset 3px 4px 8px rgba(255,255,255,.4)}
.topnav a:focus-visible{outline:1px solid var(--rose);outline-offset:4px}
/* the stones settle one by one as the page arrives */
.js .topnav a{opacity:0;translate:0 -14px}
.ready .topnav a{opacity:1;translate:0 0;transition:transform .6s cubic-bezier(.3,1.5,.5,1),box-shadow .6s var(--ease),filter .4s,opacity .7s ease calc(var(--n) * 70ms + .2s),translate .9s cubic-bezier(.3,1.4,.5,1) calc(var(--n) * 70ms + .2s)}
/* the stones carry their own contrast, so the band behind the header can stay faint */
.top::before{opacity:0!important}
/* narrow screens: one stone that opens the menu */
.idx-btn{padding:11px 18px 10px;border-radius:52% 48% 55% 45% / 62% 56% 44% 38%;color:#f6efed!important;font-size:.58rem;font-weight:500;
  background:var(--speck),radial-gradient(130% 150% at 70% 16%,#aeb2cf 0%,#8d94b4 28%,#6d7697 58%,#4d5474 100%);
  box-shadow:0 12px 14px -9px rgba(18,16,38,.7),inset -3px -3px 7px rgba(233,200,212,.32),inset 3px 4px 8px rgba(255,255,255,.16)}
@media (min-width:1181px){.top .idx-btn{display:none}.topnav{display:flex}}
@media (max-width:1180px){.topnav{display:none}.top .idx-btn{display:flex}}
@media (max-width:1320px) and (min-width:1181px){.topnav{gap:9px}.topnav a{padding:10px 14px 9px;letter-spacing:.2em}}
@media (prefers-reduced-motion:reduce){.js .topnav a{opacity:1;translate:none}}
/* speckle only toward each stone's rim, so the lettering sits on clean stone */
.topnav a,.idx-btn{position:relative;isolation:isolate;font-size:.6rem;padding:12px 20px 11px}
.topnav a{background:radial-gradient(130% 150% at 70% 16%,#aeb2cf 0%,#8d94b4 28%,#6d7697 58%,#4d5474 100%)}
.topnav a.here{background:radial-gradient(130% 150% at 70% 16%,#fbeef2 0%,#ecd0d9 32%,#d4a9b8 66%,#b48a9d 100%)}
.idx-btn{background:radial-gradient(130% 150% at 70% 16%,#aeb2cf 0%,#8d94b4 28%,#6d7697 58%,#4d5474 100%)}
.topnav a::before,.idx-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--speck);opacity:.7;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 50%,transparent 62%,#000 100%);mask-image:radial-gradient(62% 58% at 50% 50%,transparent 62%,#000 100%)}
.topnav a.here::before{opacity:.35}
/* a faint band returns once the page scrolls, so passing titles never tangle with the stones */
.top.scrolled::before{opacity:.9!important}
@media (max-width:1320px) and (min-width:1181px){.topnav a{padding:11px 15px 10px;letter-spacing:.2em}}