/*
Theme Name: Sakalia Literary
Description: A reading-first WordPress theme for Sakalia.
Version: 1.2.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: sakalia-literary
*/

:root {
    color-scheme: light;
    --paper: #faf7ef;
    --panel: #f0eadc;
    --ink: #282b24;
    --muted: #575b50;
    --accent: #864234;
    --line: #c7bbab;
    --heading: Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
    --gutter: clamp(1.125rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.125rem/1.68 var(--heading); }
a { color: inherit; text-decoration-thickness: .065em; text-underline-offset: .19em; }
a:hover { color: var(--accent); }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
iframe, video { max-width: 100%; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.14; }
p { margin: 0 0 1em; }
.shell { width: min(100% - 2 * var(--gutter), 75rem); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { z-index: 10; top: 1rem; left: 1rem; width: auto; height: auto; margin: 0; padding: .5rem 1rem; clip-path: none; background: var(--paper); }
.mark-period { color: var(--accent); }

.site-header { border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2.25rem; padding-block: 1.35rem 1.2rem; }
.wordmark { display: inline-flex; align-items: baseline; color: var(--ink); font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1; letter-spacing: -.07em; text-decoration: none; }
.site-nav { font: 600 .84rem/1.4 var(--sans); }
.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: inline-block; padding-block: .48rem; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--accent); text-decoration: underline; }
.site-nav > ul > li:last-child > a { color: var(--accent); }
.has-submenu { position: relative; display: flex; align-items: center; gap: .22rem; }
.nav-submenu > summary { display: grid; place-items: center; min-width: 1.8rem; min-height: 2rem; color: var(--accent); font-size: 1rem; list-style: none; cursor: pointer; }
.nav-submenu > summary::-webkit-details-marker { display: none; }
.nav-submenu[open] > summary > span[aria-hidden] { transform: rotate(180deg); }
.nav-submenu > ul { position: absolute; inset-inline-start: 0; top: 100%; z-index: 2; min-width: 10rem; padding: .25rem .75rem; background: var(--paper); border: 1px solid var(--line); }

.opening { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(2.75rem, 8vw, 6rem) clamp(2.75rem, 6.5vw, 5rem); }
.folio { margin: 0 0 1rem; color: var(--accent); font: 650 .69rem/1.45 var(--sans); text-transform: uppercase; letter-spacing: .135em; }
.opening h1 { margin: 0 0 1.05rem; font-size: clamp(2.95rem, 7.15vw, 6.25rem); letter-spacing: -.069em; line-height: .99; }
.opening-intro { max-width: 33rem; margin: 0; color: var(--muted); font-size: clamp(1.12rem, 2vw, 1.45rem); line-height: 1.52; }
.signature { margin: 1.2rem 0 0; font-style: italic; font-size: .96rem; }
.proverb { align-self: center; padding: clamp(1.2rem, 3.5vw, 2rem); background: var(--panel); border-inline-start: 2px solid var(--accent); }
.proverb-heading { display: flex; align-items: center; gap: .8rem; margin-bottom: .75rem; }
.proverb-heading .folio { margin: 0; }
.proverb-mark { height: 2.15rem; color: var(--accent); font-size: 4.2rem; line-height: 1; }
.proverb figure, .proverb blockquote { margin: 0; }
.proverb blockquote { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.36; }
.proverb blockquote p, .proverb-original, .proverb-empty, .proverb-context { margin: 0; }
.proverb-original, .proverb-empty, .proverb-context { color: var(--muted); }
.proverb-original { margin-top: .4rem; font-style: italic; }
.proverb-context { margin-top: .85rem; font-size: 1rem; }
.proverb figcaption { margin-top: .6rem; color: var(--muted); font: .8rem/1.5 var(--sans); overflow-wrap: anywhere; }
.proverb-empty { max-width: 26ch; font-size: 1.04rem; }

.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 4vw, 3.2rem); padding-block: 1.9rem 2.9rem; border-top: 1px solid var(--line); }
.collection { display: flex; flex-direction: column; align-items: start; }
.collection + .collection { position: relative; }
.collection + .collection::before { position: absolute; inset-block: 0; inset-inline-start: calc(-1 * clamp(.7rem, 2vw, 1.6rem)); border-inline-start: 1px solid var(--line); content: ""; }
.folio-number { margin-inline-end: .42rem; opacity: .9; }
.collection h2 { margin: 0 0 .5rem; font-size: clamp(1.65rem, 3.05vw, 2.55rem); letter-spacing: -.045em; }
.collection-intro { margin: 0 0 1rem; color: var(--muted); font-size: 1.03rem; line-height: 1.54; }
.empty-note { color: var(--muted); font-size: 1rem; font-style: italic; }
.collection .text-link { margin-top: auto; }
.text-link { display: inline-block; padding-block: .25rem; color: var(--accent); font: 650 .81rem/1.5 var(--sans); }
.text-link span { padding-inline-start: .2rem; }

.letter-note { padding: clamp(1.5rem, 4.5vw, 2.75rem); margin-block: .25rem clamp(2.5rem, 6.5vw, 4.5rem); background: var(--panel); }
.letter-note .folio { margin-bottom: .55rem; }
.letter-note h2 { margin: 0 0 .36rem; font-size: clamp(1.85rem, 4vw, 2.65rem); letter-spacing: -.04em; }
.letter-note p:not(.folio) { margin: 0 0 .45rem; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.15rem 1.4rem; font: .78rem/1.6 var(--sans); }
.footer-inner p { margin: 0; }
.footer-inner p a { margin-inline-end: .4rem; color: var(--ink); font-weight: 700; }

.reading { max-width: 53rem; padding-block: clamp(2.3rem, 7vw, 4.75rem) 3rem; }
.reading-header { margin: 0 auto 2rem; }
.reading-header .folio a { color: var(--accent); }
.reading-header h1 { max-width: 22ch; margin: 0 0 .8rem; font-size: clamp(2.5rem, 7vw, 5.1rem); letter-spacing: -.058em; overflow-wrap: anywhere; }
.reading-deck { max-width: 58ch; color: var(--muted); font-size: clamp(1.08rem, 2.4vw, 1.32rem); line-height: 1.52; }
.byline, .entry-date { color: var(--muted); font: .82rem/1.5 var(--sans); }
.byline span { margin-inline: .22rem; }
.prose { max-width: 40rem; font-size: clamp(1.12rem, 1.8vw, 1.24rem); line-height: 1.75; overflow-wrap: anywhere; }
.prose h2 { margin: 1.6em 0 .55em; font-size: 1.7em; }
.prose h3 { margin: 1.6em 0 .55em; font-size: 1.35em; }
.prose a { color: var(--accent); }
.prose blockquote { margin: 1.65em 0; padding-inline-start: 1em; border-inline-start: 2px solid var(--accent); }
.prose cite, .prose figcaption { color: var(--muted); font-size: .86em; }
.prose .wp-block-footnotes { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .84em; }
.prose li + li { margin-top: .3em; }
.prose figure { max-width: 100%; margin-inline: 0; }
.prose .wp-block-table { overflow-x: auto; }
.prose table { border-collapse: collapse; }
.prose td, .prose th { padding: .3em .65em; border: 1px solid var(--line); }
.prose input, .prose button { font: 1rem/1.4 var(--sans); }
.prose input[type="email"], .prose input[type="password"] { max-width: 100%; padding: .55rem; }
.prose input[type="submit"], .prose button[type="submit"] { padding: .6rem .95rem; }
.essay-image { margin: 0 0 2rem; }
.related { margin-top: 3rem; padding-block: 1.15rem; border-top: 1px solid var(--line); }
.related h2 { margin: 0 0 1rem; font-size: 1.65rem; }
.related .essay-card h3 { margin: .2rem 0 .55rem; }
.article-reading .letter-note { margin-block: 3rem 0; }
.archive-list { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.archive-list .essay-card + .essay-card { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.essay-card h2, .essay-card h3 { margin: .2rem 0 .45rem; }
.essay-card h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.essay-card h3 { font-size: clamp(1.15rem, 2.3vw, 1.5rem); }
.essay-card p { margin-bottom: .65rem; color: var(--muted); font-size: 1rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; font: .88rem var(--sans); }
.nav-links .page-numbers { display: inline-block; padding: .35rem .6rem; }
.nav-links .current { background: var(--panel); }

@media (max-width: 54rem) {
    .site-header-inner { flex-wrap: wrap; }
    .site-nav ul { column-gap: .95rem; }
    .opening { gap: 2rem; }
}

@media (max-width: 42rem) {
    .site-header-inner { display: block; padding-block: .9rem .72rem; }
    .site-nav { margin-top: .65rem; }
    .site-nav > ul { gap: 0 .85rem; }
    .site-nav a { padding-block: .47rem; }
    .opening { grid-template-columns: 1fr; align-items: start; padding-block: 2.7rem 2.3rem; gap: 1.7rem; }
    .opening h1 { font-size: clamp(2.5rem, 10.3vw, 4.3rem); }
    .proverb { max-width: 30rem; }
    .proverb-empty { max-width: 36ch; }
    .collection-grid { grid-template-columns: 1fr; gap: 1.25rem; padding-block: 0 2rem; border-top: 0; }
    .collection { padding-top: 1.2rem; border-top: 1px solid var(--line); }
    .collection + .collection::before { content: none; }
    .collection .folio { margin-bottom: .45rem; }
    .footer-inner { flex-wrap: wrap; }
}

/* 1.1.0 — tagline, proverb of the week, second question, sharing */
.opening h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); letter-spacing: -.055em; line-height: 1.02; }
.proverb-question, .second-question p:not(.folio) { margin: .95rem 0 0; font-size: 1.04rem; line-height: 1.5; }
.proverb-question span { display: block; margin-bottom: .2rem; color: var(--accent); font: 650 .66rem/1.45 var(--sans); text-transform: uppercase; letter-spacing: .135em; }
.proverb .text-link { margin-top: .8rem; }
.second-question { max-width: 40rem; margin: 2.5rem 0 0; padding: 1.25rem 1.4rem; background: var(--panel); border-inline-start: 2px solid var(--accent); }
.second-question .folio { margin: 0 0 .35rem; }
.second-question p:not(.folio) { margin: 0; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.45; }
.share-line { display: flex; flex-wrap: wrap; gap: .4rem 1rem; max-width: 40rem; margin: 2rem 0 0; color: var(--muted); font: .82rem/1.5 var(--sans); }
.share-line a { color: var(--accent); font-weight: 650; }
.reading-header .text-link + .text-link { margin-inline-start: 1rem; }
.footer-inner div a { color: var(--ink); }
.proverb-count { color: var(--muted); font: .82rem/1.5 var(--sans); }
.proverb-archive { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.proverb-entry { margin: 0; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.proverb-entry blockquote { margin: 0; padding: 0; border: 0; font-size: 1.3em; line-height: 1.35; }
.proverb-entry blockquote p { margin: 0; }
.proverb-entry .proverb-original { margin: .35rem 0 0; color: var(--muted); font-style: italic; }
.proverb-entry figcaption { margin-top: .5rem; font: .8rem/1.5 var(--sans); }
.proverb-entry .proverb-context { margin: .7rem 0 0; color: var(--muted); font-size: .95em; }
@media (max-width: 42rem) {
    .opening h1 { font-size: clamp(2.3rem, 9.6vw, 3.6rem); }
}

/* Review highlights show only to signed-in editors. */
body:not(.logged-in) mark.has-inline-color { background: none !important; color: inherit !important; }