/*
Theme Name: Scannerlicker
Theme URI: https://scannerlicker.net
Author: Scannerlicker
Author URI: https://scannerlicker.net
Description: Empty base theme for Scannerlicker.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scannerlicker
*/

@font-face {
  font-family: 'Ulular';
  src: url('assets/fonts/Ulular-Roman.woff2'), url('assets/fonts/Ulular-Roman.woff');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Ulular';
  src: url('assets/fonts/Ulular-Italic.woff2'), url('assets/fonts/Ulular-Italic.woff');
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: 'Sebenta';
  src: url('assets/fonts/Sebenta.otf');
  font-style: normal;
  font-weight: normal;
}

/* ----------- GENERAL ----------- */

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* COLORS */
  --color-ink: #231f20;
  --color-paper: #f5f5f5;
  --color-accent: #ff2600;
  --color-pale-paper: #f5f5f588;

  /* FONTS */
  --font-size--base: 22px;
  --font-size--3xs: .125rem;
  --font-size--2xs: .25rem;
  --font-size--xs: .5rem;
  --font-size--s: .75rem;
  --font-size--m: 1rem;
  --font-size--l: 1.5rem;
  --font-size--xl: 2rem;
  --font-size--2xl: 4rem;
}

body, html {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--font-size--base);
  font-family: 'Ulular', serif;
  position: relative;
}

/* Smooth anchor scrolling, with room for the fixed header. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 3rem;
}

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

h2 {
  font-size: var(--font-size--xl);
  font-weight: normal;
}

h3 {
  font-size: var(--font-size--l);
  font-weight: normal;
}

h4 {
  font-size: var(--font-size--m);
  font-weight: normal;

}

/* ----------- GENERAL ----------- */

nav {
  font-family: 'Sebenta', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  z-index: 900;
}

.header-logo {
  width: calc(100% / 3);
}

.header-logo a:link, .header-logo a:visited {
  display: inline-block;
  padding: var(--font-size--xs) var(--font-size--s);
  color: var(--color-accent);
  text-decoration: none;
}

.header-logo a:hover {
  color: var(--color-paper);
  background-color: var(--color-accent);
}

.header-menu {
  width: calc(100% / 3);
}

.header-menu a:link, .header-menu a:visited, .header-about a:link, .header-about a:visited {
  display: inline-block;
  padding: var(--font-size--xs) var(--font-size--s);
  background-color: var(--color-paper);
  color: var(--color-ink);
  text-decoration: none;
}

.header-menu a:hover, .header-about a:hover {
  background-color: var(--color-accent);
  color: var(--color-paper);
}

/** Current/active nav section */
.header-menu a.current {
  background-color: var(--color-accent);
  color: var(--color-paper);
}


.header-about {
  width: calc(100% / 3);
  text-align: center;
}

/* The menu and About sit in one panel so they can be shown or hidden together.
   On the bar it takes the two thirds they already occupied, so nothing moves. */
.header-panel {
  display: flex;
  width: calc(100% / 3 * 2);
}

.header-panel .header-menu,
.header-panel .header-about {
  width: 50%;
}

/* The hamburger exists only below the bar breakpoint. */
.header-toggle {
  display: none;
  flex: 0 0 auto;
  padding: var(--font-size--xs) var(--font-size--s);
  background-color: var(--color-paper);
  color: var(--color-ink);
  border: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.header-toggle:hover {
  background-color: var(--color-accent);
  color: var(--color-paper);
}

.header-toggle-bars,
.header-toggle-bars::before,
.header-toggle-bars::after {
  display: block;
  width: 1.2em;
  height: 2px;
  background-color: currentColor;
}

.header-toggle-bars {
  position: relative;
}

.header-toggle-bars::before,
.header-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.header-toggle-bars::before {
  top: -0.35em;
}

.header-toggle-bars::after {
  bottom: -0.35em;
}

/* Visually hidden text, for the toggle's label. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Below 1108px there is no room for the bar, so the header collapses to one row:
   the wordmark, and a hamburger that opens the four links as a stack below it.
   Keeping it one row tall is the point — it never overlaps the page. */
@media (max-width: 1108px) {
  .header-logo {
    width: auto;
    flex: 1 1 auto;
  }

  .header-toggle {
    display: block;
  }

  .header-panel {
    display: none;
  }

  nav.is-open .header-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  nav.is-open .header-panel .header-menu,
  nav.is-open .header-panel .header-about {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}

/* ----------- POST ----------- */

article {
  margin-bottom: 10rem;
}

.post-meta {
  width: calc(calc(100% / 3) * 2);
  margin: 0 auto;
  font-family: 'Urro', monospace;
  font-size: var(--font-size--s);
  line-height: 1.3em;
  margin-bottom: 2rem;
}

.post-meta a:link, .post-meta a:visited {
  text-decoration: none;
  color: var(--color-ink);
  display: inline-block;
  padding: var(--font-size--3xs) var(--font-size--2xs);
  border: 1px solid var(--color-ink);
  margin-right: .25rem;
  margin-bottom: .25rem;
  font-size: var(--font-size--xs);
  text-transform: uppercase;
  letter-spacing: .025rem;
}

.post-meta a:hover {
  color: var(--color-paper);
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent);
}

.meta-cats a:link, .meta-cats a:visited {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

/* The article's leading title (h1) shares the ghosted look with content h2.
   NOTE: this is coupled to the title being the first child of <article>. */
article h2, article > h1:first-child {
  margin: 0 1rem 0 calc(100% / 6);
  font-size: calc(100vw / 10);
  line-height: 1em;
  transform: translateY(-.1em);
  position: absolute;
  /* paint-order draws the stroke BEHIND the fill, so only the outer half of it
     shows: the paper ring sits outside the letterforms, between them and whatever
     sits behind the heading, instead of eating into the glyphs. Width is doubled
     accordingly - 4px gives the 2px ring that used to be drawn centred. */
  -webkit-text-stroke: 4px var(--color-paper);
  paint-order: stroke fill;
}

@media (max-width: 1000px) {
  article h2, article > h1:first-child {
    margin: 0 1rem;
  }
}

@media (orientation: portrait) {
  article h2, article > h1:first-child {
    font-size: calc(100vh / 10);
  }
}

article p {
  max-width: 65ch;
  margin: 0 auto 0 calc(100% / 3);
  line-height: 1.3em;
  text-indent: 2em;
  margin-right: 1rem;
}

@media (max-width: 1000px) {
  article p {
    margin: 0 1rem;
  }
}

article p em {
  font-style: italic;
}

article p a:link, article p a:visited, article ul a:link, article ul a:visited {
  text-decoration: none;
  color: var(--color-accent);
}

article p a:hover, article ul a:hover {
  color: var(--color-paper);
  background-color: var(--color-accent);
}

/* The first paragraph of a post is not indented. */
article > p:first-child {
  text-indent: 0;
}

/* The first paragraph directly after a heading is not indented. */
article :is(h1, h2, h3, h4, h5, h6) + p {
  text-indent: 0;
}

/* Footnote reference: raised glyph without disturbing leading. */
article sup.fn {
  vertical-align: baseline;
  position: relative;
  top: -0.75em;
  font-size: 0.625em;
  line-height: 0;
}

article h3, article h4, article h5, article h6 {
  margin: 0 1rem 0 calc(100% / 3);
  font-weight: 400 !important;
}

article h3 {
  padding: 2rem 0 1rem 0;
}

article h4 {
  padding: 1rem 0 0 0;
}

@media (max-width: 1000px) {
  article h3, article h4, article h5, article h6 {
    margin: 0 1rem;
  }
}

article ul {
  margin: 1rem 1rem 0 calc(100% / 3);
  padding-left: 4em;
  max-width: calc(65ch - 4em);
}

/* List markers: right-pointing arrow instead of the disc. */
article ul {
  list-style: none;
  margin-bottom: 1.2rem !important;
}
article ul li::before {
  content: "→";
  display: inline-block;
  width: 2em;
  margin-left: -2em;
  color: var(--color-accent);
}

article ul li {
  margin-bottom: 0.6rem;
}

/* Numbered lists: same layout as ul, numbers tinted in Urro. */
article ol {
  margin: 1rem 1rem 0 calc(100% / 3);
  padding-left: 4em;
  max-width: calc(65ch - 4em);
  margin-bottom: 1.2rem !important;
  list-style-position: outside;
}
article ol li {
  margin-bottom: 0.6rem;
}
article ol li::marker {
  content: counter(list-item) ".";
  color: var(--color-accent);
  font-family: 'Urro', monospace;
}

/* Tables (About page) */
.article-about table {
  border-collapse: collapse;
  font-family: 'Sebenta', sans-serif;
  font-size: var(--font-size--m);
  line-height: 1.3;
  color: var(--color-ink);
}

.article-about table a:link, .article-about table a:visited {
  text-decoration: none;
  color: var(--color-accent);
}

.article-about table a:hover{
  text-decoration: none;
  color: var(--color-paper);
  background-color: var(--color-accent);
}

.article-about table th,
.article-about table td {
  border: none;
  padding: .5em .6em;
  vertical-align: top;
}

.article-about table th:nth-child(1), .article-about table td:nth-child(1) {
  width: calc(100% / 6);
  text-align: right;
  border-bottom: 1px solid var(--color-ink);
}

.article-about table th:nth-child(2), .article-about table td:nth-child(2) {
  width: calc(calc(100% / 6) * 3);
  font-family: 'Ulular', serif;
  border-bottom: 1px solid var(--color-ink);
}

.article-about table th:nth-child(3), .article-about table td:nth-child(3) {
  width: calc(calc(100% / 6) * 3);
  font-family: 'Ulular', serif;
  border-bottom: 1px solid var(--color-ink);
}

.article-about table th {
  color: var(--color-paper);
  background-color: var(--color-accent);
  font-weight: normal;
  text-align: left;
}

.article-about .wp-block-buttons {
     /* block-level box: layout the button in the gutter like paragraphs */
     margin: 1rem 1rem 1.2rem calc(100% / 3);
     width: fit-content;       /* wrapper hugs the link's width */
     gap: 0;
}

@media (orientation: portrait) {
  .article-about .wp-block-buttons {
    margin: 0 auto;
  }
}

.article-about .wp-block-button__link {
     display: inline-block;
     padding: var(--font-size--xs) var(--font-size--s);
     font-family: 'Sebenta', sans-serif;
     font-size: var(--font-size--m);
     line-height: 1.3;
     color: var(--color-paper);
     background-color: var(--color-ink);
     text-decoration: none;
     border-radius: 0px;
   }

.article-about .wp-block-button__link:hover {
  background-color: var(--color-accent);
  color: var(--color-paper);
}

.about-description {
  padding: 1rem;
  margin: 0 1rem 0 calc(100% / 6);
}

@media (orientation: portrait) {
  .about-description {
    margin: 0 0;
  }
}

.about-description p {
  margin: 0;
  font-size: var(--font-size--2xl);
  line-height: 1.15em;
  text-indent: 0;
  max-width: 40ch !important;
}

@media (orientation: portrait) {
  .about-description p {
    font-size: var(--font-size--xl);
  }
}


article pre {
  max-width: 65ch;
  margin: 0 auto 1.2rem calc(100% / 3);
  font-size: var(--font-size--s);
  font-family: 'Urro', monospace;
  line-height: 1.3em;
  padding: var(--font-size--s);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

@media (max-width: 1000px) {
  article pre {
    margin: 0 1rem 1.2rem 1rem;
  }
}

article hr {
  width: calc(100% / 3);
  margin: 2rem auto;
  border: 0px;
  border-top: 1px solid var(--color-ink);
}

blockquote {
  font-size: var(--font-size--l);
  padding: 1.3rem 1rem;
}

/* ----------- IMAGES ----------- */

article figure {
  margin: 1rem 0;
}
article figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* Make the link wrapper a block so the image fills the sized figure. */
article figure.is-style-scanner-full > a,
article figure.is-style-scanner-two-thirds > a,
article figure.is-style-scanner-third > a {
  display: block;
}

/* Full */
article figure.is-style-scanner-full {
  width: 100%;
}

/* Two thirds, centered */
article figure.is-style-scanner-two-thirds {
  width: calc(calc(100% / 3) * 2);
  margin-left: auto;
  margin-right: auto;
}

/* Paragraph-width */
article figure.is-style-scanner-third {
  max-width: 65ch;
  margin-left: calc(100% / 3);
  margin-right: auto;
}

/* ----------- CAPTIONS ----------- */

article figure figcaption {
  font-family: 'Urro', monospace;
  font-size: var(--font-size--s);
  margin-top: 0.5em;
  color: var(--color-ink);
  opacity: 0.75;
  width: 50%;
}

/* Post thumbnail (single.php) */
article img.wp-post-image {
  width: 100%;
  height: auto;
  padding: calc(100vh / 12) calc(100vw / 12);
  padding-bottom: 4rem;
  aspect-ratio: 1.91 / 1;
  object-fit: cover;
}

/* Vertical screens: taller crop */
@media (orientation: portrait) {
  article img.wp-post-image {
    aspect-ratio: 4 / 5;
  }
}

/* ----------- LOADING PROGRESS ----------- */

.loading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  background-color: var(--color-accent);
  z-index: 9999;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: width 0.2s ease-in, opacity 0.4s ease-out;
}

.loading-progress.is-loaded {
  opacity: 0;
  visibility: hidden;
}

/* ----------- SIDENOTES ----------- */

/* Position context so sidenotes can sit in the left gutter. */
article p {
  position: relative;
}

.sidenote {
  position: absolute;
  right: calc(100% + 2.5em);
  width: calc(100vw / 6);
  text-indent: 0;
  font-family: 'Urro', monospace;
  font-size: var(--font-size--s);
  line-height: 1.45;
  color: var(--color-ink);
  padding-top: 0.25em;
}

/* Leading reference number, echoing the in-text reference. */
.sidenote-num {
  margin-right: 0.4em;
  color: var(--color-accent);
}

.sidenote-num::after {
  content: ".";
}

/* The note's first paragraph isn't indented. */
.sidenote p:first-of-type {
  text-indent: 0;
}

/* Notes are layered as sidenotes, so hide the built-in bottom list. */
ol.wp-block-footnotes {
  display: none;
}

@media (max-width: 1400px) {
    .sidenote {
      width: calc(100vw / 3 - 2.5em);
      padding-left: 1rem;
      padding-bottom: 1rem;
    }
}

/* When there's no room beside the paragraph, flow the note after it. */
@media (max-width: 1000px) {
  .sidenote {
    position: static;
    display: block;
    width: auto;
    right: auto;
    margin-top: 1em;
  }
}

/* ----------- FOOTER ----------- */

.footer-div {
  position: relative;
  z-index: 4; /* above the fixed home veil (z-index 2) */
  display: flex;
  background-color: var(--color-ink);
  color: var(--color-pale-paper);
  font-family: 'Urro', monospace;
  font-size: var(--font-size--s);
  line-height: 1.5em;
  border-top: 1px solid var(--color-paper);
}

.footer-colophon, .footer-menu, .footer-copy {
  width: calc(100% / 3);
  padding: 1rem;
}

/* Below the bar breakpoint the footer simplifies: the colophon goes, the menu
   links sit in a row instead of a stack, and the copyright holds the right. */
@media (max-width: 1108px) {
  .footer-colophon {
    display: none;
  }

  .footer-menu {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
  }

  .footer-copy {
    width: auto;
    margin-left: auto;
  }
}

/* Below 700px there is no room for the links and the copyright side by side, so
   the footer's columns stack. */
@media (max-width: 700px) {
  .footer-div {
    flex-direction: column;
  }

  .footer-copy {
    margin-left: 0;
    padding-top: 0;
  }

  .footer-menu {
    padding-bottom: 0;
  }
}

.footer-menu a:link, .footer-menu a:visited {
  display: block;
  text-decoration: none;
  color: var(--color-accent);
}

.footer-menu a:hover {
  color: var(--color-paper);
}

/* Front page only: footer over the orange stage — no border, ink text. */
body.front-page .footer-div,
body.home .footer-div {
  background-color: var(--color-accent);
  color: var(--color-ink);
  border-top: none;
}

/* Front page only: the site is exactly one screen tall, and the footer sits as a
   strip flush with the bottom of the viewport. That keeps the field between the
   line and the footer uninterrupted — the quiet zone under the sentence. */
body.front-page,
body.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.front-page .home-main,
body.home .home-main {
  flex: 1 1 auto;
  min-height: 0;
}

body.front-page .footer-menu a:link,
body.front-page .footer-menu a:visited,
body.home .footer-menu a:link,
body.home .footer-menu a:visited {
  color: var(--color-paper);
}

body.front-page .footer-menu a:hover,
body.home .footer-menu a:hover {
  color: var(--color-ink);
}

/* ----------- PAGE ----------- */

.page-main {
  padding: 0;
  margin: 0;
  position: relative;
}

.page-main h1 {
  margin: 0 1rem 0 calc(100% / 6);
  top: 0;
  left: 0;
  font-size: calc(100vw / 5);
  line-height: 1em;
  transform: translateY(-.1em);
  position: absolute;
  color: var(--color-accent);
  /* The 2px ink stroke that used to be here was dead: .page-main is used only by
     the three section templates, all of which sit on the ink field. */
}

@media (max-width: 1000px) {
  .page-main h1 {
    margin: 0 1rem;
  }
}

@media (orientation: portrait) {
  .page-main h1 {
    font-size: calc(100vh / 10);
  }
}

/* ----------- WRITINGS PAGE ----------- */

/* Alternate page background + text color on the Writings page. */
body.writings {
  background-color: var(--color-ink);
  color: var(--color-pale-paper);
}

.writings-list {
  padding-top: 50vh;
  margin-bottom: 10rem;
}

.writings-list-item {
  font-size: calc(100vw / 20);
  line-height: 1em;
  font-family: "Sebenta", sans-serif;
  padding: 1rem;
}

.writings-list-item a {
  color: var(--color-paper);
  text-decoration: none;
}

.writings-list-item a:hover {
  color: var(--color-paper);
  background-color: var(--color-accent);
}

.writings-list-year, .writings-list-words {
  display: inline-block;
  height: auto;
  width: calc(100vw / 6);
  font-family: 'Urro', monospace;
  font-size: var(--font-size--xs);
  line-height: 1em;
  color: var(--color-accent);
}

.writings-list-year {
  padding-right: .5rem;
  vertical-align: top;
  padding-top: calc(calc(calc(100vw / 15) / 1000) * 100);
  text-align: right;
}

/* Keep the word count hugging the title's last line instead of occupying a
   wide box that forces it onto its own line. */
.writings-list-words {
  white-space: nowrap;
  width: auto;
}

/* ----------- EDITIONS GRID ----------- */

.editions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  padding-top: 50vh;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 10rem;
  align-items: start;
}

.editions-item {
  position: relative;
}

/* Full-width card: break out of the 3-column grid. */
.editions-grid .editions-item.is-full {
  grid-column: 1 / -1;
}

/* Hover: tint the card's image with accent (multiply). Sits below the
   year/title/category chips, which paint on top. */
.editions-grid .editions-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--color-accent);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
}

.editions-grid .editions-item:hover::before {
  opacity: 1;
}

.editions-item a {
  display: block;
}

/* Natural proportions — no cropping. */
.editions-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Grayscale the image on hover (combined with the accent multiply tint). */
.editions-grid .editions-item:hover img {
  filter: grayscale(1);
}

.editions-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1rem;
  font-family: 'Sebenta', sans-serif;
  font-size: var(--font-size--s);
  line-height: 1.3;
  color: var(--color-paper);
}

.editions-year {
  color: var(--color-paper);
  background-color: var(--color-accent);
  display: inline-block;
  line-height: 1em;
  padding: .5em;
  height: 2em;
  vertical-align: top;
}

.editions-title {
  color: var(--color-paper);
  background-color: var(--color-ink);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-size: var(--font-size--xl);
  line-height: 1.2;
  padding: .1em .3em;
}

.editions-cat {
  color: var(--color-paper);
  background-color: var(--color-accent);
  display: inline-block;
  line-height: 1em;
  padding: .5em;
  height: 2em;
  vertical-align: bottom;
}

@media (max-width: 1000px) {
  .editions-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------- HOME (front page) ----------- */

/* Light base under the orange multiply veil (the orange comes from the veil). */
body.front-page, body.home {
  background-color: #ffffff;
}

/* The fixed nav sits over the orange stage, so the logo must be paper here
   (hover goes ink). */
body.front-page .header-logo a:link, body.front-page .header-logo a:visited,
body.home .header-logo a:link, body.home .header-logo a:visited {
  color: var(--color-paper);
}
body.front-page .header-logo a:hover, body.home .header-logo a:hover {
  color: var(--color-ink);
}

/* Container for the home content, clearing the fixed nav. It takes the space
   left over between the fixed nav and the footer, which is pinned to the bottom
   of the viewport by the flex column below. */
.home-main {
  position: relative;
  color: var(--color-paper);
}

/* The stage: fixed cycling greyscale images under the orange multiply veil. */
.home-stage {
  position: relative;
  width: 100%;
}
.home-slides {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.home-slide {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-size: cover; /* fill the canvas — the veil needs edges to act on */
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1); /* tones belong to the curated asset — no remapping here */
  opacity: 0; /* hard cut — JS swaps is-active with no transition */
}

.home-slide.is-active {
  opacity: 1;
}

/* Full orange multiply veil — darks to ink, no pastel, no pretty. */
/* Full orange multiply veil — darks to ink, no pastel, no pretty. */
.home-veil {
  position: fixed;
  inset: 0;
  z-index: 2;
  background-color: var(--color-accent);
  mix-blend-mode: multiply;
}

/* Visually hidden H1 (site name) — present for SEO/screen readers only. */
.home-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The front page content — on the moving field, with structure and space.
   Monolithic solid statement + weighted identity + an editorial rowed index
   (dynamism rides on the structure and the moving field, not offsets). */
.home-content {
  position: relative;
  z-index: 3;
  color: var(--color-paper);
  /* One left edge with the wordmark, which is inset by --font-size--s. */
  padding: 6rem var(--font-size--s) 5rem;
}

/* The preamble line — a description, not a shout. Sized well below the field's
   cell scale so the type reads as words over the texture instead of competing
   with it, and set to break at phrase boundaries. */
.home-content h2 {
  margin: 0;
  font-family: 'Sebenta', sans-serif;
  font-weight: normal;
  font-size: calc(100vw / 14);
  line-height: 1.12; /* the three lines need air at this scale */
  text-indent: calc(100vw / 6); /* first line steps in by a sixth, as the site's gutters do */
  color: var(--color-paper);
  text-align: left;
}

/* The identity, the route rows and their Writings weighting were removed when
   the Home page became a preamble: the header already carries the name and the
   menu. This class now holds the one line and nothing else. */

.home-content a:link, .home-content a:visited {
  color: var(--color-paper);
  text-decoration: none;
}

.home-content a:hover {
  color: var(--color-ink);
  background-color: var(--color-paper);
}