/* Monika Macdonald — static site
   Colours and metrics taken from the original Squarespace theme. */

:root{
  --bg: #eaeaea;
  --text:#514d4d;
  --title:#342828;
  --link:#555353;
  --link-hover:#2b2424;
  --sidebar-w:230px;
  --sidebar-x:55px;
  --content-x:340px;
  --gap:10px;
  --sans:"Proxima Nova","Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--serif);
  font-size:13px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link-hover);}

/* ---------- sidebar ---------- */

.sidebar{
  position:fixed;
  top:40px;
  left:var(--sidebar-x);
  width:var(--sidebar-w);
  max-height:calc(100vh - 60px);
  overflow-y:auto;
  font-family:var(--sans);
}

.site-title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  color:var(--title);
  letter-spacing:0;
}
.site-title a{color:inherit;}

.tagline{
  margin:2px 0 26px;
  font-size:16px;
  font-weight:400;
  color:var(--title);
}

.nav{list-style:none;margin:0;padding:0;font-size:16px;font-weight:500;}
.nav li{margin:0 0 7px;}
.nav a{display:block;color:var(--link);}
.nav a:hover{color:var(--link-hover);}
.nav a.active{color:#2b2424;font-weight:600;}

/* folder headings + their children */
.nav .folder-label{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  color:var(--link);
  cursor:pointer;
}
.nav .folder-label:hover{color:var(--link-hover);}
.nav .folder.open > .folder-label{color:#2b2424;}
.nav .subnav{
  list-style:none;
  margin:4px 0 10px;
  padding:0 0 0 12px;
  font-size:13px;
  font-weight:400;
}
.nav .subnav li{margin:0 0 5px;}
.nav .subnav a{line-height:1.35;}

/* collapsed unless the folder is the active section */
.nav .folder:not(.open) .subnav{display:none;}

.footer-links{
  list-style:none;
  margin:34px 0 24px;
  padding:0;
  font-family:var(--sans);
  font-size:12px;
}
.footer-links li{margin:0 0 6px;}

/* mobile nav toggle — hidden on desktop */
.nav-toggle{
  display:none;
  position:fixed;
  top:14px;
  right:16px;
  z-index:30;
  padding:8px 12px;
  border:1px solid rgba(52,40,40,.35);
  background:transparent;
  color:var(--title);
  font-family:var(--sans);
  font-size:13px;
  cursor:pointer;
}

/* ---------- content ---------- */

.content{
  margin:40px 50px 60px var(--content-x);
  min-height:60vh;
}

/* masonry galleries: 2 columns, matching the original */
.gallery{
  column-count:2;
  column-gap:var(--gap);
}
.gallery figure{
  margin:0 0 var(--gap);
  break-inside:avoid;
  page-break-inside:avoid;
}
.gallery img{width:100%;height:auto;cursor:zoom-in;}
.gallery figcaption{
  margin-top:5px;
  font-family:var(--sans);
  font-size:12px;
  color:var(--text);
}

/* home grid: 3 columns */
.grid-home{column-count:3;}

/* ---------- text pages ---------- */

.prose{max-width:640px;font-size:14px;line-height:1.7;}
.prose h1{
  font-family:var(--sans);
  font-size:20px;
  font-weight:700;
  color:var(--title);
  margin:0 0 18px;
}
.prose h2{
  font-family:var(--sans);
  font-size:16px;
  font-weight:600;
  color:var(--title);
  margin:30px 0 8px;
}
.prose p{margin:0 0 12px;}
.prose ul{margin:0 0 18px;padding-left:18px;}
.prose li{margin:0 0 4px;}
.prose a{text-decoration:underline;}

.cv-section{margin-bottom:28px;}
.cv-list{list-style:none;margin:0;padding:0;}
.cv-list li{margin:0 0 5px;}

/* press */
.press-list{list-style:none;margin:0;padding:0;max-width:900px;}
.press-item{margin:0 0 34px;}
.press-item h2{
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  color:var(--title);
  margin:0 0 8px;
}
.press-item img{max-width:420px;}

/* books */
.book{margin:0 0 46px;max-width:900px;}
.book-cover{max-width:420px;margin:0 0 14px;}
.video-wrap{position:relative;padding-bottom:56.25%;height:0;max-width:640px;margin:0 0 18px;}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}

/* ---------- contact ---------- */

.contact-line{font-size:15px;}
.contact-line .email a{text-decoration:underline;white-space:nowrap;}

/* ---------- lightbox ---------- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(40,38,37,.94);
}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:92vh;width:auto;height:auto;}
.lightbox button{
  position:absolute;
  border:0;
  background:transparent;
  color:#e8e6e3;
  font-family:var(--sans);
  font-size:30px;
  line-height:1;
  padding:14px 18px;
  cursor:pointer;
  opacity:.75;
}
.lightbox button:hover{opacity:1;}
.lb-close{top:6px;right:10px;font-size:34px;}
.lb-prev{left:4px;top:50%;transform:translateY(-50%);}
.lb-next{right:4px;top:50%;transform:translateY(-50%);}

/* ---------- responsive ---------- */

@media (max-width:1100px){
  :root{--sidebar-x:32px;--content-x:290px;}
  .content{margin-right:32px;}
}

@media (max-width:800px){
  .nav-toggle{display:block;}
  .sidebar{
    position:static;
    width:auto;
    max-height:none;
    margin:22px 22px 0;
    overflow:visible;
  }
  .sidebar .nav,
  .sidebar .footer-links{display:none;}
  .sidebar.open .nav,
  .sidebar.open .footer-links{display:block;}
  .sidebar.open .nav{margin-top:18px;}
  .sidebar.open .nav .folder .subnav{display:block;}
  .content{margin:24px 22px 50px;}
  .gallery,.grid-home{column-count:1;}
  .press-item img,.book-cover{max-width:100%;}
}

@media (min-width:801px) and (max-width:1000px){
  .grid-home{column-count:2;}
}