.article-page{width:min(90%,780px);margin:70px auto 100px}.article-page h1{font-size:clamp(2.7rem,6vw,4.5rem);line-height:1.04;letter-spacing:-.035em;margin:15px 0 20px}.article-summary{font-size:1.35rem;color:#d4c9d5;line-height:1.5}.article-date{font:13px Arial,sans-serif;color:#b8afc2}.article-body{font-size:1.16rem;line-height:1.8;color:#e2d9d5;margin-top:45px}.article-body h2,.article-body h3{color:var(--ink);line-height:1.2;margin-top:2em}.article-body a{color:var(--purple);text-decoration:underline}.article-body img{max-width:100%;height:auto}.article-cover{display:block;width:100%;height:auto;margin-top:2rem}

.article-illustration{margin:2.5rem 0}.article-illustration img{display:block;width:100%;height:auto;border-radius:.5rem}.article-illustration figcaption{margin-top:.65rem;color:#b8afc2;font:italic .92rem/1.5 Arial,sans-serif}

.article-body a.lore-link { text-decoration-style: dotted; text-underline-offset: .2em; }

.home {
  --page-width: min(91%, 1240px);
  --rule: #3a3048;
  --muted: #c8bcca;
}

.home .wrap, .home .hero-content { width: var(--page-width); margin-inline: auto; }
.header { padding-inline: max(4.5%, calc((100% - 1240px) / 2)); }
.home .hero-content { padding-inline: 0; }
.home .stories { padding-block: 8px clamp(42px, 6vw, 76px); }

.explorer { --inset: clamp(16px, 2.6vw, 34px); border-block: 1px solid var(--rule); }
.explorer-head, .explore-form { background: #141124; }
.explorer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 22px var(--inset) 0;
}
.explorer-head h2 {
  margin: 0;
  font-size: clamp(1.95rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.explore-status { display: flex; align-items: baseline; gap: 14px; font: 13px/1.5 Arial, sans-serif; }
.explore-count { margin: 0; color: var(--muted); }
.explore-reset { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.explore-form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding: 18px var(--inset) 24px;
  border-bottom: 1px solid var(--rule);
}
.explore-field { display: grid; gap: 6px; min-width: 0; }
.explore-field label { color: var(--muted); font: 600 12px/1.4 Arial, sans-serif; }
.explore-field input, .explore-field select, .explore-submit {
  width: 100%;
  height: 44px;
  border: 1px solid #554661;
  border-radius: 4px;
  padding: 0 12px;
  background: var(--bg);
  color: var(--ink);
  font: 14px Arial, sans-serif;
}
.explore-field input::placeholder { color: #a59bad; }
.explore-submit {
  padding-inline: 22px;
  background: #eab870;
  border-color: #eab870;
  color: #1d1423;
  font-weight: 700;
  cursor: pointer;
}
.explore-submit:hover { background: #ffd08c; }
.explore-form :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.story-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.explorer .story { min-width: 0; padding: 22px var(--inset); border-bottom: 1px solid var(--rule); }
.story-list .story:nth-child(odd) { border-right: 1px solid var(--rule); }
.story-link {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
}
.story-cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: #1d1629;
}
.story-cover-placeholder {
  background: linear-gradient(135deg, #512a6250, #14112460), url('/images/universos.png') center 64% / cover;
}
.story-label {
  margin: 0 0 7px;
  color: #d9adff;
  font: 600 .69rem/1.45 Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.explorer .story h3 { margin: 0; font-size: clamp(1.2rem, 1.65vw, 1.55rem); line-height: 1.12; }
.story-summary { color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
.story-list .story-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.story-link:hover h3 { color: var(--purple); }
.read-more { display: inline-block; margin-top: 12px; color: #f1ba70; font: 600 .8rem/1.4 Arial, sans-serif; }

.explorer .story-featured { padding-block: var(--inset); background: #100e20; }
.story-featured .story-link { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: var(--inset); }
.story-featured .story-cover { aspect-ratio: 16 / 9; }
.explorer .story-featured h3 { font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -.025em; }
.story-featured .story-summary { font-size: clamp(1rem, 1.5vw, 1.15rem); }
.story-featured .read-more { margin-top: 18px; }

.explore-empty { padding: 28px var(--inset); margin: 0; color: var(--muted); }
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  padding: 18px var(--inset);
  color: var(--muted);
  font: 14px/1.4 Arial, sans-serif;
}
.pagination a { color: var(--purple); }
.pagination a:hover, .explore-reset:hover { color: var(--gold); }
.home .about { border-top: 0; padding-top: 0; }

@media (max-width: 800px) {
  .story-list { grid-template-columns: 1fr; }
  .story-list .story:nth-child(odd) { border-right: 0; }
  .story-list .story-link { grid-template-columns: minmax(0, 29%) minmax(0, 1fr); }
  .explore-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore-query { grid-column: 1 / -1; }
  .explore-submit { grid-column: 1 / -1; justify-self: start; width: auto; }
}

@media (max-width: 560px) {
  .home .hero { min-height: 400px; }
  .home .hero-content { padding-block: 45px 62px; }
  .home .hero h1 { font-size: clamp(2.35rem, 10.5vw, 3.2rem); }
  .story-featured .story-link { grid-template-columns: 1fr; }
  .story-list .story-summary { -webkit-line-clamp: 2; }
}