:root{--ink: #0b0b0c;--paper: #f4f1ea;--paper-dim: #b9b4a8;--hover-ink: #131318;--gold: #c6a15b;--hairline: rgba(244, 241, 234, .14)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:var(--ink);color:var(--paper);font-family:Hanken Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;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,#0b0b0cd9,#0b0b0c59 45%,#0b0b0c00 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-size:1.05rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;padding-left:.1em}.cta{text-align:center;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-dim);font-weight:500}.links{display:flex;justify-content:flex-end;gap:2.25em}.links a{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .25s}.links a:hover{border-color:var(--gold)}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-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4em}.hero h1{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:300;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-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}.overlay-toggle:hover{background:var(--gold)}.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(--paper);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-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:.9em}.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-size:clamp(38px,3.2vw,52px);font-weight:500;letter-spacing:-.035em;line-height:1}.card-copy{position:relative;opacity:0;transform:translateY(18px);font-size:.94rem;line-height:1.55;font-weight:300;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,#0b0b0cb3,#0b0b0c26 40%,#0b0b0c8c)}nav{padding:1.15em;gap:.6em}.logo{font-size:.9rem;letter-spacing:.3em}.cta{display:none}.links{gap:1.1em;font-size:.7rem}.links a{font-size:.68rem;letter-spacing:.1em}.hero{top:auto;bottom:30%;transform:none;width:100%;padding:0 1.25em}.hero-kicker{margin-bottom:1em;font-size:.68rem}.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}}