/* Shared styles for CiteForged sub-pages (legal, changelog).
   "Kinfolk of Tech" system — calm warm paper, one sage accent, light serif.
   Mirrors the landing page tokens so these stay on-brand without copying the
   full marketing CSS. Light only by design. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@400;500&display=swap');

:root{
  /* foundation */
  --paper:#FAF8F4; --bone:#F2EEE7; --linen:#E8E2D8;
  /* ink */
  --charcoal:#1C1A17; --espresso:#403A33; --stone:#8A8178;
  /* accent (sparing) */
  --sage:#5B6B5A; --sage-deep:#4A5849; --brass:#C9A24B;
  /* muted status (sage = good, clay = bad, stone = neutral) */
  --clay:#A65A43;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--charcoal);background:var(--paper);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
::selection{background:var(--sage);color:var(--paper)}
a{color:var(--sage);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--sage-deep);text-decoration:underline}
.wrap{max-width:780px;margin:0 auto;padding:0 24px}

/* nav */
nav{position:sticky;top:0;z-index:20;background:rgba(250,248,244,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--linen)}
nav .nwrap{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:-.02em;color:var(--charcoal);display:flex;align-items:center;gap:.4rem}
.logo:hover{text-decoration:none}
.logo .mark{color:var(--brass)}
.navlinks{display:flex;gap:28px;align-items:center;font-size:.9rem;color:var(--espresso)}
.navlinks a{color:var(--espresso)}
.navlinks a:hover{color:var(--charcoal);text-decoration:none}

/* page body */
.page{padding:64px 0 80px}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.12;letter-spacing:-.03em;margin:14px 0 6px}
.updated{color:var(--stone);font-size:.9rem}
.draft{margin:26px 0 8px;padding:14px 18px;border:1px solid var(--linen);border-left:2px solid var(--sage);border-radius:3px;background:var(--bone);color:var(--espresso);font-size:.9rem}
.draft b{color:var(--charcoal)}
.prose{margin-top:32px}
.prose h2{font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:-.02em;margin:38px 0 10px}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin:24px 0 6px}
.prose p{color:var(--espresso);margin:10px 0}
.prose ul{color:var(--espresso);margin:10px 0 10px 22px}
.prose li{margin:6px 0}
.prose strong{color:var(--charcoal)}
.toc{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;font-size:.92rem}

/* changelog */
.entry{border-top:1px solid var(--linen);padding:24px 0}
.entry:first-of-type{border-top:none}
.entry .date{font-size:.82rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.entry h2{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:4px 0 8px}
.tag{display:inline-block;font-size:.68rem;font-weight:500;padding:.16rem .55rem;border-radius:2px;letter-spacing:.1em;text-transform:uppercase;margin-left:8px;vertical-align:middle}
.tag.new{background:rgba(91,107,90,.14);color:var(--sage-deep)}
.tag.improved{background:var(--bone);color:var(--stone)}

footer{border-top:1px solid var(--linen);padding:48px 0;color:var(--stone);font-size:.88rem}
footer .fwrap{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
footer a{color:var(--stone)}
footer a:hover{color:var(--charcoal)}