/*
Theme Name: Recaps
Theme URI: https://recapafterwords.com
Author: Afterwords
Description: A recap publication for romance, fantasy, and romantasy readers.
Version: 18.10
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 {
/* ── SURFACE COLOURS ── */
--paper: #F9F9F7;
--cover-bg: #252830;
--cover-dk: #1A1C20;
--hero-dk: #1A1C20;
/* ── TEXT COLOURS — three roles only ── */
--ink: #0F0F12; /* primary — headings, card titles, anything that must be read */
--g700: #2A384F; /* secondary — series names, supporting labels */
--pave: #475569; /* muted — dates, meta, separators */
--pave-dim: #64748B; /* very muted — entry numbers, ghost labels */
/* ── INTERACTIVE ── */
--teal: #1A2B4A; /* primary action: links, active states, buttons */
--teal-lt: #EEF1F7; /* teal-tinted background */
/* ── ACCENT — warm terracotta ── */
--terra: #8E6A60; /* pull quote borders, note kickers, series name accent */
--terra-lt: #F5EFED; /* terra-tinted background */
/* ── ACCENT — sage green ── */
--sage: #536858;
--sage-lt: #E7EDE8;
/* ── ACCENT — amber ── */
--amber: #B07C4A; /* numbered list counters, entry stamps, warm highlights */
/* ── RULES ── */
--rule: #E0E0DC;
--rule-lt: #EEEEEA;
/* ── CARD BACKGROUNDS ── */
--c1: #2a3040;
--c2: #3a4a3c;
--c3: #6b4a3a;
--c4: #3a4550;
--c5: #4a3828;
--c6: #4a4540;
/* ── TYPEFACES ── */
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Libre Franklin', system-ui, sans-serif;
/* ── TYPE SCALE ── */
/* Display — Cormorant Garamond, weight 400, italic for emphasis */
--fs-display-xl: clamp(2.75rem, 5vw, 3.75rem); /* hero title, page hero */
--fs-display-lg: clamp(2rem, 4vw, 3rem); /* section titles: The log, All Series */
--fs-display-md: clamp(1.5rem, 2.5vw, 2.25rem); /* mid-level headings */
--fs-display-sm: 1.375rem; /* card titles, pull quotes, post subheads */
/* UI — Libre Franklin, no italic */
--fs-body: 1rem; /* 16px — post body, large excerpts */
--fs-ui: 0.875rem; /* 14px — nav links, secondary meta */
--fs-label: 0.8125rem; /* 13px — kickers, eyebrows, sort controls */
--fs-caption: 0.6875rem; /* 11px — entry numbers, card meta, timestamps */
--fs-micro: 0.625rem; /* 10px — smallest badges, pill labels */
--fs-nano: 0.5rem; /* 8px — decorative only: ornaments, arrows */
/* Legacy aliases — existing rules use these; they map to the new scale */
--text-xs: var(--fs-label);
--text-sm: var(--fs-ui);
--text-base: var(--fs-body);
--text-md: 1.125rem;
--text-lg: 1.3125rem;
}
/* ── BASE ── */
html { font-size: var(--fs-body); }
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: var(--fs-caption);
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: var(--fs-body);
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: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 52px;
position: relative;
}
.site-branding {
align-self: stretch;
display: flex;
align-items: center;
padding-right: 28px;
margin-right: 0;
border-right: 0.5px solid var(--rule);
}
.site-branding a {
display: flex;
align-items: baseline;
gap: 0;
font-family: var(--serif);
font-size: 1.5rem;
font-weight: 400;
color: var(--ink);
letter-spacing: 0.01em;
line-height: 1;
}
.site-branding a em {
font-size: 1.6em;
font-style: italic;
color: var(--terra);
margin-right: 0.05em;
line-height: 0.95;
display: inline-block;
}
.site-branding a:hover { color: var(--ink); }
.site-branding a:hover em { color: var(--terra); }
.site-description {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
color: var(--pave);
letter-spacing: 0.04em;
margin-top: 3px;
display: none;
}
.main-navigation { display: flex; justify-content: flex-end; position: absolute; right: 52px; top: 50%; transform: translateY(-50%); }
.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.12em;
text-transform: uppercase;
color: var(--pave);
padding: 6px 16px;
border-right: 0.5px solid var(--rule-lt);
display: block;
transition: color 0.15s;
white-space: nowrap;
}
.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(--serif);
font-size: clamp(1rem, 1.6vw, 1.375rem);
font-weight: 400;
font-style: italic;
color: rgba(249,249,247,0.88);
line-height: 1.45;
max-width: 440px;
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.22); flex: 1; }
.hero-cover-mark {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-ui);
color: rgba(249,249,247,0.44);
letter-spacing: -0.08em;
line-height: 1;
flex-shrink: 0;
}
.hero-genre-tag {
font-family: var(--sans);
font-weight: 400;
color: rgba(249,249,247,0.5);
line-height: 1;
margin-top: 16px;
position: relative;
z-index: 1;
text-align: center;
}
.hero-genre-intro {
display: block;
font-size: var(--fs-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(249,249,247,0.32);
margin-bottom: 5px;
line-height: 1.4;
}
.hero-genre-list {
display: block;
font-size: var(--fs-ui);
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(249,249,247,0.6);
line-height: 1.4;
}
/* ── 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-ellipsis { color: var(--pave-dim); font-size: var(--fs-label); }
.breadcrumb-sep { color: var(--rule); }
.breadcrumb-current { color: var(--ink); }
/* ── HOMEPAGE HERO ── */
.home-hero {
display: block;
border-bottom: none;
}
/* 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: none;
border-bottom: 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: var(--sage); }
.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: var(--teal-lt);
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: var(--rule-lt);
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: var(--fs-body);
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: 500;
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: var(--terra-lt); line-height: 0.92; letter-spacing: -0.03em; margin-bottom: 18px; }
.wlof-title em { font-style: italic; color: var(--sage); }
.wlof-body { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; 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: var(--sage); 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: var(--terra-lt); letter-spacing: -0.01em; }
.wlof-char-role { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; color: rgba(247,244,238,0.35); }
/* ── POST HEADER ── */
.post-header { padding: 52px 52px 28px; 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: var(--fs-display-xl); font-weight: 500; 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: 400; 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,
.summary-content-wrap .post-content-inner h2 {
font-family: var(--serif);
font-size: clamp(1.25rem, 2vw, 1.625rem);
font-weight: 400;
color: var(--ink);
letter-spacing: 0.04em;
line-height: 1.15;
margin: 44px 0 16px;
width: 100%;
text-transform: uppercase;
}
.post-content h2 em,
.summary-content-wrap .post-content-inner h2 em { font-style: italic; }
.post-content h2:first-child,
.summary-content-wrap .post-content-inner h2:first-child { margin-top: 0; }
.post-content h3,
.summary-content-wrap .post-content-inner 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,
.summary-content-wrap .post-content-inner h3:first-child { margin-top: 0; }
.post-content p,
.summary-content-wrap .post-content-inner 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,
.summary-content-wrap .post-content-inner p strong {
font-weight: 500;
color: var(--ink);
}
.post-content ul, .post-content ol,
.summary-content-wrap .post-content-inner ul,
.summary-content-wrap .post-content-inner ol {
list-style: none;
margin-bottom: 20px;
}
.post-content ul li, .post-content ol li,
.summary-content-wrap .post-content-inner ul li,
.summary-content-wrap .post-content-inner 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,
.summary-content-wrap .post-content-inner ul li:first-child,
.summary-content-wrap .post-content-inner ol li:first-child { border-top: 0.5px solid var(--rule-lt); }
.post-content ul li::before,
.summary-content-wrap .post-content-inner ul li::before { content: "—"; position: absolute; left: 0; color: var(--rule); }
.post-content ol,
.summary-content-wrap .post-content-inner ol { counter-reset: ol-counter; }
.post-content ol li::before,
.summary-content-wrap .post-content-inner 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,
.summary-content-wrap .post-content-inner a { color: var(--teal); border-bottom: 0.5px solid var(--teal); padding-bottom: 1px; }
.post-content a:hover,
.summary-content-wrap .post-content-inner a:hover { color: var(--ink); border-color: var(--ink); }
.post-content blockquote,
.summary-content-wrap .post-content-inner blockquote {
margin: 44px 0;
padding: 0;
border: none;
text-align: center;
position: relative;
}
.post-content blockquote::before,
.summary-content-wrap .post-content-inner blockquote::before {
content: '∫';
display: block;
font-family: var(--serif);
font-style: italic;
font-size: 2rem;
color: var(--terra);
opacity: 0.5;
line-height: 1;
margin-bottom: 16px;
}
.post-content blockquote::after,
.summary-content-wrap .post-content-inner blockquote::after {
content: '';
display: block;
height: 0.5px;
background: linear-gradient(to right, var(--rule) calc(50% - 28px), var(--terra) calc(50% - 28px), var(--terra) calc(50% + 28px), var(--rule) calc(50% + 28px));
margin-top: 20px;
}
.post-content blockquote p,
.summary-content-wrap .post-content-inner blockquote p {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-display-sm);
font-weight: 400;
color: var(--ink);
line-height: 1.55;
letter-spacing: -0.015em;
max-width: 520px;
margin: 0 auto 12px;
}
.post-content blockquote::after {
content: '';
display: block;
margin-top: 20px;
height: 1px;
background: linear-gradient(to right, var(--rule) calc(50% - 24px), var(--terra) calc(50% - 24px) calc(50% + 24px), var(--rule) calc(50% + 24px));
}
.post-content blockquote cite,
.post-content blockquote footer,
.summary-content-wrap .post-content-inner blockquote cite,
.summary-content-wrap .post-content-inner blockquote footer {
display: block;
font-family: var(--sans);
font-size: var(--fs-label);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pave);
font-style: normal;
margin-top: 14px;
}
.post-content blockquote cite em,
.summary-content-wrap .post-content-inner blockquote cite em,
.post-content blockquote footer em,
.summary-content-wrap .post-content-inner blockquote footer em {
color: var(--terra);
font-style: normal;
}
/* ── TABLE STYLES ── */
.post-content table,
.summary-content-wrap .post-content-inner table {
width: 100%;
border-collapse: collapse;
margin: 36px 0;
font-family: var(--sans);
border: 0.5px solid #CCCCC8;
}
.post-content table thead tr,
.summary-content-wrap .post-content-inner table thead tr {
border-bottom: 1px solid #CCCCC8;
background: var(--paper);
}
.post-content table thead th,
.summary-content-wrap .post-content-inner table thead th {
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pave);
padding: 12px 16px;
text-align: left;
}
.post-content table tbody tr,
.summary-content-wrap .post-content-inner table tbody tr {
border-bottom: 0.5px solid #D8D8D4;
}
.post-content table tbody tr:last-child,
.summary-content-wrap .post-content-inner table tbody tr:last-child {
border-bottom: none;
}
.post-content table tbody tr:hover,
.summary-content-wrap .post-content-inner table tbody tr:hover {
background: rgba(142, 106, 96, 0.03);
}
.post-content table tbody td,
.summary-content-wrap .post-content-inner table tbody td {
font-size: var(--fs-ui);
font-weight: 300;
color: var(--ink);
padding: 11px 16px;
vertical-align: middle;
line-height: 1.5;
}
.post-content table tbody td:first-child,
.summary-content-wrap .post-content-inner table tbody td:first-child {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-ui);
color: var(--terra);
border-right: 0.5px solid #D8D8D4;
font-weight: 400;
}
.post-content table tbody td em,
.summary-content-wrap .post-content-inner table tbody td em {
font-style: italic;
}
.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: 400; 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: var(--fs-display-sm); 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: 400; 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: var(--fs-display-xl);
font-weight: 500;
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: var(--text-md);
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--sage {
background: var(--sage-lt);
border-left-color: var(--sage);
}
.aw-note--pave {
background: var(--rule-lt);
border-left-color: var(--pave);
}
.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--sage .aw-note-kicker { color: var(--sage); }
.aw-note--pave .aw-note-kicker { color: var(--pave); }
.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: var(--fs-body);
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: var(--fs-body);
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: 8px 0; border-bottom: 0.5px solid var(--rule-lt); }
.sidebar-series-item:last-child { border-bottom: none; }
.ss-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-item-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1px; }
.ssn { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 400; color: var(--pave-dim); letter-spacing: 0.06em; }
.ss-title { font-family: var(--serif); font-size: var(--text-sm); font-style: italic; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; text-decoration: none; display: block; }
.ss-title:hover { color: var(--teal); }
.ss-meta { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 400; color: var(--pave-dim); }
.ss-title.current { color: var(--teal); }
.ssn.current { color: var(--pave); }
.sidebar-series-item.current { background: var(--teal-lt); margin: 0 -16px; padding: 8px 16px; border-bottom: none; border-left: 2px solid var(--teal); }
.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); }
.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: var(--fs-display-sm);
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) {
.psp-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 599px) {
.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: 400;
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: 64px 52px 36px;
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: var(--fs-display-lg);
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: 16px 52px 11px;
border-bottom: 0.5px solid var(--rule);
border-top: 0.5px solid var(--rule);
gap: 24px;
flex-wrap: wrap;
margin-top: 20px;
}
.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: 400;
color: var(--pave);
white-space: nowrap;
}
.jnl-type,
.jnl-type-mob {
font-family: var(--mono, "Courier New", monospace);
font-size: var(--fs-nano);
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) 88px 90px 72px; padding: 10px 28px; }
.jnl-excerpt { display: none; }
.jnl-desc { display: block; }
.jnl-posted { display: block; }
.jnl-header { padding: 44px 28px 28px; }
.jnl-controls { padding: 10px 28px; }
}
@media (max-width: 599px) {
.jnl-row { grid-template-columns: 40px 1fr; padding: 9px 20px; gap: 8px; }
.jnl-header { padding: 34px 20px 20px; }
.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: 16px 52px 13px;
border-bottom: 0.5px solid var(--rule);
border-top: 0.5px solid var(--rule);
gap: 24px;
flex-wrap: wrap;
margin-top: 20px;
}
.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);
padding-top: 20px;
}
.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;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 32px 10px 24px;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: clamp(0.8125rem, 2.5vw, 1rem);
font-weight: 400;
color: rgba(249,249,247,0.92);
line-height: 1.3;
background: linear-gradient(transparent, rgba(0,0,0,0.52));
z-index: 2;
}
.bk-card-illustration {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.7;
}
.bk-card-entry {
position: absolute;
bottom: 8px;
left: 10px;
font-family: var(--sans);
font-size: var(--fs-caption);
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: var(--fs-body);
font-style: italic;
font-weight: 500;
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: var(--fs-micro);
font-weight: 400;
color: var(--terra);
letter-spacing: 0.04em;
display: block;
margin-top: 2px;
}
.bk-card-author {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--pave-dim);
display: block;
}
.bk-card-year {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--pave-dim);
display: inline;
}
/* Inline meta line: series on own line, then order+year+author muted */
.bk-card-meta-line {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--terra);
display: block;
white-space: normal;
margin-top: 3px;
line-height: 1.5;
}
.bk-card-meta-line .bm-order-hash {
color: var(--pave-dim);
font-size: var(--fs-micro);
}
.bk-card-meta-line .bm-series-order {
display: block;
color: var(--terra);
font-size: var(--fs-micro);
margin-bottom: 1px;
}
.bk-card-meta-line .bm-author {
display: block;
color: var(--pave-dim);
font-size: var(--fs-micro);
}
.bk-title-year {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
font-style: normal;
color: var(--pave-dim);
letter-spacing: 0;
}
.cs-meta { display: block; }
.cs-meta-series {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--terra);
margin-bottom: 1px;
}
.cs-meta-author {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--pave-dim);
}
/* bm-series suppression removed — series name now rendered directly */
.bk-card-year-inline {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
font-style: normal;
color: var(--pave-dim);
margin-left: 2px;
}
.bk-card-author-line {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--pave-dim);
display: block;
margin-top: 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: var(--fs-display-md);
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; }
.hp-see-all { 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: 64px 52px 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: var(--fs-display-md); 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: 400; 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: 400; 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; }
.promise-dash { color: rgba(247,244,238,0.2); }
/* ── SITE FOOTER ── */
.site-footer { display: grid; grid-template-columns: 1fr auto; padding: 22px 52px; border-top: none; gap: 52px; align-items: start; background: var(--cover-bg); margin-top: 64px; }
.footer-logo { font-family: var(--serif); font-size: var(--text-base); color: #F9F9F7; display: block; margin-bottom: 8px; }
.footer-tagline { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: rgba(249,249,247,0.5); line-height: 1.8; max-width: 260px; }
.footer-url { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; color: rgba(249,249,247,0.3); 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: rgba(249,249,247,0.4); margin-bottom: 10px; display: block; }
.footer-col a { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: rgba(249,249,247,0.7); display: block; padding: 3px 0; }
.footer-col a:hover { color: #F9F9F7; }
/* ── RESPONSIVE: TABLET (max 1023px) ── */
@media (max-width: 1023px) {
.nav-inner { display: flex; justify-content: flex-start; padding: 16px 28px; }
.site-description { display: none; }
.site-branding { border-right: none; padding-right: 0; align-self: auto; }
.site-branding a { font-size: 1.375rem; }
.main-navigation { display: none; }
.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: 48px 28px 36px; }
.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; }
.site-footer { grid-template-columns: 1fr; gap: 22px; padding: 22px 28px; }
}
/* ── RESPONSIVE: MOBILE (max 599px) ── */
@media (max-width: 599px) {
.nav-inner { display: flex; justify-content: center; padding: 12px 20px; }
.site-description { display: none; }
.site-branding { border-right: none; padding-right: 0; align-self: auto; }
.site-branding a { font-size: var(--text-md); }
.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: var(--fs-display-lg); }
.hero-detail-panel { padding: 20px; }
.section-header { padding: 9px 20px; }
.post-header { padding: 32px 20px 22px; }
.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: 40px 20px 24px; }
.archive-row { padding: 12px 20px; }
.about-main { padding: 28px 20px; }
.about-aside { padding: 22px 20px; }
.site-footer { padding: 18px 20px; }
.footer-cols { gap: 28px; }
}
/* ── HOMEPAGE NEW SECTIONS ── */
/* Latest posts strip */
.hp-strip {
display: none;
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: none;
align-items: center;
justify-content: space-between;
padding: 11px 52px;
text-decoration: none;
border-top: 0.5px solid var(--rule);
border-bottom: 0.5px solid var(--rule);
background: var(--rule-lt);
transition: background 0.15s;
}
@media (max-width: 767px) {
.hp-see-all { display: flex; }
}
.hp-see-all:hover { background: var(--rule); }
.hp-see-all-title {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
display: inline;
}
.hp-see-all-sub {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
color: var(--pave-dim);
letter-spacing: 0.06em;
margin-left: 8px;
display: inline;
}
.hp-see-all-arrow {
font-family: var(--sans);
font-size: var(--text-sm);
color: var(--pave);
transition: transform 0.15s;
}
.hp-see-all:hover .hp-see-all-arrow { transform: translateX(3px); }
@media (max-width: 599px) {
.hp-see-all { padding: 11px 20px; }
.hp-strip { display: none; }
.hp-recent-list { display: none; }
.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: var(--fs-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--terra);
margin-bottom: 1px;
}
.hp-list-badge {
display: inline-block;
font-size: var(--fs-nano);
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: var(--fs-ui);
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: var(--fs-caption);
font-weight: 400;
color: var(--pave);
display: block;
margin-top: 1px;
}
}
/* ── REQUEST A RECAP PAGE LAYOUT ── */
.subscribe-layout { display: grid; grid-template-columns: 420px 1fr; min-height: calc(100vh - 80px); border-bottom: 0.5px solid var(--rule); }
.subscribe-dark { background: #3a4a3c; padding: 60px 52px; display: flex; flex-direction: column; justify-content: space-between; border-right: 0.5px solid rgba(0,0,0,0.2); position: relative; overflow: hidden; }
.subscribe-wm { position: absolute; bottom: -40px; right: -20px; font-size: 220px; color: rgba(249,249,247,0.04); font-family: var(--serif); line-height: 1; pointer-events: none; z-index: 0; }
.subscribe-dark-top { position: relative; z-index: 1; }
.subscribe-dark-bottom { position: relative; z-index: 1; }
.subscribe-eyebrow { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(249,249,247,0.35); margin-bottom: 16px; }
.subscribe-title { font-family: var(--serif); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 400; line-height: 1.05; color: #F9F9F7; margin-bottom: 18px; letter-spacing: -0.02em; }
.subscribe-title em { font-style: italic; color: var(--amber); }
.subscribe-body { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: rgba(247,244,238,0.45); line-height: 1.85; max-width: 320px; }
.subscribe-promise { display: flex; flex-direction: column; gap: 6px; }
.subscribe-promise-item { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; color: rgba(247,244,238,0.3); display: flex; gap: 10px; align-items: baseline; }
.promise-dash { color: rgba(247,244,238,0.15); }
.subscribe-light { padding: 60px 72px; display: flex; flex-direction: column; justify-content: center; }
.subscribe-light-inner { max-width: 480px; width: 100%; }
@media (max-width: 1023px) {
.subscribe-layout { grid-template-columns: 1fr; min-height: auto; }
.subscribe-dark { padding: 44px 40px; min-height: 280px; }
.subscribe-light { padding: 44px 40px; }
}
@media (max-width: 599px) {
.subscribe-dark { padding: 32px 24px; }
.subscribe-light { padding: 32px 24px; }
}
/* ── MOB TAB BAR ── */
/* ── SHARED TAB BAR (tablet + mobile) ── */
.aw-tab-bar {
display: none;
width: 100%;
max-width: 100vw;
overflow-x: auto;
justify-content: center;
background: var(--paper);
border-bottom: 1px solid #D8D8D4;
-webkit-overflow-scrolling: touch;
}
.aw-tab-bar::-webkit-scrollbar { display: none; }
.aw-tab {
font-family: var(--sans);
font-size: var(--fs-micro);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pave);
padding: 10px 18px;
white-space: nowrap;
text-decoration: none;
border-bottom: 2px solid transparent;
flex-shrink: 0;
display: block;
}
.aw-tab.active {
color: var(--ink);
border-bottom-color: var(--teal);
}
@media (max-width: 599px) {
.aw-tab-bar { display: flex; justify-content: center; }
}
body.home .section-header { display: none; }
@media (max-width: 767px) {
body.home .section-header { display: block; }
}
/* ── HERO BELOW ── */
.hero-below {
border-bottom: 0.5px solid var(--rule);
background: var(--paper);
}
.hero-below-cols {
display: grid;
grid-template-columns: 4fr 5fr;
border-bottom: none;
}
.hb-entry {
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 12px;
border-right: 0.5px solid var(--rule);
}
.hb-kicker {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pave-dim);
}
.hb-entry-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.hb-badge {
font-family: var(--sans);
font-size: var(--fs-caption);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
border: 0.5px solid var(--teal);
padding: 3px 8px;
}
.hb-num {
font-family: var(--sans);
font-size: var(--text-xs);
letter-spacing: 0.06em;
color: var(--pave-dim);
flex-shrink: 0;
padding-top: 3px;
}
.hb-title {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-display-sm);
font-weight: 400;
color: var(--ink);
line-height: 1.2;
text-decoration: none;
letter-spacing: -0.01em;
display: block;
}
.hb-title:hover { color: var(--teal); }
.hb-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.hb-pill {
font-family: var(--sans);
font-size: var(--fs-micro);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
border: 0.5px solid var(--rule);
padding: 3px 8px;
}
.hb-excerpt {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--pave);
line-height: 1.75;
}
.hb-cta {
display: block;
background: var(--teal);
color: var(--terra-lt);
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
padding: 13px;
text-decoration: none;
transition: background 0.15s;
margin-top: auto;
}
.hb-cta:hover { background: var(--hero-dk); }
.hb-recent {
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.hb-thumbs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.hb-card {
display: block;
text-decoration: none;
color: inherit;
}
.hb-card .bk-card-cover {
border-radius: 2px;
transition: opacity 0.15s;
}
.hb-card:hover .bk-card-cover { opacity: 0.85; }
.hb-card-body {
padding: 8px 0 0;
}
.hb-card-title {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-base);
font-weight: 500;
color: var(--ink);
line-height: 1.3;
display: block;
margin-bottom: 5px;
}
.hb-card-meta {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--terra);
display: block;
line-height: 1.5;
margin-top: 3px;
}
.hb-card-meta .bm-order-hash {
color: var(--pave-dim);
font-size: var(--fs-micro);
}
.hb-see-all {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 32px;
background: var(--rule-lt);
border-top: 0.5px solid var(--rule);
text-decoration: none;
transition: background 0.15s;
}
.hb-see-all:hover { background: var(--rule); }
.hb-see-all-label {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
}
.hb-see-all-count {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
color: var(--pave-dim);
letter-spacing: 0.06em;
}
.hb-see-all-arrow {
font-size: var(--text-sm);
color: var(--pave);
margin-left: auto;
transition: transform 0.15s;
}
.hb-see-all:hover .hb-see-all-arrow { transform: translateX(3px); }
/* hero-below: tablet ≤1023px — same side-by-side, 3×2 thumbs */
@media (max-width: 1023px) {
.hb-entry { padding: 22px 24px; }
.hb-recent { padding: 22px 20px; }
.hb-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-thumbs .hb-card:nth-child(n+5) { display: none; }
.hb-see-all { padding: 11px 24px; }
}
/* hero-below: ≤767px — hidden, mob-home takes over */
@media (max-width: 767px) {
.hero-below { display: none; }
}
/* ── MOB THUMB STRIP ── */
.mob-thumb-strip { display: none; }
.mob-thumb-card-body { display: none; }
@media (max-width: 767px) {
.mob-thumb-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0 20px 16px;
gap: 8px;
}
.mob-thumb-card {
display: block;
text-decoration: none;
color: inherit;
}
.mob-thumb-card .bk-card-cover { border-radius: 1px; }
.mob-thumb-card-body { display: none; }
}
@media (min-width: 600px) and (max-width: 767px) {
.mob-thumb-strip {
grid-template-columns: repeat(3, 1fr);
padding: 0 28px 16px;
gap: 10px;
}
.mob-thumb-card-body {
display: flex;
flex-direction: column;
gap: 3px;
padding: 6px 0 0;
}
.mob-thumb-card-title {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-base);
font-weight: 400;
color: var(--ink);
line-height: 1.25;
display: block;
}
.mob-thumb-card-meta {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--terra);
letter-spacing: 0;
display: block;
margin-top: 2px;
line-height: 1.5;
}
.mob-thumb-card-meta .bm-order-hash {
color: var(--pave-dim);
}
}
/* ── MOB HOME ── */
.mob-home { display: none; }
@media (max-width: 767px) {
.mob-home {
background: var(--paper);
}
.mob-kicker {
font-family: var(--sans);
font-size: var(--fs-micro);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pave-dim);
padding: 14px 20px 10px;
}
.mob-featured {
display: block;
margin: 0 20px 20px;
border: 0.5px solid #C8CACD;
background: var(--rule-lt);
text-decoration: none;
color: inherit;
}
.mob-featured-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 14px 10px;
border-bottom: 0.5px solid var(--rule-lt);
}
.mob-series-badge {
font-family: var(--sans);
font-size: var(--fs-nano);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
border: 0.5px solid var(--teal);
padding: 3px 8px;
}
.mob-entry-num {
font-family: var(--sans);
font-size: var(--fs-caption);
letter-spacing: 0.08em;
color: var(--pave-dim);
}
.mob-featured-title {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-md);
font-weight: 400;
line-height: 1.2;
color: var(--ink);
padding: 12px 14px 10px;
letter-spacing: -0.01em;
}
.mob-pill-row {
display: flex;
gap: 6px;
padding: 0 14px 12px;
}
.mob-pill {
font-family: var(--sans);
font-size: var(--fs-nano);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
border: 0.5px solid var(--rule);
padding: 3px 8px;
}
.mob-excerpt {
font-family: var(--sans);
font-size: var(--fs-label);
line-height: 1.65;
color: var(--pave);
padding: 12px 14px;
border-top: 0.5px solid var(--rule-lt);
}
.mob-read-btn {
display: block;
background: var(--teal);
color: var(--terra-lt);
font-family: var(--sans);
font-size: var(--fs-micro);
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
padding: 13px;
}
.mob-list-row {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 13px 20px;
border-bottom: 0.5px solid var(--rule-lt);
text-decoration: none;
color: inherit;
}
.mob-list-row:hover { background: rgba(26,43,74,0.03); }
.mob-list-left {
flex: 1;
min-width: 0;
padding-right: 12px;
}
.mob-list-title {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.25;
color: var(--ink);
display: block;
letter-spacing: -0.01em;
}
.mob-list-meta {
font-family: var(--sans);
font-size: var(--fs-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pave-dim);
display: block;
margin-top: 4px;
}
.mob-list-num {
font-family: var(--sans);
font-size: var(--fs-caption);
color: var(--rule);
letter-spacing: 0.04em;
flex-shrink: 0;
}
}
/* 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 { background: var(--rule-lt); }
.pop-section-hd {
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 0.5px solid var(--rule);
}
.pop-row {
display: flex;
align-items: baseline;
gap: 12px;
padding: 9px 0;
border-bottom: 0.5px solid var(--rule-lt);
text-decoration: none;
color: inherit;
transition: opacity 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(--teal);
min-width: 22px;
flex-shrink: 0;
letter-spacing: 0.06em;
opacity: 0.5;
}
.pop-views { display: none; }
.pop-info { flex: 1; min-width: 0; }
.pop-title {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-base);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
display: block;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pop-series {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
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(--serif);
font-size: var(--fs-ui);
font-weight: 400;
font-style: italic;
color: var(--terra);
margin-bottom: 16px;
padding-left: 10px;
border-left: 1.5px solid var(--terra);
line-height: 1.5;
}
.cs-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 0.5px solid #E0E0DC;
}
.cs-item:last-child { border-bottom: none; }
.cs-info { flex: 1; min-width: 0; }
.cs-title {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-sm);
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
display: block;
line-height: 1.2;
}
.cs-meta {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--terra);
display: block;
margin-top: 2px;
line-height: 1.5;
}
.cs-meta .bm-order-hash {
color: var(--pave-dim);
}
.cs-author {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
color: var(--pave-dim);
display: block;
margin-top: 1px;
}
.cs-upvote {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(26,43,74,0.04);
border: 0.5px solid #C5CEDF;
padding: 4px 9px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
flex-shrink: 0;
font-family: var(--sans);
font-size: var(--text-xs);
color: var(--teal);
letter-spacing: 0.06em;
}
.cs-upvote:hover { background: rgba(26,43,74,0.08); border-color: var(--teal); }
.cs-upvote.voted { background: rgba(26,43,74,0.1); border-color: var(--teal); }
.cs-arrow-up { font-size: var(--fs-nano); color: var(--teal); line-height: 1; display: block; }
.cs-arrow-dn { font-size: var(--fs-nano); color: var(--sage); line-height: 1; display: none; }
.cs-upvote:hover .cs-arrow-up { color: var(--teal); }
.cs-upvote.voted .cs-arrow-up { display: none; }
.cs-upvote.voted .cs-arrow-dn { display: block; }
.cs-upvote.voted .cs-count { color: var(--teal); }
.cs-count {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
color: var(--teal);
line-height: 1;
opacity: 0.6;
}
/* 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: var(--fs-display-md);
color: rgba(255,255,255,0.25);
}
.sumbook-entry {
position: absolute;
bottom: 6px;
left: 7px;
font-family: var(--sans);
font-size: var(--fs-nano);
font-weight: 400;
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: var(--fs-micro);
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: 400;
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: var(--fs-display-md);
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: 400;
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: var(--fs-nano);
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: var(--fs-body);
color: var(--ink);
line-height: 1.2;
display: block;
margin-bottom: 4px;
}
.si-fan-author {
font-size: var(--fs-caption);
font-weight: 400;
color: var(--pave);
display: block;
margin-bottom: auto;
}
.si-fan-count {
font-size: var(--fs-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pave);
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.si-fan-cta {
font-size: var(--fs-micro);
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);
margin-top: 20px;
}
.jnl-col-hd span {
font-family: var(--serif);
font-size: var(--fs-caption);
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 88px 90px 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: 400;
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: 400;
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: 400;
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: var(--fs-micro);
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: var(--fs-micro);
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 12px;
border-bottom: 0.5px solid var(--rule);
background: var(--paper);
align-items: center;
}
.jnl-tag-pill {
font-family: var(--sans);
font-size: var(--fs-micro);
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: var(--paper); border-color: var(--teal); background: var(--teal); }
.jnl-tag-pill[data-overflow="1"] { display: none; }
.jnl-tag-filter.tf-expanded .jnl-tag-pill[data-overflow="1"] { display: inline-flex; }
.tf-more-btn {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pave);
background: none;
border: 0.5px dashed var(--rule);
padding: 3px 8px;
cursor: pointer;
line-height: 1.4;
transition: color 0.12s, border-color 0.12s;
flex-shrink: 0;
}
.tf-more-btn:hover { color: var(--ink); border-color: var(--pave); }
.jnl-tag-filter.tf-expanded .tf-more-btn { border-style: solid; }
@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 ── */
.sidebar-tablet-only { display: none; }
.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: var(--fs-caption);
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: var(--fs-display-lg);
color: var(--rule);
line-height: 1;
letter-spacing: -0.03em;
}
.post-book-of {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
color: var(--pave);
margin-top: 2px;
}
/* ── POST ENTRY STAMP (header) ── */
.post-entry-num {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-display-lg);
color: var(--amber);
line-height: 1;
display: block;
letter-spacing: -0.02em;
text-align: right;
}
/* ── RIGHT RAIL EXTRAS ── */
.sidebar-read-time {
margin-top: 0;
border: 0.5px solid #C5CEDF;
border-left: 3px solid var(--teal);
padding: 16px 14px 14px;
text-align: center;
background: var(--teal-lt);
}
.sidebar-read-time .sidebar-label {
border-bottom: 0.5px solid rgba(26,43,74,0.12);
padding-bottom: 10px;
margin-bottom: 12px;
}
.sidebar-read-num {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-display-lg);
color: var(--ink);
line-height: 1;
letter-spacing: -0.03em;
display: block;
}
.sidebar-read-unit {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pave-dim);
margin-top: 4px;
display: block;
}
.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: var(--text-md);
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: var(--teal); }
.aw-dot-s { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }
.aw-dot-p { width: 5px; height: 5px; border-radius: 50%; background: var(--pave); }
/* 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 diamond 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%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 6px;
height: 6px;
background: var(--terra);
box-shadow: 0 0 0 4px var(--paper);
}
/* ── 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: var(--sage); }
.aw-loader-dot:nth-child(3) { animation-delay: 0.4s; background: var(--pave); }
/* 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: var(--fs-display-md);
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: var(--teal);
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: var(--sage);
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: var(--terra-lt); }
.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: var(--teal);
background: var(--teal-lt);
}
.post-tag-navy:hover { color: var(--teal); background: var(--teal-lt); }
/* ── WLOF/SNAPSHOT TYPE BADGE ── */
.aw-type-badge {
font-family: var(--sans);
font-size: var(--fs-caption);
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: var(--teal); background: var(--teal-lt); }
.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 rgba(249,249,247,0.08);
background: var(--hero-dk);
}
.footer-copy,
.footer-spoiler-note {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 400;
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: var(--cover-dk);
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: 400;
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: var(--paper);
}
.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: 400;
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: 72px 52px 52px;
}
.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: var(--fs-display-md);
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: 52px 28px 40px; }
.page-body-wrap { padding: 36px 28px 52px; }
}
@media (max-width: 599px) {
.page-hero { padding: 40px 20px 28px; }
.page-hero-title { font-size: var(--fs-display-md); }
.page-body-wrap { padding: 28px 20px 48px; }
}
.privacy-content {
padding: 48px 52px;
font-family: var(--sans);
font-size: var(--fs-body);
font-weight: 300;
line-height: 1.85;
color: var(--ink);
}
.privacy-content h2 {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-display-sm);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
margin: 2em 0 0.5em;
}
.privacy-content h3 {
font-family: var(--sans);
font-size: var(--fs-label);
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: var(--fs-ui); } }
@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; }
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 */
.hero-image-panel { min-height: 0; padding: 20px 16px; }
.hero-spoiler-title { font-size: clamp(2.5rem, 4vw, 3.5rem); color: #F9F9F7; }
.hero-spoiler-sub { font-size: var(--fs-body); line-height: 1.5; max-width: 380px; margin-bottom: 14px; color: rgba(249,249,247,0.88); }
.hero-illustration-svg { max-width: 320px; margin-bottom: 12px; }
.hero-genre-intro { font-size: var(--fs-label); }
.hero-genre-list { font-size: var(--fs-ui); }
.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: 44px 28px 24px; }
.jnl-controls { padding: 10px 28px; }
.jnl-tag-filter { padding: 9px 28px; }
.jnl-col-hd { grid-template-columns: 44px 1fr 88px 90px 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) 88px 90px 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; }
.sidebar-tablet-only { display: block; }
.post-content { padding: 32px 28px; border-right: none; }
.post-sidebar { border-left: 0.5px solid var(--rule-lt); }
.post-header { padding: 40px 28px 0; border-bottom: none; }
.post-header-inner { display: block; }
.post-header-entry-col { display: none; }
.post-byline { display: none; }
.mob-post-entry { display: block; }
.mob-post-meta { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0 14px; }
.mob-spoiler-bar { display: flex; }
.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: none; }
.post-content { padding: 28px; border-right: none; }
.post-footer-panel { grid-template-columns: 1fr; gap: 20px; padding: 24px 28px; }
.post-header { padding: 32px 28px 0; }
.post-content { padding: 20px 28px; }
/* Hero: full-width centred panel stacks above detail */
.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: clamp(2.5rem, 4vw, 3.5rem); color: #F9F9F7; margin-bottom: 10px; white-space: nowrap; }
.hero-spoiler-sub { font-size: var(--fs-body); line-height: 1.45; max-width: 360px; margin-bottom: 14px; color: rgba(249,249,247,0.88); }
.hero-cover-foot { margin-top: 14px; }
.hero-genre-intro { font-size: var(--fs-label); }
.hero-genre-list { font-size: var(--fs-ui); }
.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: var(--fs-display-sm); 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 (min-width: 600px) and (max-width: 767px) {
.mob-kicker { padding: 16px 28px 10px; }
.mob-featured { margin: 0 28px 20px; }
.mob-list-row { padding: 13px 28px; }
}
@media (max-width: 767px) {
/* Series index — show fan row, hide desktop grid */
.hero-detail-panel { display: none; }
.section-header { display: none; }
.hp-strip { display: none; }
.mob-home { display: block; }
.bk-grid:not(.bk-grid--gallery) { grid-template-columns: repeat(6, 1fr); }
.bk-grid.bk-grid--gallery { grid-template-columns: repeat(4, 1fr); }
.bk-card-illustration { opacity: 0.55; }
.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; }
.nav-toggle { display: none; }
.mobile-menu { display: none !important; }
.nav-overlay { display: none !important; }
/* 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: clamp(2.5rem, 4vw, 3.5rem); color: #F9F9F7; margin-bottom: 8px; white-space: nowrap; }
.hero-spoiler-sub { font-size: var(--fs-ui); line-height: 1.5; max-width: 280px; margin-bottom: 12px; color: rgba(249,249,247,0.88); }
.hero-cover-foot { margin-top: 12px; }
.hero-genre-intro { font-size: var(--fs-micro); }
.hero-genre-list { font-size: var(--fs-label); }
.hero-detail-panel { 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: var(--fs-nano); display: block; }
.hero-book-title { font-size: var(--text-md); line-height: 1.1; margin-bottom: 4px; text-align: right; white-space: normal; }
.hero-excerpt-text { font-size: var(--fs-ui); line-height: 1.65; margin-bottom: 12px; }
.hero-cta { font-size: var(--fs-nano); letter-spacing: 0.14em; }
/* Post mobile cover */
.post-mobile-cover { display: none; }
/* Post header — keep two-col on mobile */
.post-header { padding: 28px 20px; }
.post-header-inner { grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.post-entry-num { font-size: var(--fs-display-lg); }
/* 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 3 columns */
.bk-grid:not(.si-desktop-grid):not(.bk-grid--gallery) { grid-template-columns: repeat(2, 1fr); }
.bk-grid.bk-grid--gallery { grid-template-columns: repeat(3, 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: 36px 20px 20px; gap: 12px; }
.archive-hero-title { font-size: var(--fs-display-md); }
/* Section label */
.section-header { padding: 9px 20px; }
/* Journal */
.jnl-header { padding: 34px 20px 18px; }
.jnl-stat-n { font-size: var(--fs-display-lg); }
.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-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: var(--fs-body); }
/* 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; }
}
/* ── MOB SINGLE POST ── */
.mob-post-entry { display: none; }
.mob-post-meta { display: none; }
.mob-spoiler-bar { display: none; }
@media (max-width: 599px) {
.post-header { padding: 24px 20px 0; border-bottom: none; }
.post-header-inner { display: block; }
.post-header-entry-col { display: none; }
.post-header-title-col { padding-bottom: 0; }
.post-byline { display: none; }
.mob-post-meta { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0 14px; }
.mob-post-pill {
font-family: var(--sans);
font-size: var(--fs-nano);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pave);
border: 0.5px solid var(--rule);
padding: 3px 8px;
}
.mob-spoiler-bar {
display: flex;
align-items: center;
gap: 8px;
background: var(--teal-lt);
border: 0.5px solid #C5CEDF;
padding: 10px 14px;
margin-bottom: 16px;
}
.mob-spoiler-dot {
width: 10px;
height: 10px;
background: var(--teal);
border-radius: 50%;
flex-shrink: 0;
}
.mob-spoiler-text {
font-family: var(--sans);
font-size: var(--fs-micro);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal);
}
.mob-post-entry {
display: block;
font-family: var(--sans);
font-size: var(--fs-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pave-dim);
padding-bottom: 8px;
}
.post-mobile-cover { display: none; }
.post-layout { display: block; }
.post-left-rail { display: none; }
.post-sidebar { display: none; }
.post-content { padding: 0 20px; border: none; }
.post-content-inner { padding-bottom: 32px; }
.breadcrumb { padding: 14px 0 10px; }
.breadcrumb-sep { margin: 0 4px; }
}