*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* SECTION: Global Design Variables */
  --container-width: 960px;
  /* Optimized layout width for timeline visualization */

  /* SECTION: Typography Configuration */
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono: "Source Code Pro", "Consolas", monospace;
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);

  /* SECTION: Ghost Admin Support */
  --gh-font-heading: var(--font-heading);
  --gh-font-body: var(--font-body);

  /* SECTION: Color Palette (Dark Mode Base) */
  --bg-color: #1e1e1e;
  --card-bg: #252525;
  --text-color: #e0e0e0;
  --text-muted: #a0a0a0;
  --accent-color: #6cb6ff;
  /* Theme accent color */
  --border-color: #333;
  --timeline-line-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
  --heading-color: #fff;
  --code-bg: #111;
}

body {
  max-width: var(--container-width);
  min-height: 100vh;
  padding: 0 1rem;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.6;
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* SECTION: Typography Utilities */
html:has(.font-small) {
  font-size: 14px;
}

html:has(.font-large) {
  font-size: 18px;
}

.has-serif-font {
  --font-body: var(--font-serif);
  --font-heading: var(--font-serif);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.has-serif-font h1,
.has-serif-font h2,
.has-serif-font h3,
.has-serif-font h4,
.has-serif-font h5,
.has-serif-font h6 {
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.has-sans-font {
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
  line-height: 1.6;
  letter-spacing: 0;
}

.has-sans-font h1,
.has-sans-font h2,
.has-sans-font h3,
.has-sans-font h4,
.has-sans-font h5,
.has-sans-font h6 {
  letter-spacing: -0.01em;
}

.has-mono-font {
  --font-body: var(--font-mono);
  --font-heading: var(--font-mono);
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.has-mono-font h1,
.has-mono-font h2,
.has-mono-font h3,
.has-mono-font h4,
.has-mono-font h5,
.has-mono-font h6 {
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* SECTION: Layout Utilities */
.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.center-text {
  text-align: center;
}

.inline-block {
  display: inline-block;
}

.mt0 {
  margin-top: 0;
}

.mb0 {
  margin-bottom: 0;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--accent-color);
  color: var(--bg-color);
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn--cta {
  font-size: 1.1rem;
  padding: 0.75rem 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.width-narrow {
  --container-width: 740px;
}

.width-wide {
  --container-width: 1200px;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: var(--heading-color);
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

h2 {
  font-size: 1.75rem;
  font-weight: 600;
}

h3 {
  font-size: 1.5rem;
}

/* SECTION: Global Element Styles */
.post__content,
.page__content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.1rem;
}

.post__image {
  max-width: 720px;
  margin: 0 auto 2rem;
}

.post__header,
.page__header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.post__meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* Image rendering logic: grid overflow or container containment */
.post__content img {
  border-radius: 4px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

figure {
  margin: 2rem 0;
  margin-inline: 0;
}

figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

pre {
  overflow: auto;
  background: var(--code-bg);
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

/* SECTION: Timeline Component Styles */
/* ================================ */

.timeline-container {
  position: relative;
  padding: 2rem 0;
}

/* Timeline vertical axis connector */
.timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 139px;
  /* Centered on marker column (date 120px + marker 40px/2 - line 2px/2) */
  width: 2px;
  background: var(--timeline-line-color);
}

.timeline-item {
  display: flex;
  position: relative;
  margin-bottom: var(--timeline-spacing, 3rem);
}

.timeline-item--featured .timeline-right {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1.5rem;
  margin-top: -0.5rem;
  /* Slight offset to align visually */
}

.timeline-item--featured .timeline-title span {
  /* Hide the default span star if we style it via CSS, or style it here */
  color: var(--accent-color);
  margin-left: 0.5rem;
}

.density-compact {
  --timeline-spacing: 1.5rem;
}

.density-spacious {
  --timeline-spacing: 5rem;
}

.timeline-left {
  width: 120px;
  padding-right: 20px;
  text-align: right;
  flex-shrink: 0;
}

.timeline-date {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  position: relative;
  top: 0.2em;
}

.timeline-date-mobile {
  display: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.timeline-marker {
  position: relative;
  width: 40px;
  /* Icon container dimensions */
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-icon {
  width: 24px;
  height: 24px;
  /* Layered above axis line */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  z-index: 1;
}

.timeline-icon-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* MODIFIER: Icon Position - Left */
/* Logic: Icon moved to far left. Date moved to center. */


.icon-position-left .timeline-marker {
  order: -1;
  margin-right: 20px;
}

.icon-position-left .timeline-left {
  text-align: left;
  padding-left: 20px;
  padding-right: 0;
  width: 100px;
  /* Adjust as needed */
  /* Timeline line stays with date or moves? 
     Let's keep line relative to the "axis" which is usually the date column in this theme.
     But if icon is far left, maybe the axis should be there?
     For now, let's just reorder.
  */
}

.icon-position-left .timeline-container::before {
  /* If we want the line to move to the icon, we change left position.
     Default left is 140px. 
     If Icon (40px) + Margin (20px) is first.. 
  */
  left: 19px;
  /* Center of the icon (40/2 - 1px for line width) */
}

/* MODIFIER: Icon Position - Right */
/* Logic: Icon moved to far right. */


.icon-position-right .timeline-marker {
  order: 10;
  margin-left: 20px;
}

.icon-position-right .timeline-container::before {
  left: auto;
  right: 19px;
}

/* MODIFIER: Icon Position - None */
.icon-position-none .timeline-marker {
  display: none;
}

.icon-position-none .timeline-container::before {
  display: none;
}

/* MODIFIER: Icon Style - Monochrome */
.icon-style-mono .timeline-icon {
  filter: grayscale(1);
  opacity: 0.7;
}

/* MODIFIER: Icon Style - Contrast */
.icon-style-contrast .timeline-icon {
  filter: grayscale(1) brightness(10);
  opacity: 0.9;
}

.timeline-right {
  flex: 1;
  padding-left: 1rem;
  padding-top: 0;
  position: relative;
}

.timeline-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  color: var(--heading-color);
}

.timeline-title a {
  color: inherit;
  font-weight: 700;
}

.timeline-title a:hover {
  color: var(--accent-color);
}

.timeline-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.timeline-excerpt {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
}


/* SECTION: Micro Post Styling */
.timeline-content--micro {
  font-size: 1.2rem;
  line-height: 1.5;
}

.timeline-content--micro p {
  display: inline;
  margin: 0;
}

.timeline-permalink {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
  opacity: 0.5;
}

.timeline-permalink:hover {
  opacity: 1;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 2rem 0;
}

.pagination a {
  margin: 0 1rem;
}

/* SECTION: Utility & Theme Overrides */
nav ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: auto;
  margin-bottom: 2rem;
  padding-top: 2rem;
}

footer a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer__navigation li[class*="signup"] a,
.site-footer__navigation li[class*="subscribe"] a,
.site-footer__navigation a[href*="portal/signup"],
.site-footer__navigation a[href*="portal/subscribe"] {
  color: var(--accent-color) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 3rem 0;
}

/* SECTION: Ghost Content Card Styles */
/* ================================= */

/* figure.kg-width-full { } */
/* figure.kg-width-wide { } */
/* .kg-gallery-card { } */
/* .kg-gallery-container { } */
/* .kg-gallery-row { } */
/* .kg-gallery-image { } */

/* SECTION: Bookmark Card Styles */
/* NOTE: Ghost's default bookmark card assets are excluded via package.json card_assets.exclude.
   These custom styles target Ghost's .kg-bookmark-* markup. If Ghost changes the bookmark card
   HTML structure in a future version, these styles may need updating. */

.kg-bookmark-card {
  width: 100%;
  margin: 2rem 0;
}

.kg-bookmark-container {
  display: flex;
  text-decoration: none;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  color: var(--text-color);
  transition: border-color 0.2s;
}

.kg-bookmark-container:hover {
  border-color: var(--accent-color);
  opacity: 1;
}

.kg-bookmark-content {
  padding: 1.25rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kg-bookmark-title {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  color: var(--heading-color);
}

.kg-bookmark-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}

.kg-bookmark-metadata {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.kg-bookmark-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.kg-bookmark-publisher {
  display: inline-block;
  margin-right: 0.5rem;
}

.kg-bookmark-author {
  display: inline-block;
}

.kg-bookmark-author:after {
  content: "•";
  margin: 0 0.5rem;
}

.kg-bookmark-thumbnail {
  position: relative;
  min-width: 33%;
  max-height: 100%;
}

.kg-bookmark-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* END BOOKMARK CARD STYLES */

/* SECTION: File Card Styles */
/* NOTE: Ghost's default file card CSS is excluded via package.json card_assets.exclude.
   These styles provide both layout and dark-theme colors for .kg-file-card. */

.kg-file-card {
  width: 100%;
  margin: 2rem 0;
}

.kg-file-card-container {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-color);
  text-decoration: none;
  transition: border-color 0.2s;
}

.kg-file-card-container:hover {
  border-color: var(--accent-color);
  opacity: 1;
}

.kg-file-card-contents {
  flex: 1;
  min-width: 0;
}

.kg-file-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--heading-color);
}

.kg-file-card-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.kg-file-card-metadata {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.kg-file-card-filename {
  font-weight: 700;
  font-size: 1rem;
  color: var(--heading-color);
}

.kg-file-card-filesize {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.kg-file-card-medium {
  padding: 0.75rem;
}

.kg-file-card-small {
  padding: 0.5rem;
}

.kg-file-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-left: 1rem;
  color: var(--accent-color);
}

.kg-file-card-icon svg {
  width: 100%;
  height: 100%;
}

/* END FILE CARD STYLES */

/* RESPONSIVE VIDEO EMBED STYLES */
/* ============================= */

/* This is lightest-weight implementation of responsive video embeds that I have been able to come up with. To cover all edge cases, a JavaScript solution would be needed, but this works in most modern browsers. */

iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="vimeo.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* END RESPONSIVE EMBED CARD STYLES */


/* HEADER STYLES */
/* ============= */

.top-nav {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.nav-sticky .top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bg-color);
}

.top-nav nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.top-nav nav ul li {
  margin: 0;
}

.top-nav a {
  color: var(--text-color);
  text-decoration: none;
  background: transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  opacity: 0.6;
}

.top-nav a:hover,
.top-nav .nav-current a {
  opacity: 1;
}

/* STYLE: Pill (Default) */
.nav-style-pill a {
  padding: 0.5rem 1rem;
  border-radius: 2rem;
}

.nav-style-pill a:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  color: var(--heading-color);
}

.nav-style-pill .nav-current a {
  background: rgba(255, 255, 255, 0.15);
  color: var(--heading-color);
  font-weight: 600;
}

/* STYLE: Underline */
.nav-style-underline a {
  padding: 0.5rem 0.75rem;
  opacity: 0.75;
}

.nav-style-underline a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background-color: var(--accent-color);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.nav-style-underline a:hover {
  color: var(--heading-color);
  opacity: 1;
}

.nav-style-underline a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.nav-style-underline .nav-current a {
  color: var(--heading-color);
  font-weight: 600;
  opacity: 1;
}

.nav-style-underline .nav-current a::after {
  transform: scaleX(1);
  background-color: var(--heading-color);
  transform-origin: bottom center;
}

/* STYLE: Minimal */
.nav-style-minimal a {
  padding: 0.5rem 1rem;
  opacity: 0.7;
}

.nav-style-minimal a:hover {
  opacity: 1;
  color: var(--heading-color);
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.nav-style-minimal .nav-current a {
  opacity: 1;
  color: var(--heading-color);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* STYLE: Brackets */
.nav-style-brackets a {
  padding: 0.5rem 0.5rem;
  /* Tighter padding */
}

.nav-style-brackets a::before,
.nav-style-brackets a::after {
  display: inline-block;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  color: var(--text-muted);
  font-weight: 300;
}

.nav-style-brackets a::before {
  content: '[';
  transform: translateX(10px);
  margin-right: 4px;
}

.nav-style-brackets a::after {
  content: ']';
  transform: translateX(-10px);
  margin-left: 4px;
}

.nav-style-brackets a:hover::before,
.nav-style-brackets a:hover::after,
.nav-style-brackets .nav-current a::before,
.nav-style-brackets .nav-current a::after {
  opacity: 1;
  transform: translateX(0);
}

.nav-style-brackets a:hover,
.nav-style-brackets .nav-current a {
  color: var(--heading-color);
}

/* STYLE: Block (Brutalist) */
.nav-style-block a {
  padding: 0.5rem 1rem;
  border-radius: 0;
  border: 1px solid transparent;
}

.nav-style-block a:hover {
  background: var(--text-color);
  color: var(--bg-color);
  border-color: var(--text-color);
}

.nav-style-block .nav-current a {
  background: var(--heading-color);
  color: var(--bg-color);
  font-weight: 700;
}

/* STYLE: Cursor (Terminal) */
.nav-style-cursor a {
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  /* Room for cursor */
}

.nav-style-cursor a::before {
  content: '>';
  position: absolute;
  left: 0.5rem;
  opacity: 0;
  transform: translateX(-5px);
  transition: all 0.2s ease;
  color: var(--accent-color);
  font-family: var(--font-mono);
  font-weight: 700;
}

.nav-style-cursor a:hover::before,
.nav-style-cursor .nav-current a::before {
  opacity: 1;
  transform: translateX(0);
}

.nav-style-cursor a:hover {
  color: var(--heading-color);
}

.nav-style-cursor .nav-current a {
  font-weight: 600;
}

/* MODIFIER: Navigation Size */
/* MODIFIER: Navigation Size */
.nav-size-0-75rem {
  font-size: 0.75rem;
}

.nav-size-0-875rem {
  font-size: 0.875rem;
}

.nav-size-1rem {
  font-size: 1rem;
}

.nav-size-1-25rem {
  font-size: 1.25rem;
}

.nav-size-1-5rem {
  font-size: 1.5rem;
}

.nav-size-1-75rem {
  font-size: 1.75rem;
}

.site-branding {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 0;
}

.site-branding .site-title {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.site-branding .site-description {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.site-icon-wrapper {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  overflow: hidden;
}

.site-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-icon-wrapper.is-round {
  border-radius: 50%;
}

.site-icon-wrapper.is-squircle {
  border-radius: 22%;
}

.site-icon-wrapper.is-rounded {
  border-radius: 12px;
}

.site-icon-wrapper.is-sharp {
  border-radius: 0;
}

.main-header {
  margin-bottom: 0;
}


.header-separator {
  border-top: 1px dotted var(--text-muted);
  opacity: 0.3;
  margin-top: 3rem;
  margin-bottom: 0;
}

.pagination-info {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.tag-info {
  padding-top: 2rem;
}

.tag-info__meta {
  display: block;
  margin-bottom: 1rem;
}

.author-profile__stats {
  display: block;
  margin-top: 1.5rem;
}

.author-profile__meta {
  margin-bottom: 1.5rem;
}

/* MEMBERSHIP STYLES */
/* ================= */

/* Most membership stuff is handled by the Ghost portal. These are used for the optin form 
   at the bottom of each post. Feel free to remove these barebones membership styles if you 
   don't plan on enabling memberships & subscriptions for your blog. */

.notification-area {
  display: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: var(--accent-color);
  padding: 1rem;
  margin-top: 2rem;
  box-sizing: border-box;
}

.message-success,
.message-error {
  display: none;
  margin-top: 1rem;
}

.message-error,
[data-members-error] {
  color: #f87171;
}

.message-success {
  color: #4ade80;
}

.loading button span,
.error button span,
.success button span {
  display: none;
}

.loading button::after {
  content: "Loading...";
}

.error button::after {
  content: "Error :(";
}

.success button::after {
  content: "Success :)";
}

.success~.message-success,
.invalid~.message-error,
.error~.message-error {
  display: block;
}


.email-optin-widget__thanks,
.email-optin-widget__alt {
  color: var(--text-muted);
}

.email-optin-widget__prompt {
  margin-bottom: 0.5rem;
}

/* WELCOME MAT STYLES */

.membership-widget--welcome-mat {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
  position: absolute;
  left: 0;
  background-color: var(--bg-color);
}

.membership-widget--welcome-mat h4 {
  text-transform: uppercase;
  font-weight: 400;
}

.membership-widget--welcome-mat .welcome-mat-optin-cta {
  line-height: 1.618;
}

body:has(.membership-widget--welcome-mat) {
  margin-top: 0 !important;
}

.membership-widget--welcome-mat+.main-header {
  padding-top: calc(100vh + 1rem);
}

/* END MEMBERSHIP STYLES */

@media all and (min-width: 800px) {

  ol,
  ul {
    /* Hanging punctuation */
    padding-inline-start: 0;
  }

  nav li,
  nav ul {
    display: inline;
  }

  nav li {
    margin: 0.5rem;
  }

  .form-group {
    display: inline;
  }

  .site-footer__attribution>div {
    display: inline-block;
    margin: 0.5rem;
  }

}


@media print {
  p {
    text-indent: 0 !important;
  }
}

/* SECTION: Related Posts */
.related-posts {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-body);
}

.related-posts__title {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  text-align: left;
}

.related-posts__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.related-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: 6px;
  overflow: hidden;
  transition: background-color 0.2s ease, transform 0.2s ease;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.related-card:hover {
  background-color: var(--border-color);
  transform: translateY(-2px);
  opacity: 1;
}

.related-card:hover .related-card__title {
  color: var(--accent-color);
}

.related-card__image {
  height: 160px;
  overflow: hidden;
}

.related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-card__content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
}

.related-card__date {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.related-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  line-height: 1.3;
  color: var(--heading-color);
  transition: color 0.2s ease;
}

.related-card__excerpt {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0;
}

/* SECTION: Custom Page Templates */
/* ================================ */

/* --- Full Width (Immersive Reader) --- */
.page--full-width .page__header {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.page--full-width__hero {
  margin: 0 -1rem 2rem;
  max-width: none;
}

.page--full-width__hero img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.page__content--full-width {
  max-width: none;
}

.page__content--full-width img {
  max-width: 100%;
}

.page__content--full-width pre {
  max-width: 100%;
}

.page__content--full-width table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

/* --- No Feature Image (Essayist) --- */
.page--essayist .page__header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}

.page--essayist .post__meta {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Subscribe Landing (Converter) --- */
.subscribe-landing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 2rem 1rem;
}

.subscribe-landing__card {
  max-width: 540px;
  width: 100%;
  text-align: center;
}

.subscribe-landing__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
}

.subscribe-landing__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.subscribe-landing__title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.subscribe-landing__pitch {
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.subscribe-landing__body {
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 2rem;
  text-align: left;
}

.subscribe-landing__form {
  margin: 2rem 0;
}

.subscribe-landing__input-group {
  display: flex;
  gap: 0.5rem;
  max-width: 420px;
  margin: 0 auto;
}

.subscribe-landing__input-group input[type="email"] {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-family: var(--font-body);
}

.subscribe-landing__input-group input[type="email"]::placeholder {
  color: var(--text-muted);
}

.subscribe-landing__input-group input[type="email"]:focus {
  outline: none;
  border-color: var(--accent-color);
}

.subscribe-landing__thanks {
  margin: 2rem 0;
  color: var(--text-muted);
  font-size: 1.1rem;
}

.subscribe-landing__back {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.subscribe-landing__back:hover {
  color: var(--accent-color);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .subscribe-landing__input-group {
    flex-direction: column;
  }

  .subscribe-landing__title {
    font-size: 2rem;
  }
}

/* --- Project Case Study (Portfolio) --- */
.project__header {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.project__title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--heading-color);
}

.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.project__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.project__meta-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.project__meta-value {
  font-size: 0.95rem;
  color: var(--text-color);
}

.project__hero {
  margin: 0 0 2rem;
  max-width: none;
}

.project__hero img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.page__content--project {
  max-width: 720px;
  margin: 0 auto;
}

.page__content--project img {
  border-radius: 6px;
}

/* --- Video (Theater) --- */
.page--video .page__header {
  margin-bottom: 2rem;
}

.video__poster {
  margin: 0 0 2rem;
  max-width: none;
}

.video__poster img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.page__content--video {
  max-width: 720px;
  margin: 0 auto;
}

/* Cinema mode: video embeds break out of the reading column */
.page__content--video iframe[src*="youtube.com"],
.page__content--video iframe[src*="youtube-nocookie.com"],
.page__content--video iframe[src*="vimeo.com"] {
  width: calc(100% + 4rem);
  margin-left: -2rem;
  margin-right: -2rem;
  max-width: none;
  border-radius: 0;
}

.page__content--video .kg-video-card {
  width: calc(100% + 4rem);
  margin-left: -2rem;
  margin-right: -2rem;
  max-width: none;
}

@media (max-width: 768px) {

  .page__content--video iframe[src*="youtube.com"],
  .page__content--video iframe[src*="youtube-nocookie.com"],
  .page__content--video iframe[src*="vimeo.com"],
  .page__content--video .kg-video-card {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

/* --- Curated List (Index) --- */
.curated__subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 0;
}

.page__content--curated {
  max-width: none;
}

/* Bookmark cards display as a responsive grid */
.page__content--curated .kg-bookmark-card {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 1rem);
  margin: 0.5rem;
}

.page__content--curated .kg-bookmark-container {
  flex-direction: column;
  height: 100%;
}

.page__content--curated .kg-bookmark-thumbnail {
  min-width: 100%;
  max-height: 160px;
}

.page__content--curated .kg-bookmark-thumbnail img {
  position: relative;
}

/* Section headings act as grid dividers */
.page__content--curated h2,
.page__content--curated h3 {
  width: 100%;
  display: block;
  margin-top: 3rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.page__content--curated h2:first-child,
.page__content--curated h3:first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .page__content--curated .kg-bookmark-card {
    width: 100%;
    margin: 0.5rem 0;
  }
}

/* SECTION: Sodo Search Dark Mode Overrides */
/* Ghost's native search (Sodo) renders inside an iframe/shadow root
   with hardcoded light styles. We style the outer container here and
   inject dark overrides into the iframe via JavaScript in default.hbs. */

#sodo-search-root {
  --sodo-search-bg: var(--bg-color);
  --sodo-search-card-bg: var(--card-bg);
  --sodo-search-text: var(--text-color);
  --sodo-search-text-muted: var(--text-muted);
  --sodo-search-border: var(--border-color);
  --sodo-search-accent: var(--accent-color);
}

/* SECTION: Color Palettes */
.palette-dracula {
  --bg-color: #282a36;
  --card-bg: #343746;
  --text-color: #f8f8f2;
  --text-muted: #6272a4;
  --accent-color: #bd93f9;
  --heading-color: #f8f8f2;
  --border-color: #44475a;
  --code-bg: #1e1f29;
}

.palette-catppuccin {
  --bg-color: #1e1e2e;
  --card-bg: #313244;
  --text-color: #cdd6f4;
  --text-muted: #6c7086;
  --accent-color: #cba6f7;
  --heading-color: #cdd6f4;
  --border-color: #45475a;
  --code-bg: #181825;
}

.palette-nordic {
  --bg-color: #1a2421;
  --card-bg: #22302b;
  --text-color: #d4cfc4;
  --text-muted: #7a8c7e;
  --accent-color: #8fb573;
  --heading-color: #e8e2d6;
  --border-color: #2e3e37;
  --code-bg: #141d1a;
}

.palette-earth {
  --bg-color: #231c17;
  --card-bg: #2e2520;
  --text-color: #d4c8b8;
  --text-muted: #937e6a;
  --accent-color: #c67a4a;
  --heading-color: #e8ddd0;
  --border-color: #3a302a;
  --code-bg: #1a1511;
}

.palette-cyberpunk {
  --bg-color: #0d0d12;
  --card-bg: #16161f;
  --text-color: #d0d0e0;
  --text-muted: #5a5a7a;
  --accent-color: #ff2a6d;
  --heading-color: #e0e0f0;
  --border-color: #1f1f2e;
  --code-bg: #08080d;
}

.palette-nightowl {
  --bg-color: #011627;
  --card-bg: #0b2942;
  --text-color: #d6deeb;
  --text-muted: #637777;
  --accent-color: #7fdbca;
  --heading-color: #d6deeb;
  --border-color: #1d3b53;
  --code-bg: #001122;
}

.palette-nord {
  --bg-color: #2e3440;
  --card-bg: #3b4252;
  --text-color: #d8dee9;
  --text-muted: #7b88a1;
  --accent-color: #88c0d0;
  --heading-color: #eceff4;
  --border-color: #434c5e;
  --code-bg: #242933;
}

.palette-solarized {
  --bg-color: #002b36;
  --card-bg: #073642;
  --text-color: #839496;
  --text-muted: #7c9198;
  --accent-color: #268bd2;
  --heading-color: #93a1a1;
  --border-color: #094959;
  --code-bg: #00212b;
}

.palette-gruvbox {
  --bg-color: #282828;
  --card-bg: #3c3836;
  --text-color: #ebdbb2;
  --text-muted: #928374;
  --accent-color: #fabd2f;
  --heading-color: #fbf1c7;
  --border-color: #504945;
  --code-bg: #1d2021;
}

/* SECTION: Mobile Responsiveness */
@media (max-width: 768px) {
  .timeline-container::before {
    left: 19px;
  }

  .timeline-left {
    display: none;
  }

  .timeline-date-mobile {
    display: block;
  }

  .timeline-excerpt {
    display: none;
  }

  .timeline-title {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
  }

  .timeline-marker {
    order: -1;
    width: 40px;
    margin-right: 1rem;
    margin-left: 0;
    margin-top: 1.4rem;
    flex-shrink: 0;
  }

  .icon-position-right .timeline-container::before {
    left: 19px;
    right: auto;
  }

  .kg-bookmark-container {
    flex-direction: column;
  }

  .kg-bookmark-thumbnail {
    min-width: 100%;
    max-height: 200px;
  }

  .kg-bookmark-thumbnail img {
    position: relative;
  }
}

/* SECTION: Timeline Entry Animations */
.timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .timeline-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}