/* David Merlow: the Kadence look of davidmerlow.com (same palette, sizes and spacing). */

:root {
  --c1: #2B6CB0; --c2: #215387; --c3: #1A202C; --c4: #2D3748; --c5: #4A5568; --c6: #718096;
  --c7: #EDF2F7; --c8: #F7FAFC; --c9: #ffffff;
  --wrap: 1290px;
  --gap: 1.5rem;
  --kc-boxed-width: 1242px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--c8); color: var(--c4);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
main { flex: 1; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c1); }
a:hover { color: var(--c2); }
h1, h2, h3, h4, h5, h6 { color: var(--c3); margin: 0 0 .5em; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed !important; z-index: 1000; top: 8px; left: 8px; width: auto; height: auto; clip: auto; padding: 10px 14px; background: var(--c9); color: var(--c3); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }

/* ---- Header ---- */
.site-header { background: var(--c9); position: relative; z-index: 20; }
.site-header__inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-title { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--c3); text-decoration: none; }
.site-title:hover { color: var(--c3); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.site-nav a { display: block; padding: .6em .6em; color: var(--c5); text-decoration: none; }
.site-nav a:hover { color: var(--c1); }
.site-nav a[aria-current="page"] { color: var(--c3); }
.menu-toggle { display: none; border: 0; background: none; color: var(--c5); padding: .4em .6em; cursor: pointer; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }

/* ---- Content ---- */
.content-area { margin-top: 5rem; margin-bottom: 5rem; }
.content-bg { background: var(--c9); }
.entry-wrap { padding: 2rem; border-radius: .25rem; box-shadow: 0 15px 15px -10px rgba(0, 0, 0, .05); }
.entry-title { font-size: 32px; font-weight: 700; line-height: 1.5; margin: 0; }
.entry-content { display: grid; gap: 0; }
.entry-content > .kc-el + .kc-el { margin-top: 2rem; }
.entry-content .kc-text p { margin: 0 0 2rem; }
.entry-content .kc-text > :last-child { margin-bottom: 0; }
.kc-image { margin: 0; }
.kc-image figcaption { margin-top: .5em; font-size: 80%; color: var(--c5); text-align: center; }
.kc-text { font-size: 17px; line-height: 1.6; }

/* Pages: the photo behind everything, content in a white card. */
body.has-bg { background-color: #e7e4e4; background-image: var(--page-bg); background-repeat: no-repeat; background-position: var(--page-bg-pos, 50% 50%); background-size: cover; }
@media (min-width: 1300px) { body.has-bg { background-image: var(--page-bg-large); } }
body.has-bg .entry-wrap { box-shadow: none; }
body.has-bg .site-footer { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

/* Title banner (Photography) */
.page-hero { background: var(--c7); }
.page-hero .wrap { min-height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; }
.content-area--loop { margin-top: 5rem; }

/* ---- Posts grid ---- */
.loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 2.5rem; }
.loop-entry { border-radius: .25rem; overflow: hidden; box-shadow: 0 15px 15px -10px rgba(0, 0, 0, .05); display: flex; flex-direction: column; }
.loop-entry .entry-wrap { box-shadow: none; border-radius: 0; flex: 1; }
.loop-entry__thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c7); }
.loop-entry__thumb img { width: 100%; height: 100%; object-fit: cover; }
.loop-entry .entry-title { font-size: 28px; line-height: 1.5; }
.loop-entry .entry-title a { color: inherit; text-decoration: none; }
.loop-entry .entry-title a:hover { color: var(--c1); }
.loop-entry__excerpt { margin: 0 0 1em; }
.more-link { display: inline-block; color: var(--c4); text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: 80%; letter-spacing: .04em; }
.more-link span[aria-hidden] { margin-left: .4em; }
.more-link:hover { color: var(--c1); }

/* ---- Meta ---- */
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 80%; color: var(--c4); margin: 1em 0; }
.entry-meta a { color: inherit; text-decoration: none; }
.entry-meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .8; margin: 0 .7em; vertical-align: middle; }

/* ---- Single post ---- */
.post { border-radius: .25rem; overflow: hidden; box-shadow: 0 15px 15px -10px rgba(0, 0, 0, .05); }
.post .entry-wrap { box-shadow: none; }
.post-thumbnail img { width: 100%; }
.post .entry-content { margin-top: 2rem; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 3rem; }
.post-nav a { display: block; color: var(--c4); text-decoration: none; }
.post-nav a:hover { color: var(--c1); }
.post-nav small { display: block; text-transform: uppercase; font-weight: 700; font-size: 80%; letter-spacing: .04em; margin-bottom: .2em; }
.post-nav__next { text-align: right; border-left: 1px solid var(--c6); padding-left: 1rem; }
.post-nav__prev { padding-right: 1rem; }

/* ---- Footer ---- */
.site-footer { text-align: center; padding: 30px var(--gap); }
.site-footer p { margin: 0; }
.site-footer ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 16px; justify-content: center; }
.site-footer a { color: inherit; }

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .content-area { margin-top: 3rem; margin-bottom: 3rem; }
  .loop { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
  .menu-toggle { display: block; }
  .site-nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw); background: #090c10; padding: 70px 0 24px; transform: translateX(100%); transition: transform .25s ease; visibility: hidden; }
  .site-nav.is-open { transform: none; visibility: visible; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { color: #f7fafc; padding: 1em 1.5em; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; }
  .menu-toggle[aria-expanded="true"] { position: fixed; top: 20px; right: 16px; z-index: 30; color: #fff; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 0; transform: rotate(-45deg); }
}

/* ---- Phone ---- */
@media (max-width: 767px) {
  .content-area, .content-area--loop { margin-top: 2rem; margin-bottom: 2rem; }
  .is-page .content-area { padding: 0 .5rem; }
  .entry-wrap { padding: 1.5rem; }
  .loop { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; gap: 1rem; }
  .post-nav__next { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) { .site-nav { transition: none; } }