.smoki-page {
  overflow: clip;
}

.smoki-page .smoki-hero {
  position: relative;
  padding-block: var(--space-8) var(--space-9);
  background: linear-gradient(130deg, var(--color-sky-100), var(--color-pearl-100) 48%, #e9ddf7);
}

.smoki-page .smoki-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  align-items: center;
  gap: var(--space-6);
}

.smoki-page .smoki-hero__copy {
  z-index: 1;
  display: flex;
  min-width: 0;
  max-width: 42.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-float);
}

.smoki-page .smoki-hero__copy h1,
.smoki-page .smoki-hero__copy p,
.smoki-page .smoki-hero__copy .eyebrow {
  margin: 0;
}

.smoki-page .smoki-hero__copy .lead {
  max-width: 35rem;
  color: var(--color-pearl-050);
}

.smoki-page .smoki-hero__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.smoki-page .smoki-hero__actions > * { min-width: 0; }

.smoki-page .smoki-hero__note {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1px solid rgba(221, 243, 255, 0.25);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, 0.09);
  padding: var(--space-3);
}

.smoki-page .smoki-hero__note svg {
  width: 1.75rem;
  min-width: 1.75rem;
  stroke: var(--color-gold-500);
  stroke-width: 1.5;
  fill: none;
}

.smoki-page .smoki-hero__note p { margin: 0; color: var(--color-sky-100); font-size: var(--text-sm); line-height: 1.5; }

.smoki-page .smoki-hero__art { min-width: 0; margin: 0; }
.smoki-page .smoki-hero__art img { width: 100%; min-width: 0; min-height: 35rem; border-radius: var(--radius-xl); object-fit: cover; box-shadow: var(--shadow-card); }

.smoki-page .smoki-reading__intro { max-width: 38.75rem; }
.smoki-page .smoki-reading__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.smoki-page .smoki-reading__grid > * { min-width: 0; }
.smoki-page .smoki-pillar { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.smoki-page .smoki-pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.smoki-page .smoki-pillar__number { display: block; margin-bottom: var(--space-5); color: var(--color-gold-500); font-family: var(--font-heading); font-size: 3rem; font-weight: 700; line-height: 1; }

.smoki-page .smoki-gallery { background: rgba(221, 243, 255, 0.3); }
.smoki-page .smoki-gallery__intro { max-width: 40rem; }
.smoki-page .smoki-gallery__scroller { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); min-width: 0; }
.smoki-page .smoki-portrait { min-width: 0; transition: transform var(--transition-base), border-color var(--transition-base); }
.smoki-page .smoki-portrait:hover,
.smoki-page .smoki-portrait:focus-within { transform: translateY(-3px); border-color: var(--color-gold-500); }
.smoki-page .smoki-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.smoki-page .smoki-portrait .card__content { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.smoki-page .smoki-portrait .card__content > * { margin: 0; }
.smoki-page .smoki-portrait small { color: var(--color-text-muted); }
.smoki-page .smoki-portrait--cloud,
.smoki-page .smoki-portrait--night { grid-column: span 5; }
.smoki-page .smoki-portrait--volcano,
.smoki-page .smoki-portrait--crystal { grid-column: span 7; }
.smoki-page .smoki-portrait--forest,
.smoki-page .smoki-portrait--portal { grid-column: span 6; }
.smoki-page .smoki-gallery__status { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }

.smoki-page .smoki-rarity__intro { max-width: 40.625rem; }
.smoki-page .smoki-rarity__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.smoki-page .smoki-rarity__cards > * { min-width: 0; }
.smoki-page .smoki-rarity__card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); border-radius: var(--radius-lg); padding: var(--space-6); }
.smoki-page .smoki-rarity__card > * { margin: 0; }
.smoki-page .smoki-rarity__card--legendary { border: 1px solid var(--color-border); border-top: 2px solid var(--color-gold-500); background: var(--color-pearl-100); }
.smoki-page .smoki-rarity__questions { width: min(100%, 33.75rem); margin-top: var(--space-6); }
.smoki-page .smoki-rarity__questions ol { display: flex; flex-direction: column; gap: var(--space-3); }

.smoki-page .smoki-book__panel { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(var(--space-6), 5vw, var(--space-9)); }
.smoki-page .smoki-book__intro { width: min(100%, 42.5rem); margin-inline: auto; text-align: center; }
.smoki-page .smoki-book__intro .lead { max-width: 37.5rem; margin-inline: auto; }
.smoki-page .smoki-book__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); border-top: 1px solid rgba(201, 148, 50, 0.6); padding-top: var(--space-6); }
.smoki-page .smoki-book__steps > * { min-width: 0; }
.smoki-page .smoki-book__steps article { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.smoki-page .smoki-book__steps article > * { margin: 0; }
.smoki-page .smoki-book__steps span { color: var(--color-gold-500); font-family: var(--font-heading); font-size: 2rem; font-weight: 700; }
.smoki-page .smoki-book blockquote { width: min(100%, 37.5rem); margin: var(--space-7) auto 0; color: var(--color-pearl-050); }

.smoki-page .smoki-fights__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--space-8); }
.smoki-page .smoki-fights__layout > * { min-width: 0; }
.smoki-page .smoki-fights__intro { max-width: 37.5rem; }
.smoki-page .smoki-fights__timeline { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); border-inline-start: 1px solid var(--color-gold-500); padding-inline-start: var(--space-5); }
.smoki-page .smoki-fights__timeline article { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.smoki-page .smoki-fights__timeline article > * { min-width: 0; }
.smoki-page .smoki-fights__timeline article > span { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--color-amethyst-700); color: #fff; font-size: var(--text-sm); font-weight: 700; }
.smoki-page .smoki-fights__timeline article > div { display: flex; min-width: 0; max-width: 29.5rem; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.smoki-page .smoki-fights__timeline article > div > * { margin: 0; }
.smoki-page .smoki-fights__timeline article:nth-child(2) > div { border-radius: var(--radius-md); background: var(--color-sky-100); padding: var(--space-4); }

.smoki-page .smoki-paths { background: linear-gradient(180deg, rgba(247, 244, 238, 0), rgba(233, 221, 247, 0.52)); }
.smoki-page .smoki-paths__intro { max-width: 38.75rem; }
.smoki-page .smoki-paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.smoki-page .smoki-paths__grid > * { min-width: 0; }
.smoki-page .smoki-path-card { position: relative; display: block; min-width: 0; min-height: 26.25rem; overflow: hidden; border-radius: var(--radius-lg); color: #fff; text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.smoki-page .smoki-path-card:hover { transform: translateY(-3px); color: #fff; box-shadow: var(--shadow-float); }
.smoki-page .smoki-path-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.smoki-page .smoki-path-card__overlay { position: absolute; inset: auto 0 0; display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); background: linear-gradient(180deg, transparent, rgba(36, 26, 58, 0.96) 36%); padding: var(--space-8) var(--space-6) var(--space-6); }
.smoki-page .smoki-path-card__overlay .eyebrow { color: var(--color-sky-100); margin: 0; }
.smoki-page .smoki-path-card__title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: 700; line-height: 1.2; }
.smoki-page .smoki-path-card__overlay strong { color: var(--color-gold-500); font-size: var(--text-sm); letter-spacing: 0.08em; }
.smoki-page .smoki-paths__tip { max-width: 38.75rem; margin-top: var(--space-5); }

.smoki-page .smoki-transparency { background: rgba(221, 243, 255, 0.24); }
.smoki-page .smoki-transparency__block { width: min(100%, 51.67rem); }
.smoki-page .smoki-transparency__cards { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.smoki-page .smoki-transparency__cards > * { min-width: 0; }
.smoki-page .smoki-transparency__cards .surface--dark { padding: var(--space-5); }

.smoki-page .smoki-next__intro { max-width: 35rem; }
.smoki-page .smoki-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.smoki-page .smoki-next__grid > * { min-width: 0; }
.smoki-page .smoki-next__card { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-pearl-100); padding: var(--space-5); color: var(--color-text); text-decoration: none; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.smoki-page .smoki-next__card:hover { transform: translateY(-3px); color: var(--color-amethyst-700); box-shadow: var(--shadow-card); }
.smoki-page .smoki-next__card > * { min-width: 0; }
.smoki-page .smoki-next__card > span:first-child { color: var(--color-gold-500); font-size: 1.75rem; line-height: 1; }
.smoki-page .smoki-next__card h3 { margin-bottom: var(--space-2); }
.smoki-page .smoki-next__card p { margin: 0; }
.smoki-page .smoki-next__cta { display: flex; width: min(100%, 35rem); min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-6); }
.smoki-page .smoki-next__cta p { margin: 0; }

@media (max-width: 67.49rem) {
  .smoki-page .smoki-gallery__scroller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smoki-page .smoki-portrait { grid-column: auto; }
}

@media (max-width: 61.24rem) {
  .smoki-page .smoki-hero__layout { grid-template-columns: minmax(0, 1fr); }
  .smoki-page .smoki-hero__copy { max-width: 42.5rem; }
  .smoki-page .smoki-hero__art img { min-height: 25rem; }
}

@media (max-width: 58.74rem) {
  .smoki-page .smoki-reading__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smoki-page .smoki-reading__grid > :last-child { grid-column: 1 / -1; }
  .smoki-page .smoki-book__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smoki-page .smoki-book__steps > :last-child { grid-column: 1 / -1; }
  .smoki-page .smoki-fights__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

@media (max-width: 56.24rem) {
  .smoki-page .smoki-rarity__cards { grid-template-columns: minmax(0, 1fr); }
  .smoki-page .smoki-transparency__block { width: 100%; }
}

@media (max-width: 52.49rem) {
  .smoki-page .smoki-paths__grid { grid-template-columns: minmax(0, 1fr); }
  .smoki-page .smoki-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smoki-page .smoki-next__grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 42.49rem) {
  .smoki-page .smoki-hero { padding-block: var(--space-6); }
  .smoki-page .smoki-hero__copy { gap: var(--space-4); padding: var(--space-5); }
  .smoki-page .smoki-hero__actions { width: min(100%, 22.5rem); flex-direction: column; }
  .smoki-page .smoki-hero__actions .button { width: 100%; }
  .smoki-page .smoki-hero__art img { min-height: 0; aspect-ratio: 4 / 3; }
  .smoki-page .smoki-reading__grid,
  .smoki-page .smoki-book__steps,
  .smoki-page .smoki-next__grid { grid-template-columns: minmax(0, 1fr); }
  .smoki-page .smoki-reading__grid > :last-child,
  .smoki-page .smoki-book__steps > :last-child,
  .smoki-page .smoki-next__grid > :last-child { grid-column: auto; }
  .smoki-page .smoki-gallery__scroller { display: flex; overflow-x: auto; gap: var(--space-4); scroll-snap-type: x mandatory; padding-bottom: var(--space-3); }
  .smoki-page .smoki-portrait { width: min(82vw, 21.25rem); min-width: min(82vw, 21.25rem); scroll-snap-align: start; }
  .smoki-page .smoki-book__panel { padding: var(--space-6) var(--space-5); }
  .smoki-page .smoki-book__intro { text-align: left; }
  .smoki-page .smoki-book__intro .lead { margin-inline: 0; }
  .smoki-page .smoki-fights__timeline { padding-inline-start: var(--space-4); }
  .smoki-page .smoki-fights__timeline article { grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); }
  .smoki-page .smoki-fights__timeline article > span { width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
  .smoki-page .smoki-path-card { min-height: 31.25rem; }
  .smoki-page .smoki-path-card__overlay { padding: var(--space-8) var(--space-5) var(--space-5); }
  .smoki-page .smoki-next__card { grid-template-columns: 1.75rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .smoki-page .smoki-pillar:hover,
  .smoki-page .smoki-portrait:hover,
  .smoki-page .smoki-portrait:focus-within,
  .smoki-page .smoki-path-card:hover,
  .smoki-page .smoki-next__card:hover { transform: none; }
}