/* Hallmark · macrostructure: editorial ledger · tone: austere · anchor: amber */

:root{
  --paper:#f5f4f0;--paper-2:#ffffff;--ink:#141413;--ink-weak:#5c5b57;--accent:#b5621a;--accent-ink:#ffffff;--line:#dfded9;--line-strong:#b7b6b1;--danger:#b12c2c;--success:#1a7a4f;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow-x:clip;line-height:1.45}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
a{color:inherit;text-decoration:none}
kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* tokens */
.display{font-family:Bricolage Grotesque,Newsreader,ui-serif,Georgia,serif;letter-spacing:-.03em}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.container{max-width:1120px;margin:0 auto;padding:20px 24px}
.rule{height:1px;background:var(--line);border:0}
.rule-b{height:2px;background:var(--line-strong);border:0}

/* nav */
.navbar{position:sticky;top:8px;margin:8px 14px;padding:12px 16px;background:rgba(255 255 255 / .78);backdrop-filter:blur(14px) saturate(1.35);border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;gap:14px;z-index:1000}
.nav-logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-size:18px}
.nav-logo span{background:var(--ink);color:var(--accent-ink);padding:2px 9px;border-radius:999px}
.nav-logo kbd{background:var(--ink);color:var(--accent-ink);padding:2px 9px;border-radius:999px;font:500 14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.nav-links{display:flex;gap:14px;align-items:center;margin-left:auto}
.nav-links a{color:var(--ink);font-weight:500;font-size:14px}
.nav-links a:hover{text-decoration:underline;text-underline-offset:3px}
.nav-cta{display:none;margin-left:14px;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:8px 14px;border-radius:999px;font:500 13px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;cursor:pointer}

/* pages */
.page{display:none;padding:24px 0 60px}
.page.active{display:block}
.hero{padding:28px 0 8px}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:.95;margin:0;letter-spacing:-.04em}
.hero p{max-width:62ch;margin:12px 0 0;color:var(--ink-weak);font-size:17px;line-height:1.55}
.actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

/* buttons */
.btn{padding:10px 14px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--accent-ink);font:600 14px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.btn.secondary{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink-weak);border-color:var(--line)}
.btn.small{padding:7px 12px;font-size:13px}

/* form */
.input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px}
.fields{display:grid;gap:14px}

/* grid */
.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* card */
.card{border:1px solid var(--line);background:var(--paper,#fff);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px}

/* badges */
.badge{display:inline-block;border:1px solid var(--line-strong);padding:3px 10px;border-radius:999px;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-weak)}
.badge.accent{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.sub{color:var(--ink-weak)}

/* tables */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
thead th{color:var(--ink-weak);font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.1em}
tr:hover td{background:rgba(0,0,0,.025)}

/* auth */
.auth-page{display:flex;align-items:center;justify-content:center;padding:60px 22px}
.auth-card{width:100%;max-width:420px;border:1px solid var(--line);background:var(--paper-2,#fff);border-radius:22px;padding:22px}
.auth-card h1{font-size:32px;line-height:.95;margin:0 0 4px;letter-spacing:-.03em}

/* public */
.public-hero{padding:36px 0 10px}
.public-hero h1{font-size:clamp(32px,4.7vw,52px);line-height:.95;margin:0;letter-spacing:-.035em}
.media{border-radius:16px;border:1px solid var(--line);background:var(--paper-2,#fff);overflow:hidden;min-height:140px;display:flex;align-items:center;padding:18px;color:var(--ink-weak);font-size:14px}

/* misc */
.empty{padding:16px;border:1px dashed var(--line-strong);border-radius:16px;color:var(--ink-weak);font-size:14px}
.install-banner{display:none;margin-left:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--accent-ink);font:500 13px system-ui,sans-serif;cursor:pointer}

@media (max-width: 760px){
  .nav-links{display:none}
  .nav-cta{display:inline-flex;margin-left:auto}
}
@media (min-width: 761px){
  .nav-cta{display:inline-flex !important}
}
</style>