*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Apple Color Emoji,Segoe UI Emoji,sans-serif;line-height:1.55}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:var(--container,1240px);margin:0 auto;padding-left:calc(var(--gutter,20px) + env(safe-area-inset-left, 0px));padding-right:calc(var(--gutter,20px) + env(safe-area-inset-right, 0px))}

:root{--logo-zpt:#F2DB30;--logo-word:#fff}
html[data-theme="light"]{--logo-word:#000}
@media (prefers-color-scheme: light){:root:not([data-theme]){--logo-word:#000}}

/* Header always above */
.site-header{position:sticky;top:0;z-index:100000;background:rgba(15,16,25,.6);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(255,255,255,.06);isolation:isolate}
@media (min-width:1024px){ .site-header{ position: relative; top:auto } }
.site-main{position:relative;z-index:1}

.header-grid{display:flex;align-items:center;gap:20px;height:var(--header,80px)}
.logo{display:flex;align-items:center;line-height:1;color:var(--logo-word);text-decoration:none;flex-shrink:0}
.logo:hover{text-decoration:none}
.site-logo{height:var(--logo-h,52px);width:auto;display:block}
@media (max-width:520px){.header-grid{height:64px}.site-logo{height:32px}}
.site-logo__word{fill:var(--logo-word)}
.site-logo__zpt{fill:var(--logo-zpt);filter:drop-shadow(0 0 4px rgba(242,219,48,.18));animation:logoPulse 3.8s ease-in-out infinite;will-change:filter}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 4px rgba(242,219,48,.16))}50%{filter:drop-shadow(0 0 12px rgba(242,219,48,.35)) drop-shadow(0 0 26px rgba(242,219,48,.14))}}
@media (prefers-reduced-motion: reduce){.site-logo__zpt{animation:none;filter:drop-shadow(0 0 10px rgba(242,219,48,.22))}}
.site-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.site-nav a{color:var(--text);opacity:.8}.site-nav a:hover{opacity:1}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative;z-index:100001}

/* Post/page vertical rhythm */
body.post-template .site-main,
body.page-template .site-main{padding-top:28px}

/* Tag strip (Pinterest-like) */
.tag-strip{margin:14px 0 10px}
.tag-strip__inner{display:flex;gap:10px;align-items:center;overflow-x:auto;padding:6px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tag-strip__inner::-webkit-scrollbar{display:none}
.tag-strip__chip{white-space:nowrap;font-weight:600;font-size:13px;padding:10px 14px}
.tag-strip__chip:hover{text-decoration:none}

/* Theme switcher */
.theme-switcher{position:relative}
.theme-switcher details{position:relative}
.theme-switcher summary{list-style:none;cursor:pointer;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--text)}
.theme-switcher summary::-webkit-details-marker{display:none}
.theme-switcher details[open]{z-index:100002}
.theme-switcher .theme-list{position:absolute;right:0;top:calc(100% + 10px);min-width:320px;background:var(--surface);border-radius:16px;box-shadow:0 16px 38px rgba(0,0,0,.38);padding:10px;margin:0;list-style:none;border:1px solid rgba(255,255,255,.08);z-index:100003;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:520px){ .theme-switcher .theme-list{ min-width:280px } }
.theme-list li{margin:0}
.theme-list button,.theme-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 10px;border-radius:999px;border:1px solid rgba(127,127,127,.22);background:rgba(127,127,127,.08);color:var(--text);cursor:pointer;font-weight:700;font-size:12px;letter-spacing:.2px;transition:background .15s ease,border-color .15s ease,transform .15s ease;touch-action:manipulation}
.theme-list button:hover,.theme-btn:hover{background:rgba(127,127,127,.12)}
.theme-list button:active,.theme-btn:active{transform:translateY(1px)}
.theme-list button[aria-pressed="true"],.theme-btn[aria-pressed="true"]{border-color:color-mix(in srgb,var(--accent) 72%, rgba(127,127,127,.22));background:color-mix(in srgb,var(--accent) 18%, rgba(127,127,127,.08))}
.theme-list button:focus-visible,.theme-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 60%, transparent);outline-offset:2px}
.theme-list button .swatch,.theme-btn .swatch{width:18px;height:18px;border-radius:999px}
.swatch{width:36px;height:24px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.06)}
.swatch--auto{background:linear-gradient(90deg,#0b0f1a 50%, #ffffff 50%)}
.swatch--light{background:#ffffff}
.swatch--dark{background:#0b0f1a}
.swatch--motherland{background:linear-gradient(135deg,#ffffff,#f2f3f5)}
.swatch--love{background:conic-gradient(from 0deg,#ffd1f7,#e3f7ff,#fff7d1,#e7d1ff,#ffd1f7)}
.swatch--deep{background:linear-gradient(135deg,#0a1433,#0e1c47)}
.swatch--neon{background:conic-gradient(from 0deg,#ff007a,#ffae00,#ffee00,#00ffa3,#00a2ff,#b300ff,#ff007a)}

/* Light header variants */
html[data-theme="light"] .site-header,
html[data-theme="motherland"] .site-header,
html[data-theme="loveislove"] .site-header{ background: rgba(255,255,255,.9); border-bottom-color: rgba(0,0,0,.06); box-shadow: 0 6px 20px rgba(0,0,0,.06) }
@media (prefers-color-scheme: light){ html:not([data-theme]) .site-header{ background: rgba(255,255,255,.9); border-bottom-color: rgba(0,0,0,.06); box-shadow: 0 6px 20px rgba(0,0,0,.06) } }

/* Header favorites toggle */
.fav-toggle--header{width:36px;height:36px;border-radius:999px;border:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer}
html[data-theme="light"] .fav-toggle--header,
html[data-theme="motherland"] .fav-toggle--header,
html[data-theme="loveislove"] .fav-toggle--header{ background: rgba(0,0,0,.06) }
.fav-toggle--header svg{width:20px;height:20px;fill:rgba(255,255,255,.75)}
html[data-theme="light"] .fav-toggle--header svg,
html[data-theme="motherland"] .fav-toggle--header svg,
html[data-theme="loveislove"] .fav-toggle--header svg{ fill: rgba(0,0,0,.65) }
.fav-toggle--header.is-active svg{ filter: drop-shadow(0 2px 6px rgba(255,45,85,.55)); fill:#ff2d55 }

/* Love is Love background */
@keyframes pearlDrift { 0%{transform:translate3d(0,0,0) rotate(0)} 50%{transform:translate3d(2%, -1%, 0) rotate(15deg)} 100%{transform:translate3d(0,0,0) rotate(0)} }
html[data-theme="loveislove"] body::before{
  content:""; position:fixed; inset:-20vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 35% at 30% 35%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    radial-gradient(35% 30% at 70% 60%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    conic-gradient(from 0deg at 50% 50%, rgba(255,163,234,.35), rgba(99,220,255,.35), rgba(255,255,160,.35), rgba(199,160,255,.35), rgba(255,163,234,.35));
  filter: blur(24px) saturate(120%);
  opacity:.55;
  mix-blend-mode: screen;
  animation: pearlDrift 30s ease-in-out infinite;
}

/* Masonry grid */
.masonry-grid{
  display:grid;
  grid-auto-rows:8px;
  gap:var(--gap);
  grid-template-columns:repeat(2,1fr);
  grid-auto-flow: row dense;
  opacity: 0; transition: opacity .2s ease;
}
.masonry-grid.is-ready{ opacity: 1; }
@media (min-width:700px){  .masonry-grid{ grid-template-columns: repeat(3, 1fr) } }
@media (min-width:1024px){ .masonry-grid{ grid-template-columns: repeat(4, 1fr) } }
@media (min-width:1280px){ .masonry-grid{ grid-template-columns: repeat(5, 1fr) } }

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px 0 42px}
.pagination a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(127,127,127,.25);color:var(--text);opacity:.9}
.pagination a:hover{opacity:1;text-decoration:none;background:rgba(127,127,127,.10)}
.pagination .page{color:var(--muted);font-size:13px}

.post-card{grid-row-end:span var(--span,40);display:block;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;position:relative;z-index:1}
.post-card:hover{transform:translateY(-2px)}
.post-card.is-wide{grid-column:span 2}

.post-card__link{display:block;color:inherit;position:relative;z-index:1}
.post-card__link:empty{position:absolute;inset:0;z-index:1;border-radius:inherit}
.post-card__content{position:relative}
.post-card__media{display:block;margin:0}
.post-card__media img{display:block;width:100%;height:auto}
.post-card__body{padding:16px 16px 18px}
.post-card.no-image .post-card__body{padding:22px 18px}
.post-card__title{font-size:20px;line-height:1.3;margin:0;color:var(--text)}
.post-card__title + .post-card__excerpt{ margin-top:8px }
.post-card__excerpt{margin:0 0 12px;color:var(--muted)}

.post-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;position:relative;z-index:2}
.tag-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(127,127,127,.25);font-size:12px;color:var(--text);opacity:.95;background:transparent;transition:.15s ease}
.tag-chip{ border-color: color-mix(in srgb, var(--tag, rgba(127,127,127,.6)) 70%, transparent);
  background: color-mix(in srgb, var(--tag, rgba(127,127,127,.6)) 18%, transparent);
}
.tag-chip:hover{ border-color: var(--tag, var(--accent)); background: color-mix(in srgb, var(--tag, var(--accent)) 26%, transparent) }

/* Favorites heart */
.fav-btn{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:999px;border:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;transition:.15s ease;z-index:2}
.fav-btn:hover{transform:translateY(-1px)}
.fav-btn svg{width:20px;height:20px;fill:rgba(255,255,255,.6);transition:fill .15s ease, filter .15s ease}
.post-card.is-fav .fav-btn svg,
.article.is-fav .fav-btn--post svg{ fill:#ff2d55; filter: drop-shadow(0 2px 6px rgba(255,45,85,.55)) }

/* Post favorite button placement */
.article__header{position:relative;display:flex;align-items:center;gap:12px}
.fav-btn--post{position:relative;top:auto;right:auto}

/* Post/page cover */
.article__title{margin:0;font-size:32px;line-height:1.15;color:var(--text)}
.article__media{margin:12px auto 0}
.article__media img{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface)}
.article__media figcaption{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.45}
.article__content{padding-top:14px}
.article__content > :first-child{margin-top:0}

/* Swup transitions */
html.is-changing .transition-fade{ transition: opacity .32s ease, transform .32s ease }
html.is-leaving .transition-fade{ opacity:0; transform: translateY(8px) scale(.98) }

/* Koenig baseline */
.kg-card{margin:1.2em 0}
.kg-image{max-width:100%;height:auto;display:block;margin:0 auto;border-radius:12px}
.kg-width-wide{width:100%;max-width:1200px;margin-left:auto;margin-right:auto}
.kg-width-full{width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%)}
.kg-gallery-container{display:grid;gap:8px}
.kg-gallery-row{display:grid;grid-auto-flow:column;gap:8px}
.kg-gallery-image img{width:100%;height:auto;display:block;border-radius:12px}

/* Neon Pride */
@property --hue { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html[data-theme="neon-pride"] .post-card{ --neon-border: 1px; --neon-speed: 12s; }
html[data-theme="neon-pride"] .post-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding: var(--neon-border);
  background: conic-gradient(from 0deg,#ff007a,#ffae00,#ffee00,#00ffa3,#00a2ff,#b300ff,#ff007a);
  filter: hue-rotate(var(--hue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; z-index:0;
}
html[data-theme="neon-pride"] .post-card::after{
  content:""; position:absolute; inset:-10px; border-radius:inherit;
  background: conic-gradient(from 0deg,#ff007a,#ffae00,#ffee00,#00ffa3,#00a2ff,#b300ff,#ff007a);
  filter: hue-rotate(var(--hue)) blur(10px) opacity(.85);
  mix-blend-mode: screen;
  pointer-events:none; z-index:-1; opacity:.0; transition: opacity .25s ease;
}
html[data-theme="neon-pride"] .post-card.is-animated::before{ animation: neonHue var(--neon-speed) linear infinite }
html[data-theme="neon-pride"] .post-card.is-animated::after{ animation: neonHue var(--neon-speed) linear infinite }
@media (hover:hover){
  html[data-theme="neon-pride"] .post-card:hover::after{ opacity:1 }
}
@keyframes neonHue { to { --hue: 360deg } }
@media (prefers-reduced-motion: reduce){
  html[data-theme="neon-pride"] .post-card::before,
  html[data-theme="neon-pride"] .post-card::after{ animation: none !important }
}