/* Michelangelus, the one face, in its four cuts. Its own line box is tall, so it takes the room EB Garamond's took, as on alexandria.place. */
@font-face{font-family:'Michelangelus';src:url('/assets/fonts/Michelangelus-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;ascent-override:98%;descent-override:33%;line-gap-override:0%}
@font-face{font-family:'Michelangelus';src:url('/assets/fonts/Michelangelus-Italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap;ascent-override:98%;descent-override:33%;line-gap-override:0%}
@font-face{font-family:'Michelangelus';src:url('/assets/fonts/Michelangelus-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;ascent-override:98%;descent-override:33%;line-gap-override:0%}
@font-face{font-family:'Michelangelus';src:url('/assets/fonts/Michelangelus-BoldItalic.woff2') format('woff2');font-style:italic;font-weight:700;font-display:swap;ascent-override:98%;descent-override:33%;line-gap-override:0%}
:root{--bg:#fafafa;--ink:#211e18;--muted:#766e63;--blue:#004996;--rule:#e4e0da;color-scheme:light;--mirror-ink:var(--ink);--mirror-muted:var(--muted);--mirror-accent:var(--blue);--mirror-border:#d7d5d0;--mirror-background:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Michelangelus',Georgia,serif;-webkit-font-smoothing:antialiased;font-size:18px;line-height:1.6}
::selection{background:#00499624}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.2em}
a:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
a:active,.works a:active{transform:scale(.98)}
button,input,textarea{font:inherit}
.skip-link{position:absolute;left:-9999px;top:0;z-index:20;padding:.45rem .7rem;background:var(--bg);color:var(--blue)}
.skip-link:focus{left:16px;top:16px;outline:2px solid var(--blue);outline-offset:4px}
h1,h2,p{margin:0}
.page{max-width:680px;margin:0 auto;padding:72px 30px 44px}
/* The original centered calling card, with two quiet ways into the work. */
.calling-card{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:clamp(32px,6vh,64px) 24px;padding-top:max(clamp(32px,6vh,64px),env(safe-area-inset-top,0px));padding-bottom:max(clamp(32px,6vh,64px),env(safe-area-inset-bottom,0px))}
.calling-card .page{width:100%;max-width:640px;margin:0;padding:0;text-align:center}
.calling-card .identity{position:relative;display:flex;flex-direction:column;align-items:center}
.calling-card .seal{display:block;width:30px;height:30px;object-fit:contain;margin-bottom:0}
.identity .home{display:block;line-height:0;border-radius:50%}
.calling-card h1{font-size:1rem;font-weight:400;letter-spacing:-.012em;line-height:1.4}
/* The name, in italic like a signature: the lowercase initial on the page's centre line, its full stop hanging so the gaps read as ordinary word spaces. */
.signature h1,.calling-card.lost h1 a{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;width:100%}
.calling-card.lost h1{width:100%}
.given,.family{white-space:nowrap}
.given{justify-self:end}
.family{justify-self:start;padding-left:.23em}
.initial{position:relative;padding:0 .2em}
.initial .stop{position:absolute}
.socials{margin:14px auto 36px;display:grid;grid-template-columns:repeat(4,29px);column-gap:1px;row-gap:6px;width:calc(4 * 29px + 3px);justify-content:center;justify-items:center}
.socials a,.socials button{border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;width:29px;height:30px;color:var(--muted);opacity:.75;transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.socials a:hover,.socials button:hover{opacity:1;transform:translateY(-2px);text-decoration:none}}
.socials a:active,.socials button:active{opacity:1;transform:scale(.98)}
.beli-copy{position:relative}
.beli-copy .beli-mark,.beli-copy .beli-tick{grid-area:1/1;display:grid;place-items:center;transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.beli-mark svg{display:block;width:18px;height:8px}
.beli-tick{opacity:0;transform:scale(.86);pointer-events:none}
.socials button.beli-copy.is-copied{opacity:1}
.socials button.beli-copy.is-copied .beli-mark{opacity:0}
.socials button.beli-copy.is-copied .beli-tick{opacity:1;transform:none}
/* The field holds its final size and place before anyone touches it: pressing
   in deepens the hairline and brings the arrow, and nothing moves (founder,
   6 October 2026). The words sit on the lower line, as the ghosts do, and a
   question long enough for two lines fills the two lines already there. */
.home-question{--line-height:26px;--ghost-fade:1.15s;position:relative;width:min(100%,256px);display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:var(--line-height) minmax(var(--line-height),auto);align-items:stretch;margin:25px auto 36px;border-bottom:1px solid #d7d5d0;padding:4px 0;cursor:text;transition:border-color .3s ease}
.home-question:focus-within,.home-question:has(textarea:valid){border-color:#766e6380}
.home-question textarea{grid-column:1/-1;grid-row:1/3;box-sizing:border-box;display:block;width:100%;min-width:0;resize:none;background:transparent;border:0;color:var(--ink);font-family:inherit;font-size:1rem;line-height:var(--line-height);text-align:center;padding:var(--line-height) 24px 0;height:calc(var(--line-height) * 2);min-height:calc(var(--line-height) * 2);max-height:156px;outline:none;caret-color:var(--ink);overflow:hidden}
.question-ghosts{grid-column:1/-1;grid-row:1/3;position:relative;pointer-events:none;opacity:1;transition:opacity .45s ease}
.question-ghost{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 8px;color:var(--muted);font-size:1rem;line-height:var(--line-height);text-align:center;white-space:normal;text-wrap:balance;overflow:hidden;opacity:0;transition:opacity var(--ghost-fade) cubic-bezier(.45,.05,.2,1)}
.question-ghost.is-front{opacity:1}
.home-question:focus-within .question-ghosts,.home-question:has(textarea:valid) .question-ghosts{opacity:0}
.home-question button{grid-column:2;grid-row:2;align-self:end;justify-self:end;position:static;display:grid;place-items:center;width:24px;height:var(--line-height);margin:0;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:none;transition:opacity .3s ease,visibility .3s ease,transform .25s ease,color .25s ease}
@media(hover:hover){.home-question button:hover{color:var(--blue);transform:translateX(2px)}}
.home-question button:active{transform:scale(.98)}
.home-question:focus-within button,.home-question:has(textarea:valid) button{opacity:.75;visibility:visible;pointer-events:auto}
/* Two overlapping breaths: seal with the ask, then the work with the signature. */
.calling-card .identity{animation:page-arrive 2.8s cubic-bezier(.19,.72,.18,1) .08s backwards}
.calling-card .home-question{animation:page-arrive 3s cubic-bezier(.19,.72,.18,1) .18s backwards}
.calling-card .ring{animation:page-settle 3.1s cubic-bezier(.19,.72,.18,1) .42s backwards}
.calling-card .signature{animation:page-settle 3.4s cubic-bezier(.19,.72,.18,1) .55s backwards}
.calling-card.is-settled .page > *{animation:none}
/* The breaths are light alone, never a rise: pressing in mid-breath ends it
   (above), and a rise cut short is a jump. */
@keyframes page-arrive{from{opacity:0}to{opacity:1}}
@keyframes page-settle{from{opacity:0}to{opacity:1}}
.calling-card .page{min-height:600px}
.works{list-style:none;margin:0;padding:0}
.works li{font-size:1.22rem;font-weight:400;letter-spacing:-.02em;line-height:1.72}
.works a,.works .soon,.works button{display:inline-block;color:#4a453e;text-decoration:none;transition:transform .2s ease}
.works button{border:0;background:none;padding:0;margin:0;font:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}
/* The line follows the word itself: its full width, a hairline just under the letters, gaps where descenders fall. */
.works a,.works button{--line:#00499673;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-skip-ink:auto;transition:text-decoration-color .48s cubic-bezier(.22,1,.36,1),transform .2s ease}
.works a:focus-visible,.works button:focus-visible{text-decoration-color:var(--line)}
@media(hover:hover){.works a:hover,.works button:hover{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.24em}}
.works .soon:not(a){color:#8f877c;cursor:pointer}
/* The contents turn on a drum: three faces a third of a turn apart, one in
   front and the other two faint and turned away at its sides. Every turn is
   the same third of a turn, so it spins on in either direction for good.
   Each list is set left, so its words run down one straight edge, and the
   drum's room never changes as it turns. */
@property --spin{syntax:'<angle>';inherits:true;initial-value:0deg}
html:has(body.calling-card),body.calling-card{overflow-x:clip}
.ring{--spin:0deg;--radius:280px;position:relative;height:190px;margin:4px auto 0;perspective:1100px;transform-style:preserve-3d;transition:--spin 1.35s cubic-bezier(.45,.05,.2,1);cursor:pointer;-webkit-tap-highlight-color:transparent}
.shelf{--a:calc(var(--spin) - var(--i) * 120deg);position:absolute;top:0;left:50%;text-align:left;white-space:nowrap;backface-visibility:hidden;transform:translateX(-50%) translateX(calc(sin(var(--a)) * var(--radius))) translateZ(calc((cos(var(--a)) - 1) * var(--radius) * .6)) rotateY(calc(asin(sin(var(--a))) * .55));opacity:calc(.24 + .76 * (cos(var(--a)) + .5) / 1.5)}
.shelf:not([data-pos="0"]){cursor:pointer}
/* The drum takes a press across the whole width of the screen, so a finger
   on a faint side turns it even where that side runs past the page. */
.ring::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw)}
.shelf:not([data-pos="0"]) > *{pointer-events:none}
.shelf:focus-visible{outline:none}.shelf:focus-visible h2{color:var(--ink)}
.shelf[data-pos="0"]{cursor:default}
/* A focused title shows its own hairline, never a box. */
.ring .works a:focus-visible,.ring .works button:focus-visible{outline:none;text-decoration-color:var(--line)}
.shelf h2{margin:0 0 6px;color:var(--muted);font-size:.95rem;font-weight:400;letter-spacing:0;line-height:1.4}
.ring .works li,.ring .writing .works li{display:flex;align-items:baseline;gap:.6em;font-size:1.08rem;line-height:1.82;letter-spacing:-.01em}
.ring .writing .works li{font-style:italic;letter-spacing:.005em}
/* Who a piece is for, after its title as on the Library: a small lock and the
   one word for its way in. */
.works .tier{display:inline-block;color:#a39b8f;font-size:.74em;font-style:normal;letter-spacing:.03em;white-space:nowrap}
/* The lock stands on the same line as its word: its foot on the baseline. */
.works .tier svg{display:inline-block;width:.72em;height:.8em;margin-right:.32em;vertical-align:-.02em;fill:none;stroke:currentColor;stroke-width:1.15}
/* With letters on the drum, the faces stand together on its axis and every
   letter is placed by its own angle; only the front face's titles take a press. */
.ring.is-3d{transition:none}
.ring.is-3d .shelf{transform:translateX(-50%);opacity:1;pointer-events:none;transform-style:preserve-3d}
.ring.is-3d .shelf *{transform-style:preserve-3d}
/* Each letter is drawn in its own box, so the box is padded well past the
   glyph on each side (an italic g's tail, an f's hook) and the margin takes
   it back, so no letter is clipped and none moves; above and below, the
   line's own height already holds every ascender and descender. */
.ring.is-3d .ch{display:inline-block;white-space:pre;padding:0 .45em;margin:0 -.45em;-webkit-user-select:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:var(--fade,1)}
.ring.is-3d .tier svg{backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:var(--fade,1)}
/* The turned letters never take a press; the front face's titles do, by
   their flat boxes, which stand where the nearly flat front letters are. */
.ring.is-3d .ch,.ring.is-3d .tier svg{pointer-events:none}
.ring.is-3d .shelf[data-pos="0"]{pointer-events:auto}
.ring.is-3d .shelf.is-copy{pointer-events:none}
.ring.is-3d .works a,.ring.is-3d .works button{text-decoration:none}
.ring.is-3d .works a:hover .ch,.ring.is-3d .works button:hover .ch,.ring.is-3d .works a:focus-visible .ch,.ring.is-3d .works button:focus-visible .ch{text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:.24em}
@media(max-width:560px){.ring{--radius:200px}}
@media(prefers-reduced-motion:reduce){.ring{transition:none}}
/* card.css brings the product's quiet caret for its fields; the homepage's
   own ask keeps the caret and ghosts it already has. */
#question:read-write:focus:placeholder-shown{caret-color:var(--ink)!important;background-image:none!important;animation:none!important}
/* The product's pop-up card (card.css), in the homepage's paper and ink;
   the reader pages keep their own theme. */
body.calling-card .sq-overlay{--bg-primary:#fcfcfb;--bg-secondary:#f3f2ef;--bg-tertiary:#211e181f;--text-primary:var(--ink);--text-secondary:#4d4640;--text-muted:#8f877c;--focus:var(--blue);--font-serif:'Michelangelus';background:#211e1814}
body.calling-card .sq-card.invite-card{width:min(340px,100%)}
.writing .works li{font-size:1.13rem;line-height:2.05;font-style:italic;font-weight:400;letter-spacing:.005em}
.signature{position:relative;margin-top:22px}
.signature hr{width:44px;border:0;border-top:1px solid #211e1829;margin:20px auto 17px}
.signature h1{color:var(--muted);font-weight:400;margin-top:0;font-style:italic}
.calling-card .note{margin:36px 0 20px;color:var(--muted)}
.calling-card.lost .page{min-height:0}
.calling-card.lost .identity,.calling-card.lost .page{animation:none}
.calling-card.lost h1{color:var(--muted);font-style:italic}
.calling-card.lost h1 a{color:inherit;text-decoration:none}
.calling-card.lost h1 a:hover{text-decoration:none}
button:focus-visible{opacity:1}
button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
#main{scroll-margin-top:1.5rem;outline:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.conversation{margin-top:43px;text-align:left}
alexandria-mirror{display:block;min-height:82px}
.reader .page{max-width:730px}.reader-nav{display:flex;align-items:center;justify-content:space-between;font-size:.92rem;margin-bottom:46px}.reader-nav a{color:var(--muted)}.document{overflow-wrap:anywhere}.document h1{font-weight:400;line-height:1.2;font-size:2rem;margin-bottom:28px}.document h2{font-weight:400;font-size:1.4rem;color:var(--ink);margin:34px 0 12px}.document h3{font-size:1.1rem;font-weight:500;margin:24px 0 10px}.document p{margin:0 0 18px}.document blockquote{margin:24px 0;padding-left:20px;border-left:2px solid var(--rule);color:var(--muted)}.document img{max-width:100%}.document pre{overflow:auto;padding:14px;background:#f0eeea;font-size:.82rem}.document table{display:block;overflow:auto;font-size:.9rem}.document td,.document th{padding:8px;border-bottom:1px solid var(--rule);text-align:left}.document hr{border:0;border-top:1px solid var(--rule);margin:30px 0}.reader .conversation{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
@media(max-width:480px){.reader .page{padding:40px 25px 32px}.reader-nav{margin-bottom:32px}.calling-card{align-items:flex-start;min-height:100dvh;padding:48px 25px 32px;padding-top:max(48px,calc(env(safe-area-inset-top,0px) + 16px));padding-bottom:max(32px,calc(env(safe-area-inset-bottom,0px) + 16px));padding-left:max(25px,env(safe-area-inset-left,0px));padding-right:max(25px,env(safe-area-inset-right,0px))}.home-question{margin-top:24px;margin-bottom:34px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* The crest as a watermark: the family mark without its frame, large and faint, right of the words and below their middle, behind everything. It is placed by the column of words rather than the screen, so it sits the same way against them on every width, and on a phone it comes in a little to stay whole. It arrives with the seal, as light alone. */
.calling-card:not(.lost) .page{position:relative}
.calling-card:not(.lost) .page::before{content:"";position:absolute;left:72.5%;top:60.5%;width:77%;aspect-ratio:2838/3210;transform:translate(-50%,-50%);background:url(/assets/crest-watermark.svg) center/contain no-repeat;opacity:.018;pointer-events:none;z-index:-1;animation:crest-arrive 2.8s cubic-bezier(.19,.72,.18,1) .08s backwards}
@keyframes crest-arrive{from{opacity:0}}
.calling-card.is-settled .page::before{animation:none}
@media(max-width:480px){.calling-card:not(.lost) .page::before{left:68%;width:70%;opacity:.021}}
@media(prefers-reduced-motion:reduce){.calling-card .page::before{animation:none}}