/* Publishing, social and cinematic extension */
:root {
  --splash-a: rgba(255, 30, 138, .22);
  --splash-b: rgba(123, 60, 255, .20);
  --splash-c: rgba(255, 214, 10, .13);
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 50vw;
  height: 50vw;
  min-width: 540px;
  min-height: 540px;
  border-radius: 42% 58% 61% 39% / 38% 41% 59% 62%;
  filter: blur(105px);
  pointer-events: none;
  z-index: -4;
  opacity: .7;
  will-change: transform;
  animation: splashDrift 16s ease-in-out infinite alternate;
}
body::before { left: -22vw; top: 8vh; background: var(--splash-a); }
body::after { right: -24vw; top: 48vh; background: var(--splash-b); animation-duration: 21s; animation-direction: alternate-reverse; }

.cinema-splash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  overflow: hidden;
}
.cinema-splash i {
  position: absolute;
  display: block;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: .24;
  animation: splashFloat 18s ease-in-out infinite;
}
.cinema-splash i:nth-child(1) { background: var(--accent); left: 38%; top: 3%; }
.cinema-splash i:nth-child(2) { background: var(--accent-2); right: 4%; top: 34%; animation-delay: -6s; }
.cinema-splash i:nth-child(3) { background: #ffd60a; left: 12%; bottom: -14%; animation-delay: -11s; opacity: .14; }

@keyframes splashDrift {
  from { transform: translate3d(-2vw,-2vh,0) rotate(0deg) scale(.95); }
  to { transform: translate3d(8vw,8vh,0) rotate(22deg) scale(1.12); }
}
@keyframes splashFloat {
  0%,100% { transform: translate3d(0,0,0) scale(.9); }
  50% { transform: translate3d(5vw,-5vh,0) scale(1.13); }
}

.social-rail {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 42;
  display: grid;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  color: var(--muted);
  transition: .3s ease;
}
.social-link svg { width: 17px; height: 17px; fill: currentColor; }
.social-link:hover { color: var(--text); border-color: var(--line); transform: scale(1.08) translateX(2px); background: var(--surface); }
.social-link.is-disabled { opacity: .34; cursor: default; }

.media-section { position: relative; }
.media-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 18px; }
.media-card {
  grid-column: span 4;
  min-height: 330px;
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, color-mix(in srgb,var(--surface-strong) 92%,transparent), color-mix(in srgb,var(--surface) 68%,transparent));
  box-shadow: 0 24px 70px rgba(0,0,0,.16);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
  display: flex;
  flex-direction: column;
}
.media-card::before {
  content:"";
  position:absolute;
  inset:-40% 32% 55% -20%;
  background: radial-gradient(circle, var(--accent), transparent 66%);
  opacity:.11;
  filter: blur(18px);
  transition:.5s ease;
}
.media-card:nth-child(2)::before { background: radial-gradient(circle,var(--accent-2),transparent 66%); }
.media-card:nth-child(3)::before { background: radial-gradient(circle,#ffd60a,transparent 66%); }
.media-card:hover { transform: translateY(-10px) rotateX(1deg); border-color: color-mix(in srgb,var(--accent) 44%,var(--line)); box-shadow: 0 34px 100px rgba(0,0,0,.28); }
.media-card:hover::before { transform: translate(16%,15%) scale(1.2); opacity:.18; }
.media-type { position:relative; color:var(--accent); letter-spacing:.16em; text-transform:uppercase; font-weight:800; font-size:.68rem; }
.media-card h3 { position:relative; margin:42px 0 12px; font-family:Manrope,Inter,sans-serif; font-size:1.7rem; letter-spacing:-.035em; line-height:1.08; }
.media-card p { position:relative; color:var(--muted); line-height:1.7; margin:0; }
.media-card-footer { position:relative; margin-top:auto; padding-top:25px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.76rem; color:var(--muted); }
.media-card-footer strong { color:var(--text); }
.media-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

.page-hero { padding: 130px 0 70px; min-height: 54vh; display:flex; flex-direction:column; justify-content:end; }
.page-hero h1 { margin:0; font-family:Manrope,Inter,sans-serif; font-size:clamp(3.5rem,8vw,8rem); line-height:.9; letter-spacing:-.055em; max-width:1000px; }
.page-hero h1 span { color:var(--accent); }
.page-hero p { max-width:760px; color:var(--muted); font-size:1.08rem; line-height:1.75; }
.feed-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding-bottom:100px; }
.feed-card { border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:var(--surface); min-height:260px; display:flex; flex-direction:column; transition:.35s ease; }
.feed-card:hover { transform:translateY(-6px); background:var(--surface-strong); }
.feed-card .feed-meta { font-size:.72rem; color:var(--accent); text-transform:uppercase; letter-spacing:.13em; font-weight:800; }
.feed-card h2 { margin:42px 0 12px; font-size:1.7rem; line-height:1.12; }
.feed-card p { color:var(--muted); line-height:1.7; }
.feed-card a { margin-top:auto; font-weight:800; }
.article-shell { width:min(820px,calc(100% - 40px)); margin:0 auto; padding:130px 0 100px; }
.article-shell .article-meta { color:var(--accent); text-transform:uppercase; letter-spacing:.15em; font-size:.72rem; font-weight:800; }
.article-shell h1 { font-family:Manrope,Inter,sans-serif; font-size:clamp(3rem,7vw,6.6rem); letter-spacing:-.055em; line-height:.94; margin:18px 0 28px; }
.article-shell .article-deck { color:var(--muted); font-size:1.18rem; line-height:1.75; }
.article-body { margin-top:50px; font-size:1.04rem; line-height:1.9; color:color-mix(in srgb,var(--text) 86%,var(--muted)); }
.article-body p { margin:0 0 24px; }

html[data-theme="retro"] { --splash-a:rgba(255,63,132,.18); --splash-b:rgba(38,169,255,.16); --splash-c:rgba(255,194,44,.22); }
html[data-theme="classic"] { --splash-a:rgba(128,79,40,.10); --splash-b:rgba(181,145,87,.12); --splash-c:rgba(255,232,191,.18); }
html[data-theme="british"] { --splash-a:rgba(190,20,44,.15); --splash-b:rgba(27,57,125,.18); --splash-c:rgba(255,255,255,.12); }
html[data-theme="minimal"] { --splash-a:rgba(0,0,0,.05); --splash-b:rgba(0,0,0,.025); --splash-c:rgba(255,214,10,.11); }
html[data-theme="cinematic"] { --splash-a:rgba(255,30,138,.18); --splash-b:rgba(123,60,255,.20); --splash-c:rgba(255,204,0,.10); }
html[data-theme="movie"] { --splash-a:rgba(200,45,24,.16); --splash-b:rgba(255,174,63,.12); --splash-c:rgba(255,228,165,.08); }
html[data-theme="digital"] { --splash-a:rgba(0,237,255,.18); --splash-b:rgba(121,69,255,.22); --splash-c:rgba(255,31,150,.15); }

@media (max-width:1100px) { .social-rail { display:none; } .media-card { grid-column:span 6; } }
@media (max-width:760px) { .media-card { grid-column:1/-1; min-height:280px; } .feed-grid { grid-template-columns:1fr; } .page-hero { min-height:44vh; padding-top:100px; } }
@media (prefers-reduced-motion:reduce) { body::before,body::after,.cinema-splash i { animation:none!important; } }