/* Shared site tokens, reset, typography, header and footer. Load before page CSS. */
:root {
  --orange: #b95000;
  --ink: #292925;
  --muted: #62635b;
  --paper: #faf9f6;
  --line: #ddded5;
  --surface: #efeee8;
  --serif: "Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans: "Helvetica Neue",Arial,sans-serif;
  color-scheme: light;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.65;
}
html {
  scroll-padding-top: calc(var(--header-height,90px) + 16px);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
}
* {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}
body {
  min-width: 280px;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}
img {
  max-width: 100%;
  height: auto;
}
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 6px;
  border-radius: 2px;
}
a:hover {
  color: var(--orange);
}
.wrap {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 clamp(22px,5vw,56px);
}
.icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  stroke-width: 1.7;
  vertical-align: middle;
}
.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10;
  background: var(--ink);
  color: white;
  padding: 12px;
}
.skip:focus {
  top: 12px;
}
.nav {
  position: relative;
  min-height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.nav::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--orange);
  border-radius: 50%;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 0 10px;
  font-weight: 600;
  letter-spacing: -.6px;
  font-size: 24px;
  line-height: 1.2;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-name { position: relative; }
.brand-given { font: italic 1.18em/1.2 var(--serif); color: var(--orange); }
.brand-underline {
  position: absolute;
  left: -2px;
  bottom: -10px;
  width: calc(100% + 4px);
  height: 12px;
  color: var(--orange);
  opacity: .7;
  transition: transform .2s ease, opacity .2s ease;
}
.brand-gear {
  width: 25px;
  height: 25px;
  flex: none;
  color: var(--orange);
  transform-origin: center;
  transform-box: fill-box;
}
@media(prefers-reduced-motion:no-preference) {
  .brand-gear { animation: brand-gear-turn 4s linear infinite paused; }
  .brand:is(:hover,:focus-visible) .brand-gear { animation-play-state: running; }
}
@keyframes brand-gear-turn { to { transform: rotate(360deg); } }
.brand:is(:hover,:focus-visible) .brand-underline { transform: translateY(1px); opacity: 1; }
.orange {
  color: var(--orange);
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.nav-links a {
  position: relative;
  padding-inline: 9px;
  white-space: nowrap;
  border-radius: 4px;
  transition: background-color .18s ease, color .18s ease;
}
.nav-links a:not(.contact)::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateX(-50%) scaleX(0);
  transition: transform .18s ease;
}
.nav-links a:not(.contact):is(:hover,:focus-visible,[aria-current]) {
  color: var(--orange);
  background: var(--surface);
}
.nav-links a:not(.contact):is(:hover,:focus-visible,[aria-current])::after {
  transform: translateX(-50%) scaleX(1) rotate(-3deg);
}
.nav-links a,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  min-height: 44px;
}
.nav-links .contact {
  border: 1px solid var(--orange);
  padding: 7px 12px;
  margin-left: 7px;
  border-radius: 3px;
  color: var(--orange);
  background: #f6eee4;
  box-shadow: 3px 3px 0 var(--paper), 4px 4px 0 #d5b296;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.nav-links .contact:is(:hover,:focus-visible) {
  color: var(--orange);
  background: #f0e2d2;
  transform: translate(1px,1px);
  box-shadow: 1px 1px 0 var(--paper), 2px 2px 0 #d5b296;
}
h1 {
  font-size: clamp(40px,5.3vw,61px);
  line-height: 1.075;
  font-weight: 500;
  letter-spacing: -2.5px;
  margin: 21px 0 25px;
}
h1 span {
  display: block;
}
em {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--orange);
}
.text-link {
  border-bottom: 1px solid var(--line);
}
h2 {
  font-size: clamp(31px,3.4vw,40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -1.15px;
}
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  font-size: .8125rem;
  color: var(--muted);
}
/* A small margin mark echoes the notebook details at the page's close. */
.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 36px;
  height: 2px;
  border-radius: 50%;
  background: var(--orange);
}
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer .text-link {
  border: 0;
  font-size: .8125rem;
}
.footer .icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}
@media(max-width:960px) {
  h1 {
    font-size: 48px;
  }
  .nav-links {
    gap: 3px;
  }
}
@media(max-width:760px) {
  .nav {
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 15px 12px;
  }
  .nav-links {
    width: 100%;
    justify-content: space-between;
    gap: 4px;
  }
  h1 {
    font-size: 40px;
    letter-spacing: -1.8px;
  }
  .footer {
    align-items: flex-start;
  }
  .footer-links {
    gap: 7px 20px;
    justify-content: flex-end;
  }
}
@media(max-width:580px) {
  .wrap {
    padding-inline: 22px;
  }
  .nav {
    display: block;
    padding-top: 17px;
    padding-bottom: 10px;
  }
  .brand {
    font-size: 23px;
  }
  .nav-links {
    justify-content: flex-start;
    gap: 2px 3px;
    margin-top: 12px;
  }
  .nav-links a {
    font-size: .8125rem;
    gap: 5px;
    padding-inline: 6px;
  }
  .nav-links .icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
  .nav-links .contact {
    padding: 6px 8px;
    margin-left: 3px;
  }
  .footer {
    display: block;
  }
  .footer-links {
    justify-content: flex-start;
    gap: 22px;
    margin-top: 7px;
  }
}
@media(max-width:359px) {
  .nav-links {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px 3px;
  }
  .brand {
    font-size: 22px;
  }
}
/* Full portfolio navigation keeps Email beside the wordmark on phones. */
@media(max-width:580px) {
  .nav-full .nav-links { justify-content: space-between; }
  .nav-full .nav-links .contact { position: absolute; right: 4px; top: 21px; margin: 0; }
}
@media(max-width:359px) {
  .nav-full .brand { font-size: 21px; }
  .nav-full .brand-gear { width: 21px; height: 21px; }
  .nav-full .nav-links a:not(.contact) { padding-inline: 4px; }
  .nav-full .nav-links a:not(.contact) .icon { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    transition: none!important;
    scroll-behavior: auto!important;
  }
}
@media print {
  .site-header {
    position: static;
  }
  .nav-links,
  .footer-links,
  .skip {
    display: none;
  }
  .wrap {
    max-width: none;
    padding: 0;
  }
}