#reading-progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
z-index: 2000;
background: transparent;
pointer-events: none;
}
#reading-progress-bar {
height: 100%;
width: 0%;
background: var(--color-accent);
opacity: 0.9;
transition: width var(--transition-fast);
}
.article-canvas {
width: 100%;
position: relative;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.article-hero {
margin: 0 0 var(--space-xl) 0;
border-radius: var(--radius-lg);
overflow: hidden;
line-height: 0;
}
.article-hero-img {
width: 100%;
height: auto;
max-height: 420px;
object-fit: cover;
object-position: center;
}
.article-header {
text-align: center;
margin-top: clamp(2rem, 4vw, 4rem);
padding-bottom: var(--space-lg);
margin-bottom: var(--space-xl);
border-bottom: 1px solid var(--color-border);
position: relative;
}
.article-header::after {
content: "";
position: absolute;
left: 50%;
bottom: -4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent);
transform: translateX(-50%);
opacity: 0.7;
}
.article-title {
font-family: var(--font-serif);
font-size: clamp(2.2rem, 5vw, 3.2rem);
line-height: 1.15;
color: var(--color-text);
margin: 0 auto var(--space-lg);
text-wrap: balance;
letter-spacing: 0;
max-width: 28ch;
font-weight: 400;
font-style: italic;
hanging-punctuation: first last;
}
.article-title-kicker {
display: block;
font-family: var(--font-serif);
font-style: normal;
font-weight: 400;
font-size: 0.42em;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin-bottom: 0.5em;
line-height: 1.3;
text-wrap: balance;
}
.article-title-kicker::after {
content: "";
display: block;
width: 1.5em;
height: 1px;
background: var(--color-border);
margin: 0.6em auto 0;
}
.article-title-main {
display: block;
text-wrap: balance;
}
.article-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.article-meta .meta-item { display: inline; }
.article-meta .meta-sep {
display: inline-block;
width: 1px;
height: 10px;
border-radius: 0;
background-color: var(--color-border);
opacity: 1;
vertical-align: middle;
margin: 0 var(--space-md);
}
.article-canvas .tts-player {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0 0 var(--space-xl);
border-bottom: 1px solid var(--color-border);
padding: var(--space-sm) 0;
}
.article-canvas .tts-player-controls {
justify-content: flex-start;
gap: var(--space-md);
}
.article-canvas .tts-player-label {
flex: 0 1 auto;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.article-canvas .tts-player-label .fa-headphones { opacity: 0.5; }
.article-canvas .tts-player-duration {
margin-left: var(--space-xs);
color: var(--color-text-muted);
opacity: 0.7;
letter-spacing: 0.04em;
text-transform: none;
}
.article-canvas .tts-player-duration::before {
content: "·";
margin-right: var(--space-xs);
opacity: 0.6;
}
.article-canvas .tts-player-btn {
width: 30px;
height: 30px;
background: transparent;
color: var(--color-text-muted);
box-shadow: none;
border: 1px solid var(--color-border);
}
.article-canvas .tts-player-btn:hover {
color: var(--color-accent);
border-color: var(--color-accent);
background: transparent;
}
.article-canvas .tts-speed-btn {
font-size: var(--font-size-xs);
width: auto;
padding: 0 var(--space-sm);
height: 26px;
}
.article-canvas .tts-skip-btn,
.article-canvas .tts-speed-btn,
.article-canvas .tts-stop-btn { display: none; }
.article-canvas .tts-player.active .tts-skip-btn,
.article-canvas .tts-player.active .tts-speed-btn,
.article-canvas .tts-player.active .tts-stop-btn { display: inline-flex; }
.article-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
align-items: start;
position: relative;
}
@media (width >= 1024px) {
.article-layout {
grid-template-columns: 250px 1fr;
column-gap: var(--space-xxl);
}
}
.toc-details { display: contents; }
.toc-container {
position: relative;
z-index: var(--z-base);
height: fit-content;
}
@media (width >= 1024px) {
.toc-container {
position: sticky;
top: var(--scroll-offset);
max-height: calc(100vh - var(--scroll-offset) - var(--space-lg));
overflow-y: auto;
padding-right: var(--space-sm);
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
}
.toc-title {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--color-text-muted);
opacity: 0.6;
margin-bottom: var(--space-md);
padding-left: 0;
display: block;
}
#toc-list {
list-style: none;
padding-left: 0;
margin-top: 0;
border-left: 0;
counter-reset: toc-counter;
}
#toc-list li {
counter-increment: toc-counter;
position: relative;
padding-left: 2.1em;
}
#toc-list li::before {
content: counter(toc-counter, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.4em;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
opacity: 0.45;
transition: color var(--transition-fast), opacity var(--transition-fast);
}
#toc-list li a {
display: block;
padding: 0.4em 0;
text-decoration: none;
font-size: var(--font-size-sm);
line-height: 1.4;
color: var(--color-text-muted);
transition: color var(--transition-fast);
}
#toc-list li + li { margin-top: 0.15em; }
#toc-list li a:hover { color: var(--color-text); }
#toc-list li.active > a {
color: var(--color-text);
font-weight: 600;
}
#toc-list li.active::before {
color: var(--color-accent);
opacity: 1;
}
.article-body {
font-family: var(--font-serif);
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-text);
max-width: 42rem;
min-width: 0;
counter-reset: article-section;
}
.article-body > :first-child { margin-top: 0; }
.article-body > p:first-of-type::first-letter {
font-family: var(--font-display);
font-weight: 700;
font-size: 4.4em;
line-height: 0.86;
float: left;
margin: 0.05em 0.12em -0.05em 0;
color: var(--color-text);
letter-spacing: -0.04em;
}
.article-body h2,
.article-body h3,
.article-body h4 {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-text);
margin: 2.25em 0 0.7em 0;
line-height: 1.25;
scroll-margin-top: var(--scroll-offset);
}
.article-body h2 {
font-size: 1.7rem;
letter-spacing: -0.01em;
counter-increment: article-section;
position: relative;
}
.article-body h2::before {
content: counter(article-section, upper-roman) ".";
font-family: var(--font-serif);
font-weight: 400;
font-style: italic;
color: var(--color-accent);
opacity: 0.85;
margin-right: 0.5em;
font-size: 0.78em;
letter-spacing: 0.04em;
}
.article-body h3 { font-size: 1.25rem; margin-top: 2em; }
.article-body p { margin-bottom: 1.35em; }
.article-body a {
color: var(--color-text);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
background-image: none;
font-weight: 400;
transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
padding-bottom: 0;
}
.article-body a:hover {
color: var(--color-primary);
text-decoration-color: var(--color-primary);
}
.article-body a.trv-link-preview {
color: var(--color-primary);
text-decoration: none;
font-variant-caps: all-small-caps;
letter-spacing: 0.06em;
font-weight: 600;
border-bottom: 1px dotted color-mix(in srgb, var(--color-primary) 45%, transparent);
padding-bottom: 1px;
white-space: nowrap;
}
.article-body a.trv-link-preview:hover {
color: var(--color-primary-hover);
border-bottom-color: var(--color-primary);
}
.article-body ul,
.article-body ol {
margin: 1.5em 0;
padding-left: 1.5em;
}
.article-body li { margin-bottom: 0.6em; padding-left: var(--space-sm); }
.article-body li > strong:first-child {
font-family: var(--font-display);
font-variant-caps: all-small-caps;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-text);
margin-right: 0.15em;
}
.article-body blockquote {
margin: 2.5em 0;
padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
font-family: var(--font-serif);
font-size: 1.18em;
font-weight: 400;
font-style: italic;
line-height: 1.62;
color: var(--color-text);
background: transparent;
border-left: 1px solid var(--color-border);
border-radius: 0;
}
.article-body blockquote p:last-child:not(:only-child) {
margin-bottom: 0;
font-size: var(--font-size-xs);
font-weight: 600;
text-align: right;
font-style: normal;
color: var(--color-text-muted);
margin-top: var(--space-md);
font-family: var(--font-sans);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.article-body blockquote p:last-child:not(:only-child)::before {
content: "— ";
opacity: 0.7;
}
.article-body .text-subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-style: italic;
}
.article-body img {
max-width: 100%;
height: auto;
border-radius: var(--radius-lg);
margin: 2.5em 0;
box-shadow: var(--shadow-lg);
}
.article-body hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-border) 40%, transparent 48%, transparent 52%, var(--color-border) 60%, transparent 100%);
margin: 4em 0;
position: relative;
overflow: visible;
}
.article-body hr::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 28px;
height: 28px;
background: url('/logoicon.png') center/contain no-repeat;
}
.post-article-section {
padding-top: var(--space-xl);
margin-top: var(--space-xl);
}
.ai-notice {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
background: transparent;
padding: 0 var(--space-md);
border: none;
text-align: center;
max-width: 60ch;
margin: 0 auto;
}
.ai-notice p {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--font-size-sm);
line-height: 1.6;
margin: 0;
color: var(--color-text-muted);
}
.ai-notice a {
color: var(--color-text);
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--color-border);
border-bottom: none;
transition: all var(--transition-fast);
}
.ai-notice a:hover {
color: var(--color-primary);
text-decoration-color: var(--color-primary);
}
.related-title {
text-align: left;
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--font-size-sm);
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-lg);
letter-spacing: 0.12em;
}
.article-nav-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (width >= 768px) {
.article-nav-grid { grid-template-columns: 1fr 1fr; }
.article-nav-grid:has(> .nav-card:only-child) {
grid-template-columns: minmax(0, 26rem);
justify-content: center;
}
}
.nav-card {
display: flex;
flex-direction: column;
text-decoration: none;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), background-color var(--transition-fast);
background: transparent;
box-shadow: none;
}
.nav-card:hover, .nav-card:focus-visible {
border-color: var(--color-text-muted);
background-color: var(--color-surface-hover);
}
.nav-card-label {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
margin-bottom: var(--space-xs);
}
.nav-card.next-card { text-align: right; }
.nav-card.next-card .nav-card-label { justify-content: flex-end; }
.nav-card h3 {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.4;
margin: 0;
transition: color var(--transition-fast);
}
.nav-card:hover h3 { color: var(--color-primary); }
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-sm) var(--space-xl);
background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 85%, black));
color: var(--color-primary-contrast);
text-decoration: none;
border-radius: var(--radius-full);
font-weight: 600;
transition: all var(--transition-fast);
box-shadow: var(--shadow-md);
margin-top: var(--space-lg);
}
.cta-button:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.article-body .red-letter {
color: var(--color-red-letter);
font-weight: 500;
}
@media (width <= 768px) {
.article-body { font-size: 1rem; line-height: 1.62; }
.article-canvas { padding: 0; }
.article-hero {
margin: 0 0 var(--space-md) 0;
border-radius: var(--radius-md);
}
.article-header { padding-bottom: var(--space-md); margin-bottom: var(--space-lg); }
.article-title { font-size: 1.75rem; max-width: none; }
.article-meta { font-size: var(--font-size-2xs); }
.article-meta .meta-sep { margin: 0 var(--space-sm); }
.article-body > p:first-of-type::first-letter {
font-size: 3.4em;
margin-right: 0.1em;
}
.article-body h2 { font-size: 1.4rem; }
.article-body h2::before { font-size: 0.85em; margin-right: 0.4em; }
.article-body blockquote {
padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
font-size: 1.05rem;
margin: 1.75em 0;
}
.toc-container {
background-color: var(--color-surface-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
}
.toc-details summary {
padding: var(--space-md);
font-weight: 600;
cursor: pointer;
outline: none;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
color: var(--color-text);
}
.toc-details summary::-webkit-details-marker { display: none; }
.toc-details summary::after {
content: '\f078';
font-family: "Font Awesome 6 Free";
font-weight: 900;
transition: transform var(--transition-fast);
font-size: var(--font-size-sm);
}
.toc-details[open] > summary::after { transform: rotate(180deg); }
.toc-details[open] #toc-list {
padding: 0 var(--space-md) var(--space-md);
margin-top: 0;
border-left: none;
border-top: 1px solid var(--color-border);
}
.toc-details #toc-list li a {
margin-left: 0;
border-left: none;
border-radius: var(--radius-sm);
padding-left: var(--space-sm);
}
.article-nav-grid { gap: var(--space-md); }
.nav-card { padding: var(--space-md); background: var(--color-surface-solid); }
.nav-card h3 { font-size: 1rem; }
.related-articles-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
}
.related-articles-section {
margin-top: var(--space-xxl);
padding-top: var(--space-xl);
border-top: 1px solid var(--color-border);
}
.related-articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.related-article-card {
display: flex;
flex-direction: column;
padding: var(--space-md) var(--space-lg);
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
text-decoration: none;
color: inherit;
transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.related-article-card:hover {
border-color: var(--color-text-muted);
background-color: var(--color-surface-hover);
}
.related-article-card h3 {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 var(--space-xs) 0;
line-height: 1.35;
transition: color var(--transition-fast);
}
.related-article-card:hover h3 { color: var(--color-primary); }
.related-article-card p {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.55;
margin: 0;
flex-grow: 1;
}
.article-lexicon {
margin: 4em 0 1em;
padding: var(--space-lg) var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-soft);
scroll-margin-top: var(--scroll-offset);
}
.article-body sup.lex-ref {
font-size: 0.62em;
line-height: 0;
vertical-align: super;
margin-left: 1px;
}
.article-body sup.lex-ref a {
color: var(--color-primary);
font-weight: 700;
text-decoration: none;
border-bottom: none;
padding: 0 1px;
}
.article-body sup.lex-ref a:hover { text-decoration: underline; }
.article-lexicon .lexeme-num {
grid-area: num;
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 0.8em;
color: var(--color-text-muted);
}
.article-lexicon .lexeme--active,
.article-lexicon .lexeme:target {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.article-lexicon-title {
font-family: var(--font-display);
font-variant-caps: all-small-caps;
letter-spacing: 0.1em;
font-weight: 700;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin: 0 0 var(--space-lg);
text-align: center;
}
.article-lexicon .article-lexicon-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
column-gap: var(--space-xl);
}
@media (width >= 560px) {
.article-lexicon .article-lexicon-list { grid-template-columns: 1fr 1fr; }
}
.article-lexicon .lexeme {
display: grid;
grid-template-columns: 1.4em 1fr auto;
grid-template-areas:
"num head tag"
"num gloss gloss";
column-gap: 0.6em;
row-gap: 0.25em;
align-items: baseline;
align-content: start;
margin: 0;
padding: 0.95em 0.25em;
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
}
.article-lexicon .lexeme:last-child { border-bottom: none; }
@media (width >= 560px) {
.article-lexicon .lexeme:nth-last-child(2) { border-bottom: none; }
}
.article-lexicon .lexeme-head {
grid-area: head;
min-width: 0;
line-height: 1.45;
}
.article-lexicon .lexeme-orig {
font-family: var(--font-serif);
font-size: 1.3em;
font-weight: 600;
color: var(--color-text);
text-decoration: none;
border-bottom: none;
unicode-bidi: isolate;
margin-right: 0.4em;
}
.article-lexicon a.lexeme-orig:hover { color: var(--color-primary); }
.article-lexicon .lexeme-translit {
font-style: italic;
font-weight: 600;
color: var(--color-text);
}
.article-lexicon .lexeme-en {
grid-area: gloss;
font-size: 0.88em;
color: var(--color-text-muted);
}
.article-lexicon .lexeme-tag {
grid-area: tag;
justify-self: end;
font-variant-caps: all-small-caps;
letter-spacing: 0.06em;
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-primary);
text-decoration: none;
border: 0;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
border-radius: 999px;
padding: 0.15em 0.65em;
white-space: nowrap;
}
.article-lexicon a.lexeme-tag:hover {
background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.article-lexicon .lexeme-tag--none {
color: var(--color-text-muted);
background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
font-variant-caps: normal;
letter-spacing: 0.02em;
text-transform: none;
}
.article-table-wrap {
margin: 2em 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: transparent;
}
.article-body table.article-table {
width: 100%;
min-width: 32rem;
border-collapse: collapse;
margin: 0;
font-size: 0.92em;
}
.article-body table.article-table th,
.article-body table.article-table td {
text-align: left;
vertical-align: top;
padding: 0.85em 1em;
line-height: 1.5;
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.article-body table.article-table thead th {
font-family: var(--font-display);
font-variant-caps: all-small-caps;
letter-spacing: 0.08em;
font-weight: 700;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
background: color-mix(in srgb, var(--color-text) 6%, transparent);
border-bottom-color: var(--color-border);
white-space: nowrap;
}
.article-body table.article-table tbody tr:last-child th,
.article-body table.article-table tbody tr:last-child td {
border-bottom: none;
}
.article-body table.article-table th.article-table-key {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 1.02em;
color: var(--color-text);
white-space: nowrap;
}
.article-body table.article-table td a { white-space: nowrap; }
.article-sources {
margin: 2em 0 1em;
padding: var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-soft);
}
.article-sources-title {
font-family: var(--font-display);
font-variant-caps: all-small-caps;
letter-spacing: 0.1em;
font-weight: 700;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin: 0 0 var(--space-sm);
text-align: center;
}
.article-sources-note {
font-size: 0.85em;
color: var(--color-text-muted);
margin: 0 0 var(--space-md);
text-align: center;
}
.article-body .article-sources .article-sources-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.7em;
}
.article-sources .article-sources-list li {
position: relative;
padding-left: 1.1em;
font-size: 0.88em;
line-height: 1.55;
color: var(--color-text-muted);
}
.article-sources .article-sources-list li::before {
content: "—";
position: absolute;
left: 0;
color: var(--color-text-muted);
}
.article-sources a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.article-sources a:hover { border-bottom-color: var(--color-primary); }
.article-body .dialogue-box {
margin: 2.5em 0;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-soft);
}
.article-body .dialogue-title {
font-family: var(--font-sans);
font-variant-caps: all-small-caps;
letter-spacing: 0.08em;
font-weight: 700;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin: 0 0 var(--space-sm);
}
.article-body .dialogue-legend {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin: 0 0 var(--space-md);
padding: 0 0 var(--space-sm);
border-bottom: 1px dashed var(--color-border);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.dialogue-legend li { display: flex; align-items: center; gap: 0.4em; margin: 0; padding: 0; }
.dialogue-swatch {
width: 0.85em;
height: 0.85em;
border-radius: 3px;
flex-shrink: 0;
}
.dialogue-swatch--agapao { background: color-mix(in srgb, var(--color-accent) 22%, transparent); border: 1px solid var(--color-accent); }
.dialogue-swatch--phileo { background: color-mix(in srgb, var(--color-primary) 18%, transparent); border: 1px solid var(--color-primary); }
.article-body .dialogue-passage p { margin-bottom: var(--space-sm); }
.article-body .dialogue-passage p:last-child { margin-bottom: 0; }
.dialogue-word {
border-radius: 3px;
padding: 0 0.18em;
font-weight: 600;
border-bottom: 2px solid transparent;
}
.dialogue-word--agapao { background: color-mix(in srgb, var(--color-accent) 14%, transparent); border-bottom-color: var(--color-accent); }
.dialogue-word--phileo { background: color-mix(in srgb, var(--color-primary) 12%, transparent); border-bottom-color: var(--color-primary); }
.article-body .dialogue-ref {
margin: var(--space-md) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
text-align: right;
}
.article-body .kenosis {
margin: 2.5em auto;
max-width: 30rem;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-soft);
}
.kenosis-title {
font-family: var(--font-sans);
font-variant-caps: all-small-caps;
letter-spacing: 0.08em;
font-weight: 700;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: center;
margin: 0 0 var(--space-md);
}
.kenosis-arc--up { margin-top: var(--space-md); }
.kenosis-label {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 var(--space-xs);
}
.kenosis-arc--down .kenosis-label { color: var(--color-text-muted); }
.kenosis-arc--down .kenosis-label::before { content: "\2193\00a0\00a0"; }
.kenosis-arc--up .kenosis-label { color: var(--color-accent); text-align: right; }
.kenosis-arc--up .kenosis-label::after { content: "\00a0\00a0\2191"; }
.article-body .kenosis-steps {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-serif);
}
.kenosis-steps li {
position: relative;
padding: 0.3em 0 0.3em 1.1em;
line-height: 1.4;
color: var(--color-text);
}
.kenosis-steps li::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-border);
}
.kenosis-arc--up .kenosis-steps li::before {
background: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.kenosis-steps li.kenosis-turn { font-weight: 700; }
.kenosis-arc--down .kenosis-turn { color: var(--color-text); }
.kenosis-arc--down .kenosis-turn::before { background: var(--color-text-muted); }
.kenosis-arc--up .kenosis-turn { color: var(--color-accent); }
.article-body .omer-count {
margin: 2.5em 0;
padding: var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-soft);
}
.omer-count-title {
font-family: var(--font-display);
font-variant-caps: all-small-caps;
letter-spacing: 0.08em;
font-weight: 700;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: center;
margin: 0 0 var(--space-lg);
}
.omer-count-flow {
display: flex;
align-items: stretch;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.omer-node {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
flex: 0 0 auto;
min-width: 7rem;
}
.omer-node--start {
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.omer-node--end {
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.omer-node-label { font-family: var(--font-display); font-weight: 700; font-size: 1.05em; color: var(--color-text); }
.omer-node-num { font-family: var(--font-display); font-weight: 700; font-size: 1.6em; line-height: 1; color: var(--color-text); }
.omer-node-sub { font-size: 0.8em; color: var(--color-text-muted); margin-top: 0.2em; }
.omer-count-bridge {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 var(--space-md);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
font-size: 0.9em;
color: var(--color-text-muted);
}
.article-body .omer-weeks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: var(--space-xs);
text-align: center;
}
.omer-weeks li {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4em;
font-size: 0.78em;
color: var(--color-text-muted);
}
.omer-weeks .omer-dot {
width: 0.85em;
height: 0.85em;
border-radius: var(--radius-full);
background: var(--color-accent);
}
.omer-weeks li:nth-child(1) .omer-dot { background: color-mix(in srgb, var(--color-accent) 95%, var(--color-primary)); }
.omer-weeks li:nth-child(2) .omer-dot { background: color-mix(in srgb, var(--color-accent) 80%, var(--color-primary)); }
.omer-weeks li:nth-child(3) .omer-dot { background: color-mix(in srgb, var(--color-accent) 62%, var(--color-primary)); }
.omer-weeks li:nth-child(4) .omer-dot { background: color-mix(in srgb, var(--color-accent) 45%, var(--color-primary)); }
.omer-weeks li:nth-child(5) .omer-dot { background: color-mix(in srgb, var(--color-accent) 32%, var(--color-primary)); }
.omer-weeks li:nth-child(6) .omer-dot { background: color-mix(in srgb, var(--color-accent) 20%, var(--color-primary)); }
.omer-weeks li:nth-child(7) .omer-dot { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-primary)); }
.omer-weeks li:nth-child(8) .omer-dot { background: var(--color-primary); }
@media (width <= 560px) {
.omer-count-flow { flex-direction: column; }
.omer-node { min-width: 0; }
.article-body .omer-weeks { grid-template-columns: repeat(4, 1fr); row-gap: var(--space-sm); }
}
.article-body .feast-cycle { margin: 2.5em 0; }
.feast-cycle-heading {
font-family: var(--font-display);
font-variant-caps: all-small-caps;
letter-spacing: 0.06em;
font-weight: 700;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin: 0 0 var(--space-sm);
}
.feast-cycle-heading:not(:first-child) { margin-top: var(--space-lg); }
.feast-cycle-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
}
.feast-card {
display: flex;
flex-direction: column;
gap: 0.25em;
padding: var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-soft);
text-decoration: none;
}
.article-body a.feast-card { padding: var(--space-md); text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.article-body a.feast-card:hover { color: var(--color-text); border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.feast-card--current {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.feast-card-season { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.feast-card--current .feast-card-season { color: var(--color-primary); font-weight: 600; }
.feast-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05em; color: var(--color-text); }
.feast-card-date { font-size: 0.82em; color: var(--color-text-muted); }
@media (width <= 560px) {
.feast-cycle-grid { grid-template-columns: 1fr; }
}
.article-body .antithesis { margin: 2.5em 0; }
.antithesis-title {
font-family: var(--font-display);
font-variant-caps: all-small-caps;
letter-spacing: 0.08em;
font-weight: 700;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: center;
margin: 0 0 var(--space-lg);
}
.antithesis-flow {
display: flex;
align-items: stretch;
gap: var(--space-sm);
}
.antithesis-panel {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 0.3em;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-soft);
}
.antithesis-panel--before {
background: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
}
.antithesis-panel--after {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.antithesis-ref {
font-family: var(--font-display);
font-variant-caps: all-small-caps;
letter-spacing: 0.06em;
font-size: 0.78em;
color: var(--color-text-muted);
}
.antithesis-panel--after .antithesis-ref { color: var(--color-primary); font-weight: 600; }
.antithesis-head {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15em;
color: var(--color-text);
margin-bottom: 0.15em;
}
.antithesis-panel--after .antithesis-head { color: var(--color-primary); }
.article-body .antithesis-points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4em;
}
.antithesis-points li {
position: relative;
padding-left: 1.1em;
font-size: 0.9em;
line-height: 1.45;
color: var(--color-text);
}
.antithesis-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 0.4em;
height: 0.4em;
border-radius: var(--radius-full);
background: var(--color-text-muted);
}
.antithesis-panel--after .antithesis-points li::before { background: var(--color-primary); }
.antithesis-pivot {
flex: 0 0 auto;
align-self: center;
color: var(--color-accent);
font-weight: 700;
}
.antithesis-pivot::before { content: "\2192"; font-size: 1.5em; }
@media (width <= 560px) {
.antithesis-flow { flex-direction: column; }
.antithesis-pivot { transform: rotate(90deg); }
}