/* enriquemarq.com: the link tree. Same hand as his story page (enrique-hub/public/site.css): white paper,
   his blue (#61AEFA, #1C4E8E as the second ink), Fraunces for what he says, Hanken Grotesk for the rest,
   DM Mono for small labels, glass for the things you press, his own pixel marks. One calm column; the
   page fades in once as a whole, the logo stays still, and the hand waving hi is the only thing alive. */
:root{
  --paper:#fff;--ink:#0A0D12;--ink-2:#3A4450;--ink-3:#5E6874;--wash:#F2F8FF;--wash-2:#D9EAFC;--line:#D8E2EC;
  --blue:#61AEFA;--mid:#2A7CCB;--deep:#1C4E8E;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;--sans:'Hanken Grotesk',Arial,Helvetica,sans-serif;--mono:'DM Mono',ui-monospace,Consolas,monospace;
  --col:470px;--pad:clamp(16px,5vw,40px);
  --swipe:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%2361AEFA%22%20fill-opacity%3D%22.44%22%20d%3D%22M2%2013C28%207%2070%2010%20104%208S176%206%20198%209L199%2031C168%2035%20128%2032%2096%2034S34%2036%201%2033Z%22%2F%3E%3Cpath%20fill%3D%22%2361AEFA%22%20fill-opacity%3D%22.3%22%20d%3D%22M7%2018C40%2014%2090%2017%20130%2015S185%2014%20195%2016L197%2035C150%2038%20100%2036%2060%2038S20%2038%204%2036Z%22%2F%3E%3C%2Fsvg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--paper);color:var(--ink-2);font:400 17px/1.5 var(--sans);text-align:center;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit}
p,h1{margin:0}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:30;background:#fff;color:#0A0D12;padding:10px 14px;border:1.5px solid #0A0D12}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2.5px solid var(--deep);outline-offset:3px;border-radius:6px}

/* the page clips the light behind the top, so it never scrolls sideways on a phone */
.page{position:relative;z-index:0;overflow:hidden;min-height:100vh;min-height:100svh}
main{position:relative;max-width:calc(var(--col) + 2*var(--pad));margin:0 auto;padding:clamp(56px,10vh,96px) var(--pad) 40px;animation:fade .7s ease both}
@keyframes fade{from{opacity:0}}
/* one even light behind the top, so the glass has something to hold */
.page::before{content:"";position:absolute;z-index:-1;left:50%;top:-40px;width:min(1040px,190vw);height:720px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(97,174,250,.19) 0%,rgba(97,174,250,.148) 20%,rgba(97,174,250,.103) 38%,rgba(97,174,250,.063) 55%,rgba(97,174,250,.031) 71%,rgba(97,174,250,.011) 86%,rgba(97,174,250,0) 100%)}

/* who he is */
.ship{width:72px;height:auto;margin:0 auto 22px;fill:var(--deep);shape-rendering:crispEdges}
h1{font:600 clamp(34px,4.4vw,44px)/1.08 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.03em;color:var(--ink)}
.line{max-width:24em;margin:14px auto 0;font:600 clamp(19px,1.9vw,21px)/1.35 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.018em;color:var(--ink-2);text-wrap:balance}
.line .hey{display:block;color:var(--ink);margin-bottom:2px}
mark{background:var(--swipe) no-repeat 0 82%/100% 84%;color:var(--ink);padding:0 .14em;margin:0 -.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* his hand, waving gently like a hi: the one alive thing */
.hand{display:inline-block;height:1.02em;width:auto;vertical-align:-.14em;margin-left:.12em;shape-rendering:crispEdges;overflow:visible;transform-origin:62% 92%;animation:hi 4.4s ease-in-out 1s infinite}
@keyframes hi{0%,34%,100%{transform:rotate(0)}6%{transform:rotate(16deg)}12%{transform:rotate(-8deg)}18%{transform:rotate(14deg)}24%{transform:rotate(-5deg)}30%{transform:rotate(6deg)}}

/* the six links, in his order */
.links{list-style:none;display:grid;gap:12px;margin:34px 0 0;padding:0;text-align:left}
.go{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 16px 12px 12px;border-radius:20px;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.56));-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
  border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(28,78,142,.08),0 12px 28px -14px rgba(28,78,142,.34);
  transition:transform .25s cubic-bezier(.2,.8,.2,1.3),box-shadow .25s}
.go:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(28,78,142,.12),0 18px 34px -14px rgba(28,78,142,.44)}
.go:active{transform:translateY(0)}
.txt{flex:1;min-width:0;display:grid;gap:2px}
.txt b{font:600 17px/1.25 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.txt small{font:400 14.5px/1.35 var(--sans);color:var(--ink-3);text-wrap:pretty}
.txt .tag{justify-self:start;margin-top:3px;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.arr{flex:none;font:500 17px/1 var(--sans);color:var(--mid);transition:transform .25s ease}
.go:hover .arr{transform:translateX(3px)}

/* the small square each link starts with */
.ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;overflow:hidden;background:var(--wash);box-shadow:inset 0 0 0 1px rgba(28,78,142,.08)}
.ic svg{fill:var(--deep);shape-rendering:crispEdges}
.ic-books svg{width:24px}
.ic-code svg{width:26px}
.ic-nave{background:var(--deep);box-shadow:none}.ic-nave svg{width:36px;fill:#fff}
.ic-lab{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.ic-lab::before{content:"";width:80%;height:80%;background:var(--blue);-webkit-mask:url(voyager-mask.png) center/contain no-repeat;mask:url(voyager-mask.png) center/contain no-repeat}
.ic-zernio{background:#fff}.ic-zernio img{width:100%;height:100%}

/* his latest video: the thumbnail takes the square's place */
.video{padding:10px 16px 10px 10px}
.thumb{position:relative;flex:none;width:136px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--deep)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .play{position:absolute;left:50%;top:50%;width:30px;height:21px;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.thumb img[hidden]{display:none}
.kick{font:500 10.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.video .txt b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:1.3}

/* where to follow: his three, small and round */
.social{display:flex;justify-content:center;gap:12px;margin-top:30px}
.social a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.5));-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
  border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(28,78,142,.08),0 10px 22px -12px rgba(28,78,142,.36);transition:transform .25s cubic-bezier(.2,.8,.2,1.3)}
.social a:hover{transform:translateY(-2px)}
.social svg{width:21px;height:21px}
.foot{margin-top:26px;font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

@media (max-width:480px){
  main{padding-top:44px}
  .ship{width:60px;margin-bottom:18px}
  .links{gap:10px;margin-top:28px}
  .go{gap:12px;padding:10px 14px 10px 10px}
  .thumb{width:108px;border-radius:10px}
  .kick{font-size:10px;letter-spacing:.1em;white-space:nowrap}
  .txt b{font-size:16px}
  .txt small{font-size:14px}
  .video .txt b{font-size:15px}
  .ic{width:42px;height:42px}
}
@media (max-width:380px){
  .thumb{width:100px}
  .video .txt b{-webkit-line-clamp:4;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}