/* =========================================================
   二十四節気の星占い — ティザーサイト
   デザイン正本: docs/business/07-design/design-system.md
   トーン: 落ち着いた占い手帳。煽情せず、季節に寄り添う。
   ========================================================= */

:root {
    /* ブランド基調色（design-system §2-1） */
    --kinari:   #FBF7EE; /* 生成り（地） */
    --sumi:     #3A3326; /* 墨（主文字） */
    --kareccha: #5C5340; /* 枯茶（副文字） */
    --sakin:    #8A7A55; /* 砂金（弱文字・署名） */
    --yamabuki: #C9A24B; /* 山吹だし（差し色） */
    --frame-gold: #C9B98A; /* 縁取りの淡い金（design-system §4） */

    /* 季節グラデ（JS が当日の節気色で上書き。既定は芒種→夏至） */
    --night: #2b3a36; /* 夜空（節気①を暗く寄せた色） */
    --season-top: #5B7B6A;    /* 芒種・早苗色 */
    --season-bottom: #3F7A5E; /* 夏至・常磐緑 */

    --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
    --sans:  "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;

    --maxw: 720px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    color: var(--sumi);
    background: var(--night);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
}

/* ---- 季節グラデの夜空 + 星空感（design-system §4・3 stop） ---- */
.sky {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
        180deg,
        var(--night) 0%,
        var(--season-top) 46%,
        var(--season-bottom) 100%
    );
    transition: background 1.2s ease;
}

/* 星をCSSグラデで散らす（密度抑制・手帳トーン） */
.starfield {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 18%, rgba(251,247,238,.9), transparent),
        radial-gradient(1px 1px at 28% 9%, rgba(251,247,238,.7), transparent),
        radial-gradient(1.6px 1.6px at 47% 22%, rgba(251,247,238,.85), transparent),
        radial-gradient(1px 1px at 63% 12%, rgba(251,247,238,.6), transparent),
        radial-gradient(1.3px 1.3px at 78% 24%, rgba(251,247,238,.8), transparent),
        radial-gradient(1px 1px at 88% 14%, rgba(251,247,238,.65), transparent),
        radial-gradient(1.2px 1.2px at 18% 33%, rgba(251,247,238,.7), transparent),
        radial-gradient(1px 1px at 72% 37%, rgba(251,247,238,.55), transparent),
        radial-gradient(1.5px 1.5px at 38% 41%, rgba(251,247,238,.6), transparent);
    background-repeat: no-repeat;
    animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
    from { opacity: .55; }
    to   { opacity: 1; }
}

/* ---- 淡い金の二重縁取り（手帳・カードらしさ） ---- */
.frame {
    position: fixed;
    inset: 14px;
    z-index: -1;
    border: 1px solid color-mix(in srgb, var(--frame-gold) 55%, transparent);
    outline: 1px solid color-mix(in srgb, var(--frame-gold) 28%, transparent);
    outline-offset: 5px;
    border-radius: 2px;
    pointer-events: none;
}

/* ---- ページ本体 ---- */
.page {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(48px, 9vw, 96px) clamp(22px, 6vw, 48px) 64px;
}

/* ===== ヒーロー ===== */
.hero {
    text-align: center;
    color: var(--kinari);
    padding-bottom: clamp(40px, 7vw, 72px);
}

.series {
    font-size: 13px;
    letter-spacing: .42em;
    text-indent: .42em;
    color: color-mix(in srgb, var(--kinari) 78%, transparent);
    margin-bottom: clamp(22px, 5vw, 40px);
}

.moon-mark {
    color: var(--kinari);
    width: clamp(64px, 14vw, 84px);
    margin: 0 auto clamp(20px, 4vw, 30px);
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.22));
}
.moon-mark svg { width: 100%; height: auto; display: block; }
.mark-stars { opacity: .92; }

.brand {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 7.4vw, 52px);
    letter-spacing: .12em;
    line-height: 1.4;
    text-shadow: 0 1px 14px rgba(0,0,0,.22);
}

.tagline {
    font-family: var(--serif);
    font-size: clamp(15px, 4vw, 21px);
    letter-spacing: .08em;
    margin-top: clamp(18px, 4vw, 26px);
    color: color-mix(in srgb, var(--kinari) 95%, var(--yamabuki));
}

.lede {
    font-size: clamp(13px, 3.4vw, 15px);
    line-height: 2;
    margin: clamp(22px, 5vw, 34px) auto 0;
    max-width: 30em;
    color: color-mix(in srgb, var(--kinari) 86%, transparent);
}

/* CTA */
.cta-row {
    margin-top: clamp(30px, 6vw, 44px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 15px;
    letter-spacing: .06em;
    text-decoration: none;
    padding: 15px 32px;
    border-radius: 999px;
    transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}

.btn-primary {
    color: var(--sumi);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--yamabuki) 92%, white),
        var(--yamabuki));
    box-shadow: 0 6px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.4);
    font-weight: 500;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4);
}

.cta-note {
    font-size: 12px;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--kinari) 70%, transparent);
}

/* ===== カード共通（生成りのベール上に置く） ===== */
.pillars, .offer, .follow {
    background: color-mix(in srgb, var(--kinari) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--frame-gold) 40%, transparent);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.16);
    backdrop-filter: blur(2px);
    margin-top: clamp(20px, 4vw, 28px);
}

/* ===== 3つの柱 ===== */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    padding: 0;
    background: color-mix(in srgb, var(--frame-gold) 40%, transparent);
}
.pillar {
    background: color-mix(in srgb, var(--kinari) 97%, transparent);
    padding: clamp(24px, 4vw, 34px) clamp(16px, 3vw, 24px);
    text-align: center;
}
.pillar-icon {
    display: block;
    font-size: 26px;
    color: var(--yamabuki);
    margin-bottom: 12px;
    line-height: 1;
}
.pillar h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(15px, 3.8vw, 17px);
    letter-spacing: .06em;
    color: var(--sumi);
    margin-bottom: 10px;
}
.pillar p {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--kareccha);
}

/* ===== 毎月のお届け ===== */
.offer {
    padding: clamp(30px, 6vw, 48px) clamp(24px, 6vw, 52px);
    text-align: center;
}
.offer-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(18px, 4.6vw, 24px);
    letter-spacing: .08em;
    color: var(--sumi);
    margin-bottom: clamp(20px, 4vw, 28px);
}
.offer-list {
    list-style: none;
    display: inline-block;
    text-align: left;
    margin-bottom: clamp(22px, 5vw, 32px);
}
.offer-list li {
    position: relative;
    padding-left: 26px;
    margin: 12px 0;
    font-size: 14px;
    color: var(--kareccha);
}
.offer-list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--yamabuki);
    font-size: 13px;
}
.offer-philosophy {
    font-size: 13px;
    line-height: 2;
    color: var(--sakin);
    max-width: 32em;
    margin: 0 auto;
}

/* ===== フォロー導線 ===== */
.follow {
    padding: clamp(30px, 6vw, 44px) clamp(24px, 6vw, 40px);
    text-align: center;
}
.follow-lead {
    font-family: var(--serif);
    font-size: clamp(14px, 3.6vw, 16px);
    letter-spacing: .06em;
    color: var(--kareccha);
    margin-bottom: clamp(20px, 4vw, 26px);
}
.social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.social-link {
    font-size: 13px;
    letter-spacing: .08em;
    text-decoration: none;
    color: var(--kareccha);
    padding: 9px 20px;
    border: 1px solid color-mix(in srgb, var(--frame-gold) 60%, transparent);
    border-radius: 999px;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.social-link:hover {
    color: var(--sumi);
    border-color: var(--yamabuki);
    background: color-mix(in srgb, var(--yamabuki) 14%, transparent);
}

/* ===== フッター ===== */
.foot {
    text-align: center;
    margin-top: clamp(36px, 7vw, 56px);
    color: color-mix(in srgb, var(--kinari) 80%, transparent);
}
.sign {
    font-family: var(--serif);
    font-size: 14px;
    letter-spacing: .3em;
    text-indent: .3em;
    margin-bottom: 12px;
    color: color-mix(in srgb, var(--kinari) 88%, transparent);
}
.disclaimer {
    font-size: 11px;
    line-height: 1.8;
    color: color-mix(in srgb, var(--kinari) 62%, transparent);
    max-width: 30em;
    margin: 0 auto;
}

/* ===== レスポンシブ ===== */
.sp-br { display: none; }

@media (max-width: 560px) {
    .pillars { grid-template-columns: 1fr; }
    .sp-br { display: inline; }
    .frame { inset: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .starfield { animation: none; }
    .btn { transition: none; }
}