/* =============================================================================
   midcenturymodern — web translation of the beamer theme of the same name
   (https://github.com/jules-leguy — projets/2603_midcenturymodern)

   Kraft colourway. Loaded after style.min.css, which it overrides; the theme's
   own rules are left untouched so the vendored Flex files stay diffable.

   Fonts: Space Grotesk (titles), Lato (body) — requested in base.html.
   ========================================================================== */

/* ============================================================================
   midcenturymodern — web translation of the beamer theme
   ========================================================================== */
:root {
  --mcm-primary: #9c4732;
  --mcm-dark:    #7d3928;
  --mcm-fg:      #dec5a6;
  --mcm-accent:  #e8d5b5;
  --mcm-bg:      #f8f6f2;   /* mcmBg   */
  --mcm-ink:     #1a1a1a;   /* mcmBlack */
}

/* ---- page ---------------------------------------------------------------- */
body {
  background-color: var(--mcm-bg);
  color: var(--mcm-ink);
  font-family: Lato, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.45em;
}
a       { color: var(--mcm-primary); }
a:hover { color: var(--mcm-dark); text-decoration: underline; }

/* ---- side panel = the coloured frame-title band --------------------------- */
aside {
  background-color: var(--mcm-primary);
  border-right: 4px solid color-mix(in srgb, var(--mcm-primary) 45%, var(--mcm-bg));
}
aside, aside a       { color: var(--mcm-fg); }
aside a:hover        { color: var(--mcm-accent); text-decoration: none; }
/* the name stays exactly as it is today */
aside div h1, aside div h1 a {
  font-family: "Source Sans Pro", Roboto, "Open Sans", "Liberation Sans",
               "DejaVu Sans", Verdana, Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
}
aside div img { border: 3px solid color-mix(in srgb, var(--mcm-fg) 65%, transparent); }
/* menu separator: scan lines, as on the title page footer strip */
hr.side {
  height: 7px; border: none; background-color: transparent;
  background-image: repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--mcm-fg) 45%, transparent) 0 1px, transparent 1px 3px);
  margin: 14px auto; width: 60%;
}

/* ---- headings ------------------------------------------------------------ */
main article h1, main article h2, main article h3, main article h4,
main article h5, main article h6 {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

main article h2 {
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .005em; word-spacing: .16em; line-height: 1.1;
  font-size: 1.85em;
  color: var(--mcm-primary); background-color: transparent;
  border-bottom: 3px solid var(--mcm-primary);
  padding: 0 0 .12em; margin: .85em 0 1em;
}

main article h3 {
  font-size: 1.62em; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  color: var(--mcm-primary);
  margin-top: 1.5em; margin-bottom: .5em;
}
/* the pip that precedes every block title in the beamer theme */
main article h3::before {
  content: ""; display: inline-block;
  width: 5px; height: .74em; margin-right: .5em;
  background-color: var(--mcm-primary);
  vertical-align: -.02em;
}
main article h4 {
  font-size: 1.0em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--mcm-primary) 70%, var(--mcm-bg));
  margin-top: 1.7em; margin-bottom: .45em;
}
main article h5 {
  font-size: 1.16em; font-weight: 600; color: var(--mcm-ink);
  margin-top: 1.5em; margin-bottom: .1em;
}
main article h6 {
  font-size: .97em; font-weight: 400; color: #6c757d;
  margin-top: 0; margin-bottom: .15em;
}
main article h3 + h4, main article h4 + h5 { margin-top: .9em; }

/* ---- separators = the title page scan lines ------------------------------ */
main article hr {
  height: 11px; border: none; background-color: transparent;
  background-image: repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--mcm-primary) 55%, var(--mcm-bg)) 0 1px, transparent 1px 5px);
  margin: 2.4em 0 1.8em;
}

/* ---- blocks: citations, quotes ------------------------------------------- */
main article .citation {
  margin: .35em 0 1em; padding: .55em .85em;
  background-color: color-mix(in srgb, var(--mcm-primary) 5%, var(--mcm-bg));
  border-left: 3px solid var(--mcm-primary);
  font-size: .96em;
}
main article blockquote {
  background-color: color-mix(in srgb, var(--mcm-primary) 5%, var(--mcm-bg));
  border-left: 3px solid var(--mcm-primary);
  border-radius: 0; font-weight: 400;
}

/* ---- geometric bullets --------------------------------------------------- */
main article ul:not(.list):not(.related-posts):not(.social) { list-style: none; padding-left: 1.4em; }
main article ul:not(.list):not(.related-posts):not(.social) > li { position: relative; }
main article ul:not(.list):not(.related-posts):not(.social) > li::before {
  content: ""; position: absolute; left: -1.15em; top: .5em;
  width: .46em; height: .46em; border-radius: 50%;
  border: 1px solid var(--mcm-primary);
  background-image: radial-gradient(circle, var(--mcm-primary) 0 28%, transparent 30%);
}

/* ---- chrome -------------------------------------------------------------- */
main nav { border-bottom: 1px solid color-mix(in srgb, var(--mcm-primary) 25%, var(--mcm-bg)); }
main footer { border-top: 1px solid color-mix(in srgb, var(--mcm-primary) 25%, var(--mcm-bg)); }
a.btn, .tag-cloud a { background-color: var(--mcm-primary); border-radius: 0; }
a.btn:hover, .tag-cloud a:hover { background-color: var(--mcm-dark); }
main article :not(pre) > code {
  background-color: color-mix(in srgb, var(--mcm-primary) 6%, var(--mcm-bg));
  border-color: color-mix(in srgb, var(--mcm-primary) 20%, var(--mcm-bg));
  color: var(--mcm-dark); border-radius: 0;
}
main article blockquote, main article pre { border-top-right-radius: 0; border-bottom-right-radius: 0; }

aside div h1, aside div h1 a {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
aside div h1 { font-size: 1.75em; line-height: 1.15; }

hr.side {
  height: 7px; width: 72%; margin: 18px auto; border: none;
  background-color: transparent;
  background-image:
    linear-gradient(color-mix(in srgb, var(--mcm-fg) 40%, transparent) 0 0),
    linear-gradient(var(--mcm-accent) 0 0);
  background-size: 100% 1px, 7px 7px;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
}

aside div nav ul.list li a {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: .84em;
  text-transform: uppercase; letter-spacing: .13em;
  color: color-mix(in srgb, #f8f6f2 88%, var(--mcm-primary));
}
aside div nav ul.list li a:hover { color: var(--mcm-accent); }

aside { border-right: 7px solid color-mix(in srgb, var(--mcm-primary) 45%, var(--mcm-bg)); }

main article p:has(+ div.citation) {
  margin: 1.2em 0 0;
  padding: .6em .9em .1em;
  background-color: color-mix(in srgb, var(--mcm-primary) 5%, var(--mcm-bg));
  font-weight: 600;
}
main article p:has(+ div.citation) br:last-child { display: none; }
main article p:has(+ div.citation) + div.citation {
  margin: 0 0 1.2em;
  padding: .15em .9em .65em;
  border-left: none;
}
main article div.citation { padding-left: .9em; }

aside div ul.list { padding: .6em 0; }
aside div nav ul.list li { padding: 5px 0 !important; }
aside ul.social a[class] {
  background-color: transparent;
  color: var(--mcm-fg);
  border: 1px solid color-mix(in srgb, var(--mcm-fg) 45%, transparent);
}
aside ul.social a[class]:hover {
  background-color: var(--mcm-accent);
  color: var(--mcm-primary);
  border-color: var(--mcm-accent);
}

main article .pubid {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
main article .pubid::before { content: "["; }
main article .pubid::after  { content: "]"; }

main article .pubid {
  float: right; margin-left: 1.2em; font-size: .82em; letter-spacing: .06em;
  color: color-mix(in srgb, var(--mcm-primary) 70%, var(--mcm-bg));
}
main article .pubid + br { display: none; }