/* Reproduces the Twenty Seventeen look: full-height header image, alternating
   parallax panels, generous whitespace. No external font requests. */

:root {
  --fg:#333; --muted:#767676; --rule:#eee; --bg:#fff; --max:740px;
  /* This is a light design. Without this the browser supplies a dark canvas
     in dark mode and the dark body text becomes unreadable. */
  color-scheme: only light;
}
*,*::before,*::after { box-sizing:border-box; }

body {
  margin:0;
  font:400 18px/1.66 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a { color:#222; text-decoration:underline; text-underline-offset:2px; }
a:hover { color:#000; }
img { max-width:100%; height:auto; }

/* ---- header ---- */
.site-header {
  position:sticky; top:0; z-index:10; background:#fff;
  border-bottom:1px solid var(--rule); padding:.9rem 1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
}
.branding { display:flex; align-items:center; gap:1rem; }
.logo { width:56px; height:56px; object-fit:cover; display:block; }
.site-title { margin:0; font-size:1.5rem; font-weight:800; letter-spacing:.04em; }
.site-title a { text-decoration:none; }
.main-nav a { margin-left:1.5rem; font-weight:600; text-decoration:none; }
.main-nav a:hover { text-decoration:underline; }

/* ---- homepage ---- */
.header-media {
  min-height:70vh; display:flex; align-items:flex-end;
  padding:3rem 1.5rem; background-size:cover; background-position:center;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.header-title { margin:0; font-size:clamp(2rem,6vw,4rem); font-weight:800; letter-spacing:.03em; }
.tagline { margin:.25rem 0 0; font-size:1.1rem; }

.panel { border-bottom:1px solid var(--rule); }
.panel-image {
  min-height:60vh; background-size:cover; background-position:center;
  background-attachment:fixed;
}
.panel-content { max-width:var(--max); margin:0 auto; padding:3.5rem 1.5rem; }
.panel-title { font-size:2rem; font-weight:800; margin:0 0 1.5rem; }
.recent-post { border-top:1px solid var(--rule); margin-top:2.5rem; padding-top:1.5rem; }
.recent-post h3 { margin:0 0 .25rem; font-size:1.4rem; }
.recent-post h3 a { text-decoration:none; }
.recent-post h3 a:hover { text-decoration:underline; }

/* ---- content pages ---- */
.entry, .index-title, .blog-index { max-width:var(--max); margin-left:auto; margin-right:auto; }
.index-title { padding:3rem 1.5rem 0; font-size:2.25rem; font-weight:800; }
.entry { padding:3rem 1.5rem 4rem; }
.entry h1 { font-size:2.25rem; font-weight:800; margin:0 0 .4rem; line-height:1.2; }
.entry-meta { margin:0 0 2rem; }
/* Body headings sit below the title. Migrated WordPress bodies are demoted one
   level so the article title is the only h1 on the page. */
.entry h2 { font-size:1.55rem; font-weight:700; line-height:1.3; margin:2.75rem 0 .75rem; }
.entry h3 { font-size:1.25rem; font-weight:700; line-height:1.35; margin:2.25rem 0 .6rem; }
.entry h4 { font-size:1.08rem; font-weight:700; margin:2rem 0 .5rem; }
.entry h5, .entry h6 { font-size:1rem; font-weight:700; margin:1.75rem 0 .5rem; }
.entry img { margin:1.5rem 0; }
.entry pre { background:#f7f7f7; padding:1rem; overflow-x:auto; border-radius:3px; }
.entry code { background:#f7f7f7; padding:.15em .35em; border-radius:3px; font-size:.9em; }
.entry pre code { background:none; padding:0; }
.entry blockquote { margin:1.5rem 0; padding-left:1.25rem; border-left:4px solid var(--rule); color:var(--muted); }
.back { margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--rule); }

time, .cat { color:var(--muted); font-size:.85rem; }
.cat { margin-left:.75rem; text-transform:uppercase; letter-spacing:.05em; }

/* ---- blog index ---- */
.blog-index { list-style:none; padding:0 1.5rem; margin:1.5rem auto 4rem; }
.blog-index li { border-bottom:1px solid var(--rule); padding:1.75rem 0; }
.blog-index li:last-child { border-bottom:0; }
.index-link { font-size:1.35rem; font-weight:700; text-decoration:none; display:block; margin-bottom:.35rem; }
.index-link:hover { text-decoration:underline; }
.blog-index p { color:var(--muted); margin:.5rem 0 0; }

/* ---- footer ---- */
.site-footer { border-top:1px solid var(--rule); padding:2.5rem 1.5rem; color:var(--muted); text-align:center; }

@media (max-width:600px) {
  body { font-size:16px; }
  /* fixed attachment is unreliable on mobile browsers */
  .panel-image { background-attachment:scroll; min-height:40vh; }
  .header-media { min-height:55vh; }
  .main-nav a { margin-left:1rem; }
}