@font-face {
  font-family: "Monsie";
  src: url("fonts/Monsie-Demo-Outline.woff2") format(woff2);
  font-weight: 400;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMonoVariableVF.woff2") format(woff2);
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGrotesk-Roman.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05", "ss09";
  font-weight: 400;
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGroteskRoman-Light.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05", "ss09";
  font-weight: 300;
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGrotesk-Medium.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05";
  font-weight: 500;
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGrotesk-Bold.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05";
  font-weight: 600;
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGrotesk-ExtraBold.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05";
  font-weight: 700;
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGrotesk-Medium.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05";
  font-weight: 500;
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGrotesk-BookItalic.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05";
  font-weight: 350;
  font-style: italic;
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGrotesk-Italic.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05";
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGrotesk-Bold.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05";
  font-weight: 600;
}

@font-face {
  font-family: "OV";
  src: url("fonts/OverusedGrotesk-BoldItalic.woff2") format(woff2);
  font-feature-settings: "cv05", "ss05";
  font-weight: 600;
  font-style: italic;
}


:root {
  --font-head: "Monsie";
  --font-body: "OV";
  --font-mono: "Geist Mono";
  --page-background: white;
  --page-text: #111;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {font-size: 100%;}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  margin: 0 auto;
  max-width: 94%;
  padding: 2rem;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: subpixel-antialiased;
  background: var(--page-background);
  color: var(--page-text);
  line-height: 1.4;
}

h1, h2, h3, h4, h5, h6 {text-wrap: balance;
  font-weight: inherit;}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;}
p {text-wrap: pretty;}

img,
picture {
  max-width: 100%;
  display: block;
}

b, strong {font-weight: 600;}
hr {margin-block: 1rem;}

header {container-type: inline-size; padding-bottom: .75rem;}

header #site-title {
  font-family: var(--font-head);
  font-size: 7.5625rem;
  margin: 0;
  line-height: .55;
  letter-spacing: -6px;
}

header #site-title a {
  text-decoration: none;
  color: inherit;
}

header #site-title a:visited {
  color: inherit;
}

header p {margin: 0;}
header p, main, #post {margin-left: 1em;}
nav {margin-left: 1ex; text-transform: uppercase; font-size: .9rem; padding-top: .2rem;}
nav a {font-weight: 600; text-decoration: none;}
#buddies {display: flex;}

.meta, article .post-header #tags {font-size: .9rem; font-family: var(--font-mono);}
.meta {margin-bottom: .25em;}

article {
  max-width: 42em;
  margin-bottom: 2.5em;
}

article h1 {font-size: 1.8125rem; font-weight: 610; text-transform: uppercase;}
article h2 > a {color: inherit; font-size: 1.3125rem;}
article p {line-height: 1.8; margin: 0;}
article p+p {text-indent: 1rem;}
article p.quote-from+p {text-indent: 0;}
article blockquote p {font-size: 95%; line-height: 1.5;}
#post {margin-top: .63rem;}
article .post-header {margin-bottom: 1rem;}
article .post-header h1 {margin: 0;}
article .post-header .meta, article .post-header #tags {padding-left: .5em;}

.quote-from {
    margin: 0 0 1.5em 40px;
    padding: 0 40px 0.25em 1.3em;
    line-height: 1.45;
    position: relative;
}

.quote-from:before {
    display: block;
    padding-left: 0;
    content: "\2014";
    position: absolute;
    left: 0;
}

.permalink {float: right;}

.ext_link {color: blue;}

@media screen and (width < 600px) {
  body {
/*     font-size: 1rem; */
    padding: 0;
  }
  header #site-title {
    margin-top: .25em;
  }
  article {max-width: 100%;}
  article h1 {font-size: 1.5rem;}
  article blockquote {margin-inline: 1rem;}
  #buddies {flex-direction: column;}
  #buddies nav {margin-left: 2ex;}
}

@container (width < 550px) {
  header #site-title {
  font-size: clamp(5rem, 28vw, 7.5625rem);
  }
}

@media print {
  @page {
    size: letter landscape;   /* short-edge = landscape */
    margin: 0.5in;
  }

  body {
    background: #fff;
    color: #000;
    font-family: "Geist Mono";
    font-size: 12pt;
    line-height: 1.35;
    column-count: 1; /* the PAGE is single-column — posts handle their own layout */
  }

  nav, .sidebar, .no-print, footer nav {
    display: none !important;
  }

  /* --- Masthead: full width, doesn't get columned --- */
  .archive-header, h1.page-title {
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 0.3em;
    margin-bottom: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* --- Each post is its own little multi-column block --- */
  article, .entry, .day {
    column-count: 2;
    column-gap: 1.5em;
    column-rule: 1px dashed #999;
    break-inside: avoid;      /* try to keep a whole post together */
    break-after: page;        /* next post = next panel/page. change to `avoid` if you want posts to flow onto the same page */
    padding-bottom: 0.5em;
  }

  /* if a post is genuinely too long to avoid breaking, at least don't break headings away from their body */
  article h2, article h3, article h4,
  .entry h2, .entry h3, .entry h4 {
    break-after: avoid;
    column-span: none;
  }

  /* post title spans both internal columns like a little masthead-within-a-masthead */
  article > h2:first-child, .entry > h2:first-child, .day > h2:first-child {
    column-span: all;
    font-size: 1.1em;
    border-bottom: 1px solid #000;
    margin-bottom: 0.4em;
  }

  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after {
    content: " [" attr(href) "]";
    font-size: 0.75em;
    color: #444;
  }

  /* light "zine" texture: a rule + a page number ghost */
  .day::after {
    content: "";
    display: block;
    margin-top: 0.5em;
  }
}