/* Today: three illustrated portals. Artwork is separate from live daily content. */
body.app-surface.today-gallery {
  background: #041522;
  isolation: isolate;
}
body.app-surface.today-gallery::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #041522 url("/artwork/today-gallery-night-v1.webp") center top / cover no-repeat;
  transform: translateZ(0);
}
.today-gallery .sky-map { display: none; }
body.app-surface.today-gallery .app-main { max-width: 1380px; padding: 0 40px 130px; }
body.app-surface.today-gallery .unified-topbar {
  position: relative; top: auto; margin: 12px auto 0; min-height: 54px;
  background: transparent; border: 0; backdrop-filter: none; box-shadow: none;
}
.today-gallery .unified-topbar .brand-engraving { width: 210px; height: 60px; }
.today-gallery .daily-brief { display: block; padding: 0; }
.gallery-heading { text-align: center; margin: 0 0 58px; }
.gallery-heading > a { display: inline-flex; align-items: center; min-height: 32px; font: 500 13px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--app-gold); text-decoration: none; }
.gallery-heading h1 { font: 400 38px/1.2 var(--font-display); margin: 4px 0 0; color: var(--app-text); overflow-wrap: anywhere; }
.portal-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 24px; }
.portal-gallery > turbo-frame { display: block; min-width: 0; }
.day-portal { position: relative; isolation: isolate; min-width: 0; height: 100%; border-radius: 240px 240px 0 0; }
.portal-scenery { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: -1; mask-image: linear-gradient(#000 80%, transparent); }
.day-portal::before { content: ''; position: absolute; inset: 0; border: 1px solid #d9bc77b3; border-radius: inherit; pointer-events: none; mask-image: linear-gradient(#000 40%, transparent 94%); }
.day-portal::after { content: ''; position: absolute; inset: 7px; border: 1px solid #ddc58c26; border-radius: inherit; pointer-events: none; mask-image: linear-gradient(#000 30%, transparent 80%); }
.today-gallery .day-portal .portal-link { display: flex; flex-direction: column; position: relative; height: 100%; min-height: 620px; padding: 0 28px 32px; gap: 0; color: var(--app-text); text-decoration: none; background: transparent; border: 0; border-radius: inherit; }
.portal-art { display: flex; align-items: center; justify-content: center; height: 350px; flex: 0 0 350px; position: relative; margin-top: -36px; margin-bottom: 18px; pointer-events: none; }
.portal-art .zodiac-art, .portal-art .hint-art-svg { width: calc(100% + 40px); max-width: none; height: 360px; object-fit: contain; filter: drop-shadow(0 12px 16px #020d2570); }
.portal-art .portal-tarot-card { width: 240px; max-width: 94%; height: 360px; object-fit: contain; transform: rotate(-7deg); filter: drop-shadow(0 16px 16px #010c1680); }
.portal-moon-image { width: 100%; height: 330px; object-fit: contain; filter: drop-shadow(0 10px 28px #acbded18); }
.portal-copy { display: flex; flex: 1; flex-direction: column; text-align: center; min-width: 0; align-items: stretch; }
.portal-label { display: block; font: 500 12px/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--app-gold); }
.today-gallery .day-portal h2 { font: 400 34px/1.16 var(--font-display); color: var(--app-text); margin: 12px 0 18px; padding: 0; text-wrap: balance; overflow-wrap: anywhere; }
.today-gallery .day-portal .portal-copy p { font: 400 16px/1.65 var(--font-body); color: #d4d7e5; margin: 0 0 22px; padding: 0; text-wrap: pretty; }
.portal-action { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 10px 16px; margin-top: auto; border-radius: 999px; background: #6550a150; color: #f2edf6; font: 400 14px/1.4 var(--font-body); }
.portal-tarot .portal-action { background: #468e7650; }
.portal-moon .portal-action { background: #416fba50; }
.portal-action .nav-svg { width: 18px; height: 18px; }
.portal-deck { position: relative; width: 250px; height: 350px; max-width: 100%; }
.portal-deck img { position: absolute; width: 202px; height: 303px; object-fit: contain; top: 25px; left: calc(50% - 101px); filter: drop-shadow(0 12px 10px #0006); }
.portal-deck img:first-child { transform: translateX(-26px) rotate(-13deg); }
.portal-deck img:nth-child(2) { transform: translateX(26px) rotate(13deg); }
.portal-deck img:last-child { transform: translateY(-8px); }
.gallery-relationships { margin-top: 64px; }
.gallery-relationships:empty { display: none; }
.portal-relationship .portal-scenery { filter: hue-rotate(28deg); }
.portal-relationship-image { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 24px #030c2255); }
.portal-relationship .portal-action { background: #855c8150; }
body.today-gallery .today-people { display: flex; width: fit-content; max-width: 680px; margin: 20px auto 0; padding: 16px 24px; background: #091c2966; border-radius: 24px; }
.today-gallery .today-people-art { width: 84px; height: 96px; flex-basis: 84px; }
.today-gallery .today-people h2 { font-size: 16px; }
.today-gallery .today-people-copy > p { font-size: 14px; }
.today-gallery .portal-link:focus-visible { outline: 2px solid var(--app-gold); outline-offset: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .day-portal { animation: portal-arrive 500ms ease-out both; }
  .portal-gallery > :nth-child(2) .day-portal { animation-delay: 70ms; }
  .portal-gallery > :nth-child(3) { animation-delay: 140ms; }
  .portal-art > img, .portal-art .zodiac-art, .portal-deck { transition: transform 280ms ease; }
  .portal-link:hover .portal-tarot-card { transform: rotate(-3deg) translateY(-6px); }
  .portal-link:hover .portal-relationship-image, .portal-link:hover .zodiac-art, .portal-link:hover .portal-moon-image, .portal-link:hover .portal-deck { transform: translateY(-6px); }
  .portal-link:hover .portal-action { box-shadow: inset 0 0 0 100px #ffffff0c; }
  @keyframes portal-arrive { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
}
@media (min-width: 1600px) {
  .portal-art { height: 400px; flex-basis: 400px; }
  .portal-art .zodiac-art, .portal-art .hint-art-svg { height: 410px; }
  .portal-art .portal-tarot-card { width: 270px; height: 405px; }
  .portal-moon-image { height: 380px; }
}
@media (max-width: 999px) and (min-width: 701px) {
  body.app-surface.today-gallery .app-main { padding-inline: 20px; }
  .portal-gallery { gap: 12px; }
  .today-gallery .day-portal .portal-link { padding-inline: 16px; min-height: 520px; }
  .portal-art { height: 260px; flex-basis: 260px; }
  .portal-art .zodiac-art, .portal-art .hint-art-svg, .portal-moon-image { height: 255px; }
  .portal-art .portal-tarot-card { height: 270px; width: 180px; }
  .portal-deck { transform: scale(.75); }
  .today-gallery .day-portal h2 { font-size: 27px; }
  .today-gallery .day-portal .portal-copy p { font-size: 14px; }
}
@media (max-width: 700px) {
  body.app-surface.today-gallery::before { bottom: auto; height: 100lvh; }
  body.app-surface.today-gallery .app-main { padding: 0 24px 120px; }
  .today-gallery .unified-topbar .brand-engraving { width: 170px; height: 50px; }
  .gallery-heading { margin: 0 0 52px; }
  .gallery-heading h1 { font-size: 32px; }
  .gallery-heading > a { font-size: 12px; }
  .portal-gallery { grid-template-columns: minmax(0, 1fr); gap: 58px; max-width: 420px; margin-inline: auto; }
  .today-gallery .day-portal .portal-link { min-height: 560px; padding: 0 24px 28px; }
  .portal-art { height: 300px; flex-basis: 300px; margin-top: -26px; margin-bottom: 10px; }
  .portal-art .zodiac-art, .portal-art .hint-art-svg { height: 300px; width: 100%; }
  .portal-art .portal-tarot-card { width: 204px; height: 306px; }
  .portal-moon-image { height: 280px; }
  .portal-deck { transform: scale(.86); }
  .today-gallery .day-portal h2 { font-size: 32px; }
  .gallery-relationships { margin-top: 58px; }
  body.today-gallery .today-people { padding: 16px 0; gap: 14px; }
  .today-gallery .today-people-art { width: 66px; flex-basis: 66px; }
}
.today-gallery .portal-gallery > *, .today-gallery .portal-gallery > #today-tarot { grid-column: auto; grid-row: auto; }

.today-gallery .lux-btn-ghost { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media (prefers-reduced-transparency: reduce) {
  .today-gallery .portal-action, .today-gallery .lux-btn-ghost { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #243346; }
}