@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/CormorantGaramond-400.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/CormorantGaramond-400i.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/CormorantGaramond-500.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Jost-400.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Jost-500.woff2) format('woff2')}
:root{--green:#123524;--green2:#17402D;--deep:#091E16;--plaster:#EEE7DA;--ink:#1A1A17;--brass:#C9A45A;--brass2:#E0C182;--mute:rgba(238,231,218,.62);
--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--sans:'Jost',system-ui,sans-serif;
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--deep);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;background:var(--green);color:var(--plaster);font-family:var(--serif);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-50%;background:var(--grain);opacity:.07;pointer-events:none;z-index:50;mix-blend-mode:overlay;animation:grain 9s 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)}}
.sc{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.32em;font-size:11px}
a{color:inherit}
[hidden]{display:none!important}
/* front door */
.door{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px 28px 96px;
background:linear-gradient(180deg,rgba(7,25,17,.40),rgba(11,31,20,.40) 52%,rgba(6,21,14,.84)),var(--green);isolation:isolate;overflow:hidden}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 46% at 50% 44%,rgba(9,32,22,.55),transparent 75%),linear-gradient(180deg,rgba(10,40,27,.36) 0%,rgba(12,46,31,.52) 45%,rgba(7,26,18,.93) 100%)}
.door::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 32% at 50% 30%,rgba(201,164,90,.14),transparent 70%);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:34vh;z-index:-1;opacity:.16}
.crest{display:block;width:132px;height:auto;margin:0 auto 34px;filter:drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.door h1{font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:.5em;text-indent:.5em;color:var(--plaster);text-transform:uppercase}
.rule{width:44px;height:1px;background:var(--brass);margin:22px auto;opacity:.8;border:0}
.line{font-style:italic;font-size:23px;line-height:1.35;color:rgba(238,231,218,.86);max-width:19em;margin:0 auto}
.btn{display:inline-block;margin-top:44px;padding:16px 30px 15px;border:1px solid rgba(179,148,101,.75);background:transparent;color:var(--brass2);font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;cursor:pointer;transition:background .6s,color .6s,border-color .6s;border-radius:0;text-decoration:none}
.btn:hover,.btn:focus-visible{background:var(--brass);color:var(--green);border-color:var(--brass);outline:none}
.door-foot{position:absolute;bottom:28px;left:0;right:0;color:rgba(238,231,218,.42);font-size:10px}
.fade{opacity:0;animation:fade 2.2s cubic-bezier(.2,.6,.2,1) forwards}
.d1{animation-delay:.25s}.d2{animation-delay:.9s}.d3{animation-delay:1.5s}.d4{animation-delay:2.1s}.d5{animation-delay:2.8s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* gate */
.gate{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(14,18,15,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .7s}
.gate.on{opacity:1}
.card{position:relative;width:100%;max-width:400px;background:var(--plaster);color:var(--ink);padding:44px 30px 34px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(179,148,101,.55);pointer-events:none}
.card::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.10;mix-blend-mode:multiply;pointer-events:none}
.card .mark{width:80px;height:auto;margin:0 auto 16px;display:block}
.card h2{font-weight:400;font-size:30px;line-height:1.1;margin-bottom:8px}
.card .sc{color:#7c6a4b}
.card label{display:block;margin:26px 0 10px;color:#6f6553}
.field{width:100%;border:0;border-bottom:1px solid #8f7d5d;background:transparent;font-family:var(--sans);font-size:20px;letter-spacing:.22em;text-align:center;text-transform:uppercase;padding:10px 4px;color:var(--ink);border-radius:0;-webkit-appearance:none}
.field:focus{outline:none;border-bottom-color:var(--ink)}
.field::placeholder{color:rgba(26,26,23,.28)}
.card .btn{margin-top:28px;color:var(--ink);border-color:var(--ink);position:relative;z-index:1}
.card .btn:hover,.card .btn:focus-visible{background:var(--green);color:var(--plaster);border-color:var(--green)}
.msg{min-height:1.5em;margin-top:16px;font-style:italic;font-size:17px;color:#7a4b35}
.quiet{margin-top:22px;font-style:italic;font-size:16px;color:#6f6553}
.close{position:absolute;top:14px;right:16px;z-index:2;background:none;border:0;font-family:var(--sans);font-size:22px;line-height:1;color:#6f6553;cursor:pointer;padding:6px}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* house */
.house{opacity:0;transition:opacity 1.6s ease}
.house.on{opacity:1}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:rgba(18,53,36,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(179,148,101,.18)}
.top img{height:26px;width:auto;display:block}
.top .sc{font-size:10px;color:var(--mute)}
.top button{background:none;border:0;color:var(--mute);cursor:pointer}
.welcome{text-align:center;padding:84px 28px 40px}
.welcome .crest{width:96px;margin-bottom:26px;filter:none}
.welcome h2{font-weight:400;font-size:42px;line-height:1.05}
.welcome p{color:var(--mute);margin-top:12px}
section{padding:64px 26px;max-width:980px;margin:0 auto}
.eyebrow{display:block;color:var(--brass);text-align:center;margin-bottom:14px}
.h{font-weight:400;font-size:36px;line-height:1.1;text-align:center;margin-bottom:34px}
.manifesto{max-width:34em;margin:0 auto;text-align:center}
.manifesto p{font-size:20.5px;line-height:1.55;color:rgba(238,231,218,.9)}
.manifesto p+p{margin-top:1em}
.manifesto p:first-child::first-letter{color:var(--brass)}
.sig{margin-top:30px;color:var(--brass)}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--brass);opacity:.7;padding:8px 0}
.orn::before,.orn::after{content:"";width:60px;height:1px;background:currentColor}
.orn span{font-size:10px}
.lore{display:grid;gap:18px}
.lore article{position:relative;background:var(--plaster);color:var(--ink);padding:30px 26px 24px}
.lore article::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.09;mix-blend-mode:multiply;pointer-events:none}
.lore .no{color:#8a7550;font-size:10px}
.lore h3{font-weight:500;font-size:26px;line-height:1.15;margin:8px 0 10px}
.lore p{font-size:18.5px;line-height:1.5;color:#2c2a25}
.lore .src{margin-top:14px;font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:#7d725f}
.lore .slot h3,.lore .slot p{color:rgba(26,26,23,.38)}
.lore .slot p{font-style:italic}
.gath{border-top:1px solid rgba(179,148,101,.35)}
.gath li{list-style:none;display:grid;grid-template-columns:64px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid rgba(179,148,101,.35)}
.gath .date{font-family:var(--sans);font-size:10px;letter-spacing:.24em;color:var(--brass);text-transform:uppercase;line-height:1.6;padding-top:6px}
.gath h3{font-weight:400;font-size:26px;line-height:1.15}
.gath p{color:var(--mute);font-size:18px;margin-top:4px}
.gath .tba{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);border:1px solid rgba(179,148,101,.5);padding:5px 9px 4px}
.ledger{position:relative;background:var(--plaster);color:var(--ink);padding:34px 22px 28px;max-width:640px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.ledger::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.1;mix-blend-mode:multiply;pointer-events:none}
.ledger .head{display:grid;grid-template-columns:52px 1fr 64px;gap:10px;padding-bottom:10px;border-bottom:2px solid var(--ink);color:#6f6553;font-size:9.5px}
.ledger ol{list-style:none}
.ledger li{display:grid;grid-template-columns:52px 1fr 64px;gap:10px;align-items:end;height:46px;border-bottom:1px solid rgba(26,26,23,.18);font-size:19px}
.ledger li .n{font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:#8a7550;padding-bottom:10px}
.ledger li .nm{font-style:italic;color:rgba(26,26,23,.3);padding-bottom:8px}
.ledger li .yr{font-family:var(--sans);font-size:10px;letter-spacing:.14em;color:rgba(26,26,23,.35);text-align:right;padding-bottom:11px}
.ledger .foot{margin-top:18px;text-align:center;font-style:italic;color:#6f6553;font-size:16px}
footer{text-align:center;padding:80px 26px 56px;border-top:1px solid rgba(179,148,101,.18);margin-top:40px}
footer .crest{width:74px;margin-bottom:20px;opacity:.9;filter:none}
footer .sc{color:rgba(238,231,218,.45);font-size:10px;line-height:2}
footer button{margin-top:20px;background:none;border:0;color:rgba(238,231,218,.4);cursor:pointer;font-size:10px}
.reveal{opacity:0;transform:translateY(14px);transition:opacity 1.4s ease,transform 1.4s ease}
.reveal.in{opacity:1;transform:none}
@media(min-width:760px){
 body{font-size:20px}
 .crest{width:168px}
 .door h1{font-size:19px}
 .line{font-size:27px}
 .lore{grid-template-columns:1fr 1fr;gap:22px}
 section{padding:96px 40px}
 .h{font-size:46px}
 .welcome h2{font-size:56px}
 .gath li{grid-template-columns:140px 1fr;gap:28px;padding:30px 0}
 .top{padding:16px 40px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.fade,.reveal{opacity:1;transform:none}}

/* magic */
.crest-wrap{position:relative;display:block;width:132px;margin:0 auto 34px;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.crest-wrap .crest{width:100%;margin:0}
.sheen{position:absolute;inset:0;-webkit-mask:url(/brand/crest.svg) center/contain no-repeat;mask:url(/brand/crest.svg) center/contain no-repeat;
background:linear-gradient(112deg,transparent 0%,transparent 42%,rgba(255,236,196,.95) 50%,transparent 58%,transparent 100%);background-size:320% 100%;background-position:130% 0;animation:sheen 7.5s 3.2s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}
@keyframes sheen{0%{background-position:130% 0}38%,100%{background-position:-30% 0}}
.door .crest-wrap::before{content:"";position:absolute;left:50%;top:46%;width:260%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(201,174,126,.16),transparent 62%);z-index:-1;animation:halo 8s ease-in-out infinite}
@keyframes halo{50%{opacity:.4;transform:translate(-50%,-50%) scale(.92)}}
.welcome .crest-wrap{width:96px;margin-bottom:26px}
.motes{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.bloom{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,236,196,.95),rgba(179,148,101,.55) 30%,rgba(18,53,36,0) 70%)}
.bloom.go{animation:bloom 1.9s ease forwards}
@keyframes bloom{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.6)}}
.card.ok .mark{animation:glint 1s ease}
@keyframes glint{50%{filter:drop-shadow(0 0 14px rgba(179,148,101,.9))}}
.lore article{transition:transform .8s cubic-bezier(.2,.6,.2,1),box-shadow .8s,opacity 1.4s ease}
.lore article.in:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.ledger li{opacity:0;transition:opacity .9s ease}
.reveal.in .ledger li,.ledger.in li{opacity:1}
@media(min-width:760px){.crest-wrap{width:168px}}
@media(prefers-reduced-motion:reduce){.sheen,.motes{display:none}}

.crest-wrap .crest{position:relative;z-index:1}
.door .crest-wrap{width:154px;margin-bottom:26px}
.crest-line{position:absolute;inset:0;z-index:2;pointer-events:none;background-color:#F3D695;-webkit-mask:url(/brand/crest-mark.svg) center/75% 75% no-repeat;mask:url(/brand/crest-mark.svg) center/75% 75% no-repeat;clip-path:inset(100% 0 0);animation:drawline 2s .4s cubic-bezier(.3,.6,.2,1) forwards,linelast .9s 2.5s ease forwards}
@keyframes drawline{to{clip-path:inset(0 0 0)}}@keyframes linelast{to{opacity:0}}
.door .crest-wrap .crest{opacity:0;animation:fillcrest 1.4s 1.5s ease forwards}
@keyframes fillcrest{to{opacity:1}}
.gate .field:focus{box-shadow:0 8px 22px -10px rgba(201,164,90,.7)}
.gate .field{transition:box-shadow .5s ease,border-color .5s ease}
.art-inset{position:relative;height:260px;background:url(/art/aerial.webp) center 56%/cover no-repeat;filter:saturate(.78);margin:30px auto 10px;max-width:1100px;overflow:hidden}
.art-inset::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,30,22,.72),transparent 58%)}
.art-caption{position:absolute;bottom:22px;left:26px;color:var(--plaster);font-size:10px}
.lore article:nth-child(3n+2){background:#E5D9C5}
@media(min-width:700px){.art-inset{height:380px}.door .crest-wrap{width:190px}}
@media(prefers-reduced-motion:reduce){.crest-line{display:none}.door .crest-wrap .crest{opacity:1}.art-inset{filter:none}}

/* unlock: seal stamp + doors */
.seal{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;z-index:5;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#E8CB8A,#C9A45A 55%,#9C7A3A);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 6px rgba(255,255,255,.12),inset 0 0 0 9px rgba(120,90,40,.35);opacity:0;transform:scale(2.4) rotate(-18deg);pointer-events:none}
.seal img{width:60%;height:auto}
.card.ok .seal{animation:stamp .55s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes stamp{to{opacity:1;transform:scale(1) rotate(-8deg)}}
.doors{position:fixed;inset:0;z-index:70;pointer-events:none;display:none}
.doors.on{display:block}
.leaf{position:absolute;top:0;bottom:0;width:50.5%;background:var(--green);overflow:hidden;transition:transform 1.7s cubic-bezier(.7,0,.2,1)}
.leaf::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.09;mix-blend-mode:overlay}
.leaf.l{left:0;border-right:1px solid rgba(201,164,90,.6)}.leaf.r{right:0;border-left:1px solid rgba(201,164,90,.6)}
.leaf img{position:absolute;top:50%;width:150px;height:auto;margin-top:-79px}
.leaf.l img{right:-75px}.leaf.r img{left:-75px}
.doors.open .leaf.l{transform:translateX(-101%)}.doors.open .leaf.r{transform:translateX(101%)}
/* members: ink in, pages turn */
.lore{perspective:1400px}
.lore article.reveal{transform-origin:left center;transform:rotateY(-24deg) translateY(18px);filter:none}
.lore article.reveal.in{transform:none}
.art-inset{background-attachment:scroll;transform:translateZ(0)}
@media(prefers-reduced-motion:reduce){.reveal{filter:none}.doors{display:none!important}.lore article.reveal{transform:none}}
@media(min-width:760px){.manifesto p{font-size:24px}}

/* v3 motion: sky by the hour, depth, ink, the flyover */
.scene{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
 --tint:#fff;--tintA:0;--glowC:#ffd9a0;--glowA:0;--starsA:0;--lightsA:0}
.art{position:absolute;inset:0;opacity:0;transform:scale(1.07);animation:wash 4.2s .2s cubic-bezier(.25,.6,.2,1) forwards}
@keyframes wash{to{opacity:.82;transform:none}}
.plane{position:absolute;inset:0;will-change:transform}
.wc{position:absolute;inset:-3%;background:url(/art/hero-tall.webp) center 56%/cover no-repeat;filter:saturate(.72) contrast(1.1)}
.wc-fore{background-image:url(/art/hero-tall-fore.webp)}
.tint{position:absolute;inset:0;background:var(--tint);opacity:var(--tintA);mix-blend-mode:multiply;transition:opacity 3s ease,background-color 3s ease}
.glow{position:absolute;inset:0;background:radial-gradient(90% 40% at 50% 22%,var(--glowC),transparent 70%);opacity:var(--glowA);mix-blend-mode:screen;transition:opacity 3s ease}
.stars{position:absolute;left:0;top:0;width:100%;height:38%;opacity:var(--starsA);transition:opacity 4s ease;-webkit-mask:linear-gradient(#000 35%,transparent 92%);mask:linear-gradient(#000 35%,transparent 92%)}
.lights{position:absolute;left:0;top:0;width:10px;height:10px;opacity:var(--lightsA);transition:opacity 2s ease;mix-blend-mode:screen}
.lights i{position:absolute;inset:-60% -10% -10%;background:radial-gradient(50% 42% at 50% 62%,rgba(255,244,214,.95),rgba(255,214,150,.42) 45%,transparent 72%);opacity:0}
.lights.on i{animation:warmup 3.4s .4s steps(1,end) forwards,hum 6s 4s ease-in-out infinite}
@keyframes warmup{0%{opacity:0}8%{opacity:.5}12%{opacity:.1}22%{opacity:.75}27%{opacity:.3}40%,100%{opacity:1}}
@keyframes hum{50%{opacity:.86}}
.flyover{position:absolute;left:0;top:0;width:clamp(64px,17vw,130px);margin-left:calc(clamp(64px,17vw,130px) / -2);opacity:0;will-change:transform,opacity}
.flyover svg{display:block;width:100%;height:auto;fill:#0B1712;transform:rotate(180deg)}
.flyover.go{animation:fly 9.5s cubic-bezier(.55,.05,.75,.45) forwards}
@keyframes fly{0%{opacity:0;transform:translate3d(38vw,27svh,0) scale(.16,.05)}
 10%{opacity:.9}
 60%{transform:translate3d(48vw,17svh,0) scale(.5,.2)}
 92%{opacity:.92}
 100%{opacity:0;transform:translate3d(64vw,-12svh,0) scale(2.4,1.5)}}
.whisper{position:absolute;left:0;right:0;bottom:56px;font-style:italic;font-size:17px;color:rgba(238,231,218,.78);opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.whisper.on{opacity:1}
/* gold ink: words write in left to right behind a gold nib */
.ink{background:linear-gradient(100deg,var(--plaster) 0 38%,#F6DFA4 45%,#C9A45A 49%,rgba(201,164,90,0) 55%) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ink.in,.in .ink,.house.on .welcome .ink{background-position:0 0;transition:background-position 2.4s cubic-bezier(.35,.55,.2,1) .25s}
.house.on .welcome .ink{transition-delay:1.1s}
.ink-load{animation:inkload 2.6s 2.1s cubic-bezier(.35,.55,.2,1) forwards}
@keyframes inkload{to{background-position:0 0}}
/* the Roll signs itself */
.ledger li .nm{position:relative;line-height:1;padding-bottom:9px;align-self:end}
.ledger .sig{display:inline-block;vertical-align:bottom;font-size:25px;line-height:1.05;letter-spacing:.01em;color:#1A1A17;clip-path:inset(-20% 100% -30% 0);padding-right:4px}
.ledger.in .sig,.reveal.in .ledger .sig{animation:sign 1.5s cubic-bezier(.5,.1,.3,1) forwards,dry 2.6s ease forwards;animation-delay:var(--d),var(--d)}
@keyframes sign{to{clip-path:inset(-20% -4% -30% 0)}}
@keyframes dry{0%{color:#2E2a20;text-shadow:0 0 .5px rgba(80,60,20,.6)}100%{color:#1A1A17;text-shadow:none}}
.ledger .nib{position:absolute;left:0;bottom:12px;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:#C9A45A;box-shadow:0 0 6px rgba(201,164,90,.8);opacity:0}
.ledger.in .nib,.reveal.in .ledger .nib{animation:nib 1.5s cubic-bezier(.5,.1,.3,1) forwards;animation-delay:var(--d)}
@keyframes nib{0%{opacity:0;transform:translateX(0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(var(--w,80px))}}
/* unlock: a gold seam, then the doors */
.doors .seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:3;background:linear-gradient(transparent,#F3D695 20%,#FFF1CF 50%,#F3D695 80%,transparent);box-shadow:0 0 18px 4px rgba(243,214,149,.55);transform:scaleY(0);opacity:0}
.doors.on .seam{animation:seam 1.1s cubic-bezier(.3,.6,.2,1) forwards}
.doors.open .seam{animation:seamout .7s ease forwards}
@keyframes seam{0%{opacity:0;transform:scaleY(0)}30%{opacity:1}100%{opacity:1;transform:scaleY(1)}}
@keyframes seamout{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(1) scaleX(8)}}
.card.ok{animation:press .5s .1s cubic-bezier(.3,1.4,.5,1)}
@keyframes press{40%{transform:scale(.985)}}
.card.ok .seal::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(243,214,149,.8);animation:ring 1.1s .35s ease-out forwards;opacity:0}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.crest-wrap.glint .crest{animation:glint 1.4s ease}
.crest-wrap{-webkit-tap-highlight-color:transparent;cursor:default}
@media(min-width:700px){.wc{background-image:url(/art/hero-wide.webp);background-position:center 53%}.wc-fore{background-image:url(/art/hero-wide-fore.webp)}}
@media(prefers-reduced-motion:reduce){.art{opacity:.82;transform:none}.plane.fore{display:none}
 .ink{background:none;-webkit-text-fill-color:currentColor;color:inherit}.door .line.ink{color:var(--mute)}
 .ledger .sig{clip-path:none}.ledger .nib,.flyover,.whisper{display:none}.lights.on i{opacity:1}}

/* handwritten greeting */
.greet{position:relative;margin:0 auto 18px;font-style:italic;font-size:21px;line-height:1.2;color:#E6C887;letter-spacing:.01em}
.greet .hand{display:inline-block;padding:0 4px 2px 0;clip-path:inset(-30% 100% -30% 0);animation:sign 2.4s .9s cubic-bezier(.45,.1,.3,1) forwards}
.greet .nib{position:absolute;left:0;bottom:6px;width:5px;height:5px;border-radius:50%;background:#F3D695;box-shadow:0 0 8px rgba(243,214,149,.9);opacity:0;animation:nibg 2.4s .9s cubic-bezier(.45,.1,.3,1) forwards}
@keyframes nibg{0%{opacity:0;left:0}8%{opacity:1}88%{opacity:1}100%{opacity:0;left:100%}}
.greet{display:inline-block}
/* hawk */
.hawk{position:absolute;left:0;top:0;width:clamp(26px,7vw,46px);opacity:0;will-change:transform,opacity}
.hawk svg{display:block;width:100%;height:auto;fill:#0E1C15}
.hawk.go{animation:hawk 21s cubic-bezier(.4,0,.6,1) forwards}
.hawk.go svg{animation:bank 7s ease-in-out infinite}
.hawk.ltr.go{animation-name:hawkr}
@keyframes hawk{0%{opacity:0;transform:translate3d(104vw,var(--y0),0)}8%,90%{opacity:.7}100%{opacity:0;transform:translate3d(-12vw,var(--y1),0)}}
@keyframes hawkr{0%{opacity:0;transform:translate3d(-12vw,var(--y0),0)}8%,90%{opacity:.7}100%{opacity:0;transform:translate3d(104vw,var(--y1),0)}}
@keyframes bank{0%,100%{transform:rotate(-4deg) scaleY(.9)}50%{transform:rotate(5deg) scaleY(1)}}
/* the founders' note */
.founders{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:24px 20px calc(28px + env(safe-area-inset-bottom));background:linear-gradient(transparent 25%,rgba(6,16,11,.6) 70%);opacity:0;transition:opacity 1.2s ease}
.founders.on{opacity:1}
.founders .paper{position:relative;max-width:420px;background:var(--plaster);color:var(--ink);padding:38px 30px 30px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateY(16px) rotate(-.6deg);transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.founders.on .paper{transform:rotate(-.6deg)}
.founders .paper::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.1;mix-blend-mode:multiply;pointer-events:none}
.founders .eyebrow{color:#8a7550;font-size:10px}
.founders h2{font-weight:400;font-size:30px;line-height:1.1;margin:10px 0 18px}
.founders p{font-size:18px;line-height:1.55;margin:0 auto 12px;max-width:30ch}
.founders .names{display:flex;justify-content:center;gap:22px;margin:22px 0 20px;font-style:italic;font-size:26px}
.founders .names span{clip-path:inset(-30% 100% -30% 0)}
.founders.on .names span{animation:sign 1.3s cubic-bezier(.45,.1,.3,1) forwards}
.founders.on .names span:nth-child(1){animation-delay:1.2s}.founders.on .names span:nth-child(2){animation-delay:2.2s}.founders.on .names span:nth-child(3){animation-delay:3.2s}
.founders button{background:none;border:0;border-bottom:1px solid #8a7550;color:#5f5440;padding:6px 2px;cursor:pointer;font-size:10px}
@media(prefers-reduced-motion:reduce){.greet .hand,.founders .names span{clip-path:none}.greet .nib,.hawk{display:none}}
@media(min-width:760px){.founders{align-items:center}}
.founders button:focus{outline:none}.founders button:focus-visible{outline:1px solid #8a7550;outline-offset:4px}

/* motto as hero (Drew 1:25 PM) */
.door .line.motto{font-size:34px;line-height:1.18;color:#E6C887;max-width:none;letter-spacing:.005em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
@media(min-width:700px){.door .line.motto{font-size:46px}}
.greet{display:none!important}

/* v4 intro: the hill is sketched in pencil, then the watercolor blooms in */
.sketch{position:absolute;left:0;top:0;width:100%;height:100%;display:none;background:#E5DDC7;transition:opacity .7s ease}
html.intro .sketch{display:block}
html.intro .sketch.gone{opacity:0}
html.intro.intro-done .sketch{display:none}
html.intro .art{opacity:.82;transform:none;animation:none}
.door::after{transition:opacity 1.6s ease}
html.intro .door::after{opacity:.12}
html.intro.veil .door::after{opacity:1}
html.intro .hills,html.intro .motes{opacity:0;transition:opacity 1.6s ease}html.intro.veil .hills{opacity:.16}html.intro.veil .motes{opacity:1}
html.intro .fade{animation-duration:1.5s}
html.intro .d1{animation-delay:2.35s}html.intro .d2{animation-delay:2.7s}html.intro .d3{animation-delay:2.95s}html.intro .d4{animation-delay:3.45s}html.intro .d5{animation-delay:3.8s}
html.intro .crest-line{animation:drawline 1.3s 2.4s cubic-bezier(.3,.6,.2,1) forwards,linelast .8s 3.6s ease forwards}
html.intro .door .crest-wrap .crest{animation:fillcrest 1s 3s ease forwards}
html.intro .ink-load{animation:inkload 1.7s 3s cubic-bezier(.35,.55,.2,1) forwards}
html.intro .sheen{animation-delay:5.4s}
/* tap to skip: everything restarts short */
html.intro.skip .fade{animation:fade2 .9s cubic-bezier(.2,.6,.2,1) forwards}
html.intro.skip .d1{animation-delay:.1s}html.intro.skip .d2{animation-delay:.25s}html.intro.skip .d3{animation-delay:.35s}html.intro.skip .d4{animation-delay:.55s}html.intro.skip .d5{animation-delay:.7s}
html.intro.skip .crest-line{display:none}
html.intro.skip .door .crest-wrap .crest{animation:fillcrest2 .8s .15s ease forwards}
html.intro.skip .ink-load{animation:inkload2 1.1s .35s cubic-bezier(.35,.55,.2,1) forwards}
html.intro.skip .sketch{transition-duration:.45s}
@keyframes fade2{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fillcrest2{to{opacity:1}}
@keyframes inkload2{to{background-position:0 0}}
/* personal invitation */
.invited{margin:0 auto 12px;font-style:italic;font-size:21px;line-height:1.25;color:#E6C887;letter-spacing:.01em;max-width:19em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
@media(min-width:700px){.invited{font-size:25px}}
/* after the intro: a slow light over the hills, a glint on the Bowl */
.sweep{position:absolute;left:0;right:0;top:34%;bottom:0;overflow:hidden;pointer-events:none;mix-blend-mode:soft-light;-webkit-mask:linear-gradient(transparent,#000 22%,#000 70%,transparent);mask:linear-gradient(transparent,#000 22%,#000 70%,transparent)}
.sweep i{position:absolute;top:-10%;bottom:-10%;left:0;width:55%;background:linear-gradient(100deg,rgba(255,230,180,0) 0%,rgba(255,232,188,.55) 48%,rgba(255,240,210,.7) 52%,rgba(255,230,180,0) 100%);transform:translate3d(-110%,0,0) skewX(-14deg);opacity:0;will-change:transform,opacity}
.sweep.go i{animation:sweep 7s cubic-bezier(.45,.05,.55,.95) forwards}
@keyframes sweep{0%{opacity:0;transform:translate3d(-110%,0,0) skewX(-14deg)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate3d(200%,0,0) skewX(-14deg)}}
.bglint{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;opacity:0;mix-blend-mode:screen;
background:radial-gradient(circle,rgba(255,240,205,.95) 0 6%,rgba(240,205,135,.5) 14%,transparent 42%),linear-gradient(90deg,transparent 18%,rgba(246,223,164,.55) 50%,transparent 82%) center/100% 1.5px no-repeat,linear-gradient(0deg,transparent 30%,rgba(246,223,164,.45) 50%,transparent 70%) center/1.5px 100% no-repeat}
.bglint.go{animation:bglint 2.2s ease-in-out forwards}
@keyframes bglint{0%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:.85;transform:scale(1) rotate(20deg)}100%{opacity:0;transform:scale(.5) rotate(45deg)}}
@media(prefers-reduced-motion:reduce){.sketch,.sweep,.bglint{display:none!important}}