/*
Theme Name: Recaps
Theme URI: https://recapafterwords.com
Author: Afterwords
Description: A recap publication for romance, fantasy, and romantasy readers.
Version: 14.13
License: GNU General Public License v2 or later
Text Domain: recaps
*/
/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&family=Libre+Franklin:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button, input, textarea, select { font-family: inherit; }
/* ── DESIGN TOKENS ── */
:root {
/* Colours */
--ink: #0F0F12;
--hero-dk: #1A1C20;
--teal: #1A2B4A;
--teal-lt: #EEF1F7;
--terra: #1A2B4A;
--terra-lt: #EEF1F7;
--sage: #536858;
--sage-lt: #E7EDE8;
--amber: #536858;
--cover-bg: #252830;
--cover-dk: #1A1C20;
--paper: #F9F9F7;
--g700: #2A384F;
--pave: #5A6272;
--pave-dim: #8A909A;
--rule: #E0E0DC;
--rule-lt: #EEEEEA;
/* Card placeholder colours */
--c1: #2a3040;
--c2: #3a4a3c;
--c3: #6b4a3a;
--c4: #3a4550;
--c5: #4a3828;
--c6: #4a4540;
/* Typography */
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Libre Franklin', system-ui, sans-serif;
/* Type scale — set once, used everywhere */
--text-xs: 0.75rem; /* 12px — labels, kickers */
--text-sm: 0.875rem; /* 14px — meta, nav, tags, secondary */
--text-base: 1rem; /* 16px — body, excerpts, meta values */
--text-md: 1.125rem; /* 18px — compact titles, bylines */
--text-lg: 1.3125rem; /* 21px — section headings */
}
/* ── BASE ── */
html { font-size: 16px; }
body {
font-family: var(--sans);
font-weight: 400;
background: var(--paper);
color: var(--ink);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a:hover { color: var(--teal); }
em, i { font-style: italic; }
/* ── UTILITY ── */
.bracket { color: var(--rule); }
.post-tag {
font-family: var(--sans);
font-size: 0.625rem;
font-weight: 400;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--sage);
background: var(--sage-lt);
padding: 3px 8px;
display: inline-block;
line-height: 1;
}
.post-tag:hover { color: var(--teal); background: var(--teal-lt); }
.read-link {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
border-bottom: 0.5px solid var(--teal);
padding-bottom: 2px;
display: inline;
}
.section-divider {
display: flex;
align-items: center;
gap: 14px;
margin: 32px 0;
}
.section-divider hr { height: 0.5px; background: var(--rule); border: none; flex: 1; }
.section-divider-mark {
font-family: var(--serif);
font-style: italic;
font-size: 1rem;
color: var(--rule);
letter-spacing: -0.06em;
flex-shrink: 0;
}
/* ── SITE HEADER ── */
.site-header {
border-bottom: 0.5px solid var(--rule);
background: var(--paper);
position: sticky;
top: 0;
z-index: 100;
}
.nav-inner {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
padding: 16px 52px;
gap: 32px;
}
.site-branding a {
display: block;
font-family: var(--serif);
font-size: 1rem;
font-weight: 400;
color: var(--ink);
letter-spacing: 0.01em;
}
.site-branding a:hover { color: var(--ink); }
.site-description {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
letter-spacing: 0.04em;
margin-top: 3px;
display: block;
}
.main-navigation { display: flex; justify-content: flex-end; }
.main-navigation ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; }
.main-navigation ul li a {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pave);
padding: 6px 20px;
border-right: 0.5px solid var(--rule-lt);
display: block;
transition: color 0.15s;
}
.main-navigation ul li:last-child a { border-right: none; }
.main-navigation ul li a:hover { color: var(--ink); }
.main-navigation ul li.current-menu-item a {
color: var(--ink);
font-weight: 500;
}
.nav-actions { display: flex; align-items: center; }
.nav-action {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 400;
color: var(--g700);
padding: 0 12px;
border-left: 0.5px solid var(--rule);
display: flex;
align-items: center;
gap: 5px;
}
.nav-action a { color: var(--ink); border-bottom: 0.5px solid var(--ink); padding-bottom: 1px; }
.nav-action a:hover { color: var(--teal); border-color: var(--teal); }
/* ── HERO SPOILER PANEL ── */
.hero-illustration {
width: 80px;
height: 80px;
object-fit: contain;
display: block;
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.hero-spoiler-title {
font-family: var(--serif);
font-style: italic;
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.03em;
color: #F9F9F7;
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.hero-spoiler-sub {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
font-style: italic;
color: rgba(249,249,247,0.5);
line-height: 1.8;
max-width: 200px;
margin-bottom: 18px;
position: relative;
z-index: 1;
}
/* Inner centred content block */
.hero-panel-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
z-index: 1;
width: 100%;
}
.hero-cover-foot {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
margin-top: 18px;
width: 100%;
}
.hero-cover-rule { height: 0.5px; background: rgba(249,249,247,0.14); flex: 1; }
.hero-cover-mark {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: rgba(249,249,247,0.16);
letter-spacing: -0.08em;
line-height: 1;
flex-shrink: 0;
}
/* ── POST CONTENT INNER WRAPPER (centres readable column) ── */
.post-content-inner {
padding: 0 8px;
}
/* ── PAGE-TURN NAVIGATION ── */
.post-page-nav {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 0.5px solid var(--rule);
}
.ppn-prev {
padding: 32px 52px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
border-right: 0.5px solid var(--rule-lt);
transition: background 0.15s;
}
.ppn-next {
padding: 32px 52px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
transition: background 0.15s;
}
a.ppn-prev:hover, a.ppn-next:hover { background: rgba(90,61,55,0.03); }
.ppn-dir {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pave);
margin-bottom: 10px;
}
.ppn-title {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.1rem, 1.8vw, 1.5rem);
color: var(--ink);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 6px;
}
a.ppn-prev:hover .ppn-title, a.ppn-next:hover .ppn-title { color: var(--teal); }
.ppn-meta {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
color: var(--pave);
letter-spacing: 0.08em;
}
.ppn-none {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-base);
color: var(--pave);
}
/* ── BREADCRUMB ── */
.breadcrumb {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pave);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.breadcrumb a { color: var(--pave); }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb-sep { color: var(--rule); }
.breadcrumb-current { color: var(--ink); }
/* ── HOMEPAGE HERO ── */
.home-hero {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 0.5px solid var(--rule);
}
/* Dark panel */
.hero-image-panel {
background: var(--cover-bg);
padding: 36px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-right: 0.5px solid var(--hero-dk);
position: relative;
overflow: hidden;
min-height: 340px;
gap: 0;
}
/* Grain + grid texture on cover panel */
.hero-image-panel::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
background-size: 300px 300px;
pointer-events: none;
z-index: 0;
}
.hero-image-panel::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(249,249,247,0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(249,249,247,0.022) 1px, transparent 1px);
background-size: 44px 44px;
pointer-events: none;
z-index: 0;
}
.hero-watermark {
position: absolute;
font-family: var(--serif);
font-style: italic;
font-size: 280px;
color: rgba(249,249,247,0.1);
line-height: 1;
bottom: -40px;
left: -10px;
letter-spacing: -0.05em;
pointer-events: none;
user-select: none;
}
.hero-entry-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(249,249,247,0.3);
position: absolute;
top: 44px;
left: 52px;
z-index: 1;
}
.hero-bottom { position: relative; z-index: 1; }
.hero-entry-label { z-index: 1; }
.hero-series-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(249,249,247,0.38);
margin-bottom: 12px;
}
.hero-post-title {
font-family: var(--serif);
font-size: clamp(2.75rem, 5vw, 3.75rem);
font-weight: 400;
color: #F9F9F7;
line-height: 0.92;
letter-spacing: -0.025em;
margin-bottom: 14px;
}
.hero-post-title em { font-style: italic; color: #536858; }
.hero-post-title a { color: inherit; }
.hero-author {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: rgba(249,249,247,0.5);
letter-spacing: 0.02em;
}
/* Hero illustration SVG */
.hero-illustration-svg {
width: 100%;
max-width: 480px;
height: auto;
display: block;
margin-bottom: 20px;
position: relative;
z-index: 1;
flex-shrink: 0;
}
/* Stars canvas */
.hero-stars-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* Mobile-only strip inside dark panel */
.hero-mobile-strip {
display: none;
}
.hero-mobile-strip-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(249,249,247,0.38);
}
.hero-spoiler-pill {
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: #f0f4f8;
background: rgba(249,249,247,0.12);
border: 0.5px solid rgba(249,249,247,0.25);
padding: 3px 8px;
border-radius: 2px;
white-space: nowrap;
}
/* Cover image inside dark panel (desktop) */
.hero-cover-img {
position: absolute;
right: 32px;
bottom: 56px;
width: 100px;
height: 144px;
background-size: cover;
background-position: center;
border-radius: 2px;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
/* Cover thumbnail in detail panel (mobile only) */
.hero-mobile-thumb { display: none; }
/* Detail panel */
.hero-detail-panel {
background: #E9EAEC;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
align-items: stretch;
}
.hero-detail-body {
padding: 44px 52px;
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
/* Desktop: cover left, text right */
/* Desktop + large tablet: cover left col 1, meta right col 2, excerpt+CTA in right col */
.hero-title-cover-row { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto auto auto; column-gap: 28px; align-items: start; }
.hero-title-cover-row .hero-cover-thumb-link { grid-column: 1; grid-row: 1 / 4; align-self: center; }
.hero-title-cover-row .hero-title-meta { grid-column: 2; grid-row: 1; min-width: 0; }
.hero-title-cover-row .hero-excerpt-text { grid-column: 2; grid-row: 2; margin-top: 14px; text-align: left; min-width: 0; }
.hero-title-cover-row .hero-cta { grid-column: 2; grid-row: 3; margin-top: 10px; min-width: 0; }
.hero-title-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* Edge cover — removed, thumb used at all breakpoints */
.hero-cover-edge-link { display: none; }
.hero-cover-edge { display: none; }
/* Thumb cover — shown at all breakpoints */
.hero-cover-thumb-link { display: block; text-decoration: none; }
.hero-cover-thumb { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 3px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
/* Tags footer spans full width under body */
.hero-detail-panel .hero-tags-footer {
grid-column: 1;
padding: 0 52px 28px;
margin-top: 0;
}
.hero-detail-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--pave);
margin-bottom: 0;
text-align: left;
}
.hero-meta-table { margin-bottom: 28px; }
.hero-meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 0;
border-bottom: 0.5px solid var(--rule-lt);
}
.hero-meta-row:first-child { border-top: 0.5px solid var(--rule-lt); }
.hero-meta-key {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
}
.hero-meta-val {
font-family: var(--sans);
font-size: var(--text-base);
font-weight: 400;
color: var(--ink);
}
.hero-meta-entry {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-base);
color: var(--amber);
}
/* Streamlined identity block: series + entry */
.hero-identity {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
padding: 6px 0;
border-bottom: 0.5px solid var(--rule-lt);
margin-bottom: 0;
min-width: 0;
width: 100%;
}
.hero-series-name {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pave);
text-align: right;
overflow-wrap: break-word;
word-break: break-word;
}
.hero-entry-no {
font-family: var(--serif);
font-style: italic;
font-size: 1rem;
color: var(--amber);
text-align: right;
}
.hero-excerpt-text {
font-family: var(--sans);
font-size: var(--text-base);
font-weight: 300;
color: var(--g700);
line-height: 1.85;
margin-top: 8px;
margin-bottom: 0;
align-self: stretch;
width: 100%;
text-align: left;
}
.hero-cta {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
border-bottom: 0.5px solid var(--teal);
padding-bottom: 2px;
display: block;
text-align: left;
align-self: flex-start;
margin-top: 10px;
}
.hero-tags-footer {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding-top: 18px;
border-top: 0.5px solid var(--rule-lt);
}
/* ── HERO BOOK TITLE ── */
.hero-latest-row {
margin-bottom: 28px;
}
.hero-latest-text {
min-width: 0;
text-align: right;
}
.hero-book-title {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.75rem, 3vw, 2.75rem);
font-weight: 600;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.05;
text-decoration: none;
display: block;
margin-bottom: 4px;
white-space: normal;
overflow: visible;
text-overflow: clip;
text-align: left;
}
.hero-book-title:hover { color: var(--teal); }
.hero-book-title em { font-style: italic; }
.hero-book-type {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terra);
display: block;
text-align: left;
}
.hero-book-thumb {
flex-shrink: 0;
width: 100px;
aspect-ratio: 2/3;
display: block;
position: relative;
overflow: hidden;
border: 0.5px solid var(--rule-lt);
align-self: flex-start;
}
.hero-book-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* ── TAG STRIP ── */
.cats-sep { font-size: var(--text-sm); color: var(--rule); }
/* ── SECTION HEADER ── */
.section-header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 11px 52px;
border-bottom: 0.5px solid var(--rule);
}
.section-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--g700);
}
.section-view-all {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal);
border-bottom: 0.5px solid var(--teal);
padding-bottom: 1px;
}
/* ── SERIES CARD GRID ── */
/* ── WLOF DARK PANEL ── */
.wlof-left { padding-right: 52px; }
.wlof-label { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,244,238,0.3); margin-bottom: 18px; }
.wlof-title { font-family: var(--serif); font-size: clamp(2rem,4vw,2.75rem); color: #F7F4EE; line-height: 0.92; letter-spacing: -0.03em; margin-bottom: 18px; }
.wlof-title em { font-style: italic; color: #536858; }
.wlof-body { font-family: var(--sans); font-size: var(--text-sm); font-weight: 300; color: rgba(247,244,238,0.4); line-height: 1.85; margin-bottom: 18px; }
.wlof-cta { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #536858; border-bottom: 0.5px solid #c8a8a0; padding-bottom: 1px; display: inline; }
.wlof-list-hd { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,244,238,0.3); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 0.5px solid rgba(247,244,238,0.08); }
.wlof-char { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 0.5px solid rgba(247,244,238,0.06); }
.wlof-char:last-child { border-bottom: none; }
.wlof-char-name { font-family: var(--serif); font-size: var(--text-base); color: #F7F4EE; letter-spacing: -0.01em; }
.wlof-char-role { font-family: var(--sans); font-size: var(--text-xs); font-weight: 300; color: rgba(247,244,238,0.35); }
/* ── POST HEADER ── */
.post-header { padding: 28px 52px; border-bottom: 0.5px solid var(--rule); }
.post-header-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
.post-header-title-col { min-width: 0; }
.post-header-entry-col { text-align: right; flex-shrink: 0; }
.post-title { font-family: var(--serif); font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 400; line-height: 1.05; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 12px; display: block; }
.post-title em { font-style: italic; }
.post-byline { font-family: var(--sans); font-size: var(--text-base); font-weight: 300; color: var(--pave); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-type-badge { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); background: rgba(142,106,96,0.08); padding: 2px 7px; border-radius: 2px; }
.post-header-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.post-entry-label { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pave); display: block; text-align: right; margin-top: 4px; }
.post-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 360px; }
/* Mobile cover image — hidden on desktop, shown below header on tablet/mobile */
.post-mobile-cover { display: none; }
.post-mobile-cover-img { width: 100%; max-height: 320px; object-fit: cover; object-position: center top; display: block; }
/* ── POST LAYOUT ── */
.post-layout { display: grid; grid-template-columns: 280px 1fr 280px; border-bottom: 0.5px solid var(--rule); align-items: start; position: relative; overflow: hidden; }
.post-content { padding: 40px 48px; min-width: 0; }
.post-content h2 {
font-family: var(--serif);
font-size: clamp(1.25rem, 2vw, 1.625rem);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 44px 0 16px;
width: 100%;
}
.post-content h2 em { font-style: italic; }
.post-content h2:first-child { margin-top: 0; }
.post-content h3 {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--g700);
margin: 32px 0 12px;
}
.post-content h3:first-child { margin-top: 0; }
.post-content p {
font-family: var(--sans);
font-size: var(--text-base);
font-weight: 300;
color: var(--ink);
line-height: 2;
margin-bottom: 16px;
}
.post-content p strong {
font-weight: 500;
color: var(--ink);
}
.post-content ul, .post-content ol {
list-style: none;
margin-bottom: 20px;
}
.post-content ul li, .post-content ol li {
font-family: var(--sans);
font-size: var(--text-base);
font-weight: 300;
color: var(--ink);
line-height: 1.8;
padding: 9px 0 9px 20px;
border-bottom: 0.5px solid var(--rule-lt);
position: relative;
}
.post-content ul li:first-child, .post-content ol li:first-child { border-top: 0.5px solid var(--rule-lt); }
.post-content ul li::before { content: "—"; position: absolute; left: 0; color: var(--rule); }
.post-content ol { counter-reset: ol-counter; }
.post-content ol li::before { content: counter(ol-counter, decimal-leading-zero); counter-increment: ol-counter; position: absolute; left: 0; font-family: var(--serif); font-style: italic; font-size: var(--text-sm); color: var(--amber); }
.post-content hr {
border: none;
border-top: 0.5px solid var(--rule);
margin: 36px 0;
}
.post-content a { color: var(--teal); border-bottom: 0.5px solid var(--teal); padding-bottom: 1px; }
.post-content a:hover { color: var(--ink); border-color: var(--ink); }
.post-content blockquote {
border-left: 2px solid var(--terra);
padding: 4px 0 4px 22px;
margin: 32px 0;
max-width: 540px;
}
.post-content blockquote p {
font-family: var(--serif);
font-style: italic;
font-size: 1.375rem;
font-weight: 400;
color: var(--ink);
line-height: 1.45;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.post-content blockquote cite,
.post-content blockquote footer {
display: block;
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pave);
font-style: normal;
margin-top: 10px;
}
.post-sidebar { padding: 32px 52px 32px 20px; }
.post-sidebar-sticky { position: sticky; top: 20px; }
/* ── RECAP SECTIONS ── */
.recap-section { margin-bottom: 40px; }
.recap-section-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--g700);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 0.5px solid var(--rule);
display: flex;
align-items: center;
gap: 6px;
}
.characters-group { margin-bottom: 18px; }
.characters-group-label { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pave); margin-bottom: 8px; }
.character-row { display: grid; grid-template-columns: 160px 1fr; padding: 9px 0; border-bottom: 0.5px solid var(--rule-lt); align-items: baseline; }
.character-row:first-of-type { border-top: 0.5px solid var(--rule-lt); }
.character-name { font-family: var(--serif); font-size: var(--text-base); color: var(--ink); letter-spacing: -0.01em; }
.character-name em { font-style: italic; }
.character-role { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: var(--g700); line-height: 1.6; }
.recap-prose { font-family: var(--sans); font-size: var(--text-base); font-weight: 300; color: var(--ink); line-height: 2; }
.recap-prose p { margin-bottom: 18px; }
.recap-prose p:last-child { margin-bottom: 0; }
.pull-quote { border-left: 1.5px solid var(--terra); padding-left: 22px; margin: 32px 0; max-width: 500px; }
.pull-quote-text { font-family: var(--serif); font-size: 1.375rem; font-style: italic; line-height: 1.5; color: var(--ink); margin-bottom: 8px; }
.pull-quote-attr { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pave); }
.pull-quote-attr em { font-style: normal; color: var(--terra); }
.recap-note { background: var(--terra-lt); padding: 16px 20px; margin: 22px 0; max-width: 500px; }
.recap-note-kicker { font-family: var(--sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin-bottom: 8px; }
.recap-note-text { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: var(--g700); line-height: 1.7; }
.recap-series-note { border-top: 0.5px solid var(--rule-lt); border-bottom: 0.5px solid var(--rule-lt); padding: 10px 0; margin-bottom: 28px; }
.recap-series-note-text { font-family: var(--sans); font-size: var(--text-xs); font-weight: 300; color: var(--pave); line-height: 1.6; }
.recap-series-note-text em { font-style: normal; font-weight: 400; color: var(--ink); }
/* ── ORNAMENT SYSTEM ── */
/* Drop cap — auto-applied to first paragraph of post content */
.post-content-inner > p:first-of-type::first-letter,
.has-drop-cap::first-letter {
font-family: var(--serif);
font-size: 3.75rem;
font-weight: 600;
font-style: italic;
float: left;
line-height: 0.8;
margin-right: 8px;
margin-top: 6px;
color: var(--terra);
}
/* End mark — placed after post content */
.aw-end-mark {
display: block;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 1.125rem;
color: var(--pave);
margin: 36px 0 0;
letter-spacing: 0.05em;
}
/* Note / aside block — usable in WP editor with custom class */
.aw-note {
background: var(--terra-lt);
padding: 14px 18px;
border-left: 2px solid var(--terra);
margin: 28px 0;
}
.aw-note-kicker {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--terra);
display: block;
margin-bottom: 7px;
}
.aw-note p,
.aw-note-text {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--ink);
line-height: 1.75;
margin: 0;
}
/* Divider variants */
.aw-div {
display: flex;
align-items: center;
gap: 14px;
margin: 36px 0;
}
.aw-div-line { flex: 1; height: 0.5px; background: var(--rule); }
.aw-div-mark {
font-family: var(--serif);
font-style: italic;
color: var(--pave);
font-size: 1rem;
letter-spacing: 0.05em;
flex-shrink: 0;
}
/* Diamond divider */
.aw-div-diamond {
display: flex;
align-items: center;
gap: 14px;
margin: 36px 0;
}
.aw-div-diamond .aw-div-line { flex: 1; height: 0.5px; background: var(--rule); }
.aw-div-gem {
width: 5px;
height: 5px;
background: var(--terra);
transform: rotate(45deg);
flex-shrink: 0;
}
/* Dot divider */
.aw-div-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 36px 0;
}
.aw-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--pave);
}
.aw-dot.mid {
width: 4px;
height: 4px;
background: var(--terra);
}
/* Short rule */
.aw-div-short {
width: 40px;
height: 0.5px;
background: var(--rule);
margin: 36px auto;
}
/* Spoiler pill */
.aw-spoiler-pill {
display: inline-block;
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--terra-lt);
color: var(--terra);
padding: 3px 10px;
border: 0.5px solid var(--rule);
}
/* Entry stamp */
.aw-entry-stamp {
font-family: var(--serif);
font-style: italic;
font-size: 0.9rem;
color: var(--amber);
letter-spacing: 0.02em;
border: 0.5px solid var(--rule);
display: inline-block;
padding: 4px 12px;
}
.bullet-list { display: flex; flex-direction: column; }
.bullet-item { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--rule-lt); font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: var(--g700); line-height: 1.7; }
.bullet-item:first-child { border-top: 0.5px solid var(--rule-lt); }
.bullet-dash { color: var(--rule); }
/* ── SIDEBAR BOOK COVER ── */
.sidebar-cover {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 0.5px solid var(--rule-lt);
}
.sidebar-cover-img {
width: 100%;
height: auto;
display: block;
border: 0.5px solid var(--rule-lt);
}
/* ── SIDEBAR ── */
.sidebar-section { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 0.5px solid var(--rule-lt); }
.sidebar-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sidebar-label { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pave); margin-bottom: 12px; display: flex; align-items: center; gap: 4px; }
.sidebar-series-item { padding: 6px 0; border-bottom: 0.5px solid var(--rule-lt); display: flex; align-items: flex-start; gap: 10px; }
.sidebar-series-item:last-child { border-bottom: none; }
.ssn { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; color: var(--pave); flex-shrink: 0; padding-top: 2px; }
.ss-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-title { font-family: var(--serif); font-size: var(--text-sm); color: var(--pave); letter-spacing: -0.01em; line-height: 1.3; }
.ss-meta { font-family: var(--sans); font-size: var(--text-xs); font-weight: 300; color: var(--pave-dim); line-height: 1.4; }
.ss-title.current { color: var(--teal); }
.ssn.current { color: var(--teal); }
.sidebar-series-item.current { background: var(--teal-lt); margin: 0 -16px; padding: 6px 16px; border-bottom: none; }
.sidebar-nav-item { margin-bottom: 12px; }
.sidebar-nav-item:last-child { margin-bottom: 0; }
.nav-dir { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rule); display: block; margin-bottom: 3px; }
.nav-post-title { font-family: var(--serif); font-size: var(--text-sm); color: var(--ink); font-style: italic; display: block; line-height: 1.3; }
.nav-post-title:hover { color: var(--teal); }
/* ── POST SUBSCRIBE PROMPT ── */
.post-subscribe-prompt {
border-top: 0.5px solid var(--rule);
border-bottom: 0.5px solid var(--rule);
background: var(--teal-lt);
padding: 36px 52px;
}
.psp-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.psp-kicker {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal);
display: block;
margin-bottom: 8px;
}
.psp-heading {
font-family: var(--serif);
font-size: 1.375rem;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 6px;
}
.psp-body {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--g700);
line-height: 1.7;
max-width: 420px;
margin: 0;
}
.psp-cta {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #F9F9F7;
background: var(--teal);
padding: 12px 24px;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s;
display: inline-block;
}
.psp-cta:hover { background: var(--hero-dk); color: var(--ink); }
@media (max-width: 767px) {
.post-subscribe-prompt { padding: 28px; }
.psp-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 599px) {
.post-subscribe-prompt { padding: 22px 20px; }
.psp-cta { width: 100%; text-align: center; }
}
/* ── POST FOOTER PANEL ── */
.post-footer-panel {
background: var(--rule-lt);
border-top: 0.5px solid var(--rule);
border-bottom: 0.5px solid var(--rule);
padding: 36px 52px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 52px;
align-items: start;
}
.pf-left {
padding-top: 2px;
}
.pf-kicker {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pave);
margin-bottom: 14px;
}
.pf-view-all {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
border-bottom: 0.5px solid var(--ink);
padding-bottom: 2px;
display: inline-block;
transition: color 0.15s, border-color 0.15s;
}
.pf-view-all:hover { color: var(--teal); border-color: var(--teal); }
.pf-right {}
.pf-list-hd {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
margin-bottom: 0;
padding-bottom: 10px;
border-bottom: 0.5px solid var(--rule);
}
.pf-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 0;
border-bottom: 0.5px solid var(--rule-lt);
gap: 16px;
}
.pf-item:last-child { border-bottom: none; }
.pf-item-title {
font-family: var(--serif);
font-size: var(--text-sm);
font-style: italic;
color: var(--ink);
letter-spacing: -0.01em;
text-decoration: none;
transition: color 0.15s;
}
.pf-item-title:hover { color: var(--teal); }
.pf-item-meta {
font-family: var(--mono, "Courier New", monospace);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
white-space: nowrap;
flex-shrink: 0;
}
/* ── ALL POSTS JOURNAL LOG ── */
.jnl-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 44px 52px 32px;
border-bottom: 0.5px solid var(--rule);
}
.jnl-header-right { text-align: right; }
.jnl-stat-n {
font-family: var(--serif);
font-style: italic;
font-size: 3rem;
color: var(--ink);
line-height: 1;
letter-spacing: -0.03em;
}
.jnl-stat-l {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
margin-top: 4px;
}
.jnl-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 52px;
border-bottom: 0.5px solid var(--rule);
gap: 24px;
flex-wrap: wrap;
}
.jnl-log { border-bottom: 0.5px solid var(--rule); }
.jnl-year-group { }
.jnl-row {
display: grid;
grid-template-columns: 52px minmax(0,1fr) minmax(0,1.2fr) 130px 110px 82px;
padding: 10px 52px;
border-bottom: 0.5px solid var(--rule-lt);
align-items: baseline;
gap: 12px;
text-decoration: none;
color: inherit;
transition: background 0.12s;
}
.jnl-row:last-child { border-bottom: none; }
.jnl-row:hover { background: rgba(45,74,82,0.03); }
.jnl-entry {
font-family: var(--mono, "Courier New", monospace);
font-size: var(--text-xs);
color: var(--pave);
flex-shrink: 0;
}
.jnl-title {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--ink);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jnl-row:hover .jnl-title { color: var(--ink); }
.jnl-title em { font-style: italic; }
.jnl-author {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--pave);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jnl-foot-mob { display: none; }
.jnl-posted-mob {
font-family: var(--mono, "Courier New", monospace);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
white-space: nowrap;
}
.jnl-type,
.jnl-type-mob {
font-family: var(--mono, "Courier New", monospace);
font-size: 0.5rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pave);
border: 0.5px solid var(--rule);
padding: 2px 6px;
display: inline-block;
white-space: nowrap;
}
/* WLOF card variant — slightly muted */
.bk-card-wlof .bk-card-cover { opacity: 0.85; }
.bk-card-wlof .bk-card-title { color: var(--teal); }
/* Responsive journal */
@media (max-width: 1023px) {
.jnl-row { grid-template-columns: 44px minmax(0,1fr) 110px 60px 72px; padding: 10px 28px; }
.jnl-excerpt { display: none; }
.jnl-desc { display: block; }
.jnl-posted { display: block; }
.jnl-header { padding: 32px 28px 24px; }
.jnl-controls { padding: 10px 28px; }
}
@media (max-width: 599px) {
.jnl-row { grid-template-columns: 40px 1fr; padding: 9px 20px; gap: 8px; }
.jnl-header { padding: 24px 20px 18px; }
.jnl-controls { padding: 9px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ── BOOKS GRID PAGE ── */
.bk-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 52px;
border-bottom: 0.5px solid var(--rule);
gap: 24px;
flex-wrap: wrap;
}
.bk-search-wrap {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
max-width: 400px;
background: var(--terra-lt);
padding: 10px 16px;
border-radius: 6px;
border: 0.5px solid var(--rule);
}
.bk-search-icon { color: var(--terra); flex-shrink: 0; display: flex; }
.bk-search {
border: none;
background: transparent;
padding: 0;
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--ink);
width: 100%;
outline: none;
}
.bk-search:focus { outline: none; }
.bk-search::placeholder { color: var(--pave); }
.bk-sort-wrap {
display: flex;
align-items: center;
gap: 0;
}
.bk-sort-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
margin-right: 14px;
flex-shrink: 0;
}
.bk-sort-list {
display: flex;
}
.bk-sort-btn {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pave);
background: none;
border: none;
border-right: 0.5px solid var(--rule);
padding: 4px 12px;
cursor: pointer;
transition: color 0.15s;
}
.bk-sort-btn:last-child { border-right: none; }
.bk-sort-btn:hover { color: var(--ink); }
.bk-sort-btn.active { color: var(--ink); border-bottom: 0.5px solid var(--ink); }
/* Book cover grid */
.bk-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 16px;
background: var(--paper);
border-bottom: 0.5px solid var(--rule);
}
.bk-card {
background: var(--paper);
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: background 0.15s;
padding: 0;
}
.bk-card:hover { background: rgba(45,74,82,0.03); }
.bk-card-cover {
position: relative;
width: 100%;
padding-top: 150%;
overflow: hidden;
border-radius: 2px;
}
.bk-card-cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: opacity 0.2s;
}
.bk-card:hover .bk-card-cover img { opacity: 0.92; }
.bk-card-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-style: italic;
font-size: 2.5rem;
color: rgba(247,244,238,0.12);
}
.bk-card-entry {
position: absolute;
bottom: 8px;
left: 10px;
font-family: var(--sans);
font-size: 0.625rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(247,244,238,0.4);
}
.bk-card-body {
padding: 8px 6px 12px;
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.bk-card-title {
font-family: var(--serif);
font-size: 0.875rem;
font-weight: 400;
color: var(--ink);
line-height: 1.25;
letter-spacing: -0.01em;
display: block;
transition: color 0.15s;
white-space: normal;
}
.bk-card:hover .bk-card-title { color: var(--teal); }
.bk-card-title em { font-style: italic; }
.bk-card-series {
font-family: var(--sans);
font-size: 0.5625rem;
font-weight: 400;
color: var(--terra);
letter-spacing: 0.04em;
display: block;
margin-top: 2px;
}
.bk-card-author {
font-family: var(--sans);
font-size: 0.5625rem;
font-weight: 300;
color: var(--pave);
display: block;
}
.bk-card-year {
font-family: var(--sans);
font-size: 0.5625rem;
font-weight: 300;
color: var(--rule);
display: inline;
}
/* Inline meta line: series · author · year */
.bk-card-meta-line {
font-family: var(--sans);
font-size: 0.5625rem;
font-weight: 300;
color: var(--pave);
display: block;
white-space: normal;
margin-top: 3px;
line-height: 1.6;
}
.bk-card-meta-line .bm-series { color: var(--terra); }
.bk-card-meta-line .bm-sep { color: var(--rule); margin: 0 2px; }
/* Empty state */
.bk-empty {
padding: 80px 52px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
border-bottom: 0.5px solid var(--rule);
}
.bk-empty-mark {
font-family: var(--serif);
font-style: italic;
font-size: 2rem;
color: var(--rule);
}
.bk-empty p {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--pave);
}
/* ── RESPONSIVE: books grid ── */
@media (max-width: 1023px) {
.bk-controls { padding: 11px 28px; }
.bk-grid:not(.bk-grid--gallery) { grid-template-columns: repeat(7, 1fr); }
.bk-grid.bk-grid--gallery { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 599px) {
.bk-grid:not(.si-desktop-grid):not(.bk-grid--gallery) { grid-template-columns: repeat(2, 1fr); }
.bk-empty { padding: 52px 20px; }
}
/* ── ARCHIVE PAGE ── */
.archive-hero { padding: 52px; border-bottom: 0.5px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.archive-hero-title { font-family: var(--serif); font-size: clamp(2.5rem,5vw,3.75rem); font-weight: 400; line-height: 0.92; color: var(--ink); letter-spacing: -0.03em; margin-bottom: 14px; }
.archive-hero-body { font-family: var(--sans); font-size: var(--text-base); font-weight: 300; color: var(--g700); line-height: 1.8; max-width: 360px; }
.archive-stats { display: flex; flex-direction: column; }
.archive-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 0.5px solid var(--rule-lt); }
.archive-stat:first-child { border-top: 0.5px solid var(--rule-lt); }
.archive-stat-k { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pave); }
.archive-stat-v { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }
.archive-stat-v em { font-style: italic; font-size: var(--text-base); color: var(--pave); }
.filter-list { display: flex; }
.filter-item { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pave); padding: 5px 14px; border-right: 0.5px solid var(--rule); cursor: pointer; }
.filter-item:first-child { padding-left: 0; }
.filter-item:last-child { border-right: none; }
.filter-item.active { color: var(--ink); border-bottom: 1px solid var(--ink); }
.filter-count { font-family: var(--sans); font-size: var(--text-xs); font-weight: 300; color: var(--pave); }
/* ── ABOUT ── */
.about-layout { display: grid; grid-template-columns: 1fr 300px; border-bottom: 0.5px solid var(--rule); }
.about-main { padding: 52px; border-right: 0.5px solid var(--rule); }
.about-eyebrow { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pave); margin-bottom: 22px; }
.about-title { font-family: var(--serif); font-size: clamp(2.5rem,5vw,3.25rem); font-weight: 400; line-height: 0.92; color: var(--ink); letter-spacing: -0.03em; margin-bottom: 32px; }
.about-title em { font-style: italic; }
.about-body { font-family: var(--sans); font-size: var(--text-base); font-weight: 300; color: var(--g700); line-height: 1.9; max-width: 540px; }
.about-body p { margin-bottom: 16px; }
.about-aside { padding: 36px 28px; }
.about-aside-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 0.5px solid var(--rule-lt); }
.about-aside-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.about-aside-label { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pave); margin-bottom: 12px; }
.about-aside-body { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: var(--g700); line-height: 1.7; }
.about-aside-list { display: flex; flex-direction: column; }
.about-aside-item { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: var(--g700); padding: 5px 0; border-bottom: 0.5px solid var(--rule-lt); }
.about-aside-item:last-child { border-bottom: none; }
/* ── SUBSCRIBE ── */
.subscribe-layout { display: grid; grid-template-columns: 420px 1fr; min-height: calc(100vh - 80px); border-bottom: 0.5px solid var(--rule); }
.subscribe-dark { background: var(--teal); padding: 60px 52px; display: flex; flex-direction: column; justify-content: space-between; border-right: 0.5px solid var(--hero-dk); position: relative; overflow: hidden; }
.subscribe-wm { position: absolute; font-family: var(--serif); font-style: italic; font-size: 260px; color: rgba(247,244,238,0.04); line-height: 1; bottom: -36px; right: -16px; letter-spacing: -0.05em; pointer-events: none; }
.subscribe-dark-top { position: relative; z-index: 1; }
.subscribe-eyebrow { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,244,238,0.3); margin-bottom: 18px; }
.subscribe-title { font-family: var(--serif); font-size: clamp(2.25rem,4vw,3rem); color: #F7F4EE; line-height: 0.92; letter-spacing: -0.03em; margin-bottom: 18px; }
.subscribe-title em { font-style: italic; color: #536858; }
.subscribe-body { font-family: var(--sans); font-size: var(--text-sm); font-weight: 300; color: rgba(247,244,238,0.45); line-height: 1.85; max-width: 320px; }
.subscribe-body--small { font-size: var(--text-xs); color: rgba(247,244,238,0.3); margin-top: 10px; }
.subscribe-dark-bottom { position: relative; z-index: 1; }
.subscribe-promise { display: flex; flex-direction: column; }
.subscribe-promise-item { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid rgba(247,244,238,0.08); font-family: var(--sans); font-size: var(--text-sm); font-weight: 300; color: rgba(247,244,238,0.35); }
.subscribe-promise-item:first-child { border-top: 0.5px solid rgba(247,244,238,0.08); }
.promise-dash { color: rgba(247,244,238,0.2); }
.subscribe-light { padding: 60px 72px; display: flex; flex-direction: column; justify-content: center; }
.subscribe-light-inner { max-width: 480px; width: 100%; }
.subscribe-form-label { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pave); margin-bottom: 36px; }
.subscribe-field { margin-bottom: 22px; }
.subscribe-field label { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pave); display: block; margin-bottom: 8px; }
.subscribe-input { width: 100%; border: none; border-bottom: 0.5px solid var(--rule); background: transparent; padding: 9px 0; font-family: var(--sans); font-size: var(--text-base); font-weight: 400; color: var(--ink); outline: none; transition: border-color 0.15s; }
.subscribe-input:focus { border-bottom-color: var(--teal); }
.subscribe-input::placeholder { color: var(--rule); }
.subscribe-btn { background: var(--teal); color: #F7F4EE; border: none; padding: 13px 26px; font-family: var(--sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; margin-top: 10px; transition: background 0.15s; }
.subscribe-btn:hover { background: var(--hero-dk); }
.subscribe-note { font-family: var(--sans); font-size: var(--text-xs); font-weight: 300; color: var(--pave); margin-top: 18px; line-height: 1.7; max-width: 320px; }
/* WPForms inside subscribe/request panels */
.subscribe-light .wpforms-container { max-width: 100%; }
.subscribe-light .wpforms-field { margin-bottom: 0 !important; }
.subscribe-light .wpforms-field-container { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.subscribe-light .wpforms-field-label { font-family: var(--sans); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: var(--pave-dim); margin-bottom: 4px; }
.subscribe-light .wpforms-field-sublabel { font-family: var(--sans); font-size: 0.6875rem; font-weight: 300; color: var(--pave-dim); margin-top: 2px; display: none; }
.subscribe-light .wpforms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.subscribe-light .wpforms-field input[type=text],
.subscribe-light .wpforms-field input[type=email],
.subscribe-light .wpforms-field input[type=tel],
.subscribe-light .wpforms-field textarea,
.subscribe-light .wpforms-field select { width: 100%; border: none; border-bottom: 0.5px solid var(--rule); background: transparent; padding: 7px 0; font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: var(--ink); outline: none; border-radius: 0; box-shadow: none; transition: border-color 0.2s; }
.subscribe-light .wpforms-field input:focus,
.subscribe-light .wpforms-field textarea:focus { border-bottom-color: var(--teal); }
.subscribe-light .wpforms-field textarea { resize: none; min-height: 56px; }
.subscribe-light .wpforms-submit-container { margin-top: 24px; display: flex; align-items: center; gap: 20px; }
.subscribe-light .wpforms-submit { background: transparent; color: var(--teal); border: 0.5px solid var(--teal); padding: 10px 24px; font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s; border-radius: 0; }
.subscribe-light .wpforms-submit:hover { background: var(--teal); color: #F7F4EE; }
.subscribe-light .wpforms-field-required { color: var(--teal); }
.subscribe-light .wpforms-error-container,
.subscribe-light label.wpforms-error { font-family: var(--sans); font-size: var(--text-xs); color: var(--g700); margin-top: 4px; }
.subscribe-light .wpforms-confirmation-container-full { font-family: var(--sans); font-size: var(--text-base); color: var(--g700); padding: 20px 0; border-top: 0.5px solid var(--rule-lt); }
/* ── SITE FOOTER ── */
.site-footer { display: grid; grid-template-columns: 1fr auto; padding: 22px 52px; border-top: 0.5px solid var(--rule); gap: 52px; align-items: start; }
.footer-logo { font-family: var(--serif); font-size: var(--text-base); color: var(--ink); display: block; margin-bottom: 8px; }
.footer-tagline { font-family: var(--sans); font-size: var(--text-sm); font-weight: 300; color: var(--g700); line-height: 1.8; max-width: 260px; }
.footer-url { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; color: var(--pave); margin-top: 12px; display: block; }
.footer-cols { display: flex; gap: 52px; }
.footer-col-hd { font-family: var(--sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--g700); margin-bottom: 10px; display: block; }
.footer-col a { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: var(--teal); display: block; padding: 3px 0; }
.footer-col a:hover { color: var(--ink); }
/* ── RESPONSIVE: TABLET (max 1023px) ── */
@media (max-width: 1023px) {
.nav-inner { grid-template-columns: auto auto; gap: 16px; padding: 14px 28px; justify-content: space-between; }
.main-navigation { display: none; }
.home-hero { grid-template-columns: 1fr; }
.hero-image-panel { min-height: 280px; border-right: none; border-bottom: 0.5px solid var(--hero-dk); padding: 32px 28px; }
.hero-entry-label { top: 32px; left: 28px; }
.hero-detail-panel { padding: 32px 28px; }
.hero-meta-table { display: grid; grid-template-columns: 1fr 1fr; }
.hero-meta-row:nth-child(even) { padding-left: 16px; border-left: 0.5px solid var(--rule-lt); }
.hero-meta-row:first-child { border-top: none; }
.section-header { padding: 10px 28px; }
.ppn-prev, .ppn-next { padding: 24px 28px; }
.archive-hero { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px; }
.archive-stats { display: none; }
.archive-table-header { display: none; }
.archive-row { grid-template-columns: 44px 1fr; padding: 13px 28px; }
.ar-type, .ar-tags { display: none; }
.about-layout { grid-template-columns: 1fr; }
.about-aside { border-top: 0.5px solid var(--rule); }
.about-main { padding: 36px 28px; }
.subscribe-layout { grid-template-columns: 1fr; min-height: auto; }
.subscribe-dark { padding: 44px 40px; min-height: 280px; }
.subscribe-light { padding: 44px 40px; }
.site-footer { grid-template-columns: 1fr; gap: 22px; padding: 22px 28px; }
}
/* ── RESPONSIVE: MOBILE (max 599px) ── */
@media (max-width: 599px) {
.nav-inner { padding: 12px 20px; }
.site-description { display: none; }
.hero-image-panel { min-height: 160px; padding: 22px 20px; border-right: none; border-bottom: 0.5px solid var(--hero-dk); }
.hero-watermark { left: auto; right: -20px; }
.hero-entry-label { top: 22px; left: 20px; }
.hero-post-title { font-size: 2.5rem; }
.hero-detail-panel { padding: 20px; }
.section-header { padding: 9px 20px; }
.post-header { padding: 22px 20px; }
.post-title { font-size: 2.25rem; }
.post-content { padding: 24px 20px; }
.post-footer-panel { padding: 22px 20px; gap: 16px; }
.post-page-nav { grid-template-columns: 1fr; }
.ppn-prev { border-right: none; border-bottom: 0.5px solid var(--rule-lt); padding: 20px 20px; }
.ppn-next { align-items: flex-start; text-align: left; padding: 20px 20px; }
.archive-hero { padding: 28px 20px; }
.archive-row { padding: 12px 20px; }
.about-main { padding: 28px 20px; }
.about-aside { padding: 22px 20px; }
.subscribe-dark { padding: 32px 24px; }
.subscribe-light { padding: 32px 24px; }
.site-footer { padding: 18px 20px; }
.footer-cols { gap: 28px; }
}
/* ── HOMEPAGE NEW SECTIONS ── */
/* Latest posts strip */
.hp-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
gap: 1px;
background: var(--rule-lt);
border-bottom: 0.5px solid var(--rule);
justify-content: start;
}
.hp-strip::-webkit-scrollbar { display: none; }
.hp-card {}
/* ── GALLERY VIEW (book recaps page) ── */
/* gallery activates at mobile only — see 599px media query */
@media (max-width: 599px) {
.bk-grid.bk-grid--gallery { grid-template-columns: repeat(3, 1fr); }
.bk-grid--gallery .bk-card-body { display: none; }
.bk-grid--gallery .bk-card { position: relative; overflow: hidden; padding: 0; }
.bk-grid--gallery .bk-card-cover { border-bottom: none; border-radius: 0; }
.bk-grid--gallery .bk-card-hover { display: none; }
}
.bk-card-hover { display: none; }
/* ── MOBILE RECENT LIST ── */
.hp-recent-list { display: none; }
.hp-see-all {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--sage-lt);
padding: 64px 52px;
text-decoration: none;
border-top: 0.5px solid #D2DAD3;
border-bottom: 0.5px solid #D2DAD3;
transition: background 0.15s;
}
.hp-see-all:hover { background: #D8DED9; }
.hp-see-all-title {
font-family: var(--serif);
font-size: 2.25rem;
font-style: italic;
color: #1E2B22;
letter-spacing: -0.01em;
display: block;
}
.hp-see-all-sub {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--sage);
letter-spacing: 0.08em;
margin-top: 4px;
display: block;
}
.hp-see-all-arrow {
font-family: var(--sans);
font-size: 2rem;
color: var(--sage);
transition: transform 0.15s;
}
.hp-see-all:hover .hp-see-all-arrow { transform: translateX(4px); }
@media (max-width: 599px) {
.hp-strip { display: none; }
.hp-recent-list {
display: block;
border-bottom: 0.5px solid var(--rule);
padding-bottom: 8px;
}
.hp-list-row {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 20px;
border-bottom: 0.5px solid var(--rule-lt);
text-decoration: none;
color: inherit;
}
.hp-list-row:last-child { border-bottom: none; }
.hp-list-thumb {
width: 44px;
height: 63px;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.hp-list-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.hp-list-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.hp-list-kicker {
font-family: var(--sans);
font-size: 0.5625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--terra);
margin-bottom: 1px;
}
.hp-list-badge {
display: inline-block;
font-size: 0.5rem;
letter-spacing: 0.08em;
border: 0.5px solid var(--rule);
color: var(--pave);
padding: 1px 4px;
margin-left: 4px;
vertical-align: middle;
font-style: normal;
}
.hp-list-title {
font-family: var(--serif);
font-size: 0.875rem;
font-style: italic;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink);
display: block;
}
.hp-list-sub {
font-family: var(--sans);
font-size: 0.625rem;
font-weight: 300;
color: var(--pave);
display: block;
margin-top: 1px;
}
.hp-see-all { padding: 44px 20px; }
.hp-see-all-title { font-size: 1.75rem; }
}
/* Three column: popular / trending / coming soon */
.hp-three {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1px;
background: var(--rule-lt);
border-bottom: 0.5px solid var(--rule);
}
.pop-section,
.cs-section {
background: var(--paper);
padding: 28px 36px;
overflow: hidden;
min-width: 0;
}
.cs-section {}
.pop-section-hd {
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 0.5px solid var(--rule);
}
.pop-row {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 0;
border-bottom: 0.5px solid var(--rule-lt);
text-decoration: none;
color: inherit;
transition: background 0.12s;
}
.pop-row:last-child { border-bottom: none; }
.pop-row:hover { opacity: 0.75; }
.pop-n {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
color: var(--pave-dim);
min-width: 18px;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.pop-views { display: none; }
.pop-info { flex: 1; min-width: 0; }
.pop-title {
font-family: var(--serif);
font-size: var(--text-sm);
color: var(--ink);
letter-spacing: -0.01em;
display: block;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pop-series {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
display: block;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pop-views {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
color: var(--pave-dim);
flex-shrink: 0;
}
.pop-empty {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--pave);
line-height: 1.7;
font-style: italic;
}
/* Coming soon */
.cs-note {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
margin-bottom: 14px;
font-style: italic;
}
.cs-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
border-bottom: 0.5px solid var(--rule-lt);
}
.cs-item:last-child { border-bottom: none; }
.cs-info { flex: 1; min-width: 0; }
.cs-title {
font-family: var(--serif);
font-size: var(--text-sm);
color: var(--ink);
letter-spacing: -0.01em;
display: block;
line-height: 1.2;
}
.cs-meta {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
display: block;
margin-top: 1px;
}
.cs-upvote {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
background: none;
border: 0.5px solid var(--rule);
padding: 5px 8px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
flex-shrink: 0;
}
.cs-upvote:hover { border-color: var(--cover); }
.cs-upvote.voted { border-color: var(--cover); cursor: pointer; }
.cs-arrow-up {
font-size: 8px;
color: var(--pave);
line-height: 1;
display: block;
}
.cs-arrow-dn {
font-size: 8px;
color: var(--cover);
line-height: 1;
display: none;
}
/* unvoted state */
.cs-upvote:hover .cs-arrow-up { color: var(--cover); }
/* voted state — swap arrows */
.cs-upvote.voted .cs-arrow-up { display: none; }
.cs-upvote.voted .cs-arrow-dn { display: block; }
.cs-upvote.voted .cs-count { color: var(--cover); }
.cs-count {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-xs);
color: var(--pave-dim);
line-height: 1;
}
/* Responsive hp-three */
@media (max-width: 1023px) {
.hp-three { grid-template-columns: 1fr 1fr; }
.cs-section { grid-column: 1 / -1; border-right: none; border-top: 0.5px solid var(--rule-lt); }
.pop-section, .cs-section { padding: 22px 28px; }
}
@media (max-width: 599px) {
.hp-three { grid-template-columns: 1fr; }
.pop-section { display: none; }
.cs-section { grid-column: auto; border-top: none; padding: 20px; }
.hp-card { flex: 0 0 130px; min-width: 130px; }
}
/* Summary post: book list bleeds to edges of centre column */
.post-content--summary {
overflow: visible;
}
.post-content--summary .summary-books-section {
margin-left: calc(-1 * var(--content-pad, 0px));
margin-right: calc(-1 * var(--content-pad, 0px));
}
/* ── SUMMARY POST LAYOUT ── */
.summary-content-wrap {
width: 100%;
padding: 48px 12% 40px;
box-sizing: border-box;
}
.summary-content-wrap .post-content-inner {
padding: 0;
}
.summary-books-section {
border-top: 0.5px solid var(--rule);
width: 100%;
padding: 0 12%;
box-sizing: border-box;
}
.summary-books-hd {
padding: 18px 0;
border-bottom: 0.5px solid var(--rule-lt);
}
/* Each book row: portrait cover + details */
.sumbook-row {
display: grid;
grid-template-columns: 140px 1fr;
border-bottom: 0.5px solid var(--rule-lt);
text-decoration: none;
color: inherit;
transition: background 0.12s;
align-items: stretch;
margin-bottom: 24px;
}
.sumbook-row:hover { background: rgba(45,74,82,0.03); }
.sumbook-row:last-child { border-bottom: none; margin-bottom: 0; }
.sumbook-thumb {
position: relative;
width: 140px;
aspect-ratio: 2 / 3;
overflow: hidden;
flex-shrink: 0;
border-right: 0.5px solid var(--rule-lt);
}
.sumbook-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.sumbook-thumb .bk-card-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: rgba(255,255,255,0.25);
}
.sumbook-entry {
position: absolute;
bottom: 6px;
left: 7px;
font-family: var(--sans);
font-size: 0.5rem;
font-weight: 300;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.5);
}
.sumbook-info {
padding: 18px 28px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.sumbook-meta-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 1px;
}
.sumbook-order {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
color: var(--amber);
letter-spacing: 0.04em;
}
.sumbook-type {
font-family: var(--sans);
font-size: 0.5625rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
}
.sumbook-title {
font-family: var(--serif);
font-size: clamp(1rem, 1.5vw, 1.375rem);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
}
.sumbook-row:hover .sumbook-title { color: var(--teal); }
.sumbook-title em { font-style: italic; }
.sumbook-biblio {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
}
.sumbook-excerpt {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--ink);
line-height: 1.7;
margin: 2px 0 0;
max-width: 640px;
}
.sumbook-cta {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal);
border-bottom: 0.5px solid var(--teal);
padding-bottom: 1px;
align-self: flex-start;
margin-top: 4px;
}
@media (max-width: 1023px) {
.summary-content-wrap { padding: 32px 6% 24px; }
.summary-books-section { padding: 0 6%; }
.summary-books-hd { padding: 12px 0; }
.sumbook-thumb { width: 110px; }
.sumbook-row { grid-template-columns: 110px 1fr; margin-bottom: 20px; }
}
@media (max-width: 599px) {
.summary-content-wrap { padding: 20px 20px 20px; }
.summary-books-section { padding: 0 20px; }
.summary-content-wrap .post-content-inner { max-width: 100%; }
.summary-books-hd { padding: 10px 0; }
.sumbook-thumb { width: 80px; }
.sumbook-row { grid-template-columns: 80px 1fr; margin-bottom: 16px; }
.sumbook-info { padding: 12px 16px; }
.sumbook-excerpt { display: none; }
}
/* ── SERIES INDEX: VIEW ALL CARD ── */
.si-seeall-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 1.5rem;
font-style: italic;
font-weight: 300;
color: var(--ink);
text-align: center;
line-height: 1.2;
letter-spacing: -0.02em;
padding: 12px;
}
.bk-card.si-seeall-card:hover .bk-card-cover { opacity: 0.85; }
/* ── INDIVIDUAL SERIES PAGE: CENTRED WRAP ── */
.series-page-wrap {
max-width: 1400px;
margin: 0 auto;
padding: 0 52px;
}
.series-page-wrap .bk-grid {
border-left: none;
border-right: none;
}
.series-page-wrap .jnl-controls {
padding-left: 0;
padding-right: 0;
}
.series-page-wrap .jnl-tag-filter {
padding-left: 0;
padding-right: 0;
}
.series-page-wrap .bk-empty {
padding-left: 0;
padding-right: 0;
}
.series-page-wrap .section-header {
padding-left: 0;
padding-right: 0;
}
@media (max-width: 1023px) {
.series-page-wrap { padding: 0 28px; }
.series-page-wrap .jnl-controls { padding-left: 0; padding-right: 0; }
.series-page-wrap .jnl-tag-filter { padding-left: 0; padding-right: 0; }
.si-grid { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 599px) {
.series-page-wrap { padding: 0 20px; }
.series-page-wrap .jnl-controls { padding-left: 0; padding-right: 0; }
.series-page-wrap .jnl-tag-filter { padding-left: 0; padding-right: 0; }
}
/* ── SERIES INDEX PAGE ── */
.si-group {
border-bottom: 0.5px solid var(--rule);
padding-bottom: 0;
}
.si-group-hd {
display: flex;
flex-direction: column;
gap: 3px;
padding: 16px 52px 12px;
border-bottom: 0.5px solid var(--rule-lt);
}
/* Desktop grid shown at all breakpoints — uses bk-grid responsive rules */
.si-mobile-strip { display: none; }
.si-desktop-grid {
display: grid;
}
.si-grid {
padding: 1px 52px 0;
border-bottom: none;
border-top: none;
}
.si-group-title {
font-family: var(--serif);
font-size: var(--text-lg);
color: var(--ink);
letter-spacing: -0.01em;
text-decoration: none;
}
.si-group-title:hover { color: var(--teal); }
.si-group-meta {
display: flex;
align-items: center;
gap: 8px;
}
.si-group-author {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--pave);
}
.si-group-count {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
}
.si-group-count::before {
content: "·";
margin-right: 8px;
color: var(--rule);
}
.si-group-rule { display: none; }
.si-group-link { display: none; }
/* Mobile fan row — hidden at desktop, shown at mobile */
.si-fan-row {
display: none;
}
.si-fan-card {
flex-shrink: 0;
width: 120px;
background: var(--teal-lt);
display: flex;
align-items: center;
justify-content: center;
padding: 18px 10px;
min-height: 148px;
}
.si-fan-covers {
position: relative;
width: 80px;
height: 108px;
}
.si-fan-cover {
position: absolute;
bottom: 0;
left: 50%;
width: 62px;
height: 88px;
border-radius: 2px;
transform-origin: bottom center;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.si-fan-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.si-fan-info {
flex: 1;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-left: 0.5px solid var(--rule);
min-height: 148px;
}
.si-fan-label {
font-size: 8.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pave);
display: block;
margin-bottom: 5px;
}
.si-fan-name {
font-family: var(--serif);
font-style: italic;
font-size: 15px;
color: var(--ink);
line-height: 1.2;
display: block;
margin-bottom: 4px;
}
.si-fan-author {
font-size: 10px;
font-weight: 300;
color: var(--pave);
display: block;
margin-bottom: auto;
}
.si-fan-count {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pave);
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.si-fan-cta {
font-size: 9px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--teal);
border-bottom: 0.5px solid var(--teal);
padding-bottom: 1px;
display: inline-block;
}
@media (max-width: 1023px) {
.si-group-hd { padding: 14px 28px 10px; }
}
@media (max-width: 599px) {
.si-group-hd { padding: 12px 20px 8px; }
}
/* ── JOURNAL COLUMN HEADERS ── */
.jnl-col-hd {
display: grid;
grid-template-columns: 52px minmax(0,1fr) minmax(0,1.2fr) 130px 110px 82px;
padding: 6px 52px;
gap: 12px;
border-bottom: 0.5px solid var(--rule);
background: var(--paper);
}
.jnl-col-hd span {
font-family: var(--serif);
font-size: 0.625rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
}
.jnl-col-hd-excerpt {}
.jnl-col-hd-posted {}
.jnl-col-hd-tags {}
@media (max-width: 1023px) {
.jnl-col-hd { grid-template-columns: 44px 1fr 110px 60px 72px; padding: 6px 28px; }
.jnl-col-hd-excerpt, .jnl-col-hd-tags { display: none; }
.jnl-col-hd-posted { display: block; }
}
@media (max-width: 599px) {
.jnl-col-hd { grid-template-columns: 40px 1fr; padding: 6px 20px; }
.jnl-col-hd-author, .jnl-col-hd-type, .jnl-col-hd-tags { display: none; }
}
/* ── JOURNAL LOG UPDATES ── */
/* New: title + description stacked in one column */
.jnl-title-col {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.jnl-excerpt {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--ink);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: center;
}
.jnl-posted {
font-family: var(--mono, "Courier New", monospace);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
white-space: nowrap;
align-self: center;
}
@media (min-width: 1024px) {
.jnl-desc { display: none; }
}
.jnl-desc {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
line-height: 1.5;
}
/* Tags column */
.jnl-tags-col {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 3px;
justify-content: flex-end;
}
.jnl-tag {
font-family: var(--sans);
font-size: 0.5625rem;
font-weight: 400;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sage);
background: var(--sage-lt);
padding: 2px 5px;
line-height: 1.2;
white-space: nowrap;
}
.jnl-tag-more {
font-family: var(--sans);
font-size: 0.5625rem;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--amber);
white-space: nowrap;
}
/* Tag filter strip */
.jnl-tag-filter {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 10px 52px;
border-bottom: 0.5px solid var(--rule);
background: var(--paper);
}
.jnl-tag-pill {
font-family: var(--sans);
font-size: 0.5625rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pave);
background: none;
border: 0.5px solid var(--rule);
padding: 3px 8px;
cursor: pointer;
line-height: 1.4;
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.jnl-tag-pill:hover { color: var(--ink); border-color: var(--pave); }
.jnl-tag-pill.active { color: #fff; border-color: var(--teal); background: var(--teal); }
@media (max-width: 1023px) {
.jnl-tag-filter { padding: 9px 28px; }
.jnl-tags-col { display: none; }
}
@media (max-width: 599px) {
.jnl-tag-filter { padding: 8px 20px; }
}
/* ── POST LEFT RAIL ── */
.post-left-rail {
padding: 32px 20px 32px 52px;
position: sticky;
top: 20px;
z-index: 1;
align-self: start;
}
.post-left-rail .sidebar-label { margin-bottom: 12px; }
.post-tag-rail { display: flex; flex-direction: column; gap: 5px; margin-bottom: 28px; }
.post-tag-rail a.post-tag { display: block; }
.post-entry-stamp { border-top: 0.5px solid var(--rule-lt); padding-top: 20px; }
.post-entry-stamp-type {
font-family: var(--sans);
font-size: 0.625rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--terra);
background: var(--terra-lt);
padding: 4px 8px;
display: inline-block;
margin-bottom: 16px;
}
.post-entry-stamp-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
margin-bottom: 4px;
}
.post-book-num {
font-family: var(--serif);
font-style: italic;
font-size: 3rem;
color: var(--rule);
line-height: 1;
letter-spacing: -0.03em;
}
.post-book-of {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
margin-top: 2px;
}
/* ── POST ENTRY STAMP (header) ── */
.post-entry-num {
font-family: var(--serif);
font-style: italic;
font-size: 2.5rem;
color: var(--amber);
line-height: 1;
display: block;
letter-spacing: -0.02em;
text-align: right;
}
/* ── RIGHT RAIL EXTRAS ── */
.sidebar-read-time { margin-top: 0; }
.sidebar-read-num {
font-family: var(--serif);
font-style: italic;
font-size: 1.5rem;
color: var(--ink);
line-height: 1;
}
.sidebar-read-unit {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: var(--pave);
margin-top: 2px;
}
.sidebar-book-info .sbi-list { list-style: none; }
.sbi-row { display: grid; grid-template-columns: 68px 1fr; gap: 6px; padding: 5px 0; border-bottom: 0.5px solid var(--rule-lt); align-items: baseline; }
.sbi-row:last-child { border-bottom: none; }
.sbi-key { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; color: var(--pave-dim); letter-spacing: 0.03em; }
.sbi-val { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; color: var(--g700); line-height: 1.5; }
/* ── RESPONSIVE: hide left rail on tablet, collapse on mobile ── */
/* Handled by consolidated tablet/mobile blocks at end of stylesheet */
/* ════════════════════════════════════════════
AFTERWORDS DECORATIVE SYSTEM v1
Dividers · Accents · Loaders · States
════════════════════════════════════════════ */
/* ── SECTION DIVIDERS ── */
/* Base divider container */
.aw-divider {
display: flex;
align-items: center;
gap: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
/* Navy wave — primary section break (use between major recap sections) */
.aw-divider-wave {
width: 100%;
height: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 28'%3E%3Cpath d='M0 14 Q112 4 225 14 Q337 24 450 14 Q562 4 675 14 Q787 24 900 14' stroke='%230d1f3a' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 36px 0;
opacity: 0.18;
}
/* Sage wave — lighter secondary break */
.aw-divider-wave-sage {
width: 100%;
height: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 28'%3E%3Cpath d='M0 14 L60 14' stroke='%23d4cec2' stroke-width='0.5' stroke-linecap='round'/%3E%3Cpath d='M840 14 L900 14' stroke='%23d4cec2' stroke-width='0.5' stroke-linecap='round'/%3E%3Cpath d='M78 14 Q114 4 150 14 Q186 24 222 14 Q258 4 294 14 Q330 24 366 14 Q402 4 438 14 Q474 24 510 14 Q546 4 582 14 Q618 24 654 14 Q690 4 726 14 Q762 24 798 14 Q834 4 840 14' stroke='%237a9e7e' stroke-width='0.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 32px 0;
}
/* Rule + asterisk — use between named subsections */
.aw-divider-asterisk {
display: flex;
align-items: center;
gap: 0;
margin: 32px 0;
}
.aw-divider-asterisk::before,
.aw-divider-asterisk::after {
content: '';
flex: 1;
height: 0.5px;
background: var(--rule);
}
.aw-divider-asterisk-mark {
padding: 0 14px;
flex-shrink: 0;
display: flex;
align-items: center;
}
.aw-divider-asterisk-mark svg { display: block; }
/* Triple ∫∫∫ rule — use within post content (replaces
) */
.aw-divider-triple {
display: flex;
align-items: center;
gap: 0;
margin: 40px 0;
}
.aw-divider-triple::before,
.aw-divider-triple::after {
content: '';
flex: 1;
height: 0.5px;
background: var(--rule);
}
.aw-divider-triple-mark {
font-family: var(--serif);
font-style: italic;
font-size: 18px;
color: var(--pave);
letter-spacing: -0.1em;
line-height: 1;
padding: 0 18px;
flex-shrink: 0;
}
/* Three dots — dashed rule with navy/sage/pink dots */
.aw-divider-dots {
display: flex;
align-items: center;
gap: 0;
margin: 28px 0;
}
.aw-divider-dots::before,
.aw-divider-dots::after {
content: '';
flex: 1;
height: 0;
border-top: 0.5px dashed var(--rule);
}
.aw-divider-dots-marks {
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
flex-shrink: 0;
}
.aw-dot-n { width: 5px; height: 5px; border-radius: 50%; background: #0d1f3a; }
.aw-dot-s { width: 5px; height: 5px; border-radius: 50%; background: #7a9e7e; }
.aw-dot-p { width: 5px; height: 5px; border-radius: 50%; background: #c8a0a8; }
/* Pink wave rule */
.aw-divider-pink {
display: flex;
align-items: center;
gap: 0;
margin: 28px 0;
}
.aw-divider-pink::before,
.aw-divider-pink::after {
content: '';
flex: 1;
height: 0.5px;
background: var(--rule);
}
.aw-divider-pink-mark {
padding: 0 14px;
flex-shrink: 0;
display: flex;
align-items: center;
height: 14px;
}
.aw-divider-pink-mark svg { display: block; }
/* ── OVERRIDE post-content
to use triple ∫ divider ── */
.post-content hr,
.post-content-inner hr {
border: none;
margin: 40px 0;
position: relative;
height: 20px;
display: flex;
align-items: center;
}
.post-content hr::before,
.post-content-inner hr::before {
content: '';
position: absolute;
left: 0; right: 0; top: 50%;
height: 0.5px;
background: var(--rule);
}
.post-content hr::after,
.post-content-inner hr::after {
content: '∫∫∫';
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: var(--serif);
font-style: italic;
font-size: 16px;
color: var(--pave);
letter-spacing: -0.1em;
background: var(--paper);
padding: 0 10px;
line-height: 1;
}
/* ── LOADING STATES ── */
/* Three-dot pulse (inline loading) */
@keyframes aw-pulse { 0%,100%{ opacity:0.2; transform:scale(0.7); } 50%{ opacity:1; transform:scale(1); } }
.aw-loader {
display: inline-flex;
align-items: center;
gap: 5px;
}
.aw-loader-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ink);
animation: aw-pulse 1.4s ease-in-out infinite;
}
.aw-loader-dot:nth-child(2) { animation-delay: 0.2s; background: #7a9e7e; }
.aw-loader-dot:nth-child(3) { animation-delay: 0.4s; background: #c8a0a8; }
/* Wave loader (page-level) */
@keyframes aw-wave-draw { 0%{ stroke-dashoffset: 600; } 100%{ stroke-dashoffset: 0; } }
.aw-loader-wave svg .wave-path {
stroke-dasharray: 600;
animation: aw-wave-draw 2.5s ease-in-out infinite alternate;
}
/* Spinning ∫ (fullscreen) */
@keyframes aw-spin { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
.aw-loader-spin {
display: inline-block;
font-family: var(--serif);
font-style: italic;
font-size: 2rem;
color: var(--ink);
line-height: 1;
animation: aw-spin 3s linear infinite;
transform-origin: center;
}
/* Blinking cursor bar */
@keyframes aw-blink { 0%,100%{ opacity:0.15; } 50%{ opacity:1; } }
.aw-cursor {
display: inline-block;
width: 1.5px;
height: 1.1em;
background: var(--ink);
vertical-align: middle;
animation: aw-blink 1.2s ease-in-out infinite;
margin-left: 2px;
}
/* Progress bar — thin hairline fill */
@keyframes aw-progress { 0%{ width: 0; } 100%{ width: 100%; } }
.aw-progress {
height: 0.5px;
background: var(--rule);
position: relative;
overflow: hidden;
}
.aw-progress-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background: var(--ink);
animation: aw-progress 2s ease-in-out infinite;
}
/* ── ACCENT MARKS (inline decorative) ── */
.aw-accent {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Used as bullet replacement in special lists */
.aw-accent-target-n::before {
content: '';
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: #0d1f3a;
box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 3.5px #0d1f3a;
margin-right: 10px;
flex-shrink: 0;
}
.aw-accent-target-s::before {
content: '';
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: #7a9e7e;
box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 3.5px #7a9e7e;
margin-right: 10px;
flex-shrink: 0;
}
/* ── BRACKET NOTATION (brand label system) ── */
.aw-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pave);
display: inline-flex;
align-items: center;
gap: 4px;
}
.aw-label .aw-br { color: var(--rule); }
.aw-label-teal { color: var(--teal); }
.aw-label-teal .aw-br { color: var(--teal-lt); }
.aw-label-terra { color: var(--terra); }
.aw-label-terra .aw-br { color: #e0c0b8; }
.aw-label-sage { color: var(--sage); }
.aw-label-sage .aw-br { color: var(--sage-lt); }
/* ── TAGS ── */
/* Already have .post-tag — add variants */
.post-tag-terra {
color: var(--terra);
background: var(--terra-lt);
}
.post-tag-terra:hover { color: var(--g700); background: #e8d4ce; }
.post-tag-navy {
color: #0d1f3a;
background: #e8edf2;
}
.post-tag-navy:hover { color: #0d1f3a; background: #d4dce6; }
/* ── WLOF/SNAPSHOT TYPE BADGE ── */
.aw-type-badge {
font-family: var(--sans);
font-size: 0.625rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 8px;
display: inline-block;
line-height: 1.2;
}
.aw-type-badge-recap { color: var(--terra); background: var(--terra-lt); }
.aw-type-badge-snapshot { color: #0d1f3a; background: #e8edf2; }
.aw-type-badge-wlof { color: var(--sage); background: var(--sage-lt); }
/* ── READING PROGRESS BAR (top of page) ── */
#aw-reading-progress {
position: fixed;
top: 0; left: 0;
width: 0%;
height: 1.5px;
background: var(--cover-bg);
z-index: 200;
transition: width 0.1s linear;
pointer-events: none;
}
/* ── FOOTER BASE BAR ── */
.footer-base {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 52px;
border-top: 0.5px solid var(--rule-lt);
background: var(--paper);
}
.footer-copy,
.footer-spoiler-note {
font-family: var(--sans);
font-size: 0.5625rem;
font-weight: 300;
color: var(--rule);
letter-spacing: 0.06em;
}
.footer-cookie-link {
cursor: pointer;
}
/* ── COOKIE NOTICE ── */
.cookie-notice {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #1a100d;
z-index: 9999;
border-top: 1px solid rgba(255,255,255,0.1);
padding: 20px 52px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.cookie-notice p {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: rgba(255,255,255,0.75);
margin: 0;
line-height: 1.7;
max-width: 640px;
}
.cookie-notice-btns {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.cookie-notice-btns button {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
transition: opacity 0.15s;
}
.cookie-btn-accept {
background: var(--terra);
color: #fff;
}
.cookie-btn-decline {
background: transparent;
color: rgba(255,255,255,0.5);
border: 0.5px solid rgba(255,255,255,0.2) !important;
}
.cookie-notice-btns button:hover { opacity: 0.85; }
.cookie-notice-btns a {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 300;
color: rgba(255,255,255,0.5);
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.cookie-notice-btns a:hover { color: rgba(255,255,255,0.8); }
/* ── PRIVACY PAGE ── */
/* ── PLAIN PAGE LAYOUT ── */
.page-hero {
border-bottom: 0.5px solid var(--rule);
padding: 52px 52px 44px;
}
.page-hero-inner {
max-width: 760px;
}
.page-hero-title {
font-family: var(--serif);
font-size: clamp(2.25rem, 4vw, 3.25rem);
font-weight: 400;
color: var(--ink);
line-height: 0.95;
letter-spacing: -0.03em;
margin-top: 20px;
}
.page-body-wrap {
padding: 52px 52px 72px;
}
.page-body-inner {
max-width: 620px;
font-family: var(--sans);
font-size: var(--text-base);
font-weight: 300;
color: var(--g700);
line-height: 1.85;
}
.page-body-inner h2 {
font-family: var(--serif);
font-size: 1.5rem;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.02em;
margin: 2rem 0 0.75rem;
}
.page-body-inner h3 {
font-family: var(--sans);
font-size: var(--text-md);
font-weight: 500;
color: var(--ink);
letter-spacing: 0.01em;
margin: 1.5rem 0 0.5rem;
}
.page-body-inner p { margin-bottom: 1.1em; }
.page-body-inner a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.page-body-inner ul, .page-body-inner ol {
padding-left: 1.25em;
margin-bottom: 1.1em;
}
.page-body-inner li { margin-bottom: 0.4em; }
.page-body-inner strong { font-weight: 500; color: var(--ink); }
.page-body-inner hr {
border: none;
border-top: 0.5px solid var(--rule);
margin: 2rem 0;
}
/* WPForms / embedded forms inside page content */
.page-body-inner .wpforms-container { margin-top: 2rem; }
.page-body-inner input[type="text"],
.page-body-inner input[type="email"],
.page-body-inner textarea {
width: 100%;
border: none;
border-bottom: 0.5px solid var(--rule);
background: transparent;
padding: 9px 0;
font-family: var(--sans);
font-size: var(--text-base);
color: var(--ink);
outline: none;
}
.page-body-inner input[type="text"]:focus,
.page-body-inner input[type="email"]:focus,
.page-body-inner textarea:focus {
border-bottom-color: var(--teal);
}
.page-body-inner input[type="submit"],
.page-body-inner button[type="submit"] {
background: var(--teal);
color: #F9F9F7;
border: none;
padding: 12px 28px;
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
margin-top: 12px;
transition: background 0.15s;
}
.page-body-inner input[type="submit"]:hover,
.page-body-inner button[type="submit"]:hover {
background: var(--hero-dk);
}
@media (max-width: 1023px) {
.page-hero { padding: 36px 28px 32px; }
.page-body-wrap { padding: 36px 28px 52px; }
}
@media (max-width: 599px) {
.page-hero { padding: 28px 20px 24px; }
.page-hero-title { font-size: 2rem; }
.page-body-wrap { padding: 28px 20px 48px; }
}
.privacy-content {
padding: 48px 52px;
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 300;
line-height: 1.85;
color: var(--ink);
}
.privacy-content h2 {
font-family: var(--serif);
font-style: italic;
font-size: 1.375rem;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
margin: 2em 0 0.5em;
}
.privacy-content h3 {
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pave);
margin: 1.5em 0 0.4em;
}
.privacy-content p { margin-bottom: 1em; }
.privacy-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) { .privacy-content { padding: 32px 28px; } }
@media (max-width: 599px) { .privacy-content { padding: 24px 20px; font-size: 0.875rem; } }
@media (max-width: 599px) {
.footer-base { padding: 10px 20px; flex-direction: column; gap: 4px; align-items: flex-start; }
.cookie-notice { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.cookie-notice-btns { width: 100%; justify-content: space-between; }
}
/* ── JETPACK: HIDE RELATED POSTS ── */
#jp-relatedposts { display: none !important; }
/* ── JETPACK SUBSCRIBE BUTTON OVERRIDE ── */
.jetpack-subscribe-floating-button {
box-shadow: none !important;
background: transparent !important;
border: none !important;
}
.jetpack-subscribe-floating-button .wp-block-jetpack-subscriptions {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.jetpack-subscribe-floating-button .wp-block-jetpack-subscriptions__container {
background: transparent !important;
}
.jetpack-subscribe-floating-button #subscribe-submit {
margin: 0 !important;
padding: 0 !important;
}
button[name="jetpack_subscriptions_widget"].wp-block-button__link,
.wp-block-jetpack-subscriptions .wp-block-button__link {
font-family: var(--sans) !important;
font-size: var(--text-xs) !important;
font-weight: 400 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
background: var(--ink) !important;
color: var(--paper) !important;
border: none !important;
border-radius: 0 !important;
padding: 11px 28px !important;
cursor: pointer;
transition: opacity 0.15s;
box-shadow: none !important;
}
button[name="jetpack_subscriptions_widget"].wp-block-button__link:hover {
opacity: 0.82 !important;
background: var(--ink) !important;
}
.jetpack-memberships-spinner { display: none !important; }
/* ════════════════════════════════════════════
RESPONSIVE CONSOLIDATION v5.0
Tablet ≤1023px · Mobile ≤599px
════════════════════════════════════════════ */
/* ── TABLET (≤1023px) ── */
@media (max-width: 1023px) {
/* Homepage hero: Option B — compact 2-col, centred dark panel */
.home-hero { grid-template-columns: 200px 1fr; }
.hero-image-panel { border-right: 0.5px solid var(--hero-dk); border-bottom: none; min-height: 0; padding: 20px 16px; }
.hero-spoiler-title { font-size: 1.5rem; color: #F9F9F7; }
.hero-spoiler-sub { font-size: 9px; margin-bottom: 14px; color: rgba(249,249,247,0.55); }
.hero-illustration-svg { max-width: 320px; margin-bottom: 12px; }
.hero-detail-panel { display: flex; flex-direction: column; }
.hero-detail-body { padding: 24px 24px; }
.hero-detail-panel .hero-tags-footer { padding: 0 24px 20px; }
/* Hide edge cover, show thumb layout */
.hero-cover-edge-link { display: none; }
.hero-title-cover-row { grid-template-columns: 220px 1fr; column-gap: 20px; }
.hero-title-meta { align-items: flex-end; gap: 5px; padding-top: 2px; }
.hero-book-title { font-size: clamp(1.5rem, 3vw, 2.25rem); text-align: left; white-space: normal; }
.hero-latest-text { text-align: left; }
.hero-book-type { text-align: left; }
/* Recent posts strip: fixed width cards */
.hp-strip { grid-template-columns: repeat(auto-fill, minmax(140px, 175px)); }
/* Books grid: already auto-fill, fine as-is */
/* Series index group header */
.si-group-hd { padding: 14px 28px 10px; }
/* Archive hero: hide stats panel */
.archive-hero { grid-template-columns: 1fr; }
.archive-stats { display: none; }
/* Section labels */
.section-header { padding: 10px 28px; }
/* Journal: tighten up */
.jnl-header { padding: 32px 28px 20px; }
.jnl-controls { padding: 10px 28px; }
.jnl-tag-filter { padding: 9px 28px; }
.jnl-col-hd { grid-template-columns: 44px 1fr 110px 60px 72px; padding: 6px 28px; }
.jnl-col-hd-excerpt, .jnl-col-hd-tags { display: none; }
.jnl-col-hd-posted { display: block; }
.jnl-row { grid-template-columns: 44px minmax(0,1fr) 110px 60px 72px; padding: 10px 28px; }
.jnl-excerpt { display: none; }
.jnl-desc { display: block; }
.jnl-tags-col { display: none; }
.jnl-posted { display: block; }
/* Post page: keep sidebar, restore 2-col footer */
.post-layout { grid-template-columns: 1fr 220px; }
.post-left-rail { display: none; }
.post-content { padding: 32px 28px; border-right: none; }
.post-sidebar { border-left: 0.5px solid var(--rule-lt); }
.post-header { padding: 24px 28px; }
.post-header-inner { grid-template-columns: 1fr auto; gap: 20px; }
.post-header-meta { align-items: flex-start; }
.post-footer-panel { grid-template-columns: 200px 1fr; gap: 36px; padding: 28px; }
.post-page-nav .ppn-prev,
.post-page-nav .ppn-next { padding: 22px 28px; }
/* Footer */
.site-footer { padding: 28px; }
}
/* ── SMALL TABLET (≤767px): sidebar too cramped, collapse post layout ── */
@media (max-width: 767px) {
.post-layout { grid-template-columns: 1fr; }
.post-sidebar { display: none; }
.post-mobile-cover { display: block; border-bottom: 0.5px solid var(--rule-lt); }
.post-content { padding: 28px; border-right: none; }
.post-footer-panel { grid-template-columns: 1fr; gap: 20px; padding: 24px 28px; }
.post-header-inner { grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
/* Hero: full-width centred panel stacks above detail */
.home-hero { grid-template-columns: 1fr; }
.hero-image-panel {
min-height: 0;
padding: 28px 24px;
border-right: none;
border-bottom: 0.5px solid var(--hero-dk);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-panel-inner { display: flex; }
.hero-mobile-strip { display: none; }
.hero-illustration { width: 60px; height: 60px; margin-bottom: 12px; }
.hero-illustration-svg { max-width: 360px; margin-bottom: 14px; }
.hero-spoiler-title { font-size: 2.5rem; color: #F9F9F7; margin-bottom: 10px; white-space: nowrap; }
.hero-spoiler-sub { font-size: 10px; margin-bottom: 14px; max-width: 280px; color: rgba(249,249,247,0.5); }
.hero-cover-foot { margin-top: 14px; }
.hero-detail-panel { display: flex; flex-direction: column; }
.hero-detail-body { padding: 22px 22px 16px; }
.hero-detail-panel .hero-tags-footer { padding: 0 22px 18px; }
.hero-cover-edge-link { display: none; }
.hero-title-cover-row { grid-template-columns: 130px 1fr; column-gap: 16px; }
.hero-title-cover-row .hero-cover-thumb-link { grid-row: 1; }
.hero-title-cover-row .hero-excerpt-text { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; }
.hero-title-cover-row .hero-cta { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
.hero-title-meta { align-items: flex-end; gap: 5px; padding-top: 2px; }
.hero-book-title { font-size: 1.375rem; text-align: left; white-space: normal; }
.hero-latest-text { text-align: left; }
.hero-book-type { text-align: left; }
.hero-excerpt-text { margin-top: 12px; margin-bottom: 14px; }
.hero-cta { margin-top: 0; }
}
@media (max-width: 767px) {
/* Series index — show fan row, hide desktop grid */
.bk-grid:not(.bk-grid--gallery) { grid-template-columns: repeat(6, 1fr); }
.bk-grid.bk-grid--gallery { grid-template-columns: repeat(4, 1fr); }
.si-group-hd { padding: 12px 20px 8px; gap: 2px; }
.si-group-rule { display: none; }
.si-desktop-grid { display: none; }
.si-group-hd { display: none; }
.si-fan-row {
display: flex;
border-bottom: 0.5px solid var(--rule);
text-decoration: none;
color: inherit;
}
.si-fan-row:hover .si-fan-cta { color: var(--ink); }
}
/* ── MOBILE (≤599px) ── */
@media (max-width: 599px) {
/* Nav */
.nav-inner { padding: 12px 20px; }
.site-description { display: none; }
/* Homepage hero — mobile: same full centred panel as small tablet, no strip */
.hero-image-panel {
min-height: 0;
padding: 24px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-bottom: 0.5px solid var(--hero-dk);
}
.hero-panel-inner { display: flex; }
.hero-mobile-strip { display: none; }
.hero-illustration { width: 50px; height: 50px; margin-bottom: 10px; }
.hero-illustration-svg { max-width: 320px; margin-bottom: 12px; }
.hero-spoiler-title { font-size: 2.25rem; color: #F9F9F7; margin-bottom: 8px; white-space: nowrap; }
.hero-spoiler-sub { font-size: 10px; margin-bottom: 12px; max-width: 260px; color: rgba(249,249,247,0.5); }
.hero-cover-foot { margin-top: 12px; }
/* Mobile thumb — cover image shown in detail panel if it exists */
.hero-detail-panel { display: flex; flex-direction: column; }
.hero-detail-body { padding: 18px 20px 14px; }
.hero-detail-panel .hero-tags-footer { display: none; }
.hero-cover-edge-link { display: none; }
.hero-title-cover-row { grid-template-columns: 130px 1fr; column-gap: 14px; }
.hero-title-cover-row .hero-cover-thumb-link { grid-row: 1; }
.hero-title-cover-row .hero-excerpt-text { grid-column: 1 / -1; grid-row: 2; margin-top: 12px; }
.hero-title-cover-row .hero-cta { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
.hero-title-meta { align-items: flex-end; gap: 4px; }
.hero-cover-thumb { width: 100%; max-width: 130px; height: auto; }
.hero-detail-label { margin-bottom: 8px; font-size: 0.5rem; display: block; }
.hero-book-title { font-size: 1.125rem; line-height: 1.1; margin-bottom: 4px; text-align: right; white-space: normal; }
.hero-excerpt-text { font-size: 0.8125rem; line-height: 1.65; margin-bottom: 12px; }
.hero-cta { font-size: 0.5rem; letter-spacing: 0.14em; }
/* Post mobile cover */
.post-mobile-cover { display: block; border-bottom: 0.5px solid var(--rule-lt); }
/* Post header — keep two-col on mobile */
.post-header { padding: 18px 20px; }
.post-header-inner { grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.post-title { font-size: 1.375rem; margin-bottom: 8px; }
.post-entry-num { font-size: 2.5rem; }
/* Recent posts strip: 2 per row */
.hp-strip { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
.hp-strip .bk-card-meta-line { display: none; }
/* Popular/Trending/Coming soon: single column */
.hp-three { grid-template-columns: 1fr; }
.pop-section { border-right: none; border-bottom: 0.5px solid var(--rule-lt); }
.pop-section, .cs-section { padding: 20px 20px; }
/* Books grid: 2 columns (gallery stays at 4) */
.bk-grid:not(.si-desktop-grid):not(.bk-grid--gallery) { grid-template-columns: repeat(2, 1fr); }
.bk-controls { padding: 10px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
.bk-search-wrap { width: 100%; }
.bk-sort-wrap { width: 100%; }
/* Series index — fan/grid switch moved to 767px query below */
/* Archive hero */
.archive-hero { padding: 24px 20px; gap: 12px; }
.archive-hero-title { font-size: 2.25rem; }
/* Section label */
.section-header { padding: 9px 20px; }
/* Journal */
.jnl-header { padding: 24px 20px 16px; }
.jnl-stat-n { font-size: 2.5rem; }
.jnl-controls { padding: 9px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
.jnl-tag-filter { padding: 8px 20px; }
.jnl-col-hd { grid-template-columns: 40px 1fr; padding: 6px 20px; }
.jnl-col-hd-author, .jnl-col-hd-type, .jnl-col-hd-tags { display: none; }
.jnl-row { grid-template-columns: 40px 1fr; padding: 10px 20px; gap: 8px; }
.jnl-author, .jnl-tags-col { display: none; }
.jnl-posted { display: none; }
.jnl-type { display: none; }
.jnl-foot-mob { display: flex; align-items: center; gap: 8px; grid-column: 2; }
/* Post page */
.post-title { font-size: 2rem; }
.post-content { padding: 22px 20px; }
.post-layout { grid-template-columns: 1fr; }
.post-sidebar { display: none; }
.post-page-nav { grid-template-columns: 1fr; }
.ppn-prev { border-right: none; border-bottom: 0.5px solid var(--rule-lt); }
.ppn-prev, .ppn-next { padding: 18px 20px; }
.ppn-next { text-align: left; }
/* Summary post */
.summary-content-wrap { padding: 20px 20px; }
.summary-books-section { padding: 0 20px; }
.sumbook-row { grid-template-columns: 72px 1fr; margin-bottom: 14px; }
.sumbook-thumb { width: 72px; }
.sumbook-info { padding: 12px 14px; gap: 3px; }
.sumbook-excerpt { display: none; }
.sumbook-title { font-size: 0.9375rem; }
/* Series page centred wrap */
.series-page-wrap { padding: 0 20px; }
/* Footer */
.site-footer { padding: 20px 20px; grid-template-columns: 1fr; gap: 20px; }
.footer-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
.footer-base { padding: 10px 20px; flex-direction: column; gap: 4px; align-items: flex-start; }
.cookie-notice { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.cookie-notice-btns { width: 100%; justify-content: space-between; }
}