/* --- Inter --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

:root{
  --md-text-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* True black/white */
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #000000;
  --md-default-fg-color--light: rgba(0,0,0,.78);
  --md-default-fg-color--lighter: rgba(0,0,0,.55);

  /* Links: black, understated */
  --md-typeset-a-color: #000000;
}

/* --- Make it feel like a page, not docs --- */
.md-sidebar--primary,
.md-sidebar--secondary { display: none; }

.md-header {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: none !important;
}

.md-tabs { display: none; }

.md-main__inner { margin-top: 2rem; }

.md-content__inner {
  max-width: 860px;      /* room for margin notes */
  margin: 0 auto;
}

/* Links look like print */
.md-typeset a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.md-typeset a:hover { opacity: 0.75; }

/* --- Landing page vibe --- */
.md-typeset h1 {
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}

/* --- Margin notes system --- */
.prose {
  max-width: 860px;
  margin: 0 auto;
}

.block {
  display: grid;
  grid-template-columns: 1fr 280px; /* main + margin */
  gap: 2rem;
  align-items: start;
  margin: 1.6rem 0;
}

.main { min-width: 0; }

.note {
  text-align: right;
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.75;
  color: rgba(0,0,0,.55);
  white-space: pre-line;

  /* “margin note” behavior */
  position: sticky;
  top: 6rem;
}

/* Mobile: stack notes below */
@media (max-width: 900px){
  .block { grid-template-columns: 1fr; }
  .note { text-align: left; position: static; }
}

/* Cover image */
.cover {
  width: 100%;
  height: auto;
  margin: 1rem 0 2rem 0;
  display: block;
}


/* Remove search bar */
.md-search {
  display: none !important;
}


.md-header__title {
  display: none !important;
}


.md-header__button.md-logo {
  display: none !important;
}


.md-footer-meta {
  display: none !important;
}


.md-header {
  border-bottom: none;
  box-shadow: none;
}

.md-content {
  max-width: none;
}

.md-content__inner {
  max-width: 800px !important;
}

/* Ensure every line behaves as a right-aligned block */
.md-typeset .mnote > *{
  text-align: right;
}

/* Link as its own line */
.md-typeset .mnote a{
  margin-top: 0.6rem;
  text-align: right;
  color: rgba(0,0,0,.55);          /* same gray */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md-typeset .mnote a:hover {
  color: rgba(0,0,0,.75);
}

.md-typeset .mnote{
  float: right;
  width: 280px;
  margin: 0.2rem 0 1rem 2rem;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  font-weight: 300;
  font-size: 0.77rem;
  line-height: 1.6;
  color: rgba(0,0,0,.55);

  white-space: nowrap;
}

.md-typeset .mnote > *{ text-align: right; }
.md-typeset .mnote a{ 
  margin-top: 0.6rem; 
  display: block; 
  font-size: 0.67rem;
}

.md-typeset .mnote div {
  letter-spacing: 0.01em;
}

/* 🔑 This forces the next content to start BELOW the note */
.md-typeset .mnote-clear{
  clear: right;
}


/* Language switch: same tone as margin notes */
.md-typeset .lang-switch {
  margin-bottom: 1.5rem;
  font-size: 0.67rem;
}

.md-typeset .lang-switch a {
  color: rgba(0,0,0,.55);          /* same gray */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md-typeset .lang-switch a:hover {
  color: rgba(0,0,0,.75);
}


.md-content__inner {
  padding-bottom: 6rem;   /* adjust to taste: 4–8rem */
}

.md-typeset img.img-small {
  display: block;
  width: auto !important;
  max-width: 90% !important;
  height: auto !important;
  margin: 2rem auto;
}

/* Mobile: add breathing room on the sides */
@media (max-width: 900px) {
  .md-content__inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 900px){

  /* Notes become normal blocks on mobile */
  .md-typeset .mnote{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 1.25rem 0 !important;
    padding: 0 !important;

    display: block !important;
    align-items: initial !important;

    white-space: normal !important;  /* allow wrapping */
    text-align: left !important;
  }

  /* Let long lines wrap nicely */
  .md-typeset .mnote > *{
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Link stays readable */
  .md-typeset .mnote a{
    text-align: right !important;
  }

  /* If you're using the clearer element */
  .md-typeset .mnote-clear{
    clear: both !important;
  }
}

@media (max-width: 900px){
  .md-typeset img.img-small {
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}


/* audio player – subtle, non-dominant */
audio {
  width: 100%;
  max-width: 520px;
  margin: 1.5rem 0 2rem 0;
  opacity: 0.85;
}

audio:hover {
  opacity: 1;
}

/* WebKit (Chrome, Safari) tweaks */
audio::-webkit-media-controls-panel {
  background-color: #f6f6f6;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-volume-slider {
  filter: grayscale(100%);
}

/* optional: reduce visual weight */
audio::-webkit-media-controls-timeline {
  height: 2px;
}


.audio-wrapper {
  margin-top: 1rem;
}