:root {
  --font-size-base: 16px;
  --line-height-base: 1.5rem;

  --gap: 1rem;

  --outline-width: 2px;

  --container-width: 34rem;
  --col-width: 16rem;

  --full-width: calc(var(--col-width) * 2 + var(--container-width));
  --post-width: calc(var(--col-width) + var(--container-width));
  --sides: calc(var(--col-width) * 4 + var(--container-width) + 2rem);

  --z-index-menu: 1000;
}

@media (min-width: 768px) {
  :root {
    --font-size-base: 18px;
    --gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-base: 20px;
    --gap: 1.5rem;
  }
}


* {
  box-sizing: border-box;
}
figure {
  margin: 0;
}


h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-weight: 400;
}

mark {
  background-color: #fff9c0;
}


.grid {
  --cols: 1;
  --home-gap: 1.5rem;

  display: grid;
  gap: var(--home-gap);
  grid-template-columns: repeat(var(--cols), 1fr);

  margin: 3rem 0;
}

.grid > * {
  grid-template-rows: 1fr auto;
  margin-bottom: 1rem;
  break-inside: avoid;
}

@media (min-width: 768px) {
  .grid--2 {
    --cols: 2;
  }
  .grid--3 {
    --cols: 3;
  }
}

.grid__line {
  grid-column: 1 / span var(--cols);
  margin: 0;
}

a {
  vertical-align: baseline;
  text-decoration: underline var(--theme-secondary);
  color: var(--theme-accent);
}
a:hover,
a:focus {
  color: var(--theme-secondary);
}


.input {
  font-size: inherit;
  font-family: inherit;
  background-color: inherit;
  color: inherit;
  border: 0;
  outline: 2px solid var(--theme-border);
  padding-left: .5em;
  padding-right: .5em;
}
[contenteditable] {
	outline: var(--outline-width) solid var(--theme-text);
}

.button {
  padding-left: .5em;
  padding-right: .5em;
  border: 0;
  font-size: inherit;
  vertical-align: bottom;
  outline-width: var(--outline-width);
  outline-style: solid;
  outline-color: var(--theme-border);
}

.avatar {
  display: inline-block;
  vertical-align: middle;
}
.avatar--circle {
  border-radius: 50%;
}

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.screen-reader-only:focus {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
}


.nav {
  display: block;
  margin: 0 calc(var(--gap) * -0.5);
}
.nav__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--outline-width);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__item {
  display: inline-flex;
  position: relative;
}
.nav__link {
  width: 100%;
  padding: .5rem calc(var(--gap) * 0.5);
  text-decoration: none;
}
.nav__link:hover,
.nav__link:focus {
  transition: all .2s ease-out;
  outline-width: var(--outline-width);
  outline-style: solid;
  outline-color: var(--theme-accent);
}
.nav__link:hover .nav__text,
.nav__link:focus .nav__text {
  color: var(--theme-secondary);
}
.nav__text {
  display: block;
  text-decoration: underline var(--theme-secondary);
  color: var(--theme-accent);
  white-space: nowrap;
}
.nav__excerpt {
  display: block;
  margin-top: 0.2em;
  font-size: .75em;
  color: var(--theme-secondary);
}

.nav__link--active,
.nav__item--submenu.nav__item--active {
  outline-width: var(--outline-width);
  outline-style: dashed;
  outline-color: var(--theme-accent);
}

.nav__item--submenu {
  position: relative;
}

.nav__item--submenu > ul {
  position: absolute;
  left: calc(var(--outline-width) * -1);
  top: calc(100% + var(--outline-width));
  z-index: var(--z-index-menu);
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  opacity: 0;
  transition: opacity .2s ease-in;
  pointer-events: none;
  background-color: var(--theme-background);
  border: var(--outline-width) solid var(--theme-background-shadowed);
}
.nav__item--submenu > ul:before {
  content: '';
  position: absolute;
  top: calc(var(--outline-width) * -2);
  left: 0;
  width: 100%;
  height: var(--outline-width);
}

.nav__item--submenu:hover > ul,
.nav__item--submenu:focus > ul,
.nav__item--submenu:focus-within > ul {
  opacity: 1;
  pointer-events: all;
}

.form {
  display: inline-flex;
  flex-wrap: wrap;
}
.form__control {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.card {
  display: grid;
}
.card__body {
  padding: 0 1rem;
}
.card__title {
  margin-bottom: 0.25rem;
}
.card__date {
  font-size: 0.75rem;
  word-spacing: -0.5px;
}
.card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  outline-width: var(--outline-width);
  outline-style: solid;
  outline-color: var(--theme-text);
}
.card__preview {
  position: relative;
  order: -1;
  padding-top: calc( 1 / 2 * 100% );
}
.card__preview :is(img, svg) {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: cover;
  object-position: top;
  text-align: center;
}


.document {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: var(--font-size-base);
  /* line-height: var(--line-height-base);
  font-size: #{'min(max(22px, 4vw), 30px)'};
  font-size: clamp(22px, 4vw, 30px); */
  color: var(--theme-text);
  background-color: var(--theme-background);
  scroll-behavior: smooth;
}

:focus {
  outline-width: var(--outline-width);
  outline-style: solid;
  outline-color: var(--theme-accent);
  outline-offset: 0;
}

.layout {
  display: grid;
  min-height: 100%;
  grid-template-rows: auto 1fr auto;
}
.layout__header,
.layout__footer {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--full-width);
}
.layout__header {
  margin-bottom: 1.5rem;
}
.layout__footer {
  grid-row-start: 3;
  grid-row-end: 4;
}

.page {
  display: grid;
  /* gap: 0 var(--gap); */
  grid-template: var(--grid-ascii-page);
  grid-template-columns: var(--grid-columns-page);
  grid-template-rows: min-content;
  grid-auto-rows: min-content;

  word-break: break-word;
  word-wrap: break-word;
}

.page__header,
.page__footer,
.page__summary,
.page__nav,
.page__content > * {
  grid-column: content;
  padding-left: var(--gap);
  padding-right: var(--gap);
}

.page__header {
  grid-area: header;
  margin-bottom: 1rem;
}

.page__summary {
  grid-area: summary;
  margin-bottom: 1rem;
  font-size: 2em;
  font-family: Georgia, serif;
  font-weight: 400;
}

.page__title {
  font-size: 3em;
}

.page__header .avatar {
  width: 20px;
  height: 20px;
}

.page .note {
  grid-column: nav;
  z-index: 2;
}
.page .note.note--tall {
  grid-row-start: 2 span;
}
.page .note.note--center {
  align-self: center;
}

.page :is(img, svg) {
  max-width: 100%;
  height: auto;
}

.page :is(audio, video) {
  width: 100%;
}

.page ul {
  margin-top: 0;
}
p + ol,
p + ul {
  margin-top: -1em;
  list-style: inside;
}

.page__footer {
  grid-column: footer;
  align-self: end;
}


.header {
  padding: 0.5em var(--gap);
}
.header__start,
.header__end {
  display: inline-flex;
  margin-bottom: calc(var(--outline-width) * 2);
}
.header__start {
  padding-right: 2em;
}
@media (min-width: 768px) {
  .header {
    display: flex;
  }
  .header__end {
    margin-left: auto;
  }
}

.footer {
  display: grid;
  grid-auto-flow: column;
  padding: 0 var(--gap);
}
/* .footer__copyright {}
.footer__links {} */
.footer__help {
  margin-left: auto;
}


@media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
  .document {
    --theme-background: #f7f6ee;
    --theme-background-shadowed: #e0e0e0;
    --theme-border: #e0e0e0;
    --theme-background-invert: #333;
    --theme-text: #544;
    --theme-primary: #333;
    --theme-secondary: #333;
    --theme-accent: #d62e00;
  }
}
@media (prefers-color-scheme: dark) {
  .document {
    --theme-background: #333;
    --theme-background-shadowed: #222;
    --theme-border: #c0c0c0;
    --theme-background-invert: #f4f4f4;
    --theme-text: #e0e0e0;
    --theme-primary: #f4f4f4;
    --theme-secondary: #f4f4f4;
    --theme-accent: #ff7315;
  }
}