/* tool-paper.css (2026-10-18)
   The three free-tool pages (calculator.html, costs/, widget/) carry their
   own inline styles and never moved to /styles.css, so PR #379's paper look
   skipped them. This sheet loads AFTER each page's inline <style>: it
   re-points the page's own token names at the Drafting Table palette and
   gives them the same top bar as every other page. Nothing else changes. */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap");

:root {
  --paper: #F3F3F0; --sheet: #FBFBF9; --ink-t: #161B1E; --ink2: #333C41; --mute: #58626A;
  --hair: #D2D5CF; --hair2: #B4BAB4; --green: #2F6B3A; --green-d: #24552D; --green-t: #E4EDE5;
  --gut: clamp(20px, 4vw, 56px);
  --disp: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  /* the pages' own names */
  --navy: var(--ink-t); --navyd: var(--ink-t); --ink: var(--ink-t); --muted: var(--mute);
  --line: var(--hair); --bg: var(--paper); --card: var(--sheet); --brand: var(--green); --brand-tint: var(--green-t);
  --ff-display: var(--disp); --ff-sans: var(--body);
}

body { background: var(--paper); color: var(--ink-t); font-family: var(--body); padding-top: 0; }
h1 { font-family: var(--disp); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: .98; font-size: clamp(32px, 4.4vw, 46px); color: var(--ink-t); }
h2, h3, .cta h3 { font-family: var(--disp); letter-spacing: .01em; }
.card { border-radius: 4px; box-shadow: none; border-color: var(--hair); background: var(--sheet); }
.cta { background: var(--sheet); color: var(--ink-t); border: 1px solid var(--ink-t); border-radius: 4px; }
.cta p { color: var(--ink2); opacity: 1; }
.cta a { border-radius: 3px; font-family: var(--disp); text-transform: uppercase; letter-spacing: .08em; }
.cta a.cta-secondary { color: var(--ink-t); border-color: var(--ink-t); }
.price { border-radius: 4px; }

/* top bar: the same header.nav every other page wears */
header.nav { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--hair); margin: 0 -16px 28px; }
header.nav .nav-inner { display: flex; align-items: center; height: 68px; padding: 0 var(--gut); gap: 28px; position: relative; }
header.nav .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-t); font: 700 23px/1 var(--disp); letter-spacing: .06em; text-decoration: none; }
header.nav .brand-mark { width: 26px; height: auto; max-width: 26px; max-height: 32px; }
header.nav .links { display: flex; align-items: center; margin-left: auto; gap: 26px; }
header.nav .links a { font: 500 15px/1 var(--body); color: var(--ink2); padding: 8px 0; border-bottom: 1px solid transparent; text-decoration: none; white-space: nowrap; }
header.nav .links a:hover { color: var(--ink-t); border-color: var(--ink-t); }
header.nav .nav-cta { flex: none; min-width: 0; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 3px; background: var(--green); color: #fff; font: 600 15px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
header.nav .nav-cta:hover { background: var(--green-d); color: #fff; }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--hair2); border-radius: 3px; cursor: pointer; align-items: center; justify-content: center; gap: 4px; flex-direction: column; width: 40px; height: 36px; padding: 9px 11px; }
.nav-toggle-bar { display: block; width: 16px; height: 1.5px; background: var(--ink-t); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 1099px) {
  header.nav .links { display: none; }
  header.nav .nav-toggle { display: flex; margin-left: auto; }
  header.nav .links.is-open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gut) 14px;
    background: var(--paper); border-bottom: 1px solid var(--ink-t); z-index: 100;
  }
  header.nav .links.is-open a { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 17px; }
  header.nav .links.is-open a:last-child { border-bottom: 0; }
}
@media (max-width: 420px) {
  header.nav .nav-inner { gap: 14px; }
  header.nav .brand { font-size: 20px; }
  header.nav .nav-cta { padding: 0 12px; font-size: 14px; }
}

/* costs/ buttons: the paper look's flat green and ink outline */
.ctas .btn { border-radius: 3px; font-family: var(--disp); text-transform: uppercase; letter-spacing: .08em; }
.ctas .btn.primary { background: var(--green); }
.ctas .btn.ghost { border: 1px solid var(--ink-t); }