@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap');

:root { --ink: #17221e; --muted: #62736b; --paper: #f3f5ef; --mint: #b7d9bd; --accent: #d95e3f; --line: rgba(23,34,30,.17); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, "Noto Sans SC", sans-serif; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .08; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.site-header, main, .site-footer { max-width: 1160px; margin: 0 auto; padding-left: 7vw; padding-right: 7vw; }
.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.mark { display: inline-flex; gap: 3px; color: var(--ink); text-decoration: none; font-family: "Noto Serif SC", serif; font-size: 22px; font-weight: 700; letter-spacing: -.2em; }
.mark span:last-child { color: var(--accent); transform: translateY(8px); }
.header-note, .eyebrow, .section-label, .scroll-cue, .site-footer { font-family: "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.header-note { color: var(--muted); margin: 0; }
.hero { min-height: 690px; padding-top: 13vh; position: relative; }
.hero::after { content: ""; position: absolute; width: 210px; height: 210px; right: 7%; top: 22%; border-radius: 50%; background: var(--mint); filter: blur(1px); z-index: -1; }
.eyebrow { color: var(--accent); margin: 0 0 30px; }
h1, h2 { margin: 0; font-family: "Noto Serif SC", serif; font-weight: 600; letter-spacing: -.075em; line-height: 1.1; }
h1 { font-size: clamp(56px, 9vw, 112px); max-width: 850px; }
h1 em, h2 em { color: var(--accent); font-style: normal; }
.intro { max-width: 430px; margin: 38px 0 0 13%; color: var(--muted); line-height: 1.9; font-size: 15px; }
.scroll-cue { display: inline-flex; gap: 12px; align-items: center; margin-top: 84px; color: var(--ink); text-decoration: none; }
.scroll-cue span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 50%; font-size: 17px; }
.section-rule { border-top: 1px solid var(--line); padding-top: 30px; }
.about { min-height: 450px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 8%; align-items: start; }
.section-label { color: var(--muted); }
.about h2, .contact h2 { font-size: clamp(36px, 5vw, 64px); }
.about-copy p { max-width: 330px; color: var(--muted); line-height: 1.9; margin: 32px 0 0; }
.about-stamp { justify-self: end; text-align: right; color: var(--accent); font: 500 44px/1 "DM Mono", monospace; transform: rotate(-8deg); }
.about-stamp small { font-size: 11px; color: var(--muted); }
.contact { min-height: 520px; padding-bottom: 80px; }
.contact-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 72px; }
.qr-card { width: 190px; margin: 0 8% 0 0; padding: 14px; background: white; box-shadow: 12px 14px 0 var(--mint); transform: rotate(3deg); }
.qr-card img { display: block; width: 100%; height: auto; }
.qr-card figcaption { color: var(--muted); font: 11px "DM Mono", monospace; text-align: center; padding: 11px 0 2px; }
.site-footer { border-top: 1px solid var(--line); padding-top: 22px; padding-bottom: 32px; display: flex; justify-content: space-between; color: var(--muted); }
.site-footer a { color: inherit; }
@media (max-width: 640px) { .site-header, main, .site-footer { padding-left: 24px; padding-right: 24px; } .hero { min-height: 590px; padding-top: 9vh; } .hero::after { width: 120px; height: 120px; right: 3%; top: 25%; } .intro { margin-left: 0; } .about { display: block; min-height: 500px; } .about-copy { margin-top: 54px; } .about-stamp { margin-top: 42px; } .contact-main { margin-top: 52px; flex-direction: column; } .qr-card { margin: 20px 0 0 10px; } .site-footer { flex-direction: column; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }