/* Kyuri — house style: gold on deep black (eHawu family). */
:root {
    --ink: #0A0A0A;
    --ink-2: #121212;
    --gold: #FFB800;
    --gold-hi: #FFD766;
    --gold-deep: #D4AF37;
    --gold-dark: #D47A00;
    --paper: #EDEDED;
    --mute: #9A9A9A;
    --line: rgba(212, 175, 55, .25);
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }

.page-shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* top bar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    gap: 16px;
    flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.wordmark {
    font-weight: 800;
    letter-spacing: .18em;
    font-size: 1.35rem;
    color: var(--gold);
}
.tag { color: var(--gold-deep); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.topnav { display: flex; align-items: center; gap: 22px; }
.topnav a { color: var(--paper); font-weight: 600; }
.topnav a:hover { color: var(--gold-hi); }

/* CTAs */
.cta {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: .02em;
}
.gold-cta { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-dark)); color: #14100A; }
.gold-cta:hover { filter: brightness(1.12); color: #0A0805; }
.ghost { border: 1px solid var(--gold-deep); color: var(--gold); }
.ghost:hover { background: rgba(212, 175, 55, .1); color: var(--gold-hi); }
.wa { background: #128C7E; color: #fff; }
.wa:hover { background: #17a393; color: #fff; }

/* hero */
.hero { text-align: center; padding: 64px 0 40px; }
.hero .lockup { width: min(520px, 90%); margin-bottom: 28px; border-radius: 14px; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 14px; letter-spacing: .01em; }
.gold { color: var(--gold); }
.lede { max-width: 720px; margin: 0 auto 28px; color: var(--mute); font-size: 1.12rem; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.micro { color: var(--mute); font-size: .85rem; letter-spacing: .04em; }

/* cards */
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding: 36px 0; }
.card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
}
.card h2 { margin: 0 0 10px; font-size: 1.15rem; color: var(--gold-hi); }
.card p { margin: 0; color: var(--mute); font-size: .98rem; }
a.card:hover { border-color: var(--gold); }

/* strip */
.strip { border-top: 1px solid var(--line); padding: 40px 0; text-align: center; }
.strip h2 { color: var(--gold-deep); }
.strip p { max-width: 700px; margin: 0 auto 20px; color: var(--mute); }

/* topics grid */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 26px; }

/* prose (disclaimer) */
.prose { max-width: 780px; }
.prose h2 { color: var(--gold-deep); margin-top: 34px; }
.prose li { margin-bottom: 8px; color: var(--paper); }
.stub-note { margin-top: 30px; }
.wa-inline { color: #34d0bd; font-weight: 700; }

/* footer */
.sitefoot { margin-top: auto; border-top: 1px solid var(--line); padding: 26px 0 34px; }
.fine { color: var(--mute); font-size: .82rem; max-width: 860px; margin: 6px 0; }

main { flex: 1; padding: 26px 0 40px; }
main h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* --- polish pass 2026-10-28: vertical rhythm, panel breathing room, readability --- */
body { line-height: 1.65; }
main section, main article, .case-section { margin-block: 28px; }
.deadline-panel, .panel { padding: 20px 24px; border-radius: 12px; }
.deadline-panel strong, .panel strong { font-weight: 700; }
ul, ol { line-height: 1.8; margin-bottom: 16px; }
li { margin-bottom: 6px; }
h1 { letter-spacing: -0.02em; margin-bottom: 10px; }
p.lead { color: #d8d8d8; font-size: 1.05rem; margin-bottom: 22px; }
form label { display: block; margin-top: 18px; font-weight: 600; }
form input, form select, form textarea { width: 100%; max-width: 560px; padding: 10px 12px; border-radius: 8px; border: 1px solid #3a3a3a; background: #161616; color: #f2f2f2; margin-top: 6px; }
button[type=submit], .btn-primary { background: #FF9900; color: #0D0D0D; border: none; font-weight: 700; padding: 13px 26px; border-radius: 10px; margin-top: 26px; font-size: 1.02rem; }
button[type=submit]:hover, .btn-primary:hover { background: #ffab2e; }
a.cta.wa, .wa { background: #FF9900 !important; color: #0D0D0D !important; border-color: #FF9900 !important; font-weight: 700; }