/* Brand: Peruvian red, hot and saturated */
/* Supporting, all used sparingly */
@font-face {
  font-family: "Really Sans Large";
  src: url("/assets/fonts/ReallySansLarge-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Really Sans Large";
  src: url("/assets/fonts/ReallySansLarge-Black.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("/assets/fonts/FunnelSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("/assets/fonts/FunnelSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("/assets/fonts/FunnelSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
  }
}
:where(body) {
  min-block-size: 100svh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6, input, button, textarea, select) {
  font: inherit;
}

:where(ul, ol) {
  padding-inline-start: 1em;
}
:where(ul, ol)[role=list] {
  list-style: none;
  padding-inline-start: 0;
}

:where(pre) {
  white-space: pre-wrap;
}

:where(img, picture, svg, video) {
  display: block;
  max-inline-size: 100%;
  height: auto;
}

:where(svg) {
  flex-shrink: 0;
  fill: currentColor;
}

:where(label, time) {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;
  }
}
:root {
  color-scheme: light dark;
}

:where(body) {
  font-family: var(--font-family-body, Funnel Sans, sans-serif);
  background-color: var(--color-surface-body, light-dark(#F7F5F0, #150a0a));
  color: var(--color-text-body, light-dark(#16161A, #F7F5F0));
}

:where(a) {
  color: var(--color-text-body, light-dark(#16161A, #F7F5F0));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.125em;
  text-decoration-color: var(--color-text-interactive, light-dark(#DA1025, #FF5A5C));
}
:where(a):hover, :where(a):focus-visible {
  color: var(--color-text-interactive, light-dark(#DA1025, #FF5A5C));
}

a {
  transition: color 0.1s linear;
}

:where(iframe[src*=youtube]),
:where(iframe[src*=vimeo]) {
  aspect-ratio: 16/9;
}

:where(code):not([class*=language-]) {
  font-family: "DM Mono", monospace;
  font-size: clamp(0.875rem, 0.3125vw + 0.8125rem, 1rem);
  background-color: rgb(from currentColor r g b/0.1);
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

:where(strong) {
  font-weight: 600;
  color: var(--color-text-accent, light-dark(#92721C, #efe2ba));
}

:where(blockquote:not(.ma-bsky-post blockquote, .ma-blockquote)) {
  border-inline-start: 4px solid var(--color-border-accent, light-dark(#92721C, #efe2ba));
  padding-inline-start: 1.5rem;
  margin-inline: 1.5rem;
}

:where(table) {
  border: 3px double light-dark(#DCDAD2, #3E3D3A);
  border-spacing: 0;
}
:where(table) th, :where(table) td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem;
  font-size: clamp(0.875rem, 0.3125vw + 0.8125rem, 1rem);
  line-height: 1.2;
}
:where(table) th:not(:last-child), :where(table) td:not(:last-child) {
  border-inline-end: 1px solid light-dark(#DCDAD2, #3E3D3A);
}
:where(table) tr:not(:last-child) td, :where(table) th {
  border-block-end: 1px solid light-dark(#DCDAD2, #3E3D3A);
}

.ma-article figure img,
.ma-article figure video {
  width: 100%;
}
.ma-article figcaption {
  margin-block-start: 0.25rem;
}

@media (width > 700px) {
  .ma-article {
    font-size: clamp(1rem, 0.625vw + 0.875rem, 1.25rem);
  }
}
.ma-avatar {
  --avatar-size: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--avatar-size);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
  background-color: var(--color-surface-elevated, light-dark(#ECEAE3, #232220));
  color: var(--color-text-subdued, light-dark(#6B6964, #C4C2BA));
  font-weight: 600;
  font-size: calc(var(--avatar-size) * 0.5);
}
.ma-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ma-bsky-post {
  padding: 1rem;
  background-color: var(--color-surface-card, light-dark(#FFF, #0A0A09));
  border-radius: 2px;
  border: 1px solid var(--color-border, light-dark(#DCDAD2, #3E3D3A));
  box-shadow: var(--shadow, 2px 2px 0px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)));
}
.ma-bsky-post blockquote {
  margin-block: 0.5rem;
  padding: 1rem;
  background-color: var(--color-surface-elevated, light-dark(#ECEAE3, #232220));
}

.ma-button {
  background-color: #DA1025;
  color: #F7F5F0;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
}
.ma-button:hover, .ma-button:focus-visible {
  background-color: #B0091B;
}

.ma-card {
  background-color: var(--color-surface-brand, light-dark(#7A0612, #DA1025));
  border-radius: 2px;
}

[class*=ma-icon] {
  --icon-size: 1rem;
  width: var(--icon-size);
  aspect-ratio: 1;
}

.ma-icon-12 {
  width: 0.75rem;
}

a:has(use[href*=bluesky]):hover svg {
  fill: rgb(15, 115, 255);
}

a:has(use[href*=twitch]):hover svg {
  fill: rgb(145, 71, 255);
}

a:has(use[href*=letterboxd]):hover svg {
  --color-letterboxd-orange: #FF9933;
  --color-letterboxd-green: #00C030;
  --color-letterboxd-blue: #209CE4;
}

a:has(use[href*=rss]):hover svg {
  fill: #F87900;
}

a:has(use[href*=mail]):hover svg {
  fill: var(--color-text-body, light-dark(#16161A, #F7F5F0));
}

.ma-nav-list {
  justify-content: center;
  align-items: end;
}
.ma-nav-list a {
  --padding-inline: 0.5rem;
  font-family: var(--font-family-heading, Really Sans Large, sans-serif);
  font-size: clamp(0.875rem, 0.3125vw + 0.8125rem, 1rem);
  font-weight: 400;
  color: var(--color-text-subdued, light-dark(#6B6964, #C4C2BA));
  text-decoration: none;
  padding: var(--padding-inline);
  position: relative;
}
.ma-nav-list a[aria-current=page]::after {
  content: "";
  position: absolute;
  inset-inline: var(--padding-inline);
  bottom: 2px;
  height: 2px;
  background-color: var(--color-text-interactive, light-dark(#DA1025, #FF5A5C));
}
.ma-nav-list a:not([aria-current=page]):hover {
  color: var(--color-text-interactive, light-dark(#DA1025, #FF5A5C));
}

@media (width > 700px) {
  .ma-nav-list {
    justify-content: end;
  }
  .ma-nav-list a {
    --padding-inline: 1rem;
    padding: 0.5rem var(--padding-inline);
  }
}
.ma-tag {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: var(--color-text-body, light-dark(#16161A, #F7F5F0));
  text-decoration: none;
  font-size: clamp(0.875rem, 0.3125vw + 0.8125rem, 1rem);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  border: 1px solid var(--color-border, light-dark(#DCDAD2, #3E3D3A));
  cursor: pointer;
  line-height: 1;
}
.ma-tag:hover, .ma-tag[aria-current=page], .ma-tag[aria-pressed=true] {
  background-color: var(--color-surface-brand, light-dark(#7A0612, #DA1025));
  border-color: var(--color-surface-brand, light-dark(#7A0612, #DA1025));
  color: #fff;
}

.ma-rating {
  --background-color: var(--color-surface-body, light-dark(#F7F5F0, #150a0a));
  --meter-background: var(--color-border, light-dark(#DCDAD2, #3E3D3A));
  --icon-color: var(--color-star-rating, #FFD35C);
  --height: 16px;
  --mask-size: calc(var(--height) * 17 / 16) var(--height);
  height: var(--height);
  width: calc(var(--height) * 168 / 32);
  position: relative;
}
.ma-rating meter {
  position: absolute;
  inset: 0;
  background: none;
  background-color: var(--meter-background);
  height: var(--height);
  width: auto;
}
.ma-rating::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: var(--background-color);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath d='M17 0v16H0V0h17ZM8.87.788a.97.97 0 0 0-1.745 0L5.177 4.796l-4.351.643a.967.967 0 0 0-.779.657.974.974 0 0 0 .24.991l3.157 3.124-.746 4.415a.974.974 0 0 0 1.415 1.018l3.888-2.076 3.887 2.076a.971.971 0 0 0 1.415-1.018l-.748-4.415 3.157-3.124a.968.968 0 0 0-.539-1.648l-4.354-.643L8.87.788Z'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  mask-size: var(--mask-size);
}
.ma-rating ::-moz-meter-bar {
  background: none;
  background-color: var(--icon-color);
}
.ma-rating ::-webkit-meter-bar {
  background: var(--meter-background);
  border: 0;
  border-radius: 0;
  height: var(--height);
}
.ma-rating ::-webkit-meter-optimum-value {
  background: var(--icon-color);
}

.ma-rating[data-rating=bar] {
  --background-color: var(--color-surface-body, light-dark(#F7F5F0, #150a0a));
  --icon-color: dodgerblue;
  --height: 20px;
  --mask-size: calc(var(--height) * 12 / 20) var(--height);
}
.ma-rating[data-rating=bar]::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M0 1V0h1a1 1 0 0 0-1 1Zm4-1h2v10H4a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1ZM1 10H0V9a1 1 0 0 0 1 1Z'/%3E%3C/svg%3E");
  mask-size: var(--mask-size);
  mask-repeat: repeat-x;
}
.ma-rating[data-rating=bar]:has(meter[max="5"]) {
  width: calc(var(--height) * 29 / 10);
}
.ma-rating[data-rating=bar]:has(meter[max="10"]) {
  width: calc(var(--height) * 59 / 10);
}

.ma-sketch {
  font-family: monospace;
  font-size: 1.125rem;
}

.ma-sketch .ma-text-center + p {
  margin-block-end: 1.5rem;
}

.ma-dir {
  margin-inline-start: 25%;
  margin-block-end: 1.5rem;
}

.ma-sketch strong {
  font-weight: normal;
}

.ma-scroller {
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.ma-scroller li {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  inline-size: 100%;
  max-inline-size: 20rem;
  max-block-size: 300px;
  border-radius: 2px;
  overflow: hidden;
}

.ma-social-quote {
  padding: 4rem 1rem 1rem 1rem;
  max-width: 80%;
  margin-inline: auto;
  font-size: clamp(0.875rem, 0.3125vw + 0.8125rem, 1rem);
  border: 2px solid transparent;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: 0.5rem 0.5rem;
  background-size: 3rem 3rem;
}
.ma-social-quote:has(a[href*=twitter]) {
  border-color: #1b9df0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.1 24.4c7.1 0 11-5.9 11-11v-.5c.8-.5 1.4-1.2 1.9-2-.7.3-1.4.5-2.2.6.8-.5 1.4-1.2 1.7-2.1-.7.4-1.6.8-2.4.9-.7-.8-1.7-1.2-2.8-1.2-2.1 0-3.9 1.7-3.9 3.9 0 .3 0 .6.1.9-3.2-.2-6-1.7-8-4-.3.5-.5 1.2-.5 1.9 0 1.3.7 2.5 1.7 3.2-.6 0-1.2-.2-1.7-.5 0 1.9 1.3 3.4 3.1 3.8-.3.1-.7.1-1 .1-.2 0-.5 0-.7-.1.5 1.5 1.9 2.6 3.6 2.7-1.3 1-3 1.6-4.8 1.6-.3 0-.6 0-.9-.1 1.6 1.3 3.6 1.9 5.8 1.9' fill='%231b9df0'/%3E%3C/svg%3E");
}

@media (width > 700px) {
  .ma-social-quote {
    padding: 1.5rem 1.5rem 1.5rem 4rem;
  }
}
#gw-list li,
#lw-list li {
  align-items: start;
}
#gw-list li:not(:last-child),
#lw-list li:not(:last-child) {
  margin-block-end: 0.5rem;
}
#gw-list img,
#lw-list img {
  object-fit: cover;
  border-radius: 2px;
  height: 90px;
}

#gw-list img {
  height: 90px;
}

[class*=ma-heading], .ma-article :where(h2, h3) {
  font-family: var(--font-family-heading, Really Sans Large, sans-serif);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: pretty;
}

.ma-heading-1 {
  font-size: clamp(2rem, 2.5vw + 1.5rem, 3rem);
}

.ma-heading-2, .ma-article h2 {
  font-size: clamp(1.25rem, 1.875vw + 0.875rem, 2rem);
}

.ma-heading-3, .ma-article h3 {
  font-size: clamp(1rem, 0.625vw + 0.875rem, 1.25rem);
}

[class*=ma-eyebrow] {
  font-family: var(--font-family-heading, Really Sans Large, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: var(--color-text-subdued, light-dark(#6B6964, #C4C2BA));
}

.ma-eyebrow-lg {
  font-size: clamp(2rem, 2.5vw + 1.5rem, 3rem);
}

.ma-eyebrow-sm {
  font-size: clamp(0.75rem, 0.3125vw + 0.6875rem, 0.875rem);
}

.ma-text-subdued, .ma-article figcaption {
  color: var(--color-text-subdued, light-dark(#6B6964, #C4C2BA));
}
.ma-text-subdued a, .ma-article figcaption a {
  text-decoration-color: currentColor;
}
.ma-text-subdued:has(a:hover) a, .ma-article figcaption:has(a:hover) a, .ma-text-subdued:has(a:focus-visible) a, .ma-article figcaption:has(a:focus-visible) a {
  color: var(--color-text-interactive, light-dark(#DA1025, #FF5A5C));
}

.ma-text-brand, .ma-wordmark {
  color: var(--color-text-brand, light-dark(#7A0612, #DA1025));
}
.ma-text-brand a, .ma-wordmark a {
  text-decoration-color: transparent;
}
.ma-text-brand:has(a):hover, .ma-wordmark:has(a):hover, .ma-text-brand:has(a):focus-visible, .ma-wordmark:has(a):focus-visible {
  color: var(--color-text-interactive, light-dark(#DA1025, #FF5A5C));
}

.ma-text-accent {
  color: var(--color-text-accent, light-dark(#92721C, #efe2ba));
}

.ma-text-xl {
  font-size: clamp(2rem, 2.5vw + 1.5rem, 3rem);
  line-height: 1.2;
}

.ma-text-lg {
  font-size: clamp(1.25rem, 1.875vw + 0.875rem, 2rem);
  line-height: 1.2;
}

.ma-text-sm, .ma-article figcaption {
  font-size: clamp(0.875rem, 0.3125vw + 0.8125rem, 1rem);
}

.ma-text-xs {
  font-size: clamp(0.75rem, 0.3125vw + 0.6875rem, 0.875rem);
}

.ma-text-inherit {
  color: inherit;
}

.ma-text-uppercase {
  text-transform: uppercase;
}

.ma-leading-tight {
  line-height: 1.2;
}

.ma-text-right {
  text-align: right;
}

.ma-text-thicc {
  font-weight: 800;
}

.ma-blockquote {
  padding: 2rem 3rem;
  font-family: var(--font-family-heading, Really Sans Large, sans-serif);
  font-size: clamp(2rem, 2.5vw + 1.5rem, 3rem);
  font-weight: 800;
  line-height: 1.4;
  border-block: 1px solid var(--color-border-accent, light-dark(#92721C, #efe2ba));
  margin-block-start: 2rem;
  margin-block-end: 1rem;
}

.ma-text-center {
  text-align: center;
}

.ma-wordmark {
  font-family: var(--font-family-heading, Really Sans Large, sans-serif);
  font-size: 2rem;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 800;
}

.ma-layout-hero {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem 1rem;
}
.ma-layout-hero div {
  flex: 1;
}
.ma-layout-hero img {
  max-width: 300px;
  order: -1;
}

@media (width >= 700px) {
  .ma-layout-hero {
    flex-direction: row;
  }
  .ma-layout-hero img {
    order: 0;
  }
}
.ma-layout-primary {
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-size: clamp(1rem, 0.625vw + 0.875rem, 1.25rem);
}
.ma-layout-primary > * > * {
  padding: 1rem;
}
.ma-layout-primary [data-grid-area=header] {
  background-color: var(--color-surface-card, light-dark(#FFF, #0A0A09));
  border-block-end: 1px solid var(--color-border-accent, light-dark(#92721C, #efe2ba));
}
.ma-layout-primary [data-grid-area=main] > * {
  padding-block: 3rem;
}
.ma-layout-primary [data-grid-area=footer] {
  background-color: var(--color-surface-elevated, light-dark(#ECEAE3, #232220));
  border-block-start: 1px solid var(--color-border-accent, light-dark(#92721C, #efe2ba));
}

@media (width > 700px) {
  .ma-layout-primary > * > * {
    padding: 1.5rem;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
  }
}
.ma-layout-widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-block-start: 2rem;
}

@media (width > 700px) {
  .ma-layout-widgets {
    grid-template-columns: 3fr 2fr 2fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "posting snapping snapping" "posting watching playing";
  }
  .ma-layout-widgets [data-grid-area=posting] {
    grid-area: posting;
    padding-inline-end: 1rem;
    overflow-y: auto;
    scrollbar-color: var(--color-surface-elevated, light-dark(#ECEAE3, #232220)) var(--color-surface-body, light-dark(#F7F5F0, #150a0a));
    scrollbar-width: thin;
    max-height: var(--posting-max-height, 867px);
  }
  .ma-layout-widgets::-webkit-scrollbar {
    width: 0.5rem;
  }
  .ma-layout-widgets::webkit-scrollbar-track {
    background: var(--color-surface-body, light-dark(#F7F5F0, #150a0a));
    padding: 0.25rem;
  }
  .ma-layout-widgets::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
  }
  .ma-layout-widgets::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
  .ma-layout-widgets [data-grid-area=snapping] {
    grid-area: snapping;
  }
  .ma-layout-widgets [data-grid-area=watching] {
    grid-area: watching;
  }
  .ma-layout-widgets [data-grid-area=playing] {
    grid-area: playing;
  }
}
.ma-surface {
  background-color: var(--color-surface-card, light-dark(#FFF, #0A0A09));
}

.ma-flex, .ma-nav-list,
.ma-space-between {
  --flex-align: center;
  --flex-gap: 0.5rem;
  --flex-wrap: none;
  display: flex;
  align-items: var(--flex-align);
  gap: var(--flex-gap);
  flex-wrap: var(--flex-wrap);
}

.ma-space-between,
.ma-space-between-responsive {
  justify-content: space-between;
}

.ma-flex-responsive,
.ma-space-between-responsive {
  --flex-align: center;
  --flex-gap: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: var(--flex-align);
  gap: var(--flex-gap);
}

@media (width >= 700px) {
  .ma-flex-responsive,
  .ma-space-between-responsive {
    flex-direction: row;
  }
  .ma-flex-align-end-on-large {
    --flex-align: end;
  }
}
.ma-flex-item {
  flex: 1;
}

.ma-grid {
  --grid-col-min: 200px;
  --gap: 0.5rem;
  --align-items: normal;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-col-min), 100%), 1fr));
  gap: var(--gap);
  align-items: var(--align-items);
}

:where(.ma-flow) {
  --flow-size: 1rem;
}
:where(.ma-flow) > :not(:last-child) {
  margin-block-end: var(--flow-size);
}

.ma-stack {
  margin-block-end: 1rem;
}

.ma-stack-4 {
  margin-block-end: 0.25rem;
}

.ma-stack-8 {
  margin-block-end: 0.5rem;
}

.ma-stack-24 {
  margin-block-end: 1.5rem;
}

.ma-stack-32 {
  margin-block-end: 2rem;
}

.ma-inset-square {
  --inset-size: 1rem;
  padding: var(--inset-size);
}

.ma-inset-square-8 {
  padding: 0.5rem;
}

.ma-inset-block {
  --inset-size: 1rem;
  padding-block: var(--inset-size);
}

.ma-margin-auto {
  margin-inline: auto;
}

@media (width >= 700px) {
  .ma-float-right {
    --gutter: 1rem;
    float: right;
    margin-inline-start: var(--gutter);
    width: 50%;
  }
  .ma-float-left {
    --gutter: 1rem;
    float: left;
    margin-inline-end: var(--gutter);
    width: 50%;
  }
}
.ma-old-timey {
  position: relative;
}
.ma-old-timey img {
  filter: sepia(0.85);
}

.ma-old-timey::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 150px rgb(0, 0, 0);
}

.ma-thumbnail {
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.ma-trim-start {
  text-box-edge: ex alphabetic;
  text-box-trim: trim-start;
  transform: translateY(3px);
}

.ma-border-bottom {
  border-block-end: 1px solid var(--color-border, light-dark(#DCDAD2, #3E3D3A));
}

.ma-photo {
  background-color: var(--color-surface-elevated, light-dark(#ECEAE3, #232220));
}
.ma-photo a {
  display: block;
  background-color: #000;
  padding: 0.5rem;
}
.ma-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (width < 700px) {
  .ma-center-on-small {
    text-align: center;
  }
  .ma-margin-auto-on-small {
    margin-inline: auto;
  }
  .ma-thumbnail {
    width: 100%;
  }
}
code[class*=language-],
pre[class*=language-],
style[style="display: block"] {
  font-family: "DM Mono", monospace;
  font-size: clamp(0.875rem, 0.3125vw + 0.8125rem, 1rem);
  color: #c5c8c6;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  direction: ltr;
  text-align: left;
  white-space: pre-wrap;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*=language-],
style[style="display: block"] {
  padding: 1em;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*=language-],
pre[class*=language-],
style[style="display: block"] {
  background: #141413;
}

/* Inline code */
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #7C7C7C;
}

.token.punctuation {
  color: #c5c8c6;
}

.namespace {
  opacity: 0.7;
}

.token.property,
.token.keyword,
.token.tag {
  color: #96CBFE;
}

.token.class-name {
  color: #FFFFB6;
  text-decoration: underline;
}

.token.boolean,
.token.constant {
  color: #99CC99;
}

.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.number {
  color: #FF73FD;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #A8FF60;
}

.token.variable {
  color: #C6C5FE;
}

.token.operator {
  color: #EDEDED;
}

.token.entity {
  color: #FFFFB6;
  cursor: help;
}

.token.url {
  color: #96CBFE;
}

.language-css .token.string,
.style .token.string {
  color: #87C38A;
}

.token.atrule,
.token.attr-value {
  color: #F9EE98;
}

.token.function {
  color: #DAD085;
}

.token.regex {
  color: #E9C062;
}

.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: 600;
}

.token.italic {
  font-style: italic;
}

lite-youtube {
  background-color: #000;
  position: relative;
  display: block;
  contain: content;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
  max-width: 720px;
}

lite-youtube::before {
  content: attr(data-title);
  display: block;
  position: absolute;
  top: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.54) 14%, rgba(0, 0, 0, 0.15) 54%, rgba(0, 0, 0, 0.05) 72%, rgba(0, 0, 0, 0) 94%);
  height: 99px;
  width: 100%;
  font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
  color: hsl(0, 0%, 93.33%);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  font-size: 18px;
  padding: 25px 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

lite-youtube:hover::before {
  color: white;
}

lite-youtube::after {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}

lite-youtube > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

lite-youtube > .lyt-playbtn {
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat center/68px 48px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
  position: absolute;
  cursor: pointer;
  z-index: 1;
  filter: grayscale(100%);
  transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
  border: 0;
}

lite-youtube:hover > .lyt-playbtn,
lite-youtube .lyt-playbtn:focus {
  filter: none;
}

lite-youtube.lyt-activated {
  cursor: unset;
}

lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lyt-playbtn {
  opacity: 0;
  pointer-events: none;
}

.ma-vimeo-embed {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #000;
  border-radius: 2px;
}
.ma-vimeo-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ma-flex-responsive lite-youtube,
.ma-flex-responsive .ma-vimeo-embed {
  flex-shrink: 0;
  width: 100%;
}

@media (width > 700px) {
  .ma-flex-responsive lite-youtube,
  .ma-flex-responsive .ma-vimeo-embed {
    width: 200px;
  }
}
.lyt-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}