/* MUDA TATTOO — 1440px canvas reproduction of Figma frame 133:3 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:#1c1c1c;overflow-x:hidden}
body{font-family:"Shippori Mincho B1","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",sans-serif;color:#46514a;font-feature-settings:"palt";}
img{display:block;max-width:100%}

.page{
  position:relative;
  width:1440px;
  height:6136px;
  transform-origin:top left;
  background:#ebe8e1;
  overflow:hidden;
}

/* -------------------- backgrounds -------------------- */
.bg-base{position:absolute;inset:0;background:#ebe8e1;z-index:0}
.bg-noise{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(assets/bg-frame121.png) top left / 1440px 960px no-repeat;
  mix-blend-mode:luminosity;opacity:.5;
}

/* -------------------- top-left tilted photo -------------------- */
.tilt-photo{position:absolute;z-index:2;pointer-events:none;}
.tilt-photo--left{
  left:-240px;top:810px;width:798.8px;height:1060.7px;
  display:flex;align-items:center;justify-content:center;
}
.tilt-photo--left img{
  width:530px;height:942px;transform:rotate(18.29deg);object-fit:cover;
}

/* -------------------- hero portrait card (right, -15deg) -------------------- */
.hero-card{
  position:absolute;left:393px;top:-8px;width:653px;height:772px;z-index:3;
  display:flex;align-items:center;justify-content:center;
}
.hero-card__inner{
  transform:rotate(-15deg);
  width:499.7px;height:666.2px;
  border:1px solid rgba(100,108,103,.36);
  background:#ebe8e1;
  overflow:hidden;position:relative;
}
.hero-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:multiply;
}

/* -------------------- huge "MUDA" typographies -------------------- */
.mega-muda{
  position:absolute;left:calc(50% - 747px);top:31px;
  font-family:"Playfair Display SC","Noto Serif JP",serif;
  font-style:italic;font-weight:700;
  font-size:981px;line-height:1;letter-spacing:-39.3px;
  color:#aca392;white-space:nowrap;z-index:4;
}
.mega-muda-sc{
  position:absolute;left:calc(50% + 738px);top:-78px;
  transform:translateX(-100%);
  font-family:"Playfair Display SC","Noto Serif JP",serif;
  font-style:italic;font-weight:700;
  font-size:202.8px;line-height:1;letter-spacing:-16.2px;
  color:#fff;text-align:right;white-space:nowrap;z-index:5;
  mix-blend-mode:exclusion;
}
.mega-muda-outline{
  position:absolute;left:303px;top:1556px;transform:translateX(-50%);
  font-family:"Playfair Display SC",serif;font-weight:700;font-style:italic;
  font-size:154.4px;color:#aca392;white-space:nowrap;
  mix-blend-mode:multiply;z-index:6;
}

/* -------------------- brand mark (top-left cluster) -------------------- */
.brand-mark{position:absolute;left:20px;top:20px;width:60px;z-index:20;mix-blend-mode:exclusion;}
.brand-mark img{width:38px;filter:invert(1)}
.side-label{
  position:absolute;font-family:"Noto Serif JP",serif;font-weight:300;
  font-size:14px;color:#fff;white-space:nowrap;z-index:20;mix-blend-mode:exclusion;
  letter-spacing:.02em;
}
.side-label--left{left:30px;top:279px;transform:rotate(90deg);transform-origin:left top;}
.side-label--right{right:15px;top:294px;transform:rotate(-90deg);transform-origin:right top;}

/* menu button */
.menu-btn{
  position:absolute;right:12px;top:17px;z-index:21;
  background:transparent;border:0;color:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  mix-blend-mode:exclusion;
}
.menu-btn__bars{
  display:block;width:38px;height:14px;
  background:linear-gradient(#fff,#fff) top/100% 2px no-repeat,
             linear-gradient(#fff,#fff) center/100% 2px no-repeat,
             linear-gradient(#fff,#fff) bottom/100% 2px no-repeat;
}
.menu-btn__label{font-family:Inter,sans-serif;font-weight:500;font-size:13px;letter-spacing:.02em;color:#fff}

/* hero taglines bottom of viewport */
.hero-tag{
  position:absolute;top:687px;z-index:20;
  font-family:"Playfair Display SC","Noto Serif JP",serif;
  font-style:italic;font-weight:300;font-size:48px;color:#fff;
  white-space:nowrap;mix-blend-mode:exclusion;letter-spacing:-.02em;
}
.hero-tag--left{left:20px}
.hero-tag--right{left:1420px;transform:translateX(-100%);text-align:right}

/* -------------------- philosophy label right -------------------- */
.philosophy-label{
  position:absolute;left:1163px;top:823px;width:131px;z-index:12;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
.philosophy-label__en{
  transform:rotate(90deg);transform-origin:right top;
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:700;
  font-size:128px;color:#887155;white-space:nowrap;
  display:inline-block;margin-top:20px;
}
.philosophy-label__jp{
  writing-mode:vertical-rl;
  font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:48px;color:#887155;letter-spacing:-.06em;
  transform:scaleX(.64);transform-origin:top right;
  margin-top:120px;
}

/* -------------------- philosophy 3 columns -------------------- */
.philosophy{
  position:absolute;left:calc(50% - 0.5px);top:800px;
  transform:translateX(-50%);
  padding-top:40px;
  display:flex;gap:60px;align-items:flex-start;
  z-index:11;
}
.philo-col{
  display:flex;gap:24px;align-items:flex-start;justify-content:flex-end;
  filter:drop-shadow(-1px 0 1px #ebe8e1) drop-shadow(-1px 0 1.5px #ebe8e1);
}
.philo-col__body{
  display:flex;gap:12px;align-items:flex-start;padding-top:20px;
  color:#646c67;font-family:"Noto Serif JP",serif;font-weight:500;
  font-size:16px;line-height:1;letter-spacing:.01em;text-align:center;
  writing-mode:vertical-rl;
  max-height:520px;
  flex-wrap:wrap-reverse;
}
.philo-col__body p{
  writing-mode:vertical-rl;font-feature-settings:"vert","palt";
  line-height:2;width:16px;
}
.philo-col__head{display:flex;gap:12px;align-items:center;flex-direction:column-reverse;}
.philo-col__jp{
  writing-mode:vertical-rl;
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:48px;
  color:#46514a;letter-spacing:-.06em;line-height:.94;
  transform:scaleX(.64);
  padding-top:16px;
}
.philo-col__en{
  writing-mode:vertical-rl;
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:300;
  font-size:32px;color:#646c67;white-space:nowrap;
  transform:rotate(180deg);
}
.philo-col__en em{color:#aca392;font-weight:700;font-style:italic}

/* -------------------- HIBIRUNA -------------------- */
.hibiruna{position:absolute;left:0;top:1140px;width:1440px;height:600px;z-index:8;}
.hibiruna__deco{
  position:absolute;left:518px;top:1579px - 1140px;top:439px;
  width:397px;height:506px;object-fit:cover;
  mix-blend-mode:luminosity;opacity:.9;filter:blur(2px);
}
.hibi-photo-2845{
  position:absolute;left:856px;top:1140px;width:582px;height:521px;z-index:7;
  overflow:hidden;
}
.hibiruna__title-en{
  position:absolute;left:50%;transform:translateX(-50%);
  top:417px;
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:700;
  font-size:154px;color:#aca392;white-space:nowrap;mix-blend-mode:multiply;
}
.hibiruna__title-jp{
  position:absolute;left:520px;top:405px;
  display:flex;flex-direction:column;justify-content:center;
  width:187px;
}
.hibiruna__title-jp div{
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:57px;
  color:#aca392;letter-spacing:-.06em;line-height:.94;
  display:flex;align-items:center;
}
.hibiruna__title-jp div span{transform:scaleX(.64);transform-origin:left;display:inline-block;}
.hibiruna__title-jp em{
  font-style:normal;font-size:14px;letter-spacing:-.06em;
  writing-mode:vertical-rl;transform:scaleX(.64);
}

/* IMG_2845 warm gradient / conic */
.hibiruna::before{
  content:"";position:absolute;left:2px;top:523px;width:1436px;height:422px;
  background:conic-gradient(from 90deg,#634c71 0%,rgba(99,76,113,.32) 19.7%,rgba(117,94,99,.66) 33.6%,#887155 47.6%,#634c71 100%);
  transform:scaleY(-1);
  opacity:.9;
}
.hibiruna::after{
  content:"";position:absolute;left:2px;top:523px;width:1436px;height:422px;
  background:url(assets/image-11.png) top left / 410px 410px;
  opacity:.37;transform:scaleY(-1);mix-blend-mode:overlay;
}

.hibi-copy{
  position:absolute;top:1800px;width:470px;z-index:12;
  display:flex;flex-direction:column;gap:24px;align-items:center;color:#fff;
}
.hibi-copy--left{left:114px}
.hibi-copy--right{left:850px}
.hibi-copy__title{display:flex;gap:12px;align-items:flex-end;}
.hibi-copy__jp{
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:48px;color:#fff;
  letter-spacing:-.06em;transform:scaleX(.64);transform-origin:left;white-space:nowrap;
}
.hibi-copy__en{
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:300;
  font-size:32px;color:#fff;white-space:nowrap;
}
.hibi-copy__en em{font-weight:700}
.hibi-copy__body p{
  font-family:"Noto Serif JP",serif;font-weight:500;font-size:16px;line-height:1.7;
  color:#fff;text-align:center;letter-spacing:.01em;
}

/* CTA */
.cta{
  position:absolute;display:inline-flex;align-items:center;gap:20px;
  color:#fff;text-decoration:none;z-index:15;
}
.cta span{
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:36px;
  letter-spacing:-.06em;transform:scaleX(.64);transform-origin:left;
  white-space:nowrap;
}
.cta img{width:82px;height:71px}
.cta--hibiruna{left:959px;top:2014px}
.cta--studio{left:1178px;top:3540px;flex-direction:column;gap:20px;}
.cta--studio span{color:#fff}
.cta--yt{left:665px;top:4389px}
.cta--yt span{color:#aca392}

/* -------------------- Artists -------------------- */
.artists{
  position:absolute;left:170px;top:2122px;width:1240px;
  display:flex;gap:20px;z-index:12;
}
.artist-card{
  position:relative;width:380px;height:600px;flex:0 0 380px;
}
.artist-card__photo{
  width:380px;height:570px;margin-top:19px;overflow:hidden;
  background:#111;
}
.artist-card__photo img{width:100%;height:100%;object-fit:cover;}
.artist-card__name{
  position:absolute;left:9px;top:539px;
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:300;
  font-size:96px;color:#aca392;white-space:nowrap;line-height:1;
}
.artist-card__role{
  position:absolute;left:8px;top:0;
  writing-mode:vertical-rl;
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:39px;color:#aca392;
  letter-spacing:-.06em;
}
.artist-card__role span{transform:scaleX(.64);transform-origin:top;display:inline-block;}
.artist-card__badge{
  position:absolute;left:347px;top:227px;
  writing-mode:vertical-rl;
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:300;
  font-size:32px;color:#aca392;white-space:nowrap;line-height:1;
  transform:rotate(180deg);
}
.artist-card__logo{position:absolute;left:278px;top:7px;width:91px;height:91px;}
.artist-card__arrow{position:absolute;left:302px;top:539px;width:70px;height:62px;}

.artist-label{
  position:absolute;left:170px;top:2122px;width:131px;height:600px;z-index:13;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  mix-blend-mode:difference;
}
.artist-label__jp{
  writing-mode:vertical-rl;
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:136px;color:#fff;
  letter-spacing:-.06em;line-height:.94;transform:scaleX(.64);
}
.artist-label__en{
  writing-mode:vertical-rl;
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:700;
  font-size:68px;color:#fff;
  margin-top:20px;
}

.artist-nav{
  position:absolute;left:220px;top:2732px;width:380px;
  display:flex;align-items:center;gap:40px;z-index:14;
}
.artist-nav img{width:60px;height:60px}
.artist-nav__line{flex:1;height:3px;width:auto;object-fit:contain;}

/* -------------------- Studio -------------------- */
.studio-bg{
  position:absolute;left:0;top:2903px;width:1440px;height:804px;overflow:hidden;
  box-shadow:inset 0 4px 194.6px 0 #695635;z-index:7;
}
.studio-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.65) sepia(.2);}
.studio-label{
  position:absolute;left:-14px;top:2913px;width:128px;height:446px;
  display:flex;align-items:center;justify-content:center;z-index:15;
}
.studio-label__jp,.studio-label__en{color:#fff;text-align:center;white-space:nowrap;line-height:.94}
.studio-label{gap:12px;}
.studio-label{flex-direction:column;}
.studio-label__jp{
  writing-mode:vertical-rl;font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:136px;letter-spacing:-.06em;transform:scaleX(.64);
}
.studio-label__en{
  writing-mode:vertical-rl;
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:700;font-size:68px;
}

.studio-address{
  position:absolute;left:990px;top:2926px;transform:translateX(-50%);
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:300;
  font-size:32px;color:#fff;white-space:nowrap;z-index:15;
}
.studio-photo{
  position:absolute;left:614px;top:3143px;width:212px;height:325px;
  box-shadow:0 4px 45.7px 0 rgba(0,0,0,.46);z-index:15;object-fit:cover;
}
.studio-tagline{
  position:absolute;left:16px;top:3622px;width:355px;
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:36px;color:#fff;
  letter-spacing:-.06em;transform:scaleX(.64);transform-origin:left top;
  line-height:1;z-index:15;
}

/* -------------------- YouTube -------------------- */
.yt-title{
  position:absolute;left:220px;top:3861px;z-index:12;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.yt-title h2{
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:64px;color:#27593a;
  letter-spacing:-.06em;transform:scaleX(.64);transform-origin:left;
  line-height:.94;
}
.yt-title span{
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:700;
  font-size:48px;color:#27593a;
}

.yt-grid{
  position:absolute;left:60px;top:3890px;width:1320px;height:493px;z-index:11;
}
.yt-cell{position:absolute;width:440px;height:246px;overflow:hidden;}
.yt-cell img{width:100%;height:100%;object-fit:cover;}
.yt-cell--a{left:0;top:0}
.yt-cell--b{left:440px;top:0}
.yt-cell--c{left:880px;top:0}
.yt-cell--d{left:220px;top:246px}
.yt-cell--e{left:660px;top:246px}
.yt-badge{
  position:absolute;left:488px;top:75px;width:342px;height:342px;
  mix-blend-mode:screen;pointer-events:none;
}

/* -------------------- Users Guide -------------------- */
.ug-title{
  position:absolute;left:61px;top:4513px;display:flex;gap:12px;align-items:flex-end;z-index:12;
}
.ug-title h2{
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:136px;color:#27593a;
  letter-spacing:-.06em;transform:scaleX(.64);transform-origin:left;
  line-height:.94;
}
.ug-title span{
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:700;
  font-size:68px;color:#27593a;
}

.guide{
  position:absolute;left:0;top:4641px;width:1440px;height:715px;
  display:flex;z-index:11;
}
.guide__tile{
  position:relative;flex:1;height:100%;border:1px solid #d7d7d7;
  padding:40px;text-decoration:none;color:#fff;
  display:flex;gap:20px;align-items:flex-start;justify-content:flex-end;
  overflow:hidden;background:#333;
  transition:filter .3s;
}
.guide__tile:hover{filter:brightness(1.15)}
.guide__tile--1{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url(assets/rect-20.png) center/cover}
.guide__tile--2{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url(assets/asset-12-100-1.png) center/cover}
.guide__tile--3{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url(assets/image-3.png) center/cover}
.guide__tile--4{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url(assets/frame135.png) center/cover}

.guide__inner{display:flex;flex-direction:column;gap:12px;}
.guide__jp{
  writing-mode:vertical-rl;
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:64px;color:#fff;
  letter-spacing:-.06em;transform:scaleX(.64);transform-origin:top;line-height:.94;
}
.guide__en{
  writing-mode:vertical-rl;
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:700;
  font-size:32px;color:#aca392;
}
.guide__body{
  writing-mode:vertical-rl;
  font-family:"Noto Serif JP",serif;font-weight:500;font-size:16px;color:#fff;
  line-height:1;letter-spacing:.01em;text-align:center;
  font-feature-settings:"vert","palt";
}

/* -------------------- Footer -------------------- */
.foot{
  position:absolute;left:0;top:5383px;width:1440px;height:753px;display:flex;
  background:#1c1c1c;z-index:10;
}
.foot::before{
  content:"";position:absolute;inset:0;
  background:url(assets/texture-da2d7ea2.png) center/cover;opacity:.05;mix-blend-mode:multiply;pointer-events:none;
}
.foot__left{
  width:509px;padding:40px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:30px;position:relative;
}
.foot__logo-photo{width:183px;height:280px;object-fit:cover;margin-top:60px;}
.foot__brand{display:flex;gap:40px;align-items:center;}
.foot__brand img:first-child{width:44px;filter:invert(1)}
.foot__brand img:last-child{width:48px;height:34px;filter:invert(1)}
.foot__copy{
  font-family:"Noto Serif JP",serif;font-weight:500;font-size:14px;
  color:#fff;text-align:center;letter-spacing:.01em;
}
.foot__right{flex:1;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;}
.foot__row{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:0 60px;color:#fff;text-decoration:none;position:relative;overflow:hidden;
  background:#1c1c1c;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .3s;
}
.foot__row:hover{background:#25292e}
.foot__row:nth-child(2){background:linear-gradient(rgba(28,28,28,.85),rgba(28,28,28,.85)),url(assets/frame1229.png) center/cover}
.foot__row:nth-child(3){background:linear-gradient(rgba(28,28,28,.85),rgba(28,28,28,.85)),url(assets/frame1230.png) center/cover}
.foot__row:nth-child(4){background:linear-gradient(rgba(28,28,28,.85),rgba(28,28,28,.85)),url(assets/frame1231.png) center/cover}
.foot__row-title{display:flex;gap:12px;align-items:flex-end;}
.foot__row-jp{
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:48px;color:#fff;
  letter-spacing:-.06em;transform:scaleX(.64);transform-origin:left;
  display:inline-block;white-space:nowrap;
}
.foot__row-en{
  font-family:"Playfair Display SC",serif;font-style:italic;font-weight:700;
  font-size:32px;color:#aca392;white-space:nowrap;
}
.foot__row-en em{color:#fff;font-weight:300}
.foot__row-links{
  font-family:"Shippori Mincho B1",serif;font-weight:500;font-size:16px;
  color:#fff;letter-spacing:.01em;
}

/* body-level scale wrapper (JS scales .page for smaller viewports) */
@media (max-width:1439px){
  body{overflow-x:hidden}
}