@charset "UTF-8";
/* ============================================================
   neildupaul.com — converted by pagemotor-design 1.6
   Palette: lichen ground, spruce ink, ink-violet accent
   Type:    Archivo (display) + Newsreader (text)
   ============================================================ */
/* NOTE ON font-variation-settings
   PageMotor loads Google Fonts through the legacy CSS v1 API
   (?family=Name:400,400i,700), which serves STATIC instances only and cannot
   carry a variable axis. The wdth values below are therefore inert today and
   Archivo renders at its default width; the paired font-weight declarations are
   what actually take effect. They are retained because they are 1:1 with the
   source design and become live the moment a variable Archivo is self-hosted
   via a fonts() plugin. See neildupaul-setup.md section 10. */
/* ---------- 1. CSS Custom Properties ---------- */
:root {
  --font1: "Newsreader", Georgia, "Times New Roman", serif;
  --font2: "Archivo", sans-serif;
  --bg1: #DCDFD8FF;
  --bg2: #EEF0EAFF;
  --c1: #1E2320FF;
  --c2: #6D746BFF;
  --ca: #3B3F8FFF;
  --border1: 1px solid #BCC1B8FF;
  --border2: 1px solid #3B3F8FFF;
  --border3: 1px solid #1E2320FF;
  --f1: 45px;
  --f2: 35px;
  --f3: 28px;
  --f4: 22px;
  --f5: 17px;
  --f6: 13px;
  --g1: 67px;
  --g2: 53px;
  --g3: 43px;
  --g4: 35px;
  --g5: 28px;
  --g6: 23px;
  --x1: 45px;
  --x2: 28px;
  --x3: 17px;
  --x4: 11px;
  --x5: 7px;
  --x6: 4px;
  --w-content: 688px;
  --w-total: 1088px;
  --gutter-full: 28px;
  --gutter-mobile: 17px;
  --phi: 1.6180339887;
  --font-heading: "Archivo", sans-serif;
  --font-headline: "Archivo", sans-serif;
  --font-title: "Archivo", sans-serif;
  --c-title: #1E2320FF;
  --c-menu: #1E2320FF;
  --font-menu: "Newsreader", Georgia, "Times New Roman", serif;
  --text-menu: none;
  --m-menu-spacing: 7px;
  --c-caption: #6D746BFF;
  --font-caption: "Newsreader", Georgia, "Times New Roman", serif;
  --c-impact: #1E2320FF;
  --font-impact: "Newsreader", Georgia, "Times New Roman", serif;
  --c-drop-cap: #3B3F8FFF;
  --font-drop-cap: "Archivo", sans-serif;
  --bg-highlight: #6B6FC033;
  --bg-callout: #EEF0EAFF;
  --bg-callout-alert: #E3D5D2FF;
  --bg-callout-note: #DEDFEDFF;
  --p-callout: 17px;
  --bg-blockquote: transparent;
  --c-blockquote: #6D746BFF;
  --font-blockquote: "Newsreader", Georgia, "Times New Roman", serif;
  --bg-pre: #EEF0EAFF;
  --c-pre: #1E2320FF;
  --list-style: disc;
  --list-margin: 17px;
  --list-nested-margin: 17px;
  --list-item-margin: 7px;
  --font-label: "Archivo", sans-serif;
  --c-required: #3B3F8FFF;
  --b-input: 1px solid #BCC1B8FF;
  --p-input: 11px;
  --b-textarea: 1px solid #BCC1B8FF;
  --p-textarea: 11px;
  --b-select: 1px solid #BCC1B8FF;
  --bg-button: #3B3F8FFF;
  --p-button-x: 28px;
  --p-button-y: 17px;
  --bg-button-save: #3B3F8FFF;
  --bg-button-action: #6B6FC0FF;
  --bg-button-update: #6D746BFF;
  --bg-button-delete: #8F3B4AFF;
  --accent-soft: #6B6FC0;
  --rule: #BCC1B8;
  --placeholder: #9AA197;
  --rail: 264px;
}

/* ---------- 2. Reset ---------- */
* {
  padding: 0;
  margin: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

h1, h2, h3, h4 {
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  word-break: normal;
}

img, fieldset {
  border: 0;
}

abbr {
  text-decoration: none;
}

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

iframe, video, embed, object {
  display: block;
  max-width: 100%;
}

img, .left, .right, .center {
  display: block;
}

.center {
  float: none;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

button, input[type=submit] {
  cursor: pointer;
  overflow: visible;
}

/* ---------- 3. Body and Structural Foundations ---------- */
body {
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background-color: var(--bg1);
  font-optical-sizing: auto;
  overflow-x: hidden;
}

::selection {
  color: var(--bg2);
  background: var(--ca);
}

.text {
  max-width: var(--w-content);
}

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--x1);
  max-width: var(--w-total);
  margin-left: auto;
  margin-right: auto;
  padding: var(--x1) var(--gutter-mobile) calc(var(--x1) * var(--phi));
  align-items: start;
}
@media all and (min-width: 860px) {
  .shell {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: calc(var(--x1) * var(--phi));
    row-gap: 0;
    padding: calc(var(--x1) * var(--phi)) var(--gutter-full);
  }
}

/* ---------- 4. Common Content Elements ---------- */
a {
  color: var(--ca);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--accent-soft);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ca);
  outline-offset: 3px;
}

h1 {
  font-family: var(--font-heading);
  font-size: var(--f2);
  line-height: var(--g2);
  letter-spacing: -0.024em;
  font-weight: 600;
  font-variation-settings: "wdth" 112, "wght" 600;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--f3);
  line-height: var(--g3);
  letter-spacing: -0.012em;
  font-weight: 600;
  font-variation-settings: "wdth" 104, "wght" 580;
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--f5);
  line-height: var(--g5);
  letter-spacing: -0.005em;
  font-weight: 600;
  font-variation-settings: "wdth" 100, "wght" 560;
}

h4 {
  font-family: var(--font-heading);
  font-size: var(--f5);
  line-height: var(--g5);
  font-weight: 600;
  font-variation-settings: "wdth" 100, "wght" 560;
}

blockquote {
  font-family: var(--font-blockquote);
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--c-blockquote);
  background-color: var(--bg-blockquote);
  padding-left: var(--x3);
  border-left: var(--border2);
}
blockquote > :last-child {
  margin-bottom: 0;
}

sub, sup {
  line-height: 0.5em;
  color: var(--c2);
}

code, pre, kbd {
  font-family: var(--font1);
  font-size: var(--f6);
  line-height: var(--g6);
}

code {
  line-height: 1em;
  background-color: var(--bg2);
  padding: var(--x6);
  margin: 0 1px;
}
strong code {
  font-weight: normal;
}

pre {
  overflow: auto;
  word-wrap: normal;
  tab-size: 4;
  color: var(--c-pre);
  background-color: var(--bg-pre);
  padding: var(--x3);
  border-left: var(--border1);
}

hr {
  border: var(--border1);
  border-width: 0 0 1px 0;
  margin: var(--x2) 0;
}

.small {
  font-family: var(--font-caption);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c-caption);
}

.caption {
  font-family: var(--font-caption);
  font-size: var(--f6);
  line-height: var(--g6);
  font-style: italic;
  color: var(--c-caption);
}

.impact {
  font-family: var(--font-impact);
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--c-impact);
}

.highlight {
  background-color: var(--bg-highlight);
  padding: var(--x6) 0;
}

.pop {
  box-shadow: 0 0 var(--x4) rgba(30, 35, 32, 0.4);
}

.drop-cap {
  font-family: var(--font-drop-cap);
  font-size: var(--f1);
  line-height: 1em;
  color: var(--c-drop-cap);
  margin-right: var(--x5);
  float: left;
}

.callout {
  color: var(--c1);
  background-color: var(--bg-callout);
  padding: var(--p-callout);
  border: var(--border1);
  border-left: 3px solid var(--ca);
}
.callout.alert {
  background-color: var(--bg-callout-alert);
  border-left-color: #8F3B4A;
}
.callout.note {
  background-color: var(--bg-callout-note);
  border-left-color: var(--accent-soft);
}

p, ul, ol, blockquote, pre, img, .callout, .caption {
  margin-bottom: var(--x3);
}
p:last-child, ul:last-child, ol:last-child, blockquote:last-child, pre:last-child, img:last-child, .callout:last-child, .caption:last-child {
  margin-bottom: 0;
}

/* ---------- 5. Dynamic Content Elements ---------- */
.page-container, .headline-area, .page-content {
  display: flow-root;
}

.page-container + .page-container {
  margin-top: var(--x1);
}

.page-title {
  font-family: var(--font-headline);
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  font-weight: 600;
  font-variation-settings: "wdth" 112, "wght" 600;
  margin-bottom: var(--x2);
}
.page-title a {
  color: var(--c1);
}
.page-title a:hover {
  color: var(--ca);
}

.page-title:has(+ .byline) {
  margin-bottom: 0;
}

.page-content h1 {
  margin-bottom: var(--x2);
}
.page-content h2 {
  margin-top: var(--x1);
  margin-bottom: var(--x3);
  padding-bottom: var(--x4);
  border-bottom: var(--border1);
}
.page-content h3 {
  margin-top: var(--x2);
  margin-bottom: var(--x6);
}
.page-content h4 {
  margin-bottom: var(--x4);
}
.page-content h1 + h2, .page-content h2 + h3, .page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child, .page-content hr + h2 {
  margin-top: 0;
}
.page-content > :last-child {
  margin-bottom: 0;
}
.page-content ul {
  list-style-type: var(--list-style);
}
.page-content ul, .page-content ol {
  margin-left: var(--list-margin);
}
.page-content ul ul, .page-content ul ol, .page-content ol ul, .page-content ol ol {
  margin-top: var(--list-item-margin);
  margin-bottom: 0;
  margin-left: var(--list-nested-margin);
}
.page-content li {
  margin-bottom: var(--list-item-margin);
}
.page-content li::marker {
  color: var(--rule);
}
.page-content li:last-child {
  margin-bottom: 0;
}
.page-content .callout > :last-child {
  margin-bottom: 0;
}
.page-content .caption {
  margin-top: var(--x5);
}

.page-content + .modular-content {
  margin-top: var(--x3);
}
.modular-content > :last-child {
  margin-bottom: 0;
}

/* ---------- 6. Forms ---------- */
label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--f5);
  line-height: var(--g5);
  font-weight: 600;
  font-variation-settings: "wdth" 100, "wght" 560;
  margin-bottom: var(--x5);
}
label .small {
  font-style: italic;
  font-weight: normal;
}
label .required {
  font-weight: normal;
  color: var(--c-required);
}

input, textarea, select {
  display: block;
  width: auto;
  max-width: 100%;
  font-family: inherit;
  font-size: inherit;
  line-height: 1em;
  font-weight: inherit;
  color: var(--c1);
  background-color: var(--bg2);
  padding: var(--p-input);
  border: var(--b-input);
  border-radius: 0;
}

input::placeholder, textarea::placeholder {
  color: var(--placeholder);
}

input[type=checkbox], input[type=radio], input[type=image], input[type=submit], select {
  width: auto;
}

input[type=checkbox], input[type=radio] {
  display: inline-block;
}
input[type=checkbox] + label, input[type=radio] + label {
  display: inline;
  font-weight: normal;
  margin-left: var(--x6);
  user-select: none;
}

textarea {
  line-height: inherit;
  min-height: 9rem;
  resize: vertical;
  padding: var(--p-textarea);
  border: var(--b-textarea);
}

select {
  border: var(--b-select);
}

button, input[type=submit], .button {
  display: inline-block;
  width: auto;
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: 1em;
  font-weight: 600;
  font-variation-settings: "wdth" 106, "wght" 580;
  vertical-align: top;
  color: var(--bg2);
  text-decoration: none;
  background-color: var(--bg-button);
  padding: var(--p-button-y) var(--p-button-x);
  border: var(--border2);
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
button:hover, button:active, input[type=submit]:hover, input[type=submit]:active, .button:hover, .button:active {
  color: var(--bg2);
  text-decoration: none;
  background-color: var(--accent-soft);
  border-color: var(--accent-soft);
}

button.save, .button.save {
  color: var(--bg2);
  background-color: var(--bg-button-save);
}
button.delete, .button.delete {
  color: var(--bg2);
  background-color: var(--bg-button-delete);
}
button.action, .button.action {
  color: var(--bg2);
  background-color: var(--bg-button-action);
}
button.update, .button.update {
  color: var(--bg2);
  background-color: var(--bg-button-update);
}

/* ---------- 7. Shared Components ---------- */
@media all and (min-width: 860px) {
  .rail {
    position: sticky;
    top: calc(var(--x1) * var(--phi));
  }
}

.wordmark {
  font-family: var(--font-title);
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
  font-variation-settings: "wdth" 118, "wght" 620;
  color: var(--c-title);
  margin-bottom: 0;
}
.wordmark a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.wordmark a:hover {
  color: var(--ca);
}

.rail-line {
  max-width: 15rem;
  margin-top: var(--x4);
  margin-bottom: var(--x2);
}

.nav ul {
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--x5) var(--x3);
}
@media all and (min-width: 860px) {
  .nav ul {
    display: block;
  }
}
.nav li {
  margin-bottom: 0;
}
@media all and (min-width: 860px) {
  .nav li {
    margin-bottom: var(--m-menu-spacing);
  }
}
.nav a {
  display: inline-block;
  position: relative;
  font-family: var(--font-menu);
  font-size: var(--f5);
  line-height: var(--g5);
  text-transform: var(--text-menu);
  color: var(--c-menu);
  text-decoration: none;
  white-space: nowrap;
  padding-left: var(--x3);
}
.nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  background: var(--rule);
}
.nav a:hover {
  color: var(--ca);
}
.nav a:hover::before {
  background: var(--accent-soft);
}
.nav a[aria-current=page] {
  color: var(--ca);
}
.nav a[aria-current=page]::before {
  width: 14px;
  background: var(--ca);
}

body.home .nav a[href="/"],
body.background .nav a[href="/background/"],
body.side-projects .nav a[href="/side-projects/"],
body.get-in-touch .nav a[href="/get-in-touch/"] {
  color: var(--ca);
}
body.home .nav a[href="/"]::before,
body.background .nav a[href="/background/"]::before,
body.side-projects .nav a[href="/side-projects/"]::before,
body.get-in-touch .nav a[href="/get-in-touch/"]::before {
  width: 14px;
  background: var(--ca);
}

.rail-foot {
  margin-top: var(--x1);
  padding-top: var(--x3);
  border-top: var(--border1);
}
.rail-foot a {
  display: inline;
  margin-right: var(--x3);
}
@media all and (min-width: 860px) {
  .rail-foot a {
    display: block;
    margin-right: 0;
  }
}

/* ---------- 8. Template Sections ---------- */
.lede {
  font-family: var(--font-headline);
  font-size: clamp(2.15rem, 1.15rem + 3.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 600;
  font-variation-settings: "wdth" 112, "wght" 600;
  max-width: 21ch;
  margin-bottom: var(--x2);
}
.lede span {
  display: block;
}

.band {
  margin-top: var(--x1);
}
.band > h2 {
  padding-bottom: var(--x4);
  border-bottom: var(--border1);
  margin-bottom: var(--x2);
}
.band > :last-child {
  margin-bottom: 0;
}

.pairs {
  display: grid;
  gap: var(--x2);
}

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--x6);
}
@media all and (min-width: 860px) {
  .pair {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: var(--x2);
    row-gap: 0;
  }
}
@media all and (min-width: 860px) {
  .pair > .stub {
    padding-top: 0.15rem;
  }
}
.pair > .body > :last-child {
  margin-bottom: 0;
}
.pair ul {
  margin-top: var(--x5);
  margin-bottom: 0;
  margin-left: var(--list-margin);
  list-style-type: var(--list-style);
}
.pair li {
  margin-bottom: var(--list-item-margin);
}
.pair li::marker {
  color: var(--rule);
}
.pair li:last-child {
  margin-bottom: 0;
}

.role-second {
  margin-top: var(--x3);
}

.plain-list {
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;
}
.plain-list li {
  margin-bottom: var(--list-item-margin);
}
.plain-list li:last-child {
  margin-bottom: 0;
}

.project {
  padding: var(--x2) 0;
  border-top: var(--border1);
}
.project:first-of-type {
  border-top: none;
  padding-top: 0;
}
.project h3 {
  font-size: var(--f4);
  line-height: var(--g4);
  margin-bottom: var(--x6);
}
.project h3 a {
  color: var(--c1);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.project h3 a:hover {
  color: var(--ca);
  text-decoration-color: var(--ca);
}
.project > :last-child {
  margin-bottom: 0;
}

.form {
  max-width: 33rem;
  margin-top: var(--x2);
}
.form input, .form textarea {
  width: 100%;
}

.field {
  margin-bottom: var(--x3);
}

/* ---------- 9. Utilities and Animation ---------- */
.reveal > span {
  opacity: 0;
  transform: translateY(0.42em);
  animation: rise 0.72s cubic-bezier(0.22, 0.68, 0.3, 1) forwards;
}
.reveal > span:nth-child(2) {
  animation-delay: 0.1s;
}
.reveal > span:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal > span {
    opacity: 1;
    transform: none;
    animation: none;
  }
  * {
    transition: none;
  }
}
/*pm-css m:0*/