/* Shared chrome for interior pages (journal, projects, speaking, links,
   resume, about, resources) — anything not specific to the home page. */

.page-hero {
  padding: var(--space-2xl) 0 var(--space-lg);
}
.page-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.page-hero p { max-width: 56ch; color: rgba(var(--navy-rgb), 0.7); }

/* Series nav (tutorial detail) ------------------------------------------- */
.series-nav { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(var(--navy-rgb), 0.1); }
.series-nav ul { display: flex; flex-direction: column; gap: 0.4rem; }
.series-nav-current { font-weight: 600; color: var(--teal); }

/* Videos ------------------------------------------------------------------- */
.video-grid, .instagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
}
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.video-card h3 { font-size: 1.05rem; }
.instagram-card :first-child { margin-top: 0; }

/* PDF library + teaser lists (resources page) ------------------------------ */
.pdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}
.pdf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
}
.pdf-card-header h3 { margin: 0; }
.teaser-list { display: flex; flex-direction: column; gap: 0.5rem; }
.teaser-list a { font-weight: 600; }

/* Flash messages on light backgrounds (contact form, etc.) — the newsletter
   card's own message colors are tuned for its dark navy background, so
   this is a separate, light-background-safe variant. ---------------------- */
.form-message {
  margin: 0 0 var(--space-md);
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
}
.form-message--success { background: rgba(59, 165, 93, 0.1); color: var(--success); }
.form-message--error { background: rgba(179, 38, 30, 0.08); color: #b3261e; }

/* Public-facing form fields (contact form) -------------------------------- */
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); max-width: 560px; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--navy-rgb), 0.2);
}
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.contact-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* Journal index --------------------------------------------------------- */
.journal-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}
.search-form {
  display: flex;
  gap: 0.5rem;
}
.search-form input[type="search"] {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--navy-rgb), 0.18);
  min-width: 220px;
}
.search-form input[type="search"]:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag-pill {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--navy-rgb), 0.06);
  color: var(--navy);
}
.tag-pill:hover { background: rgba(var(--navy-rgb), 0.12); text-decoration: none; }
.tag-pill--active { background: var(--teal); color: #fff; }
.empty-state {
  padding: var(--space-xl) 0;
  text-align: center;
  color: rgba(var(--navy-rgb), 0.55);
}

/* Journal post ----------------------------------------------------------- */
.post-header { max-width: 720px; margin: 0 auto var(--space-lg); }
.post-meta {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(var(--navy-rgb), 0.55);
  margin-bottom: var(--space-sm);
}
.post-cover {
  border-radius: var(--radius-card);
  margin-bottom: var(--space-lg);
  max-height: 420px;
  width: 100%;
  object-fit: cover;
}
.prose { max-width: 720px; margin: 0 auto; }
.prose h1, .prose h2, .prose h3 { margin-top: var(--space-lg); }
.prose p, .prose li { color: rgba(var(--navy-rgb), 0.85); }
.prose pre {
  background: var(--navy);
  color: var(--cream);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  overflow-x: auto;
}
.prose code {
  background: rgba(var(--navy-rgb), 0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.9em;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose blockquote {
  border-left: 3px solid var(--teal);
  margin: var(--space-md) 0;
  padding-left: var(--space-md);
  color: rgba(var(--navy-rgb), 0.65);
}
.prose img { border-radius: var(--radius-card); }
.post-back-link { display: block; max-width: 720px; margin: var(--space-lg) auto 0; }

/* Speaking ---------------------------------------------------------------- */
.speaking-list { display: flex; flex-direction: column; gap: var(--space-md); }
.speaking-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.speaking-item-date {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--teal);
  white-space: nowrap;
}
.speaking-item-body { flex: 1; min-width: 240px; }
.speaking-item-event { font-size: 0.85rem; color: rgba(var(--navy-rgb), 0.55); text-transform: uppercase; letter-spacing: 0.04em; }

/* Links (linktree) --------------------------------------------------------- */
.headshot-photo {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-lg);
  box-shadow: var(--shadow-card);
}
.headshot-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--navy-rgb), 0.06);
  color: rgba(var(--navy-rgb), 0.35);
}
.links-stack {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.link-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-weight: 600;
  color: var(--navy);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.link-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); text-decoration: none; }

/* Resume ------------------------------------------------------------------- */
.resume-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.resume-preview {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 480px;
  background: var(--card);
}
.resume-preview iframe { width: 100%; height: 640px; border: none; display: block; }
.resume-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  color: rgba(var(--navy-rgb), 0.5);
  text-align: center;
  padding: var(--space-lg);
}
.resume-sidebar .card { margin-bottom: var(--space-md); }
.skills-matrix { display: grid; gap: var(--space-md); }
.skills-group h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); margin-bottom: 0.4rem; }
.skills-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.skills-tags span {
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--navy-rgb), 0.06);
}
@media (max-width: 820px) {
  .resume-layout { grid-template-columns: 1fr; }
}

/* Placeholder pages (about/resources) -------------------------------------- */
.placeholder-hero {
  max-width: 720px;
}
.placeholder-hero .badge--experimental { margin-bottom: var(--space-sm); }