/*
Theme Name: Illiterati
Theme URI: https://illiterati.com/
Author: Illiterati
Description: A lean block theme for a literary review of uncommon persistence.
Version: 0.8.4
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: illiterati
*/

@font-face {
  font-family: "Roboto Mono";
  src: url("assets/fonts/roboto-mono-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("assets/fonts/roboto-mono-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --ill-ink: #332a25;
  --ill-paper: #fff;
  --ill-wine: #cc3300;
  --ill-muted: #756d63;
  --ill-rule: #b9b1a6;
  --ill-night: #26221e;
  --ill-canvas-width: 866px;
  --ill-content-width: 640px;
  --ill-page-gutter: clamp(18px, 4vw, 36px);
  --ill-background-width: 800px;
  --ill-nav-scribble-width: 160px;
  --ill-mono: "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;
  --ill-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--ill-paper);
  background-image: url("assets/bg_800x600.gif");
  background-position: left top;
  background-repeat: repeat-y;
  background-size: var(--ill-background-width) auto;
  color: var(--ill-ink);
}

.ill-header {
  width: min(100%, calc(var(--ill-canvas-width) + (2 * var(--ill-page-gutter))));
  margin: auto;
  padding: clamp(48px, 6vw, 66px) var(--ill-page-gutter) 0;
}

.ill-nav-row {
  width: 100%;
  max-width: var(--ill-canvas-width) !important;
  margin-top: clamp(36px, 4vw, 46px);
  gap: 18px;
}

.ill-nav-scribble-wrap {
  display: block;
  flex: 0 0 var(--ill-nav-scribble-width);
  width: var(--ill-nav-scribble-width);
  max-width: var(--ill-nav-scribble-width);
  line-height: 0;
}

.ill-scribble--navigation {
  display: block;
  width: 100%;
  height: 18px;
  object-fit: contain;
  object-position: center;
}

.ill-scribble--navigation.ill-scribble--fallback {
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 20px;
}

.ill-scribble--navigation.ill-scribble--left.ill-scribble--fallback {
  background-image: url("assets/scribble-nav-left.png");
}

.ill-scribble--navigation.ill-scribble--right.ill-scribble--fallback {
  background-image: url("assets/scribble-nav-left.png");
}

.ill-primary-nav,
.ill-footer-nav {
  font: 400 12px/1.2 var(--ill-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.ill-primary-nav { flex: 0 0 auto; }

.ill-primary-nav .wp-block-navigation__container {
  gap: 0;
  flex-wrap: nowrap;
}

.ill-primary-nav .wp-block-navigation-item {
  white-space: nowrap;
}

.ill-primary-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
  content: "·";
  display: inline-block;
  margin: 0 17px;
  color: var(--ill-wine);
  font-weight: 700;
}

.ill-primary-nav a,
.ill-footer-nav a {
  color: var(--ill-ink);
  text-decoration: none;
  text-underline-offset: 3px;
}

.ill-primary-nav a:hover,
.ill-primary-nav a:focus,
.ill-footer-nav a:hover,
.ill-footer-nav a:focus {
  color: var(--ill-wine);
  text-decoration: underline;
}

main.wp-block-group {
  width: min(100%, calc(var(--ill-canvas-width) + (2 * var(--ill-page-gutter))));
  margin: auto;
  padding: clamp(64px, 7vw, 82px) var(--ill-page-gutter) 96px;
}

.wp-block-query .wp-block-post-template {
  display: block;
}

.wp-block-query {
  width: 100%;
  max-width: var(--ill-canvas-width) !important;
}

.wp-block-post {
  display: grid;
  grid-template-columns: minmax(180px, 238px) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto;
  column-gap: 30px;
  align-items: start;
  padding: 0;
  margin: 0;
}

.wp-block-post > .wp-block-post-terms {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 12px;
}

.wp-block-post > .wp-block-post-title {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 10px;
  color: var(--ill-wine);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  letter-spacing: -.02em;
  line-height: 1.05;
}

.wp-block-post:first-child > .wp-block-post-title {
  font-size: clamp(1.55rem, 2.6vw, 1.9rem);
}

.wp-block-post > .wp-block-group {
  grid-column: 2;
  grid-row: 3;
  margin: 0 0 20px;
  gap: 10px;
}

.wp-block-post > .wp-block-post-featured-image {
  grid-column: 1;
  grid-row: 1 / 5;
  margin: 0;
}

.wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.9) contrast(.97);
}

.wp-block-post > .wp-block-post-excerpt {
  grid-column: 2;
  grid-row: 4;
  margin: 0;
}

.wp-block-post > .ill-post-separator,
.wp-block-post > .wp-block-shortcode:last-child,
.wp-block-post > p:has(> .ill-scribble--separator) {
  grid-column: 1 / -1;
  grid-row: 5;
}

.wp-block-post:not(:has(> .wp-block-post-featured-image)) {
  grid-template-columns: minmax(0, 1fr);
}

.wp-block-post:not(:has(> .wp-block-post-featured-image)) > .wp-block-post-terms,
.wp-block-post:not(:has(> .wp-block-post-featured-image)) > .wp-block-post-title,
.wp-block-post:not(:has(> .wp-block-post-featured-image)) > .wp-block-group,
.wp-block-post:not(:has(> .wp-block-post-featured-image)) > .wp-block-post-excerpt {
  grid-column: 1;
  width: min(100%, var(--ill-content-width));
  margin-left: auto;
  margin-right: auto;
}

.wp-block-post-title { letter-spacing: -.035em; line-height: .98; }

.wp-block-post-author-name,
.wp-block-post-date,
.wp-block-post-terms {
  font: 400 10px/1.35 var(--ill-mono);
  letter-spacing: 0;
}

.wp-block-post-terms { text-transform: uppercase; text-decoration: underline; text-underline-offset: 2px; }
.wp-block-post-author-name::after { content: " |"; color: var(--ill-muted); }

.wp-block-post-excerpt__excerpt,
.entry-content { line-height: 1.55; }

.wp-block-post-excerpt__more-link,
.ill-text-link {
  color: var(--ill-wine);
  font: 700 9px/1.2 var(--ill-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.wp-block-post-excerpt__more-link {
  display: inline-block;
  margin-top: 14px;
}

.ill-post-separator,
.wp-block-post > .wp-block-shortcode:last-child,
.wp-block-post > p:has(> .ill-scribble--separator) {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 44px 0 50px;
  line-height: 0;
}

.ill-scribble--separator {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 110px;
  height: 18px;
  object-fit: contain;
}

.ill-scribble--separator.ill-scribble--fallback {
  width: 96px;
  height: 16px;
  background: url("assets/scribble-separator.png") center / contain no-repeat;
}

.entry-content {
  max-width: var(--ill-content-width);
  margin-inline: auto;
  line-height: 1.75;
}

.entry-content > p:first-of-type:first-letter {
  float: left;
  font-size: 5rem;
  line-height: .75;
  padding: .12em .1em 0 0;
  color: var(--ill-wine);
}

.ill-single > .wp-block-post-title,
.ill-single > .ill-byline,
.ill-single > .wp-block-post-terms {
  max-width: 760px;
  margin-inline: auto;
}

.ill-single > .wp-block-post-title { color: var(--ill-wine); }

.ill-end-matter {
  max-width: var(--ill-content-width);
  margin: clamp(56px, 8vw, 88px) auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--ill-ink);
}

.ill-author-note { margin-bottom: 24px; }
.ill-author-note .wp-block-post-author-name { margin-bottom: 8px; }
.ill-author-note .wp-block-post-author-biography { color: var(--ill-muted); font-size: .92rem; }
.ill-post-navigation { margin-top: 28px; padding-top: 15px; border-top: 1px solid var(--ill-rule); font-size: .84rem; }

.ill-authors-directory { border-top: 1px solid var(--ill-rule); }
.ill-author-card { display: grid; grid-template-columns: 150px 1fr; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--ill-rule); align-items: center; }
.ill-author-avatar img { display: block; width: 150px; height: 120px; object-fit: cover; filter: grayscale(1) sepia(.18); }
.ill-author-copy h2 { margin: 0 0 .7rem; font-size: 2rem; }
.ill-author-copy h2 a { text-decoration: none; }
.ill-author-copy p { max-width: 680px; color: var(--ill-muted); }

.ill-footer {
  width: min(100%, calc(var(--ill-canvas-width) + (2 * var(--ill-page-gutter))));
  margin: auto;
  border-top: 1px solid var(--ill-ink);
  padding: 24px var(--ill-page-gutter) 34px;
  color: var(--ill-muted);
  font-size: .8rem;
}

@media (max-width: 700px) {
  body { background-size: min(800px, 100vw) auto; }
  .ill-header { padding-top: 30px; }
  .ill-nav-row { justify-content: flex-end; margin-top: 24px; min-height: 30px; }
  .ill-nav-scribble-wrap { display: none; }
  .ill-primary-nav { width: 100%; display: flex; justify-content: flex-end; }
  .ill-primary-nav .wp-block-navigation__responsive-container-open {
    padding: 6px 0;
    color: var(--ill-ink);
  }
  .ill-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(255,255,255,.98);
    color: var(--ill-ink);
    padding: 28px;
  }
  .ill-primary-nav .wp-block-navigation__responsive-container-content {
    font-size: 14px;
  }
  .ill-primary-nav .wp-block-navigation-item + .wp-block-navigation-item::before { display: none; }
  main.wp-block-group { padding-top: 44px; }
  .wp-block-post {
    display: block;
  }
  .wp-block-post > .wp-block-post-featured-image { margin: 18px 0; }
  .wp-block-post > .wp-block-post-terms { margin-bottom: 10px; }
  .wp-block-post > .wp-block-group { margin-bottom: 16px; }
  .ill-post-separator,
  .wp-block-post > .wp-block-shortcode:last-child,
  .wp-block-post > p:has(> .ill-scribble--separator) { min-height: 0; padding: 32px 0 38px; }
  .ill-author-card { grid-template-columns: 86px 1fr; }
  .ill-author-avatar img { width: 86px; height: 86px; }
  .ill-author-copy h2 { font-size: 1.45rem; }
  .ill-footer { display: block; }
  .ill-footer-nav { margin-top: 18px; }
}

/* 0.8 homepage: one wide lead followed by a strict image-and-copy feed. */
.ill-feature-query,
.ill-feed-query { width: 100%; max-width: var(--ill-canvas-width) !important; }
.ill-feature-query { margin-bottom: clamp(52px, 7vw, 76px); padding-bottom: clamp(42px, 6vw, 60px); border-bottom: 1px solid var(--ill-wine); }
.ill-feature-query .wp-block-post { display: grid; grid-template-columns: 1fr; }
.ill-feature-query .wp-block-post > * { grid-column: 1; width: 100%; }
.ill-feature-query .wp-block-post-featured-image { grid-row: 1; margin: 0 0 26px; }
.ill-feature-query .wp-block-post-featured-image img { width: 100%; height: auto; aspect-ratio: 866 / 430; object-fit: cover; }
.ill-feature-query .wp-block-post-terms { grid-row: 2; margin: 0 0 11px; }
.ill-feature-query .wp-block-post-title { max-width: 760px; margin: 0 0 10px; color: var(--ill-wine); font-size: clamp(2rem, 4.6vw, 3.45rem); line-height: .96; }
.ill-feature-query .wp-block-post-title { grid-row: 3; }
.ill-feature-query .wp-block-post > .wp-block-group { grid-row: 4; margin: 0 0 18px; }
.ill-feature-query .wp-block-post-excerpt { grid-row: 5; max-width: var(--ill-canvas-width); margin: 0; }

.wp-block-post-excerpt__more-link,
.ill-text-link { font-family: var(--ill-mono) !important; }

.ill-feed-query .wp-block-post,
.ill-feed-query .wp-block-post:not(:has(> .wp-block-post-featured-image)) { grid-template-columns: 238px minmax(0, 1fr); }
.ill-feed-query .wp-block-post > .wp-block-post-featured-image,
.ill-feed-query .wp-block-post > .ill-post-artifact { grid-column: 1; grid-row: 1 / 5; width: 238px; margin: 0; }
.ill-feed-query .wp-block-post-featured-image img,
.ill-feed-query .ill-post-artifact img,
.ill-feed-query .ill-post-artifact--fallback { display: block; width: 238px; height: 300px; object-fit: cover; }
.ill-feed-query .ill-post-artifact { margin: 0; }
.ill-feed-query .ill-post-artifact--fallback { border: 1px solid rgba(51,42,37,.12); background: rgba(255,255,255,.3) url("assets/illiterati-fragments.png") center / cover no-repeat; filter: grayscale(1) sepia(.15); }
.ill-feed-query .wp-block-post > .wp-block-post-terms,
.ill-feed-query .wp-block-post > .wp-block-post-title,
.ill-feed-query .wp-block-post > .wp-block-group,
.ill-feed-query .wp-block-post > .wp-block-post-excerpt { grid-column: 2; width: 100%; margin-left: 0; margin-right: 0; }

@media (max-width: 700px) {
  .ill-feature-query .wp-block-post-featured-image img { aspect-ratio: 4 / 3; }
  .ill-feature-query .wp-block-post-title { font-size: clamp(1.8rem, 9vw, 2.7rem); }
  .ill-feed-query .wp-block-post { display: block; }
  .ill-feed-query .wp-block-post > .wp-block-post-featured-image,
  .ill-feed-query .wp-block-post > .ill-post-artifact { width: 100%; margin: 18px 0 22px; }
  .ill-feed-query .wp-block-post-featured-image img,
  .ill-feed-query .ill-post-artifact img,
  .ill-feed-query .ill-post-artifact--fallback { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}