/* Palette: Marine — shared with the Deutsch Feed and Daily Yoga. Burnt-orange spark = status only. */
:root {
  --bg: #eaeff4; --card: #f9fbfd; --ink: #182734; --ink-soft: #4f6272; --ink-faint: #8b9aa7;
  --rule: #d5dee7; --accent: #3d6d9a; --accent-ink: #ffffff; --spark: #c06b3a; --spark-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e141b; --card: #151f28; --ink: #dbe5ef; --ink-soft: #8a9bab; --ink-faint: #5b6b79;
    --rule: #243039; --accent: #6ba3d6; --accent-ink: #0e141b; --spark: #e0925a; --spark-ink: #0e141b;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }

.app { max-width: 52rem; margin: 0 auto; min-height: 100dvh; padding: max(2rem, env(safe-area-inset-top)) 16px max(2rem, env(safe-area-inset-bottom)); text-align: center; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: 2.2rem; margin: 1rem 0 0; letter-spacing: .02em; }
.sub { color: var(--ink-soft); margin: .2rem 0 2rem; font-size: .95rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; text-align: left; }
.tile { position: relative; display: block; overflow: hidden; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.tile:hover, .tile:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--rule); background: var(--bg); }
.tile .name { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; padding: .8rem 1rem 0; }
.tile .desc { display: block; color: var(--ink-soft); font-size: .9rem; padding: .1rem 1rem 1rem; }
.tile.soon img { filter: saturate(.7); }
.tag { position: absolute; top: .6rem; right: .6rem; background: var(--spark); color: var(--spark-ink); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .6rem; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }