/*
Theme Name: Reviery
Description: A working almanac. Editorial theme for reviery.de.
Version: 1.0.0
Author: Reviery
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: reviery
*/

/* ---------- fonts (self-hosted, no third-party requests) ---------- */
@font-face { font-family: "Fraunces"; src: url(assets/fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(assets/fonts/fraunces-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url(assets/fonts/sourceserif.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url(assets/fonts/sourceserif-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(assets/fonts/plexmono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(assets/fonts/plexmono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- tokens ---------- */
:root {
    --paper: #f3eee3;
    --paper-2: #ebe4d4;
    --paper-3: #e1d8c4;
    --ink: #1d1b17;
    --ink-2: #4a453c;
    --muted: #7a7264;
    --rule: #cfc5b0;
    --rule-strong: #1d1b17;

    --accent: #b5452e;   /* almanac red */

    --display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --serif: "Source Serif", "Iowan Old Style", Georgia, serif;
    --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --wrap: 1120px;
    --mid: 860px;
    --narrow: 680px;
    --gutter: clamp(18px, 4vw, 40px);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --paper: #16140f; --paper-2: #1f1c16; --paper-3: #2a261e;
        --ink: #ece5d6; --ink-2: #c9c0ae; --muted: #958c7b;
        --rule: #3a352b; --rule-strong: #ece5d6;
        --accent: #e58a6f;
        color-scheme: dark;
    }
}


/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.1875rem/1.65 var(--serif);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* faint paper grain */
    background-image: radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px);
    background-size: 3px 3px;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--paper); }

/* width-based wrappers (no side padding) so borders line up with the text edge */
.wrap        { width: min(var(--wrap),   100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-mid    { width: min(var(--mid),    100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-narrow { width: min(var(--narrow), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-wide   { width: min(1100px,        100% - 2 * var(--gutter)); margin-inline: auto; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: .5em 1em; z-index: 10; }
.skip:focus { left: 8px; }

.kicker {
    font: 500 .72rem/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}
.kicker a { text-decoration: none; }
.kicker--accent { color: var(--accent); }
.kicker .icon { display: inline-block; vertical-align: -.15em; }
.meta { font: .78rem/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; margin: 0; }
.empty { font-style: italic; color: var(--muted); margin: 0; }
.empty--big { font-size: 1.25rem; padding: 3rem 0; text-align: center; }

.icon { width: 1.1em; height: 1.1em; color: var(--accent); }
.icon--glyph { font-family: var(--display); font-weight: 600; font-size: 1.15em; line-height: 1; width: auto; height: auto; }

/* ---------- topbar + masthead ---------- */
.topbar { border-bottom: 1px solid var(--rule); font: .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.topbar__inner { display: flex; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
@media (max-width: 560px) { .topbar__date { display: none; } }

.masthead { border-bottom: 3px double var(--rule-strong); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wordmark__mark { width: 30px; height: 30px; image-rendering: pixelated; }
.wordmark__name {
    font: italic 600 2rem/1 var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    letter-spacing: -.02em;
}
.wordmark--small .wordmark__mark { width: 24px; height: 24px; }
.wordmark--small .wordmark__name { font-size: 1.5rem; }

.nav__list { list-style: none; display: flex; gap: .25rem 1.6rem; margin: 0; padding: 0; flex-wrap: wrap; }
.nav__list a {
    font: 500 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; color: var(--ink-2); padding: .5rem 0; display: inline-block;
    border-bottom: 2px solid transparent;
}
.nav__list a:hover, .nav__list .current-menu-item > a, .nav__list .current-menu-ancestor > a { color: var(--accent); border-color: var(--accent); }
@media (max-width: 700px) {
    .masthead__inner { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .nav { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .nav__list { flex-wrap: nowrap; white-space: nowrap; }
}

/* ---------- front page ---------- */
.hero { padding-block: clamp(3rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero .kicker { margin-bottom: 1.6rem; }
.hero__title {
    font: 400 clamp(2.3rem, 6.4vw, 5.4rem)/1.04 var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 30;
    letter-spacing: -.03em;
    margin: 0;
    max-width: 16ch;
    text-wrap: balance;
}
.hero__title em {
    font-style: italic; font-weight: 500;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    color: var(--accent);
}
.hero__dek { max-width: 40rem; margin: 2rem 0 0; font-size: 1.25rem; color: var(--ink-2); line-height: 1.55; }
.hero__dek a { color: var(--ink); }

.lead-entry {
    display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
    border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
    padding-block: 2.2rem; margin-bottom: 1rem;
}
.lead-entry.has-image { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.lead-entry__image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: saturate(.85) contrast(1.02); }
.lead-entry__title { font: 500 clamp(1.8rem, 3.6vw, 2.8rem)/1.1 var(--display); letter-spacing: -.02em; margin: .7rem 0; text-wrap: balance; }
.lead-entry__title a { text-decoration: none; }
.lead-entry__excerpt { color: var(--ink-2); margin: 0 0 1rem; }
@media (max-width: 760px) { .lead-entry.has-image { grid-template-columns: 1fr; } }


/* ---------- curriculum ---------- */
.curriculum { margin-block: clamp(3rem, 7vw, 5rem); padding-top: 2.2rem; border-top: 3px double var(--rule-strong); }
.curriculum__head { max-width: 40rem; margin-bottom: 1.8rem; }
.curriculum__title { font: italic 400 clamp(1.8rem, 3.6vw, 2.7rem)/1.1 var(--display); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; letter-spacing: -.02em; margin: .5rem 0 .6rem; }
.curriculum__dek { color: var(--ink-2); margin: 0; font-size: 1.05rem; }
.curriculum--inline { border-top-width: 1px; border-top-style: solid; }

.course-list { list-style: none; margin: 0; padding: 0; }
.course-row {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .4rem 1.5rem; align-items: start;
    padding: 1.4rem 0; border-top: 1px solid var(--rule);
}
.course-row:last-child { border-bottom: 1px solid var(--rule); }
.course-row__n { font: italic 300 2rem/1 var(--display); color: var(--accent); font-variation-settings: "opsz" 144, "SOFT" 100; }
.course-row__title { font: 500 1.45rem/1.2 var(--display); letter-spacing: -.01em; margin: .3rem 0 .35rem; }
.course-row__title a { text-decoration: none; }
.course-row__pitch { margin: 0; color: var(--ink-2); font-size: 1rem; }
.course-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; text-align: right; padding-top: .2rem; }
.course-row__facts { font: .72rem/1.5 var(--mono); color: var(--muted); letter-spacing: .04em; }
.course-row__go { font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: .25rem; white-space: nowrap; }
@media (max-width: 640px) {
    .course-row { grid-template-columns: 2.2rem minmax(0, 1fr); }
    .course-row__meta { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: .5rem 1.2rem; }
}

/* ---------- entry lists ---------- */
.entry-list { list-style: none; margin: 0; padding: 0; }
.entry-row {
    display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .3rem 1.6rem;
    padding: 1.5rem 0; border-top: 1px solid var(--rule); align-items: baseline;
}
.entry-row:last-child { border-bottom: 1px solid var(--rule); }
.entry-row__date, .entry-row__time { font: .72rem/1.5 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.entry-row__title { font: 500 1.5rem/1.2 var(--display); letter-spacing: -.015em; margin: .25rem 0 .4rem; text-wrap: balance; }
.entry-row__title a { text-decoration: none; }
.entry-row__title a:hover { color: var(--accent); }
.entry-row__excerpt { margin: 0; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 640px) {
    .entry-row { grid-template-columns: 1fr; }
    .entry-row__time { display: none; }
}

.page-head { padding-block: clamp(3rem, 8vw, 5.5rem) 2rem; }
.page-head__title { font: 400 clamp(2.4rem, 6vw, 4.2rem)/1.05 var(--display); font-variation-settings: "opsz" 144, "SOFT" 50; letter-spacing: -.03em; margin: .8rem 0 0; }
.page-head__dek { font-size: 1.2rem; color: var(--ink-2); max-width: 38rem; margin: 1.2rem 0 0; }


.pagination { margin: 2.5rem 0; font: .8rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.pagination .nav-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.pagination a, .pagination span { text-decoration: none; padding: .3rem .5rem; }
.pagination .current { border-bottom: 2px solid var(--accent); }

/* ---------- article ---------- */
.article__head { padding-block: clamp(3rem, 8vw, 5rem) 2rem; }
.article__head .kicker { margin-bottom: 1.4rem; }
.article__title { font: 500 clamp(2.3rem, 5.6vw, 3.9rem)/1.06 var(--display); font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.article__dek { font: italic 400 1.35rem/1.45 var(--serif); color: var(--ink-2); margin: 1.2rem 0 0; }
.article__image { margin-block: 0 2.5rem; }
.article__image img { width: 100%; }
.article__image figcaption { font: .75rem/1.5 var(--mono); color: var(--muted); margin-top: .6rem; }
.article--page .article__head { padding-bottom: 1rem; }

.prose { padding-bottom: 1rem; }
.prose > * { margin-block: 0 1.3em; }
.prose > p:first-of-type::first-letter {
    float: left; font: 500 4.6em/.8 var(--display); font-variation-settings: "opsz" 144, "SOFT" 100;
    color: var(--accent); margin: .07em .1em 0 -.03em;
}
.article--page .prose > p:first-of-type::first-letter { all: unset; }
.prose h2 { font: 500 1.9rem/1.2 var(--display); letter-spacing: -.02em; margin: 2.2em 0 .6em; }
.prose h3 { font: 600 1.4rem/1.25 var(--display); margin: 1.8em 0 .5em; }
.prose h4 { font: 500 .8rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 2em 0 .5em; }
.prose a { color: var(--accent); }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--accent); }
.prose blockquote, .prose .wp-block-quote { margin-inline: 0; padding: .2em 0 .2em 1.4em; border-left: 3px solid var(--accent); font-style: italic; font-size: 1.15em; color: var(--ink-2); }
.prose blockquote cite { display: block; font: normal .75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-top: .6em; color: var(--muted); }
.prose .wp-block-pullquote { border: 0; border-block: 1px solid var(--rule-strong); padding: 1.5em 0; text-align: center; }
.prose .wp-block-pullquote blockquote { border: 0; padding: 0; font: italic 400 1.7rem/1.3 var(--display); color: var(--ink); }
.prose code { font: .85em var(--mono); background: var(--paper-2); padding: .1em .35em; border-radius: 3px; }
.prose pre { font: .85rem/1.6 var(--mono); background: var(--paper-2); border: 1px solid var(--rule); padding: 1.1em 1.3em; overflow-x: auto; border-radius: 4px; }
.prose pre code { background: none; padding: 0; }
.prose hr, .prose .wp-block-separator { border: 0; text-align: center; margin: 2.5em 0; height: auto; }
.prose hr::after, .prose .wp-block-separator::after { content: "§   ▸   ❦"; white-space: pre; color: var(--muted); font-family: var(--display); }
.prose figure { margin-inline: 0; }
.prose figcaption, .prose .wp-element-caption { font: .75rem/1.5 var(--mono); color: var(--muted); margin-top: .6rem; }
.prose .alignwide { margin-inline: calc(min(0px, (var(--narrow) - 1000px) / 2)); max-width: none; }
.prose .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .55em .6em; text-align: left; vertical-align: top; }
.prose th { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom-color: var(--rule-strong); }
.prose .wp-block-table { overflow-x: auto; }
.prose .wp-block-button__link { background: var(--accent); color: var(--paper); border-radius: 2px; font: 500 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: .9em 1.3em; text-decoration: none; }
.prose .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--accent); border: 1px solid currentColor; }
/* "callout" = a group with a background */
.prose .wp-block-group.has-background { padding: 1.3em 1.5em; }

.article__foot { padding-bottom: 1rem; }
.fleuron { text-align: center; color: var(--accent); font-family: var(--display); font-size: 2rem; line-height: 1; margin: 2.5rem 0; }
.tags { font-size: 1rem; }
.tags .kicker { margin-right: .5rem; }
.tags a { color: var(--ink-2); }

/* the funnel, quietly */
.further-study {
    margin: 3rem 0 1rem; padding: 1.6rem 1.8rem 1.4rem;
    background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--accent);
    position: relative;
}
.further-study::after { /* index-card ruling */
    content: ""; position: absolute; left: 1.8rem; right: 1.8rem; top: 3.1rem; border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.further-study .kicker { color: var(--accent); }
.further-study__lead { font: 400 1.3rem/1.4 var(--display); margin: 1.2rem 0 .5rem; }
.further-study__lead a { color: var(--ink); text-decoration-color: var(--accent); }
.further-study__lead cite { font-style: italic; }
.further-study__pitch { color: var(--ink-2); font-size: 1rem; margin: 0 0 1rem; }
.further-study__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0; font: .72rem/1.4 var(--mono); color: var(--muted); letter-spacing: .04em; }
.further-study__foot a { font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .2rem; }

.more-from { margin-block: 3rem; }
.more-from > .kicker { margin-bottom: 1rem; }
.more-from .entry-row { grid-template-columns: 6rem minmax(0, 1fr); }
.more-from .entry-row__time { display: none; }
.more-from .entry-row__title { font-size: 1.25rem; }
@media (max-width: 640px) { .more-from .entry-row { grid-template-columns: 1fr; } }

/* comments (kept simple; off by default) */
.comments-wrap { margin-block: 3rem; font-size: 1rem; }
.comments-wrap input:not([type=checkbox]):not([type=submit]), .comments-wrap textarea { width: 100%; font: inherit; padding: .6em; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); }

/* search form */
.search-form { display: flex; gap: .5rem; margin-top: 1.5rem; max-width: 28rem; }
.search-form label { flex: 1; }
.search-field { width: 100%; font: inherit; padding: .6em .8em; background: var(--paper); border: 1px solid var(--rule-strong); color: var(--ink); }
.search-submit { font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .1em; background: var(--ink); color: var(--paper); border: 0; padding: 0 1.1em; cursor: pointer; }

/* ---------- colophon ---------- */
.colophon { margin-top: clamp(4rem, 9vw, 7rem); border-top: 3px double var(--rule-strong); background: var(--paper-2); font-size: 1rem; }
.colophon__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 2.5rem; padding-block: 3rem; }
.colophon__about p { color: var(--ink-2); margin: .9rem 0 0; max-width: 22rem; }
.colophon .kicker { margin-bottom: .9rem; }
.colophon__list { list-style: none; margin: 0; padding: 0; }
.colophon__list li { padding: .3rem 0; }
.colophon__list a { text-decoration: none; }
.colophon__list a:hover { color: var(--accent); }
.colophon__n { display: inline-block; min-width: 2.2rem; font-family: var(--display); font-style: italic; color: var(--accent); }
.colophon__small { color: var(--ink-2); font-size: .95rem; margin: 0 0 .8rem; }
.colophon__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-block: 1.1rem 1.5rem; font: .72rem/1.4 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.colophon__legal { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; }
.colophon__legal a { text-decoration: none; }
@media (max-width: 760px) { .colophon__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- hero almanac card ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.almanac-card {
    border: 1px solid var(--rule-strong); padding: 1.1rem 1.25rem 1rem; background: var(--paper);
    box-shadow: 5px 5px 0 var(--paper-3); transform: rotate(.6deg); margin-bottom: .4rem;
}
.almanac-card > .kicker { color: var(--ink); border-bottom: 3px double var(--rule-strong); padding-bottom: .65rem; margin-bottom: .2rem; }
.almanac-card dl { margin: 0; }
.almanac-card dl > div { display: grid; grid-template-columns: 4.6rem 1fr; gap: .8rem; padding: .7rem 0; border-bottom: 1px dotted var(--rule); }
.almanac-card dt { font: 500 .68rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.almanac-card dd { margin: 0; font: 500 1rem/1.35 var(--display); }
.almanac-card dd small { display: block; font: .7rem/1.5 var(--mono); color: var(--muted); margin-top: .2rem; letter-spacing: .02em; }
.almanac-card .moon { font-family: var(--serif); }
.almanac-card__foot { font: .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: .8rem 0 0; text-align: right; }
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .almanac-card { transform: none; max-width: 340px; }
}

/* recent entries on the front page */
.recent > .kicker { margin: 2.6rem 0 .6rem; }
.recent .entry-list { margin-bottom: 1.4rem; }