@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── VARIABLES ── */
:root {
  --bg:       #f0efe9;
  --paper:    #ffffff;
  --ink:      #111111;
  --ink2:     #444444;
  --ink3:     #777777;
  --border:   #c8c6be;
  --border2:  #111111;
  --ph:       #e4e2da;
  --ph2:      #d0cec6;
  --accent:   #4040cc;
  --warn:     #b85c00;
  --mono:     'IBM Plex Mono', monospace;
  --serif:    'Courier Prime', monospace;
}

[data-theme="dark"] {
  --bg:      #141414;
  --paper:   #1e1e1e;
  --ink:     #f0efe9;
  --ink2:    #aaa89e;
  --ink3:    #666560;
  --border:  #333330;
  --border2: #f0efe9;
  --ph:      #262622;
  --ph2:     #303030;
  --accent:  #8888ff;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  transition: background 0.25s, color 0.25s;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--mono); cursor: pointer; }
img { display: block; max-width: 100%; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; color: var(--ink); }

/* ── SHARED UTILITIES ── */
.section-label {
  font-size: 10px;
  color: var(--ink3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.what-heading {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  display: inline-block;
  margin-bottom: 28px;
}

.callout {
  border: 1px solid var(--warn);
  background: #fff8ee;
  padding: 12px 16px;
  font-size: 12px;
  color: #7c2d00;
  line-height: 1.6;
  margin: 14px 0;
}
[data-theme="dark"] .callout {
  background: #2a1800;
  color: #ffcc88;
  border-color: #7c4a00;
}

.code-doc {
  background: var(--ph);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink);
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.8;
  margin: 12px 0;
  white-space: pre;
  overflow-x: auto;
}

.btn-dark {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--ink);
  color: var(--bg);
  border: none;
  padding: 13px 28px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: opacity 0.15s;
}
.btn-dark:hover { opacity: 0.8; }

.btn-outline {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 12px 24px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.1s;
}
.btn-outline:hover { background: var(--ph); }

/* ── LAYOUT WRAPPER ── */
.wrap {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

.page-section {
  padding: 64px 0 0;
}

/* Inner content max-width for readability */
.content-narrow { max-width: 760px; }