:root { --bg:#f4f1ea; --fg:#1e1c19; --muted:#6c665d; --line:#dcd6ca; --card:#fbf9f4; --accent:#b8532c; --band:#ebe6db; }
@media (prefers-color-scheme: dark) { :root { --bg:#131211; --fg:#ece7de; --muted:#9c958a; --line:#2b2926; --card:#1a1917; --accent:#e07a4f; --band:#181715; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.65 Georgia, "Times New Roman", serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.07; z-index:10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wrap { max-width:1080px; margin:0 auto; padding:0 16px; }
a { color:inherit; }
h1, h2, h3 { font-weight:400; line-height:1.15; margin:0; }
.sans, .menu, .lang, .kicker, .btn, .meta, .read, .stats dd, figcaption, .num, th, .foot { font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.top { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; gap:24px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:600 1.05rem system-ui, sans-serif; }
.dot { width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.menu { display:flex; gap:22px; margin-left:auto; font-size:.9rem; }
.menu a { text-decoration:none; color:var(--muted); }
.menu a:hover { color:var(--fg); }
.lang { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.lang button { background:none; border:0; color:var(--muted); font:inherit; font-size:.78rem; padding:.3rem .65rem; cursor:pointer; }
.lang button.on { color:var(--fg); background:var(--line); }

.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding:72px 16px 56px; }
.kicker { color:var(--accent); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px; }
h1 { font-size:clamp(2.2rem, 5.5vw, 3.6rem); letter-spacing:-.01em; }
.lead { color:var(--muted); font-size:1.08rem; margin:20px 0 28px; max-width:560px; }
.cta { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; padding:.7rem 1.2rem; border-radius:999px; background:var(--fg); color:var(--bg); text-decoration:none; font-size:.9rem; }
.btn.ghost { background:none; color:var(--fg); border:1px solid var(--line); }
.stats { display:flex; gap:36px; margin:40px 0 0; }
.stats dt { font-size:2rem; line-height:1; }
.stats dd { margin:6px 0 0; color:var(--muted); font-size:.8rem; }

.frame { margin:0; background:#111; padding:28px 14px; border-radius:6px; position:relative; box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
.frame::before, .frame::after { content:""; position:absolute; left:14px; right:14px; height:10px;
  background:radial-gradient(circle at 6px 5px, #f4f1ea 3px, transparent 3.5px) 0 0/22px 10px repeat-x; opacity:.85; }
.frame::before { top:9px; } .frame::after { bottom:9px; }
.frame figcaption { display:flex; justify-content:space-between; color:#bdb6aa; font-size:.75rem; margin-top:10px; letter-spacing:.04em; }
.big .ph { aspect-ratio:4/5; }

.ph { position:relative; aspect-ratio:3/2; border-radius:3px; overflow:hidden; }
.ph::after { content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:var(--g, rgba(0,0,0,.35)); clip-path:polygon(0 40%, 18% 22%, 35% 48%, 55% 18%, 72% 40%, 100% 25%, 100% 100%, 0 100%); }
.sun { position:absolute; width:22%; aspect-ratio:1; border-radius:50%; background:#fff3d6; top:22%; left:58%; opacity:.9; filter:blur(.5px); }
.ph0 { aspect-ratio:3/2; background:linear-gradient(#fff, #f2ede2); }
.ph0::after { display:none; }
.ph1 { background:linear-gradient(180deg, #e9b98f 0%, #d98a6a 45%, #6e4a3e 100%); --g:#3b2a25; }
.ph2 { background:linear-gradient(180deg, #a9c2c9 0%, #7f9aa3 50%, #34474f 100%); --g:#22313a; }
.ph3 { background:linear-gradient(180deg, #d8d2b0 0%, #a6a27a 55%, #4e4c35 100%); --g:#34331f; }
.ph4 { background:linear-gradient(180deg, #cfcac4 0%, #8f8a85 50%, #3a3734 100%); --g:#1f1d1b; }
.ph5 { background:linear-gradient(180deg, #f0c9a0 0%, #c98e7e 50%, #5a3e4c 100%); --g:#33232c; }
.ph6 { background:linear-gradient(180deg, #b9c7b3 0%, #7d907a 55%, #2f3b31 100%); --g:#1e271f; }

.sheet { background:#111; padding:30px 0; position:relative; overflow:hidden; }
.sheet::before, .sheet::after { content:""; position:absolute; left:0; right:0; height:10px; background:radial-gradient(circle at 7px 5px, #3a3733 3px, transparent 3.5px) 0 0/24px 10px repeat-x; }
.sheet::before { top:10px; } .sheet::after { bottom:10px; }
.strip { display:flex; gap:10px; overflow-x:auto; padding:0 16px; scrollbar-width:none; }
.strip figure { margin:0; flex:0 0 220px; position:relative; }
.strip b { position:absolute; right:8px; bottom:6px; color:#f3b05b; font:600 .7rem system-ui, sans-serif; }

.block { padding:88px 16px; }
.head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
h2 { font-size:clamp(1.7rem, 3.6vw, 2.4rem); }
.head p { color:var(--muted); margin:0; max-width:380px; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
article { display:flex; flex-direction:column; }
.meta { display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin:14px 0 6px; }
.meta span { color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
article h3 { font-size:1.3rem; margin-bottom:8px; }
article p { color:var(--muted); margin:0 0 10px; font-size:.97rem; }
.read { font-size:.78rem; color:var(--muted); margin-top:auto; }

.band { background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cams { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.cam { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px; }
.num { color:var(--accent); font-size:.8rem; letter-spacing:.1em; }
.cam h3 { font-size:1.35rem; margin:10px 0 8px; }
.cam p { color:var(--muted); margin:0 0 12px; font-size:.97rem; }
.cam ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.cam li { padding:8px 0; border-bottom:1px solid var(--line); font-size:.9rem; }

.lab { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; }
.lab > div > p { color:var(--muted); margin:12px 0 24px; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:500; padding:0 0 10px; border-bottom:1px solid var(--fg); }
td { padding:12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
td:nth-child(2) { font-variant-numeric:tabular-nums; padding:12px 16px; }
td:last-child { color:var(--muted); }
.tips { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px; align-self:start; }
.tips h3 { font-size:1.3rem; margin-bottom:12px; }
.tips ol { margin:0; padding-left:1.2rem; color:var(--muted); }
.tips li { margin:10px 0; }

.quote { background:var(--fg); color:var(--bg); }
.quote blockquote { margin:0 auto; padding:72px 16px; }
.quote p { font-size:clamp(1.4rem, 3.2vw, 2.1rem); line-height:1.35; margin:0; max-width:820px; font-style:italic; }

.about { display:grid; grid-template-columns:160px 1fr; gap:40px; align-items:start; }
.avatar { width:160px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 38%, #e3c3a4 0 18%, transparent 19%), radial-gradient(ellipse at 50% 100%, #8a6a58 0 42%, transparent 43%), linear-gradient(#cfd8d6, #9fb0ae); }
.about p { color:var(--muted); max-width:620px; }

.foot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:.82rem; padding-top:24px; padding-bottom:40px; border-top:1px solid var(--line); }

.nf { min-height:100vh; display:grid; place-content:center; gap:24px; justify-items:center; text-align:center; }
.nf .frame { width:min(420px, 100%); }

@media (max-width:860px) {
  .menu { display:none; }
  .lang { margin-left:auto; }
  .hero { grid-template-columns:1fr; gap:40px; padding-top:48px; }
  .grid, .cams { grid-template-columns:1fr 1fr; }
  .lab { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .grid, .cams { grid-template-columns:1fr; }
  .stats { gap:24px; }
  .about { grid-template-columns:1fr; }
  .avatar { width:110px; }
  .strip figure { flex-basis:160px; }
}