:root {
  --paper-ivory: #fff8ea;
  --paper-warm: #f6ebd2;
  --paper-clay: #efe2c4;
  --paper-shadow: #d8cdb1;
  --ink-soft: #2f323a;
  --ink-muted: #555b66;
  --brand-soft: #727886;
  --brand-soft-light: #d9dde4;
  --cta-coral: #4a4f5d;
  --cta-coral-hover: #3f434f;
}

body {
  background-image: linear-gradient(180deg, #f5f5f6 0%, #eceff4 100%);
}

#navbar .nav-link,
#navbar .mobile-nav-link,
#mobile-menu-btn {
  color: #4f5664;
}

#navbar .nav-link:hover,
#navbar .mobile-nav-link:hover {
  color: #2f323a;
  background-color: rgba(148, 152, 165, 0.24);
}

#mobile-menu {
  background: rgba(242, 243, 247, 0.98);
  border-color: #d6dae2;
}

.profile-menu {
  position: relative;
}

.profile-trigger {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid #c9cfdb;
  background: linear-gradient(145deg, #fcfdff, #e7ebf5);
  color: #3d4453;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 220px;
  border-radius: 0.9rem;
  border: 1px solid #d2d8e6;
  background: rgba(249, 250, 255, 0.98);
  box-shadow: 0 12px 24px rgba(33, 39, 55, 0.18);
  padding: 0.65rem;
  z-index: 72;
}

.profile-menu:hover .profile-dropdown {
  display: block !important;
}

.profile-menu-btn {
  width: 100%;
  border: 1px solid #d6dcea;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.92);
  color: #424a5a;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  padding: 0.48rem 0.62rem;
}

.profile-menu-btn:hover {
  background: rgba(235, 240, 248, 0.92);
}

.profile-menu-btn.danger {
  color: #8e3a33;
  border-color: #d8b8b3;
  background: rgba(251, 243, 242, 0.92);
}

.profile-user-meta {
  border: 1px solid #d8deeb;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.94);
  padding: 0.55rem 0.6rem;
}

.profile-user-name {
  font-weight: 700;
  color: #2e3544;
  font-size: 0.86rem;
}

.profile-user-email {
  margin-top: 0.15rem;
  color: #5a6372;
  font-size: 0.75rem;
}

.entry-engagement-host {
  margin-top: 0.8rem;
}

.entry-engagement {
  border: 1px solid #d7ddeb;
  border-radius: 0.85rem;
  background: rgba(249, 251, 255, 0.95);
  padding: 0.68rem;
}

.entry-engagement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.entry-engagement-btn {
  border: 1px solid #d3d9e5;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.94);
  color: #475062;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.36rem 0.52rem;
}

.entry-engagement-btn.active {
  border-color: #9facbe;
  background: rgba(221, 229, 243, 0.9);
  color: #2f3748;
}

.entry-engagement-note {
  margin-top: 0.45rem;
  color: #596273;
  font-size: 0.75rem;
  line-height: 1.35;
}

.entry-comments {
  margin-top: 0.55rem;
  border-top: 1px solid #d8deeb;
  padding-top: 0.55rem;
}

.entry-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 220px;
  overflow: auto;
  padding-right: 0.2rem;
}

.entry-comment {
  border: 1px solid #d5dce9;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 0.48rem 0.56rem;
}

.entry-comment-meta {
  font-size: 0.7rem;
  color: #677081;
  margin-bottom: 0.2rem;
}

.entry-comment-body {
  font-size: 0.8rem;
  color: #434b5c;
  line-height: 1.35;
}

.entry-comment-form {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.entry-comment-input {
  width: 100%;
  border-radius: 0.6rem;
  border: 1px solid #d4dae7;
  background: rgba(255, 255, 255, 0.95);
  color: #2f3544;
  font-size: 0.8rem;
  padding: 0.45rem 0.52rem;
  min-height: 66px;
  resize: vertical;
}

.entry-comment-submit {
  align-self: flex-start;
}

.user-workspace {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(17, 22, 31, 0.42);
  padding: 1rem;
}

.user-workspace-shell {
  margin: 0 auto;
  max-width: 1120px;
  height: calc(100vh - 2rem);
  border: 1px solid #cdd5e4;
  border-radius: 1rem;
  background: rgba(245, 248, 253, 0.98);
  box-shadow: 0 18px 36px rgba(20, 25, 36, 0.35);
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  overflow: hidden;
}

.user-workspace-sidebar {
  border-right: 1px solid #d1d8e7;
  background: rgba(242, 246, 253, 0.96);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.user-workspace-profile {
  border: 1px solid #d7ddec;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.user-workspace-avatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid #bfc9dc;
  background: linear-gradient(145deg, #f7faff, #e3e9f5);
  color: #384054;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.user-workspace-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: #2f3646;
}

.user-workspace-email {
  margin-top: 0.15rem;
  font-size: 0.73rem;
  color: #5a6271;
}

.user-workspace-nav {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.workspace-nav-btn {
  width: 100%;
  border: 1px solid #d3d9e5;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.95);
  color: #4a5262;
  font-size: 0.83rem;
  font-weight: 700;
  text-align: left;
  padding: 0.5rem 0.58rem;
}

.workspace-nav-btn.active {
  border-color: #98a7be;
  background: rgba(217, 227, 243, 0.95);
  color: #313a4b;
}

.user-workspace-content {
  padding: 0.9rem;
  overflow: auto;
}

.user-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}

.user-workspace-title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 1.38rem;
  color: #2f3646;
}

.workspace-tab-heading {
  margin: 0 0 0.45rem;
  font-size: 1.03rem;
  font-weight: 800;
  color: #344055;
}

.workspace-tab-copy {
  margin: 0;
  color: #596273;
  font-size: 0.88rem;
  line-height: 1.45;
}

.workspace-list {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.workspace-list-item {
  border: 1px solid #d6dcea;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 0.6rem;
}

.workspace-list-meta {
  font-size: 0.72rem;
  color: #637085;
  margin-bottom: 0.2rem;
}

.workspace-list-title {
  color: #344055;
  font-size: 0.88rem;
  font-weight: 700;
}

.workspace-list-summary {
  margin-top: 0.28rem;
  color: #566071;
  font-size: 0.8rem;
  line-height: 1.35;
}

.workspace-settings-grid {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.workspace-settings-card {
  border: 1px solid #d3dbe9;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.workspace-settings-card span {
  font-size: 0.72rem;
  color: #5f6777;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.workspace-settings-card strong {
  font-size: 0.86rem;
  color: #344055;
}

.workspace-actions {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.workspace-note {
  margin-top: 0.6rem;
  font-size: 0.76rem;
  color: #5e6776;
}

.site-notice {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 110;
  max-width: min(340px, calc(100vw - 2rem));
  border-radius: 0.7rem;
  border: 1px solid #2f3645;
  background: rgba(44, 52, 67, 0.96);
  color: #f5f7fa;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.58rem 0.68rem;
  box-shadow: 0 12px 24px rgba(15, 20, 29, 0.3);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-notice.visible {
  opacity: 1;
  transform: translateY(0);
}

a[data-disabled="true"] {
  opacity: 0.58;
}

.primary-btn,
.secondary-btn {
  border-radius: 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.45rem 0.72rem;
  border: 1px solid transparent;
}

.primary-btn {
  background: #4a4f5d;
  border-color: #4a4f5d;
  color: #f7f7f8;
}

.primary-btn:hover {
  background: #3f434f;
  border-color: #3f434f;
}

.secondary-btn {
  background: rgba(231, 233, 238, 0.95);
  border-color: #d6dae2;
  color: #4f5664;
}

.secondary-btn:hover {
  background: rgba(217, 221, 228, 0.95);
}

.maintenance-banner {
  position: sticky;
  top: 64px;
  z-index: 45;
  padding: 0.6rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.84rem;
  color: #fffaf0;
  background: linear-gradient(90deg, #6b3f36, #8e4f3f);
  border-bottom: 1px solid rgba(246, 221, 197, 0.35);
}

.hero-parchment {
  --spy-x: 50%;
  --spy-y: 42%;
}

.hero-parchment-gradient {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 246, 227, 0.55) 0%, transparent 52%),
    radial-gradient(circle at 82% 84%, rgba(206, 179, 132, 0.45) 0%, transparent 56%),
    linear-gradient(135deg, var(--paper-ivory) 0%, var(--paper-warm) 54%, var(--paper-clay) 100%);
}

.hero-parchment-grain {
  background-image:
    repeating-linear-gradient(0deg, rgba(89, 64, 39, 0.05) 0px, rgba(89, 64, 39, 0.05) 1px, transparent 2px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(93, 66, 40, 0.045) 0px, rgba(93, 66, 40, 0.045) 1px, transparent 3px, transparent 10px);
  opacity: 0.56;
}

.hero-artifacts {
  background-image:
    linear-gradient(130deg, rgba(98, 72, 45, 0.2), rgba(98, 72, 45, 0.08)),
    url('./assets/history-toile-cream-light-brown.jpg');
  background-size: cover, 480px 480px;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  mix-blend-mode: multiply;
  filter: sepia(0.78) saturate(0.64) contrast(1.1) brightness(0.92);
  opacity: 0.98;
}

.hero-hieroglyphics {
  background-image:
    linear-gradient(160deg, rgba(60, 42, 23, 0.16), rgba(31, 22, 12, 0.22)),
    url('./assets/hieroglyphics-wall.jpg');
  background-size: cover, cover;
  background-position: center, center;
  mix-blend-mode: multiply;
  filter: sepia(0.85) grayscale(0.22) saturate(0.66) contrast(1.14) brightness(0.66);
  opacity: 0.62;
}

#hero .bg-brand-600 {
  background-color: var(--cta-coral) !important;
}

#hero .hover\:bg-brand-500:hover {
  background-color: var(--cta-coral-hover) !important;
}

.hero-darkness {
  background:
    radial-gradient(
      circle 250px at var(--spy-x) var(--spy-y),
      rgba(8, 6, 4, 0.04) 0%,
      rgba(8, 6, 4, 0.14) 28%,
      rgba(6, 5, 4, 0.7) 46%,
      rgba(5, 4, 3, 0.9) 60%,
      rgba(2, 1, 1, 0.98) 100%
    );
  transition: background 120ms ease-out;
}

.hero-vignette {
  background: radial-gradient(circle at 50% 30%, rgba(255, 247, 229, 0.05) 0%, rgba(30, 21, 12, 0.24) 60%, rgba(10, 8, 6, 0.45) 100%);
}

.hero-copy {
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.72);
}

.hero-copy .inline-flex {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.content-card {
  background: rgba(255, 252, 246, 0.9);
  border: 1px solid #d6dae2;
  box-shadow: 0 12px 28px rgba(37, 42, 52, 0.08);
}

.empty-state {
  border: 1px dashed #b7beca;
  background: rgba(223, 227, 234, 0.55);
  color: #4f5664;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.filter-btn {
  background: #eceef3;
  color: var(--ink-muted);
  border: 1px solid #d1d5de;
  transition: all 0.25s ease;
}

.filter-btn:hover {
  background: #dfe3eb;
  color: var(--ink-soft);
}

.filter-btn.active {
  background: var(--brand-soft);
  color: #f7f7f8;
  border-color: var(--brand-soft);
}

.video-item {
  width: 100%;
  text-align: left;
  border: 1px solid #d6dae2;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 0.75rem;
  transition: all 0.2s ease;
}

.video-item:hover {
  border-color: #a8afbc;
  background: rgba(236, 239, 245, 0.95);
}

.video-item.active {
  border-color: #727886;
  background: rgba(220, 224, 232, 0.9);
}

.article-body-preview {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceSlow {
  0%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(-10px) translateX(-50%);
  }
}

.animate-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-bounce-slow {
  animation: bounceSlow 3s ease-in-out infinite;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

.animation-delay-600 {
  animation-delay: 0.6s;
}

.animation-delay-800 {
  animation-delay: 0.8s;
}

section[id] {
  scroll-margin-top: 90px;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #e7e9ee;
}

::-webkit-scrollbar-thumb {
  background: #bcc2cf;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ea5b3;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-soft);
  outline-offset: 2px;
}

::selection {
  background: var(--brand-soft-light);
  color: #2f323a;
}

h2, h3 {
  color: var(--ink-soft) !important;
}

p, .text-\[\#5b6270\], .text-\[\#555b66\], .text-\[\#6f7685\], .text-\[\#2f323a\] {
  color: var(--ink-muted) !important;
}

@media (max-width: 768px) {
  .profile-dropdown {
    right: -0.3rem;
  }

  .user-workspace-shell {
    grid-template-columns: 1fr;
    height: calc(100vh - 1.5rem);
  }

  .user-workspace-sidebar {
    border-right: none;
    border-bottom: 1px solid #d1d8e7;
  }

  .workspace-settings-grid {
    grid-template-columns: 1fr;
  }

  .hero-darkness {
    background:
      radial-gradient(
        circle 210px at var(--spy-x) var(--spy-y),
        rgba(8, 6, 4, 0.04) 0%,
        rgba(8, 6, 4, 0.12) 28%,
        rgba(6, 5, 4, 0.74) 48%,
        rgba(5, 4, 3, 0.92) 62%,
        rgba(2, 1, 1, 0.985) 100%
      );
  }
}