/* Fonts match the original Porkbun site: Stoke for headings, Libre Baskerville
   for body and nav, DM Sans for buttons. Loaded from Google Fonts with
   display=swap so text renders immediately in the fallback. */
@import url('https://fonts.googleapis.com/css2?family=Stoke:wght@400;700&family=Libre+Baskerville:wght@400;700&family=DM+Sans:wght@400;700&display=swap');

:root {
  --font-heading: "Stoke", Georgia, "Times New Roman", serif;
  --font-text: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-button: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ink: #16181d;
  --muted: #5b6270;
  --line: #e3e6ec;
  --bg: #ffffff;
  --accent: #1a4fa0;
  --wrap: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaf0;
    --muted: #9aa2b2;
    --line: #2b2f38;
    --bg: #14161a;
    --accent: #7aa7f0;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Libre Baskerville runs large for its point size, so 16px here reads like
     17px in a typical sans. Generous leading because it is a serif face. */
  font: 16px/1.75 var(--font-text);
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---- header ---- */

header {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
  margin-bottom: 2.5rem;
}

header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
}

/* Sizes below are the original Porkbun theme's own numbers, read out of its
   stylesheet before the hosting was cancelled: site title 24px/700, nav links
   16px/400 with no letter-spacing, mobile nav 20px, and the menu breakpoint at
   1024px. See scrape/raw/theme-styles.css. */

.brand {
  /* The theme gave the site title no font-family of its own, so it inherited
     the body face — Libre Baskerville, not Stoke. */
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.5rem;          /* 24px */
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-text);
  font-size: 1rem;            /* 16px */
  font-weight: 400;
  letter-spacing: 0;
  padding: 0 0.5rem;          /* the theme used 16px inline padding */
  text-underline-offset: 4px;
}

nav a:hover { color: var(--accent); }
nav a.active { color: var(--ink); }

/* ---- the menu button ----
   A checkbox and its label, so the menu opens without a line of JavaScript.
   Two bars that rotate into an X, matching the original. */

.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  margin-left: auto;
  background: var(--ink);
  border-radius: 4px;
  transition: rotate 300ms, translate 300ms;
}

.nav-burger span + span { margin-top: 6px; }

.nav-toggle:focus-visible + .nav-burger {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 64rem) {
  .nav-burger { display: flex; }

  nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: 0.6rem;
  }

  .nav-toggle:checked ~ nav { display: flex; }

  nav a {
    font-size: 1.25rem;       /* 20px, as the theme's mobile nav used */
    padding: 0.55rem 0;
  }

  /* Bars cross into an X while the menu is open. */
  .nav-toggle:checked ~ .nav-burger span:first-child {
    rotate: 45deg;
    translate: 0 4px;
  }

  .nav-toggle:checked ~ .nav-burger span:last-child {
    rotate: -45deg;
    translate: 0 -4px;
  }
}

/* ---- type ---- */

/* The original theme's scale: h1 60px, h2 36px, h3 30px, against 16px body.
   clamp() keeps 60px on a desktop but lets it shrink on a phone, where 60px
   would wrap a post title across four lines. */

h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.125rem, 7vw, 3.75rem);   /* 34px → 60px */
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 0 0 0.5rem;
}

.subtitle {
  color: var(--muted);
  margin: 0 0 2.2rem;
  font-size: 1.125rem;
}

h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.625rem, 4vw, 2.25rem);   /* 26px → 36px */
  line-height: 1.12;
  letter-spacing: 0;
  margin: 2.6rem 0 0.7rem;
}

h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.375rem, 3.2vw, 1.875rem);  /* 22px → 30px */
  line-height: 1.2;
  margin: 2rem 0 0.5rem;
}

p, ul, ol { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--accent); }

strong { font-weight: 620; }

code {
  font: 0.88em ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--line);
  padding: 0.12em 0.36em;
  border-radius: 3px;
}

blockquote {
  margin: 1.2rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

/* ---- blog ---- */

.post-summary {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.post-summary:first-of-type { padding-top: 0; }

.post-summary time,
.post-summary h2 { display: block; }

.post-summary time {
  color: var(--muted);
  font-family: var(--font-button);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.post-summary h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 0.3rem 0 0.5rem;
}

.post-summary h2 a {
  color: var(--ink);
  text-decoration: none;
}

.post-summary h2 a:hover { color: var(--accent); }

.post-summary p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.tags { margin-bottom: 1.4rem; }

.tag {
  display: inline-block;
  font-family: var(--font-button);
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.1rem 0.55rem;
  margin: 0 0.3rem 0.3rem 0;
  text-decoration: none;
}

.tag:hover { border-color: var(--accent); color: var(--accent); }

.post-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.back { margin-top: 1.5rem; font-size: 0.92rem; }

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding: 1.5rem 0 3rem;
  font-family: var(--font-button);
  font-size: 0.82rem;
  color: var(--muted);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: center;
}

footer a { color: var(--muted); }
footer span { margin-left: auto; }

@media (max-width: 34rem) {
  footer span { margin-left: 0; width: 100%; }
}

/* ---- contact form ----
   Posts to Formspree. A static site has no server of its own, so the form
   action has to point somewhere that will accept it and forward the mail.
   See README.md for setting the endpoint up — it is a two-minute job. */

.contact-form {
  margin: 1.5rem 0 2.5rem;
  max-width: 34rem;
}

.contact-form label {
  display: block;
  font-family: var(--font-button);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
  color: var(--ink);
}

.contact-form .req { color: var(--accent); }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block;
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.contact-form textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}

.contact-form button {
  font-family: var(--font-button);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 5px;
  padding: 0.65rem 1.6rem;
  cursor: pointer;
}

.contact-form button:hover { filter: brightness(1.1); }
.contact-form button:active { filter: brightness(0.95); }

/* Visually hidden, but still reachable by the bots we want to catch. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- images ---- */

/* Everything scales down on a phone; nothing overflows the column. */
main img {
  max-width: 100%;
  height: auto;
}

.post-image {
  margin: 1.8rem 0;
}

.post-image img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;   /* screenshots are light; keeps them readable in dark mode */
}

/* The founder photo on the About page. Floats beside the text on a wide
   screen, sits above it on a narrow one. */
.portrait {
  float: right;
  width: 11rem;
  margin: 0.2rem 0 1rem 1.6rem;
  border-radius: 6px;
}

@media (max-width: 32rem) {
  .portrait { float: none; width: 9rem; margin: 0 0 1rem; }
}

/* ---- blog index thumbnails ---- */

.post-summary.has-thumb {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.2rem;
  align-items: start;
}

.thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.thumb:hover img { border-color: var(--accent); }

@media (max-width: 32rem) {
  .post-summary.has-thumb { grid-template-columns: 1fr; gap: 0.8rem; }
  .thumb img { aspect-ratio: 16 / 9; }
}