/* Landing page sections. Shared tokens, header, footer and buttons live in site.css.
   Every section uses the same spacing, card style and grid gap so they line up. */
:root { --section-gap: 96px; --grid-gap: 20px; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: 72px 0 24px; }
.hero h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.08; letter-spacing: -.045em; }
.hero-text { max-width: 500px; margin: 24px 0 32px; font-size: 17px; line-height: 1.75; color: var(--muted); }
.hero-art { display: grid; place-items: center; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; }

/* Sections */
.section { padding-top: var(--section-gap); }
.section-continued { padding-top: var(--grid-gap); }
.section-title { margin-bottom: 28px; font-size: clamp(30px, 3.4vw, 40px); }

/* Cards */
.card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .2s; }
.card:hover { border-color: var(--accent); }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 20px; letter-spacing: -.02em; }
.card-text { color: var(--muted); font-size: 14px; line-height: 1.65; }
.card-arrow { color: var(--subtle); transition: color .2s, transform .2s; }
.card:hover .card-arrow, .row:hover .card-arrow { color: var(--accent); transform: translate(2px, -2px); }

.featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.feature-art { display: grid; place-items: center; height: 300px; border-bottom: 1px solid var(--border); background: var(--surface-raised); border-radius: var(--radius) var(--radius) 0 0; }
.feature-card .card-body { display: grid; gap: 8px; padding: 24px; }
.feature-card .card-title { font-size: 24px; }

.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.tile { gap: 8px; padding: 24px; }
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--accent-deep); color: var(--accent); }
.tile-icon .icon { width: 22px; height: 22px; }

/* Row list */
.row-list { border-top: 1px solid var(--border); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.row-copy { display: grid; gap: 4px; }
.row-title { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.row:hover .row-title { color: var(--accent); }

/* Banner */
.section:last-child { padding-bottom: var(--section-gap); }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 40px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); }
.banner-title { margin-bottom: 8px; font-size: clamp(24px, 2.6vw, 32px); }
.banner .button { flex: none; }

/* Code-drawn artwork */
.art { display: block; width: 100%; height: 100%; }
.feature-art .art { width: 240px; height: 240px; }
.art-grid { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.art-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.art-body { fill: var(--accent-deep); stroke: var(--accent); stroke-width: 2; }
.art-inner { fill: var(--surface-raised); stroke: var(--border-strong); stroke-width: 1; }
.art-fill { fill: var(--graphic-fill); }
.art-meridian { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.art-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 5; }
.art-dot-alt { fill: var(--text); stroke: var(--bg); stroke-width: 4; }
.art-stars path { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; }
.board-frame { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.square-light { fill: #cfc9d8; }
.square-dark { fill: #766983; }
.chess-piece path { fill: #382c40; stroke: #f2eff7; stroke-width: 1.5; stroke-linejoin: round; }
.piece-eye { fill: #e3dfff; }
:root[data-theme="light"] .square-light { fill: #e5deeb; }
:root[data-theme="light"] .square-dark { fill: #86738f; }
:root[data-theme="light"] .chess-piece path { fill: #553e4e; stroke: #ffffff; }

@media (max-width: 960px) {
    .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    :root { --section-gap: 72px; --grid-gap: 16px; }
    .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 48px; text-align: center; }
    .hero-text { margin-inline: auto; }
    .hero .button-row { justify-content: center; }
    .hero-art { width: min(100%, 340px); }
    .featured-grid { grid-template-columns: 1fr; }
    .feature-art { height: 260px; }
    .banner { flex-direction: column; align-items: flex-start; padding: 28px; }
}
@media (max-width: 520px) {
    .tile-grid { grid-template-columns: 1fr; }
    .hero .button-row .button { flex: 1 1 100%; }
    .feature-art .art { width: 200px; height: 200px; }
}