@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap');

:root { --paper:#eeece5; --ink:#171716; --quiet:#77756f; --line:#cfcdc4; --card:#e3e0d8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; min-height:100vh; }
.preview-app { min-height:100vh; }
.grain { opacity:.1; pointer-events:none; position:fixed; inset:0; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.corner { position:fixed; z-index:3; font:10px "DM Mono",monospace; letter-spacing:.08em; color:var(--quiet); }
.corner.top { top:max(25px,calc(12px + env(safe-area-inset-top,0px))); left:max(18px,calc(12px + env(safe-area-inset-left,0px))); }
.corner.bottom { right:max(18px,calc(12px + env(safe-area-inset-right,0px))); bottom:max(23px,calc(12px + env(safe-area-inset-bottom,0px))); }
.stage { min-height:100svh; display:flex; align-items:center; justify-content:center; padding:max(72px,calc(48px + env(safe-area-inset-top,0px))) 8vw max(54px,calc(32px + env(safe-area-inset-bottom,0px))); }
.view { max-width:920px; width:100%; }
.card-wrap { display:grid; grid-template-columns:minmax(280px,430px) 1fr; gap:56px; align-items:center; }
.member-card { background:var(--card); aspect-ratio:1.52; padding:23px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:12px 13px 0 rgba(23,23,22,.07); border:1px solid #d4d1c8; transform:rotate(-1deg); }
.card-top,.card-bottom { display:flex; justify-content:space-between; font:10px "DM Mono",monospace; letter-spacing:.05em; }
.card-number { font-size:clamp(1.8rem,3.2vw,2.55rem); letter-spacing:-.065em; font-weight:500; }
.card-address { font:11px "DM Mono",monospace; color:#55534f; }
.card-date { font:13px "DM Mono",monospace; }
.vertical { writing-mode:vertical-rl; }
.preview-caption { font:10px "DM Mono",monospace; letter-spacing:.12em; color:var(--quiet); margin:22px 0 0; }
.eyebrow { font:10px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--quiet); margin:0 0 24px; }
h1,p { margin-top:0; }
h1 { font-size:clamp(2.15rem,3.9vw,3.45rem); letter-spacing:-.045em; line-height:1.16; font-weight:400; margin-bottom:27px; }
.lede { max-width:410px; color:#4c4b47; font-size:15px; line-height:1.65; margin-bottom:34px; }
.small { font-size:12px; line-height:1.55; color:var(--quiet); max-width:390px; }
.preview-notice { max-width:440px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); padding:15px 0 16px; margin:0 0 22px; font:10px "DM Mono",monospace; letter-spacing:.06em; }
.preview-notice span,.preview-notice strong { display:block; }
.preview-notice span { color:var(--quiet); margin-bottom:12px; }
.preview-notice strong { font-weight:500; margin-bottom:13px; }
.preview-notice p { color:#4c4b47; font:12px/1.55 "DM Sans",Arial,sans-serif; letter-spacing:normal; margin:0; }
@media (max-width:650px) { .stage { padding-left:28px; padding-right:28px; } .card-wrap { grid-template-columns:1fr; gap:35px; } .member-card { max-width:390px; } .corner.top { left:max(18px,calc(12px + env(safe-area-inset-left,0px))); } .corner.bottom { right:max(18px,calc(12px + env(safe-area-inset-right,0px))); } }