/* ==========================================================================
   Aqsara Ghost Theme — screen.css
   ========================================================================== */

/* --- Design Tokens --- */
:root {
  --font-headline:    'Newsreader', Georgia, serif;
  --font-story-title: 'Merriweather', Georgia, serif;
  --font-body:        'Literata', Georgia, serif;
  --color-primary:              #00daf3;
  --color-on-surface:           #e4e1e6;
  --color-on-surface-variant:   #c4c7c7;
  --color-on-tertiary:          #7d7d7d;
  --color-bg:                   #131316;
  --color-surface:              #1f1f22;
  --color-surface-low:          #1b1b1e;
  --color-surface-high:         #2a2a2d;
  --color-surface-lowest:       #0e0e11;
  --color-outline:              #444748;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--color-bg);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background-color: var(--color-primary); color: #000; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ol, ul { list-style: none; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.nav-inner {
  padding: 1.5rem 3rem;
  display: flex;
  align-items: center;
  background: transparent;
  backdrop-filter: blur(4px);
}
.nav-left  { flex: 1; }
.nav-center { flex: none; }
.nav-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; }

.site-logo {
  font-family: var(--font-story-title);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  display: block;
}
.site-logo img { height: 1.75rem; width: auto; }

.nav-icon-btn { color: var(--color-on-surface-variant); transition: color 0.3s; line-height: 1; }
.nav-icon-btn:hover { color: #fff; }

.site-header.post-header .nav-inner {
  background: rgba(9,9,11,0.7);
  backdrop-filter: blur(20px);
}

/* ==========================================================================
   HOMEPAGE — STORY FEED
   ========================================================================== */
.story-feed { display: block; }

.story-section {
  position: relative;
  height: 550px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}

.story-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.story-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: transform 0.7s ease;
}
.story-bg-empty {
  width: 100%;
  height: 100%;
  background: #1b1b1e;
}
.story-section:hover .story-bg img { transform: scale(1.05); }

.story-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-bg) 0%, rgba(19,19,22,0.6) 60%, transparent 100%);
}

.story-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 3rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.story-index-wrap { margin-bottom: 1rem; }
.story-index {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 4rem;
  color: var(--color-on-surface);
  opacity: 0;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}

.story-meta { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
.story-tag {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
}
.story-title {
  font-family: var(--font-story-title);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-on-surface);
  margin-bottom: 1rem;
  max-width: 700px;
}
.story-excerpt {
  font-family: var(--font-body);
  color: var(--color-on-surface-variant);
  font-size: 0.9rem;
  max-width: 560px;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
.read-story-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 1.5rem;
  transition: background 0.3s, border-color 0.3s;
}
.read-story-btn:hover { background: rgba(255,255,255,0.1); }
.read-story-btn .material-symbols-outlined { font-size: 14px; transition: transform 0.2s; }
.read-story-btn:hover .material-symbols-outlined { transform: translateX(4px); }

/* ==========================================================================
   ARCHIVE HEADERS (author.hbs / tag.hbs)
   ========================================================================== */
.archive-main { padding-top: 6rem; }

.archive-header {
  padding: 6rem 3rem 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}
.archive-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.archive-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #f4f4f5;
  margin-bottom: 1.5rem;
}
.archive-bio {
  font-family: var(--font-body);
  color: var(--color-on-surface-variant);
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.7;
}

.author-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 2rem;
  border: 1px solid rgba(0,218,243,0.3);
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

.tag-icon { width: 4rem; height: 4rem; margin: 0 auto 2rem; overflow: hidden; }
.tag-icon img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

/* ==========================================================================
   SINGLE POST — HERO
   ========================================================================== */
.sp-hero {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}
.sp-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.5);
}
.sp-hero__fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #1b1b1e, #0e0e11);
}
.sp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #131316 0%, transparent 100%);
}
.sp-hero__content {
  position: absolute;
  bottom: 3rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2rem;
}
.sp-hero__tag {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 1rem;
}
.sp-hero__title {
  font-family: var(--font-story-title);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #f4f4f5;
  max-width: 680px;
}

/* ==========================================================================
   SINGLE POST — ARTICLE
   ========================================================================== */
.sp-article {
  max-width: 56rem;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}
.sp-article__inner { width: 100%; }

.sp-subtitle {
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #f4f4f5;
  line-height: 1.2;
  margin-bottom: 3rem;
  max-width: 42rem;
}

.sp-content {
  color: #c4c7c7;
  line-height: 1.8;
  font-size: 1.1875rem;
}
.sp-content > p,
.sp-content > .kg-card,
.sp-content > blockquote,
.sp-content > figure { margin-bottom: 2rem; }

.sp-drop-cap > p:first-of-type::first-letter {
  float: left;
  font-size: 5.5rem;
  line-height: 0.8;
  padding-top: 4px;
  padding-right: 12px;
  font-family: var(--font-headline);
  color: var(--color-primary);
}

.sp-content blockquote {
  position: relative;
  margin: 4rem 0;
  padding: 3rem 2rem;
  border-left: 0.5px solid rgba(0,218,243,0.4);
  background: #1b1b1e;
}
.sp-content blockquote::before {
  content: '\e244';
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 4rem;
  line-height: 1;
  color: rgba(0,218,243,0.2);
  pointer-events: none;
}
.sp-content blockquote p {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 1.875rem;
  color: #f4f4f5;
  line-height: 1.35;
  margin: 0;
}
.sp-content blockquote cite,
.sp-content blockquote footer {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,218,243,0.4);
  font-style: normal;
}

.sp-content figure { margin: 4rem 0; }
.sp-content figure .sp-fig-wrap { aspect-ratio: 16/9; width: 100%; background: #2a2a2d; overflow: hidden; }
.sp-content figure img,
.kg-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  transition: mix-blend-mode 0.7s ease;
}
.sp-content figure:hover img,
.kg-image-card:hover img { mix-blend-mode: normal; }

.sp-content figcaption,
.kg-image-card figcaption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7d7d7d;
}
.sp-content figcaption::before,
.kg-image-card figcaption::before {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 2rem;
  height: 0.5px;
  background: rgba(0,218,243,0.4);
}

.sp-content h2 { font-family: var(--font-headline); font-size: 2rem; color: #f4f4f5; margin: 3rem 0 1rem; line-height: 1.2; }
.sp-content h3 { font-family: var(--font-headline); font-size: 1.5rem; color: #f4f4f5; margin: 2.5rem 0 0.75rem; }
.sp-content a { color: var(--color-primary); border-bottom: 1px solid rgba(0,218,243,0.3); transition: border-color 0.2s; }
.sp-content a:hover { border-color: var(--color-primary); }
.sp-content ul, .sp-content ol { list-style: revert; padding-left: 1.5rem; margin-bottom: 2rem; }
.sp-content li { margin-bottom: 0.5rem; }
.sp-content hr { border: none; border-top: 1px solid var(--color-outline); margin: 3rem 0; }
.sp-content .kg-card { margin: 3rem 0; }

.sp-meta {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-outline);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}
.sp-meta__label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7d7d7d;
  margin-bottom: 0.5rem;
}
.sp-meta__value {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 1.25rem;
  color: #f4f4f5;
}

.sp-actions {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.sp-actions__icons { display: flex; gap: 1rem; }
.sp-icon {
  color: var(--color-primary);
  cursor: pointer;
  font-size: 1.5rem;
  transition: transform 0.2s;
  padding: 0;
  background: none;
  border: none;
  line-height: 1;
}
.sp-icon:hover { transform: scale(1.1); }

.sp-tags { display: flex; flex-wrap: wrap; gap: 1rem; }
.sp-tag {
  display: inline-block;
  padding: 0.25rem 1rem;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  border: 1px solid rgba(0,218,243,0.2);
  transition: background 0.2s;
}
.sp-tag:hover { background: rgba(0,218,243,0.1); }

/* ==========================================================================
   NEXT POST CTA
   ========================================================================== */
.sp-next {
  background: #0e0e11;
  padding: 8rem 2.5rem;
  text-align: center;
}
.sp-next__inner { max-width: 56rem; margin: 0 auto; }
.sp-next__label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 2rem;
}
.sp-next__link { display: block; }
.sp-next__title {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(2rem, 5vw, 4rem);
  color: #f4f4f5;
  margin-bottom: 1.5rem;
  transition: color 0.3s;
  line-height: 1.1;
}
.sp-next__link:hover .sp-next__title { color: var(--color-primary); }
.sp-next__sub {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7d7d7d;
}

/* ==========================================================================
   STATIC PAGE
   ========================================================================== */
.page-main { padding-top: 6rem; }

.page-feature { margin-bottom: 3rem; }
.page-feature img { width: 100%; object-fit: cover; max-height: 500px; mix-blend-mode: luminosity; }

.post-article { max-width: 56rem; margin: 0 auto; padding: 4rem 2rem 6rem; }
.post-article-inner {}

.page-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #f4f4f5;
  margin-bottom: 2rem;
}
.post-subtitle {
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--color-on-surface-variant);
  line-height: 1.3;
  margin-bottom: 2.5rem;
}
.post-content { color: var(--color-on-surface-variant); line-height: 1.8; font-size: 1.1875rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: #09090b;
  display: flex;
  justify-content: center;
  padding: 3rem 2.5rem;
  margin-top: 5rem;
}
.footer-copyright {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #3f3f46;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination {
  padding: 4rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.pagination-count {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

/* ==========================================================================
   ERROR PAGES
   ========================================================================== */
.error-page {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.error-code {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 8rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.4;
}
.error-title { font-family: var(--font-headline); font-size: 2rem; color: #f4f4f5; margin: 1rem 0; }
.error-body { color: var(--color-on-surface-variant); margin-bottom: 2rem; }

/* ==========================================================================
   GHOST KOENIG — CARD WIDTHS
   ========================================================================== */
.kg-width-wide {
  position: relative;
  width: 85vw;
  min-width: 100%;
  margin: 0 auto;
  transform: translateX(calc(50% - 42.5vw));
}
.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ==========================================================================
   GHOST KOENIG — CARD STYLES
   ========================================================================== */

/* Image */
.kg-image-card { margin: 3rem 0; }
.kg-image-card img { width: 100%; height: auto; display: block; }
.kg-image-card figcaption {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-tertiary);
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Gallery */
.kg-gallery-card { margin: 3rem 0; }
.kg-gallery-container { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kg-gallery-row { display: flex; gap: 0.5rem; width: 100%; }
.kg-gallery-image { flex: 1; overflow: hidden; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Embed / Video */
.kg-embed-card { margin: 3rem 0; }
.kg-embed-card iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: none;
}
.kg-embed-card video { width: 100%; height: auto; display: block; border: none; }
.kg-video-card { margin: 3rem 0; }
.kg-video-card video { width: 100%; display: block; }

/* Bookmark */
.kg-bookmark-card { margin: 3rem 0; }
.kg-bookmark-container {
  display: flex;
  border: 1px solid var(--color-outline);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-on-surface);
  transition: background 0.2s;
}
.kg-bookmark-container:hover { background: var(--color-surface-high); }
.kg-bookmark-content { padding: 1.5rem; flex: 1; }
.kg-bookmark-title { font-family: var(--font-body); font-weight: 600; margin-bottom: 0.5rem; color: #f4f4f5; }
.kg-bookmark-description { font-family: var(--font-body); font-size: 0.85rem; color: var(--color-on-surface-variant); margin-bottom: 1rem; }
.kg-bookmark-metadata { display: flex; align-items: center; gap: 0.5rem; }
.kg-bookmark-icon { width: 1rem; height: 1rem; }
.kg-bookmark-author, .kg-bookmark-publisher { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-on-tertiary); }
.kg-bookmark-thumbnail { width: 8rem; flex-shrink: 0; overflow: hidden; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* Toggle */
.kg-toggle-card { margin: 2rem 0; border: 1px solid var(--color-outline); }
.kg-toggle-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  color: #f4f4f5;
}
.kg-toggle-content { padding: 0 1.5rem 1rem; color: var(--color-on-surface-variant); }

/* Callout */
.kg-callout-card {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  display: flex;
  gap: 1rem;
}
.kg-callout-emoji { font-size: 1.5rem; flex-shrink: 0; }
.kg-callout-text { color: var(--color-on-surface-variant); font-family: var(--font-body); }

/* Audio */
.kg-audio-card { margin: 2rem 0; }
.kg-audio-card audio { width: 100%; }

/* File */
.kg-file-card { margin: 2rem 0; }
.kg-file-card-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--color-outline);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-on-surface);
  transition: background 0.2s;
}
.kg-file-card-container:hover { background: var(--color-surface-high); }
.kg-file-card-title { font-family: var(--font-body); font-weight: 600; color: #f4f4f5; }
.kg-file-card-caption { font-family: var(--font-body); font-size: 0.8rem; color: var(--color-on-surface-variant); }

/* Product */
.kg-product-card { margin: 2rem 0; padding: 2rem; background: var(--color-surface); border: 1px solid var(--color-outline); }
.kg-product-card-image { width: 100%; margin-bottom: 1rem; }
.kg-product-card-title { font-family: var(--font-headline); font-size: 1.5rem; color: #f4f4f5; margin-bottom: 0.5rem; }
.kg-product-card-description { color: var(--color-on-surface-variant); margin-bottom: 1rem; }
.kg-product-card-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: #000;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.kg-product-card-button:hover { opacity: 0.85; }

/* Header card */
.kg-header-card { margin: 3rem 0; padding: 6rem 2rem; text-align: center; background: var(--color-surface-lowest); }
.kg-header-card-title { font-family: var(--font-headline); font-style: italic; font-size: clamp(2rem, 5vw, 4rem); color: #f4f4f5; margin-bottom: 1rem; }
.kg-header-card-subtitle { color: var(--color-on-surface-variant); margin-bottom: 2rem; }
.kg-header-card-button { display: inline-block; padding: 0.75rem 2rem; background: var(--color-primary); color: #000; font-family: var(--font-body); font-weight: 600; text-decoration: none; }

/* Button */
.kg-button-card { margin: 2rem 0; text-align: center; }
.kg-btn { display: inline-block; padding: 0.75rem 2rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
.kg-btn-accent { background: var(--color-primary); color: #000; }
.kg-btn-accent:hover { opacity: 0.85; }

/* NFT */
.kg-nft-card { margin: 2rem 0; }
.kg-nft-link { display: block; border: 1px solid var(--color-outline); text-decoration: none; }
.kg-nft-image img { width: 100%; display: block; }
.kg-nft-metadata { padding: 1rem 1.5rem; background: var(--color-surface); }
.kg-nft-title { font-family: var(--font-body); font-weight: 600; color: #f4f4f5; }

/* HR / Code */
.kg-divider { margin: 3rem 0; border: none; border-top: 1px solid var(--color-outline); }
.kg-code-card { margin: 2rem 0; }
.kg-code-card pre { background: var(--color-surface-low); padding: 1.5rem; overflow-x: auto; border: 1px solid var(--color-outline); }
.kg-code-card code { font-family: 'Courier New', monospace; font-size: 0.875rem; color: var(--color-primary); }

/* ==========================================================================
   GHOST — MEMBERS / SUBSCRIPTION
   ========================================================================== */
.gh-post-upgrade-cta {
  margin: 3rem 0;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--color-surface-low);
  border: 1px solid rgba(0,218,243,0.2);
}
.gh-post-upgrade-cta h2 { font-family: var(--font-headline); font-style: italic; font-size: 2rem; color: #f4f4f5; margin-bottom: 1rem; }
.gh-post-upgrade-cta p { color: var(--color-on-surface-variant); margin-bottom: 1.5rem; }
.gh-post-upgrade-cta a {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--color-primary);
  color: #000;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 768px) {
  .story-index { font-size: 5rem; }
  .story-content { flex-direction: row; align-items: flex-end; padding: 0 3rem 4rem; }
  .story-index-wrap { flex: none; width: 8rem; margin-bottom: 0; }
  .story-body { flex-grow: 1; }
  .sp-hero { height: 700px; }
  .sp-hero__title { font-size: clamp(2rem, 4vw, 2.8rem); }
}

@media (max-width: 767px) {
  .nav-inner { padding: 1.5rem; }
  .story-content { padding: 0 1.5rem 3rem; }
  .sp-hero { height: 480px; }
  .sp-hero__title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .sp-article { padding: 2rem 1.5rem 4rem; }
  .sp-subtitle { font-size: 1.4rem; }
  .sp-meta { grid-template-columns: 1fr; gap: 1.5rem; }
  .sp-next { padding: 5rem 1.5rem; }
  .site-footer { padding: 2.5rem 1.5rem; }
  .archive-header { padding: 4rem 1.5rem 3rem; }
  .pagination { padding: 3rem 1.5rem; }
}

/* ==========================================================================
   WORDPRESS — NAV DRAWER
   ========================================================================== */
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 280px;
  background: #09090b;
  border-left: 1px solid var(--color-outline);
  z-index: 100;
  padding: 5rem 2rem 2rem;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.3s ease, visibility 0.3s;
}
.nav-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.nav-menu { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.nav-menu li a {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s;
}
.nav-menu li a:hover { color: #fff; }

/* ==========================================================================
   WORDPRESS — BLOCK EDITOR ALIGNMENT
   ========================================================================== */
.sp-content .alignleft   { float: left;  margin: 0 2rem 1rem 0; }
.sp-content .alignright  { float: right; margin: 0 0 1rem 2rem; }
.sp-content .aligncenter { display: block; margin: 2rem auto; }
.sp-content .alignwide   { width: 85vw; max-width: 85vw; margin-left: calc(50% - 42.5vw); }
.sp-content .alignfull   { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption-text { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #7d7d7d; margin-top: 0.5rem; }
.wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ==========================================================================
   WORDPRESS — SEARCH FORM
   ========================================================================== */
.search-form { display: flex; gap: 0.5rem; max-width: 32rem; margin: 2rem auto; }
.search-field {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-outline);
  color: var(--color-on-surface);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
.search-field:focus { border-color: var(--color-primary); }
.search-submit {
  background: var(--color-primary);
  color: #000;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.search-submit:hover { opacity: 0.85; }

/* ==========================================================================
   WORDPRESS — COMMENTS
   ========================================================================== */
.comments-area { max-width: 56rem; margin: 0 auto; padding: 4rem 2rem; border-top: 1px solid var(--color-outline); }
.comments-title { font-family: var(--font-headline); font-style: italic; font-size: 2rem; color: #f4f4f5; margin-bottom: 2rem; }
.comment-list { list-style: none; }
.comment { padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.comment-author .fn { font-family: var(--font-body); font-weight: 600; color: #f4f4f5; }
.comment-metadata { font-family: var(--font-body); font-size: 0.8rem; color: var(--color-on-tertiary); margin-bottom: 0.75rem; }
.comment-metadata a { color: var(--color-on-tertiary); }
.comment-content { color: var(--color-on-surface-variant); line-height: 1.7; }
.reply { margin-top: 0.5rem; }
.comment-reply-link { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); }
.comment-respond { margin-top: 3rem; }
.comment-reply-title { font-family: var(--font-headline); font-style: italic; font-size: 1.75rem; color: #f4f4f5; margin-bottom: 1.5rem; }
.comment-form label { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-on-tertiary); margin-bottom: 0.4rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-outline);
  color: var(--color-on-surface);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 1rem;
  resize: vertical;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-primary); }
.form-submit .submit {
  background: var(--color-primary);
  color: #000;
  padding: 0.75rem 2rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.form-submit .submit:hover { opacity: 0.85; }