body{margin:0;background:#06090c}
a{color:#66b2ff}a:hover{color:#ffffff}
.geo *{box-sizing:border-box}
.geo ::selection{background:#007bff;color:#fff}
.geo a:focus-visible{outline:2px solid #d4af37;outline-offset:4px}
.nav a{color:#fff;text-decoration:none;font-family:'Martian Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:14px 4px;border-bottom:1px solid transparent;min-width:44px;text-align:center}
.nav a:hover{color:#fff;border-bottom-color:#d4af37}
.nav a.here{border-bottom-color:#007bff}
.rule{display:block;width:44px;height:2px;margin:0 0 26px;background:#d4af37}

/* the page head: the night sky over the plateau, drifting in its frame, with a few stars that flare now and then */
.bh{position:relative;overflow:hidden;background:#04070b;border-bottom:1px solid rgba(255,255,255,.14)}
.bh-img{position:absolute;left:0;right:0;top:-12%;height:124%;transform:translateY(calc(var(--o,0) * 1px));will-change:transform}
.bh-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 34%;animation:grow 34s ease-in-out infinite alternate}
@keyframes grow{from{transform:scale(1)}to{transform:scale(1.07)}}
.bh-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,12,.86) 0%,rgba(4,7,12,.4) 38%,rgba(4,7,12,.5) 70%,#06090c 100%)}
.tw{position:absolute;width:2px;height:2px;margin:-1px 0 0 -1px;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(170,205,255,.65);animation:tw 7s ease-in-out infinite}
.tw::before,.tw::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1px;margin:-.5px 0 0 -6.5px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0))}
.tw::after{transform:rotate(90deg)}
@keyframes tw{0%,100%{opacity:.08;transform:scale(.4)}7%{opacity:.7;transform:scale(1)}15%{opacity:.12;transform:scale(.45)}57%{opacity:.08;transform:scale(.4)}64%{opacity:.55;transform:scale(.85)}72%{opacity:.08;transform:scale(.4)}}

/* a post's photograph in a frame: it drifts as the page moves, a dark veil lifts as it nears the middle of the screen (or under the cursor), and it leans in on hover */
.shot{position:relative;overflow:hidden;background:#04070b}
.shot-in{position:absolute;left:0;right:0;top:-10%;height:120%;transform:translateY(calc(var(--o,0) * 1px));will-change:transform}
.shot-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.shot::after{content:"";position:absolute;inset:0;background:#04070c;opacity:calc(.62 - var(--c,1) * .62);transition:opacity .5s;pointer-events:none}
a:hover .shot::after{opacity:0}
a:hover .shot-in img{transform:scale(1.06)}

/* the newest post, large */
.feat{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:linear-gradient(155deg,#0f1d29 0%,#080d12 58%,#06090c 100%);color:#fff;text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.feat:hover{color:#fff;transform:translateY(-5px);border-color:rgba(102,178,255,.55)}
.feat .shot{min-height:clamp(260px,34vw,520px)}
.feat-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3.4vw,56px)}
/* the others */
.grid3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pc{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:linear-gradient(155deg,#0f1d29 0%,#080d12 58%,#06090c 100%);color:#fff;text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.pc:hover{color:#fff;transform:translateY(-5px);border-color:rgba(102,178,255,.55)}
.pc .shot{aspect-ratio:16/10}
.pc-txt{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 22px 26px}
.feat::after,.pc::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,#007bff,#66b2ff);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.feat:hover::after,.pc:hover::after{transform:scaleX(1)}
.when{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:4px 18px;font-family:'Martian Mono',monospace;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:#a9b7c2}
.when .gold{color:#d4af37}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.go{display:block;margin-top:auto;padding-top:22px;color:#66b2ff}
.go svg{display:block;transition:transform .3s}
a:hover .go svg{transform:translateX(8px)}
.mail{color:#fff;text-decoration:none;border-bottom:2px solid #007bff;display:inline-block;padding:9px 0 3px}
.mail:hover{color:#d4af37;border-bottom-color:#d4af37}
.foot a{color:#a9b7c2;text-decoration:none}
.foot a:hover{color:#fff}
@supports (animation-timeline: view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
  @keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
}
@media (max-width:900px){
  .bl{width:38px !important;height:38px !important;margin-right:-6px}
  .bw{font-size:11px !important;letter-spacing:.06em !important}
  .nav{gap:10px !important}
  .nav a{letter-spacing:.08em;font-size:11px}
  .feat{grid-template-columns:minmax(0,1fr)}
  .feat .shot{min-height:0;aspect-ratio:16/10}
  .grid3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px){
  .bw{font-size:10.5px !important;letter-spacing:0 !important}
  .brand{gap:10px !important}
  .bl{width:34px !important;height:34px !important;margin-right:-4px}
  .nav{gap:6px !important}
  .nav a{font-size:10.5px;letter-spacing:.05em}
  .em{font-size:6vw !important}
  .mail{padding:13px 0 7px}
}
@media (max-width:340px){
  /* the very smallest phones: the mark alone stands for the name in the menu row (the name stays there for screen readers) */
  .bw{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .brand{min-width:44px}
  .bl{margin-right:0 !important}
}
@media (prefers-reduced-motion:reduce){.geo *,.geo *::before,.geo *::after{animation:none !important;transition:none !important}}