:root{
  --text:#6e6e6e;
  --muted:#b3b3b3;
  --accent:#a3e635;
  --card:#111111;
  --cream:#f7f3e9;
  --sky:#cfe9ff;
  --sepia:#f5e6d3;
  --sea:#ffffff;
  --credit:#829491;
  --marker:#690D20;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  min-height:100svh;
  color:var(--text);
  display:flex;
  flex-direction:column;
}

/* page backgrounds */
body.home{ background: var(--sea); }
body.about{ background: var(--cream); color:#222}
body.sunlight{ background: var(--sky); color:#0b2540}
body.bookdex{ background: var(--sepia); color:#2b1f0f}

/* header / title */
.site-header{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem 1rem;
  z-index:50;
  /*background-color: rgba(255, 255, 255, 0.8);*/
  background-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.25));
}

.site-title{
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  margin:0;
}
/*
.site-title {
  font-size: calc(4rem - var(--shrink, 0) * 2rem);
  transition: font-size 0.05s linear;
}
*/


/* burger */
.burger{
  position:absolute; left:1rem; top:1.1rem;
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:grid; place-items:center;
  cursor:pointer;
  backdrop-filter: blur(4px);
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:20px; height:2px; background: currentColor;
  position:relative; border-radius:2px;
}
.burger span::before{ position:absolute; top:-6px}
.burger span::after{ position:absolute; top:6px}

/* drawer menu */
.drawer{
  position:fixed; inset:0 30% 0 0; max-width:320px;
  translate:-100% 0;
  transition:translate .25s ease;
  background:rgba(0,0,0,.9);
  color:#fff; z-index:60; padding:1rem 1rem 2rem;
  border-right:1px solid rgba(255,255,255,.12);
}
.drawer.light{ background:#ffffff; color:#222 }
.drawer.sky{ background: #e7f3ff; color:#0b2540}
.drawer.sepia{ background:#fff6e9; color:#24190d}
.drawer.open{ translate:0 0 }
.drawer h3{ margin:0 0 .5rem 0; font-weight:700 }
.nav{ list-style:none; padding:0; margin:0; }
.nav > li{ padding:.6rem .4rem; border-radius:10px; }
.nav a{ color:inherit; text-decoration:none; font-weight:600 }



.nav .nolink{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }

/* main content container */
.container{
  width:min(100%, 980px);
  margin:0 auto; padding:2rem 1rem 3rem;
}

/* map card */
.map-card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: clamp(8px, 2vw, 16px);
}
.map-wrap{
  position:relative; width:100%;
}
.map-wrap img{ width:100%; height:auto; display:block; border-radius:14px; }
.marker{
  position:absolute; 
  width:8px; 
  height:8px;
  border-radius:50%;
  background: var(--marker);
  box-shadow:0 0 0 2px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.45);
  transform:translate(-50%,-50%) !important;
  outline:none;
  z-index: 10;
}
.marker:focus{ box-shadow:0 0 0 3px white, 0 4px 12px rgba(0,0,0,.45) }
.caption{
  text-align:center; color:var(--text);
  font-size:1.2rem; margin:.9rem 0 0 0; font-wight:400;
}
.credit{
  text-align:left; color:var(--credit);
  font-size:0.6rem; 
}
.footer{ margin-top:auto; padding:2rem 1rem; text-align:center; opacity:.6; font-size:.9rem }
.footer a{ color:inherit }


.nav .sub{ 
  list-style:none; padding:.4rem .8rem; margin:.4rem 0 .2rem 0; 
  border-left:3px solid rgba(255,255,255,.25); 
  display:none;
}
.nav li:hover > .sub{ display:block; }

/* hover highlighting */
.nav > li:hover > a {
  color: #b3b3b3 !important;
}
.nav .sub li:hover > a {
  color: #b3b3b3 !important;
}