:root{--bg:#9A9894;--ink:#3A3936;--ink2:#5A5854;--w:#FFFFFF}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:'Jost',sans-serif;font-weight:300;font-size:16.5px;letter-spacing:.2em;line-height:1.8;text-transform:lowercase;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink)}
.keep{text-transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.serif{font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:.02em}
.wordmark .aw{color:var(--w)}
/* bubbles */
.bubble{display:block;flex:none;width:var(--s,18px);height:var(--s,18px);border:calc(var(--bw,2px)*1.6) solid rgba(255,255,255,.92);border-radius:50%;filter:blur(calc(var(--bl,1.5px)*2.2));animation:pulse calc(var(--d,9s)*.65) ease-in-out var(--dl,0s) infinite}
.bslot{display:block;flex:none;transform:translateY(var(--ty,0px))}
@keyframes pulse{0%,100%{transform:scale(1) translate(0,0)}35%{transform:scale(1.1) translate(1.5px,-2px)}70%{transform:scale(.94) translate(-1px,1.5px)}}
/* home index */
.index{flex:1;width:100%;max-width:760px;margin:0 auto;padding:14vh 24px 10vh}
.row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:34px;transform:translateX(var(--o,0px))}
.row .lw{justify-self:end;text-align:right;color:var(--w);padding-right:9px}
.row .rw{justify-self:start;color:var(--ink2);padding-left:9px}
a.row{min-height:44px}
a.row .bubble{transition:background-color .9s ease}
a.row:hover .bubble{background:var(--w)}
.row.tight{min-height:29px}
.row.iso{margin:26px 0}
/* tail */
.tail{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:26px}
.trow{display:flex;justify-content:center;transform:translateX(var(--o,0px))}
.riser{position:absolute;left:calc(50% - 3px);bottom:-4px;width:6px;height:6px;border:1.2px solid var(--w);border-radius:50%;filter:blur(1px);opacity:0;animation:rise 11s ease-in 2s infinite}
@keyframes rise{0%{transform:translate(2px,0);opacity:0}10%{opacity:.75}85%{opacity:0}100%{transform:translate(-6px,-200px);opacity:0}}
.contact-row{margin-top:90px}
/* inner pages */
.page{flex:1;width:100%;max-width:640px;margin:0 auto;padding:11vh 24px 14vh;position:relative;z-index:1;font-size:17.5px;line-height:1.95}
.back{display:inline-flex;align-items:center;min-height:44px;color:var(--ink2);margin-bottom:8vh;font-size:.9em}
.pair{display:flex;align-items:center;font-weight:300;font-size:1em}
.pair .lw{color:var(--w);padding-right:9px}
.pair .rw{color:var(--ink2);padding-left:9px}
h1.pair{margin-bottom:8vh}
.prose{display:grid;gap:2.4em}
.prose h2{font-weight:300;font-size:1em;color:var(--w);margin-bottom:.5em}
.headline{color:var(--w);font-size:1.25em}
.quiet{color:var(--ink2)}
.standfirst{color:var(--w)}
.ambient{position:fixed;border:var(--bw,2px) solid var(--w);border-radius:50%;width:var(--s,16px);height:var(--s,16px);filter:blur(calc(var(--bl,2.5px)*1.7));pointer-events:none;animation:pulse calc(var(--d,13s)*.7) ease-in-out var(--dl,0s) infinite;z-index:0}
/* image slot */
.imgslot{width:100%;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.25);background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 10px,transparent 10px 22px);display:flex;align-items:center;justify-content:center}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;letter-spacing:.08em;color:var(--ink2);text-transform:none}
/* form */
#contact{scroll-margin-top:60px;margin-top:4em}
.form{display:grid;gap:32px;margin-top:2.5em}
.field{display:grid;gap:6px}
.field label{color:var(--ink2);font-size:.86em}
.field input{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.25);border-radius:0;font:inherit;letter-spacing:inherit;color:var(--ink);padding:8px 0;width:100%}
.field input:focus{outline:none;border-bottom-color:rgba(255,255,255,.6)}
.form button{background:transparent;border:1px solid rgba(255,255,255,.4);color:var(--ink);font:inherit;letter-spacing:inherit;text-transform:lowercase;padding:11px 36px;min-height:44px;cursor:pointer;justify-self:start;border-radius:0;transition:border-color .6s ease}
.form button:hover{border-color:var(--w)}
/* footer */
footer{border-top:1px solid rgba(255,255,255,.25);width:100%;max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:24px;padding:26px 24px 40px}
footer .legal{width:100%;color:var(--ink2);font-size:.84em;letter-spacing:.12em;margin-top:26px;text-align:center}
footer .wordmark{font-size:26px;display:inline-flex;align-items:center;gap:11px}
footer .tag{color:var(--ink2);font-size:.92em;text-align:right}
@media(max-width:600px){
  body{font-size:13.5px}
  .index{padding:10vh 14px 8vh}
  a.row{min-height:44px}
  .page{padding:9vh 18px 12vh}
  footer{padding:22px 18px 34px}
}
@media(prefers-reduced-motion:reduce){
  .bubble,.ambient,.blink{animation:none}
  .riser{display:none}
}

/* light pages */
body.light{background:#F6F5F2;color:var(--ink)}
.light .back{color:#8A8781}
.light .pair .lw{color:var(--ink)}
.light .pair .rw{color:#8A8781}
.light .bubble{border-color:#B9B6B1}
.light .ambient{border-color:#C4C1BC}
.light .prose h2{color:var(--ink)}
.light .headline{color:var(--ink)}
.light .standfirst{color:var(--ink)}
.light .quiet{color:#8A8781}
.light .mono{color:#8A8781}
.light .imgslot{border-color:rgba(58,57,54,.25);background:repeating-linear-gradient(45deg,rgba(58,57,54,.05) 0 10px,transparent 10px 22px)}
.light .field label{color:#8A8781}
.light .field input{border-bottom-color:rgba(58,57,54,.3);color:var(--ink)}
.light .field input:focus{border-bottom-color:rgba(58,57,54,.65)}
.light .form button{border-color:rgba(58,57,54,.4);color:var(--ink)}
.light .form button:hover{border-color:var(--ink)}
.light footer{border-top-color:rgba(58,57,54,.2)}
.light .wordmark{color:var(--ink)}
.light .wordmark .aw{color:#9A9894}

/* footer blink bubble */
.blink{width:13px;height:13px;border:2px solid rgba(255,255,255,.9);border-radius:50%;filter:blur(1.5px);flex:none;animation:fillblink 6s ease-in-out infinite}
@keyframes fillblink{0%,50%{background:transparent}62%,88%{background:rgba(255,255,255,.95)}100%{background:transparent}}
.light .blink{border-color:#B9B6B1;filter:blur(1px);animation-name:fillblinkdark}
@keyframes fillblinkdark{0%,50%{background:transparent}62%,88%{background:#9A9894}100%{background:transparent}}