:root{--ink: #0a0a0a;--paper: #f4f4f0;--paper-dim: #8c8c88;--hover-ink: #141414;--accent: #ffe500;--font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "Space Mono", "SFMono-Regular", Menlo, monospace}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:var(--ink);color:var(--paper);font-family:var(--font-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}.container{position:relative;width:100vw;height:100vh;background:url(/c/sidebar-slide-out-menu/hero.jpg) no-repeat 60% 50%;background-size:cover}.container:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0ad9,#0a0a0a59 45%,#0a0a0a00 70%);pointer-events:none}nav{position:fixed;z-index:3;width:100%;display:flex;align-items:center;padding:1.75em 2em}nav>div{flex:1}.logo{font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;padding-left:.1em}.cta{text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);font-weight:400}.links{display:flex;justify-content:flex-end;gap:2.25em}.links a{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .25s}.links a:hover{border-color:var(--accent)}a{text-decoration:none;color:var(--paper)}.hero{position:absolute;z-index:2;top:50%;transform:translateY(-50%);padding:0 2em;width:40%;max-width:560px}.hero-kicker{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4em}.hero h1{font-family:var(--font-display);font-size:clamp(38px,3.6vw,58px);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin-bottom:.6em}.hero p{color:var(--paper-dim);line-height:1.65;font-size:1.02rem;font-weight:400;max-width:44ch}i{position:relative}.overlay-toggle{position:absolute;z-index:2;right:0;bottom:0;width:260px;height:88px;margin:1.25em;padding:1.1em 1.25em;border-radius:.35em;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .25s}.overlay-toggle p:first-child{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.overlay-toggle:hover{background:var(--accent)}.overlay-toggle i{font-size:1.35rem}.sidebar{position:fixed;z-index:4;top:0;right:0;width:30vw;min-width:340px;height:100vh;padding:.75em;display:flex;flex-direction:column;gap:.75em;overflow:hidden;pointer-events:none}.card{position:relative;right:-110%;padding:1.5em 1.5em 1.35em;flex:1;background:var(--accent);color:var(--ink);border-radius:.4em;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:background .35s,color .35s}.card-head{display:flex;flex-direction:column}.card-kicker{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink);margin-bottom:.9em;transition:color .35s}.card:hover .card-kicker{color:var(--accent)}.card:nth-child(1) .card-title{display:flex;justify-content:space-between;align-items:flex-start}.close-btn{position:relative;font-size:44px;line-height:1;transform:scale(0);transition:transform .3s;transform-origin:center}.card:nth-child(1):hover .close-btn{transform:scale(1)}.card-title{font-family:var(--font-display);font-size:clamp(38px,3.2vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1}.card-copy{position:relative;opacity:0;transform:translateY(18px);font-size:.94rem;line-height:1.55;font-weight:400;max-width:34ch;transition:transform .35s,opacity .35s}.card:hover{background:var(--hover-ink);color:var(--paper)}.card:hover .card-copy{opacity:1;transform:translateY(0)}@media(max-width:900px){.hero{top:28%;width:100%;max-width:none}.sidebar{width:100vw}}@media(max-width:768px){.container{width:100%;max-width:100%}.container:after{background:linear-gradient(180deg,#0a0a0ab3,#0a0a0a26 40%,#0a0a0a8c)}nav{padding:1.15em;gap:.6em}.logo{font-size:.9rem;letter-spacing:.3em}.cta{display:none}.links{gap:1.1em}.links a{font-size:10px;letter-spacing:.08em}.hero{top:auto;bottom:30%;transform:none;width:100%;padding:0 1.25em}.hero:before{content:"";position:absolute;z-index:-1;inset:-3em 0;background:linear-gradient(180deg,#0a0a0a00,#0a0a0aad 26% 74%,#0a0a0a00);pointer-events:none}.hero-kicker{margin-bottom:1em;font-size:10px}.hero h1{font-size:clamp(30px,8vw,40px)}.hero p{font-size:.98rem;max-width:40ch}.overlay-toggle{width:auto;left:0;right:0;height:auto;margin:.9em;padding:1em 1.15em}.sidebar{width:100%;max-width:100%;min-width:0}.card{right:-120%;padding:1.35em 1.25em 1.2em}.card-kicker{margin-bottom:.7em}.card-title{font-size:clamp(32px,9vw,44px)}.close-btn{font-size:38px}.card-copy{font-size:.92rem;max-width:44ch}}