/* StoryTribute shared design file.
   Colours, fonts, spacing and every shared component live here.
   Pages link this file first, then add only their own layout rules.
   Never hard-code colours, fonts or spacing on a page: add or reuse a token below. */

:root{
  --paper:#F6F1E9; --card:#FFFDF8; --hair:#D9CFBF; --ink:#2B2622; --ink2:#5C534B;
  --petrol:#1F5560; --btn:#1D6E75; --btn-h:#17565C; --btn-p:#124247; --tint:#E6EBE7; --gold:#A38138;
  /* motion: amber is a story on its way in, petrol is kept */
  --story:#C4822C; --story-soft:#F5E2C2; --story-ink:#8F5A12; --idle:#B9AFA3; --grey:#C9C1B6;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --hand:'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  --pop:cubic-bezier(.3,1.7,.5,1);
  color-scheme: light only;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.5}
h1,h2,h3,p{margin:0}
h1,h2{text-wrap:balance}
p,li,h3{text-wrap:pretty}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--petrol);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
.wrap{max-width:1136px;margin:0 auto;padding-inline:24px}
.narrow{max-width:680px;margin-inline:auto}
.band{padding-block:96px;border-top:1px solid var(--hair)}
.band.paper{background:var(--paper)}
.band.white{background:var(--card)}
.band.short{padding-block:64px}
.label{font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);line-height:1.2}
.h-display{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.06;letter-spacing:-.015em}
.h-title{font-family:var(--serif);font-weight:500;font-size:48px;line-height:1.08;letter-spacing:-.015em}
.h-section{font-family:var(--serif);font-weight:500;font-size:36px;line-height:1.1;letter-spacing:-.01em}
.lead{font-size:22px;line-height:1.5;color:var(--ink2)}
.meta{font-size:16px;line-height:1.4;color:var(--ink2)}
.contrast{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;line-height:1.3}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:60px;padding-inline:32px;background:var(--btn);color:#fff;font-family:var(--sans);font-weight:600;font-size:20px;text-decoration:none;border:0;border-radius:0;cursor:pointer}
.btn:hover{background:var(--btn-h)}
.btn:active{background:var(--btn-p)}
.btn.secondary{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.secondary:hover{background:var(--tint)}
.free{font-size:17px;font-weight:600;color:var(--ink);margin-top:10px}
.tag{display:inline-block;font-family:var(--sans);font-weight:600;font-size:15px;line-height:1;padding:6px 10px;background:var(--tint);color:var(--petrol);border-radius:0}

header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--paper);border-bottom:1px solid var(--hair)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding-block:10px;position:relative}
/* The logo lockup mirrors the Simirity logo (chosen 17 Oct 2026). Counted in the wordmark's capital height (28px type, capitals 19px):
   the icon is 2.6 capitals tall and spans both lines, the gap is one capital, and the credit starts under the wordmark
   about 0.6 of a capital below it, in a lighter italic. The icon sits 2px high so it centres on the two lines. */
.brand{display:flex;align-items:center;gap:18px;text-decoration:none}
.brand svg{width:49px;height:49px;color:var(--petrol);flex:none;position:relative;top:-2px}
.wordmark{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:-.01em;line-height:1}
.credit-sm{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;color:var(--ink2);line-height:1.2;margin-top:2px;display:block}
nav.main{display:flex;align-items:center;gap:32px;font-size:18px}
nav.main a{text-decoration:none}
/* The menu link for the page you are on is underlined; "Start their tribute" is a filled button (17 Oct 2026) */
nav.main a:not(.cta):hover,nav.main a[aria-current="page"]:not(.cta){text-decoration:underline;text-decoration-color:var(--petrol);text-decoration-thickness:2px;text-underline-offset:4px}
nav.main a.cta{display:inline-flex;align-items:center;height:44px;padding-inline:18px;background:var(--btn);color:#fff;font-weight:600}
nav.main a.cta:hover{background:var(--btn-h)}
nav.main a.cta:active{background:var(--btn-p)}
.menu-btn{display:none;height:44px;padding:0 12px;background:none;border:1px solid var(--ink);font:600 16px var(--sans);color:var(--ink);border-radius:0;cursor:pointer}

/* Story card, skinned after the Simirity app card */
.masonry{column-count:3;column-gap:24px}
.sc{background:var(--card);border:1px solid var(--hair);box-shadow:0 1px 2px rgba(43,38,34,.05),0 6px 20px rgba(43,38,34,.07);padding:28px 28px 18px;break-inside:avoid;margin-bottom:24px;text-align:center;display:inline-block;width:100%}
.sc-title{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.22;color:var(--petrol);margin-bottom:16px;text-wrap:balance}
.sc{cursor:pointer}
.sc:hover{border-color:var(--petrol)}
.sc-by{font:600 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.sc-rel{font-size:15px;color:var(--ink2);margin-bottom:4px}
.sc-when{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink2);margin-bottom:16px}
.sc-by+.tag{margin-top:6px}
.sc .tag{margin-bottom:14px}
.readmore{white-space:nowrap;text-decoration:underline;text-decoration-color:var(--petrol);text-decoration-thickness:2px;text-underline-offset:4px}
.sc .full{display:none}
/* Full story view */
dialog.story{width:min(760px,calc(100% - 32px));max-height:calc(100vh - 48px);border:1px solid var(--hair);padding:0;background:var(--card);color:var(--ink);margin:auto}
dialog.story::backdrop{background:rgba(43,38,34,.55)}
.sv{padding:36px 40px 40px}
.sv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}
.sv .label{margin-bottom:12px}
.sv h2{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.15;color:var(--petrol);margin-bottom:8px}
.sv .sc-by{margin-bottom:2px}
.sv .sc-when{margin-bottom:24px}
.sv-body p{font-family:var(--serif);font-size:19px;line-height:1.55;margin-bottom:19px;max-width:65ch}
.sv-body p.fcap{font-family:var(--sans);font-size:15px;color:var(--ink2);margin-top:-8px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:20px}
.sv-body .audio,.sv-body .video{margin-bottom:12px}
.sv-foot{border-top:1px solid var(--hair);padding-top:16px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;color:var(--ink2)}
.close{height:44px;padding:0 14px;background:none;border:1px solid var(--ink);font:600 15px var(--sans);color:var(--ink);border-radius:0;cursor:pointer;flex:none}
/* Tribute page header */
.pav{width:120px;height:120px;border-radius:50%;margin:0 auto 16px;border:1px solid var(--hair);background:repeating-linear-gradient(135deg,var(--paper) 0 10px,#EEE6D9 10px 20px);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink2)}
.sc-text{text-align:left;font-family:var(--serif);font-size:18px;line-height:1.5;margin-bottom:16px}
.more{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--petrol);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.grid{display:grid;gap:6px;margin-bottom:14px}
.g1{grid-template-columns:1fr}
.g2,.g4{grid-template-columns:1fr 1fr}
.ph{aspect-ratio:1;max-width:100%;background:repeating-linear-gradient(135deg,var(--paper) 0 10px,#EEE6D9 10px 20px);border:1px solid var(--hair);display:flex;align-items:flex-end;padding:8px;font-size:13px;color:var(--ink2);text-align:left}
.g1 .ph{aspect-ratio:4/3}
.ph.plus{background:#3A3531;color:#fff;font:600 28px var(--sans);align-items:center;justify-content:center;padding:0}
.video{aspect-ratio:16/9;max-width:100%;background:#2B2622;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}
.video svg{width:56px;height:56px}
.video .dur{position:absolute;right:8px;bottom:8px;font-size:13px;background:rgba(0,0,0,.6);padding:2px 6px}
/* a still from the video, behind the play button, dimmed a little so the button reads */
.video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.85}
.video svg,.video .dur{position:relative;z-index:1}
.video .poster~svg{color:rgba(43,38,34,.72)}
.video .dur{position:absolute}
.audio{display:flex;align-items:center;gap:10px;border:1px solid var(--hair);padding:10px 12px;margin-bottom:14px;color:var(--petrol)}
.audio .play{width:36px;height:36px;flex:none}
.audio .wave{flex:1;height:30px;min-width:0}
.audio .dur{font-size:14px;color:var(--ink2)}
.sc-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:12px;border-top:1px solid var(--hair);font-size:14px;color:var(--ink2)}
.sc-foot .l{display:flex;gap:14px}
.sc-foot span{display:inline-flex;align-items:center;gap:5px}
.sc-foot svg{width:18px;height:18px}
/* A place on a story card, with an amber map pin */
.place{display:flex;align-items:center;gap:8px;border:1px solid var(--hair);padding:8px 12px;margin-bottom:14px;color:var(--ink2);font-size:15px;text-align:left}
.place svg{width:20px;height:20px;color:var(--story);flex:none}

footer.site{background:var(--paper);border-top:1px solid var(--hair);padding-block:32px}
footer.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;font-size:16px;color:var(--ink2)}
.lockup{display:flex;align-items:center;gap:8px}
.lockup svg{width:24px;height:24px}
/* the footer credit links to simirity.com (17 Oct): it reads as the credit, and underlines only on hover or keyboard focus */
a.lockup{color:inherit;text-decoration:none}
a.lockup:hover span,a.lockup:focus-visible span{text-decoration:underline;text-decoration-color:var(--petrol);text-decoration-thickness:2px;text-underline-offset:4px}
footer nav{display:flex;flex-wrap:wrap;gap:14px 28px}
footer nav a{color:var(--ink2)}
.plain{width:100%;font-size:15px;padding-top:16px;border-top:1px solid var(--hair)}
.note{background:var(--tint);color:var(--petrol);font-size:15px;padding:10px 24px;text-align:center}

@media (max-width:900px){ .masonry{column-count:2} }
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .band{padding-block:56px}
  .band.short{padding-block:40px}
  .h-display{font-size:36px}
  .h-title{font-size:32px}
  .h-section{font-size:28px}
  .lead{font-size:19px}
  .meta{font-size:15px}
  .contrast{font-size:22px}
  .btn{width:100%;height:56px;font-size:19px}
  .wordmark{font-size:24px}
  .brand{gap:16px}
  .brand svg{width:42px;height:42px}
  .credit-sm{font-size:14px;margin-top:1px}
  header.site .wrap{min-height:56px}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--hair);padding:8px 16px}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;border-top:1px solid var(--hair)}
  nav.main a:first-child{border-top:0}
  nav.main a.cta{justify-content:center;height:52px;margin-block:8px;padding:0 18px;border-top:0}
  .menu-btn{display:inline-flex;align-items:center}
  .masonry{column-count:1}
  .sc{padding:22px 20px 16px}
  dialog.story{width:100%;max-width:100%;max-height:100vh;height:100%;border:0}
  .sv{padding:20px 16px 32px}
  .sv h2{font-size:27px}
  .sv-body p{font-size:18px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-title{font-size:23px}
}
@media (prefers-reduced-motion:no-preference){ a,.btn{transition:background .15s,text-decoration-thickness .1s} }

/* Closing call-to-action band, used at the foot of pages */
.final{text-align:center}
.final .h-section{margin-bottom:12px}
.final p.line{font-size:20px;color:var(--ink2);margin-bottom:32px}

/* ==========================================================================
   Motion. The drawings are made by /assets/motion.js inside any element with data-motion="...".
   Rules for the drawings are scoped to [data-motion] so they never touch the page's own story cards.
   ========================================================================== */
[data-motion] svg{display:block;width:100%;height:auto;overflow:visible}
[data-motion] svg.mo-m{display:none}
@media (max-width:640px){ [data-motion] svg.mo-d{display:none} [data-motion] svg.mo-m{display:block} }
.motion-fig{margin:0;background:var(--card);border:1px solid var(--hair);padding:20px}
@media (max-width:640px){ .motion-fig{padding:12px} }

/* people and story dots */
[data-motion] .pp .lbl{font:600 13px var(--mono);letter-spacing:.08em;fill:var(--ink2);text-anchor:middle;text-transform:uppercase;transition:fill .3s}
[data-motion] .pp.sending .lbl{fill:var(--story-ink)}
[data-motion] .pp .ring{fill:var(--story-soft);stroke:var(--story);stroke-width:2;opacity:0;transition:opacity .3s}
[data-motion] .pp.sending .ring{opacity:.9}
[data-motion] svg.m .pp .lbl{font-size:13px;letter-spacing:.06em}
[data-motion] .ink{fill:var(--ink)}
[data-motion] .inkline{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round}
[data-motion] .dot{fill:var(--story);stroke:var(--card);stroke-width:3}
[data-motion] .chip rect{fill:var(--story-soft);stroke:var(--story);stroke-width:1.5}
[data-motion] .g{fill:none;stroke:var(--story);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[data-motion] .gf{fill:var(--story)}
[data-motion] .glow{fill:var(--story-soft)}
[data-motion] .bond{fill:none;stroke:var(--story);stroke-width:2;stroke-linecap:round;opacity:.7}
[data-motion] .lbl-c{font:600 11px var(--mono);letter-spacing:.1em;fill:var(--ink2);text-anchor:middle}
[data-motion] svg.m .lbl-c{font-size:10px}
/* story cards inside the drawings */
[data-motion] .sc-bg{fill:var(--card);stroke:var(--hair);stroke-width:1.4;transition:stroke .5s}
[data-motion] .scard.front .sc-bg{stroke:var(--petrol);stroke-width:1.8}
[data-motion] .scard.fresh .sc-bg{stroke:var(--story);stroke-width:3}
[data-motion] .sc-ttl{font:500 23px var(--serif);fill:var(--petrol)}
[data-motion] .sc-by{font:700 11px var(--sans);letter-spacing:.1em;fill:var(--ink)}
[data-motion] .sc-rel{font:400 13px var(--sans);fill:var(--ink2)}
[data-motion] .sc-date{font:italic 400 13px var(--serif);fill:var(--ink2)}
[data-motion] .sc-txt{stroke:var(--hair);stroke-width:4;stroke-linecap:round}
[data-motion] .sc-ph{fill:#EDE4D6;stroke:var(--hair)}
[data-motion] .sc-play{fill:#fff}
[data-motion] .sc-wave{fill:none;stroke:var(--petrol);stroke-width:2.2;stroke-linecap:round}
[data-motion] .sc-pbtn{fill:var(--petrol)}
[data-motion] .sc-road{fill:none;stroke:#fff;stroke-width:4}
[data-motion] .sc-pin{fill:var(--story);stroke:var(--card);stroke-width:1.5}
[data-motion] .sc-more .g{stroke:var(--petrol)}
[data-motion] .sc-more .gf{fill:var(--petrol)}
[data-motion] .sc-more rect.mc{fill:var(--tint);stroke:none}
/* her tribute page */
[data-motion] .pg-bg{fill:var(--card);stroke:var(--hair);stroke-width:1.6}
[data-motion] .pg-bg.on{stroke:var(--petrol);stroke-width:2}
[data-motion] .pg-name{font:500 28px var(--serif);text-anchor:middle}
[data-motion] .pg-yrs{font:400 15px var(--sans);text-anchor:middle}
[data-motion] .col .pg-name{fill:var(--ink)}
[data-motion] .col .pg-yrs{fill:var(--ink2)}
/* caption band */
[data-motion] .cap-bg{fill:var(--petrol);transform-box:fill-box;transform-origin:center}
[data-motion] .cap-t{font:italic 400 22px var(--serif);fill:#fff;text-anchor:middle}
/* guest book */
[data-motion] .gb-page{fill:#F1ECE3;stroke:var(--hair)}
[data-motion] .gb-rule{stroke:var(--hair);stroke-width:1}
[data-motion] .gb-hand{font:500 22px var(--hand);fill:#6E655C}
[data-motion] .gb-nib{fill:#6E655C}
[data-motion] .c-lbl{font:600 11px var(--mono);letter-spacing:.14em;fill:var(--ink2);transition:fill .5s}
[data-motion] .c-lbl.on{fill:var(--petrol)}
[data-motion] .c-div{stroke:var(--ink);stroke-width:2}
[data-motion] .c-knob{fill:var(--card);stroke:var(--ink);stroke-width:2}
/* kinds of story */
[data-motion] .k-node{fill:var(--card);stroke:var(--hair);stroke-width:1.6;transition:stroke .3s,fill .3s}
[data-motion] .k-node.on{stroke:var(--story);stroke-width:2.6;fill:var(--story-soft)}
[data-motion] .k-node.kept{stroke-width:3.4}
[data-motion] .k-lbl{font:600 11px var(--mono);letter-spacing:.1em;fill:var(--ink2);text-anchor:middle}
[data-motion] .k-path{fill:none;stroke:var(--hair);stroke-width:3;stroke-linecap:round}
[data-motion] .k-feed{fill:none;stroke:var(--hair);stroke-width:1.6;stroke-dasharray:3 5}
[data-motion] .k-prog{fill:none;stroke:var(--story);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
/* phone drawings: labels at about 11px on screen, the playbook's floor */
[data-motion] svg.mo-m .c-lbl{font-size:12px}
[data-motion] svg.mo-m .k-lbl{font-size:12px}
[data-motion] .k-feedon{fill:none;stroke:var(--story);stroke-width:3;stroke-linecap:round}
[data-motion] .kcard{transition:opacity .5s}
/* printed story card */
[data-motion] .pc-plab{font:600 12px var(--serif);letter-spacing:.1em;fill:#1a1a1a}
[data-motion] .pc-url{font:400 12px var(--sans);fill:#1a1a1a}
[data-motion] .pc-hand{font:500 22px var(--hand);fill:#2F3A55}
[data-motion] .pc-fh{font:500 22px var(--serif);fill:#1a1a1a}
[data-motion] .pc-fb{font:400 13.8px var(--sans);fill:#333}
[data-motion] .pc-fc{font:600 13.8px var(--sans);fill:#1a1a1a}
[data-motion] .pc-lab{font:400 12.4px var(--sans);fill:#666}
[data-motion] .pc-wm{font:500 19px var(--serif);fill:var(--ink);letter-spacing:-.01em}
[data-motion] .pc-credit{font:italic 400 11.5px var(--serif);fill:var(--ink2)}
[data-motion] .pc-pname{font:500 20px var(--serif);fill:var(--ink)}
[data-motion] .pc-pyrs{font:400 13px var(--sans);fill:var(--ink2)}
[data-motion] .pc-body{font:400 14px var(--serif);fill:var(--ink)}
[data-motion] .pc-sc{stroke:var(--petrol);stroke-width:1.8}

/* How it works: three numbered steps joined by a line that fills as the steps light up.
   The line runs from the center of step 1 to the center of step 3; with a 48px gap that is 66.67% + 32px. */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;position:relative}
.steps::before,.steps::after{content:"";position:absolute;left:32px;top:30px;height:4px}
.steps::before{right:calc(33.33% - 64px);background:var(--hair)}
.steps::after{width:calc(66.67% + 32px);background:var(--petrol)}
.steps.wait::after{width:0}
.steps.wait.go::after{animation:lineH 4.5s forwards}
@keyframes lineH{0%{width:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}47%{width:calc(33.33% + 16px);animation-timing-function:linear}53%{width:calc(33.33% + 16px);animation-timing-function:cubic-bezier(.2,.7,.3,1)}100%{width:calc(66.67% + 32px)}}
.steps li{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.steps h3{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.2;margin-top:12px}
.steps svg.jar{width:64px;height:64px;display:block;background:var(--card);border-radius:50%;overflow:visible;position:relative;z-index:2}
.jar .rim{fill:none;stroke:var(--petrol);stroke-width:3}
.jar .num{font:600 25px var(--serif);text-anchor:middle;dominant-baseline:central}
.jar .num.out{fill:var(--petrol)}
.jar .num.in{fill:#fff}
.jar .disc{fill:var(--petrol)}
.jar .sweep{transform-box:fill-box;transform-origin:0 50%}
.steps.wait .jar.fill .sweep{transform:scaleX(0)}
.steps.wait.go .jar.fill .sweep{animation:sweep .55s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d)}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.jar.pop{animation:jpop .7s var(--pop)}
@keyframes jpop{30%{transform:scale(1.28)}60%{transform:scale(.94)}100%{transform:none}}
.steps .ripple{position:absolute;left:0;top:0;width:64px;height:64px;border-radius:50%;border:2.5px solid var(--petrol);pointer-events:none;z-index:1}
.steps .spark{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:1}
/* on a phone: a list, with the line down the side */
.steps.vert{grid-template-columns:1fr;gap:32px}
.steps.vert li{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:start}
.steps.vert .jar{grid-row:1/span 2}
.steps.vert h3{grid-column:2;margin-top:10px;font-size:23px}
.steps.vert p{grid-column:2}
.steps.vert::before,.steps.vert::after{left:30px;top:32px;right:auto;width:4px;height:var(--vh,200px)}
.steps.vert.wait::after{height:0}
.steps.vert.wait.go::after{height:0;animation:lineV 4.5s forwards}
@keyframes lineV{0%{height:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}47%{height:calc(var(--vh,200px)/2);animation-timing-function:linear}53%{height:calc(var(--vh,200px)/2);animation-timing-function:cubic-bezier(.2,.7,.3,1)}100%{height:var(--vh,200px)}}

/* The big button moment: the hero ends on it (.big), the final band lights it up (.ready, .gathering) */
.btn.big,.btn.ready{background-image:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);background-repeat:no-repeat;background-size:220% 100%;background-position:160% 0}
.btn::before,.btn::after{content:"";position:absolute;inset:0;border:2px solid var(--btn);opacity:0;pointer-events:none}
.btn.big{animation:bTake 1.6s var(--pop),bSheen 1.3s ease-out .2s,bGlow 2.2s ease-out}
.btn.big::before{animation:bHalo 1.6s cubic-bezier(.2,.7,.3,1)}
.btn.big::after{animation:bHalo 1.6s cubic-bezier(.2,.7,.3,1) .35s}
.btn.ready{animation:bSheen 1.3s ease-out .1s,bGlow 2s ease-out}
.btn.ready::before{animation:bHalo 1.5s cubic-bezier(.2,.7,.3,1)}
.btn.gathering{box-shadow:0 0 calc(var(--fill,0)*28px) calc(var(--fill,0)*4px) rgba(29,110,117,.35)}
@keyframes bTake{20%{transform:scale(1.07)}45%{transform:scale(.98)}65%{transform:scale(1.025)}100%{transform:none}}
@keyframes bSheen{0%{background-position:160% 0}100%{background-position:-60% 0}}
@keyframes bHalo{0%{opacity:.8;inset:0}100%{opacity:0;inset:-22px -34px}}
@keyframes bGlow{0%{box-shadow:0 0 0 0 rgba(29,110,117,0)}25%{box-shadow:0 10px 34px 4px rgba(29,110,117,.35)}100%{box-shadow:0 0 0 0 rgba(29,110,117,0)}}
[data-motion] svg.dotsL{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* a band whose button the story dots gather into: the dots sit behind the words */
[data-motion="gather"]{position:relative}
[data-motion="gather"]>*:not(svg){position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

/* Real photos in story cards and in the full-story pop-up. A photo fills its square (or 4:3 when alone), cropped from the centre. */
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ph.img{padding:0;border:0;background:var(--paper);position:relative;overflow:hidden}
.ph.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* The tribute page header: the person's portrait in the circle */
.pav img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.pav:has(img){background:none}
/* Story wall in reading order: site.js deals the cards into columns left to right, so the order runs across, then down */
.masonry.cols{column-count:auto;display:flex;gap:24px;align-items:flex-start}
.masonry.cols>.mcol{flex:1 1 0;min-width:0}
/* The note under a recording or video on the example tribute, after someone taps play */
.audio,.video{cursor:pointer}
.sv-body p.playnote{font-family:var(--sans);font-size:15px;color:var(--petrol);margin:-4px 0 16px}
/* The full-story pop-up's footer repeats the card's media counts; size its icons like the card's */
.sv-foot #svFoot,.sv-foot #svFoot .l{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sv-foot #svFoot span{display:inline-flex;align-items:center;gap:5px}
.sv-foot svg{width:18px;height:18px;flex:none}

/* Example tribute: stories arrive at her portrait. The drawing sits behind the words. */
[data-motion="arrive"]{position:relative;overflow-x:clip}
/* the halo round a full-width phone button must not widen the page */
.band:has(>[data-motion="ready"]){overflow-x:clip}
[data-motion="arrive"]>*:not(svg){position:relative;z-index:1}
[data-motion="arrive"] svg.fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
/* The quiet sheen on an outline button: a petrol-tinted sweep and an ink halo, no glow (a white sheen is invisible on it) */
.btn.secondary.ready{background-image:linear-gradient(100deg,transparent 35%,rgba(31,85,96,.16) 50%,transparent 65%);animation:bSheen 1.3s ease-out .1s}
.btn.secondary::before,.btn.secondary::after{border-color:var(--ink)}

/* ==========================================================================
   Example tribute page (17 Oct 2026): the example bar, the try-it "Add a story" form,
   and previous / next in the full story.
   ========================================================================== */

/* Example bar. Desktop: a slim bar under the header, words only (the header already has the button).
   Phone: starts under the header with the button, then a copy docks at the bottom of the screen once she scrolls. */
.exbar{background:var(--card);border-bottom:1px solid var(--hair);position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hh,73px));z-index:9}
.exbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:12px}
.ex-words{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;min-width:0}
.ex-words .label{white-space:nowrap}
.ex-long{font-size:16px;color:var(--ink2)}
.ex-short{display:none;font-size:15px;color:var(--ink2)}
.exbar .btn{display:none}
.exdock{display:none}
@media (max-width:640px){
  .exbar{position:relative;top:auto}
  .exbar .wrap{padding-block:10px}
  .ex-long{display:none}
  .ex-short{display:block}
  .ex-words{flex-direction:column;gap:2px}
  .exbar .btn,.exdock .btn{display:inline-flex;height:44px;font-size:16px;padding-inline:14px;width:auto;flex:none}
  .exdock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9;background:var(--card);border-top:1px solid var(--hair);box-shadow:0 -6px 20px rgba(43,38,34,.10);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
  .exdock.show{transform:none;visibility:visible;transition:transform .25s ease}
  .exdock .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
  body.has-dock{padding-bottom:72px}
}
@media (prefers-reduced-motion:reduce){ .exdock,.exdock.show{transition:none} }

/* Full story: an invitation to add a story, and previous / next */
.sv-more{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin:8px 0 22px;padding:18px 20px;background:var(--paper);border:1px solid var(--hair)}
.sv-more p{font-family:var(--serif);font-size:20px;line-height:1.3}
.sv-more .btn{height:48px;font-size:17px;width:auto}
.sv-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.sv-nav button{background:var(--card);border:1px solid var(--hair);padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink);text-align:left;min-width:0}
.sv-nav button:hover{border-color:var(--petrol)}
.sv-nav .nx{text-align:right;grid-column:2}
.sv-nav small{display:block;font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-bottom:2px}
.sv-nav span{display:block;font-family:var(--serif);font-size:18px;line-height:1.25;color:var(--petrol)}
@media (max-width:640px){ .sv-more .btn{width:100%} .sv-nav span{font-size:16px} }

/* "Add a story" on the example: a try-it form in the full-story pop-up style. Nothing is saved or sent. */
dialog.story.add{width:min(680px,calc(100% - 32px))}
.af-steps{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px;color:var(--ink2);margin:4px 0 26px;padding:0 0 14px;border-bottom:1px solid var(--hair);list-style:none}
.af-steps li.on{color:var(--petrol);font-weight:600}
.af-steps li.past{color:var(--ink)}
.af h2{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.15;color:var(--petrol);margin-bottom:6px}
.af .intro{font-size:17px;color:var(--ink2);margin-bottom:18px}
.af .fill{background:none;border:0;padding:0;font:600 16px var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--petrol);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;margin-bottom:22px}
.af .fld{margin-bottom:22px}
.af label,.af .flabel{display:block;font-weight:600;font-size:17px;margin-bottom:4px}
.af .hint{display:block;font-size:15px;color:var(--ink2);margin-bottom:8px;font-weight:400}
.af input,.af textarea,.af select{width:100%;font:400 18px var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--ink2);border-radius:0;padding:11px 13px}
.af textarea{min-height:170px;font-family:var(--serif);line-height:1.5;resize:vertical}
.af input:focus,.af textarea:focus,.af select:focus{outline:3px solid var(--petrol);outline-offset:0;border-color:var(--petrol)}
.af .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.af .media{display:flex;flex-wrap:wrap;gap:10px}
.af .media button{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border:1px solid var(--hair);background:var(--card);font:600 16px var(--sans);color:var(--ink);cursor:pointer}
.af .media button:hover{border-color:var(--petrol)}
.af .media svg{width:20px;height:20px;color:var(--petrol)}
.af .mnote{font-size:15px;color:var(--petrol);margin-top:10px}
.af .err{font-size:16px;font-weight:600;color:var(--petrol);margin:-6px 0 16px}
.af .acts{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:20px;border-top:1px solid var(--hair)}
.af .acts .btn{height:52px;font-size:18px;width:auto}
.af .acts .btn:only-child{margin-left:auto}
.af .approve{background:var(--tint);color:var(--petrol);font-size:16px;padding:12px 14px;margin:18px 0 6px}
.af .preview .sc{cursor:default;margin:0}
.af .preview .sc:hover{border-color:var(--hair)}
.af .af-end{text-align:center;padding-block:12px 4px}
.af .af-end p{font-size:19px;color:var(--ink2);margin-bottom:10px}
.af .af-end .acts{flex-direction:column;align-items:stretch;border-top:0}
.af .af-end .acts .btn{width:100%}
@media (max-width:640px){
  dialog.story.add{width:100%;max-width:100%;max-height:100vh;height:100%;border:0}
  .af h2{font-size:27px}
  .af .acts .btn{height:52px;font-size:17px;padding-inline:20px}
}