:root { --bg:#faf8f4; --ink:#22201c; --muted:#6f6a61; --line:#e4dfd5; --accent:#b8791f; }
@media (prefers-color-scheme: dark) { :root { --bg:#161513; --ink:#ece8e0; --muted:#a39d92; --line:#2e2c28; --accent:#d9a045; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 Georgia, "Times New Roman", serif; }
.top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:22px 16px; max-width:1080px; margin:0 auto; flex-wrap:wrap; }
.brand { font-size:22px; letter-spacing:.04em; color:var(--ink); text-decoration:none; }
.brand span { color:var(--accent); margin-left:.3em; }
nav a { margin-left:22px; color:var(--muted); text-decoration:none; font:14px/1 system-ui, sans-serif; letter-spacing:.08em; text-transform:uppercase; }
nav a:first-child { margin-left:0; }
nav a:hover { color:var(--ink); }
.hero { max-width:1080px; margin:0 auto; padding:56px 16px 40px; }
.hero h1 { font-weight:400; font-size:clamp(30px, 5vw, 52px); line-height:1.15; margin:0 0 16px; max-width:16em; }
.hero p { color:var(--muted); max-width:34em; margin:0; }
.grid { max-width:1080px; margin:0 auto; padding:0 16px; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.ph { margin:0; aspect-ratio:4/3; border-radius:3px; display:flex; align-items:flex-end; overflow:hidden; }
.ph figcaption { width:100%; padding:10px 12px; font:13px/1.3 system-ui, sans-serif; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.45)); }
.p1 { background:linear-gradient(180deg,#f3c98b 0%,#e9a66b 38%,#8a6a4f 39%,#5d4a3a 100%); }
.p2 { background:linear-gradient(180deg,#b9c4cc 0%,#8c9aa5 45%,#4b5158 46%,#2f3338 100%); }
.p3 { background:linear-gradient(180deg,#d9d2c1 0%,#b7b09b 50%,#3f4a37 51%,#262d22 100%); }
.p4 { background:linear-gradient(135deg,#e8e4dc 0%,#bdb7ab 40%,#77726a 41%,#3a3834 100%); }
.p5 { background:linear-gradient(180deg,#6f7a86 0%,#99a3ab 48%,#b99a4e 49%,#7c6a34 100%); }
.p6 { background:linear-gradient(160deg,#f0d9b8 0%,#d39a6a 45%,#8b4f3a 46%,#4c2e26 100%); }
.note { max-width:1080px; margin:18px auto 0; padding:0 16px; color:var(--muted); font-size:15px; }
.text { max-width:1080px; margin:0 auto; padding:44px 16px 0; }
.text h2 { font-weight:400; font-size:26px; margin:0 0 10px; }
.text p { max-width:38em; margin:0; }
footer { max-width:1080px; margin:56px auto 0; padding:22px 16px 40px; border-top:1px solid var(--line); color:var(--muted); font:13px/1.5 system-ui, sans-serif; }