:root{
  --paper:#F6F2E7; --ink:#1F2A22; --ink-2:#4A5A4E; --muted:#7A867E; --line:rgba(31,42,34,.14);
  --olive:#5E6B3F; --ochre:#B98A3A; --ochre-deep:#9A6E24; --glass:rgba(255,252,245,.58); --glass-b:rgba(255,255,255,.75);
  --mark:#FFE98A;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
.page{position:relative;overflow:hidden;width:100%}
body{background:var(--paper);color:var(--ink);font-family:"Golos Text","Segoe UI",Helvetica,Arial,sans-serif;font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.8rem,7.2vw,5.4rem)}
h1 .sub{display:block;font-size:.46em;font-style:italic;color:var(--ink-2);margin-top:.2em;letter-spacing:0}
h2{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:1.5rem}
h3{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:.6rem}
p{margin-bottom:1rem;max-width:38rem}
a{color:var(--ink)}
mark{background:var(--mark);color:inherit;padding:0 .25em;border-radius:3px}
.muted{color:var(--muted)}
.nw{white-space:nowrap}
#what-text b{font-weight:600;color:var(--ink)}
.lbl{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre-deep);font-weight:600}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem;position:relative;z-index:2}
@media(min-width:48rem){.wrap{padding:0 3rem}}
section{position:relative;padding:5rem 0}

/* washes: the thing that stitches sections together */
.wash{position:absolute;z-index:0;pointer-events:none;opacity:.95}
.wash img{width:100%;height:auto;display:block}
.wash.edge img{-webkit-mask-image:radial-gradient(ellipse 52% 52% at 50% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 52% 52% at 50% 50%,#000 35%,transparent 100%)}
/* thread */
.thread{position:absolute;left:1.1rem;top:0;bottom:0;width:1px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--ochre) 0 4px,transparent 4px 10px);opacity:.45}
@media(min-width:48rem){.thread{left:2.1rem}}
.thread::before,.thread::after{content:"";position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;background:var(--ochre)}
.thread::before{top:7.5rem}.thread::after{bottom:3rem}

/* hero */
.hero{padding:6rem 0 2rem;min-height:92vh;display:flex;align-items:center;overflow:visible}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
@media(min-width:56rem){.hero .wrap{grid-template-columns:1.15fr 1fr}}
.hero .kicker{margin-bottom:1.5rem}
.hero h1{position:relative;z-index:3}
.hero .lead{font-size:1.2rem;max-width:30rem;margin-top:1.75rem;color:var(--ink-2)}
.hero .art{position:relative;z-index:1}
.hero .art img{width:118%;max-width:none;height:auto;display:block;margin-left:-14%}
@media(min-width:56rem){.hero .wrap{grid-template-columns:1fr 1fr;gap:2rem}.hero .art img{width:108%;margin-left:-4%}}
@media(max-width:56rem){.hero{min-height:auto;padding-top:4.5rem}.hero .art img{width:100%;margin:0 auto;max-width:28rem}}
.w-hero{left:-8%;top:14%;width:58%;opacity:.55;transform:rotate(-14deg)}
@media(max-width:56rem){.w-hero{left:-20%;top:-2%;width:80%}}
.w-hero2{left:-20%;bottom:-30%;width:60%;opacity:.7}

/* glass */
.glass{background:var(--glass);border:1px solid var(--glass-b);border-radius:26px;-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 20px 50px -30px rgba(31,42,34,.35)}

/* formats */
.formats{padding-top:2rem}
.formats .wrap{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:60rem){.formats .wrap{grid-template-columns:1.2fr 1fr;align-items:start}}
.card{padding:2rem 1.75rem 1.75rem;position:relative}
.card .lbl{display:block;margin-bottom:1rem}
.card dl{margin:1rem 0 1.5rem}
.card dt{font-family:"Playfair Display",serif;font-weight:600;font-size:1.15rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.card dt:first-of-type{border-top:0;padding-top:0;margin-top:0}
.card dd{margin-top:.25rem;max-width:38rem;font-size:.98rem}
.btn{display:inline-block;padding:.95rem 1.6rem;border-radius:999px;text-decoration:none;font:600 .95rem/1 "Golos Text",sans-serif;color:var(--paper);
  background:linear-gradient(180deg,#36453B 0%,#1F2A22 55%,#161E19 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 6px 14px -6px rgba(31,42,34,.55),0 14px 30px -14px rgba(31,42,34,.45);
  transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 10px 20px -8px rgba(31,42,34,.6),0 22px 40px -16px rgba(31,42,34,.5)}
.btn:active{transform:translateY(0);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 2px 6px rgba(0,0,0,.35) inset}
.btn.ochre{background:linear-gradient(180deg,#D1A24F 0%,#B98A3A 50%,#946A22 100%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 6px 14px -6px rgba(154,110,36,.6),0 14px 30px -14px rgba(154,110,36,.5)}
.w-f1{left:-18%;top:-14%;width:62%}
.w-f2{right:0;bottom:-10%;width:40%;opacity:.7}
.w-f2{right:2%;bottom:-12%;width:40%;opacity:.8}
.card.alt .pic{margin:-2rem -1.75rem 1rem;border-radius:26px 26px 0 0;overflow:hidden;aspect-ratio:16/9}
.card.alt .pic img{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}

/* seats */
.seats{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin:.5rem 0 .25rem}
.ring{position:relative;width:12.5rem;height:12.5rem;flex:none}
.ring::before{content:"";position:absolute;inset:18%;border:1px dashed rgba(31,42,34,.25);border-radius:50%}
.seat{position:absolute;width:3rem;height:3rem;transform:translate(-50%,-50%);transition:opacity .2s,filter .2s}
.seat img{width:100%;height:100%;object-fit:contain;display:block}
.seat.free{opacity:.28;filter:grayscale(.6)}
.seats .n{font-family:"Playfair Display",serif;font-size:2.6rem;line-height:1}
.seats .n small{display:block;font-family:"Golos Text",sans-serif;font-size:.85rem;color:var(--muted);margin-top:.2rem}

/* meetings */
.meetings h2{max-width:14ch}
.meet{display:grid;gap:2rem 1.5rem;grid-template-columns:1fr;margin-top:2.5rem}
@media(min-width:52rem){.meet{grid-template-columns:1fr 1fr}}
.m{position:relative;display:grid;grid-template-columns:1fr;gap:0}
.m .pic{position:relative;aspect-ratio:1/1;width:70%;margin:0 auto -4.5rem;z-index:0}
.m .pic img{width:100%;height:100%;object-fit:cover;display:block}
.m .pic .ph{position:absolute;inset:0;display:none;place-items:center;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.m .pic:not(.has) .ph{display:grid}.m .pic:not(.has) img{display:none}
.m .body{position:relative;z-index:2;padding:1.5rem 1.6rem}
.m h3{font-size:1.45rem}
.m p{margin-bottom:0;font-size:.98rem}
.between{grid-column:1/-1;padding:1.5rem 1.75rem}
.between h3{font-size:1.3rem;font-weight:500}.between p{margin-bottom:0;font-size:.98rem}
.w-m1{left:14%;top:-14%;width:68%;opacity:.45;transform:scaleX(-1) rotate(6deg)}
.w-m2{left:-26%;bottom:-8%;width:66%;opacity:.7}

/* what */
.what{padding-top:2rem}
.what .wrap{display:block}

.what p{max-width:48rem;font-size:1.1rem}
@media(min-width:56rem){.what #what-text{columns:2;column-gap:3.5rem}.what p{break-inside:avoid}}
.w-w1{right:8%;top:-4%;width:40%;opacity:.5}

/* how */
.how .wrap{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:56rem){.how .wrap{grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start}}
.how .box{padding:2rem 1.75rem}
.msgs{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 1.4rem}
.how .lbl{display:block;margin-bottom:.4rem}
.how .links a{margin-right:.6rem}
.w-h1{left:2%;top:-6%;width:42%;opacity:.55}
.w-h2{right:6%;bottom:-18%;width:38%;opacity:.5}

/* about */
.about .wrap{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:56rem){.about .wrap{grid-template-columns:1.15fr 1.35fr;gap:2.5rem;align-items:center}}
.photo{position:relative;max-width:32rem;margin:0 auto}
.photo img{display:block;width:100%;height:auto;position:relative;z-index:1;-webkit-mask-image:linear-gradient(#000 78%,transparent 99%);mask-image:linear-gradient(#000 78%,transparent 99%)}
.photo .blot{position:absolute;inset:-18% -30%;z-index:0;mix-blend-mode:multiply;opacity:.9}
.photo .blot img{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
.about .name{font-family:"Playfair Display",serif;font-weight:600;font-size:2.3rem;line-height:1.05;margin-bottom:.5rem}
.regalia{list-style:none;margin:1.25rem 0}
.regalia li{padding:.5rem 0 .5rem 1.1rem;border-left:2px solid var(--ochre);margin-bottom:.35rem;font-size:.95rem}

/* faq */
.faqs .wrap{max-width:52rem}
details{border-top:1px solid var(--line);padding:1.2rem 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:"Playfair Display",serif;font-weight:400;font-size:1.3rem;line-height:1.3}
summary::-webkit-details-marker{display:none}
summary .st{flex:1 1 auto;min-width:0}
summary::after{content:"+";color:var(--ochre-deep);font-size:1.6rem;line-height:1;flex:none}
details[open] summary::after{content:"–"}
details p{margin-top:.9rem;margin-bottom:.5rem;max-width:44rem}
.w-q{left:-20%;top:30%;width:55%;opacity:.5}
.w-q2{right:-4%;top:6%;width:44%;opacity:.5;transform:rotate(-8deg)}
.w-a1{right:-6%;top:-4%;width:40%;opacity:.5;transform:scaleX(-1)}

footer{padding:2rem 0 4rem;font-size:.85rem;color:var(--muted);position:relative;z-index:2}
footer p{margin-bottom:.35rem}

@media(prefers-reduced-motion:no-preference){.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}}