*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white: #ffffff;
  --off: #f7f7f7;
  --border: #ebebeb;
  --text: #111111;
  --sub: #666666;
  --display: "Bricolage Grotesque", Georgia, serif;
  --body: "DM Sans", system-ui, sans-serif
}
body{font-family:var(--body);color:var(--text);background:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased}
nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;height:56px;background:#ffffffe0;backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:-.03em;color:var(--text);text-decoration:none}
.logo-mark{width:26px;height:26px;background:#dc2626;color:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.65rem}
.back{font-size:.82rem;color:var(--sub);text-decoration:none;transition:color .15s}
.back:hover{color:var(--text)}
@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}