:root {
  --font_head: "Heebo", sans-serif;
  --font_body: "Assistant", sans-serif;
  --bg-ink: #07090c;
  --bg-night: #111720;
  --bg-plum: #1a1820;
  --panel-fill: rgba(21, 24, 30, 0.82);
  --paper-fill: rgba(33, 29, 33, 0.94);
  --text-main: #f2e9d8;
  --text-soft: #dfd2bd;
  --text-muted: #afa18e;
  --accent-gold: #c39a5b;
  --accent-rose: #a46672;
  --accent-teal: #3f7074;
  --accent-line: rgba(206, 172, 118, 0.46);
  --stroke-soft: rgba(246, 220, 176, 0.2);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 18px 42px rgba(0, 0, 0, 0.5);
  --shadow-hard: 8px 8px 0 rgba(3, 4, 6, 0.78);
  --site-width: min(1160px, calc(100% - 1.5rem));
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  font-family: var(--font_body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-main);
  background-color: var(--bg-ink);
  background-image:
    radial-gradient(130% 95% at 10% 8%, rgba(197, 149, 82, 0.13), transparent 56%),
    radial-gradient(92% 78% at 86% 12%, rgba(63, 112, 116, 0.18), transparent 62%),
    linear-gradient(154deg, #05060a 0%, #0f141d 52%, #15141b 100%),
    repeating-linear-gradient(145deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 8px);
  background-attachment: fixed, fixed, fixed, scroll;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    radial-gradient(circle at 22% 26%, rgba(4, 5, 8, 0.68) 0 130px, transparent 260px),
    radial-gradient(circle at 78% 72%, rgba(13, 8, 10, 0.62) 0 160px, transparent 300px),
    radial-gradient(circle at 68% 18%, rgba(154, 81, 99, 0.16) 0 90px, transparent 240px);
  opacity: 0.75;
}

body::after {
  background:
    radial-gradient(circle at 84% 24%, rgba(224, 186, 119, 0.1) 0 200px, transparent 350px),
    radial-gradient(circle at 18% 82%, rgba(58, 110, 115, 0.13) 0 170px, transparent 320px);
  opacity: 0.86;
}

body.menu-open {
  overflow: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font_head);
  line-height: 1.18;
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

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

.site-header,
.site-main,
.site-footer {
  width: var(--site-width);
  margin-inline: auto;
}

.site-header,
.site-footer {
  margin-top: 1rem;
}

.site-main {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: grid;
  gap: 1rem;
}

.frame-panel {
  position: relative;
  border: 1px solid rgba(212, 181, 132, 0.35);
  border-radius: var(--radius);
  background: linear-gradient(168deg, var(--panel-fill), rgba(13, 15, 20, 0.9));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.frame-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--radius) - 8px);
  border: 1px dashed rgba(234, 204, 156, 0.3);
  pointer-events: none;
}

.frame-panel::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--accent-line), var(--accent-line)) top 14px right 14px / 30px 1px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) top 14px right 14px / 1px 30px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) top 14px left 14px / 30px 1px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) top 14px left 14px / 1px 30px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) bottom 14px right 14px / 30px 1px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) bottom 14px right 14px / 1px 30px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) bottom 14px left 14px / 30px 1px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) bottom 14px left 14px / 1px 30px no-repeat;
  opacity: 0.84;
}

.site-header {
  padding: 0.85rem 0.9rem 1rem;
  backdrop-filter: blur(8px);
  background:
    linear-gradient(160deg, rgba(34, 31, 35, 0.86), rgba(20, 22, 29, 0.8)),
    repeating-linear-gradient(22deg, rgba(255, 255, 255, 0.02) 0 3px, transparent 3px 10px);
}

.header-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.logo {
  font-family: var(--font_head);
  font-size: clamp(1.35rem, 5.5vw, 2.2rem);
  line-height: 1.04;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-inline-size: min(70vw, 20ch);
  overflow-wrap: anywhere;
  color: #f5eee0;
  text-shadow: 0 0 12px rgba(198, 159, 97, 0.26);
}

.desktop-nav {
  display: none;
}

.menu-toggle {
  margin-inline-start: auto;
  margin-top: 0.08rem;
  inline-size: 2.85rem;
  block-size: 2.85rem;
  border-radius: 50%;
  border: 1px solid rgba(213, 180, 130, 0.58);
  background:
    radial-gradient(circle at 30% 30%, rgba(197, 156, 92, 0.34), transparent 65%),
    linear-gradient(150deg, rgba(35, 32, 35, 0.95), rgba(14, 16, 23, 0.96));
  color: var(--text-main);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.menu-toggle span {
  display: block;
  inline-size: 1.2rem;
  block-size: 2px;
  border-radius: 2px;
  background-color: var(--text-main);
  margin-block: 2.5px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(-45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(45deg);
}

.header-ornament {
  margin-top: 0.75rem;
  width: min(100%, 280px);
}

.header-ornament svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: rgba(210, 174, 117, 0.82);
  stroke-width: 1.2;
  opacity: 0.82;
}

.hero,
.listing,
.more-posts,
.single-post,
.not-found {
  padding: 1rem;
}

.hero {
  background:
    radial-gradient(circle at 86% 16%, rgba(168, 103, 116, 0.19), transparent 58%),
    radial-gradient(circle at 18% 80%, rgba(59, 111, 116, 0.19), transparent 55%),
    linear-gradient(165deg, rgba(30, 27, 32, 0.93), rgba(16, 18, 24, 0.96));
}

.hero-kicker {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.7rem;
  border: 1px solid rgba(206, 172, 118, 0.62);
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: #ecdcbf;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, rgba(108, 59, 71, 0.7), rgba(37, 43, 52, 0.82));
}

.hero-title {
  font-size: clamp(2.05rem, 10.7vw, 4.7rem);
  line-height: 0.98;
  margin-bottom: 0.68rem;
  background: linear-gradient(140deg, #f7ebd4 12%, #d9b172 48%, #e3d8c2 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(193, 150, 78, 0.17);
}

.hero-subtitle {
  max-inline-size: 68ch;
  color: var(--text-soft);
  font-size: 1.03rem;
}

.ornament-divider {
  margin-top: 0.9rem;
  max-inline-size: 460px;
}

.ornament-divider svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: rgba(218, 185, 131, 0.78);
  stroke-width: 1.25;
}

.section-head {
  display: grid;
  gap: 0.38rem;
  margin-bottom: 0.9rem;
}

.section-head h2 {
  font-size: clamp(1.4rem, 6vw, 2.25rem);
  color: #f3e4cd;
}

.section-intro {
  color: var(--text-muted);
  max-inline-size: 68ch;
}

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.95rem;
}

.post-card {
  position: relative;
  padding: 0.7rem 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(216, 183, 131, 0.36);
  background:
    linear-gradient(160deg, rgba(44, 35, 37, 0.95), rgba(22, 25, 31, 0.95)),
    repeating-linear-gradient(24deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 8px);
  box-shadow: 0 11px 22px rgba(0, 0, 0, 0.48), 6px 6px 0 rgba(8, 10, 14, 0.74);
  transition: transform 0.34s ease, box-shadow 0.34s ease, filter 0.34s ease;
}

.post-card::before {
  content: "";
  position: absolute;
  inset: 9px -8px -9px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(70, 121, 124, 0.45);
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

.post-card::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  inset-block-end: -10px;
  block-size: 11px;
  border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7) 0 10px,
    rgba(195, 154, 91, 0.36) 10px 13px,
    transparent 13px 19px
  );
  opacity: 0.75;
  pointer-events: none;
}

.card-label {
  position: absolute;
  inset-block-start: 0.52rem;
  inset-inline-start: 0.52rem;
  z-index: 3;
  font-size: 0.72rem;
  color: #f9e9d0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(223, 188, 130, 0.55);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 6px),
    linear-gradient(165deg, rgba(84, 47, 54, 0.94), rgba(41, 46, 56, 0.94));
  transform: rotate(-4deg);
  letter-spacing: 0.04em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.post-image-link {
  position: relative;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(221, 190, 145, 0.39);
  padding: 0.32rem;
  background:
    linear-gradient(145deg, rgba(36, 32, 36, 0.92), rgba(15, 18, 25, 0.94));
}

.post-image-link::before,
.post-image-link::after {
  content: "";
  position: absolute;
  inline-size: 24px;
  block-size: 10px;
  background: linear-gradient(135deg, rgba(238, 205, 149, 0.58), transparent 70%);
  opacity: 0.68;
}

.post-image-link::before {
  inset-block-start: -1px;
  inset-inline-start: 9px;
  transform: rotate(-8deg);
}

.post-image-link::after {
  inset-block-end: -1px;
  inset-inline-end: 9px;
  transform: rotate(172deg);
}

.post-image-link img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  filter: contrast(1.04) saturate(1.05);
}

.post-content {
  position: relative;
  margin-top: 0.62rem;
}

.post-content::before,
.post-content::after {
  content: "";
  position: absolute;
  inline-size: 15px;
  block-size: 15px;
  pointer-events: none;
  opacity: 0.5;
}

.post-content::before {
  inset-inline-end: 5px;
  inset-block-start: -8px;
  background: linear-gradient(135deg, rgba(247, 218, 168, 0.7), transparent 65%);
  transform: rotate(28deg);
}

.post-content::after {
  inset-inline-start: 7px;
  inset-block-end: -6px;
  background: linear-gradient(315deg, rgba(188, 138, 148, 0.65), transparent 65%);
  transform: rotate(11deg);
}

.post-stamp {
  display: inline-block;
  margin-bottom: 0.46rem;
  padding: 0.16rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(219, 183, 124, 0.64);
  color: #f7e4c8;
  font-size: 0.81rem;
  letter-spacing: 0.02em;
  transform: rotate(-2deg);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 5px),
    linear-gradient(162deg, rgba(112, 60, 72, 0.84), rgba(47, 53, 62, 0.9));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.11) inset, 0 3px 10px rgba(0, 0, 0, 0.36);
}

.post-card h3 {
  margin: 0 0 0.36rem;
  font-size: 1.21rem;
  color: #f5ead8;
}

.post-card h3 a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.post-card h3 a:hover {
  color: #ffedce;
  border-color: rgba(222, 188, 127, 0.56);
}

.post-excerpt {
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-post {
  padding: 1rem;
  background:
    radial-gradient(circle at 12% 20%, rgba(204, 164, 98, 0.12), transparent 42%),
    linear-gradient(166deg, rgba(35, 31, 36, 0.95), rgba(16, 18, 25, 0.96));
}

.single-header h1 {
  font-size: clamp(1.95rem, 9vw, 3.4rem);
  margin-bottom: 0.6rem;
  color: #f4e8d4;
}

.single-figure {
  margin: 0.85rem 0 1rem;
  border: 1px solid rgba(219, 184, 131, 0.4);
  border-radius: 10px;
  padding: 0.42rem;
  background:
    linear-gradient(148deg, rgba(38, 33, 38, 0.92), rgba(17, 20, 26, 0.95));
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
}

.single-figure img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
}

.post-body {
  display: grid;
  gap: 0.72rem;
}

.post-body h2,
.post-body h3 {
  margin-top: 0.25rem;
  color: #f6e8d3;
}

.post-body h2 {
  font-size: clamp(1.38rem, 5.5vw, 2.05rem);
}

.post-body h3 {
  font-size: clamp(1.15rem, 4.8vw, 1.55rem);
}

.post-body p {
  color: var(--text-soft);
}

.post-body ul {
  margin: 0;
  padding-inline-start: 1.35rem;
  color: var(--text-soft);
}

.post-body li + li {
  margin-top: 0.34rem;
}

.more-posts .section-head {
  margin-bottom: 0.8rem;
}

.not-found {
  text-align: center;
  padding-top: 1.6rem;
  padding-bottom: 1.7rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(201, 154, 90, 0.16), transparent 52%),
    linear-gradient(166deg, rgba(37, 31, 35, 0.95), rgba(15, 18, 24, 0.96));
}

.not-found .hero-title {
  margin-bottom: 0.4rem;
}

.home-link {
  margin-top: 1rem;
  display: inline-block;
  padding: 0.48rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(220, 187, 134, 0.66);
  color: #f8ebd4;
  background:
    linear-gradient(150deg, rgba(112, 64, 76, 0.82), rgba(42, 49, 60, 0.92));
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, filter 0.25s ease;
}

.site-footer {
  padding: 1rem;
  text-align: center;
  background:
    linear-gradient(160deg, rgba(35, 32, 36, 0.9), rgba(16, 19, 25, 0.9));
}

.footer-ornament {
  margin-inline: auto;
  margin-bottom: 0.65rem;
  max-inline-size: 420px;
}

.footer-ornament svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: rgba(215, 179, 121, 0.75);
  stroke-width: 1.15;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-family: var(--font_head);
  font-size: clamp(1.1rem, 4.8vw, 1.8rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.7rem;
}

.footer-nav a {
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  border: 1px solid rgba(208, 171, 115, 0.36);
  color: var(--text-soft);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.footer-copy {
  margin-top: 0.58rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(3, 4, 7, 0.76);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.menu-overlay.is-open {
  opacity: 1;
}

.mobile-menu {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  inline-size: min(90vw, 348px);
  z-index: 95;
  border-radius: 18px;
  padding: 1rem 0.9rem 1rem;
  border: 1px solid rgba(217, 185, 136, 0.45);
  background:
    radial-gradient(circle at 84% 15%, rgba(182, 111, 123, 0.22), transparent 45%),
    linear-gradient(164deg, rgba(45, 36, 40, 0.97), rgba(16, 18, 25, 0.98));
  box-shadow: var(--shadow-soft), var(--shadow-hard);
  transform: translateX(115%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 13px;
  border: 1px dashed rgba(223, 190, 136, 0.38);
  pointer-events: none;
}

.mobile-menu.is-open {
  transform: translateX(0);
  opacity: 1;
}

.mobile-menu-title {
  font-family: var(--font_head);
  font-size: 1.32rem;
  margin-bottom: 0.68rem;
  color: #f4e7d0;
}

.mobile-menu a {
  display: block;
  position: relative;
  margin-bottom: 0.42rem;
  padding: 0.62rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(219, 185, 132, 0.33);
  color: var(--text-soft);
  background: linear-gradient(145deg, rgba(38, 34, 39, 0.9), rgba(20, 22, 30, 0.92));
}

.mobile-menu a::before {
  content: "";
  position: absolute;
  inset-inline-end: 0.58rem;
  inset-block-start: 50%;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: linear-gradient(130deg, var(--accent-gold), var(--accent-rose));
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(197, 153, 86, 0.45);
}

.mobile-menu a:last-child {
  margin-bottom: 0;
}

@media (hover: hover) {
  .menu-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.45);
  }

  .post-card:hover {
    transform: translateY(-4px) rotate(-1.15deg);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.56), 10px 10px 0 rgba(2, 3, 6, 0.78);
    filter: contrast(1.08) saturate(1.05);
  }

  .home-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
  }

  .desktop-nav a:hover,
  .footer-nav a:hover {
    border-color: rgba(228, 194, 137, 0.75);
    color: #f9ebd3;
  }
}

@media (min-width: 48rem) {
  .site-main {
    gap: 1.15rem;
  }

  .hero,
  .listing,
  .more-posts,
  .single-post,
  .not-found,
  .site-header,
  .site-footer {
    padding: 1.2rem;
  }

  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 64rem) {
  .site-header {
    padding-top: 1rem;
    padding-bottom: 1.1rem;
  }

  .header-inner {
    align-items: center;
    gap: 1rem;
  }

  .menu-toggle,
  .mobile-menu,
  .menu-overlay {
    display: none !important;
  }

  .desktop-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem 0.52rem;
    margin-inline-start: auto;
  }

  .desktop-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.15rem;
    padding: 0.26rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(209, 171, 111, 0.38);
    color: var(--text-soft);
    transition: border-color 0.25s ease, color 0.25s ease;
  }

  .logo {
    max-inline-size: 24ch;
  }

  .header-ornament {
    margin-top: 0.58rem;
    max-inline-size: 320px;
  }
}

@media (min-width: 80rem) {
  .page-home .post-grid,
  .page-section .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-main {
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
  }
}