:root { --linen: #F3EBDD; --cream: #FBF7EF; --cocoa: #5A4034; --soft: #735848; --leaf: #5FAE6E; --gold: #E9A93A; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--linen); color: var(--cocoa); font: 17px/1.65 'Nunito', 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', system-ui, sans-serif; }
body.ja { font-family: 'Nunito', 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', system-ui, sans-serif; line-height: 1.85; }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 56px; }
header.site { display: flex; align-items: center; gap: 14px; margin: 4px 4px 22px; }
header.site img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 4px 10px rgba(58,44,34,.18); }
header.site a { color: inherit; text-decoration: none; }
header.site .name { font-family: 'Fraunces', 'Zen Maru Gothic', serif; font-weight: 600; font-size: 24px; }
.card { position: relative; background: var(--cream); border-radius: 26px; padding: 30px 26px 26px; box-shadow: 0 10px 26px rgba(58,44,34,.12); }
.card::before { content: ''; position: absolute; inset: 9px; border: 1.6px dashed rgba(90,64,52,.28); border-radius: 19px; pointer-events: none; }
h1, h2 { font-family: 'Fraunces', 'Zen Maru Gothic', serif; font-weight: 600; line-height: 1.25; }
h1 { font-size: 32px; margin: 0 0 4px; }
h2 { font-size: 21px; margin: 28px 0 6px; }
h3 { font-size: 17px; font-weight: 800; margin: 20px 0 2px; font-family: inherit; }
p, li { color: var(--cocoa); }
.muted { color: var(--soft); font-size: 15px; }
ul { padding-left: 1.2em; }
li { margin: 6px 0; }
a { color: #3F6E9A; }
.contact { display: inline-block; margin-top: 4px; padding: 10px 18px; border-radius: 999px; background: var(--linen); font-weight: 800; }
.hero { text-align: center; padding: 38px 22px 30px; }
.hero img { width: 128px; height: 128px; border-radius: 30px; box-shadow: 0 10px 24px rgba(58,44,34,.22); }
.hero h1 { font-size: 40px; margin-top: 18px; }
.hero .tag { font-size: 19px; color: var(--soft); margin: 4px 0 0; }
.links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.links a { text-decoration: none; color: var(--cocoa); background: var(--linen); padding: 11px 20px; border-radius: 999px; font-weight: 800; }
footer { text-align: center; margin-top: 26px; font-size: 14px; color: var(--soft); }
footer a { color: var(--soft); }
