:root {
  --bg: #050505;
  --fg: #f4f4f4;
  --muted: #b6b6b6;
  --line: #1a1a1a;
  --accent: #00ff9c;
  --accent-2: #5ef0c1;
}

/* Font-face declarations with font-display: swap for faster rendering */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: local('Inter');
}

@font-face {
  font-family: 'Press Start 2P';
  font-display: swap;
  src: local('Press Start 2P');
}

@font-face {
  font-family: 'Space Mono';
  font-display: swap;
  src: local('Space Mono');
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  /* Prevent layout shift from font loading */
  text-rendering: optimizeSpeed;
}

.page {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  overflow-x: hidden;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr 1fr auto;
  grid-template-areas:
    "logo logo logo tagline tagline tagline tagline tagline tagline nav nav nav"
    "portrait portrait portrait portrait hero hero hero hero hero hero statement statement"
    "portrait portrait portrait portrait hero hero hero hero hero hero statement statement"
    "track track track track battery battery battery battery fibs fibs fibs fibs";
  border: 1px solid var(--fg);
  background: linear-gradient(135deg, #080808, #050505 45%, #080808);
  min-height: calc(100vh - 24px);
  max-width: 100%;
}

.tile {
  border: 1px solid var(--fg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  word-break: break-word;
  min-width: 0;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line);
  pointer-events: none;
  opacity: 0.4;
}

.logo {
  grid-area: logo;
  background: #0b0b0b;
  overflow: visible;
}

.logo-mark {
  font-family: "Press Start 2P", monospace;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo-main {
  color: var(--fg);
}

.logo-dot {
  color: var(--accent);
}

.logo-sub {
  color: var(--fg);
}

.tagline {
  grid-area: tagline;
  font-size: 18px;
  line-height: 1.6;
  font-family: "Space Mono", monospace;
}

.nav {
  grid-area: nav;
  gap: 8px;
  align-items: flex-start;
}

.nav a {
  color: var(--fg);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid var(--fg);
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav a:hover {
  background: var(--accent);
  color: #000;
}

.portrait {
  grid-area: portrait;
  align-items: center;
}

.portrait-img {
  max-width: 180px;
  max-height: 220px;
  width: auto;
  height: auto;
  border: 2px solid var(--fg);
  filter: drop-shadow(0 0 12px rgba(0, 255, 156, 0.15));
  object-fit: contain;
}

.hero {
  grid-area: hero;
  align-items: center;
  text-align: center;
  background: radial-gradient(circle at 30% 30%, rgba(0, 255, 156, 0.05), transparent 45%),
    radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.04), transparent 40%),
    #0a0a0a;
}

.cursor-row {
  display: flex;
  gap: 16px;
  font-size: 24px;
  color: var(--accent);
}

.hero h1 {
  margin: 0;
  font-size: clamp(22px, 4vw, 44px);
  letter-spacing: 0.02em;
  word-break: break-word;
}

.statement {
  grid-area: statement;
  justify-content: flex-end;
  font-style: italic;
  font-size: 16px;
}

.promise {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.promise h3 {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.track {
  grid-area: track;
}

.battery {
  grid-area: battery;
}

.fibs {
  grid-area: fibs;
}

.cross {
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
}

.feed {
  grid-area: feed;
  gap: 18px;
}

.feed-header {
  display: flex;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 20px;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  text-decoration: none;
}

.pill.hollow {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
}

.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.feed-card {
  border: 1px solid var(--fg);
  padding: 18px;
  background: #0c0c0c;
  display: grid;
  gap: 8px;
  min-height: 180px;
  position: relative;
  overflow: hidden;
}

.link-card {
  color: inherit;
  text-decoration: none;
  display: block;
  height: 100%;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.link-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.feed-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--line);
  opacity: 0.4;
  pointer-events: none;
}

.feed-card.bright {
  background: var(--accent);
  color: #000;
}

.feed-card.bright .muted {
  color: #0f402b;
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

.feed-card h4 {
  margin: 0;
  font-size: 18px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px dashed currentColor;
  font-size: 12px;
  text-transform: uppercase;
  width: fit-content;
}

.footer {
  border: 1px solid var(--fg);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Space Mono", monospace;
}

.muted {
  color: var(--muted);
}

.whisper {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.accent {
  color: var(--accent);
  text-decoration: underline;
}

.eyebrow,
.muted,
.whisper {
  margin: 0;
}

.nav,
.promise,
.logo,
.tagline,
.statement,
.hero,
.portrait {
  position: relative;
}

.tile h1,
.tile h3 {
  margin: 0;
}

.content-page {
  max-width: 1160px;
  margin: 0 auto 32px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--fg);
  padding: 18px;
  background: #0b0b0b;
}

.content-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.content-nav a {
  color: var(--fg);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid var(--fg);
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, color 0.2s ease;
}

.content-nav a:hover,
.content-nav a[aria-current="page"] {
  background: var(--accent);
  color: #000;
}

.content-hero {
  background: radial-gradient(circle at 18% 20%, rgba(0, 255, 156, 0.05), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.04), transparent 40%),
    #0a0a0a;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.section-heading h2,
.section-heading h3 {
  margin: 0;
}

.heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.project-grid {
  display: grid;
  gap: 12px;
}

.project-group {
  gap: 14px;
  background: #0b0b0b;
}

.project-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  align-items: start;
}

.view-all-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.view-all-link:hover {
  color: var(--accent);
}

.back-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--accent);
}

.project-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.project-detail-grid .feed-card {
  min-height: auto;
}

.search-bar {
  margin-bottom: 16px;
}

.search-bar input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--fg);
  border-radius: 4px;
  background: #0a0a0a;
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-bar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 255, 156, 0.15);
}

.search-bar input::placeholder {
  color: var(--muted);
}

.mode-toggle,
.sort-toggle {
  display: flex;
  gap: 4px;
  background: #0a0a0a;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.mode-btn,
.sort-btn {
  padding: 6px 12px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.mode-btn:hover,
.sort-btn:hover {
  color: var(--fg);
}

.mode-btn.active,
.sort-btn.active {
  background: var(--accent);
  color: #000;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.category-pill {
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid var(--fg);
  border-radius: 16px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

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

.category-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.category-badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 12px;
  background: var(--accent);
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.form-tile {
  gap: 16px;
}

/* Admin locked state */
.admin-locked {
  position: relative;
  background: rgba(5, 5, 5, 0.85);
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 24px;
}

.admin-locked .locked-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.admin-locked .lock-icon {
  font-size: 2rem;
  opacity: 0.5;
}

.admin-locked .locked-message p {
  color: var(--muted);
  margin: 0;
}

.admin-sections.locked {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

.admin-sections.unlocked {
  opacity: 1;
  pointer-events: auto;
}

.form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}

.form-grid input,
.form-grid textarea,
.form-grid select {
  padding: 10px 12px;
  border: 1px solid var(--fg);
  border-radius: 4px;
  background: #0a0a0a;
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.form-grid textarea {
  min-height: 100px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

button {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--fg);
  background: var(--accent);
  color: #000;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

button.secondary {
  background: transparent;
  color: var(--fg);
}

.preview-list {
  display: grid;
  gap: 8px;
}

.preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--fg);
  padding: 10px 12px;
  background: #0a0a0a;
}

.preview-item small {
  color: var(--muted);
}

.preview-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.preview-actions button {
  padding: 6px 8px;
  font-size: 11px;
}

.preview-sublist {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}

/* Episodes Grid (Speaking Page) */
.episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.episode-card {
  border: 1px solid var(--fg);
  background: #0a0a0a;
  overflow: hidden;
}

.episode-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #111;
}

.episode-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.episode-embed.spotify {
  padding-bottom: 152px; /* Fixed height for Spotify */
}

.episode-info {
  padding: 16px;
}

.episode-info h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.episode-info .muted {
  font-size: 13px;
  line-height: 1.5;
}

.episode-meta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Hire Page Teaser */
.hire-teaser {
  text-align: center;
  padding: 40px 24px;
}

.teaser-content h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

.teaser-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin: 40px 0;
  text-align: left;
}

.teaser-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--line);
  background: #0a0a0a;
}

.teaser-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.teaser-point p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
}

.teaser-cta {
  margin-top: 40px;
}

.teaser-cta .pill {
  margin-top: 16px;
  display: inline-block;
}

@media (max-width: 1024px) {
  .page {
    padding: 10px;
    gap: 10px;
  }

  .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto 1fr 1fr auto;
    grid-template-areas:
      "logo logo logo tagline tagline tagline"
      "nav nav nav nav nav nav"
      "portrait portrait hero hero hero hero"
      "portrait portrait hero hero statement statement"
      "track track battery battery fibs fibs";
    min-height: calc(100vh - 20px);
  }

  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tile {
    padding: 14px;
  }

  .hero h1 {
    font-size: clamp(18px, 3.5vw, 32px);
  }

  .promise h3 {
    font-size: 14px;
  }

  .promise .muted {
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  .page {
    padding: 10px;
    gap: 10px;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "logo tagline"
      "nav nav"
      "hero hero"
      "portrait portrait"
      "statement statement"
      "track battery"
      "fibs fibs";
    min-height: auto;
  }

  .tile {
    padding: 16px;
  }

  .logo-mark {
    font-size: 12px;
  }

  .nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .portrait {
    align-items: center;
    justify-content: center;
  }

  .portrait-img {
    display: block;
    margin: 0 auto;
  }

  .content-header {
    align-items: flex-start;
  }
}

/* ========================================
   Article Page Styles (SEO-generated pages)
   ======================================== */

body[data-page="article"] .page {
  padding: 24px;
}

.article-content {
  background: linear-gradient(135deg, rgba(0, 255, 156, 0.02), transparent);
}

.article-header {
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}

.article-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 12px 0 16px;
  font-weight: 800;
}

.article-body {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--fg);
}

.article-body p {
  margin-bottom: 1.5em;
}

.article-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.external-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}

.external-link:hover {
  opacity: 0.8;
}

.related-section {
  background: rgba(255, 255, 255, 0.02);
}

.related-section h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.related-section a {
  color: var(--accent);
  text-decoration: none;
}

.related-section a:hover {
  opacity: 0.8;
}

/* ========================================
   Process Page - Thought Process & Mind Maps
   ======================================== */

.process-project-section {
  margin-bottom: 32px;
}

.process-project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.process-project-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.process-topic-card {
  background: linear-gradient(135deg, rgba(0, 255, 156, 0.03), transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
}

.process-topic-card.used {
  border-left: 3px solid var(--accent);
}

.process-topic-card.available {
  border-left: 3px solid var(--muted);
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.topic-header h3 {
  margin: 0;
  font-size: 1.25rem;
  flex: 1;
  min-width: 200px;
}

.topic-status {
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

.topic-status.used {
  background: rgba(0, 255, 156, 0.15);
  color: var(--accent);
}

.topic-status.available {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.topic-status a {
  color: var(--accent);
  text-decoration: none;
}

.topic-status a:hover {
  text-decoration: underline;
}

/* Mind Map Styles */
.mind-map {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.mind-map-hook {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}

.mind-map-hook strong {
  color: var(--accent);
}

.mind-map-sections {
  display: grid;
  gap: 16px;
}

.mind-map-section {
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}

.mind-map-section h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--fg);
}

.mind-map-section ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
}

.mind-map-section li {
  margin-bottom: 6px;
  color: var(--muted);
  line-height: 1.5;
}

.mind-map-conclusion {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 1.05rem;
  line-height: 1.6;
}

.mind-map-conclusion strong {
  color: var(--accent);
}

/* Source Tags */
.topic-sources {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9rem;
}

.topic-sources strong {
  color: var(--muted);
}

.source-link,
.topic-sources a.source-link,
a.source-link {
  color: var(--accent) !important;
  text-decoration: none;
  font-weight: 600;
}

.source-link:hover,
.topic-sources a.source-link:hover,
a.source-link:hover {
  text-decoration: underline;
  color: var(--accent) !important;
}

.source-tag {
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--fg);
}

/* Responsive */
@media (max-width: 720px) {
  .process-topic-card {
    padding: 16px;
  }

  .topic-header {
    flex-direction: column;
    gap: 12px;
  }

  .topic-header h3 {
    font-size: 1.1rem;
  }

  .mind-map {
    padding: 16px;
  }

  .mind-map-section {
    padding-left: 12px;
  }
}