:root{--bg:#FFF8EE;--ink:#272060;--soft:#655f88;--line:rgba(39,32,96,.14);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#241C58;--ink:#FFF0E2;--soft:#c9c3e0;--line:rgba(255,240,226,.16)}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.55 "Instrument Sans",system-ui,sans-serif;overflow-x:hidden}
.d{font-family:"Young Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em}a{color:inherit}
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;max-width:1168px;margin:0 auto}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:22px}.logo img{border-radius:9px;display:block}
.join{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 30px;border-radius:999px;background:#DF4552;color:#fff;font-size:18px;font-weight:600;text-decoration:none;transition:transform .15s}.join:hover{transform:scale(1.02)}.join:active{transform:scale(.97)}
:focus-visible{outline:2.5px solid #DF4552;outline-offset:3px}
.hero{max-width:1168px;margin:0 auto;padding:36px 24px 56px}.hero h1{font-size:clamp(54px,10vw,124px);line-height:.98;margin:0}.hero h1 span{color:#DF4552}.hero p{font-size:22px;color:var(--soft);max-width:480px;margin:20px 0 0}
.row{position:relative;padding-top:34px}.line{position:absolute;left:0;top:0;width:100%;height:50px}
.grid{position:relative;display:grid;gap:32px;max-width:1168px;margin:0 auto;padding:0 24px 56px;grid-template-columns:repeat(3,1fr)}
.note{position:relative;text-align:center;transform-origin:top;background:#FFF8EE;color:#272060;border-radius:10px;padding:30px 20px 26px;box-shadow:0 16px 40px rgba(20,14,70,.2)}
.peg{position:absolute;top:-16px;left:calc(50% - 7px);width:14px;height:40px;border-radius:4px;background:#C98A58}
.art{display:grid;place-items:center;height:180px}.art img{max-height:180px;height:auto;display:block}
.note h2{font-size:28px;margin:6px 0;line-height:1.15}.note p{font-size:17px;line-height:1.45;margin:0;color:#655f88}
.end{text-align:center;padding:10px 24px 30px}
footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:15px;color:var(--soft);padding:28px 24px;max-width:1168px;margin:0 auto}.links{display:flex;gap:20px}
.page{max-width:680px;margin:0 auto;padding:20px 24px 40px}.page h1{font-size:clamp(40px,7vw,60px);line-height:1.05;margin:24px 0 6px}.page .sub{color:var(--soft);margin:0 0 26px}.page h2{font-size:26px;margin:28px 0 6px}.page p,.page li{color:var(--soft)}.page ul{padding-left:22px}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.join{transition:none}}