/* v0.7 foundation: shared structure, navigation, motion and accessibility. */
html {
  scroll-behavior: smooth;
}

body {
  letter-spacing: .01em;
  overflow-x: hidden;
}

#nav {
  padding: 0 4%;
  transition: background .3s ease, box-shadow .3s ease;
}

#page-header.nav-fixed #nav,
#page-header.not-top-img #nav {
  background: var(--skin-nav) !important;
  border-bottom: 1px solid var(--skin-border);
  box-shadow: 0 8px 30px rgba(45,55,90,.08);
  backdrop-filter: saturate(150%) blur(var(--skin-blur));
  -webkit-backdrop-filter: saturate(150%) blur(var(--skin-blur));
}

#page-header.full_page {
  min-height: 100vh;
}

#page-header #site-info {
  text-shadow: 0 4px 20px rgba(0,0,0,.34);
}

#site-title {
  font-weight: 800;
  letter-spacing: .07em;
}

#site-subtitle {
  margin-top: .8rem;
  font-weight: 500;
  letter-spacing: .05em;
}

#content-inner {
  max-width: var(--ds-content);
  padding-top: 2rem;
}

#footer {
  background: transparent;
}

#footer-wrap {
  color: color-mix(in srgb, var(--skin-text) 72%, transparent) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#footer-wrap a {
  color: inherit !important;
}

#footer-wrap * {
  opacity: 1 !important;
}

a {
  color: var(--skin-accent);
}

.card-widget,
#recent-posts > .recent-post-item,
.pan123-video-card {
  border: 1px solid var(--skin-border) !important;
  border-radius: var(--skin-radius) !important;
  background: var(--skin-card) !important;
  box-shadow: var(--skin-shadow) !important;
  color: var(--skin-text);
  backdrop-filter: blur(var(--skin-blur));
  -webkit-backdrop-filter: blur(var(--skin-blur));
}

#recent-posts > .recent-post-item {
  transition: transform .28s ease, box-shadow .28s ease;
}

#recent-posts > .recent-post-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 66px color-mix(in srgb, var(--skin-accent) 18%, transparent) !important;
}

#recent-posts > .recent-post-item .post_cover img {
  transition: transform .55s cubic-bezier(.2,.75,.3,1);
}

#recent-posts > .recent-post-item:hover .post_cover img {
  transform: scale(1.035);
}

.article-title,
#article-container,
#aside-content,
#aside-content .card-info .author-info-name {
  color: var(--skin-text) !important;
}

.article-meta-wrap,
.article-meta-wrap a,
#aside-content .card-widget,
#aside-content .card-widget a {
  color: var(--skin-muted) !important;
}

#rightside > div > button,
#rightside > div > a {
  background: color-mix(in srgb, var(--skin-accent) 84%, #000 16%) !important;
}

.media-eyebrow {
  display: inline-block;
  margin-bottom: .35rem;
  color: var(--skin-accent) !important;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
}

html[data-experience]:not([data-experience="home"]) #page-header.not-home-page {
  height: clamp(118px,12vw,142px) !important;
  min-height: 118px !important;
  background-position: center 46% !important;
}

html[data-experience="reading"] #page-header.post-bg {
  height: clamp(158px,16vw,188px) !important;
  min-height: 158px !important;
  background-position: center 46% !important;
}

html[data-experience]:not([data-experience="home"]) #page-header.not-home-page #page-site-info {
  top: 55% !important;
  transform: translateY(-50%) !important;
  padding: 18px 14px 0 !important;
}

html[data-experience]:not([data-experience="home"]) #page-header.not-home-page #page-site-info .title {
  font-size: clamp(1.45rem,2.35vw,1.9rem) !important;
  letter-spacing: .03em;
}

html[data-experience="reading"] #page-header.post-bg #post-info {
  top: 56% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

html[data-experience="reading"] #page-header.post-bg #post-info .post-title {
  font-size: clamp(1.5rem,2.5vw,2rem) !important;
}

html[data-experience]:not([data-experience="home"]) #page-header.not-home-page::after,
html[data-experience="reading"] #page-header.post-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(18,30,24,.11));
}

html[data-experience]:not([data-experience="home"]) #page-header #nav,
html[data-experience]:not([data-experience="home"]) #page-header #page-site-info,
html[data-experience="reading"] #page-header #post-info {
  z-index: 2;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--skin-accent) 70%, white 30%);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}