/* Witch in the Nest: visual layout and color system. */
:root{color-scheme:dark;--sans:Arial,"Segoe UI",sans-serif;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;font-family:var(--sans);color:#f8f0fc;background:#080611;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a.primary-cta,a.link-card{font:inherit;cursor:pointer;color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.theme{--text:#f8f1ff;--muted:#cbbdda;--edge:rgba(170,150,217,.30);--accent:#c9a9ef;--cta1:#333b82;--cta2:#693c9b;--radius:15px;--glow:rgba(123,73,169,.25);--glow2:rgba(78,63,146,.20);--ring-alpha:.11;--panel:#161323;--panel2:#1d1730;--bg:#0c091b;--bg2:#100e20;--section-gap:32px;--footer-gap:10px;color:var(--text);background:var(--bg)}
.theme-indigo{--bg:#060813;--bg2:#0c0d1e;--panel:#121626;--panel2:#1b1830;--accent:#c9b9ff;--muted:#c1bcda;--edge:rgba(156,160,227,.32);--glow:rgba(74,78,163,.28);--glow2:rgba(104,56,155,.18);--ring-alpha:.12}
.scene{position:relative;min-height:100vh;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 480px 410px at 50% 160px,var(--glow),transparent 82%),radial-gradient(ellipse 690px 510px at 50% 65%,var(--glow2),transparent 85%),linear-gradient(to bottom,var(--bg),var(--bg2) 52%,var(--bg))}
/* Two spacious, almost invisible arcs. They frame the mascot instead of suggesting a moon or zodiac. */
.scene:after{content:"";position:absolute;pointer-events:none;z-index:-1;top:-421px;left:50%;width:1060px;height:790px;border:1px solid var(--accent);border-radius:50%;transform:translateX(-50%) rotate(-7deg);opacity:var(--ring-alpha)}
.page{width:min(calc(100% - 36px),860px);margin:0 auto;padding:43px 0 45px;position:relative}
.hero{text-align:center;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center}
.hero:before{content:"";pointer-events:none;position:absolute;z-index:-1;top:-400px;left:50%;width:830px;height:665px;border:1px solid var(--accent);border-radius:50%;transform:translateX(-50%) rotate(7deg);opacity:calc(var(--ring-alpha)*.68)}
.art-shell{width:min(100%,310px);height:auto;position:relative;margin:0 auto 24px;flex:none}
.art-shell:before{content:"";pointer-events:none;position:absolute;inset:-20px -10px;background:radial-gradient(ellipse at center,var(--glow),transparent 66%);filter:blur(16px)}
.hero-art{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;position:relative;transform:none;filter:drop-shadow(0 7px 24px var(--glow))}
h1{margin:0;font:400 clamp(38px,7vw,66px)/1.08 var(--serif);letter-spacing:-.059em;white-space:nowrap}
h1 em{font-style:italic;color:var(--accent)}
/* Same font family, responsive size, weight, line-height and emphasis for BOTH taglines. */
.hero-subtitle,.closing-line{font:400 clamp(21px,2vw + 12px,30px)/1.32 var(--serif);letter-spacing:-.032em;text-wrap:balance}
.hero-subtitle{margin:23px auto 0;max-width:820px}
.hero-subtitle em,.closing-line em{font-style:italic;color:var(--accent)}
.content{width:min(100%,560px);margin:45px auto 0}
.section-heading{display:flex;align-items:center;justify-content:center;gap:15px;margin:0 0 20px;color:var(--accent);font:650 12px/1.5 var(--sans);letter-spacing:.21em;white-space:nowrap;text-transform:uppercase}
/* EXACT hairline shape reused for Follow / Watch / Enter and the closing ornament */
.hairline{height:1px;min-width:16px;width:20%;max-width:115px;flex:1;background:linear-gradient(90deg,transparent,var(--edge))}
.hairline:last-child{transform:scaleX(-1)}
.primary-cta{width:100%;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:32px 1fr 32px;gap:14px;align-items:center;min-height:126px;padding:20px 23px;border:1px solid rgba(206,185,255,.49);border-radius:18px;background:linear-gradient(112deg,var(--cta1),var(--cta2));box-shadow:0 14px 48px rgba(83,64,170,.18);transition:transform .2s,filter .2s,border-color .2s}
.primary-cta:before{content:"";pointer-events:none;position:absolute;inset:9px;border:1px solid rgba(255,255,255,.19);border-radius:11px}
.primary-cta:hover{filter:brightness(1.1);transform:translateY(-2px)}
.cta-glyph{font:27px var(--serif);color:#ded4ff;opacity:.9}.cta-copy{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;text-align:center}
.cta-copy strong{font:800 clamp(29px,4.5vw,39px)/1.1 var(--sans);letter-spacing:.105em}.cta-copy small{font:400 14px/1.3 var(--sans);color:#f5eafd}
.arrow{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;justify-self:end;opacity:.91}
.links-section{margin-top:var(--section-gap)}.link-stack{display:grid;gap:10px}
.link-card{width:100%;min-height:79px;display:grid;grid-template-columns:47px minmax(0,1fr) 22px;gap:15px;align-items:center;padding:13px 19px;text-align:left;border-radius:var(--radius);border:1px solid var(--edge);background:linear-gradient(110deg,var(--panel),var(--panel2));box-shadow:0 6px 22px rgba(0,0,0,.09);transition:border-color .2s,transform .2s,background .2s}
.link-card:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--panel2)}
.platform-mark{width:44px;height:44px;display:grid;place-items:center;overflow:hidden;border-radius:11px;border:1px solid var(--edge);background:rgba(255,255,255,.045)}
.platform-mark img{display:block;width:31px;height:31px;object-fit:contain;aspect-ratio:1;min-width:0;min-height:0}
.link-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.link-copy strong{font:700 17px/1.15 var(--sans)}.link-copy small{font:400 14px/1.24 var(--sans);color:var(--muted)}.link-card .arrow{color:var(--accent)}
.footer{width:min(100%,560px);margin:var(--section-gap) auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--footer-gap);padding-bottom:10px}
.footer-divider{width:100%;margin:0 0 4px}.footer-divider .divider-dot{width:5px;height:5px;display:block;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(201,169,239,.18)}
.closing-line{margin:0 auto;max-width:810px}
.legal{margin:10px 0 0;font:600 10.5px/1.6 var(--sans);letter-spacing:.10em;color:var(--muted)}.copyright{margin:0;font:400 12px/1.5 var(--sans);color:var(--muted);opacity:.78}
@media(min-width:720px){.hero-subtitle{white-space:nowrap}.page{padding-top:55px}.content{margin-top:47px}}
@media(max-width:600px){.page{width:calc(100% - 30px);padding-top:25px}.art-shell{width:min(100%,260px);height:auto;margin-bottom:20px}.hero-art{width:100%;height:auto;max-width:100%;transform:none}.hero-subtitle{margin-top:17px}.content{margin-top:36px}.section-heading{font-size:10.5px;letter-spacing:.16em;gap:10px}.primary-cta{min-height:111px;padding:14px 14px;grid-template-columns:22px 1fr 22px}.primary-cta:before{inset:7px}.cta-copy strong{font-size:31px}.cta-copy small{font-size:12.5px}.links-section{margin-top:var(--section-gap)}.link-stack{gap:9px}.link-card{min-height:75px;grid-template-columns:42px 1fr 19px;gap:12px;padding:11px 13px}.platform-mark{width:41px;height:41px}.platform-mark img{width:29px;height:29px}.link-copy strong{font-size:16.5px}.link-copy small{font-size:13px}.footer{margin-top:var(--section-gap);gap:9px}.legal{margin-top:8px;font-size:9.6px;letter-spacing:.065em}.copyright{font-size:11px}}
@media(max-width:390px){h1{font-size:clamp(34px,9.7vw,40px)}.hero-subtitle,.closing-line{font-size:clamp(20px,5.7vw,23px)}.section-heading{font-size:10px;letter-spacing:.12em}.hairline{min-width:12px}.link-card{gap:10px}.link-copy strong{font-size:16px}}
@media(max-width:340px){h1{font-size:33px}.primary-cta{grid-template-columns:16px 1fr 16px}.cta-copy small{font-size:11px}.legal{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Decorative wordmark and spacing. */
.brand-title{width:min(100%,665px);margin:0 auto;line-height:0;letter-spacing:normal;white-space:normal;}
.brand-title img{display:block;width:100%;height:auto;max-width:100%;}
.copyright{font-family:Georgia,"Times New Roman",serif;letter-spacing:.012em;}
@media(max-width:600px){.brand-title{width:100%;}.footer-divider{margin-bottom:5px}}


/* The overlapping Fansly badge remains part of the same link. */
.primary-cta{
  overflow:visible;                 /* the badge must be clickable outside the rectangle */
  grid-template-columns:32px minmax(0,1fr) 32px;
  text-decoration:none;
}
.cta-spacer{width:32px;height:1px;}
.cta-badge{
  --badge-size:94px;
  width:var(--badge-size);
  height:var(--badge-size);
  position:absolute;
  top:50%;
  left:-40px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid rgba(158,134,255,.77);
  background:radial-gradient(circle at 42% 34%,#363283 0%,#211c5c 53%,#13122f 100%);
  box-shadow:0 0 0 6px rgba(25,16,60,.25),0 7px 30px rgba(90,67,208,.34),inset 0 0 12px rgba(179,162,255,.24);
  pointer-events:auto;
  z-index:2;
  transition:box-shadow .2s ease;
}
.cta-badge img{
  display:block;
  width:62%;
  height:62%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 2px 8px rgba(136,166,255,.33));
}
.primary-cta:hover .cta-badge{box-shadow:0 0 0 6px rgba(25,16,60,.22),0 9px 34px rgba(128,92,230,.47),inset 0 0 12px rgba(179,162,255,.30)}
@media(max-width:600px){
  /* Leave a little extra left room, keeping the exposed badge within the viewport. */
  .content{width:calc(100% - 18px)}
  .primary-cta{margin-left:12px;width:calc(100% - 12px);grid-template-columns:22px minmax(0,1fr) 22px;}
  .cta-spacer{width:22px}
  .cta-badge{--badge-size:76px;left:-32px;border-width:1.5px}
  .cta-badge img{width:64%;height:64%}
}
@media(max-width:340px){
  .primary-cta{grid-template-columns:14px minmax(0,1fr) 14px;gap:8px}
  .cta-spacer{width:14px}
  .cta-badge{--badge-size:68px;left:-29px}
}


/* Primary call-to-action palette and gradient. */
.theme-indigo {
  --cta1: #44369c;
  --cta2: #8737af;
}
.primary-cta {
  background: radial-gradient(100% 130% at 100% 0%, rgba(181, 78, 217, .13), transparent 70%),
              linear-gradient(110deg, var(--cta1), var(--cta2));
  border-color: rgba(208, 174, 255, .62);
  box-shadow: 0 14px 48px rgba(92, 52, 175, .23);
}
/* Badge center = middle of LEFT card border and middle of its height.
   No magic left offsets, and the official logo's internal artwork has a
   balanced viewBox, so its actual vector shape is centered too. */
.cta-badge {
  --badge-size: 78px;
  top: 50%;
  left: -40px; /* half of 78px plus the card border */
}
.cta-badge img {
  width: 78%;
  height: 78%;
  transform: translateY(1px);
}
@media (max-width: 600px) {
  .cta-badge {
    --badge-size: 66px;
    left: -34px; /* half of 66px plus the card border */
  }
  .cta-badge img {width:78%;height:78%;}
}
@media (max-width: 340px) {
  .cta-badge {
    --badge-size: 60px;
    left: -31px; /* half of 60px plus the card border */
  }
}

/* The supplied Throne SVG uses the same icon sizing as the other platform marks. */