/* ============================================================
   JoJo Studio — pure black & white manga editorial
   Only #000 and #fff. No grey, no colour (photos excepted).
   ============================================================ */

/* Anime Ace — comic lettering, used inside the manga description boxes */
@font-face{
  font-family:'Anime Ace';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/animeace.woff') format('woff');
}
@font-face{
  font-family:'Anime Ace';font-style:italic;font-weight:400;font-display:swap;
  src:url('/static/fonts/animeace_i.woff') format('woff');
}
@font-face{
  font-family:'Anime Ace';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/animeace_b.woff') format('woff');
}

:root{
  --ink:#000;
  --paper:#fff;
  --comic:'Anime Ace','Bangers',cursive;
  --gap:clamp(20px,3.4vw,56px);
  --frame:3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:500;
  line-height:1.55;
  overflow-x:hidden;
  position:relative;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:#000;color:#fff;}

.wrap{width:min(1240px,92vw);margin-inline:auto;}

/* ---- manga speed / focus lines behind everything ---- */
.speedlines{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url('/static/img/manga-bg.png') center center/cover no-repeat fixed;
  opacity:.78;
  /* keep the centre clean, let the black lines bite at the edges & corners */
  -webkit-mask:radial-gradient(120% 110% at 50% 44%,transparent 0 40%,#000 78%);
          mask:radial-gradient(120% 110% at 50% 44%,transparent 0 40%,#000 78%);
}

/* ============================================================
   Typography helpers
   ============================================================ */
.kicker{
  font-family:'Oswald',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;
  display:inline-block;padding:.35em .7em;border:2px solid #000;
}
.section-title{
  font-family:'Anton',sans-serif;font-weight:400;
  text-transform:uppercase;line-height:.92;letter-spacing:.01em;
  font-size:clamp(2.4rem,6vw,4.6rem);margin:.1em 0 .2em;
}
.section-title.small{font-size:clamp(1.6rem,4vw,2.6rem);}
.section-sub{font-size:clamp(1rem,1.4vw,1.15rem);max-width:46ch;color:#000;}
.section-index{
  font-family:'Anton',sans-serif;font-size:1rem;letter-spacing:.2em;
  display:inline-block;border-bottom:3px solid #000;padding-bottom:2px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --sh:4px;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.9rem;padding:.85em 1.6em;
  border:2px solid #000;background:#fff;color:#000;cursor:pointer;
  box-shadow:var(--sh) var(--sh) 0 #000;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 #000;}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000;}
.btn-solid{background:#000;color:#fff;}
.btn-outline{background:#fff;color:#000;}
.btn-block{width:100%;}

/* ============================================================
   Manga frame (panel) — double line + corner rivets + drop
   ============================================================ */
.manga-frame{
  position:relative;background:#fff;border:var(--frame) solid #000;
  box-shadow:8px 8px 0 #000;
  padding:clamp(14px,2vw,22px);
}
.manga-frame::before{
  content:"";position:absolute;inset:5px;border:1.5px solid #000;pointer-events:none;
  background:
    radial-gradient(circle at 9px 9px,transparent 3px,#000 3px 4.4px,transparent 4.6px) top left,
    radial-gradient(circle at calc(100% - 9px) 9px,transparent 3px,#000 3px 4.4px,transparent 4.6px) top right,
    radial-gradient(circle at 9px calc(100% - 9px),transparent 3px,#000 3px 4.4px,transparent 4.6px) bottom left,
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),transparent 3px,#000 3px 4.4px,transparent 4.6px) bottom right;
  background-repeat:no-repeat;
  background-size:26px 26px,26px 26px,26px 26px,26px 26px;
}

/* ============================================================
   Manga description box (targhetta)
   ============================================================ */
.manga-box{
  position:relative;background:#fff;border:2.5px solid #000;text-align:center;
  box-shadow:4px 4px 0 #000;padding:18px 16px 15px;margin-top:14px;
}
.manga-box-label{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#000;color:#fff;
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.6rem;padding:.28em .6em;white-space:nowrap;
}
.manga-box-corner{
  position:absolute;width:9px;height:9px;background:#fff;border:2px solid #000;border-radius:50%;
}
.manga-box-corner.tl{top:-5px;left:-5px;}
.manga-box-corner.tr{top:-5px;right:-5px;}
.manga-box-corner.bl{bottom:-5px;left:-5px;}
.manga-box-corner.br{bottom:-5px;right:-5px;}
.manga-box-name{
  font-family:var(--comic);font-weight:700;text-transform:uppercase;
  letter-spacing:.005em;font-size:.92rem;margin:.15em 0 .4em;line-height:1.15;
}
.manga-box-desc{font-family:var(--comic);font-weight:400;font-size:.72rem;line-height:1.5;margin:0;}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:40;background:#fff;
  border-bottom:3px solid #000;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:66px;}
.brand{display:flex;align-items:baseline;gap:.5em;}
.brand-mark{
  font-family:'Anton',sans-serif;font-size:1.7rem;letter-spacing:.02em;
  text-transform:uppercase;line-height:1;
}
.brand-jo{ -webkit-text-stroke:1.5px #000;color:#fff;}
.brand-sub{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.24em;font-size:.66rem;}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);}
.nav a{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.82rem;position:relative;padding:4px 0;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#000;transition:width .18s ease;}
.nav a:hover::after{width:100%;}
.nav-ig{border:2px solid #000;padding:.4em .8em !important;}
.nav-ig::after{display:none;}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:2px solid #000;padding:8px 7px;cursor:pointer;}
.nav-toggle span{width:22px;height:2.5px;background:#000;display:block;transition:.2s;}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;padding:clamp(30px,5vw,64px) 0 clamp(40px,6vw,80px);overflow:hidden;}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center;}
.hero-title{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(5rem,17vw,12rem);line-height:.82;letter-spacing:.01em;margin:.12em 0 0;
}
.hero-title span{-webkit-text-stroke:3px #000;color:#fff;}
.hero-tagline{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(1rem,2vw,1.35rem);margin:.4em 0 0;}
.hero-lede{font-size:clamp(1rem,1.4vw,1.18rem);max-width:44ch;margin:1.1em 0 1.6em;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;}

.hero-figure{display:block;position:relative;}
.hero-frame{
  position:relative;border:var(--frame) solid #000;box-shadow:12px 12px 0 #000;
  overflow:hidden;background:#fff;aspect-ratio:4/5;
}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform .5s ease;}
.hero-figure:hover .hero-img{transform:scale(1.04);}
.hero-badge{
  position:absolute;top:0;left:0;background:#000;color:#fff;font-family:'Oswald',sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;padding:.45em .9em;
}
.hero-figure .manga-box{margin-top:-6px;max-width:80%;}
.hero-scroll{
  margin-top:clamp(20px,3vw,40px);text-align:center;font-family:'Oswald',sans-serif;
  text-transform:uppercase;letter-spacing:.3em;font-size:.7rem;
}
.hero-scroll span{display:block;font-size:1.1rem;animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ============================================================
   Sections
   ============================================================ */
.section{padding:clamp(46px,7vw,100px) 0;position:relative;}
.section-head{margin-bottom:clamp(28px,4vw,54px);max-width:60ch;}

.divider{
  height:70px;background:url('/static/img/actionband.svg') center/auto 100% repeat-x;
  opacity:.85;border-top:3px solid #000;border-bottom:3px solid #000;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* ============================================================
   Showcase grid (asymmetric manga board)
   ============================================================ */
.showcase-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--gap);grid-auto-flow:dense;align-items:start;
}
.figure-card{
  grid-column:span 5;display:block;position:relative;
  transition:transform .18s ease;
}
.size-large{grid-column:span 7;}
.size-medium{grid-column:span 5;}
.size-small{grid-column:span 4;}
.size-wide{grid-column:span 8;}
.size-tall{grid-column:span 5;}

.figure-frame{
  position:relative;overflow:hidden;background:#fff;
  border:var(--frame) solid #000;box-shadow:7px 7px 0 #000;
  aspect-ratio:4/5;transition:box-shadow .18s ease;
}
.size-small .figure-frame{aspect-ratio:3/4;}
.size-wide .figure-frame{aspect-ratio:16/11;}
.size-tall .figure-frame{aspect-ratio:3/4.4;}
.size-large .figure-frame{aspect-ratio:4/4.6;}
.figure-img{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform .5s ease;}
.figure-index{
  position:absolute;top:0;left:0;font-family:'Anton',sans-serif;font-size:1rem;
  background:#000;color:#fff;padding:.3em .55em;letter-spacing:.08em;z-index:2;
}
.figure-tag{
  position:absolute;bottom:10px;right:10px;background:#fff;border:2px solid #000;
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:.64rem;padding:.3em .6em;z-index:2;
}
.figure-cta{
  display:inline-block;margin-top:10px;font-family:'Oswald',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  border-bottom:2px solid #000;padding-bottom:2px;opacity:0;transform:translateY(4px);
  transition:opacity .18s ease,transform .18s ease;
}
/* subtle alternating tilt */
.figure-card:nth-child(3n){transform:rotate(-1deg);}
.figure-card:nth-child(4n){transform:rotate(.8deg);}
.figure-card:hover{transform:translateY(-7px) rotate(0deg);z-index:5;}
.figure-card:hover .figure-frame{box-shadow:11px 11px 0 #000;}
.figure-card:hover .figure-img{transform:scale(1.05);}
.figure-card:hover .manga-box{box-shadow:7px 7px 0 #000;}
.figure-card:hover .figure-cta{opacity:1;transform:translateY(0);}

/* ============================================================
   About
   ============================================================ */
.about-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,70px);align-items:center;}
.portrait-frame{padding:10px;background:#fff;}
.portrait-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;}
.about-portrait{position:relative;}
.portrait-tag{
  display:inline-block;margin-top:16px;background:#000;color:#fff;font-family:'Oswald',sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;padding:.45em .9em;
}
.about-text{margin-top:18px;text-align:center;}
.about-text p{font-family:var(--comic);font-size:.8rem;line-height:1.7;margin:.2em 0 .9em;}
.about-text p:last-child{margin-bottom:0;}
.about-stats{display:flex;gap:clamp(16px,3vw,40px);margin-top:26px;flex-wrap:wrap;}
.about-stats div{display:flex;flex-direction:column;}
.about-stats strong{font-family:'Anton',sans-serif;font-size:1.8rem;line-height:1;}
.about-stats span{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;margin-top:4px;}

/* ============================================================
   News
   ============================================================ */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);}
.news-card{
  position:relative;background:#fff;border:var(--frame) solid #000;box-shadow:6px 6px 0 #000;
  padding:22px 20px 20px;display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease;
}
.news-card:hover{transform:translateY(-5px);box-shadow:10px 10px 0 #000;}
.news-badge{
  align-self:flex-start;background:#000;color:#fff;font-family:'Oswald',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;padding:.35em .7em;margin-bottom:12px;
}
.news-title{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.15rem;line-height:1.15;margin:0 0 .3em;}
.news-date{font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.1em;opacity:.7;}
.news-excerpt{font-size:.9rem;margin:.6em 0 1em;}
.news-more{margin-top:auto;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;border-bottom:2px solid #000;align-self:flex-start;padding-bottom:2px;}

/* ============================================================
   Contact
   ============================================================ */
.contact-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,60px);align-items:start;}
.contact-list{list-style:none;padding:0;margin:26px 0 0;}
.contact-list li{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid #000;padding:12px 0;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.86rem;}
.contact-list li span:first-child{font-weight:600;opacity:.65;}
.contact-form-wrap{background:#fff;}
.form-ok{background:#000;color:#fff;padding:12px 14px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;margin-bottom:16px;}
.contact-form .field{margin-bottom:14px;display:flex;flex-direction:column;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.contact-form label{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;margin-bottom:6px;}
.contact-form label em{font-style:normal;opacity:.55;font-weight:400;}
.contact-form input,.contact-form textarea{
  font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;color:#000;background:#fff;
  border:2px solid #000;padding:.7em .8em;box-shadow:3px 3px 0 #000;transition:box-shadow .12s ease,transform .12s ease;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;box-shadow:5px 5px 0 #000;transform:translate(-1px,-1px);}
.contact-form textarea{resize:vertical;}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:#000;color:#fff;margin-top:clamp(40px,6vw,80px);}
.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:clamp(34px,5vw,60px) 0 26px;}
.footer-mark{color:#fff;font-size:2.4rem;}
.footer-brand p{margin:.3em 0 0;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;}
.footer-loc{opacity:.6;}
.footer-links{display:flex;flex-direction:column;gap:10px;text-align:right;}
.footer-links a{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;position:relative;}
.footer-links a:hover{text-decoration:underline;}
.footer-strip{border-top:1px solid #fff;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;width:min(1240px,92vw);margin-inline:auto;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;opacity:.85;}

/* ============================================================
   Product page
   ============================================================ */
.product{padding:clamp(24px,4vw,54px) 0 0;}
.back-link{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;display:inline-block;margin-bottom:24px;border-bottom:2px solid #000;padding-bottom:2px;}
.product-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start;}
.product-main{position:relative;padding:10px;background:#fff;}
.product-main img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;}
.product-main .figure-tag{bottom:20px;right:20px;}
.product-thumbs{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;}
.product-thumbs .thumb{width:74px;height:90px;border:2px solid #000;background-size:cover;background-position:center;cursor:pointer;box-shadow:3px 3px 0 #000;}
.product-thumbs .thumb.active{outline:3px solid #000;outline-offset:2px;}
.product-name{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(2.4rem,5vw,4rem);line-height:.9;margin:.15em 0 .2em;}
.product-short{font-size:1.1rem;font-weight:600;max-width:40ch;}
.product-desc{margin:22px 0;text-align:center;}
.product-desc p{font-family:var(--comic);font-size:.82rem;line-height:1.75;margin:0;}
.product-specs{margin:0 0 26px;border-top:3px solid #000;}
.product-specs > div{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid #000;padding:11px 0;}
.product-specs dt{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;opacity:.7;margin:0;}
.product-specs dd{margin:0;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.86rem;text-align:right;}
.avail{background:#000;color:#fff;padding:.15em .6em;}
.product-more{padding:clamp(40px,6vw,80px) 0;}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:24px;}
.more-card{display:block;}
.more-img{aspect-ratio:3/4;background-size:cover;background-position:center top;border:2.5px solid #000;box-shadow:5px 5px 0 #000;transition:transform .16s ease,box-shadow .16s ease;}
.more-card:hover .more-img{transform:translateY(-5px);box-shadow:9px 9px 0 #000;}
.more-name{display:block;margin-top:10px;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-figure{max-width:460px;}
  .about-inner{grid-template-columns:1fr;}
  .contact-inner{grid-template-columns:1fr;}
  .product-top{grid-template-columns:1fr;}
  .more-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .showcase-grid{grid-template-columns:repeat(6,1fr);}
  .size-large,.size-wide,.size-tall,.size-medium{grid-column:span 6;}
  .size-small{grid-column:span 3;}
}
@media (max-width:760px){
  .nav{
    position:fixed;inset:66px 0 auto 0;background:#fff;border-bottom:3px solid #000;
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 6vw 18px;
    transform:translateY(-140%);transition:transform .25s ease;z-index:35;
  }
  .nav.open{transform:translateY(0);}
  .nav a{padding:12px 0;width:100%;border-bottom:1px solid #000;font-size:1rem;}
  .nav-ig{border:none !important;padding:12px 0 !important;}
  .nav-toggle{display:flex;}
  .footer-links{text-align:left;}
  /* iOS ignores background-attachment:fixed and zooms it — pin to scroll instead */
  .speedlines{background-attachment:scroll;}
}
@media (max-width:520px){
  .showcase-grid{grid-template-columns:1fr;gap:34px;}
  .size-large,.size-wide,.size-tall,.size-medium,.size-small{grid-column:span 1;}
  .figure-card:nth-child(3n),.figure-card:nth-child(4n){transform:none;}
  .size-small .figure-frame,.size-tall .figure-frame,.size-large .figure-frame,.size-wide .figure-frame{aspect-ratio:4/5;}
  .field-row{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}