:root {
  --ink-950: #070707;
  --ink-900: #0e0e0e;
  --ink-850: #151515;
  --ink-800: #1c1c1c;
  --ink-700: #2b2b2b;
  --crimson-600: #c90f20;
  --crimson-500: #e21b2d;
  --crimson-400: #ff3045;
  --paper-100: #f6f3ee;
  --paper-200: #ddd7cf;
  --gray-400: #a6a6a6;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --sans: var(--font-geist-sans), Inter, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink-950);
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.025), transparent 22rem),
    var(--ink-950);
  color: var(--paper-100);
  font-family: var(--sans);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  content: "";
  opacity: 0.17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

button,
a {
  font: inherit;
}

[hidden] {
  display: none !important;
}

button {
  color: inherit;
}

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

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--crimson-400);
  outline-offset: 4px;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 106px;
  align-items: center;
  gap: 3rem;
  padding: 0 clamp(1.5rem, 3.5vw, 4rem);
  border-bottom: 1px solid rgba(246, 243, 238, 0.11);
  animation: fade-in 0.35s ease both;
}

.brand {
  position: relative;
  min-width: 232px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 2.7vw, 2.8rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
}

.brand sup,
.footer-brand sup,
.hero h1 sup {
  font-family: var(--sans);
  font-size: 0.3em;
  vertical-align: top;
}

.brand span {
  display: block;
  margin-top: 0.65rem;
  color: var(--crimson-400);
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.34em;
}

.brand::after {
  position: absolute;
  top: 45%;
  left: calc(100% + 2rem);
  width: clamp(4rem, 15vw, 18rem);
  height: 1px;
  content: "";
  background: rgba(246, 243, 238, 0.36);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.3vw, 2.8rem);
  margin-left: auto;
}

.main-nav button,
.main-nav > a:not(.shop-link) {
  position: relative;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--paper-200);
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 560;
  white-space: nowrap;
}

.main-nav button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: var(--crimson-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.main-nav button:hover::after {
  transform: scaleX(1);
}

.shop-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  border: 1px solid rgba(246, 243, 238, 0.5);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: 0.2s ease;
}

.shop-link:hover {
  border-color: var(--crimson-400);
  background: var(--crimson-500);
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  display: flex;
  min-height: min(900px, 100svh);
  align-items: center;
  overflow: hidden;
  padding: 8.6rem clamp(1.5rem, 3.5vw, 4rem) 4rem;
  border-bottom: 1px solid rgba(226, 27, 45, 0.55);
  isolation: isolate;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background-image: var(--hero-image, url("/images/hero-wolf.webp"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation: art-in 0.7s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(90deg, rgba(7, 7, 7, 0.08) 0%, rgba(7, 7, 7, 0) 48%, rgba(7, 7, 7, 0.02) 100%),
    linear-gradient(180deg, rgba(7, 7, 7, 0.15), transparent 35%, rgba(7, 7, 7, 0.36));
}

/* Hero jako <picture>/<img>: AVIF → WebP → PNG, ten sam kadr i ta sama animacja co ::before. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  animation: art-in 0.7s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Fail-safe: gdy API bootstrap zawiedzie, treść SSR zostaje, a to tylko informuje i pozwala ponowić. */
.bw-boot-notice {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 12px clamp(1rem, 3vw, 2rem);
  background: rgba(7, 7, 7, 0.94);
  border-top: 1px solid var(--accent, #ed1b2f);
  color: var(--paper-100, #f6f3ee);
  font-size: 0.86rem;
}

.bw-boot-notice button {
  padding: 9px 13px;
  border: 0;
  background: var(--crimson-600, #c90f20);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.bw-boot-notice button:focus-visible {
  outline: 2px solid var(--paper-100, #f6f3ee);
  outline-offset: 2px;
}

.hero-content {
  width: min(54vw, 775px);
  animation: copy-in 0.5s 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.eyebrow,
.kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  color: var(--gray-400);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow span,
.kicker {
  color: var(--crimson-400);
}

.eyebrow i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--crimson-400);
}

.hero-rule {
  width: 100%;
  height: 1px;
  margin: 1.6rem 0 1.9rem;
  background: linear-gradient(90deg, rgba(246, 243, 238, 0.85), rgba(246, 243, 238, 0.2));
}

.hero h1 {
  max-width: 790px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.4rem, 5.1vw, 5.7rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.91;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 2.8rem;
  padding: 0 1.8rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--paper-100);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.button > b {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 0;
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:hover > b {
  transform: translateX(4px);
}

.button-primary {
  min-width: 260px;
  background: var(--crimson-500);
}

.button-primary:hover {
  background: var(--crimson-400);
}

.button-secondary {
  min-width: 286px;
  border-color: rgba(246, 243, 238, 0.55);
  background: rgba(0, 0, 0, 0.26);
}

.button-secondary:hover {
  border-color: var(--paper-100);
}

.issue-badge {
  display: flex;
  width: fit-content;
  min-width: 275px;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(246, 243, 238, 0.32);
  background: rgba(7, 7, 7, 0.55);
}

.issue-badge strong {
  color: var(--crimson-400);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
}

.issue-badge span {
  padding-left: 1rem;
  border-left: 1px solid rgba(246, 243, 238, 0.28);
  color: var(--gray-400);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
}

.issue-badge b {
  margin-left: auto;
  color: var(--crimson-400);
  letter-spacing: -0.2em;
  transform: skewX(-18deg);
}

.hero-number {
  position: absolute;
  right: 1.5rem;
  bottom: -3.4rem;
  z-index: -1;
  color: rgba(246, 243, 238, 0.035);
  font-family: var(--display);
  font-size: 17rem;
  line-height: 1;
}

.manifesto {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr 0.8fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
  padding: clamp(4rem, 7vw, 7.5rem) clamp(1.5rem, 5vw, 6rem);
  border-bottom: 1px solid var(--ink-700);
  background:
    linear-gradient(125deg, transparent 70%, rgba(226, 27, 45, 0.07)),
    var(--ink-900);
}

.manifesto > p {
  margin: 0;
  color: var(--crimson-400);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.manifesto h2 {
  max-width: 750px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}

.manifesto > span {
  color: var(--gray-400);
  font-size: 0.96rem;
  line-height: 1.75;
}

.articles-section {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.5rem, 5vw, 6rem);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.section-heading h2,
.shop-bridge h2 {
  margin: 0.65rem 0 0;
  font-family: var(--display);
  font-size: clamp(3rem, 5.8vw, 6.4rem);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.section-heading > p {
  max-width: 420px;
  margin: 0 0 0.3rem;
  color: var(--gray-400);
  font-size: 0.94rem;
  line-height: 1.7;
}

.filters {
  display: flex;
  gap: 0.5rem;
  margin: 3.2rem 0 2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar {
  display: none;
}

.filters button {
  min-height: 42px;
  padding: 0 1.1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
  color: var(--gray-400);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: 0.18s ease;
}

.filters button:hover,
.filters button.is-active {
  border-color: var(--crimson-500);
  background: var(--crimson-500);
  color: var(--paper-100);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: transparent;
  border: 0;
}

.article-card {
  min-width: 0;
  background: var(--ink-900);
}

.article-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 0;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(226, 27, 45, 0.85) 48% 52%, transparent 52%),
    radial-gradient(circle at 25% 25%, rgba(226, 27, 45, 0.18), transparent 40%),
    var(--ink-850);
  cursor: pointer;
}

.article-image::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 0 solid var(--crimson-500);
  transition: border-width 0.18s ease, background 0.2s ease;
}

.article-image:hover::after {
  border-top-width: 5px;
  background: rgba(226, 27, 45, 0.05);
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(1.08);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease;
}

.article-image:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.08);
}

.image-detail img {
  object-position: 25% center;
  transform: scale(1.15);
}

.image-detail:hover img {
  transform: scale(1.2);
}

.image-furry {
  background:
    radial-gradient(circle at 70% 30%, rgba(226, 27, 45, 0.75), transparent 28%),
    repeating-linear-gradient(115deg, transparent 0 42px, rgba(226, 27, 45, 0.12) 42px 48px),
    var(--ink-850);
}

.image-guide {
  background:
    linear-gradient(115deg, transparent 32%, rgba(226, 27, 45, 0.9) 32% 37%, transparent 37%),
    radial-gradient(circle at 65% 65%, rgba(246, 243, 238, 0.09), transparent 35%),
    #111;
}

.image-history {
  background:
    linear-gradient(135deg, rgba(226, 27, 45, 0.76), transparent 40%),
    repeating-radial-gradient(circle at center, #191919 0 2px, #0d0d0d 3px 9px);
}

.visual-mark {
  position: absolute;
  right: 1rem;
  bottom: -2.3rem;
  color: rgba(246, 243, 238, 0.12);
  font-family: var(--display);
  font-size: 9rem;
  letter-spacing: -0.08em;
}

.article-number {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(246, 243, 238, 0.46);
  background: rgba(7, 7, 7, 0.75);
  color: var(--crimson-400);
  font-family: var(--display);
  font-size: 1rem;
}

.article-copy {
  padding: 1.6rem 1.6rem 2rem;
}

.article-meta {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  color: var(--gray-400);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.article-meta span {
  color: var(--crimson-400);
}

.article-copy h3 {
  margin: 1rem 0 0.75rem;
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.6vw, 2.5rem);
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
}

.article-copy > p:not(.article-meta) {
  margin: 0;
  color: var(--gray-400);
  font-size: 0.86rem;
  line-height: 1.7;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.25rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(226, 27, 45, 0.48);
  background: transparent;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 2;
  text-transform: uppercase;
}

.text-link span {
  color: var(--crimson-400);
  font-size: 1.25rem;
  transition: transform 0.18s ease;
}

.text-link:hover span {
  transform: translateX(4px);
}

.featured-card {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
}

.featured-card .article-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem);
}

.featured-card .article-image {
  height: 100%;
  aspect-ratio: auto;
}

.shop-bridge {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(2rem, 6vw, 7rem);
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.5rem, 6vw, 7rem);
  background:
    linear-gradient(110deg, rgba(226, 27, 45, 0.05), transparent 55%),
    var(--ink-850);
  border-block: 1px solid var(--ink-700);
}

.shop-bridge-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: end;
}

.shop-bridge-copy p {
  max-width: 430px;
  margin: 0 0 1.8rem;
  color: var(--gray-400);
  line-height: 1.75;
}

.shop-bridge-slash {
  position: absolute;
  right: 25%;
  bottom: -80%;
  width: 100px;
  height: 230%;
  background: var(--crimson-600);
  opacity: 0.28;
  transform: rotate(18deg);
}

footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 2.5rem clamp(1.5rem, 5vw, 6rem);
  color: var(--gray-400);
}

.footer-brand {
  color: var(--paper-100);
  font-family: var(--display);
  font-size: 1.75rem;
}

.footer-brand span {
  display: block;
  margin-top: 0.35rem;
  color: var(--gray-400);
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.footer-links a:hover {
  color: var(--paper-100);
}

.adult-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink-700);
  font-size: 0.65rem;
}

.dialog-open {
  overflow: hidden;
}

.reader-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(7px);
  animation: fade-in 0.2s ease both;
}

.reader {
  position: relative;
  width: min(760px, 100%);
  max-height: min(850px, calc(100svh - 3rem));
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid var(--ink-700);
  border-top: 5px solid var(--crimson-500);
  background:
    linear-gradient(135deg, rgba(226, 27, 45, 0.07), transparent 36%),
    var(--ink-900);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65);
  animation: reader-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.reader-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--ink-700);
  background: var(--ink-850);
  cursor: pointer;
  font-size: 1.6rem;
}

.reader h2 {
  max-width: 620px;
  margin: 1.1rem 0 1.4rem;
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
}

.reader-lead {
  margin: 0 0 2rem;
  color: var(--paper-200);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.65;
}

.reader-body {
  padding-top: 1.8rem;
  border-top: 1px solid var(--ink-700);
}

.reader-body p {
  color: var(--gray-400);
  line-height: 1.85;
}

.reader-body h2,
.reader-body h3,
.reader-body h4 {
  margin: 1.8em 0 0.55em;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.reader-body h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.reader-body h3 { font-size: clamp(1.55rem, 3vw, 2.2rem); }

.reader-body ul,
.reader-body ol {
  margin: 1.2rem 0;
  padding-left: 1.5rem;
  color: var(--gray-400);
  line-height: 1.8;
}

.reader-body blockquote {
  margin: 1.6rem 0;
  padding: 0.4rem 0 0.4rem 1.2rem;
  border-left: 4px solid var(--crimson-500);
  color: var(--paper-200);
  font-size: 1.08rem;
}

.reader-body a {
  color: var(--paper-100);
  text-decoration-color: var(--crimson-500);
  text-underline-offset: 0.2em;
}

.reader-body figure {
  margin: 1.8rem 0;
}

.reader-body figure img {
  display: block;
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  background: #050505;
}

.reader-body figcaption {
  padding-top: 0.65rem;
  color: var(--gray-400);
  font-size: 0.82rem;
}

.preview-ribbon {
  margin: -0.5rem 0 1.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid #8f691e;
  background: rgba(143, 105, 30, 0.16);
  color: #f6d486;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reader .button {
  margin-top: 1.3rem;
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes copy-in {
  from { opacity: 0; transform: translateY(12px); }
}

@keyframes art-in {
  from { opacity: 0; transform: translateX(20px); }
}

@keyframes reader-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
}

@media (max-width: 1180px) {
  .brand::after {
    display: none;
  }

  .site-header {
    gap: 1rem;
  }

  .main-nav {
    gap: 1rem;
  }

  .hero-content {
    width: 58vw;
  }

  .hero h1 {
    font-size: clamp(3.4rem, 5.7vw, 4.8rem);
  }
}

@media (max-width: 900px) {
  .site-header {
    position: absolute;
    height: 88px;
  }

  .brand {
    min-width: 0;
  }

  .menu-toggle {
    display: grid;
    width: 48px;
    height: 48px;
    place-content: center;
    gap: 7px;
    margin-left: auto;
    border: 1px solid var(--ink-700);
    background: rgba(7, 7, 7, 0.8);
    cursor: pointer;
  }

  .menu-toggle span {
    width: 22px;
    height: 2px;
    background: var(--paper-100);
  }

  .main-nav {
    position: absolute;
    top: 88px;
    right: 1rem;
    left: 1rem;
    display: none;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid var(--ink-700);
    background: rgba(7, 7, 7, 0.98);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }

  .main-nav.is-open {
    display: flex;
    flex-direction: column;
  }

  .main-nav button {
    min-height: 46px;
    text-align: left;
  }

  .shop-link {
    justify-content: space-between;
  }

  .hero {
    min-height: 880px;
    align-items: end;
    padding-top: 24rem;
  }

  .hero::before {
    background-position: 63% center;
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(7, 7, 7, 0.05) 20%, rgba(7, 7, 7, 0.84) 54%, var(--ink-950) 100%),
      linear-gradient(90deg, rgba(7, 7, 7, 0.1), transparent);
  }

  .hero-content {
    width: 100%;
  }

  .hero h1 {
    max-width: 680px;
  }

  .manifesto {
    grid-template-columns: 1fr;
  }

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

  .featured-card {
    grid-column: span 2;
  }

  .shop-bridge {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .hero {
    min-height: 820px;
    padding-top: 21rem;
  }

  .hero::before {
    background-position: 68% top;
    background-size: auto 62%;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .hero-actions {
    flex-direction: column;
  }

  .button,
  .button-primary,
  .button-secondary {
    width: 100%;
    min-width: 0;
  }

  .issue-badge {
    min-width: 0;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .articles-grid {
    grid-template-columns: 1fr;
  }

  .featured-card {
    grid-column: auto;
    display: block;
  }

  .featured-card .article-image {
    aspect-ratio: 4 / 3;
  }

  .article-copy {
    padding: 1.35rem 1.25rem 1.65rem;
  }

  .shop-bridge-slash {
    right: 12%;
    opacity: 0.14;
  }

  footer {
    grid-template-columns: 1fr;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .adult-note {
    grid-column: auto;
  }

  .reader-backdrop {
    padding: 0.5rem;
  }

  .reader {
    max-height: calc(100svh - 1rem);
    padding: 3.7rem 1.4rem 2rem;
  }
}

/* BAD WOLF 2.6 — WYSZUKIWANIE, PAGINACJA I DOSTĘPNOŚĆ */
.article-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 0 0 18px; }
.article-search label { display: block; }
.article-search input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #34343a; background: #0e0e11; color: #fff; }
.filters a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border: 1px solid #313137; color: #d5d5da; text-decoration: none; }
.filters a:hover,
.filters a.is-active { border-color: #ed1b2f; background: #251015; color: #fff; }
.active-post-filter { display: flex; align-items: center; gap: 10px; margin: 15px 0; color: #fff; }
.active-post-filter span { padding: 8px 11px; border: 1px solid #ed1b2f; }
.active-post-filter a { color: #fff; font-size: 22px; text-decoration: none; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 34px; }
.pagination a { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #36363c; color: #fff; text-decoration: none; }
.pagination a:hover,
.pagination a.is-active { border-color: #ed1b2f; background: #ed1b2f; }
.gallery-model-card { text-decoration: none; }
.media-usage { padding: 8px 10px; border: 1px solid #303036; font: 700 11px/1.4 Arial, sans-serif; }
.media-usage.is-used { border-color: #76424a; color: #ffb3bc; }
.media-usage.is-free { color: #9bd9a6; }
.two-factor-setup { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 24px; margin-top: 24px; align-items: start; }
.two-factor-setup img { width: 100%; height: auto; background: #fff; }
.session-list,
.activity-list { display: grid; gap: 10px; }
.session-row,
.activity-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; padding: 14px; border: 1px solid #303036; }
.session-row div { display: grid; gap: 4px; }
.activity-list > div { grid-template-columns: 160px 160px minmax(160px, 1fr) minmax(120px, auto); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #ff3044; outline-offset: 3px; }

@media (max-width: 700px) {
  .article-search { grid-template-columns: 1fr; }
  .article-search button { width: 100%; }
  .two-factor-setup { grid-template-columns: 1fr; }
  .activity-list > div { grid-template-columns: 1fr; }
  .session-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Multimedia showcase */

.showcase-hero .hero-lead {
  max-width: 620px;
  margin: 1.5rem 0 0;
  color: var(--paper-200);
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.7;
}

.showcase-badge strong {
  min-width: 42px;
  text-align: center;
}

.showcase-stats h2 {
  max-width: 840px;
}

.catalog-grid .article-card {
  min-height: 100%;
}

.media-chip {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 0.45rem 0.7rem;
  background: var(--crimson-500);
  color: var(--paper-100);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  margin-top: 1rem;
}

.tag-row span {
  color: var(--paper-200);
  font-size: 0.66rem;
  font-weight: 700;
}

.empty-gallery {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
  text-align: center;
}

.empty-gallery strong {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  text-transform: uppercase;
}

.empty-gallery span {
  color: var(--gray-400);
}

.media-reader {
  width: min(980px, 100%);
}

.detail-video {
  display: block;
  width: 100%;
  max-height: 64vh;
  margin: 1.5rem 0;
  border: 1px solid var(--ink-700);
  background: #000;
}

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.detail-gallery a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
}

.detail-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.detail-gallery a:hover img {
  transform: scale(1.02);
}

.detail-tags {
  margin: 1.5rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-700);
}

/* Admin panel */

.admin-shell {
  min-height: 100vh;
  background:
    linear-gradient(125deg, rgba(226, 27, 45, 0.06), transparent 28rem),
    var(--ink-950);
}

.admin-header {
  position: relative;
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid var(--ink-700);
  background: rgba(7, 7, 7, 0.94);
}

.admin-header .brand::after {
  display: none;
}

.admin-account {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.15rem 1rem;
  align-items: center;
  text-align: right;
}

.admin-account span {
  font-size: 1rem;
  font-weight: 800;
}

.admin-account small {
  grid-column: 1;
  color: var(--gray-400);
  font-size: 0.8rem;
}

.admin-account a {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--ink-700);
  color: var(--paper-200);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-account a:hover {
  border-color: var(--crimson-500);
  color: var(--paper-100);
}

.admin-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2.7rem, 5vw, 5rem) clamp(1.25rem, 4vw, 4.5rem) 2.5rem;
}

.admin-intro h1 {
  margin: 0.6rem 0 0;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 400;
  line-height: 0.87;
  text-transform: uppercase;
}

.admin-stats {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

.admin-stats > div {
  display: flex;
  min-width: 104px;
  flex-direction: column;
  justify-content: center;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
}

.admin-stats strong {
  color: var(--crimson-400);
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
}

.admin-stats span {
  color: var(--gray-400);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-stats .button {
  min-width: 180px;
  min-height: 58px;
  gap: 1.4rem;
}

.admin-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.7fr);
  gap: 1px;
  margin: 0 clamp(1.25rem, 4vw, 4.5rem) 4rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-700);
}

.admin-form,
.admin-list {
  min-width: 0;
  background: var(--ink-900);
}

.admin-form {
  padding: clamp(1.4rem, 3vw, 3rem);
}

.form-section {
  display: flex;
  gap: 1rem;
  align-items: start;
  margin: 0 0 1.5rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--ink-700);
}

.form-section:not(:first-child) {
  margin-top: 3rem;
}

.form-step {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  background: var(--crimson-500);
  font-family: var(--display);
  font-size: 1rem;
}

.form-section h2,
.admin-list-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.form-section p {
  margin: 0.5rem 0 0;
  color: var(--gray-400);
  font-size: 0.95rem;
  line-height: 1.55;
}

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

.form-grid label,
.publish-controls > label:not(.checkbox-label) {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: var(--paper-200);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.span-2 {
  grid-column: span 2;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--ink-700);
  border-radius: 0;
  background: var(--ink-950);
  color: var(--paper-100);
  font: 500 1rem/1.55 var(--sans);
  text-transform: none;
  outline: none;
}

.admin-form input,
.admin-form select {
  padding: 0 0.85rem;
}

.admin-form textarea {
  min-height: 128px;
  padding: 0.9rem 1rem;
  resize: vertical;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
  border-color: var(--crimson-400);
  box-shadow: 0 0 0 2px rgba(255, 48, 69, 0.12);
}

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

.upload-drop {
  position: relative;
  display: flex;
  min-height: 165px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.2rem;
  border: 1px dashed #555;
  background:
    linear-gradient(135deg, transparent 65%, rgba(226, 27, 45, 0.07)),
    var(--ink-950);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.upload-drop:hover {
  border-color: var(--crimson-400);
  background-color: var(--ink-850);
}

.upload-drop strong {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
  text-transform: uppercase;
}

.upload-drop span {
  color: var(--gray-400);
  font-size: 0.86rem;
}

.upload-drop b {
  color: var(--crimson-400);
  font-size: 0.86rem;
}

.upload-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.existing-media {
  margin-top: 1.4rem;
  padding: 1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
}

.existing-media h3 {
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.existing-media-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.existing-media-row > div {
  position: relative;
  min-width: 0;
}

.existing-media-row img,
.existing-media-row video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #000;
}

.existing-media-row button {
  width: 100%;
  padding: 0.45rem;
  border: 0;
  background: #252525;
  color: var(--paper-200);
  cursor: pointer;
  font-size: 0.58rem;
}

.existing-media-row button:hover {
  background: var(--crimson-600);
}

.publish-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
  gap: 1rem;
  align-items: end;
}

.checkbox-label {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
  cursor: pointer;
  color: var(--paper-200);
  font-size: 0.92rem;
  font-weight: 700;
}

.checkbox-label input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--crimson-500);
}

.form-message {
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--crimson-500);
  background: rgba(226, 27, 45, 0.08);
  color: var(--paper-200);
  font-size: 0.95rem;
}

.form-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.3rem;
}

.form-actions .button {
  min-width: 200px;
}

.form-actions .autosave-state {
  align-self: center;
  margin-left: auto;
}

.button:disabled,
.admin-list button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.admin-list {
  padding: clamp(1.3rem, 2.5vw, 2rem);
}

.admin-list-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ink-700);
}

.admin-list-heading button {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--ink-700);
  background: transparent;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.admin-list-heading button:hover {
  border-color: var(--crimson-500);
  color: var(--paper-100);
}

.admin-posts {
  display: flex;
  flex-direction: column;
}

.admin-posts article {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ink-700);
}

.admin-posts article.is-editing {
  margin-inline: -0.7rem;
  padding-inline: 0.7rem;
  background: rgba(226, 27, 45, 0.07);
}

.admin-post-image {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  background: var(--ink-950);
  color: rgba(246, 243, 238, 0.15);
  font-family: var(--display);
  font-size: 2rem;
}

.admin-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-posts article p {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  color: var(--gray-400);
  font-size: 0.56rem;
}

.status-live,
.status-draft {
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-live {
  color: #63d785;
}

.status-draft {
  color: #e2a73b;
}

.admin-posts h3 {
  margin: 0.55rem 0 0.15rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.admin-posts small {
  color: var(--gray-400);
  font-size: 0.6rem;
}

.admin-post-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.admin-post-actions button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ink-700);
  background: transparent;
  cursor: pointer;
  color: var(--paper-200);
  font-size: 0.62rem;
  font-weight: 750;
}

.admin-post-actions button:hover {
  border-color: var(--crimson-400);
  color: var(--crimson-400);
}

.list-state {
  padding: 3rem 1rem;
  color: var(--gray-400);
  text-align: center;
}

.access-denied {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at center, rgba(226, 27, 45, 0.12), transparent 28rem),
    var(--ink-950);
}

.access-denied > div {
  width: min(660px, 100%);
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid var(--ink-700);
  border-top: 5px solid var(--crimson-500);
  background: var(--ink-900);
}

.access-denied h1 {
  margin: 0.75rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(2.7rem, 8vw, 5.5rem);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.access-denied p:not(.kicker) {
  color: var(--gray-400);
  line-height: 1.7;
}

.access-denied .button {
  margin-top: 1rem;
}

@media (max-width: 1100px) {
  .admin-intro {
    align-items: start;
    flex-direction: column;
  }

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

  .admin-list {
    grid-row: 1;
  }
}

@media (max-width: 700px) {
  .detail-gallery {
    grid-template-columns: 1fr;
  }

  .admin-header {
    align-items: start;
    flex-direction: column;
  }

  .admin-account {
    width: 100%;
    text-align: left;
  }

  .admin-intro {
    padding-top: 2rem;
  }

  .admin-stats {
    width: 100%;
    flex-wrap: wrap;
  }

  .admin-stats > div {
    flex: 1;
  }

  .admin-stats .button {
    width: 100%;
  }

  .form-grid,
  .upload-grid,
  .publish-controls {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }

  .existing-media-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .button {
    width: 100%;
  }
}

/* Standalone public app */

.site-loading {
  display: grid;
  min-height: 100svh;
  place-items: center;
  color: var(--gray-400);
}

.brand-logo {
  display: block;
  width: min(220px, 34vw);
  max-height: 50px;
  object-fit: contain;
  object-position: left center;
}

.language-link {
  display: grid;
  min-width: 42px;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--ink-700);
  font-size: 0.7rem;
  font-weight: 900;
}

.comments {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-700);
}

.comments h3 {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  text-transform: uppercase;
}

.comment-list article {
  margin-bottom: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
}

.comment-list strong {
  font-size: 0.8rem;
}

.comment-list time {
  margin-left: 0.7rem;
  color: var(--gray-400);
  font-size: 0.65rem;
}

.comment-list p {
  margin: 0.6rem 0 0;
  color: var(--paper-200);
  line-height: 1.7;
}

.comments form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

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

.comments label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: var(--paper-200);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.comments input,
.comments textarea {
  min-height: 48px;
  padding: 0.75rem;
  border: 1px solid var(--ink-700);
  border-radius: 0;
  background: var(--ink-950);
  color: var(--paper-100);
  outline: none;
}

.comments textarea {
  min-height: 130px;
  resize: vertical;
}

.comments input:focus,
.comments textarea:focus {
  border-color: var(--crimson-400);
}

.comments .comment-notice {
  margin: 0;
  color: var(--gray-400);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Standalone admin */

.admin-body {
  min-width: 320px;
  background: #0a0a0a;
}

.admin-shell {
  display: grid;
  min-height: 100svh;
  grid-template-columns: 285px minmax(0, 1fr);
  grid-template-rows: 82px minmax(0, 1fr);
}

.admin-topbar {
  position: sticky;
  z-index: 60;
  top: 0;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem;
  border-bottom: 1px solid var(--ink-700);
  background: rgba(7, 7, 7, 0.97);
  backdrop-filter: blur(10px);
}

.admin-topbar .brand {
  min-width: 0;
  font-size: 1.75rem;
}

.admin-topbar .brand::after {
  display: none;
}

.admin-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
  cursor: pointer;
}

.admin-topbar .admin-account button {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--ink-700);
  background: transparent;
  cursor: pointer;
  color: var(--paper-200);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-sidebar {
  position: sticky;
  top: 82px;
  z-index: 50;
  display: flex;
  height: calc(100svh - 82px);
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  padding: 1rem;
  border-right: 1px solid var(--ink-700);
  background: var(--ink-900);
}

.admin-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.admin-sidebar button {
  display: grid;
  min-height: 54px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 0.8rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  text-align: left;
}

.admin-sidebar button:hover,
.admin-sidebar button.is-active {
  border-color: var(--ink-700);
  background: var(--ink-950);
  color: var(--paper-100);
}

.admin-sidebar button.is-active {
  border-left: 3px solid var(--crimson-500);
}

.admin-sidebar button i {
  color: var(--crimson-400);
  font-style: normal;
}

.admin-sidebar button span {
  font-size: 1rem;
  font-weight: 720;
}

.admin-sidebar button b {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--crimson-500);
  font-size: 0.75rem;
}

.admin-sidebar > a {
  padding: 0.9rem;
  border-top: 1px solid var(--ink-700);
  color: var(--gray-400);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-content {
  min-width: 0;
  padding: clamp(1.5rem, 3.5vw, 4rem);
  background:
    radial-gradient(circle at 80% 10%, rgba(226, 27, 45, 0.06), transparent 32rem),
    var(--ink-950);
}

.admin-version-warning {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  border: 2px solid var(--crimson-500);
  background: #321015;
  box-shadow: 0 0 0 4px rgba(226, 27, 45, 0.12);
}

.admin-version-warning strong {
  color: var(--paper-100);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.035em;
}

.admin-version-warning span {
  color: var(--paper-200);
  line-height: 1.55;
}

.admin-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.admin-page-heading h1 {
  margin: 0.6rem 0 0;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 6.2rem);
  font-weight: 400;
  line-height: 0.88;
  text-transform: uppercase;
}

.admin-page-heading > div > p:not(.kicker) {
  max-width: 700px;
  margin: 1rem 0 0;
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1.65;
}

.admin-page-heading .button {
  flex: 0 0 auto;
  min-height: 54px;
}

.admin-card {
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
}

.admin-card > h2,
.list-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  text-transform: uppercase;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1.2rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-700);
}

.dashboard-stats article {
  display: flex;
  min-height: 138px;
  flex-direction: column;
  justify-content: center;
  padding: 1.3rem;
  background: var(--ink-900);
}

.dashboard-stats strong {
  color: var(--crimson-400);
  font-family: var(--display);
  font-size: 3.2rem;
  font-weight: 400;
}

.dashboard-stats span {
  color: var(--gray-400);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

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

.dashboard-grid > .admin-card {
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.dashboard-grid .admin-card-wide {
  grid-column: 1 / -1;
}

.dashboard-grid p {
  color: var(--gray-400);
  line-height: 1.7;
}

.backup-manager {
  display: grid;
  gap: 1.25rem;
}

.backup-manager-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.backup-manager-heading h2 {
  max-width: 780px;
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.backup-manager-heading .button {
  flex: 0 0 auto;
}

.backup-status-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.backup-status-card {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
}

.backup-status-card.is-ready {
  border-left: 3px solid #2f9e65;
}

.backup-status-card > div:first-child {
  display: grid;
  gap: 0.35rem;
}

.backup-status-card strong,
.backup-restore-upload h3 {
  color: var(--paper-100);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  text-transform: uppercase;
}

.backup-status-card span {
  color: var(--gray-400);
  font-size: 0.86rem;
}

.backup-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.backup-status-actions .button {
  min-height: 42px;
  padding: 0.65rem 0.8rem;
  font-size: 0.75rem;
}

.backup-operation-message {
  margin: 0;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--crimson-500);
  background: rgba(240, 29, 52, 0.08);
  color: var(--paper-100) !important;
}

.backup-restore-upload {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-700);
}

.backup-restore-upload h3,
.backup-restore-upload p {
  margin: 0;
}

.backup-restore-upload .admin-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.65fr) auto;
  align-items: end;
  gap: 0.8rem;
}

.backup-restore-upload .upload-drop {
  min-height: 112px;
}

.backup-restore-upload .button {
  margin-bottom: 1px;
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--paper-200);
  font-size: 0.95rem;
}

.status-list span,
.integration-light {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #805f27;
}

.status-list span.is-ok,
.integration-light.is-ok {
  background: #41bd69;
  box-shadow: 0 0 0 4px rgba(65, 189, 105, 0.09);
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.check-grid span {
  padding: 0.9rem;
  border: 1px solid var(--ink-700);
  color: var(--paper-200);
  font-size: 0.9rem;
}

.content-split {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, 0.55fr);
  gap: 1.2rem;
  align-items: start;
}

.post-editor .admin-form {
  padding: clamp(1.3rem, 3vw, 2.6rem);
}

.language-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--ink-700);
}

.language-tabs button {
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 0.9rem;
  font-weight: 850;
  text-transform: uppercase;
}

.language-tabs button.is-active {
  border-bottom-color: var(--crimson-500);
  color: var(--paper-100);
}

.language-tabs span {
  margin-left: auto;
  color: var(--gray-400);
  font-size: 0.8rem;
}

.rich-field {
  min-width: 0;
}

.rich-label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--paper-200);
  font-size: 0.84rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  padding: 0.45rem;
  border: 1px solid var(--ink-700);
  border-bottom: 0;
  background: var(--ink-800);
}

.rich-toolbar button,
.rich-toolbar select {
  width: auto;
  min-height: 38px;
  padding: 0 0.7rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
  color: var(--paper-200);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: none;
}

.rich-toolbar button {
  cursor: pointer;
}

.rich-toolbar button:hover,
.rich-toolbar button:focus-visible {
  border-color: var(--crimson-500);
  color: var(--paper-100);
}

.rich-editor {
  min-height: 290px;
  overflow: auto;
  padding: 1.1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
  color: var(--paper-200);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.75;
  outline: none;
}

.rich-editor:focus {
  border-color: var(--crimson-500);
  box-shadow: inset 0 0 0 1px var(--crimson-500);
}

.rich-editor h2,
.rich-editor h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.rich-editor blockquote {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--crimson-500);
}

.rich-editor figure {
  margin: 1.2rem 0;
}

.rich-editor img {
  display: block;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.rich-editor figcaption {
  margin-top: 0.45rem;
  color: var(--gray-400);
  font-size: 0.8rem;
}

.rich-field > small {
  display: block;
  margin-top: 0.45rem;
  color: var(--gray-400);
  font-size: 0.78rem;
}

.autosave-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.2rem;
  padding: 0.9rem 1rem;
  border-left: 4px solid #d49a2f;
  background: rgba(212, 154, 47, 0.1);
}

.autosave-banner div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.autosave-banner span,
.autosave-state {
  color: var(--gray-400);
  font-size: 0.78rem;
}

.autosave-banner .button {
  min-width: 0;
  min-height: 40px;
  padding: 0 1rem;
}

.form-subheading {
  margin: 2.5rem 0 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-700);
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
  text-transform: uppercase;
}

.admin-form label small,
.form-help {
  color: var(--gray-400);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.admin-form input[type="color"] {
  padding: 6px;
}

.switch-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 0.65rem;
  padding: 0 0.8rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
}

.switch-row input {
  width: 19px;
  min-height: 19px;
  accent-color: var(--crimson-500);
}

.switch-row span {
  color: var(--gray-400);
  font-size: 0.9rem;
}

.button-danger {
  border-color: #69212a;
  color: #ff8794;
}

.media-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.media-picker > label {
  overflow: hidden;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
  cursor: pointer;
}

.media-picker > label.is-selected {
  border-color: var(--crimson-500);
  box-shadow: inset 0 0 0 2px var(--crimson-500);
}

.media-picker img,
.media-picker video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #000;
}

.media-picker label span {
  display: block;
  padding: 0.4rem;
  color: var(--gray-400);
  font-size: 0.78rem;
}

.media-picker input {
  width: 14px;
  min-height: 14px;
  accent-color: var(--crimson-500);
}

.item-list {
  position: sticky;
  top: 102px;
  overflow: hidden;
}

.list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem;
  border-bottom: 1px solid var(--ink-700);
}

.list-heading span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  background: var(--crimson-500);
  font-size: 0.65rem;
  font-weight: 900;
}

.item-list > button {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.2rem;
  border: 0;
  border-bottom: 1px solid var(--ink-700);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.item-list > button:hover,
.item-list > button.is-active {
  background: rgba(226, 27, 45, 0.08);
}

.item-list > button span {
  font-family: var(--display);
  font-size: 1.25rem;
  text-transform: uppercase;
}

.item-list > button small,
.user-row small {
  color: var(--gray-400);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.revision-panel {
  margin-top: 1rem;
  border-top: 1px solid var(--ink-700);
}

.revision-panel .list-heading h2 {
  font-size: 1.45rem;
}

.revision-panel article {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ink-700);
}

.revision-panel article div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}

.revision-panel article strong {
  font-size: 0.85rem;
}

.revision-panel article small {
  color: var(--gray-400);
  font-size: 0.72rem;
  line-height: 1.4;
}

.revision-panel article button {
  flex: 0 0 auto;
  font-size: 0.72rem;
}

.media-upload-form {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 1.5rem;
  padding: 1.5rem;
}

.media-upload-form .upload-drop {
  min-height: 190px;
}

.media-upload-form .form-grid {
  align-content: center;
}

.upload-progress {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.8rem;
  border-left: 3px solid var(--crimson-500);
  background: rgba(226, 27, 45, 0.08);
}

.media-library {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.media-library article {
  min-width: 0;
  padding-bottom: 1rem;
}

.media-preview {
  background: #000;
}

.media-preview img,
.media-preview video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.media-library h3,
.media-library > article > p {
  overflow: hidden;
  margin: 0.8rem 1rem 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library h3 {
  font-size: 1rem;
}

.media-library > article > p {
  color: var(--gray-400);
  font-size: 0.8rem;
}

.media-meta {
  display: grid;
  gap: 0.65rem;
  margin: 1rem;
}

.media-meta label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--gray-400);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.media-meta input {
  min-height: 38px;
  padding: 0 0.6rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
  color: var(--paper-100);
  font-size: 1rem;
}

.media-meta button,
.row-actions button {
  min-height: 36px;
  padding: 0 0.7rem;
  border: 1px solid var(--ink-700);
  background: transparent;
  cursor: pointer;
  color: var(--paper-200);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.danger-link {
  border-color: #62232a !important;
  color: #ff7382 !important;
}

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

.settings-columns > .admin-card {
  min-width: 0;
}

.page-content-editor {
  overflow: visible;
}

.page-content-editor > .page-content-layout {
  padding: clamp(1rem, 2vw, 1.6rem);
}

.page-content-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--crimson-500);
  background: rgba(226, 27, 45, 0.08);
}

.page-content-note strong {
  color: var(--paper-100);
}

.page-content-note span {
  color: var(--gray-400);
  font-size: 0.88rem;
}

.page-content-tabs {
  position: sticky;
  z-index: 5;
  top: 82px;
  margin: 0;
  padding-top: 0.45rem;
  background: var(--ink-900);
}

.page-content-language {
  display: grid;
  gap: 0.8rem;
  padding-top: 1rem;
}

.page-content-group {
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
}

.page-content-group > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  cursor: pointer;
  list-style: none;
}

.page-content-group > summary::-webkit-details-marker {
  display: none;
}

.page-content-group > summary > span {
  min-width: 92px;
  color: var(--crimson-400);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.page-content-group > summary h2 {
  margin: 0;
  color: var(--paper-100);
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 400;
  text-transform: uppercase;
}

.page-content-group > summary p {
  margin: 0.3rem 0 0;
  color: var(--gray-400);
  font-size: 0.84rem;
  line-height: 1.45;
}

.page-content-group > summary > b {
  color: var(--crimson-400);
  font-size: 1.35rem;
  transition: transform 0.18s ease;
}

.page-content-group[open] > summary > b {
  transform: rotate(180deg);
}

.page-content-group-form {
  padding: 1.2rem;
  border-top: 1px solid var(--ink-700);
  background: transparent;
}

.page-content-group-form .form-actions {
  justify-content: flex-end;
}

.page-content-group-form .form-actions .button {
  min-width: 220px;
}

.repeat-form {
  padding: 1.5rem;
}

.repeat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1.2rem;
  border: 1px solid var(--ink-700);
  transition: border-color .16s ease, opacity .16s ease, transform .16s ease;
}

.repeat-row.is-dragging {
  border-color: var(--crimson-400);
  opacity: .55;
  transform: scale(.995);
}

.repeat-row legend {
  padding: 0 0.5rem;
  color: var(--crimson-400);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.repeat-row > label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--gray-400);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.repeat-row input {
  min-height: 42px;
  padding: 0 0.6rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
  color: var(--paper-100);
}

.row-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 0.5rem;
}

.nav-order-actions .drag-handle {
  border-color: #5a2a31;
  color: #fff;
  cursor: grab;
}

.nav-order-actions .drag-handle:active { cursor: grabbing; }
.nav-order-actions button:disabled { opacity: .3; cursor: not-allowed; }

.category-list,
.comments-admin,
.integration-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.category-row {
  padding: 1.3rem;
}

.category-row .row-actions {
  margin-top: 1rem;
}

.comments-admin article {
  padding: 1.3rem;
}

.comment-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.comment-head > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.comment-head span,
.comments-admin small {
  color: var(--gray-400);
  font-size: 0.82rem;
}

.comment-head > b {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-approved {
  color: #63d785;
}

.status-pending {
  color: #e2a73b;
}

.status-rejected {
  color: #ff7382;
}

.comments-admin h3 {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  text-transform: uppercase;
}

.comments-admin p {
  color: var(--paper-200);
  line-height: 1.65;
}

.comments-admin .row-actions {
  margin-top: 1rem;
}

.users-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
  gap: 1.2rem;
}

.password-card {
  margin-top: 1.2rem;
}

.password-card > .admin-card {
  padding: 1.3rem;
}

.users-grid > section:first-child {
  padding: 1.3rem;
}

.users-grid .admin-form {
  padding: 1.2rem 0 0;
}

.user-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--ink-700);
}

.user-row span {
  color: var(--gray-400);
  font-size: 0.9rem;
}

.integration-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1.5rem;
}

.integration-card h2 {
  font-size: 1.7rem;
}

.integration-card p {
  margin: 0.6rem 0;
  color: var(--gray-400);
  line-height: 1.65;
}

.integration-card code {
  color: #d2a5aa;
  font-size: 0.86rem;
}

.integration-card > strong {
  color: var(--gray-400);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.admin-auth > div {
  width: min(720px, 100%);
}

.admin-auth .admin-form {
  padding: 1.2rem 0;
}

.admin-auth .admin-form .button {
  margin-top: 0.5rem;
}

.auth-service-status {
  display: grid;
  gap: 0.45rem;
  margin: 1.35rem 0 0.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid #34343a;
  border-left: 4px solid var(--crimson-500);
  background: rgba(226, 27, 45, 0.07);
}

.auth-service-status strong {
  color: var(--paper-100);
  font: 800 0.92rem/1.3 Arial, sans-serif;
  text-transform: uppercase;
}

.auth-service-status span {
  color: var(--gray-300);
  line-height: 1.55;
}

.auth-service-status code {
  color: #d2a5aa;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.auth-service-status.is-ready {
  border-left-color: #4ed278;
  background: rgba(78, 210, 120, 0.08);
}

.admin-auth button:disabled {
  opacity: 0.48;
  filter: grayscale(0.45);
}

.admin-toast {
  position: fixed;
  z-index: 200;
  right: 1.2rem;
  bottom: 1.2rem;
  width: min(420px, calc(100vw - 2.4rem));
  padding: 1rem 1.2rem;
  border-left: 4px solid #4ed278;
  background: #15251a;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
  font-size: 0.95rem;
}

.admin-body .button,
.admin-body button,
.admin-body select,
.admin-body input,
.admin-body textarea {
  font-family: var(--sans);
}

.admin-body .button {
  font-size: 0.9rem;
}

.admin-toast.is-error {
  border-left-color: var(--crimson-400);
  background: #291317;
}

@media (max-width: 1100px) {
  .content-split {
    grid-template-columns: 1fr;
  }

  .item-list {
    position: static;
    grid-row: 1;
  }

  .media-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-topbar {
    gap: 1rem;
  }

  .admin-menu-button {
    display: block;
  }

  .admin-topbar .brand {
    margin-right: auto;
  }

  .admin-sidebar {
    position: fixed;
    top: 82px;
    bottom: 0;
    left: 0;
    width: min(310px, 88vw);
    height: auto;
    transform: translateX(-102%);
    transition: transform 0.2s ease;
  }

  .admin-sidebar.is-open {
    transform: none;
    box-shadow: 20px 0 80px rgba(0, 0, 0, 0.7);
  }

  .admin-content {
    grid-column: 1;
  }

  .admin-page-heading {
    align-items: start;
    flex-direction: column;
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .autosave-banner {
    grid-template-columns: 1fr;
  }

  .rich-toolbar select {
    max-width: 100%;
  }

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

  .media-upload-form {
    grid-template-columns: 1fr;
  }

  .backup-manager-heading,
  .backup-status-card {
    align-items: stretch;
    flex-direction: column;
  }

  .backup-status-list,
  .backup-restore-upload .admin-form {
    grid-template-columns: 1fr;
  }

  .backup-status-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .admin-topbar {
    padding: 0 0.8rem;
  }

  .admin-topbar .brand span,
  .admin-account small {
    display: none;
  }

  .admin-account {
    display: block;
  }

  .admin-account > span {
    display: none;
  }

  .admin-content {
    padding: 1.1rem;
  }

  .dashboard-grid,
  .check-grid,
  .comment-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid .admin-card-wide {
    grid-column: auto;
  }

  .media-library {
    grid-template-columns: 1fr;
  }

  .media-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .repeat-row {
    grid-template-columns: 1fr;
  }

  .integration-card {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .integration-card > strong {
    grid-column: 2;
  }
}

/* Realization gallery */
.realization-section {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.5rem, 5vw, 6rem) 0;
}

.realization-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 3rem;
  border: 0;
  background: transparent;
}

.gallery-filter-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) repeat(2, minmax(150px, 0.8fr));
  gap: 0.7rem;
  margin-top: 2.4rem;
}

.gallery-filter-bar input,
.gallery-filter-bar select {
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid var(--ink-700);
  border-radius: 0;
  background: var(--ink-900);
  color: var(--paper-100);
  font: 700 0.8rem/1.4 var(--sans);
  outline: none;
}

.gallery-filter-bar input:focus,
.gallery-filter-bar select:focus {
  border-color: var(--crimson-500);
}

.gallery-search {
  position: relative;
}

.gallery-search input {
  padding-right: 3rem;
}

.gallery-search i {
  position: absolute;
  top: 50%;
  right: 1rem;
  color: var(--crimson-400);
  font-size: 1.4rem;
  font-style: normal;
  transform: translateY(-50%);
}

.gallery-result-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  color: var(--gray-400);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gallery-result-line i {
  height: 1px;
  flex: 1;
  background: var(--ink-700);
}

.gallery-load-row {
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}

.realization-grid > .empty-gallery {
  grid-column: 1 / -1;
}

.realization-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--ink-700);
  background: #0c0c0c;
  cursor: zoom-in;
  text-align: left;
}

.realization-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  border-top: 0 solid var(--crimson-500);
  background: linear-gradient(180deg, transparent 47%, rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0.92) 100%);
  transition: border-width 0.2s ease, background 0.25s ease;
}

.realization-card:hover::after {
  border-top-width: 4px;
  background: linear-gradient(180deg, rgba(226, 27, 45, 0.03) 35%, rgba(0, 0, 0, 0.15) 57%, rgba(0, 0, 0, 0.94) 100%);
}

.realization-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease;
}

.realization-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.02);
}

.realization-caption {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding: 3.2rem 1.2rem 1.15rem;
  color: var(--paper-100);
}

.realization-caption small {
  color: var(--crimson-300);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.realization-caption strong {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.25vw, 1.4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.realization-caption em {
  color: var(--paper-200);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1.4;
}

.realization-card > i {
  position: absolute;
  z-index: 3;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.55);
  color: var(--paper-100);
  font-style: normal;
  transition: transform 0.2s ease, background 0.2s ease;
}

.realization-card:hover > i {
  background: var(--crimson-500);
  transform: rotate(90deg);
}

.gallery-model-card {
  cursor: pointer;
}

.gallery-model-card .realization-caption small {
  color: var(--paper-300);
}

.gallery-model-card .realization-caption strong {
  font-size: clamp(1.35rem, 2vw, 2.25rem);
}

.gallery-model-section {
  min-height: calc(100svh - 150px);
  padding-top: clamp(2.5rem, 6vw, 5rem);
}

.gallery-back-link {
  display: inline-flex;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(226, 27, 45, 0.55);
  color: var(--paper-200);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 2;
  text-transform: uppercase;
}

.gallery-model-heading h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 400;
  line-height: 0.88;
  text-transform: uppercase;
}

.gallery-model-heading > div:last-child {
  align-self: end;
}

.gallery-model-heading .text-link {
  color: var(--paper-100);
}

.gallery-model-grid {
  margin-bottom: clamp(4rem, 8vw, 8rem);
}

.gallery-model-manager {
  margin-bottom: 1rem;
}

.gallery-model-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.5fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.gallery-model-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gallery-model-list > button:not(.button) {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
  color: var(--paper-100);
  cursor: pointer;
  text-align: left;
}

.gallery-model-list > button:not(.button):hover,
.gallery-model-list > button.is-active {
  border-color: var(--crimson-500);
  background: rgba(226, 27, 45, 0.1);
}

.gallery-model-list span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.3rem;
}

.gallery-model-list strong {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  text-transform: uppercase;
}

.gallery-model-list small {
  color: var(--gray-400);
  font-size: 0.68rem;
}

.gallery-model-form-state {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--crimson-500);
  background: rgba(226, 27, 45, 0.08);
}

.gallery-model-form-state h3 {
  margin: 0.35rem 0 0.45rem;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.gallery-model-form-state > span {
  color: var(--gray-300);
  line-height: 1.55;
}

.gallery-model-add-button {
  width: 100%;
  margin-top: 1rem;
}

.gallery-selected-model {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--crimson-500);
  background: rgba(226, 27, 45, 0.08);
}

.gallery-selected-model > span,
.gallery-selected-model > small {
  color: var(--gray-400);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gallery-selected-model > strong {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.gallery-lightbox {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(10px);
  animation: fade-in 0.18s ease both;
}

.gallery-lightbox-stage {
  position: relative;
  width: min(1500px, 100%);
  height: min(920px, calc(100svh - 3rem));
  display: grid;
  place-items: center;
}

.gallery-lightbox figure {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  margin: 0;
  overflow: hidden;
}

.gallery-lightbox figure::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 135px;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 4, 4, 0.35), rgba(0, 0, 0, 0.96));
  transition: opacity 0.2s ease;
}

.gallery-lightbox-stage.is-zoomed figure::after {
  opacity: 0;
}

.gallery-lightbox-viewport {
  position: absolute;
  inset: 58px 78px 135px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050505;
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
}

.gallery-lightbox-viewport.is-zoomed {
  cursor: grab;
}

.gallery-lightbox-viewport.is-zoomed:active {
  cursor: grabbing;
}

.gallery-lightbox img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.72);
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.16s ease-out;
}

.gallery-lightbox-viewport:active img {
  transition: none;
}

.gallery-lightbox figcaption {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 4vw, 4rem);
  bottom: 1rem;
  left: clamp(1rem, 4vw, 4rem);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  transition: opacity 0.2s ease;
}

.gallery-lightbox-stage.is-zoomed figcaption {
  opacity: 0;
  pointer-events: none;
}

.gallery-lightbox figcaption span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.45rem;
}

.gallery-lightbox figcaption strong {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.gallery-lightbox figcaption em {
  max-width: 780px;
  color: var(--paper-200);
  font-size: clamp(0.82rem, 1.4vw, 1rem);
  font-style: normal;
  font-weight: 650;
  line-height: 1.5;
}

.gallery-lightbox figcaption a {
  flex: 0 0 auto;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  border: 1px solid var(--crimson-500);
  background: var(--crimson-500);
  color: var(--paper-100);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gallery-lightbox-close,
.gallery-arrow {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(8, 8, 8, 0.72);
  color: var(--paper-100);
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.gallery-lightbox-close:hover,
.gallery-arrow:hover {
  border-color: var(--crimson-500);
  background: var(--crimson-500);
}

.gallery-lightbox-close {
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
}

.gallery-arrow {
  top: 50%;
  width: 56px;
  height: 72px;
  font-size: 3rem;
  line-height: 1;
  transform: translateY(-50%);
}

.gallery-arrow.is-prev {
  left: 0;
}

.gallery-arrow.is-next {
  right: 0;
}

.gallery-counter {
  position: absolute;
  z-index: 5;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.62);
  color: var(--paper-200);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.gallery-zoom-controls {
  position: absolute;
  z-index: 7;
  top: 0;
  right: 58px;
  display: flex;
  height: 48px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(8, 8, 8, 0.78);
  backdrop-filter: blur(5px);
}

.gallery-zoom-controls button {
  min-width: 48px;
  padding: 0 0.75rem;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--paper-100);
  font-family: var(--body);
  font-size: 1.25rem;
  font-weight: 850;
  cursor: pointer;
}

.gallery-zoom-controls button:nth-child(2) {
  min-width: 72px;
  font-size: 0.72rem;
}

.gallery-zoom-controls button:last-child {
  border-right: 0;
}

.gallery-zoom-controls button:hover:not(:disabled) {
  background: var(--crimson-500);
}

.gallery-zoom-controls button:disabled {
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}

.gallery-zoom-hint {
  position: absolute;
  z-index: 6;
  top: 0.8rem;
  left: 50%;
  padding: 0.45rem 0.7rem;
  background: rgba(0, 0, 0, 0.62);
  color: var(--paper-200);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}

.gallery-lightbox-stage.is-zoomed .gallery-zoom-hint {
  opacity: 0;
}

/* Gallery administration */
.dashboard-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gallery-current-image {
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
}

.gallery-current-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #000;
}

.gallery-current-image div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.4rem;
}

.gallery-current-image strong {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 400;
  text-transform: uppercase;
}

.gallery-current-image span,
.gallery-current-image small {
  overflow: hidden;
  color: var(--gray-400);
  text-overflow: ellipsis;
}

.gallery-upload-drop {
  min-height: 170px;
}

.gallery-item-list > button {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  flex-direction: initial;
}

.gallery-item-list > button img {
  display: block;
  width: 74px;
  height: 74px;
  object-fit: cover;
  background: #000;
}

.gallery-item-list > button span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--sans);
  font-size: inherit;
  text-transform: none;
}

.gallery-item-list > button strong {
  overflow: hidden;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.gallery-item-list > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-bulk-card {
  margin-bottom: 1rem;
}

.gallery-feature-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 1.5rem 0;
}

.gallery-feature-heading h2 {
  margin: 0.45rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.gallery-feature-heading > span {
  max-width: 520px;
  color: var(--gray-400);
  line-height: 1.6;
}

.gallery-bulk-defaults {
  margin-top: 1.2rem;
}

.gallery-bulk-items {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.gallery-bulk-item {
  position: relative;
  padding: 1.2rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
}

.gallery-bulk-item .form-grid {
  padding-left: 3.6rem;
}

.gallery-bulk-item > small {
  display: block;
  padding: 0.8rem 0 0 3.6rem;
  color: var(--gray-400);
}

.gallery-bulk-number {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background: var(--crimson-500);
  font-family: var(--display);
}

.gallery-bulk-item textarea {
  min-height: 92px;
}

.gallery-media-choice {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--ink-700);
  background: var(--ink-950);
}

.gallery-media-choice h3 {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gallery-media-picker {
  max-height: 420px;
  overflow-y: auto;
}

.gallery-media-picker label {
  min-width: 130px;
}

.gallery-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  border-bottom: 1px solid var(--ink-700);
}

.gallery-edit-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
  padding: 0.8rem;
  border: 0;
  background: transparent;
  color: var(--paper-100);
  cursor: pointer;
  text-align: left;
}

.gallery-edit-card:hover,
.gallery-edit-card.is-active {
  background: rgba(226, 27, 45, 0.1);
}

.gallery-edit-card img {
  display: block;
  width: 74px;
  height: 74px;
  object-fit: cover;
  background: #000;
}

.gallery-edit-card > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.3rem;
}

.gallery-edit-card strong,
.gallery-edit-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-edit-card strong {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: uppercase;
}

.gallery-edit-card small {
  color: var(--gray-400);
}

.gallery-order-controls {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--ink-700);
}

.gallery-order-controls button {
  border: 0;
  background: var(--ink-900);
  color: var(--paper-100);
  cursor: pointer;
  font-size: 1.1rem;
}

.gallery-order-controls button:hover:not(:disabled) {
  background: var(--crimson-500);
}

.gallery-order-controls button:disabled {
  color: var(--ink-700);
  cursor: default;
}

@media (max-width: 1100px) {
  .realization-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .realization-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-lightbox {
    padding: 0.75rem;
  }

  .gallery-lightbox-stage {
    height: calc(100svh - 1.5rem);
  }

  .gallery-lightbox-viewport {
    inset: 58px 54px 150px;
  }

  .gallery-arrow {
    width: 46px;
    height: 60px;
  }

  .gallery-model-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .realization-section {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .realization-grid {
    gap: 0.55rem;
    border: 0;
    background: transparent;
  }

  .realization-card {
    aspect-ratio: 1;
    border: 1px solid var(--ink-700);
  }

  .realization-caption {
    padding: 2.5rem 0.75rem 0.75rem;
  }

  .realization-caption strong {
    font-size: 1.05rem;
  }

  .gallery-model-card .realization-caption strong {
    font-size: 1.3rem;
  }

  .gallery-model-heading h1 {
    font-size: clamp(3.2rem, 18vw, 5.5rem);
  }

  .realization-caption em {
    font-size: 0.68rem;
  }

  .realization-card > i {
    top: 0.6rem;
    right: 0.6rem;
    width: 30px;
    height: 30px;
  }

  .gallery-lightbox {
    padding: 0;
  }

  .gallery-lightbox-stage {
    height: 100svh;
  }

  .gallery-lightbox figure {
    align-items: center;
  }

  .gallery-lightbox-viewport {
    inset: 68px 0 170px;
  }

  .gallery-lightbox figcaption {
    right: 0.8rem;
    bottom: 1rem;
    left: 0.8rem;
    align-items: stretch;
    flex-direction: column;
    gap: 0.85rem;
  }

  .gallery-lightbox figcaption strong {
    font-size: 1.35rem;
  }

  .gallery-lightbox figcaption a {
    align-self: flex-start;
  }

  .gallery-lightbox-close {
    top: 0.65rem;
    right: 0.65rem;
  }

  .gallery-arrow {
    top: 46%;
    width: 42px;
    height: 56px;
    font-size: 2.5rem;
  }

  .gallery-arrow.is-prev {
    left: 0.4rem;
  }

  .gallery-arrow.is-next {
    right: 0.4rem;
  }

  .gallery-counter {
    top: 0.75rem;
    left: 0.75rem;
  }

  .gallery-current-image {
    grid-template-columns: 1fr;
  }

  .gallery-filter-bar,
  .gallery-feature-heading {
    grid-template-columns: 1fr;
  }

  .gallery-feature-heading {
    display: grid;
    align-items: start;
  }

  .gallery-bulk-item .form-grid {
    grid-template-columns: 1fr;
  }

  .gallery-bulk-item .form-grid > * {
    grid-column: 1;
  }

  .gallery-current-image img {
    max-height: 260px;
  }

  .language-tabs {
    flex-wrap: wrap;
  }

  .language-tabs span {
    width: 100%;
    margin: 0 0 0.8rem;
  }

  .page-content-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-content-group > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-content-group > summary > span {
    grid-column: 1 / -1;
  }
}

/* BAD WOLF 2.8.1 — PROFESJONALNY CMS */
.professional-editor { border: 1px solid #303036; background: #0a0a0c; min-width: 0; }
.professional-editor .rich-label { display: block; padding: 14px 16px 10px; }
.professional-editor-toolbar {
  position: sticky; top: 0; z-index: 12; display: flex; flex-wrap: wrap; gap: 5px;
  padding: 10px; border-top: 1px solid #202026; border-bottom: 1px solid #303036;
  background: rgba(10, 10, 12, .97); backdrop-filter: blur(12px);
}
.editor-toolbar-group { display: inline-flex; align-items: center; gap: 3px; padding-right: 6px; margin-right: 2px; border-right: 1px solid #2b2b31; }
.professional-editor-toolbar button,
.professional-editor-toolbar select,
.professional-editor-toolbar input[type="color"],
.editor-char-menu summary,
.editor-block-menu summary {
  min-height: 36px; padding: 7px 9px; border: 1px solid #35353b; border-radius: 3px;
  background: #151519; color: #f5f5f5; font: 700 12px/1.1 Arial, sans-serif; cursor: pointer;
}
.professional-editor-toolbar button:hover,
.professional-editor-toolbar button.is-active,
.editor-char-menu summary:hover,
.editor-block-menu summary:hover { border-color: var(--accent, #ed1b2f); background: #2a1015; }
.professional-editor-toolbar input[type="color"] { width: 40px; padding: 3px; }
.editor-fallback-notice {
  display: block; width: 100%; padding: 9px 12px; border-left: 3px solid #ed1b2f;
  background: #251014; color: #fff; font: 700 13px/1.4 Arial, sans-serif;
}
.professional-editor-stage { min-height: 440px; background: #101014; }
.professional-editor-source {
  display: block; width: 100%; min-height: 520px; margin: 0; padding: 24px;
  resize: vertical; border: 0; outline: 0; tab-size: 2;
  background: #08080b; color: #e9e9ec;
  font: 400 14px/1.65 Consolas, "Courier New", monospace;
  white-space: pre; overflow: auto;
}
.professional-editor-source[hidden] { display: none; }
.professional-editor-source:focus { box-shadow: inset 0 0 0 2px rgba(237, 27, 47, .38); }
.professional-editor.is-source-mode .professional-editor-toolbar > :not(.editor-source-toggle) { opacity: .45; }
.professional-editor.is-source-mode .professional-editor-toolbar > .editor-toolbar-group { pointer-events: none; }
.professional-editor-toolbar .editor-source-toggle {
  margin-left: auto; border-color: var(--accent, #ed1b2f); color: #fff;
}
.professional-editor-toolbar .editor-source-toggle.is-active { background: var(--accent, #ed1b2f); }
.professional-editor-content { min-height: 440px; padding: 28px clamp(18px, 4vw, 52px); outline: 0; color: #e9e9ec; font: 400 17px/1.75 Georgia, serif; }
.professional-editor-content:focus { box-shadow: inset 0 0 0 2px rgba(237, 27, 47, .28); }
.professional-editor-content p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: #777781; pointer-events: none; }
.professional-editor-content h2,
.professional-editor-content h3,
.professional-editor-content h4,
.article-body h2,
.article-body h3,
.article-body h4 { margin: 1.6em 0 .55em; color: #fff; font-family: "Roboto Condensed", Impact, sans-serif; line-height: 1.12; text-transform: uppercase; }
.professional-editor-content blockquote,
.article-body blockquote { margin: 1.5em 0; padding: 18px 22px; border-left: 4px solid var(--accent, #ed1b2f); background: #17171b; color: #f3f3f5; }
.professional-editor-content hr,
.article-body hr { margin: 2.5em 0; border: 0; border-top: 1px solid #4a1b22; }
.professional-editor-content a,
.article-body a { color: #ff4052; text-decoration: underline; text-underline-offset: 3px; }
.professional-editor-content table,
.article-body table { width: 100%; margin: 1.6em 0; border-collapse: collapse; overflow-wrap: anywhere; }
.professional-editor-content th,
.professional-editor-content td,
.article-body th,
.article-body td { position: relative; min-width: 80px; padding: 11px 13px; border: 1px solid #393941; vertical-align: top; }
.professional-editor-content th,
.article-body th { background: #2a1015; color: #fff; font-family: Arial, sans-serif; text-align: left; }
.professional-editor-content .selectedCell::after { content: ""; position: absolute; inset: 0; background: rgba(237, 27, 47, .15); pointer-events: none; }
.bw-rich-image { display: block; width: min(var(--image-width, 100%), 100%); margin: 1.8em auto; clear: both; }
.bw-rich-image.align-left { margin-left: 0; margin-right: auto; }
.bw-rich-image.align-center { margin-left: auto; margin-right: auto; }
.bw-rich-image.align-right { margin-left: auto; margin-right: 0; }
.bw-rich-image picture,
.bw-rich-image a { display: block; }
.bw-rich-image img { display: block; width: 100%; height: auto; border: 1px solid #2d2d33; }
.bw-rich-image figcaption { padding: 9px 4px 0; color: #a9a9b0; font: 400 13px/1.45 Arial, sans-serif; text-align: center; }
.professional-editor-content .bw-rich-image { position: relative; }
.professional-editor-content .bw-rich-image.ProseMirror-selectednode { outline: 2px solid var(--accent, #ed1b2f); outline-offset: 5px; }
.bw-image-controls {
  display: none; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  align-items: center; gap: 10px; width: min(92%, 520px); padding: 9px 12px;
  border: 1px solid #44444c; border-radius: 4px; background: rgba(5, 5, 7, .95);
  color: #fff; font: 600 12px/1.2 Arial, sans-serif;
}
.ProseMirror-selectednode .bw-image-controls { display: flex; }
.bw-image-controls label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; flex: 1; }
.bw-image-controls input { width: 100%; }
.bw-image-controls button { padding: 7px 10px; border: 1px solid #ed1b2f; background: #291014; color: #fff; cursor: pointer; }
.professional-editor.is-uploading::after {
  content: "Optymalizuję i wysyłam obraz…"; position: fixed; right: 20px; bottom: 20px; z-index: 200;
  padding: 14px 18px; border: 1px solid #ed1b2f; background: #111; color: #fff; font: 700 13px Arial, sans-serif;
}
.editor-char-menu,
.editor-block-menu { position: relative; }
.editor-char-menu summary,
.editor-block-menu summary { list-style: none; }
.editor-char-menu summary::-webkit-details-marker,
.editor-block-menu summary::-webkit-details-marker { display: none; }
.editor-char-menu > div,
.editor-block-menu > div {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid;
  grid-template-columns: repeat(6, 36px); gap: 3px; padding: 8px; border: 1px solid #3c3c44;
  background: #101014; box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.editor-block-menu > div { width: min(320px, calc(100vw - 44px)); grid-template-columns: 1fr; }
.editor-block-menu > div button { justify-content: flex-start; text-align: left; }
.post-css-field { display: grid; gap: 10px; }
.post-css-editor {
  min-height: 230px;
  padding: 18px;
  border: 1px solid #3a3a41;
  background: #08090b;
  color: #dfe5ec;
  font: 14px/1.6 Consolas, "Liberation Mono", monospace;
  tab-size: 2;
  resize: vertical;
}
.post-css-editor:focus { border-color: var(--accent, #ed1b2f); outline: 0; box-shadow: 0 0 0 2px rgba(237, 27, 47, .18); }
.editor-dialog-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.78); }
.editor-dialog { width: min(620px, 100%); max-height: 90vh; overflow: auto; border: 1px solid #42424a; background: #101014; color: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.8); }
.editor-dialog header,
.editor-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #303036; }
.editor-dialog footer { justify-content: flex-end; border-top: 1px solid #303036; border-bottom: 0; }
.editor-dialog h3 { margin: 0; font-family: "Roboto Condensed", Impact, sans-serif; text-transform: uppercase; }
.editor-dialog header [data-close] { border: 0; background: none; color: #fff; font-size: 26px; cursor: pointer; }
.editor-dialog-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
.editor-dialog-fields label { display: grid; gap: 7px; color: #d8d8dc; font: 700 13px Arial, sans-serif; }
.editor-dialog-fields label:first-child,
.editor-dialog-fields label:nth-child(2),
.editor-dialog-fields label:nth-child(3) { grid-column: 1 / -1; }
.editor-dialog-fields input,
.editor-dialog-fields textarea,
.editor-dialog-fields select { width: 100%; padding: 11px 12px; border: 1px solid #3d3d44; background: #08080a; color: #fff; }
.editor-dialog-fields textarea { min-height: 90px; resize: vertical; }
.editor-dialog-fields .check-line { display: flex; grid-column: 1 / -1; align-items: center; }
.editor-dialog-fields .check-line input { width: auto; }

/* BEZPOŚREDNIA STRONA ARTYKUŁU / SSR */
.article-page-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(48px, 7vw, 96px) 0 90px; }
.article-page-main.is-wide { width: min(1480px, calc(100% - 40px)); }
.article-shell { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(30px, 5vw, 70px); align-items: start; }
.article-shell.is-wide { display: block; }
.article-shell.is-wide > article { width: 100%; min-width: 0; }
.article-hero { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid #3b1b20; }
.article-hero .kicker { color: #ff3044; font: 800 12px/1.2 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.article-hero h1 { max-width: 900px; margin: 12px 0 14px; color: #fff; font: 800 clamp(42px, 7vw, 88px)/.92 "Roboto Condensed", Impact, sans-serif; text-transform: uppercase; }
.article-hero .article-lead { max-width: 800px; color: #c9c9ce; font: 400 clamp(18px, 2vw, 23px)/1.55 Georgia, serif; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; color: #909096; font: 600 12px Arial, sans-serif; }
.article-cover { margin: 0 0 36px; }
.article-cover img { display: block; width: 100%; height: auto; border: 1px solid #2c2c31; }
.article-video { margin: 0 0 32px; }
.article-video video { display: block; width: 100%; max-height: 72vh; background: #000; border: 1px solid #2c2c31; }
.article-video figcaption { padding-top: 9px; color: #a9a9b0; font-size: 13px; }
.article-body { color: #dedee2; font: 400 18px/1.78 Georgia, serif; overflow-wrap: anywhere; }
.article-body > :first-child { margin-top: 0; }
.article-body ul,
.article-body ol { padding-left: 1.4em; }
.article-aside { position: sticky; top: calc(var(--bwp-header-h, 68px) + var(--bwp-sp-5, 24px)); display: grid; gap: 16px; }
.article-aside-card { padding: 20px; border: 1px solid #303036; background: #111115; }
.article-aside-card h2 { margin: 0 0 12px; color: #fff; font: 800 20px "Roboto Condensed", Impact, sans-serif; text-transform: uppercase; }
.article-wide-info {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr) auto; gap: 0;
  margin: 0 0 clamp(28px, 4vw, 48px); border: 1px solid #303036; border-left: 4px solid var(--accent, #ed1b2f); background: #111115;
}
.article-wide-info > div { min-width: 0; padding: 18px 22px; border-right: 1px solid #303036; }
.article-wide-info > div:last-child { border-right: 0; }
.article-wide-info strong,
.article-wide-info > div > span { display: block; margin-bottom: 6px; color: var(--accent, #ed1b2f); font: 800 12px/1.2 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.article-wide-info p { margin: 0; color: #c6c6cc; font: 14px/1.55 Arial, sans-serif; }
.article-wide-action { display: flex; align-items: center; justify-content: center; }
.article-wide-action .button { white-space: nowrap; }
.article-wide-tags { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border-top: 1px solid #303036; border-right: 0 !important; }
.article-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.article-tags a { padding: 7px 9px; border: 1px solid #3b3b42; color: #d6d6db; font: 700 11px Arial, sans-serif; text-decoration: none; }
.article-tags a:hover { border-color: #ed1b2f; color: #fff; }
.article-back { display: inline-flex; margin-bottom: 30px; color: #fff; font: 800 13px Arial, sans-serif; text-decoration: none; }
.article-back:hover { color: #ff3044; }
.not-found-page { min-height: 70vh; display: grid; place-items: center; padding: 50px 20px; text-align: center; }
.not-found-page strong { display: block; color: #ed1b2f; font: 900 clamp(70px, 16vw, 170px)/.8 "Roboto Condensed", Impact, sans-serif; }
.not-found-page h1 { margin: 22px 0 10px; font: 900 clamp(34px, 6vw, 68px)/1 "Roboto Condensed", Impact, sans-serif; text-transform: uppercase; }

@media (max-width: 900px) {
  .article-shell { grid-template-columns: 1fr; }
  .article-aside { position: static; }
  .article-wide-info { grid-template-columns: 1fr 1fr; }
  .article-wide-info > div:nth-child(2) { border-right: 0; }
  .article-wide-action { grid-column: 1 / -1; border-top: 1px solid #303036; border-right: 0 !important; }
  .professional-editor-toolbar { position: static; }
}

@media (max-width: 620px) {
  .professional-editor-content { padding: 20px 14px; font-size: 16px; }
  .editor-toolbar-group { border-right: 0; }
  .professional-editor-toolbar select { max-width: 130px; }
  .editor-dialog-fields { grid-template-columns: 1fr; }
  .editor-dialog-fields label { grid-column: 1 !important; }
  .bw-image-controls { flex-direction: column; }
  .article-page-main { width: min(100% - 24px, 1180px); }
  .article-page-main.is-wide { width: min(100% - 24px, 1480px); }
  .article-body { font-size: 17px; }
  .article-wide-info { grid-template-columns: 1fr; }
  .article-wide-info > div { border-right: 0; border-bottom: 1px solid #303036; }
  .article-wide-info > div:last-child { border-bottom: 0; }
  .article-wide-action { grid-column: auto; }
  .article-wide-action .button { width: 100%; }
}

/* BAD WOLF 2.7 — ARCHIWUM, RELACJE WPISÓW I KOMENTARZE */
.comment-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.comment-item { padding: 18px; border: 1px solid #2d2d33; background: #101014; }
.comment-item header { display: flex; justify-content: space-between; gap: 14px; }
.comment-item header span { margin-left: 8px; color: var(--accent, #ed1b2f); font: 700 11px Arial, sans-serif; text-transform: uppercase; }
.comment-item.is-admin { border-left: 3px solid var(--accent, #ed1b2f); background: #171014; }
.comment-item.is-reply { margin: 14px 0 0 34px; }
.comment-reply-form { display: grid; gap: 8px; margin-top: 14px; }
.comment-reply-form textarea { min-height: 92px; }
.comment-reply-form label { display: grid; gap: 8px; font-weight: 700; }
.admin-account form { margin: 0; }
.post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 42px 0; }
.post-navigation a { display: grid; gap: 7px; min-height: 105px; padding: 18px; border: 1px solid #303036; background: #0e0e11; color: #fff; text-decoration: none; }
.post-navigation a:last-child { text-align: right; }
.post-navigation small { color: var(--accent, #ed1b2f); font: 700 11px Arial, sans-serif; text-transform: uppercase; }
.related-posts { margin: 42px 0; }
.related-posts > h2 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3.4rem); text-transform: uppercase; }
.related-posts > div, .archive-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.related-card { display: grid; align-content: start; border: 1px solid #303036; background: #0d0d10; color: #fff; text-decoration: none; }
.related-card picture, .related-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.related-card > span { padding: 16px; font-family: var(--display); font-size: 1.45rem; line-height: 1.05; text-transform: uppercase; }
.archive-page { width: min(1440px, calc(100% - 48px)); min-height: 70vh; margin: 0 auto; padding: 150px 0 80px; }
.archive-page > header h1 { max-width: 900px; margin: 12px 0 40px; font-family: var(--display); font-size: clamp(3rem, 8vw, 7rem); line-height: .9; text-transform: uppercase; }
.archive-layout { display: grid; grid-template-columns: minmax(220px, .35fr) 1fr; gap: 30px; align-items: start; }
.archive-months { display: grid; position: sticky; top: 100px; border-top: 1px solid #303036; }
.archive-months a { display: flex; justify-content: space-between; gap: 15px; padding: 14px 4px; border-bottom: 1px solid #303036; color: #bdbdc4; text-decoration: none; text-transform: capitalize; }
.archive-months a.is-active, .archive-months a:hover { color: #fff; border-color: var(--accent, #ed1b2f); }
.maintenance-page { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 50% 80%, rgba(226,27,45,.15), transparent 45%), #070707; text-align: center; }
.maintenance-page strong { display: block; color: #3b3b40; font-family: var(--display); font-size: clamp(8rem, 25vw, 22rem); line-height: .7; }
.maintenance-page h1 { margin: 28px 0 12px; font-family: var(--display); font-size: clamp(3rem, 8vw, 7rem); text-transform: uppercase; }
@media (max-width: 820px) {
  .related-posts > div, .archive-posts { grid-template-columns: 1fr; }
  .archive-layout { grid-template-columns: 1fr; }
  .archive-months { position: static; }
  .post-navigation { grid-template-columns: 1fr; }
  .comment-item.is-reply { margin-left: 15px; }
}

/* BAD WOLF 2.8.1 — BLOKI PORADNIKÓW (WYŁĄCZNIE W TREŚCI WPISU) */
.post-content { min-width: 0; }
.post-content img,
.post-content picture,
.post-content video,
.post-content iframe { max-width: 100%; }
.post-content img,
.post-content video { height: auto; }
.post-content iframe { width: 100%; border: 0; aspect-ratio: 16 / 9; }
.post-content .bw-guide {
  --bw-guide-red: var(--accent, #ed1b2f);
  --bw-guide-bg: #0d0f12;
  --bw-guide-panel: #15181d;
  --bw-guide-border: #343a43;
  --bw-guide-text: #d8dbe0;
  max-width: 100%; color: var(--bw-guide-text); overflow-wrap: anywhere;
}
.post-content .bw-guide *,
.post-content .bw-guide *::before,
.post-content .bw-guide *::after { box-sizing: border-box; }
.post-content .bw-guide h2,
.post-content .bw-guide h3,
.post-content .bw-guide h4 { color: #fff; }
.post-content .bw-guide-red { color: var(--bw-guide-red, #ed1b2f); }
.post-content .bw-guide-card,
.post-content .bw-guide-alert,
.post-content .bw-guide-faq details {
  min-width: 0; border: 1px solid var(--bw-guide-border, #343a43); border-radius: 12px;
  background: var(--bw-guide-panel, #15181d); color: var(--bw-guide-text, #d8dbe0);
}
.post-content .bw-guide-card { padding: clamp(18px, 3vw, 30px); }
.post-content .bw-guide-card > :first-child,
.post-content .bw-guide-alert > :first-child { margin-top: 0; }
.post-content .bw-guide-card > :last-child,
.post-content .bw-guide-alert > :last-child { margin-bottom: 0; }
.post-content .bw-guide-alert {
  position: relative; padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 30px) clamp(18px, 3vw, 28px) clamp(24px, 4vw, 38px);
  overflow: hidden; background: linear-gradient(100deg, rgba(237,27,47,.12), rgba(21,24,29,.95) 45%);
}
.post-content .bw-guide-alert::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--bw-guide-red, #ed1b2f); }
.post-content .bw-guide-grid-2,
.post-content .bw-guide-grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.4vw, 24px); margin: clamp(24px, 4vw, 44px) 0; }
.post-content .bw-guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.post-content a.bw-guide-button,
.post-content button.bw-guide-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px;
  border: 1px solid var(--bw-guide-red, #ed1b2f); border-radius: 5px; background: var(--bw-guide-red, #ed1b2f);
  color: #fff; font: 800 13px/1.2 Arial, sans-serif; letter-spacing: .035em; text-align: center; text-decoration: none; cursor: pointer;
}
.post-content a.bw-guide-button:hover,
.post-content button.bw-guide-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.post-content .bw-guide-button.bw-guide-button-outline { background: transparent; color: #fff; }
.post-content .bw-guide-button.bw-guide-button-neutral { border-color: #4a505a; background: #262a31; }
.post-content .bw-guide-faq { display: grid; gap: 10px; margin: 28px 0; }
.post-content .bw-guide-faq details { overflow: clip; }
.post-content .bw-guide-faq summary {
  position: relative; min-height: 54px; padding: 16px 52px 16px 20px; color: #fff;
  font: 800 16px/1.4 Arial, sans-serif; cursor: pointer; list-style: none; touch-action: manipulation;
}
.post-content .bw-guide-faq summary::-webkit-details-marker { display: none; }
.post-content .bw-guide-faq summary::after { content: "+"; position: absolute; top: 50%; right: 20px; color: var(--bw-guide-red, #ed1b2f); font-size: 25px; transform: translateY(-50%); }
.post-content .bw-guide-faq details[open] summary::after { content: "−"; }
.post-content .bw-guide-faq details[open] summary { border-bottom: 1px solid var(--bw-guide-border, #343a43); }
.post-content .bw-guide-faq details > div { padding: 4px 20px 18px; }
.post-content .bw-guide-table-wrap { width: 100%; margin: 28px 0; overflow-x: auto; border: 1px solid var(--bw-guide-border, #343a43); border-radius: 10px; -webkit-overflow-scrolling: touch; }
.post-content table.bw-guide-table { min-width: 620px; margin: 0; }
.post-content .bw-guide-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0; }
.post-content .bw-guide-gallery figure,
.post-content .bw-guide-image { min-width: 0; margin: 0; }
.post-content .bw-guide-gallery img,
.post-content .bw-guide-image img { display: block; width: 100%; border: 1px solid var(--bw-guide-border, #343a43); border-radius: 10px; object-fit: cover; }
.post-content .bw-guide-gallery figcaption,
.post-content .bw-guide-image figcaption { padding: 9px 3px 0; color: #aeb2b9; font: 13px/1.5 Arial, sans-serif; }
.post-content hr.bw-guide-separator { height: 2px; margin: clamp(30px, 5vw, 58px) 0; border: 0; background: linear-gradient(90deg, var(--bw-guide-red, #ed1b2f), rgba(237,27,47,0)); }
.post-content .bw-guide-section-nav { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 34px; }
.post-content .bw-guide-section-nav a { padding: 9px 12px; border: 1px solid #3a4049; border-radius: 5px; color: #fff; font: 700 12px/1.3 Arial, sans-serif; text-decoration: none; }
.post-content [id] { scroll-margin-top: 90px; }
.preview-ribbon-page { position: sticky; top: 0; z-index: 100; padding: 10px 20px; border-bottom: 1px solid #ff3044; background: #451019; color: #fff; font: 800 12px/1.3 Arial, sans-serif; letter-spacing: .08em; text-align: center; }

@media (min-width: 768px) {
  .post-content .bw-guide-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-content .bw-guide-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-content .bw-guide-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .post-content .bw-guide-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-content .bw-guide-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .post-content .bw-guide-actions { align-items: stretch; }
  .post-content a.bw-guide-button,
  .post-content button.bw-guide-button { width: 100%; }
  .post-content .bw-guide-gallery { grid-template-columns: 1fr; }
}