/*
Theme Name: Astral Nomad
Theme URI: https://astralnomad.net/
Author: Astral Nomad
Description: A minimal, editorial product theme for Astral Nomad.
Version: 1.0.8
Text Domain: astral-nomad
*/

:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --paper: #fbfbfd;
  --night: #0b1020;
  --violet: #6e5ce6;
  --petal: #f2d9e8;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--violet); }
.shell { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(210, 210, 215, .72);
  background: rgba(251, 251, 253, .82);
  backdrop-filter: saturate(180%) blur(18px);
}
.site-header .shell { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand-mark { display: block; width: 24px; height: 30px; object-fit: contain; }
.brand-wordmark { display: block; }
.primary-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.primary-nav a { color: #333336; }
.primary-nav a:hover { color: var(--violet); }

.hero { min-height: 670px; overflow: hidden; display: grid; place-items: center; text-align: center; position: relative; background: radial-gradient(circle at 50% 30%, #fff 0, #f4f5ff 42%, #e9e7f5 100%); }
.hero::before, .hero::after { content: ""; position: absolute; width: 510px; aspect-ratio: 1; border-radius: 50%; filter: blur(2px); opacity: .72; }
.hero::before { background: radial-gradient(circle at 35% 30%, #fff 0 7%, transparent 8%), radial-gradient(circle at 54% 65%, #d5c6ff 0 10%, transparent 11%), radial-gradient(circle at 28% 70%, #f2d8e9 0 11%, transparent 12%), linear-gradient(135deg, #efeafd, #bcb0f2); transform: translate(-45%, 19%) rotate(20deg); }
.hero::after { background: radial-gradient(circle at 35% 30%, #fff 0 6%, transparent 7%), radial-gradient(circle at 54% 65%, #c7f0dc 0 11%, transparent 12%), radial-gradient(circle at 28% 70%, #f4d8e3 0 9%, transparent 10%), linear-gradient(135deg, #f6e1e9, #badfcf); transform: translate(61%, -24%) rotate(-18deg); }
.hero-copy { position: relative; z-index: 1; width: min(820px, 100%); padding: 112px 0 104px; }
.eyebrow { margin: 0 0 14px; color: var(--violet); font-size: 17px; font-weight: 600; }
h1, h2, h3 { margin: 0; letter-spacing: -.045em; line-height: 1.06; }
.hero h1 { font-size: clamp(52px, 8vw, 104px); font-weight: 680; }
.hero p { max-width: 590px; margin: 24px auto 35px; color: #3c3c42; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -.02em; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 980px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 550; transition: transform .2s ease, background .2s ease; }
.button:hover { color: #fff; background: var(--violet); transform: translateY(-1px); }
.button.secondary { margin-left: 10px; color: var(--ink); background: transparent; border: 1px solid var(--line); }
.button.secondary:hover { color: #fff; border-color: var(--violet); }

.product-band { padding: 116px 0; background: #fff; }
.section-intro { max-width: 700px; margin: 0 auto 52px; text-align: center; }
.section-intro h2 { font-size: clamp(38px, 5vw, 62px); }
.section-intro p { color: var(--muted); font-size: 20px; }
.product-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 34px; background: var(--night); color: #fff; min-height: 510px; }
.product-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 7vw, 90px); }
.product-copy .eyebrow { color: #c9c1ff; }
.product-copy h2 { font-size: clamp(44px, 5vw, 68px); }
.product-copy p { color: #dedee6; font-size: 19px; }
.product-art { position: relative; min-height: 320px; overflow: hidden; background-color: #11172b; background-position: center; background-repeat: no-repeat; background-size: cover; }
.product-art::before, .product-art::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; }
.product-art::before { inset: 11% 13%; }
.product-art::after { inset: 23% 26%; }
.art-label { position: absolute; bottom: 34px; left: 34px; color: rgba(255,255,255,.78); font-size: 14px; }

.product-card--petal { display: block; position: relative; min-height: 570px; }
.product-card--petal .product-art { position: absolute; inset: 0; min-height: 0; background-position: center center; }
.product-card--petal .product-art::before, .product-card--petal .product-art::after { display: none; }
.product-card--petal .product-art::after { display: block; inset: 0; border: 0; border-radius: 0; background: linear-gradient(90deg, rgba(5, 10, 25, .86) 0%, rgba(8, 14, 31, .60) 40%, rgba(8, 14, 31, .05) 73%); }
.product-card--petal .product-copy { position: relative; z-index: 1; width: min(55%, 570px); min-height: 570px; }
.product-card--petal .art-label { z-index: 1; }
.product-band--petal { background: #f5f3f8; }

.product-card--clover { grid-template-columns: 1.12fr .88fr; }
.product-card--clover .product-art { background-position: center 34%; }
.product-card--clover .product-art::before, .product-card--clover .product-art::after { display: none; }
.product-card--clover .product-copy { grid-column: 1; grid-row: 1; background: linear-gradient(135deg, #142a28, #0b1921); }
.product-card--clover .product-art { grid-column: 2; grid-row: 1; }
.product-card--clover .art-label { display: none; }

.applications-page { padding: 105px 0 130px; }
.applications-intro { max-width: 760px; text-align: center; }
.applications-intro h1 { font-size: clamp(54px, 7vw, 86px); }
.applications-intro > p:last-child { margin: 24px auto 0; color: var(--muted); font-size: 21px; }
.applications-list { display: grid; gap: 32px; padding-top: 76px; }
.application-card { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 570px; overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 24px 80px rgba(16, 22, 35, .07); }
.application-card-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(38px, 6vw, 78px); }
.application-identity { display: flex; align-items: center; gap: 18px; }
.application-identity img { width: 70px; height: 70px; border-radius: 17px; object-fit: cover; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.application-identity .eyebrow { margin: 0 0 6px; font-size: 14px; }
.application-identity h2 { font-size: clamp(32px, 3.3vw, 46px); }
.application-card-copy > p { max-width: 480px; color: #44464c; font-size: 19px; }
.application-card-copy .application-tagline { margin: 35px 0 0; color: var(--ink); font-size: 27px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.application-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 22px; }
.text-link { font-size: 16px; font-weight: 550; }
.application-visual { display: grid; place-items: center; min-height: 570px; overflow: hidden; }
.application-visual img { display: block; width: min(56%, 290px); height: auto; border: 7px solid rgba(255,255,255,.65); border-radius: 33px; box-shadow: 0 28px 52px rgba(0, 0, 0, .3); }
.application-visual--clover { background: radial-gradient(circle at 70% 20%, #b6ceb7, #315a51 65%, #173037); }
.application-visual--petal { background: radial-gradient(circle at 70% 20%, #d5b9d8, #655781 65%, #292945); }
.application-card { scroll-margin-top: 80px; }
.privacy-hub { min-height: 660px; padding: 110px 0 145px; background: #f7f7f9; }
.privacy-hub-intro { max-width: 700px; margin: 0 auto 60px; text-align: center; }
.privacy-hub-intro h1 { font-size: clamp(54px, 7vw, 84px); }
.privacy-hub-intro > p:last-child { margin: 22px auto 0; color: var(--muted); font-size: 20px; }
.privacy-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.privacy-policy-card { display: flex; align-items: center; gap: 20px; min-height: 150px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(16, 22, 35, .05); transition: border-color .2s, transform .2s; }
.privacy-policy-card:hover { border-color: var(--violet); transform: translateY(-3px); }
.privacy-policy-card img { flex: none; width: 76px; height: 76px; border-radius: 18px; object-fit: cover; }
.privacy-policy-card-copy { display: grid; gap: 6px; min-width: 0; }
.privacy-policy-card-copy strong { font-size: 23px; line-height: 1.2; }
.privacy-policy-card-copy > span { color: var(--muted); font-size: 16px; }
.privacy-policy-arrow { display: grid; flex: none; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; background: #f0eff5; color: var(--ink); font-size: 22px; }

.clover-page { background: #fff; }
.clover-hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 50px; padding-top: 86px; padding-bottom: 86px; }
.clover-hero-copy h1 { max-width: 630px; font-size: clamp(54px, 6vw, 84px); }
.clover-hero-copy > p:not(.eyebrow) { max-width: 490px; margin: 32px 0; color: #4c5555; font-size: 22px; }
.clover-hero-visual { display: grid; place-items: center; height: 660px; overflow: hidden; border-radius: 34px; background: radial-gradient(circle at 75% 15%, #bdd0bd, #3d655a 58%, #173039); }
.clover-hero-visual img { display: block; width: min(55%, 300px); height: auto; border: 8px solid rgba(255,255,255,.75); border-radius: 38px; box-shadow: 0 32px 70px rgba(0, 0, 0, .3); }
.clover-how-to-play { padding: 120px 0; background: #f5f7f4; scroll-margin-top: 50px; }
.clover-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.clover-how-grid h2 { font-size: clamp(42px, 5vw, 66px); }
.clover-how-grid > div > p:last-child { max-width: 490px; margin-top: 28px; color: var(--muted); font-size: 19px; }
.clover-play-steps { display: grid; align-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.clover-play-steps li { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid #d6ded7; }
.clover-play-steps li:first-child { border-top: 1px solid #d6ded7; }
.clover-play-steps strong { color: #2d6955; font-size: 20px; }
.clover-play-steps span { color: #4b5650; font-size: 18px; }
.clover-facts { padding: 65px 0; background: #e9f0e9; }
.clover-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.clover-facts-grid > div { display: grid; gap: 4px; text-align: center; }
.clover-facts-grid strong { color: #214d3f; font-size: 56px; line-height: 1; }
.clover-facts-grid span { color: #52615a; font-size: 18px; }
.clover-modes { padding: 135px 0; color: #fff; background: #122b2d; text-align: center; scroll-margin-top: 50px; }
.clover-modes .eyebrow { color: #b9dfcc; }
.clover-modes h2 { font-size: clamp(44px, 5vw, 70px); }
.clover-modes-intro { max-width: 820px; margin: 28px auto 55px; color: #d0e1d9; font-size: 21px; }
.clover-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; text-align: left; }
.clover-mode-grid article { min-height: 195px; padding: 27px; border: 1px solid rgba(255,255,255,.14); border-radius: 19px; background: rgba(255,255,255,.055); }
.clover-mode-grid h3 { margin: 0 0 15px; font-size: 25px; }
.clover-mode-grid p { margin: 0; color: #c6d8ce; font-size: 17px; line-height: 1.55; }
.clover-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding-top: 130px; padding-bottom: 130px; }
.clover-details-heading { grid-column: 1 / -1; max-width: 700px; margin-bottom: 28px; }
.clover-details-heading h2 { font-size: clamp(42px, 5vw, 66px); }
.clover-details article { padding-top: 24px; border-top: 1px solid var(--line); }
.clover-details span { color: #2d6955; font-weight: 650; }
.clover-details h3 { margin-top: 35px; font-size: 32px; }
.clover-details p { color: var(--muted); font-size: 18px; }
.clover-closing { padding: 115px 0; background: #ecf3ee; text-align: center; }
.clover-closing h2 { font-size: clamp(42px, 5vw, 66px); }
.clover-closing p { color: #52615a; font-size: 20px; }
.clover-closing-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.clover-closing-links .button.secondary { margin-left: 0; }

.game-hero { padding: 66px 0 0; background: #fff; }
.game-hero-card { position: relative; min-height: 590px; overflow: hidden; border-radius: 34px; background-color: var(--night); background-position: center; background-size: cover; color: #fff; }
.game-hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 10, 25, .89) 0%, rgba(8, 14, 31, .55) 43%, rgba(8, 14, 31, .04) 73%); }
.game-hero-copy { position: relative; z-index: 1; display: flex; min-height: 590px; width: min(56%, 600px); flex-direction: column; justify-content: center; padding: clamp(40px, 7vw, 88px); }
.game-hero-copy .eyebrow { color: #d8d2ff; }
.game-hero-copy h1 { font-size: clamp(44px, 5.5vw, 76px); }
.game-hero-copy p:not(.eyebrow) { max-width: 420px; color: #dedee6; font-size: 20px; }
.game-entry { padding-top: 72px; }
.game-showcase { padding: 135px 0; overflow: hidden; background: #11172b; color: #fff; }
.game-showcase-heading { max-width: 700px; margin: 0 auto 78px; text-align: center; }
.game-showcase-heading .eyebrow { color: #d8d2ff; }
.game-showcase-heading h2 { font-size: clamp(42px, 5vw, 70px); }
.game-showcase-phones { display: flex; align-items: flex-start; justify-content: center; gap: clamp(30px, 7vw, 110px); }
.device-shot { width: min(100%, 355px); margin: 0; }
.device-shot--map { margin-top: 78px; }
.device-shot img { display: block; width: 100%; height: auto; border: 8px solid #272d42; border-radius: 42px; box-shadow: 0 32px 70px rgba(0, 0, 0, .45); }
.device-shot figcaption { display: flex; flex-direction: column; gap: 6px; padding: 22px 4px 0; }
.device-shot figcaption strong { font-size: 25px; letter-spacing: -.03em; }
.device-shot figcaption span { color: #c7c9d6; font-size: 16px; }
.game-facts { padding: 124px 0; background: #f5f5f7; }
.game-facts-heading { max-width: 670px; margin: 0 auto 54px; text-align: center; }
.game-facts-heading h2, .game-rhythm h2, .game-closing h2 { font-size: clamp(40px, 5vw, 66px); }
.game-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.game-facts-grid article { display: flex; min-height: 250px; flex-direction: column; justify-content: space-between; padding: 30px; border-radius: 24px; background: #fff; }
.game-facts-grid strong { font-size: clamp(62px, 8vw, 105px); font-weight: 650; letter-spacing: -.07em; line-height: .9; }
.game-facts-grid span { max-width: 150px; color: var(--muted); font-size: 17px; line-height: 1.3; }
.game-rhythm { padding: 140px 0; background: #fff; }
.game-rhythm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.play-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.play-steps li { display: grid; grid-template-columns: 115px 1fr; gap: 22px; padding: 28px 0; border-top: 1px solid var(--line); }
.play-steps li:last-child { border-bottom: 1px solid var(--line); }
.play-steps strong { font-size: 22px; letter-spacing: -.03em; }
.play-steps span { color: var(--muted); font-size: 18px; }
.game-closing { padding: 148px 0; text-align: center; color: #fff; background: radial-gradient(circle at 50% 0%, #52508b, #11172b 55%, #070b17); }
.game-closing > .shell { max-width: 800px; }
.game-closing .eyebrow { color: #d8d2ff; }
.game-closing p:not(.eyebrow) { max-width: 550px; margin: 24px auto 0; color: #dedee6; font-size: 20px; }

.principles { padding: 120px 0; background: #f5f5f7; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principle { min-height: 260px; padding: 32px; border-radius: 24px; background: #fff; }
.principle h3 { font-size: 29px; }
.principle p { color: var(--muted); }

.page-main { padding: 108px 0 132px; }
.page-title { max-width: 840px; margin: 0 auto 54px; text-align: center; font-size: clamp(48px, 6vw, 78px); }
.entry { width: min(760px, 100%); margin: 0 auto; }
.entry h1 { display: none; }
.entry h2 { margin: 52px 0 16px; font-size: 34px; }
.entry h3 { margin: 34px 0 12px; font-size: 25px; }
.entry p, .entry li { color: #3c3c42; font-size: 19px; }
.entry ul, .entry ol { padding-left: 25px; }
.entry strong { color: var(--ink); }

.site-footer { padding: 42px 0; border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; }
.site-footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .shell { width: min(calc(100% - 32px), var(--max)); }
  .primary-nav { gap: 14px; font-size: 13px; }
  .primary-nav a:nth-child(2) { display: none; }
  .primary-nav { gap: 12px; }
  .hero { min-height: 600px; }
  .hero-copy { padding: 100px 0; }
  .product-card { grid-template-columns: 1fr; }
  .product-card--clover .product-copy, .product-card--clover .product-art { grid-column: 1; grid-row: auto; }
  .product-card--clover .product-copy { order: 2; }
  .product-card--clover .product-art { order: 1; min-height: 370px; }
  .product-copy { padding: 48px 34px; }
  .product-art { min-height: 340px; }
  .product-card--petal { min-height: 670px; }
  .product-card--petal .product-art { min-height: 0; background-position: 63% center; }
  .product-card--petal .product-copy { width: 100%; min-height: 670px; padding: 50px 34px 170px; justify-content: flex-start; }
  .product-card--petal .product-art::after { background: linear-gradient(180deg, rgba(5, 10, 25, .84) 0%, rgba(8, 14, 31, .50) 48%, rgba(8, 14, 31, .08) 76%); }
  .game-hero { padding-top: 30px; }
  .game-hero-card { min-height: 630px; border-radius: 26px; background-position: 64% center; }
  .game-hero-card::after { background: linear-gradient(180deg, rgba(5, 10, 25, .87) 0%, rgba(8, 14, 31, .53) 48%, rgba(8, 14, 31, .06) 76%); }
  .game-hero-copy { width: 100%; min-height: 630px; padding: 46px 32px 180px; justify-content: flex-start; }
  .game-hero-copy h1 { font-size: 45px; }
  .game-facts { padding: 82px 0; }
  .game-showcase { padding: 86px 0; }
  .game-showcase-heading { margin-bottom: 54px; }
  .game-showcase-phones { flex-direction: column; align-items: center; gap: 62px; }
  .device-shot, .device-shot--map { width: min(100%, 300px); margin-top: 0; }
  .device-shot img { border-radius: 34px; border-width: 6px; }
  .game-facts-grid { grid-template-columns: 1fr; }
  .game-facts-grid article { min-height: 180px; }
  .game-rhythm { padding: 82px 0; }
  .game-rhythm-grid { grid-template-columns: 1fr; gap: 46px; }
  .play-steps li { grid-template-columns: 90px 1fr; gap: 16px; }
  .game-closing { padding: 96px 0; }
  .principles, .product-band { padding: 76px 0; }
  .principle-grid { grid-template-columns: 1fr; }
  .site-footer .shell { align-items: flex-start; flex-direction: column; }
  .applications-page { padding: 76px 0 92px; }
  .applications-list { padding-top: 48px; }
  .application-card { grid-template-columns: 1fr; }
  .application-card-copy { padding: 38px 28px; }
  .application-visual { min-height: 440px; }
  .application-visual img { width: min(46%, 220px); }
  .privacy-hub { min-height: 0; padding: 80px 0 100px; }
  .privacy-hub-intro { margin-bottom: 42px; }
  .privacy-policy-grid { grid-template-columns: 1fr; gap: 16px; }
  .privacy-policy-card { min-height: 126px; padding: 22px; }
  .privacy-policy-card img { width: 65px; height: 65px; }
  .privacy-policy-card-copy strong { font-size: 20px; }
  .clover-hero { grid-template-columns: 1fr; gap: 45px; padding-top: 70px; padding-bottom: 70px; }
  .clover-hero-visual { height: 500px; }
  .clover-hero-visual img { width: min(55%, 220px); }
  .clover-how-to-play { padding: 85px 0; }
  .clover-how-grid { grid-template-columns: 1fr; gap: 35px; }
  .clover-facts { padding: 55px 0; }
  .clover-facts-grid { grid-template-columns: 1fr; gap: 35px; }
  .clover-facts-grid strong { font-size: 48px; }
  .clover-modes { padding: 90px 0; }
  .clover-mode-grid { grid-template-columns: 1fr; }
  .clover-mode-grid article { min-height: 0; }
  .clover-details { grid-template-columns: 1fr; gap: 28px; padding-top: 90px; padding-bottom: 90px; }
  .clover-details h3 { margin-top: 16px; }
  .clover-closing { padding: 90px 0; }
}