/* ============================================================
   kip.software — one stylesheet for every page

   To restyle the whole site, edit the variables in :root.
   Page-specific rules are grouped at the bottom.
   ============================================================ */

/* ------------------------------------------------------------
   Theme
   ------------------------------------------------------------ */
:root {
  /* Colours */
  --color-bg: #f7f4ef;          /* page background */
  --color-surface: #fffdf8;     /* cards, article chrome */
  --color-text: #1c1917;        /* main copy */
  --color-muted: #57534e;       /* secondary copy, dates */
  --color-border: #e7e0d6;      /* lines and dividers */
  --color-accent: #9a3412;      /* links, current nav, accents */
  --color-accent-hover: #7c2d12;

  /* Typography */
  --font-body: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --size-body: 1.125rem;        /* 18px at default browser size */
  --size-small: 0.875rem;
  --leading: 1.65;
  --measure: 40rem;             /* readable line length */

  /* Spacing — use these instead of one-off pixel values */
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 1.75rem;
  --space-xl: 3rem;

  /* Layout */
  --page-pad: 1.25rem;          /* side padding on small screens */
  --radius: 4px;
}

/* Optional dark theme: follows the visitor's OS setting.
   Comment this block out if you only want the light theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1c1917;
    --color-surface: #292524;
    --color-text: #f5f0e8;
    --color-muted: #a8a29e;
    --color-border: #44403c;
    --color-accent: #fdba74;
    --color-accent-hover: #fed7aa;
  }
}

/* ------------------------------------------------------------
   Reset (small)
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading);
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 650;
  line-height: 1.25;
  margin: 0 0 var(--space-m);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

p, ul, ol {
  margin: 0 0 var(--space-m);
}

ul, ol {
  padding-left: 1.25rem;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ------------------------------------------------------------
   Page shell
   ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: var(--space-m);
  top: -3rem;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-s) var(--space-m);
  z-index: 10;
}

.skip-link:focus {
  top: var(--space-m);
}

.wrap {
  max-width: var(--measure);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-m) 0;
  margin-bottom: var(--space-xl);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
}

.wordmark {
  font-family: var(--font-heading);
  font-weight: 650;
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--color-accent);
}

.nav {
  display: flex;
  gap: var(--space-l);
}

.nav a {
  color: var(--color-muted);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--size-small);
  letter-spacing: 0.02em;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--color-accent);
}

.nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media (max-width: 36rem) {
  .site-header .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }

  .nav {
    gap: var(--space-m);
  }
}

.site-main {
  min-height: 50vh;
  padding-bottom: var(--space-xl);
}

.lede {
  font-size: 1.2rem;
  color: var(--color-muted);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-l) 0;
  color: var(--color-muted);
  font-size: var(--size-small);
  font-family: var(--font-heading);
}

/* ------------------------------------------------------------
   About
   ------------------------------------------------------------ */
.site-main > h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-s);
}

/* ------------------------------------------------------------
   Resume
   ------------------------------------------------------------ */
.resume-head {
  margin-bottom: var(--space-xl);
}

.resume-head p {
  margin: 0;
}

.resume-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-s);
}

.resume-section {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-s) var(--space-l);
  margin-bottom: var(--space-xl);
  align-items: start;
}

.resume-section > h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-muted);
}

.resume-section > p {
  margin: 0;
}

.job,
.school {
  margin-bottom: var(--space-l);
}

.job:last-child,
.school:last-child {
  margin-bottom: 0;
}

.job header,
.school header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  margin-bottom: var(--space-s);
}

.job h3,
.school h3 {
  margin: 0 0 var(--space-xs);
}

.role {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  margin-bottom: var(--space-xs);
}

.role p {
  margin: 0;
  font-family: var(--font-heading);
}

.job ul,
.school ul {
  margin-top: var(--space-s);
}

.job ul ul {
  margin-top: var(--space-s);
  margin-bottom: var(--space-s);
}

.meta {
  color: var(--color-muted);
  font-size: var(--size-small);
  font-family: var(--font-heading);
}

@media (max-width: 36rem) {
  .resume-section {
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }
}

/* ------------------------------------------------------------
   Blog listing
   ------------------------------------------------------------ */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li + li {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}

.post-list h2 {
  margin-bottom: var(--space-xs);
}

.post-list h2 a {
  color: var(--color-text);
  text-decoration: none;
}

.post-list h2 a:hover {
  color: var(--color-accent);
}

.post-list .excerpt {
  margin: var(--space-s) 0 0;
  font-style: italic;
}

time {
  color: var(--color-muted);
  font-size: var(--size-small);
  font-family: var(--font-heading);
}

/* ------------------------------------------------------------
   Blog article
   ------------------------------------------------------------ */
.article-header {
  margin-bottom: var(--space-l);
}

.article-header h1 {
  margin-bottom: var(--space-s);
}

.article-header .lede {
  margin: 0 0 var(--space-s);
}

.article-body h2 {
  margin-top: var(--space-xl);
}

.back {
  display: inline-block;
  margin-bottom: var(--space-l);
  font-family: var(--font-heading);
  font-size: var(--size-small);
}

/* ------------------------------------------------------------
   404
   ------------------------------------------------------------ */
.not-found p {
  color: var(--color-muted);
}

/* ------------------------------------------------------------
   Print (especially the resume)
   ------------------------------------------------------------ */
@media print {
  :root {
    --color-bg: #fff;
    --color-text: #000;
    --color-muted: #333;
    --color-accent: #000;
  }

  .skip-link,
  .site-header .nav,
  .site-footer,
  .back {
    display: none;
  }

  .site-header,
  .site-footer {
    border: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  body {
    font-size: 11pt;
  }
}