:root {
  --film-black: #211915;
  --film-black-2: #2d211b;
  --brown: #5a3324;
  --brown-soft: #805439;
  --cream: #f7ead0;
  --cream-2: #fff7e6;
  --gold: #e3b66e;
  --red: #8f332b;
  --muted: #c7a884;
  --line: rgba(255, 231, 189, .18);
  --shadow: 0 24px 70px rgba(16, 10, 7, .42);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 20% 0%, rgba(226, 158, 83, .18), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(143, 51, 43, .20), transparent 30%),
    linear-gradient(135deg, #211915 0%, #3a251d 46%, #170f0c 100%);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  opacity: .17;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
}
body::after {
  opacity: .32;
  background:
    radial-gradient(circle at 50% 30%, transparent 0 40%, rgba(0,0,0,.32) 78%),
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 12%, transparent 88%, rgba(255,255,255,.04));
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input { font: inherit; }
.skip-link {
  position: absolute;
  top: -48px;
  left: 18px;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--film-black);
  z-index: 1000;
  border-radius: 999px;
}
.skip-link:focus { top: 12px; }
.site-shell, .site-header, .site-footer { position: relative; z-index: 1; }
.container { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(33, 25, 21, .82);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.navbar {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 0 10px;
}
.logo-link { display: inline-flex; align-items: center; gap: 12px; min-width: 168px; }
.logo-link img { width: 112px; height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.3)); }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text strong { font-size: 20px; letter-spacing: .08em; color: #ffe2a6; }
.logo-text span { font: 12px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--muted); letter-spacing: .2em; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.main-nav a {
  padding: 9px 12px;
  border-radius: 999px;
  color: #ead2aa;
  font-size: 15px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.main-nav a:hover, .main-nav a.is-active { background: rgba(227, 182, 110, .16); color: #fff3d2; transform: translateY(-1px); }
.search-band { border-top: 1px solid rgba(255,255,255,.06); padding: 10px 0 14px; }
.fake-search {
  width: min(780px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 226, 166, .28);
  border-radius: 999px;
  background: rgba(255, 247, 230, .08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.fake-search input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 11px 18px;
  color: #fff4d9;
  background: transparent;
}
.fake-search input::placeholder { color: rgba(255,235,205,.64); }
.fake-search button, .btn {
  border: 0;
  cursor: pointer;
  padding: 11px 18px;
  border-radius: 999px;
  color: #241612;
  background: linear-gradient(135deg, #ffe2a6, #d08b4d 60%, #ad4b3d);
  box-shadow: 0 12px 28px rgba(173,75,61,.25);
  font-weight: 700;
}
.fake-search-notice { width: min(780px, calc(100% - 32px)); margin: 6px auto 0; color: #e8cfa4; font-size: 13px; min-height: 24px; }
.hero {
  position: relative;
  min-height: clamp(640px, 86vh, 900px);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .68; filter: sepia(.3) contrast(1.08) brightness(.78); }
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(21,13,10,.88), rgba(21,13,10,.34), rgba(21,13,10,.78)),
    radial-gradient(circle at 70% 40%, rgba(244,211,140,.22), transparent 35%);
}
.hero-content { position: relative; z-index: 1; max-width: 760px; padding: 90px 0 70px; }
.kicker { color: var(--gold); letter-spacing: .24em; text-transform: uppercase; font: 13px/1.4 ui-monospace, Menlo, monospace; }
h1, h2, h3, h4 { margin: 0; line-height: 1.18; color: #fff1cf; letter-spacing: .02em; }
h1 { font-size: clamp(42px, 7.3vw, 88px); margin-top: 14px; text-shadow: 0 14px 40px rgba(0,0,0,.42); }
h2 { font-size: clamp(30px, 4.2vw, 54px); }
h3 { font-size: clamp(21px, 2.1vw, 28px); }
p { margin: 0; }
.hero-lead { margin: 22px 0 30px; max-width: 660px; color: #f2dcc0; font-size: clamp(17px, 2vw, 21px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn.secondary { background: rgba(255, 247, 230, .11); color: #fff1cf; border: 1px solid rgba(255,226,166,.28); box-shadow: none; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.hero-meta span, .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255,226,166,.18);
  border-radius: 999px;
  color: #f7ddb4;
  background: rgba(0,0,0,.22);
  font-size: 14px;
}
.section { padding: clamp(64px, 8vw, 108px) 0; }
.section.alt { background: rgba(255, 247, 230, .045); border-block: 1px solid rgba(255,255,255,.06); }
.section-head { display: grid; gap: 14px; max-width: 780px; margin-bottom: 32px; }
.section-head p { color: #e0c49e; font-size: 17px; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.video-card, .story-card, .tool-card, .review-card, .faq-card, .creator-card, .column-card, .contact-card {
  border: 1px solid rgba(255, 226, 166, .16);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,247,230,.09), rgba(255,247,230,.035));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.video-card { position: relative; transform: translateZ(0); }
.video-link { display: block; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #120d0b;
}
.video-frame img, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame img { transition: transform .6s ease, filter .6s ease; filter: sepia(.16) saturate(.9); }
.video-frame video { opacity: 0; }
.video-frame::before,
.video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 2;
}
.video-frame::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,235,190,.28), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}
.video-frame::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 20%, transparent 80%, rgba(255,255,255,.1)),
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.12) 0 1px, transparent 1px 4px);
  animation: filmShake .18s infinite steps(2);
}
.video-card:hover .video-frame::before,
.video-card:hover .video-frame::after { opacity: .72; }
.video-card:hover .video-frame img { transform: scale(1.065); filter: sepia(.3) saturate(.85) brightness(1.08); }
.video-card:hover { border-color: rgba(255,226,166,.35); box-shadow: 0 28px 90px rgba(214,125,63,.26); }
@keyframes filmShake {
  0% { transform: translate(0,0); }
  25% { transform: translate(1px,-1px); }
  50% { transform: translate(-1px,1px); }
  75% { transform: translate(1px,1px); }
  100% { transform: translate(0,0); }
}
.play-button {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(.86);
  z-index: 4;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #281812;
  background: rgba(255, 226, 166, .92);
  box-shadow: 0 0 38px rgba(255,226,166,.58);
  opacity: .82;
  transition: transform .3s ease, opacity .3s ease;
}
.video-card:hover .play-button { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.video-badge, .duration {
  position: absolute;
  z-index: 4;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(25,17,14,.75);
  color: #ffe5b1;
  font-size: 12px;
  border: 1px solid rgba(255,226,166,.18);
}
.video-badge { left: 12px; top: 12px; }
.duration { right: 12px; bottom: 12px; }
.card-body { padding: 18px; display: grid; gap: 12px; }
.card-body p, .story-card p, .tool-card p, .review-card p, .creator-card p, .column-card p, .contact-card p { color: #dfc49d; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; color: #f2d9ae; font-size: 13px; }
.stats span { padding: 5px 8px; border-radius: 999px; background: rgba(0,0,0,.22); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 12px; color: #f5ddb4; border: 1px solid rgba(255,226,166,.16); border-radius: 999px; padding: 4px 8px; }
.story-card, .tool-card, .creator-card, .column-card { display: grid; }
.story-card img, .tool-card img, .creator-card img, .column-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(.16); }
.story-card > div, .tool-card > div, .creator-card > div, .column-card > div, .contact-card { padding: 20px; display: grid; gap: 12px; }
.gallery-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gallery-item { position: relative; overflow: hidden; border-radius: 20px; min-height: 210px; border: 1px solid rgba(255,226,166,.16); background: rgba(0,0,0,.2); }
.gallery-item img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s ease, filter .6s ease; }
.gallery-item:hover img { transform: scale(1.08); filter: sepia(.28) brightness(1.05); }
.gallery-caption { position: absolute; inset: auto 10px 10px 10px; padding: 12px; border-radius: 16px; background: rgba(24,17,14,.78); backdrop-filter: blur(8px); }
.gallery-caption strong { color: #ffe1aa; }
.gallery-caption span { display: block; color: #d9bb92; font-size: 13px; }
.creator-card img { aspect-ratio: 1; }
.review-card { padding: 22px; display: grid; gap: 14px; }
.review-card blockquote { margin: 0; color: #f3dbb4; font-size: 17px; }
.review-card cite { color: var(--gold); font-style: normal; }
.partner-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.partner-wall span {
  min-height: 76px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,247,230,.08);
  border: 1px solid rgba(255,226,166,.14);
  color: #ffe3b0;
}
.faq-list { display: grid; gap: 12px; }
.faq-card { padding: 0; }
.faq-card summary { list-style: none; cursor: pointer; padding: 18px 20px; color: #ffe2ad; font-weight: 700; }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card p { padding: 0 20px 20px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 22px; align-items: start; }
.qr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qr-box { border-radius: 18px; padding: 14px; background: rgba(255,247,230,.08); border: 1px solid rgba(255,226,166,.14); text-align: center; }
.qr-box img { width: 132px; margin: 0 auto 8px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; color: #d8ba91; padding: 28px 0 0; font-size: 14px; }
.breadcrumb a { color: #ffe1aa; }
.page-hero { padding: 64px 0 42px; }
.page-hero p { max-width: 820px; color: #e2c59e; font-size: 18px; margin-top: 18px; }
.prose { color: #e1c49c; display: grid; gap: 16px; }
.prose h2, .prose h3 { margin-top: 16px; }
.module-json-note { font-family: ui-monospace, Menlo, monospace; color: #d6b58b; font-size: 13px; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.2); border: 1px dashed rgba(255,226,166,.18); }
.site-footer { padding: 50px 0 34px; border-top: 1px solid var(--line); background: rgba(13,9,7,.55); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 30px; align-items: start; }
.footer-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.footer-logo img { width: 116px; }
.footer-logo strong { font-size: 24px; color: #ffe3ad; }
.footer-meta { display: grid; gap: 8px; color: #d9bb91; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-links a { padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,226,166,.14); color: #efd1a6; }
@media (max-width: 980px) {
  .navbar { align-items: flex-start; flex-direction: column; }
  .main-nav { margin-left: 0; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-layout, .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 24px, var(--max)); }
  .main-nav a { font-size: 14px; padding: 7px 9px; }
  .fake-search { grid-template-columns: 1fr; border-radius: 22px; }
  .hero { min-height: 720px; }
  .hero-actions { align-items: stretch; }
  .btn, .fake-search button { width: 100%; text-align: center; }
  .grid-2, .grid-3, .grid-4, .gallery-wall, .partner-wall, .qr-row { grid-template-columns: 1fr; }
  h1 { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}