/* ============================================================
   Pixel69Mancer — site styles
   Palette + type lifted from the "A Modern Day Art Student's
   Study into Erotic Comics" cover: stacked sticker lettering,
   cream outlines, magenta / lime / royal purple, gold bokeh,
   over the tech-noir green-black of the Goon Tech plates.
   ============================================================ */

:root{
  /* ink */
  --ink:        #070b09;
  --ink-2:      #0c1210;
  --ink-3:      #131b18;
  --ink-line:   #22302b;

  /* brand */
  --pink:       #ff2d8e;
  --pink-deep:  #c9146b;
  --lime:       #a8e63a;
  --green:      #46d152;
  --green-hot:  #7cff5a;
  --purple:     #5423a8;
  --lavender:   #b48cff;
  --cream:      #f7f0dc;
  --gold:       #e8b84b;

  --text:       #e8e3d4;
  --text-dim:   #9aa79f;

  /* type */
  --display: "Arial Black", "Haettenschweiler", "Impact",
             "Franklin Gothic Heavy", system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --wrap: 1180px;
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* An author `display` beats the UA stylesheet's [hidden]{display:none}.
   The age gate and lightbox both set display:grid, so without this they
   never actually hide. Keep this rule above everything that uses [hidden]. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  font-family:var(--body);
  color:var(--text);
  background:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--green-hot); }

/* ── Sticker lettering ─────────────────────────────────────── */

.stack{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.06em;
  line-height:.92;
}

.sticker{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--cream);
  -webkit-text-stroke:.14em var(--cream);
  paint-order:stroke fill;
  /* drop-shadow, not text-shadow: gradient-filled letters use a
     transparent fill, and a text-shadow would show straight through it */
  filter:drop-shadow(0 .05em 0 rgba(0,0,0,.6)) drop-shadow(0 .1em .12em rgba(0,0,0,.45));
  font-size:clamp(1.6rem, 4.4vw, 3.4rem);
}

.sticker--pink   { color:var(--pink);   }
.sticker--purple { color:var(--purple); -webkit-text-stroke-color:var(--lavender); }
.sticker--cream  { color:var(--cream);  -webkit-text-stroke-color:var(--purple);   }
.sticker--green  { color:var(--green);  }

/* Solid fills only. A gradient fill needs -webkit-text-fill-color:transparent,
   which lets the cream stroke and the shadow bleed through the letterforms —
   it washes out badly at display sizes. Solid reads closer to the cover. */

.sticker.sm{ font-size:clamp(.95rem, 1.9vw, 1.35rem); -webkit-text-stroke-width:.1em; }
.sticker.md{ font-size:clamp(1.4rem, 3.2vw, 2.3rem); -webkit-text-stroke-width:.1em; }
/* big type needs a proportionally thinner rule or the outline eats the counters */
.sticker.lg{ font-size:clamp(2rem, 5.6vw, 4rem);     -webkit-text-stroke-width:.07em; }
.sticker.xl{ font-size:clamp(2.6rem, 8.4vw, 6.2rem); -webkit-text-stroke-width:.055em; }

/* text-transform exception for the sentence-case script lines */
.sticker--pink.sm, .sticker--cream.sm{ text-transform:none; font-style:italic; }

/* ── Cream label plate (from the cover's bottom banner) ─────── */

.plate{
  display:inline-block;
  margin:0;
  padding:.4em 1.1em;
  background:var(--cream);
  color:#12100c;
  font-family:var(--display);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:2px solid #12100c;
  outline:2px solid var(--cream);
  outline-offset:2px;
  border-radius:3px;
}
.plate--sm{ font-size:.62rem; padding:.3em .7em; }
.plate--lg{ font-size:.9rem; }

/* ── Buttons ───────────────────────────────────────────────── */

.btn{
  display:inline-block;
  padding:.85em 1.6em;
  font-family:var(--display);
  font-size:.9rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn--primary{
  background:linear-gradient(180deg, var(--pink) 0%, var(--pink-deep) 100%);
  color:var(--cream);
  box-shadow:0 4px 0 #7d0a41, 0 10px 24px rgba(255,45,142,.28);
}
.btn--ghost{
  background:transparent;
  color:var(--cream);
  border:2px solid var(--ink-line);
  box-shadow:0 4px 0 rgba(0,0,0,.5);
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #7d0a41; }
.btn:focus-visible{ outline:3px solid var(--green-hot); outline-offset:3px; }

/* ── Age gate ──────────────────────────────────────────────── */

.age-gate{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:1.5rem;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(47,191,71,.14), transparent 70%),
    rgba(4,7,6,.97);
  backdrop-filter:blur(6px);
}
.age-gate__panel{
  max-width:560px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
/* the splat asset is a white mark on an opaque black square —
   screen blending drops the black out against the dark page */
.age-gate__mark{ width:86px; mix-blend-mode:screen; opacity:.95; }
.age-gate__title{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.1em; }
.age-gate__body{ margin:0; color:var(--text-dim); max-width:44ch; }
.age-gate__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.age-gate__fine{ margin:0; font-size:.75rem; color:#63706a; max-width:46ch; }

body.gated{ overflow:hidden; }

/* ── Header ────────────────────────────────────────────────── */

.site-head{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1.5rem;
  padding:.75rem clamp(1rem, 4vw, 2.5rem);
  background:rgba(7,11,9,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-line);
}
.brand__sig{ height:34px; width:auto; }
.nav{ display:flex; gap:1.4rem; margin-left:auto; flex-wrap:wrap; }
.nav a{
  color:var(--text); text-decoration:none;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.nav a:hover{ color:var(--green-hot); border-bottom-color:var(--green-hot); }
.nav-plate{ flex-shrink:0; }
@media (max-width:720px){
  .nav{ order:3; width:100%; margin-left:0; gap:1rem; }
  .nav-plate{ margin-left:auto; }
}

/* ── Hero ──────────────────────────────────────────────────── */

.hero{
  position:relative; overflow:hidden;
  padding:clamp(3.5rem, 10vw, 7rem) clamp(1rem, 4vw, 2.5rem);
  background:
    radial-gradient(70% 60% at 15% 10%, rgba(84,35,168,.30), transparent 60%),
    radial-gradient(60% 55% at 85% 20%, rgba(47,191,71,.20), transparent 60%),
    radial-gradient(80% 70% at 50% 110%, rgba(255,45,142,.16), transparent 65%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
/* gold bokeh motes, like the petals on the cover */
.hero__petals{
  position:absolute; inset:-10%;
  pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle, rgba(232,184,75,.9) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(232,184,75,.55) 0 3px, transparent 4px),
    radial-gradient(circle, rgba(247,240,220,.5) 0 1.5px, transparent 2.5px);
  background-size:220px 260px, 380px 340px, 160px 200px;
  background-position:0 0, 90px 120px, 40px 60px;
  animation:drift 34s linear infinite;
}
@keyframes drift{ to{ transform:translate3d(-220px, -260px, 0); } }

.hero__inner{ position:relative; max-width:var(--wrap); margin-inline:auto; }
.eyebrow{
  margin:0 0 1rem; font-family:var(--mono);
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--green-hot);
}
.hero__lede{
  max-width:56ch; margin:1.6rem 0 0;
  font-size:clamp(1rem, 1.5vw, 1.15rem); color:var(--text-dim);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }

/* The brand word is wider than a 390px phone at the global xl minimum.
   Scale this one line from the viewport so its outline is never clipped. */
@media (max-width:480px){
  .hero .sticker.xl{
    font-size:9vw;
    letter-spacing:-.025em;
  }
}

/* ── Featured ──────────────────────────────────────────────── */

.featured{
  padding:clamp(3rem, 8vw, 5.5rem) clamp(1rem, 4vw, 2.5rem);
  background:
    linear-gradient(180deg, var(--ink), #050807),
    radial-gradient(50% 60% at 20% 50%, rgba(47,191,71,.12), transparent 70%);
  border-block:1px solid var(--ink-line);
}
.featured__grid{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4rem); align-items:start;
}
@media (max-width:860px){ .featured__grid{ grid-template-columns:1fr; } }

.featured__cover{ margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.featured__cover img{
  width:100%; border-radius:var(--radius);
  border:1px solid var(--ink-line);
  box-shadow:0 24px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(124,255,90,.08);
}
.featured__body > * + *{ margin-top:1.1rem; }
.featured__lede{ font-size:1.1rem; color:var(--cream); }
.featured__body p{ max-width:60ch; color:var(--text-dim); }
.featured__body .featured__lede{ color:var(--cream); }

.tag{
  display:inline-block; margin:0;
  padding:.35em .9em; border-radius:999px;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.tag--reject{
  background:rgba(255,45,142,.12);
  color:var(--pink);
  border:1px solid rgba(255,45,142,.45);
}

/* ── DeviantArt storefront block ───────────────────────────── */

.devlog{
  margin-top:1.7rem;
  padding:1.3rem 1.4rem 1.4rem;
  background:var(--ink-3);
  border:1px solid var(--ink-line);
  border-left:4px solid var(--green);
  border-radius:var(--radius);
}

/* Three facts, side by side on desktop, stacked when there's no room.
   Separators are drawn on the gaps rather than as borders so the last
   item never trails one. */
.devlog__facts{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  margin:0 0 1.2rem; padding:0; list-style:none;
  font-size:.9rem; color:var(--text-dim);
}
.devlog__facts li + li{ position:relative; }
.devlog__facts li + li::before{
  content:'·'; position:absolute; left:-.85rem; color:var(--ink-line);
}
.devlog__facts strong{
  font-family:var(--display); font-size:1.15rem;
  color:var(--green-hot); letter-spacing:.02em;
}

.devlog__actions{ display:flex; flex-wrap:wrap; gap:.7rem; }

.devlog__fine{
  margin:1rem 0 0 !important;
  font-size:.78rem; line-height:1.55; color:#5f6b65 !important;
}
.devlog__fine a{ color:var(--text-dim); }
.devlog__fine a:hover{ color:var(--green-hot); }


/* ── Sections ──────────────────────────────────────────────── */

.section{ padding:clamp(3rem, 8vw, 5.5rem) clamp(1rem, 4vw, 2.5rem); }
.section--alt{ background:linear-gradient(180deg, #050807, var(--ink-2)); border-block:1px solid var(--ink-line); }
.section__head{ max-width:var(--wrap); margin:0 auto 2.5rem; }
.section__lede{ max-width:58ch; margin:1rem 0 0; color:var(--text-dim); }

.grid{ max-width:var(--wrap); margin-inline:auto; display:grid; gap:clamp(1.2rem, 3vw, 2rem); }
.grid--books  { grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.grid--gallery{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }

/* ── Book card ─────────────────────────────────────────────── */

.book{
  display:flex; flex-direction:column; gap:.85rem;
  padding:1rem;
  background:var(--ink-2);
  border:1px solid var(--ink-line);
  border-radius:var(--radius);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.book:hover{
  transform:translateY(-4px);
  border-color:rgba(124,255,90,.4);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.book__shot{
  position:relative; aspect-ratio:1600/2560;
  border-radius:8px; overflow:hidden; background:var(--ink-3);
}
.book__shot img{ width:100%; height:100%; object-fit:cover; }
.book__title{ margin:0; font-size:1rem; line-height:1.35; color:var(--cream); }
.book__meta{ margin:0; font-size:.78rem; color:var(--text-dim); }
.book__foot{ margin-top:auto; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.book__badge{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.3em .7em; border-radius:999px;
  border:1px solid var(--ink-line); color:var(--text-dim);
}
.book__badge--live{ color:var(--green-hot); border-color:rgba(124,255,90,.4); }
.book__badge--blocked{ color:var(--pink); border-color:rgba(255,45,142,.4); }
.book__link{
  font-family:var(--display); font-size:.78rem; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; color:var(--cream);
  border-bottom:2px solid var(--pink); padding-bottom:1px;
}
.book__link:hover{ color:var(--pink); }

/* ── Gallery tile ──────────────────────────────────────────── */

.tile{
  position:relative; display:block; padding:0; border:0;
  aspect-ratio:1/1; width:100%;
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  background:var(--ink-3); border:1px solid var(--ink-line);
  transition:transform .16s ease, border-color .16s ease;
}
.tile:hover{ transform:translateY(-4px); border-color:rgba(180,140,255,.5); }
.tile:focus-visible{ outline:3px solid var(--green-hot); outline-offset:3px; }
.tile img{ width:100%; height:100%; object-fit:cover; }
.tile__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:.9rem .9rem .7rem;
  background:linear-gradient(0deg, rgba(5,8,7,.92), transparent);
  font-size:.8rem; color:var(--cream); text-align:left;
}
/* empty slot */
.tile--empty{
  display:grid; place-items:center; cursor:default;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.02) 12px 24px),
    var(--ink-3);
}
.tile--empty:hover{ transform:none; border-color:var(--ink-line); }
.tile__slot{
  text-align:center; color:#4e5a54;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
.tile__slot img{ width:48px; margin:0 auto .7rem; opacity:.3; mix-blend-mode:screen; }

/* ── Studios ───────────────────────────────────────────────── */

.studios{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; gap:clamp(1.2rem, 3vw, 2rem);
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.studio{
  background:var(--ink-2); border:1px solid var(--ink-line);
  border-radius:var(--radius); overflow:hidden;
}
.studio img{ width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--ink-3); }
/* the splat is a solid white block at card size — scale it down and
   knock the black backing out so it reads as a mark, not a lightbox */
.studio__mark{
  object-fit:contain; padding:1.6rem;
  background:transparent;  /* else the letterboxing shows as a lighter box */
  mix-blend-mode:screen; opacity:.9;
  filter:drop-shadow(0 0 24px rgba(124,255,90,.18));
}
.studio h3{ margin:1rem 1.1rem .4rem; font-size:1.05rem; color:var(--cream); }
.studio p{ margin:0 1.1rem 1.3rem; font-size:.88rem; color:var(--text-dim); }
.kao{ font-family:var(--mono); color:var(--green-hot); font-size:.85em; }

/* ── Footer ────────────────────────────────────────────────── */

.site-foot{
  padding:clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem);
  border-top:1px solid var(--ink-line);
  background:#040706;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center;
}
.foot__sig{ height:30px; width:auto; opacity:.85; }
.foot__nav{ display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; }
.foot__nav a{ color:var(--text-dim); text-decoration:none; font-size:.85rem; }
.foot__nav a:hover{ color:var(--green-hot); }
.foot__fine{ margin:0; max-width:60ch; font-size:.75rem; color:#4e5a54; }

/* ── Lightbox ──────────────────────────────────────────────── */

.lightbox{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; gap:1rem;
  padding:clamp(1rem, 5vw, 3rem);
  background:rgba(3,5,4,.96); backdrop-filter:blur(8px);
}
.lightbox img{ max-width:100%; max-height:80vh; border-radius:8px; object-fit:contain; }
.lightbox__cap{ margin:0; color:var(--text-dim); font-size:.9rem; }
.lightbox__close{
  position:absolute; top:1rem; right:1.4rem;
  width:44px; height:44px; border-radius:50%;
  background:var(--ink-3); color:var(--cream);
  border:1px solid var(--ink-line);
  font-size:1.6rem; line-height:1; cursor:pointer;
}
.lightbox__close:hover{ border-color:var(--pink); color:var(--pink); }