/* Flexoki – full neutral & accent set  */
:root{
  /* paper-to-ink neutrals */
  --paper:#FFFCF0; --base-50:#F2F0E5; --base-100:#E6E4D9; --base-200:#CECDC3;
  --base-300:#B7B5AC; --base-400:#9F9D96; --base-500:#878580; --base-600:#6F6E69;
  --base-700:#575653; --base-800:#403E3C; --base-900:#282726; --black:#100F0F;

  /* 400-tint accent inks */
  --red:#D14D41; --orange:#DA702C; --yellow:#D0A215; --green:#879A39;
  --cyan:#3AA99F; --blue:#4385BE; --purple:#8B7EC8; --magenta:#CE5D97;

  /* typefaces */
  --font-body:"et-book","Palatino","Palatino Linotype","Palatino LT STD",
              "Book Antiqua",Georgia,serif;
  --font-mono:ui-monospace,"SF Mono","Menlo","Consolas",monospace;

  /* default color settings */
  --bg:var(--paper); --fg:var(--base-800); --link:var(--blue);
}

body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); line-height:1.6;
  max-width:65ch; margin:0 auto; padding:2rem;
}
a{color:var(--link);text-decoration:none;} a:hover{text-decoration:underline;}
h1,h2,h3{margin-top:1.6em;color:var(--fg);}

/* Section separator styles */
hr {
  border: none;
  height: 1px;
  background: var(--base-300);
  margin: 3rem 0;
}
hr.accent {
  background: var(--link);
  height: 4px;
}
.home-content section + section {
  padding-top: 2rem;
}

/* 1) Increase base font-size for better legibility */
html {
  font-size: 1.125rem; /* ~18px */
}

/* 2) Style the site navigation */
.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--base-300);
  background: var(--bg);
}
.site-nav .logo {
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}
.site-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--link);
}
.theme-toggle {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--base-300);
  border-radius: 4px;
}

/* 3) Narrow your content and push it to one side */
.page-content,
.home-content {
  max-width: 40rem;
  /* left-align the column and leave the extra space on the right */
  margin-left: 2rem;
  margin-right: auto;
  padding: 2rem 1rem;
}