/* Recreates the old WordPress look: Twenty Twenty-Two with the site's custom home/single
   templates, the Jetpack tiled gallery and the "Password Protected" login screen. */
@font-face {
  font-family: 'Source Serif Pro';
  src: url('/fonts/SourceSerif4Variable-Roman.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif Pro';
  src: url('/fonts/SourceSerif4Variable-Italic.woff2') format('woff2');
  font-weight: 200 900; font-style: italic; font-display: swap;
}
:root {
  --foreground: #000;
  --background: #fff;
  --primary: #1a4548;
  --system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --serif: "Source Serif Pro", serif;
  --outer: max(1.25rem, 5vw);
  --gap: 1.5rem;
  --large: clamp(4rem, 10vw, 8rem);
  --medium: clamp(2rem, 8vw, 6rem);
  --content: 650px;
  --wide: 1000px;
  --gigantic: clamp(2.75rem, 6vw, 3.25rem);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--system); font-size: 1.125rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--foreground); text-decoration-thickness: 1px; text-underline-offset: .25ch; }
a:hover, a:focus { text-decoration-style: dashed; }
img { display: block; max-width: 100%; height: auto; }
main, .site-header, .site-footer { padding: 0 var(--outer); }
.content, .wide { margin-left: auto; margin-right: auto; }
.content { max-width: var(--content); }
.wide { max-width: var(--wide); }
.content > * + *, .wide > * + * { margin-top: var(--gap); }

/* header */
.header-inner {
  max-width: var(--wide); margin: 0 auto; padding: var(--outer) 0 var(--large);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap);
}
.site-title { font: italic 400 1.125rem/1.6 var(--system); text-decoration: none; }
.logout {
  font: 1rem var(--system); color: #fff; background: #32373c; border: 0; border-radius: 0;
  padding: 15px 23px; min-height: 53px; cursor: pointer;
}
.logout:hover { background: #474d53; }
body.home .site-header { background: var(--foreground); margin-bottom: 66px; }
body.home .site-header .site-title { color: var(--background); }
body.gate .site-header, body.gate .site-footer { display: none; }
body:not(.gate) main { margin-top: var(--gap); }

/* shared post bits */
.post-title { font: 300 var(--gigantic)/1.15 var(--serif); margin: 0; }
.post-title a { text-decoration: none; }
.post-body > * { margin-top: 0; margin-bottom: 0; }
.post-body > * + * { margin-top: var(--gap); }
.post-body p { margin: 0; }
.post-body > p + p { margin-top: var(--gap); }
.post-body h2, .post-body h3, .post-body h4 { font-family: var(--serif); font-weight: 300; line-height: 1.15; }
.post-body h2 { font-size: var(--gigantic); line-height: 1.2; }
.post-body h3 { font-size: clamp(2.25rem, 4vw, 2.75rem); }
.post-body h4 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body figure { margin: 0; }
.post-body img[data-full] { cursor: zoom-in; }
.post-body .single img { width: 100%; }
.post-body video { width: 100%; max-height: 80vh; background: #000; }
.embed { position: relative; aspect-ratio: 16 / 9; }
.embed.short { aspect-ratio: 9 / 16; max-width: 360px; margin-left: auto; margin-right: auto; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
hr { border: 0; margin: var(--gap) auto 0; }
hr.wide-rule { border-bottom: 2px solid; color: #808080; opacity: .4; max-width: var(--wide); }
.content hr.wide-rule { max-width: var(--content); }

/* Jetpack tiled gallery (rectangular): sizes come from layoutGalleries() in app.js */
.tiled-gallery { overflow: hidden; }
.tg-row { display: flex; }
.tg-row + .tg-row { margin-top: 4px; }
.tg-col + .tg-col { margin-left: 4px; }
.tg-item { overflow: hidden; background: #f6f6f6; }
.tg-item + .tg-item { margin-top: 4px; }
.tg-item img { width: 100%; height: 100%; object-fit: cover; }

/* home: full posts, 10 per page */
.home-list { max-width: var(--wide); margin: 0 auto; padding: 0; list-style: none; }
.home-list > li + li { margin-top: var(--gap); }
.home-list .post-body { margin-top: var(--gap); }
.home-date { display: block; text-align: center; max-width: var(--content); margin: var(--gap) auto 0; }
hr.post-sep { height: 1px; background: var(--primary); opacity: .4; max-width: var(--content); }
.pagination {
  max-width: var(--wide); margin: var(--gap) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em var(--gap);
}
.pagination .prev, .pagination .next { font-size: 1rem; }
.pagination .numbers { display: flex; gap: .3em; }
.pagination .current { text-decoration: none; }

/* single post */
.single-head { max-width: var(--wide); margin: 0 auto; }
.single-head .post-title { margin-bottom: var(--medium); }
.single-head .featured { margin-bottom: var(--medium); }
.single-head .featured img { width: 100%; }
.single-head hr { margin: 0; }
.spacer { height: 32px; }
.single-date { font-size: 1rem; font-style: italic; }
hr.short-rule { width: 100px; height: 2px; background: #abb8c3; }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related a { text-decoration: none; display: block; }
.related a:hover h4 { text-decoration: underline dashed 1px; }
.related .thumb { aspect-ratio: 3 / 2; overflow: hidden; background: #f6f6f6; margin-bottom: 8px; }
.related .thumb img { width: 100%; height: 100%; object-fit: cover; }
.related h4 { font: 400 1rem/1.4 var(--system); margin: 0; }
.related time { font-size: .875rem; color: #595959; }

/* footer */
.site-footer { padding-top: var(--large); }
.footer-inner {
  max-width: var(--wide); margin: 0 auto; padding: 4rem 0;
  display: flex; justify-content: space-between; align-items: center;
}

/* login: the "Password Protected" plugin screen (wp-login look) */
body.gate { background: #f0f0f1; }
.login { width: 320px; max-width: calc(100vw - 40px); margin: 0 auto; padding: 64px 0 0; font-size: 14px; color: #3c434a; line-height: 1.4; }
.login h1 { font: 400 20px/1.3 var(--system); min-height: 84px; margin: 0 0 24px; display: grid; place-items: center; text-align: center; color: #3c434a; }
.login form {
  background: #fff; border: 1px solid #c3c4c7; box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  padding: 26px 24px; overflow: hidden;
}
.login label { display: block; margin-bottom: 3px; }
.login input[type=password] {
  width: 100%; font-size: 24px; line-height: 1.33; min-height: 40px; padding: 0 8px; margin: 0 0 16px;
  border: 1px solid #8c8f94; border-radius: 4px; background: #fff; color: #2c3338;
}
.login input[type=password]:focus { border-color: #3858e9; box-shadow: 0 0 0 1px #3858e9; outline: 2px solid transparent; }
.login .row { display: flex; align-items: center; justify-content: space-between; }
.login .remember { display: flex; align-items: center; gap: 8px; margin: 0; }
.login .remember input { width: 16px; height: 16px; margin: 0; }
.login button {
  background: #3858e9; border: 1px solid #3858e9; color: #fff; border-radius: 3px;
  font: 13px var(--system); min-height: 40px; padding: 0 16px; cursor: pointer;
}
.login button:hover { background: #2145e6; }
.login button:disabled { opacity: .6; }
.login .error {
  background: #fff; border-left: 4px solid #d63638; box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
  padding: 12px; margin: 0 0 20px;
}

.notfound { max-width: var(--content); margin: 0 auto; }
.notfound h1 { font: 300 var(--gigantic)/1.15 var(--serif); margin: 0 0 var(--gap); }
.loading { min-height: 60vh; }

/* lightbox (like the Jetpack carousel: black, full screen) */
.lightbox { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94vw; max-height: 90vh; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; padding: 14px; opacity: .8; }
.lightbox button:hover { opacity: 1; }
.lb-close { top: 10px; right: 10px; }
.lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 6px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #aaa; font-size: 13px; }

@media (max-width: 600px) {
  .related { grid-template-columns: 1fr 1fr; }
  .footer-inner { padding: 2rem 0; }
  .lb-prev, .lb-next { display: none; }
}