:root { --cream:#fefcf6; --cream-dark:#faf6eb; --ink:#1a1a2e; --red:#e84a5f; --blue:#2b7fd8; --yellow:#f4d758; --muted:#6d6d7e; --dark:#07110d; --green:#72f29a; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; } html,body { min-height:100%; } body { margin:0; overflow:hidden; color:var(--ink); background:var(--cream); font:16px/1.5 "Noto Sans SC",sans-serif; } button,a { font:inherit; } a { color:inherit; }
.boot { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:2rem; color:var(--green); background:var(--dark); font:500 clamp(.78rem,1.7vw,1rem)/1.85 "Fira Code",monospace; transform:translateY(0); transition:transform .85s var(--ease); overflow:hidden; } .boot::before { content:""; position:absolute; inset:0; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(114,242,154,.08) 4px 5px); pointer-events:none; } .boot::after { content:""; position:absolute; left:0; right:0; bottom:0; height:.35rem; background:var(--green); box-shadow:0 .7rem 1.8rem rgba(26,26,46,.3); opacity:.45; } .boot.is-opening,.boot.is-done { transform:translateY(-102%); } .boot.is-done { pointer-events:none; } .boot.is-about { transform:translateY(0); pointer-events:auto; } .boot__log { position:relative; z-index:2; width:min(720px,100%); transition:opacity .3s ease; } .boot__log p { margin:.3rem 0; opacity:0; transform:translateY(10px); animation:boot-line .45s forwards; } .boot__log p:nth-child(2){animation-delay:.55s}.boot__log p:nth-child(3){animation-delay:1.25s}.boot__log p:nth-child(4){animation-delay:1.95s}.boot__log p:nth-child(5){animation-delay:2.65s}.boot__log--about { display:none; } .boot__log--about p { animation:none; } .boot.is-about .boot__log--initial { display:none; } .boot.is-about .boot__log--about { display:block; } .boot.is-about .boot__log--about p:nth-child(1){animation:boot-line .4s .25s forwards}.boot.is-about .boot__log--about p:nth-child(2){animation:boot-line .4s .7s forwards}.boot.is-about .boot__log--about p:nth-child(3){animation:boot-line .4s 1.15s forwards}.boot.is-about .boot__log--about p:nth-child(4){animation:boot-line .4s 1.7s forwards}.boot__label { color:#caffd8; opacity:.65!important; } .boot__cursor { display:inline-block; width:.55em; height:1.15em; margin-left:.25em; vertical-align:-.24em; background:var(--green); animation:blink .8s steps(1) infinite; } .boot__skip,.boot__enter { position:absolute; z-index:5; right:1.5rem; bottom:1.5rem; padding:.5rem .75rem; color:#caffd8; background:transparent; border:1px solid rgba(114,242,154,.45); border-radius:999px; cursor:pointer; font:500 .72rem "Fira Code",monospace; transition:color .2s ease,background .2s ease,opacity .2s ease; } .boot__enter { position:relative; right:auto; bottom:auto; margin-top:1.3rem; opacity:0; animation:boot-line .4s 2s forwards; } .boot__skip:hover,.boot__enter:hover,.boot__skip:focus-visible,.boot__enter:focus-visible { color:var(--dark); background:var(--green); } .boot.is-opening .boot__skip,.boot.is-about .boot__skip { opacity:0; pointer-events:none; }
.site { position:relative; min-height:100dvh; opacity:0; overflow:hidden; transition:opacity .35s ease; } .site.is-ready { opacity:1; } .site-brand { position:fixed; z-index:5; top:clamp(1.3rem,4vw,2.6rem); left:clamp(1.4rem,5vw,5rem); display:flex; align-items:center; gap:.55rem; } .site-brand span { width:.72rem; height:.72rem; border-radius:50%; background:var(--red); box-shadow:.23rem .2rem 0 var(--yellow); } .site-brand strong { font:900 1.1rem/1 "Fraunces",serif; } .site-brand small { margin-left:.35rem; color:var(--blue); font:500 .62rem "Fira Code",monospace; }
.web-grid { position:absolute; inset:0; pointer-events:none; opacity:.55; background:linear-gradient(90deg,transparent 49.8%,rgba(43,127,216,.08) 50%,transparent 50.2%) 0 0/12rem 12rem,linear-gradient(0deg,transparent 49.8%,rgba(43,127,216,.08) 50%,transparent 50.2%) 0 0/12rem 12rem; mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 72%); }
.stage { position:relative; min-height:100dvh; padding:clamp(7rem,13vw,10rem) clamp(5.4rem,12vw,12rem) clamp(3rem,8vw,6rem) clamp(1.4rem,7vw,7rem); } .stage-panel { position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1.13fr) minmax(16rem,.87fr); align-items:center; gap:2rem; padding:inherit; opacity:0; pointer-events:none; transform:translateX(2rem); transition:opacity .42s var(--ease),transform .42s var(--ease); } .stage-panel.is-active { opacity:1; pointer-events:auto; transform:none; } .stage-panel__copy { width:min(100%,42rem); } .eyebrow { margin:0 0 1rem; color:var(--blue); font:500 .7rem/1 "Fira Code",monospace; letter-spacing:.16em; } h1,h2 { margin:0; font:900 clamp(3rem,7.2vw,6.6rem)/.98 "Noto Serif SC",serif; letter-spacing:-.07em; } h2 { font-size:clamp(2.6rem,6vw,5.6rem); } h1 em,h2 em { color:var(--red); font-style:normal; position:relative; } h1 em::after,h2 em::after { content:""; position:absolute; z-index:-1; left:-.04em; right:-.04em; bottom:.04em; height:.2em; background:var(--yellow); transform:rotate(-2deg); } .one-line { margin:1.5rem 0 0; color:var(--muted); font-size:clamp(1rem,2vw,1.25rem); }
.portrait-zone { position:relative; display:grid; place-items:center; width:min(100%,25rem); min-height:min(29rem,58vh); justify-self:center; } .portrait { position:relative; z-index:2; display:block; width:min(21rem,100%); border:2px solid var(--ink); border-radius:46% 54% 52% 48%; background:var(--red); box-shadow:.75rem .75rem 0 var(--yellow); transform:rotate(3deg); } .orbit { position:absolute; max-width:115%; border:1px dashed var(--blue); border-radius:50%; } .orbit--blue { width:min(27rem,38vw); height:min(16rem,23vw); transform:rotate(-28deg); } .orbit--red { width:min(16rem,23vw); height:min(26rem,37vw); border-color:var(--red); transform:rotate(34deg); } .chip-mark { position:absolute; z-index:3; width:clamp(2.8rem,5.5vw,4.7rem); right:-2%; bottom:7%; transform:rotate(-8deg); }
.stage-panel--articles { display:grid; grid-template-columns:1fr; grid-template-rows:auto auto minmax(0,1fr); align-items:stretch; gap:0; padding-top:clamp(6rem,8vw,7rem); padding-bottom:6.2rem; padding-right:clamp(2rem,7vw,7rem); overflow:hidden; } .articles-head { display:block; margin-bottom:1rem; } .articles-head h2 { font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.05em; } .articles-head > p { margin:.25rem 0 0; color:var(--muted); font-size:.85rem; } .article-filters { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1rem; } .article-filters button { padding:.35rem .7rem; color:var(--muted); background:transparent; border:1px solid rgba(26,26,46,.18); border-radius:999px; cursor:pointer; font-size:.72rem; transition:color .2s ease,background .2s ease,border-color .2s ease; } .article-filters button:hover,.article-filters button[aria-pressed="true"] { color:var(--ink); background:var(--yellow); border-color:var(--ink); } .article-list-shell { position:relative; min-height:0; overflow:hidden; } .article-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.8rem; width:100%; height:100%; min-height:0; padding-right:.7rem; overflow:auto; border-top:2px solid var(--ink); scrollbar-color:var(--blue) transparent; } .article-scroll-tip { position:absolute; z-index:2; left:50%; bottom:.0rem; padding:.25rem .45rem; color:var(--muted); background:transparent; border:0; border-radius:0; box-shadow:none; transform:translateX(-50%); pointer-events:none; font:500 .62rem "Fira Code",monospace; letter-spacing:.04em; white-space:nowrap; } .article-scroll-tip span { display:inline-block; margin-left:.2rem; color:var(--blue); animation:scroll-arrow 1.4s ease-in-out infinite; } .article-link { display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; gap:.7rem; align-items:center; min-height:4.2rem; padding:.7rem .25rem; text-decoration:none; border-bottom:1px solid rgba(26,26,46,.16); transition:padding .2s var(--ease),background .2s ease; } .article-link:hover,.article-link:focus-visible { padding-inline:.75rem; background:var(--cream-dark); } .article-link__number { color:var(--red); font:500 .62rem "Fira Code",monospace; } .article-link__title { min-width:0; font-size:clamp(.82rem,1.25vw,1rem); font-weight:700; line-height:1.4; } .article-link__category { color:var(--blue); font:500 .58rem "Fira Code",monospace; white-space:nowrap; }
.dock { position:fixed; z-index:9; left:50%; bottom:1.2rem; display:flex; width:min(17rem,calc(100% - 1.5rem)); gap:0; padding:.3rem; opacity:.76; background:rgba(254,252,246,.7); border:1px solid rgba(26,26,46,.2); border-radius:999px; box-shadow:0 .65rem 1.8rem rgba(26,26,46,.09); backdrop-filter:blur(.9rem); transform:translateX(-50%); transition:opacity .25s ease,background .25s ease; isolation:isolate; } .dock::before { content:""; position:absolute; z-index:0; top:.4rem; bottom:.4rem; left:.5rem; width:calc(50% - .65rem); background:var(--yellow); border:1px solid rgba(26,26,46,.55); border-radius:999px; box-shadow:0 .12rem .35rem rgba(26,26,46,.1); transition:transform .35s var(--ease); } .dock:has(button[data-target="articles"][aria-pressed="true"])::before { transform:translateX(calc(100% + .3rem)); } .dock:hover,.dock:focus-within { opacity:1; background:rgba(254,252,246,.94); } .dock button { position:relative; z-index:1; display:flex; flex:1; align-items:center; justify-content:center; gap:.5rem; min-width:0; height:2.45rem; padding:.4rem .65rem; color:var(--ink); background:transparent; border:0; border-radius:999px; cursor:pointer; } .dock button span { color:var(--red); font:500 .58rem "Fira Code",monospace; } .dock button small { color:var(--ink); font:500 .7rem "Fira Code",monospace; }
.hanging-spider { position:fixed; z-index:8; top:0; right:clamp(6.6rem,8vw,8.2rem); width:5.2rem; height:12.2rem; padding:0; color:var(--ink); background:transparent; border:0; cursor:pointer; } .hanging-spider__thread { position:absolute; top:0; left:50%; width:1px; height:8.3rem; background:rgba(26,26,46,.42); transform-origin:top; } .hanging-spider__anchor { position:absolute; z-index:2; left:50%; top:8.14rem; width:.38rem; height:.38rem; border:1px solid var(--ink); border-radius:50%; background:var(--yellow); transform:translateX(-50%); } .hanging-spider .spider { position:absolute; left:50%; top:7.2rem; width:4.5rem; height:3.5rem; color:var(--ink); filter:drop-shadow(0 .18rem .1rem rgba(26,26,46,.15)); transform:translateX(-50%); transform-origin:50% -7.2rem; animation:spider-hang 4s ease-in-out infinite; } .hanging-spider:hover .spider,.hanging-spider:focus-visible .spider { animation:spider-startle .7s var(--ease) both; } .hanging-spider:hover .spider__leg,.hanging-spider:focus-visible .spider__leg { animation-duration:.18s; } .hanging-spider:hover .hanging-spider__thread,.hanging-spider:focus-visible .hanging-spider__thread { animation:thread-tremble .25s ease-in-out 3; } .spider__abdomen { position:absolute; z-index:2; left:1.76rem; top:1rem; width:1.75rem; height:1.65rem; border-radius:52% 48% 46% 54%; background:currentColor; animation:spider-breathe 1.8s ease-in-out infinite; } .spider__abdomen::after { content:""; position:absolute; left:.42rem; top:.32rem; width:.58rem; height:.7rem; border:1px solid var(--cream); border-radius:50%; opacity:.45; } .spider__head { position:absolute; z-index:3; left:1.05rem; top:1.28rem; width:1.05rem; height:1.02rem; border-radius:48%; background:currentColor; } .spider__head b { position:absolute; top:.28rem; width:.19rem; height:.19rem; border-radius:50%; background:var(--yellow); animation:spider-blink 3.7s steps(1) infinite; } .spider__head b:first-child { left:.22rem; } .spider__head b:last-child { right:.22rem; animation-delay:.06s; } .spider__leg { --angle:0deg; --delay:0s; position:absolute; z-index:1; left:1.75rem; top:1.8rem; width:1.35rem; border-top:2px solid currentColor; transform:rotate(var(--angle)); transform-origin:0 center; animation:leg-crawl 1.5s ease-in-out var(--delay) infinite alternate; } .spider__leg b { position:absolute; left:1.12rem; top:-2px; width:1.05rem; border-top:2px solid currentColor; transform:rotate(28deg); transform-origin:0 center; } .spider__leg--1{--angle:205deg;--delay:-.1s}.spider__leg--2{--angle:180deg;--delay:-.55s}.spider__leg--3{--angle:155deg;--delay:-.3s}.spider__leg--4{--angle:132deg;--delay:-.78s}.spider__leg--5{--angle:-25deg;--delay:-.55s}.spider__leg--6{--angle:0deg;--delay:-.1s}.spider__leg--7{--angle:25deg;--delay:-.8s}.spider__leg--8{--angle:48deg;--delay:-.32s}.spider__leg--1 b,.spider__leg--2 b,.spider__leg--3 b,.spider__leg--4 b{transform:rotate(-28deg)}
footer { position:fixed; z-index:5; left:clamp(1.4rem,7vw,7rem); bottom:1.4rem; color:var(--muted); font:500 .6rem "Fira Code",monospace; letter-spacing:.04em; }
@keyframes boot-line { to { opacity:1; transform:none; } } @keyframes blink { 50% { opacity:0; } } @keyframes leg-crawl { from{margin-top:-.12rem} to{margin-top:.15rem;transform:rotate(calc(var(--angle) + 7deg))} } @keyframes spider-breathe { 50%{transform:scale(1.07) translateX(.04rem)} } @keyframes spider-blink { 0%,92%,100%{transform:scaleY(1)} 94%,97%{transform:scaleY(.1)} } @keyframes spider-hang { 0%,100%{transform:translateX(-50%) rotate(-2deg)} 50%{transform:translateX(-50%) rotate(2deg)} } @keyframes spider-startle { 0%{transform:translateX(-50%)} 35%{transform:translateX(-50%) translateY(-.65rem) rotate(-5deg)} 100%{transform:translateX(-50%) rotate(2deg)} } @keyframes thread-tremble { 50%{transform:rotate(1.2deg)} } @keyframes scroll-arrow { 50%{transform:translateY(.18rem);opacity:.55} }
@media (max-width:900px) { .stage { padding:6.3rem 1.5rem 5.6rem; } .stage-panel { grid-template-columns:1fr; align-content:center; gap:.7rem; overflow:auto; } .stage-panel__copy { width:min(100%,38rem); } .site-brand small { display:none; } h1 { font-size:clamp(2.9rem,10vw,5rem); } .portrait-zone { width:min(14rem,42vw); min-height:13rem; justify-self:end; margin-top:-1.2rem; margin-right:1.5rem; } .portrait { width:100%; } .orbit--blue { width:16rem; height:9rem; } .orbit--red { width:9rem; height:15rem; } .stage-panel--articles { display:grid; align-content:stretch; gap:0; padding:5.5rem 1.4rem 5.7rem; overflow:hidden; } .article-list { grid-template-columns:1fr; min-height:0; } .article-link__category { display:none; } .hanging-spider { right:.8rem; transform:scale(.78); transform-origin:top right; } footer { bottom:1rem; } }
@media (max-width:600px) { .site-brand { left:1.1rem; top:1.15rem; } .stage { padding:5.4rem 1.1rem 5.4rem; } .stage-panel { align-content:start; padding-top:7rem; } h1 { font-size:clamp(2.55rem,13vw,4rem); } .one-line { margin-top:1rem; font-size:.95rem; } .portrait-zone { width:min(11rem,48vw); min-height:10.5rem; margin:.7rem auto 0; justify-self:center; } .orbit--blue { width:12rem; height:7rem; } .orbit--red { width:7rem; height:11rem; } .chip-mark { width:2.7rem; } .stage-panel--articles { padding:4.7rem .9rem 5.2rem; } .articles-head { margin-bottom:.7rem; } .articles-head h2 { font-size:2.2rem; } .articles-head > p { display:none; } .article-filters { flex-wrap:nowrap; margin-right:-.9rem; padding-right:.9rem; overflow-x:auto; } .article-filters button { flex:0 0 auto; } .article-list { min-height:0; gap:0; } .article-link { grid-template-columns:1.7rem minmax(0,1fr); min-height:3.7rem; padding:.55rem .15rem; } .article-link__category { display:none; } .hanging-spider { right:-.35rem; transform:scale(.62); } .dock { bottom:.65rem; } .dock button { height:2.3rem; padding:.35rem .55rem; } footer { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .site { opacity:1; } }