:root{
  --ink:#0d0a17;
  --ink-2:#161129;
  --bone:#ece5d6;
  --bone-dim:#9d95ab;
  --gold:#e6c07c;
  --gold-deep:#a8823f;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(230,192,124,.35)}
a:hover,a:focus-visible{border-bottom-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink)}

/* header */
.top{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:1.6rem 2rem;font-size:.9rem;color:var(--bone-dim)}
.top a{color:var(--bone-dim);border:0}
.top a:hover{color:var(--bone)}
.top .home{font-family:var(--serif);font-size:1.05rem;letter-spacing:.02em;color:var(--bone)}

/* hero */
.hero{position:relative;height:100vh;min-height:560px;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .name{position:relative;z-index:1;text-align:center;padding:0 1.5rem}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,10vw,8.5rem);line-height:.95;letter-spacing:-.015em;color:var(--bone)}
.hero h1 span{display:block}
.hero h1 .second{font-style:italic;color:var(--gold);letter-spacing:.005em}
.hero p{margin-top:1.6rem;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--bone-dim);max-width:34ch;margin-inline:auto}
.hero .down{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:1;color:var(--bone-dim);border:0;font-size:.85rem}
.hero .down::after{content:"";display:block;width:1px;height:2.2rem;margin:.6rem auto 0;background:linear-gradient(var(--bone-dim),transparent)}

/* main copy */
main{flex:1}
.intro{max-width:44rem;margin:0 auto;padding:7rem 1.5rem 5rem}
.intro p{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.5;color:var(--bone)}
.intro p+p{margin-top:1.6rem;font-family:var(--sans);font-size:1.05rem;line-height:1.7;color:var(--bone-dim)}
.intro .contact{margin-top:3rem;font-size:1rem;color:var(--bone-dim)}
.intro .contact a{font-family:var(--serif);font-size:1.3rem;color:var(--gold)}

/* legal pages */
.legal{max-width:42rem;margin:0 auto;padding:9rem 1.5rem 5rem}
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.1;margin-bottom:.5rem}
.legal .stand{color:var(--bone-dim);font-size:.9rem;margin-bottom:3rem}
.legal h2{font-family:var(--serif);font-weight:400;font-size:1.55rem;margin:2.8rem 0 .8rem;color:var(--gold)}
.legal h3{font-weight:600;font-size:1rem;margin:1.6rem 0 .4rem}
.legal p,.legal li{color:var(--bone);max-width:68ch}
.legal p+p{margin-top:.9rem}
.legal ul{padding-left:1.2rem;margin:.5rem 0}
.legal li+li{margin-top:.3rem}
.legal address{font-style:normal;line-height:1.7}
.legal .todo{color:var(--gold);background:rgba(230,192,124,.08);padding:.05em .3em;border-radius:3px}

/* footer */
footer{padding:2.5rem 2rem;border-top:1px solid rgba(236,229,214,.08);display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-size:.88rem;color:var(--bone-dim)}
footer nav{display:flex;gap:1.6rem}
footer a{color:var(--bone-dim);border:0}
footer a:hover{color:var(--bone)}

@media (max-width:600px){
  .top{padding:1.2rem 1.2rem}
  footer{padding:2rem 1.2rem;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .hero canvas{display:none}
  .hero{background:radial-gradient(ellipse at 50% 40%,var(--ink-2),var(--ink) 65%)}
}