/* madrice.tv — page layout only.
   Every colour, font, radius, shadow and size comes from styles.css tokens.
   This file may position and space things; it may not invent a value. */

.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-10); align-items: center; padding: var(--space-16) 0 var(--space-12); }
.hero h1 { font-size: var(--text-display); margin-bottom: var(--space-4); }
.hero .mascot { justify-self: center; width: 260px; transform: rotate(4deg); }
.hero .lede { font-size: var(--text-md); max-width: 44ch; }

.page-head { padding: var(--space-12) 0 var(--space-8); max-width: 60ch; }
.page-head h1 { font-size: var(--text-3xl); margin-bottom: var(--space-3); }

.section { margin-top: var(--space-16); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-4); }
.section-head h2 { margin: 0; }

.thumb { width: 100%; height: 100%; background: var(--mr-thumb); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.tier { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.tier .price { font-family: var(--font-heading); font-size: var(--text-2xl); }
.tier ul { margin: 0; padding-left: 1.1em; }
.tier .btn { margin-top: auto; align-self: flex-start; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.split img { width: 100%; }
.crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 640px; }

footer { margin-top: var(--space-24); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--text-3xl); }
  .nav-links { gap: 0; }
  .tiers, .split, .crew, .two { grid-template-columns: 1fr; }
}