@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
}
/* Layout and styling adapted from jeff.henshaw.org */
/* ------------------------- DOCUMENT SETUP ------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  background-color: #ffffff;
  color: #444444;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ------------------------- ARTICLE PAGES ------------------------- */
.document-wrapper {
  max-width: 48em;
  width: 100%;
  min-height: 100%;
  margin: 40px auto;
  padding: 0 2em 2em;
  color: #444444;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.755;
  tab-size: 4;
  /* Headings */
}
.document-wrapper h1, .document-wrapper h2, .document-wrapper h3, .document-wrapper h4, .document-wrapper h5, .document-wrapper h6 {
  display: block;
  font-weight: 600;
  line-height: 1.521;
}
.document-wrapper h1 {
  font-size: 2em;
  padding-top: 0.8em;
  margin-bottom: 1em;
}
.document-wrapper h2 {
  font-size: 1.6em;
  padding-top: 0.66em;
  margin-bottom: 0.7em;
}
.document-wrapper h3 {
  font-size: 1.27em;
  padding-top: 0.53em;
  margin-bottom: 0.25em;
}
.document-wrapper h4, .document-wrapper h5, .document-wrapper h6 {
  padding-top: 0.4em;
  padding-bottom: 0.27em;
}
.document-wrapper {
  /* Body text */
}
.document-wrapper p {
  display: block;
  margin-bottom: 1.8em;
}
.document-wrapper a {
  color: #DD4C4F;
  cursor: pointer;
  text-decoration: none;
}
.document-wrapper strong, .document-wrapper b, .document-wrapper th {
  font-weight: bold;
}
.document-wrapper em, .document-wrapper i {
  font-style: italic;
}
.document-wrapper {
  /* Lists */
}
.document-wrapper ul, .document-wrapper ol {
  display: block;
  padding-inline-start: 2.13em;
  margin-bottom: 1em;
}
.document-wrapper ul {
  list-style-type: disc;
}
.document-wrapper ul ul {
  list-style-type: circle;
}
.document-wrapper ul ul ul {
  list-style-type: disc;
}
.document-wrapper ol {
  list-style-type: decimal;
}
.document-wrapper li {
  display: list-item;
}
.document-wrapper li::marker {
  color: #DD4C4F;
}
.document-wrapper li > p {
  display: inline;
}
.document-wrapper {
  /* Quotes: an accent bar in the left gutter */
}
.document-wrapper blockquote {
  display: block;
  position: relative;
  padding-inline-start: 2.13em;
  margin-bottom: 1.8em;
}
.document-wrapper blockquote::before {
  content: "";
  position: absolute;
  top: -0.4em;
  left: 1em;
  width: 0.13em;
  height: calc(100% + 0.8em);
  background-color: #DD4C4F;
  border: 1px solid #DD4C4F;
  border-radius: 0.33em;
}
.document-wrapper hr {
  display: block;
  margin: 2em 0 0.5em;
  border: none;
  border-top: 1px solid #d9d9d9;
}
.document-wrapper {
  /* Code */
}
.document-wrapper code, .document-wrapper pre {
  font-family: "Menlo", ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.91em;
}
.document-wrapper code {
  padding: 0.25em;
  color: #444444;
  background-color: #F3F5F7;
  border-radius: 0.25em;
}
.document-wrapper pre {
  display: block;
  white-space: pre-wrap;
}
.document-wrapper pre code {
  display: block;
}
.document-wrapper {
  /* Tables */
}
.document-wrapper table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.755em;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
}
.document-wrapper tr:nth-child(odd) {
  background-color: #F3F5F7;
}
.document-wrapper th, .document-wrapper td {
  min-width: 5em;
  padding: 0.37em 0.75em;
  text-align: left;
  border-right: 1px solid #d9d9d9;
}
.document-wrapper th:last-child, .document-wrapper td:last-child {
  border-right: none;
}
.document-wrapper {
  /* Media */
}
.document-wrapper img {
  display: inline;
  max-width: 100%;
}
.document-wrapper iframe {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border: none;
  aspect-ratio: 660/440;
}
.document-wrapper iframe.portrait {
  aspect-ratio: 440/782;
  margin: 0 auto 20px;
}
.document-wrapper {
  /* Image size hints from the markdown: ![alt](photo.jpg#half) */
}
.document-wrapper img {
  width: 100%;
}
.document-wrapper img[src*="#half"] {
  width: 49%;
}
.document-wrapper img[src*="#twothirds"] {
  width: 66%;
}
.document-wrapper img[src*="#third"] {
  width: 32%;
}
.document-wrapper {
  /* Date pill at the end of a bearnote */
}
.document-wrapper .date {
  display: inline-block;
  margin-bottom: 38px;
  padding: 6px 10px;
  font-size: 14px;
  background-color: lightgray;
  border-radius: 7px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.document-wrapper {
  /* Date under a post's title */
}
.document-wrapper .dateline {
  display: block;
  margin: -0.9em 0 1.8em;
  color: #888888;
}
.document-wrapper {
  /* Home link at the top and bottom of a post */
}
.document-wrapper #header {
  margin: 20px auto;
  text-align: center;
}
.document-wrapper #footer {
  margin-top: 30px;
  padding-top: 5px;
  font-size: 14.5px;
  color: #888888;
  text-align: center;
  border-top: 1px dotted #444444;
}
.document-wrapper .home-icon {
  display: inline-block;
  height: 38px;
  padding: 5px;
}
.document-wrapper .home-icon a {
  font-size: 30px;
  line-height: 1;
}
.document-wrapper .home-icon a:hover {
  opacity: 0.6;
}
/* ------------------------- HOME PAGE ------------------------- */
/* Depth: the microphone is small and far back on the wall; the type is in
   front of it, sharp, overlapping the edge of the mic's shadow, with a faint
   shadow of its own. Text is positioned in % of the stage and sized in
   container units so the whole composition scales as one piece.
   Identity-block structure adapted from jeff.henshaw.org. */
body.home {
  min-height: 100vh;
  background: #EBE1D3;
  color: #282828;
  -webkit-font-smoothing: antialiased;
}
.stage {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 1600 / 1000;
  container-type: inline-size;
  overflow: hidden;
  --px: 0;
  --py: 0;
}
.stage-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transform: translate3d(calc(var(--px) * -8px), calc(var(--py) * -5px), 0);
  transition: transform .25s ease-out;
}
.stage-text {
  position: absolute;
  left: 37%;
  top: 31%;
  font-size: clamp(12px, 1.02cqw, 16px);
  line-height: 1.6;
  text-align: left;
  color: #1f1b17;

  transform: translate3d(calc(var(--px) * 12px), calc(var(--py) * 8px), 0);
  transition: transform .25s ease-out;
}
.nameField {
  font-size: 2.1em;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: none;
  line-height: 1.2;
  margin: 0 0 1.1em;
  text-shadow: 3px 5px 9px rgba(70, 52, 34, .28);
  color: #1f1b17;
}
.entry { margin: 0 0 .95em; line-height: 1.45; }
.titleline {
  display: inline-block;
  font-size: .72em;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: .15em;
}
.entry a { color: #1f1b17; text-decoration: none; font-size: 1em; font-weight: 400; letter-spacing: .01em; transition: color .2s ease; }
.entry a:hover, .entry a:focus-visible { color: #DD4C4F; }
.menu { margin-top: 1.5em; margin-left: -6px; display: flex; gap: 6px; }
.menu-icon { display: inline-block; padding: 6px; color: #1f1b17; }
.menu-icon a { display: inline-flex; align-items: center; text-decoration: none !important; color: inherit; transition: color .2s ease, transform .2s ease; }
.menu-icon a:hover { color: #DD4C4F; transform: translateY(-1px); }
.menu-icon svg { width: 20px; height: 20px; }

.subtitle { font-size: 1.15em; font-weight: 400; letter-spacing: .02em; margin-bottom: 1em; text-transform: lowercase; }
.roles { font-size: .8em; font-weight: 500; letter-spacing: .1em; text-transform: lowercase; color: rgba(31, 27, 23, .6); line-height: 1.9; }
.roles span { white-space: nowrap; }
.roles .dot { margin: 0 .7em; opacity: .7; }

@keyframes slideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.stage-text .nameField, .stage-text .entry, .stage-text .menu-icon { opacity: 0; animation: slideIn .6s ease-out forwards; }
.stage-text .entry:nth-of-type(2) { animation-delay: .15s; }
.stage-text .entry:nth-of-type(3) { animation-delay: .3s; }
.stage-text .menu-icon:nth-of-type(1) { animation-delay: .6s; }
.stage-text .menu-icon:nth-of-type(2) { animation-delay: .7s; }
.stage-text .menu-icon:nth-of-type(3) { animation-delay: .8s; }
.stage-text .menu-icon:nth-of-type(4) { animation-delay: .9s; }
.stage-text .menu-icon:nth-of-type(5) { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  .stage-text .nameField, .stage-text .entry, .stage-text .menu-icon { opacity: 1; animation: none; }
  .stage-photo, .stage-text { transform: none !important; transition: none; }
}

/* Phones and any tall (portrait) screen, tablets included: the picture is
   cropped to the mic and its shadow, and the text overlaps the bottom of the
   shadow so it still sits in front of it. Sizes use vw so it scales. */
@media (max-width: 544px), (max-aspect-ratio: 11/10) {
  .stage { aspect-ratio: auto; max-width: none; display: flex; flex-direction: column; }
  .stage-photo { position: relative; inset: auto; display: block; width: 168%; max-width: none; height: auto; margin: 0 0 -50vw -66%; transform: none !important; }
  .stage-text { position: relative; left: auto; top: auto; padding: 0 12vw 56px; font-size: clamp(14px, 2.3vw, 22px); transform: none !important; }
  .nameField { font-size: 2em; letter-spacing: .08em; }
  .roles { letter-spacing: .09em; }
  .roles .dot { margin: 0 .4em; }
}
@media (min-width: 545px) and (max-aspect-ratio: 11/10) {
  .stage-photo { width: 120%; margin: 0 0 -26vw -22%; }
}
@media (max-width: 544px) {
  .document-wrapper { width: 95%; margin: 40px auto; padding: 0; font-size: 17px; }
  .document-wrapper h1, .document-wrapper h2, .document-wrapper h3, .document-wrapper h4, .document-wrapper h5, .document-wrapper h6 { font-weight: 700; }
  .document-wrapper img[src*="#half"], .document-wrapper img[src*="#twothirds"], .document-wrapper img[src*="#third"] { width: 100%; }
}

/* House style: lowercase for headings, dates and chrome (body copy keeps its capitals). */
.document-wrapper h1, .document-wrapper h2, .document-wrapper h3,
.document-wrapper .dateline, .document-wrapper #footer { text-transform: lowercase; }