/* =========================================================
   Base (site-wide)
   ======================================================= */
:root {
  --max: 72rem;
  --pad: 1.25rem;
  --ink: #111;      /* text color used in effects */
  --rule: #eee;     /* subtle divider color */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
a { color: inherit; text-decoration: none; }

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

ul.post-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.post-card { padding: .75rem; border: 1px solid var(--rule); border-radius: .5rem; }
.meta { color:#666; font-size:.9rem; }
.prose img { max-width: 100%; height: auto; }

/* Screenreader-only utility (used for hidden H1) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,1px,1px);
  white-space: nowrap; border: 0;
}

/* Optional legacy: cap narrow article images if a page uses these classes */
.article-body img,
.post-content img { max-width: 850px; }

/* =========================================================
   Masthead (logo + wordmark) and Topbar (Home/About/...)
   ======================================================= */

/* Masthead container */
.masthead {
  background: #fff;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap {
  display: flex;
  justify-content: center;   /* center the brand */
  align-items: center;
  gap: .9rem;                /* ✨ a touch more breathing room */
}

/* Brand lockup */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
/* ✨ Bigger logo */
.brand .logo {
  height: 96px;          /* was 72px */
  width: auto;
  display: block;
}
.brand .wordmark {
  font-family: "Newsreader","EB Garamond",Georgia,serif;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  white-space: nowrap;
}

/* Topbar (utility nav) */
.topbar {
  background: #fff;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
}
.topbar .wrap {
  display: flex;
  justify-content: center;    /* center links */
  align-items: center;
}

/* Centered, larger top navigation links */
.topnav {
  display: flex;
  justify-content: center;
  gap: 2.5rem;                /* spacing between links */
  flex-wrap: wrap;
  font-size: 1.15rem;         /* larger */
  font-family: "Newsreader","EB Garamond",Georgia,serif;
  font-weight: 500;
}
.topnav a { text-decoration: none; position: relative; }
.topnav a:hover,
.topnav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Optional: sticky topbar (remove if not desired) */
@supports (position: sticky) {
  .topbar { position: sticky; top: 0; z-index: 50; }
}

/* Remove any borders from legacy headers to avoid double lines */
header.site { border: 0; }

/* Responsive tweaks */
@media (max-width: 720px){
  .brand .logo { height: 56px; }   /* was 48px */
  .brand .wordmark { font-size: clamp(1.3rem, 4vw, 1.6rem); }
}

/* =========================================================
   Primary Category Row (below homepage title)
   ======================================================= */

/* Layout + spacing for the category row */
nav[aria-label="Primary"] { margin: .25rem 0 .75rem; }
nav[aria-label="Primary"] .navlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;             /* wider gaps */
  padding: .75rem 0 1rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .02em;
}

/* Minimal underline hover effect */
nav[aria-label="Primary"] .navlinks a {
  position: relative;
  text-decoration: none;
}
nav[aria-label="Primary"] .navlinks a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
nav[aria-label="Primary"] .navlinks a:hover::after {
  transform: scaleX(1);
}

/* =========================================================
   Spacing helpers
   ======================================================= */
.masthead + .topbar { border-top: 1px solid var(--rule); }
.site-content { margin-top: .75rem; }

.editor-letter{display:grid;grid-template-columns:160px 1fr;gap:1rem;align-items:start;margin:1.5rem auto;border-top:1px solid var(--rule);padding-top:1.25rem;}
.editor-letter .headshot img{border-radius:50%;display:block}
.editor-letter .copy h2{font-family:"Newsreader","EB Garamond",Georgia,serif;font-weight:700;margin:.2rem 0 .6rem}
.editor-letter .sig{color:#555;margin-top:.75rem}
@media(max-width:720px){.editor-letter{grid-template-columns:1fr}.editor-letter .headshot{order:2}}

/* Dropdown primary categories */
.primary-nav .menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  padding: .75rem 0 1rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: "Newsreader","EB Garamond",Georgia,serif;
  font-weight: 500;
  letter-spacing: .02em;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  list-style: none;
  margin: 0;
}

.primary-nav .menu > li { position: relative; }

.primary-nav a,
.primary-nav .dropbtn {
  text-decoration: none;
  background: none;
  border: 0;
  padding: .25rem .25rem;
  line-height: 1.2;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.primary-nav a:hover,
.primary-nav .dropbtn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Dropdown panel */
.primary-nav .has-dropdown .dropdown {
  display: none;
  position: absolute;
  top: calc(100% + .4rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  padding: .4rem 0;
  z-index: 40;
  list-style: none;
  margin: 0;
}

.primary-nav .has-dropdown:hover .dropdown,
.primary-nav .has-dropdown:focus-within .dropdown {
  display: block;
}

.primary-nav .dropdown li a {
  display: block;
  padding: .45rem .9rem;
  white-space: nowrap;
}

.primary-nav .dropdown li a:hover {
  background: #f7f7f7;
  text-decoration: none;
}

.primary-nav .caret { margin-left: .25rem; font-size: .9em; }

/* Keep category nav all on one line */
nav[aria-label="Primary"] .navlinks {
  flex-wrap: nowrap;            /* never wrap */
  justify-content: space-around;/* spread items evenly */
  gap: 2rem;                     /* bigger gaps so they breathe */
  overflow-x: auto;             /* allow horizontal scroll on very small screens */
}

/* Optional: hide scroll bar on WebKit if you want it cleaner */
nav[aria-label="Primary"] .navlinks::-webkit-scrollbar {
  display: none;
}