video { border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } body { line-height: 1; } blockquote, q { quotes: none; } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none; } img { display: block; height: auto; max-width: 100%; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; font-family: sans-serif; } *, :after, :before { box-sizing: inherit; } a { background-color: transparent; } a:active, a:hover { outline: 0; } b, strong { font-weight: 1000; } dfn, em, i { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } mark { background-color: #fdffb6; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } kbd { background: #f6f8fa; border: 1px solid rgba(124, 139, 154, 0.25); border-radius: 6px; box-shadow: inset 0 -1px 0 rgba(124, 139, 154, 0.25); font-family: var(--font-mono); font-size: 1.5rem; padding: 3px 5px; } @media (max-width: 600px) { kbd { font-size: 1.3rem; } } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { border: none; overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input:focus { outline: none; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } legend { border: 0; padding: 0; } textarea { overflow: auto; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 62.5%; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga" on; /*font-size: 1.6rem;*/ font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.6em; } ::-moz-selection { background: #daf2fd; text-shadow: none; } ::selection { background: #daf2fd; text-shadow: none; } hr { border: 0; border-top: 1px solid #f0f0f0; display: block; height: 1px; margin: 2.5em 0 3.5em; padding: 0; position: relative; width: 100%; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } ::not(.gh-content) blockquote, ::not(.gh-content) dl, ::not(.gh-content) ol, ::not(.gh-content) p, ::not(.gh-content) ul { margin: 0 0 1.5em; } ol, ul { padding-left: 1.3em; padding-right: 1.5em; } ol ol, ol ul, ul ol, ul ul { margin: 0.5em 0; } ol, ul { max-width: 100%; } li { line-height: 1.6em; padding-left: 0.3em; } li + li { margin-top: 0.5em; } dt { color: #daf2fd; float: left; font-weight: 500; margin: 0 20px 0 0; text-align: right; width: 120px; } dd { margin: 0 0 5px; text-align: left; } blockquote { border-left: #daf2fd; margin: 1.5em 0; padding: 0 1.6em; } blockquote small { display: inline-block; font-size: 0.9em; margin: 0.8em 0 0.8em 1.5em; opacity: 0.8; } blockquote small:before { content: "\2014 \00A0"; } blockquote cite { font-weight: 700; } blockquote cite a { font-weight: 400; } a { color: white; text-decoration: none; } h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin-top: 0; } h1 { font-size: 4.8rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.5em; } @media (max-width: 600px) { h1 { font-size: 3.8rem; } } h2 { font-size: 3.5rem; font-weight: 700; margin: 1.5em 0 0.5em; } @media (max-width: 600px) { h2 { font-size: 3.3rem; } } h3 { font-size: 2.5rem; font-weight: 600; margin: 1.5em 0 0.5em; } @media (max-width: 600px) { h3 { font-size: 2.3rem; } } h4 { font-size: 2rem; margin: 1.5em 0 0.5em; } @media (max-width: 600px) { h4 { font-size: 1.7rem; } } h5 { font-size: 2rem; } h5, h6 { margin: 1.5em 0 0.5em; } h6 { font-size: 1.8rem; } /*:root { --color-green: #a4d037; --color-yellow: #fecd35; --color-red: #f05230; --color-darkgrey: #15171a; --color-midgrey: #738a94; --color-lightgrey: #f1f1f1; --color-secondary-text: #979797; --color-border: #e1e1e1; --color-wash: #e5eff5; --color-darkmode: #151719; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-serif: Georgia, Times, serif; --font-mono: Menlo, Courier, monospace; } */ .viewport { display: flex; flex-direction: column; min-height: 100vh; position: relative; } .site-content { flex-grow: 1; } .outer { padding: 0 max(4vmin, 20px); position: relative; } .inner { margin: 0 auto; max-width: 1600px; width: 95%; } .site-header { background: var(--ghost-accent-color); color: #fff; position: relative; } .site-header-cover { bottom: 0; height: 100%; left: 0; -o-object-fit: cover; object-fit: cover; position: absolute; right: 0; top: 0; width: 100%; } .site-header-content { align-items: center; color: var(--color-darkgrey); display: flex; padding-bottom: 19vmin; padding-top: calc(19vmin + 44px); position: relative; text-align: center; /* z-index: 100; */ } .has-cover .site-header-content { background-color: var(--ghost-accent-color); color: #fff; min-height: 560px; } .site-header-content.left-aligned { padding-bottom: 0; text-align: left; } .has-cover .site-header-content.left-aligned { align-items: flex-end; padding-bottom: max(4vmin, 32px); } .site-header-content.no-content { padding-bottom: 2vmin; padding-top: 0; } .site-header-inner { position: relative; } .site-header-content.left-aligned .site-header-inner { align-items: flex-start; } .site-logo { flex-shrink: 0; margin: 0 auto; max-height: 120px; } .site-header-content.left-aligned .site-logo { margin-left: 0; margin-right: auto; max-height: 96px; } .site-title { font-size: 5rem; font-weight: 800; margin: 0; padding: 0; z-index: 10; } .has-serif-title .site-title { font-family: var(--font-serif); } .has-cover .site-title { font-size: 6rem; } .site-header-content.left-aligned .site-title { font-size: 4.4rem; } .has-cover .site-header-content.left-aligned .site-title { font-size: 4.6rem; } .site-description { display: inline-block; font-size: 6rem; font-weight: 700; line-height: 1.1; max-width: 960px; z-index: 10; } :is(.site-logo, .site-title) + .site-description { font-size: 2.4rem; font-weight: 400; line-height: 1.4; margin-top: 16px; max-width: 640px; } .site-logo + .site-description { margin-top: 20px; } .site-title + .site-description { color: var(--color-secondary-text); } .has-cover .site-description { color: #fff; letter-spacing: -0.005em; } .has-cover :is(.site-logo, .site-title) + .site-description { font-size: 2.4rem; } .has-cover .site-header-content.left-aligned :is(.site-logo, .site-title) + .site-description { font-size: 2.2rem; } @media (min-width: 992px) { .is-head-stacked.has-cover .site-header-content { padding-top: calc(19vmin + 120px); } } @media (max-width: 991px) { .site-header-content { padding-top: calc(19vmin + 32px); } } @media (max-width: 767px) { .has-cover .site-header-content { min-height: 240px; } .site-header-inner { gap: 16px; } .site-logo { max-width: 60%; } .site-title { font-size: 3.4rem !important; } .site-description { font-size: 2.2rem !important; } .site-logo + .site-description, .site-title + .site-description { margin-top: 12px !important; } } .gh-head { background-color: #fff; font-size: 1.6rem; height: 88px; line-height: 1.3em; z-index: 150; } .has-cover:not(.home-template) .gh-head { background-color: var(--ghost-accent-color); color: #fff; } :is(.home-template, .paged:not(.tag-template):not(.author-template)).has-cover .gh-head { background-color: transparent; color: #fff; left: 0; position: absolute; right: 0; top: 0; z-index: 2000; } .gh-head a { text-decoration: none; } .gh-head-inner { align-items: center; -moz-column-gap: 40px; column-gap: 40px; display: grid; grid-auto-flow: row dense; height: 100%; } .gh-head-inner, .is-head-left-logo .gh-head-inner { grid-template-columns: auto 1fr auto; } .is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-logo { display: none; } .is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-menu { margin-left: -40px; } @media (min-width: 992px) { .is-head-left-logo .gh-head-menu { margin-left: 16px; margin-right: 64px; } } .is-head-middle-logo .gh-head-inner { grid-template-columns: 1fr auto 1fr; } .is-head-middle-logo .gh-head-brand { grid-column-start: 2; } @media (min-width: 992px) { .is-head-middle-logo .gh-head-menu { margin-right: 64px; } } .is-head-stacked .gh-head { height: auto; } .is-head-stacked .gh-head-inner { grid-template-columns: 1fr auto 1fr; } .is-head-stacked .gh-head-brand { grid-column-start: 2; grid-row-start: 1; } @media (min-width: 992px) { .is-head-stacked .gh-head-inner { padding: 0; } .is-head-stacked .gh-head-brand { align-items: center; display: flex; height: 80px; position: relative; } .is-head-stacked .gh-head-menu { grid-column: 1/4; grid-row-start: 2; height: 56px; justify-content: center; margin: 0 48px; } .is-head-stacked .gh-head-menu:after, .is-head-stacked .gh-head-menu:before { background-color: var(--color-lightgrey); content: ""; height: 1px; left: 0; position: absolute; top: 80px; width: 100%; } .is-head-stacked.has-cover .gh-head-menu:after, .is-head-stacked.has-cover .gh-head-menu:before { background-color: hsla(0, 0%, 100%, 0.2); } .is-head-stacked .gh-head-menu:after { top: 136px; } .is-head-stacked .gh-head-actions { grid-column: 1/4; grid-row-start: 1; justify-content: space-between; } } .gh-head-brand { align-items: center; display: flex; height: 40px; word-break: break-all; } .gh-head-logo { color: inherit; display: block; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; } .gh-head-logo.no-image { margin-top: -5px; } .has-cover .gh-head-logo { color: #fff; } .gh-head-logo img { max-height: 40px; } .gh-head-menu { align-items: center; display: flex; font-weight: 500; margin-top: 1px; } .gh-head-menu .nav { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 32px; list-style: none; margin: 0; padding: 0; } .gh-head-menu .nav li { margin: 0; padding: 0; } .gh-head-menu .nav a { color: inherit; display: inline-block; line-height: 1.7; } .gh-head-menu .nav a:hover { opacity: 0.9; } .gh-head-menu .nav-more-toggle { background-color: transparent; font-size: inherit; height: 30px; margin: 0 -6px; padding: 0; position: relative; text-transform: inherit; width: 30px; } .gh-head-menu .nav-more-toggle svg { height: 24px; width: 24px; } @media (min-width: 992px) { body:not(.is-dropdown-loaded) .gh-head-menu .nav > li { opacity: 0; } } .gh-dropdown { background-color: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 7px 20px -5px rgba(0, 0, 0, 0.15); margin-top: 24px; opacity: 0; padding: 12px 0; position: absolute; right: -16px; text-align: left; top: 100%; transform: translate3d(0, 6px, 0); transition: opacity 0.3s, transform 0.2s; visibility: hidden; width: 200px; z-index: 90; } .is-head-middle-logo .gh-dropdown { left: -24px; right: auto; } .is-dropdown-mega .gh-dropdown { -moz-column-gap: 40px; column-gap: 40px; display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; min-width: 320px; padding: 20px 32px; } .is-dropdown-open .gh-dropdown { opacity: 1; transform: translateY(0); visibility: visible; } .gh-head-menu .gh-dropdown li a { color: #15171a; display: block; padding: 6px 20px; } .is-dropdown-mega .gh-dropdown li a { padding: 8px 0; } .gh-social { align-items: center; display: flex; gap: 20px; } .gh-social-link { color: inherit; line-height: 0; } .gh-social-link:hover { opacity: 0.9; } .gh-social-link svg { height: 18px; width: 18px; } .gh-head-actions { align-items: center; display: flex; gap: 24px; justify-content: flex-end; list-style: none; text-align: right; } .gh-head-members { align-items: center; display: flex; gap: 20px; } .gh-head-link { color: inherit; font-weight: 500; } .gh-head-button { align-items: center; background: var(--ghost-accent-color); border-radius: 48px; color: #fff; display: inline-flex; font-size: 1.6rem; font-weight: 600; height: 44px; justify-content: center; letter-spacing: -0.005em; padding: 8px 20px; } .has-cover .gh-head-button { background: #fff; color: var(--color-darkgrey); } @media (max-width: 767px) { .gh-head-members { flex-direction: column-reverse; gap: 16px; width: 100%; } } .gh-search { align-items: center; background-color: transparent; border: 0; cursor: pointer; display: inline-flex; height: 32px; justify-content: center; outline: none; padding: 0; width: 32px; } .gh-search:hover { opacity: 0.9; } .gh-head-brand .gh-search { margin-right: 8px; } .gh-head-actions .gh-search { margin-right: -4px; } @media (max-width: 767px) { .gh-head-actions .gh-search { display: none; } } @media (min-width: 768px) { .gh-head-brand .gh-search { display: none; } } .gh-burger { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 0; cursor: pointer; display: none; height: 30px; margin-right: -3px; padding: 0; position: relative; width: 30px; } .gh-burger:after, .gh-burger:before { background-color: var(--color-darkgrey); content: ""; height: 1px; left: 3px; position: absolute; transition: all 0.2s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s; width: 24px; } .has-cover .gh-burger:after, .has-cover .gh-burger:before { background-color: #fff; } .gh-burger:before { top: 11px; } .gh-burger:after { bottom: 11px; } .gh-head-open .gh-burger:before { top: 15px; transform: rotate(45deg); } .gh-head-open .gh-burger:after { bottom: 14px; transform: rotate(-45deg); } @media (max-width: 767px) { #gh-head { height: 64px; } #gh-head .gh-head-inner { gap: 48px; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } #gh-head .gh-head-brand { align-items: center; display: grid; grid-column-start: 1; grid-template-columns: 1fr auto auto; height: 64px; } #gh-head .gh-head-logo { font-size: 2.2rem; } #gh-head .gh-head-brand .gh-search { margin-left: -6px; } #gh-head .gh-burger { display: block; } #gh-head .gh-head-actions, #gh-head .gh-head-menu { justify-content: center; opacity: 0; position: fixed; visibility: hidden; } #gh-head .gh-head-menu { margin: 0; transform: translateY(0); transition: none; } #gh-head .nav { align-items: center; gap: 16px; line-height: 1.4; } #gh-head .nav a { font-size: 2.6rem; font-weight: 600; text-transform: none; } #gh-head .nav li { opacity: 0; transform: translateY(-4px); } #gh-head :is(.gh-head-button, .gh-head-link) { opacity: 0; transform: translateY(8px); } #gh-head .gh-head-button { font-size: 1.8rem; opacity: 0; text-transform: none; transform: translateY(8px); width: 100%; } .gh-head-open #gh-head { -webkit-overflow-scrolling: touch; height: 100%; inset: 0; overflow-y: scroll; position: fixed; z-index: 3999999; } .gh-head-open.has-cover #gh-head, .gh-head-open.has-cover #gh-head .gh-head-actions { background-color: var(--ghost-accent-color); } .gh-head-open #gh-head .gh-head-actions, .gh-head-open #gh-head .gh-head-menu { opacity: 1; position: static; visibility: visible; } .gh-head-open #gh-head .nav { display: flex; flex-direction: column; } .gh-head-open #gh-head .nav li { opacity: 1; transform: translateY(0); transition: transform 0.2s, opacity 0.2s; } .gh-head-open #gh-head .gh-head-actions { align-items: center; background-color: #fff; bottom: 0; display: inline-flex; flex-direction: column; gap: 12px; left: 0; padding: max(4vmin, 20px) 0 max(4vmin, 28px); position: -webkit-sticky; position: sticky; right: 0; } .gh-head-open #gh-head :is(.gh-head-button, .gh-head-link) { opacity: 1; transform: translateY(0); transition: transform 0.4s, opacity 0.4s; transition-delay: 0.2s; } .gh-head-open #gh-head .gh-head-link { transition-delay: 0.4s; } } .post-feed { display: grid; gap: 4.8vmin 4vmin; grid-template-columns: repeat(6, 1fr); padding: max(4.8vmin, 36px) 0 0; position: relative; margin-bottom: 22vmin; } :is(.tag-template, .author-template) .post-feed { margin-top: 4vmin; } @media (max-width: 991px) { .post-feed { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .post-feed { grid-gap: 40px; grid-template-columns: 1fr; } } .post-card { background-size: cover; display: flex; flex-direction: column; grid-column: span 2; position: relative; word-break: break-word; } .post-card-image-link { display: block; margin-bottom: 32px; overflow: hidden; position: relative; } .post-card-image-link:after { content: ""; display: block; padding-bottom: 55%; } .post-card[class*="post-access-"] .post-card-image-link:after { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background-color: rgba(0, 0, 0, 0.5); } .post-card.keep-ratio[class*="post-access-"] .post-card-image-link:after { inset: 0; padding-bottom: 0; position: absolute; } .post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link:after { padding-bottom: 0; } .post-card-image { background: var(--color-lightgrey) no-repeat center center; height: 100%; inset: 0; -o-object-fit: cover; object-fit: cover; position: absolute; width: 100%; } .post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image { position: static; } .post-card-access { align-items: center; color: #fff; display: flex; font-size: 1.5rem; font-weight: 600; gap: 4px; inset: 0; justify-content: center; position: absolute; z-index: 10; } .post-card-content-link { color: var(--color-darkgrey); display: block; position: relative; } .post-card-content-link:hover { text-decoration: none; } .post-feed .no-image .post-card-content-link { padding: 0; } .no-image .post-card-header { margin-top: 0; } .post-card-tags { align-items: center; color: var(--color-secondary-text); display: flex; font-size: 1.4rem; font-weight: 600; gap: 12px; letter-spacing: -0.005em; line-height: 1; margin: 0 0 10px; } .post-card-featured { align-items: center; color: var(--ghost-accent-color); display: flex; gap: 3px; padding-left: 18px; position: relative; } .post-card-featured svg { left: 0; position: absolute; } .post-card-title { font-size: 2.6rem; font-weight: 800; line-height: 1.2; margin: 0; } .post-card-content-link:hover .post-card-title { opacity: 0.9; } .no-image .post-card-title { margin-top: 0; } .has-serif-title .post-card-title { font-family: var(--font-serif); letter-spacing: -0.005em; } .post-card-title svg { margin-left: -1px; margin-top: -3px; } .post-card-content { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; } .post-card-excerpt { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; font-size: 1.6rem; line-height: 1.5; margin-top: 12px; max-width: 720px; overflow-y: hidden; word-break: break-word; } .has-sans-body .post-card-excerpt { font-family: var(--font-sans); } .post-card:not(.post-card-large):not(.post-card-full):not(.dynamic):not(.no-image) .post-card-excerpt { -webkit-line-clamp: 2; } :is(.tag-template, .author-template) .post-card-excerpt { margin-top: 6px; } :is(.tag-template, .author-template) .post-card-large .post-card-excerpt { display: block; overflow-y: auto; } .post-card-meta { color: var(--color-secondary-text); font-size: 1.3rem; margin-top: 12px; padding: 0; } .post-card-meta, .post-card-meta > * { align-items: center; display: flex; gap: 6px; } .post-card-meta > * + :not(script):before { background-color: var(--color-secondary-text); border-radius: 50%; content: ""; height: 2px; width: 2px; } .post-card-meta .sep { margin: 0 4px; } .author-profile-image { background: #fff; border-radius: 100%; display: block; height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } .author-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 0 4px; padding: 0; } .author-list-item { flex-shrink: 0; margin: 0; padding: 0; position: relative; } @media (min-width: 1001px) { .post-card-large { grid-gap: 4vmin; border-top: 0; display: grid; grid-column: span 6; grid-template-columns: repeat(3, 1fr); } .post-card-large:not(.no-image) .post-card-header { margin-top: 0; } .post-card-large .post-card-image-link { grid-column: span 2; margin-bottom: 0; position: relative; } .post-card-large .post-card-content { grid-column: span 1; } .post-card-large.no-image .post-card-content { grid-column: span 2; } .post-card-large .post-card-image { height: 100%; position: absolute; width: 100%; } .post-card-large .post-card-tags { margin-bottom: 12px; } .post-card-large .post-card-title { font-size: 4.4rem; line-height: 1.05; margin-top: 0; } .post-card-large .post-card-excerpt { margin-top: 16px; } .post-card-full { grid-column: span 6; } .post-card-full .post-card-image-link { margin-bottom: 40px; } .post-card-full .post-card-tags { margin-bottom: 14px; } .post-card-full .post-card-title { font-size: 6.4rem; line-height: 0.95; } .post-card-full .post-card-excerpt { font-size: 1.8rem; margin-top: 20px; } .post-card-large + .post-card-large:nth-child(2n) { margin: 32px 0; } .post-card-large + .post-card-large:nth-child(2n) .post-card-content { order: -1; } .post-card.dynamic { grid-column: span 3; } .post-card.dynamic .post-card-title { font-size: 3rem; } } .pagination { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; margin-top: 8vmin; } html.no-infinite-scroll .pagination { display: grid; } .pagination a { font-size: 1.7rem; font-weight: 600; } .pagination .page-number { color: var(--color-secondary-text); grid-column-start: 2; } .pagination .older-posts { grid-column-start: 3; text-align: right; } @media (max-width: 767px) { .pagination .page-number { display: none; } } .article { word-break: break-word; } .post-template .article { padding: max(15vmin, 40px) 0 max(8vmin, 64px); } .post-template .article-header { padding: 0 0 max(6.4vmin, 40px); } .page-template .article-header { padding: max(12vmin, 64px) 0 max(3.2vmin, 28px); } .article-tag { font-size: 1.6rem; margin-bottom: 16px; } .article-tag a { color: var(--color-secondary-text); } .article-title { color: var(--color-darkgrey); font-size: clamp(3.2rem, 5vw, 5.2rem); font-weight: 800; line-height: 1.05; margin-bottom: 0; } .has-serif-title .article-title { font-family: var(--font-serif); } .article-excerpt { color: var(--color-darkgrey); font-size: 2rem; line-height: 1.45; margin-top: 20px; max-width: 720px; } .gh-canvas .article-image { grid-column: wide-start/wide-end; margin: max(6.4vmin, 40px) 0 0; width: 100%; } .image-full .article-image { grid-column: full-start/full-end; } .image-small .article-image { grid-column: main-start/main-end; } @media (max-width: 900px) { .gh-canvas .article-image img { display: block; margin-left: auto; margin-right: auto; width: 100%; } } @media (min-width: 1000px){ .gh-canvas .article-image img { display: block; margin-left: auto; margin-right: auto; width: 75%; } } @media (max-width: 767px) { .article-excerpt { font-size: 1.7rem; margin-top: 14px; } } .gh-canvas, .kg-width-full.kg-content-wide { --gap: max(4vmin, 20px); --main: min(var(--content-width, 1100px), 100% - var(--gap) * 2); --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2)); --full: minmax(var(--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-start/main-end; } .kg-content-wide > div, .kg-width-wide { grid-column: wide-start/wide-end; } .kg-width-full { grid-column: full-start/full-end; } .kg-width-full img { width: 100%; } .gh-content > * + * { /* margin-bottom: 0; margin-top: max(3.2vmin, 24px); */ } .gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) { margin-top: 0; } .gh-content > [id] { color: var(--color-darkgrey); margin: 0; } .has-serif-title .gh-content > [id] { font-family: var(--font-serif); } .gh-content > [id]:not(:first-child) { margin: 0.5em 0 0; } .gh-content > [id] + * { margin-top: 0.7rem !important; } .gh-content > blockquote, .gh-content > hr { /* margin-top: max(4.8vmin, 32px); */ position: relative; } .gh-content > blockquote + *, .gh-content > hr + * { /*margin-top: max(4.8vmin, 32px) !important; */ } .gh-content a { text-decoration: underline; word-break: break-word; } .gh-content > blockquote:not([class]), .gh-content > dl, .gh-content > ol, .gh-content > p, .gh-content > ul { font-family: var(--font-serif); font-weight: 400; line-height: 1.6em; font-size: 1.7rem; } .page-template .gh-content:only-child > :first-child:not(.kg-width-full) { margin-top: max(12vmin, 64px); } .page-template .gh-content > :last-child:not(.kg-width-full) { margin-bottom: max(12vmin, 64px); } .gh-content .kg-callout-card .kg-callout-text, .gh-content .kg-toggle-card .kg-toggle-content > ol, .gh-content .kg-toggle-card .kg-toggle-content > p, .gh-content .kg-toggle-card .kg-toggle-content > ul { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 400; line-height: 1.6em; } .gh-content .kg-product-card .kg-product-card-description > ol, .gh-content .kg-product-card .kg-product-card-description > p, .gh-content .kg-product-card .kg-product-card-description > ul { font-size: 1.7rem; line-height: 1.6em; } .gh-content .kg-callout-card .kg-callout-emoji { font-size: 2.1rem; line-height: 1.4em; } .gh-content .kg-toggle-card .kg-toggle-heading-text { font-size: 2rem; } .has-sans-body .gh-content .kg-callout-card .kg-callout-text, .has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > ol, .has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > p, .has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > ul, .has-sans-body .gh-content > blockquote, .has-sans-body .gh-content > dl, .has-sans-body .gh-content > ol, .has-sans-body .gh-content > p, .has-sans-body .gh-content > ul { font-family: var(--font-sans); } .gh-content .kg-product-card .kg-product-card-description > ol, .gh-content .kg-product-card .kg-product-card-description > ul, .gh-content .kg-toggle-card .kg-toggle-content > ol, .gh-content .kg-toggle-card .kg-toggle-content > ul, .gh-content > dl, .gh-content > ol, .gh-content > ul { padding-left: 1.9em; } .gh-content > blockquote:not([class]) { font-style: italic; padding: 0; position: relative; background: #ffffff1a; } .gh-content > blockquote:not([class]):before { background: var(--ghost-accent-color); bottom: 0; content: ""; left: -1.5em; position: absolute; top: 0; width: 0.3rem; } .gh-content :not(pre) > code { background: #f0f6f9; border: 1px solid #e1eaef; border-radius: 0.25em; color: #15171a; font-size: 0.9em; font-weight: 400 !important; line-height: 1em; padding: 0.15em 0.4em; vertical-align: middle; } .gh-content pre { background: var(--color-darkgrey); border-radius: 5px; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4); color: var(--color-wash); font-size: 1.4rem; line-height: 1.5em; overflow: auto; } .gh-content ol ol li { list-style-type: lower-alpha; } .gh-content ol ol ol li { list-style-type: lower-roman; } @media (max-width: 650px) { .gh-content .kg-callout-card .kg-callout-text, .gh-content .kg-toggle-card .kg-toggle-content > ol, .gh-content .kg-toggle-card .kg-toggle-content > p, .gh-content .kg-toggle-card .kg-toggle-content > ul, .gh-content > blockquote:not([class]), .gh-content > dl, .gh-content > ol, .gh-content > p, .gh-content > ul { font-size: 1.8rem; } .gh-content .kg-product-card .kg-product-card-description > ol, .gh-content .kg-product-card .kg-product-card-description > p, .gh-content .kg-product-card .kg-product-card-description > ul { font-size: 1.6rem; } .gh-content blockquote:not([class]):before { left: min(-4vmin, -20px); } } .gh-content .kg-card + :not(.kg-card), .gh-content :not(.kg-card):not([id]) + .kg-card { margin-top: 2.5vmin; /*margin-bottom: 1vmin;*/ } .kg-embed-card { align-items: center; display: flex; flex-direction: column; /* width: 100%;*/ } .kg-image-card img { margin: auto; } .kg-gallery-image, .kg-image[width][height] { cursor: pointer; } .has-serif-title .kg-toggle-card .kg-toggle-heading-text { font-family: var(--font-serif); } .gh-content .kg-callout-card-accent a { text-decoration: underline; } .kg-blockquote-alt { color: var(--color-midgrey); font-family: var(--font-serif); } .has-sans-body .kg-blockquote-alt { font-family: var(--font-sans); } .kg-card.kg-header-card.kg-style-dark { background: var(--color-darkgrey); } .kg-header-card.kg-style-light h2.kg-header-card-header { color: #0a0b0c; } .has-serif-title .kg-header-card h2.kg-header-card-header { font-family: var(--font-serif); } figcaption { color: grey; font-size: 1.3rem; line-height: 1.4em; padding: 1.5rem 1.5rem 0; text-align: center; } figcaption strong { color: rgba(0, 0, 0, 0.8); } figcaption a { text-decoration: underline; } iframe.instagram-media { margin: 6vmin auto 0 !important; } iframe.instagram-media + script + :not([id]) { margin-top: 6vmin; } .kg-width-full.kg-card-hascaption { display: grid; grid-template-columns: inherit; } .kg-width-wide.kg-card-hascaption img { grid-column: wide-start/wide-end; } .kg-width-full.kg-card-hascaption img { grid-column: 1/-1; } .kg-width-full.kg-card-hascaption figcaption { grid-column: main-start/main-end; } .article-comments { margin: 6vmin 0 0; } .footnotes-sep { margin-bottom: 30px; } .footnotes { font-size: 1.5rem; } .footnotes p { margin: 0; } .footnote-backref { box-shadow: none !important; font-size: 1.2rem; font-weight: 700; text-decoration: none !important; } .gh-content table:not(.gist table) { -webkit-overflow-scrolling: touch; background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0, transparent 75%) 0, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0, transparent 75%) 100%; background-attachment: scroll, scroll; background-repeat: no-repeat; background-size: 10px 100%, 10px 100%; border-collapse: collapse; border-spacing: 0; display: inline-block; font-family: var(--font-sans); font-size: 1.6rem; max-width: 100%; overflow-x: auto; vertical-align: top; white-space: nowrap; width: auto; } .gh-content table:not(.gist table) td:first-child { /* background-image: linear-gradient(90deg, #fff 50%, hsla(0, 0%, 100%, 0)); */ background-repeat: no-repeat; background-size: 20px 100%; } .gh-content table:not(.gist table) td:last-child { /* background-image: linear-gradient(270deg, #fff 50%, hsla(0, 0%, 100%, 0)); */ background-position: 100% 0; background-repeat: no-repeat; background-size: 20px 100%; } .gh-content table:not(.gist table) th { /* background-color: #f4f8fb; */ color: var(--color-darkgrey); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.2px; text-align: left; text-transform: uppercase; } .gh-content table:not(.gist table) td, .gh-content table:not(.gist table) th { border: 1px solid #e2ecf3; padding: 6px 12px; } .article-byline { display: flex; justify-content: space-between; margin: min(100px, 3.5vmin) 0 0; } .article-byline-content { align-items: center; display: flex; flex-grow: 1; } .article-byline-content .author-list { justify-content: flex-start; padding: 0 14px 0 0; } .article-byline-meta { color: var(--color-secondary-text); font-size: 1.4rem; line-height: 1.2em; } .article-byline-meta .author-name { font-size: 1.7rem; font-weight: 700; letter-spacing: 0; margin: 0 0 6px; } .article-byline-meta .bull { display: inline-block; margin: 0 2px; } .author-avatar { background-color: var(--color-border); border: 2px solid #fff; border-radius: 50%; display: block; height: min(56px, 13.6vmin); margin: 0 -4px; overflow: hidden; width: min(56px, 13.6vmin); } .page-template .article-title { margin-bottom: 0; } @media (max-width: 767px) { .article-byline-content .author-list { padding-right: 12px; } .article-byline-meta .author-name { margin-bottom: 4px; } } .footer-cta { position: relative; text-align: center; } .footer-cta-title { font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 800; margin: 0 0 min(24px, 6.4vmin); } .has-serif-title .footer-cta-title { font-family: var(--font-serif); } .footer-cta-button { align-items: center; background: #2b2828; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-secondary-text); display: inline-flex; font-size: 1.7rem; justify-content: space-between; max-width: 500px; padding: 5px 5px 5px 15px; position: relative; transition: border-color 0.2s; width: 100%; } .footer-cta-button:hover { border-color: #c2c2c2; } .footer-cta-button span { background: var(--ghost-accent-color); border-radius: 6px; color: black; display: inline-block; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.005em; padding: 9px 15px; } .read-more-wrap { margin-top: 2.4vmin; } .footer-cta + .read-more-wrap { margin-top: max(12vmin, 72px); margin-bottom: 15vmin; } .read-more { grid-gap: 4vmin; display: grid; grid-template-columns: repeat(6, 1fr); } .read-more .post-card-tags { display: none; } @media (max-width: 1000px) { .read-more { grid-template-columns: repeat(4, 1fr); } .read-more .post-card:nth-child(3) { display: none; } } @media (max-width: 700px) { .read-more { grid-template-columns: repeat(2, 1fr); } .read-more .post-card:nth-child(2) { display: none; } } .comments { align-items: center; display: flex; flex-direction: column; margin: 60px 0 44px; } .comments-head { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 32px; max-width: 720px; width: 100%; } .comments h2 { font-size: 3.4rem; font-weight: 800; max-width: 720px; width: 100%; } .comments .comment-count { color: var(--color-midgrey); font-weight: 600; white-space: nowrap; } .comments #ghost-comments-root { max-width: 720px; width: 100%; } .author-profile-pic { background: #fff; border-radius: 50%; display: block; height: 80px; margin: 0 0 2rem; -o-object-fit: cover; object-fit: cover; width: 80px; } .author-profile-footer { margin-top: 16px; } .author-profile-location { font-weight: 700; } .author-profile-meta { display: flex; gap: 10px; } .author-profile-social-link { color: var(--color-secondary-text); font-size: 1.3rem; } .author-profile-social-link:hover { color: var(--color-darkgrey); } .author-profile-social-link svg { height: 16px; width: 16px; } @media (min-width: 1001px) { .author-template .post-card-large .post-card-content:only-child { grid-column: span 2; max-width: 640px; } } .tag-template .post-card-large .post-card-image-link { grid-column: 2 / span 2; order: 2; } .tag-template .post-card-large .post-card-content { order: 1; } @media (min-width: 1001px) { .tag-template .post-card-large .post-card-content:only-child { grid-column: span 2; max-width: 640px; } } .error-content { padding: 14vw 4vw 2vw; } .error-message { padding-bottom: 10vw; text-align: center; } .error-code { font-size: 12vw; letter-spacing: -5px; line-height: 1em; margin: 0; } .error-description { color: var(--color-secondary-text); font-size: 3.2rem; font-weight: 400; letter-spacing: -0.005em; line-height: 1.3em; margin: 0; } .error-link { display: inline-block; margin-top: 5px; } @media (min-width: 940px) { .error-content .post-card { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } } @media (max-width: 800px) { .error-content { padding-top: 24vw; } .error-code { font-size: 11.2rem; } .error-message { padding-bottom: 16vw; } .error-description { font-size: 1.8rem; margin: 5px 0 0; } } @media (max-width: 500px) { .error-content { padding-top: 28vw; } .error-message { padding-bottom: 14vw; } } .site-footer { background: #0a0b0c; color: #fff; margin: max(12vmin, 64px) 0 0; padding-bottom: 140px; padding-top: 48px; position: relative; } .page-template .site-footer { margin-top: 0; } .site-footer .inner { grid-gap: 40px; color: hsla(0, 0%, 100%, 0.7); display: grid; font-size: 1.3rem; grid-template-columns: auto 1fr auto; } .site-footer .copyright a { color: #fff; font-weight: 500; letter-spacing: -0.015em; } .site-footer a { color: hsla(0, 0%, 100%, 0.7); } .site-footer a:hover { color: #fff; text-decoration: none; } .site-footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0 0 20px; padding: 0; } .site-footer-nav li { align-items: center; display: inline-flex; line-height: 2em; margin: 0; padding: 0; } .site-footer-nav a { align-items: center; display: inline-flex; margin-left: 10px; position: relative; } .site-footer-nav li:not(:first-child) a:before { background: #fff; border-radius: 100%; content: ""; display: block; height: 2px; margin: 0 10px 0 0; width: 2px; } @media (max-width: 767px) { .site-footer .inner { grid-gap: 0; grid-template-columns: 1fr; max-width: 500px; text-align: center; } .site-footer .copyright, .site-footer .copyright a { color: #fff; font-size: 1.5rem; } .site-footer .copyright { margin-bottom: 16px; } } html.dark-mode body { background: var(--color-darkmode); color: hsla(0, 0%, 100%, 0.75); } html.dark-mode img { opacity: 0.9; } html.dark-mode kbd { background: #212427; } html.dark-mode figcaption a { color: #fff; } html.dark-mode body:not(.has-cover) .gh-head { background: var(--color-darkmode); color: #fff; } html.dark-mode .gh-burger:after, html.dark-mode .gh-burger:before { background-color: #fff; } html.dark-mode .site-header-content { color: #fff; } html.dark-mode .post-card-image { background: var(--color-darkmode); } html.dark-mode :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content, .pagination .page-number) { color: #5f5f5f; } html.dark-mode .post-card-featured, html.dark-mode .post-card-title { color: #fff; } html.dark-mode .post-card-excerpt { color: var(--color-secondary-text); } html.dark-mode .article-title, html.dark-mode .author-profile-location, html.dark-mode .author-profile-social-link:hover, html.dark-mode .pagination a { color: #fff; } html.dark-mode .article-excerpt { color: var(--color-secondary-text); } html.dark-mode .post-full-image { background-color: #282b2f; } html.dark-mode .author-avatar { background-color: #282b2f; border-color: var(--color-darkmode); } html.dark-mode .author-profile-image { opacity: 1; } html.dark-mode .author-profile-image path { fill: var(--color-darkmode); } html.dark-mode .article-byline-meta .author-name a { color: #fff; } html.dark-mode .no-image .author-social-link a { color: hsla(0, 0%, 100%, 0.75); } html.dark-mode .gh-content > [id] { color: hsla(0, 0%, 100%, 0.9); } html.dark-mode .gh-content pre { background: #030303; } html.dark-mode .gh-content :not(pre) > code { background: #23262b; border-color: #282b2f; color: var(--color-wash); } :where(html.dark-mode) .gh-content a { color: #fff; } html.dark-mode .gh-content em, html.dark-mode .gh-content strong { color: #fff; } html.dark-mode .gh-content code { background: #000; color: #fff; } html.dark-mode hr { border-top-color: #282b2f; } html.dark-mode .gh-content hr:after { background: #282b2f; box-shadow: var(--color-darkmode) 0 0 0 5px; } html.dark-mode figcaption { color: hsla(0, 0%, 100%, 0.6); } html.dark-mode .gh-content table:not(.gist table) td:first-child { background-image: linear-gradient(to right, var(--color-darkmode) 50%, rgba(21, 23, 25, 0) 100%); } html.dark-mode .gh-content table:not(.gist table) td:last-child { background-image: linear-gradient(to left, var(--color-darkmode) 50%, rgba(21, 23, 25, 0) 100%); } html.dark-mode .gh-content table:not(.gist table) th { background-color: #282b2f; color: hsla(0, 0%, 100%, 0.85); } html.dark-mode .gh-content table:not(.gist table) td, html.dark-mode .gh-content table:not(.gist table) th { border: 1px solid #282b2f; } html.dark-mode .gh-content :is(input, textarea) { color: #303a3e; } html.dark-mode .site-archive-header .no-image { background: var(--color-darkmode); color: hsla(0, 0%, 100%, 0.9); } html.dark-mode .kg-header-card.kg-style-dark { background: #0a0b0c; } html.dark-mode .kg-header-card.kg-style-light { background: #202328; } html.dark-mode .footer-cta-title, html.dark-mode .kg-header-card h2.kg-header-card-header, html.dark-mode .kg-header-card h3.kg-header-card-subheader { color: #fff; } @media (max-width: 767px) { html.dark-mode .gh-head-open:not(.has-cover) #gh-head, html.dark-mode .gh-head-open:not(.has-cover) #gh-head .gh-head-actions { background: var(--color-darkmode); } } @media (prefers-color-scheme: dark) { html.auto-color body { background: var(--color-darkmode); color: hsla(0, 0%, 100%, 0.75); } html.auto-color img { opacity: 0.9; } html.auto-color kbd { background: #212427; } html.auto-color figcaption a { color: #fff; } html.auto-color body:not(.has-cover) .gh-head { background: var(--color-darkmode); color: #fff; } html.auto-color .gh-burger:after, html.auto-color .gh-burger:before { background-color: #fff; } html.auto-color .site-header-content { color: #fff; } html.auto-color .post-card-image { background: var(--color-darkmode); } html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content, .pagination .page-number) { color: #5f5f5f; } html.auto-color .post-card-featured, html.auto-color .post-card-title { color: #fff; } html.auto-color .post-card-excerpt { color: var(--color-secondary-text); } html.auto-color .article-title, html.auto-color .author-profile-location, html.auto-color .author-profile-social-link:hover, html.auto-color .pagination a { color: #fff; } html.auto-color .article-excerpt { color: var(--color-secondary-text); } html.auto-color .post-full-image { background-color: #282b2f; } html.auto-color .author-avatar { background-color: #282b2f; border-color: var(--color-darkmode); } html.auto-color .author-profile-image { opacity: 1; } html.auto-color .author-profile-image path { fill: var(--color-darkmode); } html.auto-color .article-byline-meta .author-name a { color: #fff; } html.auto-color .no-image .author-social-link a { color: hsla(0, 0%, 100%, 0.75); } html.auto-color .gh-content > [id] { color: hsla(0, 0%, 100%, 0.9); } html.auto-color .gh-content pre { background: #030303; } html.auto-color .gh-content :not(pre) > code { background: #23262b; border-color: #282b2f; color: var(--color-wash); } :where(html.auto-color) .gh-content a { color: #fff; } html.auto-color .gh-content em, html.auto-color .gh-content strong { color: #fff; } html.auto-color .gh-content code { background: #000; color: #fff; } html.auto-color hr { border-top-color: #282b2f; } html.auto-color .gh-content hr:after { background: #282b2f; box-shadow: var(--color-darkmode) 0 0 0 5px; } html.auto-color figcaption { color: hsla(0, 0%, 100%, 0.6); } html.auto-color .gh-content table:not(.gist table) td:first-child { background-image: linear-gradient(to right, var(--color-darkmode) 50%, rgba(21, 23, 25, 0) 100%); } html.auto-color .gh-content table:not(.gist table) td:last-child { background-image: linear-gradient(to left, var(--color-darkmode) 50%, rgba(21, 23, 25, 0) 100%); } html.auto-color .gh-content table:not(.gist table) th { background-color: #282b2f; color: hsla(0, 0%, 100%, 0.85); } html.auto-color .gh-content table:not(.gist table) td, html.auto-color .gh-content table:not(.gist table) th { border: 1px solid #282b2f; } html.auto-color .gh-content :is(input, textarea) { color: #303a3e; } html.auto-color .site-archive-header .no-image { background: var(--color-darkmode); color: hsla(0, 0%, 100%, 0.9); } html.auto-color .kg-header-card.kg-style-dark { background: #0a0b0c; } html.auto-color .kg-header-card.kg-style-light { background: #202328; } html.auto-color .footer-cta-title, html.auto-color .kg-header-card h2.kg-header-card-header, html.auto-color .kg-header-card h3.kg-header-card-subheader { color: #fff; } @media (max-width: 767px) { html.auto-color .gh-head-open:not(.has-cover) #gh-head, html.auto-color .gh-head-open:not(.has-cover) #gh-head .gh-head-actions { background: var(--color-darkmode); } } } .pswp { -webkit-text-size-adjust: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: none; height: 100%; left: 0; outline: none; overflow: hidden; position: absolute; top: 0; touch-action: none; width: 100%; z-index: 3999999; } .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: -webkit-grab; cursor: grab; } .pswp--dragging .pswp__img { cursor: -webkit-grabbing; cursor: grabbing; } .pswp__bg { -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: rgba(0, 0, 0, 0.85); opacity: 0; transform: translateZ(0); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); will-change: opacity; } .pswp__bg, .pswp__scroll-wrap { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .pswp__scroll-wrap { overflow: hidden; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; backface-visibility: hidden; bottom: 0; left: 0; position: absolute; right: 0; top: 0; touch-action: none; } .pswp__container, .pswp__img { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pswp__zoom-wrap { position: absolute; transform-origin: left top; transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); width: 100%; } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { transition: none; } .pswp__item { bottom: 0; overflow: hidden; right: 0; } .pswp__img, .pswp__item { left: 0; position: absolute; top: 0; } .pswp__img { height: auto; width: auto; } .pswp__img--placeholder { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pswp__img--placeholder--blank { background: #000; } .pswp--ie .pswp__img { height: auto !important; left: 0; top: 0; width: 100% !important; } .pswp__error-msg { color: var(--color-secondary-text); font-size: 14px; left: 0; line-height: 16px; margin-top: -8px; position: absolute; text-align: center; top: 50%; width: 100%; } .pswp__error-msg a { color: var(--color-secondary-text); text-decoration: underline; } .pswp__button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; box-shadow: none; cursor: pointer; display: block; float: right; height: 44px; margin: 0; overflow: visible; padding: 0; position: relative; transition: opacity 0.2s; width: 44px; } .pswp__button:focus, .pswp__button:hover { opacity: 1; } .pswp__button:active { opacity: 0.9; outline: none; } .pswp__button::-moz-focus-inner { border: 0; padding: 0; } .pswp__ui--over-close .pswp__button--close { opacity: 1; } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(../images/default-skin.png) 0 0 no-repeat; background-size: 264px 88px; height: 44px; width: 44px; } @media (-webkit-min-device-pixel-ratio: 1.09375), (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 1.1dppx), (min-resolution: 105dpi) { .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 { background-position: -88px 0; display: none; } .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 { background: none; height: 100px; margin-top: -50px; position: absolute; top: 50%; width: 70px; } .pswp__button--arrow--left { left: 0; } .pswp__button--arrow--right { right: 0; } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ""; height: 30px; position: absolute; top: 35px; width: 32px; } .pswp__button--arrow--left:before { background-position: -138px -44px; left: 6px; } .pswp__button--arrow--right:before { background-position: -94px -44px; right: 6px; } .pswp__counter { color: #fff; font-size: 11px; font-weight: 700; height: 44px; left: 0; line-height: 44px; padding: 0 15px; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pswp__caption { bottom: 0; left: 0; min-height: 44px; position: absolute; width: 100%; } .pswp__caption__center { color: #fff; font-size: 11px; line-height: 1.6; margin: 0 auto; max-width: 420px; padding: 25px 15px 30px; text-align: center; } .pswp__caption__center .post-caption-title { font-size: 15px; font-weight: 500; margin-bottom: 7px; text-transform: uppercase; } .pswp__caption__center .post-caption-meta-item + .post-caption-meta-item:before { content: "\02022"; padding: 0 4px; } .pswp__caption--empty { display: none; } .pswp__caption--fake { visibility: hidden; } .pswp__preloader { direction: ltr; height: 44px; left: 50%; margin-left: -22px; opacity: 0; position: absolute; top: 0; transition: opacity 0.25s ease-out; width: 44px; will-change: opacity; } .pswp__preloader__icn { height: 20px; margin: 12px; width: 20px; } .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 { -webkit-animation: clockwise 0.5s linear infinite; animation: clockwise 0.5s linear infinite; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1s cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1s cubic-bezier(0.4, 0, 0.22, 1) infinite; } .pswp--css_animation .pswp__preloader__icn { background: none; height: 14px; left: 15px; margin: 0; opacity: 0.75; position: absolute; top: 15px; width: 14px; } .pswp--css_animation .pswp__preloader__cut { height: 14px; overflow: hidden; position: relative; width: 7px; } .pswp--css_animation .pswp__preloader__donut { background: none; border-color: #fff #fff transparent transparent; border-radius: 50%; border-style: solid; border-width: 2px; box-sizing: border-box; height: 14px; left: 0; margin: 0; position: absolute; top: 0; width: 14px; } @media screen and (max-width: 1024px) { .pswp__preloader { float: right; left: auto; margin: 0; position: relative; top: auto; } } @-webkit-keyframes clockwise { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } @keyframes clockwise { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } @-webkit-keyframes donut-rotate { 0% { transform: rotate(0); } 50% { transform: rotate(-140deg); } to { transform: rotate(0); } } @keyframes donut-rotate { 0% { transform: rotate(0); } 50% { transform: rotate(-140deg); } to { transform: rotate(0); } } .pswp__ui { -webkit-font-smoothing: auto; opacity: 1; visibility: visible; z-index: 1550; } .pswp__top-bar { height: 44px; left: 0; position: absolute; top: 0; width: 100%; } .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right, .pswp__caption, .pswp__top-bar { -webkit-backface-visibility: hidden; 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__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right, .pswp__ui--idle .pswp__top-bar { opacity: 0; } .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__top-bar { 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; } /* Inline code block overwrites */ code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; border: 1px solid #E1E1E1; border-radius: 4px; display: inline-block; max-width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; vertical-align: baseline; -webkit-overflow-scrolling: touch; position: relative; }