/* anne's canon — shared site styles */

:root{
  --charcoal: #221f18;
  --charcoal-2: #2a271d;
  --charcoal-3: #302c21;
  --bone: #f2ede2;
  --bone-dim: #b3ab99;
  --brass: #c39c5c;
  --safelight: #a73b2e;
  --hairline: #46422f;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background: var(--charcoal);
  color: var(--bone);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color:inherit; text-decoration:none; }

.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.06em; }

h1,h2,h3{ font-family:'Fraunces', serif; font-optical-sizing:auto; font-weight:500; }

img{ display:block; max-width:100%; }

/* sprockets */
.sprockets{
  display:flex; justify-content:space-evenly; padding:9px 0;
  background: var(--charcoal-2);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.sprockets span{
  width:7px; height:7px; border-radius:2px;
  background: var(--charcoal);
  border:1px solid var(--hairline);
  flex-shrink:0;
}

/* nav */
header.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1100px; margin:0 auto; padding:1.6rem 1.5rem;
}
.wordmark{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.3rem;
  letter-spacing:-0.01em;
}
.wordmark em{ font-style:italic; font-weight:300; color:var(--brass); }

nav.links{ display:flex; gap:1.6rem; }
nav.links a{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--bone-dim);
  transition:color .2s ease;
  padding:0.3rem 0;
  border-bottom:1px solid transparent;
}
nav.links a:hover, nav.links a.active{
  color:var(--bone);
  border-bottom-color:var(--brass);
}

.nav-toggle{ display:none; }

@media (max-width:640px){
  nav.links{ gap:1.1rem; flex-wrap:wrap; justify-content:flex-end; }
  header.site-nav{ flex-direction:column; align-items:flex-start; gap:0.9rem; }
}

/* generic sections */
main{ max-width:1100px; margin:0 auto; padding:0 1.5rem; }

.section-label{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:3rem 0 1.2rem;
  border-bottom:1px solid var(--hairline);
  margin-bottom:1.5rem;
}
.section-label .mono{ font-size:0.72rem; color:var(--bone-dim); }
.section-label .mono.right{ color:var(--brass); }

/* buttons */
.btn{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:0.9rem 1.7rem;
  border-radius:2px;
  transition:background .25s ease, color .25s ease;
}
.btn-solid{ background:var(--bone); color:var(--charcoal); }
.btn-solid:hover{ background:var(--brass); }
.btn-outline{ border:1px solid var(--hairline); color:var(--bone); }
.btn-outline:hover{ border-color:var(--brass); color:var(--brass); }

/* footer */
footer.site-footer{
  max-width:1100px; margin:3rem auto 0;
  padding:2.4rem 1.5rem 3rem;
  border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
footer.site-footer .mono{ font-size:0.7rem; color:var(--bone-dim); }
footer.site-footer nav{ display:flex; gap:1.3rem; }
footer.site-footer nav a{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  color:var(--bone-dim);
}
footer.site-footer nav a:hover{ color:var(--brass); }
footer.site-footer nav a.ig{ color:var(--brass); }

/* reveal-on-scroll */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}