:root {
  --axel-glow-a: rgba(240, 109, 207, 0.18);
  --axel-glow-b: rgba(250, 213, 68, 0.16);
  --axel-panel: rgba(28, 26, 27, 0.9);
  --axel-border: rgba(247, 247, 255, 0.12);
}

.axel-home {
  position: relative;
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  overflow: hidden;
}

.axel-home::before,
.axel-home::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(56px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.axel-home::before {
  width: min(42vw, 520px);
  height: min(42vw, 520px);
  top: 8%;
  left: -120px;
  background: var(--axel-glow-a);
}

.axel-home::after {
  width: min(48vw, 620px);
  height: min(48vw, 620px);
  bottom: 5%;
  right: -160px;
  background: var(--axel-glow-b);
}

.axel-home a {
  color: inherit;
  text-decoration: none;
}

.accent-a {
  color: var(--wp--preset--color--accent-3);
}

.accent-b {
  color: var(--wp--preset--color--accent-1);
}

.axel-section {
  position: relative;
  padding: clamp(64px, 8vw, 120px) 0;
  overflow: visible;
  background: transparent;
}

.axel-wrap {
  position: relative;
  z-index: 1;
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.axel-wrap.wp-block-group,
.axel-wrap.is-layout-constrained {
  max-width: 1800px;
  width: 100%;
}

.axel-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(19, 17, 18, 0.92);
  border-bottom: 1px solid rgba(247, 247, 255, 0.08);
  backdrop-filter: blur(10px);
}

.axel-nav__inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

@media (min-width: 900px) {
  .axel-nav__inner {
    flex-wrap: nowrap;
  }

  .axel-nav__links {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.axel-logo {
  flex: 0 1 30%;
}

.axel-nav__links {
  flex: 0 1 70%;
  justify-content: flex-end;
}

.axel-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.axel-logo__badge {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(240, 109, 207, 0.3);
}

.axel-nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.axel-nav__link {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(247, 247, 255, 0.7);
  transition: all 200ms ease;
}

.axel-nav__link:hover,
.axel-nav__link:focus {
  color: var(--wp--preset--color--accent-1);
  background: rgba(250, 213, 68, 0.12);
}

.axel-nav__cta {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base);
  box-shadow: 0 14px 28px rgba(240, 109, 207, 0.3);
  transition: all 250ms ease;
}

.axel-nav__cta:hover,
.axel-nav__cta:focus {
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base);
  transform: translateY(-1px);
}

/* !important on display/grid-template-columns: this is a core
   wp:columns block, so it also carries WP's own generated classes
   (.wp-block-columns.is-layout-flex { display: flex }), which is a
   2-class selector and beats a plain .axel-hero-grid selector on
   specificity regardless of stylesheet order. Without !important here,
   the block silently stays a flex row at every width except below
   WordPress's own 781px stacking breakpoint, and grid-template-columns
   never applies at all. */
.axel-hero-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 40px;
  align-items: center;
}

@media (min-width: 1024px) {
  .axel-hero-grid {
    grid-template-columns: 1.2fr 0.8fr !important;
  }
}

.axel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(240, 109, 207, 0.35);
  background: rgba(240, 109, 207, 0.12);
  color: var(--wp--preset--color--accent-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.axel-hero-title {
  font-family: var(--wp--preset--font-family--space-grotesk);
  /* Scales smoothly all the way down to ~320px viewports instead of
     hitting a hard floor around 640px (a plain clamp(2.4rem, 6vw, 4.5rem)
     stops shrinking once 6vw < 2.4rem, which happens at 640px wide and
     leaves the heading oversized on small phones). */
  font-size: clamp(1.85rem, 0.6rem + 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 20px 0 24px;
}

.axel-hero-typed {
  display: inline-block;
  white-space: pre-wrap;
}

.axel-hero-typed .accent-world {
  color: var(--wp--preset--color--accent-2);
}

.axel-hero-typed .accent-axel {
  color: var(--wp--preset--color--accent-3);
}

.axel-hero-typed .accent-dumas {
  color: var(--wp--preset--color--accent-1);
}

.axel-hero-caret {
  display: inline-block;
  width: 0.12em;
  height: 0.9em;
  margin-left: 6px;
  background: var(--wp--preset--color--contrast);
  animation: axel-caret 900ms step-end infinite;
  vertical-align: -0.05em;
}

.axel-hero-title span {
  display: inline-block;
}


.axel-hero-copy {
  font-size: 1.1rem;
  color: rgba(247, 247, 255, 0.7);
  max-width: 600px;
  margin-bottom: 28px;
}

.axel-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.axel-chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(247, 247, 255, 0.12);
  background: rgba(28, 26, 27, 0.85);
  font-size: 0.8rem;
  color: rgba(247, 247, 255, 0.72);
  transition: all 200ms ease;
}

.axel-chip:hover {
  border-color: rgba(240, 109, 207, 0.6);
  color: var(--wp--preset--color--accent-3);
}

.axel-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.axel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 2px solid transparent;
  transition: all 220ms ease;
  box-sizing: border-box;
}

/* !important on color: ".axel-home a { color: inherit }" above (a
   class + tag selector) outranks this plain class selector, so
   without it the button silently inherits the section's light text
   color instead of the dark text it needs against the bright pink
   background. */
.axel-btn--primary {
  background: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base) !important;
  box-shadow: 0 16px 32px rgba(240, 109, 207, 0.25);
}

.axel-btn--primary:hover {
  background: var(--wp--preset--color--accent-1);
}

.axel-btn--ghost {
  border-color: rgba(247, 247, 255, 0.25);
  color: rgba(247, 247, 255, 0.8);
}

.axel-btn--ghost:hover {
  border-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--accent-3);
}

.axel-hero-grid,
.axel-hero-grid .wp-block-column {
  overflow: visible;
}

.axel-portrait {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 1 / 1;
  /* The rotating border squares (::before/::after) swing out to roughly
     the box's diagonal at 45deg, well past their -26px/-18px resting
     inset. Reserve that extra room below so the next section never
     paints over the animation's low point. */
  margin: 0 auto clamp(70px, 18vw, 110px);
  overflow: visible;
  --axel-portrait-clip: inset(0% round 24px);
  --axel-portrait-radius: 24px;
}

.axel-portrait::before,
.axel-portrait::after {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 28px;
  border: 2px solid var(--wp--preset--color--accent-3);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

.axel-portrait::before {
  animation: axel-portrait-spin-cw 26s linear infinite;
}

.axel-portrait::after {
  inset: -18px;
  border-color: var(--wp--preset--color--accent-2);
  opacity: 0.75;
  animation: axel-portrait-spin-ccw 30s linear infinite;
}

.axel-portrait__frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: var(--axel-portrait-radius);
  overflow: hidden;
  border: 3px solid rgba(240, 109, 207, 0.3);
  transform: rotate(2deg);
  transition: transform 300ms ease, clip-path 300ms ease, border-radius 300ms ease;
  clip-path: var(--axel-portrait-clip);
}

.axel-portrait__shadow {
  position: absolute;
  inset: 0;
  transform: translate(15px, 15px);
  background: color-mix(in srgb, var(--wp--preset--color--accent-1) 100%, transparent);
  border-radius: var(--axel-portrait-radius);
  clip-path: var(--axel-portrait-clip);
  z-index: 1;
  pointer-events: none;
}

.axel-portrait__frame .wp-block-image {
  aspect-ratio: 1 / 1;
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

.axel-portrait__frame .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.axel-portrait:hover .axel-portrait__frame {
  transform: rotate(0deg);
}

.axel-portrait.shape-circle .axel-portrait__frame {
  clip-path: circle(50% at 50% 50%);
  border-radius: 50%;
}

.axel-portrait.shape-circle {
  --axel-portrait-clip: circle(50% at 50% 50%);
  --axel-portrait-radius: 50%;
}

.axel-portrait.shape-triangle .axel-portrait__frame {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border-radius: 0;
}

.axel-portrait.shape-triangle {
  --axel-portrait-clip: polygon(50% 0%, 100% 100%, 0% 100%);
  --axel-portrait-radius: 0;
}

.axel-portrait.shape-hex .axel-portrait__frame {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  border-radius: 0;
}

.axel-portrait.shape-hex {
  --axel-portrait-clip: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  --axel-portrait-radius: 0;
}

.axel-portrait.shape-blob .axel-portrait__frame {
  clip-path: polygon(20% 8%, 80% 0%, 100% 35%, 90% 85%, 40% 100%, 0% 70%);
  border-radius: 0;
}

.axel-portrait.shape-blob {
  --axel-portrait-clip: polygon(20% 8%, 80% 0%, 100% 35%, 90% 85%, 40% 100%, 0% 70%);
  --axel-portrait-radius: 0;
}

.axel-portrait__trigger {
  position: absolute;
  inset: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.axel-portrait__trigger:focus-visible {
  outline: none;
}

.axel-portrait__sprite {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 200px;
  height: 200px;
  border-radius: 12px;
  background-color: transparent;
  background-image: url("https://axeldumas.com.ar/wp-content/uploads/2026/05/AxelSprite.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  transform: translate(25%, 25%) rotate(-10deg) scale(0.6);
  opacity: 0;
  transition: transform 260ms ease, opacity 260ms ease;
  z-index: 3;
}

@keyframes axel-portrait-spin-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes axel-portrait-spin-ccw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.axel-portrait.is-sprite .axel-portrait__sprite {
  transform: translate(0, 0) rotate(-10deg) scale(1);
  opacity: 1;
}

.axel-portfolio-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}

@media (min-width: 768px) {
  .axel-portfolio-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .axel-portfolio-header__title {
    flex: 0 1 45%;
  }

  .axel-portfolio-header__filters {
    flex: 0 1 55%;
    justify-content: flex-end;
  }
}

.axel-section-title {
  font-family: var(--wp--preset--font-family--space-grotesk);
  /* Same small-viewport fix as .axel-hero-title: a hybrid rem+vw
     preferred value keeps shrinking below the width where a plain vw
     clamp would otherwise floor out. */
  font-size: clamp(1.7rem, 0.9rem + 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 10px 0 0;
}

.axel-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 767px) {
  .axel-filter-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .axel-filter-group::-webkit-scrollbar {
    display: none;
  }

  .axel-filter-btn {
    flex: 0 0 auto;
  }
}

.axel-filter-btn {
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 200ms ease;
}

.axel-filter-btn .wp-block-button__link {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(247, 247, 255, 0.18);
  background: rgba(28, 26, 27, 0.85);
  color: rgba(247, 247, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.axel-filter-btn.active .wp-block-button__link {
  background: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base);
  border-color: transparent;
}

.axel-filter-btn .wp-block-button__link:hover {
  border-color: rgba(240, 109, 207, 0.6);
  color: var(--wp--preset--color--accent-3);
}

.axel-portfolio-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.axel-portfolio-loading .axel-portfolio-grid {
  opacity: 0;
  visibility: hidden;
}

.axel-portfolio-skeletons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.axel-portfolio-skeleton {
  height: 100%;
  min-height: 320px;
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  background-size: 200% 100%;
  animation: axel-skeleton 1.2s ease-in-out infinite;
  border: 1px solid var(--axel-border);
}

@keyframes axel-skeleton {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@media (max-width: 1200px) {
  .axel-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr;
  }

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

@media (max-width: 640px) {
  .axel-portfolio-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
  }

  .axel-portfolio-skeletons {
    grid-template-columns: 1fr;
  }
}

.axel-portfolio-stage {
  position: relative;
}

.axel-portfolio-stage.is-locked .axel-portfolio-grid {
  filter: blur(6px) saturate(0.8);
  pointer-events: none;
  user-select: none;
}

.axel-portfolio-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 20px;
  background: transparent;
  z-index: 2;
  transition: opacity 250ms ease, visibility 250ms ease;
}

.axel-portfolio-scratch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  cursor: crosshair;
  touch-action: none;
}

.axel-portfolio-overlay::after {
  content: "";
  position: absolute;
  inset: -40% 0 0 0;
  background: linear-gradient(120deg, transparent 35%, rgba(112, 233, 235, 0.25) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.axel-portfolio-stage.is-unlocking .axel-portfolio-overlay::after {
  animation: axel-wipe 900ms ease forwards;
}

.axel-portfolio-stage.is-unlocked .axel-portfolio-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.axel-portfolio-overlay__card {
  max-width: 360px;
  text-align: center;
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(19, 17, 18, 0.92);
  border: 1px solid rgba(247, 247, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transition: transform 300ms ease, opacity 300ms ease;
  position: relative;
  z-index: 2;
}

.axel-portfolio-stage.is-unlocking .axel-portfolio-overlay__card {
  transform: scale(0.96);
  opacity: 0.7;
}

.axel-portfolio-overlay__title {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.axel-portfolio-overlay__copy {
  color: rgba(247, 247, 255, 0.7);
  margin: 0;
}

.axel-portfolio-overlay__btn {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  background: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--base);
  transition: transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 12px 24px rgba(112, 233, 235, 0.25);
}

.axel-portfolio-overlay__icon {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%);
}

.axel-portfolio-overlay__status {
  font-size: 0.85rem;
  color: rgba(247, 247, 255, 0.7);
}

.axel-portfolio-overlay__btn:hover {
  transform: translateY(-1px);
}

.axel-portfolio-overlay__skip {
  border: none;
  background: transparent;
  color: rgba(247, 247, 255, 0.6);
  font-size: 0.8rem;
  cursor: pointer;
}

.axel-portfolio-stage.is-unlocked .axel-portfolio-grid {
  filter: none;
  pointer-events: auto;
}

/* Scratch-to-clean minigame is desktop-only (needs a mouse drag, and its
   canvas blocks touch scroll). Force it off at the CSS level too, so
   there's no flash of the locked overlay before JS runs on mobile. */
@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .axel-portfolio-stage.is-locked .axel-portfolio-grid {
    filter: none;
    pointer-events: auto;
  }

  .axel-portfolio-stage .axel-portfolio-overlay {
    display: none;
  }
}

.axel-portfolio-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--axel-panel);
  border: 1px solid var(--axel-border);
  transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.axel-portfolio-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.axel-portfolio-card-link:focus {
  outline: none;
}

.axel-portfolio-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent-3) 70%, transparent) 0 2px, transparent 2.2px);
  background-size: 10px 10px;
  background-position: bottom center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 220ms ease, background-size 320ms ease;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.45) 15%, rgba(0, 0, 0, 0) 30%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.45) 15%, rgba(0, 0, 0, 0) 30%);
}

.axel-portfolio-item:hover::after,
.axel-portfolio-item:focus-within::after {
  opacity: 1;
  background-size: 14px 14px;
}

.wp-block-post-template.is-flex-container.columns-3.axel-portfolio-grid > li,
.wp-block-post-template.is-flex-container.columns-3.axel-portfolio-grid > .wp-block-post {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
}

.wp-block-post-template.is-flex-container.columns-3.axel-portfolio-grid > li > .axel-portfolio-item,
.wp-block-post-template.is-flex-container.columns-3.axel-portfolio-grid > .wp-block-post > .axel-portfolio-item {
  width: 100%;
  height: 100%;
}

.axel-portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
  position: relative;
  z-index: 2;
}

.wp-block-post-featured-image {
  margin: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.wp-block-post-featured-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.axel-portfolio-item:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 109, 207, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.axel-portfolio-item:hover img {
  transform: scale(1.05);
}

.axel-portfolio-content {
  padding: 18px 20px 22px;
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.axel-portfolio-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}

.axel-portfolio-hit:focus {
  outline: none;
}

.axel-portfolio-hit:focus-visible {
  outline: 2px solid rgba(112, 233, 235, 0.85);
  outline-offset: -2px;
  border-radius: 18px;
}


.taxonomy-category.wp-block-post-terms {
  width: fit-content;
  display: inline-block;
  margin-bottom: 10px;
}

.axel-portfolio-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  background: rgba(240, 109, 207, 0.15);
  color: var(--wp--preset--color--accent-3);
}

.axel-portfolio-item.is-hidden,
.axel-portfolio-grid .wp-block-post.is-hidden {
  display: none;
}

.axel-portfolio-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.axel-portfolio-load {
  border: none;
  border-radius: 999px;
  min-height: 44px;
  padding: 12px 26px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  background: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--base);
  box-shadow: 0 12px 24px rgba(112, 233, 235, 0.2);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.axel-portfolio-load:hover,
.axel-portfolio-load:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(112, 233, 235, 0.28);
  outline: none;
}

.axel-portfolio-load.is-hidden {
  display: none;
}

.axel-timeline {
  margin-top: 32px;
  display: grid;
  gap: 20px;
}

.axel-timeline-item {
  border-radius: 16px;
  border: 1px solid var(--axel-border);
  background: rgba(28, 26, 27, 0.8);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}

.axel-timeline-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 180px;
  height: 100%;
  background-image: radial-gradient(circle, var(--axel-timeline-accent, rgba(255, 255, 255, 0.25)) 1px, transparent 1.8px);
  background-size: 10px 10px;
  opacity: 0.45;
  pointer-events: none;
}

.axel-timeline-description {
  font-size: 1.2rem;
}

.axel-timeline-role {
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--wp--preset--color--contrast);
}

.axel-timeline-meta {
  font-size: 1.05rem;
  color: var(--wp--preset--color--accent-3);
  margin: 0 0 10px;
}

.axel-timeline-item {
  color: var(--wp--preset--color--contrast);
}

.axel-timeline-grid > li:nth-child(3n + 1) .axel-timeline-item {
  border-color: var(--wp--preset--color--accent-2);
  box-shadow: 10px 10px 0 var(--wp--preset--color--accent-2);
  --axel-timeline-accent: rgba(112, 233, 235, 0.65);
}

.axel-timeline-grid > li:nth-child(3n + 1) .axel-timeline-meta {
  color: var(--wp--preset--color--accent-2);
}

.axel-timeline-grid > li:nth-child(3n + 2) .axel-timeline-item {
  border-color: var(--wp--preset--color--accent-3);
  box-shadow: 10px 10px 0 var(--wp--preset--color--accent-3);
  --axel-timeline-accent: rgba(240, 109, 207, 0.65);
}

.axel-timeline-grid > li:nth-child(3n + 2) .axel-timeline-meta {
  color: var(--wp--preset--color--accent-3);
}

.axel-timeline-grid > li:nth-child(3n) .axel-timeline-item {
  border-color: var(--wp--preset--color--accent-1);
  box-shadow: 10px 10px 0 var(--wp--preset--color--accent-1);
  --axel-timeline-accent: rgba(250, 213, 68, 0.65);
}

.axel-timeline-grid > li:nth-child(3n) .axel-timeline-meta {
  color: var(--wp--preset--color--accent-1);
}

#skills .axel-skills-body {
  width: 100%;
}

/* The skill chips used to float absolutely-positioned on top of the
   video (centered pre-selection, docked to the bottom edge after),
   which meant they visually overlapped the footage instead of sitting
   below it. Normal flex-column flow puts the chip row after the video
   in its own reserved space every time - no overlap, and nothing gets
   cropped since the container's height now simply grows to fit both. */
/* display/flex-direction !important: same WP core specificity trap as
   .axel-hero-grid, .axel-nav__links, and .axel-footer-gears above -
   this wp:group has the "constrained" layout support, so core also
   stamps .is-layout-constrained/.wp-block-group-is-layout-constrained
   onto it, and that 2-class rule (display: block) beats a plain
   .axel-skills-showcase selector regardless of source order. */
.axel-skills-showcase {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: clamp(20px, 3vw, 32px);
  width: 100%;
  max-width: 100% !important;
  --axel-skill-active-color: var(--wp--preset--color--accent-2);
}

.axel-skills-showcase.wp-block-group,
.axel-skills-showcase.is-layout-constrained {
  max-width: 100% !important;
  width: 100% !important;
}

.axel-skills-video-stage {
  width: min(100%, 1583px);
  max-height: 550px;
  aspect-ratio: 16 / 9;
  height: auto;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin: 0 auto;
}

.axel-skills-video-stage.wp-block-group,
.axel-skills-video-stage.is-layout-constrained {
  max-width: 100% !important;
  width: 100% !important;
}

.axel-skills-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 380ms ease, transform 380ms ease;
  pointer-events: none;
  border-radius: 18px;
  border: 3px solid transparent;
  box-shadow: none;
  overflow: hidden;
}

.axel-skills-video.is-current {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border-color: var(--axel-skill-active-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--axel-skill-active-color) 45%, transparent), 0 0 26px color-mix(in srgb, var(--axel-skill-active-color) 40%, transparent);
  animation: axel-skill-glow 2.2s ease-in-out infinite;
}

.axel-skills-video.is-entering {
  opacity: 0;
  transform: translateY(-24px);
}

.axel-skills-video.is-leaving {
  opacity: 0;
  transform: translateY(24px);
}

.axel-skills-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
}

.axel-skills-figure video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: cover;
  border: 0;
}

.axel-skills-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  width: 100%;
  min-height: 100px;
  margin: 0 auto;
  align-items: stretch;
}

.axel-skill-item {
  border: 1px solid rgba(247, 247, 255, 0.16);
  background: rgba(28, 26, 27, 0.84);
  border-radius: 16px;
  color: var(--wp--preset--color--contrast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 0;
  gap: 8px;
  padding: 12px 10px;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  animation: axel-float 3.8s ease-in-out infinite;
}

.axel-skill-item[data-skill="video-editing"] {
  border-color: var(--wp--preset--color--accent-2);
}

.axel-skill-item[data-skill="web-programming"] {
  border-color: var(--wp--preset--color--accent-3);
}

.axel-skill-item[data-skill="game-dev"] {
  border-color: var(--wp--preset--color--accent-1);
}

.axel-skill-item[data-skill="ux-ui-design"] {
  border-color: var(--wp--preset--color--contrast);
}

.axel-skill-item:nth-child(2) {
  animation-delay: 180ms;
}

.axel-skill-item:nth-child(3) {
  animation-delay: 360ms;
}

.axel-skill-item:nth-child(4) {
  animation-delay: 520ms;
}

.axel-skill-item:hover {
  transform: translateY(-4px);
  border-color: rgba(112, 233, 235, 0.5);
}

.axel-skill-item:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2);
  outline-offset: 2px;
}

.axel-skill-item.is-active {
  border-color: var(--axel-skill-active-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--axel-skill-active-color) 38%, transparent), 0 0 24px color-mix(in srgb, var(--axel-skill-active-color) 45%, transparent);
}

.axel-skill-item__emoji {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 220ms ease, transform 220ms ease;
}

.axel-skill-item.is-active .axel-skill-item__emoji {
  transform: scale(1.08);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--axel-skill-active-color) 75%, transparent));
}

.axel-skill-item__title {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--medium, 1rem);
  line-height: 1.1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

.axel-skill-item__level {
  font-size: var(--wp--preset--font-size--medium, 1rem);
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(247, 247, 255, 0.65);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

@keyframes axel-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes axel-skill-glow {
  0%,
  100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--axel-skill-active-color) 40%, transparent), 0 0 22px color-mix(in srgb, var(--axel-skill-active-color) 28%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--axel-skill-active-color) 65%, transparent), 0 0 36px color-mix(in srgb, var(--axel-skill-active-color) 52%, transparent);
  }
}

.axel-skills-showcase[data-active-skill="video-editing"] {
  --axel-skill-active-color: var(--wp--preset--color--accent-2);
}

.axel-skills-showcase[data-active-skill="web-programming"] {
  --axel-skill-active-color: var(--wp--preset--color--accent-3);
}

.axel-skills-showcase[data-active-skill="game-dev"] {
  --axel-skill-active-color: var(--wp--preset--color--accent-1);
}

.axel-skills-showcase[data-active-skill="ux-ui-design"] {
  --axel-skill-active-color: var(--wp--preset--color--contrast);
}

@media (max-width: 1024px) {
  .axel-skills-video-stage {
    height: auto;
    aspect-ratio: 19 / 8;
    max-height: none;
    width: 100%;
  }

  .axel-skills-list {
    width: 90%;
    min-height: 100px;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
  }

  .axel-skill-item {
    flex: 1 1 calc(50% - 7px);
  }
}

@media (max-width: 640px) {
  /* Was flex-wrap: nowrap with 4 items in a single row: at 375px that
     leaves ~75px per card, which clips multi-word labels like "Web
     Programming" and "UX/UI Design". Wrap to a 2x2 grid instead, same
     as the tablet breakpoint above, so labels have room to read. */
  .axel-skills-list {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .axel-skill-item {
    flex: 1 1 calc(50% - 4px);
    padding: 10px 6px;
  }

  .axel-skills-video-stage {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}


.axel-cta {
  border-radius: 24px;
  border: 1px solid var(--axel-border);
  background: linear-gradient(135deg, rgba(240, 109, 207, 0.2), rgba(250, 213, 68, 0.12));
  padding: clamp(28px, 4vw, 40px);
  display: grid;
  gap: 16px;
}

.axel-cta-title {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: clamp(1.5rem, 0.7rem + 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

.axel-cta-copy {
  color: rgba(247, 247, 255, 0.7);
  max-width: 540px;
}

.axel-footer {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 42vw, 480px);
  display: flex;
  align-items: center;
  background: var(--wp--preset--color--base);
}

/* max-width/margin !important: same WP core specificity trap as the
   hero grid and mobile nav above. This div is a direct child of the
   .is-layout-constrained footer with no alignfull/alignwide class, so
   core's ".is-layout-constrained > :where(...)" rule clamps it to
   content-size (645px) and centers it with "!important" margins -
   which is exactly wrong for a full-bleed decorative background layer
   that's meant to span the entire footer width edge to edge. */
.axel-footer-gears {
  position: absolute;
  inset: 0;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
}

.axel-footer-content {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: clamp(48px, 8vw, 80px);
  padding-bottom: clamp(48px, 8vw, 80px);
}

.axel-footer-title {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: clamp(1.5rem, 0.7rem + 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color: var(--wp--preset--color--contrast);
}

.axel-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.axel-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(247, 247, 255, 0.18);
  background: rgba(28, 26, 27, 0.85);
  color: rgba(247, 247, 255, 0.8);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.axel-footer-link:hover,
.axel-footer-link:focus-visible {
  border-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--accent-3);
  transform: translateY(-1px);
}

.axel-gear {
  position: absolute;
  display: block;
  width: 140px;
  height: 140px;
  background-color: var(--wp--preset--color--accent-2);
  mask-image: url("/wp-content/themes/twentytwentyfive-axel/assets/images/gear.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("/wp-content/themes/twentytwentyfive-axel/assets/images/gear.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  opacity: 0.75;
  animation: axel-gear-spin 18s linear infinite;
}

/* Scattered across the whole footer area (top/left percentages) instead
   of clumped along the bottom edge, so gears fill the full background. */
.gear-1 {
  top: -6%;
  left: -4%;
  width: 190px;
  height: 190px;
  background-color: var(--wp--preset--color--accent-2);
  animation-duration: 24s;
}

.gear-2 {
  top: 55%;
  left: 8%;
  width: 120px;
  height: 120px;
  background-color: var(--wp--preset--color--accent-1);
  animation-duration: 16s;
  animation-direction: reverse;
}

.gear-3 {
  top: 8%;
  left: 22%;
  width: 100px;
  height: 100px;
  background-color: var(--wp--preset--color--accent-3);
  animation-duration: 28s;
}

.gear-4 {
  bottom: -8%;
  left: 2%;
  width: 220px;
  height: 220px;
  background-color: var(--wp--preset--color--accent-2);
  animation-duration: 20s;
  animation-direction: reverse;
}

.gear-5 {
  bottom: 10%;
  left: 34%;
  width: 130px;
  height: 130px;
  background-color: var(--wp--preset--color--accent-1);
  animation-duration: 26s;
}

.gear-6 {
  top: 30%;
  left: 46%;
  width: 90px;
  height: 90px;
  background-color: var(--wp--preset--color--accent-3);
  animation-duration: 14s;
  animation-direction: reverse;
}

.gear-7 {
  top: -8%;
  right: 18%;
  width: 150px;
  height: 150px;
  background-color: var(--wp--preset--color--accent-1);
  animation-duration: 22s;
}

.gear-8 {
  bottom: -6%;
  right: 30%;
  width: 200px;
  height: 200px;
  background-color: var(--wp--preset--color--accent-3);
  animation-duration: 18s;
  animation-direction: reverse;
}

.gear-9 {
  top: 45%;
  right: 22%;
  width: 110px;
  height: 110px;
  background-color: var(--wp--preset--color--accent-2);
  animation-duration: 30s;
}

.gear-10 {
  top: -4%;
  right: -4%;
  width: 180px;
  height: 180px;
  background-color: var(--wp--preset--color--accent-2);
  animation-duration: 24s;
  animation-direction: reverse;
}

.gear-11 {
  top: 60%;
  right: 4%;
  width: 140px;
  height: 140px;
  background-color: var(--wp--preset--color--accent-1);
  animation-duration: 16s;
}

.gear-12 {
  bottom: -10%;
  right: -6%;
  width: 210px;
  height: 210px;
  background-color: var(--wp--preset--color--accent-3);
  animation-duration: 28s;
  animation-direction: reverse;
}

@media (max-width: 640px) {
  .axel-footer {
    min-height: clamp(320px, 70vw, 420px);
  }

  .axel-gear {
    opacity: 0.6;
  }
}

.axel-click-burst {
  position: relative;
  overflow: hidden;
}

.axel-burst {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background-image: radial-gradient(circle, var(--wp--preset--color--accent-3) 0 2px, transparent 2.5px);
  background-position: center;
  mask-image: radial-gradient(circle, transparent 0 32%, #000 38% 72%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 32%, #000 38% 72%, transparent 74%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.85;
  animation: axel-burst 500ms ease-out forwards;
  pointer-events: none;
}

.axel-burst::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background-image: radial-gradient(circle, var(--wp--preset--color--accent-1) 0 2px, transparent 2.5px);
  background-position: center;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.7;
  animation: axel-burst-cian 500ms ease-out forwards;
  mask-image: radial-gradient(circle, transparent 0 32%, #000 38% 72%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 32%, #000 38% 72%, transparent 74%);
}

@keyframes axel-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 3;
    background-size: 10px 10px;
    -webkit-mask-image: radial-gradient(circle, #000 0 100%);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
    background-size: 15px 15px;
    -webkit-mask-image: radial-gradient(circle, transparent 0 32%, #000 38% 72%, transparent 74%);
  }
}

@keyframes axel-burst-cian {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 3;
    background-size: 10px 10px;
    -webkit-mask-image: radial-gradient(circle, #000 0 100%);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.23);
    opacity: 0;
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(circle, transparent 0 32%, #000 38% 72%, transparent 74%);
  }
}

@keyframes axel-gear-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes axel-caret {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

@keyframes axel-wipe {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

.axel-nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(247, 247, 255, 0.18);
  border-radius: 12px;
  background: rgba(28, 26, 27, 0.85);
  cursor: pointer;
  flex-shrink: 0;
}

.axel-nav__toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--wp--preset--color--contrast);
  transition: transform 220ms ease, opacity 220ms ease;
}

.axel-nav__toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.axel-nav__toggle[aria-expanded="true"] .axel-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

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

@media (max-width: 899px) {
  .axel-nav__toggle {
    display: inline-flex;
  }

  .axel-logo {
    flex: 1 1 auto;
  }

  /* Toggle with display:none/flex rather than animating max-height.
     An animated height needs a JS-measured (or guessed) pixel target,
     which broke twice: a fixed guess clipped the CTA, and a
     scrollHeight measurement still clipped it under the real WP block
     markup. display:none lets the browser lay out the panel at its
     true natural height every time, so it can never be too short.

     !important on both display rules: this is a wp:group block with
     the "flex" layout support turned on, so WP also stamps
     .is-layout-flex and .wp-block-group-is-layout-flex onto it. Core's
     ".wp-block-group.is-layout-flex { display: flex }" is a 2-class
     selector and beats a plain .axel-nav__links selector on
     specificity no matter the stylesheet order, so without !important
     the menu never actually collapses on mobile - it silently stays a
     visible flex row underneath the hamburger button at every width. */
  .axel-nav__links {
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex-basis: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .axel-nav__links.is-open {
    display: flex !important;
    padding-top: 12px;
    animation: axel-nav-links-in 220ms ease;
  }

  @keyframes axel-nav-links-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .axel-nav__link,
  .axel-nav__cta {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 0.95rem;
  }

  .axel-nav__cta {
    margin-top: 4px;
  }

  .axel-nav__toggle {
    width: 48px;
    height: 48px;
  }
}

/* =========================================================
   Blog / single post / archive / search / 404 templates.
   These are core WP templates (not the axel-* patterns above),
   scoped under .axel-blog so they read as part of the same site
   instead of the default block-theme look.
   ========================================================= */

.axel-blog {
  padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.axel-blog .wp-block-post-terms a,
.axel-single-tags .wp-block-post-terms a {
  color: var(--wp--preset--color--accent-2);
  text-decoration: none;
}

.axel-blog .wp-block-post-terms a:hover {
  text-decoration: underline;
}

/* Archive/search "query title" (e.g. "Categoría: Videojuegos") */
.axel-blog-title.wp-block-query-title,
.axel-blog .wp-block-query-title {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: clamp(1.7rem, 0.9rem + 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 8px;
}

.axel-blog-term-description {
  color: rgba(247, 247, 255, 0.7);
  max-width: 700px;
  margin-bottom: 24px;
}

.axel-blog-heading.wp-block-heading,
.axel-blog h1.wp-block-heading:first-child {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: clamp(1.7rem, 0.9rem + 4vw, 3.2rem);
  font-weight: 800;
  margin: 0 0 24px;
}

/* --- Blog listing cards (reuses .axel-portfolio-grid/.axel-portfolio-item) --- */

.axel-blog-grid {
  margin-top: 24px;
}

.axel-blog-excerpt {
  color: rgba(247, 247, 255, 0.7);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.axel-blog-date.wp-block-post-date {
  display: block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: rgba(247, 247, 255, 0.5);
}

.axel-blog-pagination {
  margin-top: 40px;
}

.axel-blog-pagination .wp-block-query-pagination-previous,
.axel-blog-pagination .wp-block-query-pagination-next,
.axel-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(247, 247, 255, 0.18);
  background: rgba(28, 26, 27, 0.85);
  color: rgba(247, 247, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 200ms ease;
  box-sizing: border-box;
}

.axel-blog-pagination .page-numbers.current {
  background: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base);
  border-color: transparent;
}

.axel-blog-pagination .wp-block-query-pagination-previous:hover,
.axel-blog-pagination .wp-block-query-pagination-next:hover,
.axel-blog-pagination .page-numbers:hover {
  border-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--accent-3);
}

/* --- Single post --- */

.axel-wrap.axel-single {
  max-width: 880px;
}

.axel-single-category.axel-portfolio-tag {
  margin-bottom: 16px;
}

.axel-single-title.wp-block-post-title {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: clamp(1.85rem, 0.6rem + 6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 16px;
}

.axel-single-featured.wp-block-post-featured-image {
  margin: 0 0 32px;
  border-radius: 20px;
  overflow: hidden;
}

.axel-single-featured img {
  border-radius: 20px;
  display: block;
}

.axel-single-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(247, 247, 255, 0.85);
}

.axel-single-content > * {
  max-width: 100%;
}

.axel-single-content p,
.axel-single-content ul,
.axel-single-content ol {
  margin-bottom: 1.3em;
}

.axel-single-content h2,
.axel-single-content h3,
.axel-single-content h4 {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 700;
  margin: 1.6em 0 0.6em;
}

.axel-single-content a {
  color: var(--wp--preset--color--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.axel-single-content a:hover {
  color: var(--wp--preset--color--accent-3);
}

/* max-width/width here (not just the ".axel-single-content > *" rule
   above, which only reaches direct children): several imported posts
   use Jetpack tiled-gallery markup, which nests raw <img> tags several
   levels deep with no wrapping .wp-block-image class and no inline
   width constraint of its own. Without this, those images render at
   their native pixel width (some over 2500px) and blow out the
   content column horizontally. */
.axel-single-content img,
.axel-single-content video,
.axel-single-content iframe {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.axel-single-content blockquote {
  border-left: 3px solid var(--wp--preset--color--accent-3);
  padding-left: 20px;
  color: rgba(247, 247, 255, 0.75);
  font-style: italic;
}

.axel-single-tags {
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.axel-single-tags .wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.axel-single-tags .wp-block-post-terms a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(240, 109, 207, 0.15);
  color: var(--wp--preset--color--accent-3);
}

/* --- Post navigation (prev/next) --- */

.axel-post-nav-wrap {
  border-top: 1px solid var(--axel-border);
  padding-top: 32px;
}

.axel-post-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid rgba(247, 247, 255, 0.25);
  color: rgba(247, 247, 255, 0.8) !important;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 220ms ease;
  box-sizing: border-box;
  max-width: 100%;
}

.axel-post-nav-link:hover {
  border-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--accent-3) !important;
}

.axel-post-nav-link .wp-block-post-navigation-link__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- More posts --- */

/* The comments pattern above already adds a large fluid bottom margin
   (spacing-70), so stacking the section's usual clamp(64-120px) top
   padding on top of it left a huge dead gap on single post pages.
   Override to a fixed, modest value for just this section. */
.axel-more-posts {
  padding-top: 24px;
}

.axel-more-posts .axel-pill {
  margin-bottom: 16px;
}

/* This grid now lives inside .axel-single (880px, matching the post's
   own reading column - not the full 1800px page width), so it doesn't
   have room for the home grid's 3-column layout. 2x2 fits 4 posts at
   a comfortable size without an awkward lone leftover card. Scoped to
   viewport, not container width (this container's width is fixed
   regardless of viewport), so it's gated to exclude the existing
   single-column mobile breakpoint below. */
@media (min-width: 641px) {
  .axel-more-posts-grid.axel-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- Comments --- */

.axel-comments {
  border-top: 1px solid var(--axel-border);
  padding-top: 40px;
  margin-bottom: 0 !important;
}

.axel-comments h2,
.axel-comments h3 {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 800;
}

.axel-comment {
  border-radius: 16px;
  border: 1px solid var(--axel-border);
  background: rgba(28, 26, 27, 0.6);
  padding: 20px;
}

.axel-comment .wp-block-avatar img {
  border-radius: 999px;
}

.axel-comments .comment-reply-link,
.axel-comments .comment-edit-link {
  color: var(--wp--preset--color--accent-2);
}

.axel-comments .wp-block-comments-pagination .wp-block-comments-pagination-previous,
.axel-comments .wp-block-comments-pagination .wp-block-comments-pagination-next {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(247, 247, 255, 0.18);
  color: rgba(247, 247, 255, 0.8);
  text-decoration: none;
}

.axel-comments textarea,
.axel-comments input:not([type="submit"]) {
  background: rgba(28, 26, 27, 0.85);
  border: 1px solid rgba(247, 247, 255, 0.18) !important;
  color: var(--wp--preset--color--contrast);
}

.axel-comments .wp-block-button__link {
  background: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base);
  border-radius: 999px;
}

/* --- Search form + 404 --- */

.axel-blog .wp-block-search__input {
  background: rgba(28, 26, 27, 0.85);
  border-color: rgba(247, 247, 255, 0.25) !important;
  color: var(--wp--preset--color--contrast);
}

.axel-blog .wp-block-search__button {
  background: var(--wp--preset--color--accent-3) !important;
  color: var(--wp--preset--color--base) !important;
  border-color: transparent !important;
}

.axel-blog .wp-block-image img {
  border-radius: 20px;
}

@media (max-width: 640px) {
  .axel-single-title.wp-block-post-title {
    font-size: clamp(1.6rem, 1rem + 7vw, 2.6rem);
  }

  .axel-post-nav-link {
    flex: 1 1 auto;
    justify-content: center;
  }

  .axel-post-nav {
    width: 100%;
  }
}

/* --- Reading progress bar (single posts) --- */

.axel-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  /* Above WP's admin bar (z-index: 99999) - without this the bar was
     invisible to any logged-in user, since the admin bar is also
     position:fixed at the same top-left corner and painted on top. */
  z-index: 100000;
  pointer-events: none;
}

.axel-reading-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-2), var(--wp--preset--color--accent-3));
  transition: width 100ms linear;
}

/* --- Margin "stars" (single posts, desktop only) ---
   Decorative CMYK dots in the empty margins beside the ~880px reading
   column. Off by default: only enough margin space to place them
   without crowding the text exists from ~1300px wide up, and they'd
   have nowhere to go at all below the single-column breakpoint. */
.axel-single-stars {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.axel-single-star {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--star-color, var(--wp--preset--color--accent-2));
  box-shadow: 0 0 8px 2px var(--star-color, var(--wp--preset--color--accent-2));
  opacity: 0.15;
  animation: axel-star-twinkle 3.6s ease-in-out infinite;
}

@keyframes axel-star-twinkle {
  0%,
  100% {
    opacity: 0.12;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.15);
  }
}

@media (min-width: 1300px) {
  .axel-single-stars {
    display: block;
  }
}