/* =========================================================
   Blanket Cape — a creative studio group
   ========================================================= */

:root{
  --bg: #0c0a08;
  --line: rgba(243,237,224,.12);
  --line-strong: rgba(243,237,224,.22);

  --paper: #f6f1e4;
  --paper-2: #ece2c8;
  --ink: #17130f;
  --ink-soft: rgba(23,19,15,.62);

  --fg: #f3ede0;
  --fg-soft: rgba(243,237,224,.62);
  --fg-soft-2: rgba(243,237,224,.4);

  --card: #fbf8f0;
  --card-dark: #1d1712;

  --amber: #e2963c;
  --amber-ink: #2c1c05;

  /* per-section accent: --accent = text/icon on dark bg, --accent-fill = solid block fill */
  --accent: #e2963c;
  --accent-fill: #e2963c;

  --indigo-fill: #3c1f66;
  --indigo-tint: #b895e6;
  --compass-fill: #4a5731;
  --compass-tint: #a9c17c;
  --hitchance: #c16a4a;
  --workshop-fill: #3d5876;
  --workshop-tint: #8fa9c9;
  --tabletop-fill: #8a6a2f;
  --tabletop-tint: #cfa95f;
  --comics-fill: #9c2e21;
  --comics-tint: #ea7a63;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  background: var(--bg);
  overflow-x: hidden;
}
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.06;
  margin:0;
  color: var(--fg);
}
h2 em, .hero-title em{
  font-style: italic;
  font-weight:500;
  color: var(--amber);
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
.mono{ font-family:'JetBrains Mono', monospace; }
svg use{ fill:inherit; }

::selection{ background: var(--amber); color:#fff; }

/* ---------- utility layers ---------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--amber), var(--indigo-tint));
  z-index:1000; transition: width .1s linear;
}

.accent-text{ color: var(--amber); }
.hero-title .accent-text{ font-style:italic; font-weight:500; }

/* ---------- reveal-on-scroll ---------- */
.reveal, .reveal-card{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease) var(--delay,0s), transform .9s var(--ease) var(--delay,0s);
  will-change: transform, opacity;
}
.reveal.in-view, .reveal-card.in-view{ opacity:1; transform:none; }
.reveal-word{ display:inline-block; }

.hero-title .reveal-line{ display:block; overflow:hidden; }
.hero-title .reveal-word{
  transform: translateY(110%);
  opacity:0;
  transition: transform 1s var(--ease), opacity .8s var(--ease);
}
.hero-title.play .reveal-word{ transform:none; opacity:1; }
.hero-title .reveal-line:nth-child(1) .reveal-word{ transition-delay: .15s; }
.hero-title .reveal-line:nth-child(2) .reveal-word:nth-child(1){ transition-delay: .28s; }
.hero-title .reveal-line:nth-child(2) .reveal-word:nth-child(2){ transition-delay: .34s; }
.hero-title .reveal-line:nth-child(2) .reveal-word:nth-child(3){ transition-delay: .4s; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding: .9em 1.5em;
  border-radius: 100px;
  font-weight:600; font-size:.95rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  cursor:pointer; border:1px solid transparent;
}
.btn svg{ transition: transform .3s var(--ease); }
.btn:hover svg{ transform: translate(3px,-3px); }
.btn-primary{
  background: var(--paper); color: var(--ink);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.5);
}
.btn-primary:hover{ background: var(--amber); color:#fff; transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(226,150,60,.4); }
.btn-ghost{
  background: transparent; color:var(--fg); border-color: var(--line-strong);
}
.btn-ghost:hover{ background: var(--fg); color:var(--bg); border-color:var(--fg); transform: translateY(-3px); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(20px,5vw,56px);
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background: rgba(246,241,228,.88);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(23,19,15,.12);
  padding-top:12px; padding-bottom:12px;
}
.nav-logo{
  display:flex; align-items:center; gap:.6em;
  font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; color:var(--ink);
}
.nav-logo svg{ color: var(--ink); flex-shrink:0; }
.nav-links{ display:flex; gap:clamp(1em,1.8vw,1.7em); }
.nav-links a{
  position:relative; font-size:.85rem; font-weight:500; color: var(--ink-soft); padding:.3em 0; white-space:nowrap;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--amber);
  transition:width .3s var(--ease);
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-size:.85rem; font-weight:600; padding:.65em 1.3em; border-radius:100px;
  background: var(--ink); color: var(--paper);
  transition: background .3s, transform .3s var(--ease);
}
.nav-cta:hover{ background:var(--amber); color:#fff; transform:translateY(-2px); }
.nav-burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-burger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition: transform .3s var(--ease), opacity .3s; }
.nav-burger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger.active span:nth-child(2){ opacity:0; }
.nav-burger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0 0 auto 0; top:64px; z-index:190;
  display:flex; flex-direction:column; padding: 10px clamp(20px,6vw,40px) 30px;
  background: rgba(246,241,228,.98); backdrop-filter: blur(16px);
  transform: translateY(-12px); opacity:0; pointer-events:none;
  transition: transform .4s var(--ease), opacity .35s;
  border-bottom:1px solid rgba(23,19,15,.12);
}
.mobile-menu.open{ transform:none; opacity:1; pointer-events:auto; }
.mobile-menu a{ padding: .9em 0; font-size:1.2rem; font-weight:600; border-bottom:1px solid rgba(23,19,15,.12); color: var(--ink); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding: 150px clamp(20px,5vw,56px) 90px;
}
.hero-dotgrid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(243,237,224,.14) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 40%, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 55% at 50% 40%, #000 40%, transparent 78%);
}
.hero-stage{ position:relative; z-index:3; max-width:980px; margin:0 auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'JetBrains Mono', monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent); margin-bottom:1.1em; transition: color .8s var(--ease-soft);
}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }

.hero-wordmark{ font-size: clamp(3.4rem, 11vw, 8.8rem); line-height:.95; letter-spacing:-.025em; }
.wm-italic{ font-style:italic; font-weight:500; }
.hero-tagline{
  display:flex; align-items:center; justify-content:center; gap:1.1em;
  margin-top:1.7em; font-size:clamp(.78rem, 1.4vw, .95rem);
  letter-spacing:.34em; text-transform:uppercase; color: var(--amber);
}
.hero-tagline::before, .hero-tagline::after{
  content:''; height:1px; width:clamp(28px,5vw,60px); background: var(--line-strong); flex-shrink:0;
}
.hero-sub{
  margin: 1.7em auto 0; max-width: 560px; font-size: clamp(1rem,1.5vw,1.1rem);
  color: var(--fg-soft); line-height:1.6;
}
.hero-ctas{ display:flex; gap:1em; margin-top:2.4em; flex-wrap:wrap; justify-content:center; }

.scroll-cue{
  position:absolute; bottom:26px; left:clamp(20px,5vw,56px);
  display:flex; align-items:center; gap:.8em; z-index:5;
  font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color: var(--fg-soft);
}
.scroll-cue-line{ width:34px; height:1px; background: var(--line); position:relative; overflow:hidden; }
.scroll-cue-line i{ position:absolute; left:-30%; top:0; width:30%; height:100%; background: var(--amber); animation: cueDrop 1.8s ease-in-out infinite; }
@keyframes cueDrop{ 0%{ left:-30%;} 60%,100%{ left:100%;} }

/* ---------- hero floating layer ---------- */
.hero-floats{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-floats > *{ pointer-events:auto; }
.float-slow{ animation: floatA 7.5s ease-in-out infinite; }
.float-slow-2{ animation: floatB 8.2s ease-in-out infinite; animation-delay:-1.4s; }
.float-slow-3{ animation: floatC 6.8s ease-in-out infinite; animation-delay:-2.6s; }
@keyframes floatA{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes floatB{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(10px);} }
@keyframes floatC{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-8px) rotate(-1deg);} }

.stamp{
  position:absolute; top:112px; right:5%; width:168px; height:168px; cursor:pointer;
}
.stamp-ring{
  position:absolute; inset:0; border-radius:50%; border:1.5px dashed var(--fg-soft-2);
  animation: spinSlow 26s linear infinite; transition: animation-duration .4s;
}
.stamp:hover .stamp-ring, .stamp:focus-visible .stamp-ring{ animation-duration:6s; border-color: var(--amber); }
.stamp-face{
  position:absolute; inset:12px; border-radius:50%; background: var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15em;
  box-shadow: 0 18px 34px -14px rgba(0,0,0,.6);
  text-align:center; transition: transform .35s var(--ease);
}
.stamp:hover .stamp-face, .stamp:focus-visible .stamp-face{ transform: scale(1.05); }
.stamp.pulse .stamp-face{ animation: stampPulse .5s var(--ease); }
@keyframes stampPulse{ 0%{transform:scale(1)} 45%{transform:scale(1.15)} 100%{transform:scale(1)} }
.stamp-face .mono{ font-size:.5rem; letter-spacing:.06em; color: var(--ink-soft); }
.stamp-face em{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:2.6rem; color:var(--amber); line-height:1; margin:.05em 0; }

.mark-grid{
  position:absolute; bottom:150px; left:4%; width:280px; height:176px;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:8px;
}
.mark-chip{
  border-radius: var(--radius-sm); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  padding:10px; color:#fff; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow: 0 14px 26px -16px rgba(0,0,0,.6);
}
.mark-chip svg{ transition: transform .3s var(--ease); }
.mark-chip:hover, .mark-chip:focus-visible{ transform: translateY(-4px) scale(1.06); }
.mark-chip:hover svg, .mark-chip:focus-visible svg{ transform: scale(1.15) rotate(-6deg); }
.mark-chip .mono{ font-size:.58rem; opacity:.85; }
.mc-indigo{ background: var(--indigo-fill); }
.mc-compass{ background: var(--compass-fill); }
.mc-hitchance{ background: var(--hitchance); }
.mc-workshop{ background: var(--workshop-fill); }
.mc-tabletop{ background: var(--tabletop-fill); }
.mc-comics{ background: var(--comics-fill); }

.poll-card{
  background: var(--card); border-radius: var(--radius-md); padding:18px 20px;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.55); border:1px solid var(--line-strong);
}
.poll-card.in-hero{ position:absolute; bottom:120px; right:4%; width:238px; }
.fcard-label{ font-weight:700; font-size:.86rem; line-height:1.3; margin-bottom:.2em !important; color:var(--ink); }
.fcard-sub{ font-size:.66rem; color:var(--ink-soft); margin-bottom:.8em !important; }
.poll-row{
  display:flex; align-items:center; gap:.5em; font-size:.68rem; margin-bottom:.4em; color:var(--ink-soft);
  width:100%; background:none; border:none; padding:.2em 0; font-family:inherit; cursor:pointer; border-radius:6px;
  transition: background .25s var(--ease);
}
.poll-row:hover:not(.voted){ background: rgba(23,19,15,.05); }
.poll-row span{ width:82px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.poll-row b{ width:28px; text-align:right; font-weight:700; color:var(--ink); }
.poll-bar{ flex:1; height:6px; background: rgba(23,19,15,.1); border-radius:6px; overflow:hidden; }
.poll-bar i{ display:block; height:100%; background: #c9c0aa; border-radius:6px; transition: width .5s var(--ease); }
.poll-win .poll-bar i{ background: var(--hitchance); }
.poll-win span, .poll-win b{ color:var(--ink); font-weight:700; }
[data-poll][data-voted] .poll-row{ cursor:default; }

.badge-chip{
  position:absolute; top:190px; left:6%;
  display:flex; align-items:center; gap:.5em;
  background: var(--paper); color:var(--ink); border-radius:100px; padding:.6em 1em .6em .8em;
  font-size:.74rem; font-weight:600; box-shadow: 0 14px 26px -16px rgba(0,0,0,.6);
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.badge-chip:hover, .badge-chip:focus-visible{ transform: translateY(-4px) scale(1.03); background: var(--amber); color:#fff; }
.badge-chip svg{ color: var(--amber); flex-shrink:0; transition:color .3s; }
.badge-chip:hover svg{ color:#fff; }

@keyframes spinSlow{ to{ transform: rotate(360deg); } }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background: var(--ink); color: var(--paper);
  overflow:hidden; white-space:nowrap; padding: 15px 0;
}
.marquee-track{
  display:inline-flex; align-items:center; gap:.9em;
  font-family:'JetBrains Mono',monospace; font-weight:500; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.dot-sep{ font-size:.5rem; margin:0 .3em; opacity:.55; color:var(--amber); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================================================
   STUDIO / IDENTITY GRID
   ========================================================= */
.studio, .contact{ padding: 130px clamp(20px,6vw,56px); position:relative; }
.section-head{ max-width: 720px; margin: 0 auto 64px; text-align:center; }
.section-head h2, .contact h2{ font-size: clamp(2rem,4.4vw,3.1rem); margin-top:.3em; }
.section-lede{ margin-top:1.1em; color:var(--fg-soft); font-size:1.05rem; line-height:1.6; }

.bento{
  display:grid; grid-template-columns: repeat(3,1fr); gap:18px;
  max-width:1240px; margin:0 auto;
}
.bento-card{
  position:relative; padding: 26px 22px; border-radius: var(--radius-lg);
  color:#fff; min-height: 250px; display:flex; flex-direction:column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  transform-style: preserve-3d;
  overflow:hidden;
}
.bento-card::before{
  content:''; position:absolute; inset:0; opacity:0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 60%);
  transition: opacity .4s;
}
.bento-card:hover::before{ opacity:1; }
.bento-card:hover{ box-shadow: 0 22px 48px -18px rgba(0,0,0,.6); }
.bento-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:auto; }
.bento-num{ font-size:.72rem; opacity:.65; }
.bento-card h3{ font-size:1.3rem; margin-top:18px; color:#fff; }
.bento-card p{ font-size:.85rem; opacity:.85; margin-top:.6em; line-height:1.45; }
.bento-foot{ display:flex; align-items:center; justify-content:space-between; gap:.6em; margin-top:1.4em; }
.bento-link{ display:inline-flex; align-items:center; gap:.4em; font-size:.78rem; font-weight:700; }
.bento-link svg{ transition: transform .3s var(--ease); }
.bento-card:hover .bento-link svg{ transform:translate(3px,-3px); }
.bento-hex{ font-size:.62rem; opacity:.55; }

.bc-indigo{ background: var(--indigo-fill); }
.bc-compass{ background: var(--compass-fill); }
.bc-hitchance{ background: var(--hitchance); }
.bc-workshop{ background: var(--workshop-fill); }
.bc-tabletop{ background: var(--tabletop-fill); }
.bc-comics{ background: var(--comics-fill); }

/* =========================================================
   BRAND SECTIONS (theme-shifting, dark)
   ========================================================= */
.brand-section{
  padding: 130px clamp(20px,6vw,56px);
  position:relative;
  border-top: 1px solid var(--line);
  overflow:hidden;
}
.brand-section[data-theme="indigo"]{ --accent: var(--indigo-tint); --accent-fill: var(--indigo-fill); background:#140f1c; }
.brand-section[data-theme="compass"]{ --accent: var(--compass-tint); --accent-fill: var(--compass-fill); background:#11130c; }
.brand-section[data-theme="hitchance"]{ --accent: var(--hitchance); --accent-fill: var(--hitchance); background:#100e0b; }
.brand-section[data-theme="workshop"]{ --accent: var(--workshop-tint); --accent-fill: var(--workshop-fill); background:#0d1219; }
.brand-section[data-theme="tabletop"]{ --accent: var(--tabletop-tint); --accent-fill: var(--tabletop-fill); background:#16110a; }
.brand-section[data-theme="comics"]{ --accent: var(--comics-tint); --accent-fill: var(--comics-fill); background:#160c0a; }

.brand-watermark{
  position:absolute; top:50%; left:-70px; transform:translateY(-50%);
  color: var(--fg); opacity:.05; pointer-events:none; z-index:0;
}
.bw-right{ left:auto; right:-70px; }

.brand-inner{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items:center;
}
.brand-inner-rev .brand-copy{ order:2; }
.brand-inner-rev .brand-visual{ order:1; }

.brand-copy h2{ font-size: clamp(2.2rem,4.6vw,3.4rem); margin-top:.25em; }
.brand-desc{ margin-top: 1.2em; color:var(--fg-soft); font-size:1.05rem; line-height:1.65; max-width:480px; }
.brand-facts{ margin-top:1.6em; display:flex; flex-direction:column; gap:.6em; }
.brand-facts li{ font-size:.88rem; color:var(--fg-soft); display:flex; gap:.5em; }
.brand-facts b{ color:var(--fg); font-weight:600; min-width:78px; }
.brand-copy .btn{ margin-top:2.2em; }

[data-theme] .eyebrow{ color: var(--accent); }

.brand-visual{ position:relative; min-height:420px; }

/* generic card shells used inside brand visuals (light tiles floating on dark bg) */
.stack-card, .map-card, .comic-card, .review-card, .issue-card, .socials-card, .ks-info{
  position:absolute; background: var(--card); color:var(--ink); border-radius: var(--radius-md);
  box-shadow: 0 22px 48px -18px rgba(0,0,0,.55);
  padding: 20px 22px; width: 260px;
  transition: transform .5s var(--ease-soft);
}
.stack-card:hover, .map-card:hover, .comic-card:hover, .mag-hero:hover,
.review-card:hover, .issue-card:hover, .socials-card:hover, .ks-info:hover{ transform: translateY(-6px) scale(1.015); }

.stack-kicker{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-fill); margin-bottom:.7em; }
.stack-quote{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:1.15rem; line-height:1.4; }
.stack-quote-sm{ font-weight:700; font-size:.92rem; margin-bottom:.7em; color:var(--ink); }
.stack-meta{ margin-top:.8em; font-size:.72rem; color:var(--ink-soft); }

.wave-bars{ height:22px; display:flex; align-items:flex-end; gap:2px; color: currentColor; }
.wave-bars::before{
  content:''; display:block; width:100%; height:100%;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent),
    repeating-linear-gradient(90deg,#000 0 2px, transparent 2px 5px);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  opacity:.9;
  animation: waveShift 1.6s linear infinite;
  clip-path: polygon(0 60%,3% 30%,6% 80%,9% 10%,12% 70%,15% 40%,18% 90%,21% 20%,24% 60%,27% 45%,30% 85%,33% 15%,36% 65%,39% 35%,42% 95%,45% 25%,48% 55%,51% 40%,54% 80%,57% 10%,60% 70%,63% 30%,66% 90%,69% 20%,72% 60%,75% 45%,78% 85%,81% 15%,84% 65%,87% 35%,90% 95%,93% 25%,96% 55%,100% 40%);
}
@keyframes waveShift{ 0%{opacity:.55} 50%{opacity:1} 100%{opacity:.55} }

.map-grid{
  width:100%; aspect-ratio: 16/10; border-radius:8px; margin-bottom:.6em;
  background-color:#c9bd98;
  background-image:
    linear-gradient(rgba(60,50,20,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,50,20,.22) 1px, transparent 1px),
    radial-gradient(circle at 30% 35%, rgba(90,110,60,.55) 0 14%, transparent 15%),
    radial-gradient(circle at 68% 62%, rgba(90,110,60,.45) 0 10%, transparent 11%);
  background-size: 14px 14px, 14px 14px, 100% 100%, 100% 100%;
}
.map-card{ width:250px; }
.map-card .map-grid-lg{ aspect-ratio:16/11; }
.map-grid-alt{ background-color:#b9c9c9; }
.map-badge{ position:absolute; top:14px; right:14px; background:var(--ink); color:#fff; font-size:.68rem; font-weight:700; padding:.3em .6em; border-radius:8px; }
.map-title{ font-family:'Fraunces',serif; font-weight:600; font-size:1rem; margin-top:.9em; color:var(--ink); }
.map-sub{ font-size:.7rem; color:var(--ink-soft); margin-top:.25em; }
#compass .brand-visual{ min-height:460px; }
.mc-1{ top:0; left:2%; z-index:2; }
.mc-2{ top:36%; left:38%; z-index:3; }
.compass-rose{
  position:absolute; top:82%; left:12%; width:62px; height:62px; border-radius:50%;
  background:var(--card); display:flex; align-items:center; justify-content:center;
  color: var(--accent-fill); box-shadow: 0 20px 40px -18px rgba(0,0,0,.5);
  animation: spinSlow 18s linear infinite; transition: animation-duration .4s, transform .3s var(--ease);
  cursor:pointer;
}
.compass-rose:hover{ animation-duration:3s; transform:scale(1.08); }

/* ---------- Compass: Etsy listings strip ---------- */
.etsy-strip{ position:relative; z-index:1; max-width:1200px; margin:80px auto 0; }
.strip-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.strip-head > .mono{ font-size:.72rem; letter-spacing:.12em; color: var(--fg-soft); }
.strip-link{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.68rem; font-weight:700; letter-spacing:.06em; color: var(--accent);
}
.strip-link svg{ transition: transform .3s var(--ease); }
.strip-link:hover svg{ transform: translate(2px,-2px); }
.strip-count{ font-size:.66rem; letter-spacing:.1em; color: var(--accent); }
.etsy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.etsy-tile{
  display:block; background: var(--card); color: var(--ink);
  border-radius: var(--radius-md); padding:10px;
  box-shadow: 0 16px 32px -16px rgba(0,0,0,.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.etsy-tile:hover{ transform: translateY(-5px); box-shadow: 0 24px 44px -18px rgba(0,0,0,.6); }
.etsy-tile .map-grid{ margin-bottom:0; border-radius:8px; transition: filter .3s; }
.etsy-tile:hover .map-grid{ filter:brightness(1.08); }
.etsy-tile-row{ display:flex; align-items:center; justify-content:space-between; gap:.6em; padding:10px 6px 6px; }
.etsy-tile-name{ font-family:'Fraunces',serif; font-weight:600; font-size:.92rem; }
.etsy-tile-price{ background: var(--compass-fill); color:#fff; font-size:.62rem; font-weight:700; padding:.3em .55em; border-radius:6px; }
.map-grid-moss{ background-color:#aec19a; }

/* ---------- Indigo: blueprint layout (review / magazine / issue / socials) ---------- */
#indigo .brand-visual-indigo{ min-height:620px; }
.review-card{ top:0; left:0; width:240px; z-index:4; }
.mag-hero{
  position:absolute; top:64px; left:0; width:100%; aspect-ratio:3/2;
  display:flex; flex-direction:column;
  background: var(--indigo-fill); color:#fff;
  border-radius: var(--radius-lg); padding:22px; overflow:hidden; z-index:3;
  box-shadow: 0 26px 54px -20px rgba(0,0,0,.6);
  transition: transform .5s var(--ease-soft);
}
.mag-hero-top{ display:flex; align-items:baseline; justify-content:space-between; gap:1em; }
.mag-wordmark{
  font-family:'League Spartan', 'Inter', sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:.02em; font-size:1.7rem; line-height:1;
}
.mag-issue{ font-size:.6rem; color: var(--indigo-tint); letter-spacing:.08em; }
.mag-hero-icon{ position:absolute; right:-16px; bottom:36px; color:#fff; opacity:.08; }
.mag-hero-body{
  flex:1; margin-top:16px; border:1.5px dashed rgba(255,255,255,.3); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7em;
  text-align:center; position:relative; z-index:1;
}
.mag-coming{
  font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500;
  font-size:clamp(2rem, 3.4vw, 2.8rem); line-height:1;
}
.mag-hero-body .mono{ font-size:.62rem; letter-spacing:.1em; color: var(--indigo-tint); }
.mag-hero-caption{ margin-top:14px; font-size:.78rem; color: rgba(255,255,255,.72); line-height:1.5; }

.issue-card{ top:62%; left:3%; width:250px; z-index:5; }
.issue-facts{ display:flex; flex-direction:column; gap:.45em; margin-top:.2em; }
.issue-facts li{ display:flex; justify-content:space-between; gap:1em; font-size:.66rem; color:var(--ink-soft); }
.issue-facts b{ color:var(--ink); font-weight:600; text-align:right; }
.issue-link{
  display:inline-flex; align-items:center; gap:.45em; margin-top:1em;
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--accent-fill);
}
.issue-link svg{ transition: transform .3s var(--ease); }
.issue-link:hover svg{ transform: translate(2px,-2px); }

.socials-card{ top:82%; right:2%; left:auto; width:auto; z-index:5; padding:16px 18px; }
.socials-row{ display:flex; gap:10px; margin-top:.2em; }
.social-icon{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--indigo-fill); color:#fff;
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.social-icon:hover, .social-icon:focus-visible{
  transform: translateY(-3px) scale(1.08);
  background: var(--indigo-tint); color: var(--indigo-fill);
}

/* ---------- Indigo: newsletter bar ---------- */
.newsletter{
  position:relative; z-index:1; max-width:1100px; margin:76px auto 0;
  background: rgba(120,90,200,.09);
  border:1px solid rgba(184,149,230,.28);
  border-radius:100px; padding:20px 34px;
}
.newsletter-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.newsletter-kicker{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color: var(--indigo-tint); margin-bottom:.5em; }
.newsletter-copy h3{ font-size:1.35rem; }
.newsletter-sub{ margin-top:.4em; font-size:.85rem; color: var(--fg-soft); }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input{
  min-width:220px; padding:.85em 1.2em; border-radius:100px;
  border:1px solid var(--line-strong); background: rgba(243,237,224,.05); color:#fff; font-size:.9rem;
  transition: border-color .3s, background .3s;
}
.newsletter-form input::placeholder{ color: var(--fg-soft-2); }
.newsletter-form input:focus{ outline:none; border-color: var(--indigo-tint); background: rgba(243,237,224,.09); }
#indigo .contact-note{ color: var(--indigo-tint); text-align:center; }

/* ---------- Hit Chance: three slot blocks ---------- */
.hc-head{
  position:relative; z-index:1; max-width:1200px; margin:0 auto 60px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap;
  text-align:left;
}
.hc-head h2{ font-size: clamp(2.2rem,4.6vw,3.4rem); margin-top:.25em; }
.hc-head .brand-desc{ max-width:520px; }
.hc-head .btn{ margin-bottom:6px; }
.hc-head-actions{ display:flex; align-items:center; gap:22px; }

/* ---------- spinning signature badge (one per Hit Chance brand) ---------- */
.spin-badge{
  width:60px; height:60px; flex-shrink:0; border-radius:50%; cursor:pointer;
  transition: transform .3s var(--ease);
}
.spin-badge:hover, .spin-badge:focus-visible{ transform: scale(1.1); }
.spin-badge-spin{
  width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--card); color: var(--accent-fill);
  box-shadow: 0 14px 26px -14px rgba(0,0,0,.55);
  animation: spinSlow 16s linear infinite;
}
.spin-badge:hover .spin-badge-spin, .spin-badge:focus-visible .spin-badge-spin{ animation-duration: 3s; }
.spin-badge.zap .spin-badge-spin{ animation: spinZap .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes spinZap{ 0%{ transform:rotate(0) scale(1); } 55%{ transform:rotate(300deg) scale(1.22); } 100%{ transform:rotate(360deg) scale(1); } }

.hc-block{ position:relative; z-index:1; max-width:1200px; margin:0 auto 52px; }
.hc-block:last-child{ margin-bottom:0; }
.slot-grid{ display:grid; gap:16px; }
.slots-games{ grid-template-columns:repeat(3,1fr); }
.slots-fab{ grid-template-columns:repeat(5,1fr); }
.slots-modules{ grid-template-columns:repeat(3,1fr); }
.slots-games .art-slot{ aspect-ratio:3/4; }
.slots-fab .art-slot{ aspect-ratio:1/1; }
.slots-modules .art-slot{ aspect-ratio:3/2; }
.art-slot{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6em;
  background-color: var(--card-dark);
  background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(243,237,224,.025) 12px 24px);
  border:1.5px dashed var(--line-strong); border-radius: var(--radius-md);
  color: var(--fg-soft); text-align:center; padding:14px; cursor:pointer; overflow:hidden;
  transition: transform .3s var(--ease), border-color .3s, background-color .3s, box-shadow .3s;
}
.art-slot::before{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 60%);
  transition: opacity .4s;
}
.art-slot:hover{ border-color: var(--accent); background-color: rgba(243,237,224,.05); box-shadow: 0 20px 36px -18px rgba(0,0,0,.5); }
.art-slot:hover::before{ opacity:1; }
.slot-tag{ font-size:.62rem; letter-spacing:.08em; position:relative; z-index:1; }
.slot-num{ position:absolute; top:10px; right:12px; font-size:.6rem; opacity:.5; z-index:1; }
.art-slot-icon{
  display:inline-flex; position:relative; z-index:1;
  animation: slotBob 4.4s ease-in-out infinite;
}
.art-slot-icon svg{ color: var(--accent); opacity:.75; transition: transform .3s var(--ease), opacity .3s; }
.art-slot:hover .art-slot-icon svg{ opacity:1; transform: scale(1.14) rotate(-6deg); }
.art-slot.zap .art-slot-icon svg{ animation: slotZap .5s ease; }
@keyframes slotBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes slotZap{ 0%{ transform:scale(1) rotate(0); } 45%{ transform:scale(1.3) rotate(-16deg); } 100%{ transform:scale(1) rotate(0); } }
.art-slot:nth-child(1) .art-slot-icon{ animation-delay:0s; }
.art-slot:nth-child(2) .art-slot-icon{ animation-delay:-1.1s; }
.art-slot:nth-child(3) .art-slot-icon{ animation-delay:-2.2s; }
.art-slot:nth-child(4) .art-slot-icon{ animation-delay:-3.3s; }
.art-slot:nth-child(5) .art-slot-icon{ animation-delay:-.6s; }

/* ---------- Comics: Kickstarter graphic novel ---------- */
#comics .brand-visual-comics{ min-height:580px; }
.ks-cover{
  position:absolute; top:12px; left:4%; width:300px; aspect-ratio:2/3; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background-color:#20100d;
  background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(243,237,224,.03) 12px 24px);
  border:1.5px dashed rgba(234,122,99,.45); border-radius: var(--radius-lg);
  color: var(--fg-soft); overflow:hidden; padding:20px;
  transition: transform .5s var(--ease-soft), border-color .3s;
}
.ks-cover:hover{ transform: translateY(-6px); border-color: var(--comics-tint); }
.ks-cover .halftone{ opacity:.1; }
.ks-cover-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.8em; text-align:center; }
.ks-cover-inner svg{ color: var(--comics-tint); }
.ks-cover-inner .mono{ font-size:.6rem; letter-spacing:.16em; color: var(--comics-tint); }
.ks-cover-title{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:1.5rem; color: var(--fg); }
.ks-cover-tag{ position:absolute; bottom:16px; left:0; right:0; text-align:center; font-size:.56rem; letter-spacing:.08em; color: var(--fg-soft-2); z-index:1; }
.ks-info{ top:0; right:0; left:auto; width:240px; z-index:3; }
.ks-info-body{ font-size:.76rem; color: var(--ink-soft); line-height:1.5; margin-bottom:.4em; }
.ks-arrow{ position:absolute; left:-56px; bottom:-50px; color: var(--comics-tint); pointer-events:none; }

.comic-card{ }
.cc-1{ top:68%; left:0; z-index:3; width:170px; height:170px; background: var(--comics-fill); color:#fff; overflow:hidden; }
.halftone{
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.85) 2px, transparent 2.4px);
  background-size: 12px 12px;
  opacity:.5;
}
.comic-pow{
  position:absolute; bottom:16px; left:16px; font-family:'Fraunces',serif; font-weight:800;
  font-size:2rem; color:#fff; -webkit-text-stroke:2px var(--ink); letter-spacing:.02em;
  transform: rotate(-6deg);
}
.cc-2{ top:64%; left:auto; right:4%; z-index:3; width:150px; background:var(--comics-fill); color:#fff; }
.fcard-pdf-icon{ background:#fff; color:var(--comics-fill); font-weight:800; font-size:.62rem; letter-spacing:.06em; display:inline-block; padding:.3em .6em; border-radius:6px; margin-bottom:.6em; }
.fcard-pdf-name{ font-weight:700; font-size:.85rem; }
.fcard-pdf-sub{ font-size:.7rem; opacity:.85; margin-top:.15em !important; }
/* theme accent bindings (compat) */
.brand-section[data-theme="indigo"] .stack-kicker{ color: var(--indigo-fill); }

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.contact{ text-align:center; background: var(--bg); }
.contact h2{ color:var(--fg); }
.contact-inner{ max-width:640px; margin:0 auto; }
.contact .section-lede{ color: var(--fg-soft); }
.contact-form{
  margin-top: 2.4em; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.contact-form input{
  flex:1; min-width:240px; max-width:340px; padding: .95em 1.3em; border-radius:100px;
  border:1px solid var(--line-strong); background: rgba(243,237,224,.05); color:#fff; font-size:.95rem;
  transition: border-color .3s, background .3s;
}
.contact-form input::placeholder{ color: var(--fg-soft-2); }
.contact-form input:focus{ outline:none; border-color: var(--amber); background: rgba(243,237,224,.09); }
.contact .btn-primary{ background: var(--amber); color:#fff; }
.contact .btn-primary:hover{ background: var(--paper); color: var(--ink); }
.contact-note{ margin-top:1.2em; font-size:.8rem; color: var(--amber); min-height:1.2em; }

.footer{ background: var(--bg); border-top:1px solid var(--line); padding: 40px clamp(20px,6vw,56px); }
.footer-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-logo{ color: var(--fg); }
.footer-logo svg{ color: var(--fg); }
.footer-links{ display:flex; gap:1.8em; flex-wrap:wrap; }
.footer-links a{ font-size:.85rem; color: var(--fg-soft); transition:color .3s; }
.footer-links a:hover{ color:#fff; }
.footer-copy{ font-size:.76rem; color: var(--fg-soft-2); }

.to-top{
  position:fixed; right:24px; bottom:24px; z-index:150;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background: var(--paper); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,.6);
  opacity:0; transform: translateY(12px) scale(.85); pointer-events:none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s, color .3s;
}
.to-top:hover{ background: var(--amber); color:#fff; transform: translateY(-3px) scale(1.05); }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .hero-floats{
    position:relative; inset:auto; margin-top:56px;
    display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:center;
  }
  .hero-floats .stamp, .hero-floats .badge-chip, .hero-floats .mark-grid, .hero-floats .poll-card.in-hero{
    position:relative; top:auto; left:auto; right:auto; bottom:auto;
  }
  .brand-inner{ grid-template-columns:1fr; gap:56px; }
  .brand-inner-rev .brand-copy, .brand-inner-rev .brand-visual{ order:0; }
  .brand-visual{ min-height:380px; }
  #compass .brand-visual{ min-height:460px; }
  .bento{ grid-template-columns: 1fr 1fr; }
  .brand-watermark{ display:none; }
}

@media (max-width: 900px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .slots-fab{ grid-template-columns:repeat(3,1fr); }
  .etsy-grid{ grid-template-columns:1fr 1fr; }
  .hc-head{ align-items:flex-start; flex-direction:column; }
}

@media (max-width: 640px){
  .hero{ padding-top:130px; }
  .poll-card.in-hero{ width:100%; max-width:280px; }
  .scroll-cue{ display:none; }
  .bento{ grid-template-columns: 1fr; }
  .brand-desc, .brand-facts{ margin-left:auto; margin-right:auto; }
  .stack-card, .map-card, .comic-card, .mag-hero,
  .review-card, .issue-card, .socials-card, .ks-cover, .ks-info{ position:relative; width:100%; max-width:320px; margin:0 auto 18px; top:auto !important; left:auto !important; right:auto !important; }
  .ks-arrow{ display:none; }
  .etsy-grid{ gap:12px; }
  .etsy-tile-name{ font-size:.8rem; }
  .newsletter{ border-radius:24px; padding:22px; margin-top:56px; }
  .newsletter-inner{ flex-direction:column; align-items:flex-start; }
  .newsletter-form{ width:100%; }
  .newsletter-form input{ flex:1; min-width:0; }
  .brand-visual, #compass .brand-visual{ display:flex; flex-direction:column; align-items:center; min-height:auto; }
  .compass-rose{ position:relative; margin:0 auto 18px; }
  .slots-games{ grid-template-columns:1fr 1fr; }
  .slots-fab{ grid-template-columns:1fr 1fr; }
  .slots-modules{ grid-template-columns:1fr; }
  .contact-form{ flex-direction:column; align-items:center; }
  .contact-form input{ max-width:100%; width:100%; }
}

/* =========================================================
   LIGHT ZONE — Lusion-inspired homepage cover
   ========================================================= */
.zone-light{ background: var(--paper); color: var(--ink); }
.zone-light h1, .zone-light h2, .zone-light h3{ color: var(--ink); }
.zone-light .hero-sub{ color: var(--ink-soft); }
.zone-light .btn-primary{ background: var(--ink); color: var(--paper); box-shadow: 0 8px 22px -12px rgba(23,19,15,.5); }
.zone-light .btn-primary:hover{ background: var(--amber); color:#fff; }
.zone-light .btn-ghost{ color: var(--ink); border-color: rgba(23,19,15,.25); }
.zone-light .btn-ghost:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.zone-light .scroll-cue{ color: var(--ink-soft); }
.zone-light .scroll-cue-line{ background: rgba(23,19,15,.15); }
.zone-light .hero-dotgrid{
  background-image: radial-gradient(circle, rgba(23,19,15,.13) 1.4px, transparent 1.4px);
}
.zone-light .hero-tagline::before, .zone-light .hero-tagline::after{ background: rgba(23,19,15,.18); }
.zone-light .stamp-ring{ border-color: rgba(23,19,15,.3); }
.zone-light .stamp:hover .stamp-ring, .zone-light .stamp:focus-visible .stamp-ring{ border-color: var(--amber); }
.zone-light .stamp-face{ box-shadow: 0 18px 34px -16px rgba(23,19,15,.35); border:1px solid rgba(23,19,15,.08); }

/* ---------- hero pill (Lusion-style floating chip) ---------- */
.hero-pill{
  display:inline-flex; align-items:center; gap:.5em;
  background: var(--card); color: var(--ink); border:1px solid rgba(23,19,15,.1);
  border-radius:100px; padding:.6em 1.1em .6em .9em;
  font-size:.78rem; font-weight:600; margin-bottom:2.4em;
  box-shadow: 0 12px 24px -14px rgba(23,19,15,.35);
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.hero-pill svg{ color: var(--amber); transition: color .3s; }
.hero-pill:hover{ transform: translateY(-3px); background: var(--ink); color: var(--paper); }
.hero-pill:hover svg{ color: var(--amber); }

/* ---------- hero: self-drawing circle stroke ---------- */
.hero-circle{
  position:absolute; left:-9%; top:-14%; width:118%; height:126%;
  z-index:-1; pointer-events:none; overflow:visible;
}
.hero-circle path{
  stroke: var(--amber); stroke-width:14; stroke-linecap:round;
  vector-effect: non-scaling-stroke; opacity:.85;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition: stroke-dashoffset 1.6s cubic-bezier(.55,.1,.3,1) .5s;
}
.hero-circle.play path{ stroke-dashoffset:0; }

/* ---------- featured studios grid (Lusion "Featured Work") ---------- */
.work-head{
  max-width:1240px; margin:0 auto 72px;
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
}
.work-title{ font-size:clamp(3rem,7vw,5.6rem); line-height:.98; letter-spacing:-.02em; }
.work-blurb{
  max-width:380px; font-size:.7rem; letter-spacing:.12em; line-height:1.8;
  text-transform:uppercase; color: var(--ink-soft); padding-bottom:.8em;
}
.work-grid{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:56px 40px;
}
.work-card{ display:block; }
.work-media{
  position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.work-media-bg{ position:absolute; inset:0; transition: transform .8s var(--ease); }
.work-card:hover .work-media-bg{ transform: scale(1.06); }

.wm-indigo .work-media-bg{
  background: radial-gradient(ellipse 90% 90% at 30% 20%, #4b2a7d, var(--indigo-fill) 70%);
}
.wm-compass .work-media-bg{
  background-color:#c9bd98;
  background-image:
    linear-gradient(rgba(60,50,20,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,50,20,.22) 1px, transparent 1px),
    radial-gradient(circle at 28% 38%, rgba(90,110,60,.5) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 60%, rgba(90,110,60,.42) 0 9%, transparent 10%);
  background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%;
}
.wm-hitchance .work-media-bg{
  background-color: var(--hitchance);
  background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,.12) 14px 28px);
}
.wm-workshop .work-media-bg{
  background-color: var(--workshop-fill);
  background-image: radial-gradient(circle, rgba(255,255,255,.14) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}
.wm-tabletop .work-media-bg{
  background-color: var(--tabletop-fill);
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0,0,0,.1) 14px 28px);
}
.wm-comics .work-media-bg{
  background-color: var(--comics-fill);
  background-image: radial-gradient(circle, rgba(255,255,255,.7) 2px, transparent 2.4px);
  background-size: 14px 14px;
}
.wm-cobblemoss .work-media-bg{
  background-color:#55604a;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(23,19,15,.26) 37%, transparent 41%),
    radial-gradient(circle at 50% 50%, rgba(23,19,15,.26) 37%, transparent 41%);
  background-size: 56px 44px, 56px 44px;
  background-position: 0 0, 28px 22px;
}
.wm-cobblemoss::after{
  content:''; position:absolute; inset:12px; z-index:1; pointer-events:none;
  border:1.5px dashed rgba(246,241,228,.55); border-radius:10px;
}
.wm-embassy .work-media-bg{
  background-color:#1f2b45;
  background-image: repeating-linear-gradient(90deg, rgba(214,178,94,.22) 0 2px, transparent 2px 26px);
}
.wm-embassy::after{
  content:''; position:absolute; inset:12px; z-index:1; pointer-events:none;
  border:1.5px dashed rgba(214,178,94,.5); border-radius:10px;
}
.wm-embassy .work-coming svg{ color:#d6b25e; }
.work-coming{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.9em;
  color:#f6f1e4;
}
.work-coming svg{ animation: slotBob 5s ease-in-out infinite; }
.work-coming .mono{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }

.work-mark{
  position:relative; z-index:1;
  font-family:'League Spartan','Inter',sans-serif; font-weight:800; letter-spacing:.02em;
  color:#fff; font-size:clamp(2.4rem,4.5vw,4rem);
}
.work-icon{
  position:relative; z-index:1; display:inline-flex; color:#fff; opacity:.95;
  animation: slotBob 5s ease-in-out infinite;
}
.work-rose{
  position:relative; z-index:1; width:86px; height:86px; border-radius:50%;
  background: var(--card); color: var(--compass-fill);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.4);
  animation: spinSlow 18s linear infinite;
}
.work-pow{
  position:relative; z-index:1;
  font-family:'Fraunces',serif; font-weight:800; font-size:clamp(2.4rem,4vw,3.4rem);
  color:#fff; -webkit-text-stroke:2.5px var(--ink); letter-spacing:.02em;
  transform: rotate(-6deg); transition: transform .4s var(--ease);
}
.work-card:hover .work-pow{ transform: rotate(-2deg) scale(1.06); }

.work-arrow{
  position:absolute; top:14px; right:14px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  background: var(--card); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(8px) rotate(-24deg);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.work-card:hover .work-arrow{ opacity:1; transform:none; }

.work-meta{
  margin-top:16px; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--ink-soft);
}
.work-name{ font-size:clamp(1.7rem,2.6vw,2.4rem); margin-top:.12em; }

/* poll + CTA cells in the grid */
.poll-card.in-grid{
  position:static; width:100%; height:100%; min-height:280px;
  display:flex; flex-direction:column; justify-content:center;
  border:1px solid rgba(23,19,15,.12); border-radius:18px; padding:28px 30px;
  box-shadow: 0 18px 40px -26px rgba(23,19,15,.35);
}
.work-cta-inner{
  background: var(--ink); color: var(--paper);
  border-radius:18px; height:100%; min-height:280px; padding:30px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:20px;
  transition: background .35s;
}
.work-cta:hover .work-cta-inner{ background:#241d15; }
.work-cta-kicker{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--amber); }
.work-cta-inner h3{ color: var(--paper); font-size:clamp(1.5rem,2.2vw,2rem); max-width:360px; }
.work-arrow.wa-static{ position:static; opacity:1; transform:none; background: var(--paper); align-self:flex-end; }
.work-cta:hover .work-arrow.wa-static{ background: var(--amber); color:#fff; }

@media (max-width: 1080px){
  .work-head{ grid-template-columns:1fr; align-items:start; gap:20px; }
  .work-blurb{ padding-bottom:0; }
}
@media (max-width: 900px){
  .work-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-circle{ left:-4%; top:-8%; width:108%; height:114%; }
  .hero-circle path{ stroke-width:9; }
}