/* asterix.fan — the front door: the homes and the feature pages (generated by studio5's app/sitehome.py,
   copied to /assets/home.css on every build — edit it in the studio, not on the server). Mobile first:
   the ads send phones. The site's blue and the gilt of the membership. */
:root { --blue: #13408f; --blue-d: #0b2a63; --gold: #f2c230; --gold-d: #d9a514; --red: #d8322b; --ink: #1c2433;
  --paper: #fbf7ee; --muted: #5d6679; --line: #e6dfcf; --radius: 14px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--paper); }
a { color: var(--blue); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(22px, 4.5vw, 30px); color: var(--blue-d); }
main > section { max-width: 1120px; margin: 0 auto; padding: 36px 16px; }

/* ── the bar ── */
.top { position: sticky; top: 0; z-index: 10; background: var(--blue); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.bar { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.logo { color: #fff; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: .2px; white-space: nowrap; }
.logo span { color: var(--gold); }
.menu { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.menu::-webkit-scrollbar { display: none; }
.menu a { color: #dfe7fb; text-decoration: none; font-size: 14.5px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.menu a:hover, .menu a.on { background: rgba(255,255,255,.14); color: #fff; }
.langs { max-width: 1120px; margin: 0 auto; padding: 0 16px 6px; display: flex; gap: 2px; justify-content: flex-end; }
.langs a { color: #b9c8ec; text-decoration: none; font-size: 12px; padding: 1px 6px; border-radius: 5px; }
.langs a.on { background: var(--gold); color: var(--blue-d); font-weight: 700; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; border-radius: 999px; font-weight: 700;
  text-decoration: none; font-size: 15.5px; border: 2px solid transparent; white-space: nowrap; }
.btn--yt { background: var(--red); color: #fff; }
.btn--yt:hover { background: #b9241e; }
.btn--gold { background: var(--gold); color: var(--blue-d); }
.btn--gold:hover { background: var(--gold-d); }
.btn--ghost { border-color: currentColor; color: #fff; background: rgba(0,0,0,.18); }
.btn--village { background: var(--gold); color: var(--blue-d); padding: 7px 14px; font-size: 14px; }
.tiers .btn--ghost, .faq .btn--ghost { color: var(--blue); background: transparent; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ── the hero: a painting, dimmed, the words over it ── */
.hero { max-width: none !important; margin: 0; padding: 0 !important; background: var(--blue-d) center / cover no-repeat;
  position: relative; color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,20,55,.88) 0%, rgba(8,20,55,.62) 55%, rgba(8,20,55,.25) 100%); }
.hero-in { position: relative; max-width: 1120px; margin: 0 auto; padding: 64px 16px 56px; }
.hero h1 { font-size: clamp(30px, 6.5vw, 54px); max-width: 16ch; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hero .lead { font-size: clamp(16px, 2.6vw, 19px); max-width: 58ch; color: #eef2fb; }
.hero--feature .hero-in { padding: 44px 16px 40px; }
.hero--feature h1 { max-width: 22ch; }
.points { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; max-width: 58ch; }
.points li { padding-left: 26px; position: relative; color: #eef2fb; }
.points li::before { content: "✦"; position: absolute; left: 4px; color: var(--gold); }
.chip { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.chip--soon { background: var(--gold); color: var(--blue-d); }
.crumbs { max-width: 1120px; margin: 0 auto; padding: 10px 16px 0; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* ── the features ── */
.fgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.fcard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(19,64,143,.14); }
.fimg { aspect-ratio: 16 / 10; background: var(--blue) center / cover no-repeat; }
.ftext { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 16px; }
.ftext b { font-size: 17px; color: var(--blue-d); }
.ftext .chip { align-self: flex-start; }
.ftext span:last-child { color: var(--muted); font-size: 14.5px; }

/* ── albums ── */
.agrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.acard { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.acard img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #ddd; }
.more { font-weight: 700; }

/* ── games ── */
.ggrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 28px; }
.gcard { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.gcard img, .gemoji { grid-row: 1 / 3; width: 56px; height: 56px; object-fit: contain; text-align: center; }
.gemoji { font-size: 36px; line-height: 56px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.gcard b { color: var(--blue-d); }
.gcard span { color: var(--muted); font-size: 14px; }
.gcard--soon { opacity: .6; }

/* ── gallery ── */
.pgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pgrid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }

/* ── the tiers ── */
.tiers { text-align: center; }
.tiers .lead { color: var(--muted); max-width: 60ch; margin: 0 auto 18px; }
.tier-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); text-align: left; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.tier h3 { color: var(--blue-d); font-size: 19px; margin: 0; }
.tier .price { font-size: 26px; font-weight: 800; margin: 0; color: var(--ink); }
.tier .price small { font-size: 14px; font-weight: 600; color: var(--muted); }
.tier .perk { color: var(--muted); margin: 0 0 8px; flex: 1; }
.tier .btn { align-self: flex-start; }
.tier--banquet { border: 2px solid var(--gold); box-shadow: 0 8px 22px rgba(242,194,48,.25); }
.tiers--compact { padding-top: 12px !important; }
.fine { color: var(--muted); font-size: 13px; margin-top: 12px; }

/* ── questions ── */
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--blue-d); }
.faq p { margin: 8px 0 0; color: var(--ink); }

footer { text-align: center; color: var(--muted); font-size: 13px; padding: 28px 16px 40px; border-top: 1px solid var(--line); }
footer a { color: var(--muted); }

@media (max-width: 640px) {
  /* the features as compact rows on a phone: a thumbnail beside the words, not five full-width pictures */
  .fgrid { grid-template-columns: 1fr; gap: 10px; }
  .fcard { flex-direction: row; }
  .fimg { aspect-ratio: auto; width: 116px; flex: none; }
  .ftext { padding: 10px 12px; }
  .ftext b { font-size: 16px; }
  .bar { flex-wrap: wrap; }
  .menu { order: 3; flex-basis: 100%; }
  .btn--village { margin-left: auto; }
  .hero-in { padding: 44px 16px 40px; }
  .btn { padding: 11px 16px; font-size: 15px; }
}