body { padding: 0; background: #f2f0ea; }
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 30%);
align-items: stretch;
gap: 0;
width: 100%;
max-width: none;
min-height: 100vh;
margin: 0;
padding: 0;
box-shadow: none;
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.back-to-top { border-radius: 14px; }
.content-column {
grid-column: 1;
grid-row: 1;
justify-self: end;
width: 100%;
max-width: 1120px;
min-width: 0;
padding: 64px clamp(36px, 5.5vw, 92px) 40px;
}
.layout > .sidebar {
display: block;
grid-column: 2;
grid-row: 1;
align-self: stretch;
width: auto;
height: auto;
margin: 0;
padding: 64px clamp(28px, 4.2vw, 72px);
background: var(--rail);
color: var(--surface);
border-left: 1px solid #ffffff0d;
}
.sidebar__inner { width: 100%; max-width: 340px; margin-inline: auto; }
.sidebar-widget {
margin-top: 24px;
border-color: #ffffff1a;
background: #ffffff06;
color: var(--surface);
}
.sidebar-widget .widget-title { color: inherit; }
.header {
width: 100%;
margin: 0 0 34px;
overflow: visible;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.header-inner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 28px;
min-height: 0;
padding: 0;
}
.brand { min-width: 0; gap: 12px; }
.brand-name { color: var(--surface); font-size: 28px; }
.brand-kicker { color: #d7adb6; font-size: 9px; }
.brand-caption { color: #c0bac2; font-size: 12px; line-height: 1.6; white-space: normal; }
.brand-mark { width: 50px; height: 50px; border-radius: 16px; box-shadow: none; }
.brand-mark svg { width: 27px; height: 27px; fill: currentColor; stroke: none; color: #fff7f5; }
.header-inner > .site-search {
flex: none;
width: 100%;
min-height: 50px;
margin: 0;
padding: 4px 4px 4px 12px;
border-color: #ffffff1a;
border-radius: 12px;
background: #ffffff08;
box-shadow: none;
}
.site-search input { height: 40px; color: var(--surface); font-size: 13px; }
.site-search input::placeholder { color: #bdb6c0; }
.site-search > svg { width: 17px; height: 17px; color: #d7adb6; }
.site-search button { min-height: 40px; padding-inline: 11px; border-radius: 9px; }
.site-search:focus-within { border-color: #c98491; background: #ffffff0d; box-shadow: 0 0 0 3px #c9849114; }
.menu-toggle__icon { width: 22px; height: 22px; color: #fff; }
.menu-toggle__icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--menu { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close { display: block; }
.pagination .prev svg,
.pagination .next svg { width: 16px; height: 16px; }
.empty-state__icon { width: 32px; height: 32px; color: var(--accent); }
.category-panel { width: 100%; border-radius: 0; background: transparent; box-shadow: none; }
.category-title {
margin: 0;
padding: 0 0 17px;
border: 0;
border-bottom: 1px solid #ffffff24;
border-radius: 0;
background: transparent;
color: #d7adb6;
font-size: 12px;
letter-spacing: 1.4px;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.category-list { gap: 0; padding: 7px 0 0; }
.category-link { min-height: 47px; padding: 11px 12px; border-radius: 8px; line-height: 1.5; }
.sidebar-category__label > span { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.category-count { min-width: 34px; padding: 2px 6px; font-size: 12px; }
.category-link:hover { background: #ffffff06; }
.story-tags .story-tag { align-items: center; gap: 5px; }
.story-tags .story-tag__icon { width: 12px; height: 12px; flex: 0 0 auto; }
.story-tags .story-tag,
.story-tags .story-tag:nth-child(even) { background: #f2f0ea; color: #5e5c62; }
.story-tags .story-tag:hover,
.story-tags .story-tag:nth-child(even):hover { background: #e8e5dd; color: #39373e; }
.hero { margin-bottom: 28px; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.story-card { margin-bottom: 18px; }
.footer {
width: 100%;
min-height: 0;
margin: 30px 0 0;
padding: 24px 0 0;
gap: 10px 24px;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.footer p, .footer > span { font-size: 13px; line-height: 1.7; }
@media (min-width: 901px) {
.story-card { padding: 40px clamp(30px, 3vw, 44px) 34px; }
.story-card .story-tags { gap: 8px; }
.stories > .story-card h2 { margin: 24px 0 18px; }
.story-card .post-excerpt { margin-bottom: 28px; }
.story-card .story-bottom { padding-top: 22px; }
}
@media (min-width: 1800px) {
.layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1120px) minmax(540px, min(30vw, 680px)); }
.content-column { grid-column: 2; }
.layout > .sidebar { grid-column: 3; }
}
@media (min-width: 901px) and (max-width: 1100px) {
.layout { grid-template-columns: minmax(0, 1fr) 280px; }
.content-column { padding: 52px 38px 32px; }
.layout > .sidebar { padding: 52px 24px; }
.brand { gap: 10px; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; }
.brand-mark svg { width: 27px; height: 27px; }
.brand-name { font-size: 24px; }
.brand-caption { font-size: 11px; }
.site-search { gap: 7px; }
.site-search input { font-size: 12px; }
}
@media (max-width: 900px) {
.layout { display: flex; flex-direction: column; }
.layout > .sidebar { order: -1; width: 100%; padding: 28px 34px; border: 0; }
.sidebar__inner { max-width: 752px; }
.header { margin: 0; }
.header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
.brand { grid-column: 1; grid-row: 1; min-height: 54px; }
.menu-toggle { display: flex; grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.header-inner > .site-search { grid-column: 1 / -1; grid-row: 2; }
.content-column { max-width: 820px; margin-inline: auto; padding: 40px 34px 32px; }
.site-menu {
position: fixed;
z-index: 120;
top: var(--mobile-menu-top, 190px);
right: 22px;
left: 22px;
display: none;
width: auto;
max-width: none;
max-height: calc(100vh - var(--mobile-menu-top, 190px) - 22px);
max-height: calc(100dvh - var(--mobile-menu-top, 190px) - max(22px, env(safe-area-inset-bottom, 0px)));
padding: 18px;
overflow-y: auto;
border: 1px solid #625a63;
border-radius: var(--radius-md);
background: var(--rail);
box-shadow: 0 18px 44px #24212a40;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.site-menu.is-open { display: block; }
.category-list { grid-template-columns: minmax(0, 1fr); }
.category-link { font-size: 14px; }
.footer > span { margin-left: 0; text-align: left; }
}
@media (max-width: 540px) {
.layout > .sidebar { padding: 24px 20px; }
.header-inner { gap: 18px 12px; }
.brand { gap: 10px; }
.brand-mark { width: 44px; height: 44px; border-radius: 14px; }
.brand-name { font-size: 25px; }
.brand-kicker { font-size: 8px; }
.brand-caption { font-size: 11px; }
.content-column { padding: 30px 16px; }
.hero { margin-bottom: 22px; padding-bottom: 24px; }
.site-menu { right: 16px; left: 16px; padding: 16px; }
.footer { margin-top: 26px; padding-top: 20px; }
}
@media (max-width: 360px) {
.layout > .sidebar { padding-inline: 16px; }
.brand-name { font-size: 22px; }
.brand-mark { width: 40px; height: 40px; }
.brand { gap: 8px; }
}