:root { --paper:#f7f4ed; --ink:#243126; --muted:#687168; --line:#d9d6cd; --accent:#b75639; --card:#eeeadf; --night:#1c2820; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans SC",sans-serif; font-size:16px; line-height:1.8; transition:.3s background,.3s color; }
.site-header { width:min(1160px,calc(100% - 48px)); margin:auto; padding:31px 0; display:flex; justify-content:space-between; align-items:center; }
.brand { text-decoration:none; color:var(--ink); font-family:"Noto Serif SC",serif; font-size:22px; font-weight:700; letter-spacing:.04em; }.brand span { color:var(--muted); font-size:15px; font-weight:400; margin-left:7px; }
nav { display:flex; align-items:center; gap:25px; } nav a { color:var(--muted); text-decoration:none; font-size:14px; } nav a:hover,.text-link:hover { color:var(--accent); } button { border:1px solid var(--line); color:var(--ink); background:transparent; border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:17px; }
main { width:min(1160px,calc(100% - 48px)); margin:auto; }.hero { min-height:545px; padding:100px 6.5% 85px; border-bottom:1px solid var(--line); }.eyebrow,.meta { font-family:"DM Mono",monospace; letter-spacing:.11em; font-size:11px; color:var(--accent); text-transform:uppercase; }.hero h1 { font:600 clamp(42px,6vw,82px)/1.25 "Noto Serif SC",serif; letter-spacing:-.05em; margin:20px 0 25px; }.hero h1 em { color:var(--accent); font-weight:500; }.intro { max-width:540px; color:var(--muted); font-size:17px; }.scroll-link,.text-link { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); display:inline-block; margin-top:24px; font-size:14px; }.scroll-link span { margin-left:15px; }
.featured { padding:96px 6.5%; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:8%; border-bottom:1px solid var(--line); }.featured-image { min-height:390px; background:linear-gradient(125deg,rgba(30,54,36,.08),rgba(255,239,193,.4)),url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1100&q=80') center/cover; }.featured h2,.section-heading h2,.about h2 { font:600 34px/1.35 "Noto Serif SC",serif; margin:12px 0; }.featured article p:not(.meta) { color:var(--muted); }
.notes { padding:100px 6.5%; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:32px; }.section-heading h2 { margin:0; }.note-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.note-card { min-height:282px; background:var(--card); padding:31px 28px 24px; display:flex; flex-direction:column; }.note-card.warm { background:#eee0d0; }.note-card.blue { background:#dbe6e0; }.note-card h3 { font:600 23px/1.5 "Noto Serif SC",serif; margin:8px 0; }.note-card p:not(.meta) { color:var(--muted); font-size:14px; line-height:1.8; }.note-card a { color:var(--accent); text-decoration:none; font-size:25px; margin-top:auto; }
.about { border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.4fr; gap:12%; padding:82px 6.5% 105px; }.about h2{ margin-top:0; }.about>p { color:var(--muted); margin:0; font-family:"Noto Serif SC",serif; font-size:18px; } footer { width:min(1160px,calc(100% - 48px)); margin:auto; padding:25px 6.5% 35px; display:flex; justify-content:space-between; font-size:12px; color:var(--muted); border-top:1px solid var(--line); } footer p { margin:0; } footer a { color:var(--muted); text-decoration:none; }
body.dark { --paper:#1d2921; --ink:#f1eee5; --muted:#bac2b7; --line:#3b493e; --card:#26362b; --accent:#efa278; } body.dark .note-card.warm { background:#49372f; } body.dark .note-card.blue { background:#273c3d; }
@media (max-width:720px) { .site-header,main,footer{width:min(100% - 32px,1160px)} .hero{padding:75px 0 65px;min-height:auto}.featured,.about{padding:62px 0;grid-template-columns:1fr;gap:30px}.featured-image{min-height:270px}.notes{padding:70px 0}.note-grid{grid-template-columns:1fr}.section-heading{display:block}.about>p{font-size:16px}.brand span{display:none}footer{padding-left:0;padding-right:0;flex-direction:column;gap:6px} }