.archive-hero{padding:105px 0 85px;border-bottom:1px solid var(--ink);position:relative;overflow:hidden}.archive-hero:after{position:absolute;right:-30px;top:-120px;font-size:26rem;line-height:1;font-weight:900;color:rgba(17,19,16,.045)}.tutorials-hero{background:var(--lime)}.tutorials-hero:after{content:"//"}.projects-hero{background:var(--orange)}.projects-hero:after{content:"+"}.archive-hero>.wrap{position:relative;z-index:2}.archive-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end;margin-top:55px}.archive-hero h1{font-size:clamp(4.7rem,10vw,9rem);line-height:.76;letter-spacing:-.09em;text-transform:uppercase;margin:0}.archive-hero h1 em{font-family:Georgia,serif;font-weight:400;text-transform:none}.archive-hero-grid>div>p{max-width:520px;font-size:1.17rem}.archive-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.archive-tags span{padding:6px 9px;border:1px solid;font:10px ui-monospace,monospace;text-transform:uppercase}
.archive-content{padding:100px 0;background:#e7e5da}.archive-native-content{margin-bottom:70px;padding:clamp(25px,4vw,50px);border:1px solid var(--ink);background:var(--paper);box-shadow:12px 12px 0 var(--lime)}.archive-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.archive-heading>div{display:flex;align-items:center;gap:13px}.archive-heading>div>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);font:11px ui-monospace,monospace}.archive-heading small{font-weight:900;letter-spacing:.1em;text-transform:uppercase}.archive-heading p{max-width:480px;color:var(--muted);margin:0}
.tutorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.tutorial-card{background:var(--paper);border:1px solid var(--ink);transition:.25s var(--ease)}.tutorial-card:hover{transform:translateY(-7px);box-shadow:10px 10px 0 var(--orange)}.tutorial-thumb{display:grid;place-items:center;aspect-ratio:16/9;background:var(--dark);overflow:hidden}.tutorial-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}.tutorial-card:hover .tutorial-thumb img{transform:scale(1.04)}.tutorial-thumb>span{color:var(--lime);font-size:4.5rem;font-weight:900;letter-spacing:-.08em}.tutorial-card-body{padding:24px}.tutorial-meta{display:flex;justify-content:space-between;color:var(--orange);font:10px ui-monospace,monospace;text-transform:uppercase}.tutorial-card h2{font-size:1.5rem;line-height:1.1;letter-spacing:-.04em;margin:16px 0 10px}.tutorial-card p{color:var(--muted)}.tutorial-read{display:flex;justify-content:space-between;margin-top:24px;padding-top:13px;border-top:1px solid var(--line);font-size:.72rem;font-weight:900;text-transform:uppercase}
.showcase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}.showcase-card{display:grid;grid-template-columns:40% 60%;min-height:290px;border:1px solid var(--ink);background:var(--paper);transition:.25s var(--ease)}.showcase-card:hover{transform:translateY(-6px);box-shadow:12px 12px 0 var(--lime)}.showcase-visual{position:relative;overflow:hidden;background:var(--dark);color:var(--lime);padding:18px}.showcase-visual>span{font:11px ui-monospace,monospace}.showcase-visual:after{content:"";position:absolute;width:120px;height:120px;border:10px solid currentColor;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.showcase-visual.cluster{color:var(--orange)}.showcase-visual.docker{background:var(--lime);color:var(--ink)}.showcase-visual.storage{background:var(--orange);color:var(--ink)}.showcase-visual.network:after{border-radius:0;transform:translate(-50%,-50%) rotate(45deg)}.showcase-visual.monitor:after{border-width:2px 2px 10px;border-radius:50%}.visual-lines{position:absolute;inset:0}.visual-lines i{position:absolute;width:7px;height:7px;border-radius:50%;background:currentColor}.visual-lines i:nth-child(1){left:23%;top:30%}.visual-lines i:nth-child(2){right:20%;top:22%}.visual-lines i:nth-child(3){right:27%;bottom:20%}.showcase-body{display:flex;flex-direction:column;padding:28px}.showcase-body>small{color:var(--orange);font:10px ui-monospace,monospace;text-transform:uppercase}.showcase-body h2{font-size:1.7rem;line-height:1.1;letter-spacing:-.04em;margin:14px 0 10px}.showcase-body p{color:var(--muted);margin:0}.showcase-status{margin-top:auto;padding-top:20px;font:10px ui-monospace,monospace;text-transform:uppercase}.showcase-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#54d86b;margin-right:7px}
[data-theme=dark] .archive-content{background:#151914}[data-theme=dark] .archive-native-content,[data-theme=dark] .tutorial-card,[data-theme=dark] .showcase-card{background:#1b1f1a}
@media(max-width:1050px){.tutorial-grid{grid-template-columns:repeat(2,1fr)}.showcase-grid{grid-template-columns:1fr}}
@media(max-width:760px){.archive-hero{padding:70px 0}.archive-hero-grid{grid-template-columns:1fr;gap:35px}.archive-hero h1{font-size:clamp(4rem,20vw,6rem)}.archive-content{padding:65px 0}.archive-heading{display:block}.archive-heading p{margin-top:20px}.tutorial-grid{grid-template-columns:1fr}.showcase-card{grid-template-columns:1fr}.showcase-visual{min-height:210px}}