/*
 * Kerem Portfolio blog content system.
 * Shared by the public templates and Gutenberg so editorial decisions match.
 */

:where(.journal-entry, .journal-archive, .home-journal, .editor-styles-wrapper) {
  --blog-reading-width: 780px;
  --blog-wide-width: 1400px;
  --blog-heading-font: "Manrope Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --blog-body-font: "Manrope Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --blog-body-size: clamp(1.0625rem, 1rem + 0.24vw, 1.2rem);
  --blog-title-size: clamp(3.5rem, 2rem + 6.2vw, 8rem);
  --blog-line-height: 1.72;
  --blog-block-gap: 1.45em;
  --blog-card-radius: 18px;
  --blog-focal-x: 50%;
  --blog-focal-y: 50%;
  --blog-bg: var(--paper, #f7f7f2);
  --blog-text: var(--ink, #171714);
  --blog-muted: var(--muted, #66665f);
  --blog-surface: var(--surface, #e9e9df);
  --blog-link: var(--ink, #171714);
  color: var(--blog-text);
}

/* Article hero and natural, responsive source media. */

.journal-entry .article-hero {
  grid-template-columns: minmax(0, 1fr) minmax(9rem, auto);
  padding-top: clamp(5rem, 11vw, 10rem);
  border-bottom: 1px solid var(--line, rgb(23 23 20 / 16%));
}

.journal-entry .entry-title {
  max-width: 15ch;
  margin: 0;
  font-family: var(--blog-heading-font);
  font-size: var(--blog-title-size);
  font-weight: 680;
  letter-spacing: -0.065em;
  line-height: 0.96;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.journal-entry[data-title-scale="compact"] .entry-title {
  --blog-title-size: clamp(2.45rem, 1.8rem + 2.8vw, 4.6rem);
}

.journal-entry[data-title-scale="standard"] .entry-title {
  --blog-title-size: clamp(3rem, 1.9rem + 4.5vw, 6.25rem);
}

.journal-entry[data-title-scale="display"] .entry-title {
  --blog-title-size: clamp(3.5rem, 2rem + 6.2vw, 8rem);
}

.journal-entry .article-hero__eyebrow {
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  color: var(--blog-muted);
}

.journal-entry .article-hero__lead {
  max-width: 54ch;
  margin: clamp(1.35rem, 2.4vw, 2.25rem) 0 0;
  color: var(--blog-muted);
  font-family: var(--blog-body-font);
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.55rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.journal-entry .article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem 0.7rem;
  color: var(--blog-muted);
  text-align: right;
}

.journal-entry .article-hero__meta span + span::before,
.journal-entry .article-hero__meta time + span::before {
  margin-right: 0.7rem;
  color: var(--blog-muted);
  content: "\00b7";
}

.journal-entry__media {
  width: min(var(--blog-wide-width), calc(100vw - 40px));
  max-width: none;
  margin-inline: auto;
  border-radius: clamp(14px, 2vw, 28px);
}

.journal-entry__media .journal-entry__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: var(--blog-focal-x) var(--blog-focal-y);
}

.journal-entry__media[data-media-mode="cover"],
.journal-entry__media[data-media-mode="contain"] {
  aspect-ratio: var(--blog-hero-ratio, 16 / 9);
}

.journal-entry__media[data-media-mode="cover"] .journal-entry__image,
.journal-entry__media[data-media-mode="contain"] .journal-entry__image {
  width: 100%;
  height: 100%;
}

.journal-entry__media[data-media-mode="cover"] .journal-entry__image {
  object-fit: cover;
}

.journal-entry__media[data-media-mode="contain"] .journal-entry__image {
  object-fit: contain;
}

.journal-entry__media[data-media-mode="natural"],
.journal-entry__media[data-media-mode="natural"] .journal-entry__image,
.journal-entry__media[data-media-ratio="original"] {
  aspect-ratio: auto;
}

.journal-entry__media[data-media-ratio="landscape"] {
  --blog-hero-ratio: 16 / 9;
}

.journal-entry__media[data-media-ratio="editorial"] {
  --blog-hero-ratio: 16 / 10;
}

.journal-entry__media[data-media-ratio="portrait"] {
  --blog-hero-ratio: 4 / 5;
  width: min(860px, calc(100vw - 40px));
}

.journal-entry__media figcaption {
  padding: 0.9rem 0.2rem 0;
  color: var(--blog-muted);
  font-family: var(--blog-body-font);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Reading column and automatic table of contents. */

.journal-entry__body {
  position: relative;
  display: grid;
  width: min(var(--blog-wide-width), calc(100vw - 40px));
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
}

.journal-entry__body.has-toc {
  grid-template-columns: minmax(190px, 0.3fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: start;
}

.journal-toc {
  position: sticky;
  top: calc(var(--header-height, 88px) + 2rem);
  max-height: calc(100dvh - var(--header-height, 88px) - 4rem);
  overflow: auto;
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

.journal-toc__title {
  padding-bottom: 0.75rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid var(--line, rgb(23 23 20 / 16%));
  color: var(--blog-muted);
  font-family: var(--font-mono, monospace);
  font-size: 0.67rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journal-toc ol {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.journal-toc li {
  margin: 0;
}

.journal-toc__level-3,
.journal-toc__level-4 {
  padding-left: 0.85rem;
}

.journal-toc a {
  display: block;
  color: var(--blog-muted);
  font-size: 0.76rem;
  line-height: 1.42;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.journal-toc a:hover,
.journal-toc a:focus-visible {
  color: var(--blog-text);
  transform: translateX(3px);
}

.journal-entry .journal-entry__content.entry-content,
.editor-styles-wrapper .is-root-container {
  width: min(100%, var(--blog-reading-width));
  max-width: var(--blog-reading-width);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  margin-inline: auto;
  color: var(--blog-text);
  font-family: var(--blog-body-font);
  font-size: var(--blog-body-size);
  line-height: var(--blog-line-height);
}

.journal-entry[data-reading-width="narrow"] .journal-entry__content {
  --blog-reading-width: 660px;
}

.journal-entry[data-reading-width="standard"] .journal-entry__content {
  --blog-reading-width: 780px;
}

.journal-entry[data-reading-width="wide"] .journal-entry__content,
.journal-entry[data-layout="wide"] .journal-entry__content,
.journal-entry[data-layout="photo-essay"] .journal-entry__content {
  --blog-reading-width: 920px;
}

.journal-entry[data-body-scale="compact"] .journal-entry__content {
  --blog-body-size: clamp(1rem, 0.98rem + 0.1vw, 1.075rem);
}

.journal-entry[data-body-scale="standard"] .journal-entry__content {
  --blog-body-size: clamp(1.0625rem, 1rem + 0.24vw, 1.2rem);
}

.journal-entry[data-body-scale="large"] .journal-entry__content {
  --blog-body-size: clamp(1.15rem, 1.06rem + 0.35vw, 1.34rem);
}

.journal-entry[data-font-family="manrope"] .journal-entry__content {
  --blog-body-font: "Manrope Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.journal-entry[data-font-family="system"] .journal-entry__content {
  --blog-body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.journal-entry[data-font-family="serif"] .journal-entry__content {
  --blog-body-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Normalized block rhythm. This intentionally supersedes the old blanket figure rule. */

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) > * + * {
  margin-top: var(--blog-block-gap);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(p, li, figcaption, td, th) {
  text-wrap: pretty;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(h2, h3, h4, h5, h6) {
  max-width: 22ch;
  margin-bottom: 0;
  color: var(--blog-text);
  font-family: var(--blog-heading-font);
  font-weight: 680;
  line-height: 1.08;
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-height, 88px) + 2rem);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) h2 {
  margin-top: clamp(2.3em, 8vw, 3.2em);
  font-size: clamp(2.1rem, 1.55rem + 2.4vw, 4rem);
  letter-spacing: -0.055em;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) h3 {
  margin-top: 2.25em;
  font-size: clamp(1.55rem, 1.25rem + 1.25vw, 2.55rem);
  letter-spacing: -0.042em;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) h4 {
  margin-top: 2em;
  font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.6rem);
  letter-spacing: -0.025em;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(ul, ol) {
  padding-left: 1.35em;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) li + li {
  margin-top: 0.55em;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) li::marker {
  color: var(--accent-strong, #c4bb13);
  font-weight: 760;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) a:not(.wp-element-button) {
  color: var(--blog-link);
  text-decoration-color: color-mix(in srgb, var(--blog-link) 50%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) a:not(.wp-element-button):hover {
  text-decoration-color: var(--accent-strong, #c4bb13);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .has-drop-cap:not(:focus)::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  color: var(--blog-text);
  font-family: var(--blog-heading-font);
  font-size: 4.5em;
  font-weight: 720;
  line-height: 0.78;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .is-style-kerem-lead {
  max-width: 40ch;
  color: var(--blog-text);
  font-family: var(--blog-heading-font);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem);
  font-weight: 480;
  letter-spacing: -0.025em;
  line-height: 1.48;
}

/* Quotes and pullquotes. */

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(.wp-block-quote, blockquote) {
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  margin-inline: 0;
  border: 0;
  border-left: 5px solid var(--accent, #e8df3f);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--blog-surface) 72%, transparent);
  color: var(--blog-text);
  font-family: var(--blog-heading-font);
  font-size: clamp(1.2rem, 1.08rem + 0.7vw, 1.7rem);
  line-height: 1.5;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-quote.is-style-kerem-editorial {
  width: min(var(--blog-wide-width), calc(100vw - 40px));
  max-width: none;
  padding: clamp(2rem, 5vw, 4.5rem);
  margin-left: 50%;
  border: 0;
  border-block: 1px solid var(--line, rgb(23 23 20 / 16%));
  border-radius: 0;
  background: transparent;
  font-size: clamp(1.65rem, 1.1rem + 2.2vw, 3.4rem);
  letter-spacing: -0.045em;
  line-height: 1.2;
  transform: translateX(-50%);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(.wp-block-quote cite, .wp-block-pullquote cite) {
  display: block;
  margin-top: 1rem;
  color: var(--blog-muted);
  font-family: var(--blog-body-font);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-pullquote {
  padding: clamp(2rem, 5vw, 4rem) 0;
  border-block: 1px solid var(--line, rgb(23 23 20 / 16%));
  color: var(--blog-text);
  text-align: left;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-pullquote blockquote {
  max-width: 24ch;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: clamp(1.65rem, 1.15rem + 2vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.22;
}

/* Image, gallery, video, embed, and cover blocks. */

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) figure,
:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-image,
:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-gallery figure {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  transform: none;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(.wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed, .wp-block-cover) {
  margin-block: clamp(2rem, 5vw, 4rem);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(.wp-block-image img, .wp-block-gallery img, .wp-block-video video) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(10px, 1.4vw, 18px);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(.wp-block-image figcaption, .wp-block-gallery figcaption, .wp-block-video figcaption, .wp-block-embed figcaption) {
  margin: 0.65rem 0 0;
  color: var(--blog-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  text-align: left;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-image.is-style-kerem-framed {
  padding: clamp(0.6rem, 1.4vw, 1.1rem);
  border: 1px solid var(--line, rgb(23 23 20 / 16%));
  border-radius: clamp(14px, 2vw, 24px);
  background: var(--blog-surface);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-image.is-style-kerem-edge {
  width: min(var(--blog-wide-width), calc(100vw - 40px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(var(--wp--style--gallery-columns, 2), minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 1rem);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-gallery > figure {
  margin: 0;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-gallery.is-style-kerem-filmstrip {
  display: flex;
  width: min(var(--blog-wide-width), calc(100vw - 40px));
  max-width: none;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0 0 0.7rem;
  margin-left: 50%;
  scroll-snap-type: x proximity;
  transform: translateX(-50%);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-gallery.is-style-kerem-filmstrip > figure {
  flex: 0 0 min(76vw, 680px);
  scroll-snap-align: start;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(.wp-block-video, .wp-block-embed) iframe {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: clamp(10px, 1.4vw, 18px);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-has-aspect-ratio .wp-block-embed__wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 1.4vw, 18px);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-has-aspect-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-cover {
  overflow: hidden;
  min-height: clamp(360px, 58vw, 720px);
  border-radius: clamp(14px, 2vw, 24px);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-cover__inner-container {
  width: min(100% - 2rem, 760px);
}

/* Columns, tables, code, separators, buttons, details, and callouts. */

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-columns {
  gap: clamp(1.25rem, 4vw, 3rem);
  margin-block: clamp(2rem, 5vw, 4rem);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-column > * + * {
  margin-top: 1em;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-table {
  overflow-x: auto;
  border: 1px solid var(--line, rgb(23 23 20 / 16%));
  border-radius: 12px;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-table :where(th, td) {
  padding: 0.85rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--line, rgb(23 23 20 / 16%));
  text-align: left;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-table th {
  background: var(--blog-surface);
  font-family: var(--blog-heading-font);
  font-size: 0.83em;
  font-weight: 720;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :where(pre, .wp-block-code) {
  overflow-x: auto;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--line, rgb(23 23 20 / 16%));
  border-radius: 12px;
  background: var(--blog-surface);
  color: var(--blog-text);
  font-family: var(--font-mono, monospace);
  font-size: 0.82em;
  line-height: 1.65;
  tab-size: 2;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) :not(pre) > code {
  padding: 0.16em 0.4em;
  border-radius: 5px;
  background: var(--blog-surface);
  font-family: var(--font-mono, monospace);
  font-size: 0.88em;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-separator {
  width: min(100%, 160px);
  margin-block: clamp(3rem, 8vw, 6rem);
  border: 0;
  border-top: 1px solid var(--line, rgb(23 23 20 / 16%));
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-separator.is-style-kerem-signal {
  width: 80px;
  border-top: 6px solid var(--accent, #e8df3f);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-buttons {
  gap: 0.7rem;
  margin-block: clamp(1.6rem, 4vw, 2.6rem);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-element-button {
  min-height: 46px;
  padding: 0.75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--blog-text);
  color: var(--blog-bg);
  font-family: var(--blog-heading-font);
  font-size: 0.78rem;
  font-weight: 720;
  text-decoration: none;
  transition: transform 180ms ease, opacity 180ms ease;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-element-button:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) details.wp-block-details {
  padding: 1rem 0;
  border-block: 1px solid var(--line, rgb(23 23 20 / 16%));
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) details.wp-block-details + details.wp-block-details {
  margin-top: -1px;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-details summary {
  cursor: pointer;
  font-family: var(--blog-heading-font);
  font-weight: 680;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-details summary + * {
  margin-top: 1rem;
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-group.is-style-kerem-note {
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid var(--line, rgb(23 23 20 / 16%));
  border-left: 6px solid var(--accent, #e8df3f);
  border-radius: 0 16px 16px 0;
  background: var(--blog-surface);
}

/* WordPress wide and full alignment, shared with editor. */

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) > .alignwide {
  width: min(var(--blog-wide-width), calc(100vw - 40px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

:is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) > .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Blog cards. They never use the theme's hard-cropped project image sizes. */

.blog-card {
  --blog-card-ratio: auto;
  min-width: 0;
}

.blog-card .blog-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: var(--blog-card-ratio);
  border-radius: var(--blog-card-radius) !important;
  background: var(--blog-surface);
  transition: box-shadow 300ms ease, transform 300ms ease;
}

.blog-card .blog-card__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: var(--blog-focal-x) var(--blog-focal-y);
  border-radius: inherit;
  transform: none;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card[data-card-media-mode="natural"] .blog-card__media,
.blog-card[data-card-ratio="original"] .blog-card__media {
  aspect-ratio: auto !important;
}

.blog-card[data-card-media-mode="natural"] .blog-card__image {
  height: auto !important;
  object-fit: contain !important;
}

.blog-card[data-card-media-mode="contain"] .blog-card__image,
.blog-card[data-card-media-mode="cover"] .blog-card__image {
  width: 100%;
  height: 100%;
}

.blog-card[data-card-media-mode="contain"] .blog-card__image {
  object-fit: contain;
}

.blog-card[data-card-media-mode="cover"] .blog-card__image {
  object-fit: cover;
}

.blog-card[data-card-ratio="landscape"] {
  --blog-card-ratio: 16 / 10;
}

.blog-card[data-card-ratio="portrait"] {
  --blog-card-ratio: 4 / 5;
}

.blog-card[data-card-ratio="square"] {
  --blog-card-ratio: 1;
}

.blog-card:hover .blog-card__media {
  box-shadow: 0 18px 48px rgb(23 23 20 / 10%);
  transform: translateY(-3px);
}

.blog-card[data-card-media-mode="cover"]:hover .blog-card__image,
.blog-card[data-card-media-mode="contain"]:hover .blog-card__image {
  transform: scale(1.018);
}

.blog-card .content-card__meta[hidden],
.blog-card .content-card__excerpt[hidden] {
  display: none;
}

.blog-card .content-card__title {
  font-family: var(--blog-heading-font);
  text-wrap: balance;
}

.blog-card .content-card__excerpt {
  color: var(--blog-muted);
  font-family: var(--blog-body-font);
  line-height: 1.62;
}

.journal-archive[data-blog-archive-layout="grid"] .content-grid--archive {
  display: grid;
  grid-template-columns: repeat(var(--blog-archive-columns, 2), minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem) clamp(1.2rem, 3vw, 2.5rem);
}

.journal-archive[data-blog-archive-layout="grid"] .blog-card,
.journal-archive[data-blog-archive-layout="grid"] .blog-card:first-child {
  display: block;
  padding: 0;
  border: 0;
}

.journal-archive[data-blog-archive-layout="grid"] .blog-card .content-card__body {
  padding-top: 1.1rem;
}

.journal-archive[data-blog-archive-layout="compact"] .blog-card,
.journal-archive[data-blog-archive-layout="compact"] .blog-card:first-child {
  grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.2rem;
}

.journal-archive[data-blog-archive-layout="compact"] .blog-card .content-card__title {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 2rem);
}

.journal-archive[data-blog-archive-layout="compact"] .blog-card .content-card__excerpt {
  display: none;
}

/* Editor-only selectors live here when they directly mirror published content. */

.editor-styles-wrapper {
  background: var(--blog-bg);
  color: var(--blog-text);
  font-family: var(--blog-body-font);
}

.editor-styles-wrapper .wp-block-post-title {
  color: var(--blog-text);
  font-family: var(--blog-heading-font);
}

@media (max-width: 900px) {
  .journal-entry__body.has-toc {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .journal-toc {
    position: static;
    max-height: none;
    padding: 1rem 0 0;
  }

  .journal-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-entry .article-hero {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .journal-entry .article-hero__meta {
    justify-content: flex-start;
    text-align: left;
  }

  .journal-archive[data-blog-archive-layout="grid"] .content-grid--archive {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }
}

@media (max-width: 680px) {
  .journal-entry .entry-title {
    letter-spacing: -0.05em;
  }

  .journal-toc ol {
    grid-template-columns: 1fr;
  }

  .journal-archive[data-blog-archive-layout="grid"] .content-grid--archive {
    grid-template-columns: 1fr;
  }

  .journal-archive[data-blog-archive-layout="compact"] .blog-card,
  .journal-archive[data-blog-archive-layout="compact"] .blog-card:first-child,
  .journal-archive .content-grid--archive .blog-card,
  .journal-archive .content-grid--archive .blog-card:first-child,
  .home-journal .content-grid--home .blog-card,
  .home-journal .content-grid--home .blog-card:first-child,
  .home-journal .content-grid--home .blog-card:not(:first-child) {
    display: block;
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  :is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-block-columns:not(.is-not-stacked-on-mobile) {
    gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journal-toc a,
  .blog-card .blog-card__media,
  .blog-card .blog-card__image,
  :is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-element-button {
    transition: none;
  }

  .journal-toc a:hover,
  .blog-card:hover .blog-card__media,
  .blog-card:hover .blog-card__image,
  :is(.journal-entry__content.entry-content, .editor-styles-wrapper .is-root-container) .wp-element-button:hover {
    transform: none;
  }
}

@media print {
  .journal-toc {
    position: static;
    max-height: none;
  }

  .journal-entry__body.has-toc {
    display: block;
  }

  .journal-entry__content a::after {
    color: var(--blog-muted);
    content: " (" attr(href) ")";
    font-size: 0.75em;
  }
}