@font-face{font-family:Fira;src:url('assets/Fira-84e0981eaf.woff2') format('woff2'),url('assets/Fira.ttf') format('truetype');font-display:swap}
@font-face{font-family:Literata;src:url('assets/Literata0-92f8552245.woff2') format('woff2'),url('assets/Literata0.ttf') format('truetype');font-display:swap;font-weight:100 900}
@font-face{font-family:Literata;src:url('assets/Literata1-98e5d5bc5c.woff2') format('woff2'),url('assets/Literata1.ttf') format('truetype');font-display:swap;font-style:italic;font-weight:100 900}
@property --glow{syntax:'<color>';inherits:true;initial-value:#ecbca8}
/* the site's palette (styles.css) */
:root{--pace:.45;--cream:#eee5ce;--paper:#f6f0e1;--ink:#482d2a;--wine:#753d48;--dark:#633d49;--sage:#e7ddc5;--peach:#e2d3b3;--gold:#d5bd91;--taupe:#ad9a80;--muted:#76574f;--line:rgba(72,45,42,.22);--serif:Literata,Georgia,serif;--sans:Fira,Arial,sans-serif;--glow:#eee5ce}
*{box-sizing:border-box}
/* one colour at a time: every section fills the screen below the header and the scroll stops on it */
html{scroll-behavior:smooth;scroll-padding-top:var(--header,88px)}
@media(max-width:900px){html{scroll-snap-type:y mandatory}.hero,.moment,.closing{scroll-snap-align:start}.site-footer-lang{scroll-snap-align:end}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);overflow-x:hidden}
.en{display:none}html[lang=en] .en{display:inline}html[lang=en] .el{display:none}
html[lang=en] text.en{display:inline}
a{color:inherit}
button{border:0;background:none;color:inherit;cursor:pointer;font:inherit;min-height:44px}
a:focus-visible,button:focus-visible{outline:2px solid var(--wine);outline-offset:5px}

/* atmosphere: a soft wash of colour that follows the moment on screen, and drifting almond petals */
.glow{display:none;position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 28% 55%,color-mix(in srgb,var(--glow) 55%,transparent),transparent 72%),radial-gradient(ellipse 50% 45% at 88% 18%,color-mix(in srgb,var(--glow) 30%,transparent),transparent 70%)}
.petals{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.motion-off .petals{display:none}
.progress{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0);z-index:20}

header{position:sticky;top:0;z-index:15;display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;background:color-mix(in srgb,var(--cream) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font-size:23px;text-decoration:none}.brand span{display:block;font:9px var(--sans);letter-spacing:3px;margin-top:7px;color:var(--muted)}
.controls{display:flex;gap:22px;align-items:center;font:13px var(--sans)}
.controls .home{text-decoration:none}
.counter{letter-spacing:2px;color:var(--muted)}.counter b{color:var(--ink);font-weight:400}

/* rail: twelve dots, a line that fills as you read */
.rail{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:12;display:flex;flex-direction:column;gap:14px;padding:6px 0}
.rail::before{content:"";position:absolute;right:5px;top:0;bottom:0;width:1px;background:var(--line)}
.rail-fill{position:absolute;right:5px;top:0;width:1px;height:100%;background:var(--ink);transform-origin:top;transform:scaleY(var(--fill,0))}
.rail a{position:relative;z-index:1;display:flex;justify-content:flex-end;align-items:center;width:150px;height:12px;text-decoration:none}
.rail a::after{content:"";width:11px;height:11px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 45%,transparent);background:var(--cream);transition:transform .4s,background .4s,border-color .4s}
.rail a span{font:12px var(--sans);letter-spacing:1px;margin-right:12px;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s;white-space:nowrap}
.rail a:hover span,.rail a:focus-visible span,.rail a.active span{opacity:1;transform:none}
.rail a.seen::after{background:var(--ink);border-color:var(--ink)}
.rail a.active::after{background:var(--gold);border-color:var(--ink);transform:scale(1.5);box-shadow:0 0 0 4px #d5bd9155}

main{position:relative;z-index:2;overflow-x:clip}
.hero{overflow:clip}

/* hero */
.hero{min-height:calc(100svh - var(--header,88px));display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:4vh 9vw;position:relative}
.hero-copy{position:relative;z-index:2;grid-column:1;grid-row:1}
.branch{grid-column:1/-1;grid-row:1;justify-self:end;width:min(62vw,760px);overflow:visible}
.eyebrow{font:12px var(--sans);letter-spacing:3px;color:var(--muted)}
h1{font-size:clamp(44px,min(8.4vw,13vh),132px);font-weight:400;line-height:1.02;letter-spacing:-.035em;margin:min(26px,2.6vh) 0 min(22px,2.4vh)}
.hw{display:inline-block}
.hw.gold{color:var(--wine);font-style:italic}
.hw.gold+.hw.gold{margin-left:.2em}
.span-years{display:flex;align-items:center;gap:18px;font-size:clamp(24px,min(3vw,5vh),44px);margin:0 0 min(24px,2.6vh)}
.span-years b{font-weight:400;font-variant-numeric:tabular-nums}
.span-years i{display:block;width:clamp(60px,10vw,160px);height:1px;background:var(--taupe);transform-origin:left}
.intro{font-size:clamp(17px,1.5vw,21px);line-height:1.75;max-width:560px;color:var(--muted)}
.start{display:inline-flex;gap:10px;align-items:center;margin-top:min(26px,2.6vh);padding:15px 26px;background:var(--ink);color:var(--cream);font:13px var(--sans);letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:background .3s}
.start:hover{background:var(--wine)}
.start i{font-style:normal;display:inline-block}

/* moments */
.moment{min-height:calc(100svh - var(--header,88px));display:grid;grid-template-columns:1.05fr 1fr;gap:5vw;align-items:center;padding:6vh 12vw 6vh 7vw;position:relative}
.moment:nth-of-type(odd) .m-art{order:2}
.moment:nth-of-type(odd){padding:6vh 12vw 6vh 9vw}
.m-art{position:relative}
.motif{width:100%;height:auto;max-height:52vh;overflow:visible;color:var(--ink)}
.m-count{margin:min(18px,2vh) 0 0;font:12px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.m-count b{display:block;font:400 clamp(36px,min(5.4vw,8vh),84px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;text-transform:none;margin-bottom:6px}
.m-kicker{font:12px var(--sans);letter-spacing:3px;color:var(--muted);margin:0}
.m-no{color:var(--ink)}
.m-year{font-size:clamp(48px,min(8vw,12vh),128px);line-height:1;margin:14px 0 8px;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px rgba(72,45,42,.5);white-space:nowrap;overflow:hidden;padding-bottom:.08em}
.moment[data-motif=squares] .m-year,.moment[data-motif=trade] .m-year,.moment[data-motif=cross] .m-year{font-size:clamp(40px,min(5.6vw,9vh),92px)}
.m-year .ch{display:inline-block}
.moment h2{font-size:clamp(13px,1.1vw,15px);font-family:var(--sans);font-weight:400;letter-spacing:3px;text-transform:uppercase;color:var(--wine);margin:0 0 min(20px,2.2vh)}
.m-wow{font-size:clamp(21px,min(2.5vw,4.1vh),38px);line-height:1.3;margin:0 0 min(22px,2.4vh);letter-spacing:-.01em}
.m-wow .w{display:inline-block}
.m-meaning{font-size:clamp(15px,min(1.15vw,2.2vh),18px);line-height:1.7;color:var(--muted);max-width:560px;margin:0 0 min(26px,2.8vh)}
.m-more a{font:12px var(--sans);letter-spacing:2px;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--wine);padding-bottom:6px}
.m-more a i{font-style:normal;display:inline-block;transition:transform .3s;color:var(--wine)}
.m-more a:hover i{transform:translateX(6px)}

/* alternating section colours and the large circle behind each drawing, as on cardassilaris.com */
.moment{background:var(--bg)}
.tone-cream{--bg:#eee5ce;--disc:#c7c6a4}
.tone-sage{--bg:#d7d6ba;--disc:#bec7af}
.tone-peach{--bg:#ecbca8;--disc:#f3e9cd}
.tone-wine{--bg:#633d48;--disc:#753d48;color:#f3e8ce}
.m-art .disc{position:absolute;left:50%;top:44%;width:112%;aspect-ratio:1;border-radius:50%;background:var(--disc);transform:translate(-50%,-50%) translateY(calc(var(--p,0)*-40px));z-index:0}
.m-art .motif,.m-art .m-count{position:relative;z-index:1}
.tone-wine .motif{color:#f3e8ce}
.tone-wine .motif .lbl,.tone-wine .motif .yr{fill:#f3e8ce}
.tone-wine .motif .lbl.small{fill:#e4c897}
.tone-wine .m-meaning,.tone-wine .m-kicker,.tone-wine .m-count{color:#e8d9bd}
.tone-wine .m-year{-webkit-text-stroke-color:#d5bd91}
.tone-wine h2{color:#d5bd91}
.tone-wine .m-no,.tone-wine .m-count b{color:#f3e8ce}
.tone-wine .m-more a{border-color:#d5bd91}.tone-wine .m-more a i{color:#d5bd91}
.tone-wine .band-line,.tone-wine .tails{stroke:#f3e8ce!important}
.tone-wine a:focus-visible{outline-color:#d5bd91}
/* the pause: a fixed pill at the bottom of the screen fills while the moment plays, then an arrow invites you on */
.holdbar{position:fixed;left:50%;bottom:26px;z-index:16;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:30px;background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:0 6px 24px rgba(72,45,42,.18);transform:translate(-50%,20px);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.holdbar i{display:block;width:150px;height:4px;border-radius:2px;background:rgba(72,45,42,.15);overflow:hidden;position:relative}
.holdbar i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.holdbar span{font:18px/1 var(--sans);color:var(--ink);opacity:.25;transition:opacity .3s}
.holdbar.holding,.holdbar.held{opacity:1;transform:translate(-50%,0)}
.holdbar.holding i::after{animation:holdfill var(--hold,3s) linear forwards}
.holdbar.held i::after{transform:scaleX(1)}
.holdbar.held span{opacity:1;animation:nudge 1s ease-in-out 2}
@keyframes holdfill{to{transform:scaleX(1)}}
.motion-off .holdbar{display:none}
/* drawing language: ink lines, palette fills */
.draw{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.motif .lbl{fill:var(--ink);font:13px var(--sans);letter-spacing:.5px}
.motif .lbl.small{font-size:12px;fill:var(--muted)}
.motif .yr{fill:var(--ink);font:22px var(--serif)}
.motif .tiny,.motif .lbl.tiny{fill:var(--muted);font:11px var(--sans)}
.pop{transform-box:fill-box;transform-origin:center}
.motif text.pop{transform-origin:center bottom}
.ground,.textline,.paper{stroke-width:1!important;opacity:.55}
.trunk{stroke-width:2.4!important}.trunk.thick{stroke-width:3.6!important}
.crown{fill:color-mix(in srgb,var(--sage) 70%,transparent)!important}
.leaf{fill:var(--ink);opacity:.55}.bloom{fill:var(--paper);stroke:var(--ink);stroke-width:.5}.bloom-c{fill:var(--gold)}.pod{stroke:var(--taupe)!important}
.sig{font:italic 44px var(--serif);fill:var(--ink)}
.flourish{stroke-width:1.6!important}
.ink{stroke-width:5!important}
.brush{stroke-width:11!important}
.wall{stroke-width:3!important}
.well{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.canopy{fill:var(--sage);stroke:var(--ink);stroke-width:1}
.fruit{fill:var(--gold);stroke:var(--ink);stroke-width:.6}
.braid{stroke-width:2.2!important}.b1{stroke:var(--taupe)!important}.b2{stroke:var(--gold)!important;stroke-width:3!important}
.mastic{fill:var(--paper);stroke:var(--ink);stroke-width:1}.orange{fill:var(--gold);stroke:var(--ink);stroke-width:1}.mandarin{fill:var(--peach);stroke:var(--ink);stroke-width:1}.leafy{fill:var(--sage);stroke:var(--ink);stroke-width:.8}.almond{fill:var(--gold);stroke:var(--ink);stroke-width:1}.almond-line{fill:none;stroke:var(--ink);stroke-width:1}
.sea{stroke-width:1.5!important;opacity:.5}
.thread{stroke-width:2!important;stroke-dasharray:1}.dot{fill:var(--gold);stroke:var(--ink);stroke-width:1}
.band{fill:var(--peach);stroke:none}.band-line{stroke:var(--ink)!important;stroke-width:1.6!important}.tails{stroke:var(--ink)!important}.ribbon-year{fill:var(--ink);font:500 40px var(--serif);letter-spacing:2px}.fruit-a{fill:var(--gold);stroke:var(--ink);stroke-width:1}.fruit-b{fill:var(--peach);stroke:var(--ink);stroke-width:1}.twig5{stroke-width:2.4!important}
.ship{transform:translate(-40px,280px)}
.hull{fill:var(--ink)}.mast{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.coin{fill:var(--gold);stroke:var(--ink);stroke-width:1}
.gold{stroke:var(--ink)!important;stroke-width:2.2!important}
.faint{opacity:.4}
.node{fill:var(--cream);stroke:var(--ink);stroke-width:2.6}
.trail{stroke-width:1.4!important;opacity:.5}
.school{stroke-width:1.8!important}
.wave{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.4}
.building{stroke-width:2.2!important}.thin{stroke-width:1.5!important}
.pit{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.sack{fill:var(--gold);stroke:var(--ink);stroke-width:.5}
.bar{fill:var(--gold);stroke:var(--ink);stroke-width:1;transform-box:fill-box;transform-origin:center bottom}
.equal{stroke:var(--ink)!important;stroke-width:1.4!important}
.ring-bg{fill:none;stroke:var(--line);stroke-width:5}
.ring{stroke:var(--taupe)!important;stroke-width:5!important}
.ring-t{fill:var(--ink);font:12px var(--sans)}
.kernel{fill:var(--gold);stroke:var(--ink);stroke-width:.7}
.heart{stroke:var(--ink)!important;stroke-width:1.8!important}
.grow{fill:color-mix(in srgb,var(--sage) 80%,transparent);transform-box:fill-box;transform-origin:left bottom}
.seed{fill:var(--ink)}
.step{stroke-width:1.2!important;opacity:.7}.step.big{stroke-width:2!important;opacity:1}
.factory{stroke-width:2!important}
.flame{transform-box:fill-box;transform-origin:center bottom;opacity:0}
.f0{fill:var(--taupe)}.f1{fill:var(--gold)}.f2{fill:var(--wine)}
.smoke{stroke-width:6!important;opacity:.18}
.stamp{transform:translate(200px,212px) rotate(-7deg) scale(1);opacity:1}
.stamp rect{fill:color-mix(in srgb,var(--paper) 88%,transparent);stroke:var(--wine);stroke-width:3}
.stamp .inner{fill:none;stroke-width:1.2}
.stamp-t{fill:var(--wine)!important;font:italic 24px var(--serif)!important}
.stamp-t.en{font-size:19px!important}

/* closing */
.closing{min-height:calc(100svh - var(--header,88px));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4vh 8vw}
.loop{width:min(520px,80vw);max-height:16vh;overflow:visible;margin-bottom:1vh}
.today-year{font-size:clamp(44px,min(9vw,12vh),140px);line-height:1;margin:0;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px var(--taupe);white-space:nowrap}
.today-year i{font-style:normal}
.today-label{font:12px var(--sans);letter-spacing:3px;color:var(--muted);margin:14px 0 18px}
.closing h2{font-size:clamp(30px,min(4.4vw,7vh),64px);font-weight:400;line-height:1.15;max-width:900px;margin:0 0 1.6vh;letter-spacing:-.02em}
.today-text{font-size:clamp(15px,min(1.4vw,2.4vh),20px);line-height:1.6;color:var(--muted);max-width:620px;margin:0 0 3.5vh}
.ctas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:min(1100px,100%)}
.cta{flex-direction:column;gap:8px;text-align:left;padding:min(22px,2.4vh) 22px;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 60%,transparent);text-decoration:none;font-size:19px;line-height:1.3;transition:border-color .3s,transform .3s,background .3s}
html[lang=el] .cta.el,html[lang=en] .cta.en{display:flex}
.cta small{font:12px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.cta.main{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.cta.main small{color:var(--gold)}
.cta:hover{transform:translateY(-4px);border-color:var(--wine)}
.note{margin:3vh 0 0;max-width:640px;font:13px/1.7 var(--sans);color:var(--muted)}

/* ===== motion (only with the motion switch on and no reduced-motion preference) ===== */
.motion-on .hw{opacity:0;transform:translateY(60%) rotate(4deg);filter:blur(8px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.2,1),filter .9s;transition-delay:calc(.15s + var(--i)*.14s)}
.motion-on.ready .hw{opacity:1;transform:none;filter:none}
.motion-on .span-years i{transform:scaleX(0);transition:transform 2.4s cubic-bezier(.6,0,.2,1) .7s}
.motion-on.ready .span-years i{transform:scaleX(1)}
.motion-on .eyebrow,.motion-on .intro,.motion-on .start{opacity:0;transform:translateY(16px);transition:opacity 1s,transform 1s}
.motion-on.ready .eyebrow{opacity:1;transform:none}
.motion-on.ready .intro{opacity:1;transform:none;transition-delay:1s}
.motion-on.ready .start{opacity:1;transform:none;transition-delay:1.3s}
.motion-on .start i{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}
.motion-on .branch .draw{transition:stroke-dashoffset 2.6s cubic-bezier(.5,0,.2,1) calc(var(--d) + .3s)}
.motion-on.ready .branch .draw{stroke-dashoffset:0}
.branch .draw{stroke:var(--ink);stroke-width:3;opacity:.85}.branch .main{stroke-width:6}
.flower ellipse{fill:var(--paper);stroke:var(--ink);stroke-width:.6}.flower .heart{fill:var(--gold)}
.motion-on .branch .pop{opacity:0;transform:scale(0) rotate(-40deg);transition:opacity .6s,transform 1s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d) + .6s)}
.motion-on.ready .branch .pop{opacity:1;transform:none}
.motion-on.ready .branch .flower{animation:sway 6s ease-in-out infinite alternate;animation-delay:calc(var(--d)*-1)}
@keyframes sway{to{transform:rotate(8deg)}}

.motion-on .moment .draw{transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1) calc(var(--d) * var(--pace))}
.motion-on .moment.in .draw{stroke-dashoffset:var(--to,0)}
.motion-on .moment .pop{opacity:0;transform:scale(0);transition:opacity .35s,transform .7s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--d) * var(--pace))}
.motion-on .moment.in .pop{opacity:1;transform:none}
.motion-on .moment .write{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.5,0,.3,1) calc(var(--d) * var(--pace))}
.motion-on .moment.in .write{clip-path:inset(0 0 0 0)}
.motion-on .moment .ch{opacity:0;transform:translateY(80%) rotateX(80deg);transition:opacity .6s,transform .9s cubic-bezier(.2,.9,.2,1);transition-delay:calc(var(--i)*.035s)}
.motion-on .moment.in .ch{opacity:1;transform:none}
.motion-on .moment .w{opacity:0;transform:translateY(.5em);filter:blur(6px);transition:opacity .5s,transform .6s,filter .6s;transition-delay:calc(.05s + var(--i)*.018s)}
.motion-on .moment.in .w{opacity:1;transform:none;filter:none}
.motion-on .moment h2,.motion-on .moment .m-kicker,.motion-on .moment .m-meaning,.motion-on .moment .m-more,.motion-on .moment .m-count{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.motion-on .moment.in h2,.motion-on .moment.in .m-kicker{opacity:1;transform:none;transition-delay:0s}
.motion-on .moment.in .m-meaning{opacity:1;transform:none;transition-delay:.45s}
.motion-on .moment.in .m-more{opacity:1;transform:none;transition-delay:.65s}
.motion-on .moment.in .m-count{opacity:1;transform:none;transition-delay:.15s}
.motion-on .m-art{transform:translate3d(0,calc(var(--p,0)*-46px),0) rotate(calc(var(--p,0)*-1.2deg))}
.motion-on .m-year{transform:translate3d(calc(var(--p,0)*28px),0,0)}

.motion-on .ship{animation:sail 9s linear infinite}
@keyframes sail{from{transform:translate(-40px,280px)}to{transform:translate(440px,280px)}}
.motion-on .coinfall{transform:translateY(-330px);opacity:0;transition:transform .9s cubic-bezier(.5,0,.4,1.3),opacity .2s;transition-delay:calc(var(--d) * var(--pace))}
.motion-on .moment.in .coinfall{transform:none;opacity:1}
.motion-on .wave{animation:drift 5s linear infinite}
.motion-on .wave.w1{animation-duration:7s;animation-direction:reverse}.motion-on .wave.w2{animation-duration:9s}
@keyframes drift{to{transform:translateX(72px)}}
.motion-on .bar{transform:scaleY(0);transition:transform 1.3s cubic-bezier(.3,1.2,.4,1) calc(var(--d) * var(--pace))}
.motion-on .moment.in .bar{transform:none}
.motion-on .fall{transform:translateY(-360px) rotate(-90deg);opacity:0;transition:transform 1.1s cubic-bezier(.4,0,.3,1.25),opacity .25s;transition-delay:calc(var(--d) * var(--pace))}
.motion-on .moment.in .fall{transform:none;opacity:1}
.motion-on .grow{transform:scale(.0612);transition:transform 1.4s cubic-bezier(.7,0,.2,1) .3s}
.motion-on .moment.in .grow{transform:none}
.motion-on .flame{transition:opacity .4s calc(var(--d) * var(--pace))}
.motion-on .moment.in .flame{animation:flicker .32s ease-in-out infinite alternate,burnout 1.6s forwards}
.motion-on .moment.in .f1{animation-duration:.27s,1.6s}.motion-on .moment.in .f2{animation-duration:.38s,1.6s}
@keyframes flicker{from{transform:scaleY(.9) skewX(-4deg)}to{transform:scaleY(1.14) skewX(5deg)}}
@keyframes burnout{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}
.motion-on .stamp{opacity:0;transform:translate(200px,212px) rotate(-7deg) scale(2.6);transition:opacity .2s 1.5s,transform .45s cubic-bezier(.5,0,.4,1.6) 1.5s}
.motion-on .moment.in .stamp{opacity:1;transform:translate(200px,212px) rotate(-7deg) scale(1)}
.motion-on .moment.in .motif.fire{animation:shake .4s 1.55s}
@keyframes shake{25%{transform:translate(4px,-3px)}50%{transform:translate(-4px,2px)}75%{transform:translate(2px,3px)}}
.motion-on .closing .draw{transition:stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1) var(--d)}
.motion-on .closing.in .draw{stroke-dashoffset:0}
/* The closing words and links arrive quickly (within about 0.6 s), so nobody waits at the end. (fableMobileArchiveFix20261005) */
.motion-on .closing h2,.motion-on .closing .cta,.motion-on .closing .note,.motion-on .closing .today-year,.motion-on .closing .today-label,.motion-on .closing .today-text{opacity:0;transform:translateY(16px);transition:opacity .45s ease-out,transform .45s ease-out}
.motion-on .closing.in .today-year,.motion-on .closing.in .today-label{opacity:1;transform:none;transition-delay:0s}
.motion-on .closing.in h2,.motion-on .closing.in .today-text{opacity:1;transform:none;transition-delay:.05s}
.motion-on .closing.in .cta{opacity:1;transform:none;transition-delay:.1s}
.motion-on .closing.in .note{opacity:1;transform:none;transition-delay:.15s}
/* Phones and tablets (≤900px) scroll natively, so the hold pill is not needed there and never covers text or the footer. */
@media (max-width:900px){.holdbar{display:none!important}}

/* motion off: everything is shown in its final, still state */
.motion-off .draw{stroke-dashoffset:var(--to,0)!important}
.motion-off .flame,.motion-off .ship{display:none}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important}
html:has(.motion-off){scroll-behavior:auto}

/* footer, shared with the other archive pages */
html[lang=en] div.site-footer-lang.en{display:block}
.site-footer-lang{position:relative;z-index:2}
.site-footer{--peach:#ecbca8;background:var(--ink);color:var(--cream);text-align:left;font:15px/1.6 var(--sans)}
.site-footer a{color:inherit;text-decoration:none}
.site-footer h3{margin:0 0 6px}
.site-footer p{margin:0}
footer.site-footer{display:block;padding:70px 4.5vw 30px}
.site-footer .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:5vw;align-items:start}
.site-footer .footer-logo{width:120px;height:auto;margin-bottom:22px}
.site-footer .footer-title{font:30px var(--serif);margin-bottom:14px}
.site-footer .footer-brand p{font-size:13px;line-height:1.85;max-width:380px;opacity:.85}
.site-footer .footer-motto{font:italic 17px/1.6 var(--serif)!important;color:var(--peach);margin-top:18px;opacity:1!important}
.site-footer .footer-col{display:flex;flex-direction:column;gap:11px}
.site-footer .footer-col h3{font:400 11px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--peach);margin:8px 0 10px}
.site-footer .footer-col a{font-size:14px;opacity:.9;transition:opacity .3s,transform .3s}
.site-footer .footer-col a:hover{opacity:1;transform:translateX(4px)}
.site-footer .footer-years{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:13px!important}
.site-footer .footer-years strong{font:400 26px var(--serif)}
.site-footer .footer-years span{color:var(--peach)}
.site-footer .footer-bottom{margin-top:55px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #eee5ce30;padding-top:20px;font-size:11px;letter-spacing:.7px;opacity:.8}

@media(max-width:1100px){.rail{display:none}.moment,.moment:nth-of-type(odd){padding:10vh 7vw}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:6vh 7vw 10vh}
  .branch{width:100%;opacity:.3;justify-self:center;align-self:start;margin-top:-6vh}
  .moment,.moment:nth-of-type(odd){grid-template-columns:1fr;gap:28px;padding:12vh 7vw}
  .moment:nth-of-type(odd) .m-art{order:0}
  .m-art{max-width:520px;margin-bottom:30px}
  .ctas{grid-template-columns:1fr 1fr}
  .site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:40px 30px}.site-footer .footer-brand{grid-column:1/-1}
}
@media(max-width:600px){
  header{padding:14px 16px}.brand{font-size:19px}.brand span{font-size:8px;letter-spacing:2px}
  .controls{gap:12px}.controls .home.el,.controls .home.en,.counter{display:none!important}
  .hero{padding:5vh 16px 10vh}
  .moment,.moment:nth-of-type(odd){padding:10vh 16px}
  .m-year{white-space:normal}.holdbar{bottom:12px;padding:8px 14px;gap:8px}.holdbar i{width:100px}.today-year{font-size:52px}
  .ctas{grid-template-columns:1fr}
  .closing{padding:10vh 16px}
  footer.site-footer{padding:45px 16px 25px}.site-footer .footer-grid{grid-template-columns:1fr}.site-footer .footer-bottom{flex-direction:column;gap:8px}
}