/* MIDITAUR psychophysical phi system — frontend only
 * Runtime design values are generated by theme-variables.js from Publii theme options.
 * Formula: X(k)=X0*phi^(k/m). This stylesheet consumes those variables; it does not
 * duplicate user-adjustable final values as independent constants.
 * Publii/TinyMCE editor integration is intentionally outside this stylesheet.
 */

:root {
  /* Hard accessibility/rendering constraints, intentionally not theme-tunable below safe limits. */
  --phi-hit-target: 2.75rem; /* 44 CSS px design target */
  --phi-focus-width: 3px;
  --phi-border-hairline: 1px;
}

/* === Phase 1: shared shell / header / navigation / sidebar / footer === */
#main > .inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--phi-shell-frame-max);
  margin-inline: auto;
  padding-inline: var(--phi-shell-gutter);
}
#main > .inner > #header.ecl-site-header > .ecl-site-header__container {
  box-sizing: border-box;
  width: 100%;
}
#header .ecl-site-header__top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: var(--header-top-gap);
  border-block-end: var(--header-border-width) solid var(--ecl-color-border) !important;
}
#header .miditaur-header-signal {
  position: absolute;
  inset: 0;
  display: var(--header-signal-display);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
#header .miditaur-header-signal::before,
#header .miditaur-header-signal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#header .miditaur-header-signal::before {
  opacity: var(--header-signal-opacity);
  background-image:
    radial-gradient(
      circle var(--header-signal-glow-size) at left center,
      color-mix(in srgb, var(--header-signal-primary) calc(var(--header-signal-glow-opacity) * 100%), transparent),
      transparent 100%
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--header-signal-primary) 22%, transparent) 0 var(--phi-border-hairline),
      transparent var(--phi-border-hairline) var(--header-signal-track-gap)
    ),
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--header-signal-primary) 10%, transparent) 0 var(--phi-border-hairline),
      transparent var(--phi-border-hairline) var(--header-signal-grid-column)
    );
}
#header .miditaur-header-signal::after {
  opacity: var(--header-signal-opacity);
  background-image: linear-gradient(
    to right,
    transparent 0 8%,
    color-mix(in srgb, var(--header-signal-primary) 82%, transparent) 8% 13%,
    transparent 13% 23%,
    color-mix(in srgb, var(--header-signal-secondary) 76%, transparent) 23% 27%,
    transparent 27% 42%,
    color-mix(in srgb, var(--header-signal-primary) 66%, transparent) 42% 53%,
    transparent 53% 68%,
    color-mix(in srgb, var(--header-signal-primary) 54%, transparent) 68% 72%,
    transparent 72% 100%
  );
  background-repeat: repeat-x;
  background-size: var(--header-signal-event-span) 100%;
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 var(--phi-border-hairline),
    transparent var(--phi-border-hairline) var(--header-signal-track-gap)
  );
  mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 var(--phi-border-hairline),
    transparent var(--phi-border-hairline) var(--header-signal-track-gap)
  );
  animation: miditaur-header-signal-shift var(--header-signal-duration) linear infinite !important;
  will-change: background-position;
}
#header .miditaur-header-signal__particle,
#header .miditaur-header-signal__wave {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: left;
}
#header .miditaur-header-signal__particle {
  left: -3%;
  inline-size: calc(var(--header-signal-track-gap) * 0.34);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--header-signal-primary);
  opacity: min(0.82, calc(var(--header-signal-opacity) * 5));
  box-shadow:
    0 0 calc(var(--header-signal-track-gap) * 0.42) color-mix(in srgb, var(--header-signal-primary) 74%, transparent),
    0 0 calc(var(--header-signal-track-gap) * 0.86) color-mix(in srgb, var(--header-signal-primary) 42%, transparent);
  animation-name: miditaur-header-particle-run !important;
  animation-duration: calc(var(--header-signal-duration) * 0.618) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
#header .miditaur-header-signal__particle--1 {
  top: calc(var(--header-signal-track-gap) * 2);
  animation-delay: -3.2s !important;
}
#header .miditaur-header-signal__particle--2 {
  top: calc(var(--header-signal-track-gap) * 4);
  background: var(--header-signal-secondary);
  box-shadow:
    0 0 calc(var(--header-signal-track-gap) * 0.42) color-mix(in srgb, var(--header-signal-secondary) 74%, transparent),
    0 0 calc(var(--header-signal-track-gap) * 0.86) color-mix(in srgb, var(--header-signal-secondary) 42%, transparent);
  animation-duration: calc(var(--header-signal-duration) * 0.786) !important;
  animation-delay: -12.4s !important;
}
#header .miditaur-header-signal__particle--3 {
  top: calc(var(--header-signal-track-gap) * 6);
  animation-duration: calc(var(--header-signal-duration) * 0.69) !important;
  animation-delay: -7.1s !important;
}
#header .miditaur-header-signal__particle--4 {
  top: calc(var(--header-signal-track-gap) * 8);
  animation-duration: calc(var(--header-signal-duration) * 0.854) !important;
  animation-delay: -18.6s !important;
}
#header .miditaur-header-signal__particle--5 {
  top: calc(var(--header-signal-track-gap) * 10);
  background: var(--header-signal-secondary);
  box-shadow:
    0 0 calc(var(--header-signal-track-gap) * 0.42) color-mix(in srgb, var(--header-signal-secondary) 74%, transparent),
    0 0 calc(var(--header-signal-track-gap) * 0.86) color-mix(in srgb, var(--header-signal-secondary) 42%, transparent);
  animation-duration: calc(var(--header-signal-duration) * 0.73) !important;
  animation-delay: -5.7s !important;
}
#header .miditaur-header-signal__wave {
  left: -18%;
  inline-size: calc(var(--header-signal-event-span) * 0.32);
  block-size: calc(var(--header-signal-track-gap) * 1.55);
  background: var(--header-signal-primary);
  opacity: min(0.72, calc(var(--header-signal-opacity) * 4));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 30'%3E%3Cpath d='M0 15 C10 2 20 2 30 15 S50 28 60 15 S80 2 90 15 S110 28 120 15 S140 2 150 15 S170 28 180 15' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 30'%3E%3Cpath d='M0 15 C10 2 20 2 30 15 S50 28 60 15 S80 2 90 15 S110 28 120 15 S140 2 150 15 S170 28 180 15' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 calc(var(--header-signal-track-gap) * 0.2) color-mix(in srgb, var(--header-signal-primary) 52%, transparent));
  animation-name: miditaur-header-wave-run !important;
  animation-duration: calc(var(--header-signal-duration) * 0.82) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
#header .miditaur-header-signal__wave--1 {
  top: calc(var(--header-signal-track-gap) * 3.1);
  animation-delay: -9.3s !important;
}
#header .miditaur-header-signal__wave--2 {
  top: calc(var(--header-signal-track-gap) * 7.15);
  background: var(--header-signal-secondary);
  opacity: min(0.62, calc(var(--header-signal-opacity) * 3.4));
  filter: drop-shadow(0 0 calc(var(--header-signal-track-gap) * 0.2) color-mix(in srgb, var(--header-signal-secondary) 48%, transparent));
  animation-duration: calc(var(--header-signal-duration) * 1.03) !important;
  animation-delay: -21.5s !important;
}
@keyframes miditaur-header-signal-shift {
  from { background-position: 0 0; }
  to { background-position: var(--header-signal-event-span) 0; }
}
@keyframes miditaur-header-particle-run {
  from { left: -3%; }
  to { left: 103%; }
}
@keyframes miditaur-header-wave-run {
  from { left: -18%; }
  to { left: 104%; }
}
@media (max-width: 47.999rem) {
  #header .miditaur-header-signal__particle--4,
  #header .miditaur-header-signal__particle--5,
  #header .miditaur-header-signal__wave--2 { display: none; }
}
@media (max-width: 30rem) {
  #header .miditaur-header-signal__particle--3 { display: none; }
}
#header .ecl-site-header__top > :not(.miditaur-header-signal) {
  position: relative;
  z-index: 1;
}
/* Accessibility constraint: the moving decorative field must never become the text background. */
#header .ecl-site-header__identity-label {
  background-color: #fff;
}
#header .miditaur-main-menu {
  margin-block-start: var(--phi-header-nav-gap) !important;
  border-block: var(--menu-border-width) solid var(--ecl-color-border) !important;
}
#header .miditaur-main-menu > .ecl-menu__inner > .ecl-menu__list {
  align-items: center;
}
#header .miditaur-main-menu > .ecl-menu__inner > .ecl-menu__list > [data-ecl-menu-item] > .ecl-menu__item-wrapper {
  align-items: center;
}
#header .miditaur-main-menu > .ecl-menu__inner > .ecl-menu__list > [data-ecl-menu-item] > .ecl-menu__item-wrapper > :is(.ecl-menu__link,.ecl-menu__separator,.ecl-menu__submenu-toggle,.ecl-menu__button-caret) {
  box-sizing: border-box;
  align-self: center;
  border: 0 !important;
}
.miditaur-main-menu .ecl-menu__link,
.miditaur-main-menu .ecl-menu__separator {
  min-block-size: var(--phi-hit-target);
  padding-block: var(--menu-style-padding-y);
  padding-inline: var(--menu-style-padding-x);
}
.miditaur-main-menu .ecl-menu__button-caret,
.miditaur-main-menu .ecl-menu__submenu-toggle,
.miditaur-main-menu .ecl-menu__mobile-toggle,
.miditaur-main-menu .ecl-menu__back,
.miditaur-main-menu .ecl-menu__close {
  min-block-size: var(--phi-hit-target);
  min-inline-size: var(--phi-hit-target);
}
#sidebar,
#sidebar > .inner {
  box-sizing: border-box;
  width: min(var(--phi-shell-sidebar-width), calc(100vw - (2 * var(--phi-shell-gutter))));
  max-width: 100%;
}
#footer.ecl-site-footer {
  box-sizing: border-box;
  padding-inline: 0;
}
#footer.ecl-site-footer > .ecl-site-footer__container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--phi-shell-frame-max);
  margin-inline: auto;
  padding-inline: var(--phi-shell-gutter);
}
#footer .ecl-site-footer__main { gap: var(--footer-content-gap); }

@media (prefers-reduced-motion: reduce) {
  #sidebar,
  .miditaur-main-menu .ecl-menu__toggle-icon { transition: none !important; }
}

/* === Header logo orbit bands === */
#header .miditaur-logo-orbit {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  inline-size: var(--logo-orbit-stage-size);
  max-inline-size: 100%;
  aspect-ratio: 1;
  place-items: center;
  isolation: isolate;
}
#header .miditaur-logo-orbit__band {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
  transform: translate(-50%, -50%);
  padding: var(--logo-orbit-thickness);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
#header .miditaur-logo-orbit__band::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  transform-origin: center;
  will-change: transform;
}
#header .miditaur-logo-orbit__band--blue {
  z-index: 1;
  inline-size: var(--logo-orbit-blue-size);
  block-size: var(--logo-orbit-blue-size);
}
#header .miditaur-logo-orbit__band--blue::before {
  background: conic-gradient(from 0deg,
    var(--logo-orbit-blue) 0 20%,
    #2d8cff 20% 36%,
    var(--logo-orbit-blue) 36% 58%,
    color-mix(in srgb, var(--logo-orbit-blue) 72%, white 28%) 58% 76%,
    var(--logo-orbit-blue) 76% 100%);
  animation: miditaur-band-spin-cw var(--logo-orbit-blue-duration) linear infinite !important;
}
#header .miditaur-logo-orbit__band--yellow {
  z-index: 2;
  inline-size: var(--logo-orbit-yellow-size);
  block-size: var(--logo-orbit-yellow-size);
}
#header .miditaur-logo-orbit__band--yellow::before {
  background: conic-gradient(from 137deg,
    var(--logo-orbit-yellow) 0 24%,
    #ffe76a 24% 40%,
    var(--logo-orbit-yellow) 40% 62%,
    color-mix(in srgb, var(--logo-orbit-yellow) 76%, white 24%) 62% 80%,
    var(--logo-orbit-yellow) 80% 100%);
  animation: miditaur-band-spin-ccw var(--logo-orbit-yellow-duration) linear infinite !important;
}
#header .miditaur-logo-orbit > .ecl-site-logo__image {
  position: relative;
  z-index: 6;
  inline-size: var(--logo-orbit-mark-size) !important;
  block-size: var(--logo-orbit-mark-size) !important;
  max-inline-size: none !important;
  max-block-size: none !important;
  object-fit: contain;
  animation: miditaur-band-mark var(--logo-orbit-pulse-duration) ease-in-out infinite !important;
}
@keyframes miditaur-band-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes miditaur-band-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes miditaur-band-mark { 0%,100% { transform: scale(1); } 50% { transform: scale(1.01); } }
@media (max-width: 46rem) {
  #header .miditaur-logo-orbit { inline-size: var(--logo-orbit-compact-stage-size); }
}
@media (prefers-reduced-motion: reduce) {
  #header .miditaur-logo-orbit__band::before,
  #header .miditaur-logo-orbit > .ecl-site-logo__image,
  #header .miditaur-header-signal::after,
  #header .miditaur-header-signal__particle,
  #header .miditaur-header-signal__wave { animation: none !important; }
}

/* === Coherent page-flow rhythm === */
#main > .inner > article.post,
#main > .inner > article.page {
  padding-block: var(--phi-page-flow-padding) !important;
}
#main article.post > figure.image.main,
#main article.page > figure.image.main {
  margin-block-end: var(--phi-featured-media-gap) !important;
}
#footer.ecl-site-footer {
  margin-block-start: max(0rem, calc(var(--phi-footer-margin-top) - var(--phi-page-flow-padding)));
  padding-block: var(--footer-padding-top) var(--footer-padding-bottom);
}
/* A terminal rich section must not add a second region pause on top of the page boundary padding. */
#main .post__entry > .image-direction-cards-group:last-child > .image-direction-cards:last-child,
#main .page__entry > .image-direction-cards-group:last-child > .image-direction-cards:last-child,
#main .post__entry > .image-direction-cards-group:has(+ p:empty:last-child) > .image-direction-cards:last-child,
#main .page__entry > .image-direction-cards-group:has(+ p:empty:last-child) > .image-direction-cards:last-child {
  margin-block-end: 0 !important;
}
#main .post__entry > p:empty:last-child,
#main .page__entry > p:empty:last-child {
  margin: 0;
}

/* Legacy nested prose caps are neutralized here; semantic direct-prose limits are reapplied below. */
#main .post__entry p,
#main .post__inner p,
#main .page__entry p,
#main .page__inner p {
  max-inline-size: none;
}

/* === Phase 2: typography, prose and page hierarchy === */
.ecl-breadcrumb,
.breadcrumbs {
  margin-block-end: var(--breadcrumb-style-margin-bottom) !important;
  padding-block: var(--phi-breadcrumb-padding-y);
}
.ecl-breadcrumb__container,
.breadcrumbs :is(ul, ol) { gap: var(--breadcrumb-style-gap) !important; }
.ecl-breadcrumb__segment,
.breadcrumbs li {
  font-size: var(--breadcrumb-style-size) !important;
  line-height: var(--breadcrumb-style-line-height) !important;
  letter-spacing: var(--letter-spacing);
}
.ecl-breadcrumb__segment:not(:last-child)::after { margin-inline-start: var(--breadcrumb-style-gap); }

.ecl-page-header {
  margin-block-end: var(--phi-page-header-margin-bottom);
  padding-block: var(--phi-page-header-padding-y);
}
.ecl-page-header__content {
  width: 100%;
  max-width: var(--page-header-content-max-width);
  min-height: var(--page-header-content-min-height);
  margin-block: var(--page-header-content-margin-top) var(--page-header-content-margin-bottom);
  padding: var(--page-header-content-padding-top) var(--page-header-content-padding-right) var(--page-header-content-padding-bottom) var(--page-header-content-padding-left);
  text-align: var(--page-header-content-text-align);
  background: var(--page-header-content-background);
  border-width: var(--page-header-content-border-width);
  border-style: var(--page-header-content-border-style);
  border-color: var(--page-header-content-border-color);
  border-radius: var(--page-header-content-border-radius);
  box-shadow: var(--page-header-content-shadow);
}
.ecl-page-header__title,
.post > .ecl-page-header .ecl-page-header__content > .ecl-page-header__title {
  inline-size: 100%;
  max-inline-size: var(--phi-measure-page-title);
  padding-inline-start: var(--page-header-title-inset) !important;
  margin: 0 !important;
  font-family: var(--page-header-title-font);
  font-size: var(--phi-page-title-size) !important;
  font-weight: var(--page-header-title-weight) !important;
  font-style: var(--page-header-title-style);
  line-height: var(--headings-line-height) !important;
  letter-spacing: var(--headings-letter-spacing) !important;
  text-transform: var(--page-header-title-transform);
  color: var(--page-header-title-color);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.post > .ecl-page-header .ecl-page-header__content > .post__meta,
.post > .ecl-page-header .ecl-page-header__content > .post__date,
.post__header .post__meta,
.feed__meta {
  margin-block: var(--page-header-meta-gap) 0;
  padding-inline-start: var(--page-header-meta-inset);
  gap: var(--feed-meta-style-gap);
  color: var(--page-header-meta-color);
  font-family: var(--page-header-meta-font);
  font-size: var(--page-header-meta-size);
  font-weight: var(--page-header-meta-weight);
  line-height: var(--page-header-meta-line-height);
  letter-spacing: var(--page-header-meta-letter-spacing);
  text-transform: var(--page-header-meta-transform);
}
.post__header .post__meta .reading-time { margin-inline-start: var(--feed-meta-style-gap); }

#main .post__entry > :where(p, ul, ol, blockquote, pre, table):not([class]):not([style]),
#main .page__entry > :where(p, ul, ol, blockquote, pre, table):not([class]):not([style]) {
  max-inline-size: var(--phi-measure-prose);
}
#main .post__entry > p:is([class],[style]),
#main .page__entry > p:is([class],[style]) {
  max-inline-size: none;
}
#main .post__entry > p,
#main .page__entry > p {
  font-size: var(--content-body-size) !important;
  line-height: var(--content-body-line-height) !important;
  letter-spacing: var(--letter-spacing);
  color: var(--content-body-color);
  margin-block-end: var(--content-body-paragraph-gap);
  overflow-wrap: anywhere;
}
@media (max-width: 46rem) {
  /* Compact Theme Options are the final owners inside the compact breakpoint. */
  #main .post__entry > p,
  #main .page__entry > p {
    font-size: var(--content-body-mobile-size) !important;
  }

  #main .post > .ecl-page-header .ecl-page-header__content > .ecl-page-header__title {
    padding-inline-start: var(--page-header-title-mobile-inset) !important;
  }

  #main .post > .ecl-page-header .ecl-page-header__content > .post__meta {
    margin-block: var(--page-header-meta-mobile-gap) 0;
    padding-inline-start: var(--page-header-meta-mobile-inset);
    font-size: var(--page-header-meta-mobile-size);
  }

  #main .post > .ecl-page-header .ecl-page-header__content > .post__date {
    margin-block: 0 var(--page-header-meta-mobile-gap);
    font-size: var(--page-header-meta-mobile-size);
  }
}

#main .post__entry > :where(ul, ol),
#main .page__entry > :where(ul, ol) {
  font-size: var(--content-list-size);
  line-height: var(--content-list-line-height);
  margin-block: 0 var(--content-body-paragraph-gap);
  padding-inline-start: var(--content-list-indent);
}
#main .post__entry > :where(ul, ol) > li + li,
#main .page__entry > :where(ul, ol) > li + li { margin-block-start: var(--content-list-item-gap); }

#main .post__entry > h2,
#main .page__entry > h2 {
  inline-size: 100%;
  max-inline-size: var(--phi-measure-heading);
  margin-block: var(--phi-prose-h2-margin-top) var(--phi-prose-h2-margin-bottom) !important;
  font-size: var(--phi-prose-h2-size) !important;
  line-height: var(--headings-line-height) !important;
  letter-spacing: var(--headings-letter-spacing) !important;
  text-wrap: balance;
}
#main .post__entry > h3,
#main .page__entry > h3 {
  inline-size: 100%;
  max-inline-size: var(--phi-measure-heading);
  margin-block: var(--phi-prose-h3-margin-top) var(--phi-prose-h3-margin-bottom) !important;
  font-size: var(--phi-prose-h3-size) !important;
  line-height: var(--headings-line-height) !important;
  letter-spacing: var(--headings-letter-spacing) !important;
  text-wrap: balance;
}
#main .post__entry > h4,
#main .page__entry > h4 {
  inline-size: 100%;
  max-inline-size: var(--phi-measure-heading);
  margin-block: var(--phi-prose-h4-margin-top) var(--phi-prose-h4-margin-bottom) !important;
  font-size: var(--phi-prose-h4-size) !important;
  line-height: var(--headings-line-height) !important;
  letter-spacing: var(--headings-letter-spacing) !important;
}
#main .post__entry > h5,
#main .page__entry > h5 {
  inline-size: 100%;
  max-inline-size: var(--phi-measure-heading);
  margin-block: var(--phi-prose-h5-margin-top) var(--phi-prose-h5-margin-bottom) !important;
  font-size: var(--phi-prose-h5-size) !important;
  line-height: var(--headings-line-height) !important;
  letter-spacing: var(--headings-letter-spacing) !important;
}
#main .post__entry > h6,
#main .page__entry > h6 {
  inline-size: 100%;
  max-inline-size: var(--phi-measure-heading);
  margin-block: var(--phi-prose-h6-margin-top) var(--phi-prose-h6-margin-bottom) !important;
  font-size: var(--phi-prose-h6-size) !important;
  line-height: var(--headings-line-height) !important;
  letter-spacing: var(--headings-letter-spacing) !important;
}
#main .post__entry > :is(h2, h3, h4, h5, h6):first-child,
#main .page__entry > :is(h2, h3, h4, h5, h6):first-child { margin-block-start: 0 !important; }

#main .post__entry > blockquote,
#main .page__entry > blockquote {
  margin-block: var(--content-quote-margin-y);
  padding-block: var(--content-quote-padding-y);
  padding-inline: var(--content-quote-padding-left) var(--content-quote-padding-right);
  border-inline-start-width: var(--content-quote-border-width);
  border-inline-start-color: var(--content-quote-border-color);
  font-size: var(--content-quote-size);
  line-height: var(--content-quote-line-height);
}
#main .post__entry > blockquote p,
#main .page__entry > blockquote p {
  font-size: inherit !important;
  line-height: inherit !important;
}
#main .post__entry > pre,
#main .page__entry > pre {
  box-sizing: border-box;
  margin-block: var(--phi-component-gap);
  padding: var(--content-code-padding);
  font-size: var(--content-code-size);
  line-height: var(--content-code-line-height);
  overflow-x: auto;
  max-inline-size: 100%;
}
#main .post__entry > table,
#main .page__entry > table {
  margin-block: var(--phi-component-gap);
  font-size: var(--content-table-size);
  line-height: var(--content-table-line-height);
}
#main .post__entry > table :is(th, td),
#main .page__entry > table :is(th, td) { padding: var(--content-table-cell-padding); }

#footer .ecl-site-footer__site-name {
  font-size: var(--footer-site-title-size) !important;
  line-height: var(--footer-line-height) !important;
}
#footer .ecl-site-footer__description,
#footer .ecl-site-footer__copyright,
#footer .ecl-site-footer__links {
  font-size: var(--footer-aux-font-size);
  line-height: var(--footer-aux-line-height);
}

/* === Phase 3: cards, media and frontend content components === */
/* Current rich-section family follows the same section/local hierarchy. */
#main .image-direction-cards {
  margin-block: var(--phi-component-section-gap);
}
#main .image-direction-cards__header {
  margin-block-end: var(--phi-component-gap);
}
#main .image-direction-cards__section-title {
  margin-block-end: var(--phi-component-gap) !important;
  font-size: var(--phi-component-section-title-size) !important;
}
#main .image-direction-cards__section-intro p {
  max-inline-size: none;
  margin-block-end: var(--phi-component-gap);
}
#main .image-direction-cards__grid {
  margin-block-start: var(--phi-component-gap);
  gap: var(--phi-component-gap);
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  #main .image-direction-cards__card:last-child:nth-child(odd) {
    width: calc((100% - var(--phi-component-gap)) / 2);
  }
}


#main .post__entry > figure,
#main .page__entry > figure {
  max-inline-size: 100%;
  margin-block: var(--phi-component-section-gap);
}
#main :where(.post__entry,.page__entry) figure img,
#main :where(.post__entry,.page__entry) picture,
#main :where(.post__entry,.page__entry) video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
#main :where(.post__entry,.page__entry) figcaption {
  margin-block-start: var(--phi-component-meta-size);
  color: var(--phi-component-text-muted);
  font-size: var(--content-image-caption-size);
  line-height: var(--feed-meta-style-line-height);
}

#main .feed__item { column-gap: var(--phi-component-gap); row-gap: var(--phi-component-gap); }
#main .feed__image { overflow: hidden; border-radius: var(--phi-component-radius); }
#main .feed__item .feed__title,
#main .tags-template .tag-card__title {
  font-size: var(--feed-card-title-size) !important;
  line-height: var(--feed-card-title-line-height) !important;
  font-weight: var(--feed-card-title-weight);
  margin-block-end: var(--feed-card-title-margin-bottom);
}
#main .feed__item .feed__excerpt { font-size: var(--feed-card-excerpt-size); line-height: var(--feed-card-excerpt-line-height); }

@media (max-width: 63.99rem) {
  #main .feed__item .feed__title,
  #main .tags-template .tag-card__title {
    font-size: var(--feed-card-title-mobile-size) !important;
  }
}

#main :where(.archive-card,.tag-card,.author-profile-card) {
  box-sizing: border-box;
  background: var(--phi-component-surface);
  color: var(--phi-component-text);
  border: var(--phi-component-border-width) solid var(--phi-component-border);
  border-radius: var(--phi-component-radius);
  overflow: hidden;
}
#main .archive-card { padding: var(--phi-component-padding); }
#main .tag-card { padding: var(--phi-component-padding); }
#main .author-profile-card { padding: var(--author-profile-style-padding) var(--author-profile-style-padding-x); }
#main .author-profile-card__media { margin-inline-end: var(--author-profile-style-image-gap); }
#main .author-profile-card__contacts { margin-block-start: var(--author-profile-style-contacts-gap); }

/* Rich-output sections share one visual grammar; peer items remain equal peers. */
#main :where(
  [data-utpf-plugin="audio-showcase"],
  [data-utpf-plugin="pricing"],
  [data-utpf-plugin="services"],
  [data-utpf-plugin="timeline"],
  [data-utpf-plugin="work-process"],
  [data-utpf-plugin="customer-testimonials"],
  [data-utpf-plugin="our-team"],
  [data-utpf-plugin="our-friends"],
  [data-utpf-plugin="statistics"],
  [data-utpf-plugin="faq"],
  [data-utpf-plugin="checklist"],
  [data-utpf-plugin="changelog"],
  [data-utpf-plugin="steps"],
  .image-feature-cards,
  .image-direction-cards,
  .hero-media-cta,
  .audio-showcase,
  .utpf-pricing,
  .utpf-services-section,
  .utpf-timeline,
  .work-process,
  .customer-testimonials,
  .our-team,
  .our-friends,
  .utpf-faq,
  .utpf-checklist-block,
  .utpf-changelog,
  .footnotes
) {
  box-sizing: border-box;
  margin-block: var(--phi-component-section-gap);
}

#main :where(
  .audio-showcase__heading,
  .utpf-pricing__title,
  .work-process__heading,
  .customer-testimonials__title,
  .utpf-services-heading,
  .utpf-timeline-heading,
  [data-our-team-title-text="true"],
  .image-direction-cards__section-title
) {
  inline-size: 100%;
  margin-block: 0 var(--phi-component-gap);
  color: var(--phi-component-text);
  font-size: var(--phi-component-section-title-size);
  line-height: var(--headings-line-height);
  letter-spacing: var(--headings-letter-spacing);
  font-weight: var(--headings-weight);
  text-wrap: balance;
}
#main :where(
  .audio-showcase__introduction,
  .utpf-pricing__description,
  .work-process__intro,
  [data-our-team-intro-text="true"]
) {
  inline-size: 100%;
  max-inline-size: var(--phi-component-text-measure);
  margin-block: 0 var(--phi-component-gap);
  color: var(--phi-component-text-muted);
  font-size: var(--phi-component-intro-size);
  line-height: var(--content-body-line-height);
}

#main :where(
  .audio-showcase__grid,
  .utpf-pricing__grid,
  .utpf-services-grid,
  .utpf-statistics,
  .our-team [data-our-team-grid="true"],
  .customer-testimonials [data-customer-testimonials-grid="true"],
  .image-feature-cards__grid,
  .image-direction-cards__grid
) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--phi-component-grid-min-width)), 1fr));
  gap: var(--phi-component-gap);
  width: 100%;
  margin-block-start: var(--phi-component-gap);
}

#main .image-direction-cards__card,
#main .image-feature-cards__card,
#main .audio-showcase__card,
#main .utpf-pricing__card,
#main .our-team__card,
#main .utpf-services-card,
#main .utpf-timeline-item,
#main .work-process__card,
#main .customer-testimonials__card,
#main .our-friends__item,
#main .utpf-statistics-item,
#main .utpf-faq__item {
  overflow: hidden;
  background: var(--phi-component-surface);
  color: var(--phi-component-text);
  border: var(--phi-component-border-width) solid var(--phi-component-border);
  border-radius: var(--phi-component-radius);
  box-shadow: none;
}
#main .audio-showcase__content,
#main .image-direction-cards__content,
#main .image-feature-cards__content,
#main .utpf-services-card-body,
#main .utpf-timeline-content,
#main .work-process__card,
#main .customer-testimonials__card,
#main .utpf-statistics-item,
#main .utpf-pricing__card,
#main .our-team__card,
#main .our-friends__item {
  padding: var(--phi-component-padding);
}

#main :where(
  .audio-showcase__track-title,
  .image-feature-cards__card-title,
  .utpf-pricing__name,
  .our-team__name,
  .work-process__step-title,
  .utpf-services-card h3,
  .utpf-timeline-item h3
) {
  margin-block: 0 var(--phi-component-gap);
  color: var(--phi-component-text);
  font-size: var(--phi-component-title-size);
  line-height: var(--headings-line-height);
  font-weight: var(--headings-weight);
}
#main :where(
  .audio-showcase__track-description,
  .image-feature-cards__card-text,
  .utpf-pricing__plan-description,
  .work-process__step-description,
  .utpf-services-card .ecl-content-block__description,
  .utpf-timeline-content .ecl-content-block__description,
  .customer-testimonials__text
) {
  margin: 0;
  color: var(--phi-component-text-muted);
  font-size: var(--content-body-size);
  line-height: var(--content-body-line-height);
}

#main :where(.audio-showcase__cover,.image-direction-cards__media-frame,.image-feature-cards__media,.image-feature-cards__image-frame) {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--phi-component-media-aspect) / 1;
  background: var(--phi-component-surface-muted);
}
#main :where(.audio-showcase__image,.image-direction-cards__media-frame img,.image-feature-cards img,.our-team__card img) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .image-direction-cards__media-frame[data-utpf-image-direction-cards-image-ratio="16:9"] { aspect-ratio: 16 / 9; }
#main .image-direction-cards__media-frame[data-utpf-image-direction-cards-image-ratio="2:1"] { aspect-ratio: 2 / 1; }
#main .image-direction-cards__media-frame[data-utpf-image-direction-cards-image-fit^="contain"] img { object-fit: contain; }
#main .image-direction-cards__media-frame[data-utpf-image-direction-cards-image-fit="cover"] img { object-fit: cover; }

/* The media region is supporting; the text/cards region is dominant. */
#main .image-feature-cards__container { width: 100%; max-width: var(--phi-shell-frame-max); margin-inline: auto; }
#main .image-feature-cards__row {
  display: grid;
  grid-template-columns: minmax(0,var(--phi-component-minor-fr)) minmax(0,var(--phi-component-major-fr));
  gap: var(--phi-component-section-gap);
  align-items: stretch;
}
#main .hero-media-cta {
  position: relative;
  overflow: hidden;
  background: var(--phi-component-surface-muted);
  border: var(--phi-component-border-width) solid var(--phi-component-border);
  border-radius: var(--phi-component-radius);
}
#main .hero-media-cta__inner {
  display: grid;
  grid-template-columns: minmax(0,var(--phi-component-minor-fr)) minmax(0,var(--phi-component-major-fr));
  align-items: stretch;
}
#main .hero-media-cta__media { position: relative; min-height: 0; overflow: hidden; }
#main .hero-media-cta__image { display:block; width:100%; height:100%; object-fit:cover; }
#main .hero-media-cta__text { padding: var(--phi-component-padding); align-self:center; }
#main .hero-media-cta__eyebrow { margin-block:0 var(--phi-component-gap); color:var(--color); font-size:var(--phi-component-meta-size); font-weight:var(--font-weight-bold); }
#main .hero-media-cta__heading { margin-block:0 var(--phi-component-gap); color:var(--phi-component-text); font-size:var(--phi-component-section-title-size); line-height:var(--headings-line-height); }
#main .hero-media-cta__introduction { margin-block:0 var(--phi-component-gap); color:var(--phi-component-text-muted); font-size:var(--phi-component-intro-size); line-height:var(--content-body-line-height); }
#main .hero-media-cta__actions { display:flex; flex-wrap:wrap; gap:var(--phi-component-gap); }
#main .hero-media-cta__caption { margin-block-start:var(--phi-component-meta-size); color:var(--phi-component-text-muted); font-size:var(--phi-component-meta-size); }

#main .utpf-pricing__features { margin-block: var(--phi-component-gap); }
#main .utpf-pricing__features > li { gap: var(--phi-component-meta-size); margin-block: var(--phi-component-meta-size); }
#main .utpf-services-section { padding-block: var(--phi-component-section-gap); }
#main .utpf-timeline-items,
#main .work-process__timeline { margin-block-start: var(--phi-component-gap); }
#main .utpf-timeline-item,
#main .work-process__item { margin-block-end: var(--phi-component-gap); }
#main .customer-testimonials__card,
#main .our-team__card { padding: var(--phi-component-padding); }
#main .customer-testimonials__text { margin-block-end: var(--phi-component-gap); }
#main .utpf-statistics-value { font-size: var(--phi-component-section-title-size); line-height: var(--headings-line-height); }
#main .utpf-statistics-label { margin-block-start: var(--phi-component-meta-size); color: var(--phi-component-text-muted); font-size: var(--phi-component-meta-size); }
#main .utpf-faq { margin-block: var(--phi-component-section-gap); }
#main .utpf-faq__item { margin-block-end: var(--phi-component-gap); }
#main .utpf-faq__summary,
#main .utpf-faq__item > :not(.utpf-faq__summary) { padding: var(--phi-component-padding); }
#main .utpf-faq__summary { background: var(--phi-component-surface-muted); color: var(--phi-component-text); }
#main .utpf-checklist-block {
  padding: var(--phi-component-padding);
  background: var(--phi-component-surface);
  border: var(--phi-component-border-width) solid var(--phi-component-border);
  border-radius: var(--phi-component-radius);
}
#main .utpf-checklist { margin-block: var(--phi-component-gap); }
#main .utpf-checklist-item { gap: var(--phi-component-gap); padding-block: var(--phi-component-gap); border-bottom: var(--phi-component-border-width) solid var(--phi-component-border); }
#main .utpf-changelog { padding: var(--phi-component-padding); border-inline-start: var(--phi-component-border-width) solid var(--color); background: var(--phi-component-surface-muted); }
#main :where([data-utpf-plugin="steps"],.utpf-steps) { margin-block:var(--phi-component-section-gap); }
#main :where([data-utpf-plugin="steps"],.utpf-steps) > * + * { margin-block-start:var(--phi-component-gap); }
#main .footnotes { margin-block:var(--phi-component-section-gap); font-size:var(--phi-component-meta-size); line-height:var(--feed-meta-style-line-height); }
#main .footnotes li + li { margin-block-start:var(--phi-component-meta-size); }

#header .miditaur-main-menu > .ecl-menu__mobile-toggle,
#header .miditaur-main-menu > .ecl-menu__inner > .ecl-menu__list {
  border-color: var(--ecl-color-border);
  border-width: var(--menu-border-width) !important;
}
/* === Full available-width ownership === */
#main .ecl-page-header__container,
#main .ecl-inpage-nav {
  width: 100%;
  max-width: var(--phi-shell-frame-max);
}
#main .page-header p {
  inline-size: 100%;
  max-inline-size: var(--phi-measure-prose);
}
.author-template .author-profile-card,
.author-template .author-header__description {
  width: 100%;
  max-width: var(--author-profile-style-max-width);
}
.author-template .author-profile-card__contact a {
  color: var(--author-profile-style-link-color);
}
#main :where(.ms-section-heading, .ms-final-cta p, .utpf-pricing__header) {
  width: 100%;
  max-width: var(--phi-component-text-measure);
}
#main :where(h1,h2,h3,h4,h5,h6):not(.visually-hidden) {
  inline-size: 100%;
}
/* === Pricing header width ownership === */
#main .utpf-pricing__header {
  width: 100%;
  max-width: var(--pricing-header-max-width-local, var(--pricing-header-max-width));
}

/* One-time compatibility for legacy Pricing blocks serialized by <=1.18.49.
   Only the exact old plugin-generated 760px inline artifact is overridden. */
#main .utpf-pricing__header[style*="max-width:760px"],
#main .utpf-pricing__header[style*="max-width: 760px"] {
  max-width: var(--pricing-header-max-width-local, var(--pricing-header-max-width)) !important;
}