:root{
  --pink:#FF70A6;
  --blue:#70D6FF;
  --orange:#FF9770;
  --moss:#A8D5BA;
  --clay:#D6A77A;
  --lav:#D7BDE2;
  --ink:#1D1C1A;
  --paper:#F6F0E6;
  --radius:24px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --earth:"Earth 2073", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --manrope:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --neuro:"Neuropol X","Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--paper);}
main{max-width:1100px; margin:40px auto; padding:0 20px;}
/* Card wrapper for logo */
.logo-card{position:relative; margin:0 auto; width:min(92vw,900px); aspect-ratio:1/1; 
  background:#fff; border-radius:28px; box-shadow:var(--shadow);
  background: radial-gradient(ellipse at top, rgba(0,0,0,.02), transparent 60%),
              radial-gradient(ellipse at bottom, rgba(0,0,0,.02), transparent 60%),
              repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 2px, rgba(0,0,0,0) 2px 4px),
              var(--paper);
  overflow:hidden;
}
.logo-img{position:absolute; inset:0; margin:auto; width:88%; height:88%; object-fit:contain; 
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.08));
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 
  0%,100% { transform: translateY(0) rotate(0deg); } 
  50% { transform: translateY(-1px) rotate(.15deg); }
}

/* Mushroom hotspots */
.hotspot{position:absolute; width:20%; height:20%; transform:translate(-50%,-50%);}
/* Approx mushroom cap+stem with two hit areas */
.hotspot a{position:absolute; inset:0; display:block; border-radius:24px; -webkit-tap-highlight-color:transparent;}
.hotspot .label{position:absolute; left:50%; top:-8%; transform:translate(-50%,-12px);
  background:#fff; color:var(--ink); padding:7px 12px; border-radius:999px; 
  border:2px solid var(--blue); font:700 14px var(--manrope); box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.hotspot.posters .label{border-color:var(--orange)}
.hotspot.soon .label{border-color:var(--lav)}
.hotspot:hover .label{opacity:1; transform:translate(-50%,-18px)}
.hotspot:hover{
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.12));
}
/* positions relative to logo-card */
.hotspot.top{left:50%; top:20%}
.hotspot.left{left:22%; top:50%}
.hotspot.right{left:78%; top:50%}
.hotspot.bottom{left:50%; top:80%}

/* Pages */
.header{display:flex; align-items:center; gap:12px; margin:8px 0 18px}
.header a{text-decoration:none; color:var(--ink); font-weight:800; font-family:var(--manrope)}
.page-title{font:800 36px var(--earth); letter-spacing:.4px; color:var(--ink)}
.links-wrap{border-radius:28px; padding:18px; box-shadow:none; background:transparent}
.link-row{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:18px; margin:10px 0;
  border:2px solid rgba(0,0,0,.05); background:var(--bgTint);
}
.link-row .kicker{font:800 18px var(--earth); color:var(--ink)}
.link-row a{font:700 16px var(--manrope); color:var(--fg); text-decoration:none}
.link-row a:hover{text-decoration:underline}
/* palette rows */
.row-orange{--fg:var(--orange); --bgTint:rgba(255,151,112,.10)}
.row-pink{--fg:var(--pink); --bgTint:rgba(255,112,166,.12)}
.row-blue{--fg:var(--blue); --bgTint:rgba(112,214,255,.12)}
.row-lav{--fg:var(--lav); --bgTint:rgba(215,189,226,.16)}
.row-green{--fg:var(--moss); --bgTint:rgba(168,213,186,.16)}
.row-clay{--fg:var(--clay); --bgTint:rgba(214,167,122,.14)}

.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.gallery img{width:100%; height:auto; display:block; border-radius:16px; box-shadow:var(--shadow)}
.center-note{margin:20px 0; padding:14px 16px; border-radius:16px; background:rgba(215,189,226,.2); 
  color:var(--ink); font:700 16px var(--manrope); text-align:center}