/* ============================================================
   2026 visual refresh layer (hnz.io <- heinz.marketing tokens)
   ============================================================ */

/* Module map
   01) Design Tokens
   02) Global Shell (body, header, title)
   03) Section Separators (home/feed/detail frame)
   04) Cards (image + note cards)
   05) Stories
   06) Detail Section Layout
   07) Author Card
   08) Interactive Elements (buttons/tags/motion)
   09) Link + Footer Theme Toggle
   10) Theme States (light/dark + dark component overrides)
*/

/* ============================================================
   01) Design Tokens
   ============================================================ */
:root {
  --hm-accent: #6d28d9;
  --hm-accent-2: #0ea5e9;
  --hm-bg: #eef2f8;
  --hm-surface: rgba(255, 255, 255, 0.66);
  --hm-border: rgba(119, 134, 164, 0.2);
  --hm-text: #344158;
  --hm-muted: rgba(52, 65, 88, 0.79);
  --hm-heading: #1d273a;
  --hm-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
  --hm-btn-text: #f8fafc;
  --hm-btn-sheen: rgba(255, 255, 255, 0.42);
  --hm-btn-sheen-opacity: 0.8;
  --hm-btn-hover-lift: -2px;
  --hm-btn-hover-scale: 1.04;
  --hm-btn-glow: 0 12px 28px rgba(7, 10, 20, 0.24);
  --hm-site-title-color: var(--hm-heading);
  --hm-site-title-hover: color-mix(in oklab, var(--hm-accent) 74%, var(--hm-heading) 26%);
  --hm-site-title-underline: color-mix(in oklab, var(--hm-accent) 78%, white 22%);
  --hm-site-title-shadow: 0 8px 18px rgba(15, 23, 42, .12);
  --hm-link-underline: color-mix(in oklab, var(--hm-accent) 82%, white 18%);
  --hm-link-hover: color-mix(in oklab, var(--hm-heading) 68%, var(--hm-accent) 32%);
  --hm-blockquote-border: color-mix(in oklab, var(--hm-accent) 62%, var(--hm-border) 38%);
  --hm-blockquote-text: color-mix(in oklab, var(--hm-text) 90%, black 10%);
  --hm-dark-image-filter: none;
  --hm-media-card-radius: 16px;
  --hm-media-card-padding: 0.95rem;
  --hm-media-card-border: 1px solid color-mix(in oklab, var(--hm-border) 72%, white 28%);
  --hm-media-card-bg: rgba(255, 255, 255, 0.92);
  --hm-media-card-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
  --hm-media-card-hover-lift: -4px;
  --hm-media-card-hover-scale: 1.012;
  --hm-media-card-hover-shadow: 0 18px 32px rgba(15, 23, 42, 0.16);
  --hm-media-card-hover-border: color-mix(in oklab, var(--hm-accent) 44%, var(--hm-border) 56%);

  /* Placeholder tokens: author card */
  --hm-author-card-radius: 18px;
  --hm-author-card-padding: 1rem 1rem .9rem;
  --hm-author-card-gap: .95rem;
  --hm-author-card-border: 1px solid color-mix(in oklab, var(--hm-border) 74%, white 26%);
  --hm-author-card-bg: linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,251,255,.74));
  --hm-author-card-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  --hm-author-avatar-size: 72px;
  --hm-author-avatar-ring: 2px solid rgba(255,255,255,.88);
  --hm-author-avatar-shadow: 0 8px 16px rgba(15, 23, 42, 0.16);
  --hm-author-name-size: clamp(1.26rem, 1.4vw, 1.5rem);
  --hm-author-handle-size: .92rem;
  --hm-author-bio-size: 1rem;
  --hm-author-social-size: 2.2rem;
  --hm-author-social-radius: 12px;
  --hm-author-social-icon-size: 1.1rem;
  --hm-author-text: var(--hm-heading);
  --hm-author-handle-color: color-mix(in oklab, var(--hm-text) 68%, white 32%);
  --hm-author-bio-color: color-mix(in oklab, var(--hm-text) 92%, black 8%);
  --hm-author-social-bg: rgba(255,255,255,.82);
  --hm-author-social-border: 1px solid color-mix(in oklab, var(--hm-border) 74%, white 26%);
  --hm-author-social-color: var(--hm-heading);
  --hm-author-social-shadow: none;

  /* Placeholder tokens: note header */
  --hm-note-head-avatar-size: 34px;
  --hm-note-head-name-size: .9rem;
  --hm-note-head-sub-size: .8rem;
  --hm-note-head-gap: .52rem;
}

/* ============================================================
   02) Global Shell
   ============================================================ */
body {
  background:
    radial-gradient(900px 500px at 10% -2%, rgba(188, 216, 255, 0.28), transparent 74%),
    radial-gradient(860px 460px at 92% 4%, rgba(219, 197, 255, 0.24), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(247, 250, 255, 0.2)),
    var(--hm-bg);
  background-attachment: fixed;
  color: var(--hm-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--hm-heading);
}

#site-header.site-header {
  margin-top: 1.2rem;
  margin-bottom: 1.5rem;
  padding: 1.2rem 1rem 1.35rem;
  border-radius: 18px;
  border: 1px solid var(--hm-border);
  background: var(--hm-surface);
  box-shadow: var(--hm-shadow);
  backdrop-filter: blur(10px);
}

.site-branding .avatar-img {
  border: 1px solid color-mix(in oklab, var(--hm-border) 70%, white 30%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.15);
}

#site-title a {
  color: var(--hm-site-title-color);
  background: none;
  -webkit-text-fill-color: currentColor;
}

#site-title .site-title__link {
  position: relative;
  display: inline-block;
  transition: color .24s ease, text-shadow .24s ease;
}

#site-title .site-title__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--hm-site-title-underline);
  transform: scaleX(.42);
  transform-origin: left center;
  opacity: .66;
  transition: transform .26s ease, opacity .26s ease;
}

#site-title .site-title__link:hover,
#site-title .site-title__link:focus-visible {
  color: var(--hm-site-title-hover);
  text-shadow: var(--hm-site-title-shadow);
}

#site-title .site-title__link:hover::after,
#site-title .site-title__link:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

.header-text,
.header-text a,
.hnzio_bio,
.hnzio_bio a {
  color: var(--hm-text);
}

/* Keep author name link semantically clickable but visually plain */
.entry-meta-horizontal .author-name__link,
.entry-meta-horizontal .author-name__link:hover,
.entry-meta-horizontal .author-name__link:focus-visible {
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

/* ============================================================
   03) Section Separators
   ============================================================ */
#posts > .stream-section {
  margin: 0 0 2.2rem;
  padding: 0 0 2.2rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
  isolation: isolate;
}

#posts > .stream-section > * {
  position: relative;
  z-index: 1;
}

#posts > .stream-section + .stream-section {
  border-top: 1px solid color-mix(in oklab, var(--hm-border) 58%, transparent);
  padding-top: 2.6rem;
}

#posts > .stream-section + .stream-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 100vw;
  height: clamp(220px, 28vw, 330px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: .74;
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--hm-surface) 62%, white 8%) 0%,
      color-mix(in oklab, var(--hm-surface) 34%, transparent) 56%,
      transparent 100%
    ),
    radial-gradient(1200px 500px at 10% -8%, color-mix(in oklab, var(--hm-accent) 24%, transparent), transparent 72%),
    radial-gradient(1080px 460px at 92% -10%, color-mix(in oklab, var(--hm-accent-2) 23%, transparent), transparent 74%);
}

/* Home: no separator background effect for short notes */
#posts > .stream-section + .stream-section.stream-section--kurzmitteilung {
  border-top: 0;
  padding-top: 1.2rem;
}

#posts > .stream-section + .stream-section.stream-section--kurzmitteilung::before {
  display: none;
}

/* Home: image posts already have their own frame */
#posts > .stream-section + .stream-section.stream-section--image {
  border-top: 0;
  padding-top: 1.2rem;
}

#posts > .stream-section + .stream-section.stream-section--image::before {
  display: none;
}

.home-section {
  position: relative;
}

.home-section + .home-section {
  margin-top: 1.9rem;
  padding-top: 2.4rem;
  border-top: 1px solid color-mix(in oklab, var(--hm-border) 58%, transparent);
}

.home-section + .home-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 100vw;
  height: clamp(230px, 30vw, 360px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: .74;
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--hm-surface) 64%, white 8%) 0%,
      color-mix(in oklab, var(--hm-surface) 34%, transparent) 56%,
      transparent 100%
    ),
    radial-gradient(1240px 520px at 12% -10%, color-mix(in oklab, var(--hm-accent) 24%, transparent), transparent 73%),
    radial-gradient(1120px 480px at 90% -12%, color-mix(in oklab, var(--hm-accent-2) 23%, transparent), transparent 75%);
}

.home-section > * {
  position: relative;
  z-index: 1;
}

div.post::after {
  display: none;
}

.content.article,
.content.review,
.content.imagepost,
.content.tag-content,
#colophon.site-footer {
  margin-bottom: 1.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Detail pages keep compact reading width */
.content.wrapper {
  max-width: 550px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ============================================================
   04) Cards
   ============================================================ */

/* 04.1 Base card surface */
.image-tag.polaroid,
.notiz-tag.polaroid {
  border: var(--hm-media-card-border) !important;
  background: var(--hm-media-card-bg) !important;
  box-shadow: var(--hm-media-card-shadow) !important;
  border-radius: var(--hm-media-card-radius);
  padding: var(--hm-media-card-padding);
  box-sizing: border-box;
  transform: none;
}

.js-post-card {
  cursor: pointer;
}

.js-post-card:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--hm-accent) 62%, white 38%);
  outline-offset: 2px;
}

/* 04.2 Home + tag hover behavior */
main.home #posts .stream-section--image .image-tag.polaroid,
main.home #posts .stream-section--kurzmitteilung .notiz-tag.polaroid,
main.tag-content #posts .stream-section--image .image-tag.polaroid,
main.tag-content #posts .stream-section--kurzmitteilung .notiz-tag.polaroid {
  transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, border-color .26s ease;
  transform-origin: center top;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  main.home #posts .stream-section--image .image-tag.polaroid:hover,
  main.home #posts .stream-section--kurzmitteilung .notiz-tag.polaroid:hover,
  main.tag-content #posts .stream-section--image .image-tag.polaroid:hover,
  main.tag-content #posts .stream-section--kurzmitteilung .notiz-tag.polaroid:hover,
  main.home #posts .stream-section--image .image-tag.polaroid:focus-within,
  main.home #posts .stream-section--kurzmitteilung .notiz-tag.polaroid:focus-within,
  main.tag-content #posts .stream-section--image .image-tag.polaroid:focus-within,
  main.tag-content #posts .stream-section--kurzmitteilung .notiz-tag.polaroid:focus-within {
    transform: translateY(var(--hm-media-card-hover-lift)) scale(var(--hm-media-card-hover-scale));
    box-shadow: var(--hm-media-card-hover-shadow) !important;
    border-color: var(--hm-media-card-hover-border) !important;
  }
}

/* 04.3 Image card internals */
.image-tag.polaroid .polaroid-photo {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: calc(var(--hm-media-card-radius) - 4px) calc(var(--hm-media-card-radius) - 4px) 0 0;
}

.image-tag.polaroid .polaroid-photo .polaroid-link,
.image-tag.polaroid .polaroid-photo img {
  border-radius: inherit;
}

.image-tag.polaroid .polaroid-strip {
  padding: .7rem .15rem .1rem;
  border: 0;
  background: transparent;
}

/* 04.4 Note header internals */
.notiz-head {
  display: flex;
  align-items: center;
  gap: var(--hm-note-head-gap);
  padding-bottom: 0.52rem;
  margin-bottom: 0.62rem;
  border-bottom: 1px solid color-mix(in oklab, var(--hm-border) 62%, transparent);
}

.notiz-head__avatar {
  display: inline-flex;
  line-height: 0;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

.notiz-head__avatar img {
  width: var(--hm-note-head-avatar-size) !important;
  height: var(--hm-note-head-avatar-size) !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.notiz-head__meta {
  display: grid;
  gap: 0.02rem;
}

.notiz-head__name {
  font-weight: 700;
  font-size: var(--hm-note-head-name-size);
  color: var(--hm-heading);
  text-decoration: none;
  box-shadow: none !important;
  line-height: 1.1;
}

.notiz-head__sub {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--hm-note-head-sub-size);
  color: color-mix(in oklab, var(--hm-text) 72%, white 28%);
  line-height: 1.1;
}

.notiz-head__handle {
  font-weight: 600;
}

.notiz-head__dot {
  opacity: 0.65;
}

.notiz-head__time {
  color: inherit;
}

.notiz-tag.polaroid .e-content {
  margin-top: 0.35rem;
}

/* ============================================================
   05) Stories
   ============================================================ */

/* 05.1 Legacy slider shell */
.stories-slider {
  margin: 1.8rem auto;
  border-radius: 18px;
  border: 1px solid var(--hm-border);
  background: var(--hm-surface);
  box-shadow: var(--hm-shadow);
}

.stories-slider .swiper-slide {
  border: 1px solid color-mix(in oklab, var(--hm-border) 70%, white 30%);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.swiper-button-next,
.swiper-button-prev {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--hm-border);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

/* 05.2 Stories rail (instagram/snapchat-like) */
.stories-feed {
  position: relative;
  isolation: isolate;
  margin: 1.8rem auto;
  padding: .55rem 0 .45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.stories-feed::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  opacity: .78;
  border-top: 0;
  border-bottom: 0;
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--hm-surface) 48%, transparent),
      color-mix(in oklab, var(--hm-surface) 22%, transparent)
    ),
    radial-gradient(860px 220px at 14% 0%, color-mix(in oklab, var(--hm-accent) 13%, transparent), transparent 72%),
    radial-gradient(860px 220px at 86% 0%, color-mix(in oklab, var(--hm-accent-2) 12%, transparent), transparent 74%);
}

.stories-feed.wrapper {
  max-width: min(1080px, calc(100vw - 2rem));
  padding-left: 0;
  padding-right: 0;
}

.stories-feed.is-single {
  max-width: 340px;
}

.stories-feed__head {
  margin: 0 0 .72rem;
  padding-left: .05rem;
}

.stories-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--hm-accent) 92%, black),
    color-mix(in oklab, var(--hm-accent-2) 80%, black)
  );
  color: var(--hm-btn-text);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .26);
  box-shadow: var(--hm-btn-glow);
  line-height: 1;
}

.stories-pill::after {
  content: "";
  position: absolute;
  top: -130%;
  left: -45%;
  width: 42%;
  height: 280%;
  transform: translateX(-180%) rotate(18deg);
  background: linear-gradient(90deg, transparent, var(--hm-btn-sheen), transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform .68s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.stories-pill:hover::after {
  opacity: var(--hm-btn-sheen-opacity);
  transform: translateX(410%) rotate(18deg);
}

.stories-pill__icon {
  display: inline-flex;
  line-height: 0;
}

.stories-pill__icon svg {
  width: 13px;
  height: 13px;
  color: currentColor;
  fill: currentColor;
}

.stories-pill__label {
  font-size: .92rem;
  font-weight: 700;
}

.stories-track-wrap {
  position: relative;
}

.stories-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(94px, 10.2vw, 130px);
  gap: .72rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .14rem 2.4rem .3rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  border-radius: 16px;
}

.stories-rail.is-single {
  grid-auto-flow: row;
  grid-template-columns: clamp(94px, 18vw, 136px);
  justify-content: center;
  overflow: visible;
}

.stories-feed.is-single .story-card {
  width: min(100%, 140px);
  margin-inline: auto;
}

.story-card {
  scroll-snap-align: start;
}

.story-card__media {
  display: block;
  padding: 2px;
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      color-mix(in oklab, var(--hm-accent) 86%, black 14%),
      color-mix(in oklab, var(--hm-accent-2) 82%, black 18%)
    );
  box-shadow: 0 12px 18px rgba(15, 23, 42, 0.14);
  transition: transform .22s ease, box-shadow .22s ease;
}

.story-card__media:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 24px rgba(15, 23, 42, 0.18);
}

.story-card__media:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--hm-accent) 65%, white 35%);
  outline-offset: 2px;
}

.story-card__media img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.88);
}

.stories-feed .story-icon {
  margin-top: .36rem;
  margin-bottom: 0;
  gap: .25rem;
}

.stories-feed.is-single .story-icon {
  justify-content: center;
}

.stories-feed .story-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.62rem;
  height: 1.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--hm-border) 72%, white 28%);
  background: rgba(255, 255, 255, 0.82);
  color: color-mix(in oklab, var(--hm-accent) 66%, var(--hm-heading) 34%);
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}

.stories-feed .story-icon svg {
  width: 13px;
  height: 13px;
}

.stories-nav {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--hm-border) 70%, white 30%);
  background: rgba(255, 255, 255, 0.9);
  color: color-mix(in oklab, var(--hm-accent) 74%, var(--hm-heading) 26%);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.14);
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  font-size: 1.22rem;
  font-weight: 700;
}

.stories-nav:disabled {
  opacity: .45;
  cursor: default;
}

.stories-nav--prev {
  left: .1rem;
}

.stories-nav--next {
  right: .1rem;
}

/* 05.3 Shared meta bubbles used in stories and cards */
.meta-info-bubbles {
  gap: 0.48rem;
  margin-top: 0.35rem;
}

.meta-info__bubble {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--hm-border) 70%, white 30%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  color: var(--hm-text);
}

.meta-info__bubble:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--hm-accent) 45%, var(--hm-border) 55%);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.meta-info-bubbles .meta-info__icon svg,
.meta-info-bubbles .meta-info__icons svg {
  color: color-mix(in oklab, var(--hm-accent) 72%, var(--hm-text) 28%);
  fill: currentColor;
}

/* ============================================================
   06) Detail Section Layout
   ============================================================ */
.content .page-section {
  position: relative;
  z-index: 1;
}

.content .page-section + .page-section {
  margin-top: 1.7rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in oklab, var(--hm-border) 58%, transparent);
}

.content .page-section + .page-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 100vw;
  height: calc(100% + 1px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  opacity: .38;
  background:
    linear-gradient(to bottom, color-mix(in oklab, var(--hm-surface) 28%, transparent), transparent 38%),
    radial-gradient(760px 320px at 10% -14%, color-mix(in oklab, var(--hm-accent) 15%, transparent), transparent 74%),
    radial-gradient(720px 300px at 90% -10%, color-mix(in oklab, var(--hm-accent-2) 13%, transparent), transparent 74%);
}

/* Detail: meta section without top divider, spacing only */
.content .page-section + .page-section--meta {
  border-top: 0;
  padding-top: 1.9rem;
}

.content .page-section + .page-section--meta::before {
  display: none;
}

/* Ensure a visible section break below the author box on all detail pages */
.content .page-section--author {
  margin-bottom: 1.7rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in oklab, var(--hm-border) 58%, transparent);
}

.content .page-section--author::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 100vw;
  height: clamp(160px, 22vw, 250px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  opacity: .35;
  background:
    linear-gradient(to top, color-mix(in oklab, var(--hm-surface) 22%, transparent), transparent 62%),
    radial-gradient(760px 300px at 14% 108%, color-mix(in oklab, var(--hm-accent) 12%, transparent), transparent 72%),
    radial-gradient(760px 300px at 86% 106%, color-mix(in oklab, var(--hm-accent-2) 11%, transparent), transparent 72%);
}

.content.imagepost.wrapper > .page-section--author {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in oklab, var(--hm-border) 58%, transparent);
}

/* ============================================================
   07) Author Card
   ============================================================ */
.author-card-wrap {
  margin-top: .25rem;
}

.entry-author .author-card {
  display: grid;
  gap: var(--hm-author-card-gap);
  padding: var(--hm-author-card-padding);
  border: var(--hm-author-card-border);
  border-radius: var(--hm-author-card-radius);
  background:
    var(--hm-author-card-bg),
    var(--hm-surface);
  box-shadow: var(--hm-author-card-shadow);
}

.entry-author .author-card a {
  box-shadow: none !important;
  text-decoration: none !important;
}

.entry-author .author-card__head {
  display: flex;
  align-items: center;
  gap: .78rem;
}

.entry-author .author-card__avatar {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  line-height: 0;
  border: var(--hm-author-avatar-ring);
  box-shadow: var(--hm-author-avatar-shadow);
}

.entry-author .author-card__avatar .u-photo {
  width: var(--hm-author-avatar-size);
  height: var(--hm-author-avatar-size);
  object-fit: cover;
  display: block;
}

.entry-author .author-card__identity {
  display: grid;
  gap: .15rem;
}

.entry-author .author-card__name {
  margin: 0;
  font-size: var(--hm-author-name-size);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hm-author-text);
}

.entry-author .author-card__name:hover {
  color: color-mix(in oklab, var(--hm-heading) 74%, var(--hm-accent) 26%);
}

.entry-author .author-card__handle {
  margin: 0;
  font-size: var(--hm-author-handle-size);
  font-weight: 600;
  color: var(--hm-author-handle-color);
}

.entry-author .author-card__bio {
  margin: 0;
  font-size: var(--hm-author-bio-size);
  line-height: 1.6;
  color: var(--hm-author-bio-color);
  max-width: none;
}

.entry-author .author-card__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .42rem;
  margin: .2rem 0 0;
}

.entry-author .author-card__social li {
  list-style: none;
}

.entry-author .author-card__social .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hm-author-social-size);
  height: var(--hm-author-social-size);
  border-radius: var(--hm-author-social-radius);
  border: var(--hm-author-social-border);
  background: var(--hm-author-social-bg);
  color: var(--hm-author-social-color);
  box-shadow: var(--hm-author-social-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.entry-author .author-card__social .social-link svg {
  width: var(--hm-author-social-icon-size);
  height: var(--hm-author-social-icon-size);
  fill: currentColor;
}

.entry-author .author-card__social .social-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--hm-accent) 42%, var(--hm-border) 58%);
  box-shadow: 0 10px 16px rgba(15, 23, 42, 0.12);
  color: color-mix(in oklab, var(--hm-accent) 76%, var(--hm-heading) 24%);
}

@media (max-width: 640px) {
  .entry-author .author-card {
    --hm-author-card-padding: .9rem .85rem .8rem;
    --hm-author-card-radius: 16px;
    --hm-author-avatar-size: 58px;
    --hm-author-name-size: 1.15rem;
  }

  .entry-author .author-card__head {
    gap: .62rem;
  }
}

/* ============================================================
   08) Interactive Elements
   ============================================================ */
.load-more-btn::after,
#kommentform .button-primary::after,
.kommentReply::after {
  content: "";
  position: absolute;
  top: -130%;
  left: -45%;
  width: 42%;
  height: 280%;
  transform: translateX(-180%) rotate(18deg);
  background: linear-gradient(90deg, transparent, var(--hm-btn-sheen), transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform .68s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.load-more-btn,
#kommentform .button-primary,
.kommentReply {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .46rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  padding: .62rem 1.06rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hm-btn-text);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.26);
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--hm-accent) 92%, black),
    color-mix(in oklab, var(--hm-accent-2) 80%, black)
  );
  box-shadow: var(--hm-btn-glow);
  transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease;
}

.load-more-btn__icon {
  display: inline-flex;
  line-height: 0;
}

.load-more-btn__icon svg {
  width: .88rem;
  height: .88rem;
  fill: currentColor;
}

.load-more-btn__label {
  font-size: 1rem;
}

.load-more-btn:hover,
#kommentform .button-primary:hover,
.kommentReply:hover {
  transform: translateY(var(--hm-btn-hover-lift)) scale(var(--hm-btn-hover-scale));
  box-shadow: var(--hm-btn-glow);
}

.load-more-btn:hover::after,
#kommentform .button-primary:hover::after,
.kommentReply:hover::after {
  opacity: var(--hm-btn-sheen-opacity);
  transform: translateX(410%) rotate(18deg);
}

/* Shared glass sheen for all non-gradient pills */
.meta-info__bubble,
.meta-topic,
.tag,
.polaroid-strip .meta-image-info > *,
.stories-feed .story-icon a,
#colophon .theme-toggle {
  position: relative;
  overflow: hidden;
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    box-shadow .24s ease,
    border-color .24s ease,
    color .24s ease;
}

.meta-info__bubble::after,
.meta-topic::after,
.tag::after,
.polaroid-strip .meta-image-info > *::after,
.stories-feed .story-icon a::after,
#colophon .theme-toggle::after {
  content: "";
  position: absolute;
  top: -130%;
  left: -45%;
  width: 42%;
  height: 280%;
  transform: translateX(-180%) rotate(18deg);
  background: linear-gradient(90deg, transparent, var(--hm-btn-sheen), transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform .68s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.meta-info__bubble:hover,
.meta-topic:hover,
.tag:hover,
.polaroid-strip .meta-image-info > *:hover,
.stories-feed .story-icon a:hover,
#colophon .theme-toggle:hover,
.meta-info__bubble:focus-within,
.meta-topic:has(.meta-topic__link:focus-visible),
.tag:has(a:focus-visible),
.polaroid-strip .meta-image-info > *:focus-within,
.stories-feed .story-icon a:focus-visible,
#colophon .theme-toggle:focus-visible {
  transform: translateY(var(--hm-btn-hover-lift)) scale(var(--hm-btn-hover-scale));
}

.meta-info__bubble:hover::after,
.meta-topic:hover::after,
.tag:hover::after,
.polaroid-strip .meta-image-info > *:hover::after,
.stories-feed .story-icon a:hover::after,
#colophon .theme-toggle:hover::after,
.meta-info__bubble:focus-within::after,
.meta-topic:has(.meta-topic__link:focus-visible)::after,
.tag:has(a:focus-visible)::after,
.polaroid-strip .meta-image-info > *:focus-within::after,
.stories-feed .story-icon a:focus-visible::after,
#colophon .theme-toggle:focus-visible::after {
  opacity: var(--hm-btn-sheen-opacity);
  transform: translateX(410%) rotate(18deg);
}

/* Kommentarformular im Refresh-Look */
.comments-block .comment-form {
  margin-top: 1.55rem;
  padding-top: 1.15rem;
  border-top: 1px solid color-mix(in oklab, var(--hm-border) 58%, transparent);
}

#kommentform {
  margin-top: .75rem;
  gap: .95rem;
}

#kommentform label {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 600;
  color: var(--hm-heading);
  gap: .4rem;
}

#kommentform textarea,
#kommentform input[type="text"],
#kommentform input[type="email"],
#kommentform input[type="url"] {
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--hm-border) 72%, white 28%);
  background: rgba(255, 255, 255, 0.86);
  color: var(--hm-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

#kommentform textarea:focus,
#kommentform input:focus {
  border-color: color-mix(in oklab, var(--hm-accent) 58%, var(--hm-border) 42%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hm-accent) 22%, transparent);
}

#kommentform textarea {
  min-height: 150px;
}

#kommentform .komment-privacy,
#kommentform .form-feedback,
#kommentform .msg.loader {
  color: color-mix(in oklab, var(--hm-text) 74%, white 26%);
}

#kommentform .button-primary {
  margin-bottom: 0;
  align-self: flex-start;
}

#kommentform .button-primary .load-more-btn__icon svg {
  width: .82rem;
  height: .82rem;
}

.tag,
.meta-topic {
  border: 1px solid color-mix(in oklab, var(--hm-border) 70%, white 30%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
}

.tag:hover,
.meta-topic:hover {
  border-color: color-mix(in oklab, var(--hm-accent) 45%, var(--hm-border) 55%);
  transform: translateY(var(--hm-btn-hover-lift)) scale(var(--hm-btn-hover-scale));
}

.title-tags.tags {
  margin-top: 0.2rem;
}

.title-tags.tags .tag,
.title-tags.tags .tag:hover,
.title-tags.tags .tag:focus-visible {
  box-shadow: var(--hm-btn-glow) !important;
  text-decoration: none !important;
}

.title-tags.tags .tag {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--hm-accent) 92%, black),
    color-mix(in oklab, var(--hm-accent-2) 80%, black)
  );
  color: var(--hm-btn-text) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.26);
  transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease;
}

.title-tags.tags .tag::after {
  content: "";
  position: absolute;
  top: -130%;
  left: -45%;
  width: 42%;
  height: 280%;
  transform: translateX(-180%) rotate(18deg);
  background: linear-gradient(90deg, transparent, var(--hm-btn-sheen), transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform .68s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.title-tags.tags .tag:hover,
.title-tags.tags .tag:focus-visible {
  transform: translateY(var(--hm-btn-hover-lift)) scale(var(--hm-btn-hover-scale));
}

.title-tags.tags .tag:hover::after,
.title-tags.tags .tag:focus-visible::after {
  opacity: var(--hm-btn-sheen-opacity);
  transform: translateX(410%) rotate(18deg);
}

.title-tags.tags .tag .meta-info__icon svg {
  color: var(--hm-btn-text);
  fill: currentColor;
}

.title-tags.tags .meta-info__link {
  box-shadow: none !important;
  text-decoration: none !important;
  color: var(--hm-btn-text);
}

.review-box {
  border: 1px solid color-mix(in oklab, var(--hm-border) 72%, white 28%);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
}

.reveal.is-visible {
  animation: sectionRise .46s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes sectionRise {
  0% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 700px) {
  #site-header.site-header {
    margin-top: 0.8rem;
    padding: 1rem 0.85rem 1.1rem;
  }

  .load-more-btn,
  #kommentform .button-primary,
  .kommentReply {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible,
  .load-more-btn,
  #kommentform .button-primary,
  .kommentReply,
  .meta-info__bubble,
  .meta-topic,
  .tag,
  .polaroid-strip .meta-image-info > *,
  .stories-feed .story-icon a,
  #colophon .theme-toggle {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .meta-info__bubble::after,
  .meta-topic::after,
  .tag::after,
  .polaroid-strip .meta-image-info > *::after,
  .stories-feed .story-icon a::after,
  #colophon .theme-toggle::after {
    transition: none !important;
  }
}

/* ============================================================
   09) Link + Footer Theme Toggle
   ============================================================ */

.content.article [itemprop="articleBody"] a,
.tag-content .post [itemprop="articleBody"] a,
.content.review .e-content a,
.home #posts .e-content a,
.home #posts .image-alt a,
.tag-content #posts .e-content a,
.tag-content #posts .image-alt a,
main.wrapper > article .e-content a,
.hnzio_bio a,
.header-text a,
.notes a,
#colophon a,
.site-footer__slashes a,
.site-footer__slashes a:visited {
  box-shadow: none !important;
  font-weight: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--hm-link-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background: none !important;
  transition: none;
}

.content.article [itemprop="articleBody"] strong a,
.tag-content .post [itemprop="articleBody"] strong a,
.content.review .e-content strong a,
.home #posts .e-content strong a,
.home #posts .image-alt strong a,
.tag-content #posts .e-content strong a,
.tag-content #posts .image-alt strong a,
main.wrapper > article .e-content strong a,
.content.article [itemprop="articleBody"] a strong,
.tag-content .post [itemprop="articleBody"] a strong,
.content.review .e-content a strong,
.home #posts .e-content a strong,
.home #posts .image-alt a strong,
.tag-content #posts .e-content a strong,
.tag-content #posts .image-alt a strong,
main.wrapper > article .e-content a strong {
  font-weight: 700;
}

.content.article [itemprop="articleBody"] a:hover,
.tag-content .post [itemprop="articleBody"] a:hover,
.content.review .e-content a:hover,
.home #posts .e-content a:hover,
.home #posts .image-alt a:hover,
.tag-content #posts .e-content a:hover,
.tag-content #posts .image-alt a:hover,
main.wrapper > article .e-content a:hover,
.hnzio_bio a:hover,
.header-text a:hover,
.notes a:hover,
#colophon a:hover,
.content.article [itemprop="articleBody"] a:focus-visible,
.tag-content .post [itemprop="articleBody"] a:focus-visible,
.content.review .e-content a:focus-visible,
.home #posts .e-content a:focus-visible,
.home #posts .image-alt a:focus-visible,
.tag-content #posts .e-content a:focus-visible,
.tag-content #posts .image-alt a:focus-visible,
main.wrapper > article .e-content a:focus-visible,
.hnzio_bio a:focus-visible,
.header-text a:focus-visible,
.notes a:focus-visible,
#colophon a:focus-visible,
.site-footer__slashes a:hover {
  box-shadow: none !important;
  background: none !important;
  color: var(--hm-link-hover);
}

main.wrapper > article .e-content blockquote,
.content .e-content blockquote {
  border-left-color: var(--hm-blockquote-border);
  border-inline-start-color: var(--hm-blockquote-border);
  color: var(--hm-blockquote-text);
}

blockquote {
  border-left-color: var(--hm-blockquote-border) !important;
  border-inline-start-color: var(--hm-blockquote-border) !important;
  color: var(--hm-blockquote-text);
}

.stories-feed .story-icon {
  gap: .35rem;
}

.stories-feed .story-icon a {
  border: 1px solid color-mix(in oklab, var(--hm-border) 64%, white 36%);
  background: color-mix(in oklab, var(--hm-surface) 62%, white 38%);
  color: color-mix(in oklab, var(--hm-accent) 78%, var(--hm-heading) 22%);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.stories-feed .story-icon a:hover {
  transform: translateY(var(--hm-btn-hover-lift)) scale(var(--hm-btn-hover-scale));
  border-color: color-mix(in oklab, var(--hm-accent) 48%, var(--hm-border) 52%);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.14);
  color: color-mix(in oklab, var(--hm-accent) 88%, black 12%);
}

.stories-feed .story-icon svg {
  color: currentColor !important;
  fill: currentColor !important;
}

#colophon .site-footer__controls {
  margin-top: 1.3rem;
  display: flex;
  justify-content: center;
}

#colophon.site-footer {
  position: relative;
  margin-top: clamp(2.6rem, 6vw, 4.4rem);
  padding-top: clamp(1.7rem, 4.2vw, 2.5rem);
  padding-bottom: clamp(1rem, 2.2vw, 1.6rem);
  isolation: isolate;
}

#colophon.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: color-mix(in oklab, var(--hm-border) 68%, transparent);
}

#colophon.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--hm-surface) 58%, white 12%),
      color-mix(in oklab, var(--hm-surface) 38%, transparent)
    ),
    radial-gradient(860px 220px at 12% 0%, color-mix(in oklab, var(--hm-accent) 10%, transparent), transparent 74%),
    radial-gradient(860px 220px at 88% 0%, color-mix(in oklab, var(--hm-accent-2) 10%, transparent), transparent 74%);
}

#colophon .site-footer__inner {
  display: grid;
  gap: .78rem;
}

#colophon .site-footer__title {
  margin: 0;
  white-space: nowrap;
  line-height: 1.1;
}

#colophon .site-footer__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .9rem 1.2rem;
  align-items: start;
}

#colophon .site-footer__text {
  margin: 0;
}

#colophon .site-footer__nav {
  align-self: start;
  margin-top: .18rem;
}

#colophon .site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem .85rem;
}

@media (max-width: 760px) {
  #colophon .site-footer__content {
    grid-template-columns: 1fr;
  }

  #colophon .site-footer__links {
    justify-content: flex-start;
  }
}

#colophon .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid color-mix(in oklab, var(--hm-border) 68%, white 32%);
  border-radius: 999px;
  padding: .42rem .78rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  color: var(--hm-heading);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#colophon .theme-toggle:hover {
  transform: translateY(var(--hm-btn-hover-lift)) scale(var(--hm-btn-hover-scale));
  border-color: color-mix(in oklab, var(--hm-accent) 42%, var(--hm-border) 58%);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.14);
}

#colophon .theme-toggle__icon {
  display: inline-flex;
  line-height: 0;
  color: color-mix(in oklab, var(--hm-accent) 78%, var(--hm-heading) 22%);
}

#colophon .theme-toggle__icon svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
}

/* ============================================================
   10) Theme States
   ============================================================ */

/* 10.1 Explicit light state */
:root[data-theme="light"] {
  color-scheme: light;
  --color-primary: var(--hm-accent);
  --color-secondary: color-mix(in oklab, var(--hm-accent-2) 86%, var(--hm-accent) 14%);
  --color-accent: color-mix(in oklab, var(--hm-accent) 62%, #ef4444 38%);
  --color-text: var(--hm-text);
  --color-text-grey: color-mix(in oklab, var(--hm-text) 72%, white 28%);
  --color-background: var(--hm-bg);
  --color-hover: var(--hm-link-hover);
  --color-box: rgba(255, 255, 255, 0.9);
  --color-tag: color-mix(in oklab, var(--hm-surface) 72%, white 28%);
  --box-border: 1px solid color-mix(in oklab, var(--hm-border) 68%, white 32%);
  --icon-color: var(--color-secondary);
}

:root[data-theme="light"] img {
  filter: none;
}

/* 10.2 Dark tokens */
:root[data-theme="dark"] {
  color-scheme: dark;
  --hm-bg: #0f1523;
  --hm-surface: rgba(21, 30, 49, 0.78);
  --hm-border: rgba(132, 151, 191, 0.24);
  --hm-text: #dbe7ff;
  --hm-muted: rgba(219, 231, 255, 0.8);
  --hm-heading: #f2f6ff;
  --hm-shadow: 0 16px 32px rgba(2, 8, 22, 0.48);
  --color-background: #0f1523;
  --color-primary: #a78bfa;
  --color-secondary: #67e8f9;
  --color-accent: #fb7185;
  --color-box: rgba(17, 26, 43, 0.92);
  --color-text: #dbe7ff;
  --color-text-grey: #aebfdf;
  --color-hover: #f2f6ff;
  --color-tag: rgba(17, 26, 43, 0.9);
  --box-border: 1px solid rgba(132, 151, 191, 0.24);
  --icon-color: var(--color-secondary);
  --hm-media-card-border: 1px solid color-mix(in oklab, var(--hm-border) 80%, var(--hm-accent) 20%);
  --hm-media-card-bg: rgba(17, 26, 43, 0.94);
  --hm-media-card-shadow: 0 14px 26px rgba(2, 8, 22, 0.5);
  --hm-media-card-hover-shadow: 0 20px 34px rgba(2, 8, 22, 0.6);
  --hm-media-card-hover-border: color-mix(in oklab, var(--hm-accent) 58%, var(--hm-border) 42%);
  --hm-site-title-color: #f2f6ff;
  --hm-site-title-hover: color-mix(in oklab, #c7b8ff 84%, #cfe1ff 16%);
  --hm-site-title-underline: color-mix(in oklab, #c7b8ff 78%, #cfe1ff 22%);
  --hm-site-title-shadow: 0 10px 22px rgba(2, 8, 22, .56);
  --hm-link-underline: color-mix(in oklab, #a78bfa 82%, #cfe1ff 18%);
  --hm-link-hover: color-mix(in oklab, #c7b8ff 84%, #f2f6ff 16%);
  --hm-blockquote-border: color-mix(in oklab, #a78bfa 64%, var(--hm-border) 36%);
  --hm-blockquote-text: rgba(219, 231, 255, 0.94);
  --hm-dark-image-filter: brightness(0.92) contrast(1.02) saturate(0.97);
  --hm-author-card-border: 1px solid color-mix(in oklab, var(--hm-border) 82%, var(--hm-accent) 18%);
  --hm-author-card-bg: linear-gradient(180deg, rgba(20, 29, 47, .94), rgba(16, 24, 40, .88));
  --hm-author-card-shadow: 0 14px 30px rgba(2, 8, 22, 0.5);
  --hm-author-avatar-ring: 2px solid rgba(170, 191, 232, .22);
  --hm-author-avatar-shadow: 0 10px 18px rgba(2, 8, 22, 0.46);
  --hm-author-text: #f2f6ff;
  --hm-author-handle-color: rgba(203, 218, 247, .82);
  --hm-author-bio-color: rgba(219, 231, 255, .92);
  --hm-author-social-bg: rgba(21, 30, 49, 0.9);
  --hm-author-social-border: 1px solid color-mix(in oklab, var(--hm-border) 82%, var(--hm-accent) 18%);
  --hm-author-social-color: #dbe7ff;
  --hm-author-social-shadow: 0 10px 18px rgba(2, 8, 22, 0.34);
}

/* 10.3 Dark global background */
:root[data-theme="dark"] body {
  background:
    radial-gradient(980px 520px at 8% -6%, rgba(84, 120, 195, 0.2), transparent 74%),
    radial-gradient(920px 510px at 92% 0%, rgba(124, 83, 219, 0.16), transparent 74%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.9), rgba(11, 18, 32, 0.95)),
    var(--hm-bg);
}

:root[data-theme="dark"] img {
  filter: var(--hm-dark-image-filter);
}

:root[data-theme="dark"] #posts > .stream-section + .stream-section {
  border-top-color: transparent;
}

:root[data-theme="dark"] #posts > .stream-section + .stream-section::before {
  opacity: .28;
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklab, rgba(17, 26, 43, 0.34) 62%, transparent),
      color-mix(in oklab, rgba(17, 26, 43, 0.2) 50%, transparent)
    ),
    radial-gradient(1200px 500px at 10% -8%, color-mix(in oklab, var(--hm-accent) 10%, transparent), transparent 72%),
    radial-gradient(1080px 460px at 92% -10%, color-mix(in oklab, var(--hm-accent-2) 9%, transparent), transparent 74%);
}

:root[data-theme="dark"] .home-section + .home-section {
  border-top-color: color-mix(in oklab, var(--hm-border) 34%, transparent);
}

/* Home: stories -> feed without hard divider line in dark mode */
:root[data-theme="dark"] .home-section--stories + .home-section--feed {
  border-top-color: transparent;
}

:root[data-theme="dark"] .home-section + .home-section::before {
  opacity: .28;
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklab, rgba(17, 26, 43, 0.34) 62%, transparent),
      color-mix(in oklab, rgba(17, 26, 43, 0.2) 50%, transparent)
    ),
    radial-gradient(1240px 520px at 12% -10%, color-mix(in oklab, var(--hm-accent) 10%, transparent), transparent 73%),
    radial-gradient(1120px 480px at 90% -12%, color-mix(in oklab, var(--hm-accent-2) 9%, transparent), transparent 75%);
}

:root[data-theme="dark"] .content .page-section + .page-section {
  border-top-color: color-mix(in oklab, var(--hm-border) 34%, transparent);
}

:root[data-theme="dark"] .content .page-section + .page-section::before {
  opacity: .14;
}

:root[data-theme="dark"] .content .page-section--author {
  border-bottom-color: color-mix(in oklab, var(--hm-border) 34%, transparent);
}

:root[data-theme="dark"] .content .page-section--author::after {
  opacity: .12;
}

:root[data-theme="dark"] .content.imagepost.wrapper > .page-section--author {
  border-top-color: color-mix(in oklab, var(--hm-border) 34%, transparent);
}

/* 10.4 Dark: footer control */
:root[data-theme="dark"] #colophon .theme-toggle {
  background: rgba(17, 26, 43, 0.84);
  color: var(--hm-text);
  border-color: color-mix(in oklab, var(--hm-border) 82%, var(--hm-accent) 18%);
}

:root[data-theme="dark"] #colophon.site-footer::after {
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklab, rgba(17, 26, 43, 0.9) 84%, transparent),
      color-mix(in oklab, rgba(17, 26, 43, 0.76) 70%, transparent)
    ),
    radial-gradient(860px 220px at 12% 0%, color-mix(in oklab, var(--hm-accent) 16%, transparent), transparent 74%),
    radial-gradient(860px 220px at 88% 0%, color-mix(in oklab, var(--hm-accent-2) 14%, transparent), transparent 74%);
}

/* 10.5 Dark: stories */
:root[data-theme="dark"] .stories-rail {
  scrollbar-color: color-mix(in oklab, var(--hm-accent) 52%, var(--hm-border) 48%) transparent;
}

:root[data-theme="dark"] .stories-pill {
  border-color: color-mix(in oklab, var(--hm-border) 40%, white 10%);
  box-shadow: 0 14px 28px rgba(10, 18, 35, 0.45);
}

:root[data-theme="dark"] .stories-feed::before {
  opacity: .84;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklab, rgba(17, 26, 43, 0.78) 84%, transparent) 0%,
      color-mix(in oklab, rgba(17, 26, 43, 0.52) 76%, transparent) 56%,
      color-mix(in oklab, rgba(17, 26, 43, 0.22) 62%, transparent) 82%,
      transparent 100%
    ),
    radial-gradient(860px 230px at 14% 0%, color-mix(in oklab, var(--hm-accent) 24%, transparent), transparent 72%),
    radial-gradient(860px 230px at 86% 0%, color-mix(in oklab, var(--hm-accent-2) 20%, transparent), transparent 74%);
}

:root[data-theme="dark"] .story-card__media {
  box-shadow: 0 14px 24px rgba(2, 8, 22, 0.5);
}

:root[data-theme="dark"] .stories-feed .story-icon a {
  background: rgba(17, 26, 43, 0.9);
  border-color: color-mix(in oklab, var(--hm-border) 80%, var(--hm-accent) 20%);
  color: color-mix(in oklab, #c7b8ff 78%, #cfe1ff 22%);
  box-shadow: 0 10px 16px rgba(2, 8, 22, 0.36);
}

:root[data-theme="dark"] .stories-feed .story-icon a:hover {
  border-color: color-mix(in oklab, var(--hm-accent) 62%, var(--hm-border) 38%);
  color: color-mix(in oklab, #c7b8ff 90%, white 10%);
}

:root[data-theme="dark"] .stories-nav {
  background: rgba(17, 26, 43, 0.9);
  border-color: color-mix(in oklab, var(--hm-border) 80%, var(--hm-accent) 20%);
  color: color-mix(in oklab, #c7b8ff 86%, #cfe1ff 14%);
  box-shadow: 0 10px 18px rgba(2, 8, 22, 0.46);
}

/* 10.6 Stories mobile layout */
@media (max-width: 760px) {
  .stories-feed.wrapper {
    max-width: calc(100vw - 1rem);
  }

  .stories-rail {
    grid-auto-columns: clamp(88px, 30vw, 124px);
    padding-left: .1rem;
    padding-right: .1rem;
  }

  .stories-nav {
    display: none;
  }
}

/* 10.7 Dark: cards + note headers */
:root[data-theme="dark"] .image-tag.polaroid,
:root[data-theme="dark"] .notiz-tag.polaroid {
  background: var(--hm-media-card-bg) !important;
  border: var(--hm-media-card-border) !important;
  box-shadow: var(--hm-media-card-shadow) !important;
}

:root[data-theme="dark"] .notiz-head {
  border-bottom-color: color-mix(in oklab, var(--hm-border) 64%, transparent);
}

:root[data-theme="dark"] .notiz-head__name,
:root[data-theme="dark"] .notiz-head__sub,
:root[data-theme="dark"] .notiz-tag.polaroid .e-content {
  color: var(--hm-text);
}

:root[data-theme="dark"] #kommentform label {
  color: var(--hm-heading);
}

:root[data-theme="dark"] #kommentform textarea,
:root[data-theme="dark"] #kommentform input[type="text"],
:root[data-theme="dark"] #kommentform input[type="email"],
:root[data-theme="dark"] #kommentform input[type="url"] {
  background: rgba(17, 26, 43, 0.9);
  border-color: color-mix(in oklab, var(--hm-border) 82%, var(--hm-accent) 18%);
  color: var(--hm-text);
  box-shadow: inset 0 1px 0 rgba(140, 164, 216, 0.12);
}

:root[data-theme="dark"] #kommentform textarea:focus,
:root[data-theme="dark"] #kommentform input:focus {
  border-color: color-mix(in oklab, #c7b8ff 64%, var(--hm-border) 36%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hm-accent) 22%, transparent);
}

:root[data-theme="dark"] .comments-block .comment-form {
  border-top-color: color-mix(in oklab, var(--hm-border) 68%, transparent);
}

/* 10.8 Dark: pills + meta surfaces */
:root[data-theme="dark"] .meta-info__bubble,
:root[data-theme="dark"] .meta-topic,
:root[data-theme="dark"] .tag {
  background: rgba(17, 26, 43, 0.86);
  border-color: color-mix(in oklab, var(--hm-border) 82%, var(--hm-accent) 18%);
  color: var(--hm-text);
  box-shadow: 0 8px 16px rgba(2, 8, 22, 0.32);
}

:root[data-theme="dark"] .meta-info__link,
:root[data-theme="dark"] .meta-topic__link {
  color: var(--hm-text);
}

:root[data-theme="dark"] .meta-info-bubbles .meta-info__icon svg,
:root[data-theme="dark"] .meta-info-bubbles .meta-info__icons svg {
  color: color-mix(in oklab, #c7b8ff 74%, #cfe1ff 26%);
}

/* 10.9 Dark: card-internal image meta */
:root[data-theme="dark"] .polaroid-strip .meta-image-info > * {
  background: rgba(17, 26, 43, 0.88);
  border-color: color-mix(in oklab, var(--hm-border) 82%, var(--hm-accent) 18%);
  color: var(--hm-text);
  box-shadow: 0 10px 18px rgba(2, 8, 22, 0.34);
}

:root[data-theme="dark"] .polaroid-strip .meta-image-info svg {
  color: color-mix(in oklab, #c7b8ff 76%, #cfe1ff 24%);
}

/* 10.10 Dark: review + rating */
:root[data-theme="dark"] .review-box {
  background: rgba(17, 26, 43, 0.86);
  border-color: color-mix(in oklab, var(--hm-border) 80%, var(--hm-accent) 20%);
  box-shadow: 0 14px 24px rgba(2, 8, 22, 0.42);
}

:root[data-theme="dark"] .rating-icon svg {
  color: color-mix(in oklab, #c7b8ff 70%, #ffcf7d 30%);
}

:root[data-theme="dark"] .rating-icon.dimmed svg {
  color: color-mix(in oklab, var(--hm-text) 46%, transparent);
}

/* 10.11 Vendor safety */
/* PhotoSwipe must not inherit global img constraints */
.pswp img {
  max-width: none;
}