@font-face {
  font-family: 'Libertinus Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/libertinus-sans@latest/latin-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Libertinus Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/libertinus-sans@latest/latin-700-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Libertinus Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/libertinus-sans@latest/latin-400-italic.woff2) format('woff2');
}

* {
  box-sizing: border-box;
  transition: border-radius 0.1s ease;
}

:root {
  --paper: #FBF5EC;
  --paper-2: #F4E9DA;
  --paper-3: #EFE2D0;
  --ink: #241A18;
  --ink-soft: #594843;
  --ink-faint: #8C7A71;
  --line: rgba(36,26,24,.13);

  --reserve-burgundy: #4B0A1B;
  --ruby-merlot: #7A1528;
  --garnet-rose: #A63048;
  --copper-ale: #A15F2B;
  --amber-lager: #C68A3E;
  --new-england-ipa: #D9B44A;

  --font-size: 18px;
  --font-family: 'Libertinus Sans', 'Linux Biolinum', 'Optima', 'Open Sans', 'Candara', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono-font-family: 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  /* The famous border radius - you will encounter it later in the toy section. */
  --border-radius: 5px;
}

body {
  font-family: var(--font-family);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--font-size);
  margin: 0;
  line-height: 1.414;
  letter-spacing: -.005em;
}

code {
  font-family: var(--mono-font-family);
  font-size: 0.9em;
  background: var(--paper-2);
  color: var(--reserve-burgundy);
  padding: 0.25em;
  border: 1px solid var(--line);
  border-radius: var(--border-radius);
  letter-spacing: -.03em;
}

.muted {
  color: color-mix(in srgb, currentColor 60%, transparent);
}

a {
  color: var(--ruby-merlot);
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, var(--ruby-merlot) 50%, transparent);
}

a:hover {
  text-decoration-color: var(--ruby-merlot);
}

a:visited {
  color: var(--ruby-merlot);
}

/* Italic emoji look weird, neutralize them if necessary. */
em.oji { /* I'm sorry, the pun was right there, I couldn't resist */
  font-style: normal;
}

section {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem calc(2rem + max(0px, 100vw - 800px) / 2 - clamp(0px, 50vw - 400px, 100px) / 2);
}

section.inverted {
  background: var(--reserve-burgundy);
  color: var(--paper);
}

section.paper-2 {
  background: var(--paper-2);
}

section .eyebrow {
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ruby-merlot);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

section.inverted .eyebrow {
  color: var(--paper-2);
}

section .subtitle {
  max-width: 50ch;
  font-size: 1.25em;
  color: var(--ink-soft);
  margin-top: 0;
}

section.inverted .subtitle {
  color: var(--paper-3);
}

section.narrower-text p {
  max-width: 58ch;
}

.eyebrow-number {
  font-family: var(--mono-font-family);
  font-size: 0.75em;
  font-weight: 400;
  color: var(--copper-ale);
  margin-right: 0.75em;
}

section.inverted .eyebrow-number {
  color: var(--new-england-ipa);
}

section.inverted em {
  color: var(--new-england-ipa);
}

section h1 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 10vw, 4rem);
  letter-spacing: -.03em;
  font-weight: 700;
  margin-top: 0.25em;
  margin-bottom: 1rem;
  line-height: 1;
}

#intro h1 {
  font-size: clamp(4rem, 14vw, 7rem);
}

#intro-eyebrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75em;
  line-height: 1;
}

#intro-eyebrow span:not(:last-child)::after {
  color: var(--amber-lager);
  content: '•';
  font-size: unset;
  margin-left: 0.75em;
  flex-basis: 100%;
}

#intro-eyebrow .role {
  font-size: 0.9em;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ruby-merlot);
}

#intro-eyebrow .note {
  letter-spacing: .03em;
  font-family: var(--mono-font-family);
  font-size: 0.8em;
  color: var(--ink-soft);
}

#motto {
  font-size: 1.75em;
  margin-top: 0.5em;
}

#motto em {
  font-style: italic;
  color: var(--copper-ale);
  white-space: nowrap;
}

#blurb {
  max-width: 50ch;
  font-size: 1.25em;
}

#pronunciation {
  font-size: 0.9em;
  color: var(--ink-soft);
  margin-top: 2em;
  font-style: italic;
}

#pronunciation em {
  font-style: normal;
  color: var(--garnet-rose);
}

ul.principles {
  list-style: none;
  padding-left: 0;
}

ul.principles li {
  margin-bottom: 3rem;
  max-width: 50ch;
  font-size: 1.25em;
  line-height: 1.6;
}

ul.principles li h2 {
  color: var(--reserve-burgundy);
  line-height: 1;
  letter-spacing: -.02em;
}

ul.principles li em {
  font-style: normal;
  color: var(--ruby-merlot);
}

.specimen {
  font-family: var(--mono-font-family);
  font-size: 14px;
  background: var(--paper-2);
  color: var(--ink);
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--border-radius);
  letter-spacing: -.02em;
  overflow-x: auto;
  margin-top: 1rem;
  white-space: pre-line;
}

.specimen .string {
  color: var(--ruby-merlot);
}

.specimen .number {
  color: var(--copper-ale);
}

.projects {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 4em;
}

.projects .project {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.project-eyebrow {
  grid-area: eyebrow;
  font-family: var(--mono-font-family);
  font-size: 0.65em;
  text-transform: uppercase;
  color: var(--copper-ale);
  letter-spacing: .1em;
}

.project-name {
  grid-area: name;
  font-size: 1.75em;
  line-height: 1.1;
  margin-block: 0.25em;
}

.project-description {
  grid-area: description;
  font-size: 1.1em;
  color: var(--ink-soft);
}

.project-details {
  grid-area: details;
  color: var(--ink);
}

.project-screenshot {
  max-width: 300px;
  max-height: 250px;
  display: block;
  margin: 1rem auto;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

@media (min-width: 800px) {
  .project-screenshot {
    float: right;
    margin: 1rem 0 1rem 1rem;
  }
}

#smaller-projects ul {
  list-style: circle;
  padding-left: 1.5em;
}

#smaller-projects ul li {
  margin-bottom: 0.75em;
}

.tags {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0; /* Hack: we'll handle horizontal spacing in the .tag itself.
                   Horizontal flex gap doesn't animate independently on Safari on iOS. */
  transition: gap 0.1s ease;
  margin-top: 0.5em;
}

.tag {
  background: var(--paper-2);
  color: var(--reserve-burgundy);
  padding-block: 0.25em;
  padding-inline: calc(0.7em + var(--border-radius) / 8);
  border: 1px solid var(--line);
  border-radius: var(--border-radius);
  /* margin-right and margin-left always add up to the same number regardless of the border radius,
     so the total horizontal space taken by the tag doesn't change when the border radius changes,
     only how it's distributed around the tag.
     This allows us to change the padding in response to the border radius to prevent the tag from
     looking too cramped or too spacious when the border radius changes, while avoiding layout shifts. */
  margin-right: calc(0.8em - var(--border-radius) / 8);
  margin-left: calc(var(--border-radius) / -8);
  transition: margin-left 0.1s ease, margin-right 0.1s ease, border-radius 0.1s ease, padding-inline 0.1s ease;
}

section.inverted .tag {
  background: var(--ruby-merlot);
  color: var(--paper);
  border-color: rgba(255,255,255,.15);
}

.tags.project-tags {
  margin-top: 1.5em;
}

.tag.project-tag {
  font-family: var(--mono-font-family);
  font-size: 0.75em;
}

#border-radius-toy {
  margin-top: 2em;
  max-width: 58ch;
  text-transform: uppercase;
  font-family: var(--mono-font-family);
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  letter-spacing: .05em;
  margin-bottom: 1.5rem;
  user-select: none;
}

#current-value-readout {
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}

#current-value-readout #current-value-number {
  color: var(--paper);
  font-size: 2.5em;
  font-weight: 700;
  width: 2.5ch;
  display: inline-block;
}

#border-radius-slider-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "slider slider"
    "slider-start slider-end";
  gap: 0 0.75em;
}

#border-radius-slider {
  grid-area: slider;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: color-mix(in srgb, var(--paper) 50%, transparent);
  outline: none;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

#border-radius-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--amber-lager);
  border: 2px solid var(--paper);
  border-radius: var(--border-radius);
  cursor: pointer;
}

#border-radius-slider::-webkit-slider-thumb:hover {
  background: var(--new-england-ipa);
}

#border-radius-slider::-webkit-slider-thumb:active {
  background: var(--copper-ale);
}

#border-radius-slider::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--amber-lager);
  border: 2px solid var(--paper);
  border-radius: var(--border-radius);
  cursor: pointer;
}

#border-radius-slider::-moz-range-thumb:hover {
  background: var(--new-england-ipa);
}

#border-radius-slider::-moz-range-thumb:active {
  background: var(--copper-ale);
}

#border-radius-slider-container .slider-label {
  font-size: 0.75em;
  color: color-mix(in srgb, var(--paper) 50%, transparent);
}

#whats-next-content {
  line-height: 1.6;
}

#whats-next-text {
  max-width: 60ch;
}

#domains {
  border: 1px solid var(--line);
  border-radius: var(--border-radius);
  padding: 1rem;
  background: var(--paper-2);
}

#domains .tags {
  margin-bottom: 0;
}

#domains .tag {
  background: var(--paper);
}

@media (min-width: 800px) {
  #whats-next-content {
    display: flex;
    align-items: start;
    gap: 3rem;
  }

  #whats-next-text {
    max-width: none;
    flex: 1;
  }

  #domains {
    flex-basis: 38ch;
  }
}

@media (min-width: 1000px) {
  #domains {
    flex-basis: 41ch;
  }
}

#contact {
  min-height: fit-content;
  background: var(--ink);
}

#contact .eyebrow {
  color: var(--amber-lager);
}

ul.contact-channels {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
}

.contact-channels .channel a {
  margin-bottom: 0.25rem;
  display: inline-flex;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.1s ease, border-bottom-color 0.1s ease;
}

.contact-channels .channel a:hover {
  color: var(--amber-lager);
  border-bottom-color: color-mix(in srgb, var(--amber-lager) 100%, transparent);
}

.contact-channels .channel a .arrow {
  color: var(--garnet-rose);
  transform: translate(0, 0);
  transition: transform 0.2s ease;
  margin-left: 0.35em;
}

.contact-channels .channel a:hover .arrow {
  transform: translate(4px, -4px);
}