:root {
--ghost-accent-color: #4e8fad;
--color-white: #fff;
--color-lighter-gray: rgb(0 0 0 / 0.05);
--color-light-gray: #e6e6e6;
--color-mid-gray: #ccc;
--color-dark-gray: #444;
--color-darker-gray: #15171a;
--color-black: #000;
--color-primary-text: var(--color-darker-gray);
--color-secondary-text: rgb(0 0 0 / 0.55);
--color-border: rgb(0 0 0 / 0.08);
--color-dark-border: rgb(0 0 0 / 0.55);
--font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-serif: "EB Garamond", Georgia, Times, serif;
--font-serif-alt: Georgia, Times, serif;
--font-mono: "JetBrains Mono", Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
--container-width: 1320px;
--container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
--grid-gap: 42px;
}
:root.has-light-text,
:is(.gh-navigation, .gh-footer).has-accent-color {
--color-lighter-gray: rgb(255 255 255 / 0.1);
--color-darker-gray: #fff;
--color-secondary-text: rgb(255 255 255 / 0.64);
--color-border: rgb(255 255 255 / 0.15);
--color-dark-border: rgb(255 255 255 / 0.5);
}
:root[data-theme="dark"] {
--background-color: #11141a;
--color-lighter-gray: rgb(226 232 240 / 0.075);
--color-light-gray: #252b36;
--color-mid-gray: #7c8493;
--color-dark-gray: #d7dce5;
--color-darker-gray: #f5f7fb;
--color-primary-text: #eef2f8;
--color-secondary-text: rgb(226 232 240 / 0.72);
--color-border: rgb(226 232 240 / 0.13);
--color-dark-border: rgb(245 247 251 / 0.34);
}
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg {
display: block;
height: auto;
max-width: 100%;
}
iframe {
display: block;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
}
sub, sup {
line-height: 1;
}
body {
font-family: var(--gh-font-body, var(--font-sans));
font-size: 1.6rem;
background-color: var(--background-color);
color: var(--color-primary-text);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--gh-font-heading, var(--font-sans));
}
a {
color: var(--color-darker-gray);
text-decoration: none;
}
a:hover {
opacity: 0.8;
}
.gh-button {
display: inline-flex;
gap: 0.4em;
align-items: center;
justify-content: center;
padding: 0.8em 1.4em;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.004em;
line-height: 1;
color: var(--color-white);
cursor: pointer;
background-color: var(--ghost-accent-color);
border: 0;
border-radius: 100px;
}
.gh-button:hover {
opacity: 0.95;
}
.gh-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
color: var(--color-darker-gray);
cursor: pointer;
background-color: transparent;
border: 0;
outline-offset: 4px;
}
.gh-icon-button:hover :is(svg, span) {
opacity: 0.8;
}
.gh-icon-button svg {
width: 20px;
height: 20px;
}
.gh-form {
display: flex;
align-items: center;
position: relative;
max-width: 560px;
width: 100%;
height: 56px;
font-size: 1.7rem;
font-weight: 450;
letter-spacing: -0.008em;
border-radius: 40px;
background-color: var(--color-lighter-gray);
transition: background-color 0.2s ease;
}
.gh-form.success {
pointer-events: none;
}
.gh-form.error {
box-shadow: 0 0 0 1px red;
}
.gh-form:hover {
background-color: rgb(0 0 0 / 0.065);
}
.has-light-text .gh-form:hover,
.gh-footer.has-accent-color .gh-form:hover {
background-color: rgb(255 255 255 / 0.15);
}
.gh-form-input {
position: absolute;
inset: 0;
padding-inline: 26px;
width: 100%;
height: 100%;
font-size: inherit;
letter-spacing: inherit;
line-height: 1.1;
border: 0;
border-radius: 40px;
background-color: transparent;
outline-offset: 4px;
transition: 0.3s ease-in-out;
}
.gh-form-input::placeholder,
button.gh-form-input {
color: rgb(0 0 0 / 0.3);
}
:is(.has-serif-title, .has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-form-input,
body[class*=" gh-font-heading"]:not(.gh-font-heading-fira-sans):not(.gh-font-heading-inter):not(.gh-font-heading-manrope):not(.gh-font-heading-noto-sans):not(.gh-font-heading-nunito):not(.gh-font-heading-poppins):not(.gh-font-heading-roboto):not(.gh-font-heading-space-grotesk) .gh-form-input {
padding-inline: 20px;
}
.gh-form.gh-form.success .gh-form-input {
opacity: 0.5;
}
.has-light-text .gh-form-input,
.gh-footer.has-accent-color .gh-form-input {
color: #fff;
}
.has-light-text .gh-form-input::placeholder,
.has-light-text button.gh-form-input,
.gh-footer.has-accent-color .gh-form-input::placeholder {
color: rgb(255 255 255 / 0.55);
}
.gh-header.is-classic.has-image .gh-form-input {
color: #15171a;
}
.gh-header.is-classic.has-image .gh-form-input::placeholder,
.gh-header.is-classic.has-image button.gh-form-input,
.gh-header.is-classic.has-image .gh-form > svg {
color: rgb(0 0 0 / 0.5);
}
button.gh-form-input {
padding-inline-start: 56px;
text-align: left;
color: var(--color-secondary-text);
cursor: pointer;
}
:is(.has-serif-title,.has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) button.gh-form-input,
body[class*=" gh-font-heading"]:not(.gh-font-heading-fira-sans):not(.gh-font-heading-inter):not(.gh-font-heading-manrope):not(.gh-font-heading-noto-sans):not(.gh-font-heading-nunito):not(.gh-font-heading-poppins):not(.gh-font-heading-roboto):not(.gh-font-heading-space-grotesk) button.gh-form-input {
padding-inline-start: 50px;
}
.gh-form .gh-button {
position: absolute;
right: 6px;
min-width: 132px;
padding-inline: 24px;
height: 44px;
font-size: inherit;
}
.gh-form > svg {
position: relative;
left: 22px;
width: 20px;
height: 20px;
color: var(--color-secondary-text);
}
:is(.has-serif-title,.has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-form > svg {
left: 16px;
}
.gh-form .gh-button svg {
display: none;
position: absolute;
margin-top: 1px;
}
.gh-form .gh-button > span:last-child {
display: none;
}
.gh-form:is(.loading, .success) .gh-button > span:first-child {
visibility: hidden;
}
.gh-form.loading .gh-button svg:first-of-type {
display: block;
}
.gh-form.success .gh-button > span:first-child {
display: none;
}
.gh-form.success .gh-button > span:last-child {
display: inline;
}
.gh-form [data-members-error] {
position: absolute;
top: 100%;
margin-top: 10px;
width: 100%;
font-size: 1.4rem;
line-height: 1.4;
}
@media (max-width: 576px) {
.gh-form {
font-size: 1.6rem;
}
.gh-form .gh-button {
min-width: 104px;
padding-inline: 12px;
}
}
.gh-viewport {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.gh-outer {
padding: 0 max(4vmin, 20px);
}
.gh-outer .gh-outer {
padding: 0;
}
.gh-inner {
margin: 0 auto;
max-width: var(--container-width);
width: 100%;
}
.gh-main {
flex-grow: 1;
}
.gh-back-to-top {
position: fixed;
right: max(20px, 2.6vw);
bottom: max(20px, 2.6vw);
z-index: 950;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--color-darker-gray);
border: 1px solid var(--color-border);
border-radius: 50%;
background: var(--background-color);
box-shadow: 0 18px 48px rgb(15 23 42 / 0.14);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gh-back-to-top:hover {
opacity: 1;
border-color: var(--color-dark-border);
transform: translateY(-3px);
box-shadow: 0 24px 60px rgb(15 23 42 / 0.18);
}
.gh-back-to-top span {
position: relative;
top: -1px;
font-size: 2.4rem;
line-height: 1;
}
.gh-canvas,
.kg-width-full.kg-content-wide {
--main: min(var(--content-width, 720px), 100% - var(--container-gap) * 2);
--wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
--full: minmax(var(--container-gap), 1fr);
display: grid;
grid-template-columns:
[full-start] var(--full)
[wide-start] var(--wide)
[main-start] var(--main) [main-end]
var(--wide) [wide-end]
var(--full) [full-end];
}
.gh-canvas > * {
grid-column: main;
}
.kg-width-wide,
.kg-content-wide > div {
grid-column: wide;
}
.kg-width-full {
grid-column: full;
}
.gh-navigation {
position: sticky;
top: 0;
z-index: 1000;
height: 100px;
font-size: 1.5rem;
font-weight: 550;
background-color: var(--background-color);
color: var(--color-darker-gray);
border-bottom: 1px solid var(--color-border);
box-shadow: 0 10px 36px rgb(15 23 42 / 0.04);
}
.gh-navigation :is(.gh-navigation-logo, a:not(.gh-button), .gh-icon-button) {
color: inherit;
}
.gh-navigation-inner {
display: grid;
grid-auto-flow: row dense;
column-gap: 24px;
align-items: center;
height: 100%;
}
.gh-navigation-brand {
line-height: 1;
}
.gh-navigation-logo {
position: relative;
font-family: var(--gh-font-heading, var(--font-sans));
font-size: calc(2.4rem * var(--factor, 1));
font-weight: 725;
letter-spacing: -0.015em;
white-space: nowrap;
}
.gh-navigation-logo img {
max-height: 40px;
}
.gh-navigation-menu {
display: flex;
gap: 24px;
align-items: center;
}
.gh-navigation .nav {
display: inline-flex;
gap: 28px;
align-items: center;
padding: 0;
margin: 0;
white-space: nowrap;
list-style: none;
}
.gh-navigation .gh-nav-en {
display: none;
gap: 28px;
align-items: center;
padding: 0;
margin: 0;
white-space: nowrap;
list-style: none;
}
:root:not([data-lang="en"]) .gh-navigation .gh-nav-en {
display: none !important;
}
:root[data-lang="en"] .gh-navigation .gh-nav-pl {
display: none;
}
:root[data-lang="en"] .gh-navigation .gh-nav-en {
display: inline-flex;
}
.gh-navigation .gh-more-toggle {
position: relative;
margin: 0 -6px;
font-size: inherit;
text-transform: inherit;
}
.gh-navigation .gh-more-toggle svg {
width: 24px;
height: 24px;
}
.gh-navigation-actions {
display: flex;
gap: 24px;
align-items: center;
justify-content: flex-end;
background-color: var(--background-color);
}
.gh-navigation.has-accent-color .gh-navigation-actions {
background-color: var(--ghost-accent-color);
}
.gh-navigation-members {
display: flex;
gap: 20px;
align-items: center;
white-space: nowrap;
}
.gh-navigation-members .gh-button {
font-size: inherit;
font-weight: 600;
}
.gh-search {
margin-right: -2px;
margin-left: -2px;
}
.gh-theme-toggle {
position: relative;
flex: 0 0 auto;
margin-right: -2px;
margin-left: -2px;
border-radius: 50%;
}
.gh-theme-toggle:hover {
background-color: var(--color-lighter-gray);
}
.gh-theme-toggle svg {
position: absolute;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.gh-theme-toggle-moon,
:root[data-theme="dark"] .gh-theme-toggle-sun {
opacity: 0;
transform: scale(0.75) rotate(-25deg);
}
:root[data-theme="dark"] .gh-theme-toggle-moon {
opacity: 1;
transform: scale(1) rotate(0);
}
.gh-language-switcher {
display: inline-flex;
flex: 0 0 auto;
gap: 2px;
align-items: center;
padding: 3px;
border: 1.5px solid var(--ghost-accent-color);
border-radius: 999px;
background: transparent;
}
.gh-language-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 28px;
padding: 0 10px;
color: var(--color-secondary-text);
font-size: 1.1rem;
font-weight: 800;
line-height: 1;
border-radius: 999px;
opacity: 1;
transition: color 0.15s, background-color 0.15s;
}
.gh-language-link[aria-current="true"] {
color: #fff;
background-color: var(--ghost-accent-color);
opacity: 1;
}
:root[data-theme="dark"] .gh-language-link[aria-current="true"] {
color: #fff;
background-color: var(--ghost-accent-color);
}
:root[data-theme="dark"] .gh-language-link {
color: var(--color-secondary-text);
}
@media (max-width: 767px) {
.gh-navigation-logo {
white-space: normal;
}
.gh-navigation-members {
flex-direction: column-reverse;
gap: 16px;
width: 100%;
}
.gh-navigation-actions .gh-search {
display: none;
}
.gh-navigation-actions .gh-theme-toggle {
display: none;
}
.gh-navigation-actions .gh-language-switcher {
display: none;
}
}
@media (min-width: 768px) {
.gh-navigation-brand .gh-search {
display: none;
}
.gh-navigation-brand .gh-theme-toggle {
display: none;
}
.gh-navigation-brand .gh-language-switcher {
display: none;
}
.gh-navigation:not(.is-dropdown-loaded) .gh-navigation-menu .nav > li {
opacity: 0;
}
}
.gh-navigation.has-accent-color {
background-color: var(--ghost-accent-color);
}
.gh-navigation.has-accent-color .gh-button {
background-color: #fff;
color: #15171a;
}
.gh-navigation.is-left-logo .gh-navigation-inner {
grid-template-columns: auto 1fr auto;
}
@media (min-width: 768px) {
.gh-navigation.is-left-logo .gh-navigation-logo:not(:has(img)) {
top: -2px;
}
}
@media (min-width: 992px) {
.gh-navigation.is-left-logo .gh-navigation-menu {
margin-right: 100px;
margin-left: 16px;
}
}
.gh-navigation.is-middle-logo .gh-navigation-inner {
grid-template-columns: 1fr auto 1fr;
}
.gh-navigation.is-middle-logo .gh-navigation-brand {
grid-column-start: 2;
}
.gh-navigation.is-middle-logo .gh-navigation-actions {
gap: 28px;
}
@media (min-width: 992px) {
.gh-navigation.is-middle-logo .gh-navigation-menu {
margin-right: 64px;
}
}
.gh-navigation.is-stacked {
position: relative;
height: auto;
}
.gh-navigation.is-stacked .gh-navigation-inner {
grid-template-columns: 1fr auto 1fr;
}
.gh-navigation.is-stacked .gh-navigation-brand {
display: flex;
align-items: center;
grid-row-start: 1;
grid-column-start: 2;
min-height: 80px;
}
@media (max-width: 767px) {
.gh-navigation.is-stacked .gh-navigation-brand {
min-height: unset;
}
}
@media (min-width: 992px) {
.gh-navigation.is-stacked .gh-navigation-inner {
padding: 0;
}
.gh-navigation.is-stacked .gh-navigation-brand {
display: flex;
align-items: center;
height: 80px;
}
.gh-navigation.is-stacked .gh-navigation-menu {
grid-row-start: 2;
grid-column: 1 / 4;
justify-content: center;
height: 60px;
margin: 0 48px;
}
.gh-navigation.is-stacked .gh-navigation-menu::before,
.gh-navigation.is-stacked .gh-navigation-menu::after {
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: 1px;
content: "";
background-color: var(--color-border);
}
.gh-navigation.is-stacked .gh-navigation-menu::after {
top: 140px;
}
.gh-navigation.is-stacked .gh-navigation-actions {
grid-row-start: 1;
grid-column: 1 / 4;
justify-content: space-between;
}
.gh-navigation.is-stacked .gh-navigation-actions .gh-search {
display: flex;
gap: 10px;
width: auto;
}
}
.gh-dropdown {
position: absolute;
top: 100%;
right: -16px;
z-index: 90;
width: 200px;
padding: 12px 0;
margin-top: 24px;
text-align: left;
visibility: hidden;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 7px 20px -5px rgb(0 0 0 / 0.15);
opacity: 0;
transition: opacity 0.3s, transform 0.2s;
transform: translate3d(0, 6px, 0);
}
.gh-dropdown.is-left {
right: auto;
left: -16px;
}
.is-dropdown-mega .gh-dropdown {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
column-gap: 40px;
width: auto;
padding: 20px 32px;
}
.is-dropdown-open .gh-dropdown {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.gh-dropdown li a {
display: block;
padding: 7px 20px;
line-height: 1.5;
white-space: normal;
color: #15171a !important;
}
.is-dropdown-mega .gh-dropdown li a {
padding: 8px 0;
}
.gh-burger {
display: flex;
justify-content: center;
align-items: center;
position: relative;
display: none;
margin-right: -7px;
margin-left: 4px;
}
.gh-burger svg {
width: 24px;
height: 24px;
}
.gh-burger svg:last-child {
display: none;
}
.is-open .gh-burger svg:first-child {
display: none;
}
.is-open .gh-burger svg:last-child {
display: block;
}
@media (max-width: 767px) {
.gh-burger {
display: flex;
}
#gh-navigation {
height: 64px;
}
#gh-navigation .gh-navigation-inner {
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
gap: 48px;
}
#gh-navigation .gh-navigation-brand {
display: grid;
grid-template-columns: 1fr auto auto;
column-gap: 10px;
grid-column-start: 1;
align-items: center;
height: 64px;
}
#gh-navigation .gh-navigation-logo {
font-size: 2.2rem;
}
#gh-navigation .gh-navigation-menu,
#gh-navigation .gh-navigation-actions {
position: fixed;
justify-content: center;
visibility: hidden;
opacity: 0;
}
#gh-navigation .gh-navigation-menu {
transition: none;
transform: translateY(0);
}
#gh-navigation .nav,
#gh-navigation .gh-nav-en {
gap: 20px;
align-items: center;
line-height: 1.4;
}
#gh-navigation .nav a,
#gh-navigation .gh-nav-en a {
font-size: 1.75rem;
font-weight: 600;
text-transform: none;
}
#gh-navigation .nav li,
#gh-navigation .gh-nav-en li {
opacity: 0;
transform: translateY(-4px);
}
#gh-navigation .gh-navigation-actions {
text-align: center;
}
#gh-navigation :is(.gh-button, a[data-portal="signin"]) {
opacity: 0;
transform: translateY(8px);
}
#gh-navigation .gh-button {
width: 100%;
font-size: 1.75rem;
text-transform: none;
}
#gh-navigation a[data-portal="signin"] {
font-size: 1.75rem;
}
#gh-main {
transition: opacity 0.4s;
}
.is-open#gh-navigation {
position: fixed;
inset: 0;
z-index: 3999999;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.is-open#gh-navigation .gh-navigation-menu,
.is-open#gh-navigation .gh-navigation-actions {
position: static;
visibility: visible;
opacity: 1;
}
.is-open#gh-navigation .nav {
display: flex;
flex-direction: column;
}
:root[data-lang="en"] .is-open#gh-navigation .gh-nav-en {
display: flex;
flex-direction: column;
}
.is-open#gh-navigation .nav li,
.is-open#gh-navigation .gh-nav-en li {
opacity: 1;
transition: transform 0.2s, opacity 0.2s;
transform: translateY(0);
}
.is-open#gh-navigation .gh-navigation-actions {
position: sticky;
right: 0;
bottom: 0;
left: 0;
display: inline-flex;
flex-direction: column;
gap: 12px;
align-items: center;
padding: var(--container-gap) 0;
}
.is-open#gh-navigation :is(.gh-button, a[data-portal="signin"]) {
opacity: 1;
transition: transform 0.4s, opacity 0.4s;
transition-delay: 0.2s;
transform: translateY(0);
}
.is-open#gh-navigation a[data-portal="signin"] {
transition-delay: 0.4s;
}
.is-open#gh-main {
opacity: 0;
}
}
.gh-card {
position: relative;
content-visibility: auto;
contain-intrinsic-size: auto 400px;
}
.gh-card-link {
display: flex;
flex-direction: column;
gap: 20px;
}
.gh-card-link:hover {
opacity: 1;
}
.gh-card-image {
position: relative;
flex-shrink: 0;
aspect-ratio: 16 / 9;
}
.gh-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-card-wrapper {
flex-grow: 1;
}
.gh-card-tag {
display: none;
width: fit-content;
max-width: 100%;
margin-bottom: 8px;
padding: 4px 12px;
color: var(--ghost-accent-color);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
border: 1px solid var(--ghost-accent-color);
border-radius: 999px;
background: color-mix(in srgb, var(--ghost-accent-color) 8%, transparent);
}
.gh-card-title {
font-size: calc(1.9rem * var(--factor, 1));
font-weight: 725;
letter-spacing: -0.014em;
line-height: 1.3;
}
.gh-card-link:hover .gh-card-title {
opacity: 0.8;
}
.gh-card-excerpt {
display: -webkit-box;
overflow-y: hidden;
margin-top: 8px;
font-size: 1.45rem;
line-height: 1.4;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.gh-card-meta {
align-items: center;
padding-bottom: 1px;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.004em;
color: var(--color-secondary-text);
}
.gh-card-meta svg {
position: relative;
top: 1px;
display: inline-block;
width: 12px;
height: 12px;
margin-right: 2px;
}
.gh-card-meta:not(:empty) {
margin-top: 8px;
}
.gh-card-author + .gh-card-date::before {
content: "—";
margin-right: 4px;
}
.gh-header {
position: relative;
margin-top: 40px;
}
.gh-header-inner {
position: relative;
overflow: hidden;
}
.gh-header.is-magazine .gh-header-inner {
display: grid;
grid-template-columns: repeat(16, 1fr);
gap: var(--grid-gap);
}
.gh-header.is-magazine .gh-header-inner > div {
display: flex;
flex-direction: column;
gap: var(--grid-gap);
grid-row: 1;
}
.gh-header.is-magazine .gh-header-left {
grid-column: 1 / span 4;
}
.gh-header.is-magazine .gh-header-inner > .gh-card {
position: relative;
grid-column: 5 / span 8;
}
.gh-header.is-magazine .gh-header-right {
grid-column: 13 / -1;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-link {
gap: 28px;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-image {
aspect-ratio: 1.618033;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-tag {
display: inline-flex;
align-items: center;
margin-bottom: 12px;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
font-size: clamp(2.8rem, 1.36vw + 2.25rem, 4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.022em;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt {
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
font-size: 1.8rem;
letter-spacing: -0.02em;
max-width: 90%;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-meta:not(:empty) {
margin-top: 14px;
}
.gh-header.is-magazine :is(.gh-header-left, .gh-header-right) .gh-card:last-child .gh-card-image {
display: none;
}
.gh-header.is-magazine .gh-header-inner > div .gh-card-excerpt {
display: none;
}
.gh-header.is-magazine .gh-header-inner > .gh-card::before,
.gh-header.is-magazine .gh-header-inner > .gh-card::after {
position: absolute;
top: 0;
left: calc(var(--grid-gap) / -2);
content: "";
width: 1px;
height: 100%;
background-color: var(--color-border);
}
.gh-header.is-magazine .gh-header-inner > .gh-card::after {
right: calc(var(--grid-gap) / -2);
left: auto;
}
.gh-header.is-magazine .gh-header-inner > div .gh-card + .gh-card::before {
position: absolute;
top: calc(var(--grid-gap) / -2);
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: var(--color-border);
}
@media (max-width: 1199px) {
.gh-header.is-magazine .gh-header-inner {
grid-template-columns: repeat(12, 1fr);
}
.gh-header.is-magazine .gh-header-inner > .gh-card {
grid-column: 1 / span 8;
}
.gh-header.is-magazine .gh-header-left {
grid-column: 9 / -1;
}
.gh-header.is-magazine .gh-header-inner > div.gh-header-right {
grid-column: 1 / -1;
grid-row: 2;
flex-direction: row;
}
.gh-header.is-magazine .gh-header-right .gh-card {
flex: 1;
}
.gh-header.is-magazine .gh-header-right .gh-card:last-child .gh-card-image {
display: block;
}
.gh-header.is-magazine .gh-header-right {
position: relative;
}
.gh-header.is-magazine .gh-header-right::before {
position: absolute;
top: calc(var(--grid-gap) / -2);
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: var(--color-border);
}
.gh-header.is-magazine .gh-header-right .gh-card::before {
display: none;
}
.gh-header.is-magazine .gh-header-right .gh-card::after {
position: absolute;
top: 0;
right: calc(var(--grid-gap) / -2);
content: "";
width: 1px;
height: 100%;
background-color: var(--color-border);
}
}
@media (max-width: 991px) {
.gh-header.is-magazine .gh-header-left .gh-card:nth-child(2) .gh-card-image {
display: none;
}
}
@media (max-width: 767px) {
.gh-header.is-magazine .gh-header-inner {
display: flex;
flex-direction: column;
gap: var(--grid-gap);
}
.gh-header.is-magazine .gh-header-inner > div.gh-header-right {
flex-direction: column;
}
.gh-header.is-magazine .gh-card-image {
display: block !important;
}
.gh-header.is-magazine .gh-card::before {
display: block !important;
position: absolute;
top: calc(var(--grid-gap) / -2);
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: var(--color-border);
}
}
.gh-header.is-highlight .gh-header-inner {
display: grid;
grid-template-columns: repeat(16, 1fr);
gap: var(--grid-gap);
}
.gh-header.is-highlight .gh-header-left {
position: relative;
grid-column: span 8;
}
.gh-header.is-highlight .gh-header-left .gh-card {
grid-column: span 8;
grid-row: span 3;
}
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-link {
gap: 28px;
}
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-image {
aspect-ratio: 3 / 2;
}
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-tag {
display: inline-flex;
align-items: center;
margin-bottom: 12px;
}
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-title {
font-size: clamp(2.8rem, 1.36vw + 2.25rem, 4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.022em;
}
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-excerpt {
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
font-size: 1.8rem;
}
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-meta:not(:empty) {
margin-top: 12px;
}
.gh-header.is-highlight .gh-header-middle {
position: relative;
display: flex;
flex-direction: column;
gap: var(--grid-gap);
grid-column: 9 / span 4;
}
.gh-header.is-highlight .gh-header-middle .gh-card:last-child .gh-card-image {
display: none;
}
.gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt {
display: none;
}
.gh-header.is-highlight .gh-header-right {
grid-column: 13 / -1;
}
.gh-header.is-highlight .gh-featured {
margin-top: 0;
padding: 0;
}
.gh-header.is-highlight .gh-featured-feed {
display: flex;
flex-direction: column;
}
.gh-header.is-highlight .gh-featured-feed .gh-card-title {
font-size: clamp(1.4rem, 0.23vw + 1.31rem, 1.6rem);
}
.gh-header.is-highlight .gh-header-left::after,
.gh-header.is-highlight .gh-header-middle::after {
position: absolute;
top: 0;
right: calc(var(--grid-gap) / -2);
content: "";
width: 1px;
height: 100%;
background-color: var(--color-border);
}
.gh-header.is-highlight .gh-card::before {
position: absolute;
top: calc(var(--grid-gap) / -2);
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: var(--color-border);
}
.gh-header.is-highlight .gh-featured .gh-card:first-child::before {
display: none;
}
@media (max-width: 1199px) {
.gh-header.is-highlight .gh-header-inner {
grid-template-columns: repeat(9, 1fr);
}
.gh-header.is-highlight .gh-header-left {
grid-column: span 6;
}
.gh-header.is-highlight .gh-header-middle {
grid-column: 7 / -1;
}
.gh-header.is-highlight .gh-header-right {
grid-column: 1 / -1;
}
.gh-header.is-highlight .gh-featured-feed {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.gh-header.is-highlight .gh-featured-feed .gh-card:before {
width: calc(100% + var(--grid-gap));
}
.gh-header.is-highlight .gh-featured-feed .gh-card::after {
position: absolute;
top: 0;
left: calc(var(--grid-gap) / -2);
content: "";
width: 1px;
height: 100%;
background-color: var(--color-border);
}
}
@media (max-width: 991px) {
.gh-header.is-highlight .gh-header-middle .gh-card:nth-child(2) .gh-card-image {
display: none;
}
}
@media (max-width: 767px) {
.gh-header.is-highlight .gh-header-inner {
display: flex;
flex-direction: column;
}
.gh-header.is-highlight .gh-featured-feed {
display: flex;
}
.gh-header.is-highlight .gh-card-image {
display: block !important;
}
.gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt {
display: -webkit-box;
}
}
.gh-header.is-classic {
display: flex;
margin-top: 0;
padding-block: 160px;
}
.gh-header.is-classic .gh-header-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
overflow: unset;
margin: auto;
max-width: 1020px;
text-align: center;
}
.gh-header.is-classic .gh-header-title {
font-size: calc(clamp(3rem, 1.82vw + 2.27rem, 4.6rem) * var(--factor, 1));
line-height: 1.1;
letter-spacing: -0.028em;
}
.gh-header.is-classic.has-image {
margin-top: 0;
}
.gh-header.is-classic.has-image::before {
position: absolute;
inset: 0;
content: "";
opacity: 0.3;
background-color: var(--color-black);
transition: opacity 1.5s ease;
}
.gh-header.is-classic.has-image .gh-header-inner {
color: #fff;
}
.gh-header.is-classic.has-image .gh-header-image {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-header.is-classic.has-image .gh-form {
background-color: #fff;
}
.gh-cta {
display: none;
margin-top: max(4vw, 40px);
}
.gh-header:is(.is-highlight, .is-magazine) + .gh-cta {
display: block;
}
.gh-cta-inner {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: 36px;
padding: clamp(48px, 3.64vw + 33.45px, 80px) clamp(40px, 2.73vw + 29.09px, 64px);
text-align: center;
background-color: var(--color-lighter-gray);
}
.gh-cta-content {
max-width: 640px;
}
.gh-cta-title {
font-size: clamp(2.8rem,1.36vw + 2.25rem,4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.021em;
}
.gh-cta-description {
margin-top: 12px;
font-size: 1.8rem;
line-height: 1.4;
letter-spacing: -0.015em;
}
.gh-featured {
margin-top: 100px;
}
.gh-navigation + .gh-featured {
margin-top: 64px;
}
.gh-header.is-classic:not(.has-image) + .gh-featured {
margin-top: 0;
}
.gh-featured-inner {
overflow: hidden;
}
.gh-featured-title {
margin-bottom: 20px;
padding-bottom: 12px;
font-size: 1.2rem;
font-weight: 550;
letter-spacing: 0.025em;
text-transform: uppercase;
border-bottom: 1px solid var(--color-border);
}
.gh-featured-feed {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--grid-gap);
}
.gh-featured-feed .gh-card {
container-type: inline-size;
container-name: featured-card;
}
.gh-featured-feed .gh-card-link {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
}
.gh-featured-feed .gh-card-image {
width: 72px;
aspect-ratio: 1;
}
@container featured-card (width < 240px) {
.gh-featured-feed .gh-card-image {
display: none;
}
}
@container featured-card (240px <= width <= 270px) {
.gh-featured-feed .gh-card-image {
width: 64px;
}
}
.gh-featured-feed .gh-card-wrapper {
container-type: inline-size;
container-name: featured-card-wrapper;
}
.gh-featured-feed .gh-card-title {
font-size: 1.6rem;
font-weight: 650;
letter-spacing: -0.011em;
}
@container featured-card-wrapper (width < 170px) {
.gh-featured-feed .gh-card-title {
font-size: 1.6rem;
}
}
.gh-featured-feed .gh-card-excerpt {
display: none;
}
.gh-featured-feed .gh-card-meta:not(:empty) {
margin-top: 8px;
}
.gh-featured-feed .gh-card::before {
position: absolute;
top: 0;
left: calc(var(--grid-gap) / -2);
content: "";
width: 1px;
height: 100%;
background-color: var(--color-border);
}
@media (max-width: 1199px) {
.gh-viewport > .gh-featured .gh-featured-feed {
grid-template-columns: repeat(3, 1fr);
}
.gh-viewport > .gh-featured .gh-featured-feed .gh-card:nth-child(4) {
display: none;
}
}
@media (max-width: 767px) {
.gh-viewport > .gh-featured .gh-featured-feed {
display: flex;
flex-direction: column;
}
}
.gh-home-magazine {
position: relative;
padding-block: 52px 96px;
overflow: hidden;
}
.gh-home-magazine::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
background:
linear-gradient(135deg, rgb(255 255 255 / 0.38), transparent 42%),
linear-gradient(180deg, var(--background-color), transparent 460px);
}
.gh-home-lead {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.8fr);
gap: clamp(28px, 4vw, 56px);
align-items: stretch;
}
.gh-home-count {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
padding: 10px 16px;
color: var(--color-darker-gray);
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--background-color);
box-shadow: 0 16px 42px rgb(15 23 42 / 0.06);
}
.gh-home-count span {
font-size: 2rem;
font-weight: 800;
line-height: 1;
}
.gh-home-count p {
color: var(--color-secondary-text);
font-size: 1.35rem;
font-weight: 650;
line-height: 1;
}
.gh-home-feature-link,
.gh-home-side-link {
display: flex;
height: 100%;
color: inherit;
}
.gh-home-feature-link {
position: relative;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--background-color);
box-shadow: 0 24px 80px rgb(15 23 42 / 0.10);
}
.gh-home-feature-link:hover,
.gh-home-side-link:hover,
.gh-tag-card:hover {
opacity: 1;
}
.gh-home-feature-image,
.gh-home-side-image {
position: relative;
overflow: hidden;
background: var(--color-lighter-gray);
}
.gh-home-feature-image {
aspect-ratio: 16 / 9;
}
.gh-home-feature-image::after,
.gh-home-side-image::after,
.gh-tag-card-image::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(180deg, transparent 42%, rgb(0 0 0 / 0.16));
opacity: 0;
transition: opacity 0.28s ease;
}
.gh-home-feature-image img,
.gh-home-side-image img,
.gh-tag-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.55s ease;
}
.gh-home-feature-link:hover img,
.gh-home-side-link:hover img,
.gh-tag-card:hover .gh-tag-card-image img {
transform: scale(1.045);
}
.gh-home-feature-link:hover .gh-home-feature-image::after,
.gh-home-side-link:hover .gh-home-side-image::after,
.gh-tag-card:hover .gh-tag-card-image::after {
opacity: 1;
}
.gh-home-feature-content {
padding: clamp(24px, 3vw, 38px);
}
.gh-home-feature-content .gh-card-tag,
.gh-home-side-content .gh-card-tag,
.gh-home-latest .gh-card-tag {
display: inline-flex;
align-items: center;
color: var(--ghost-accent-color);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
.gh-home-feature-title {
max-width: 880px;
margin-top: 10px;
font-size: clamp(3.2rem, 2.8vw + 1.8rem, 6.2rem);
line-height: 1.02;
letter-spacing: 0;
}
.gh-home-feature-excerpt {
max-width: 760px;
margin-top: 18px;
color: var(--color-secondary-text);
font-size: clamp(1.65rem, 0.35vw + 1.5rem, 2rem);
line-height: 1.5;
}
.gh-home-side {
display: flex;
flex-direction: column;
gap: 18px;
}
.gh-home-side-card {
min-height: 0;
}
.gh-home-side-link {
align-items: center;
gap: 18px;
padding: 14px;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--background-color);
box-shadow: 0 18px 55px rgb(15 23 42 / 0.06);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gh-home-side-link:hover,
.gh-tag-card:hover {
border-color: var(--color-dark-border);
transform: translateY(-3px);
box-shadow: 0 26px 70px rgb(15 23 42 / 0.12);
}
.gh-home-side-image {
flex: 0 0 min(42%, 190px);
aspect-ratio: 4 / 3;
border-radius: 12px;
}
.gh-home-side-content {
min-width: 0;
}
.gh-home-side-title {
margin-top: 6px;
font-size: clamp(1.8rem, 0.45vw + 1.55rem, 2.35rem);
line-height: 1.16;
letter-spacing: 0;
}
.gh-featured-galleries {
margin-top: clamp(44px, 5vw, 76px);
}
.gh-featured-galleries-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px 22px;
}
.gh-featured-gallery {
position: relative;
display: flex;
gap: 16px;
align-items: center;
min-height: 96px;
padding: 14px 18px;
overflow: hidden;
color: var(--color-darker-gray);
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--background-color);
box-shadow: 0 14px 34px rgb(15 23 42 / 0.06);
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.gh-featured-gallery:hover {
opacity: 1;
border-color: color-mix(in srgb, var(--ghost-accent-color) 40%, var(--color-border));
transform: translateY(-2px);
box-shadow: 0 20px 48px rgb(15 23 42 / 0.10);
}
.gh-featured-gallery-image {
position: relative;
flex: 0 0 64px;
width: 64px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
background: var(--color-lighter-gray);
}
.gh-featured-gallery-image::after {
display: none;
}
.gh-featured-gallery-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.55s ease;
}
.gh-featured-gallery:hover .gh-featured-gallery-image img {
transform: scale(1.06);
}
.gh-featured-gallery-image span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--color-secondary-text);
font-size: 2.4rem;
font-weight: 725;
}
.gh-featured-gallery-content {
position: static;
z-index: 1;
min-width: 0;
}
.gh-featured-gallery-title {
color: var(--color-darker-gray);
font-size: clamp(1.7rem, 0.3vw + 1.55rem, 2.05rem);
line-height: 1.15;
letter-spacing: 0;
}
.gh-featured-gallery-count {
margin-top: 2px;
color: var(--color-secondary-text);
font-size: 1.35rem;
font-weight: 600;
}
.gh-home-latest {
margin-top: clamp(44px, 5vw, 76px);
}
.gh-home-latest.is-page {
margin-top: 0;
}
.gh-home-latest .gh-feed {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3vw, 42px);
}
.gh-home-latest .gh-card-link {
gap: 18px;
}
.gh-home-latest .gh-card-image {
overflow: hidden;
border-radius: 14px;
box-shadow: 0 18px 50px rgb(15 23 42 / 0.08);
}
.gh-home-latest .gh-card-image img {
transition: transform 0.55s ease;
}
.gh-home-latest .gh-card-link:hover img {
transform: scale(1.04);
}
.gh-home-pagination {
display: flex;
justify-content: center;
margin-top: clamp(36px, 4vw, 56px);
}
.gh-home-loadmore {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 28px;
color: var(--color-white);
font-size: 1.55rem;
font-weight: 700;
border-radius: 999px;
background: var(--ghost-accent-color);
box-shadow: 0 18px 42px rgb(15 23 42 / 0.14);
transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.gh-home-loadmore:hover {
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 24px 54px rgb(15 23 42 / 0.2);
}
.gh-home-loadmore.is-loading {
opacity: 0.7;
pointer-events: none;
}
.gh-home-loadmore.is-loading span::after {
content: "...";
}
@media (max-width: 991px) {
.gh-home-lead {
grid-template-columns: 1fr;
}
.gh-home-side {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gh-featured-galleries-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gh-home-side-link {
align-items: flex-start;
flex-direction: column;
}
.gh-home-side-image {
flex-basis: auto;
width: 100%;
}
.gh-home-latest .gh-feed {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.gh-home-magazine {
padding-block: 32px 64px;
}
.gh-home-feature-link,
.gh-home-side-link {
border-radius: 12px;
}
.gh-home-side,
.gh-featured-galleries-grid,
.gh-home-latest .gh-feed {
grid-template-columns: 1fr;
}
.gh-featured-gallery {
min-height: 88px;
padding: 12px 14px;
border-radius: 999px;
}
.gh-featured-gallery-image {
flex-basis: 56px;
width: 56px;
}
.gh-home-feature-content {
padding: 22px;
}
}
.gh-container {
flex-grow: 1;
margin-top: 64px;
}
.gh-container-inner {
display: grid;
grid-template-columns: repeat(16, 1fr);
column-gap: var(--grid-gap);
}
:is(.gh-featured, .gh-cta) + .gh-container {
margin-top: max(4vw, 40px);
}
.gh-header.is-classic:not(.has-image) + .gh-container {
margin-top: 0;
}
.gh-navigation + .gh-container .gh-container-title,
:is(.paged, .tag-template, .author-template) .gh-container:not(.has-sidebar) .gh-container-title {
display: none;
}
.gh-more {
display: none;
grid-column: 1 / -1;
margin-top: 48px;
font-size: calc(1.9rem * var(--factor, 1));
font-weight: 725;
letter-spacing: -0.014em;
}
.gh-container.has-sidebar .gh-more {
grid-column: span 12;
}
.home-template .gh-feed:has(> :nth-child(12):last-child) ~ .gh-more {
display: block;
}
.gh-more a {
display: flex;
align-items: center;
gap: 4px;
}
.gh-more svg {
margin-top: -1px;
width: 18px;
height: 18px;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-more svg {
margin-top: 0;
}
.gh-container.has-sidebar .gh-main {
grid-column: 1 / span 12;
position: relative;
}
.gh-container.has-sidebar .gh-sidebar {
grid-column: 13 / -1;
}
.gh-container.has-sidebar .gh-main::after {
position: absolute;
top: 0;
right: calc(var(--grid-gap) / -2);
content: "";
width: 1px;
height: 100%;
background-color: var(--color-border);
}
.gh-container:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) {
grid-column: 3 / span 12;
}
.gh-container.is-list.no-image:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) {
grid-column: 4 / span 10;
}
.gh-header:is(.is-highlight, .is-magazine) ~ .gh-container.is-grid:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) {
grid-column: 1 / -1;
}
@media (max-width: 1199px) {
.gh-container-inner {
display: block;
overflow: hidden;
}
.gh-container.has-sidebar .gh-sidebar {
display: none;
}
}
.gh-container-title {
grid-column: 1 / -1;
margin-bottom: calc(var(--grid-gap) / 2);
padding-bottom: 12px;
font-size: 1.2rem;
font-weight: 550;
letter-spacing: 0.025em;
text-transform: uppercase;
border-bottom: 1px solid var(--color-border);
}
.gh-container:not(:has(.gh-card)) .gh-container-title {
display: none;
}
.gh-container .gh-feed {
gap: var(--grid-gap);
}
.gh-container .gh-card-meta:not(:empty) {
margin-top: 12px;
}
.gh-container.is-list .gh-feed {
display: flex;
flex-direction: column;
container-type: inline-size;
container-name: list-feed;
}
.gh-container.is-list .gh-card-link {
flex-direction: row;
align-items: center;
gap: 24px;
}
.gh-container.is-list .no-image .gh-card-link {
padding-block: 20px;
}
.gh-container.is-list .gh-card-image {
flex-shrink: 0;
width: 220px;
aspect-ratio: 1.618033;
}
@container list-feed (width < 600px) {
.gh-container.is-list .gh-card-image {
width: 160px;
}
}
.gh-container.is-list .gh-card:not(.no-image) .gh-card-wrapper {
max-width: 600px;
}
.gh-container.is-list .gh-card-title {
--factor: 1.05;
}
.gh-container.is-list .no-image .gh-card-title {
--factor: 1.2;
}
.gh-container.is-list .gh-card-excerpt {
margin-top: 6px;
}
.gh-container.is-list .gh-card + .gh-card::before {
position: absolute;
top: calc(var(--grid-gap) / -2);
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: var(--color-border);
}
.home-template .gh-container.is-list .gh-card:first-child:before {
display: none;
}
@media (max-width: 767px) {
.gh-container.is-list .gh-card-link {
flex-direction: column;
align-items: flex-start;
}
.gh-container.is-list .gh-card-image {
width: 100%;
}
}
.gh-container.is-grid .gh-feed {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
row-gap: calc(var(--grid-gap) * 1.5);
overflow: hidden;
}
.gh-container.is-grid .gh-card::before {
position: absolute;
top: calc(var(--grid-gap) / -2);
right: calc(var(--grid-gap) / -2);
left: calc(var(--grid-gap) / -2);
content: "";
height: 1px;
background-color: var(--color-border);
}
.gh-container.is-grid .gh-card::after {
position: absolute;
top: 0;
left: calc(var(--grid-gap) / -2);
content: "";
width: 1px;
height: 100%;
background-color: var(--color-border);
}
@media (max-width: 767px) {
.gh-container.is-grid .gh-feed {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.gh-container.is-grid .gh-feed {
display: flex;
flex-direction: column;
}
}
.gh-container.is-list.no-image .gh-card-image {
display: none;
}
.gh-sidebar-inner {
position: sticky;
top: calc(var(--grid-gap) / 2);
}
.gh-sidebar-title {
grid-column: 1 / -1;
margin-bottom: calc(var(--grid-gap) / 2);
padding-bottom: 12px;
font-size: 1.2rem;
font-weight: 550;
letter-spacing: 0.025em;
text-transform: uppercase;
border-bottom: 1px solid var(--color-border);
}
.gh-about {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 48px 24px;
min-height: 380px;
text-align: center;
background-color: var(--color-lighter-gray);
}
.gh-about-icon {
margin-bottom: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
}
.gh-about-title {
font-size: calc(2.4rem * var(--factor, 1));
font-weight: 700;
letter-spacing: -0.019em;
}
.gh-about-description {
margin-top: 12px;
font-size: 1.45rem;
line-height: 1.4;
}
.gh-about .gh-button {
margin-top: 32px;
}
.gh-recommendations {
margin-top: 48px;
}
.gh-recommendations .recommendations {
display: flex;
flex-direction: column;
gap: 26px;
margin: 0;
padding: 0;
list-style-type: none;
}
.gh-recommendations .recommendation:first-child {
margin-top: 4px;
}
.gh-recommendations .recommendation a {
display: grid;
grid-template-columns: 24px auto;
gap: 4px 12px;
}
.gh-recommendations .recommendation a:hover {
opacity: 1;
}
.gh-recommendations .recommendation-favicon {
grid-row: span 2;
width: 100%;
border-radius: 4px;
}
.gh-recommendations .recommendation-title {
margin-top: -2px;
font-size: 1.5rem;
font-weight: 650;
letter-spacing: -0.009em;
}
.gh-recommendations .recommendation a:hover .recommendation-title {
opacity: 0.8;
}
.gh-recommendations .recommendation-url {
order: 1;
overflow: hidden;
font-size: 1.4rem;
line-height: 1.25;
color: var(--color-secondary-text);
text-overflow: ellipsis;
}
.gh-recommendations .recommendation-description {
display: -webkit-box;
display: none;
overflow-y: hidden;
grid-column: 2;
font-size: 1.4rem;
line-height: 1.4;
color: var(--color-secondary-text);
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.gh-recommendations button {
display: inline-flex;
align-items: center;
gap: 2px;
margin-top: 24px;
padding: 0;
cursor: pointer;
font-size: 1.2rem;
font-weight: 550;
letter-spacing: 0.025em;
text-transform: uppercase;
background-color: transparent;
border: 0;
color: var(--color-darker-gray);
}
.gh-recommendations button svg {
margin-top: -1px;
width: 12px;
}
.gh-recommendations button:hover {
opacity: 0.8;
}
.gh-article {
--container-width: 1120px;
word-break: break-word;
}
.gh-article-header {
margin: clamp(40px, 3.64vw + 25.45px, 72px) 0 40px;
}
.gh-article-tag {
margin-bottom: 12px;
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--ghost-accent-color);
}
.gh-article-title {
font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem) * var(--factor, 1));
line-height: 1.1;
letter-spacing: -0.022em;
}
.gh-article-excerpt {
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
max-width: 720px;
font-size: clamp(1.7rem, 0.23vw + 1.61rem, 1.9rem);
line-height: 1.45;
letter-spacing: -0.018em;
}
.gh-article-meta {
display: flex;
align-items: center;
gap: 8px;
margin-left: 6px;
}
.gh-article-author-image {
display: flex;
margin-right: 8px;
}
.gh-article-author-image a {
position: relative;
margin: 0 -8px;
width: 56px;
height: 56px;
overflow: hidden;
background-color: var(--color-light-gray);
border-radius: 50%;
border: 3px solid var(--background-color);
}
.gh-article-author-image a:first-child {
z-index: 10;
}
.gh-article-author-image a:nth-child(2) {
z-index: 9;
}
.gh-article-author-image a:nth-child(3) {
z-index: 8;
}
.gh-article-author-image :is(img, svg) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-article-meta-wrapper {
display: flex;
flex-direction: column;
gap: 4px;
}
.gh-article-author-name {
font-size: 1.6rem;
font-weight: 650;
letter-spacing: -0.013em;
}
.gh-article-meta-content {
font-size: 1.35rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.006em;
color: var(--color-secondary-text);
}
.gh-article-image {
grid-column: wide;
margin-top: 40px;
}
.gh-article-image img {
width: 100%;
}
.post-template .gh-content,
.page-template .gh-content {
--reading-scale: 1.25;
font-size: calc(var(--content-font-size, 1.7rem) * var(--reading-scale));
}
.post-template .gh-article,
.page-template .gh-article {
--container-width: 1180px;
--content-width: 760px;
}
.post-template .gh-article-header,
.page-template .gh-article-header {
display: grid;
grid-template-columns: minmax(0, 760px) minmax(300px, 450px);
gap: clamp(32px, 6vw, 88px);
align-items: start;
width: min(calc(100% - var(--container-gap) * 2), var(--container-width));
margin-inline: auto;
padding-bottom: 48px;
border-bottom: 1px solid var(--color-border);
}
.post-template .gh-article-header > *,
.page-template .gh-article-header > * {
grid-column: 1;
}
.post-template .gh-article-title,
.page-template .gh-article-title {
max-width: 760px;
font-size: calc(clamp(3.8rem, 2.4vw + 2.4rem, 6.2rem) * var(--factor, 1));
}
.post-template .gh-article-excerpt,
.page-template .gh-article-excerpt {
max-width: 680px;
}
.post-template .gh-article-image,
.page-template .gh-article-image {
grid-column: 2;
grid-row: 1 / span 5;
justify-self: end;
width: 100%;
max-width: 450px;
min-width: 0;
margin-top: 16px;
}
.post-template .gh-article-image img,
.page-template .gh-article-image img {
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 14px;
}
.gh-post-nav {
margin-top: 72px;
}
.gh-post-related {
margin-top: 72px;
}
.gh-post-related .gh-feed {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gh-post-related .gh-card-link {
gap: 16px;
}
.gh-post-related .gh-card-image {
overflow: hidden;
border-radius: 14px;
box-shadow: 0 18px 50px rgb(15 23 42 / 0.08);
}
.gh-post-nav-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
max-width: min(var(--container-width), 980px);
}
.gh-post-nav-link {
display: flex;
flex-direction: column;
gap: 8px;
padding: 22px;
color: inherit;
border: 1px solid var(--color-border);
border-radius: 8px;
}
.gh-post-nav-link:hover {
opacity: 1;
border-color: var(--color-dark-border);
}
.gh-post-nav-link:only-child {
grid-column: 1 / -1;
}
.gh-post-nav-prev {
text-align: left;
}
.gh-post-nav-next {
text-align: right;
}
.gh-post-nav-label {
color: var(--color-secondary-text);
font-size: 1.2rem;
font-weight: 650;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.gh-post-nav-title {
font-size: clamp(1.8rem, 0.45vw + 1.6rem, 2.2rem);
font-weight: 725;
line-height: 1.25;
letter-spacing: -0.014em;
}
@media (max-width: 991px) {
.gh-post-related .gh-feed {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.post-template .gh-article-header,
.page-template .gh-article-header {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.post-template .gh-article-image,
.page-template .gh-article-image {
grid-column: 1;
grid-row: auto;
justify-self: stretch;
width: 100%;
max-width: none;
min-width: 0;
margin-top: 28px;
}
.post-template .gh-article-image img,
.page-template .gh-article-image img {
aspect-ratio: 16 / 9;
border-radius: 10px;
}
.gh-post-nav-inner {
grid-template-columns: 1fr;
gap: 14px;
}
.gh-post-nav-next {
text-align: left;
}
}
@media (max-width: 767px) {
.gh-home-count {
width: 100%;
justify-content: center;
}
.gh-post-related {
margin-top: 56px;
}
.gh-post-related .gh-feed {
grid-template-columns: 1fr;
}
.post-template .gh-article-header,
.page-template .gh-article-header {
padding-bottom: 28px;
}
.post-template .gh-article-image,
.page-template .gh-article-image {
margin-top: 28px;
}
}
.page-template .gh-article-header {
margin-block: clamp(40px, 3.64vw + 25.45px, 72px) 40px;
}
.page-template .gh-content:only-child > *:first-child:not(.kg-width-full) {
margin-top: 64px;
}
.page-template .gh-content > *:last-child:not(.kg-width-full) {
margin-bottom: 6vw;
}
.page-template .gh-footer {
margin-top: 0;
}
.gh-content {
font-size: var(--content-font-size, 1.7rem);
letter-spacing: -0.01em;
}
.gh-content > * + * {
margin-top: calc(28px * var(--content-spacing-factor, 1));
margin-bottom: 0;
}
.gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) {
margin-top: 0;
}
.gh-content > [id]:not(:first-child) {
margin-top: calc(56px * var(--content-spacing-factor, 1));
}
.post-template .gh-content.drop-cap > p:first-of-type:first-letter {
margin :0 0.2em 0em 0;
font-size: 3.1em;
float:left;
line-height: 1;
margin-left: -1px;
font-weight: 700;
}
.has-serif-body.post-template:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content.drop-cap > p:first-of-type:first-letter {
font-size: 3.2em;
}
.gh-content > [id] + p {
margin-top: calc(12px * var(--content-spacing-factor, 1));
}
.gh-content > :is(hr, blockquote, iframe) {
position: relative;
margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
}
.gh-content > :is(hr, blockquote, iframe) + * {
margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
}
.gh-content h1 {
font-size: calc(2.2em * var(--factor, 1));
letter-spacing: -0.02em;
}
.gh-content h2 {
font-size: calc(1.6em * var(--factor, 1));
letter-spacing: -0.02em;
}
.gh-content h3 {
font-size: calc(1.3em * var(--factor, 1));
letter-spacing: -0.017em;
}
.gh-content a {
color: var(--ghost-accent-color);
text-decoration: underline;
}
.gh-content .kg-callout-card .kg-callout-text,
.gh-content .kg-toggle-card .kg-toggle-content > :is(ul, ol, p) {
font-size: 0.95em;
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > blockquote,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ol,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ul,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > dl,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > p,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-callout-text,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ol,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ul,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > p {
font-family: var(--font-serif-alt);
}
.gh-content :is(ul, ol) {
padding-left: 28px;
}
.gh-content :is(li + li, li :is(ul, ol)) {
margin-top: 8px;
}
.gh-content ol ol li {
list-style-type: lower-alpha;
}
.gh-content ol ol ol li {
list-style-type: lower-roman;
}
.gh-content hr {
width: 100%;
height: 1px;
background-color: var(--color-border);
border: 0;
}
.gh-content .gh-table {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.gh-content .gh-table table {
width: 100%;
font-family: var(--font-sans);
font-size: 1.5rem;
white-space: nowrap;
vertical-align: top;
border-spacing: 0;
border-collapse: collapse;
}
.gh-content .gh-table table th {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-darkgrey);
text-align: left;
text-transform: uppercase;
letter-spacing: 0.2px;
}
.gh-content .gh-table table :is(th, td),
.gh-content .gh-table table td {
padding: 6px 12px;
border-bottom: 1px solid var(--color-border);
}
.gh-content .gh-table table :is(th, td):first-child {
padding-left: 0;
}
.gh-content .gh-table table :is(th, td):last-child {
padding-right: 0;
}
.gh-content pre {
overflow: auto;
padding: 16px;
font-size: 1.5rem;
line-height: 1.5em;
background: var(--color-lighter-gray);
border-radius: 6px;
font-family: var(--font-mono);
}
.gh-content :not(pre) > code {
vertical-align: baseline;
padding: 0.15em 0.4em;
font-weight: 400;
font-size: 0.95em;
line-height: 1em;
background: var(--color-lighter-gray);
border-radius: 0.25em;
font-family: var(--font-mono);
}
.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
margin-top: calc(48px * var(--content-spacing-factor, 1));
}
.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) {
margin-top: calc(48px * var(--content-spacing-factor, 1));
}
.gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full {
margin-top: calc(68px * var(--content-spacing-factor, 1));
}
.gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) {
margin-top: calc(68px * var(--content-spacing-factor, 1));
}
.kg-image {
margin-right: auto;
margin-left: auto;
}
.kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.kg-image[width][height],
.kg-gallery-image {
cursor: pointer;
}
.kg-image-card a:hover,
.kg-gallery-image a:hover {
opacity: 1 !important;
}
.kg-card.kg-toggle-card .kg-toggle-heading-text {
font-size: 2rem;
font-weight: 700;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-toggle-card .kg-toggle-heading-text {
font-family: var(--font-serif);
}
.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-toggle-card .kg-toggle-heading-text {
font-family: var(--font-mono);
}
.kg-callout-card.kg-card {
border-radius: 0.25em;
}
.kg-callout-card-accent a {
text-decoration: underline;
}
blockquote:not([class]) {
padding-left: 2rem;
border-left: 4px solid var(--ghost-accent-color);
}
blockquote.kg-blockquote-alt {
font-style: normal;
font-weight: 400;
color: var(--color-secondary-text);
}
.kg-card.kg-button-card .kg-btn {
height: unset;
padding: .6em 1.2em;
text-align: center;
font-size: 1em;
line-height: 1.2em;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-card.kg-header-card h2.kg-header-card-header {
font-family: var(--font-serif);
}
.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-card.kg-header-card h2.kg-header-card-header {
font-family: var(--font-mono);
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-header-card h3.kg-header-card-subheader {
font-family: var(--font-serif);
}
.kg-bookmark-card .kg-bookmark-container {
border-radius: 0.25em !important;
}
.kg-bookmark-card .kg-bookmark-container:hover {
opacity: 1;
}
.kg-bookmark-card a.kg-bookmark-container,
.kg-bookmark-card a.kg-bookmark-container:hover {
background: var(--background-color) !important;
color: var(--color-darker-gray) !important;
}
.kg-bookmark-card .kg-bookmark-content {
padding: 1.15em;
}
.kg-bookmark-card .kg-bookmark-title {
font-size: 0.9em;
}
.kg-bookmark-card .kg-bookmark-description {
max-height: none;
margin-top: 0.3em;
font-size: 0.8em;
}
.kg-bookmark-card .kg-bookmark-metadata {
font-size: 0.8em;
}
.kg-bookmark-card .kg-bookmark-icon {
width: 20px;
height: 20px;
margin-right: 6px;
border-radius: 0.2em;
}
.kg-bookmark-card .kg-bookmark-author,
.kg-bookmark-card .kg-bookmark-publisher {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kg-bookmark-card .kg-bookmark-thumbnail img {
border-radius: 0 0.2em 0.2em 0;
}
.kg-product-card.kg-card .kg-product-card-image {
margin-bottom: 12px;
}
.kg-product-card.kg-card a.kg-product-card-button {
height: 2.8em;
margin-top: 12px;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-product-card.kg-card .kg-product-card-title {
font-family: var(--font-serif);
}
.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-product-card.kg-card .kg-product-card-title {
font-family: var(--font-mono);
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-product-card-description :is(p, ul, ol) {
font-family: var(--font-serif-alt);
}
.kg-file-card.kg-card .kg-file-card-container {
padding: 0.6em;
}
.kg-file-card.kg-card .kg-file-card-contents {
margin: 4px 8px 6px;
}
.kg-file-card.kg-card .kg-file-card-metadata {
font-size: 0.9em;
}
.kg-file-card.kg-card .kg-file-card-filesize::before {
margin-right: 6px;
margin-left: 6px;
}
figcaption {
margin-top: 12px;
font-size: 1.4rem;
text-align: center;
}
.kg-card.kg-width-full figcaption {
padding: 0 16px;
}
figcaption a {
color: var(--ghost-accent-color);
text-decoration: underline;
}
.gh-comments {
margin-top: 48px;
}
.post-template .gh-container {
margin-top: 120px;
}
.post-template .gh-container-inner {
display: block;
}
.post-template .gh-container.is-grid .gh-feed {
grid-template-columns: repeat(4, 1fr);
}
.post-template .gh-container .gh-container-title {
display: block;
}
.gh-archive {
display: grid;
grid-template-columns: repeat(16, 1fr);
gap: var(--grid-gap);
margin-block: 80px 24px;
}
.gh-archive.has-image {
margin-top: 48px;
}
.gh-archive-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--grid-gap);
grid-column: 1 / -1;
padding-bottom: clamp(40px, 2.73vw + 29.09px, 64px);
border-bottom: 1px solid var(--color-border);
}
.gh-archive.has-image .gh-archive-inner {
align-items: center;
grid-column: 1 / -1;
}
.gh-archive:not(.has-sidebar):not(.has-image) .gh-archive-inner {
grid-column: 3 / span 12;
}
.gh-archive .gh-article-image {
grid-column: auto;
margin-top: 0;
}
:is(.tag-template, .author-template) .gh-container {
margin-top: 0;
}
.author-template .gh-archive-inner {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 24px;
}
.author-template .gh-article-image {
margin-top: 0;
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
.author-template .gh-article-title {
font-size: 3.6rem;
}
.gh-author-meta {
display: flex;
gap: 10px;
margin-top: 14px;
font-size: 1.5rem;
font-weight: 550;
color: var(--color-secondary-text);
}
.gh-author-meta a {
color: inherit;
}
.gh-author-social {
display: flex;
gap: 16px;
align-items: center;
padding-left: 3px;
}
.gh-author-social svg {
width: 20px;
height: 20px;
}
.gh-tags-page {
position: relative;
min-height: calc(100vh - 100px);
margin-block: 0;
padding-block: 44px 72px;
overflow: hidden;
}
.gh-tags-page::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
background:
radial-gradient(circle at 0 0, rgb(88 139 255 / 0.22), transparent 34%),
radial-gradient(circle at 100% 100%, rgb(143 103 255 / 0.16), transparent 32%);
}
.gh-tags-page-header {
margin-bottom: 56px;
text-align: center;
}
.gh-tags-page-title {
color: #06102b;
font-size: clamp(4rem, 2vw + 3.2rem, 5.8rem);
font-weight: 725;
letter-spacing: 0;
}
.gh-tags-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
.gh-tag-card {
display: flex;
flex-direction: column;
gap: 20px;
content-visibility: auto;
contain-intrinsic-size: auto 400px;
min-height: 100%;
min-width: 0;
padding: 24px 24px 26px;
color: inherit;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--background-color);
box-shadow: 0 18px 55px rgb(15 23 42 / 0.07);
overflow: hidden;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gh-tags-page .gh-tag-card {
display: flex !important;
}
.gh-tag-card:hover {
opacity: 1;
border-color: var(--color-dark-border);
transform: translateY(-2px);
}
.gh-tag-card-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1.25;
overflow: hidden;
color: var(--color-secondary-text);
background-color: var(--color-lighter-gray);
border-radius: 12px;
}
.gh-tag-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-tag-card-image span {
font-size: clamp(4rem, 4vw, 6.4rem);
font-weight: 725;
line-height: 1;
}
.gh-tag-card-content {
min-width: 0;
padding: 0;
text-align: center;
}
.gh-tag-card-title {
color: #152044;
font-size: clamp(2rem, 0.45vw + 1.75rem, 2.5rem);
font-weight: 725;
letter-spacing: 0;
}
.gh-tag-card-count {
margin-top: 2px;
color: #152044;
font-size: 1.6rem;
font-weight: 450;
letter-spacing: 0;
}
:root[data-theme="dark"] .gh-tags-page-title,
:root[data-theme="dark"] .gh-tag-card-title,
:root[data-theme="dark"] .gh-tag-card-count {
color: #fff;
}
:root[data-theme="dark"] .gh-tag-card {
background: #17191f;
border-color: rgb(255 255 255 / 0.12);
}
.gh-tags-empty {
color: var(--color-secondary-text);
}
@media (max-width: 1199px) {
.gh-tags-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.gh-tags-page {
padding-block: 36px 56px;
}
.gh-tags-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.gh-tag-card {
padding: 20px;
}
}
@media (max-width: 1199px) {
.gh-archive {
display: block;
}
}
@media (max-width: 767px) {
.gh-archive-inner {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
.author-template .gh-archive-inner {
flex-direction: column-reverse;
}
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) {
--factor: 1.15;
}
.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) {
--factor: 1.1;
}
.has-sans-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.is-title, .gh-content :is(h2, h3)) {
font-family: var(--gh-font-heading, var(--font-sans));
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.is-title, .gh-content :is(h2, h3)) {
font-family: var(--gh-font-heading, var(--font-serif));
font-weight: 550;
}
.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.is-title, .gh-content :is(h2, h3)) {
font-family: var(--gh-font-heading, var(--font-mono));
}
.has-sans-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .is-body {
font-family: var(--gh-font-body, var(--font-sans));
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .is-body {
font-family: var(--gh-font-body, var(--font-serif-alt));
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-classic .gh-header-title {
font-weight: 550;
letter-spacing: -0.015em;
}
.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-classic .gh-header-title {
letter-spacing: -0.01em;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-form {
border-radius: 0;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-card-title {
line-height: 1.15;
letter-spacing: -0.006em;
font-size: calc(2.0rem*var(--factor, 1))
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-featured-feed .gh-card-title {
font-size: calc(1.6rem*var(--factor, 1))
}
.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-featured-feed .gh-card-title {
font-size: calc(1.5rem*var(--factor, 1));
letter-spacing: 0;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-highlight .gh-featured-feed .gh-card-title {
font-size: clamp(1.6rem, 0.23vw + 1.51rem, 1.8rem);
}
.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-card-title {
font-size: calc(1.8rem*var(--factor, 1));
line-height: 1.2;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-about-title {
letter-spacing: -0.009em;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-footer-signup-header {
letter-spacing: -0.019em;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-article-title {
letter-spacing: -0.019em;
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) {
--content-font-size: 1.9rem;
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-card-excerpt {
font-size: 1.65rem;
line-height: 1.4;
letter-spacing: 0.0005em;
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-header.is-highlight .gh-card:first-child .gh-card-excerpt {
font-size: 1.8rem;
letter-spacing: -0.001em;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-magazine .gh-header-inner>.gh-card .gh-card-title,
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-highlight .gh-header-left .gh-card-title {
font-weight: 550;
font-size: clamp(3.2rem,1.82vw + 2.47rem,4.9rem)
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-about-description {
font-size: 1.6rem;
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-article-excerpt {
letter-spacing: 0;
}
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-footer-signup-subhead {
letter-spacing: 0;
}
:is(.has-serif-title,.has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.gh-button, .gh-form, .gh-form-input),
body[class*=" gh-font-heading"]:not(.gh-font-heading-fira-sans):not(.gh-font-heading-inter):not(.gh-font-heading-manrope):not(.gh-font-heading-noto-sans):not(.gh-font-heading-nunito):not(.gh-font-heading-poppins):not(.gh-font-heading-roboto):not(.gh-font-heading-space-grotesk) :is(.gh-button, .gh-form, .gh-form-input) {
border-radius: 0;
}
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-cta-title {
font-size: 4.8rem;
}
.gh-footer {
margin-top: 12vw;
font-size: 1.5rem;
color: var(--color-darker-gray);
}
.gh-footer a:not(.gh-button) {
color: inherit;
}
.gh-footer.has-accent-color {
background-color: var(--ghost-accent-color);
}
.gh-footer.has-accent-color .gh-footer-bar {
border-top: 0;
}
.gh-footer.has-accent-color .gh-button {
background-color: #fff;
color: #15171a;
}
.gh-footer-bar {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 32px;
margin-bottom: 100px;
padding-block: 28px;
font-weight: 550;
border-block: 1px solid var(--color-border);
}
.gh-footer-menu {
justify-self: end;
}
.gh-footer-menu-en {
display: none !important;
}
:root[data-lang="en"] .gh-footer-menu-pl {
display: none;
}
:root[data-lang="en"] .gh-footer-menu-en {
display: flex !important;
}
.gh-footer-logo {
position: relative;
font-family: var(--gh-font-heading, var(--font-sans));
font-size: calc(2.4rem * var(--factor, 1));
font-weight: 725;
letter-spacing: -0.015em;
white-space: nowrap;
}
.gh-footer-logo img {
max-height: 40px;
}
.gh-footer-menu .nav {
display: flex;
justify-content: center;
gap: 8px 28px;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style-type: none;
}
.gh-footer-copyright {
text-align: right;
white-space: nowrap;
}
.gh-footer-copyright a {
text-decoration: underline;
}
.gh-footer-signup {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 160px;
text-align: center;
}
.gh-footer-signup-header {
font-size: calc(clamp(2.8rem,1.36vw + 2.25rem,4rem) * var(--factor, 1));
font-weight: 700;
letter-spacing: -0.03em;
}
.gh-footer-signup-subhead {
margin-top: 12px;
max-width: 640px;
font-size: 1.8rem;
font-weight: 450;
line-height: 1.4;
letter-spacing: -0.014em;
opacity: 0.75;
}
.gh-footer-signup .gh-form {
margin-top: 40px;
}
@media (max-width: 991px) {
.gh-footer-bar {
display: flex;
flex-direction: column;
gap: 20px;
}
}
.pswp {
position: absolute;
top: 0;
left: 0;
z-index: 3999999;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
outline-offset: 4px;
backface-visibility: hidden;
-webkit-text-size-adjust: 100%;
}
.pswp img {
max-width: none;
}
.pswp--animate_opacity {
opacity: 0.001;
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
will-change: opacity;
}
.pswp--open {
display: block;
}
.pswp--zoom-allowed .pswp__img {
cursor: zoom-in;
}
.pswp--zoomed-in .pswp__img {
cursor: grab;
}
.pswp--dragging .pswp__img {
cursor: grabbing;
}
.pswp__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
opacity: 0;
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transform: translateZ(0);
backface-visibility: hidden;
will-change: opacity;
}
.pswp__scroll-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.pswp__container,
.pswp__zoom-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
touch-action: none;
backface-visibility: hidden;
}
.pswp__container,
.pswp__img {
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.pswp__zoom-wrap {
position: absolute;
width: 100%;
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transform-origin: left top;
}
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
transition: none;
}
.pswp__item {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.pswp__img {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
}
.pswp__img--placeholder {
backface-visibility: hidden;
}
.pswp__img--placeholder--blank {
background: var(--color-black);
}
.pswp--ie .pswp__img {
top: 0;
left: 0;
width: 100% !important;
height: auto !important;
}
.pswp__error-msg {
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -8px;
font-size: 14px;
line-height: 16px;
color: var(--color-secondary-text);
text-align: center;
}
.pswp__error-msg a {
color: var(--color-secondary-text);
text-decoration: underline;
}
.pswp__button {
position: relative;
display: block;
float: right;
width: 44px;
height: 44px;
padding: 0;
margin: 0;
overflow: visible;
appearance: none;
cursor: pointer;
background: none;
border: 0;
box-shadow: none;
transition: opacity 0.2s;
}
.pswp__button:focus,
.pswp__button:hover {
opacity: 1;
}
.pswp__button:active {
opacity: 0.9;
}
.pswp__button::-moz-focus-inner {
padding: 0;
border: 0;
}
.pswp__ui--over-close .pswp__button--close {
opacity: 1;
}
.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
width: 44px;
height: 44px;
background: url("../images/default-skin.png") 0 0 no-repeat;
background-size: 264px 88px;
}
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left::before,
.pswp--svg .pswp__button--arrow--right::before {
background-image: url("../images/default-skin.svg");
}
.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
background: none;
}
}
.pswp__button--close {
background-position: 0 -44px;
}
.pswp__button--share {
background-position: -44px -44px;
}
.pswp__button--fs {
display: none;
}
.pswp--supports-fs .pswp__button--fs {
display: block;
}
.pswp--fs .pswp__button--fs {
background-position: -44px 0;
}
.pswp__button--zoom {
display: none;
background-position: -88px 0;
}
.pswp--zoom-allowed .pswp__button--zoom {
display: block;
}
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px 0;
}
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
visibility: hidden;
}
.pswp__button--arrow--left,
.pswp__button--arrow--right {
position: absolute;
top: 50%;
width: 70px;
height: 100px;
margin-top: -50px;
background: none;
}
.pswp__button--arrow--left {
left: 0;
}
.pswp__button--arrow--right {
right: 0;
}
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
position: absolute;
top: 35px;
width: 32px;
height: 30px;
content: "";
}
.pswp__button--arrow--left::before {
left: 6px;
background-position: -138px -44px;
}
.pswp__button--arrow--right::before {
right: 6px;
background-position: -94px -44px;
}
.pswp__counter {
position: absolute;
top: 0;
left: 0;
height: 44px;
padding: 0 15px;
font-size: 11px;
font-weight: 700;
line-height: 44px;
color: var(--color-white);
user-select: none;
}
.pswp__caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 44px;
}
.pswp__caption__center {
max-width: 420px;
padding: 25px 15px 30px;
margin: 0 auto;
font-size: 11px;
line-height: 1.6;
color: var(--color-white);
text-align: center;
}
.pswp__caption__center .post-caption-title {
margin-bottom: 7px;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before {
padding: 0 4px;
content: "\02022";
}
.pswp__caption--empty {
display: none;
}
.pswp__caption--fake {
visibility: hidden;
}
.pswp__preloader {
position: absolute;
top: 0;
left: 50%;
width: 44px;
height: 44px;
margin-left: -22px;
opacity: 0;
transition: opacity 0.25s ease-out;
direction: ltr;
will-change: opacity;
}
.pswp__preloader__icn {
width: 20px;
height: 20px;
margin: 12px;
}
.pswp__preloader--active {
opacity: 1;
}
.pswp__preloader--active .pswp__preloader__icn {
background: url("../images/preloader.gif") 0 0 no-repeat;
}
.pswp--css_animation .pswp__preloader--active {
opacity: 1;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
animation: clockwise 500ms linear infinite;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}
.pswp--css_animation .pswp__preloader__icn {
position: absolute;
top: 15px;
left: 15px;
width: 14px;
height: 14px;
margin: 0;
background: none;
opacity: 0.75;
}
.pswp--css_animation .pswp__preloader__cut {
position: relative;
width: 7px;
height: 14px;
overflow: hidden;
}
.pswp--css_animation .pswp__preloader__donut {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 14px;
height: 14px;
margin: 0;
background: none;
border: 2px solid var(--color-white);
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 50%;
}
@media screen and (max-width: 1024px) {
.pswp__preloader {
position: relative;
top: auto;
left: auto;
float: right;
margin: 0;
}
}
@keyframes clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes donut-rotate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(-140deg);
}
100% {
transform: rotate(0);
}
}
.pswp__ui {
z-index: 1550;
visibility: visible;
opacity: 1;
-webkit-font-smoothing: auto;
}
.pswp__top-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 44px;
}
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
backface-visibility: hidden;
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
will-change: opacity;
}
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
visibility: visible;
}
.pswp__ui--idle .pswp__top-bar {
opacity: 0;
}
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
opacity: 0;
}
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
opacity: 0.001;
}
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
display: none;
}
.pswp__element--disabled {
display: none !important;
}
.pswp--minimal--dark .pswp__top-bar {
background: none;
}
.gh-meta-share {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.has-light-text .gh-button-share {
border-color: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.85);
}
.has-light-text .gh-button-share:hover {
border-color: rgba(255, 255, 255, 0.85);
}
.gh-button-share {
display: inline-flex;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 999px;
color: rgba(0, 0, 0, 0.85);
background: transparent;
cursor: pointer;
transition: all 0.4s ease;
}
.gh-button-share:hover {
border-color: rgba(0, 0, 0, 0.5);
}
:root {
--editorial-surface: color-mix(in srgb, var(--background-color) 92%, #e9f0f6);
--editorial-panel: color-mix(in srgb, var(--background-color) 88%, #ffffff);
--editorial-soft-text: rgb(21 23 26 / 0.68);
--editorial-shadow: 0 28px 90px rgb(15 23 42 / 0.12);
}
:root[data-theme="dark"] {
--background-color: #11141a;
--color-lighter-gray: rgb(226 232 240 / 0.075);
--color-light-gray: #252b36;
--color-mid-gray: #7c8493;
--color-dark-gray: #d7dce5;
--color-darker-gray: #f5f7fb;
--color-primary-text: #eef2f8;
--color-secondary-text: rgb(226 232 240 / 0.72);
--color-border: rgb(226 232 240 / 0.13);
--color-dark-border: rgb(245 247 251 / 0.34);
--editorial-surface: #151922;
--editorial-panel: #1a202b;
--editorial-soft-text: rgb(226 232 240 / 0.7);
--editorial-shadow: 0 30px 100px rgb(0 0 0 / 0.34);
}
body,
.gh-navigation,
.gh-navigation-actions,
.gh-footer,
.gh-card-link,
.gh-home-feature-link,
.gh-home-side-link,
.gh-tag-card,
.gh-post-nav-link {
transition:
background-color 0.35s ease,
border-color 0.35s ease,
color 0.35s ease,
box-shadow 0.35s ease;
}
:root[data-theme="dark"] .gh-navigation:not(.has-accent-color),
:root[data-theme="dark"] .gh-navigation:not(.has-accent-color) .gh-navigation-actions,
:root[data-theme="dark"] .gh-back-to-top,
:root[data-theme="dark"] .gh-dropdown,
:root[data-theme="dark"] .gh-post-nav-link,
:root[data-theme="dark"] .gh-author-hero-card,
:root[data-theme="dark"] .gh-post-internal-links-inner {
background-color: color-mix(in srgb, var(--editorial-panel) 94%, transparent);
border-color: var(--color-border);
}
:root[data-theme="dark"] .gh-dropdown li a {
color: var(--color-primary-text) !important;
}
:root[data-theme="dark"] .gh-form {
background-color: color-mix(in srgb, var(--editorial-panel) 84%, #ffffff 3%);
}
:root[data-theme="dark"] .gh-form:hover {
background-color: color-mix(in srgb, var(--editorial-panel) 76%, #ffffff 6%);
}
:root[data-theme="dark"] .gh-content a {
color: color-mix(in srgb, var(--ghost-accent-color) 78%, #f5f7fb);
text-decoration-color: color-mix(in srgb, var(--ghost-accent-color) 54%, transparent);
}
:root[data-theme="dark"] .gh-content a:hover {
color: #ffffff;
}
.gh-reading-progress {
position: fixed;
top: 0;
left: 0;
z-index: 4000001;
width: 100%;
height: 3px;
pointer-events: none;
background: transparent;
}
.gh-reading-progress-bar {
display: block;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left center;
background: linear-gradient(90deg, var(--ghost-accent-color), color-mix(in srgb, var(--ghost-accent-color) 58%, var(--color-darker-gray)));
box-shadow: 0 0 18px color-mix(in srgb, var(--ghost-accent-color) 32%, transparent);
will-change: transform;
}
:root[data-theme="dark"] .gh-reading-progress-bar {
background: linear-gradient(90deg, color-mix(in srgb, var(--ghost-accent-color) 82%, #dbe7ff), #8ea2ff);
box-shadow: 0 0 20px color-mix(in srgb, var(--ghost-accent-color) 42%, transparent);
}
@media (max-width: 767px) {
.gh-reading-progress {
height: 2px;
}
}
.post-template .gh-article {
--container-width: 1240px;
--content-width: 760px;
}
.post-template .gh-article-header {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);
gap: clamp(34px, 6vw, 94px);
align-items: center;
width: min(calc(100% - var(--container-gap) * 2), var(--container-width));
margin: clamp(42px, 6vw, 88px) auto clamp(52px, 7vw, 92px);
padding: clamp(18px, 2vw, 28px) 0 clamp(52px, 6vw, 78px);
border-bottom: 1px solid var(--color-border);
}
.post-template .gh-article-header::before {
position: absolute;
inset: clamp(18px, 3vw, 42px) auto auto clamp(-12px, -1vw, -4px);
z-index: -1;
width: min(44vw, 520px);
height: min(42vw, 520px);
content: "";
background: linear-gradient(135deg, rgb(73 111 255 / 0.12), transparent 64%);
border-radius: 32px;
transform: rotate(-3deg);
}
:root[data-theme="dark"] .post-template .gh-article-header::before {
background: linear-gradient(135deg, rgb(113 140 255 / 0.14), transparent 66%);
}
.post-template .gh-article-header > * {
grid-column: auto;
}
.post-template .gh-article-headline {
grid-column: 1;
max-width: 760px;
}
.post-template .gh-article-tag {
display: inline-flex;
align-items: center;
width: fit-content;
margin-bottom: clamp(18px, 2vw, 26px);
padding: 8px 12px;
color: color-mix(in srgb, var(--ghost-accent-color) 84%, var(--color-darker-gray));
font-size: 1.15rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid color-mix(in srgb, var(--ghost-accent-color) 24%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--ghost-accent-color) 8%, transparent);
}
.post-template .gh-article-title {
max-width: 760px;
color: var(--color-darker-gray);
font-size: calc(clamp(4.6rem, 4.2vw + 2rem, 8.4rem) * var(--factor, 1));
font-weight: 760;
line-height: 0.98;
letter-spacing: 0;
}
.post-template .gh-article-excerpt {
max-width: 660px;
margin-top: clamp(20px, 2vw, 28px);
color: var(--editorial-soft-text);
font-size: clamp(1.8rem, 0.45vw + 1.58rem, 2.2rem);
line-height: 1.55;
letter-spacing: 0;
}
.post-template .gh-meta-share {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
justify-content: space-between;
max-width: 690px;
margin-top: clamp(28px, 3vw, 42px);
padding-top: 24px;
border-top: 1px solid var(--color-border);
}
.post-template .gh-article-meta {
gap: 12px;
margin-left: 0;
}
.post-template .gh-article-author-image a {
width: 48px;
height: 48px;
border-color: var(--background-color);
}
.post-template .gh-article-author-name {
font-size: 1.35rem;
font-weight: 750;
letter-spacing: 0;
}
.post-template .gh-article-meta-content {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: var(--color-secondary-text);
font-size: 1.18rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.35;
text-transform: uppercase;
}
.post-template .gh-button-share {
min-height: 40px;
padding: 0 18px;
color: var(--color-darker-gray);
font-size: 1.3rem;
font-weight: 750;
border-color: var(--color-border);
background: var(--editorial-panel);
box-shadow: 0 12px 34px rgb(15 23 42 / 0.08);
}
.post-template .gh-button-share:hover {
opacity: 1;
border-color: var(--color-dark-border);
transform: translateY(-1px);
}
.post-template .gh-article-image {
grid-column: 2;
grid-row: 1;
justify-self: stretch;
width: 100%;
max-width: none;
min-width: 0;
margin-top: 0;
}
.post-template .gh-article-image img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 18px;
box-shadow: var(--editorial-shadow);
transition: transform 0.7s ease, box-shadow 0.35s ease;
}
.post-template .gh-article-image:hover img {
transform: scale(1.018);
}
.post-template .gh-article-image figcaption {
margin-top: 14px;
padding-inline: 8px;
color: var(--color-secondary-text);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.45;
text-align: left;
}
.post-template .gh-content {
--content-font-size: 1.85rem;
--reading-scale: 1.25;
--content-spacing-factor: 1.08;
color: color-mix(in srgb, var(--color-primary-text) 92%, var(--color-secondary-text));
font-size: calc(var(--content-font-size, 1.85rem) * var(--reading-scale));
line-height: 1.78;
}
.post-template .gh-content > p:first-of-type {
font-size: 1em;
line-height: 1.72;
}
.post-template .gh-content :is(h2, h3) {
color: var(--color-darker-gray);
letter-spacing: 0;
}
.post-template .gh-content h2 {
margin-top: calc(72px * var(--content-spacing-factor, 1));
font-size: clamp(3rem, 1vw + 2.4rem, 4rem);
line-height: 1.12;
}
.post-template .gh-content h3 {
margin-top: calc(52px * var(--content-spacing-factor, 1));
font-size: clamp(2.2rem, 0.5vw + 1.9rem, 2.8rem);
line-height: 1.18;
}
.post-template .gh-content :is(.kg-image-card, .kg-gallery-card) {
margin-top: calc(64px * var(--content-spacing-factor, 1));
margin-bottom: calc(64px * var(--content-spacing-factor, 1));
}
.post-template .kg-image {
border-radius: 14px;
box-shadow: 0 22px 70px rgb(15 23 42 / 0.1);
transition: transform 0.7s ease, box-shadow 0.35s ease;
}
.post-template .kg-image:hover {
transform: translateY(-2px);
box-shadow: 0 28px 86px rgb(15 23 42 / 0.14);
}
:root[data-theme="dark"] .post-template .kg-image {
box-shadow: 0 22px 80px rgb(0 0 0 / 0.32);
}
:root[data-theme="dark"] .post-template .kg-image:hover {
box-shadow: 0 30px 94px rgb(0 0 0 / 0.42);
}
.post-template figcaption {
max-width: 720px;
margin: 14px auto 0;
color: var(--color-secondary-text);
font-size: 1.35rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
text-align: center;
}
.post-template figcaption::before {
display: block;
width: 34px;
height: 1px;
margin: 0 auto 10px;
content: "";
background: color-mix(in srgb, var(--ghost-accent-color) 55%, var(--color-border));
}
.post-template blockquote:not([class]) {
margin-block: calc(56px * var(--content-spacing-factor, 1));
padding: 0 0 0 28px;
color: var(--color-darker-gray);
font-size: clamp(2.25rem, 0.8vw + 1.8rem, 3.1rem);
line-height: 1.35;
border-left: 3px solid var(--ghost-accent-color);
}
.post-template .gh-post-nav-link {
background: var(--editorial-panel);
box-shadow: 0 18px 54px rgb(15 23 42 / 0.06);
}
:root[data-theme="dark"] .post-template .gh-post-nav-link,
:root[data-theme="dark"] .post-template .gh-button-share {
box-shadow: 0 18px 56px rgb(0 0 0 / 0.24);
}
@media (prefers-reduced-motion: no-preference) {
.post-template .gh-article-headline,
.post-template .gh-article-image,
.post-template .gh-content > * {
animation: editorial-rise 0.7s ease both;
}
.post-template .gh-article-image {
animation-delay: 0.08s;
}
.post-template .gh-content > * {
animation-duration: 0.55s;
animation-delay: 0.12s;
}
.post-template .gh-article-image img,
.post-template .kg-image,
.gh-card-image img,
.gh-featured-gallery-image img {
will-change: transform;
}
}
@keyframes editorial-rise {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 991px) {
.post-template .gh-article-header {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
padding-top: 0;
}
.post-template .gh-article-header::before {
width: 74vw;
height: 48vw;
}
.post-template .gh-article-headline,
.post-template .gh-article-image {
grid-column: 1;
grid-row: auto;
}
.post-template .gh-article-image img {
aspect-ratio: 16 / 10;
border-radius: 14px;
}
}
@media (max-width: 767px) {
.post-template .gh-article-header {
margin-top: 34px;
margin-bottom: 48px;
padding-bottom: 44px;
}
.post-template .gh-article-title {
font-size: calc(clamp(3.8rem, 11vw, 5.6rem) * var(--factor, 1));
line-height: 1.02;
}
.post-template .gh-meta-share {
align-items: flex-start;
flex-direction: column;
}
.post-template .gh-article-image img {
aspect-ratio: 4 / 5;
}
.post-template .gh-content {
--content-font-size: 1.72rem;
line-height: 1.72;
}
}
.tag-template .gh-main {
background:
linear-gradient(180deg, var(--editorial-surface), var(--background-color) 38%),
var(--background-color);
}
.gh-tag-hero {
position: relative;
min-height: clamp(520px, 72vh, 760px);
overflow: hidden;
color: var(--color-white);
background: #15171a;
}
.gh-tag-hero:not(.has-image) {
color: var(--color-darker-gray);
background:
radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--ghost-accent-color) 18%, transparent), transparent 34%),
var(--editorial-surface);
}
.gh-tag-hero-media {
position: absolute;
inset: 0;
}
.gh-tag-hero-media::after {
position: absolute;
inset: 0;
content: "";
background:
linear-gradient(90deg, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.34) 48%, rgb(0 0 0 / 0.08)),
linear-gradient(180deg, rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.58));
}
.gh-tag-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
}
.gh-tag-hero-inner {
position: relative;
z-index: 1;
display: flex;
align-items: end;
min-height: inherit;
padding-block: clamp(72px, 9vw, 128px);
}
.gh-tag-hero-copy {
max-width: 760px;
}
.gh-tag-hero-kicker,
.gh-tags-page-kicker,
.gh-tag-feed-kicker,
.gh-tag-card-label {
color: color-mix(in srgb, var(--ghost-accent-color) 82%, currentColor);
font-size: 1.15rem;
font-weight: 820;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.gh-tag-hero.has-image .gh-tag-hero-kicker {
color: rgb(255 255 255 / 0.82);
}
.gh-tag-hero-title {
margin-top: 18px;
color: inherit;
font-size: calc(clamp(5rem, 6.5vw, 10rem) * var(--factor, 1));
font-weight: 780;
line-height: 0.92;
letter-spacing: 0;
}
.gh-tag-hero-description {
max-width: 660px;
margin-top: clamp(20px, 2vw, 30px);
color: rgb(255 255 255 / 0.78);
font-size: clamp(1.8rem, 0.48vw + 1.58rem, 2.25rem);
line-height: 1.52;
letter-spacing: 0;
}
.gh-tag-hero:not(.has-image) .gh-tag-hero-description {
color: var(--color-secondary-text);
}
.gh-tag-feed {
padding-block: clamp(56px, 7vw, 100px) 0;
}
.gh-tag-feed-inner {
position: relative;
}
.gh-tag-feed-header {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: end;
margin-bottom: clamp(28px, 4vw, 48px);
padding-bottom: 18px;
border-bottom: 1px solid var(--color-border);
}
.gh-tag-feed-title {
margin-top: 8px;
color: var(--color-darker-gray);
font-size: clamp(3rem, 1.5vw + 2.25rem, 4.6rem);
line-height: 1.04;
letter-spacing: 0;
}
.tag-template .gh-tag-feed .gh-container {
margin-top: 0;
padding: 0;
}
.tag-template .gh-tag-feed .gh-container-inner {
display: block;
}
.tag-template .gh-tag-feed .gh-feed {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(26px, 3vw, 44px);
}
.tag-template .gh-tag-feed .gh-card-link {
gap: 18px;
}
.tag-template .gh-tag-feed .gh-card-image {
overflow: hidden;
aspect-ratio: 4 / 5;
border-radius: 16px;
background: var(--color-lighter-gray);
box-shadow: 0 22px 68px rgb(15 23 42 / 0.1);
}
.tag-template .gh-tag-feed .gh-card-image img {
transition: transform 0.7s ease;
}
.tag-template .gh-tag-feed .gh-card-link:hover .gh-card-image img {
transform: scale(1.045);
}
.tag-template .gh-tag-feed .gh-card-tag {
display: inline-flex;
align-items: center;
color: var(--ghost-accent-color);
}
.tag-template .gh-tag-feed .gh-card-title {
font-size: clamp(2.1rem, 0.56vw + 1.85rem, 2.8rem);
line-height: 1.12;
letter-spacing: 0;
}
.tag-template .gh-tag-feed .gh-card-meta {
margin-top: 14px;
font-size: 1.18rem;
font-weight: 720;
letter-spacing: 0.045em;
text-transform: uppercase;
}
.gh-tags-page {
padding-block: clamp(52px, 7vw, 96px) clamp(72px, 9vw, 124px);
background:
radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--ghost-accent-color) 16%, transparent), transparent 30%),
linear-gradient(180deg, var(--editorial-surface), var(--background-color) 42%);
}
.gh-tags-page::before {
content: none;
}
.gh-tags-page-header {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.58fr);
gap: clamp(28px, 6vw, 84px);
align-items: end;
margin-bottom: clamp(44px, 6vw, 78px);
text-align: left;
}
.gh-tags-page-title {
margin-top: 14px;
color: var(--color-darker-gray);
font-size: calc(clamp(5.2rem, 6vw, 9.2rem) * var(--factor, 1));
font-weight: 780;
line-height: 0.94;
letter-spacing: 0;
}
.gh-tags-page-description {
max-width: 520px;
color: var(--color-secondary-text);
font-size: clamp(1.65rem, 0.35vw + 1.48rem, 2rem);
line-height: 1.58;
letter-spacing: 0;
}
.gh-tags-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 34px);
}
.gh-tags-page .gh-tag-card {
position: relative;
display: block !important;
min-height: 360px;
padding: 0;
overflow: hidden;
color: var(--color-white);
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: 18px;
background: #15171a;
box-shadow: 0 26px 80px rgb(15 23 42 / 0.14);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.gh-tags-page .gh-tag-card:nth-child(6n + 1),
.gh-tags-page .gh-tag-card:nth-child(6n + 4) {
min-height: 440px;
}
.gh-tags-page .gh-tag-card:hover {
border-color: rgb(255 255 255 / 0.28);
transform: translateY(-6px);
box-shadow: 0 34px 96px rgb(15 23 42 / 0.2);
}
.gh-tags-page .gh-tag-card-image {
position: absolute;
inset: 0;
display: block;
aspect-ratio: auto;
border-radius: 0;
}
.gh-tags-page .gh-tag-card-image::after {
position: absolute;
inset: 0;
content: "";
background:
linear-gradient(180deg, rgb(0 0 0 / 0.02), rgb(0 0 0 / 0.72)),
linear-gradient(90deg, rgb(0 0 0 / 0.26), transparent 60%);
}
.gh-tags-page .gh-tag-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.75s ease;
}
.gh-tags-page .gh-tag-card:hover .gh-tag-card-image img {
transform: scale(1.06);
}
.gh-tags-page .gh-tag-card-image span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: rgb(255 255 255 / 0.2);
font-size: clamp(5rem, 7vw, 10rem);
}
.gh-tags-page .gh-tag-card-content {
position: absolute;
right: 22px;
bottom: 22px;
left: 22px;
z-index: 1;
padding: 0;
text-align: left;
}
.gh-tags-page .gh-tag-card-label {
color: rgb(255 255 255 / 0.72);
}
.gh-tags-page .gh-tag-card-title {
margin-top: 8px;
color: inherit;
font-size: clamp(2.4rem, 1vw + 1.9rem, 3.35rem);
font-weight: 760;
line-height: 1.02;
letter-spacing: 0;
}
.gh-tags-page .gh-tag-card-count {
display: inline-flex;
gap: 6px;
align-items: center;
margin-top: 12px;
color: rgb(255 255 255 / 0.74);
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.gh-tags-page .gh-tag-card-count span {
color: var(--color-white);
}
:root[data-theme="dark"] .gh-tags-page {
background:
radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--ghost-accent-color) 14%, transparent), transparent 30%),
linear-gradient(180deg, var(--editorial-surface), var(--background-color) 44%);
}
:root[data-theme="dark"] .tag-template .gh-tag-feed .gh-card-image,
:root[data-theme="dark"] .gh-tags-page .gh-tag-card {
box-shadow: 0 26px 90px rgb(0 0 0 / 0.34);
}
@media (prefers-reduced-motion: no-preference) {
.gh-tag-hero-copy,
.gh-tag-feed-header,
.tag-template .gh-tag-feed .gh-card,
.gh-tags-page-header,
.gh-tags-page .gh-tag-card {
animation: editorial-rise 0.65s ease both;
}
.tag-template .gh-tag-feed .gh-card:nth-child(2),
.gh-tags-page .gh-tag-card:nth-child(2) {
animation-delay: 0.06s;
}
.tag-template .gh-tag-feed .gh-card:nth-child(3),
.gh-tags-page .gh-tag-card:nth-child(3) {
animation-delay: 0.12s;
}
}
@media (max-width: 1199px) {
.gh-tags-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tag-template .gh-tag-feed .gh-feed {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.gh-tag-hero {
min-height: 560px;
}
.gh-tag-hero-inner {
align-items: end;
}
.gh-tags-page-header {
grid-template-columns: 1fr;
gap: 18px;
}
.gh-tags-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.gh-tag-hero {
min-height: 500px;
}
.gh-tag-hero-media::after {
background:
linear-gradient(180deg, rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.78)),
linear-gradient(90deg, rgb(0 0 0 / 0.4), transparent);
}
.gh-tag-hero-title,
.gh-tags-page-title {
font-size: calc(clamp(4rem, 15vw, 6.4rem) * var(--factor, 1));
}
.gh-tag-feed-header {
align-items: flex-start;
flex-direction: column;
}
.tag-template .gh-tag-feed .gh-feed,
.gh-tags-grid {
grid-template-columns: 1fr;
}
.gh-tags-page .gh-tag-card,
.gh-tags-page .gh-tag-card:nth-child(6n + 1),
.gh-tags-page .gh-tag-card:nth-child(6n + 4) {
min-height: 340px;
border-radius: 14px;
}
}
.gh-tags-page-header {
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
align-items: end;
}
.gh-tags-page-kicker {
grid-column: 1;
grid-row: 1;
}
.gh-tags-page-title {
grid-column: 1;
grid-row: 2;
max-width: 760px;
overflow-wrap: normal;
word-break: normal;
font-size: calc(clamp(4.8rem, 5.2vw, 8rem) * var(--factor, 1));
}
.gh-tags-page-description {
grid-column: 2;
grid-row: 1 / span 2;
align-self: end;
}
.gh-tag-hero {
min-height: clamp(360px, 48vh, 520px);
}
.gh-tag-hero-inner {
padding-block: clamp(56px, 6vw, 88px);
}
.gh-tag-hero-title {
font-size: calc(clamp(4.2rem, 4.6vw, 7.2rem) * var(--factor, 1));
}
.tag-template .gh-tag-feed .gh-card-image {
aspect-ratio: 16 / 9;
border-radius: 14px;
}
.gh-tags-page .gh-tag-card {
min-height: 240px;
}
.gh-tags-page .gh-tag-card:nth-child(6n + 1),
.gh-tags-page .gh-tag-card:nth-child(6n + 4) {
min-height: 280px;
}
@media (max-width: 991px) {
.gh-tags-page-header {
grid-template-columns: 1fr;
}
.gh-tags-page-kicker,
.gh-tags-page-title,
.gh-tags-page-description {
grid-column: 1;
grid-row: auto;
}
.gh-tag-hero {
min-height: 430px;
}
}
@media (max-width: 767px) {
.gh-tags-page-title {
font-size: calc(clamp(3.8rem, 13vw, 5.6rem) * var(--factor, 1));
}
.gh-tag-hero {
min-height: 420px;
}
.gh-tags-page .gh-tag-card,
.gh-tags-page .gh-tag-card:nth-child(6n + 1),
.gh-tags-page .gh-tag-card:nth-child(6n + 4) {
min-height: 260px;
}
}
.gh-post-internal-links {
margin-top: clamp(56px, 6vw, 84px);
}
.gh-post-internal-links-inner {
grid-column: wide;
display: grid;
grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px);
padding: clamp(24px, 3vw, 36px);
border: 1px solid var(--color-border);
border-radius: 18px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--ghost-accent-color) 8%, transparent), transparent 58%),
var(--editorial-panel);
box-shadow: 0 20px 64px rgb(15 23 42 / 0.08);
}
.gh-post-internal-links-kicker {
color: var(--ghost-accent-color);
font-size: 1.15rem;
font-weight: 820;
line-height: 1;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.gh-post-internal-links-title {
max-width: 280px;
margin-top: 12px;
color: var(--color-darker-gray);
font-size: clamp(2.2rem, 0.85vw + 1.75rem, 3rem);
font-weight: 760;
line-height: 1.08;
letter-spacing: 0;
}
.gh-post-internal-links-list {
display: grid;
gap: 0;
padding: 0;
margin: 0;
list-style: none;
}
.gh-post-internal-links-list li {
border-top: 1px solid var(--color-border);
}
.gh-post-internal-links-list li:first-child {
border-top: 0;
}
.gh-post-internal-links-list a {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: center;
padding: 16px 0;
color: inherit;
}
.gh-post-internal-links-list a:hover {
opacity: 1;
}
.gh-post-internal-links-list a:hover span {
color: var(--ghost-accent-color);
}
.gh-post-internal-links-list span {
color: var(--color-darker-gray);
font-size: clamp(1.65rem, 0.28vw + 1.5rem, 1.95rem);
font-weight: 720;
line-height: 1.24;
transition: color 0.2s ease;
}
.gh-post-internal-links-list time {
flex: 0 0 auto;
color: var(--color-secondary-text);
font-size: 1.12rem;
font-weight: 760;
letter-spacing: 0.055em;
text-transform: uppercase;
}
.post-template .gh-post-nav {
margin-top: clamp(46px, 5vw, 72px);
}
.post-template .gh-post-related {
margin-top: clamp(72px, 8vw, 112px);
}
.post-template .gh-post-related .gh-container-title {
padding-bottom: 18px;
margin-bottom: clamp(24px, 3vw, 38px);
color: var(--color-darker-gray);
font-size: clamp(2.6rem, 1.1vw + 2rem, 4rem);
line-height: 1.08;
letter-spacing: 0;
border-bottom: 1px solid var(--color-border);
}
:root[data-theme="dark"] .gh-post-internal-links-inner {
box-shadow: 0 24px 78px rgb(0 0 0 / 0.28);
}
@media (max-width: 767px) {
.gh-post-internal-links-inner {
grid-template-columns: 1fr;
border-radius: 14px;
}
.gh-post-internal-links-title {
max-width: none;
}
.gh-post-internal-links-list a {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
}
.gh-post-internal-links-inner {
display: block;
}
.gh-post-internal-links-title {
max-width: none;
margin-top: 10px;
}
.gh-post-internal-links-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: clamp(22px, 3vw, 34px);
}
.gh-post-internal-links-list li,
.gh-post-internal-links-list li:first-child {
border-top: 0;
}
.gh-post-internal-links-list a {
align-items: flex-start;
justify-content: flex-start;
min-height: 100%;
padding: 18px 18px 20px;
border: 1px solid var(--color-border);
border-radius: 14px;
background: color-mix(in srgb, var(--background-color) 72%, transparent);
}
.gh-post-internal-links-list a::after {
flex: 0 0 auto;
margin-left: auto;
color: var(--ghost-accent-color);
font-size: 1.8rem;
line-height: 1;
content: "\2192";
}
.gh-post-internal-links-list a:hover {
border-color: color-mix(in srgb, var(--ghost-accent-color) 38%, var(--color-border));
background: color-mix(in srgb, var(--ghost-accent-color) 7%, var(--background-color));
}
.gh-post-internal-links-list span {
font-size: clamp(1.62rem, 0.24vw + 1.48rem, 1.88rem);
}
.gh-post-internal-links-list time {
display: none;
}
@media (max-width: 991px) {
.gh-post-internal-links-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.gh-post-internal-links-list {
grid-template-columns: 1fr;
}
.gh-post-internal-links-list a {
flex-direction: row;
gap: 16px;
}
}
.gh-post-internal-links-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gh-post-internal-links-list a {
align-items: center;
justify-content: center;
min-height: 128px;
text-align: center;
}
.gh-post-internal-links-list a::after {
display: none;
}
.gh-post-internal-links-list span {
max-width: 18ch;
}
@media (max-width: 1199px) {
.gh-post-internal-links-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.gh-post-internal-links-list {
grid-template-columns: 1fr;
}
.gh-post-internal-links-list a {
min-height: 96px;
}
}
.author-template .gh-main {
background:
linear-gradient(180deg, var(--editorial-surface), var(--background-color) 42%),
var(--background-color);
}
.gh-author-hero {
position: relative;
padding-block: clamp(54px, 7vw, 104px);
overflow: hidden;
}
.gh-author-hero::before {
position: absolute;
inset: 0;
z-index: -2;
content: "";
background:
radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--ghost-accent-color) 16%, transparent), transparent 34%),
radial-gradient(circle at 88% 16%, rgb(15 23 42 / 0.07), transparent 28%);
}
.gh-author-hero-cover {
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.2;
}
.gh-author-hero-cover::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(180deg, var(--background-color), var(--editorial-surface) 70%);
}
.gh-author-hero-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-author-hero-card {
display: grid;
grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
gap: clamp(28px, 5vw, 74px);
align-items: center;
max-width: 1060px;
padding: clamp(26px, 4vw, 48px);
border: 1px solid var(--color-border);
border-radius: 24px;
background: color-mix(in srgb, var(--editorial-panel) 92%, transparent);
box-shadow: 0 28px 90px rgb(15 23 42 / 0.1);
}
.gh-author-hero-image {
overflow: hidden;
aspect-ratio: 1;
border: 1px solid var(--color-border);
border-radius: 50%;
background: var(--color-lighter-gray);
box-shadow: 0 22px 70px rgb(15 23 42 / 0.12);
}
.gh-author-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-author-hero-kicker,
.gh-author-feed-kicker {
color: var(--ghost-accent-color);
font-size: 1.15rem;
font-weight: 820;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.gh-author-hero-title {
margin-top: 14px;
color: var(--color-darker-gray);
font-size: calc(clamp(4.6rem, 5vw, 8.4rem) * var(--factor, 1));
font-weight: 780;
line-height: 0.96;
letter-spacing: 0;
}
.gh-author-hero-bio {
max-width: 700px;
margin-top: clamp(18px, 2vw, 28px);
color: var(--color-secondary-text);
font-size: clamp(1.72rem, 0.4vw + 1.5rem, 2.1rem);
line-height: 1.58;
letter-spacing: 0;
}
.author-template .gh-author-meta {
flex-wrap: wrap;
gap: 16px 22px;
align-items: center;
margin-top: clamp(22px, 3vw, 34px);
color: var(--color-secondary-text);
}
.author-template .gh-author-location {
font-size: 1.25rem;
font-weight: 760;
letter-spacing: 0.055em;
text-transform: uppercase;
}
.author-template .gh-author-social {
flex-wrap: wrap;
gap: 10px;
padding-left: 0;
}
.author-template .gh-author-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
color: var(--color-darker-gray);
font-size: 1.25rem;
font-weight: 760;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--background-color);
}
.author-template .gh-author-social-link:hover {
opacity: 1;
border-color: color-mix(in srgb, var(--ghost-accent-color) 42%, var(--color-border));
color: var(--ghost-accent-color);
}
.author-template .gh-author-social svg {
width: 18px;
height: 18px;
}
.gh-author-feed {
padding-block: clamp(42px, 6vw, 82px) 0;
}
.gh-author-feed-header {
margin-bottom: clamp(28px, 4vw, 48px);
padding-bottom: 18px;
border-bottom: 1px solid var(--color-border);
}
.gh-author-feed-title {
margin-top: 8px;
color: var(--color-darker-gray);
font-size: clamp(3rem, 1.5vw + 2.25rem, 4.6rem);
line-height: 1.04;
letter-spacing: 0;
}
.author-template .gh-author-feed .gh-container {
margin-top: 0;
padding: 0;
}
.author-template .gh-author-feed .gh-container-inner {
display: block;
}
.author-template .gh-author-feed .gh-feed {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(26px, 3vw, 44px);
}
.author-template .gh-author-feed .gh-card-link {
gap: 18px;
}
.author-template .gh-author-feed .gh-card-image {
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 14px;
background: var(--color-lighter-gray);
box-shadow: 0 22px 68px rgb(15 23 42 / 0.1);
}
.author-template .gh-author-feed .gh-card-image img {
transition: transform 0.7s ease;
}
.author-template .gh-author-feed .gh-card-link:hover .gh-card-image img {
transform: scale(1.045);
}
.author-template .gh-author-feed .gh-card-tag {
display: inline-flex;
align-items: center;
color: var(--ghost-accent-color);
}
.author-template .gh-author-feed .gh-card-title {
font-size: clamp(2.1rem, 0.56vw + 1.85rem, 2.8rem);
line-height: 1.12;
letter-spacing: 0;
}
:root[data-theme="dark"] .gh-author-hero-card,
:root[data-theme="dark"] .gh-author-hero-image,
:root[data-theme="dark"] .author-template .gh-author-feed .gh-card-image {
box-shadow: 0 26px 90px rgb(0 0 0 / 0.32);
}
@media (prefers-reduced-motion: no-preference) {
.gh-author-hero-card,
.gh-author-feed-header,
.author-template .gh-author-feed .gh-card {
animation: editorial-rise 0.65s ease both;
}
.author-template .gh-author-feed .gh-card:nth-child(2) {
animation-delay: 0.06s;
}
.author-template .gh-author-feed .gh-card:nth-child(3) {
animation-delay: 0.12s;
}
}
@media (max-width: 991px) {
.gh-author-hero-card {
grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
}
.author-template .gh-author-feed .gh-feed {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.gh-author-hero-card {
grid-template-columns: 1fr;
border-radius: 18px;
}
.gh-author-hero-image {
width: 148px;
}
.gh-author-hero-title {
font-size: calc(clamp(3.8rem, 13vw, 5.8rem) * var(--factor, 1));
}
.author-template .gh-author-feed .gh-feed {
grid-template-columns: 1fr;
}
}
:root {
--dg-bg: #f4f7fa;
--dg-surface: #ffffff;
--dg-panel: #eaf1f6;
--dg-panel-strong: #dde8f0;
--dg-text: #111315;
--dg-muted: #66706a;
--dg-border: rgb(17 19 21 / 0.1);
--dg-border-strong: rgb(17 19 21 / 0.2);
--dg-accent: color-mix(in srgb, var(--ghost-accent-color) 72%, #4e8fad);
--dg-warm: #b86f2d;
--dg-shadow-soft: 0 18px 50px rgb(17 24 39 / 0.08);
--dg-shadow-lift: 0 28px 80px rgb(17 24 39 / 0.14);
--dg-shadow-accent: 0 16px 34px color-mix(in srgb, var(--dg-accent) 20%, transparent);
--dg-card-radius: 8px;
--dg-home-title-size: 6.6rem;
--dg-feature-title-size: 5rem;
}
:root[data-theme="dark"] {
--background-color: #0d0e10;
--dg-bg: #0d0e10;
--dg-surface: #141719;
--dg-panel: #191d1e;
--dg-panel-strong: #202626;
--dg-text: #f4f5ef;
--dg-muted: #a9b3ac;
--dg-border: rgb(244 245 239 / 0.13);
--dg-border-strong: rgb(244 245 239 / 0.24);
--dg-accent: color-mix(in srgb, var(--ghost-accent-color) 58%, #6eb8d6);
--dg-warm: #e0a15f;
--dg-shadow-soft: 0 18px 58px rgb(0 0 0 / 0.3);
--dg-shadow-lift: 0 30px 90px rgb(0 0 0 / 0.46);
--dg-shadow-accent: 0 16px 38px color-mix(in srgb, var(--dg-accent) 18%, transparent);
}
:focus-visible {
outline: 2px solid var(--dg-accent);
outline-offset: 4px;
}
.home-template,
.gh-home-page {
background: var(--dg-bg);
}
.home-template .gh-main,
.gh-home-page {
color: var(--dg-text);
background:
linear-gradient(180deg, var(--dg-panel) 0, var(--dg-bg) 420px),
var(--dg-bg);
}
.gh-home-magazine {
padding-block: 52px 112px;
}
.gh-home-magazine::before {
background:
linear-gradient(135deg, rgb(255 255 255 / 0.45), transparent 42%),
linear-gradient(180deg, var(--dg-panel), transparent 460px);
}
:root[data-theme="dark"] .gh-home-magazine::before {
background:
linear-gradient(135deg, rgb(255 255 255 / 0.045), transparent 42%),
linear-gradient(180deg, var(--dg-panel), transparent 460px);
}
.gh-home-intro {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 44px;
align-items: end;
margin-bottom: 30px;
}
.gh-home-intro-copy {
max-width: 940px;
}
.gh-home-count {
gap: 8px;
margin-bottom: 18px;
padding: 0;
color: var(--dg-muted);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.gh-home-count span {
color: var(--dg-text);
font-size: 1.42rem;
font-weight: 820;
}
.gh-home-count p {
color: var(--dg-muted);
font-size: 1.18rem;
font-weight: 720;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.gh-home-kicker,
.gh-home-section-kicker,
.gh-home-feature-topline span {
color: var(--dg-accent);
font-size: 1.18rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gh-home-title {
max-width: 13ch;
margin-top: 18px;
color: var(--dg-text);
font-size: var(--dg-home-title-size);
font-weight: 820;
line-height: 0.96;
letter-spacing: 0;
text-wrap: balance;
}
.gh-home-description {
max-width: 720px;
margin-top: 22px;
color: var(--dg-muted);
font-size: 1.95rem;
line-height: 1.56;
}
.gh-home-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 0;
}
.gh-home-primary-cta,
.gh-home-secondary-link,
.gh-home-section-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
font-size: 1.38rem;
font-weight: 760;
line-height: 1;
border-radius: 999px;
}
.gh-home-primary-cta {
color: #ffffff;
background: linear-gradient(135deg, var(--dg-accent), color-mix(in srgb, var(--dg-accent) 70%, var(--dg-warm)));
box-shadow: var(--dg-shadow-accent);
}
.gh-home-secondary-link,
.gh-home-section-link {
color: var(--dg-text);
border: 1px solid var(--dg-border);
background: color-mix(in srgb, var(--dg-surface) 84%, transparent);
}
.page-template .gh-page-discovery-panel {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
margin-top: 22px;
overflow: hidden;
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: var(--dg-border);
}
.page-template .gh-page-discovery {
min-height: auto;
padding: 16px;
color: var(--dg-text);
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
}
.page-template a.gh-page-discovery:hover,
.page-template .gh-page-tag-chip:hover,
.page-template .gh-page-discovery-thumb:hover {
opacity: 1;
}
.page-template .gh-page-discovery-main {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 14px;
align-items: center;
}
.page-template .gh-page-discovery-image,
.page-template .gh-page-discovery-thumb {
overflow: hidden;
border-radius: 6px;
background: var(--dg-panel);
}
.page-template .gh-page-discovery-image {
aspect-ratio: 4 / 3;
}
.page-template .gh-page-discovery-image img,
.page-template .gh-page-discovery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.page-template .gh-page-discovery-main:hover img,
.page-template .gh-page-discovery-thumb:hover img {
transform: scale(1.04);
}
.page-template .gh-page-discovery-content {
min-width: 0;
}
.page-template .gh-page-discovery-label {
margin-bottom: 10px;
color: var(--dg-accent);
font-size: 1.05rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.page-template .gh-page-discovery-title {
color: var(--dg-text);
font-size: 1.68rem;
font-weight: 800;
line-height: 1.14;
letter-spacing: 0;
}
.page-template .gh-page-discovery-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
color: var(--dg-muted);
font-size: 1.12rem;
font-weight: 700;
line-height: 1.25;
}
.page-template .gh-page-discovery-meta span + span::before {
margin-right: 8px;
content: "/";
color: var(--dg-border-strong);
}
.page-template .gh-page-tag-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.page-template .gh-page-tag-chip {
display: inline-flex;
gap: 8px;
align-items: center;
min-height: 34px;
padding: 0 12px;
color: var(--dg-text);
font-size: 1.2rem;
font-weight: 780;
line-height: 1;
border: 1px solid var(--dg-border);
border-radius: 999px;
background: var(--dg-panel);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.page-template .gh-page-tag-chip small {
color: var(--dg-muted);
font-size: 1.05rem;
font-weight: 780;
}
.page-template .gh-page-tag-chip:hover {
border-color: var(--dg-border-strong);
transform: translateY(-1px);
}
.page-template .gh-page-discovery-thumbs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.page-template .gh-page-discovery-thumb {
display: grid;
aspect-ratio: 4 / 3;
place-items: center;
color: var(--dg-muted);
font-size: 1.8rem;
font-weight: 800;
transition: transform 0.2s ease;
}
.page-template .gh-page-discovery-thumb:hover {
transform: translateY(-1px);
}
.gh-home-metric {
min-height: 146px;
padding: 22px;
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
}
.gh-home-metric span {
display: block;
color: var(--dg-text);
font-size: 3.6rem;
font-weight: 850;
line-height: 0.95;
}
.gh-home-metric p {
max-width: 12ch;
margin-top: 12px;
color: var(--dg-muted);
font-size: 1.28rem;
font-weight: 720;
line-height: 1.25;
text-transform: uppercase;
}
.gh-home-lead {
grid-template-columns: minmax(0, 1.52fr) minmax(320px, 0.78fr);
gap: 28px;
}
.gh-home-feature-link,
.gh-home-side-link,
.home-template .gh-card-link,
.gh-home-page .gh-card-link,
.gh-featured-gallery {
border-color: var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 94%, transparent);
box-shadow: var(--dg-shadow-soft);
}
.gh-home-feature-link {
border-width: 1px;
}
.gh-home-feature-image {
aspect-ratio: 16 / 9;
background: var(--dg-panel-strong);
}
.gh-home-feature-image::after,
.gh-home-side-image::after {
background: linear-gradient(180deg, transparent 48%, rgb(0 0 0 / 0.22));
}
.gh-home-feature-content {
padding: 34px;
}
.gh-home-feature-topline {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.gh-home-feature-title {
max-width: 15ch;
color: var(--dg-text);
font-size: var(--dg-feature-title-size);
font-weight: 810;
line-height: 1;
text-wrap: balance;
}
.gh-home-feature-excerpt {
max-width: 68ch;
color: var(--dg-muted);
font-size: 1.82rem;
}
.gh-card-tag {
color: var(--dg-accent);
}
.gh-home-feature-content .gh-card-tag,
.gh-home-side-content .gh-card-tag,
.gh-home-latest .gh-card-tag,
.home-template .gh-card-tag,
.gh-home-page .gh-card-tag {
color: var(--dg-accent);
font-size: 1.18rem;
font-weight: 820;
letter-spacing: 0.02em;
}
.gh-card-meta {
color: var(--dg-muted);
}
.gh-home-side {
gap: 14px;
}
.gh-home-side-header {
padding: 2px 2px 8px;
}
.gh-home-section-title {
margin-top: 8px;
color: var(--dg-text);
font-size: 2.8rem;
line-height: 1.05;
}
.gh-home-side-link {
gap: 14px;
padding: 12px;
box-shadow: none;
}
.gh-home-side-image {
border-radius: 6px;
background: var(--dg-panel-strong);
}
.gh-home-side-title {
color: var(--dg-text);
font-size: 2.05rem;
line-height: 1.12;
}
.gh-home-section-header {
display: flex;
gap: 20px;
align-items: end;
justify-content: space-between;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--dg-border);
}
.gh-container-title {
color: var(--dg-text);
font-size: 3.8rem;
line-height: 1.02;
letter-spacing: 0;
}
.gh-featured-galleries,
.gh-home-latest {
content-visibility: auto;
contain-intrinsic-size: auto 560px;
margin-top: 72px;
}
.gh-featured-galleries-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.gh-featured-gallery {
min-height: 112px;
padding: 14px;
box-shadow: none;
}
.gh-featured-gallery-image {
flex-basis: 62px;
width: 62px;
border-radius: 6px;
background: var(--dg-panel-strong);
}
.gh-featured-gallery-title {
color: var(--dg-text);
font-size: 1.82rem;
}
.gh-featured-gallery-count {
color: var(--dg-muted);
}
.gh-home-latest .gh-feed {
gap: 26px;
}
.home-template .gh-card,
.gh-home-page .gh-card {
min-width: 0;
}
.home-template .gh-card-link,
.gh-home-page .gh-card-link {
display: flex;
flex-direction: column;
gap: 0;
height: 100%;
overflow: hidden;
transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.home-template .gh-card-image,
.gh-home-page .gh-card-image {
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 0;
background: var(--dg-panel-strong);
box-shadow: none;
}
.home-template .gh-card-image img,
.gh-home-page .gh-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-template .gh-card-wrapper,
.gh-home-page .gh-card-wrapper {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.home-template .gh-card-title,
.gh-home-page .gh-card-title {
color: var(--dg-text);
font-size: 2.35rem;
line-height: 1.12;
letter-spacing: 0;
text-wrap: balance;
}
.home-template .gh-card-excerpt,
.gh-home-page .gh-card-excerpt {
color: var(--dg-muted);
font-size: 1.55rem;
line-height: 1.55;
}
.gh-card-cta {
display: inline-flex;
width: fit-content;
margin-top: auto;
padding-top: 18px;
color: var(--dg-accent);
font-size: 1.3rem;
font-weight: 780;
}
.gh-card-cta::after {
margin-left: 8px;
content: "\2192";
transition: transform 0.2s ease;
}
.gh-home-loadmore {
min-height: 48px;
border-radius: 999px;
background: var(--dg-text);
box-shadow: var(--dg-shadow-soft);
}
:root[data-theme="dark"] .gh-home-primary-cta {
color: #07100e;
}
:root[data-theme="dark"] .gh-home-secondary-link,
:root[data-theme="dark"] .gh-home-section-link {
background: color-mix(in srgb, var(--dg-surface) 78%, transparent);
}
:root[data-theme="dark"] .gh-navigation:not(.has-accent-color),
:root[data-theme="dark"] .gh-navigation:not(.has-accent-color) .gh-navigation-actions,
:root[data-theme="dark"] .gh-footer:not(.has-accent-color) {
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
border-color: var(--dg-border);
}
@media (hover: hover) {
.gh-home-primary-cta:hover,
.gh-home-secondary-link:hover,
.gh-home-section-link:hover {
opacity: 1;
transform: translateY(-1px);
}
.gh-home-feature-link:hover,
.gh-home-side-link:hover,
.home-template .gh-card-link:hover,
.gh-home-page .gh-card-link:hover,
.gh-featured-gallery:hover {
opacity: 1;
border-color: var(--dg-border-strong);
transform: translateY(-4px);
box-shadow: var(--dg-shadow-lift);
}
.home-template .gh-card-link:hover .gh-card-cta::after,
.gh-home-page .gh-card-link:hover .gh-card-cta::after {
transform: translateX(3px);
}
}
@media (prefers-reduced-motion: reduce) {
.gh-home-primary-cta,
.gh-home-secondary-link,
.gh-home-section-link,
.gh-home-feature-link,
.gh-home-side-link,
.gh-page-discovery,
.gh-page-tag-chip,
.gh-page-discovery-thumb,
.gh-page-discovery-image img,
.gh-page-discovery-thumb img,
.home-template .gh-card-link,
.gh-home-page .gh-card-link,
.gh-featured-gallery,
.gh-card-cta::after {
transition: none;
}
.gh-home-feature-link:hover,
.gh-home-side-link:hover,
.gh-page-tag-chip:hover,
.gh-page-discovery-thumb:hover,
.gh-page-discovery-main:hover img,
.gh-page-discovery-thumb:hover img,
.home-template .gh-card-link:hover,
.gh-home-page .gh-card-link:hover,
.gh-featured-gallery:hover {
transform: none;
}
}
@media (max-width: 1199px) {
:root {
--dg-home-title-size: 5.8rem;
--dg-feature-title-size: 4.35rem;
}
.gh-featured-galleries-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
:root {
--dg-home-title-size: 5rem;
--dg-feature-title-size: 3.8rem;
}
.gh-home-intro,
.gh-home-lead {
grid-template-columns: 1fr;
}
.gh-home-side {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gh-home-side-header {
grid-column: 1 / -1;
}
.gh-featured-galleries-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
:root {
--dg-home-title-size: 4.1rem;
--dg-feature-title-size: 3.25rem;
}
.gh-home-magazine {
padding-block: 34px 72px;
}
.gh-home-intro {
gap: 28px;
margin-bottom: 30px;
}
.gh-home-description {
font-size: 1.72rem;
}
.gh-home-side,
.gh-featured-galleries-grid,
.gh-home-latest .gh-feed {
grid-template-columns: 1fr;
}
.gh-home-metric {
min-height: auto;
}
.gh-home-feature-content,
.home-template .gh-card-wrapper,
.gh-home-page .gh-card-wrapper {
padding: 18px;
}
.gh-home-section-header {
align-items: flex-start;
flex-direction: column;
}
.gh-container-title {
font-size: 3.1rem;
}
.gh-featured-galleries,
.gh-home-latest {
margin-top: 52px;
}
}
.post-template {
background: var(--dg-bg);
}
.post-template .gh-main {
color: var(--dg-text);
background:
linear-gradient(180deg, var(--dg-panel) 0, var(--dg-bg) 520px),
var(--dg-bg);
}
.post-template .gh-article {
--container-width: 1320px;
--content-width: 740px;
}
.post-template .gh-article-header {
grid-template-columns: minmax(0, 0.96fr) minmax(340px, 0.82fr);
gap: clamp(34px, 5vw, 78px);
align-items: start;
margin-block: clamp(36px, 5vw, 74px) clamp(54px, 7vw, 92px);
padding: 0 0 clamp(42px, 5vw, 66px);
border-bottom-color: var(--dg-border);
}
.post-template .gh-article-header::before {
display: none;
}
.post-template .gh-article-headline {
padding-top: clamp(8px, 1vw, 18px);
}
.post-template .gh-article-tag {
margin-bottom: 20px;
padding: 8px 12px;
color: var(--dg-accent);
font-size: 1.12rem;
font-weight: 850;
letter-spacing: 0.08em;
border-color: color-mix(in srgb, var(--dg-accent) 28%, transparent);
background: color-mix(in srgb, var(--dg-accent) 8%, transparent);
}
.post-template .gh-article-title {
max-width: 680px;
color: var(--dg-text);
font-size: calc(clamp(4.2rem, 3.6vw + 1.7rem, 7rem) * var(--factor, 1));
font-weight: 830;
line-height: 1.02;
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
text-wrap: balance;
}
.post-template .gh-article-excerpt {
max-width: 700px;
color: var(--dg-muted);
font-size: clamp(1.82rem, 0.42vw + 1.62rem, 2.18rem);
line-height: 1.58;
}
.post-template .gh-meta-share {
max-width: 700px;
margin-top: clamp(26px, 3vw, 40px);
padding-top: 22px;
border-top-color: var(--dg-border);
}
.post-template .gh-article-author-image a {
width: 44px;
height: 44px;
border-color: var(--dg-bg);
}
.post-template .gh-article-author-name {
color: var(--dg-text);
}
.post-template .gh-article-meta-content {
color: var(--dg-muted);
font-size: 1.12rem;
}
.post-template .gh-button-share {
min-height: 42px;
padding: 0 18px;
color: var(--dg-text);
border: 1px solid var(--dg-border);
background: color-mix(in srgb, var(--dg-surface) 88%, transparent);
box-shadow: none;
}
.post-template .gh-button-share:hover {
border-color: var(--dg-border-strong);
box-shadow: var(--dg-shadow-soft);
}
.post-template .gh-article-visual {
display: grid;
grid-column: 2;
gap: 14px;
align-self: start;
}
.post-template .gh-article-visual .gh-article-image {
grid-column: auto;
grid-row: auto;
width: 100%;
margin: 0;
}
.post-template .gh-article-image img {
aspect-ratio: 4 / 5;
border-radius: var(--dg-card-radius);
box-shadow: var(--dg-shadow-lift);
}
.post-template .gh-article-image figcaption {
color: var(--dg-muted);
font-size: 1.2rem;
}
.post-template .gh-article-brief {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: hidden;
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
box-shadow: var(--dg-shadow-soft);
}
.post-template .gh-article-brief-item {
min-width: 0;
padding: 15px 16px;
border-left: 1px solid var(--dg-border);
}
.post-template .gh-article-brief-item:first-child {
border-left: 0;
}
.post-template .gh-article-brief-item span {
display: block;
color: var(--dg-accent);
font-size: 1rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.post-template .gh-article-brief-item :is(a, time, p) {
display: block;
margin-top: 8px;
color: var(--dg-text);
font-size: 1.32rem;
font-weight: 760;
line-height: 1.25;
}
.post-template .gh-article-brief-item a:hover {
color: var(--dg-accent);
opacity: 1;
}
.post-template .gh-content {
--content-font-size: 1.9rem;
--reading-scale: 1.08;
--content-spacing-factor: 1.1;
color: color-mix(in srgb, var(--dg-text) 86%, var(--dg-muted));
line-height: 1.82;
}
.post-template .gh-content > p:first-of-type {
color: var(--dg-text);
font-size: 1em;
line-height: 1.76;
}
.post-template .gh-content :is(h2, h3) {
color: var(--dg-text);
text-wrap: balance;
}
.post-template .gh-content h2 {
font-size: clamp(3rem, 1vw + 2.35rem, 4rem);
}
.post-template .gh-content h3 {
font-size: clamp(2.25rem, 0.5vw + 1.9rem, 2.85rem);
}
.post-template .gh-content a {
color: var(--dg-accent);
text-decoration-color: color-mix(in srgb, var(--dg-accent) 48%, transparent);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.16em;
}
.post-template .kg-image {
border-radius: var(--dg-card-radius);
box-shadow: var(--dg-shadow-soft);
}
.post-template figcaption {
color: var(--dg-muted);
}
.post-template figcaption::before {
background: color-mix(in srgb, var(--dg-accent) 52%, var(--dg-border));
}
.post-template blockquote:not([class]) {
color: var(--dg-text);
border-left-color: var(--dg-accent);
}
.post-template .gh-post-internal-links-inner,
.post-template .gh-post-nav-link {
border-color: var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
box-shadow: var(--dg-shadow-soft);
}
.post-template .gh-post-internal-links-kicker,
.post-template .gh-post-nav-label {
color: var(--dg-accent);
}
.post-template .gh-post-internal-links-title,
.post-template .gh-post-nav-title,
.post-template .gh-post-related .gh-container-title {
color: var(--dg-text);
}
.post-template .gh-post-internal-links-list a {
border-color: var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-bg) 72%, transparent);
}
.post-template .gh-post-internal-links-list a:hover {
border-color: color-mix(in srgb, var(--dg-accent) 34%, var(--dg-border));
background: color-mix(in srgb, var(--dg-accent) 7%, var(--dg-bg));
}
.post-template .gh-post-related {
margin-top: clamp(72px, 8vw, 112px);
}
.post-template .gh-post-related .gh-container-title {
border-bottom-color: var(--dg-border);
}
.post-template .gh-post-related .gh-card-link {
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
box-shadow: var(--dg-shadow-soft);
}
:root[data-theme="dark"] .post-template .gh-button-share,
:root[data-theme="dark"] .post-template .gh-article-brief,
:root[data-theme="dark"] .post-template .gh-post-internal-links-inner,
:root[data-theme="dark"] .post-template .gh-post-nav-link,
:root[data-theme="dark"] .post-template .gh-post-related .gh-card-link {
background: color-mix(in srgb, var(--dg-surface) 88%, transparent);
}
:root[data-theme="dark"] .post-template .gh-article-author-image a {
border-color: var(--dg-bg);
}
@media (hover: hover) {
.post-template .gh-post-related .gh-card-link:hover,
.post-template .gh-post-nav-link:hover {
opacity: 1;
border-color: var(--dg-border-strong);
transform: translateY(-3px);
box-shadow: var(--dg-shadow-lift);
}
}
@media (max-width: 991px) {
.post-template .gh-article-header {
grid-template-columns: minmax(0, 1fr);
margin-top: 38px;
}
.post-template .gh-article-visual {
grid-column: 1;
}
.post-template .gh-article-image img {
aspect-ratio: 16 / 10;
}
}
@media (max-width: 767px) {
.post-template .gh-article-header {
margin-top: 30px;
margin-bottom: 46px;
padding-bottom: 34px;
}
.post-template .gh-article-title {
font-size: calc(clamp(3.8rem, 12vw, 5.8rem) * var(--factor, 1));
}
.post-template .gh-article-brief {
grid-template-columns: 1fr;
}
.post-template .gh-article-brief-item,
.post-template .gh-article-brief-item:first-child {
border-top: 1px solid var(--dg-border);
border-left: 0;
}
.post-template .gh-article-brief-item:first-child {
border-top: 0;
}
.post-template .gh-content {
--content-font-size: 1.72rem;
--reading-scale: 1;
line-height: 1.74;
}
}
.page-template {
background: var(--dg-bg);
}
.page-template .gh-main {
color: var(--dg-text);
background:
linear-gradient(180deg, var(--dg-panel) 0, var(--dg-bg) 470px),
var(--dg-bg);
}
.page-template .gh-page {
--container-width: 1320px;
--content-width: 760px;
}
.page-template .gh-page-hero {
grid-template-columns:
[full-start] var(--full)
[wide-start] minmax(0, 1fr)
[visual-start] minmax(320px, 520px)
[wide-end] var(--full) [full-end];
gap: clamp(30px, 5vw, 74px);
align-items: end;
width: min(calc(100% - var(--container-gap) * 2), var(--container-width));
margin: clamp(38px, 5vw, 78px) auto clamp(46px, 6vw, 82px);
padding-bottom: clamp(34px, 5vw, 58px);
border-bottom: 1px solid var(--dg-border);
}
.page-template .gh-page-headline {
grid-column: wide-start / visual-start;
max-width: 790px;
}
.page-template .gh-page-visual {
display: grid;
grid-column: visual-start / wide-end;
gap: 14px;
}
.page-template .gh-page-kicker,
.page-template .gh-page-quick-kicker,
.page-template .gh-page-sidebar-kicker {
color: var(--dg-accent);
font-size: 1.12rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.page-template .gh-page-title {
max-width: 12ch;
margin-top: 18px;
color: var(--dg-text);
font-size: calc(clamp(4.8rem, 4.8vw + 1.8rem, 8.4rem) * var(--factor, 1));
font-weight: 830;
line-height: 0.96;
letter-spacing: 0;
text-wrap: balance;
}
.page-template .gh-page-excerpt {
max-width: 700px;
margin-top: 22px;
color: var(--dg-muted);
font-size: clamp(1.82rem, 0.42vw + 1.62rem, 2.2rem);
line-height: 1.58;
}
.page-template .gh-page-visual .gh-article-image {
width: 100%;
max-width: none;
margin: 0;
}
.page-template .gh-page-visual .gh-article-image img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--dg-card-radius);
box-shadow: var(--dg-shadow-lift);
}
.page-template .gh-page-visual .gh-article-image figcaption {
color: var(--dg-muted);
font-size: 1.2rem;
text-align: left;
}
.page-template .gh-page-quick,
.page-template .gh-page-sidebar {
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
box-shadow: var(--dg-shadow-soft);
}
.page-template .gh-page-quick {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
padding: 14px;
}
.page-template .gh-page-quick-kicker {
flex: 1 0 100%;
margin-bottom: 2px;
}
.page-template .gh-page-quick a,
.page-template .gh-page-sidebar-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 14px;
color: var(--dg-text);
font-size: 1.28rem;
font-weight: 760;
line-height: 1;
border: 1px solid var(--dg-border);
border-radius: 999px;
background: color-mix(in srgb, var(--dg-bg) 70%, transparent);
}
.page-template .gh-page-quick a:hover,
.page-template .gh-page-sidebar-actions a:hover {
opacity: 1;
color: var(--dg-accent);
border-color: color-mix(in srgb, var(--dg-accent) 36%, var(--dg-border));
}
.page-template .gh-page-body {
grid-template-columns:
[full-start] var(--full)
[wide-start] minmax(0, 1fr)
[main-start] minmax(0, 760px)
[main-end] clamp(24px, 4vw, 56px)
[side-start] minmax(260px, 340px)
[side-end] minmax(0, 1fr)
[wide-end] var(--full) [full-end];
align-items: start;
margin-bottom: clamp(66px, 8vw, 112px);
}
.page-template .gh-page-content {
grid-column: main;
min-width: 0;
color: color-mix(in srgb, var(--dg-text) 86%, var(--dg-muted));
font-size: 1.9rem;
line-height: 1.82;
}
.page-template .gh-page-content > p:first-of-type {
color: var(--dg-text);
font-size: 1em;
line-height: 1.76;
}
.page-template .gh-page-content :is(h2, h3) {
color: var(--dg-text);
text-wrap: balance;
}
.page-template .gh-page-content h2 {
font-size: clamp(3rem, 1vw + 2.35rem, 4rem);
}
.page-template .gh-page-content h3 {
font-size: clamp(2.25rem, 0.5vw + 1.9rem, 2.85rem);
}
.page-template .gh-page-sidebar {
position: sticky;
top: 126px;
grid-column: side;
min-width: 0;
padding: 22px;
}
.page-template .gh-page-sidebar-title {
margin-top: 10px;
color: var(--dg-text);
font-size: 2.35rem;
line-height: 1.08;
letter-spacing: 0;
}
.page-template .gh-page-sidebar-actions {
display: grid;
gap: 10px;
margin-top: 22px;
}
.page-template .gh-page-sidebar-actions a {
justify-content: flex-start;
min-height: 44px;
padding-inline: 16px;
}
.page-template .kg-image {
border-radius: var(--dg-card-radius);
box-shadow: var(--dg-shadow-soft);
}
.page-template blockquote:not([class]) {
color: var(--dg-text);
border-left-color: var(--dg-accent);
}
.page-template .gh-content a {
color: var(--dg-accent);
text-decoration-color: color-mix(in srgb, var(--dg-accent) 48%, transparent);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.16em;
}
.page-template .gh-article:not(.gh-page) .gh-article-header {
margin-block: clamp(40px, 3.64vw + 25.45px, 72px) 40px;
}
.page-template .gh-page > .gh-content:only-child > *:first-child:not(.kg-width-full),
.page-template .gh-page-body:first-child {
margin-top: clamp(42px, 6vw, 82px);
}
:root[data-theme="dark"] .page-template .gh-page-quick,
:root[data-theme="dark"] .page-template .gh-page-sidebar {
background: color-mix(in srgb, var(--dg-surface) 88%, transparent);
}
@media (hover: hover) {
.page-template .gh-page-sidebar:hover {
border-color: var(--dg-border-strong);
}
}
@media (max-width: 991px) {
.page-template .gh-page-hero,
.page-template .gh-page-body {
grid-template-columns:
[full-start] var(--full)
[wide-start] var(--wide)
[main-start] var(--main) [main-end]
var(--wide) [wide-end]
var(--full) [full-end];
}
.page-template .gh-page-headline,
.page-template .gh-page-visual,
.page-template .gh-page-content,
.page-template .gh-page-sidebar {
grid-column: main;
}
.page-template .gh-page-sidebar {
position: static;
margin-top: 34px;
}
}
@media (max-width: 767px) {
.page-template .gh-page-hero {
margin-top: 30px;
margin-bottom: 42px;
padding-bottom: 34px;
}
.page-template .gh-page-title {
font-size: calc(clamp(3.8rem, 12vw, 5.8rem) * var(--factor, 1));
}
.page-template .gh-page-excerpt,
.page-template .gh-page-content {
font-size: 1.72rem;
line-height: 1.74;
}
.page-template .gh-page-quick,
.page-template .gh-page-sidebar {
padding: 18px;
}
}
:root {
--dg-photo-radius: 8px;
--dg-photo-gap: clamp(8px, 1vw, 14px);
--dg-photo-frame: color-mix(in srgb, var(--dg-surface) 92%, transparent);
--dg-photo-caption: color-mix(in srgb, var(--dg-muted) 92%, var(--dg-text));
}
.post-template .gh-content :is(.kg-image-card, .kg-gallery-card),
.page-template .gh-content :is(.kg-image-card, .kg-gallery-card) {
position: relative;
}
.post-template .gh-content :is(.kg-image-card, .kg-gallery-card):not(.kg-width-full),
.page-template .gh-content :is(.kg-image-card, .kg-gallery-card):not(.kg-width-full) {
padding: clamp(8px, 1vw, 12px);
border: 1px solid var(--dg-border);
border-radius: calc(var(--dg-photo-radius) + 4px);
background: var(--dg-photo-frame);
box-shadow: var(--dg-shadow-soft);
}
.post-template .gh-content :is(.kg-image-card, .kg-gallery-card).kg-width-wide,
.page-template .gh-content :is(.kg-image-card, .kg-gallery-card).kg-width-wide {
padding: clamp(10px, 1.2vw, 16px);
}
.post-template .gh-content :is(.kg-image-card, .kg-gallery-card).kg-width-full,
.page-template .gh-content :is(.kg-image-card, .kg-gallery-card).kg-width-full {
margin-top: clamp(72px, 8vw, 112px);
margin-bottom: clamp(72px, 8vw, 112px);
}
.post-template .gh-content .kg-image,
.page-template .gh-content .kg-image,
.post-template .gh-content .kg-gallery-image img,
.page-template .gh-content .kg-gallery-image img {
width: 100%;
border-radius: var(--dg-photo-radius);
}
.post-template .gh-content .kg-image-card:not(.kg-width-full) .kg-image,
.page-template .gh-content .kg-image-card:not(.kg-width-full) .kg-image,
.post-template .gh-content .kg-gallery-card:not(.kg-width-full) .kg-gallery-image img,
.page-template .gh-content .kg-gallery-card:not(.kg-width-full) .kg-gallery-image img {
box-shadow: none;
}
.post-template .gh-content .kg-image-card.kg-width-full .kg-image,
.page-template .gh-content .kg-image-card.kg-width-full .kg-image,
.post-template .gh-content .kg-gallery-card.kg-width-full .kg-gallery-image img,
.page-template .gh-content .kg-gallery-card.kg-width-full .kg-gallery-image img {
border-radius: 0;
}
.post-template .gh-content .kg-gallery-container,
.page-template .gh-content .kg-gallery-container {
display: flex;
flex-direction: column;
gap: var(--dg-photo-gap);
}
.post-template .gh-content .kg-gallery-row,
.page-template .gh-content .kg-gallery-row {
display: flex;
gap: var(--dg-photo-gap);
}
.post-template .gh-content .kg-gallery-image,
.page-template .gh-content .kg-gallery-image {
position: relative;
flex: 1 1 0;
min-width: 0;
overflow: hidden;
border-radius: var(--dg-photo-radius);
background: var(--dg-panel-strong);
}
.post-template .gh-content .kg-gallery-image a,
.page-template .gh-content .kg-gallery-image a {
display: block;
height: 100%;
}
.post-template .gh-content .kg-gallery-image img,
.page-template .gh-content .kg-gallery-image img {
height: 100%;
object-fit: cover;
}
.post-template .gh-content .kg-image-card a,
.page-template .gh-content .kg-image-card a,
.post-template .gh-content .kg-gallery-image a,
.page-template .gh-content .kg-gallery-image a {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--dg-photo-radius);
}
.post-template .gh-content .kg-image-card a::after,
.page-template .gh-content .kg-image-card a::after,
.post-template .gh-content .kg-gallery-image a::after,
.page-template .gh-content .kg-gallery-image a::after {
position: absolute;
inset: 0;
content: "";
background:
linear-gradient(180deg, transparent 52%, rgb(0 0 0 / 0.24)),
radial-gradient(circle at 50% 50%, transparent 54%, rgb(0 0 0 / 0.12));
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.post-template .gh-content :is(.kg-image-card, .kg-gallery-image) img,
.page-template .gh-content :is(.kg-image-card, .kg-gallery-image) img {
transition:
transform 0.72s cubic-bezier(0.2, 0.7, 0.2, 1),
filter 0.45s ease,
box-shadow 0.35s ease;
}
@media (hover: hover) {
.post-template .gh-content :is(.kg-image-card, .kg-gallery-image) a:hover img,
.page-template .gh-content :is(.kg-image-card, .kg-gallery-image) a:hover img,
.post-template .gh-content .kg-image-card:not(:has(a)):hover img,
.page-template .gh-content .kg-image-card:not(:has(a)):hover img {
filter: contrast(1.04) saturate(1.04);
transform: scale(1.025);
}
.post-template .gh-content :is(.kg-image-card, .kg-gallery-image) a:hover::after,
.page-template .gh-content :is(.kg-image-card, .kg-gallery-image) a:hover::after {
opacity: 1;
}
}
.post-template figcaption,
.page-template figcaption {
max-width: 760px;
margin: 14px auto 0;
padding-inline: 8px;
color: var(--dg-photo-caption);
font-size: 1.28rem;
font-weight: 650;
line-height: 1.5;
letter-spacing: 0;
text-align: center;
}
.post-template .kg-width-full figcaption,
.page-template .kg-width-full figcaption {
max-width: min(760px, calc(100% - var(--container-gap) * 2));
}
.post-template figcaption::before,
.page-template figcaption::before {
display: block;
width: 42px;
height: 1px;
margin: 0 auto 10px;
content: "";
background: color-mix(in srgb, var(--dg-accent) 54%, var(--dg-border));
}
.post-template figcaption a,
.page-template figcaption a {
color: var(--dg-accent);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.16em;
}
.post-template .gh-article-image img,
.page-template .gh-page-visual .gh-article-image img,
.home-template :is(.gh-home-feature-image, .gh-home-side-image, .gh-card-image, .gh-featured-gallery-image) img,
.gh-home-page :is(.gh-home-feature-image, .gh-home-side-image, .gh-card-image, .gh-featured-gallery-image) img,
.tag-template .gh-card-image img,
.author-template .gh-card-image img {
image-rendering: auto;
}
:root[data-theme="dark"] {
--dg-photo-frame: color-mix(in srgb, var(--dg-surface) 88%, transparent);
--dg-photo-caption: color-mix(in srgb, var(--dg-muted) 86%, #ffffff);
}
:root[data-theme="dark"] .post-template .gh-content :is(.kg-image-card, .kg-gallery-card):not(.kg-width-full),
:root[data-theme="dark"] .page-template .gh-content :is(.kg-image-card, .kg-gallery-card):not(.kg-width-full) {
box-shadow: 0 22px 72px rgb(0 0 0 / 0.24);
}
@media (prefers-reduced-motion: reduce) {
.post-template .gh-content :is(.kg-image-card, .kg-gallery-image) img,
.page-template .gh-content :is(.kg-image-card, .kg-gallery-image) img,
.post-template .gh-content .kg-image-card a::after,
.page-template .gh-content .kg-image-card a::after,
.post-template .gh-content .kg-gallery-image a::after,
.page-template .gh-content .kg-gallery-image a::after {
transition: none;
}
.post-template .gh-content :is(.kg-image-card, .kg-gallery-image) a:hover img,
.page-template .gh-content :is(.kg-image-card, .kg-gallery-image) a:hover img {
transform: none;
}
}
@media (max-width: 767px) {
:root {
--dg-photo-gap: 8px;
}
.post-template .gh-content :is(.kg-image-card, .kg-gallery-card):not(.kg-width-full),
.page-template .gh-content :is(.kg-image-card, .kg-gallery-card):not(.kg-width-full) {
padding: 8px;
}
.post-template figcaption,
.page-template figcaption {
font-size: 1.2rem;
text-align: left;
}
.post-template figcaption::before,
.page-template figcaption::before {
margin-inline: 0;
}
}
.pswp__bg {
background:
radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.035), transparent 42%),
#070808;
}
.pswp__top-bar,
.pswp__caption {
background: linear-gradient(180deg, rgb(7 8 8 / 0.86), rgb(7 8 8 / 0));
}
.pswp__caption {
background: linear-gradient(0deg, rgb(7 8 8 / 0.88), rgb(7 8 8 / 0));
}
.pswp__counter {
height: auto;
min-width: 64px;
margin: 12px 0 0 12px;
padding: 8px 12px;
color: rgb(244 245 239 / 0.78);
font-size: 1.2rem;
font-weight: 760;
line-height: 1;
letter-spacing: 0.04em;
border: 1px solid rgb(244 245 239 / 0.14);
border-radius: 999px;
background: rgb(20 23 25 / 0.68);
backdrop-filter: blur(14px);
}
.pswp__button {
opacity: 0.76;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.pswp__button:hover {
opacity: 1;
transform: translateY(-1px);
}
.pswp__button--arrow--left,
.pswp__button--arrow--right {
width: 72px;
}
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
border: 1px solid rgb(244 245 239 / 0.16);
border-radius: 50%;
background-color: rgb(20 23 25 / 0.62);
backdrop-filter: blur(14px);
}
.pswp__caption__center {
max-width: min(760px, calc(100vw - 48px));
padding: 18px 24px 24px;
color: rgb(244 245 239 / 0.78);
font-size: 1.28rem;
font-weight: 620;
line-height: 1.5;
text-align: center;
}
.post-template .gh-article-header {
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.48fr);
}
.post-template .gh-article-visual {
justify-self: end;
width: 100%;
max-width: 360px;
}
.post-template .gh-article-image img {
max-height: 460px;
object-fit: cover;
}
.post-template .gh-content .kg-gallery-image.is-portrait,
.page-template .gh-content .kg-gallery-image.is-portrait {
flex-grow: 0.7;
}
.post-template .gh-content .kg-gallery-row .kg-gallery-image.is-portrait:only-child,
.page-template .gh-content .kg-gallery-row .kg-gallery-image.is-portrait:only-child {
width: 70%;
max-width: 70%;
margin-inline: auto;
}
.post-template .gh-content .kg-gallery-image.is-portrait img,
.page-template .gh-content .kg-gallery-image.is-portrait img {
max-height: min(70vh, 760px);
object-fit: contain;
background: var(--dg-panel-strong);
}
.post-template .gh-content .kg-gallery-card.kg-width-full .kg-gallery-image.is-portrait,
.page-template .gh-content .kg-gallery-card.kg-width-full .kg-gallery-image.is-portrait {
max-width: 70%;
margin-inline: auto;
}
@media (max-width: 991px) {
.post-template .gh-article-visual {
justify-self: center;
max-width: 420px;
}
}
@media (max-width: 767px) {
.post-template .gh-article-visual {
max-width: 340px;
}
.post-template .gh-article-image img {
max-height: 430px;
}
.post-template .gh-content .kg-gallery-row .kg-gallery-image.is-portrait:only-child,
.page-template .gh-content .kg-gallery-row .kg-gallery-image.is-portrait:only-child,
.post-template .gh-content .kg-gallery-card.kg-width-full .kg-gallery-image.is-portrait,
.page-template .gh-content .kg-gallery-card.kg-width-full .kg-gallery-image.is-portrait {
width: 82%;
max-width: 82%;
}
}
.tag-template {
background: var(--dg-bg);
}
.tag-template .gh-main {
color: var(--dg-text);
background:
linear-gradient(180deg, var(--dg-panel) 0, var(--dg-bg) 520px),
var(--dg-bg);
}
.gh-main.gh-tag-channel {
color: var(--dg-text);
background:
linear-gradient(180deg, var(--dg-panel) 0, var(--dg-bg) 520px),
var(--dg-bg);
}
.tag-template .gh-tag-hero {
min-height: 0;
padding-block: clamp(42px, 6vw, 84px) clamp(34px, 5vw, 62px);
color: var(--dg-text);
background: transparent;
}
.tag-template .gh-tag-hero.has-image {
color: var(--dg-text);
background: transparent;
}
.tag-template .gh-tag-hero:not(.has-image) {
color: var(--dg-text);
background: transparent;
}
.tag-template .gh-tag-hero-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
gap: clamp(30px, 5vw, 76px);
align-items: end;
min-height: 0;
padding-block: 0;
}
.tag-template .gh-tag-hero-copy {
max-width: 800px;
}
.tag-template .gh-tag-hero-kicker,
.tag-template .gh-tag-feed-kicker {
color: var(--dg-accent);
font-size: 1.12rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tag-template .gh-tag-hero.has-image .gh-tag-hero-kicker {
color: var(--dg-accent);
}
.tag-template .gh-tag-hero-title {
max-width: 11ch;
margin-top: 18px;
color: var(--dg-text);
font-size: calc(clamp(4.8rem, 4.8vw + 1.8rem, 8.4rem) * var(--factor, 1));
font-weight: 830;
line-height: 0.96;
letter-spacing: 0;
text-wrap: balance;
}
.tag-template .gh-tag-hero-description,
.tag-template .gh-tag-hero:not(.has-image) .gh-tag-hero-description {
max-width: 680px;
margin-top: 22px;
color: var(--dg-muted);
font-size: clamp(1.82rem, 0.42vw + 1.62rem, 2.2rem);
line-height: 1.58;
}
.tag-template .gh-tag-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: 30px;
}
.tag-template .gh-tag-hero-actions span,
.tag-template .gh-tag-hero-actions a,
.tag-template .gh-tag-feed-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 16px;
color: var(--dg-text);
font-size: 1.28rem;
font-weight: 760;
line-height: 1;
border: 1px solid var(--dg-border);
border-radius: 999px;
background: color-mix(in srgb, var(--dg-surface) 84%, transparent);
}
.tag-template .gh-tag-hero-actions span {
color: var(--dg-muted);
}
.tag-template .gh-tag-hero-actions a,
.tag-template .gh-tag-feed-link {
color: #ffffff;
border-color: transparent;
background: linear-gradient(135deg, var(--dg-accent), color-mix(in srgb, var(--dg-accent) 70%, var(--dg-warm)));
}
.tag-template .gh-tag-hero-panel {
display: grid;
gap: 14px;
min-width: 0;
}
.tag-template .gh-tag-hero-media {
position: relative;
inset: auto;
overflow: hidden;
aspect-ratio: 4 / 3;
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: var(--dg-panel-strong);
box-shadow: var(--dg-shadow-lift);
}
.tag-template .gh-tag-hero-media::after {
position: absolute;
inset: 0;
content: "";
background:
linear-gradient(180deg, transparent 56%, rgb(0 0 0 / 0.22)),
radial-gradient(circle at 50% 50%, transparent 58%, rgb(0 0 0 / 0.12));
opacity: 0.82;
}
.tag-template .gh-tag-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
transform: none;
transition: transform 0.75s ease, filter 0.45s ease;
}
.tag-template .gh-tag-hero-placeholder {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
color: color-mix(in srgb, var(--dg-accent) 46%, var(--dg-muted));
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background:
radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--dg-accent) 12%, transparent), transparent 34%),
var(--dg-panel-strong);
box-shadow: var(--dg-shadow-soft);
}
.tag-template .gh-tag-hero-placeholder span {
font-size: clamp(7rem, 10vw, 12rem);
font-weight: 820;
line-height: 1;
}
.tag-template .gh-tag-hero-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: hidden;
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
box-shadow: var(--dg-shadow-soft);
}
.tag-template .gh-tag-hero-meta div {
min-width: 0;
padding: 16px;
border-left: 1px solid var(--dg-border);
}
.tag-template .gh-tag-hero-meta div:first-child {
border-left: 0;
}
.tag-template .gh-tag-hero-meta span {
display: block;
color: var(--dg-accent);
font-size: 1rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tag-template .gh-tag-hero-meta strong {
display: block;
margin-top: 8px;
overflow: hidden;
color: var(--dg-text);
font-size: 1.32rem;
font-weight: 760;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.tag-template .gh-tag-feed {
padding-block: clamp(44px, 6vw, 82px) clamp(78px, 9vw, 124px);
}
.tag-template .gh-tag-feed-header {
border-bottom-color: var(--dg-border);
}
.tag-template .gh-tag-feed-title {
color: var(--dg-text);
}
.tag-template .gh-tag-feed .gh-feed {
gap: clamp(22px, 2.6vw, 34px);
}
.tag-template .gh-tag-feed .gh-card-link {
display: flex;
flex-direction: column;
gap: 0;
height: 100%;
overflow: hidden;
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
box-shadow: var(--dg-shadow-soft);
transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.tag-template .gh-tag-feed .gh-card-image {
aspect-ratio: 16 / 10;
border-radius: 0;
background: var(--dg-panel-strong);
box-shadow: none;
}
.tag-template .gh-tag-feed .gh-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.72s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease;
}
.tag-template .gh-tag-feed .gh-card-wrapper {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.tag-template .gh-tag-feed .gh-card-tag {
color: var(--dg-accent);
}
.tag-template .gh-tag-feed .gh-card-title {
color: var(--dg-text);
font-size: clamp(2.1rem, 0.56vw + 1.85rem, 2.8rem);
line-height: 1.12;
text-wrap: balance;
}
.tag-template .gh-tag-feed .gh-card-excerpt {
color: var(--dg-muted);
}
.tag-template .gh-tag-feed .gh-card-meta {
color: var(--dg-muted);
}
:root[data-theme="dark"] .tag-template .gh-tag-hero-actions a,
:root[data-theme="dark"] .tag-template .gh-tag-feed-link {
color: #07100e;
}
:root[data-theme="dark"] .tag-template .gh-tag-hero-meta,
:root[data-theme="dark"] .tag-template .gh-tag-feed .gh-card-link {
background: color-mix(in srgb, var(--dg-surface) 88%, transparent);
}
@media (hover: hover) {
.tag-template .gh-tag-hero-actions a:hover,
.tag-template .gh-tag-feed-link:hover {
opacity: 1;
transform: translateY(-1px);
}
.tag-template .gh-tag-hero-media:hover img {
filter: contrast(1.04) saturate(1.04);
transform: scale(1.025);
}
.tag-template .gh-tag-feed .gh-card-link:hover {
opacity: 1;
border-color: var(--dg-border-strong);
transform: translateY(-4px);
box-shadow: var(--dg-shadow-lift);
}
.tag-template .gh-tag-feed .gh-card-link:hover .gh-card-image img {
filter: contrast(1.04) saturate(1.04);
transform: scale(1.035);
}
}
@media (max-width: 991px) {
.tag-template .gh-tag-hero-inner {
grid-template-columns: 1fr;
}
.tag-template .gh-tag-hero-panel {
max-width: 620px;
}
}
@media (max-width: 767px) {
.tag-template .gh-tag-hero {
padding-block: 30px 40px;
}
.tag-template .gh-tag-hero-inner {
gap: 24px;
}
.tag-template .gh-tag-hero-copy {
max-width: none;
}
.tag-template .gh-tag-hero-title {
max-width: none;
font-size: calc(clamp(3.2rem, 10vw, 4.6rem) * var(--factor, 1));
line-height: 1.02;
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
text-wrap: balance;
}
.tag-template .gh-tag-hero-description {
max-width: none;
font-size: 1.72rem;
line-height: 1.58;
}
.tag-template .gh-tag-hero-actions {
margin-top: 22px;
}
.tag-template .gh-tag-hero-panel {
max-width: none;
width: 100%;
}
.tag-template .gh-tag-hero-media,
.tag-template .gh-tag-hero-placeholder {
aspect-ratio: 16 / 10;
}
.tag-template .gh-tag-hero-meta,
.tag-template .gh-tag-feed .gh-feed {
grid-template-columns: 1fr;
}
.tag-template .gh-tag-hero-meta div,
.tag-template .gh-tag-hero-meta div:first-child {
border-top: 1px solid var(--dg-border);
border-left: 0;
}
.tag-template .gh-tag-hero-meta div:first-child {
border-top: 0;
}
.tag-template .gh-tag-feed-header {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 767px) {
.post-template .gh-article-header,
.page-template .gh-page-hero,
.tag-template .gh-tag-hero {
width: calc(100% - 36px) !important;
max-width: none !important;
margin-top: 0 !important;
margin-inline: auto !important;
padding-top: 24px !important;
}
.post-template .gh-article-header,
.page-template .gh-page-hero {
display: block !important;
padding-bottom: 30px !important;
}
.tag-template .gh-tag-hero {
width: 100% !important;
}
.tag-template .gh-tag-hero-inner {
display: block !important;
width: calc(100% - 36px) !important;
max-width: none !important;
margin-inline: auto !important;
}
.post-template .gh-article-header > *,
.page-template .gh-page-hero > *,
.tag-template .gh-tag-hero-inner > * {
grid-column: auto !important;
grid-row: auto !important;
min-width: 0 !important;
}
.post-template .gh-article-headline,
.page-template .gh-page-headline,
.tag-template .gh-tag-hero-copy {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.post-template .gh-article-title,
.page-template .gh-page-title,
.tag-template .gh-tag-hero-title {
display: block !important;
width: 100% !important;
max-width: none !important;
font-size: clamp(2.85rem, 8.2vw, 3.85rem) !important;
line-height: 1.12 !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: manual !important;
text-wrap: auto !important;
}
.post-template .gh-article-visual,
.page-template .gh-page-visual,
.tag-template .gh-tag-hero-panel {
width: 100% !important;
max-width: 340px !important;
margin: 24px auto 0 !important;
justify-self: center !important;
}
.post-template .gh-article-excerpt,
.page-template .gh-page-excerpt,
.tag-template .gh-tag-hero-description {
max-width: none !important;
font-size: 1.5rem !important;
line-height: 1.58 !important;
}
.post-template .gh-meta-share,
.tag-template .gh-tag-hero-actions {
margin-top: 18px !important;
}
}
@media (max-width: 390px) {
.post-template .gh-article-title,
.page-template .gh-page-title,
.tag-template .gh-tag-hero-title {
font-size: clamp(2.55rem, 7.8vw, 3.2rem) !important;
}
.post-template .gh-article-header,
.page-template .gh-page-hero,
.tag-template .gh-tag-hero-inner {
width: calc(100% - 30px) !important;
}
}
.gh-timeline {
color: var(--dg-text);
background:
linear-gradient(180deg, var(--dg-panel) 0, var(--dg-bg) 520px),
var(--dg-bg);
}
.gh-timeline-inner {
max-width: 1180px;
padding-block: clamp(48px, 7vw, 96px) clamp(76px, 9vw, 132px);
}
.gh-timeline-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
gap: clamp(28px, 5vw, 76px);
align-items: end;
padding-bottom: clamp(30px, 5vw, 54px);
border-bottom: 1px solid var(--dg-border);
}
.gh-timeline-kicker,
.gh-timeline-index-kicker {
margin: 0 0 14px;
color: var(--dg-accent);
font-size: 1.15rem;
font-weight: 820;
line-height: 1;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.gh-timeline-title {
max-width: 780px;
color: var(--dg-text);
font-size: calc(clamp(4.4rem, 4.8vw + 1.8rem, 8.4rem) * var(--factor, 1));
font-weight: 760;
line-height: 0.98;
letter-spacing: 0;
text-wrap: balance;
}
.gh-timeline-description {
max-width: 660px;
margin-top: 22px;
color: var(--dg-muted);
font-size: clamp(1.75rem, 0.42vw + 1.55rem, 2.15rem);
line-height: 1.58;
}
.gh-timeline-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: hidden;
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 90%, transparent);
box-shadow: var(--dg-shadow-soft);
}
.gh-timeline-summary div {
padding: 22px;
}
.gh-timeline-summary div + div {
border-left: 1px solid var(--dg-border);
}
.gh-timeline-summary span {
display: block;
color: var(--dg-text);
font-size: clamp(2.6rem, 2.4vw, 4.1rem);
font-weight: 790;
line-height: 1;
}
.gh-timeline-summary p {
margin-top: 8px;
color: var(--dg-muted);
font-size: 1.18rem;
font-weight: 760;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gh-timeline-layout {
display: grid;
grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
gap: clamp(34px, 5vw, 78px);
margin-top: clamp(42px, 6vw, 76px);
}
.gh-timeline-index {
position: sticky;
top: 116px;
align-self: start;
padding: 20px;
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 86%, transparent);
box-shadow: var(--dg-shadow-soft);
}
.gh-timeline-years {
display: grid;
gap: 4px;
}
.gh-timeline-years a {
display: flex;
gap: 12px;
align-items: baseline;
justify-content: space-between;
padding: 10px 0;
color: var(--dg-text);
border-bottom: 1px solid var(--dg-border);
}
.gh-timeline-years a:last-child {
border-bottom: 0;
}
.gh-timeline-years span {
font-size: 1.55rem;
font-weight: 780;
}
.gh-timeline-years small {
color: var(--dg-muted);
font-size: 1.14rem;
font-weight: 700;
white-space: nowrap;
}
.gh-timeline-timeline {
min-width: 0;
}
.gh-timeline-source {
display: grid;
gap: 14px;
}
.gh-timeline-year {
position: relative;
padding-left: clamp(24px, 3vw, 42px);
}
.gh-timeline-year + .gh-timeline-year {
margin-top: clamp(52px, 7vw, 88px);
}
.gh-timeline-year::before {
position: absolute;
top: 14px;
bottom: 0;
left: 6px;
width: 1px;
content: "";
background: var(--dg-border);
}
.gh-timeline-year::after {
position: absolute;
top: 8px;
left: 0;
width: 13px;
height: 13px;
content: "";
border: 3px solid var(--dg-bg);
border-radius: 50%;
background: var(--dg-accent);
box-shadow: 0 0 0 1px var(--dg-border-strong);
}
.gh-timeline-year-header {
display: flex;
gap: 16px;
align-items: baseline;
justify-content: space-between;
margin-bottom: 26px;
}
.gh-timeline-year-header h2 {
color: var(--dg-text);
font-size: calc(clamp(4rem, 5.4vw, 8.2rem) * var(--factor, 1));
font-weight: 760;
line-height: 0.9;
letter-spacing: 0;
}
.gh-timeline-year-header span,
.gh-timeline-month-header span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 12px;
color: var(--dg-muted);
font-size: 1.18rem;
font-weight: 760;
line-height: 1;
white-space: nowrap;
border: 1px solid var(--dg-border);
border-radius: 999px;
background: color-mix(in srgb, var(--dg-surface) 88%, transparent);
}
.gh-timeline-month + .gh-timeline-month {
margin-top: 34px;
}
.gh-timeline-month-header {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--dg-border);
}
.gh-timeline-month-header h3 {
color: var(--dg-text);
font-size: clamp(2.1rem, 0.8vw + 1.7rem, 2.9rem);
font-weight: 740;
line-height: 1.1;
letter-spacing: 0;
}
.gh-timeline-posts {
display: grid;
gap: 12px;
}
.gh-timeline-post-link {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 72px;
gap: clamp(16px, 2.2vw, 28px);
align-items: center;
padding: 18px;
color: var(--dg-text);
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
box-shadow: var(--dg-shadow-soft);
}
.gh-timeline-post.no-image .gh-timeline-post-link,
.gh-timeline-post:not(:has(.gh-timeline-post-image)) .gh-timeline-post-link {
grid-template-columns: 64px minmax(0, 1fr);
}
.gh-timeline-post-date {
display: grid;
justify-items: center;
align-content: center;
width: 58px;
min-height: 58px;
color: var(--dg-text);
border: 1px solid var(--dg-border);
border-radius: 50%;
background: var(--dg-bg);
}
.gh-timeline-post-date span {
font-size: 2rem;
font-weight: 790;
line-height: 1;
}
.gh-timeline-post-date small {
margin-top: 4px;
color: var(--dg-muted);
font-size: 1rem;
font-weight: 760;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.gh-timeline-post-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
color: var(--dg-muted);
font-size: 1.14rem;
font-weight: 760;
line-height: 1.2;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.gh-timeline-post-title {
color: var(--dg-text);
font-size: clamp(2rem, 0.55vw + 1.72rem, 2.55rem);
font-weight: 740;
line-height: 1.15;
letter-spacing: 0;
}
.gh-timeline-post-excerpt {
margin-top: 8px;
color: var(--dg-muted);
font-size: 1.42rem;
line-height: 1.5;
}
.gh-timeline-post-image {
overflow: hidden;
width: 72px;
aspect-ratio: 1;
border-radius: 12px;
background: var(--dg-panel-strong);
}
.gh-timeline-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(1.03) saturate(1.02);
transition: transform 0.5s ease, filter 0.3s ease;
}
.gh-timeline-empty {
margin-top: 34px;
color: var(--dg-muted);
font-size: 1.7rem;
}
.gh-timeline-more {
display: grid;
justify-items: center;
gap: 14px;
margin-top: clamp(34px, 5vw, 56px);
padding-top: 28px;
border-top: 1px solid var(--dg-border);
}
.gh-timeline-more[hidden],
.gh-timeline-load[hidden] {
display: none !important;
}
.gh-timeline-load {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 22px;
color: var(--dg-text);
font-size: 1.34rem;
font-weight: 780;
line-height: 1;
cursor: pointer;
border: 1px solid var(--dg-border);
border-radius: 999px;
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
}
.gh-timeline-load.is-loading {
pointer-events: none;
opacity: 0.68;
}
.gh-timeline-load.is-loading span::after {
content: "...";
}
.gh-timeline-more p {
max-width: 560px;
margin: 0;
color: var(--dg-muted);
font-size: 1.32rem;
font-weight: 620;
line-height: 1.45;
text-align: center;
}
@media (hover: hover) {
.gh-timeline-years a:hover,
.gh-timeline-post-link:hover {
opacity: 1;
}
.gh-timeline-post-link:hover {
border-color: var(--dg-border-strong);
transform: translateY(-2px);
box-shadow: var(--dg-shadow-lift);
}
.gh-timeline-post-link:hover img {
filter: contrast(1.06) saturate(1.05);
transform: scale(1.045);
}
.gh-timeline-load:hover {
opacity: 1;
border-color: var(--dg-border-strong);
transform: translateY(-1px);
}
}
@media (max-width: 991px) {
.gh-timeline-hero,
.gh-timeline-layout {
grid-template-columns: 1fr;
}
.gh-timeline-index {
position: static;
}
.gh-timeline-years {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px 18px;
}
.gh-timeline-years a {
border-bottom: 0;
}
}
@media (max-width: 767px) {
.gh-timeline-inner {
padding-block: 36px 72px;
}
.gh-timeline-title {
font-size: calc(clamp(3.3rem, 10vw, 5rem) * var(--factor, 1));
line-height: 1.04;
}
.gh-timeline-summary {
grid-template-columns: 1fr 1fr;
}
.gh-timeline-summary div {
padding: 18px;
}
.gh-timeline-index {
padding: 16px;
}
.gh-timeline-year {
padding-left: 22px;
}
.gh-timeline-year-header {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.gh-timeline-year-header h2 {
font-size: calc(clamp(3.4rem, 12vw, 5.8rem) * var(--factor, 1));
}
.gh-timeline-post-link,
.gh-timeline-post.no-image .gh-timeline-post-link,
.gh-timeline-post:not(:has(.gh-timeline-post-image)) .gh-timeline-post-link {
grid-template-columns: 52px minmax(0, 1fr);
padding: 16px;
}
.gh-timeline-post-image {
display: none;
}
.gh-timeline-post-date {
width: 50px;
min-height: 50px;
}
.gh-timeline-post-date span {
font-size: 1.7rem;
}
}
.page-template .gh-page-visual {
gap: 0;
}
.page-template .gh-page-body {
grid-template-columns:
[full-start] var(--full)
[wide-start] minmax(0, 1fr)
[main-start] minmax(0, 820px) [main-end]
minmax(0, 1fr)
[wide-end] var(--full) [full-end];
}
.page-template .gh-page-content {
grid-column: main;
max-width: 820px;
}
.post-template .gh-post-related .gh-feed {
align-items: stretch;
gap: clamp(20px, 2.4vw, 30px);
}
.post-template .gh-post-related .gh-card {
display: flex;
min-width: 0;
height: 100%;
}
.post-template .gh-post-related .gh-card-link {
display: flex;
flex: 1;
flex-direction: column;
gap: 0;
height: 100%;
overflow: hidden;
transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.post-template .gh-post-related .gh-card-image {
margin: 0;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 0;
background: var(--dg-panel-strong);
box-shadow: none;
}
.post-template .gh-post-related .gh-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.72s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease;
}
.post-template .gh-post-related .gh-card-wrapper {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
padding: clamp(18px, 1.8vw, 22px);
}
.post-template .gh-post-related .gh-card-title {
color: var(--dg-text);
font-size: clamp(1.85rem, 0.42vw + 1.62rem, 2.25rem);
line-height: 1.16;
letter-spacing: 0;
text-wrap: balance;
}
.post-template .gh-post-related .gh-card-excerpt {
margin-top: 10px;
color: var(--dg-muted);
font-size: 1.44rem;
line-height: 1.52;
}
.post-template .gh-post-related .gh-card-meta {
margin-top: 14px;
color: var(--dg-muted);
font-size: 1.17rem;
line-height: 1.35;
}
.post-template .gh-post-related .gh-card-cta {
margin-top: auto;
padding-top: 18px;
}
.gh-tags-page {
padding-block: clamp(48px, 6vw, 86px) clamp(76px, 9vw, 124px);
background:
linear-gradient(180deg, var(--dg-panel) 0, var(--dg-bg) 460px),
var(--dg-bg);
}
.gh-tags-page-header {
display: block;
max-width: 920px;
margin-bottom: clamp(36px, 5vw, 62px);
}
.gh-tags-page-title {
max-width: 820px;
color: var(--dg-text);
font-size: calc(clamp(4.8rem, 5.2vw, 7.8rem) * var(--factor, 1));
line-height: 0.98;
}
.gh-tags-grid {
align-items: stretch;
gap: clamp(20px, 2.4vw, 30px);
}
.gh-tags-page .gh-tag-card,
.gh-tags-page .gh-tag-card:nth-child(6n + 1),
.gh-tags-page .gh-tag-card:nth-child(6n + 4) {
display: flex !important;
flex-direction: column;
min-height: 0;
overflow: hidden;
color: var(--dg-text);
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 94%, transparent);
box-shadow: var(--dg-shadow-soft);
transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.gh-tags-page .gh-tag-card-image {
position: relative;
inset: auto;
flex-shrink: 0;
width: 100%;
margin: 0;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: 0;
background: var(--dg-panel-strong);
}
.gh-tags-page .gh-tag-card-image::after {
display: none;
}
.gh-tags-page .gh-tag-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.72s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease;
}
.gh-tags-page .gh-tag-card-image span {
color: color-mix(in srgb, var(--dg-accent) 42%, var(--dg-muted));
background:
radial-gradient(circle at 24% 12%, color-mix(in srgb, var(--dg-accent) 14%, transparent), transparent 38%),
var(--dg-panel-strong);
}
.gh-tags-page .gh-tag-card-content {
position: static;
display: flex;
flex: 1;
flex-direction: column;
padding: clamp(18px, 1.8vw, 22px);
text-align: left;
}
.gh-tags-page .gh-tag-card-label {
color: var(--dg-accent);
font-size: 1.05rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gh-tags-page .gh-tag-card-title {
margin-top: 10px;
color: var(--dg-text);
font-size: clamp(2.25rem, 0.76vw + 1.85rem, 3rem);
line-height: 1.06;
letter-spacing: 0;
text-wrap: balance;
}
.gh-tags-page .gh-tag-card-count {
width: fit-content;
margin-top: auto;
padding-top: 18px;
color: var(--dg-muted);
font-size: 1.22rem;
font-weight: 780;
line-height: 1;
letter-spacing: 0.045em;
text-transform: uppercase;
}
.gh-tags-page .gh-tag-card-count span {
color: var(--dg-text);
}
:root[data-theme="dark"] .gh-tags-page {
background:
linear-gradient(180deg, var(--dg-panel) 0, var(--dg-bg) 460px),
var(--dg-bg);
}
:root[data-theme="dark"] .gh-tags-page .gh-tag-card {
background: color-mix(in srgb, var(--dg-surface) 88%, transparent);
}
@media (hover: hover) {
.post-template .gh-post-related .gh-card-link:hover .gh-card-image img,
.gh-tags-page .gh-tag-card:hover .gh-tag-card-image img {
filter: contrast(1.04) saturate(1.04);
transform: scale(1.035);
}
.gh-tags-page .gh-tag-card:hover {
opacity: 1;
border-color: var(--dg-border-strong);
transform: translateY(-4px);
box-shadow: var(--dg-shadow-lift);
}
}
@media (max-width: 1199px) {
.gh-tags-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.page-template .gh-page-body {
grid-template-columns:
[full-start] var(--full)
[wide-start] var(--wide)
[main-start] var(--main) [main-end]
var(--wide) [wide-end]
var(--full) [full-end];
}
.gh-tags-grid,
.post-template .gh-post-related .gh-feed {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.gh-tags-page {
padding-block: 40px 72px;
}
.gh-tags-page-title {
font-size: calc(clamp(3.7rem, 12vw, 5.4rem) * var(--factor, 1));
}
.gh-tags-grid,
.post-template .gh-post-related .gh-feed {
grid-template-columns: 1fr;
}
}
.gh-language-page {
padding-top: clamp(48px, 7vw, 96px);
padding-bottom: clamp(72px, 8vw, 112px);
}
.gh-language-page .gh-container-inner {
display: block;
}
.gh-language-hero {
max-width: 760px;
margin-bottom: clamp(32px, 5vw, 56px);
}
.gh-language-kicker {
margin-bottom: 12px;
color: var(--dg-accent);
font-size: 1.12rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gh-language-description {
max-width: 640px;
margin-top: 16px;
color: var(--color-secondary-text);
font-size: 1.8rem;
}
.gh-language-panel {
max-width: 720px;
padding: clamp(28px, 5vw, 48px);
color: var(--dg-text);
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: color-mix(in srgb, var(--dg-surface) 92%, transparent);
box-shadow: var(--dg-shadow-soft);
}
.gh-language-panel h1,
.gh-language-panel h2 {
margin-bottom: 14px;
color: var(--dg-text);
font-size: clamp(3.4rem, 2vw + 2.4rem, 5rem);
line-height: 1;
letter-spacing: 0;
}
.gh-language-panel p {
max-width: 560px;
margin-bottom: 24px;
color: var(--dg-muted);
font-size: 1.85rem;
line-height: 1.58;
}
:root[data-theme="dark"] .gh-language-panel {
background: color-mix(in srgb, var(--dg-surface) 88%, transparent);
}
.gh-text-toggle {
position: relative;
flex: 0 0 auto;
margin-right: -2px;
margin-left: -2px;
border-radius: 50%;
}
.gh-text-toggle span {
font-size: 1.18rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0;
}
.gh-text-toggle:hover,
.gh-text-toggle[aria-pressed="true"] {
background-color: var(--color-lighter-gray);
}
@media (max-width: 767px) {
.gh-navigation-actions .gh-text-toggle {
display: none;
}
#gh-navigation .gh-navigation-brand {
grid-template-columns: 1fr auto auto;
}
}
@media (min-width: 768px) {
.gh-navigation-brand .gh-text-toggle {
display: none;
}
}
:root[data-view="text"] {
color-scheme: light;
--background-color: #fff;
--color-white: #fff;
--color-lighter-gray: #f5f5f3;
--color-light-gray: #ececea;
--color-mid-gray: #767676;
--color-secondary-text: #696969;
--color-primary-text: #1b1b1b;
--color-darker-gray: #111;
--color-border: #deded8;
--color-dark-border: #b8b8b0;
--dg-bg: #fff;
--dg-panel: #fff;
--dg-surface: #fff;
--dg-surface-soft: #fff;
--dg-panel-strong: #fff;
--dg-text: #111;
--dg-muted: #696969;
--dg-border: #deded8;
--dg-border-strong: #b8b8b0;
--dg-accent: #111;
--dg-card-radius: 0;
--dg-shadow-soft: none;
--dg-shadow-lift: none;
--editorial-panel: #fff;
--editorial-soft-text: #696969;
--editorial-shadow: none;
}
:root[data-view="text"] *,
:root[data-view="text"] *::before,
:root[data-view="text"] *::after {
animation: none !important;
box-shadow: none !important;
text-shadow: none !important;
transition: none !important;
}
:root[data-view="text"] body,
:root[data-view="text"] .gh-viewport,
:root[data-view="text"] .gh-main,
:root[data-view="text"] .gh-navigation,
:root[data-view="text"] .gh-footer,
:root[data-view="text"] :is(.gh-home-magazine, .gh-header, .gh-featured, .gh-container, .gh-tags-page, .gh-tag-hero, .gh-tag-feed, .gh-post-related) {
color: #111 !important;
background: #fff !important;
background-image: none !important;
}
:root[data-view="text"] a {
color: #111 !important;
}
:root[data-view="text"] a:hover {
opacity: 0.72;
}
:root[data-view="text"] .gh-home-magazine::before,
:root[data-view="text"] .gh-tags-page::before,
:root[data-view="text"] .gh-article-header::before,
:root[data-view="text"] .gh-page-hero::before,
:root[data-view="text"] .gh-tag-hero::before,
:root[data-view="text"] .gh-card::before,
:root[data-view="text"] .gh-card::after,
:root[data-view="text"] .gh-home-feature-image::after,
:root[data-view="text"] .gh-home-side-image::after,
:root[data-view="text"] .gh-tag-card-image::after {
display: none !important;
}
:root[data-view="text"] .gh-navigation {
height: 72px;
font-size: 1.45rem;
border-bottom: 1px solid #deded8;
}
:root[data-view="text"] .gh-navigation-inner {
max-width: 920px;
}
:root[data-view="text"] .gh-navigation-logo {
font-size: calc(2.1rem * var(--factor, 1));
}
:root[data-view="text"] .gh-navigation-logo img {
max-height: 34px;
filter: grayscale(1);
}
:root[data-view="text"] .gh-theme-toggle,
:root[data-view="text"] .gh-search,
:root[data-view="text"] .gh-burger,
:root[data-view="text"] .gh-more-toggle,
:root[data-view="text"] .gh-text-toggle {
color: #111;
background: transparent;
}
:root[data-view="text"] .gh-text-toggle {
border: 1px solid #deded8;
background: #f5f5f3;
}
:root[data-view="text"] .gh-text-toggle[aria-pressed="true"] {
border-color: #111;
background: #111;
color: #fff;
}
:root[data-view="text"] :is(.gh-home-magazine-inner, .gh-container-inner, .gh-tags-page-inner, .gh-tag-feed-inner, .gh-tag-hero-inner, .gh-post-related .gh-container-inner, .gh-post-nav-inner, .gh-footer-inner) {
max-width: 820px !important;
}
:root[data-view="text"] .gh-canvas,
:root[data-view="text"] .kg-width-full.kg-content-wide {
--container-width: 820px;
--content-width: 760px;
--container-gap: 20px;
}
:root[data-view="text"] :is(.gh-home-magazine, .gh-tags-page, .gh-tag-hero, .gh-tag-feed, .gh-container) {
padding-block: 44px 72px !important;
}
:root[data-view="text"] :is(.gh-home-lead, .gh-home-side, .gh-home-latest .gh-feed, .gh-featured-galleries-grid, .gh-container .gh-feed, .gh-tag-feed .gh-feed, .gh-tags-grid, .gh-post-related .gh-feed) {
display: block !important;
}
:root[data-view="text"] :is(.gh-home-feature-image, .gh-home-side-image, .gh-featured-gallery-image, .gh-card-image, .gh-tag-card-image, .gh-article-visual, .gh-page-visual, .gh-page-discovery-image, .gh-page-discovery-thumb, .gh-tag-hero-panel, .gh-header-image, .kg-image-card, .kg-gallery-card, .kg-video-card, .kg-embed-card, .kg-audio-card, .kg-product-card .kg-product-card-image, .kg-bookmark-thumbnail) {
display: none !important;
}
:root[data-view="text"] :is(.gh-home-count, .gh-home-intro, .gh-home-feature-link, .gh-home-side-link, .gh-featured-gallery, .gh-card-link, .gh-tag-card, .gh-post-related .gh-card-link, .gh-post-internal-links-inner, .gh-post-nav-link, .gh-page-sidebar, .gh-page-quick, .gh-page-discovery-panel, .gh-page-discovery, .gh-page-tag-chip, .gh-tag-hero-actions, .gh-tag-hero-meta, .kg-bookmark-container, .kg-callout-card, .kg-file-card .kg-file-card-container) {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
:root[data-view="text"] :is(.gh-home-feature, .gh-home-side-card, .gh-card, .gh-featured-gallery, .gh-tag-card, .gh-post-related .gh-card, .gh-post-internal-links-list li, .gh-post-nav-link) {
margin: 0 !important;
border-bottom: 1px solid #deded8 !important;
}
:root[data-view="text"] :is(.gh-home-feature-link, .gh-home-side-link, .gh-card-link, .gh-featured-gallery, .gh-tag-card, .gh-post-related .gh-card-link, .gh-post-nav-link, .gh-page-discovery-main, .gh-page-tag-chip) {
display: block !important;
padding-block: 22px !important;
}
:root[data-view="text"] .gh-home-count {
display: flex;
gap: 8px;
align-items: baseline;
margin-bottom: 28px !important;
color: #696969;
}
:root[data-view="text"] .gh-home-count span {
color: #111;
font-size: 1.55rem;
font-weight: 760;
}
:root[data-view="text"] .gh-home-count p {
color: #696969;
font-size: 1.45rem;
font-weight: 520;
letter-spacing: 0;
text-transform: none;
}
:root[data-view="text"] .gh-home-intro {
margin-bottom: 28px !important;
}
:root[data-view="text"] .gh-home-actions {
justify-content: flex-start;
gap: 18px;
margin-top: 0;
}
:root[data-view="text"] :is(.gh-home-primary-cta, .gh-home-secondary-link, .gh-home-section-link, .gh-tag-feed-link, .gh-home-loadmore, .gh-page-sidebar-actions a, .gh-page-tag-chip, .gh-button-share) {
min-height: 0 !important;
padding: 0 !important;
color: #111 !important;
font-size: 1.45rem !important;
font-weight: 650 !important;
text-decoration: underline;
text-underline-offset: 0.16em;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
:root[data-view="text"] :is(.gh-home-section-header, .gh-tag-feed-header, .gh-tags-page-header) {
display: block !important;
margin: 42px 0 8px !important;
padding: 0 0 12px !important;
border-bottom: 1px solid #deded8;
}
:root[data-view="text"] :is(.gh-home-section-kicker, .gh-card-tag, .gh-article-tag, .gh-page-kicker, .gh-page-discovery-label, .gh-tag-hero-kicker, .gh-tag-feed-kicker, .gh-post-nav-label, .gh-post-internal-links-kicker) {
display: block;
margin: 0 0 8px !important;
padding: 0 !important;
color: #696969 !important;
font-size: 1.16rem !important;
font-weight: 700 !important;
line-height: 1.2;
letter-spacing: 0.06em !important;
text-transform: uppercase;
border: 0 !important;
background: transparent !important;
}
:root[data-view="text"] :is(.gh-container-title, .gh-tags-page-title, .gh-tag-feed-title, .gh-home-section-title, .gh-post-internal-links-title, .gh-post-related .gh-container-title) {
margin: 0 !important;
color: #111 !important;
font-size: clamp(2.2rem, 1.2vw + 1.7rem, 3rem) !important;
line-height: 1.18 !important;
border: 0 !important;
}
:root[data-view="text"] :is(.gh-home-feature-title, .gh-home-side-title, .gh-card-title, .gh-featured-gallery-title, .gh-tag-card-title, .gh-post-nav-title, .gh-page-discovery-title) {
margin: 0 0 8px !important;
color: #111 !important;
font-size: clamp(2rem, 0.7vw + 1.7rem, 2.55rem) !important;
font-weight: 720 !important;
line-height: 1.22 !important;
letter-spacing: 0 !important;
text-wrap: auto !important;
}
:root[data-view="text"] :is(.gh-home-feature-excerpt, .gh-card-excerpt, .gh-tag-card-description, .gh-tag-hero-description, .gh-page-excerpt, .gh-article-excerpt) {
max-width: none !important;
margin-top: 8px !important;
color: #555 !important;
font-size: 1.55rem !important;
line-height: 1.58 !important;
}
:root[data-view="text"] .gh-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px !important;
color: #767676 !important;
font-size: 1.22rem !important;
font-weight: 620 !important;
letter-spacing: 0 !important;
text-transform: none;
}
:root[data-view="text"] :is(.post-template .gh-article-header, .page-template .gh-page-hero, .tag-template .gh-tag-hero) {
display: block !important;
width: min(calc(100% - 40px), 820px) !important;
max-width: none !important;
margin: 48px auto 36px !important;
padding: 0 0 30px !important;
border-bottom: 1px solid #deded8 !important;
background: transparent !important;
}
:root[data-view="text"] :is(.post-template .gh-article-title, .page-template .gh-page-title, .tag-template .gh-tag-hero-title) {
width: 100% !important;
max-width: none !important;
color: #111 !important;
font-size: clamp(3.2rem, 4vw + 1.4rem, 5.2rem) !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
text-wrap: auto !important;
}
:root[data-view="text"] .post-template .gh-meta-share {
display: block !important;
max-width: none !important;
margin-top: 18px !important;
padding-top: 0 !important;
border-top: 0 !important;
}
:root[data-view="text"] .post-template .gh-article-meta {
margin-bottom: 12px;
}
:root[data-view="text"] .post-template .gh-article-author-image {
display: none;
}
:root[data-view="text"] :is(.post-template .gh-content, .page-template .gh-content) {
--content-font-size: 1.82rem;
--reading-scale: 1;
color: #222 !important;
line-height: 1.78 !important;
}
:root[data-view="text"] :is(.post-template .gh-content, .page-template .gh-content) :is(h2, h3) {
color: #111 !important;
letter-spacing: 0 !important;
}
:root[data-view="text"] :is(.post-template .gh-content, .page-template .gh-content) h2 {
margin-top: 48px !important;
font-size: 2.8rem !important;
}
:root[data-view="text"] :is(.post-template .gh-content, .page-template .gh-content) h3 {
margin-top: 36px !important;
font-size: 2.25rem !important;
}
:root[data-view="text"] :is(.post-template .gh-content, .page-template .gh-content) :is(blockquote, blockquote:not([class])) {
margin-block: 34px !important;
padding-left: 18px !important;
color: #222 !important;
font-size: 1.95rem !important;
line-height: 1.55 !important;
border-left: 2px solid #deded8 !important;
}
:root[data-view="text"] .gh-page-body {
display: block !important;
max-width: 820px !important;
margin-inline: auto !important;
}
:root[data-view="text"] .gh-page-sidebar {
margin-top: 44px !important;
padding-top: 18px !important;
border-top: 1px solid #deded8 !important;
}
:root[data-view="text"] .gh-post-internal-links,
:root[data-view="text"] .gh-post-nav,
:root[data-view="text"] .gh-post-related {
margin-top: 54px !important;
}
:root[data-view="text"] .gh-post-internal-links-list {
margin: 18px 0 0 !important;
}
:root[data-view="text"] .gh-post-internal-links-list a {
padding: 14px 0 !important;
border: 0 !important;
background: transparent !important;
}
:root[data-view="text"] .gh-tag-hero-actions {
display: flex;
gap: 16px;
align-items: center;
margin-top: 18px !important;
color: #696969 !important;
}
:root[data-view="text"] .gh-tag-hero-actions span {
color: #696969 !important;
background: transparent !important;
}
:root[data-view="text"] .gh-tags-page .gh-tag-card {
display: block !important;
}
:root[data-view="text"] .gh-back-to-top {
width: 42px;
height: 42px;
border-color: #deded8;
background: #fff;
}
@media (max-width: 767px) {
:root[data-view="text"] .gh-navigation {
height: 64px;
}
:root[data-view="text"] :is(.gh-home-magazine, .gh-tags-page, .gh-tag-hero, .gh-tag-feed, .gh-container) {
padding-block: 32px 56px !important;
}
:root[data-view="text"] :is(.post-template .gh-article-header, .page-template .gh-page-hero, .tag-template .gh-tag-hero) {
width: calc(100% - 36px) !important;
margin-top: 32px !important;
}
:root[data-view="text"] :is(.post-template .gh-article-title, .page-template .gh-page-title, .tag-template .gh-tag-hero-title) {
font-size: clamp(2.75rem, 8vw, 3.8rem) !important;
}
}
:root[data-view="text"][data-theme="dark"] {
color-scheme: dark;
--background-color: #10100f;
--color-white: #f4f1e8;
--color-lighter-gray: #1a1916;
--color-light-gray: #24231f;
--color-mid-gray: #9f9a90;
--color-secondary-text: #aaa49a;
--color-primary-text: #ece8dd;
--color-darker-gray: #f4f1e8;
--color-border: #34322c;
--color-dark-border: #514d43;
--dg-bg: #10100f;
--dg-panel: #10100f;
--dg-surface: #10100f;
--dg-surface-soft: #151410;
--dg-panel-strong: #151410;
--dg-text: #f4f1e8;
--dg-muted: #aaa49a;
--dg-border: #34322c;
--dg-border-strong: #514d43;
--dg-accent: #f4f1e8;
--editorial-panel: #10100f;
--editorial-soft-text: #aaa49a;
}
:root[data-view="text"][data-theme="dark"] body,
:root[data-view="text"][data-theme="dark"] .gh-viewport,
:root[data-view="text"][data-theme="dark"] .gh-main,
:root[data-view="text"][data-theme="dark"] .gh-navigation,
:root[data-view="text"][data-theme="dark"] .gh-footer,
:root[data-view="text"][data-theme="dark"] :is(.gh-home-magazine, .gh-header, .gh-featured, .gh-container, .gh-tags-page, .gh-tag-hero, .gh-tag-feed, .gh-post-related) {
color: #f4f1e8 !important;
background: #10100f !important;
background-image: none !important;
}
:root[data-view="text"][data-theme="dark"] a,
:root[data-view="text"][data-theme="dark"] :is(.gh-container-title, .gh-tags-page-title, .gh-tag-feed-title, .gh-home-section-title, .gh-post-internal-links-title, .gh-post-related .gh-container-title),
:root[data-view="text"][data-theme="dark"] :is(.gh-home-feature-title, .gh-home-side-title, .gh-card-title, .gh-featured-gallery-title, .gh-tag-card-title, .gh-post-nav-title),
:root[data-view="text"][data-theme="dark"] :is(.post-template .gh-article-title, .page-template .gh-page-title, .tag-template .gh-tag-hero-title),
:root[data-view="text"][data-theme="dark"] :is(.post-template .gh-content, .page-template .gh-content) :is(h2, h3),
:root[data-view="text"][data-theme="dark"] .gh-home-count span {
color: #f4f1e8 !important;
}
:root[data-view="text"][data-theme="dark"] :is(.gh-home-feature-excerpt, .gh-card-excerpt, .gh-tag-card-description, .gh-tag-hero-description, .gh-page-excerpt, .gh-article-excerpt),
:root[data-view="text"][data-theme="dark"] :is(.gh-home-section-kicker, .gh-card-tag, .gh-article-tag, .gh-page-kicker, .gh-tag-hero-kicker, .gh-tag-feed-kicker, .gh-post-nav-label, .gh-post-internal-links-kicker),
:root[data-view="text"][data-theme="dark"] .gh-card-meta,
:root[data-view="text"][data-theme="dark"] .gh-home-count,
:root[data-view="text"][data-theme="dark"] .gh-home-count p,
:root[data-view="text"][data-theme="dark"] .gh-tag-hero-actions,
:root[data-view="text"][data-theme="dark"] .gh-tag-hero-actions span {
color: #aaa49a !important;
}
:root[data-view="text"][data-theme="dark"] :is(.post-template .gh-content, .page-template .gh-content),
:root[data-view="text"][data-theme="dark"] :is(.post-template .gh-content, .page-template .gh-content) :is(blockquote, blockquote:not([class])) {
color: #ded9ce !important;
}
:root[data-view="text"][data-theme="dark"] .gh-navigation,
:root[data-view="text"][data-theme="dark"] :is(.gh-home-section-header, .gh-tag-feed-header, .gh-tags-page-header),
:root[data-view="text"][data-theme="dark"] :is(.gh-home-feature, .gh-home-side-card, .gh-card, .gh-featured-gallery, .gh-tag-card, .gh-post-related .gh-card, .gh-post-internal-links-list li, .gh-post-nav-link),
:root[data-view="text"][data-theme="dark"] :is(.post-template .gh-article-header, .page-template .gh-page-hero, .tag-template .gh-tag-hero),
:root[data-view="text"][data-theme="dark"] .gh-page-sidebar,
:root[data-view="text"][data-theme="dark"] :is(.post-template .gh-content, .page-template .gh-content) :is(blockquote, blockquote:not([class])) {
border-color: #34322c !important;
}
:root[data-view="text"][data-theme="dark"] .gh-theme-toggle,
:root[data-view="text"][data-theme="dark"] .gh-search,
:root[data-view="text"][data-theme="dark"] .gh-burger,
:root[data-view="text"][data-theme="dark"] .gh-more-toggle,
:root[data-view="text"][data-theme="dark"] .gh-text-toggle {
color: #f4f1e8;
background: transparent;
}
:root[data-view="text"][data-theme="dark"] .gh-text-toggle {
color: #f4f1e8;
border-color: #34322c;
background: #1a1916;
}
:root[data-view="text"][data-theme="dark"] .gh-text-toggle[aria-pressed="true"] {
color: #10100f;
border-color: #f4f1e8;
background: #f4f1e8;
}
:root[data-view="text"][data-theme="dark"] .gh-navigation-logo img {
filter: grayscale(1) brightness(1.18);
}
:root[data-view="text"][data-theme="dark"] .gh-back-to-top {
color: #f4f1e8;
border-color: #34322c;
background: #10100f;
}
:root[data-view="text"] .gh-timeline {
color: var(--color-primary-text) !important;
background: var(--background-color) !important;
background-image: none !important;
}
:root[data-view="text"] .gh-timeline-inner {
max-width: 820px !important;
padding-block: 44px 76px !important;
}
:root[data-view="text"] .gh-timeline-hero {
display: block !important;
padding-bottom: 24px !important;
border-bottom: 1px solid var(--color-border) !important;
}
:root[data-view="text"] .gh-timeline-kicker,
:root[data-view="text"] .gh-timeline-index-kicker {
color: var(--color-secondary-text) !important;
}
:root[data-view="text"] .gh-timeline-title {
color: var(--color-darker-gray) !important;
font-size: clamp(3.2rem, 4vw + 1.3rem, 5.2rem) !important;
line-height: 1.08 !important;
}
:root[data-view="text"] .gh-timeline-description {
color: var(--color-secondary-text) !important;
font-size: 1.58rem !important;
}
:root[data-view="text"] .gh-timeline-summary {
display: flex !important;
gap: 18px;
margin-top: 24px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
:root[data-view="text"] .gh-timeline-summary div {
padding: 0 !important;
border: 0 !important;
}
:root[data-view="text"] .gh-timeline-summary span {
color: var(--color-darker-gray) !important;
font-size: 1.55rem !important;
}
:root[data-view="text"] .gh-timeline-summary p {
color: var(--color-secondary-text) !important;
font-size: 1.25rem !important;
font-weight: 540 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
:root[data-view="text"] .gh-timeline-layout {
display: block !important;
margin-top: 34px !important;
}
:root[data-view="text"] .gh-timeline-index {
position: static !important;
padding: 0 0 18px !important;
border: 0 !important;
border-bottom: 1px solid var(--color-border) !important;
border-radius: 0 !important;
background: transparent !important;
}
:root[data-view="text"] .gh-timeline-years {
display: flex !important;
flex-wrap: wrap;
gap: 10px 18px;
}
:root[data-view="text"] .gh-timeline-years a {
display: inline-flex !important;
gap: 8px;
padding: 0 !important;
color: var(--color-darker-gray) !important;
border: 0 !important;
background: transparent !important;
}
:root[data-view="text"] .gh-timeline-years small {
color: var(--color-secondary-text) !important;
}
:root[data-view="text"] .gh-timeline-year {
padding-left: 0 !important;
}
:root[data-view="text"] .gh-timeline-year + .gh-timeline-year {
margin-top: 52px !important;
}
:root[data-view="text"] .gh-timeline-year::before,
:root[data-view="text"] .gh-timeline-year::after {
display: none !important;
}
:root[data-view="text"] .gh-timeline-year-header {
margin-bottom: 22px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--color-border) !important;
}
:root[data-view="text"] .gh-timeline-year-header h2 {
color: var(--color-darker-gray) !important;
font-size: clamp(3rem, 4vw, 4.8rem) !important;
line-height: 1 !important;
}
:root[data-view="text"] .gh-timeline-year-header span,
:root[data-view="text"] .gh-timeline-month-header span {
min-height: 0 !important;
padding: 0 !important;
color: var(--color-secondary-text) !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
:root[data-view="text"] .gh-timeline-month-header {
margin-bottom: 0 !important;
border-bottom: 1px solid var(--color-border) !important;
}
:root[data-view="text"] .gh-timeline-month-header h3 {
color: var(--color-darker-gray) !important;
font-size: 2.1rem !important;
}
:root[data-view="text"] .gh-timeline-posts {
gap: 0 !important;
}
:root[data-view="text"] .gh-timeline-post {
border-bottom: 1px solid var(--color-border) !important;
}
:root[data-view="text"] .gh-timeline-post-link,
:root[data-view="text"] .gh-timeline-post.no-image .gh-timeline-post-link,
:root[data-view="text"] .gh-timeline-post:not(:has(.gh-timeline-post-image)) .gh-timeline-post-link {
display: grid !important;
grid-template-columns: 54px minmax(0, 1fr) !important;
gap: 16px !important;
padding: 18px 0 !important;
color: var(--color-darker-gray) !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
:root[data-view="text"] .gh-timeline-post-date {
width: auto !important;
min-height: 0 !important;
justify-items: start !important;
color: var(--color-secondary-text) !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
:root[data-view="text"] .gh-timeline-post-date span {
color: var(--color-darker-gray) !important;
font-size: 1.7rem !important;
}
:root[data-view="text"] .gh-timeline-post-date small,
:root[data-view="text"] .gh-timeline-post-meta {
color: var(--color-secondary-text) !important;
}
:root[data-view="text"] .gh-timeline-post-title {
color: var(--color-darker-gray) !important;
font-size: clamp(1.95rem, 0.5vw + 1.7rem, 2.35rem) !important;
}
:root[data-view="text"] .gh-timeline-post-excerpt {
color: var(--color-secondary-text) !important;
font-size: 1.48rem !important;
}
:root[data-view="text"] .gh-timeline-post-image {
display: none !important;
}
:root[data-view="text"] .gh-timeline-more {
margin-top: 30px !important;
padding-top: 20px !important;
border-top: 1px solid var(--color-border) !important;
}
:root[data-view="text"] .gh-timeline-load {
min-height: 0 !important;
padding: 0 !important;
color: var(--color-darker-gray) !important;
font-size: 1.45rem !important;
font-weight: 650 !important;
text-decoration: underline;
text-underline-offset: 0.16em;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
:root[data-view="text"] .gh-timeline-more p {
color: var(--color-secondary-text) !important;
font-size: 1.34rem !important;
}
@media (max-width: 767px) {
:root[data-view="text"] .gh-timeline-inner {
padding-block: 32px 58px !important;
}
:root[data-view="text"] .gh-timeline-post-link,
:root[data-view="text"] .gh-timeline-post.no-image .gh-timeline-post-link,
:root[data-view="text"] .gh-timeline-post:not(:has(.gh-timeline-post-image)) .gh-timeline-post-link {
grid-template-columns: 46px minmax(0, 1fr) !important;
}
}
.gh-error-hero {
padding-block: clamp(46px, 6vw, 82px) clamp(44px, 5vw, 72px);
overflow: hidden;
background:
radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--dg-accent) 18%, transparent), transparent 34%),
linear-gradient(180deg, color-mix(in srgb, var(--dg-surface) 78%, transparent), transparent);
}
.gh-error-hero-inner {
max-width: 1120px;
text-align: center;
}
.gh-error-visual {
overflow: hidden;
border: 1px solid var(--dg-border);
border-radius: var(--dg-card-radius);
background: var(--dg-panel-strong);
box-shadow: var(--dg-shadow-lift);
}
.gh-error-visual img {
width: 100%;
height: auto;
}
.gh-error-copy {
max-width: 720px;
margin: clamp(24px, 3vw, 36px) auto 0;
}
.gh-error-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 76px;
height: 42px;
padding-inline: 18px;
color: var(--dg-accent);
font-size: 1.35rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.08em;
border: 1px solid var(--dg-border);
border-radius: 999px;
background: color-mix(in srgb, var(--dg-surface) 86%, transparent);
}
.gh-error-title-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.gh-error-description {
max-width: 720px;
margin: 22px auto 0;
color: var(--dg-muted);
font-size: clamp(1.7rem, 0.35vw + 1.55rem, 2rem);
line-height: 1.58;
}
.gh-error-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.gh-error-suggestions,
.gh-error-tags {
padding-block: 0 clamp(48px, 6vw, 88px);
}
.gh-error-feed {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3vw, 42px);
}
.gh-error-feed .gh-card-link {
gap: 18px;
}
.gh-error-feed .gh-card-image {
overflow: hidden;
border-radius: 14px;
box-shadow: 0 18px 50px rgb(15 23 42 / 0.08);
}
.gh-error-feed .gh-card-image img {
transition: transform 0.55s ease;
}
.gh-error-feed .gh-card-link:hover img {
transform: scale(1.04);
}
@media (max-width: 991px) {
.gh-error-feed {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.gh-error-hero {
padding-block: 48px 42px;
}
.gh-error-hero-inner {
text-align: left;
}
.gh-error-copy {
margin-inline: 0;
}
.gh-error-actions {
justify-content: flex-start;
}
.gh-error-feed,
.gh-error-tags .gh-featured-galleries-grid {
grid-template-columns: 1fr;
}
}
:root[data-view="text"] :is(.gh-error-hero, .gh-error-suggestions, .gh-error-tags) {
color: var(--color-primary-text) !important;
background: var(--background-color) !important;
background-image: none !important;
}
:root[data-view="text"] :is(.gh-error-hero-inner, .gh-error-suggestions-inner, .gh-error-tags-inner) {
max-width: 820px !important;
}
.gh-en-search-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.gh-en-search-modal.is-open {
display: block;
}
.gh-en-search-backdrop {
position: absolute;
inset: 0;
background: rgb(0 0 0 / 0.42);
backdrop-filter: blur(8px);
}
.gh-en-search-panel {
position: relative;
width: min(760px, calc(100vw - 32px));
max-height: min(760px, calc(100vh - 48px));
margin: 24px auto;
overflow: auto;
padding: 24px;
color: var(--color-primary-text);
background: var(--background-color);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 24px 80px rgb(0 0 0 / 0.22);
}
.gh-en-search-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
color: var(--color-primary-text);
font-size: 2.4rem;
line-height: 1;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 8px;
cursor: pointer;
}
.gh-en-search-kicker {
margin: 0 48px 8px 0;
color: #0b7a2a;
font-size: 1.2rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
}
.gh-en-search-label {
display: block;
margin: 0 48px 18px 0;
font-family: var(--gh-font-heading, var(--font-sans));
font-size: clamp(2.6rem, 4vw, 4.2rem);
font-weight: 800;
line-height: 1.05;
}
.gh-en-search-input {
width: 100%;
padding: 14px 16px;
color: inherit;
font: inherit;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 8px;
outline: none;
}
.gh-en-search-input:focus {
border-color: rgb(11 122 42 / 0.65);
box-shadow: 0 0 0 3px rgb(11 122 42 / 0.12);
}
.gh-en-search-status {
min-height: 1.5em;
margin: 14px 0;
color: var(--color-secondary-text);
font-size: 1.4rem;
}
.gh-en-search-results {
display: grid;
gap: 10px;
}
.gh-en-search-result {
display: grid;
gap: 4px;
padding: 14px;
color: var(--color-primary-text);
background: rgb(0 0 0 / 0.025);
border: 1px solid var(--color-border);
border-radius: 8px;
}
.gh-en-search-result-title {
font-weight: 800;
line-height: 1.25;
}
.gh-en-search-result-meta {
color: var(--color-secondary-text);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.gh-en-search-result-excerpt {
color: var(--color-secondary-text);
font-size: 1.4rem;
line-height: 1.45;
}
:root[data-theme="dark"] .gh-en-search-result {
background: rgb(255 255 255 / 0.04);
}
:root.has-en-search-open body {
overflow: hidden;
}
@media (min-width: 768px) {
.gh-en-search-panel {
margin-top: 72px;
padding: 32px;
}
}
/* === Accessibility: skip link + focus-visible (v18) === */
.gh-skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 9999;
display: inline-block;
padding: 10px 18px;
color: #fff;
font-size: 1.4rem;
font-weight: 700;
background-color: var(--ghost-accent-color);
border-radius: 6px;
transition: top 0.15s;
}
.gh-skip-link:focus {
top: 16px;
outline: 2px solid var(--color-darker-gray);
outline-offset: 2px;
}
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--ghost-accent-color);
outline-offset: 2px;
border-radius: 2px;
}
:root[data-theme="dark"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline-color: var(--ghost-accent-color);
}

/* ── Modern toolbar capsule (search / Aa / theme / PL-EN) ─────────────── */
:root {
--toolbar-bg: rgb(255 255 255 / 0.6);
--toolbar-border: rgb(0 0 0 / 0.08);
--toolbar-pill: rgb(0 0 0 / 0.06);
--toolbar-thumb: #15171a;
--toolbar-thumb-text: #fff;
}
:root[data-theme="dark"] {
--toolbar-bg: rgb(255 255 255 / 0.04);
--toolbar-border: rgb(255 255 255 / 0.14);
--toolbar-pill: rgb(255 255 255 / 0.09);
--toolbar-thumb: #f5f7fb;
--toolbar-thumb-text: #15171a;
}
.gh-toolbar {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 2px;
padding: 4px;
border: 1px solid var(--toolbar-border);
border-radius: 999px;
background: var(--toolbar-bg);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px rgb(15 23 42 / 0.05);
}
.gh-toolbar .gh-icon-button {
width: 36px;
height: 36px;
margin: 0;
border-radius: 999px;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.gh-toolbar .gh-search,
.gh-toolbar .gh-text-toggle,
.gh-toolbar .gh-theme-toggle {
margin: 0;
}
.gh-toolbar .gh-icon-button:hover {
background-color: var(--toolbar-pill);
}
.gh-toolbar .gh-icon-button:hover :is(svg, span) {
opacity: 1;
}
.gh-toolbar .gh-icon-button:active {
transform: scale(0.92);
}
.gh-toolbar .gh-icon-button svg {
width: 18px;
height: 18px;
stroke-width: 1.5;
}
.gh-toolbar .gh-text-toggle span {
font-size: 1.3rem;
font-weight: 500;
letter-spacing: -0.02em;
}
/* Language switcher: soft pill with sliding thumb */
.gh-toolbar .gh-language-switcher {
position: relative;
gap: 0;
margin-left: 12px;
padding: 3px;
border: 0;
background: var(--toolbar-pill);
}
.gh-toolbar .gh-language-switcher::after {
content: "";
position: absolute;
top: 50%;
left: -8px;
width: 1px;
height: 18px;
background: var(--toolbar-border);
transform: translateY(-50%);
}
.gh-toolbar .gh-language-switcher::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
z-index: 0;
width: calc(50% - 3px);
height: calc(100% - 6px);
background: var(--toolbar-thumb);
border-radius: 999px;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.gh-toolbar .gh-language-switcher:has(.gh-language-link[data-language-target="en"][aria-current="true"])::before {
transform: translateX(100%);
}
.gh-toolbar .gh-language-link {
position: relative;
z-index: 1;
width: 40px;
min-width: 0;
height: 26px;
padding: 0;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-secondary-text);
background-color: transparent;
transition: color 0.25s ease;
}
.gh-toolbar .gh-language-link[aria-current="true"],
:root[data-theme="dark"] .gh-toolbar .gh-language-link[aria-current="true"] {
color: var(--toolbar-thumb-text);
background-color: transparent;
}
/* Fallback for browsers without :has() */
@supports not (selector(:has(*))) {
.gh-toolbar .gh-language-switcher::before {
display: none;
}
.gh-toolbar .gh-language-link[aria-current="true"],
:root[data-theme="dark"] .gh-toolbar .gh-language-link[aria-current="true"] {
color: var(--toolbar-thumb-text);
background-color: var(--toolbar-thumb);
}
}
/* Show/hide the whole capsule per breakpoint */
@media (max-width: 767px) {
.gh-navigation-actions .gh-toolbar {
display: none;
}
}
@media (min-width: 768px) {
.gh-navigation-brand .gh-toolbar {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.gh-toolbar .gh-icon-button,
.gh-toolbar .gh-language-switcher::before,
.gh-toolbar .gh-language-link {
transition: none;
}
}

/* ── Castle location map section ─────────────────────────────────────── */
.gh-castle-map {
    margin-top: 48px;
    padding-top: 0;
}
.gh-castle-map-inner {
    padding-top: 32px;
    border-top: 1px solid var(--dg-border);
}
.gh-castle-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.gh-castle-map-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--dg-text);
}
.gh-castle-map-title svg {
    width: 22px;
    height: 22px;
    stroke: var(--dg-accent);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}
.gh-castle-map-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dg-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    white-space: nowrap;
    transition: border-color 0.2s ease;
}
.gh-castle-map-link:hover {
    border-color: var(--dg-accent);
}
.gh-castle-map-meta {
    font-size: 0.88rem;
    color: var(--dg-muted);
    margin-bottom: 16px;
    margin-top: 2px;
}
.gh-castle-map-frame {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--dg-border);
    box-shadow: var(--dg-shadow-soft);
    background: var(--dg-panel);
    /* loading placeholder */
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gh-castle-map-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--dg-panel) 0%, var(--dg-panel-strong) 100%);
    z-index: 0;
}
.gh-castle-map-iframe {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
}
@media (max-width: 767px) {
    .gh-castle-map-iframe {
        height: 300px;
    }
    .gh-castle-map-frame {
        min-height: 300px;
    }
    .gh-castle-map-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
:root[data-theme="dark"] .gh-castle-map-link {
    color: var(--dg-accent);
}