/* Home — Retro-Futurist portal (Direction 5) */
:root {
  --ink: var(--a92-ink, #14213D);
  --paper: var(--a92-paper, #FDF0D5);
  --white: var(--a92-white, #FFFCF5);
  --primary: var(--a92-primary, #FF6B35);
  --accent: var(--a92-accent, #F7C548);
  --mute: var(--a92-mute, #3D4A66);
  --display: var(--font-display, "Righteous", sans-serif);
  --body: var(--font-body, "Work Sans", sans-serif);
}

body.page-portal-index {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
}

.axis-portal {
  overflow-x: clip;
}

/* ── Hero ── */
.axis-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: min(88vh, 720px);
  background:
    repeating-conic-gradient(
      from 0deg at 0% 50%,
      rgba(255, 107, 53, 0.09) 0deg 8deg,
      transparent 8deg 16deg
    ),
    var(--paper);
  border-bottom: 4px solid var(--ink);
}

.axis-hero__signal {
  position: absolute;
  left: -0.05em;
  top: 8%;
  font-family: var(--display);
  font-size: clamp(8rem, 28vw, 18rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 3px rgba(20, 33, 61, 0.12);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.axis-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  background: linear-gradient(135deg, var(--accent) 0%, var(--paper) 55%);
  border-right: 4px solid var(--ink);
}

.axis-kicker {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.85rem;
}

.axis-hero__copy h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 400;
  max-width: 11ch;
  margin: 0 0 1rem;
  line-height: 1.02;
  color: var(--ink);
  text-shadow: 4px 4px 0 rgba(255, 107, 53, 0.35);
}

.axis-lede {
  margin: 0 0 1.5rem;
  max-width: 36ch;
  font-family: var(--body);
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--mute);
}

.axis-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ── Buttons / CTAs ── */
.axis-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: fit-content;
  min-height: 3.1rem;
  padding: 0.9rem 1.45rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--primary);
  color: var(--white);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.axis-action span {
  font-size: 1.1em;
  line-height: 1;
}

.axis-action:hover,
.axis-action:focus-visible {
  background: var(--ink);
  color: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--primary);
}

.axis-action:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.axis-action:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--ink);
}

.axis-action--primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 5px 5px 0 var(--ink);
}

.axis-action--primary:hover,
.axis-action--primary:focus-visible {
  background: var(--ink);
  color: var(--accent);
  box-shadow: 7px 7px 0 var(--accent);
}

.axis-action--accent {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--primary);
}

.axis-action--accent:hover,
.axis-action--accent:focus-visible {
  background: var(--primary);
  color: var(--white);
  box-shadow: 7px 7px 0 var(--accent);
}

/* Legacy aliases kept for any cached markup */
.axis-action--cyan { background: var(--primary); color: var(--white); }
.axis-action--magenta { background: var(--accent); color: var(--ink); box-shadow: 5px 5px 0 var(--primary); }
.axis-action--magenta:hover,
.axis-action--magenta:focus-visible {
  background: var(--primary);
  color: var(--white);
  box-shadow: 7px 7px 0 var(--accent);
}

/* ── Hero product panel ── */
.axis-hero__product {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  background: var(--ink);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  transition: background 0.15s ease;
}

.axis-hero__product:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -6px;
}

.axis-hero__product:hover {
  background: #0f1830;
}

.axis-hero__orbit {
  align-self: flex-start;
  margin-left: 12%;
  margin-bottom: 0.75rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.axis-hero__product img {
  width: min(100%, 340px);
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid var(--accent);
  border-radius: 0;
  transform: rotate(2deg);
  box-shadow: 10px 10px 0 var(--primary);
  transition: transform 0.25s ease;
}

.axis-hero__product:hover img {
  transform: rotate(-2deg) scale(1.03);
}

.axis-hero__caption {
  margin-top: 1.1rem;
  margin-left: 8%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--white);
  text-align: left;
  align-self: flex-start;
}

.axis-hero__caption strong {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
}

.axis-hero__caption b {
  color: var(--accent);
  font-family: var(--body);
  font-size: 1.1rem;
  font-weight: 800;
}

/* ── Metrics (below hero) ── */
.axis-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-bottom: 4px solid var(--ink);
  background: var(--white);
}

.axis-metrics > div {
  padding: 1.15rem 1.35rem;
  border-right: 3px solid var(--ink);
}

.axis-metrics > div:last-child { border-right: 0; }

.axis-metrics dt {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.25rem;
}

.axis-metrics dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ink);
}

/* ── Sections ── */
.axis-categories,
.axis-featured {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3.5rem 0;
}

.axis-section-title {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
}

.axis-section-title span {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.axis-section-title h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 400;
  max-width: 16ch;
  margin: 0;
  color: var(--ink);
}

.axis-section-title--right {
  align-items: flex-end;
  text-align: right;
}

.axis-category-stream {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.axis-category {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.15rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.axis-category:nth-child(odd) { transform: rotate(-1deg); }
.axis-category:nth-child(even) { transform: rotate(1deg); }
.axis-category--2 { background: var(--accent); }
.axis-category--3 { background: var(--primary); color: var(--white); }

.axis-category:hover,
.axis-category:focus-visible {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}

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

.axis-category span {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--primary);
}

.axis-category--3 span { color: var(--accent); }

.axis-category strong {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
}

.axis-category small {
  font-family: var(--body);
  font-weight: 700;
  opacity: 0.8;
}

.axis-product-field {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.35rem;
}

.axis-product {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.axis-product--1 { transform: rotate(-1.5deg); }
.axis-product--2 { transform: rotate(1deg); }
.axis-product--3 { transform: rotate(-0.8deg); }
.axis-product--4 { transform: rotate(1.4deg); }

.axis-product:hover {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--primary);
}

.axis-product__image {
  display: block;
  position: relative;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}

.axis-product__image:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.axis-product__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.axis-product__index {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--ink);
  padding: 0.15rem 0.4rem;
  font-family: var(--display);
  font-size: 0.85rem;
}

.axis-product__body {
  padding: 0.9rem 1rem 1.05rem;
}

.axis-product__body h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 0.4rem;
}

.axis-product__body h3 a {
  color: inherit;
  text-decoration: none;
}

.axis-product__body h3 a:hover,
.axis-product__body h3 a:focus-visible {
  color: var(--primary);
}

.axis-product__body h3 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.axis-product__body p {
  margin: 0;
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  font-family: var(--body);
}

.axis-product__body strong {
  color: var(--primary);
  font-weight: 800;
}

.axis-product__body s {
  color: var(--mute);
  font-size: 0.85rem;
}

/* ── Exit band ── */
.axis-exit {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: none;
  margin: 2rem 0 0;
  padding: 4rem 1.25rem 3.5rem;
  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%);
  background: var(--ink);
  color: var(--white);
}

.axis-exit p {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  margin: 0;
  color: var(--accent);
}

.axis-exit__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.axis-text-link {
  color: var(--white);
  font-family: var(--body);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: color 0.15s ease;
}

.axis-text-link:hover,
.axis-text-link:focus-visible {
  color: var(--accent);
}

.axis-text-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .axis-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .axis-hero__copy {
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
    border-right: 0;
    border-bottom: 4px solid var(--ink);
    padding: 1.75rem 1.15rem 2rem;
  }

  .axis-hero__copy h1 { max-width: none; }

  .axis-hero__product {
    clip-path: none;
    padding: 1.75rem 1.15rem 2rem;
  }

  .axis-hero__orbit,
  .axis-hero__caption {
    margin-left: 0;
    align-self: center;
    text-align: center;
  }

  .axis-hero__actions {
    width: 100%;
  }

  .axis-metrics { grid-template-columns: 1fr; }
  .axis-metrics > div {
    border-right: 0;
    border-bottom: 3px solid var(--ink);
  }
  .axis-metrics > div:last-child { border-bottom: 0; }

  .axis-categories,
  .axis-featured {
    padding: 2.5rem 0;
  }

  .axis-section-title--right {
    align-items: flex-start;
    text-align: left;
  }

  .axis-category:nth-child(odd),
  .axis-category:nth-child(even),
  .axis-product--1,
  .axis-product--2,
  .axis-product--3,
  .axis-product--4 {
    transform: none;
  }

  .axis-category:hover,
  .axis-category:focus-visible,
  .axis-product:hover {
    transform: translate(-2px, -2px);
  }

  .axis-action {
    width: 100%;
    max-width: 20rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .axis-action,
  .axis-category,
  .axis-product,
  .axis-hero__product img {
    transition: none;
  }
}