:root{--bg:#f6f1e9;--ink:#2b2520;--muted:#7a6f63;--accent:#8a5a2b;--card:#fffaf2}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,"Times New Roman",serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:var(--accent)}
.top{display:flex;justify-content:space-between;align-items:center;padding:20px 6vw;border-bottom:1px solid #e3d8c8;flex-wrap:wrap;gap:10px}
.logo{font-size:1.4rem;text-decoration:none;color:var(--ink);font-weight:bold}
.logo span{font-weight:normal;color:var(--accent);margin-left:4px}
nav a{margin-left:18px;text-decoration:none;color:var(--ink)}
.hero{padding:80px 6vw 60px;max-width:820px}
.hero h1{font-size:2.6rem;line-height:1.15;margin:0 0 16px}
.btn{display:inline-block;margin-top:12px;padding:10px 18px;background:var(--accent);color:#fff;text-decoration:none;border-radius:4px}
.wrap{padding:30px 6vw;max-width:980px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
article{background:var(--card);padding:16px;border-radius:6px;border:1px solid #eadfce}
.ph{height:140px;border-radius:4px;margin-bottom:10px}
.ph.a{background:linear-gradient(135deg,#c9a878,#8a5a2b)}
.ph.b{background:linear-gradient(135deg,#e2c9a0,#b0855a)}
.ph.c{background:linear-gradient(135deg,#d8c3a5,#6f4a28)}
.muted{color:var(--muted)}
table.classes{border-collapse:collapse;width:100%;margin:20px 0;background:var(--card)}
.classes th,.classes td{border-bottom:1px solid #eadfce;padding:10px;text-align:left}
footer{padding:40px 6vw;color:var(--muted);font-size:.9rem}