@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-display-latin.woff2") format("woff2");
}

:root {
  --ji-charcoal: #1f1f1f;
  --ji-charcoal-rgb: 31, 31, 31;
  --ji-charcoal-soft: #2b2a29;
  --ji-copper: #b87333;
  --ji-copper-rgb: 184, 115, 51;
  --ji-copper-dark: #8d4f1f;
  --ji-copper-light: #d39a65;
  --ji-sand: #dcc7b1;
  --ji-sand-rgb: 220, 199, 177;
  --ji-sand-light: #eee2d6;
  --ji-stone: #e6e3df;
  --ji-stone-light: #f4f2ef;
  --ji-stone-light-rgb: 244, 242, 239;
  --ji-white: #ffffff;
  --ji-white-rgb: 255, 255, 255;
  --ji-text: #292929;
  --ji-muted: #65615d;
  --ji-line: rgba(var(--ji-charcoal-rgb), 0.14);
  --ji-line-light: rgba(var(--ji-white-rgb), 0.18);
  --ji-font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --ji-font-body: "DM Sans", Arial, sans-serif;
  --ji-container: 1200px;
  --ji-reading-width: 760px;
  --ji-radius-sm: 10px;
  --ji-radius-md: 18px;
  --ji-radius-lg: 28px;
  --ji-shadow-sm: 0 14px 40px rgba(var(--ji-charcoal-rgb), 0.08);
  --ji-shadow-lg: 0 32px 80px rgba(var(--ji-charcoal-rgb), 0.15);
  --ji-transition: 220ms ease;
  --ji-section-space: clamp(5rem, 9vw, 8.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ji-white);
  color: var(--ji-text);
  font-family: var(--ji-font-body);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.admin-bar .ji-site-header {
  top: 32px;
}

body.admin-bar .ji-reading-progress {
  top: 32px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

button,
input,
textarea,
select {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--ji-copper-light);
  outline-offset: 4px;
}

::selection {
  background: var(--ji-sand);
  color: var(--ji-charcoal);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 5px;
  left: 5px;
  display: block;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  clip: auto !important;
  background: var(--ji-white);
  color: var(--ji-charcoal);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
  box-shadow: var(--ji-shadow-sm);
}

.ji-skip-link {
  position: fixed;
  z-index: 100001;
  top: 1rem;
  left: 1rem;
  padding: 0.8rem 1rem;
  transform: translateY(-180%);
  border-radius: var(--ji-radius-sm);
  background: var(--ji-white);
  color: var(--ji-charcoal);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ji-shadow-sm);
}

.ji-skip-link:focus {
  transform: translateY(0);
}

.ji-container {
  max-width: calc(var(--ji-container) + 3rem);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ji-charcoal);
  font-family: var(--ji-font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

p:last-child {
  margin-bottom: 0;
}

.ji-section {
  padding-block: var(--ji-section-space);
}

.ji-section-label,
.ji-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.15rem;
  color: var(--ji-copper-dark);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ji-section-label::before,
.ji-eyebrow::before {
  width: 2.2rem;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}

.ji-section-heading {
  max-width: 48rem;
  margin-bottom: clamp(2.8rem, 6vw, 4.8rem);
}

.ji-section-heading h2 {
  margin: 0;
  font-size: clamp(2.7rem, 5vw, 5rem);
}

.ji-button {
  display: inline-flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    color var(--ji-transition),
    background-color var(--ji-transition),
    border-color var(--ji-transition),
    transform var(--ji-transition);
}

.ji-button:hover {
  transform: translateY(-2px);
}

.ji-button-primary {
  background: var(--ji-charcoal);
  color: var(--ji-white);
}

.ji-button-primary:hover,
.ji-button-primary:focus-visible {
  background: var(--ji-copper-dark);
  color: var(--ji-white);
}

.ji-button-outline {
  border-color: var(--ji-line);
  background: transparent;
  color: var(--ji-charcoal);
}

.ji-button-outline:hover,
.ji-button-outline:focus-visible {
  border-color: var(--ji-charcoal);
  background: var(--ji-charcoal);
  color: var(--ji-white);
}

.ji-button-light {
  background: var(--ji-sand);
  color: var(--ji-charcoal);
}

.ji-button-light:hover,
.ji-button-light:focus-visible {
  background: var(--ji-white);
  color: var(--ji-charcoal);
}

.ji-button-small {
  min-height: 2.7rem;
  padding: 0.68rem 1.15rem;
  font-size: 0.82rem;
}

.ji-text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ji-charcoal);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.ji-text-link::after {
  position: absolute;
  right: 0;
  bottom: -0.22rem;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--ji-copper-dark);
  content: "";
  transition: transform var(--ji-transition);
}

.ji-text-link:hover::after,
.ji-text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Header */

.ji-site-header {
  border-bottom: 1px solid transparent;
  background: rgba(var(--ji-stone-light-rgb), 0.87);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    background-color var(--ji-transition),
    border-color var(--ji-transition),
    box-shadow var(--ji-transition);
}

.ji-site-header.is-scrolled {
  border-color: var(--ji-line);
  background: rgba(var(--ji-white-rgb), 0.96);
  box-shadow: 0 8px 30px rgba(var(--ji-charcoal-rgb), 0.06);
}

.ji-site-header .navbar {
  min-height: 88px;
  padding-block: 0.45rem;
}

.ji-navbar-brand,
.ji-footer-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  color: var(--ji-charcoal);
  text-decoration: none;
}

.ji-brand-mark,
.ji-footer-mark {
  width: 2.75rem;
  height: 3.25rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.ji-brand-copy,
.ji-footer-brand > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  font-family: var(--ji-font-display);
  font-size: 1.08rem;
  letter-spacing: 0.015em;
  line-height: 1.08;
}

.ji-brand-copy small,
.ji-footer-brand small {
  margin-top: 0.26rem;
  color: var(--ji-copper-dark);
  font-family: var(--ji-font-body);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.ji-site-header .navbar-collapse {
  gap: 0.7rem;
}

.ji-site-header .navbar-nav {
  gap: 0.08rem;
}

.ji-site-header .nav-link {
  position: relative;
  padding: 0.65rem 0.72rem !important;
  color: var(--ji-charcoal);
  font-size: 0.82rem;
  font-weight: 500;
}

.ji-site-header .nav-link::after {
  position: absolute;
  right: 0.7rem;
  bottom: 0.35rem;
  left: 0.7rem;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--ji-copper-dark);
  content: "";
  transition: transform var(--ji-transition);
}

.ji-site-header .nav-link:hover,
.ji-site-header .nav-link:focus-visible,
.ji-site-header .current-menu-item > .nav-link {
  color: var(--ji-copper-dark);
}

.ji-site-header .nav-link:hover::after,
.ji-site-header .nav-link:focus-visible::after,
.ji-site-header .current-menu-item > .nav-link::after {
  transform: scaleX(1);
  transform-origin: left;
}

.ji-menu-toggle {
  position: relative;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--ji-line);
  border-radius: 50%;
  box-shadow: none !important;
}

.ji-menu-lines,
.ji-menu-lines::before,
.ji-menu-lines::after {
  position: absolute;
  width: 1.15rem;
  height: 1px;
  background: var(--ji-charcoal);
  content: "";
  transition: transform var(--ji-transition), top var(--ji-transition), opacity var(--ji-transition);
}

.ji-menu-lines {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ji-menu-lines::before {
  top: -0.37rem;
  left: 0;
}

.ji-menu-lines::after {
  top: 0.37rem;
  left: 0;
}

.ji-menu-toggle[aria-expanded="true"] .ji-menu-lines {
  background: transparent;
}

.ji-menu-toggle[aria-expanded="true"] .ji-menu-lines::before {
  top: 0;
  transform: rotate(45deg);
}

.ji-menu-toggle[aria-expanded="true"] .ji-menu-lines::after {
  top: 0;
  transform: rotate(-45deg);
}

.ji-reading-progress {
  position: fixed;
  z-index: 1040;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--ji-stone);
}

.ji-reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ji-copper);
  transition: width 80ms linear;
}

/* Blog hero */

.ji-blog-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(10.5rem, 16vw, 14rem);
  padding-bottom: clamp(5.5rem, 10vw, 9rem);
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--ji-sand-rgb), 0.82), transparent 34%),
    linear-gradient(135deg, var(--ji-stone-light), var(--ji-white));
}

.ji-technical-grid {
  position: absolute;
  inset: 0;
  opacity: 0.44;
  background-image:
    linear-gradient(rgba(var(--ji-charcoal-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ji-charcoal-rgb), 0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to right, black, transparent 78%);
}

.ji-blog-hero::before,
.ji-blog-hero::after {
  position: absolute;
  border: 1px solid rgba(var(--ji-copper-rgb), 0.24);
  border-radius: 50%;
  content: "";
}

.ji-blog-hero::before {
  top: -23rem;
  right: -11rem;
  width: 48rem;
  height: 48rem;
}

.ji-blog-hero::after {
  right: 8%;
  bottom: -18rem;
  width: 32rem;
  height: 32rem;
}

.ji-blog-hero h1 {
  max-width: 58rem;
  margin: 0;
  font-size: clamp(3.7rem, 7.3vw, 7.5rem);
  line-height: 0.96;
}

.ji-hero-intro {
  margin: 0 0 1.5rem;
  color: var(--ji-text);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.65;
}

.ji-hero-topics {
  margin: 0;
  color: var(--ji-copper-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ji-topography {
  position: absolute;
  right: -7rem;
  bottom: -4rem;
  width: 31rem;
  height: 18rem;
  transform: rotate(-7deg);
  pointer-events: none;
}

.ji-topography span {
  position: absolute;
  inset: calc(var(--i, 0) * 1.25rem);
  border: 1px solid rgba(var(--ji-copper-rgb), 0.19);
  border-radius: 48% 52% 59% 41% / 40% 45% 55% 60%;
}

.ji-topography span:nth-child(1) { --i: 0; }
.ji-topography span:nth-child(2) { --i: 1; }
.ji-topography span:nth-child(3) { --i: 2; }
.ji-topography span:nth-child(4) { --i: 3; }
.ji-topography span:nth-child(5) { --i: 4; }

/* Featured */

.ji-featured-section {
  background: var(--ji-white);
}

.ji-featured-post {
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  border: 1px solid var(--ji-line);
  border-radius: var(--ji-radius-lg);
  background: var(--ji-stone-light);
  box-shadow: var(--ji-shadow-sm);
}

.ji-featured-media {
  position: relative;
  display: block;
  min-height: 34rem;
  overflow: hidden;
  background: var(--ji-stone);
  text-decoration: none;
}

.ji-featured-image,
.ji-featured-media .ji-media-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.ji-featured-post:hover .ji-featured-image {
  transform: scale(1.018);
}

.ji-featured-copy {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.ji-category-link {
  display: inline-flex;
  margin-bottom: 0.8rem;
  color: var(--ji-copper-dark);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.ji-category-link:hover,
.ji-category-link:focus-visible {
  color: var(--ji-charcoal);
  text-decoration: underline;
}

.ji-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--ji-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.ji-featured-title {
  margin: 1.2rem 0 1rem;
  font-size: clamp(2.25rem, 4.2vw, 4rem);
}

.ji-featured-title,
.ji-card-title,
.ji-article-heading h1,
.ji-page-header h1,
.ji-blog-hero h1 {
  overflow-wrap: anywhere;
}

.ji-featured-title a,
.ji-card-title a {
  color: inherit;
  text-decoration: none;
}

.ji-featured-title a:hover,
.ji-featured-title a:focus-visible,
.ji-card-title a:hover,
.ji-card-title a:focus-visible {
  color: var(--ji-copper-dark);
}

.ji-featured-excerpt {
  margin-bottom: 1.8rem;
  color: var(--ji-muted);
  font-size: 1.03rem;
}

.ji-media-fallback {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 100%;
  place-items: center;
  background:
    linear-gradient(rgba(var(--ji-charcoal-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ji-charcoal-rgb), 0.05) 1px, transparent 1px),
    var(--ji-stone);
  background-size: 42px 42px;
}

.ji-media-fallback::before {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid rgba(var(--ji-copper-rgb), 0.32);
  border-radius: 50%;
  content: "";
}

.ji-media-fallback span {
  position: relative;
  color: var(--ji-copper-dark);
  font-family: var(--ji-font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1;
}

/* Discovery */

.ji-discovery {
  padding-block: 2.4rem;
  border-block: 1px solid var(--ji-line);
  background: var(--ji-stone-light);
}

.ji-discovery-layout {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.ji-search-form {
  width: 100%;
}

.ji-search-field {
  display: grid;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  padding: 0.32rem 0.32rem 0.32rem 1rem;
  border: 1px solid var(--ji-line);
  border-radius: 999px;
  background: var(--ji-white);
  transition: border-color var(--ji-transition), box-shadow var(--ji-transition);
}

.ji-search-field:focus-within {
  border-color: var(--ji-copper);
  box-shadow: 0 0 0 3px rgba(var(--ji-copper-rgb), 0.12);
}

.ji-search-field input {
  min-width: 0;
  min-height: 2.65rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ji-charcoal);
  font-size: 0.91rem;
}

.ji-search-field button {
  min-height: 2.65rem;
  padding-inline: 1.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--ji-charcoal);
  color: var(--ji-white);
  font-size: 0.82rem;
  font-weight: 600;
}

.ji-search-field button:hover,
.ji-search-field button:focus-visible {
  background: var(--ji-copper-dark);
}

.ji-category-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.ji-category-pills a,
.ji-tags a {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  padding: 0.62rem 1rem;
  border: 1px solid var(--ji-line);
  border-radius: 999px;
  background: rgba(var(--ji-white-rgb), 0.55);
  color: var(--ji-charcoal);
  font-size: 0.77rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.ji-category-pills a:hover,
.ji-category-pills a:focus-visible,
.ji-category-pills a.is-active,
.ji-tags a:hover,
.ji-tags a:focus-visible {
  border-color: var(--ji-charcoal);
  background: var(--ji-charcoal);
  color: var(--ji-white);
}

/* Cards */

.ji-latest-section,
.ji-archive-main,
.ji-search-main {
  background: var(--ji-white);
}

.ji-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}

.ji-post-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--ji-line);
  border-radius: var(--ji-radius-md);
  background: var(--ji-white);
  transition: transform var(--ji-transition), box-shadow var(--ji-transition), border-color var(--ji-transition);
}

.ji-post-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--ji-copper-rgb), 0.4);
  box-shadow: var(--ji-shadow-sm);
}

.ji-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ji-stone);
  text-decoration: none;
}

.ji-card-image,
.ji-card-media .ji-media-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms ease;
}

.ji-post-card:hover .ji-card-image {
  transform: scale(1.025);
}

.ji-card-body {
  display: flex;
  flex: 1;
  align-items: flex-start;
  flex-direction: column;
  padding: 1.5rem;
}

.ji-card-title {
  margin: 1rem 0 0.8rem;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.ji-card-excerpt {
  margin-bottom: 1.5rem;
  color: var(--ji-muted);
  font-size: 0.9rem;
}

.ji-card-link {
  margin-top: auto;
  color: var(--ji-charcoal);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.ji-card-link:hover,
.ji-card-link:focus-visible {
  color: var(--ji-copper-dark);
  text-decoration: underline;
}

/* Pagination */

.ji-pagination {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}

.ji-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  gap: 0.45rem;
  list-style: none;
}

.ji-pagination a,
.ji-pagination span {
  display: grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  place-items: center;
  border: 1px solid var(--ji-line);
  border-radius: 999px;
  color: var(--ji-charcoal);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.ji-pagination .current,
.ji-pagination a:hover,
.ji-pagination a:focus-visible {
  border-color: var(--ji-charcoal);
  background: var(--ji-charcoal);
  color: var(--ji-white);
}

/* Empty state */

.ji-empty-state {
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem);
  border: 1px solid var(--ji-line);
  border-radius: var(--ji-radius-lg);
  background: var(--ji-stone-light);
  text-align: center;
}

.ji-empty-mark {
  margin-bottom: 1.5rem;
  color: var(--ji-copper-dark);
  font-family: var(--ji-font-display);
  font-size: 4rem;
  line-height: 1;
}

.ji-empty-state h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.4rem, 5vw, 4rem);
}

.ji-empty-state p {
  max-width: 34rem;
  margin: 0 auto 1.8rem;
  color: var(--ji-muted);
}

/* Archive and breadcrumbs */

.ji-breadcrumbs {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.ji-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
  list-style: none;
  color: var(--ji-muted);
  font-size: 0.72rem;
}

.ji-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ji-breadcrumbs li + li::before {
  color: var(--ji-copper-dark);
  content: "/";
}

.ji-breadcrumbs a {
  color: var(--ji-charcoal);
  text-decoration: none;
}

.ji-breadcrumbs a:hover,
.ji-breadcrumbs a:focus-visible {
  color: var(--ji-copper-dark);
  text-decoration: underline;
}

.ji-archive-toolbar,
.ji-search-toolbar {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1fr);
  margin-bottom: 3rem;
  gap: 2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--ji-line);
}

.ji-search-toolbar {
  display: block;
  max-width: 38rem;
}

.ji-archive-toolbar > p {
  margin: 0;
  color: var(--ji-muted);
}

/* Single */

.ji-single-main {
  background: var(--ji-white);
}

.ji-article-header,
.ji-page-header {
  padding-top: clamp(10.5rem, 16vw, 13rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  background:
    linear-gradient(rgba(var(--ji-charcoal-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ji-charcoal-rgb), 0.045) 1px, transparent 1px),
    var(--ji-stone-light);
  background-size: 54px 54px;
}

.ji-article-heading {
  max-width: 68rem;
  margin-inline: auto;
  text-align: center;
}

.ji-article-heading .ji-category-link {
  margin-bottom: 1.2rem;
}

.ji-article-heading h1,
.ji-page-header h1 {
  margin: 0;
  font-size: clamp(3.3rem, 7vw, 7rem);
  line-height: 0.98;
}

.ji-page-header h1 {
  max-width: 60rem;
}

.ji-article-byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  gap: 0.55rem;
  color: var(--ji-muted);
  font-size: 0.82rem;
}

.ji-article-hero {
  margin-top: clamp(2rem, 5vw, 4rem);
  margin-bottom: 0;
}

.ji-article-hero-image {
  width: 100%;
  max-height: 43rem;
  object-fit: cover;
  border-radius: var(--ji-radius-lg);
  box-shadow: var(--ji-shadow-sm);
}

.ji-article-hero figcaption,
.ji-entry-content figcaption {
  margin-top: 0.7rem;
  color: var(--ji-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  text-align: center;
}

.ji-article-layout {
  display: grid;
  align-items: start;
  grid-template-columns: 13.5rem minmax(0, var(--ji-reading-width));
  justify-content: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

.ji-entry-column {
  min-width: 0;
}

.ji-toc {
  position: sticky;
  top: 8rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--ji-line);
}

body.admin-bar .ji-toc {
  top: 10rem;
}

.ji-toc > p {
  margin-bottom: 0.9rem;
  color: var(--ji-copper-dark);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

.ji-toc a {
  display: block;
  color: var(--ji-muted);
  font-size: 0.75rem;
  line-height: 1.45;
  text-decoration: none;
}

.ji-toc a:hover,
.ji-toc a:focus-visible {
  color: var(--ji-copper-dark);
  text-decoration: underline;
}

.ji-toc-level-3 {
  padding-left: 0.85rem;
}

.ji-entry-content {
  width: min(100%, var(--ji-reading-width));
  margin-inline: auto;
  color: var(--ji-text);
  font-size: clamp(1.06rem, 1.4vw, 1.16rem);
  line-height: 1.82;
}

.ji-entry-content > * {
  max-width: 100%;
}

.ji-entry-content > * + * {
  margin-top: 1.45em;
}

.ji-entry-content h2,
.ji-entry-content h3,
.ji-entry-content h4 {
  scroll-margin-top: 8rem;
}

.ji-entry-content h2 {
  margin-top: 2.2em;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.ji-entry-content h3 {
  margin-top: 1.9em;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
}

.ji-entry-content h4 {
  margin-top: 1.8em;
  font-family: var(--ji-font-body);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0;
}

.ji-entry-content a {
  color: var(--ji-copper-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.ji-entry-content a:hover,
.ji-entry-content a:focus-visible {
  color: var(--ji-charcoal);
  text-decoration-thickness: 2px;
}

.ji-entry-content a[href$=".pdf" i],
.ji-entry-content a[href$=".doc" i],
.ji-entry-content a[href$=".docx" i],
.ji-entry-content a[href$=".xlsx" i] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(var(--ji-copper-rgb), 0.35);
  border-radius: var(--ji-radius-sm);
  background: var(--ji-stone-light);
  font-weight: 600;
}

.ji-entry-content ul,
.ji-entry-content ol {
  padding-left: 1.35em;
}

.ji-entry-content li + li {
  margin-top: 0.45em;
}

.ji-entry-content blockquote,
.ji-entry-content .wp-block-quote {
  margin-inline: 0;
  padding: 0.2rem 0 0.2rem 1.5rem;
  border-left: 3px solid var(--ji-copper);
  color: var(--ji-charcoal);
  font-family: var(--ji-font-display);
  font-size: clamp(1.45rem, 2.8vw, 2.1rem);
  line-height: 1.45;
}

.ji-entry-content blockquote cite {
  display: block;
  margin-top: 0.75rem;
  color: var(--ji-muted);
  font-family: var(--ji-font-body);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ji-entry-content .is-style-author-highlight {
  padding: clamp(1.35rem, 4vw, 2.2rem);
  border: 0;
  border-left: 4px solid var(--ji-copper);
  border-radius: 0 var(--ji-radius-md) var(--ji-radius-md) 0;
  background: var(--ji-sand-light);
  color: var(--ji-charcoal);
  font-family: var(--ji-font-body);
  font-size: 1.1em;
  line-height: 1.75;
  box-shadow: 0 8px 24px rgba(var(--ji-charcoal-rgb), 0.05);
}

.ji-entry-content figure,
.ji-entry-content .wp-block-image {
  margin-inline: 0;
}

.ji-entry-content figure img,
.ji-entry-content .wp-block-image img {
  border-radius: var(--ji-radius-sm);
}

.ji-entry-content .alignwide {
  width: min(100vw - 3rem, 1040px);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.ji-entry-content .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.ji-entry-content .wp-block-table,
.ji-entry-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-spacing: 0;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

.ji-entry-content table th,
.ji-entry-content table td {
  min-width: 8rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ji-line);
  text-align: left;
  vertical-align: top;
}

.ji-entry-content table th {
  background: var(--ji-charcoal);
  color: var(--ji-white);
  font-size: 0.84rem;
}

.ji-entry-content .wp-block-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--ji-line);
  border-radius: var(--ji-radius-sm);
  background: var(--ji-stone-light);
}

.ji-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 2rem;
}

.ji-print-url {
  display: none;
}

.ji-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 3rem;
  gap: 0.5rem;
}

/* Share, author, CTA, related */

.ji-share {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ji-line);
}

.ji-share h2 {
  margin-bottom: 1.2rem;
  font-family: var(--ji-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ji-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ji-share-button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 0.9rem;
  border: 1px solid var(--ji-line);
  border-radius: 999px;
  background: var(--ji-white);
  color: var(--ji-charcoal);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.ji-share-button:hover,
.ji-share-button:focus-visible,
.ji-share-button.is-copied {
  border-color: var(--ji-charcoal);
  background: var(--ji-charcoal);
  color: var(--ji-white);
}

.ji-author-box {
  display: grid;
  align-items: center;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 4rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--ji-radius-md);
  background: var(--ji-stone-light);
}

.ji-author-photo {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ji-stone);
}

.ji-author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.ji-author-box h2 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.ji-author-box > div:last-child > p:not(.ji-section-label):not(.ji-author-role) {
  color: var(--ji-muted);
  font-size: 0.9rem;
}

.ji-author-role {
  margin-bottom: 0.8rem;
  color: var(--ji-copper-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ji-article-cta {
  position: relative;
  overflow: hidden;
  margin-top: 4rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--ji-radius-md);
  background: var(--ji-charcoal);
  color: var(--ji-white);
}

.ji-article-cta::after {
  position: absolute;
  top: -7rem;
  right: -6rem;
  width: 18rem;
  height: 18rem;
  border: 1px solid rgba(var(--ji-copper-rgb), 0.45);
  border-radius: 50%;
  content: "";
}

.ji-article-cta .ji-section-label {
  color: var(--ji-copper-light);
}

.ji-article-cta h2 {
  position: relative;
  z-index: 1;
  max-width: 32rem;
  margin-bottom: 1.5rem;
  color: var(--ji-white);
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.ji-article-cta .ji-button {
  position: relative;
  z-index: 1;
}

.ji-related {
  padding-bottom: var(--ji-section-space);
}

.ji-related .ji-section-heading h2 {
  font-size: clamp(2.7rem, 5vw, 4.5rem);
}

.ji-author-cta-section {
  padding-block: 0 var(--ji-section-space);
  background: var(--ji-white);
}

.ji-author-cta-section .ji-author-box {
  max-width: 58rem;
  margin: 0 auto;
}

/* Pages and 404 */

.ji-page-main {
  min-height: 60vh;
}

.ji-page-article > .ji-entry-content {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.ji-error-page {
  display: grid;
  min-height: 100svh;
  padding: 9rem 1.25rem 4rem;
  place-items: center;
  background:
    linear-gradient(rgba(var(--ji-charcoal-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ji-charcoal-rgb), 0.04) 1px, transparent 1px),
    var(--ji-stone-light);
  background-size: 54px 54px;
}

.ji-error-panel {
  max-width: 48rem;
  padding: clamp(2.2rem, 7vw, 5rem);
  border-radius: var(--ji-radius-lg);
  background: var(--ji-white);
  text-align: center;
  box-shadow: var(--ji-shadow-sm);
}

.ji-error-mark {
  width: 5rem;
  height: 6rem;
  margin: 0 auto 1rem;
  object-fit: contain;
}

.ji-error-panel .ji-section-label {
  justify-content: center;
}

.ji-error-panel h1 {
  margin-bottom: 1.2rem;
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.ji-error-panel > p:not(.ji-section-label) {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: var(--ji-muted);
}

.ji-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

/* Footer */

.ji-site-footer {
  padding: 3.5rem 0 1.6rem;
  background: var(--ji-stone-light);
}

.ji-footer-main,
.ji-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.ji-footer-main {
  padding-bottom: 2.8rem;
  border-bottom: 1px solid var(--ji-line);
}

.ji-footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  gap: 1.4rem;
  list-style: none;
}

.ji-footer-menu a {
  color: var(--ji-muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
}

.ji-footer-menu a:hover,
.ji-footer-menu a:focus-visible {
  color: var(--ji-copper-dark);
  text-decoration: underline;
}

.ji-footer-legal {
  padding-top: 1.5rem;
  color: var(--ji-muted);
  font-size: 0.67rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ji-footer-legal p {
  margin: 0;
}

/* Progressive enhancement */

.js .ji-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.js .ji-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1199.98px) {
	.ji-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

  .ji-site-header .navbar-collapse {
    margin-top: 0.6rem;
    padding: 1rem;
    border: 1px solid var(--ji-line);
    border-radius: var(--ji-radius-md);
    background: var(--ji-white);
    box-shadow: var(--ji-shadow-sm);
  }

  .ji-site-header .navbar-nav {
    align-items: stretch !important;
  }

  .ji-site-header .nav-link {
    padding: 0.72rem 0.4rem !important;
  }

  .ji-header-cta {
    width: 100%;
    margin-top: 0.55rem;
  }
}

@media (max-width: 991.98px) {
  .ji-featured-post {
    grid-template-columns: 1fr;
  }

  .ji-featured-media {
    min-height: 25rem;
    aspect-ratio: 16 / 9;
  }

  .ji-discovery-layout {
    grid-template-columns: 1fr;
  }

  .ji-category-pills {
    justify-content: flex-start;
  }

  .ji-article-layout {
    display: block;
  }

  .ji-toc {
    position: static;
    max-width: var(--ji-reading-width);
    margin: 0 auto 3rem;
    padding: 1.25rem;
    border: 1px solid var(--ji-line);
    border-radius: var(--ji-radius-sm);
    background: var(--ji-stone-light);
  }
}

@media (max-width: 782px) {
  body.admin-bar .ji-site-header,
  body.admin-bar .ji-reading-progress {
    top: 46px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --ji-section-space: 4.7rem;
  }

  html {
    scroll-padding-top: 96px;
  }

  .ji-site-header .navbar {
    min-height: 78px;
  }

  .ji-brand-mark {
    width: 2.35rem;
    height: 2.8rem;
  }

  .ji-brand-copy {
    font-size: 0.98rem;
  }

  .ji-blog-hero {
    padding-top: 9.6rem;
    padding-bottom: 5.5rem;
  }

  .ji-blog-hero h1 {
    font-size: clamp(3.25rem, 15vw, 5.2rem);
  }

  .ji-topography {
    right: -13rem;
    bottom: -7rem;
  }

  .ji-featured-media {
    min-height: auto;
    aspect-ratio: 4 / 3;
  }

  .ji-featured-copy {
    padding: 1.6rem;
  }

  .ji-post-grid {
    grid-template-columns: 1fr;
  }

  .ji-card-title {
    font-size: 1.85rem;
  }

  .ji-archive-toolbar {
    grid-template-columns: 1fr;
  }

  .ji-article-header,
  .ji-page-header {
    padding-top: 9.5rem;
  }

  .ji-article-heading {
    text-align: left;
  }

  .ji-article-byline {
    justify-content: flex-start;
  }

  .ji-article-hero {
    padding-inline: 0;
  }

  .ji-article-hero-image {
    border-radius: 0;
  }

  .ji-entry-content {
    font-size: 1.04rem;
    line-height: 1.78;
  }

  .ji-author-box {
    align-items: start;
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .ji-footer-main,
  .ji-footer-legal {
    align-items: flex-start;
    flex-direction: column;
  }

  .ji-footer-menu {
    justify-content: flex-start;
  }

  .ji-footer-legal {
    gap: 0.45rem;
  }
}

@media (max-width: 479.98px) {
  .ji-container {
    padding-inline: 1.1rem;
  }

  .ji-brand-copy > span {
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ji-search-field {
    grid-template-columns: auto minmax(0, 1fr);
    border-radius: var(--ji-radius-md);
  }

  .ji-search-field button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ji-featured-title {
    font-size: 2.25rem;
  }

  .ji-article-byline span[aria-hidden="true"] {
    display: none;
  }

  .ji-article-byline {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .ji-author-box {
    grid-template-columns: 1fr;
  }

  .ji-author-photo {
    width: 6.5rem;
  }

  .ji-share-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ji-share-button {
    min-width: 0;
  }

  .ji-error-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ji-error-actions .ji-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .js .ji-reveal {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   CORRECCIÓN GLOBAL — ANCHO DE CONTENIDO DE LOS ARTÍCULOS
   ========================================================= */

.single-post :where(
    .entry-content,
    .post-content,
    .article-content,
    .single-content,
    .ji-article-content,
    .wp-block-post-content
) {
    display: block !important;
    width: 100% !important;
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Evita que bloques internos hereden columnas estrechas */
.single-post :where(
    .entry-content,
    .post-content,
    .article-content,
    .single-content,
    .ji-article-content,
    .wp-block-post-content
) > * {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
}

/* Lectura cómoda */
.single-post :where(
    .entry-content,
    .post-content,
    .article-content,
    .single-content,
    .ji-article-content,
    .wp-block-post-content
) p,
.single-post :where(
    .entry-content,
    .post-content,
    .article-content,
    .single-content,
    .ji-article-content,
    .wp-block-post-content
) li {
    line-height: 1.8;
}

/* =========================================================
   SINGLE POST — ARTÍCULOS CON Y SIN TABLA DE CONTENIDOS
   ========================================================= */

/* Con tabla de contenidos:
   conserva el layout original del tema */
.ji-article-layout--with-toc .ji-entry-column {
    min-width: 0;
}

/* Sin tabla de contenidos:
   elimina la columna lateral reservada para el índice */
.ji-article-layout--no-toc {
    display: block;
}

/* Centra el cuerpo del artículo y le da ancho editorial */
.ji-article-layout--no-toc .ji-entry-column {
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* El contenido Gutenberg puede usar todo el ancho disponible */
.ji-article-layout--no-toc .ji-entry-content {
    width: 100%;
    max-width: none;
}