/* tokens.css: design-system.md as code. Do not edit inside a piece. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400&family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=DM+Mono:wght@400;500&display=swap');
:root{
  --ink:#141414; --charcoal:#2C272B; --paper:#F2F1F1; --gravel:#DDD9D2;
  --corten:#9C4F2B; --corten-deep:#6E3418; --white:#FFFFFF;
  --display:'Sora',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --r-panel:24px; --r-photo:24px; --r-card:16px; --r-btn:10px; --r-pill:999px;
  --gutter:40px; --panel-gap:120px; --panel-pad:72px; --col-gap:80px;
  --fs-display:clamp(64px, 6.667vw - 8px, 88px); --fs-body:17px; --fs-label:12px;
}
@media (max-width:640px){
  :root{ --gutter:16px; --panel-gap:48px; --panel-pad:32px; --fs-display:clamp(32px, 14vw - 9px, 44px); --fs-body:16px; }
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:var(--fs-body); line-height:1.55; -webkit-font-smoothing:antialiased }
img{ max-width:100%; display:block }
a{ color:inherit }
.display{ font-family:var(--display); font-weight:300; font-size:var(--fs-display); line-height:.95; letter-spacing:-.01em; text-wrap:balance; margin:0 }
.label{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; font-weight:500 }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.btn-primary{ display:inline-block; background:var(--corten); color:var(--white); font:500 14px/1 var(--body); padding:14px 22px; border-radius:var(--r-btn); text-decoration:none }
.btn-secondary{ display:inline-block; background:var(--ink); color:var(--white); font:500 14px/1 var(--body); padding:12px 20px; border-radius:var(--r-pill); text-decoration:none }
.on-dark .btn-secondary{ background:var(--white); color:var(--ink) }
.panel{ margin:0 var(--gutter); border-radius:var(--r-panel); padding:var(--panel-pad) }
.photo{ border-radius:var(--r-photo); overflow:hidden }
:focus-visible{ outline:2px solid var(--corten); outline-offset:3px }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }