:root { --bg: #FBF6EC; --surface: #FFFDF7; --alt: #F5ECDB; --ink: #2E3350; --muted: #626783; --accent: #5B6FB0; --accent-ink: #fff; --line: #E8DCC4; --accent-2: #E79B7B;
  --radius: 26px; --font-head: "Young Serif", Georgia, serif; --font-body: "Quicksand", system-ui, sans-serif;
  --f-accent: #5B6FB0; --f-surface: #FFFDF7; --f-line: #E2D3B6; --f-radius: 18px; }
body { font-weight: 500; font-size: 19px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1, h2, h3 { font-weight: 400; }
.site-head { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); }
.head-inner { flex-direction: column; gap: 6px; padding: 14px 0 8px; }
.nav-menu { justify-content: center; }
@media (max-width: 1080px) { .head-inner { flex-direction: row; } }
.nav-menu a { font-weight: 700; }
.btn { font-weight: 700; box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 60%, #000); transition: transform .15s, box-shadow .15s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn-ghost { box-shadow: none; background: var(--surface); }
.sb-cover { overflow-x: clip; padding: clamp(32px, 6vw, 80px) 0; background: radial-gradient(closest-side at 80% 40%, #F3D9A4aa, transparent), radial-gradient(closest-side at 15% 80%, #8FB9A855, transparent); }
.sb-cover-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .sb-cover-inner { grid-template-columns: 1fr; } }
.sb-once { font-style: italic; color: #A9502F; font-weight: 700; }
.sb-cover h1 { font-size: clamp(3rem, 7.5vw, 5.8rem); line-height: .98; }
.sb-sub { font-size: 1.35rem; }
.sb-sub em { font-family: var(--font-head); font-style: normal; color: var(--accent); }
.sb-plate { margin: 0; padding: 18px; background: var(--surface); border-radius: 8px; box-shadow: 0 2px 0 var(--line), 0 30px 60px rgba(46, 51, 80, .14); transform: rotate(2deg); position: relative; }
.sb-plate::before { content: ""; position: absolute; inset: -18px -24px auto auto; width: 120px; height: 34px; background: #F3D9A4cc; transform: rotate(18deg); border-radius: 3px; }
.sb-plate img { border-radius: 4px; aspect-ratio: 1; object-fit: cover; }
.sb-ch { font-family: var(--font-head); color: #A9502F; font-size: 1.2rem; display: flex; align-items: center; gap: 14px; }
.sb-ch::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.sb-drop::first-letter { font-family: var(--font-head); float: left; font-size: 4.2em; line-height: .8; padding: 6px 12px 0 0; color: var(--accent); }
.sb-chapter { position: relative; overflow-x: clip; }
@supports (animation-timeline: view()) {
  .sb-chapter > .wrap { animation: sb-turn linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; transform-origin: left center; }
  @keyframes sb-turn { from { opacity: 0; transform: perspective(1200px) rotateY(-14deg) translateX(-20px); } to { opacity: 1; transform: none; } }
}
.sb-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
@media (max-width: 860px) { .sb-pages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sb-pages { grid-template-columns: 1fr; } }
.sb-page { position: relative; display: flex; flex-direction: column; background: var(--surface); padding: 14px 14px 18px; border-radius: 6px 18px 18px 6px; box-shadow: inset 8px 0 0 var(--class), 0 14px 30px rgba(46, 51, 80, .1); text-decoration: none; color: var(--ink); transition: transform .3s var(--ease-out); }
.sb-page:hover { transform: rotate(-1deg) translateY(-4px); }
.sb-page img { border-radius: 4px 12px 12px 4px; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 12px; }
.sb-page strong { font-family: var(--font-head); font-size: 1.5rem; font-weight: 400; }
.sb-page em { font-style: normal; color: var(--muted); }
.sb-page-no { position: absolute; top: 22px; right: 22px; background: var(--surface); padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.card, .quote { border: 0; box-shadow: 0 14px 30px rgba(46, 51, 80, .08); }
.card-icon { border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; background: #F3D9A4; color: var(--ink); }
.cards > :nth-child(2) .card-icon { background: #8FB9A855; } .cards > :nth-child(3) .card-icon { background: #E79B7B55; } .cards > :nth-child(4) .card-icon { background: #5B6FB033; }
.quote blockquote { font-family: var(--font-head); font-size: 1.1rem; }
.page-hero { background: radial-gradient(closest-side at 85% 30%, #F3D9A4aa, transparent), var(--alt); }
.section-alt { background: var(--alt); }
.sb-end { background: radial-gradient(closest-side at 50% 50%, #8FB9A855, transparent); }
.cta { background: var(--accent); }
.site-foot { background: #2E3350; }
.class-card { border-radius: 6px 22px 22px 6px; }
.person img, .person .avatar { border-radius: 50%; aspect-ratio: 1; }
.person { text-align: center; }