/* ============================================================
   MeMachine docs — docs.memachine.me

   Same world as the marketing site: paper, ink, two voices and a
   hand. Every token below is copied verbatim from
   public/landing/landing.css — this file is a SUBSET, not a
   variant. If a colour or a face changes there, change it here.

   THE TYPE SYSTEM
     MACHINE  Plex Mono. Uppercase, tracked, graphite. Labels,
              breadcrumbs, station numbers, UI strings quoted out
              of the app.
     HUMAN    Source Sans 3. Every instruction and sentence.
     THE HAND Caveat, the red pen. Used once per page at most.

   Fonts are served from /fonts/ on this origin (the marketing site
   serves the same faces from /landing/fonts/). They are committed
   next to this file so a deploy is one command with no build step.
   ============================================================ */

@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/plexmono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/plexmono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/fonts/sourcesans3-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/caveat-var.woff2') format('woff2');
}


/* ---------------------------- tokens ---------------------------- */

:root {
  --paper:      #f7f4ed;
  --paper-deep: #efe9db;
  --stock:      #fffdf7;
  --stock-2:    #faf6ea;

  --ink:        #17140f;
  --ink-2:      #3a332a;
  --graphite:   #6e6659;
  --graphite-2: #8c8477;

  --rule:      rgba(23, 20, 15, 0.16);
  --rule-soft: rgba(23, 20, 15, 0.075);

  --pen:      #c1301b;
  --pen-deep: #8f2011;
  --pen-wash: rgba(193, 48, 27, 0.07);

  --amber:      #b0802a;
  --amber-wash: rgba(176, 128, 42, 0.10);

  --live:      #2f6b3c;
  --live-wash: rgba(47, 107, 60, 0.12);

  --grid:   rgba(23, 20, 15, 0.050);
  --grid-2: rgba(23, 20, 15, 0.085);

  --mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

  --wrap: 1180px;
  --r: 3px;
  --shadow-sheet: 0 1px 0 rgba(23,20,15,.05), 0 26px 44px -34px rgba(23,20,15,.55);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
  background-position: center top;
  color: var(--ink-2);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.container-narrow { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: 24px; }

::selection { background: var(--pen); color: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--stock); padding: 12px 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 0; }


/* ------------------------- the two voices ------------------------- */

.eyebrow, .seclabel, .docstrip, .topnav, .btn, .foot-links, .foot-copy,
.crumbs, .updated, .art-tag, .art-n, .toc, .uistr, .kbd, .stationbar,
.callout-k, .contact-card .who {
  font-family: var(--mono);
}

.hand {
  font-family: var(--hand);
  color: var(--pen);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.05;
}

.eyebrow, .seclabel, .docstrip {
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 500;
}


/* ---------------------------- buttons ---------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 2px; border: 1px solid var(--ink);
  text-decoration: none; cursor: pointer; background: none; color: var(--ink);
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}
.btn-ink { background: var(--ink); color: var(--stock); }
.btn-ink:hover { background: var(--pen); border-color: var(--pen); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-line:hover { border-color: var(--ink); background: rgba(23,20,15,.04); }
.btn-sm { padding: 10px 15px; font-size: 11.5px; }
.btn:active { transform: translateY(1px); }


/* ---------------------------- topbar ---------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--rule);
  background: rgba(247,244,237,.93); backdrop-filter: blur(6px);
}
.topbar-in { display: flex; align-items: center; gap: 20px; padding-block: 14px; }

.wordmark { text-decoration: none; color: var(--ink); font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
.wm-me { font-family: var(--sans); font-weight: 700; }
.wm-machine { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; }
.wm-docs {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pen);
  border: 1px solid var(--pen); border-radius: 2px; padding: 3px 6px;
  margin-left: 9px; vertical-align: 3px;
}
.brand-name { white-space: nowrap; }

.topnav { display: flex; gap: 22px; margin-left: auto; }
.topnav a {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--graphite); text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--pen); }


/* --------------------------- docs home --------------------------- */

.docs-hero { padding-block: 54px 26px; }
.docs-hero h1 { font-family: var(--sans); font-size: 42px; line-height: 1.1; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.docs-hero .lede { font-size: 18px; color: var(--ink-2); max-width: 58ch; margin-top: 12px; }

/* the station chain — the six stations, in order, as the app runs them */
.stationbar {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin-top: 26px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--graphite);
}
.stationbar span { padding: 9px 14px; border-right: 1px solid var(--rule); }
.stationbar span:first-child { padding-left: 0; }
.stationbar span:last-child { border-right: 0; }
.stationbar b { color: var(--pen); font-weight: 500; }

.artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; padding-block: 30px 70px; }
.art {
  display: block; text-decoration: none;
  background: var(--stock); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 20px 22px 22px; box-shadow: var(--shadow-sheet);
  transition: border-color .16s ease, transform .16s ease;
}
.art:hover { border-color: var(--ink); transform: translateY(-2px); }
.art-n { font-size: 10.5px; letter-spacing: .2em; color: var(--pen); display: block; margin-bottom: 9px; }
.art h2 { font-family: var(--sans); font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 7px; }
.art p { font-size: 15px; color: var(--graphite); line-height: 1.55; }

.sectionrule {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-top: 12px;
}
.sectionrule h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.sectionrule span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--graphite-2); margin-left: auto; }


/* --------------------------- an article --------------------------- */

.art-header { border-bottom: 1px solid var(--rule); padding-block: 40px 26px; background: rgba(255,253,247,.55); }
.crumbs { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite-2); margin-bottom: 14px; }
.crumbs a { color: var(--graphite); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--pen); border-bottom-color: var(--pen); }
.art-header h1 { font-family: var(--sans); font-size: 34px; line-height: 1.16; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.art-header .updated { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite-2); margin-top: 12px; }

.art-body { padding-block: 34px 78px; }
.art-body h2 {
  font-family: var(--sans); font-size: 23px; font-weight: 600; color: var(--ink);
  margin-top: 34px; margin-bottom: 10px; line-height: 1.25;
  padding-top: 12px; border-top: 1px solid var(--rule-soft);
}
.art-body h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 24px; margin-bottom: 8px; }
.art-body p { font-size: 16.5px; line-height: 1.66; color: var(--ink-2); margin-bottom: 14px; }
.art-body ul, .art-body ol { margin: 0 0 16px 20px; }
.art-body li { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); margin-bottom: 8px; }
.art-body li > ul, .art-body li > ol { margin-top: 8px; }
.art-body a { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }
/* buttons inside an article keep their own ink, not the prose link color */
.art-body a.btn { text-decoration: none; color: var(--ink); }
.art-body a.btn-ink { color: var(--stock); }
.art-body strong { color: var(--ink); font-weight: 600; }

/* numbered steps — the shape most of these articles want */
.steps { counter-reset: step; list-style: none; margin-left: 0; }
.steps > li {
  position: relative; padding-left: 38px; margin-bottom: 14px;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--pen); border: 1px solid var(--rule); background: var(--stock);
  padding: 2px 5px; border-radius: 2px;
}

/* a string quoted verbatim out of the app UI */
.uistr {
  font-size: .84em; letter-spacing: .04em;
  background: var(--stock); border: 1px solid var(--rule); border-radius: 2px;
  padding: 1px 5px; color: var(--ink); white-space: nowrap;
}
.kbd {
  font-size: .8em; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--stock); border-radius: 2px; padding: 2px 6px;
}

/* the aside boxes: note (amber), warning (pen), and the plain sheet */
.callout {
  background: var(--stock); border: 1px solid var(--rule); border-left: 3px solid var(--graphite);
  border-radius: var(--r); padding: 15px 18px; margin-bottom: 18px;
}
.callout-k { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--graphite); margin-bottom: 6px; }
.callout p:last-child { margin-bottom: 0; }
.callout-note { border-left-color: var(--amber); background: var(--amber-wash); }
.callout-note .callout-k { color: var(--amber); }
.callout-stop { border-left-color: var(--pen); background: var(--pen-wash); }
.callout-stop .callout-k { color: var(--pen); }
.callout-ok { border-left-color: var(--live); background: var(--live-wash); }
.callout-ok .callout-k { color: var(--live); }

.art-body table { width: 100%; border-collapse: collapse; margin-bottom: 18px; background: var(--stock); border: 1px solid var(--rule); }
.art-body th, .art-body td { padding: 10px 12px; border-bottom: 1px dotted var(--rule-soft); text-align: left; font-size: 14.5px; vertical-align: top; }
.art-body th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite-2); }

.toc {
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--stock-2);
  padding: 16px 20px 14px; margin-bottom: 28px;
}
.toc h4 { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--pen); margin-bottom: 10px; font-weight: 500; }
.toc ol { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 26px; }
.toc li { font-size: 12px; letter-spacing: .04em; line-height: 1.9; margin: 0; color: var(--graphite); }
.toc a { color: var(--graphite); text-decoration: none; }
.toc a:hover { color: var(--pen); }

/* next/previous at the foot of an article */
.art-next { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px dashed var(--rule); }

.contact-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--stock); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 16px 20px; margin-top: 26px;
}
.contact-card .who { font-size: 11.5px; letter-spacing: .06em; color: var(--graphite); }
.contact-card .email { color: var(--pen); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }


/* ------------------------------- footer ------------------------------- */

.foot { background: var(--paper-deep); border-top: 1px solid var(--rule); padding-bottom: 44px; }
.foot-grid { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding-block: 26px; }
.foot-line { font-size: 16px; color: var(--ink-2); max-width: 36ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.foot-links a { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); text-decoration: none; border-bottom: 1px solid transparent; }
.foot-links a:hover { color: var(--ink); border-bottom-color: var(--pen); }
.foot-copy { font-size: 10.5px; letter-spacing: .1em; color: var(--graphite-2); border-top: 1px dashed var(--rule); padding-top: 18px; }


/* ------------------------------ narrow ------------------------------ */

@media (max-width: 720px) {
  .topnav { display: none; }
  .docs-hero { padding-block: 36px 20px; }
  .docs-hero h1 { font-size: 32px; }
  .art-header { padding-block: 30px 22px; }
  .art-header h1 { font-size: 27px; }
  .art-body { padding-block: 28px 58px; }
  .toc ol { columns: 1; }
  .artgrid { grid-template-columns: 1fr; }
}