@font-face{font-family:BodoniTitle;src:url('assets/bodoni-moda-title.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:BodoniTitle;src:url('assets/bodoni-moda-title-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Instrument;src:url('assets/instrument-serif.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Instrument;src:url('assets/instrument-serif-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
:root{color-scheme:dark;--ink:#111210;--paper:#dfdacf;--muted:#9a9b91;--line:rgba(211,206,188,.16);--gutter:clamp(24px,5.5vw,100px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);font-family:Arial,Helvetica,sans-serif;color:var(--paper);font-size:16px}
body{margin:0;min-height:100svh;overflow-x:hidden;background:#111210}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus,a:focus{outline:none}
.keyboard-navigation button:focus-visible,.keyboard-navigation a:focus-visible{outline:1px solid #c8bca1;outline-offset:6px}
button,a{transition:color .25s,opacity .25s}
button:hover,a:hover{color:#fff9e9}
.scene{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(70px,10svh,110px);padding:50px var(--gutter) 45px;position:relative;isolation:isolate;overflow:hidden}
.scene-art-slot{display:flex;align-items:center;justify-content:center;min-width:0;z-index:1}
.artifact-wrap{position:relative;width:fit-content;perspective:1100px;z-index:1}
.js .artifact-wrap{opacity:0}
.artifact{display:block;padding:0;text-align:initial;color:inherit;height:min(57svh,64vw,610px);aspect-ratio:2/3;position:relative;overflow:hidden;transform:rotate(-3deg);border-radius:2px;background:#151613;box-shadow:1px 0 0 #c4baa039,2px 1px 0 #26281e,3px 2px 0 #080907,0 28px 55px #0006,0 3px 9px #0007;will-change:transform}
.artifact:disabled{cursor:default}.artifact:focus-visible{outline-offset:12px}.art-fallback{width:100%;height:100%;display:block;object-fit:cover;filter:brightness(.86) sepia(.12)}
#plate{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.webgl-ready #plate{opacity:1}
.webgl-ready .art-fallback{opacity:0}
.plate-edge{pointer-events:none;position:absolute;inset:0;border:1px solid #cfc3a321;box-shadow:inset 1px 1px 1px #d4d1b810,inset -1px -1px 1px #000a;border-radius:2px}
.artifact-shadow{position:absolute;z-index:-1;left:10%;right:10%;bottom:-25px;height:25px;background:#000b;filter:blur(16px);border-radius:50%}
.identity{display:contents}
h1{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:BodoniTitle,Georgia,serif;font-size:clamp(130px,23vw,370px);font-weight:400;line-height:.9;margin:0;letter-spacing:-.06em;color:#ded8c9;transition:opacity .5s}
h1 span,h1 em{position:absolute;display:block;white-space:nowrap}
h1 span{left:4.5%;top:24%;font-size:.85em;line-height:1;margin-left:0;animation:identity-in 2.2s .35s both}
h1 em{right:4.5%;top:43%;font-size:1em;font-weight:400;line-height:1;margin-left:0;animation:identity-in 2.4s .6s both}
dialog{position:fixed;max-height:calc(100svh - 48px);width:min(620px,calc(100vw - 32px));padding:0;border:1px solid #ada38933;background:#1b1e18;color:var(--paper);box-shadow:0 30px 150px #0009;overflow:auto;overscroll-behavior:contain;border-radius:3px}
dialog::backdrop{background:#070a08b0;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
dialog[open]{animation:dialog-in .55s cubic-bezier(.16,1,.3,1)}
dialog[open]::backdrop{animation:veil-in .4s ease}
dialog.is-closing{animation:dialog-out .22s ease both}
dialog.is-closing::backdrop{animation:veil-out .22s ease both}
.dialog-shell{position:relative;padding:68px 58px 54px}
.close{position:absolute;right:22px;top:17px;padding:10px;color:#a8ab9f;font-size:12px;display:flex;align-items:center;gap:16px}
.close span{font-size:23px;line-height:16px;font-weight:200}
.eyebrow{font-size:10px;letter-spacing:.2em;color:#9d9f8f}
h2{font-family:Instrument,Georgia,serif;font-size:clamp(48px,6vw,68px);line-height:.97;font-weight:400;letter-spacing:-.02em;margin:28px 0 28px}
h2 em{font-weight:400;color:#bcae8c}
.manifesto-body p{font-size:16px;line-height:1.7;color:#bbbeb0;margin:0 0 18px}
.join-shell{padding-bottom:34px}
@keyframes identity-in{from{opacity:0;transform:translateY(24px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialog-out{to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
@keyframes veil-out{to{opacity:0}}

.home-entry{position:relative;z-index:3;width:min(420px,100%);display:flex;align-items:center;justify-content:center;gap:36px;animation:chrome-in 1.6s 1.1s both;transition:opacity .4s}
.join-primary{display:inline-flex;align-items:center;gap:22px;min-height:60px;padding:4px 0;color:#ded8c9;white-space:nowrap}
.join-label{font:italic 38px/1 Instrument,Georgia,serif;letter-spacing:-.025em;position:relative}
.join-label::after{content:'';position:absolute;bottom:-7px;left:0;right:0;height:1px;background:currentColor;opacity:.4;transform:scaleX(0);transform-origin:left;transition:transform .4s,opacity .4s}
.join-arrow{display:grid;place-items:center;width:52px;height:52px;border:1px solid #c6c0ad80;border-radius:50%;font:22px/1 Arial,sans-serif;transition:background .35s,color .35s,border-color .35s,transform .35s}
.join-primary:hover{color:#f5efdf}
.join-primary:hover .join-label::after{transform:scaleX(1);opacity:.75}
.join-primary:hover .join-arrow{background:#ded8c9;color:#171914;border-color:#ded8c9;transform:rotate(45deg)}
.join-primary:active .join-arrow{transform:rotate(45deg) scale(.93)}
.panel-open h1,.panel-open .home-entry{opacity:.2}
.reading h1,.reading .home-entry{opacity:0!important;pointer-events:none}
@keyframes chrome-in{from{opacity:0}to{opacity:1}}
.pointer{position:fixed;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .2s}
.pointer span{display:block;width:14px;height:14px;border:1px solid #dfd8c3b0;border-radius:50%;background:#dfd8c329;transform:translate(-50%,-50%);transition:width .24s,height .24s,background .24s}
.pointer.over-card span{width:36px;height:36px;background:#dfd8c308}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .pointer.is-visible{opacity:1}
 .custom-pointer .scene,.custom-pointer .artifact{cursor:none}
}
@media(prefers-reduced-motion:reduce){.artifact-wrap{animation:none}.join-primary:hover .join-arrow{transform:none}}
@media(min-width:601px) and (max-width:900px){
 h1{font-size:20.5vw}
 h1 span{top:29%;left:4%}
 h1 em{top:47%;right:4%}
 .artifact{height:min(59svh,58vw)}
 .scene{gap:72px}
}
/* A phone cover: the card meets the right edge, with the title low on the left. */
@media(max-width:600px){
 .scene{height:100svh;min-height:480px;display:block;padding:0}
 .scene-art-slot{position:absolute;top:clamp(35px,7svh,70px);right:-24px;width:auto}
 .artifact{height:min(64svh,118vw,540px);width:auto}
 h1{inset:auto;left:26px;bottom:128px;font-size:clamp(96px,28vw,145px);line-height:.9;letter-spacing:-.055em;text-align:left}
 h1 span,h1 em{position:static;display:block;margin:0}
 h1 span{font-size:.4em;line-height:1.15;margin-left:.05em}
 h1 em{font-size:1em;line-height:.96}
 .home-entry{position:absolute;left:26px;right:26px;bottom:max(24px,env(safe-area-inset-bottom));width:auto;margin:0}
 .join-primary{width:100%;justify-content:space-between;gap:20px;min-height:52px}
 .join-label{font-size:32px}
 .join-arrow{width:46px;height:46px;font-size:20px}
 .dialog-shell{padding:60px 28px 32px}.manifesto-body p{font-size:16px;line-height:1.6}h2{margin-top:25px}
}
@media(max-height:650px) and (min-width:601px){
 .scene{padding-top:30px;padding-bottom:25px;gap:40px}
 .artifact{height:48svh}
 h1{font-size:min(23vw,36svh)}
 h1 span{top:22%}h1 em{top:33%}
 .home-entry{width:370px}
 .join-primary{min-height:48px}.join-label{font-size:32px}.join-arrow{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.artifact{will-change:auto}}

/* A reading room, entered by carrying the original live card into the page. */
.manifesto-dialog{inset:0;margin:0;width:100vw;max-width:none;height:100svh;max-height:none;border:0;border-radius:0;background:transparent;isolation:isolate;box-shadow:none;padding:80px var(--gutter);grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.manifesto-dialog[open]{display:grid;animation:none}
.manifesto-dialog::before{content:"";position:fixed;inset:0;background:#111210;z-index:-1;animation:veil-in .7s ease both}
.manifesto-dialog::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.manifesto-art-slot{display:flex;justify-content:center;align-items:center;min-width:0}
.manifesto-art-slot .artifact{height:min(64svh,55vw,650px)}
.manifesto-art-slot .artifact-wrap{animation:none;scale:1;filter:none}
.manifesto-art-slot .artifact{pointer-events:none}
.manifesto-copy{padding:25px 0;max-width:510px;position:static;animation:reading-in .8s .4s both}
.manifesto-dialog > .close{position:fixed;right:var(--gutter);top:30px}
.manifesto-copy h2{font-size:clamp(48px,5.7vw,86px);line-height:1;white-space:nowrap;margin:28px 0}
.manifesto-copy .eyebrow{font-size:10px;color:#929786}
.manifesto-copy .manifesto-body p{font-size:15px;line-height:1.7;margin-bottom:17px}
.manifesto-dialog.is-closing{animation:none}
.manifesto-dialog.is-closing::before{animation:veil-out .22s ease both}
.manifesto-dialog.is-closing .manifesto-copy{animation:reading-out .22s ease both}
@keyframes reading-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes reading-out{to{opacity:0;transform:translateY(8px)}}
@media(max-width:800px){
 .manifesto-dialog{padding:70px 28px 42px;grid-template-columns:1fr;gap:28px;align-items:start}
 .manifesto-dialog[open]{display:flex;flex-direction:column}
 .manifesto-art-slot{position:static;width:100%;flex:none;margin-top:auto}
 .manifesto-art-slot .artifact{width:auto;height:min(30svh,260px)}
 .manifesto-copy{padding:0;max-width:500px;margin:0 auto auto;flex:none}
 .manifesto-copy .eyebrow{display:none}
 .manifesto-copy h2{font-size:clamp(42px,8.5vw,62px);margin:0 0 24px}
 .manifesto-dialog > .close{right:22px;top:18px}
 .manifesto-copy .manifesto-body p{font-size:15px;line-height:1.65}
 .manifesto-copy .manifesto-body p:last-child{margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){.panel-open .identity{filter:none}.manifesto-dialog[open],.manifesto-copy{animation:none}}

dialog:not([open]){display:none}

/* A quiet invitation slip, warmer than the room around it. */
#join{width:min(470px,calc(100vw - 32px));background:linear-gradient(145deg,#ebe6db,#dfd9cb);color:#292d25;border:1px solid #f6f1e299;border-radius:3px;box-shadow:0 24px 100px #0008;color-scheme:light}
#join::backdrop{background:#080b08a6;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.join-shell{padding:46px 40px 32px}
.join-shell .eyebrow{color:#727362;font-size:9px;letter-spacing:.18em}
.join-shell h2{font-size:62px;margin:20px 0 35px;line-height:1}
.join-shell h2 em{color:#88775a;white-space:nowrap}
#join .close{right:12px;top:12px;justify-content:center;width:36px;height:36px;padding:0;color:#737564}
#join .close:hover{color:#252b22}
#join .close span{font-size:24px}
#invite-form{display:grid;gap:23px}
.field-pair{display:contents}
#invite-form label{display:block;font-size:11px;color:#696e5e;line-height:1.5}
#invite-form input{display:block;width:100%;margin-top:4px;padding:7px 0 10px;background:transparent;border:0;border-bottom:1px solid #666b523b;border-radius:0;font:16px/1.5 Arial,sans-serif;color:#252c22;outline:none;transition:border-color .25s}
#invite-form input:focus{border-bottom-color:#6b7459}
#invite-form input::placeholder{color:#8a8d7c;font-size:14px}
#join .invite-submit{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;margin-top:6px;padding:0;border:0;font:italic 29px/1 Instrument,Georgia,serif;text-align:left;color:#353c2d}
.invite-submit span{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #666f5080;border-radius:50%;font:22px/1 Arial,sans-serif;transition:background .3s,color .3s,transform .3s}
#join .invite-submit:hover{color:#20271c}
.invite-submit:hover span{background:#343d2b;color:#f0eadd;transform:rotate(45deg)}
.invite-submit:active span{transform:rotate(45deg) scale(.94)}
.form-status{font-size:12px;line-height:1.5;color:#71795f;margin:-7px 0 0}
.form-status:empty{display:none}
@media(max-width:600px){
 .join-shell{padding:38px 28px 26px}
 .join-shell h2{font-size:54px;margin:18px 0 28px}
 #invite-form{gap:20px}
}
@media(max-height:650px){
 .join-shell{padding-top:30px;padding-bottom:22px}
 .join-shell h2{font-size:50px;margin:12px 0 22px}
 #invite-form{gap:16px}
}
@media(prefers-reduced-motion:reduce){.invite-submit:hover span,.invite-submit:active span{transform:none}}