.indexPage{--main-margin: 5vw;--footer-margin: 5vw;background-image:url(/images/index/stars.svg);background-size:100%;background-repeat:no-repeat;background-position:top 0 right -2px}.indexPage #title{display:flex;gap:3vw;margin:3vw var(--main-margin) 30px;max-width:1350px;align-items:end}.indexPage #hero{position:relative;image-rendering:pixelated;pointer-events:none}.indexPage #hero .logo{position:absolute;top:0.5vw;left:-1vw;fill:var(--text);aspect-ratio:410 / 185;height:9vw}.indexPage #hero .background{width:30vw;height:100%;opacity:0.9}.indexPage #hero .lower{position:absolute;bottom:-5%;right:-5%;height:70%;width:auto}.indexPage #intro h1{font-family:var(--serif);font-weight:400;margin:0;font-size:24px;letter-spacing:0.01em;line-height:1.2em;word-spacing:-0.05em;transform-origin:top center;max-width:700px}.indexPage #intro .icons{list-style:none;margin:max(20px,1vw) 0 0;padding:0;display:flex;gap:16px}.indexPage #intro .icon{height:22px;width:22px;fill:var(--link)}.indexPage h2{font-size:var(--prose-text-size);font-family:var(--sans);letter-spacing:-0.01em;font-weight:700;margin:60px 0 10px}.indexPage h3{font-family:var(--sans);transform:none;font-weight:bold;display:inline;letter-spacing:-0.02em;font-size:40px;margin:0 0 0.08em}.indexPage .blogPreview{margin:12px 0 0}.indexPage .blogPreview a{display:flex;align-items:baseline;gap:15px;position:relative;margin-left:25px;color:inherit}.indexPage .blogPreview a.more{margin-top:8px;font-weight:bold}.indexPage .blogPreview a:before,.indexPage .blogPreview a:after{content:"";display:block;background:var(--text);pointer-events:none;position:absolute;left:-22px}.indexPage .blogPreview a:before{width:var(--narrow-line-width);height:120%;top:0}.indexPage .blogPreview a.more:before{height:10px}.indexPage .blogPreview a:after{width:10px;height:var(--narrow-line-width);top:20px}.indexPage .blogPreview a.more:after{top:10px}.indexPage .blogPreview p,a.more{font-size:var(--small-text-size);letter-spacing:-0.03em}.indexPage .blogPreview a:hover,.indexPage .blogPreview a:active{text-decoration:none}.indexPage .blogPreview a:hover h3,.indexPage .blogPreview a:active h3,.indexPage .blogPreview a.more:hover,.indexPage .blogPreview a.more:active{text-decoration:underline}.indexPage .tiles{gap:20px 30px;margin:12px 0 -1px;display:flex;flex-wrap:wrap;scroll-margin-top:50px}.indexPage .tiles:target{position:relative}.indexPage .tiles:target a{background:var(--red);position:relative;padding:0 5px;margin:0 -5px}.indexPage .tiles:target:after{content:url(/images/index/pointer.png);image-rendering:pixelated;position:absolute;top:-20px;left:-100px}html:has(.indexPage .tiles:target){scroll-behavior:auto}.indexPage:has(.tiles:target) main>:not(:target),.indexPage:has(.tiles:target) #title,.indexPage:has(.tiles:target) footer{opacity:0.5}.indexPage .tiles a{position:relative;color:var(--text);display:flex;align-items:baseline;gap:0.33em;flex-wrap:wrap;line-height:2em}.indexPage .tiles a img{width:2em;height:1.6em;object-fit:cover;display:inline-block;vertical-align:baseline}.indexPage .tiles a.external{position:relative;margin-right:-0.4em}.indexPage .tiles a.external:after{content:url(/images/icons/external.svg);display:inline-block;width:1em;height:1em}.indexPage .mainCredits{width:100%;padding-top:140px;display:flex;flex-wrap:wrap;justify-content:start;align-items:stretch;gap:40px 60px;text-align:left;font-size:var(--tiny-text-size);font-family:var(--sans);font-weight:700;letter-spacing:-0.01em}.indexPage .mainCredits h2{text-transform:none;letter-spacing:inherit;font-size:inherit;font-family:inherit;margin-top:0}.mainCredits ul{list-style-type:none;margin:0;padding:0;display:inline-block;vertical-align:top}.mainCredits :first-child ul{column-count:2;column-gap:10px}.mainCredits li{break-inside:avoid}.indexPage footer{margin:20px 0 40px;padding-top:0}.indexPage footer .icons{text-align:left;display:flex;gap:3px}.indexPage #phrase{font-family:var(--sans);font-weight:700;user-select:none;-webkit-user-select:none;cursor:pointer}@media screen and (min-width: 1450px){.indexPage #hero .background{width:425px}.indexPage #hero .logo{height:129px}.indexPage #intro .icons{margin:43px 0 0}}@media screen and (max-width: 900px){.indexPage{--footer-margin: var(--root-margin)}.indexPage .blogPreview a{flex-direction:column;gap:0}.indexPage .blogPreview a .preview{margin-top:0}.indexPage #phrase{display:none}.indexPage footer{margin-bottom:0;gap:50px}}@media screen and (max-width: 650px){.indexPage{background-image:none}.indexPage #title{flex-direction:column;margin:0;padding:20px var(--root-margin) 0;overflow:hidden}.indexPage #hero{width:100%}.indexPage #hero .background{width:100%;object-fit:cover;object-position:top right;aspect-ratio:auto;height:max(50vw,222px)}.indexPage #hero .lower{height:120%;bottom:-20px;right:-20px}.indexPage #hero .logo{width:40vw;height:20vw;top:auto;left:0;bottom:0}.indexPage #intro h1{font-size:1.2em;letter-spacing:0.03em}.indexPage #intro .icons{margin:20px 0 0}.indexPage #intro .icons .icon{width:20px}.indexPage h3{font-size:2.2em}.indexPage .blogPreview h3{font-size:1.6em}.indexPage .tiles a{line-height:1.985em;margin-bottom:-0.1em;font-size:0.7em}.indexPage .blogPreview a{flex-direction:column;gap:0;padding:8px 0 22px}.indexPage .blogPreview a>*{margin:0}.indexPage .blogPreview a.more{padding:0}.indexPage #liked{gap:15px 25px}.mainCredits :first-child ul{column-gap:35px}.indexPage .mainCredits{padding:90px 0 40px}}
