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

:root { --paper:#f4f0e7; --ink:#17231e; --muted:#6d746d; --accent:#d94f35; --line:rgba(23,35,30,.18); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"Noto Serif SC",serif; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); }
main { width:min(1040px,calc(100% - 40px)); margin:0 auto; }
header { height:110px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; font-weight:700; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; color:var(--paper); background:var(--accent); border-radius:50% 50% 47% 53%; transform:rotate(-4deg); }
.date,.eyebrow,.card-top,.card-bottom,footer { font-family:"Space Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.date { color:var(--muted); font-size:12px; }
.hero { padding:86px 0 70px; display:grid; grid-template-columns:1.25fr .75fr; column-gap:72px; }
.eyebrow { grid-column:1/-1; margin:0 0 24px; color:var(--accent); font-size:12px; font-weight:700; }
h1 { margin:0; font-size:clamp(52px,7.2vw,94px); line-height:1.04; letter-spacing:-.06em; font-weight:600; }
h1 em { color:var(--accent); font-style:normal; }
.intro { align-self:end; margin:0 0 10px; color:var(--muted); font-size:16px; line-height:1.9; }
form { grid-column:1/-1; margin-top:64px; }
label { display:block; margin-bottom:12px; color:var(--muted); font-size:13px; }
.input-row { display:flex; border-bottom:2px solid var(--ink); }
input { flex:1; min-width:0; padding:16px 0 20px; border:0; outline:0; color:var(--ink); background:transparent; font:500 clamp(18px,3vw,28px)/1.4 "Noto Serif SC",serif; }
input::placeholder { color:#a6aaa4; }
button { cursor:pointer; border:0; color:inherit; background:none; font:inherit; }
.input-row button { padding:0 10px; color:var(--accent); font-weight:700; white-space:nowrap; }
.result { position:relative; margin-bottom:90px; padding:42px 48px 34px; overflow:hidden; background:var(--ink); color:var(--paper); box-shadow:12px 14px 0 var(--accent); transform:translateY(12px); opacity:0; transition:.35s ease; }
.result.show { transform:none; opacity:1; }
.result::after { content:"签"; position:absolute; right:-25px; bottom:-90px; color:rgba(244,240,231,.04); font-size:280px; font-weight:700; }
.card-top,.card-bottom { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; font-size:11px; }
.seal { padding:8px 7px; color:var(--paper); background:var(--accent); writing-mode:vertical-rl; letter-spacing:.2em; }
.asked { position:relative; z-index:1; margin:36px 0 12px; color:#aab2ac; font-size:13px; }
.result h2 { position:relative; z-index:1; width:80%; margin:0; font-size:clamp(34px,5vw,58px); line-height:1.25; }
.detail { position:relative; z-index:1; width:min(600px,85%); margin:18px 0 48px; color:#cbd0cc; line-height:1.8; }
.card-bottom { padding-top:20px; border-top:1px solid rgba(244,240,231,.2); color:#aab2ac; }
.card-bottom button { color:var(--paper); text-decoration:underline; text-underline-offset:4px; }
.recent { margin-bottom:100px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); }
.section-heading h2 { margin:0 0 15px; font-size:22px; }
.section-heading button { margin-bottom:15px; color:var(--muted); font-size:12px; }
ol { margin:0; padding:0; list-style:none; }
li { display:grid; grid-template-columns:90px 1fr auto; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); font-size:14px; }
li time { color:var(--muted); font-family:"Space Mono",monospace; font-size:11px; }
li strong { color:var(--accent); }
footer { display:flex; justify-content:space-between; width:min(1040px,calc(100% - 40px)); margin:0 auto; padding:25px 0 35px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
@media (max-width:700px) { header{height:82px}.hero{padding:60px 0 55px;display:block}.eyebrow{margin-bottom:20px}.intro{margin-top:32px}.hero form{margin-top:45px}.result{padding:30px 24px 26px;box-shadow:7px 9px 0 var(--accent)}.result h2,.detail{width:100%}.card-bottom span{display:none}li{grid-template-columns:65px 1fr}li strong{grid-column:2}footer{gap:20px}.date{display:none} }
@media (prefers-reduced-motion:reduce) { .result{transition:none} }