@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url(//drochbook.com/wp-content/themes/drochbook/assets/fonts/manrope-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url(//drochbook.com/wp-content/themes/drochbook/assets/fonts/manrope-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--surface: #fbfaf9;
--surface-soft: #f5f3ed;
--text: #39373d;
--muted: #79767d;
--accent: #b35d70;
--accent-dark: #914758;
--accent-soft: #f4e6e8;
--rail: #39373e;
--line: #e5e2dc;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 18px;
--shadow: 0 18px 50px #26232d26;
--fast: 160ms ease;
--normal: 240ms ease;
--font-body: 'Manrope', Arial, sans-serif;
--font-display: 'Manrope', Arial, sans-serif;
--text-body: 1.0625rem;
--text-title: clamp(1.75rem, 2.35vw, 2.25rem);
--frame: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
min-height: 100vh;
margin: 0;
padding: 34px clamp(0px, 3.1vw, 48px) 34px;
background: linear-gradient(145deg, #48444e 0%, #625a68 66%, #9b6871 100%);
color: var(--text);
font-family: var(--font-body);
font-size: var(--text-body);
-webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a, select { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
button:active:not(:disabled) { transform: translateY(1px); }
::selection { background: #edcdd3; color: #392d34; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.header, .layout, .footer {
width: min(100%, var(--frame));
margin-inline: auto;
}
.header {
position: relative;
z-index: 5;
overflow: hidden;
background: var(--surface);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: var(--shadow);
}
.header-inner {
min-height: 104px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 17px 28px;
}
.brand {
display: flex;
align-items: center;
flex: 0 0 auto;
gap: 15px;
padding: 0;
color: var(--text);
font-family: var(--font-display);
text-decoration: none;
}
.brand-mark {
width: 54px;
height: 54px;
display: grid;
flex: 0 0 auto;
place-items: center;
border: 1px solid #c98491;
border-radius: 18px;
background: linear-gradient(145deg, #c06d7e, #a44e63);
box-shadow: 0 6px 15px #9b526324, inset 0 1px #ffffff35;
}
.brand-mark svg { width: 34px; height: 34px; color: #fff7f5; stroke-width: 1.35; }
.brand-copy { min-width: 0; display: grid; gap: 3px; }
.brand-name {
display: block;
color: #39373e;
font: 700 28px/.95 var(--font-display);
letter-spacing: -.9px;
white-space: nowrap;
}
.brand-kicker {
display: block;
margin-left: 2px;
margin-bottom: 3px;
color: var(--accent-dark);
font: 700 8px/1 var(--font-body);
letter-spacing: 2.3px;
text-transform: uppercase;
}
.brand-period { color: var(--accent); }
.brand-caption {
display: block;
color: #858087;
font: 11px/1.3 var(--font-body);
letter-spacing: .15px;
white-space: nowrap;
}
.site-search {
min-width: 0;
width: min(100%, 430px);
flex: 0 1 430px;
min-height: 54px;
display: flex;
align-items: center;
gap: 10px;
padding: 5px 5px 5px 16px;
border: 1px solid #e8e4df;
border-radius: 17px;
background: #f8f7f4;
box-shadow: inset 0 1px 2px #39373e08;
transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.site-search:focus-within { border-color: #cf9aa4; background: #fbfaf9; box-shadow: 0 0 0 2px #b35d7014; }
.site-search svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--accent); }
.site-search input:focus { outline: 0; box-shadow: none; }
.site-search input {
min-width: 0;
height: 42px;
flex: 1;
border: 0;
background: transparent;
color: var(--text);
font-size: 15px;
}
.site-search input::placeholder { color: #9a969d; }
.site-search button {
min-height: 42px;
border: 0;
border-radius: 13px;
padding: 0 14px;
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 600;
transition: background var(--fast), transform var(--fast);
}
.site-search button:hover { background: var(--accent-dark); }
.menu-toggle {
width: 42px;
height: 42px;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
padding: 0;
border: 1px solid #c98491;
border-radius: 8px;
background: linear-gradient(145deg, #c06d7e, #a44e63);
color: #fff;
cursor: pointer;
}
.menu-toggle__line {
display: block;
width: 20px;
height: 2px;
border-radius: 999px;
background: currentColor;
transition: transform var(--fast), opacity var(--fast);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 294px;
align-items: start;
gap: 22px;
padding: 24px 27px 38px;
background: #f2f0ea;
box-shadow: var(--shadow);
}
.layout main { min-width: 0; }
.hero {
margin: 0 0 23px;
padding: 25px 32px 24px;
background: var(--surface);
border: 1px solid #eeeae4;
border-radius: var(--radius-sm);
}
.eyebrow {
display: flex;
align-items: center;
gap: 9px;
color: var(--accent-dark);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.55px;
}
.hero h1 {
margin: 0 0 9px;
font-family: var(--font-body);
font-size: var(--text-title);
font-weight: 600;
line-height: 1.18;
letter-spacing: -.8px;
}
.hero > p {
margin: 0;
color: var(--muted);
font-size: 16px;
line-height: 1.8;
}
.story-card {
margin-bottom: 13px;
padding: 30px 32px 24px;
border: 1px solid #e7e4de;
border-radius: var(--radius-sm);
background: var(--surface);
}
.story-tags {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 6px;
}
.story-tag {
display: inline-flex;
padding: 5px 9px;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent-dark);
font-size: 12px;
font-weight: 400;
line-height: 1.3;
transition: background var(--fast), color var(--fast);
}
.story-tag:hover { background: #ecd2d7; color: var(--accent-dark); }
.story-tags .story-tag:nth-child(even) { background: #eeebf2; color: #73647f; }
.story-tags .story-tag:nth-child(even):hover { background: #e2dce9; color: #5c4b69; }
.story-card h2 {
margin: 18px 0 12px;
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
line-height: 1.22;
letter-spacing: -.45px;
}
.story-card h2 a { color: inherit; text-decoration: none; transition: color var(--fast); }
.story-card h2 a:hover { color: var(--accent-dark); }
.story-card > p {
margin: 0 0 20px;
color: #5d5961;
font-size: 17px;
line-height: 1.75;
}
.story-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 15px;
border-top: 1px solid #f0eeea;
}
.story-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.story-meta time { display: inline-flex; align-items: center; gap: 6px; }
.story-meta time svg { width: 15px; height: 15px; flex: 0 0 auto; }
.views { display: flex; align-items: center; gap: 5px; }
.views svg { width: 15px; height: 15px; }
.read-link {
width: fit-content;
min-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
border: 1px solid #e8e4df;
border-radius: var(--radius-sm);
padding: 0 14px;
background: #faf9f7;
color: var(--accent-dark);
font-size: 14px;
font-weight: 600;
text-align: left;
transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.read-link svg { position: relative; top: 1px; width: 15px; height: 15px; flex: 0 0 auto; color: inherit; stroke-width: 1.6; }
.read-link:hover { border-color: #e2cbd0; background: #fff8f8; color: var(--accent-dark); }
.sidebar { min-width: 0; }
.category-panel {
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--rail);
color: #f7f5f2;
box-shadow: 0 5px 14px #39333b0a;
}
.site-menu { padding: 0; }
.category-title {
display: block;
margin: 10px 10px 4px;
padding: 12px 14px;
border: 1px solid #e5a0ad48;
border-radius: var(--radius-md);
background: linear-gradient(110deg, #b35d7040, #ffffff0d);
color: #f7f5f2;
font-size: 12px;
font-weight: 600;
letter-spacing: .55px;
text-transform: uppercase;
box-shadow: 0 4px 12px #17131d20;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.category-list {
display: grid;
gap: 2px;
margin: 0;
padding: 8px;
list-style: none;
}
.category-list li { min-width: 0; }
.category-list li.is-current { padding-inline: 4px; }
.category-link {
width: 100%;
min-height: 44px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-bottom: 1px solid #ffffff14;
border-radius: 8px;
background: transparent;
color: #f0edf0;
text-align: left;
font-size: 14px;
text-decoration: none;
transition: background var(--fast), color var(--fast);
}
.sidebar-category__label {
min-width: 0;
flex: 1;
display: inline-flex;
align-items: center;
gap: 9px;
}
.sidebar-category__label > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-category__label svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: #d7adb6;
}
.category-count {
min-width: 38px;
margin-left: auto;
padding: 3px 8px;
border-radius: 6px;
background: #ffffff12;
color: #d5d0d5;
text-align: center;
font-size: 12px;
font-variant-numeric: tabular-nums;
transition: background var(--fast), color var(--fast);
}
.category-link:hover, .category-list li.is-current .category-link { background: #ffffff12; }
.category-list li.is-current .category-link {
border: 1px solid #f3c2cc52;
border-top-color: #f3c2cc35;
background: linear-gradient(135deg, #e89aaa55 0%, #c56b7e45 48%, #9e4c633b 100%);
box-shadow: 0 5px 14px #17131d35;
color: #fff;
font-weight: 600;
backdrop-filter: blur(12px) saturate(135%);
-webkit-backdrop-filter: blur(12px) saturate(135%);
}
.category-list li.is-current .sidebar-category__label svg { color: #fff; }
.category-link:hover .category-count, .category-list li.is-current .category-count { background: #ffffff24; color: #fff; }
.pagination { display: flex; align-items: center; justify-content: flex-start; padding-top: 7px; }
.footer {
min-height: 82px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 14px 28px;
border-top: 1px solid var(--line);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow);
}
.footer p, .footer > span { margin: 0; color: var(--muted); font-size: 13px; }
.footer .age-warning { color: var(--text); }
.footer-brand-link { color: inherit; text-decoration: none; font-weight: 700; }
.footer-brand-link:hover { color: var(--accent-dark); }
.back-to-top {
position: fixed;
z-index: 30;
right: clamp(16px, 2.2vw, 34px);
bottom: 22px;
width: 50px;
height: 50px;
display: grid;
place-items: center;
border: 1px solid #ca8290;
border-radius: 50%;
background: var(--accent);
color: #fff;
box-shadow: 0 8px 24px #30263135;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--normal), visibility var(--normal), background var(--fast), box-shadow var(--fast);
}
.back-to-top svg { width: 21px; height: 21px; stroke-width: 1.8; }
.back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.back-to-top:hover { background: var(--accent-dark); box-shadow: 0 10px 28px #30263145; }
.empty-state { padding: 38px 22px; border: 1px dashed #d9d4ce; border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.empty-state > span { color: var(--accent); font-size: 32px; }
.empty-state h3 { margin: 8px 0; font: 27px var(--font-display); }
.empty-state p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.empty-state-action {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 8px;
border-radius: 8px;
padding: 11px 16px;
background: var(--accent);
color: #fff;
font-size: 14px;
transition: background var(--fast);
}
.empty-state-action:hover { background: var(--accent-dark); color: #fff; }
@media (max-width: 1040px) {
:root { --frame: 100%; }
body { padding-inline: 22px; }
.header-inner { gap: 20px; padding-inline: 22px; }
.brand { gap: 12px; }
.brand-mark { width: 50px; height: 50px; border-radius: 16px; }
.brand-name { font-size: 26px; }
.brand-caption { font-size: 10px; }
.site-search { flex-basis: 390px; }
.layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; padding-inline: 20px; }
.hero { padding-inline: 25px; }
.story-card { padding-inline: 24px; }
}
@media (max-width: 850px) {
.header-inner { gap: 14px; }
.brand { gap: 10px; }
.brand-mark { width: 46px; height: 46px; border-radius: 15px; }
.brand-mark svg { width: 30px; height: 30px; }
.brand-name { font-size: 23px; }
.brand-caption { font-size: 9px; }
.site-search { flex-basis: 360px; min-height: 50px; padding-left: 12px; }
.site-search input { font-size: 14px; }
.site-search button { min-height: 38px; padding-inline: 11px; }
.layout { grid-template-columns: minmax(0, 1fr); }
.sidebar { display: block; }
.footer { flex-wrap: wrap; justify-content: space-between; text-align: left; }
.footer > span { margin-left: auto; text-align: right; }
}
@media (max-width: 680px) {
body { padding: 18px 0; background: #f2f0ea; }
.header, .layout, .footer { width: 100%; border-radius: 0; box-shadow: none; }
.header-inner {
min-height: 0;
grid-template-columns: minmax(0, 1fr) auto;
display: grid;
gap: 10px 12px;
padding: 14px 16px 13px;
}
.brand {
min-width: 0;
min-height: 54px;
justify-content: flex-start;
grid-column: 1;
grid-row: 1;
gap: 10px;
}
.brand-mark { width: 46px; height: 46px; border-radius: 15px; }
.brand-mark svg { width: 30px; height: 30px; }
.brand-name { font-size: 23px; }
.brand-kicker { font-size: 7px; letter-spacing: 2px; }
.brand-caption { font-size: 9px; }
.menu-toggle {
display: flex;
grid-column: 2;
grid-row: 1;
align-self: center;
margin-right: 1px;
}
.site-search {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
min-height: 48px;
margin-top: 0;
padding: 3px 4px 3px 13px;
}
.site-search input { height: 38px; font-size: 15px; }
.site-search button { min-height: 38px; margin-right: 0; padding-inline: 12px; font-size: 12px; }
.layout { display: flex; flex-direction: column; gap: 0; padding: 19px 16px 28px; }
.hero { margin-bottom: 18px; padding: 22px 19px 19px; }
.eyebrow { font-size: 12px; letter-spacing: 1.2px; }
.hero h1 { margin: 0 0 9px; font-size: clamp(27px, 7.2vw, 32px); letter-spacing: -.5px; }
.hero > p { font-size: 15px; line-height: 1.75; }
.story-card { margin-bottom: 13px; padding: 22px 21px 18px; }
.story-card h2 { margin: 16px 0 11px; font-size: 25px; }
.story-card > p { margin-bottom: 18px; font-size: 16px; line-height: 1.7; }
.story-card .post-excerpt { margin-bottom: 18px; font-size: 16px; line-height: 1.7; }
.story-meta { gap: 6px; font-size: 12px; }
.story-bottom { gap: 7px; }
.read-link { font-size: 13px; white-space: nowrap; }
.sidebar { display: block; order: -1; width: 100%; height: 0; margin: 0; padding: 0; }
.site-menu {
position: fixed;
z-index: 120;
top: var(--mobile-menu-top, calc(18px + 139px + 8px));
right: 16px;
left: 16px;
width: auto;
display: none;
max-height: calc(100vh - var(--mobile-menu-top, 165px) - 16px);
max-height: calc(100dvh - var(--mobile-menu-top, 165px) - max(16px, env(safe-area-inset-bottom, 0px)));
overflow-y: auto;
border: 1px solid #625a63;
border-radius: var(--radius-md);
box-shadow: 0 18px 44px #24212a40;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.site-menu.is-open { display: block; }
.category-title { padding: 12px 15px; }
.category-list { grid-template-columns: 1fr; gap: 2px; padding: 7px; }
.category-link { min-height: 44px; gap: 7px; padding: 8px; font-size: 13px; }
.sidebar-category__label { gap: 7px; }
.sidebar-category__label svg { width: 15px; height: 15px; }
.pagination { padding-top: 4px; }
.footer { min-height: 68px; gap: 8px 16px; padding: 12px 17px; }
.footer p, .footer > span { font-size: 12px; }
.back-to-top { right: 16px; bottom: 18px; width: 46px; height: 46px; }
}
@media (max-width: 390px) {
.header-inner { padding-inline: 13px; }
.brand { gap: 8px; }
.brand-mark { width: 43px; height: 43px; border-radius: 14px; }
.brand-mark svg { width: 28px; height: 28px; }
.brand-name { font-size: 21px; }
.brand-caption { font-size: 8px; }
.layout { padding-inline: 12px; }
.hero { padding-inline: 15px; }
.hero h1 { font-size: 27px; }
.story-card { padding-inline: 17px; }
.story-card h2 { font-size: 23px; }
.story-bottom { align-items: flex-start; flex-direction: column; }
.footer { padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto; transition: none; }
} .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
z-index: 100000;
top: 8px;
left: 8px;
width: auto;
height: auto;
padding: 10px 14px;
margin: 0;
clip: auto;
border-radius: 8px;
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow);
}
.header-inner > .site-search {
margin-left: auto;
}
.layout main {
min-width: 0;
}
.hero .archive-description,
.hero .search-results-text {
margin: 8px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 1.75;
}
.hero .archive-description > :first-child { margin-top: 0; }
.hero .archive-description > :last-child { margin-bottom: 0; }
.story-card {
min-width: 0;
}
.story-heading {
margin: 0 0 24px;
padding: 0 0 22px;
border-bottom: 1px solid #f0eeea;
}
.story-heading .eyebrow {
margin: 0 0 12px;
}
.story-heading .eyebrow svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: var(--accent-dark);
stroke-width: 1.8;
}
.story-title {
margin: 0;
color: var(--text);
font-size: clamp(1.8rem, 3vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -1px;
overflow-wrap: anywhere;
}
.single-story-card .story-tags {
margin: 0 0 24px;
}
.story-tags .story-tag {
font-family: inherit;
}
.story-tags .story-tag:nth-child(even) {
background: #eeebf2;
color: #73647f;
}
.story-tags .story-tag:nth-child(even):hover {
background: #e2dce9;
color: #5c4b69;
}
.story-card h2 a {
overflow-wrap: anywhere;
}
.story-card .post-excerpt {
margin: 0 0 20px;
color: #5d5961;
font-size: 17px;
line-height: 1.75;
}
.story-card .post-excerpt p { margin: 0; }
.story-card > p:last-child {
margin-bottom: 0;
}
.story-thumbnail {
overflow: hidden;
margin: 0 0 22px;
border-radius: var(--radius-sm);
background: var(--surface-soft);
}
.story-thumbnail img {
width: 100%;
max-height: 620px;
object-fit: cover;
}
.story-card .entry-content {
color: var(--text);
font-size: 17px;
line-height: 1.85;
overflow-wrap: anywhere;
}
.story-card .entry-content > :first-child { margin-top: 0; }
.story-card .entry-content > :last-child { margin-bottom: 0; }
.story-card .entry-content p { margin: 0 0 1.25em; }
.story-card .entry-content h2,
.story-card .entry-content h3,
.story-card .entry-content h4 {
margin: 1.7em 0 .65em;
color: var(--text);
line-height: 1.3;
}
.story-card .entry-content h2 { font-size: 1.55em; }
.story-card .entry-content h3 { font-size: 1.3em; }
.story-card .entry-content a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.story-card .entry-content a:hover { color: var(--accent); }
.story-card .entry-content .plm-likes { margin: 24px 0 30px; }
.story-card .entry-content .plm-like-button {
min-height: 46px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 14px;
border: 1px solid #ead7dc;
border-radius: 12px;
background: #fcf7f7;
color: var(--accent-dark);
font: 600 14px/1.25 var(--font-body);
cursor: pointer;
transition: border-color var(--fast), background-color var(--fast), color var(--fast), opacity var(--fast);
}
.story-card .entry-content .plm-like-button:hover {
border-color: #d9b2bb;
background: #f8edef;
color: var(--accent-dark);
}
.story-card .entry-content .plm-like-button:focus-visible {
outline: 2px solid #cf9aa4;
outline-offset: 3px;
}
.story-card .entry-content .plm-like-button[aria-pressed="true"] {
border-color: #d9b2bb;
background: var(--accent-soft);
color: var(--accent-dark);
}
.story-card .entry-content .plm-like-button[aria-busy="true"] {
cursor: wait;
opacity: .7;
}
.story-card .entry-content .plm-like-icon {
width: 18px;
height: 18px;
display: inline-flex;
flex: 0 0 18px;
align-items: center;
justify-content: center;
opacity: 1;
}
.story-card .entry-content .plm-like-icon svg {
width: 100%;
height: 100%;
display: block;
}
.story-card .entry-content .plm-like-icon--filled { display: none; }
.story-card .entry-content .plm-like-button[aria-pressed="true"] .plm-like-icon--outline { display: none; }
.story-card .entry-content .plm-like-button[aria-pressed="true"] .plm-like-icon--filled { display: inline-flex; }
.story-card .entry-content .plm-like-count {
min-width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 6px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-dark);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.story-card .entry-content .plm-like-status { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.story-card .entry-content .plm-like-status:empty { display: none; }
.story-card .entry-content ul,
.story-card .entry-content ol { padding-left: 1.5em; }
.story-card .entry-content blockquote {
margin: 1.5em 0;
padding: 14px 20px;
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--surface-soft);
}
.story-card .entry-content img,
.story-card .entry-content video,
.story-card .entry-content iframe { max-width: 100%; }
.story-card .entry-content img { height: auto; border-radius: var(--radius-sm); }
.story-card .entry-content .wp-block-embed { margin-inline: 0; }
.story-card .entry-content .wp-block-gallery { padding: 0; }
.story-card .entry-content .yarpp-related {
margin: 34px 0 30px;
padding: 24px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: 0 8px 24px #39373e0a;
}
.story-card .entry-content .yarpp-related h3 {
margin: 0 0 16px;
padding-bottom: 14px;
border-bottom: 1px solid #eae6e2;
color: var(--text);
font-size: 1.25rem;
font-weight: 700;
}
.story-card .entry-content .yarpp-related ol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.story-card .entry-content .yarpp-related li a {
position: relative;
min-height: 56px;
display: flex;
align-items: center;
gap: 11px;
height: 100%;
padding: 10px 15px;
border: 1px solid #ead7dc;
border-radius: 10px;
background: #fcf7f7;
color: var(--accent-dark);
font-size: 15px;
font-weight: 600;
line-height: 1.45;
text-decoration: none;
transition: border-color var(--fast), background var(--fast), color var(--fast), box-shadow var(--fast);
}
.story-card .entry-content .yarpp-related li:nth-child(even) a {
border-color: #e1dce8;
background: #f7f5fa;
color: #65556f;
}
.story-card .entry-content .yarpp-related li a::before {
width: 22px;
height: 22px;
display: grid;
flex: 0 0 auto;
place-items: center;
border-radius: 7px;
background: var(--accent-soft);
content: "";
line-height: 1;
}
.story-card .entry-content .yarpp-related li a::after {
position: absolute;
top: 50%;
left: 20px;
width: 14px;
height: 16px;
background-color: var(--accent-dark);
content: "";
transform: translateY(-50%);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4%201.75h5l3%203v9.5H4z' stroke='%23fff' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9%202v3h3M6%208h4M6%2010.5h4' stroke='%23fff' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4%201.75h5l3%203v9.5H4z' stroke='%23fff' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9%202v3h3M6%208h4M6%2010.5h4' stroke='%23fff' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.story-card .entry-content .yarpp-related li:nth-child(even) a::before {
background: #eeebf2;
}
.story-card .entry-content .yarpp-related li:nth-child(even) a::after {
background-color: #73647f;
}
.story-card .entry-content .yarpp-related li a:hover {
border-color: #d9b2bb;
background: #fff9fa;
}
.story-card .entry-content .yarpp-related li:nth-child(even) a:hover {
border-color: #cfc4dc;
background: #fbfaff;
}
.story-navigation {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.story-navigation__link {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.story-navigation__link:hover { border-color: #d8b1b9; background: #fff9fa; color: var(--accent-dark); }
.story-navigation__link svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.story-navigation__content { min-width: 0; display: grid; gap: 4px; }
.story-navigation__link--next .story-navigation__content { flex: 1; text-align: right; }
.story-navigation__label { color: var(--muted); font-size: 12px; }
.story-navigation__title { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sidebar { display: grid; align-self: start; gap: 14px; }
.sidebar-widget {
min-width: 0;
padding: 18px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.sidebar-widget .widget-title {
margin: 0 0 14px;
color: var(--text);
font-size: 15px;
}
.sidebar-widget ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sidebar-widget li { display: flex; justify-content: space-between; gap: 12px; }
.sidebar-widget li a { color: inherit; }
.sidebar-widget li a:hover { color: var(--accent); }
.category-panel { width: 100%; }
@media (max-width: 680px) {
.category-panel.site-menu { width: auto; max-width: calc(100vw - 32px); }
}
.category-list { list-style: none; }
.category-list .category-link { width: 100%; }
.category-list .category-count { flex: 0 0 auto; }
.site-menu .sidebar-category__label > span { color: inherit; }
.pagination {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.pagination .page-numbers {
min-width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border: 1px solid #dfdcd6;
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-size: 13px;
font-weight: 500;
transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.pagination a.page-numbers:hover,
.pagination .page-numbers.current {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.pagination .page-numbers.dots { background: transparent; }
.comments-area {
margin-top: 16px;
padding: 24px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.comments-header { margin-bottom: 18px; }
.comments-title,
.comment-reply-title { margin: 0 0 14px; font-size: 22px; line-height: 1.3; }
.comment-list { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
.comment-item { padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.comment-body { display: flex; align-items: flex-start; gap: 12px; }
.comment-avatar img { width: 40px; height: 40px; border-radius: 50%; }
.comment-main { min-width: 0; flex: 1; }
.comment-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.comment-meta > div { display: grid; gap: 2px; }
.comment-meta time,
.comment-reply-link,
.comment-notes,
.comments-closed,
.comment-awaiting-moderation { color: var(--muted); font-size: 13px; }
.comment-author-name { font-weight: 700; }
.comment-content > :last-child { margin-bottom: 0; }
.comment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.comment-form > p { margin: 0; }
.comment-form .comment-notes,
.comment-form .comment-form-comment,
.comment-form .comment-form-cookies-consent,
.comment-form .form-submit { grid-column: 1 / -1; }
.comment-form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form textarea {
width: 100%;
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
background: #fbfaf8;
color: var(--text);
transition: border-color var(--normal), box-shadow var(--normal), background-color var(--normal);
}
.comment-form input:not([type="checkbox"]):not([type="submit"]):hover,
.comment-form textarea:hover {
border-color: #d8c9cb;
}
.comment-form input:not([type="checkbox"]):not([type="submit"]):focus,
.comment-form textarea:focus {
border-color: #c98491;
background: #fbfaf9;
box-shadow: 0 0 0 3px #b35d701a;
}
.comment-form input:not([type="checkbox"]):not([type="submit"]):focus-visible,
.comment-form textarea:focus-visible {
outline: 0;
}
.comment-form textarea { resize: vertical; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; }
.comment-form .comment-form-cookies-consent label { margin: 0; color: var(--muted); font-weight: 400; }
.comment-form .submit {
width: auto;
min-height: 44px;
border: 1px solid transparent;
border-radius: 10px;
padding: 0 20px;
background: var(--accent);
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: border-color var(--normal), background-color var(--normal), box-shadow var(--normal);
}
.comment-form .submit:hover { background: var(--accent-dark); }
.comment-form .submit:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px #b35d7026;
}
.comments-pagination { display: flex; gap: 8px; margin: 18px 0; }
.comments-pagination a,
.comments-pagination span { padding: 7px 10px; border-radius: 7px; background: var(--surface-soft); }
.comments-pagination .current { background: var(--accent); color: #fff; }
.footer { flex-wrap: wrap; }
.footer p { margin: 0; }
.liveinternet-counter { display: none !important; }
@media (max-width: 680px) {
.story-heading { margin-bottom: 21px; padding-bottom: 18px; }
.story-heading .eyebrow { margin-bottom: 10px; }
.story-title { font-size: clamp(1.65rem, 6.5vw, 2rem); letter-spacing: -.6px; }
.single-story-card .story-tags { margin-bottom: 21px; }
.story-navigation { grid-template-columns: 1fr; }
.story-card .entry-content { font-size: 16px; line-height: 1.75; }
.story-card .entry-content .yarpp-related { margin-bottom: 26px; padding: 18px; }
.story-card .entry-content .yarpp-related ol { grid-template-columns: 1fr; }
.comments-area { padding: 18px; }
.comment-form { grid-template-columns: 1fr; }
.comment-form > p { grid-column: 1 / -1; }
}