/* Hellwalker Cinematic 1.1 — local assets, quiet motion, readable community. */
body.cinematic {
  --bg: #07090b;
  --panel: #111418;
  --line: #2b2d31;
  --text: #e6e2db;
  --muted: #979b9f;
  --red: #e76655;
  --gold: #d3b18e;
  background: radial-gradient(ellipse 800px 700px at 90% 360px, #34161650, transparent 85%),
    radial-gradient(ellipse 800px 700px at 0 800px, #18222966, transparent 85%), #07090b;
  -webkit-font-smoothing: antialiased;
}
.cinematic .shell { width: min(1320px, calc(100% - 80px)); }
.cinematic .site-header {
  min-height: 98px;
  background: linear-gradient(180deg, #121416 0%, #0b0d10 100%);
  border-bottom: 1px solid #58342e;
  box-shadow: 0 1px #050607, 0 12px 40px #0005;
  z-index: 5;
}
.cinematic .site-header > .shell { gap: 42px; }
.cinematic .brand-kicker { color: #8c8e8c; font-size: 8px; letter-spacing: .37em; margin-bottom: 9px; }
.cinematic .brand-title {
  color: #ee7462;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .105em;
  text-transform: uppercase;
  text-shadow: 0 1px #ffc4a740, 0 0 3px #ff4e374d, 0 0 22px #b539254d;
}
.cinematic .site-nav { gap: 26px; align-self: stretch; }
.cinematic .site-nav a { display: inline-flex; align-items: center; position: relative; color: #9c9c9d; font-size: 12px; }
.cinematic .site-nav a.active { color: #f5e9df; }
.cinematic .site-nav a.active::after { content: ''; position: absolute; bottom: -38px; left: 0; right: 0; height: 2px; background: #d15a45; box-shadow: 0 0 12px #cc503a77; }
.cinematic .user-nav { gap: 12px; }
.cinematic .user-nav .nav-small { font-size: 10px; }
.cinematic .site-header .button { padding: 8px 14px; }
.cinematic .hero {
  min-height: 474px;
  background: #090b0c;
  border-bottom: 1px solid #332a28;
  box-shadow: 0 20px 75px #0005;
}
.cinematic .hero-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.cinematic .hero-scene::before {
  content: ''; position: absolute; inset: 0;
  background: #080b0d url('forest-cinematic-v2.webp') center 58% / cover no-repeat;
}
.cinematic .hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #070a0eeb 0%, #070a0ec9 27%, #070a0e50 52%, #070a0e10 73%, #070a0e33 100%),
    linear-gradient(0deg, #07090b 0%, #07090b20 22%, transparent 45%, #05070922 100%);
}
.cinematic .hero > .shell.hero-inner {
  z-index: 2; max-width: 1320px;
  padding-top: 66px; padding-bottom: 68px;
}
.cinematic .hero .eyebrow {
  color: #e6ac90;
  font-size: 9px;
  letter-spacing: .27em;
  margin-bottom: 22px;
  text-shadow: 0 2px 14px #000;
}
.cinematic .hero .eyebrow::before { width: 5px; height: 5px; background: #e16d51; box-shadow: 0 0 8px #e16d5166; }
.cinematic .hero-title {
  max-width: 660px; margin: 0 0 24px;
  font-size: clamp(48px, 5.1vw, 76px);
  font-weight: 400; line-height: 1.02; letter-spacing: -.045em;
  color: #f2ece0;
  text-shadow: 0 2px 4px #0006, 0 6px 35px #000c;
}
.cinematic .hero > .shell.hero-inner > .hero-text {
  max-width: 435px; color: #bbb9b2; font-size: 13px; font-weight: 400;
  line-height: 1.8; margin-bottom: 28px; text-shadow: 0 2px 12px #000;
}
.cinematic .hero-tags { gap: 0; align-items: center; }
.cinematic .hero-tags span {
  border: none; border-left: 1px solid #95857455; border-radius: 0;
  padding: 0 13px; color: #96978f; background: none;
  font-size: 8px; letter-spacing: .15em; line-height: 1.7;
}
.cinematic .hero-tags span:first-child { padding-left: 0; border-left: 0; }
.cinematic .hero-tags .signal-dot { color: #b8c3b4; }
.cinematic .hero-tags .signal-dot::before { background: #a1b69c; box-shadow: 0 0 6px #a1b69c55; }
.cinematic .hero-transmission {
  position: absolute; right: 0; bottom: 58px; width: 212px;
  padding: 15px 17px 14px;
  border-top: 1px solid #ab786b66; border-bottom: 1px solid #0009;
  background: linear-gradient(120deg, #121517bc, #1310139c);
  box-shadow: 0 8px 30px #0004;
  color: #b0b1a8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px; line-height: 1.8; letter-spacing: .1em;
}
.cinematic .transmission-label { display: block; color: #e2c5ac; letter-spacing: .18em; font-size: 8px; margin-bottom: 5px; }
.cinematic .transmission-bars { display: inline-flex; align-items: center; height: 15px; gap: 3px; vertical-align: middle; margin-right: 7px; }
.cinematic .transmission-bars span { width: 2px; height: 10px; background: #c16b56; opacity: .8; transform-origin: center; }
.cinematic .transmission-bars span:nth-child(2), .cinematic .transmission-bars span:nth-child(4) { height: 15px; }
.cinematic .transmission-bars span:nth-child(3) { height: 7px; }
.cinematic .hero-fog {
  position: absolute; left: -12%; right: -12%; height: 58%; bottom: -17%;
  background: radial-gradient(ellipse at 20% 65%, #a8b4b54d 0%, transparent 42%),
    radial-gradient(ellipse at 70% 50%, #8c9a9b3b 0%, transparent 47%);
  filter: blur(20px); opacity: .25;
  transform: translate3d(-2%, 0, 0);
}
.cinematic .hero-fog.fog-two {
  height: 43%; bottom: 9%; left: 15%; right: -20%;
  background: radial-gradient(ellipse at 58% 55%, #9ba6a63d, transparent 55%);
  opacity: .2; transform: translate3d(2%, 0, 0);
}
.cinematic .hero-light { position: absolute; inset: 0; background: radial-gradient(ellipse 38% 95% at 78% 38%, #cc3b1d55, transparent 85%); opacity: .32; }
.cinematic .hero-grain { position: absolute; inset: 0; background: url('grain.svg') repeat; opacity: .07; mix-blend-mode: soft-light; }
.cinematic .hero-embers { position: absolute; inset: 0; overflow: hidden; }
.cinematic .hero-embers span { position: absolute; height: 2px; width: 2px; background: #d38565; border-radius: 50%; box-shadow: 0 0 4px #f1845d66; opacity: .22; }
.cinematic .hero-embers span:nth-child(1) { left: 66%; top: 74%; }
.cinematic .hero-embers span:nth-child(2) { left: 75%; top: 82%; width: 1px; height: 1px; }
.cinematic .hero-embers span:nth-child(3) { left: 89%; top: 65%; }
.cinematic .hero-embers span:nth-child(4) { left: 59%; top: 56%; width: 1px; height: 1px; }
.cinematic .hero-embers span:nth-child(5) { left: 80%; top: 42%; }
.cinematic .hero-embers span:nth-child(6) { left: 92%; top: 84%; width: 1px; height: 1px; }
.cinematic .hero-embers span:nth-child(7) { left: 69%; top: 37%; width: 1px; height: 1px; }
.cinematic .hero-embers span:nth-child(8) { left: 85%; top: 57%; }
.cinematic .status-bar {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px; letter-spacing: .025em; color: #737c7d;
  padding: 15px 0; margin-bottom: 22px; border-bottom-color: #252a2d;
}
.cinematic .status-bar > span:first-child { color: #8f9b90; }
.cinematic .section-heading { margin: 30px 0 24px; }
.cinematic .section-heading .eyebrow { font-size: 8px; margin-bottom: 10px; color: #ab7465; letter-spacing: .2em; }
.cinematic .section-heading h2 { color: #e5ded0; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: 400; letter-spacing: -.025em; }
.cinematic .layout { gap: 26px; margin-top: 24px; }
.cinematic .panel {
  background: linear-gradient(135deg, #161a1d 0%, #111519 54%, #121315 100%);
  border: 1px solid #313438; border-radius: 3px;
  box-shadow: inset 0 1px #ffffff06, 0 12px 32px #0004, 0 1px 2px #0009;
  margin-bottom: 24px;
}
.cinematic .panel-title {
  color: #d3c9b7; padding: 16px 21px; font-size: 10px; letter-spacing: .16em;
  border-bottom-color: #353534;
  background: url('grain.svg'), linear-gradient(180deg, #252728 0%, #1c1f21 100%);
  background-size: 170px 170px, auto;
  box-shadow: inset 0 1px #ffffff06, 0 1px 2px #0007;
}
.cinematic .panel-title::before { width: 2px; height: 10px; background: #ae6250; box-shadow: 0 0 8px #d6663d33; }
.cinematic .panel-description { color: #939995; font-size: 11px; font-weight: 400; background: #0f13163b; border-bottom-color: #252b2d; padding: 13px 21px; }
.cinematic .panel-description strong { font-weight: 500; }
.cinematic .forum-row { transition: none; padding: 24px 21px; gap: 18px; border-bottom-color: #282d30; background: linear-gradient(90deg, #ffffff02, transparent 50%); }
.cinematic .forum-row:hover { background: linear-gradient(90deg, #552f1f22, #ffffff02); }
.cinematic .forum-icon { border-radius: 2px; border-color: #65503c; color: #b99672; background: radial-gradient(ellipse at 25% 10%, #89745b33, transparent 80%), linear-gradient(135deg, #33302a, #181c20); box-shadow: inset 0 1px #edddc21c, 0 3px 7px #0004; font-size: 21px; }
.cinematic .forum-details h3 { font-size: 14px; letter-spacing: .01em; margin-bottom: 5px; }
.cinematic .forum-details h3 a { color: #e5dfd1; }
.cinematic .forum-details > .muted { color: #8f979b; font-size: 11px; line-height: 1.75; }
.cinematic .forum-count strong { font-size: 17px; color: #c4c1b6; font-weight: 400; font-family: Georgia, 'Times New Roman', serif; }
.cinematic .forum-count > span { font-size: 9px; color: #898e8e; }
.cinematic .forum-count > small { color: #737c7f; }
.cinematic .forum-last { font-size: 10px; border-left-color: #313537; }
.cinematic .forum-last a { color: #c4b5a3; }
.cinematic .forum-last small { font-size: 9px; color: #81898a; margin-top: 4px; }
.cinematic .badge { border-radius: 2px; font-size: 8px; color: #bda790; background: #31271e44; border-color: #68523e77; padding: 5px 8px; letter-spacing: .08em; }
.cinematic .button {
  border-radius: 3px; border-color: #ae6954;
  background: linear-gradient(180deg, #a84b35 0%, #803d2e 100%);
  box-shadow: inset 0 1px #f4b09c4d, inset 0 -1px #3f150a66, 0 3px 7px #0006;
  color: #fff0e1 !important; font-size: 11px; letter-spacing: .025em;
  transition: transform .18s ease, opacity .18s ease;
}
.cinematic .button:hover { filter: none; transform: translateY(-1px); }
.cinematic .button:active { transform: translateY(0); }
.cinematic .button.secondary { background: linear-gradient(#292e31, #1d2226); border-color: #4b5050; box-shadow: inset 0 1px #ffffff0b, 0 3px 7px #0003; color: #c5c6c2 !important; }
.cinematic .button.danger { background: linear-gradient(#542b28, #382122); border-color: #7b4d45; }
.cinematic .sidebar .panel-title { padding: 16px 18px; font-size: 9px; }
.cinematic .sidebar .panel-body { padding: 20px 18px; }
.cinematic .panel-body.stats-grid { padding: 0; }
.cinematic .stat { background: linear-gradient(140deg, #171c1f, #121619); }
.cinematic .sidebar .stats-grid .stat { padding: 20px 6px; }
.cinematic .sidebar .stats-grid .stat strong { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 400; color: #c2b49f; }
.cinematic .sidebar .stats-grid .stat span { color: #8c9392; }
.cinematic .latest-topic { border-bottom-color: #292e30; font-size: 11px; padding: 13px 0; }
.cinematic .latest-topic a { color: #c9bead; }
.cinematic .latest-topic small { color: #737f81; }
.cinematic .sidebar p { color: #8f9694; font-size: 11px; }
.cinematic .post { background: #14181c; border-color: #323639; border-radius: 3px; box-shadow: 0 8px 22px #0003; }
.cinematic .post-author { background: linear-gradient(120deg, #191d20, #111519); border-right-color: #303537; }
.cinematic .post-meta { background: linear-gradient(180deg, #23272a, #1b1f23); border-bottom-color: #343839; color: #919996; }
.cinematic .post-body { color: #d6d8d4; }
.cinematic .avatar { border-radius: 3px; background: radial-gradient(ellipse at 20% 10%, #8a604b55, transparent 90%), linear-gradient(135deg, #37352e, #1e2529); border-color: #73624e; color: #dcc9af; box-shadow: inset 0 1px #ffffff17, 0 4px 12px #0003; }
.cinematic .signature { border-top-color: #41423c; }
.cinematic input:not([type=checkbox]):not([type=radio]), .cinematic textarea, .cinematic select { background: #0c1115; border-color: #3c4547; border-radius: 3px; box-shadow: inset 0 2px 5px #0004; }
.cinematic .editor-shell { border-color: #42494a; border-radius: 3px; background: #101519; box-shadow: inset 0 2px 5px #0004; }
.cinematic .editor-toolbar { background: linear-gradient(#2a2e30, #202629); border-bottom-color: #3d4546; }
.cinematic .editor-status { background: #161c20; border-top-color: #2f383a; color: #7e8c90; }
.cinematic .member-card { background: linear-gradient(135deg, #1c2124, #12181b); border-color: #3b4141; }
.cinematic .site-footer.shell { color: #687577; font-size: 9px; align-items: center; flex-wrap: wrap; padding-top: 26px; padding-bottom: 36px; border-top-color: #2a3032; }
.cinematic .site-footer a { color: #9f9281; }
.cinematic .motion-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  padding: 6px 10px; font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .02em; color: #a6aaa3; background: #171d20; border: 1px solid #3d4848;
  border-radius: 2px; cursor: pointer;
}
.cinematic .motion-toggle::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #8b9b84; box-shadow: 0 0 5px #8b9b8433; }
.cinematic .motion-toggle[aria-pressed=false]::before { background: #6e7577; box-shadow: none; }
.cinematic .motion-toggle[hidden] { display: none; }
.cinematic.motion-ready:not(.motion-off) .hero-fog.fog-one { animation: hw-fog-one 34s ease-in-out infinite alternate; }
.cinematic.motion-ready:not(.motion-off) .hero-fog.fog-two { animation: hw-fog-two 43s ease-in-out infinite alternate; }
.cinematic.motion-ready:not(.motion-off) .hero-light { animation: hw-red-breathe 18s ease-in-out infinite; }
.cinematic.motion-ready:not(.motion-off) .hero-embers span { animation: hw-ember 17s linear infinite; }
.cinematic.motion-ready:not(.motion-off) .hero-embers span:nth-child(2) { animation-delay: -6s; animation-duration: 21s; }
.cinematic.motion-ready:not(.motion-off) .hero-embers span:nth-child(3) { animation-delay: -14s; animation-duration: 24s; }
.cinematic.motion-ready:not(.motion-off) .hero-embers span:nth-child(4) { animation-delay: -10s; animation-duration: 19s; }
.cinematic.motion-ready:not(.motion-off) .hero-embers span:nth-child(5) { animation-delay: -3s; animation-duration: 23s; }
.cinematic.motion-ready:not(.motion-off) .hero-embers span:nth-child(6) { animation-delay: -12s; animation-duration: 25s; }
.cinematic.motion-ready:not(.motion-off) .hero-embers span:nth-child(7) { animation-delay: -8s; animation-duration: 22s; }
.cinematic.motion-ready:not(.motion-off) .hero-embers span:nth-child(8) { animation-delay: -16s; animation-duration: 18s; }
.cinematic.motion-ready:not(.motion-off) .transmission-bars span { animation: hw-signal 2.3s ease-in-out infinite alternate; }
.cinematic.motion-ready:not(.motion-off) .transmission-bars span:nth-child(2) { animation-delay: -.7s; animation-duration: 1.8s; }
.cinematic.motion-ready:not(.motion-off) .transmission-bars span:nth-child(3) { animation-delay: -1.4s; animation-duration: 2.6s; }
.cinematic.motion-ready:not(.motion-off) .transmission-bars span:nth-child(4) { animation-delay: -.4s; animation-duration: 2s; }
.cinematic.motion-ready:not(.motion-off) .transmission-bars span:nth-child(5) { animation-delay: -1.1s; animation-duration: 2.8s; }
.cinematic.motion-ready:not(.motion-off) .brand-title { animation: hw-neon 23s linear infinite; }
.cinematic.motion-ready:not(.motion-off) .reveal-in, .cinematic.motion-ready:not(.motion-off) .motion-arrive { animation: hw-arrive .65s cubic-bezier(.2,.6,.3,1) both; }
.cinematic.page-hidden *, .cinematic.page-hidden *::before, .cinematic.page-hidden *::after { animation-play-state: paused !important; }
.cinematic.motion-off *, .cinematic.motion-off *::before, .cinematic.motion-off *::after { animation: none !important; transition: none !important; }
.cinematic.motion-off .button:hover { transform: none; }
@keyframes hw-fog-one { from { transform: translate3d(-3%, 0, 0); opacity: .18; } to { transform: translate3d(5%, -3%, 0); opacity: .3; } }
@keyframes hw-fog-two { from { transform: translate3d(3%, 0, 0); opacity: .14; } to { transform: translate3d(-7%, 4%, 0); opacity: .26; } }
@keyframes hw-red-breathe { 0%, 100% { opacity: .2; } 50% { opacity: .4; } }
@keyframes hw-ember { 0% { opacity: 0; transform: translate3d(0, 35px, 0); } 18% { opacity: .3; } 75% { opacity: .16; } 100% { opacity: 0; transform: translate3d(-28px, -105px, 0); } }
@keyframes hw-signal { from { transform: scaleY(.35); opacity: .5; } to { transform: scaleY(1); opacity: .85; } }
@keyframes hw-neon { 0%, 45%, 49%, 100% { opacity: 1; } 46%, 48% { opacity: .82; } 47% { opacity: .94; } }
@keyframes hw-arrive { from { opacity: .65; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1440px) {
  .cinematic .hero { min-height: 500px; }
  .cinematic .hero > .shell.hero-inner { padding-top: 78px; padding-bottom: 78px; }
}
@media (max-width: 1200px) {
  .cinematic .shell { width: calc(100% - 52px); }
  .cinematic .site-header > .shell { gap: 28px; }
  .cinematic .brand-title { font-size: 24px; }
  .cinematic .brand-kicker { font-size: 7px; }
  .cinematic .site-nav { gap: 18px; }
  .cinematic .user-nav { gap: 10px; flex-wrap: wrap; }
  .cinematic .hero { min-height: 450px; }
  .cinematic .hero-title { max-width: 580px; font-size: 66px; }
  .cinematic .hero-transmission { right: 0; bottom: 46px; width: 186px; }
  .cinematic .forum-row { gap: 14px; padding: 22px 18px; }
}
@media (max-width: 900px) {
  .cinematic .site-header > .shell { flex-wrap: wrap; padding: 21px 0 16px; gap: 18px; }
  .cinematic .site-nav { order: 3; align-self: auto; width: 100%; border-top: 1px solid #2c2f31; padding-top: 12px; gap: 26px; }
  .cinematic .site-nav a.active::after { bottom: -17px; }
  .cinematic .user-nav { margin-left: auto; }
  .cinematic .hero { min-height: 420px; }
  .cinematic .hero-scene::before { background-position: 64% center; }
  .cinematic .hero::after { background: linear-gradient(90deg, #070a0ee8 0%, #070a0ea3 38%, #070a0e22 76%), linear-gradient(0deg, #07090b 0%, #07090b20 30%, transparent 65%); }
  .cinematic .hero > .shell.hero-inner { padding-top: 56px; padding-bottom: 60px; }
  .cinematic .hero-title { font-size: 62px; max-width: 560px; }
  .cinematic .hero-transmission { display: none; }
  .cinematic .hero > .shell.hero-inner > .hero-text { max-width: 365px; font-size: 12px; }
  .cinematic .layout { grid-template-columns: minmax(0, 1fr); }
  .cinematic .sidebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .cinematic .sidebar .panel-title { font-size: 8px; letter-spacing: .08em; padding: 14px; }
  .cinematic .sidebar .panel-body { padding: 16px 14px; }
  .cinematic .sidebar .panel-body.stats-grid { padding: 0; }
  .cinematic .sidebar .stats-grid { grid-template-columns: 1fr; gap: 0; }
  .cinematic .sidebar .stats-grid .stat { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; background: none; }
  .cinematic .sidebar .stats-grid .stat strong { font-size: 21px; }
}
@media (max-width: 640px) {
  .cinematic .shell { width: calc(100% - 36px); }
  .cinematic .site-header > .shell { gap: 15px; padding-top: 22px; padding-bottom: 15px; }
  .cinematic .brand-title { font-size: 25px; letter-spacing: .085em; }
  .cinematic .brand-kicker { font-size: 7px; letter-spacing: .25em; }
  .cinematic .site-nav { order: 3; width: 100%; padding-top: 12px; margin-left: 0; border-top: 1px solid #303132; gap: 25px; }
  .cinematic .site-nav a { font-size: 11px; }
  .cinematic .site-nav a.active::after { bottom: -16px; }
  .cinematic .user-nav { width: auto; margin-left: auto; gap: 8px; }
  .cinematic .user-nav .nav-small { font-size: 9px; }
  .cinematic .user-nav .button { padding: 7px 10px; font-size: 10px; }
  .cinematic .hero { min-height: 400px; }
  .cinematic .hero-scene::before { background-position: 67% center; }
  .cinematic .hero::after { background: linear-gradient(90deg, #070a0ede 0%, #070a0e9e 45%, #070a0e30 90%), linear-gradient(0deg, #07090b 0%, #07090b0d 45%); }
  .cinematic .hero > .shell.hero-inner { padding: 57px 0 61px; }
  .cinematic .hero-title { max-width: 500px; font-size: 58px; letter-spacing: -.05em; margin-bottom: 23px; }
  .cinematic .hero .eyebrow { font-size: 8px; letter-spacing: .2em; margin-bottom: 23px; }
  .cinematic .hero > .shell.hero-inner > .hero-text { font-size: 12px; max-width: 325px; line-height: 1.85; margin-bottom: 30px; }
  .cinematic .hero-tags span { font-size: 7px; letter-spacing: .08em; padding-left: 9px; padding-right: 9px; }
  .cinematic .hero-tags span:first-child { padding-left: 0; }
  .cinematic .status-bar { font-size: 7px; padding: 13px 0; gap: 7px; flex-wrap: wrap; }
  .cinematic .section-heading { margin: 25px 0 21px; flex-direction: row; align-items: center; }
  .cinematic .section-heading .eyebrow { font-size: 7px; margin-bottom: 9px; letter-spacing: .13em; }
  .cinematic .section-heading h2 { font-size: 25px; }
  .cinematic .section-heading h1 { font-size: 26px; }
  .cinematic .section-heading > .button { width: auto; }
  .cinematic .badge { font-size: 7px; letter-spacing: .04em; }
  .cinematic .panel-title { padding: 15px 17px; font-size: 9px; }
  .cinematic .panel-description { font-size: 10px; padding: 12px 17px; }
  .cinematic .forum-row { gap: 12px; padding: 21px 16px; grid-template-columns: 36px minmax(0, 1fr) 45px; }
  .cinematic .forum-icon { width: 35px; height: 39px; font-size: 18px; }
  .cinematic .forum-details h3 { font-size: 12px; }
  .cinematic .forum-details > .muted { font-size: 10px; }
  .cinematic .forum-count strong { font-size: 17px; }
  .cinematic .forum-count > span { font-size: 8px; }
  .cinematic .forum-last { grid-column: 2 / -1; padding-left: 0; border-left: 0; font-size: 10px; }
  .cinematic .forum-last small { margin-top: 3px; }
  .cinematic .sidebar { grid-template-columns: 1fr; gap: 16px; }
  .cinematic .sidebar .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .cinematic .sidebar .stats-grid .stat { display: block; text-align: center; padding: 17px 8px; background: #151b1e; }
  .cinematic .sidebar .stats-grid .stat strong { font-size: 25px; }
  .cinematic .sidebar .panel-title { font-size: 9px; padding: 15px 17px; }
  .cinematic .sidebar .panel-body { padding: 19px 17px; }
  .cinematic .site-footer.shell { align-items: flex-start; flex-direction: column; gap: 13px; font-size: 9px; }
  .cinematic .post-meta { font-size: 10px; }
}
@media (max-width: 400px) {
  .cinematic .shell { width: calc(100% - 28px); }
  .cinematic .brand-title { font-size: 20px; }
  .cinematic .brand-kicker { font-size: 6px; letter-spacing: .2em; }
  .cinematic .user-nav .button { padding: 6px 8px; font-size: 9px; }
  .cinematic .hero { min-height: 366px; }
  .cinematic .hero > .shell.hero-inner { padding-top: 51px; padding-bottom: 53px; }
  .cinematic .hero-title { font-size: 47px; }
  .cinematic .hero .eyebrow { font-size: 7px; }
  .cinematic .hero-tags span { font-size: 6px; padding-right: 7px; padding-left: 7px; letter-spacing: .045em; }
  .cinematic .hero-tags span:first-child { padding-left: 0; }
  .cinematic .hero > .shell.hero-inner > .hero-text { max-width: 270px; font-size: 11px; }
  .cinematic .section-heading { gap: 10px; }
  .cinematic .section-heading .eyebrow { max-width: 195px; }
  .cinematic .forum-row { gap: 9px; padding: 18px 13px; }
  .cinematic .forum-details h3 { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic *, .cinematic *::before, .cinematic *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cinematic .button:hover { transform: none; }
}