@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&display=swap');
:root { --ink:#18231d; --forest:#24513d; --leaf:#dfe9d1; --sun:#e5a947; --paper:#f7f3e9; --line:#c9d4c2; }
* { box-sizing:border-box } body { margin:0; color:var(--ink); background:radial-gradient(circle at 90% 3%,#e8dcae 0,transparent 25rem),var(--paper); font:15px 'DM Mono',monospace; }
header { min-height:76px; display:flex; justify-content:space-between; align-items:center; padding:0 6vw; border-bottom:1px solid var(--line); } .brand { color:var(--forest); text-decoration:none; font:600 30px Fraunces,serif; } .brand em { color:var(--sun); } button { cursor:pointer; border:0; color:white; background:var(--forest); padding:11px 16px; font:inherit; } button:hover { background:#173d2e } main { max-width:1180px; margin:auto; padding:8vw 5vw; } .intro { max-width:720px; animation:reveal .6s both } .eyebrow { text-transform:uppercase; color:var(--forest); font-size:11px; letter-spacing:.16em; } h1 { margin:.2em 0; font:700 clamp(44px,8vw,88px)/.95 Fraunces,serif; letter-spacing:-.06em; } .intro>p:last-child { font-size:17px; line-height:1.7; max-width:580px; } .toolbar { display:flex; gap:12px; margin:52px 0 24px; } input,select,textarea { width:100%; border:1px solid #afbdab; background:#fffdf7; padding:10px; font:inherit; color:var(--ink); } input[type=search] { max-width:430px; } #tree { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; } .card { background:#fffdf7; border:1px solid var(--line); padding:17px; min-height:148px; text-align:left; color:var(--ink); animation:reveal .4s both; } .card:hover { border-color:var(--forest); transform:translateY(-2px) } .card h2 { margin:2px 0 10px; font:600 24px Fraunces,serif; } .card p { margin:0; color:#5c6b61; font-size:12px; } .avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; float:right; background:var(--leaf); } dialog { border:0; padding:0; max-width:440px; width:calc(100% - 32px); background:#fffdf7; box-shadow:0 20px 80px #18231d55; } dialog::backdrop { background:#18231d99; } dialog form, #profileContent { padding:28px; } dialog h2 { margin:0 0 20px; font:600 30px Fraunces,serif; } label { display:block; margin:13px 0; font-size:12px; } label input,label select,label textarea { margin-top:6px; } textarea { min-height:92px; resize:vertical; } .close { float:right; background:none; color:var(--ink); padding:0; } .error { color:#a12f23; min-height:1.2em; font-size:12px; } #profileContent img { width:100%; max-height:320px; object-fit:cover; margin-bottom:16px; } #profileContent h2 { margin-bottom:8px; } @keyframes reveal { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none} } @media(max-width:600px){header{padding:0 5vw}.toolbar{flex-wrap:wrap}h1{font-size:53px}main{padding:14vw 5vw}}